/* ================================================
   기연 공용 스타일시트 (style.css)
   페르소나별로 :root { --accent: ... } 값만 오버라이드하면
   전체 톤(배경/타이포/레이아웃)은 그대로 유지된 채 강조색만 바뀝니다.
   ================================================ */

:root{
  --bg: #14162B;
  --surface: #1D2040;
  --surface-2: #262A52;
  --gold: #E8B75C;
  --accent: #D6636F; /* 페르소나별로 오버라이드 */
  --cream: #F5F1E8;
  --muted: #9B9BC0;
  --line: rgba(245,241,232,0.1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ background:var(--bg); color:var(--cream); font-family:'Pretendard', sans-serif; line-height:1.6; overflow-x:hidden; }
.serif{font-family:'Noto Serif KR', serif;}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}

body::before{
  content:""; position:fixed; inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(245,241,232,0.4) 0, transparent 100%),
    radial-gradient(1px 1px at 70% 60%, rgba(245,241,232,0.3) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(245,241,232,0.3) 0, transparent 100%),
    radial-gradient(1px 1px at 85% 15%, rgba(245,241,232,0.35) 0, transparent 100%),
    radial-gradient(1px 1px at 55% 45%, rgba(245,241,232,0.25) 0, transparent 100%);
  background-size:100% 100%; pointer-events:none; z-index:0;
}

.wrap{max-width:520px; margin:0 auto; position:relative; z-index:1;}

.moon-dial{ position:fixed; top:18px; right:18px; width:44px; height:44px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line); z-index:50; overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.4); }
.moon-dial-fill{ position:absolute; left:0; bottom:0; width:100%; height:0%;
  background:linear-gradient(180deg, var(--gold), #C98A3A); transition:height 0.15s ease-out; }
.moon-dial-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:9px; color:var(--muted); z-index:2; mix-blend-mode:difference; }

header.hero{ padding:80px 24px 56px; text-align:center; }
.hero-portrait{
  max-width:280px; margin:0 auto 32px; border-radius:20px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.5); border:1px solid var(--line);
}
.hero-portrait img{ display:block; width:100%; height:auto; }
.eyebrow{ font-size:12px; color:var(--accent); letter-spacing:0.15em; margin-bottom:18px; font-family:'IBM Plex Mono', monospace; }
h1.headline{ font-size:32px; line-height:1.4; font-weight:700; margin-bottom:16px; }
h1.headline .accent{color:var(--accent);}
.sub{ color:var(--muted); font-size:15px; max-width:360px; margin:0 auto 32px; }
.cta-primary{ display:inline-block; background:var(--accent); color:var(--bg); font-weight:700;
  padding:16px 36px; border-radius:100px; text-decoration:none; font-size:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35); border:none; cursor:pointer; }

section{padding:56px 24px; border-top:1px solid var(--line);}

.persona-card{ display:flex; gap:16px; align-items:center; background:var(--surface);
  border-radius:20px; padding:24px; border:1px solid var(--line); }
.persona-avatar{ width:64px; height:64px; border-radius:50%; flex-shrink:0; }
.persona-name{font-size:18px; font-weight:700; margin-bottom:4px;}
.persona-desc{font-size:13px; color:var(--muted);}

.quiz-box{ background:var(--surface); border-radius:20px; padding:32px 24px; border:1px solid var(--line); }
.quiz-title{font-size:20px; font-weight:700; margin-bottom:8px;}
.quiz-note{font-size:13px; color:var(--muted); margin-bottom:20px;}

.date-field{ display:flex; gap:8px; margin-bottom:20px; }
.date-field input, .date-field select{ flex:1; background:var(--surface-2); border:1px solid var(--line);
  color:var(--cream); border-radius:12px; padding:14px; font-size:14px; font-family:'Pretendard', sans-serif; }
.date-field input::-webkit-calendar-picker-indicator{ filter:invert(0.8); }

.quiz-option{ display:block; width:100%; background:var(--surface-2); color:var(--cream);
  border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:10px;
  font-size:14px; text-align:left; cursor:pointer; transition:border-color 0.2s; font-family:'Pretendard', sans-serif; }
.quiz-option:active{border-color:var(--accent);}
.btn-analyze{ width:100%; background:var(--accent); color:var(--bg); font-weight:700;
  padding:16px; border-radius:14px; border:none; font-size:15px; cursor:pointer; margin-top:4px; }
.btn-analyze:disabled{opacity:0.4;}

.quiz-result{ display:none; margin-top:20px; }
.quiz-result.show{display:block;}

