/* 귀갑이 v3 — DESIGN.md (2026-09-19, Skywork website-01a0b4f0 채택). 색 토큰은 tools/check_contrast.py --css 출력이다. 손으로 고치지 않는다. */
:root{--bg:#F5F0E8;--surface:#FBF9F5;--ink:#242824;--ink-2:#63665F;--line:#CFCCC5;--accent:#294A43;--accent-ink:#FBF9F5;--accent-hover:#1D3833;--moss:#496E61;--deep:#294A43;--deep-ink:#FBF9F5;--deep-sub:#C1CBC8;--deep-em:#B8D2BF;--eyebrow:#294A43;--focus:#2F6FD6;--up:#286037;--down:#8C3F2C;--flat:#4C5951;--header-bg:#F5F0E8;--section-bg:#EBE4D8;--footer-bg:#F5F0E8;--surface-2:#EBE4D8;--tile-ring:#294A43;--tile-1:#E3CEAD;--tile-2:#C3D5B3;--tile-3:#E7C4C3;--tile-4:#ADD5C2;--tile-5:#BAD1E3;--tile-6:#E0CDBE;--wx-metal-bg:#F3EDE7;--wx-metal-fg:#73695F;--wx-wood-bg:#D0EACF;--wx-wood-fg:#3E6F40;--wx-earth-bg:#E9D1A8;--wx-earth-fg:#765512;--wx-fire-bg:#ECB9B1;--wx-fire-fg:#8B352A;--wx-water-bg:#A1BFD5;--wx-water-fg:#174F70;
  --radius:14px;--card-border:var(--line);--card-shadow:0 24px 70px rgba(41,74,67,.08);--pad:16px;--measure:1180px;color-scheme:light}

/* ── 폰트 (OFL · tools/build_fonts.py 서브셋) — v3 는 Pretendard 하나 (Q1) ── */
@font-face{font-family:"Pretendard Variable";src:url(../fonts/PretendardVariable.woff2?v=b12) format("woff2");font-weight:45 920;font-display:swap}

/* ── 기본 ── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:16px/1.65 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;min-width:320px;text-rendering:optimizeLegibility;
  background-image:radial-gradient(circle at 15% 4%,rgba(255,255,255,.72),transparent 30rem)}
a{color:inherit}
button,input{font:inherit}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
button:active,.btn:active{transform:translateY(1px)}
h1,h2,h3,.h1,.font-display{font-family:inherit;font-weight:750;text-wrap:balance;letter-spacing:-.03em;line-height:1.2}
h1 em,h2 em{color:var(--moss);font-style:normal}
::selection{background:#DCE7DF;color:var(--ink)}

/* ── 골격 ── */
.top{width:min(var(--measure),calc(100% - 2*var(--pad)));margin:0 auto;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:800;font-size:20px;letter-spacing:-.03em}
.brand img{width:29px;height:29px}
.site-nav{display:flex;align-items:center;gap:14px;color:var(--ink-2);font-size:13px;flex-wrap:wrap;justify-content:flex-end}
.site-nav a,.site-nav .link,button.link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none;text-underline-offset:5px;font-weight:600;transition:color .15s ease}
.auth{display:inline-flex;align-items:center;gap:14px}
.nick{color:var(--ink);font-weight:600}
.inline-form{display:inline;margin:0}
button.link{background:none;border:0;padding:0;cursor:pointer;font-size:13px}
.wrap{max-width:var(--measure);margin:0 auto;padding:24px var(--pad) 48px}
.foot{background:var(--footer-bg);border-top:1px solid var(--line);padding:24px var(--pad) calc(28px + env(safe-area-inset-bottom));font-size:13px;color:var(--ink-2)}
.foot>*{max-width:var(--measure);margin-left:auto;margin-right:auto}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:70px;margin-bottom:12px}
.foot-top .brand{font-size:15px}
.foot-top .brand img{width:22px;height:22px}
.foot-tag{margin:0;font-size:12px;letter-spacing:.02em}
.notice{margin:0 0 14px;line-height:1.65}
.notice p{margin:0}
.legal-links{margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.legal-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-underline-offset:4px}
.biz{margin:0;line-height:1.7;font-size:12px}

