/* 아르카나 v2 — 탁자 위의 읽기.
   style.css 위에 얹는 재구성 층. 상담 화면은 카드 묶음과 그 해석이 한 덩어리로 쌓이고,
   나머지 화면은 틀을 두고 장식 문구·기호·화살표만 걷어낸다. 치수는 design/astra-5/NOTES.md 기준. */

@font-face {font-family:'Gowun Batang';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/gowun-batang.woff2') format('woff2')}
@font-face {font-family:'Hahmlet';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/hahmlet.woff2') format('woff2')}
:root {
  --ink:#080f20; --velvet:#101c30; --txt:#ece6d9; --muted:#9ba8b8; --gold:#dfc58c; --gold-deep:#987446;
  --gold-soft:#c9ae7a; --gold-light:#f1dfae;
  --txt-2:#b3bccb; --muted-2:#8e9bad; --muted-3:#7d8a9b; --placeholder:#64738a;
  --serif:'Gowun Batang','Noto Serif KR','Nanum Myeongjo',Batang,Georgia,serif;
  --display:'Hahmlet','Gowun Batang','Noto Serif KR',Batang,Georgia,serif;
  --sans:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --rule:rgba(155,168,184,.4);
}
html,body {background:var(--ink)}
.salon-frame {display:none}

/* ---------- 걷어내는 것: 영문 소제목, 번호, 기호, 화살표, 구획선 ---------- */
.eyebrow,.chapter-kicker,.header-note,.orbit-number,.scene-footer,.consultation-divider,.panel-colophon,
.closing-mark,.salon-seal,.reader-seal,.room-moon,.question-label>span,.plabel small,.scene-enter i {display:none!important}
.btn::before,.btn::after,.drawbar .btn::after,.modes button::before,.modes button::after,.personas button::before,.personas button::after,
#hint::before,#hint::after,.msg.c .who::before,.msg.c .who::after,.msg.u::before {content:none!important;display:none!important}
.hero-copy h1 em,.consultation-copy h2 em,.scene-whisper em,.g-top h1 em {color:inherit;font-style:normal}
.hero-caption button {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}
.hero-caption button:focus-visible {position:static;width:auto;height:auto;margin:0;clip:auto;font:12px var(--sans);color:var(--txt)}

/* ---------- 글자 ---------- */
body {font-family:var(--serif)}
.hero-copy h1,.consultation-copy h2,.scene-whisper,.ptitle,.reader-name,.gate-in h2,.g-top h1,.zf-back b {font-family:var(--display);letter-spacing:-.02em}
.hero-copy h1 {font-weight:400;line-height:1.32}
.hero-description,.consultation-copy>p {font-family:var(--serif);font-size:14px;line-height:1.85;color:var(--muted);letter-spacing:0}
.orbit-title {font:14px/1.5 var(--serif);color:var(--txt);letter-spacing:0}
.orbit-hint {font:12px/1.6 var(--sans);color:var(--muted);letter-spacing:0;white-space:normal;max-width:220px}
.hero-caption>div {gap:4px}
.scene-enter {justify-content:flex-start;gap:0;font:16px var(--serif);color:var(--txt);border-bottom-color:var(--gold)}
.question-label {font:16px/1.6 var(--serif);color:var(--txt)}
#q {font:16px/1.8 var(--sans);background:none;border:0;border-bottom:1px solid var(--rule);padding:12px 0;min-height:96px;color:var(--txt)}
#q:focus {border-bottom-color:var(--gold)}
#q::placeholder {color:var(--muted);font-size:14px}
.plabel {margin-top:20px;font:16px var(--serif);color:var(--txt)}
.personas {gap:0 16px}
.personas button {padding:16px 0 16px 16px;border:0;border-left:2px solid transparent;border-bottom:1px solid var(--rule);background:none;min-height:0;transition:border-color .2s}
.personas button.sel {border-left-color:var(--persona);background:none}
.personas b {font:400 16px/1.5 var(--serif);color:var(--txt);letter-spacing:0}
.personas small {font:12px/1.6 var(--sans);color:var(--muted)}
.modes {gap:0 16px}
.modes button {padding:20px 0;min-height:0;border-bottom:1px solid var(--rule)}
.modes b {font:400 18px/1.5 var(--serif);color:var(--txt);letter-spacing:0}
.modes small {font:12px/1.6 var(--sans);color:var(--muted)}
.modes button.done small {color:var(--gold)}
.appointment-note {font:12px/1.7 var(--sans);color:var(--muted);text-align:left}
.consultation-copy .today {font:12px/1.7 var(--sans);color:var(--muted);letter-spacing:0;margin-top:28px}
.consultation-copy .hello {font:14px/1.7 var(--sans);color:var(--txt)}
.hello .plain {text-decoration:underline;text-underline-offset:4px;color:var(--muted)}
#foot {text-align:left;font:12px/1.9 var(--sans);color:var(--muted)}
#foot a {font:14px var(--serif);color:var(--txt);border-bottom:1px solid var(--gold);padding-bottom:4px}
#foot .tip {color:var(--muted)}
.btn {border-radius:4px;background:var(--gold);border:1px solid var(--gold);color:var(--ink);font:400 16px/1.4 var(--serif);min-height:50px;letter-spacing:0;box-shadow:none}
.btn:active {transform:scale(.99)}
.plain {font:14px/1.5 var(--serif);color:var(--txt);padding:12px 0;min-height:44px;text-decoration:none}
.plain:hover {color:var(--gold)}

/* ---------- 프로필·궁합: 종이 한 장에 이름을 적어 건넨다 ---------- */
#profile,#match {padding:calc(max(24px,env(safe-area-inset-top)) + 56px) 24px max(32px,env(safe-area-inset-bottom));background:var(--ink);align-items:stretch}
#profile .wrap,#match .wrap {max-width:420px;padding:0;gap:0;align-items:stretch;margin:auto}
.ptitle {font-size:30px;line-height:1.35;text-align:left;color:var(--txt);margin:0 4px 16px}
.psub {font:14px/1.7 var(--serif);text-align:left;color:var(--muted);margin:0 4px 24px;word-break:keep-all}
.pform {gap:16px;max-width:none}
.paper {position:relative;display:flex;flex-direction:column;gap:24px;padding:32px 20px 48px;background:var(--velvet);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.paper .seal {position:absolute;right:20px;bottom:20px;width:24px;height:24px;opacity:.75;pointer-events:none}
.pform label {gap:8px;font:400 16px/1.5 var(--serif);color:var(--txt)}
.pform input,.pform select {background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0;min-height:40px;font:16px var(--sans);color:var(--txt);background-color:transparent}
.pform select {padding-right:28px;background-position:calc(100% - 10px) 17px,calc(100% - 5px) 17px}
.pform input:focus,.pform select:focus {outline:0;border-bottom-color:var(--gold)}
.pform input::placeholder {color:var(--placeholder)}
.pform small {font:12px/1.5 var(--sans);color:var(--muted)}
.perr {text-align:left;min-height:0;margin:-8px 0 0;font:12px/1.5 var(--sans);color:#e5aca3}
.perr:empty {display:none}
.pform .btn {margin-top:8px}
.pform .plain {align-self:center;text-decoration:none;font-size:16px}
#profile .foot,#match .foot {text-align:left;font:12px/1.7 var(--sans);color:var(--muted);margin:16px 4px 0}

/* ---------- 상담: 카드 묶음과 해석이 한 덩어리로 쌓인다 ---------- */
.room {background:var(--ink);border:0}
body[data-phase="talk"] #sky {opacity:.12}
#table {display:none!important}
.chat {scrollbar-color:#3a4457 transparent}
.room-heading {display:block;width:100%;max-width:640px;margin:0 auto;padding:max(28px,calc(env(safe-area-inset-top) + 12px)) 28px 0;border:0}
.reader-name {display:block;font:400 22px/1.3 var(--display);color:var(--txt)}
.reader-tone {display:block;font:12px/1.6 var(--sans);color:var(--muted);margin-top:4px}
.room-heading.speaking .reader-name {animation:reader-arrival 1.2s ease-out}
.log {max-width:640px;padding:24px 28px 36px;gap:24px}
.msg {animation:message-arrival .5s ease-out}
.msg.c .who {display:none}
.msg.c p {font:16px/1.85 var(--serif);color:var(--txt);margin-bottom:16px}
.msg.c p:last-child {margin-bottom:0}
.msg.u {align-self:stretch;max-width:none;margin:0 0 0 28px;padding:0;border:0;background:none;font:14px/1.75 var(--sans);color:var(--muted);word-break:keep-all}
.msg.sys {align-self:flex-start;max-width:none;padding:0;border:0;background:none;font:12px/1.7 var(--sans);letter-spacing:0;color:var(--muted);text-align:left}
.dots {padding:8px 0}
.dots i {background:var(--gold)}
.msg.cards {display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px 12px;margin:8px 0 2px}
.msg.cards figure {flex:0 0 calc((100% - 22px) / 3);text-align:center;animation:table-arrival .7s var(--ease)}
.msg.cards[data-n="1"] figure {flex-basis:54%}
.msg.cards[data-n="2"] figure {flex-basis:45%}
.msg.cards .cardface {cursor:pointer;box-shadow:0 12px 26px #000b,0 0 0 1px #dbbc7955}
.msg.cards .cardface.rev {transform:rotate(180deg)}
.msg.cards figcaption {margin-top:12px;font:12px/1.5 var(--serif);color:var(--txt);word-break:keep-all}
.msg.cards figcaption small {display:block;font:12px/1.5 var(--sans);color:var(--muted);margin-top:2px}
.msg.cards figcaption .fate {display:inline-flex;align-items:center;gap:4px;margin-top:4px;font:12px/1.4 var(--sans);color:var(--gold)}
.msg.cards figcaption .fate.dark {color:var(--muted)}
.msg.cards figcaption .fate img {width:12px;height:16px}
.msg.cards .cardface.fate-bright {box-shadow:0 0 0 1px var(--gold-light),0 0 18px #f0d58a99,0 12px 26px #000b}
.msg.cards .cardface.fate-dark {box-shadow:0 0 0 1px #8f7ad0,0 0 18px #5a3f9c99,0 12px 26px #000b}
.card .pos em.fate,.card .pos em.lv {letter-spacing:0}

/* 아래쪽: 대화 중 / 뽑기 차례 / 마무리는 한 번에 하나만 */
.talk,.drawbar,.endbar {max-width:640px;background:var(--ink);border-top:0;padding:12px 28px calc(12px + env(safe-area-inset-bottom))}
.talk {display:grid;grid-template-columns:1fr auto;grid-template-areas:"say send" "stop left";gap:8px 16px;align-items:center;flex-wrap:nowrap}
.talk.off {opacity:.35}
.talk input {grid-area:say;background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:12px 0;min-height:44px;font:16px/1.4 var(--sans);color:var(--txt)}
.talk input:focus {border-bottom-color:var(--gold)}
.talk input::placeholder {font-size:14px;color:var(--muted)}
.talk .send {grid-area:send;width:auto;height:auto;min-height:44px;padding:8px 0 8px 4px;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:var(--gold);font:16px/1.4 var(--serif);white-space:nowrap}
.talk .send:focus-visible {outline:2px solid var(--gold);outline-offset:2px}
.talk .plain {grid-area:stop;margin:0;padding:8px 0;min-height:36px;justify-self:start;font-size:14px;color:var(--muted);flex-basis:auto}
.talk .plain:hover {color:var(--txt)}
.left-count {grid-area:left;justify-self:end;font:12px/1.5 var(--sans);color:var(--muted)}
.left-count:empty {display:none}
.drawbar,.endbar {align-items:stretch;gap:12px}
.draw-caption {font:14px/1.7 var(--serif);color:var(--txt);text-align:left;margin:0}
.drawbar .btn,.endbar .btn {max-width:none;min-height:50px}
.drawbar .plain,.endbar .plain {align-self:center;padding:8px 0;min-height:36px;font-size:14px;color:var(--muted)}
.endrow {display:flex;justify-content:space-between;gap:16px}
.endrow .plain {font-size:14px;color:var(--txt);min-height:44px;padding:8px 0}
.note {font:12px/1.7 var(--sans);color:var(--muted);text-align:left;margin:0}
#hint {border:0;background:#0c1729f0;font:14px/1.7 var(--serif);color:var(--txt);padding:12px 16px}
#hint b {font:400 14px var(--serif);letter-spacing:0;color:var(--gold)}
.corner {background:#080f2099;border-color:#9ba8b855;color:var(--txt);display:grid;place-items:center}

/* 카드 크게 보기: 뒷면 글의 장식도 글로 */
.zinfo b {font:400 18px var(--display);color:var(--txt)}
.zinfo p {font:14px/1.8 var(--serif);color:var(--muted)}
.zb-kicker {font:12px var(--sans);letter-spacing:0;color:var(--muted)}
.zf-back i {letter-spacing:0;text-transform:none;font:12px var(--serif)}
.zb-rule {width:36px;height:1px;background:var(--gold-deep);font-size:0;margin:16px 0 16px}
.zb-foot {display:none}
.zhint {letter-spacing:0;font-size:12px}
.zf-back dt {letter-spacing:0}

/* 초대 코드 */
#gate {background:var(--ink)}
.gate-in {text-align:left}
.gate-in h2 {font-size:30px;margin:0}
.gate-in .gate-msg {font:14px/1.8 var(--serif);color:var(--muted)}
.gate-in input {text-align:left;letter-spacing:.08em;background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:12px 0;font:18px var(--sans);color:var(--txt);text-transform:uppercase}
.gate-in input:focus {outline:0;border-bottom-color:var(--gold)}
#left {color:var(--muted);letter-spacing:0}
.toast {border-radius:0}
.toast b,.toast span {letter-spacing:0}

/* ---------- 2026-11-11 점검 반영: 로고, 말투 목록, 작은 글씨 ---------- */
/* 로고는 글자 하나로. 자간을 넓힌 영문과 세로선 부제는 쓰지 않는다 */
.wordmark {font:400 22px/1 var(--latin);letter-spacing:.08em;gap:0}
.wordmark span {display:none}
/* 말투 고르기: 같은 칸 네 개를 바둑판으로 두지 않고, 한 줄에 하나씩 고르는 목록 */
#personas {display:flex;flex-direction:column;gap:0}
#personas button {display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:52px;padding:16px 0 16px 16px}
#personas b {flex:none}
#personas small {margin:0;text-align:right}
/* 화면 글은 12px 아래로 내리지 않는다 */
.orbit-hint,.note,.left-count,.zhint,.msg.cards figcaption small,.msg.cards figcaption .fate {font-size:12px}
/* 카드 도감 */
.g-back {font:14px var(--serif);letter-spacing:0}
.g-legend {font:12px/1.7 var(--sans)}
body.gallery .g-section {font:400 18px/1.5 var(--display);letter-spacing:0;color:var(--txt)}
.g-section small {font:12px var(--sans);letter-spacing:0}
.g-label {font:14px/1.6 var(--sans);color:var(--muted);margin:0 0 4px}
.zinfo small {display:block;font:12px/1.6 var(--sans);color:var(--muted);margin-top:4px}

@media(min-width:760px) {
 .room {max-width:none;margin:0;border:0}
 .room-heading,.log,.talk,.drawbar,.endbar {max-width:640px;padding-inline:28px}
 .log {padding-top:24px}
 .msg.cards {gap:24px 16px}
 .msg.cards figure {flex-basis:calc((100% - 32px) / 3)}
 .msg.cards[data-n="1"] figure {flex-basis:46%}
 .msg.cards[data-n="2"] figure {flex-basis:40%}
 #profile .wrap,#match .wrap {max-width:440px}
 .personas {gap:0 24px}.modes {gap:0 24px}
}
@media(max-width:370px) {
 .log,.room-heading,.talk,.drawbar,.endbar {padding-inline:24px}
 .msg.cards {gap:16px 8px}
 .msg.cards figure {flex-basis:calc((100% - 18px) / 3)}
 .ptitle {font-size:30px}
}
@media(max-height:650px) {
 .room-heading {padding-top:max(16px,env(safe-area-inset-top))}
 .reader-tone {display:block}
 .log {padding-top:16px}
}
@media(prefers-reduced-motion:reduce) {
 .msg,.msg.cards figure {animation:none}
}