.fortune-card{
  border-radius:16px; padding:24px 20px; text-align:center;
  border:1px solid rgba(232,183,92,0.35);
  background:linear-gradient(180deg, rgba(232,183,92,0.10), rgba(232,183,92,0.03));
}
.fortune-card.grade-caution{
  border-color:rgba(193,68,62,0.4);
  background:linear-gradient(180deg, rgba(193,68,62,0.12), rgba(193,68,62,0.03));
}
.fortune-card.grade-neutral{
  border-color:rgba(94,155,214,0.35);
  background:linear-gradient(180deg, rgba(94,155,214,0.10), rgba(94,155,214,0.03));
}
.fortune-eyebrow{ font-size:11px; color:var(--muted); margin-bottom:6px; }
.fortune-badge{ font-size:19px; font-weight:700; margin-bottom:2px; }
.fortune-badge.grade-good{ color:var(--gold); }
.fortune-badge.grade-caution{ color:#E8827D; }
.fortune-badge.grade-neutral{ color:#8FB6E8; }
.fortune-top3{ font-size:12px; color:var(--muted); letter-spacing:0.15em; margin-bottom:18px; font-family:'IBM Plex Mono', monospace; }
.fortune-date-row{
  display:flex; align-items:center; justify-content:space-between;
  text-align:left; margin-bottom:12px;
}
.fortune-date{ font-size:15px; font-weight:700; }
.fortune-gauge{ display:flex; gap:4px; }
.fortune-gauge .dot{
  width:12px; height:12px; border-radius:50%;
  background:rgba(245,241,232,0.15);
}
.fortune-gauge .dot.filled{ background:var(--gold); }
.fortune-card.grade-caution .fortune-gauge .dot.filled{ background:#C1443E; }
.fortune-card.grade-neutral .fortune-gauge .dot.filled{ background:#5E9BD6; }
.fortune-desc{ font-size:15px; text-align:left; line-height:1.6; }
.fortune-sub{ font-size:12px; color:var(--muted); text-align:left; margin-top:10px; line-height:1.6; }

.locked-box{
  margin-top:16px; padding:22px 18px; border-radius:14px;
  border:1.5px dashed rgba(232,183,92,0.4);
  background:rgba(232,183,92,0.04);
  text-align:center;
}
.locked-icon{ font-size:22px; margin-bottom:8px; }
.locked-title{ font-size:14px; font-weight:700; margin-bottom:14px; }
.locked-list{ list-style:none; text-align:left; }
.locked-list li{
  font-size:13px; color:var(--muted); padding:7px 0 7px 22px; position:relative;
  border-top:1px solid var(--line);
}
.locked-list li:first-child{ border-top:none; }
.locked-list li::before{
  content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:700;
}

.share-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.btn-share{ flex:1 1 140px; background:var(--surface-2); border:1px solid var(--gold); color:var(--gold);
  padding:12px; border-radius:12px; font-size:13px; font-weight:700; cursor:pointer; font-family:'Pretendard', sans-serif; }
.btn-share:disabled{ opacity:0.6; cursor:default; }
.btn-share-link{ text-decoration:none; display:flex; align-items:center; justify-content:center; text-align:center; }

/* 리포트 페이지 하단 후기 유도 */
.review-prompt{ margin:0 24px 20px; text-align:center; }
.review-prompt-text{ font-size:13px; color:var(--muted); margin-bottom:12px; line-height:1.6; }
.review-prompt .btn-share-link{ max-width:220px; margin:0 auto; }

/* 보관함 */
.archive-empty{ padding:60px 24px; text-align:center; color:var(--muted); font-size:13px; line-height:1.7; }
.archive-empty a{ color:var(--gold); text-decoration:none; }
.archive-list{ padding:8px 24px 24px; display:flex; flex-direction:column; gap:12px; }
.archive-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; }
.archive-card-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.archive-avatar{ width:36px; height:36px; border-radius:50%; flex-shrink:0; }
.archive-card-meta{ flex:1; min-width:0; }
.archive-persona{ font-size:13px; font-weight:700; }
.archive-date{ font-size:11px; color:var(--muted); margin-top:2px; }
.archive-delete{ background:none; border:none; color:var(--muted); font-size:14px; cursor:pointer; padding:4px; flex-shrink:0; }
.archive-element-row{ font-size:13px; margin-bottom:8px; }
.archive-element-row strong{ color:var(--gold); }
.archive-text{ font-size:13px; line-height:1.6; color:var(--cream); margin-bottom:10px; }
.archive-sub-row{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); font-family:'IBM Plex Mono', monospace; margin-bottom:10px; }
.archive-link{ font-size:12px; color:var(--gold); text-decoration:none; font-weight:700; }

/* 후기 작성 페이지 */
.review-form{ padding:24px; }
.review-form-persona{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.review-form-avatar{ width:40px; height:40px; border-radius:50%; flex-shrink:0; }
.review-form-title{ font-size:15px; font-weight:700; }
.review-form-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.star-rating{ display:flex; gap:8px; margin-bottom:22px; }
.star-rating .star{ font-size:32px; color:var(--surface-2); background:none; border:none; cursor:pointer; padding:0; line-height:1; }
.star-rating .star.filled{ color:var(--gold); }
.review-field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:8px; }
.review-textarea{
  width:100%; min-height:120px; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:14px; color:var(--cream); font-size:14px; line-height:1.6; font-family:'Pretendard', sans-serif; resize:vertical;
}
.review-nickname{
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; color:var(--cream); font-size:14px; font-family:'Pretendard', sans-serif; margin-top:16px;
}
.review-submit{
  width:100%; margin-top:22px; padding:15px; border-radius:12px; border:none; background:var(--gold); color:var(--bg);
  font-size:15px; font-weight:700; cursor:pointer; font-family:'Pretendard', sans-serif;
}
.review-submit:disabled{ opacity:0.5; cursor:default; }
.review-hint{ font-size:11px; color:var(--muted); margin-top:8px; }
.review-success{ display:none; padding:60px 24px; text-align:center; }
.review-success-icon{ font-size:40px; margin-bottom:16px; }
.review-success-title{ font-size:16px; font-weight:700; margin-bottom:8px; }
.review-success-sub{ font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:24px; }

/* 내 정보 페이지 */
.myinfo-guest{ padding:60px 24px; text-align:center; color:var(--muted); font-size:13px; line-height:1.7; }
.myinfo-guest a{ color:var(--gold); text-decoration:none; font-weight:700; }
.myinfo-profile-header{ display:flex; align-items:center; gap:12px; padding:24px; border-bottom:1px solid var(--line); }
.myinfo-avatar{ width:48px; height:48px; border-radius:50%; flex-shrink:0; background:radial-gradient(circle at 30% 30%, var(--gold), #8A5A1E); }
.myinfo-nickname{ font-size:16px; font-weight:700; }
.myinfo-nickname-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.myinfo-section{ padding:22px 24px; border-bottom:1px solid var(--line); }
.myinfo-section-title{ font-size:14px; font-weight:700; margin-bottom:14px; }
.myinfo-field{ margin-bottom:14px; }
.myinfo-field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.myinfo-field input, .myinfo-field select{
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; color:var(--cream); font-size:14px; font-family:'Pretendard', sans-serif;
}
.myinfo-save-btn{
  width:100%; margin-top:6px; padding:13px; border-radius:12px; border:none; background:var(--gold); color:var(--bg);
  font-size:14px; font-weight:700; cursor:pointer; font-family:'Pretendard', sans-serif;
}
.myinfo-form-msg{ font-size:12px; margin-top:10px; display:none; }
.myinfo-form-msg.ok{ color:var(--gold); }
.myinfo-form-msg.error{ color:#E86B5C; }
.myinfo-empty{ font-size:12px; color:var(--muted); padding:6px 0; }
.myinfo-row{ padding:12px 0; border-bottom:1px solid var(--line); }
.myinfo-row:last-child{ border-bottom:none; }
.myinfo-row-main{ font-size:13px; font-weight:700; margin-bottom:4px; }
.myinfo-row-sub{ font-size:12px; color:var(--muted); line-height:1.5; }
.myinfo-status{ font-size:11px; font-weight:400; color:var(--muted); }
.myinfo-status.approved{ color:var(--gold); }
.myinfo-link{ font-size:12px; color:var(--gold); text-decoration:none; font-weight:700; display:inline-block; margin-top:10px; }
.myinfo-danger{ padding:22px 24px 40px; }
.myinfo-danger-text{ font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:14px; }
.myinfo-withdraw-btn{
  background:none; border:1px solid var(--line); color:var(--muted); padding:10px 16px; border-radius:100px;
  font-size:12px; cursor:pointer; font-family:'Pretendard', sans-serif;
}

/* 관리자 - 후기 승인 화면 */
.admin-key-gate{ padding:80px 24px; text-align:center; }
.admin-key-gate-title{ font-size:16px; font-weight:700; margin-bottom:16px; }
.admin-key-form{ max-width:280px; margin:0 auto; }
.admin-key-form input{
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; color:var(--cream); font-size:14px; font-family:'Pretendard', sans-serif; margin-bottom:12px;
}
.admin-key-form button{
  width:100%; padding:12px; border-radius:12px; border:none; background:var(--gold); color:var(--bg);
  font-size:14px; font-weight:700; cursor:pointer; font-family:'Pretendard', sans-serif;
}
.admin-key-error{ display:none; font-size:12px; color:#E86B5C; margin-top:10px; }
.admin-tabs{ display:flex; gap:8px; padding:16px 24px 0; }
.admin-tab{
  background:var(--surface); border:1px solid var(--line); color:var(--muted); padding:8px 16px; border-radius:100px;
  font-size:12px; cursor:pointer; font-family:'Pretendard', sans-serif;
}
.admin-tab.active{ background:var(--gold); border-color:var(--gold); color:var(--bg); font-weight:700; }
.admin-empty{ padding:60px 24px; text-align:center; color:var(--muted); font-size:13px; }
.admin-review-list{ padding:16px 24px 24px; display:flex; flex-direction:column; gap:12px; }
.admin-review-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; }
.admin-review-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:10px; }
.admin-review-meta{ font-size:12px; font-weight:700; }
.admin-review-date{ font-size:11px; color:var(--muted); flex-shrink:0; }
.admin-review-stars{ color:var(--gold); font-size:14px; margin-bottom:8px; }
.admin-review-text{ font-size:13px; line-height:1.6; color:var(--cream); margin-bottom:14px; }
.admin-review-actions{ display:flex; gap:8px; }
.admin-btn{
  flex:1; padding:9px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--cream); font-size:12px; cursor:pointer; font-family:'Pretendard', sans-serif;
}
.admin-btn.approve{ background:var(--gold); color:var(--bg); border-color:var(--gold); font-weight:700; }
.admin-btn.unapprove{ color:var(--muted); }
.admin-btn.delete{ color:#E86B5C; border-color:#E86B5C; }

.section-title{ font-size:20px; font-weight:700; margin-bottom:24px; }
.review{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.review:last-child{border-bottom:none;}
.review-avatar{ width:36px; height:36px; border-radius:50%; background:var(--surface-2); flex-shrink:0; }
.review-meta{ font-size:12px; color:var(--muted); margin-bottom:4px; }
.review-meta .time{margin-left:8px; font-family:'IBM Plex Mono', monospace;}
.review-text{font-size:14px;}

.product-card{ background:var(--surface); border-radius:20px; padding:24px; border:1px solid var(--line); margin-bottom:16px; }
.product-badge{ display:inline-block; background:var(--accent); color:var(--bg); font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:100px; margin-bottom:12px; font-family:'IBM Plex Mono', monospace; }
.product-title{font-size:17px; font-weight:700; margin-bottom:6px;}
.product-desc{font-size:13px; color:var(--muted); margin-bottom:16px;}
.product-cta{ display:block; text-align:center; background:var(--surface-2); border:1px solid var(--gold);
  color:var(--gold); padding:12px; border-radius:12px; text-decoration:none; font-size:14px; font-weight:700; }

.other-personas{ display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
.other-persona-chip{ flex-shrink:0; width:120px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:16px 14px; text-decoration:none; color:var(--cream); }
.other-persona-chip .chip-avatar{ width:40px; height:40px; border-radius:50%; margin-bottom:10px; }
.other-persona-chip .chip-name{font-size:13px; font-weight:700; margin-bottom:2px;}
.other-persona-chip .chip-cat{font-size:11px; color:var(--muted);}

footer{ padding:40px 24px 60px; text-align:center; color:var(--muted); font-size:12px; }
footer .disclaimer{ margin-top:16px; opacity:0.7; line-height:1.7; }

.webtoon-name-field{ margin-bottom:40px; }
.webtoon-name-field label{ display:block; font-size:12px; color:var(--muted); text-align:center; margin-bottom:10px; }
.webtoon-name-field input{
  display:block; width:100%; background:var(--surface-2); border:1px solid var(--line);
  color:var(--cream); border-radius:100px; padding:14px; font-size:14px;
  font-family:'Pretendard', sans-serif; text-align:center;
}

/* 이름 입력 + 확인 버튼 (실시간 반영 대신 확인 후 순차 노출) */
.name-input-row{ display:flex; gap:8px; }
.name-input-row input{
  flex:1; background:var(--surface-2); border:1px solid var(--line); color:var(--cream);
  border-radius:100px; padding:14px; font-size:14px; font-family:'Pretendard', sans-serif; text-align:center;
}
.name-confirm-btn{
  flex-shrink:0; background:var(--accent); color:var(--bg); border:none; border-radius:100px;
  padding:0 22px; font-size:14px; font-weight:700; cursor:pointer; font-family:'Pretendard', sans-serif;
}
.name-confirm-btn:disabled{ opacity:0.5; cursor:default; }

/* 확인 후 순차 노출되는 인트로 문장 (컴팩트 웹툰형) */
.intro-sequence{ margin-top:16px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.intro-avatar{ width:60px; height:60px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.intro-line{ max-width:300px; }
.webtoon-bubble.intro-line{ padding:0px 16px; font-size:14px; line-height:1.5; }
.webtoon-bubble.intro-line.show{ padding:10px 16px; }

/* 확인 전에는 아바타·문장 모두 완전히 접혀 있어 공간을 차지하지 않다가,
   확인 후 하나씩 높이 + 간격(margin) + 세로 padding까지 함께 자연스럽게 펼쳐짐 */
.intro-reveal-item{
  opacity:0; max-height:0; margin-top:0; overflow:hidden;
  transform:translateY(10px);
  transition:opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease, padding 0.4s ease;
}
.intro-reveal-item.show{ opacity:1; transform:translateY(0); max-height:160px; margin-top:14px; }
.intro-avatar.intro-reveal-item.show{ max-height:60px; }
.webtoon-panel{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  opacity:0; transform:translateY(24px);
  transition:opacity 0.6s ease, transform 0.6s ease;
  margin-bottom:52px;
}
.webtoon-panel.visible{ opacity:1; transform:translateY(0); }
.webtoon-panel:last-child{ margin-bottom:0; }
.webtoon-avatar{ width:84px; height:84px; margin-bottom:14px; flex-shrink:0; }
.webtoon-bubble{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:16px 22px; font-size:15px; line-height:1.6; max-width:300px;
}
/* 오행 순환도 (상생/상극 다이어그램) */
.oheng-diagram-toggle{
  margin-bottom:18px; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--surface);
}
.oheng-diagram-toggle summary{
  padding:14px 16px; font-size:13px; font-weight:700; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between;
}
.oheng-diagram-toggle summary::-webkit-details-marker{ display:none; }
.oheng-diagram-toggle summary::after{ content:"▾"; color:var(--muted); }
.oheng-diagram-toggle[open] summary::after{ content:"▴"; }
.oheng-diagram-body{ padding:6px 16px 20px; }
.oheng-diagram-body svg{ display:block; margin:0 auto; }
.oheng-legend{ display:flex; justify-content:center; gap:20px; margin-top:10px; font-size:11px; color:var(--muted); }
.oheng-legend span{ display:inline-flex; align-items:center; gap:6px; }
.oheng-legend .swatch{ width:14px; height:3px; display:inline-block; }

/* 오행 매칭 추천 */
.signature-recommend{ display:none; margin-top:2px; margin-bottom:14px; }
.signature-recommend.show{ display:block; }
.signature-recommend-label{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.signature-recommend-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.signature-recommend-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  background:var(--surface); border:1px solid var(--gold); color:var(--gold);
  padding:6px 12px; border-radius:100px; text-decoration:none;
}

/* 시그니처 오행 매칭 섹션 (차별화 포인트) */
.signature-section{
  margin:0 24px 32px; padding:26px 22px; border-radius:22px;
  background:linear-gradient(160deg, rgba(232,183,92,0.12), rgba(232,183,92,0.02));
  border:1px solid rgba(232,183,92,0.3);
}
.signature-badge{
  display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono', monospace;
  font-size:11px; color:var(--gold); border:1px solid var(--gold); border-radius:100px;
  padding:4px 10px; margin-bottom:14px;
}
.signature-title{ font-size:18px; font-weight:700; margin-bottom:6px; }
.signature-desc{ font-size:13px; color:var(--muted); margin-bottom:18px; line-height:1.6; }
.today-element-row{
  display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:10px;
}
.today-element-dot{ width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:var(--bg); }
.today-element-text{ font-size:13px; line-height:1.6; }
.today-element-text strong{ color:var(--cream); }
.today-pick{ font-size:12px; color:var(--gold); margin-bottom:18px; padding-left:4px; }
.today-pick a{ color:var(--gold); text-decoration:underline; }
.signature-input-row{ display:flex; gap:8px; margin-bottom:14px; }
.signature-input-row input{
  flex:1; background:var(--surface-2); border:1px solid var(--line); color:var(--cream);
  border-radius:12px; padding:13px 14px; font-size:14px; font-family:'Pretendard', sans-serif;
}
.signature-input-row button{
  flex-shrink:0; background:var(--gold); color:var(--bg); border:none; border-radius:12px;
  padding:0 18px; font-size:13px; font-weight:700; cursor:pointer;
}
.signature-result{ display:none; }
.signature-result.show{ display:block; }
.signature-result-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; margin-bottom:14px; display:flex; align-items:center; gap:14px;
}
.signature-result-element{
  width:48px; height:48px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:19px; color:var(--bg);
}
.signature-result-trait{ font-size:13px; line-height:1.5; }

/* 결과 대시보드 (청월당식 TOP3 카드 대신, 타이트사주식 데이터 시각화 혼합) */
.result-dashboard{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px 20px;
}
.result-element-row{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.result-element-dot{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; color:var(--bg);
}
.result-element-text{ font-size:13px; color:var(--muted); }
.result-element-text strong{ color:var(--cream); font-size:14px; }

.percentile-block{ margin-bottom:22px; }
.percentile-label{ font-size:12px; color:var(--muted); margin-bottom:10px; }
.percentile-value{ font-size:24px; font-weight:900; font-family:'Noto Serif KR', serif; margin-bottom:10px; }
.percentile-value .accent-num{ color:var(--gold); }
.percentile-bar-track{ height:8px; background:var(--surface-2); border-radius:100px; overflow:hidden; }
.percentile-bar-fill{ height:100%; background:linear-gradient(90deg, var(--accent), var(--gold)); border-radius:100px; transition:width 0.6s ease; }

.tension-block{ margin-bottom:22px; padding-top:20px; border-top:1px solid var(--line); }
.tension-label-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.tension-title{ font-size:12px; color:var(--muted); }
.tension-value{ font-size:14px; font-weight:700; }
.tension-track{
  position:relative; height:8px; border-radius:100px; margin:0 9px 10px;
  background:linear-gradient(90deg, #5E9BD6, var(--surface-2) 50%, #C1443E);
}
.tension-marker{
  position:absolute; top:50%; width:18px; height:18px; border-radius:50%;
  background:var(--cream); border:3px solid var(--bg); transform:translate(-50%,-50%);
  box-shadow:0 2px 6px rgba(0,0,0,0.4); transition:left 0.6s ease;
}
.tension-scale{ display:flex; justify-content:space-between; font-size:10px; color:var(--muted); padding:0 2px; }

.result-desc-block{ font-size:14px; line-height:1.7; padding-top:20px; border-top:1px solid var(--line); }

.teaser-list{ margin-top:18px; }
.teaser-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; background:var(--surface-2); border-radius:12px; margin-bottom:8px; font-size:13px;
}
.teaser-item .teaser-text{ display:flex; align-items:center; gap:8px; }
.teaser-item .lock-tag{ font-size:10px; color:var(--muted); font-family:'IBM Plex Mono', monospace; flex-shrink:0; }
.teaser-item .chevron{ color:var(--muted); flex-shrink:0; }

/* 컴팩트 페르소나 인트로 (웹툰 스크롤 없이도 페르소나 목소리를 전달) */
.compact-intro{ display:flex; gap:14px; align-items:center; margin-top:18px; }
.compact-intro img{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex-shrink:0; }

/* 우측 상단 햄버거 메뉴 - 슬라이드인 드로어 */
.side-menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  opacity:0; visibility:hidden; transition:opacity 0.25s ease, visibility 0.25s ease;
  z-index:70;
}
.side-menu-backdrop.show{ opacity:1; visibility:visible; }

.side-menu{
  position:fixed; top:0; right:0; bottom:0; width:min(300px, 82vw);
  background:var(--surface); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform 0.3s ease;
  z-index:71; overflow-y:auto;
}
.side-menu.open{ transform:translateX(0); }

.side-menu-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line);
}
.side-menu-header .icon-btn{ background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; font-family:inherit; padding:0; }

/* 사이드메뉴 상단 계정 영역 - 로그인 전(카카오/전화번호 시작) / 로그인 후(간단 프로필) 목업 */
.side-menu-account{ padding:20px; border-bottom:1px solid var(--line); }
.account-guest-text{ font-size:13px; color:var(--muted); margin-bottom:14px; line-height:1.5; }
.account-login-btn{
  display:block; width:100%; text-align:center; padding:12px; border-radius:10px;
  font-size:13px; font-weight:700; margin-bottom:8px; cursor:pointer; border:none;
  font-family:'Pretendard', sans-serif;
}
.account-login-btn:last-child{ margin-bottom:0; }
.account-login-btn.kakao{ background:#FEE500; color:#3A2A12; }
.account-login-btn.phone{ background:var(--surface-2); color:var(--cream); border:1px solid var(--line); }

.account-profile{ display:flex; align-items:center; gap:12px; }
.account-avatar{ width:44px; height:44px; border-radius:50%; flex-shrink:0; background:radial-gradient(circle at 30% 30%, var(--gold), #8A5A1E); }
.account-info{ flex:1; min-width:0; }
.account-name{ font-size:14px; font-weight:700; margin-bottom:2px; }
.account-sub{ font-size:12px; color:var(--muted); }
.account-sub span{ font-weight:700; }
.account-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.account-manage{ font-size:11px; color:var(--gold); text-decoration:none; }
.account-logout{ font-size:11px; color:var(--muted); background:none; border:none; cursor:pointer; font-family:'Pretendard', sans-serif; padding:0; }

.side-menu-section{ display:flex; flex-direction:column; padding:8px 0; border-bottom:1px solid var(--line); }
.side-menu-link{
  padding:13px 20px; color:var(--cream); text-decoration:none; font-size:14px;
}
.side-menu-link.active{ color:var(--gold); font-weight:700; }

.side-menu-kakao{
  display:block; margin:20px; padding:13px; text-align:center; border-radius:12px;
  background:#FEE500; color:#3A2A12; font-weight:700; font-size:14px; text-decoration:none;
}

.side-menu-footer{ padding:16px 20px 24px; font-size:11px; color:var(--muted); text-align:center; }
.side-menu-footer a{ color:var(--muted); text-decoration:underline; }

/* 상단 GNB - 청월당 스타일(언더라인 탭) */
.site-header{
  position:sticky; top:0; z-index:55;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; background:rgba(20,22,43,0.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-logo{ font-size:20px; font-weight:900; letter-spacing:0.02em; color:var(--cream); text-decoration:none; }
.site-header a.site-logo-group{ text-decoration:none; }
.site-header-actions{ display:flex; align-items:center; gap:16px; }
.site-header-actions a{ color:var(--muted); text-decoration:none; font-size:13px; }
.site-header-actions .icon-btn{
  font-size:20px; line-height:1; background:none; border:none; color:var(--muted);
  cursor:pointer; font-family:inherit; padding:0;
}
.gnb-tabs{
  display:flex; gap:20px; overflow-x:auto; padding:0 24px; scrollbar-width:none;
  border-bottom:1px solid var(--line); background:rgba(20,22,43,0.92);
  position:sticky; top:57px; z-index:54;
}
.gnb-tabs::-webkit-scrollbar{ display:none; }
.gnb-tab{
  flex-shrink:0; font-size:14px; padding:14px 2px; color:var(--muted);
  text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent;
}
.gnb-tab.active{ color:var(--cream); font-weight:700; border-bottom-color:var(--gold); }

/* 콘텐츠 로우 (청월당식 "이모지 + 문구" 헤더 + 가로 스크롤 카드) */
.content-row{ padding:36px 0; border-top:1px solid var(--line); }
.content-row-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; margin-bottom:16px;
}
.content-row-title{ font-size:16px; font-weight:700; }
.content-row-more{ font-size:12px; color:var(--muted); text-decoration:none; flex-shrink:0; }
.content-row-sub{ padding:0 24px; margin:-10px 0 16px; font-size:12px; color:var(--muted); }
.row-scroll{ display:flex; gap:12px; overflow-x:auto; padding:0 24px; scrollbar-width:none; }
.row-scroll::-webkit-scrollbar{ display:none; }
.row-card{
  flex:0 0 150px; text-decoration:none; color:var(--cream);
}
.row-card .row-thumb{
  width:150px; height:200px; border-radius:14px; margin-bottom:10px;
  background-size:cover; background-position:center; border:1px solid var(--line);
  display:flex; align-items:flex-end; padding:12px; position:relative; overflow:hidden;
}
.row-card .row-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
}
.row-card .row-thumb-label{ position:relative; z-index:1; font-size:13px; font-weight:700; }
.row-card .row-title{ font-size:13px; font-weight:700; margin-bottom:2px; }
.row-card .row-tagline{ font-size:11px; color:var(--muted); line-height:1.4; }

/* 매거진 섹션 */
.magazine-tabs{ display:flex; gap:8px; padding:0 24px; margin-bottom:16px; }
.magazine-tab{
  font-size:12px; padding:6px 14px; border-radius:100px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--muted);
}
.magazine-tab.active{ background:var(--surface); color:var(--cream); border-color:var(--gold); }
.magazine-list{ padding:0 24px; }
.magazine-item{
  display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--cream);
}
.magazine-item:last-child{ border-bottom:none; }
.magazine-rank{ font-family:'IBM Plex Mono', monospace; font-size:18px; color:var(--gold); font-weight:700; width:24px; flex-shrink:0; }
.magazine-thumb{ width:52px; height:52px; border-radius:10px; flex-shrink:0; background-size:cover; background-position:center; }
.magazine-title{ font-size:13px; font-weight:700; }

/* 확장 푸터 (사업자 정보) */
.site-footer{ padding:40px 24px 100px; text-align:center; color:var(--muted); font-size:12px; border-top:1px solid var(--line); }
.site-footer .footer-logo{ font-size:18px; font-weight:900; margin-bottom:16px; color:var(--cream); }
.site-footer .footer-biz{ line-height:2; margin-bottom:16px; }
.site-footer .footer-links{ margin-bottom:16px; }
.site-footer .footer-links a{ color:var(--muted); text-decoration:underline; margin:0 6px; }
.site-footer .footer-copyright{ opacity:0.6; }

/* 상단 대형 캐러셀 (타이트사주 홈 구성 벤치마킹) */
.hero-carousel-wrap{ padding:20px 0 8px; }
.hero-carousel{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 24px; scrollbar-width:none;
}
.hero-carousel::-webkit-scrollbar{ display:none; }
.hero-carousel-card{
  flex:0 0 78%; scroll-snap-align:center; aspect-ratio:3/4; border-radius:22px;
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  text-decoration:none; color:var(--cream); border:1px solid var(--line);
  background-size:cover; background-position:center;
}
.hero-carousel-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75) 100%);
}
.hero-carousel-card .card-content{ position:relative; z-index:1; padding:22px; width:100%; }
.hero-carousel-card .card-badge{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700;
  background:var(--gold); color:var(--bg); padding:3px 10px; border-radius:100px; margin-bottom:10px;
}
.hero-carousel-card .card-title{ font-size:22px; font-weight:700; margin-bottom:4px; }
.hero-carousel-card .card-cat{ font-size:13px; opacity:0.85; }
.carousel-pagination{
  text-align:center; font-family:'IBM Plex Mono', monospace; font-size:12px;
  color:var(--muted); margin-top:10px;
}
.carousel-pagination .current{ color:var(--gold); font-weight:700; }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;} .moon-dial-fill{transition:none;}
  .webtoon-panel{ transition:none; opacity:1; transform:none; }
}