/* ── 카드 · 제목 ── */
.card{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--card-shadow);padding:16px;margin:0 0 14px;min-width:0}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.h1{font-size:20px;margin:0;line-height:1.3}
h1.h1{font-size:24px}
.section-note{font-size:13px;color:var(--ink-2)}
.report-label{display:flex;justify-content:space-between;margin:0 0 10px;font-size:11px;font-weight:800;color:var(--eyebrow);letter-spacing:.16em;text-transform:uppercase}
.eyebrow,.section-label{margin:0 0 6px;font-size:11px;font-weight:800;color:var(--eyebrow);letter-spacing:.16em;text-transform:uppercase}
.sub{color:var(--ink-2);font-size:14px;line-height:1.65;margin:8px 0}
.sub a{color:var(--accent)}
.hint{color:var(--ink-2);font-size:13px;line-height:1.6;margin:8px 0 0}
.pill{display:inline-block;font-size:12px;font-weight:700;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.pill small{font-weight:500;color:var(--ink-2);margin-left:4px}
.badge-ai{background:var(--deep-em);border-color:transparent}
.blk{font-size:14px;font-weight:700;margin:14px 0 4px;color:var(--accent)}
.blk+p,.card ul{margin:0 0 4px}
.card ul{padding-left:20px}
.card li{margin:3px 0}
.errors{background:var(--surface);border:1px solid var(--down);border-left:3px solid var(--down);border-radius:12px;padding:12px 14px 12px 32px;margin:0 0 14px;color:var(--ink);font-size:13px}
.errors li+li{margin-top:5px}

/* ── 버튼 (전달본 .primary-action / .dark-action) ── */
.btn,.primary-action{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:50px;padding:12px 20px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;transition:background-color 180ms ease,transform 180ms ease;margin-top:14px}
.primary-action{display:inline-flex;width:auto;margin-top:0}
.btn:disabled{background:var(--bg);border:1px solid var(--ink-2);color:var(--ink-2);cursor:not-allowed;transform:none;box-shadow:none}
.btn-line,.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--ink-2);min-height:44px}
.text-action,.inline-link{color:var(--accent);font-size:13px;text-decoration:underline;text-underline-offset:5px;display:inline-flex;align-items:center;min-height:44px}
.share-form{margin-top:14px}
.share-form .btn{margin-top:0}
.share-form .link{margin-top:10px;display:inline-block}
.price-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0 12px;font-size:12px;color:var(--accent)}
.price-note img{width:16px;height:16px}

