:root{
  --navy: #232135;
  --plum: #3b2f4f;
  --paper: #f7f3ec;
  --ink: #2b2a33;
  --muted: #8a8598;
  --line: rgba(43,42,51,0.1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  font-family:'Gowun Dodum', system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg, var(--navy), var(--plum));
  color: var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 28px 16px 48px;
}
.stage{ width:100%; max-width:460px; }
a{ color:inherit; }

/* ---------- 공통 링크/뱃지 ---------- */
.back-link{
  display:inline-block;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 14px;
}
.badge{
  display:inline-block;
  font-size: 11px;
  font-weight:700;
  padding: 3px 9px;
  border-radius: 20px;
  margin-right: 6px;
  vertical-align: middle;
}
.badge-hot{ background:#e8834e; color:#fff; }
.badge-new{ background:#4fa8a0; color:#fff; }

/* ---------- 카드 공통 ---------- */
.card{
  background: var(--paper);
  border-radius: 24px;
  padding: 32px 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  position:relative;
  overflow:hidden;
}
.eyebrow{ font-size:14px; color: var(--muted); margin: 0 0 8px; }
h1{ font-family:'Gowun Batang', serif; font-size: 26px; line-height:1.4; margin: 0 0 14px; }
h2{ font-family:'Gowun Batang', serif; font-size: 20px; margin: 0; }
.lede{ font-size:15.5px; line-height:1.7; color: #52505c; margin: 0 0 22px; }

/* ---------- 버튼 ---------- */
.btn{
  display:block; width:100%; text-align:left;
  padding: 17px 20px; margin-bottom: 11px;
  border: none; border-radius: 16px;
  background: #fff; color: var(--ink);
  font-family:'Gowun Dodum', sans-serif; font-size: 15.5px; line-height:1.5;
  cursor:pointer; box-shadow: 0 2px 0 rgba(43,42,51,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(43,42,51,0.12); }
.btn:active{ transform: translateY(0); }
.btn.selected{ background: var(--ink); color:#fff; }
.primary{ background: var(--ink); color: #fff; text-align:center; font-size:16.5px; padding: 15px 20px; }
.ghost{ background: transparent; border: 1.5px solid rgba(43,42,51,0.15); }

/* ---------- 인트로 화면 메타 ---------- */
.meta-row{
  display:flex; gap:14px; margin-bottom:20px;
  font-size:13.5px; color: var(--muted);
}
.meta-row span{ display:flex; align-items:center; gap:5px; }
.disclaimer{
  font-size:12.5px; color: var(--muted);
  background: rgba(43,42,51,0.05);
  border-radius:12px; padding:12px 14px;
  margin-bottom:22px; line-height:1.6;
}

/* ---------- 질문 화면 ---------- */
.quiz-top{ display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.quiz-back{
  border:none; background:transparent; cursor:pointer;
  font-size:18px; color: var(--muted); padding:0; line-height:1;
}
.progress{ flex:1; height:4px; background: var(--line); border-radius:4px; overflow:hidden; }
.progress-fill{ height:100%; border-radius:4px; transition: width 0.3s ease; }
.progress-num{ font-size:13px; color: var(--muted); white-space:nowrap; }
.q-text{ font-family:'Gowun Batang', serif; font-size: 20px; line-height:1.5; margin: 0 0 20px; }

/* ---------- 결과 화면 ---------- */
.result-emoji{ font-size:52px; text-align:center; margin-bottom:10px; animation: pop 0.45s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop{ 0%{ transform: scale(0.4); opacity:0; } 100%{ transform: scale(1); opacity:1; } }
.result-title{ font-family:'Gowun Batang', serif; font-size: 25px; text-align:center; margin: 0 0 6px; }
.result-tag{ text-align:center; font-size:14.5px; color: var(--muted); margin: 0 0 20px; }
.result-desc{ font-size:15.5px; line-height:1.8; color:#454350; margin: 0 0 20px; }

.stat-row{ margin-bottom:12px; }
.stat-label{ display:flex; justify-content:space-between; font-size:13px; color:#54525f; margin-bottom:5px; }
.stat-bar{ height:7px; background: var(--line); border-radius:8px; overflow:hidden; }
.stat-fill{ height:100%; border-radius:8px; }

.sub-block{ margin-top:20px; }
.sub-title{ font-size:13.5px; font-weight:700; color:#54525f; margin-bottom:8px; }
.sub-list{ margin:0; padding-left:18px; font-size:14px; line-height:1.7; color:#54525f; }

.match-grid{ display:flex; gap:10px; margin-top:20px; }
.match-box{ flex:1; background: rgba(43,42,51,0.05); border-radius:14px; padding:12px 14px; text-align:center; }
.match-label{ font-size:12px; color: var(--muted); margin-bottom:4px; }
.match-name{ font-size:14px; font-weight:700; }

.share-row{ display:flex; gap:8px; margin-top:22px; }
.share-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  border:none; background: rgba(43,42,51,0.05); border-radius:14px;
  padding:12px 6px; cursor:pointer; font-family:inherit; font-size:11.5px; color:#54525f;
}
.share-btn:hover{ background: rgba(43,42,51,0.09); }
.share-icon{ font-size:20px; }

.ad-slot{
  margin-top: 22px; padding: 14px; text-align:center; font-size:12px;
  color: var(--muted); border: 1px dashed rgba(43,42,51,0.2); border-radius: 12px;
}

/* ---------- 관련 테스트 추천 ---------- */
.related-block{ margin-top:26px; }
.related-title{ font-family:'Gowun Batang', serif; font-size:16.5px; margin:0 0 12px; }
.related-list{ display:flex; flex-direction:column; gap:10px; }
.related-item{
  display:flex; align-items:center; gap:12px;
  background:#fff; border-radius:14px; padding:12px 14px;
  text-decoration:none; color:var(--ink);
  box-shadow: 0 2px 0 rgba(43,42,51,0.06);
}
.related-swatch{ display:flex; gap:3px; flex-shrink:0; }
.related-swatch span{ width:10px; height:10px; border-radius:50%; }
.related-name{ font-size:14px; font-weight:600; flex:1; }
.related-arrow{ color: var(--muted); }

.footer-note{ text-align:center; font-size:12px; color: rgba(255,255,255,0.35); margin-top:20px; }
.hidden{ display:none; }

/* ---------- 허브(메인) 페이지 ---------- */
.hero{ text-align:center; margin-bottom: 26px; }
.hero h1{ color: var(--paper); }
.hero .eyebrow{ color: rgba(255,255,255,0.55); }

.section-title{
  font-family:'Gowun Batang', serif; font-size:17px;
  color: var(--paper); margin: 28px 0 12px;
}
.section-title:first-of-type{ margin-top:0; }

.chip-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:6px; }
.chip{
  flex-shrink:0; padding:8px 16px; border-radius:20px;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
  font-size:13.5px; border:none; cursor:pointer; font-family:inherit;
  white-space:nowrap;
}
.chip.active{ background: var(--paper); color: var(--ink); font-weight:600; }

.quiz-list{ display:flex; flex-direction:column; gap:14px; }
.quiz-card{
  display:block;
  background: var(--paper);
  border-radius: 22px;
  padding: 22px;
  text-decoration:none;
  color: var(--ink);
  box-shadow: 0 16px 36px rgba(0,0,0,0.28);
  position:relative;
  transition: transform 0.15s ease;
}
.quiz-card:hover{ transform: translateY(-3px); }
.quiz-card:active{ transform: translateY(0); }
.quiz-swatch{ display:flex; gap:6px; margin-bottom:14px; }
.swatch{ width:20px; height:20px; border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%; }
.quiz-title{ font-family:'Gowun Batang', serif; font-size: 19px; margin: 0 0 6px; }
.quiz-desc{ font-size:13.5px; line-height:1.6; color:#54525f; margin: 0 0 12px; }
.quiz-cta{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; }
.quiz-cta::after{ content:"→"; }
.quiz-card-mini{ padding:16px 18px; }
.quiz-card-mini .quiz-title{ font-size:16px; margin-bottom:3px; }
.quiz-card-mini .quiz-desc{ display:none; }

.empty-state{
  text-align:center; color: rgba(255,255,255,0.5);
  font-size:14px; padding: 30px 10px;
}

/* ---------- 밸런스게임 프로토타입 ---------- */
.balance-choice{ text-align:center; font-size:17px; font-weight:600; padding: 22px 20px; }
.balance-vs{ text-align:center; color: var(--muted); font-size:13px; margin: 4px 0 10px; }
.balance-picked{ font-family:'Gowun Batang', serif; font-size:22px; text-align:center; margin: 0 0 8px; }

/* ---------- 오늘의 추천 히어로 ---------- */
.hero-card{
  display:block; background: var(--paper); border-radius: 24px; padding: 28px 24px;
  text-decoration:none; color: var(--ink); box-shadow: 0 20px 46px rgba(0,0,0,0.32);
  margin-bottom: 28px; position:relative;
}
.hero-eyebrow{ font-size:13px; font-weight:700; color:#e8834e; margin:0 0 10px; }
.hero-title{ font-family:'Gowun Batang', serif; font-size:22px; margin:0 0 8px; line-height:1.4; }
.hero-desc{ font-size:14px; color:#54525f; line-height:1.6; margin:0 0 16px; }
.hero-cta{
  display:inline-block; background: var(--ink); color:#fff; font-size:14px; font-weight:600;
  padding: 12px 20px; border-radius: 14px;
}
.balance-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: rgba(255,255,255,0.08); border-radius:18px; padding:16px 18px;
  margin-bottom: 22px; text-decoration:none; color: var(--paper);
}
.balance-banner-text{ font-size:14.5px; font-weight:600; }
.balance-banner-arrow{ color: rgba(255,255,255,0.6); }

/* ---------- 쿠팡 파트너스 배너 ---------- */
.coupang-block{ margin-top: 22px; }
.coupang-disclosure{
  font-size:12px; color: var(--muted); line-height:1.6;
  margin: 0 0 10px; text-align:center;
}
.coupang-ad-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.coupang-ad-wrap::-webkit-scrollbar{ height: 4px; }
.coupang-hint{
  font-size:11px; color: var(--muted); text-align:center; margin: 6px 0 0;
}

/* ---------- 미니 밸런스게임 위젯 (허브) ---------- */
.mini-balance-card .balance-choice{ font-size:15px; padding:16px 18px; }
.mini-balance-card .balance-vs{ margin: 2px 0 8px; }

/* ---------- 사이트 공통 Footer ---------- */
.site-footer{ text-align:center; margin-top:28px; padding-top:16px; }
.site-footer-links{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.site-footer-links a{ color: rgba(255,255,255,0.5); font-size:12.5px; text-decoration:none; }
.site-footer-links a:hover{ color: rgba(255,255,255,0.8); }
.site-footer-links span{ color: rgba(255,255,255,0.25); font-size:12px; }
.site-footer-copy{ font-size:11.5px; color: rgba(255,255,255,0.3); margin: 10px 0 0; }

/* ---------- 신뢰 페이지(소개/방침/약관/문의) 공통 ---------- */
.doc-h2{ font-family:'Gowun Batang', serif; font-size:17px; margin: 24px 0 10px; }
.doc-h2:first-of-type{ margin-top: 4px; }
.doc-p{ font-size:14.5px; line-height:1.8; color:#454350; margin: 0 0 14px; }
.doc-list{ font-size:14.5px; line-height:1.8; color:#454350; margin: 0 0 14px; padding-left:20px; }
.doc-meta{ font-size:12.5px; color: var(--muted); margin: 0 0 20px; }
.contact-box{
  background: rgba(43,42,51,0.05); border-radius:14px; padding:18px 20px;
  font-size:15px; line-height:1.8; margin: 10px 0 18px;
}