/* 풀리는밤 공통 스타일 — 시안 B(밤의 서재): 소개는 남색, 입력·안내는 밝은 화면, 리포트는 크림색(어둡게 읽기 선택) */
:root {
  --navy: #141a3a; --navy2: #1c2450; --gold: #d9b673; --brass: #8a6a2f;
  --paper: #fbfaf7; --cream: #f6f0e1; --ink: #2a2622; --ink2: #6a6257; --line: #e4ddcc; --err: #b0424e;
  --serif: 'Nanum Myeongjo', 'Batang', 'Apple SD Gothic Neo', 'Malgun Gothic', serif;
  --sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.7 var(--sans); word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3, p { margin: 0; }
a { color: var(--brass); }
button { font: inherit; cursor: pointer; }
.wrap { max-width: 640px; margin: 0 auto; background: var(--paper); }

/* ── 소개(남색) ── */
.hero { background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%); color: #eef0fa; text-align: center; padding: 52px 22px 40px; }
.moon { font-size: 34px; }
.hero h1 { font-family: var(--serif); font-size: 32px; color: var(--gold); letter-spacing: 6px; margin: 4px 0 16px; }
.hero-copy { font-family: var(--serif); font-size: 22px; line-height: 1.5; margin-bottom: 12px; }
.subtitle { color: #b9bfdc; font-size: 15px; margin-bottom: 18px; }
.pricechip { display: inline-block; border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 4px 14px; font-size: 14px; margin-bottom: 20px; }
.cta { display: block; width: 100%; max-width: 420px; margin: 0 auto; padding: 16px; border-radius: 12px; background: var(--gold); color: #1c1a14; font-weight: 800; font-size: 16px; text-decoration: none; }

/* ── 상품 소개·안내(밝은 화면) ── */
.intro { padding: 30px 20px 8px; }
.intro h2 { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 4px; }
.price { color: var(--ink2); font-size: 15px; margin-bottom: 10px; }
.price b { font-family: var(--serif); font-size: 26px; color: var(--brass); }
.muted { color: var(--ink2); font-size: 14px; }
.mini-title { font-family: var(--serif); font-size: 16px; color: var(--brass); margin: 20px 0 8px; }
.toc { columns: 2; column-gap: 24px; margin: 0 0 4px; padding-left: 22px; font-size: 14.5px; }
.toc li { padding: 2px 0; break-inside: avoid; }
.notes { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink2); }
.notes li { padding: 3px 0; }
.notes.short { list-style: none; padding-left: 0; }
.notes.short li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); line-height: 1.55; }
.notes.short li:last-child { border-bottom: 0; }
.notes.short b { flex: none; width: 4.8em; color: var(--ink); }
.homerv { padding: 8px 20px 4px; }
.homerv[hidden] { display: none; }
.homerv h2 { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 2px; }
.homerv .muted { margin: 0 0 12px; font-size: 14px; }
.homerv .rvbody { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* 500자 후기도 4줄까지만 */
.homerv-more { display: block; text-align: center; text-decoration: none; margin-top: 4px; }
.sample { border: 1px dashed #cfc6b0; background: var(--cream); border-radius: 14px; padding: 16px; margin: 22px 0 4px; }
.sample .tag { font-size: 12.5px; color: var(--brass); font-weight: 700; margin-bottom: 8px; }
.sample-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0 12px; }
.sample-pillars div { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 2px; min-width: 0; }
.sample-pillars div.day { border-color: var(--brass); }
.sample-pillars small { display: block; color: var(--ink2); font-size: 11.5px; }
.sample-pillars b { font-family: var(--serif); font-size: 19px; color: var(--brass); }
.sample-facts, .sample-text { font-size: 14.5px; line-height: 1.8; margin-bottom: 10px; }
.sample .mini-title { margin-top: 12px; }

/* ── 주문 입력(밝은 화면, 3단계) ── */
.formwrap { padding: 26px 20px 34px; border-top: 1px solid var(--line); margin-top: 22px; }
.formwrap h2 { font-family: var(--serif); font-size: 22px; margin-bottom: 14px; }
.steps { display: flex; gap: 6px; margin-bottom: 16px; }
.steps i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.steps i.on { background: var(--brass); }
.stepname { font-size: 13.5px; color: var(--brass); font-weight: 700; margin-bottom: 12px; }
.step { display: none; }
.step.show { display: block; }
.field-row { margin-bottom: 16px; }
.field { display: block; min-width: 0; }
.field > span, .legend { display: block; font-size: 13.5px; color: var(--ink2); font-weight: 600; margin-bottom: 6px; }
.field em, .legend em { font-style: normal; font-weight: 400; }
.field small { display: block; margin-top: 6px; }
select, input[type="time"], input[type="email"] { width: 100%; min-width: 0; padding: 12px 8px; border-radius: 10px; border: 1px solid #d6cfbd; background: #fff; color: var(--ink); font: inherit; }
.row3 { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg label { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 15.5px; }
.seg .leap { color: var(--ink2); }
.check { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--ink2); }
.concern-list { display: flex; flex-direction: column; gap: 10px; }
.concern-opt { display: flex; align-items: center; gap: 10px; padding: 15px; background: #fff; border: 1px solid #d6cfbd; border-radius: 12px; font-size: 16px; cursor: pointer; }
.concern-opt:has(input:checked) { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.concern-opt input, .agree input { width: auto; flex: none; margin: 0; }
.concern-opt span { flex: 1; }
.sumbox { background: var(--cream); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; margin-bottom: 14px; }
.sumbox b { color: var(--brass); }
details.consent { font-size: 13px; color: var(--ink2); margin: 8px 0 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; }
details.consent summary { cursor: pointer; color: var(--ink); font-weight: 600; font-size: 14px; }
details.consent p { margin-top: 8px; line-height: 1.7; }
.agree { display: flex; gap: 8px; align-items: center; font-size: 15px; margin-bottom: 10px; cursor: pointer; }
.refund-note { font-size: 13px; color: var(--ink2); margin-bottom: 12px; }
.btnrow { display: flex; gap: 8px; margin-top: 8px; }
.btn { flex: 1; padding: 15px; border-radius: 12px; border: 1px solid #cfc6b0; background: #fff; color: var(--ink); font-weight: 700; }
.btn.main, .submit-btn { background: var(--brass); border-color: var(--brass); color: #fff; flex: 2; }
.submit-btn { padding: 15px; border-radius: 12px; border: 0; font-weight: 800; }
.btn:disabled, .submit-btn:disabled { opacity: .55; cursor: default; }
.err { color: var(--err); font-size: 14px; margin-top: 12px; text-align: center; }

/* ── 하단 ── */
.disclaimer { text-align: center; color: var(--ink2); font-size: 13px; padding: 22px 20px 4px; }
.foot { text-align: center; color: var(--ink2); font-size: 12.5px; padding: 14px 16px 44px; }
.foot p { margin: 4px 0; }
.legal-links { margin-bottom: 8px; }
.biz-line { line-height: 1.7; }
details.bizmore { margin-top: 6px; }
details.bizmore summary { cursor: pointer; display: inline-block; color: var(--ink2); font-size: 12.5px; text-decoration: underline; }
details.bizmore p { margin: 3px 0; }
.foot a, .legal-links a { color: var(--ink2); }

/* ── 리포트 열람(크림색, 어둡게 읽기 선택) ── */
body.report-page { background: var(--cream); }
.report { --bg: var(--cream); --tx: #2a2622; --tx2: #6a6257; --h: #7a5a22; --bd: #e0d6bd; --card: #fff8e8;
  background: var(--bg); color: var(--tx); min-height: 100vh; padding: 22px 20px 60px; transition: background .25s, color .25s; }
.report.dark { --bg: #171b36; --tx: #e8eaf6; --tx2: #a3a9cc; --h: #e2c98e; --bd: #2b3160; --card: #1f2548; }
body.report-page:has(.report.dark) { background: #171b36; }
.rin { max-width: 640px; margin: 0 auto; }
.rhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.rhead h1 { font-family: var(--serif); font-size: 19px; color: var(--h); }
.toggle { border: 1px solid var(--bd); background: transparent; color: var(--tx2); border-radius: 999px; padding: 6px 13px; font-size: 13px; white-space: nowrap; }
#status { background: var(--card); border: 1px solid var(--bd); border-radius: 12px; padding: 14px 16px; font-size: 15.5px; }
#status.wait { display: flex; align-items: center; gap: 14px; }
#status .hg { font-size: 30px; line-height: 1; animation: hgflip 2.4s ease-in-out infinite; }
#status .wtxt { flex: 1; min-width: 0; }
#status .wtxt p { margin: 0 0 10px; }
#status .wbar { height: 6px; border-radius: 999px; background: var(--bd); overflow: hidden; }
#status .wbar i { display: block; height: 100%; width: 38%; border-radius: 999px; background: var(--h); animation: wslide 1.6s ease-in-out infinite; }
@keyframes hgflip { 0%, 55% { transform: rotate(0); } 80%, 100% { transform: rotate(180deg); } }
@keyframes wslide { 0% { transform: translateX(-100%); } 100% { transform: translateX(270%); } }
@media (prefers-reduced-motion: reduce) { #status .hg, #status .wbar i { animation: none; } }
#status button { margin-top: 12px; padding: 10px 16px; border-radius: 10px; border: 0; background: var(--h); color: var(--bg); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.chips a { font-size: 13px; color: var(--tx2); border: 1px solid var(--bd); border-radius: 999px; padding: 5px 11px; text-decoration: none; }
#body h2 { font-family: var(--serif); font-size: 19px; color: var(--h); margin: 28px 0 8px; scroll-margin-top: 12px; }
#body p { font-size: 17px; line-height: 1.95; margin-bottom: 12px; color: var(--tx); white-space: pre-wrap; }
#body p.li { margin: 4px 0; padding-left: 1.2em; position: relative; }
#body p.li::before { content: '·'; position: absolute; left: .3em; color: var(--h); }

/* ── 무료 미리보기·주소 복사 (리포트 화면 안) ── */
.addrbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border: 1px solid var(--bd); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.addrbar p { font-size: 13.5px; color: var(--tx2); line-height: 1.5; }
.addrbox { display: block; width: 100%; margin-top: 6px; padding: 8px; border-radius: 8px; border: 1px solid var(--bd); background: var(--bg); color: var(--tx); font: inherit; font-size: 12.5px; }
.addrbar button { flex: none; border: 1px solid var(--bd); background: transparent; color: var(--h); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
#preview h2 { font-family: var(--serif); font-size: 21px; color: var(--h); margin-bottom: 4px; }
.pv-sub { font-size: 14px; color: var(--tx2); margin-bottom: 14px; }
.pv-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.pv-pillars div { text-align: center; background: var(--card); border: 1px solid var(--bd); border-radius: 10px; padding: 9px 2px; min-width: 0; }
.pv-pillars div.day { border-color: var(--h); }
.pv-pillars small { display: block; color: var(--tx2); font-size: 12px; }
.pv-pillars b { font-family: var(--serif); font-size: 21px; color: var(--h); }
.rcard { background: var(--card); border: 1px solid var(--bd); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.rcard h3 { font-family: var(--serif); font-size: 16px; color: var(--h); margin-bottom: 6px; }
.rcard p { font-size: 16px; line-height: 1.85; color: var(--tx); }
.rcard .basis { font-size: 13px; color: var(--tx2); margin-bottom: 4px; }
.rcard .more { margin-top: 8px; color: var(--tx2); font-size: 14.5px; }
.rcard.hl { border-color: var(--h); }
.pv-bars { margin: 6px 0 10px; }
.pv-bar { display: grid; grid-template-columns: 26px 1fr 22px; gap: 8px; align-items: center; margin: 5px 0; }
.pv-bar .nm { font-family: var(--serif); font-weight: 700; color: var(--tx); }
.pv-bar .track { height: 12px; background: rgba(128,128,128,.18); border-radius: 999px; overflow: hidden; }
.pv-bar .fill { display: block; height: 100%; border-radius: 999px; }
.pv-bar .ct { font-size: 13px; color: var(--tx2); text-align: right; }
.pv-note { font-size: 13px; color: var(--tx2); margin: 4px 0 16px; }
.pv-lockedtitle { font-family: var(--serif); font-size: 16px; color: var(--h); margin: 6px 0 8px; }
.pv-locked { list-style: none; margin: 0 0 16px; padding: 0; columns: 2; column-gap: 14px; }
.pv-locked li { font-size: 14.5px; padding: 6px 0; color: var(--tx2); break-inside: avoid; border-bottom: 1px solid var(--bd); }
.pv-locked .lock { margin-right: 6px; font-size: 12px; }
.pricebox { background: var(--card); border: 1px solid var(--h); border-radius: 14px; padding: 16px; text-align: center; }
.pricebox .pt { font-family: var(--serif); font-size: 17px; color: var(--h); }
.pricebox .pp { font-size: 14.5px; color: var(--tx2); margin: 4px 0 8px; }
.pricebox .pp b { font-family: var(--serif); font-size: 26px; color: var(--tx); }
.pricebox .pr { font-size: 13px; color: var(--tx2); line-height: 1.6; margin-bottom: 12px; }
.pricebox .pr a { color: var(--h); }
.pricebox .pay { width: 100%; padding: 15px; border: 0; border-radius: 12px; background: var(--h); color: var(--bg); font-weight: 800; font-size: 16px; }
.pricebox .pay:disabled { opacity: .55; cursor: default; }
.rfoot { margin-top: 28px; padding-bottom: 20px; color: var(--tx2); }
.rfoot a, .rfoot .legal-links a { color: var(--tx2); }
@media (max-width: 520px) { .pv-locked { columns: 1; } }

/* ── 약관·방침·환불 안내(밝은 화면) ── */
.legal { padding: 28px 20px 10px; }
.legal h1 { font-family: var(--serif); font-size: 26px; color: var(--ink); margin: 0 0 6px; }
.legal .upd { color: var(--ink2); font-size: 13px; margin: 0 0 22px; }
.legal h2 { font-family: var(--serif); font-size: 17.5px; color: var(--brass); margin: 28px 0 8px; }
.legal p, .legal li { font-size: 15px; line-height: 1.8; }
.legal ul, .legal ol { padding-left: 20px; margin: 6px 0 12px; }
.legal table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 14px; }
.legal th, .legal td { border: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
.legal th { color: var(--brass); width: 28%; background: var(--cream); }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 10px; padding: 0 14px; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 15.5px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--brass); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 0 14px; margin: 0; color: var(--ink2); }
.draft-banner { background: #fbe9ea; border: 1px solid var(--err); color: var(--ink); padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 18px; }
.back { display: inline-block; margin-bottom: 14px; color: var(--ink2); font-size: 14px; text-decoration: none; }

@media (max-width: 520px) {
  .toc { columns: 1; }
  .hero-copy { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .report { transition: none; } }

/* 미리보기 이야기 흐름: 강점 → 올해 흐름 → 막힌 지점 → 전체 풀이 */
.pv-title small { margin-left: 8px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; opacity: .75; vertical-align: middle; }
.pv-step { display: flex; align-items: center; gap: 8px; margin: 26px 0 10px; font-size: 16px; }
.pv-step i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brass, #b08d57); color: #fff; font-size: 12px; }
.bridge { margin: 22px 0 0; padding: 14px 16px; border-left: 3px solid var(--brass, #b08d57); background: rgba(176,141,87,.12); border-radius: 0 10px 10px 0; line-height: 1.7; }

/* 미리보기 본문: 카드 없이 이어 읽는 글 */
.story { margin: 18px 0 8px; }
.story p { line-height: 1.95; margin: 0 0 16px; font-size: 16px; white-space: pre-line; }

/* 첫 화면: 소개 글은 입력 칸 아래로 내리고, 구성·예시는 접어 둔다 */
.hero { padding-bottom: 28px; }
.formwrap { margin-top: 0; border-top: 0; }
.intro { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 24px; }
.more-box { margin: 14px 0 6px; }
.more-box summary { cursor: pointer; font-weight: 700; color: var(--brass); padding: 8px 0; }

/* 결제 직전 질문 남기기: 눈에 띄는 카드 */
.qcard { margin: 26px 0 16px; padding: 20px 18px 16px; border: 2px solid var(--brass, #b08d57); border-radius: 16px; background: rgba(176,141,87,.14); box-shadow: 0 0 0 4px rgba(176,141,87,.12); }
.qkicker { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: var(--brass, #b08d57); color: #fff; font-size: 12px; font-weight: 700; }
.qlabel { display: block; font-family: var(--serif, inherit); font-size: 20px; font-weight: 700; line-height: 1.4; margin: 0 0 6px; }
.qsub { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; }
.qcard textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--brass, #b08d57); border-radius: 12px; font: inherit; font-size: 16px; line-height: 1.6; background: rgba(255,255,255,.08); color: inherit; resize: vertical; }
.qcard textarea:focus { outline: 3px solid rgba(176,141,87,.45); }
.qcount { display: block; text-align: right; opacity: .6; margin-top: 2px; }
.qhint { font-size: 12.5px; opacity: .75; line-height: 1.6; margin: 6px 0 0; }
.qerr { color: #c0392b; font-size: 14px; margin: 6px 0 0; }

/* 풀이 항목 끝의 전문 근거 한 줄: 작게, 흐리게 */
.basis-line { font-size: 12.5px; opacity: .65; line-height: 1.6; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--bd, #ddd8cc); }

.checknote { font-size: 13.5px; color: var(--ink2); margin: 0 0 10px; }
.editrow { margin: 10px 0 18px; }
.editbtn { flex: 1; padding: 12px 8px; font-size: 14.5px; border: 1.5px solid var(--brass); color: var(--brass); background: var(--cream); }
.pv-compare { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14.5px; }
.pv-compare th { text-align: center; font-size: 12.5px; color: var(--tx2); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--bd); }
.pv-compare th:first-child, .pv-compare td:first-child { text-align: left; }
.pv-compare td { padding: 8px 4px; border-bottom: 1px solid var(--bd); }
.pv-compare td:not(:first-child), .pv-compare th:not(:first-child) { width: 64px; text-align: center; }
.pv-compare .y { color: var(--gold, #b08d57); font-weight: 700; }
.pv-compare .n { color: var(--tx2); opacity: .6; }

/* ── 나의 밤 기운 카드 ── */
.cardhero { padding-bottom: 28px; }
.cardhero h1 { font-size: 26px; letter-spacing: 3px; }
.cardform { padding: 24px 20px 8px; }
.cardout { padding: 20px; }
.small { font-size: 13px; margin-top: 12px; }
.formerr { color: var(--err); font-size: 14px; margin-bottom: 10px; }
.nightcard { width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 9 / 16; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: radial-gradient(ellipse at 50% 35%, #2f3a7c 0%, #1c2450 50%, #141a3a 100%); color: #eef0fa; border-radius: 22px; padding: 30px 22px 24px; text-align: center; box-shadow: 0 8px 28px rgba(20, 26, 58, .3); }
.nc-kicker { font-size: 12.5px; letter-spacing: 4px; color: var(--gold); }
.nc-art { width: 52%; max-width: 190px; height: auto; margin: 6px 0; }
.nc-name { font-family: var(--serif); font-size: 27px; line-height: 1.3; color: #fff; }
.nc-tag { color: var(--gold); font-size: 15px; margin-top: -4px; }
.nc-body { font-size: 14px; line-height: 1.75; color: #d6daef; text-align: left; }
.nc-dom { font-size: 13px; color: #b9bfdc; }
.nc-bars { display: flex; gap: 10px; justify-content: center; align-items: flex-end; height: 56px; }
.nc-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 30px; height: 100%; }
.nc-bar i { display: block; width: 100%; border-radius: 5px 5px 0 0; background: var(--gold); }
.nc-bar b { font-size: 11.5px; font-weight: 600; color: #b9bfdc; margin-top: 3px; }
.nc-brand { font-family: var(--serif); letter-spacing: 5px; font-size: 13px; color: #8f96c0; }
.savewrap { text-align: center; margin: 14px 0 0; }
.savelink { font-size: 14px; color: var(--brass); }
.cardbtns { margin-top: 16px; }
.cardcta { text-align: center; margin-top: 26px; font-size: 14.5px; color: var(--ink2); }
.cardcta .cta { margin-top: 14px; background: var(--navy); color: var(--gold); }
.cardlink { position: relative; display: block; margin: 22px auto 4px; max-width: 420px; padding: 18px 20px 16px; border-radius: 16px; background: linear-gradient(135deg, #f2d697 0%, #d9b673 55%, #c79f56 100%); color: #1c1a14; text-decoration: none; text-align: left; box-shadow: 0 6px 22px rgba(217, 182, 115, .35); animation: cardpulse 2.6s ease-in-out infinite; }
.cardlink .cl-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #141a3a; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.cardlink .cl-title { display: block; margin-top: 8px; font-family: var(--serif); font-size: 21px; font-weight: 800; line-height: 1.35; }
.cardlink .cl-sub { display: block; margin-top: 2px; font-size: 14px; color: #3d3524; }
.cardlink .cl-go { display: block; margin-top: 12px; padding: 11px; border-radius: 10px; background: #141a3a; color: var(--gold); text-align: center; font-weight: 800; font-size: 15.5px; }
.cardlink .cl-moon { position: absolute; right: 16px; top: 12px; font-size: 30px; }
@keyframes cardpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@media (prefers-reduced-motion: reduce) { .cardlink { animation: none; } }

.mecta { display: block; max-width: 380px; margin: 0 auto 14px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, #f2d697 0%, #d9b673 55%, #c79f56 100%); color: #1c1a14; text-align: center; text-decoration: none; font-weight: 800; font-size: 17px; box-shadow: 0 6px 22px rgba(217, 182, 115, .35); animation: cardpulse 2.6s ease-in-out infinite; }
.mecta[hidden] { display: none; }
.mecta small { display: block; font-size: 12.5px; font-weight: 600; color: #3d3524; margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .mecta { animation: none; } }

/* ── 후기·보너스 풀이(풀이 화면 아래) ── */
.rvbox { margin: 36px 0 12px; padding: 22px 18px; border: 1px solid var(--bd, #d6cfbd); border-radius: 16px; background: var(--card, #fff); color: var(--tx, #2a2622); }
.rvbox[hidden] { display: none; }
.rvbox h2 { font-family: var(--serif); font-size: 20px; margin: 0 0 6px; }
.rvbox .rv-sub { font-size: 14px; color: var(--tx2, #6a6257); margin-bottom: 14px; }
.rvbox .rv-label { font-size: 13px; font-weight: 700; margin: 12px 0 6px; color: var(--tx2, #6a6257); }
.rv-opts { display: flex; flex-direction: column; gap: 8px; }
.rv-opts label { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--bd, #d6cfbd); border-radius: 10px; cursor: pointer; font-size: 15px; }
.rv-opts label:has(input:checked) { border-color: var(--h, #8a6a2f); box-shadow: 0 0 0 1px var(--h, #8a6a2f); }
.rv-stars { display: flex; gap: 4px; margin-bottom: 10px; }
.rv-star { background: none; border: 0; font-size: 34px; line-height: 1; color: #fff; -webkit-text-stroke: 1.5px #b9ae92; padding: 2px; } /* 고르기 전: 흰 별(윤곽선만 보임) */
.rv-star.on { color: #e0b64f; -webkit-text-stroke-color: #e0b64f; } /* 고른 뒤: 노란 별 */
.rvbox textarea, .rvbox input[type="text"], .rvbox select { width: 100%; margin-top: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--bd, #d6cfbd); background: var(--bg, #fff); color: inherit; font: inherit; }
.rv-pub { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 13.5px; line-height: 1.55; }
.rv-pub input { margin-top: 4px; flex: none; }
.rv-small { font-size: 12.5px; color: var(--tx2, #6a6257); margin-top: 10px; line-height: 1.6; }
.rv-err { color: #b0424e; font-size: 14px; margin-top: 8px; }
.rv-send { width: 100%; margin-top: 14px; padding: 15px; border: 0; border-radius: 12px; background: var(--h, #8a6a2f); color: var(--bg, #fff); font-weight: 800; font-size: 16px; }
.rv-send:disabled { opacity: .55; }
.rv-bonus { margin-top: 10px; }
.rv-bonus .rv-kicker { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--h, #8a6a2f); color: var(--bg, #fff); font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.rv-bonus h3 { font-family: var(--serif); font-size: 19px; margin: 0 0 10px; }
.rv-bonus p { font-size: 15.5px; line-height: 1.8; margin: 0 0 10px; }
.rv-cards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rv-cards > div { flex: 1 1 140px; padding: 12px; border-radius: 12px; border: 1px solid var(--bd, #d6cfbd); text-align: center; }
.rv-cards small { display: block; font-size: 12px; color: var(--tx2, #6a6257); }
.rv-cards b { display: block; font-family: var(--serif); font-size: 16px; margin: 2px 0; }
.rv-cards span { font-size: 13px; color: var(--tx2, #6a6257); }

/* ── 후기 모음 ── */
.rvpage { padding: 22px 20px 6px; }
.rv-notice { font-size: 13.5px; line-height: 1.65; color: var(--ink2); background: var(--cream); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; }
.rvcard { border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 12px; background: #fff; }
.rvhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rvstars { color: #e0b64f; letter-spacing: 2px; font-size: 17px; }
.rvbadge { font-size: 11.5px; font-weight: 700; color: var(--brass); border: 1px solid var(--brass); border-radius: 999px; padding: 1px 8px; }
.rvbody { font-size: 15.5px; line-height: 1.75; white-space: pre-wrap; }
.rvmeta { font-size: 13px; color: var(--ink2); margin-top: 8px; }
.rvtag { font-size: 12px; color: var(--ink2); margin-top: 2px; }
.rv-empty { text-align: center; color: var(--ink2); padding: 30px 0; }
.rvmore { display: block; width: 100%; margin: 6px 0 10px; }
.rv-back { text-align: center; margin: 14px 0; font-size: 14px; }

.pricebox .rvline { font-size: 13.5px; color: var(--tx2); margin-bottom: 8px; }
.pricebox .rvline a { color: var(--h); }
.rvmore[hidden] { display: none; }