/* ==========================================================================
   「灯 - Tomori -」Soul Numerology Oracle & Landing Page Style System
   Faithful Refined Edition (元デザイン忠実ブラッシュアップ版)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Shippori+Mincho:wght@400;500;600;700&display=swap');

:root {
  --bg-primary: #FAF7F2;
  --bg-card: #FCF9F2;
  --bg-sheet: #FCF9F2;
  --bg-pill: #EFE7DA;
  --bg-tag: #FAF5EC;
  --border-gold-main: #B89758;
  --border-gold-thin: #C6A86E;
  --border-gold-tag: #D6C2A0;

  --text-main: #2A211D;
  --text-sub: #5C4E46;
  --text-muted: #8A7A71;
  --text-gold: #8C6D32;

  --gold-gradient: linear-gradient(135deg, #ECCF8D 0%, #B89758 50%, #8C6D32 100%);
  --shadow-card: 0 14px 36px rgba(42, 33, 29, 0.09), 0 4px 12px rgba(184, 151, 88, 0.12);

  --font-en: 'Cinzel', 'Georgia', serif;
  --font-en-italic: 'Cormorant Garamond', serif;
  --font-jp: 'Shippori Mincho', 'BIZ UDMincho', 'Yu Mincho', serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-jp);
  line-height: 1.8;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(245, 235, 215, 0.5) 0%, transparent 60%),
    radial-gradient(circle at 10% 40%, rgba(235, 220, 195, 0.3) 0%, transparent 40%),
    radial-gradient(circle at 90% 70%, rgba(235, 220, 195, 0.3) 0%, transparent 40%);
  background-attachment: fixed;
}

/* Header */
.site-header {
  text-align: center;
  padding: 3rem 1.5rem 1rem;
}

.brand-crest .crest-lantern {
  font-size: 2.5rem;
  display: inline-block;
  filter: drop-shadow(0 0 14px rgba(255, 180, 71, 0.7));
}

.brand-title {
  font-size: 2.2rem;
  letter-spacing: 0.35em;
  margin-left: 0.35em;
  font-weight: 600;
}

.brand-subtitle {
  font-family: var(--font-en);
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  color: var(--text-gold);
  margin-top: 0.2rem;
}

.ornament-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1rem auto 0;
  max-width: 300px;
}
.ornament-line::before, .ornament-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-gold-thin);
}
.ornament-star {
  color: var(--border-gold-main);
  font-size: 0.85rem;
}

/* Hero */
.hero-section {
  max-width: 860px;
  margin: 1.5rem auto 3.5rem;
  padding: 0 1.5rem;
  text-align: center;
}

.hero-tag {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--text-gold);
  border: 1px solid var(--border-gold-thin);
  padding: 0.25rem 1.2rem;
  border-radius: 999px;
  background: rgba(253, 251, 247, 0.8);
  margin-bottom: 1.2rem;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.hero-description {
  font-size: 1rem;
  color: var(--text-sub);
  max-width: 680px;
  margin: 0 auto 2.2rem;
  line-height: 1.9;
}

.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--gold-gradient);
  color: #FFF;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.15em;
  padding: 1rem 2.5rem;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(184, 151, 88, 0.35);
  transition: all 0.25s ease;
}
.hero-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(184, 151, 88, 0.5);
}

/* Calculator Box */
.calc-section {
  max-width: 760px;
  margin: 0 auto 4.5rem;
  padding: 0 1.5rem;
}
.calc-box {
  background: var(--bg-card);
  border: 1.5px solid var(--border-gold-main);
  border-radius: 12px;
  padding: 2.8rem 2rem;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.calc-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
}
.calc-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.8rem;
}
.calc-form-grid {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}
.select-wrapper {
  flex: 1;
  min-width: 130px;
  max-width: 170px;
}
.custom-select {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--font-jp);
  font-size: 0.95rem;
  color: var(--text-main);
  background: #FFF;
  border: 1px solid var(--border-gold-thin);
  border-radius: 4px;
  outline: none;
}
.calc-action-btn {
  background: var(--gold-gradient);
  color: #FFF;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  padding: 0.9rem 2.8rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(184, 151, 88, 0.35);
  transition: all 0.25s ease;
}
.calc-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(184, 151, 88, 0.45);
}