/* ================================================
   홈페이지 전용 컴포넌트
   ================================================ */

/* 히어로 미니 매칭 폼 */
.home-hero{ padding:64px 24px 40px; text-align:center; }
.home-logo{ font-size:26px; font-weight:900; margin-bottom:10px; letter-spacing:0.05em; }
.home-tagline{ color:var(--muted); font-size:14px; margin-bottom:32px; }
.match-box{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:24px 20px; text-align:left;
}
.match-label{ font-size:13px; color:var(--muted); margin-bottom:10px; text-align:center; }
.match-box input[type="date"]{
  width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--cream);
  border-radius:12px; padding:14px; font-size:14px; margin-bottom:16px; font-family:'Pretendard', sans-serif;
}
.category-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.category-chip{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:14px;
  padding:12px 4px; cursor:pointer; text-decoration:none; color:var(--cream);
  transition:border-color 0.2s, transform 0.15s;
}
.category-chip:active{ transform:scale(0.96); }
.category-chip .cat-dot{ width:22px; height:22px; border-radius:50%; }
.category-chip .cat-label{ font-size:11px; }

/* 랭킹 배너 */
.ranking-scroll{ display:flex; gap:12px; overflow-x:auto; padding:4px 0 12px; }
.ranking-card{
  flex-shrink:0; width:132px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:14px; text-decoration:none; color:var(--cream); position:relative;
}
.ranking-card .rank-badge{
  position:absolute; top:10px; right:10px; font-family:'IBM Plex Mono', monospace;
  font-size:11px; font-weight:700; color:var(--gold);
}
.ranking-card .rank-avatar{ width:44px; height:44px; border-radius:50%; margin-bottom:10px; }
.ranking-card .rank-name{ font-size:13px; font-weight:700; margin-bottom:2px; }
.ranking-card .rank-cat{ font-size:11px; color:var(--muted); }

/* 카탈로그 그리드 */
.catalog-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.catalog-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:18px 14px; text-decoration:none; color:var(--cream);
}
.catalog-card .cat-avatar{ width:52px; height:52px; border-radius:50%; margin-bottom:12px; }
.catalog-card .cat-title{ font-size:14px; font-weight:700; margin-bottom:4px; }
.catalog-card .cat-desc{ font-size:12px; color:var(--muted); line-height:1.5; }
.catalog-card .cat-free-badge{
  display:inline-block; font-size:10px; font-weight:700; color:var(--gold);
  border:1px solid var(--gold); border-radius:100px; padding:2px 8px; margin-top:10px;
}

/* 하단 고정 내비게이션 */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; justify-content:space-around; align-items:center;
  background:rgba(29,32,64,0.92); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:10px 0 calc(10px + env(safe-area-inset-bottom));
}
.bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  text-decoration:none; color:var(--muted); font-size:10px;
}
.bottom-nav a.active{ color:var(--gold); }
.bottom-nav .nav-icon{ font-size:18px; }
.wrap.has-bottom-nav{ padding-bottom:70px; }