/* ── 첫 화면 (전달본 홈 구성: 히어로 → 01 선언 → 02 시작 카드(폼) → 03 인용) ── */
.wrap.input-page{max-width:none;padding:0}
.hero-section,.manifesto-inner,.start-inner,.about-content{width:min(var(--measure),calc(100% - 2*var(--pad)));margin:0 auto}
.hero-section{padding:52px 0 64px;display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.hero-copy{max-width:680px}
.input-title{margin:18px 0 0;font-size:clamp(38px,11vw,54px);line-height:1.13;letter-spacing:-.03em}
.hero-intro{margin:24px 0 0;color:var(--ink-2);font-size:16px;line-height:1.8}
.hero-intro b{color:var(--ink);font-weight:700}
.daily-copy{margin-top:32px;padding:16px 0 0 18px;border-left:3px solid var(--moss)}
.daily-copy-meta{display:flex;flex-direction:column;gap:3px;color:var(--ink-2);font-size:11px;letter-spacing:.08em}
.daily-copy-meta span:first-child{color:var(--eyebrow);font-weight:800}
.daily-copy-title{margin:14px 0 3px;font-size:22px;font-weight:750;letter-spacing:-.03em}
.daily-copy-body{max-width:455px;margin:0;color:var(--ink-2);font-size:15px;line-height:1.85}
.daily-copy-action{margin:14px 0 0;color:var(--accent);font-size:13px}
.daily-copy-action span{display:block;margin-bottom:2px;color:var(--ink-2);font-size:11px;letter-spacing:.08em}
.hero-actions{margin-top:32px;display:flex;align-items:center;flex-wrap:wrap;gap:20px}
.hero-media{min-width:0;width:min(620px,100%);margin:0 auto}
.hero-image-frame{position:relative;min-height:min(480px,82vw);overflow:hidden;border-radius:120px 120px 14px 14px;background:var(--section-bg);box-shadow:0 28px 70px rgba(41,74,67,.17)}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:hero-drift 28s ease-in-out infinite alternate;transform-origin:60% 40%;background:var(--section-bg)}
.hero-image.is-motion{animation:none}
@keyframes hero-drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,1.5%)}}
.hero-image-wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,38,35,.03),rgba(22,38,35,.36));pointer-events:none}
.hero-caption{position:absolute;right:20px;bottom:20px;left:20px;display:flex;justify-content:space-between;gap:12px;color:rgba(255,255,255,.92);font-size:11px;letter-spacing:.1em}
.hero-caption span:first-child{font-weight:800}
.manifesto-section{padding:72px 0;border-top:1px solid var(--line);background:var(--surface)}
.manifesto-grid{margin-top:30px;display:grid;grid-template-columns:1fr;gap:34px}
.manifesto-grid h2,.start-card h2,.quote-section h2,.about-content h1{margin:0;font-size:clamp(30px,8vw,52px);line-height:1.22;letter-spacing:-.03em}
.manifesto-body{max-width:450px;color:var(--ink-2);font-size:15px;line-height:1.9}
.manifesto-body p{margin:0 0 20px}
.mini-report{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--moss);border-radius:0 var(--radius) var(--radius) 0;padding:14px;margin:0 0 20px;color:var(--ink)}
.mini-head{display:flex;justify-content:space-between;margin:0 0 8px;font-size:12px;font-weight:700;color:var(--ink-2)}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mini-grid span{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink-2);background:var(--surface);border-radius:8px;padding:6px 8px;white-space:nowrap}
.mini-grid b{font-variant-numeric:tabular-nums;font-size:24px;font-weight:750;line-height:1.3;color:var(--ink)}
.mini-report .hint{margin-top:8px}
.start-section{padding:64px 0}
.start-card{display:grid;grid-template-columns:1fr;gap:34px;padding:28px 20px;border-radius:var(--radius);background:var(--deep);color:var(--deep-ink)}
.start-card .section-label{color:var(--deep-sub)}
.start-card h2{margin-top:20px;color:var(--deep-ink)}
.start-card h2 em{color:var(--deep-em)}
.start-card>.start-copy>p{max-width:500px;margin:20px 0 0;color:var(--deep-sub);font-size:15px;line-height:1.85}
.start-note{display:block;margin-top:16px;color:var(--deep-sub);font-size:12px}
.quote-section{position:relative;padding:110px 20px;overflow:hidden;text-align:center;background:var(--section-bg)}
.quote-section .section-label,.quote-section h2,.quote-section>p{position:relative;z-index:1}
.quote-section h2{max-width:820px;margin:22px auto 0;color:var(--accent);font-size:clamp(28px,7vw,54px)}
.quote-section>p{max-width:420px;margin:22px auto 0;color:var(--ink-2);font-size:14px}
.quote-orbit{position:absolute;top:50%;left:50%;width:125vw;height:125vw;max-width:760px;max-height:760px;border:1px solid rgba(73,110,97,.17);border-radius:50%;transform:translate(-50%,-50%) rotate(-16deg)}
.quote-orbit::before,.quote-orbit::after{position:absolute;inset:14%;border:1px solid rgba(73,110,97,.11);border-radius:50%;content:""}
.quote-orbit::after{inset:28%}
.quote-orbit span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--moss)}
.quote-orbit span:first-child{top:10%;left:70%}
.quote-orbit span:last-child{right:19%;bottom:17%;background:var(--down)}
.about-content{padding:58px 0 72px}
.about-content h1{margin-top:20px}
.about-columns{margin:42px 0 48px;display:grid;grid-template-columns:1fr;gap:34px;color:var(--ink-2);font-size:16px;line-height:1.9}
.about-columns p{margin:0}
.about-columns h2{margin:0 0 14px;color:var(--accent);font-size:16px}
.about-columns ul{margin:0;padding-left:20px}