/* Result Area */
#calc-result-area {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px dashed var(--border-gold-thin);
}
#calc-result-area.hidden { display: none; }
.result-celebration { text-align: center; margin-bottom: 2rem; }
.result-badge-top {
  font-family: var(--font-en);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--text-gold);
}
.birth-display { font-size: 0.9rem; color: var(--text-muted); margin: 0.2rem 0; }
.result-number-hero {
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 700;
  color: var(--text-gold);
  line-height: 1.1;
  margin: 0.3rem 0;
}
.result-hero-title { font-size: 1.6rem; font-weight: 600; margin-bottom: 0.3rem; }
.result-hero-quote { font-style: italic; color: var(--text-sub); font-size: 0.95rem; }
.result-card-display { display: flex; justify-content: center; }

/* Gallery Section */
.gallery-section {
  max-width: 1240px;
  margin: 0 auto 5rem;
  padding: 0 1.5rem;
}
.section-head { text-align: center; margin-bottom: 2.5rem; }
.section-tag { font-family: var(--font-en); font-size: 0.78rem; letter-spacing: 0.3em; color: var(--text-gold); }
.section-title { font-size: 2.1rem; font-weight: 600; letter-spacing: 0.15em; margin: 0.3rem 0; }
.section-desc { font-size: 0.95rem; color: var(--text-sub); }

.filter-tabs { display: flex; justify-content: center; gap: 0.8rem; margin-bottom: 3rem; }
.filter-tab {
  background: transparent;
  border: 1px solid var(--border-gold-thin);
  color: var(--text-sub);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-tab.active {
  background: var(--gold-gradient);
  color: #FFF;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(184, 151, 88, 0.3);
}

/* Cards Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2.5rem;
}

/* ==========================================================================
   Faithful Oracle Card Component (元デザインの完全再現)
   ========================================================================== */
.oracle-card-wrapper.faithful-style {
  perspective: 1400px;
  height: 640px;
  position: relative;
}

.oracle-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: var(--shadow-card);
  border-radius: 16px;
}

.oracle-card-wrapper.is-flipped .oracle-card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
  background: var(--bg-sheet);
  overflow: hidden;
  box-sizing: border-box;
}

/* Faithful Double Border */
.faithful-outer-border {
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 2px solid var(--border-gold-main);
  border-radius: 12px;
  box-sizing: border-box;
}

.faithful-inner-border {
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 1px solid var(--border-gold-thin);
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Front Face */
.card-front {
  text-align: center;
  background: radial-gradient(circle at 50% 30%, #FFFDF9 0%, #F5EFEB 100%);
}

.card-front.has-cover-image {
  background-size: cover;
  background-position: center;
}

.cover-overlay-click {
  width: 100%; height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2rem;
  background: linear-gradient(to top, rgba(42, 33, 29, 0.6) 0%, transparent 40%);
  cursor: pointer;
}

.flip-hint-btn {
  background: var(--bg-pill);
  border: 1px solid var(--border-gold-main);
  color: var(--text-gold);
  font-family: var(--font-jp);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.flip-hint-btn:hover {
  background: var(--border-gold-main);
  color: #FFF;
}
.flip-hint-btn.on-cover {
  background: #FFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.front-header-emblem {
  margin-top: 2.5rem;
}
.emblem-circle {
  width: 88px; height: 88px;
  border: 2px solid var(--border-gold-main);
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFF;
  box-shadow: inset 0 0 0 2px rgba(184, 151, 88, 0.2);
}
.emblem-lp-label { font-family: var(--font-en); font-size: 0.75rem; color: var(--text-gold); }
.emblem-num { font-family: var(--font-en); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--text-main); }
.front-title { font-size: 1.35rem; font-weight: 600; margin: 1.2rem 1rem 0.2rem; }
.front-subtitle { font-family: var(--font-en); font-size: 0.78rem; color: var(--text-gold); font-style: italic; }
.front-illustration-box { margin: 1.5rem 0; font-size: 2.5rem; }
.symbol-caption { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.3rem; }
.front-quote { font-size: 0.88rem; font-style: italic; color: var(--text-sub); padding: 0 1.5rem; }
.front-footer-sign {
  margin-top: auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(184, 151, 88, 0.25);
}

/* ==========================================================================
   Faithful Back Face (元デザインの完全再現シート)
   ========================================================================== */
.card-back.faithful-sheet {
  transform: rotateY(180deg);
  background: #FCF9F2;
  text-align: left;
}

.sheet-padding {
  padding: 1.4rem 1.2rem;
  overflow-y: auto;
}

/* Sheet Header */
.sheet-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.sheet-emblem-wrap {
  position: relative;
  flex-shrink: 0;
}
.sheet-emblem {
  width: 58px; height: 58px;
  border: 1.8px solid var(--border-gold-main);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFF;
  box-shadow: inset 0 0 0 1.5px rgba(184, 151, 88, 0.3);
}
.sheet-emblem .emblem-tag { font-family: var(--font-en); font-size: 0.65rem; color: var(--text-gold); line-height: 1; }
.sheet-emblem .emblem-val { font-family: var(--font-en); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--text-main); }
.wreath-leaves {
  position: absolute;
  top: -4px; right: -8px;
  font-size: 0.9rem;
}
.sheet-title-group {
  flex: 1;
}
.theme-pill {
  display: inline-block;
  background: var(--bg-pill);
  color: var(--text-gold);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.65rem;
  border-radius: 12px;
  margin-bottom: 0.2rem;
}
.sheet-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}
.sheet-top-flower { font-size: 1.4rem; }

/* Faithful Sections */
.faithful-section {
  background: #FFF;
  border: 1.2px solid var(--border-gold-main);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.9rem;
  position: relative;
}

.section-pill-label {
  display: inline-block;
  background: var(--bg-pill);
  color: var(--text-gold);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.8rem;
  border-radius: 12px;
  margin-bottom: 0.5rem;
}

/* Tags in Sec 1 */
.faithful-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.faithful-tag {
  background: var(--bg-tag);
  border: 1px solid var(--border-gold-tag);
  font-size: 0.74rem;
  color: var(--text-main);
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
}

/* Energy Text */
.faithful-energy-text {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-sub);
}

/* Dual Traits & Keys */
.dual-traits-container, .dual-keys-container {
  display: flex;
  gap: 0.6rem;
}
.trait-column, .key-column {
  flex: 1;
}
.column-divider {
  width: 1px;
  border-left: 1px dashed var(--border-gold-tag);
}
.trait-column ul, .key-column ul {
  list-style: none;
}
.trait-column li, .key-column li {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-main);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
}
.dot {
  font-size: 0.55rem;
  color: var(--text-sub);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* Key Icon Header */
.key-pill-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.key-icon {
  font-size: 1.1rem;
}

/* Sheet Footer */
.sheet-footer {
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding-top: 0.5rem;
}
.footer-line {
  flex: 1;
  height: 1px;
  background: var(--border-gold-thin);
}
.sheet-brand-sign {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--text-main);
}
.return-btn {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
}

/* Result Card Extra */
.result-card {
  width: 100%;
  max-width: 580px;
  height: 680px;
}
.print-card-btn {
  background: var(--gold-gradient);
  color: #FFF;
  border: none;
  font-size: 0.8rem;
  padding: 0.35rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
}

/* Site Footer */
.site-footer {
  text-align: center;
  padding: 2.5rem 1.5rem;
  border-top: 1px solid rgba(184, 151, 88, 0.2);
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .hero-title { font-size: 2rem; }
  .cards-grid { grid-template-columns: 1fr; }
  .dual-traits-container, .dual-keys-container { flex-direction: column; }
  .column-divider { display: none; }
}

/* Footer: another light (a quiet one-line lead-in to the sister site) */
.footer-sister {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--text-sub); /* --text-muted は 3.85:1 で薄すぎる（AA=4.5）。--text-sub は 7.46:1 */
  letter-spacing: 0.04em;
}
.footer-sister a {
  color: var(--text-gold);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}
.footer-sister a:hover {
  text-decoration-style: solid;
}

/* ==========================================================================
   Print (added at publication, 2026-09-20): the result sheet's own button calls
   window.print(). Without these rules the whole page printed (A4 x 7) and the
   sheet was cut off inside its fixed 640px, inner-scrolling frame.
   - When a result is showing, print only the result sheet (body:has() — older
     browsers ignore the selector and simply print the whole page as before).
   - Release the fixed height / absolute faces / inner scroll of the result card only
     (gallery cards keep their flip layout; their back face is mirrored in print).
   ========================================================================== */
@media print {
  body:has(#calc-result-area:not(.hidden)) :is(.site-header, .hero-section, .gallery-section,
    .philosophy-section, .site-footer, .calc-title, .calc-subtitle, .calc-form-grid, .calc-action-btn) {
    display: none !important;
  }
  .print-card-btn { display: none !important; }
  body { background: #fff !important; }
  #calc-result-area { margin-top: 0; padding-top: 0; border-top: 0; }
  .calc-box { border: 0; box-shadow: none; padding: 0; }
  .oracle-card-wrapper.faithful-style.result-card { height: auto; perspective: none; }
  .result-card .oracle-card-inner { box-shadow: none; transform: none; }
  .result-card .card-face, .result-card .faithful-outer-border, .result-card .faithful-inner-border { position: static; }
  .result-card .sheet-padding { overflow: visible; }
}