/* ── 입력 폼 ── */
.form{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);padding:20px;margin:0;color:var(--ink)}
.form fieldset{border:0;padding:0;margin:0 0 16px;min-width:0}
.form legend{font-size:13px;font-weight:700;margin:0 0 8px;padding:0 0 0 9px;border-left:2px solid var(--moss)}
.form legend .hint{display:inline;margin-left:6px;font-weight:500}
.choice-row{display:flex;gap:8px;flex-wrap:wrap}
.choice{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--ink-2);border-radius:999px;padding:9px 14px;font-size:13px;min-width:64px;cursor:pointer;min-height:44px;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.choice:has(input:checked){border:2px solid var(--accent);padding:8px 13px;background:var(--bg);font-weight:700}
.choice:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.choice input{margin:0;width:18px;height:18px;flex:none;accent-color:var(--accent)}
.date-fields,.time-fields{display:grid;gap:8px}
.date-fields{grid-template-columns:1.4fr 1fr 1fr}
.time-fields{grid-template-columns:1fr 1fr}
.field-group{display:flex;flex-direction:column;gap:4px;min-width:0}
.field-label{font-size:12px;color:var(--ink-2)}
.form input[type=number]{width:100%;min-height:48px;border:1px solid var(--ink-2);border-radius:10px;background:var(--surface);padding:0 12px;font-size:16px;color:var(--ink);transition:border-color .15s ease,background-color .15s ease}
.form input[type=number]::placeholder{color:var(--ink-2);opacity:1}
.form:has(input[name=time_unknown]:checked) .time-fields{border-left:3px solid var(--ink-2);padding-left:9px}
.form:has(input[name=time_unknown]:checked) .time-fields input{background:var(--bg)}
.form input[type=number]:focus{border-color:var(--moss);box-shadow:0 0 0 3px rgba(73,110,97,.14);outline:none}
.time-choice{margin-top:10px}
.submit-note{text-align:center;font-size:13px;color:var(--ink-2);margin:10px 0 0}

/* ── 원국 표 ── */
.pillars{width:100%;border-collapse:separate;border-spacing:6px;table-layout:fixed}
.pillars th{font-size:12px;font-weight:600;color:var(--ink-2);padding:2px 0 4px}
.pillars td{text-align:center;font-size:22px;letter-spacing:.04em;padding:9px 0;border-radius:10px;font-weight:600}
.wx-wood{background:var(--wx-wood-bg);color:var(--wx-wood-fg)}
.wx-fire{background:var(--wx-fire-bg);color:var(--wx-fire-fg)}
.wx-earth{background:var(--wx-earth-bg);color:var(--wx-earth-fg)}
.wx-metal{background:var(--wx-metal-bg);color:var(--wx-metal-fg)}
.wx-water{background:var(--wx-water-bg);color:var(--wx-water-fg)}
.wx-none,.unknown{background:var(--surface-2);color:var(--ink-2)}
.gz-line{font-size:13px;color:var(--ink-2);margin:10px 0 0}
.gz-line b{color:var(--ink);font-weight:700}

/* ── 점수 카드 ── */
.scores{border-top:3px solid var(--accent)}
.years{display:flex;gap:0;margin:0 0 10px;border-bottom:1px solid var(--line)}
.year-tab{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:13px;font-weight:600;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s ease,background-color .15s ease,border-color .15s ease}
.year-tab.on{color:var(--accent);font-weight:750;border-bottom-color:var(--accent)}
.grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:8px}
.cell{display:flex;flex-direction:column;justify-content:space-between;min-height:92px;padding:10px 12px;border-radius:12px;min-width:0;color:var(--ink)}
.cell:nth-child(1){background:var(--tile-1)}.cell:nth-child(2){background:var(--tile-2)}.cell:nth-child(3){background:var(--tile-3)}
.cell:nth-child(4){background:var(--tile-4)}.cell:nth-child(5){background:var(--tile-5)}.cell:nth-child(6){background:var(--tile-6)}
.cell.cell-top{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--tile-ring)}
.dom{font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:3px}
.cell.cell-top .dom{color:var(--ink)}
.top-label{font-size:11px;font-weight:700;color:var(--accent)}
.num{font-weight:750;font-size:38px;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.arrow{font-size:19px;font-weight:700;line-height:1}
.arrow.up{color:var(--up)}.arrow.down{color:var(--down)}.arrow.flat{color:var(--flat)}
.band{font-size:12px;font-weight:700;color:var(--ink);margin-top:4px}
.summary{margin:14px 0 0;padding:0}
.summary-row{padding:8px 0;border-top:1px solid var(--line)}
.summary-row:first-child{border-top:0}
.summary dt{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:2px}
.summary dt b{font-size:14px;color:var(--ink);margin-left:4px}
.summary dd{margin:0;font-size:14px;line-height:1.55}
.summary-row.strong dt{color:var(--accent)}
.summary-row.weak dt{color:var(--ink-2)}
.oneline{font-size:17px;line-height:1.5;font-weight:700;letter-spacing:-.02em;margin:14px 0 8px}
.period{font-size:13px;color:var(--ink-2);margin:0;padding:9px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.period b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.scores .btn{margin-top:14px}
/* 채움 리드 — 타고난 결 머리의 사람 단위 덩어리 (2026-09-21). 목록 줄이 먼저, 문장이 받는다 */
.chaeum{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.chaeum p{margin:0 0 8px}
.chaeum-head{font-weight:700;color:var(--ink)}
.chaeum-tail{color:var(--ink-2)}

/* ── 오늘의 운세 · 오프닝 · 샘플 ── */
.chart,.daily{min-width:0}
.daily-num{display:flex;align-items:baseline;gap:16px;margin:6px 0 0}
.daily-num b{font-weight:750;font-size:34px;line-height:1.1;letter-spacing:-.03em}
.daily-line{font-size:15px}
.opening{background:var(--deep);color:var(--deep-ink);border-color:transparent}
.opening .h1{color:var(--deep-ink)}
.opening .pill{background:rgba(251,249,245,.12);color:var(--deep-ink);border-color:transparent}
.opening p{color:var(--deep-sub);font-size:15px;line-height:1.9;margin:12px 0}
.opening .sub{color:var(--deep-sub)}
.sample>.card-head{border-left:3px solid var(--moss);padding-left:10px;margin-bottom:18px}
.sample .h1{font-size:19px;color:var(--accent)}
#sample-body p,#sample-body ul{font-size:15px;line-height:1.85;margin:0}
#sample-body li{margin-bottom:5px}
#sample-body h3:first-child+p{padding:12px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px}
#sample-body h3:nth-of-type(3),#sample-body h3:nth-of-type(4){padding-top:14px;border-top:1px solid var(--line)}
#sample-body>.sub{padding:14px;background:var(--surface-2);border-left:3px solid var(--ink-2);font-size:13px}
.sample>.btn{margin-top:22px}
.gunghap-cta .hint{text-align:center}

/* ── 근거 화면 ── */
.reading .h1{font-size:19px}
.score-inline{font-size:13px;font-weight:600;color:var(--ink-2);margin-left:6px}
.reading.sample{border-color:var(--moss)}
.flow-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px -4px 0}
.flow{border-collapse:collapse;font-size:12px;min-width:520px}
.flow th,.flow td{padding:5px 4px;text-align:center;border-bottom:1px solid var(--line)}
.flow th{font-weight:600;color:var(--ink-2)}
.fdom{text-align:left!important;white-space:nowrap;color:var(--ink)!important;font-weight:700!important}
.mf{font-variant-numeric:tabular-nums}
.mf.hi{background:var(--wx-wood-bg);color:var(--wx-wood-fg);font-weight:700}
.mf.lo{background:var(--wx-fire-bg);color:var(--wx-fire-fg)}
.score-meaning{margin-top:6px}
.money-note,.health-note{border-top:1px solid var(--line);padding-top:8px}
.notice.reading-notice{font-size:13px;color:var(--ink-2)}
p.notice{font-size:13px;color:var(--ink-2);margin:8px 0 0}

/* ── 궁합 ── */
.row{margin:0 0 14px}
.lbl{display:block;font-size:14px;font-weight:700;margin:0 0 8px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg label{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-size:14px;font-weight:600;min-height:44px}
.seg label:has(input:checked){border-color:var(--accent);background:var(--deep-em)}
.inline{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inline input[type=number]{width:72px;min-height:44px;border:1px solid var(--ink-2);border-radius:10px;padding:0 10px;font-size:16px;background:var(--surface)}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:14px}

/* ── 공유 ── */
.privacy{padding:12px;border-left:3px solid var(--moss);background:var(--surface-2);font-size:13px;line-height:1.7;margin:16px 0 0;color:var(--ink)}
.share-owner #share-msg{min-height:4.8em;line-height:1.6;font-size:13px;margin:8px 0 0}
.share-owner button.link{width:100%;text-align:left;text-decoration:underline;padding:10px 0;justify-content:flex-start}
.share-owner .btn{margin-top:10px}
.recipient-cta{margin:0 0 16px}
.recipient-cta .hint{text-align:center}

/* ── 내 기록 ── */
.record .h1 a{text-decoration:none}
.record .h1{font-size:17px}
.withdraw .chk{margin:10px 0}

/* ── 결제 ── */
.price{font-size:26px;margin:6px 0;font-weight:750;letter-spacing:-.03em}
.price .sub{display:inline;font-weight:400;margin-left:6px}
.consent-box{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px;margin:14px 0}
.consent-text{margin:0 0 10px;font-size:15px;line-height:1.7}
.chk-row{display:flex;align-items:flex-start;gap:8px;margin:8px 0;font-size:15px;cursor:pointer}
.chk-row input{margin-top:4px;accent-color:var(--accent)}
.trust{margin:10px 0 0;font-weight:700;color:var(--accent)}

/* ── 법정 표시 ── */
.legal .blk{margin-top:18px}
.legal-table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0 0}
.legal-table th,.legal-table td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.legal-table th{width:36%;color:var(--ink-2);font-weight:600}

/* ── 상태 표시 (r5 states) ── */
.preview-note{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.state-skeleton{display:grid;gap:10px;margin:14px 0}
.state-skeleton span{display:block;background:var(--line);height:10px;border-radius:2px}
.state-skeleton span:last-child{width:65%}
.state-message{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}

/* ── 데스크톱 2열 (결과 · 근거) ── */
.two-col{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.two-col>.card{margin-bottom:0}
.two-col>.chart{order:2}
.two-col>.scores{order:1}
.reading-page{max-width:760px}

@media (min-width:390px){.cell{min-height:96px}.num{font-size:40px}.h1{font-size:21px}}
@media (min-width:681px){
  .top{min-height:86px;gap:32px}
  .site-nav{gap:26px}
  .daily-copy-meta{flex-direction:row;justify-content:space-between;gap:16px}
  .hero-section{padding:66px 0 90px}
  .hero-image-frame{min-height:min(680px,82vw);border-radius:160px 160px 16px 16px}
  .manifesto-section{padding:96px 0}
  .manifesto-grid{margin-top:42px;grid-template-columns:minmax(0,1fr) minmax(300px,.75fr);gap:46px}
  .start-section{padding:80px 0}
  .start-card{grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:48px;padding:40px}
  .quote-section{padding:140px 32px}
  .quote-orbit{width:min(75vw,760px);height:min(75vw,760px)}
  .about-content{padding:84px 0 100px}
  .about-columns{margin:60px 0 55px;grid-template-columns:1fr .72fr;gap:60px}
}
@media (min-width:768px){
  :root{--pad:24px}
  .wrap{padding-top:28px}
  .grid{grid-template-columns:repeat(3,1fr);gap:10px}
  h1.h1{font-size:26px}
}
@media (min-width:901px){
  .hero-section{grid-template-columns:minmax(0,.92fr) minmax(400px,1.08fr);gap:clamp(54px,8vw,126px);padding:clamp(66px,8vw,120px) 0 clamp(90px,10vw,150px)}
  .hero-copy{max-width:580px}
  .hero-media{width:auto;margin:0}
  .hero-image-frame{min-height:550px}
  .input-title{font-size:clamp(41px,5.2vw,68px)}
  .hero-intro{font-size:clamp(16px,1.5vw,19px);margin-top:28px}
  .manifesto-grid{gap:clamp(46px,10vw,150px)}
  .manifesto-grid h2,.start-card h2,.about-content h1{font-size:clamp(32px,4.4vw,57px)}
  .quote-section h2{font-size:clamp(31px,4.5vw,61px)}
  .start-card{padding:clamp(34px,6vw,76px)}
}
@media (min-width:1024px){
  .mini-grid{grid-template-columns:repeat(6,1fr)}   /* 본문 열이 380px 을 넘는 폭부터 — 그 아래는 3열 2행 */
  :root{--pad:32px}
  .two-col{grid-template-columns:1fr 1.15fr;gap:24px}
  .two-col>.chart{order:1}
  .two-col>.scores{order:2}
  .card{padding:24px}
  .cell{min-height:104px}
  .reading-page{margin:0 auto}
}
@media (hover:hover) and (pointer:fine){
  .site-nav a:hover,button.link:hover,.legal-links a:hover{color:var(--accent);text-decoration:underline}
  .btn:not(.btn-line):not(.btn-secondary):not(:disabled):hover,.primary-action:hover{background:var(--accent-hover);transform:translateY(-2px)}
  .btn-line:hover,.btn-secondary:hover{background:var(--surface);border-color:var(--accent);color:var(--accent)}
  .choice:hover,.form input[type=number]:hover{border-color:var(--moss)}
  .year-tab:hover{background:var(--surface-2);color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}button:active,.btn:active,.btn:hover,.primary-action:hover{transform:none}.btn,.primary-action,.choice,.site-nav a,button.link,.year-tab,.form input[type=number]{transition:none}.hero-image{animation:none}}

/* 연애 ctx 선택 (S7, 2026-09-22) — "지금 만나는 사람이 있나요".
   결제 버튼 위에 둔다. 고르면 연애 해설이 그 상황에 맞게 나온다. 안 골라도 화면은 그대로다. */
.love-ctx-q { margin: 14px 0 6px; }
.love-ctx { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.love-ctx .chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer;
}
.love-ctx .chip:hover { border-color: var(--accent); }
.love-ctx .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.love-ctx .chip-clear { opacity: .65; }