:root{
  --night:#070814;   /* --ink·--dim·--amber·--amber2는 '디자인 토큰(D-2)' 블록에서 새 토큰의 별칭으로 정의 */
  --paper:#f1e8d4; --paper-ink:#2b2418; --line:rgba(236,228,210,.16); --glass:rgba(10,11,24,.72);
  --serif:'Gowun Batang',serif; --title:'Nanum Myeongjo',serif;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--night);color:var(--ink);font-family:var(--serif);font-size:var(--fs-list);line-height:1.65;-webkit-font-smoothing:antialiased;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer}
.hidden{display:none!important}
#world{position:fixed;left:0;top:0;display:block;outline:none}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.6))}

/* 오버레이 공통 */
.overlay{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center;opacity:0;pointer-events:none;transition:opacity .9s ease}
.overlay.show{opacity:1;pointer-events:auto}
#gate{background:linear-gradient(rgba(7,8,20,.5),rgba(7,8,20,.05) 45%,rgba(7,8,20,.12) 70%,rgba(7,8,20,.72));justify-content:flex-start;padding-top:12vh}
.kicker{color:var(--dim);font-size:var(--fs-label);letter-spacing:.08em}
h1{margin:12px 0 8px;font-family:var(--title);font-weight:800;line-height:1.15}
h1 .hanja{display:block;font-size:clamp(40px,11vw,62px);letter-spacing:.12em;color:var(--amber2);text-shadow:0 0 30px rgba(232,184,107,.45)}
h1 .kor{display:block;font-size:var(--fs-list);letter-spacing:.6em;color:var(--dim);margin-top:6px;padding-left:.6em}
.lead{opacity:.9;text-shadow:0 1px 8px #000}
#btn-open{margin-top:auto}
.fine{color:var(--dim);font-size:var(--fs-caption);margin:14px 0 4vh;text-shadow:0 1px 6px #000}

.btn{background:linear-gradient(#3e2e1b,#2a1f12);color:var(--amber2);border:1px solid #6d5230;padding:12px 22px;font-size:var(--fs-list);letter-spacing:.2em;border-radius:3px}
.btn.ghost{background:rgba(20,14,8,.55);border-color:var(--amber);padding:13px 34px;font-size:var(--fs-list);letter-spacing:.4em;box-shadow:0 0 30px rgba(232,184,107,.25);animation:breathe 2.6s ease-in-out infinite;backdrop-filter:blur(4px)}
.btn.small{padding:9px 14px;letter-spacing:.05em;font-size:var(--fs-body)}
.btn:disabled{opacity:.45}
@keyframes breathe{0%,100%{box-shadow:0 0 18px rgba(232,184,107,.15)}50%{box-shadow:0 0 36px rgba(232,184,107,.45)}}

/* 방명록 */
#guestbook{background:rgba(7,8,20,.45)}
.book{width:100%;max-width:390px;max-height:calc(100dvh - 32px);overflow:auto;background:var(--paper);color:var(--paper-ink);padding:24px 22px 20px;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 60px rgba(160,120,60,.18);display:flex;flex-direction:column;gap:12px;position:relative;text-align:left}
.book h2{font-family:var(--title);font-size:var(--fs-display);letter-spacing:.3em;text-align:center}
.book-sub{text-align:center;font-size:var(--fs-label);color:#6b5c44;margin-top:-6px}
.book label{display:flex;flex-direction:column;font-size:var(--fs-label);color:#5a4b33;gap:3px}
.book input:not([type=radio]):not([type=checkbox]),.book select{font:inherit;font-size:var(--fs-input);color:var(--paper-ink);background:transparent;border:0;border-bottom:1.5px solid #8d7752;padding:6px 2px;border-radius:0;outline:none;width:100%}
.row{display:flex;gap:14px;align-items:flex-end}.grow{flex:1}
.seg{border:0;padding:0;display:flex;gap:6px;flex:1;flex-wrap:wrap}
.seg legend{font-size:var(--fs-label);color:#5a4b33;margin-bottom:4px;width:100%}
.seg label{flex:1}.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;border:1.5px solid #8d7752;padding:6px 0;border-radius:3px;font-size:var(--fs-body);color:#5a4b33}
.seg input:checked+span{background:#3b2c1a;color:var(--paper);border-color:#3b2c1a}
.chk{flex-direction:row!important;align-items:center;gap:6px!important;padding-bottom:8px;white-space:nowrap}
.leap{flex-direction:row!important;gap:6px!important}
.err{color:#9a2f1c;font-size:var(--fs-label);text-align:center}

/* HUD */
#hud{position:fixed;inset:0;z-index:4;pointer-events:none}
#hud > *{pointer-events:auto}
.top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:linear-gradient(rgba(7,8,20,.7),transparent)}
.room-title{font-family:var(--title);letter-spacing:.25em;color:var(--amber2);text-shadow:0 0 12px rgba(232,184,107,.4)}
.top-actions{display:flex;gap:6px}
.pill{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:4px 12px;font-size:var(--fs-label);backdrop-filter:blur(6px)}
.hint{position:absolute;top:calc(58px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:var(--glass);border:1px solid rgba(232,184,107,.35);border-radius:20px;padding:6px 16px;font-size:var(--fs-label);color:var(--amber2);white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;transition:opacity .6s;backdrop-filter:blur(6px);pointer-events:none}
.hint:empty{opacity:0}
.direction{position:absolute;top:calc(100px + env(safe-area-inset-top));left:16px;right:16px;text-align:center;color:var(--dim);font-style:italic;font-size:var(--fs-label);text-shadow:0 1px 6px #000;opacity:0;transition:opacity .8s;pointer-events:none}
.direction.on{opacity:1}

.bubble{position:absolute;left:0;top:0;width:min(78vw,340px);transform:translate(-50%,-100%);background:rgba(241,232,212,.96);color:var(--paper-ink);border-radius:14px;padding:9px 14px 10px;box-shadow:0 10px 30px rgba(0,0,0,.45);pointer-events:none;transition:opacity .3s}
.bubble::after{content:"";position:absolute;left:var(--tail,50%);bottom:-9px;margin-left:-9px;border:9px solid transparent;border-bottom:0;border-top-color:rgba(241,232,212,.96)}
.b-who{font-size:var(--fs-caption);letter-spacing:.08em;color:var(--c,#6b5c44);font-weight:700;filter:brightness(.55) saturate(1.4)}
.b-txt{font-size:var(--fs-body);line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;max-height:30vh;overflow-y:auto;scrollbar-width:none}
.b-txt::-webkit-scrollbar{display:none}

.bottom{position:absolute;left:0;right:0;bottom:0;padding:0 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(7,8,20,.85) 40%)}
.ask{max-width:640px;margin:0 auto 8px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 0;scrollbar-width:none}
.chips button{flex:none;background:var(--glass);border:1px solid rgba(232,184,107,.5);color:var(--amber2);border-radius:16px;padding:4px 12px;font-size:var(--fs-label);white-space:nowrap}
.ask-row{display:flex;gap:8px}
.ask-row input{flex:1;min-width:0;font:inherit;font-size:var(--fs-input);background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:9px 12px;outline:none;backdrop-filter:blur(6px)}
.ask-row input:focus{border-color:var(--amber)}
.menu{display:flex;justify-content:center;gap:4px;max-width:640px;margin:0 auto}
.mi{flex:1;max-width:96px;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:var(--fs-caption);color:var(--dim);padding:6px 0}
.mi i{font-style:normal;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1px solid var(--line);font-family:var(--title);font-size:var(--fs-list);color:var(--ink);backdrop-filter:blur(6px)}
.mi.on i{border-color:var(--amber);color:var(--amber2);box-shadow:0 0 14px rgba(232,184,107,.35)}
.mi:disabled{opacity:.35}

.sheet{position:absolute;left:0;right:0;bottom:0;max-height:72dvh;background:rgba(14,15,32,.97);border-top:1px solid var(--line);border-radius:16px 16px 0 0;transform:translateY(105%);transition:transform .4s ease;overflow-y:auto;padding:0 16px calc(24px + env(safe-area-inset-bottom));z-index:6}
.sheet.open{transform:none}
.sheet-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:14px 0 10px;background:rgba(14,15,32,.98)}
.log{display:flex;flex-direction:column;gap:10px}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg .av{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--c);display:grid;place-items:center;font-family:var(--title);font-size:var(--fs-label);color:var(--c)}
.msg .who{font-size:var(--fs-caption);color:var(--c);letter-spacing:.08em}
.msg .txt{font-size:var(--fs-body);word-break:keep-all;overflow-wrap:anywhere}
.msg.guest{flex-direction:row-reverse;text-align:right}
.stage-dir{text-align:center;color:var(--dim);font-size:var(--fs-label);font-style:italic}

.cv h3{font-family:var(--title);color:var(--amber2);font-size:var(--fs-section);margin:16px 0 6px;letter-spacing:.1em}
.cv p.note{color:var(--dim);font-size:var(--fs-caption)}
.cv table{width:100%;border-collapse:collapse;font-size:var(--fs-label)}
.cv td,.cv th{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left;vertical-align:top}
.cv th{color:var(--dim);font-weight:400;white-space:nowrap}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.pillars div{border:1px solid var(--line);border-radius:4px;padding:6px 2px}
.pillars b{display:block;font-size:var(--fs-title);font-family:var(--title);line-height:1.3}
.pillars small{color:var(--dim);font-size:var(--fs-caption);display:block}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 한 장 정리 */
.chips .card-chip{background:linear-gradient(var(--gold-a),var(--gold-b));color:#2b1d0c;border-color:var(--gold-a);font-weight:700}
.card-modal{z-index:9;background:rgba(5,6,14,.88);backdrop-filter:blur(4px);gap:12px}
.card-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;width:min(92vw,460px);gap:0;scrollbar-width:none;touch-action:pan-x;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.card-track::-webkit-scrollbar{display:none}
.card-track img{flex:none;width:100%;max-height:72dvh;object-fit:contain;scroll-snap-align:center;-webkit-touch-callout:default;user-select:auto}
.card-dots{display:flex;gap:7px}.card-dots i{width:7px;height:7px;border-radius:50%;background:rgba(236,228,210,.25)}.card-dots i.on{background:var(--amber2)}
.card-tip{color:var(--dim);font-size:var(--fs-caption)}
.card-actions{display:flex;gap:10px}
.btn.ghost-sm{background:transparent;color:var(--ink);border-color:var(--line);letter-spacing:.1em}

/* 탭해서 넘김 */
.b-next{display:none;text-align:right;font-size:var(--fs-list);line-height:1;color:#a07a3a;margin:-2px -2px -4px 0;animation:nudge 1.2s ease-in-out infinite}
.bubble.wait .b-next{display:block}
@keyframes nudge{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(2px)}}
.pill.on{border-color:var(--amber);color:var(--amber2)}

/* 토스 버전 전용 UI */
.toss-only{display:none!important}
body.toss .toss-only{display:inline-flex!important}
body.toss p.toss-only{display:block!important}
#btn-wallet{border-color:var(--amber);color:var(--amber2)}
.b-head{display:flex;align-items:center;gap:6px}
.ai-badge{font-size:var(--fs-caption);letter-spacing:.04em;color:#6b5c44;border:1px solid rgba(107,92,68,.45);border-radius:8px;padding:0 6px;line-height:16px}
.shop-reason{color:var(--amber2);font-weight:700;margin:4px 0}
.shop-items{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.shop-item{display:flex;justify-content:space-between;align-items:center;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(232,184,107,.35);border-radius:12px;padding:14px 16px;gap:12px}
.shop-item span{display:flex;flex-direction:column}.shop-item b{font-size:var(--fs-list)}.shop-item small{color:var(--dim);font-size:var(--fs-caption)}
.shop-item em{font-style:normal;color:var(--amber2);font-weight:700;white-space:nowrap}
.shop-item:disabled{opacity:.5}
.shop-foot{margin-top:18px;color:var(--dim);font-size:var(--fs-caption);text-align:center}
.shop-foot .link,.links .link{color:var(--dim);font-size:var(--fs-caption);text-decoration:underline;padding:0}
.sheet .note{color:var(--dim);font-size:var(--fs-caption)}
.sheet.doc{z-index:8;max-height:86dvh}
.sheet.doc p{font-size:var(--fs-label);line-height:1.75;margin:4px 0}
.ai-notice{z-index:10;background:rgba(7,8,20,.7)}
.ai-notice .book p{font-size:var(--fs-body);line-height:1.75;color:var(--paper-ink)}
.link{background:none;border:0;padding:0;color:var(--dim);font-size:var(--fs-caption);text-decoration:underline;cursor:pointer}
.pill{white-space:nowrap}
@media (max-width:420px){ .top-actions{gap:4px} .top .pill{padding:4px 9px;font-size:var(--fs-caption)} body.toss .room-title{display:none} }
.chips .again-chip{border-style:dashed;color:var(--dim);border-color:var(--line)}

/* 닫힌 시트는 키보드가 올라와 화면이 줄어도 비치지 않게 완전히 숨김 */
.sheet{position:fixed;visibility:hidden;transition:transform .4s ease,visibility 0s linear .4s}
.sheet.open{visibility:visible;transition:transform .4s ease,visibility 0s}
.sheet:not(.open):not(.closing){display:none}
.sheet.closing{visibility:visible}

/* 2차: 말풍선·글자 크기·키보드 */
.bubble{transition:opacity .3s;will-change:transform}
.bubble.free::after{display:none}
.bottom{bottom:var(--kb,0px);transition:bottom .15s}
.log{font-size:var(--fs-body)}
.direction{font-size:var(--fs-body)}
.sheet.doc p{font-size:var(--fs-body)}
#btn-fs{min-width:34px}
.card-actions .btn{white-space:nowrap}
.card-opt{text-decoration:none;color:var(--amber2);font-size:var(--fs-label);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:rgba(255,255,255,.04)}

/* 3차: 질문 구분선·진행 표시·한눈에 보기 */
.q-div{display:flex;align-items:center;gap:10px;color:var(--amber2);font-size:var(--fs-caption);margin:10px 0 2px}
.q-div::before,.q-div::after{content:"";flex:1;height:1px;background:var(--line)}
.b-prog{margin-left:auto;display:inline-flex;gap:4px;align-items:center;font-size:var(--fs-caption);color:#8a7350}
.b-prog i{width:6px;height:6px;border-radius:50%;border:1px solid var(--d);opacity:.6}
.b-prog i.on{background:var(--d);opacity:1}
.sh-act{display:flex;gap:12px;align-items:center}
.chips .glance-chip{border-color:var(--amber2);color:var(--amber2)}
.glance{padding-bottom:12px;font-size:var(--fs-body);line-height:1.7}
.glance .g-title{font-family:var(--title,serif);font-size:1.5em;margin:6px 0 2px;color:var(--amber)}
.glance .g-one{margin:0 0 12px;color:var(--ink)}
.glance .g-row{display:flex;gap:10px;padding:8px 10px;border-left:3px solid var(--c);background:rgba(255,255,255,.03);margin:6px 0;border-radius:0 8px 8px 0}
.glance .g-row b{color:var(--c);flex:none;width:2.6em}
.glance h4{margin:14px 0 4px;color:var(--amber2);font-size:.95em}
.glance ul,.glance ol{margin:0;padding-left:1.2em}
.glance .g-when li.good b{color:var(--gold-a)}.glance .g-when li.bad b{color:#ef8f7a}

/* 그래픽 정리: 아래 메뉴를 하나의 반투명 띠로 */
.menu{background:rgba(12,12,28,.58);border:1px solid var(--line);border-radius:20px;padding:4px 6px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mi i{background:none;border:0;width:32px;height:30px;font-size:var(--fs-title);color:#e9dcc0;backdrop-filter:none}
.mi.on i{color:var(--amber);text-shadow:0 0 12px rgba(243,211,154,.8)}
.mi.on{color:var(--amber2)}
/* 로딩 */
#loader{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 45%,#1a1530,#06060f 70%);color:var(--dim);font-size:var(--fs-label);transition:opacity .8s}
#loader.done{opacity:0;pointer-events:none}
#loader .cup{position:relative;width:64px;height:40px;border:2px solid var(--gold-b);border-top:0;border-radius:0 0 30px 30px}
#loader .cup::after{content:"";position:absolute;right:-14px;top:6px;width:12px;height:16px;border:2px solid var(--gold-b);border-left:0;border-radius:0 10px 10px 0}
#loader .steam{position:absolute;bottom:46px;width:6px;height:28px;border-radius:6px;background:linear-gradient(transparent,rgba(243,211,154,.6));filter:blur(2px);animation:steam 2.2s ease-in-out infinite}
#loader .steam:nth-child(1){left:14px}#loader .steam:nth-child(2){left:29px;animation-delay:.5s}#loader .steam:nth-child(3){left:44px;animation-delay:1s}
@keyframes steam{0%{transform:translateY(8px) scaleY(.6);opacity:0}40%{opacity:1}100%{transform:translateY(-22px) scaleY(1.2);opacity:0}}
.card-opts{display:flex;gap:8px}

/* 말풍선: 이름 → 본문 → 부가 정보 위계, 강조는 결론 구절만 */
.b-txt{position:relative;font-family:"Gowun Batang",serif;font-size:var(--fs-list);line-height:1.68;letter-spacing:-.1px;color:#2a2117}
.b-txt .rest{visibility:hidden}
.b-txt b,.log .txt b{font-weight:700;color:#5a2e12;background:linear-gradient(transparent 62%,rgba(232,184,107,.38) 62%)}
.log .txt b{color:var(--amber)}
.bubble{width:min(84vw,350px);padding:10px 16px 11px}
.b-who{font-size:var(--fs-label);font-weight:700}
.ai-badge,.b-prog{opacity:.55}
.card-count{color:var(--dim);font-size:var(--fs-caption);opacity:.7;margin-top:-6px}
.card-actions{flex-wrap:wrap;justify-content:center}

/* 5단계: 추천 질문은 줄바꿈해서 다 보이게, 상담가의 말 한 줄 / 기록 날짜·삭제 위치 */
.chips-lead{margin:0 2px -2px;font-size:var(--fs-caption);opacity:.85}
.log-date{text-align:center;color:var(--dim);font-size:var(--fs-caption);letter-spacing:2px;margin:6px 0 4px}
.log-foot{text-align:center;margin:26px 0 8px;opacity:.7}

/* 하이라이트 영상 */
.video-modal{z-index:9;background:rgba(5,6,14,.92);gap:12px}
.video-box{position:relative;width:min(80vw,360px);aspect-ratio:9/16;max-height:70dvh;border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);background:#07070f}
.video-box video{width:100%;height:100%;object-fit:contain;display:block}
.video-making{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--dim);font-size:var(--fs-label);background:radial-gradient(circle at 50% 45%,#1a1530,#06060f 70%)}
.video-modal.making .video-making{display:flex}
.video-modal.making .card-actions{opacity:.35;pointer-events:none}
.video-track{width:60%;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.video-track i{display:block;height:100%;width:0;background:var(--amber2);transition:width .2s}

/* 기록: 질문별 묶음 */
.log details.round{border:1px solid var(--line);border-radius:12px;margin:8px 0;background:rgba(255,255,255,.02)}
.log details.round>summary{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;cursor:pointer}
.log details.round>summary::-webkit-details-marker{display:none}
.log details.round>summary::before{content:"";flex:none;width:12px;height:12px;background:var(--amber2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 5.4 15.9 12l-6.5 6.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 5.4 15.9 12l-6.5 6.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.log details.round[open]>summary::before{transform:rotate(90deg)}
.r-q{flex:1;min-width:60%;color:var(--ink);font-size:var(--fs-label)}
.r-meta{color:var(--dim);font-size:var(--fs-caption)}
.r-act{display:flex;gap:6px}
.r-btn{background:none;border:1px solid rgba(232,184,107,.5);color:var(--amber2);border-radius:12px;padding:2px 10px;font-size:var(--fs-caption)}
.r-body{padding:0 12px 10px;display:flex;flex-direction:column;gap:10px}
/* 영상 공유 준비 */
.vprep h4{margin:16px 0 6px;color:var(--amber2);font-size:var(--fs-label)}.vprep h4 small{color:var(--dim);font-weight:400;font-size:var(--fs-caption);margin-left:6px}
.vp-input{width:100%;box-sizing:border-box;font:inherit;font-size:var(--fs-body);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:9px 12px}
.vp-check{display:flex;gap:8px;align-items:center;font-size:var(--fs-label);color:var(--dim);margin-top:8px}
.vp-list{display:flex;flex-direction:column;gap:6px}
.vp-item{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:10px;border:1px solid var(--line);border-left:3px solid var(--c);opacity:.72}
.vp-item.on{opacity:1;background:rgba(232,184,107,.07)}
.vp-pick{flex:none;width:24px;height:24px;border-radius:6px;border:1px solid var(--amber2);background:none;color:var(--amber);font-size:var(--fs-label);line-height:1}
.vp-item.on .vp-pick{background:var(--amber2);color:#2b1d0c}
.vp-txt{flex:1;font-size:var(--fs-label);line-height:1.6}.vp-txt b{color:var(--c);font-weight:700;margin-right:4px}.vp-txt em{font-style:normal;font-size:var(--fs-caption);color:var(--amber2);border:1px solid var(--line);border-radius:8px;padding:0 6px}
.vp-star{flex:none;background:none;border:0;color:rgba(232,184,107,.35);font-size:var(--fs-list)}.vp-star.on{color:var(--amber)}
.vp-pills{display:flex;gap:6px;flex-wrap:wrap}.vp-pills button{background:none;border:1px solid var(--line);color:var(--dim);border-radius:16px;padding:5px 12px;font-size:var(--fs-label)}.vp-pills button.on{border-color:var(--amber2);color:var(--amber);background:rgba(232,184,107,.1)}
.vprep #vp-make{width:100%;margin:18px 0 8px}

/* 웹 전용 · 카카오 로그인 */
body.toss .web-only{display:none!important}
.gb-login{margin:12px 0 0;text-align:center;font-size:var(--fs-caption);color:var(--dim)}
.gb-login b{color:var(--amber);font-weight:700}
.log-foot .acct{display:block;margin-bottom:8px;font-size:var(--fs-caption);color:var(--dim)}
.log-foot .acct b{color:var(--amber)}
.login-sheet{max-height:80dvh}
.login-reason{font-size:var(--fs-body)!important;line-height:1.7;margin:4px 0 12px!important}
.login-perks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.login-perks li{position:relative;padding:10px 12px 10px 34px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);font-size:var(--fs-label);line-height:1.5}
.login-perks li::before{content:'';position:absolute;left:13px;top:10px;color:var(--amber);font-size:var(--fs-caption)}
.kakao-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border:0;border-radius:12px;background:#FEE500;color:rgba(0,0,0,.85);font:700 16px/1 inherit;font-family:inherit;cursor:pointer;margin-bottom:12px}
.kakao-btn svg{width:20px;height:20px;fill:#000}
.kakao-btn:disabled{opacity:.6}

/* 카드 보기: 카드가 화면 대부분을 차지하고, 옵션·버튼은 아래 한 줄씩 작게 */
.card-modal{justify-content:flex-start;gap:0;padding:calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom))}
.card-modal .card-top{width:min(100%,520px);display:flex;justify-content:center;align-items:center;height:26px;flex:none}
.card-modal .card-count{margin:0;font-size:var(--fs-caption);opacity:.8}
.card-modal .card-stage{flex:1;min-height:0;width:min(100%,520px);display:flex;align-items:center;justify-content:center;padding:4px 0}
.card-modal .card-track{width:100%;height:100%;border-radius:0;box-shadow:none}
.card-modal .card-track img{width:100%;height:100%;max-height:none;object-fit:contain;filter:drop-shadow(0 14px 40px rgba(0,0,0,.55))}
.card-modal .card-dots{flex:none;height:16px;align-items:center}
.card-modal .card-stage{position:relative}
.card-dots i{cursor:pointer}
.card-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(232,184,107,.35);background:rgba(10,10,24,.6);color:var(--amber2);font-size:var(--fs-display);line-height:1;cursor:pointer;backdrop-filter:blur(4px)}
.card-nav.prev{left:-56px}.card-nav.next{right:-56px}
.card-track.nosnap{scroll-snap-type:none}
.card-nav:disabled{opacity:.25;cursor:default}
@media (hover:hover) and (pointer:fine){.card-nav{display:block}.card-track{cursor:grab}.card-track.drag{cursor:grabbing;scroll-snap-type:none}.card-track.drag img{pointer-events:none}}
@media (hover:hover) and (pointer:fine) and (max-width:640px){.card-nav.prev{left:6px}.card-nav.next{right:6px}}
.card-modal .card-bar{flex:none;width:min(100%,520px);display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:4px}
.card-modal .card-opts{gap:6px;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
.card-modal .card-opt{font-size:var(--fs-caption);padding:4px 10px;white-space:nowrap}
.card-modal .card-actions{gap:8px;flex-wrap:nowrap;width:100%}
.card-modal .card-actions .btn{flex:1;padding:9px 0;font-size:var(--fs-label);letter-spacing:.06em}
.card-modal .card-actions #card-save{flex:1.4}
.card-modal .card-actions .hidden{display:none}
.card-modal .card-tip{margin:0;font-size:var(--fs-caption)}

/* 추천 질문: 높이 고정 한 줄 가로 넘김 + 오른쪽 끝을 흐리게 해 다음 질문이 있음을 알림 */
.chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;height:44px;align-items:center;padding:0;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.chips button{white-space:nowrap;scroll-snap-align:start;height:32px;max-width:78vw;overflow:hidden;text-overflow:ellipsis}
.chips button:last-child{margin-right:40px}
.chips-head{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}
.chips-head .chips-lead{margin:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chip-tools{display:flex;gap:6px;flex:none}
.chip-tool{background:rgba(12,12,28,.55);border:1px solid var(--line);color:var(--amber2);border-radius:999px;font-size:var(--fs-caption);padding:3px 10px;font-family:inherit}
body.typing #hud .menu{display:none}
body.typing .chips-head,body.typing .chips{display:none}
.pill.gold{border-color:var(--amber2);color:var(--amber2)}
.log-foot #log-again{display:block;margin:0 auto 10px}
.log-foot #log-again.hidden{display:none}

/* 하이라이트 영상: 확인(prep) → 만드는 중(making, 찍히는 장면 미리보기) → 완성(done) */
.video-modal .vprep,.video-modal .vstage{display:none;flex-direction:column;align-items:center;gap:12px;width:min(100%,460px)}
.video-modal.prep .vprep{display:flex}
.video-modal.making .vstage,.video-modal.done .vstage{display:flex}
.video-modal .acts-making,.video-modal .acts-done{display:none}
.video-modal.making .acts-making{display:flex}
.video-modal.done .acts-done{display:flex}
.video-modal.making .card-actions{opacity:1;pointer-events:auto}
.vp-title{margin:0;color:var(--amber2);font-size:var(--fs-list);font-weight:700}
.vp-q{margin:0;color:var(--dim);font-size:var(--fs-label)}
.vp-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px;max-height:52dvh;overflow-y:auto;text-align:left}
.vp-list li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);cursor:pointer;font-size:var(--fs-body);line-height:1.55}
.vp-list li b{flex:none;font-size:var(--fs-caption);padding-top:2px;min-width:30px}
.vp-list li.rep{border-color:var(--amber2);background:rgba(232,184,107,.09)}
.vp-list li .star{flex:none;margin-left:auto;color:var(--amber2);opacity:0}
.vp-list li.rep .star{opacity:1}
.vp-help{margin:0;color:var(--dim);font-size:var(--fs-caption)}
.vp-opts{display:flex;gap:10px;align-items:center}
.vp-dur{color:var(--dim);font-size:var(--fs-caption)}
.video-box video{display:none}
.video-modal.done .video-box video{display:block}
#video-live{display:none;width:100%;height:100%;object-fit:contain}
.video-modal.making #video-live{display:block}
.video-modal.making .video-making{display:flex;inset:auto 0 0 0;padding:14px 0 16px;background:linear-gradient(transparent,rgba(6,6,15,.85))}
.video-making p{margin:0}
.video-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(10,10,20,.45);color:#fff;font-size:var(--fs-title)}
.video-modal:not(.done) .video-play{display:none}
.video-modal .acts-done{flex-wrap:wrap}
.video-pill{position:fixed;top:calc(52px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:8;background:rgba(14,15,32,.92);border:1px solid var(--amber2);color:var(--amber2);border-radius:999px;padding:7px 16px;font-size:var(--fs-label);font-family:inherit;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.video-pill.ready{background:linear-gradient(var(--gold-a),var(--gold-b));color:#2b1d0c;font-weight:700;animation:pillGlow 1.6s ease-in-out infinite}
@keyframes pillGlow{50%{box-shadow:0 0 0 6px rgba(243,211,154,.25),0 6px 24px rgba(0,0,0,.5)}}
.filming-veil{position:fixed;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(6,6,16,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);font-size:var(--fs-body);line-height:1.7;padding:24px}
.filming-veil small{color:var(--dim);font-size:var(--fs-caption)}
body.filming #hud .menu button:not(#m-log),body.filming #ask{opacity:.35;pointer-events:none}

/* 촬영 중 캡션: 미리보기 화면이 안 그려지는 기기에서도 지금 어떤 장면을 찍는지 보이게 */
.video-shot{display:none;position:absolute;left:14px;right:14px;top:40%;transform:translateY(-50%);margin:0;color:var(--ink);font-size:var(--fs-body);line-height:1.65;text-align:center;opacity:.9;pointer-events:none}
.video-modal.making .video-shot{display:block}
#video-live{position:relative;z-index:1}
.video-modal.making .video-making{z-index:2}

.vp-end{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--amber2);border-radius:12px;text-align:left}
.vp-end-l{flex:none;color:var(--amber2);font-size:var(--fs-caption)}
.vp-end p{margin:0;flex:1;font-size:var(--fs-label);line-height:1.5}
.vp-end .card-opt{flex:none}
.vp-list li{cursor:default}

/* 말풍선: 긴 글은 직접 올려 읽을 수 있게, 아래에 더 있으면 조용히 흐림 */
.bubble .b-txt{pointer-events:auto;touch-action:pan-y;overscroll-behavior:contain}
.bubble.more .b-txt{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.bubble.more::before{content:"▾";position:absolute;right:12px;bottom:4px;font-size:var(--fs-caption);color:#8a7350;opacity:.7}
.hint.muted{opacity:0}

/* 서서 다닐 때: 질문·남기기는 접고, 차·하늘 보기는 앉아서만 */
body.standing #ask{display:none}
body.standing #hud .menu #m-tea,body.standing #hud .menu #m-sky{opacity:.35;pointer-events:none}
body.standing #m-stand{color:var(--amber2)}

/* 줄바꿈: 한국어는 낱말(어절) 단위로만 끊고, 짧은 안내 문구는 줄 길이를 고르게 */
body{word-break:keep-all;overflow-wrap:break-word;line-break:strict}
.direction,.hint,.chips-lead,.card-tip,.vp-help,.vp-q,.vp-title,.login-reason,.note,.lead,.kicker,.fine,.book-sub,.stage-dir,.filming-veil p,.video-shot,#video-note,.ai-notice p,.r-q{text-wrap:balance}
.direction{max-width:30em;margin:0 auto;line-height:1.55}
.b-txt,.log .txt,.vp-list li span,.vp-end p,.login-perks li{text-wrap:pretty}
.direction{white-space:pre-line}
/* 자바스크립트가 꺼졌을 때·검색 로봇용 안내 */
.seo-text{position:relative;z-index:20;max-width:640px;margin:0 auto;padding:40px 20px;color:var(--ink);line-height:1.8}
.seo-text h1{font-size:var(--fs-display);color:var(--amber2)} .seo-text h2{font-size:var(--fs-section);margin-top:24px;color:var(--amber)} .seo-text a{color:var(--amber2)}
/* 말풍선: 화면 위쪽 한 자리에 고정 */
.bubble{top:calc(60px + env(safe-area-inset-top));transition:opacity .3s}
.bubble.free::after{display:none}
.login-privacy{margin:-4px 0 12px;text-align:center;font-size:var(--fs-caption);color:var(--dim)}.login-privacy a{color:var(--amber2)}

/* ── 웹 로그인: 찻자리 전환(왼쪽 위) · 찻잎(오른쪽 위) — 작고 은은하게 ── */
.top{gap:8px}
.seat-switch{background:rgba(10,11,24,.42);border:1px solid rgba(232,184,107,.22);border-radius:999px;padding:3px 10px 3px 12px;font-size:var(--fs-caption);color:var(--amber2);display:inline-flex;align-items:center;gap:5px;max-width:46vw;white-space:nowrap;backdrop-filter:blur(6px)}
.seat-switch span{overflow:hidden;text-overflow:ellipsis}
.seat-switch i{font-style:normal;font-size:var(--fs-caption);opacity:.7}
.seat-menu{position:absolute;top:calc(44px + env(safe-area-inset-top));left:12px;z-index:7;min-width:200px;max-width:min(300px,calc(100vw - 24px));max-height:60dvh;overflow:auto;background:rgba(14,15,32,.97);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.5);touch-action:pan-y}
.sm-item{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;background:none;border:0;border-radius:8px;padding:8px 10px;text-align:left}
.sm-item b{font-weight:700;font-size:var(--fs-label)}.sm-item small{color:var(--dim);font-size:var(--fs-caption);white-space:nowrap}
.sm-item.on{background:rgba(232,184,107,.12)}.sm-item.on b{color:var(--amber2)}
.sm-item:hover{background:rgba(255,255,255,.05)}
.sm-add{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;color:var(--amber2)}
.sm-cab b{font-weight:400;font-size:var(--fs-label);color:var(--dim)}
.leaf-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(10,11,24,.42);border:1px solid rgba(232,184,107,.22);border-radius:999px;padding:3px 10px 3px 8px;font-size:var(--fs-caption);color:var(--amber2);white-space:nowrap;backdrop-filter:blur(6px)}
.leaf-chip svg{width:15px;height:15px;opacity:.85}
@media (max-width:420px){ .seat-switch{max-width:40vw;font-size:var(--fs-caption);padding:3px 8px 3px 10px} .leaf-chip{padding:3px 8px 3px 6px;font-size:var(--fs-caption)} }
body.in-cabinet .top,body.in-cabinet .bottom,body.in-cabinet #bubble,body.in-cabinet #hint,body.in-cabinet #direction{visibility:hidden}

/* ── 나의 찻장: 독립 화면(3D 찻장 장식 헤더 + 기록형 목록) ── */
.cabinet{position:absolute;inset:0;z-index:5;background:radial-gradient(120% 60% at 50% 0,#1c1830,#0b0c1a 55%,#08091a);overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility 0s linear .3s}
.cabinet.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s,visibility 0s}
.cab-in{max-width:640px;margin:0 auto;padding:calc(10px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom))}
.cab-head{text-align:center;position:relative;padding-bottom:6px}
.cab-back{position:absolute;left:0;top:0;background:none;border:0;color:var(--dim);font-size:var(--fs-label);padding:6px 4px}
.cab-art{width:min(300px,78%);margin:22px auto 0;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.cab-art svg{display:block;width:100%;height:auto}
.cab-title{font-family:var(--title);font-size:var(--fs-title);letter-spacing:.06em;color:var(--amber2);margin-top:6px}
.cab-leaf{color:var(--ink);font-size:var(--fs-body);margin-top:4px}.cab-leaf b{font-size:var(--fs-list);color:var(--amber2)}.cab-leaf small{color:var(--dim);font-size:var(--fs-caption);border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:2px}
.cab-sec{margin-top:26px}
.cab-h{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:10px}
.cab-h h2{font-size:var(--fs-section);color:var(--amber2);font-weight:700;letter-spacing:.04em}
.cab-sec .link,.cab-h .link{background:none;border:0;color:var(--amber);font-size:var(--fs-label);padding:2px 0;text-decoration:underline;text-underline-offset:3px}
.cab-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.cab-people:not(.all) .cab-card:nth-child(n+5){display:none}
.cab-card{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);overflow:hidden}
.cab-card.on{border-color:rgba(232,184,107,.5)}
.cc-main{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;width:100%;background:none;border:0;padding:10px 12px;text-align:left}
.cc-av{grid-row:1/3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(232,184,107,.16);color:var(--amber2);font-family:var(--title);font-size:var(--fs-body)}
.cc-main b{font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cc-main small{color:var(--dim);font-size:var(--fs-caption)}
.cc-acts{display:none;flex-direction:column;align-items:flex-start;gap:2px;padding:0 12px 10px 54px}
.cab-card.pick .cc-acts{display:flex}
.cab-invite{width:100%;margin-top:10px}
.cab-filter{font-size:var(--fs-caption);color:var(--dim)}
.cab-talks{display:flex;flex-direction:column;gap:6px}
.cab-talk{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"who q at" "sn sn sn";gap:2px 8px;align-items:baseline;width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:left}
.ct-who{grid-area:who;font-size:var(--fs-caption);color:var(--amber);border:1px solid rgba(232,184,107,.35);border-radius:999px;padding:0 7px;white-space:nowrap}
.ct-q{grid-area:q;font-size:var(--fs-label);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-at{grid-area:at;font-size:var(--fs-caption);color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.ct-sn{grid-area:sn;font-size:var(--fs-caption);color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab-ledger table{width:100%;border-collapse:collapse;font-size:var(--fs-label);font-variant-numeric:tabular-nums}
.cab-ledger th,.cab-ledger td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
.cab-ledger th{color:var(--dim);font-weight:400;font-size:var(--fs-caption)}
.cab-ledger th:nth-child(2),.cab-ledger td:nth-child(2){text-align:left}
.cab-ledger td:first-child,.cab-ledger th:first-child{text-align:left;white-space:nowrap;color:var(--dim)}
.cab-ledger td small{display:block;color:var(--dim);font-size:var(--fs-caption);max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab-ledger .plus{color:#9fd3a8}.cab-ledger .minus{color:var(--ink)}
.cab-acct{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:var(--fs-label);color:var(--dim)}
.link.danger,.cab-sec .link.danger{color:#e08b7a}
.cab-foot{margin-top:34px;text-align:center;font-size:var(--fs-caption);color:var(--dim)}.cab-foot a{color:var(--dim)}

/* ── 새 사람 · 기록 · 찻잎 시트 ── */
.person-sheet,.record-sheet,.leaf-sheet{z-index:7;touch-action:pan-y}
.ps-consent{font-size:var(--fs-label);color:var(--amber2);background:rgba(232,184,107,.08);border:1px solid rgba(232,184,107,.25);border-radius:8px;padding:7px 10px;margin-bottom:10px}
.ps-form{display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.ps-form label{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-label);color:var(--dim);flex:1}
.ps-form .row2{display:flex;gap:10px;align-items:flex-end}
.ps-form input:not([type=checkbox]),.ps-form select{font:inherit;font-size:var(--fs-input);color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%;color-scheme:dark}
.ps-form .ps-unk,.ps-form .ps-leap{flex-direction:row;align-items:center;gap:6px;flex:none;padding-bottom:10px}
.ps-price{font-size:var(--fs-label);color:var(--ink);line-height:1.55}.ps-price small{color:var(--dim)}
.ps-form .btn:disabled{opacity:.5}
.ps-form .err{color:#e08b7a}
.rec-body{padding-bottom:12px}
.leaf-msg{font-size:var(--fs-body);line-height:1.7;margin:6px 0 14px}.leaf-msg small{color:var(--dim);font-size:var(--fs-label)}
.leaf-acts{display:flex;flex-direction:column;gap:8px}
.leaf-acts .btn{width:100%}
.cabinet .note{color:var(--dim);font-size:var(--fs-caption);line-height:1.6}
.cab-sec .note{margin:-2px 0 8px}

/* ── QA: 방명록 안내 · 키보드 포커스 · 생각 중 · 풀이 중 기록 ── */
.field-msg{margin:-6px 0 0;font-size:var(--fs-caption);color:#9a2f1c;text-align:left}
.field-msg::before{content:'· '}
.book [aria-invalid=true]{border-bottom-color:#9a2f1c!important}
.seg input:focus-visible+span{outline:2px solid #b8864a;outline-offset:2px}
.book input:focus-visible,.book select:focus-visible{outline:2px solid #b8864a;outline-offset:2px}
.leaf-sheet{z-index:12}
.think{position:absolute;left:50%;top:calc(60px + env(safe-area-inset-top));transform:translate(-50%,-6px);display:flex;align-items:center;gap:10px;background:rgba(241,232,212,.94);color:#5a4b33;border-radius:16px;padding:9px 16px;font-size:var(--fs-label);box-shadow:0 8px 26px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;white-space:nowrap}
.think.on{opacity:1;transform:translate(-50%,0)}
.think-dots{display:inline-flex;gap:4px}.think-dots i{width:6px;height:6px;border-radius:50%;background:#8d6a3c;opacity:.35;animation:thinkDot 1.2s ease-in-out infinite}
.think-dots i:nth-child(2){animation-delay:.18s}.think-dots i:nth-child(3){animation-delay:.36s}
@keyframes thinkDot{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
.cab-talk.live{border-color:rgba(232,184,107,.45);background:rgba(232,184,107,.07)}
.cab-talk.live .ct-at{color:var(--amber2)}
.cab-talk .dots{display:inline-flex;gap:3px;margin-left:4px;vertical-align:middle}.cab-talk .dots b{width:4px;height:4px;border-radius:50%;background:var(--amber2);animation:thinkDot 1.2s infinite}.cab-talk .dots b:nth-child(2){animation-delay:.18s}.cab-talk .dots b:nth-child(3){animation-delay:.36s}
@media (prefers-reduced-motion:reduce){.think-dots i,.cab-talk .dots b{animation:none;opacity:.7}}
.sheet.doc.leaf-sheet{z-index:12}

/* ═══ UI/UX 개편 ═══════════════════════════════════════════════════════════
   (예전 T1~T5 토큰은 D-2에서 --fs-* 하나로 정리됨) */
.room-title,.cab-title{font-size:var(--fs-display)}
.cab-h h2,.sheet-head strong{font-size:var(--fs-title);font-weight:700}
.b-txt,.log .txt,.rec-list .txt,.glance{font-size:var(--fs-dialog)}
.ask-row input{font-size:var(--fs-input)}   /* 16px 미만이면 아이폰이 입력창을 확대함 */
.b-who,.msg .who,.r-meta,.ct-at,.cab-ledger td,.cab-ledger th,.cc-txt small,.cab-name,.set-l,.sm-item small{font-size:var(--fs-label)}
.r-q,.ct-q{font-size:var(--fs-body)}
.fine,.note,.sheet .note,.cab-foot,.login-privacy,.gb-ai,.b-prog,.ai-badge,.ct-sn,.cab-leaf small{font-size:var(--fs-caption)}
.note,.sheet .note,.fine,.cab-foot,.cab-foot a,.r-meta,.ct-at,.ct-sn{color:var(--dim)}
.ai-badge,.b-prog{opacity:.75}

/* ── 화면 층: L1 말풍선 / L2 질문 입력 / L3 상단·하단바 ── */
body.talking .ask,body.talking .sent{display:none!important}
.top,.menu{transition:opacity .35s}
body.talking .top,body.talking .menu{opacity:.5}
body.talking .top:hover,body.talking .menu:hover,body.talking .top:focus-within,body.talking .menu:focus-within{opacity:1}

/* ── 상단바: 왼쪽 찻자리 ▾ · 오른쪽 찻잎 칩(또는 로그인) 하나 ── */
.seat-switch{max-width:60vw;font-size:var(--fs-label);min-height:32px}
.leaf-chip{min-height:32px;padding:4px 12px;font-size:var(--fs-label);gap:4px}
.leaf-chip b{font-weight:700}
#btn-login{min-height:32px;padding:4px 14px}
.seat-menu{top:calc(48px + env(safe-area-inset-top))}

/* ── 하단바: 메인 4개 ↔ 분위기 서브바 ── */
.menu{display:block;position:relative;overflow:hidden;padding:4px 6px}
.bar{display:flex;justify-content:space-around;gap:2px;transition:transform .26s ease,opacity .26s ease}
.bar .mi{max-width:none;min-height:52px;font-size:var(--fs-label);color:var(--dim)}
.bar-mood{position:absolute;inset:4px 6px;align-items:stretch;transform:translateX(28px);opacity:0;pointer-events:none}
body.mood .bar-main{transform:translateX(-28px);opacity:0;pointer-events:none}
body.mood .bar-mood{transform:none;opacity:1;pointer-events:auto}
.mood-back{flex:0 0 44px}
.mood-back i{font-family:var(--serif);font-size:var(--fs-title)}
.mood-list{flex:1;display:flex;justify-content:space-around;min-width:0;overflow-x:auto;scrollbar-width:none}
.mood-list::-webkit-scrollbar{display:none}
.mood-list .mi{flex:1 0 auto;min-width:64px}
.bar-mood.many .mood-list{justify-content:flex-start;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
@media (prefers-reduced-motion:reduce){.bar{transition:none}}

/* ── 질문 입력부: 추천 칩 최대 2줄 · 여쭙기 44px · 보낸 직후 피드백 ── */
.chips{flex-wrap:wrap;overflow:hidden;height:auto;max-height:76px;align-items:flex-start;padding:2px 0 8px;scroll-snap-type:none}
.chips button{height:32px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips button:last-child{margin-right:0}
.ask-row input{min-height:44px}
#ask-btn{min-width:72px;min-height:44px}
.sent{max-width:640px;margin:0 auto 8px;min-height:44px;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid rgba(232,184,107,.35);border-radius:8px;background:rgba(12,12,28,.62);backdrop-filter:blur(6px);color:var(--amber2);font-size:var(--fs-label);animation:sentIn .25s ease}
.sent span{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@keyframes sentIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── 말풍선 꼬리: 지금 말하는 해석가 쪽을 가리킴 ── */
.bubble.free.tailed::after{display:block;left:var(--tail-x,50%);transition:left .35s ease}

/* ── 기록 시트: 절반 ↔ 전체 화면 ── */
.log-sheet{max-height:55dvh;transition:transform .4s ease,max-height .3s ease,visibility 0s linear .4s}
.log-sheet.open{transition:transform .4s ease,max-height .3s ease,visibility 0s}
.log-sheet.full{max-height:calc(100dvh - 8px - env(safe-area-inset-top))}
.sheet-grip{position:sticky;top:0;z-index:2;display:flex;justify-content:center;padding:8px 0 2px;margin:0 -16px;background:rgba(14,15,32,.98);cursor:grab;touch-action:none}
.sheet-grip i{width:42px;height:4px;border-radius:2px;background:rgba(236,228,210,.35)}
.log-sheet .sheet-head{top:14px}
.sh-act .link{background:none;border:0;color:var(--amber);text-decoration:underline;text-underline-offset:3px;font-size:var(--fs-label);margin-right:10px}

/* ── 데스크톱: 시트는 가운데, 최대 폭 480px (기록·차트는 640px) ── */
@media (min-width:640px){
  .sheet{margin:0 auto;max-width:640px;border:1px solid var(--line);border-bottom:0}
  .sheet.doc,.person-sheet,.record-sheet,.settings-sheet{max-width:480px}
}

/* ── 방명록: 생년월일(숫자 8자리 · 연월일) · AI 고지 한 줄 ── */
.date-field{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-label);color:#5a4b33}
.df-row{display:flex;gap:6px;align-items:flex-end}
.df-row .df-num{flex:1.4}.df-row select{flex:1;min-width:0}
.date-field[aria-invalid=true] .df-row > *{border-bottom-color:#9a2f1c!important}
/* 한 벌만 보이게: 마우스(데스크톱) = 연·월·일 고르기 · 터치(휴대폰) = 숫자 8자리 */
.df-row .df-num{display:none}
@media (pointer:coarse){ .df-row .df-num{display:block;flex:1} .df-row select{display:none} }
.ps-form .date-field{color:var(--dim);font-size:var(--fs-label)}
.ps-form .df-row input,.ps-form .df-row select{font:inherit;font-size:var(--fs-input);color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:8px 6px;width:100%;color-scheme:dark}
.gb-ai{margin:2px 0 0;text-align:center;color:#7a6a50}

/* ── 설정 ── */
.settings{display:flex;flex-direction:column;gap:12px}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.set-l{color:var(--ink)}
.set-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.set-seg button{background:none;border:0;color:var(--dim);padding:7px 14px;font-size:var(--fs-label);min-height:36px}
.set-seg button[aria-pressed=true]{background:rgba(232,184,107,.16);color:var(--amber2);font-weight:700}
.settings-sheet .settings{padding:6px 0 10px}
.login-alt{text-align:center;margin-top:6px}.login-alt .link{background:none;border:0;color:var(--dim);font-size:var(--fs-caption);text-decoration:underline}

/* ── 나의 찻장 ── */
.cab-title{letter-spacing:.08em;margin-top:6px}
.cab-name{color:var(--dim);margin-top:2px}
.cab-people .cab-card{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;text-align:left;color:var(--ink)}
.cab-card .cc-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.cab-card .cc-txt b{font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab-card .cc-txt small{color:var(--dim)}
.cab-card .cc-go{font-style:normal;color:var(--dim);font-size:var(--fs-list)}
.cab-foot p{margin-top:16px}
.cab-withdraw{background:none;border:0;color:var(--dim5);font-size:var(--fs-caption);text-decoration:underline;text-underline-offset:3px;opacity:.8}
/* 사람 상세(2뎁스) */
.cp-head{position:relative;padding-top:40px}
.cp-head .cab-back{position:absolute;left:0;top:0}
.cp-who{display:flex;align-items:center;gap:12px}
.cp-who .cc-av{width:44px;height:44px;font-size:var(--fs-title)}
.cp-name{font-family:var(--title);font-size:var(--fs-display);color:var(--amber2)}
.cp-rel{color:var(--dim);font-size:var(--fs-label)}
.cp-acts{display:flex;gap:8px;margin-top:14px}
.cp-acts .btn{flex:1;min-height:44px;font-size:var(--fs-label);letter-spacing:.04em}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:10px;overflow-x:auto;scrollbar-width:none}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);padding:8px 12px;font-size:var(--fs-label);white-space:nowrap;min-height:40px}
.tabs button[aria-selected=true]{color:var(--amber2);border-bottom-color:var(--amber);font-weight:700}
#chart-sheet .tabs{position:sticky;top:52px;background:rgba(14,15,32,.98);z-index:1}
.rec-list{gap:8px}

.cab-card .cc-txt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══ 모바일 QA ═══ */
/* 줄간격: 말풍선·기록 본문을 넉넉하게 */
.b-txt,.log .txt,.rec-list .txt{line-height:1.68}
/* 추천 질문: 한 줄 가로 스크롤 · 마지막 칩이 반쯤 보이게 · 오른쪽 끝 페이드 · 스크롤바 숨김 */
.chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none;height:auto;padding:2px 36px 8px 0;margin-right:-12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;max-width:78vw;scroll-snap-align:start}
/* 질문 입력: 2~4줄 자동 · 버튼에 비용 */
.ask-row{align-items:flex-end}
.ask-row textarea{flex:1;min-width:0;font:inherit;font-size:var(--fs-input);line-height:1.5;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:9px 12px;outline:none;resize:none;min-height:44px;max-height:none;overflow-y:hidden;backdrop-filter:blur(6px)}
.ask-row textarea:focus{border-color:var(--amber)}
#ask-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;padding:0 14px}
#ask-btn .ab-c::before{content:'·';margin:0 4px 0 0;opacity:.7}
#ask-btn:disabled{opacity:.45;cursor:default}
@media (max-width:359px){ #ask-btn{flex-direction:row-reverse;padding:0 10px} #ask-btn .ab-c::before{content:none} }
.ask-short{margin:6px 2px 0;font-size:var(--fs-caption);color:#e8b8a0}
/* 영상 확인창: 본문만 스크롤, 버튼은 아래에 고정 */
.video-modal{padding:12px 12px 0}
.video-modal.prep .vprep{max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:0;justify-content:flex-start}
.video-modal .vp-list{max-height:none;overflow:visible}
.video-modal.prep .vprep > .card-actions{position:sticky;bottom:0;z-index:2;margin-top:auto;padding:10px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(rgba(5,6,14,0),rgba(5,6,14,.96) 30%);width:100%}
/* 엔딩 문장은 줄 전체 폭을 쓰게(라벨·바꾸기 버튼은 위 줄) */
.vp-end{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.vp-end .vp-end-l{grid-column:1}.vp-end .card-opt{grid-column:2;grid-row:1}
.vp-end p{grid-column:1 / -1}
/* 영상 확인창 버튼: 좁은 화면에서도 한 줄로 */
.video-modal.prep .vprep > .card-actions{flex-wrap:nowrap;gap:6px}
.video-modal.prep .vprep > .card-actions .btn{flex:1 1 0;min-width:0;min-height:44px;padding:0 6px;font-size:var(--fs-label);letter-spacing:.02em;white-space:nowrap}
.video-modal.prep .vprep > .card-actions #vp-go{flex:1.2 1 0}

/* ═══ 찻장·디자인 통합 수정 ═══ */
/* C1·C2 아이콘: 붓선 SVG(currentColor) — 크기는 글자 기준, 메뉴는 24px */
.ic{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.24em;flex:none;overflow:visible}
.mi i .ic{width:24px;height:24px;vertical-align:0}
.mi i{font-family:inherit}
.mood-back i{font-family:inherit;font-size:inherit}
.leaf-chip .ic,.cab-leaf .ic,.leafn .ic{color:#b7cf9c}
.leaf-chip .ic{width:17px;height:17px;opacity:1}
.leafn{display:inline-flex;align-items:center;gap:1px;white-space:nowrap}
.leafn .ic{width:1.05em;height:1.05em;margin-right:1px}
.seat-switch i .ic{width:14px;height:14px;vertical-align:-.15em;opacity:.8}
.video-play .ic{width:44%;height:44%;margin-left:6%}
.login-perks li::before{content:'';left:12px;top:13px;width:14px;height:14px;background:#b7cf9c;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 19.4C4.1 11.6 9.2 5.3 19.6 4.4c.5 9.6-5.2 15.2-15 15z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 19.4C4.1 11.6 9.2 5.3 19.6 4.4c.5 9.6-5.2 15.2-15 15z'/%3E%3C/svg%3E") center/contain no-repeat}

/* C4 'AI 생성' 표시: 말풍선 아래 작은 글씨(지우지 않음) */
.b-foot{display:flex;justify-content:flex-end;margin-top:3px;line-height:1}
.b-foot .ai-badge{border:0;padding:0;border-radius:0;font-size:var(--fs-caption);line-height:1.2;letter-spacing:.02em;color:#7d6c50;opacity:.9}

/* C5 추천 질문 = 종이 꼬리표 · 영상/카드 = 작은 나무 현판 */
.chips button{background:radial-gradient(circle at 10px 50%,rgba(26,18,10,.85) 0 1.8px,rgba(120,90,50,.35) 2.3px,transparent 2.8px),linear-gradient(176deg,#f3e8cf,#e3d0a8);
  color:#3b2a15;border:0;border-radius:2px 7px 7px 2px;padding:0 13px 0 20px;font-weight:500;
  clip-path:polygon(6px 0,100% 0,100% 100%,6px 100%,0 50%);box-shadow:inset 0 -1px 0 rgba(110,80,40,.25),inset 0 0 0 1px rgba(120,90,50,.18)}
.chips .card-chip{background:radial-gradient(circle at 10px 50%,rgba(26,18,10,.85) 0 1.8px,transparent 2.6px),linear-gradient(176deg,#f6d9a0,var(--gold-b));color:#2b1d0c;font-weight:700}
.chips .again-chip{background:radial-gradient(circle at 10px 50%,rgba(26,18,10,.7) 0 1.8px,transparent 2.6px),linear-gradient(176deg,#d9ceb6,#c6b796);color:#4a3b25;opacity:.85}
.chips .glance-chip{color:#5a3a12}
.chip-tool{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:2px 10px 2px 8px;border-radius:3px;border:1px solid #8b6139;color:#f5ddb0;font-weight:600;letter-spacing:.03em;
  background:repeating-linear-gradient(92deg,rgba(255,220,170,.05) 0 2px,transparent 2px 7px),linear-gradient(#70492a,#4a2e18);
  box-shadow:inset 0 1px 0 rgba(255,222,170,.2),inset 0 -1px 0 rgba(0,0,0,.35),0 2px 5px rgba(0,0,0,.45)}
.chip-tool .ic{width:16px;height:16px}

/* D 추천 질문 줄: 첫 칩 왼쪽 16px · 끝에도 여백 · 끝까지 넘기면 흐림 없앰 */
.chips{margin:0 -12px;padding:2px 0 8px 16px;scroll-padding-left:16px;gap:6px}
.chips::after{content:'';flex:0 0 10px}
.chips button:last-child{margin-right:0}
.chips.at-end{-webkit-mask-image:none;mask-image:none}

/* B5 '찻자리로'는 위에 붙어 있게 */
.cab-top{position:sticky;top:0;z-index:5;margin:0 -16px;padding:calc(4px + env(safe-area-inset-top)) 12px 4px;background:linear-gradient(rgba(10,12,28,.96) 70%,rgba(10,12,28,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cab-in{padding-top:0}
.cab-top .cab-back,.cp-head .cab-back{position:static}
.cab-back{display:inline-flex;align-items:center;gap:2px;min-height:40px;padding:6px 8px 6px 2px;color:var(--ink);font-size:var(--fs-label)}
.cab-back .ic{width:18px;height:18px}
.cab-art{width:min(300px,80%);margin:4px auto 0;filter:none}
.cab-art img{display:block;width:100%;height:auto}

/* B1·B6 사람 타일: 고르면 테두리 · '이야기 n'은 줄바꿈 없이 */
.cab-people{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.cab-people .cab-card{transition:border-color .15s,background .15s}
.cab-people .cab-card.on{border-color:var(--amber2);background:rgba(232,184,107,.1);box-shadow:inset 0 0 0 1px rgba(232,184,107,.45)}
.cab-card .cc-txt small{display:flex;gap:4px;min-width:0;white-space:nowrap}
.cab-card .cc-rel{overflow:hidden;text-overflow:ellipsis;min-width:0}
.cab-card .cc-n{flex:none}.cab-card .cc-n::before{content:'·';margin-right:4px}
.cab-pick{margin:8px 0 0;text-align:right}
.cab-pick .link{font-size:var(--fs-label)}.cab-pick .link i{font-style:normal}
.cab-empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

/* B2 지난 이야기 항목: 질문 제목 2줄 말줄임(또는 첫 풀이) + 날짜 */
.cab-talk{grid-template-columns:1fr auto;grid-template-areas:"q at";align-items:start;gap:10px}
.cab-talk .ct-q{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.cab-talk.intro .ct-q{color:var(--amber2)}
.cab-talk .ct-at{font-size:var(--fs-label);padding-top:1px}

/* B3 찻잎 요약 */
.leaf-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}
.ls-item{display:flex;flex-direction:column;gap:2px;padding:10px 10px 9px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);min-width:0}
.ls-item>span{font-size:var(--fs-caption);color:var(--dim)}
.ls-item .leafn{font-size:inherit;color:inherit}
.ls-item b{font-size:var(--fs-title);color:var(--ink);font-variant-numeric:tabular-nums}
.ls-item.ls-bal b{color:var(--amber2)}
.ls-item small{font-size:var(--fs-caption);color:var(--dim);line-height:1.35;word-break:keep-all}
.ls-item small span{white-space:nowrap}
.cab-more{display:block;margin:8px 0 0 auto}

/* B4 찻잎 내역: 두 줄 구조 [기능·질문 … 증감] / [날짜 … 잔액] — 표를 없애 가로 넘침 원인 제거 */
.cab-ledger{display:flex;flex-direction:column;min-width:0}
.lg-row{padding:9px 0;border-bottom:1px solid var(--line);min-width:0}
.lg-1,.lg-2{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-width:0}
.lg-what{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-body);color:var(--ink)}
.lg-what b{font-weight:700}
.lg-d{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.lg-d.plus{color:#a9d6a0}.lg-d.minus{color:var(--ink)}
.lg-2{margin-top:2px;font-size:var(--fs-label);color:var(--dim);font-variant-numeric:tabular-nums}
.cabinet{overflow-x:hidden}.cab-in{overflow-x:clip}
@media (max-width:359px){ .leaf-sum{grid-template-columns:1fr 1fr} .ls-bal{grid-column:1 / -1} .cab-people{grid-template-columns:repeat(2,minmax(0,1fr))} .cab-people .cab-card{padding:9px 8px;gap:7px} .cab-card .cc-av{width:28px;height:28px;font-size:var(--fs-label)} }
@media (min-width:665px){ .chips{margin:0;padding-left:0;scroll-padding-left:0} }
/* 영상 확인창 하단 버튼: 남색 면 + 위쪽 그라데이션(뒤 글씨가 비치지 않게) */
.video-modal.prep .vprep > .card-actions{background:#0b0d1f}
.video-modal.prep .vprep > .card-actions::before{content:'';position:absolute;left:0;right:0;top:-32px;height:32px;background:linear-gradient(rgba(11,13,31,0),#0b0d1f);pointer-events:none}

/* ═══ 디자인 밸런스 조정 ═══ */
:root{
  /* 간격 스케일 4/8/12/16/24/32/40/48 */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:40px;--s8:48px;
  /* 찻장 구좌 */
  --gap-section:var(--s7);--gap-head:var(--s8);--gap-title:var(--s3);--gap-card:var(--s2);--pad-card:var(--s4);
  --surface:rgba(255,255,255,.045);--surface-hi:rgba(243,211,154,.09);--surface-line:rgba(236,228,210,.09);
  /* 해석가 색 — 3D 캐릭터 이펙트 색(scene3d CAST.color) */
  --c-muksan:#d8c49a;--c-sowol:#8fd0bd;--c-luka:#aab6ff;--c-rabi:#f0b56a;
}
@media (max-width:360px){ :root{--gap-section:var(--s6)} }

/* CTA 3단계 */
.cta1{background:linear-gradient(var(--gold-a),var(--gold-b));color:#2b1d0c;border:0;border-radius:10px;font-weight:700;letter-spacing:.04em}
.cta2{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);background:transparent;color:var(--amber2);border:1px solid rgba(243,211,154,.42);border-radius:999px;padding:6px 14px;min-height:36px;font-size:var(--fs-label);font-family:inherit;letter-spacing:.02em}
.cta2.sm{min-height:30px;padding:3px 12px;font-size:var(--fs-caption)}
.cta2.block{display:flex;width:100%;min-height:40px;border-radius:12px;margin-top:var(--gap-card)}
.cta2:disabled{opacity:.45}
.cta2:not(:disabled):hover,.cta2:not(:disabled):active{border-color:var(--amber2);background:rgba(243,211,154,.06)}
.cta3{background:none;border:0;padding:2px 0;color:var(--dim);font-size:var(--fs-caption);text-decoration:underline;text-underline-offset:3px;font-family:inherit}

/* 아이콘: 기본 보조색, 선택·활성은 금빛 + 아주 약한 번짐 */
.ic-l{width:24px;height:24px}.ic-m{width:20px;height:20px}.ic-s{width:16px;height:16px}
.mi i .ic{width:24px;height:24px}
.mi i{color:var(--dim);text-shadow:none}
.mi.on i{color:var(--amber2);text-shadow:none;box-shadow:none}
.mi.on i .ic{filter:drop-shadow(0 0 3px rgba(243,211,154,.55))}
.leaf-chip .ic,.cab-bal .ic,.leafn .ic{color:#b7cf9c}
.leafn .ic{width:1.05em;height:1.05em}

/* 1. 방 화면 — 입력창+여쭙기가 하단의 주인공 */
.chips{gap:var(--s2)}
.chips button{height:28px;padding:0 12px 0 20px;background:rgba(10,11,24,.5);color:var(--dim);font-size:var(--fs-label);font-weight:400;
  border:1px solid rgba(232,184,107,.34);border-radius:4px 14px 14px 4px;clip-path:none;box-shadow:none;position:relative;backdrop-filter:blur(4px);transition:border-color .15s,color .15s}
.chips button::before{content:'';position:absolute;left:8px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;border:1px solid rgba(232,184,107,.45);background:rgba(7,8,20,.9)}
.chips .card-chip,.chips .again-chip,.chips .glance-chip{background:rgba(10,11,24,.5);color:var(--amber2);font-weight:400;opacity:1}
@media (hover:hover){ .chips button:hover{border-color:rgba(243,211,154,.85);color:var(--ink)} }
.chips button:active,.chips button:focus-visible{border-color:rgba(243,211,154,.85);color:var(--ink)}
.chips-lead{color:var(--dim);opacity:.8}
.keep-btn{display:inline-flex;align-items:center;gap:var(--s1);height:26px;padding:0 10px 0 8px;background:transparent;border:1px solid rgba(236,228,210,.2);border-radius:999px;color:var(--dim);font-size:var(--fs-caption);font-family:inherit}
.keep-btn .ic{width:14px;height:14px}
.keep-btn:hover,.keep-btn:active,.keep-btn[aria-expanded=true]{border-color:rgba(243,211,154,.55);color:var(--amber2)}
.keep-menu{position:fixed;z-index:60;display:flex;flex-direction:column;min-width:172px;padding:var(--s1);background:rgba(14,15,32,.97);border:1px solid rgba(243,211,154,.25);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.5)}
.keep-menu button{display:flex;align-items:center;gap:var(--s2);min-height:40px;padding:0 var(--s3);background:none;border:0;border-radius:8px;color:var(--ink);font-size:var(--fs-label);font-family:inherit;text-align:left}
.keep-menu button .ic{color:var(--amber2)}
.keep-menu button:hover,.keep-menu button:focus-visible{background:rgba(243,211,154,.08);outline:none}
#ask-btn{background:linear-gradient(var(--gold-a),var(--gold-b));color:#2b1d0c;border:0;border-radius:10px;font-weight:700;letter-spacing:.04em}
#ask-btn:disabled{opacity:1;background:rgba(243,211,154,.3);color:rgba(30,20,8,.8)}
#ask-btn .ab-c .ic{color:#2b4a1e}
.ask-row textarea{border-color:rgba(243,211,154,.32);background:rgba(10,11,24,.6)}
.ask-row textarea:focus{border-color:var(--amber2)}

/* 2. 나의 찻장 — 구좌 리듬 */
.cab-head{padding-bottom:0}
.cab-title{margin-top:var(--s3)}
.cab-id{display:flex;flex-direction:column;align-items:center;gap:var(--s1);margin-top:var(--s2)}
.cab-name{margin:0;color:var(--dim);font-size:var(--fs-label)}
.cab-bal{display:flex;align-items:center;gap:6px;margin:0;color:var(--amber2);line-height:1}
.cab-bal .ic{width:26px;height:26px}
.cab-bal b{font-size:var(--fs-display);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.cab-bal span{font-size:var(--fs-label);color:var(--dim);margin-top:6px}
.cab-bal-sub{display:flex;align-items:center;gap:var(--s2);margin:var(--s1) 0 0}
.cab-test{font-size:var(--fs-caption);color:var(--dim)}
.cab-sec{margin-top:var(--gap-section)}
.cab-sec.cab-first{margin-top:var(--gap-head)}
.cab-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:32px;margin:0 0 var(--gap-title);padding:0;border:0}
.cab-h h2{display:flex;align-items:center;gap:var(--s2);margin:0;font-size:var(--fs-title);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab-h h2 .ic{color:var(--amber);flex:none}
.cab-h h2 span{overflow:hidden;text-overflow:ellipsis}
.cab-surface{background:var(--surface);border:1px solid var(--surface-line);border-radius:14px;padding:var(--pad-card)}
.cab-sec .note{margin:var(--s3) 0 0}
.cab-leaf-note{font-size:var(--fs-caption)}
/* 내 사람들: 가로 스크롤 카드 + 끝에 점선 초대 카드 */
.cab-people{display:flex;gap:var(--gap-card);overflow-x:auto;overflow-y:hidden;margin:0 -16px;padding:2px 16px 4px;scroll-padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;grid-template-columns:none}
.cab-people::-webkit-scrollbar{display:none}
.cab-people::after{content:'';flex:0 0 1px}
.cab-people .cab-card,.cab-people:not(.all) .cab-card:nth-child(n+5){display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:0 0 112px;width:112px;padding:var(--s3);text-align:left;background:var(--surface);border:1px solid var(--surface-line);border-radius:14px;box-shadow:none;color:var(--ink)}
.cab-people .cab-card .cc-av{width:36px;height:36px;font-size:var(--fs-list);margin-bottom:var(--s2);grid-row:auto}
.cab-people .cab-card .cc-nm{font-size:var(--fs-body);font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab-people .cab-card .cc-rel,.cab-people .cab-card .cc-n{font-size:var(--fs-caption);color:var(--dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab-people .cab-card .cc-n::before{content:none}
.cab-people .cab-card.on{border-color:rgba(243,211,154,.7);background:var(--surface-hi);box-shadow:inset 0 0 0 1px rgba(243,211,154,.25)}
.cab-people .cab-card.on .cc-av{background:rgba(243,211,154,.24)}
.cab-people .cab-add{background:transparent;border:1px dashed rgba(236,228,210,.28);justify-content:center}
.cab-people .cab-add .cc-av{background:none;border:1px dashed rgba(243,211,154,.5);color:var(--amber2)}
@media (max-width:359px){ .cab-people .cab-card,.cab-people:not(.all) .cab-card:nth-child(n+5){flex-basis:104px;width:104px} }
/* 미니 차트 */
.chart-mini{display:flex;flex-direction:column;gap:var(--s3)}
.cm-top{display:flex;align-items:center;gap:var(--s4)}
.cm-pillars{display:flex;gap:var(--s1);flex:none}
.cm-pillars .pc{display:flex;flex-direction:column;align-items:center;gap:2px;width:34px;padding:6px 0 7px;border-radius:8px;background:rgba(7,8,20,.45);border:1px solid var(--surface-line)}
.cm-pillars .pc small{font-size:var(--fs-caption);color:var(--dim)}
.cm-pillars .pc b{font-family:var(--title);font-size:var(--fs-list);line-height:1.15;color:var(--ink)}
.cm-pillars .pc:nth-child(2){border-color:rgba(243,211,154,.45)}.cm-pillars .pc:nth-child(2) b{color:var(--amber2)}
.cm-pillars .pc.none b{color:var(--dim);opacity:.6}
.cm-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.cm-who b{font-size:var(--fs-body)}.cm-who small{font-size:var(--fs-caption);color:var(--dim)}
.cm-acts{display:flex;align-items:center;gap:var(--s4)}
/* 지난 이야기 카드 */
.cab-talks{display:flex;flex-direction:column;gap:var(--gap-card)}
.cab-talk{display:flex;flex-direction:column;align-items:flex-start;gap:6px;grid-template-areas:none;width:100%;padding:14px var(--pad-card);background:var(--surface);border:1px solid var(--surface-line);border-radius:14px;text-align:left;color:var(--ink)}
.ct-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px 0 13px;font-size:var(--fs-caption);color:var(--amber2);border:1px solid rgba(243,211,154,.35);border-radius:3px 10px 10px 3px;position:relative;white-space:nowrap}
.ct-tag::before{content:'';position:absolute;left:5px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:rgba(243,211,154,.6)}
.cab-talk.intro .ct-tag{color:var(--c-sowol);border-color:rgba(143,208,189,.4)}.cab-talk.intro .ct-tag::before{background:rgba(143,208,189,.7)}
.cab-talk .ct-q,.cab-talk.intro .ct-q{grid-area:auto;font-weight:700;color:var(--ink)}
.ct-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);width:100%;margin-top:2px}
.ct-faces{display:flex;padding-left:6px}
.face{display:block;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--c);background:#1a1630;flex:none;object-fit:cover}
.face.sm{width:22px;height:22px;border-width:1.5px;margin-left:-6px;box-shadow:0 0 0 2px #121327}
.cab-talk .ct-at{grid-area:auto;font-size:var(--fs-label);padding:0}
.cab-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}.cab-empty .note{margin:0}
/* 찻잎 */
.leaf-sum{gap:var(--gap-card);margin:0 0 var(--gap-card)}
.ls-item{padding:var(--s3);border-radius:14px;background:var(--surface);border-color:var(--surface-line)}
.ls-item.ls-bal{background:var(--surface-hi);border-color:rgba(243,211,154,.3)}
.cab-ledger{padding:var(--s1) var(--pad-card)}
.lg-row{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:var(--s3);align-items:start;padding:var(--s3) 0}
.lg-row:last-child{border-bottom:0}
.lg-ic{grid-row:1 / 3;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(7,8,20,.5);color:var(--dim);margin-top:1px}
.lg-ic.plus{color:#a9d6a0}
.lg-row .lg-1,.lg-row .lg-2{grid-column:2}
.lg-d.minus{color:var(--ink)}
/* 설정: 한 카드 안에서 구분선 */
.cab-sec .settings{gap:0;padding-top:var(--s1);padding-bottom:var(--s1)}
.cab-sec .set-row{padding:var(--s3) 0;border-bottom:1px solid var(--surface-line)}
.cab-sec .set-row:last-child{border-bottom:0}
.set-l{display:inline-flex;align-items:center;gap:var(--s2)}
.set-l .ic{color:var(--dim)}
/* 계정: 목록형 행 */
.cab-rows{padding:0 var(--pad-card)}
.cab-rows>*{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0;background:none;border:0;border-bottom:1px solid var(--surface-line);color:var(--ink);font-size:var(--fs-dialog);font-family:inherit;text-align:left}
.cab-rows>*:last-child{border-bottom:0}
.cab-rows .row-i{color:var(--dim);font-size:var(--fs-label)}
.cab-rows .row-b i{font-style:normal;color:var(--dim);font-size:var(--fs-list)}
.cab-rows .row-b.danger{color:#e59a8a}
.cab-foot{margin-top:var(--gap-section)}
.cab-foot .cab-withdraw{text-decoration:underline}
/* 사람 상세도 같은 제목 줄 */
.cab-person .cab-h{border:0}

/* 기록(다실 안 기록 · 찻장 지난 이야기): 대화형 */
.r-body{gap:var(--s3)}
.msg{display:flex;gap:var(--s2);align-items:flex-start;max-width:100%}
.msg .face{width:32px;height:32px}
.msg .face-gap{flex:0 0 32px}
.msg .m-b{min-width:0;max-width:calc(100% - 40px)}
.msg .who{display:flex;align-items:baseline;gap:6px;margin:2px 0 4px 2px;color:var(--c);font-weight:700;letter-spacing:.02em}
.msg .who small{font-weight:400;color:var(--dim);font-size:var(--fs-caption)}
.msg .txt{background:rgba(255,255,255,.055);border:1px solid rgba(236,228,210,.07);border-radius:4px 14px 14px 14px;padding:var(--s2) var(--s3)}
.msg.cont{margin-top:calc(-1 * var(--s2))}
.msg.guest{flex-direction:row;justify-content:flex-end;text-align:left}
.msg.guest .m-b{max-width:84%}
.msg.guest .txt{background:rgba(243,211,154,.13);border-color:rgba(243,211,154,.25);border-radius:14px 4px 14px 14px;color:var(--ink)}
.stage-dir{margin:var(--s1) var(--s5);font-size:var(--fs-caption);font-style:italic;color:var(--dim);text-align:center}
.chat-more{margin-top:0}
.r-act .keep-btn{height:24px}
.record-sheet,#log-sheet{background:#0e0f22}
.r-body [hidden],.rec-list [hidden]{display:none!important}
/* 중간에 끊긴 이야기(QA-003) */
.ct-tags{display:flex;flex-wrap:wrap;gap:var(--s1)}
.ct-tag.cut{color:var(--dim);border-color:rgba(236,228,210,.25)}.ct-tag.cut::before{background:rgba(236,228,210,.45)}
.r-cut{font-size:var(--fs-caption);color:var(--dim);border:1px solid rgba(236,228,210,.22);border-radius:999px;padding:1px 8px;white-space:nowrap}
.record-sheet .sheet-head,#log-sheet .sheet-head{background:#0e0f22}

/* ═══ 1단계 — 버그·가독성 ═══ */
/* 1-2 크림 말풍선 위 화자 이름: 진한 해석가 색(대비 4.5:1 이상). 어두운 기록 화면은 --c-* 그대로 */
:root{--cast-ink-묵산:#6b5424;--cast-ink-소월:#1d6b59;--cast-ink-루카:#3c48a6;--cast-ink-라비:#93500f}
.b-who{color:var(--ci,#5a4a30);filter:none}
/* 1-3 여쭙기 비활성: 불투명 면 + 읽히는 글자(대비 3:1 이상) */
#ask-btn:disabled{opacity:1;background:#4a3d2a;color:var(--txt-2)}
#ask-btn:disabled .ab-c .ic{color:#b7cf9c}
/* 1-4 시트는 완전 불투명 + 뒤에 검정 50% 깔개(탭하면 닫힘) */
.sheet{z-index:7;background:#0e0f22}
.sheet-head,.sheet-grip,#chart-sheet .tabs{background:#0e0f22}
.sheet-dim{position:fixed;inset:0;z-index:6;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s;touch-action:none}
.sheet-dim.on{opacity:1;visibility:visible;transition:opacity .25s}
/* 1-5 빈 안내 캡슐은 보이지 않게 */
#hint:empty{display:none}
/* 1-6 다시 듣는 중 표시 */
.r-replay{font-size:var(--fs-caption);color:var(--amber2);border:1px solid rgba(243,211,154,.4);border-radius:6px;padding:1px 6px;white-space:nowrap}

/* ═══ 디자인·UI/UX 개선 2~5단계 ═══ */
/* 3 글꼴 역할 · 글자 크기 토큰 7단계(display 28 · title 20 · section 16 · body 15 · dialog 15/17/19 · label 13 · caption 12) */
:root{
  /* ── 디자인 토큰(D-2) — 이 블록이 단일 기준. 값을 바꿀 땐 여기서만 ── */
  /* 글꼴 3종 역할 고정: 나눔명조(로고·페이지 제목·명식) · 고운바탕(대사·지문·인용) · Pretendard(나머지).
     --ui에는 명조를 넣지 않음(Pretendard가 늦게 오면 UI가 잠깐 명조로 보이던 문제) */
  --ui:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --brand:'Nanum Myeongjo',serif; --dialog-font:'Gowun Batang',serif; --dialog-lh:1.7; --dialog-ls:0;
  /* 글자 역할 10종(모바일 기준) — 크기 / 행간 */
  --fs-display:28px; --lh-display:1.25;   /* 페이지 제목: 명조 700 · -0.01em */
  --fs-title:20px;   --lh-title:1.35;     /* 팝업 제목: 고딕 700 */
  --fs-section:18px; --lh-section:1.4;    /* 섹션 제목: 고딕 600 */
  --fs-list:16px;    --lh-list:1.5;       /* 목록 제목: 고딕 600 (지난 이야기 제목·사람 이름) */
  --fs-body:15px;    --lh-body:1.65;      /* 일반 본문: 고딕 400 (안내·설명) */
  --fs-dialog:15px;                       /* 대화 본문: 글자 크기 설정(작게 15 · 보통 17 · 크게 19)이 바꿈 · 행간 --dialog-lh */
  /* 찻장 '지난 이야기' 목록(PLAY_AND_SHARE 5): 아래는 '작게' 값 — 글자 크기 설정이 보통·크게로 바꿈(ui-logic.js TYPE_SCALE) */
  --fs-hist-title:15px; --lh-hist-title:22px;   /* 질문 제목: 고딕 600 · 두 줄까지 (보통 16/24 · 크게 17/25) */
  --fs-hist-prev:13px;  --lh-hist-prev:20px;    /* 대사 미리보기: 대화 글꼴 400 · 한 줄 (보통 14/21 · 크게 15/22) */
  --fs-hist-date:12px;                          /* 날짜: 늘 12 */
  --fs-btn:15px;     --lh-btn:1.3;        /* 주요 버튼: 고딕 600 */
  --fs-btn2:14px;                         /* 보조 버튼: 고딕 500 */
  --fs-sub:14px;                          /* 목록 보조 줄: 대사 미리보기·찻잎 이용 내용(고딕 400 · 한 줄) */
  --fs-label:13px;   --lh-label:1.5;      /* 필드명·보조 설명·텍스트 버튼 */
  --fs-caption:12px; --lh-caption:1.4;    /* 날짜·메타 (12px 미만 금지) */
  --fs-glyph:28px;   --lh-glyph:1.15;     /* 명식 핵심 글자: 명조 600~700 · 0.02em (주변 라벨은 키우지 않음) */
  --fs-input:16px;                        /* 입력 필드(16px 미만이면 아이폰이 확대함) */
  /* 표면 3단계 · 글자색 3단계(본문 · 보조 · 비활성) */
  --surface-0:#0e0f22;--surface-1:#16172b;--surface-2:#1f2036;
  --txt-1:#ece4d2;--txt-2:#b9b09e;--txt-3:#8c846f;
  /* 금색 2단계: 강조(글자·채움 위) · 선택 테두리(채움 아래) */
  --gold-a:#f3d39a;--gold-b:#d9a656;
  /* 모서리 4종: 칩 8 · 카드·버튼 12 · 팝업 위쪽 20 · 배지(완전 둥근) */
  --r-chip:8px;--r-card:12px;--r-sheet:20px;--r-pill:999px;
  /* 밝은 바탕(크림 말풍선) 위 보조 글자색 — #f1e8d4 바탕 대비 약 5.3:1 (4-15 B1에서 추가) */
  --paper-ink-2:#6b5c44;
  /* 예전 이름 → 새 토큰 별칭(기존 규칙 호환) */
  --ink:var(--txt-1);--dim:var(--txt-2);--dim5:var(--txt-3);--amber2:var(--gold-a);--amber:var(--gold-b);
}
:root[data-dfont=sans]{--dialog-font:var(--ui);--dialog-lh:1.7;--dialog-ls:-.002em}
body,button,input,select,textarea,.btn,.pill{font-family:var(--ui)}
.hanja,.kor,#gate h1,.book h2,.cab-title,.room-title,.vp-title{font-family:var(--brand)}
.cab-title{font-size:var(--fs-display);letter-spacing:.02em}
.b-txt,.log .txt,.rec-list .txt,.stage-dir,#direction,.direction{font-family:var(--dialog-font);letter-spacing:var(--dialog-ls)}
.b-txt,.log .txt,.rec-list .txt{font-size:var(--fs-dialog);line-height:var(--dialog-lh)}
.leaf-chip,.lg-d,.lg-2,.ls-item b,.ct-at,.r-meta,.cab-bal b,#ask-btn .ab-c,.leafn,.cm-who small,.vp-dur{font-variant-numeric:tabular-nums}
.sheet-head strong{font-size:var(--fs-title);font-weight:700}
.cab-h h2{font-size:var(--fs-section);font-weight:700}
input,select,textarea{font-size:var(--fs-input)}   /* 16px 미만이면 아이폰이 입력창을 확대함 */

/* 3-6 말풍선 진행: 아래쪽 얇은 막대(중립색) — 숫자는 aria-label에만 */
.b-head .b-prog{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:1px;background:rgba(43,36,24,.12);overflow:hidden;opacity:1;font-size:0}
.b-head .b-prog:empty{display:none}
.b-prog i{display:block;height:100%;background:rgba(43,36,24,.45);transition:width .3s}
/* 4-6 '생각 중' 점은 없애고 장면(끄덕임·찻잔 김)과 '네 분께 전했어요'만 — 문구는 화면 읽기용으로만 남김 */
#think{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cab-talk .dots{display:none}

/* 4-1·4-5 버튼 체계: 1차(금빛 채움) · 2차(불투명 면) · 텍스트 버튼(›) · 위험 텍스트 — 모서리 4~8px, 터치 44px */
.cta1,.cta2,.pill,.sh-x,.text-btn,.danger-text,.modal-x,.kakao-sm{border-radius:8px;min-height:44px}
.cta1{background:linear-gradient(var(--gold-a),var(--gold-b));color:#2b1d0c;border:0;font-size:var(--fs-body);font-weight:700;letter-spacing:0;padding:0 18px}
.cta1:disabled{background:#4a3d2a;color:var(--txt-2)}
.cta2{background:var(--surface-2);color:var(--txt-1);border:0;font-size:var(--fs-label);padding:0 14px;letter-spacing:0}
.cta2.sm{min-height:44px;padding:0 12px;font-size:var(--fs-label);background:var(--surface-2)}
.cta2:not(:disabled):hover,.cta2:not(:disabled):active{background:#2a2b44;border:0}
.cta2 .ic{color:var(--txt-2)}
.pill{background:var(--surface-2);border:0;color:var(--txt-1);backdrop-filter:none;padding:0 14px;font-size:var(--fs-label)}
.top .pill{min-height:36px}
.pill.gold{background:linear-gradient(var(--gold-a),var(--gold-b));color:#2b1d0c}
.sh-x{background:none;border:0;color:var(--txt-1);font-size:var(--fs-label);padding:0 6px 0 12px}
.text-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:var(--txt-1);font-size:var(--fs-label);padding:0 4px;text-decoration:none}
.text-btn i{font-style:normal;color:var(--txt-2);font-size:var(--fs-list)}
.danger-text{background:none;border:0;color:#ef9f8e;font-size:var(--fs-label);padding:0 4px;text-decoration:none}
.kakao-sm{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;background:#fee500;color:#191600;border:0;font-size:var(--fs-label);font-weight:600;padding:0 12px}
.kakao-sm svg{width:16px;height:16px}
.gb-login{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:10px}
.gb-login span{font-size:var(--fs-label);color:#5a4b33;text-align:center}
.book .gb-login .text-btn{color:#5a4b33;justify-content:center}
.sheet-head{border:0;min-height:56px;padding:8px 0}
.sh-act{display:flex;align-items:center;gap:4px}
.sheet-cta{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:var(--surface-0)}
.cta1.block{width:100%}
.modal-x{position:absolute;top:calc(8px + env(safe-area-inset-top));right:8px;z-index:3;background:rgba(14,15,34,.92);border:0;color:var(--txt-1);font-size:var(--fs-label);padding:0 14px}
.card-top{position:relative;min-height:52px}
.card-modal .card-actions.acts-card,.video-modal .card-actions.acts-prep{display:flex;gap:8px}
.card-modal .acts-card .cta2,.video-modal .acts-prep .cta2{flex:1 1 0}
.card-modal .acts-card .cta1,.video-modal .acts-prep .cta1{flex:2 1 0}
.video-modal.prep .vprep > .card-actions .cta1,.video-modal.prep .vprep > .card-actions .cta2{min-height:48px;font-size:var(--fs-body);letter-spacing:0}
.vprep{position:relative}
.vprep .modal-x{top:0;right:0}
.card-opt.link,.link.card-opt{text-decoration:none;color:var(--amber2)}

/* 4-2 남기기: 트리거는 보이는 크기 그대로·터치 44px, 메뉴는 가볍게(채움·그림자 없음, 폭은 내용만) */
.keep-btn{position:relative;background:transparent;border:0;color:var(--txt-2)}
.keep-btn::after{content:'';position:absolute;inset:-9px -4px}
.keep-menu{min-width:0;padding:4px 6px;background:var(--surface-1);border:0;border-radius:8px;box-shadow:none}
.keep-menu button{min-height:40px;padding:0 8px;background:none;color:var(--txt-1);font-size:var(--fs-label);white-space:nowrap}
.keep-menu button:hover,.keep-menu button:focus-visible{background:none;color:var(--amber2)}

/* 1 방 화면: 화자 안내 줄은 입력창 위 한 줄 */
.chips-lead{font-size:var(--fs-caption);color:var(--txt-2)}
.chips button{font-size:var(--fs-label);color:var(--txt-2)}

/* 2 기록 시트(다실 기록 · 찻장 지난 이야기 공통) */
.rec-sheet{max-height:none;display:flex;flex-direction:column;overflow:hidden;padding:0;transition:transform .25s cubic-bezier(.2,.7,.3,1),height .25s cubic-bezier(.2,.7,.3,1),visibility 0s;touch-action:none}
.rec-sheet:not(.open){transition:transform .25s ease,visibility 0s linear .25s}
.rec-sheet.full{border-radius:0;border-top:0}
.rs-head{flex:none;padding:0 16px;cursor:grab;user-select:none;-webkit-user-select:none;background:var(--surface-0)}
.rs-grip{display:flex;justify-content:center;align-items:center;height:20px;margin:0 -16px}
.rs-grip i{width:40px;height:5px;border-radius:3px;background:rgba(236,228,210,.6)}
.rs-grip:focus-visible{outline:2px solid var(--amber2);outline-offset:-2px}
.rs-head .sheet-head{position:static;min-height:48px;padding:0 0 4px;background:none}
.rs-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:0 16px calc(24px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.rs-fold .ic{width:14px;height:14px}
.rs-meta{font-size:var(--fs-caption);color:var(--txt-2);margin:0 0 8px}
.log-foot{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;margin-top:24px;font-size:var(--fs-caption)}
.log-foot .link{font-size:var(--fs-caption);color:var(--txt-2)}
/* 주제(질문) 묶음: 접힌 줄은 얇은 선으로만, 펼치면 껍데기를 벗기고 시트 전체 폭 · 제목 줄은 위에 붙음 */
.log details.round,.rec-list details.round{border:0;border-radius:0;background:none;margin:0;border-top:1px solid rgba(236,228,210,.1)}
.log details.round:first-child,.rec-list details.round:first-child{border-top:0}
.log details.round[open],.rec-list details.round[open]{margin:8px 0 32px}
.log details.round[open] + details.round,.rec-list details.round[open] + details.round{border-top:1px solid rgba(236,228,210,.1);padding-top:0}
.log details.round>summary,.rec-list details.round>summary{padding:14px 0;gap:4px 10px;min-height:48px}
.log details.round[open]>summary,.rec-list details.round[open]>summary{position:sticky;top:0;z-index:2;background:var(--surface-0);margin:0 -16px;padding:12px 16px}
.r-q{font-size:var(--fs-body);font-weight:600;color:var(--txt-1);flex:1 1 60%;min-width:0}
.r-meta{font-size:var(--fs-caption);color:var(--txt-2)}
.r-fold{display:none;font-size:var(--fs-caption);color:var(--txt-2)}
details.round[open]>summary .r-fold{display:inline}
details.round[open]>summary .r-meta{display:none}
.r-act{display:none}
.r-body{padding:4px 0 8px;gap:0;display:block}
.r-again{margin:4px 0 16px}
/* 2-4 좌담회 기록: 박스 없음 · 화자 한 줄 + 본문 · 간격 리듬(대사 16 · 화자 바뀜 20 · 지문 24 · 주제 32) */
.msg{display:block;margin:16px 0 0;max-width:none}
.msg:not(.cont){margin-top:20px}
.msg .who{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:var(--fs-label);letter-spacing:0}
.msg .who b{color:var(--c);font-weight:700}
.msg .who small{font-size:var(--fs-caption);color:var(--txt-2);font-weight:400}
.face.xs{width:22px;height:22px;border-width:1.5px}
.msg .txt{background:none;border:0;border-radius:0;padding:0;color:var(--txt-1);max-width:none}
.msg.cont .txt{margin-top:-4px}
.msg.guest{display:block;margin:12px 0 0}
.msg.guest .txt{background:var(--surface-2);border:0;border-radius:10px;padding:10px 14px;color:var(--txt-1);font-family:var(--dialog-font)}
.stage-dir{margin:24px 8px;font-size:var(--fs-label);font-style:italic;color:var(--txt-2);text-align:center}
.stage-dir::before{content:'— '}.stage-dir::after{content:' —'}
.log .txt b,.rec-list .txt b,.log .txt strong,.rec-list .txt strong{font-weight:700;color:var(--txt-1);background:linear-gradient(transparent 60%,rgba(243,211,154,.22) 0);text-decoration:none;border:0}
.chat-more{margin-top:20px}
/* 2-6 이 이야기 남기기 — 펼친 이야기 맨 끝 한 곳 */
.r-keep{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:28px;padding-top:12px;border-top:1px dashed rgba(236,228,210,.14)}
.rk-l{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--txt-2);margin-right:auto}
.r-cut,.r-replay{font-size:var(--fs-caption)}

/* 4-5·5 나의 찻장 */
.cab-surface,.cab-talk,.ls-item,.cab-ledger{border:0!important;background:var(--surface-1)}
.ls-item.ls-bal{background:var(--surface-2)}
.ls-item.ls-bal b{color:var(--amber2)}
.cab-art{width:min(180px,48%);margin:0 auto}
.cab-head{padding-top:0}
.cab-id{gap:2px;margin-top:4px}
.cab-bal{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--amber2);min-height:44px;padding:0 8px;cursor:pointer}
.cab-bal span{font-size:var(--fs-label)}
.cab-leaf-note{margin:8px 0 12px}
.caption{font-size:var(--fs-caption);color:var(--txt-2);line-height:1.4}
/* 내 사람들: 높이 약 88px · 선택만 테두리 · 초대는 줄 끝 작은 + 버튼 */
.cab-people{align-items:center}
.cab-people .cab-card,.cab-people:not(.all) .cab-card:nth-child(n+5){flex:0 0 120px;width:120px;height:88px;gap:6px;padding:12px;justify-content:center;border:1.5px solid transparent;background:var(--surface-1)}
.cab-people .cab-card .cc-row{display:flex;align-items:center;gap:8px;min-width:0;width:100%}
.cab-people .cab-card .cc-av{width:28px;height:28px;font-size:var(--fs-label);margin:0;flex:none}
.cab-people .cab-card .cc-nm{font-size:var(--fs-body)}
.cab-people .cab-card.on{border-color:var(--amber2);background:var(--surface-2);box-shadow:none}
.cab-add{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px;border-radius:8px;border:0;background:var(--surface-2);color:var(--txt-1);font-size:var(--fs-label)}
.cab-add span{font-size:var(--fs-list);color:var(--amber2)}
@media (max-width:359px){ .cab-people .cab-card,.cab-people:not(.all) .cab-card:nth-child(n+5){flex-basis:108px;width:108px} }
/* 지난 이야기 카드: 제목 두 줄 먼저 · 결론 한 줄 회색 · 날짜 보조 */
.cab-talk{gap:6px;padding:14px 16px;border-radius:12px}
.cab-talk .ct-q{font-size:var(--fs-body);font-weight:600;line-height:1.45}
.ct-gist{font-size:var(--fs-label);color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-family:var(--dialog-font)}
.ct-foot{justify-content:flex-start;gap:6px;flex-wrap:wrap}
.ct-foot .ct-at{margin-left:auto;font-size:var(--fs-caption);color:var(--txt-2)}
.ct-tag{font-size:var(--fs-caption);height:22px}
/* 찻잎 내역: 질문 제목이 잘리지 않게(두 줄까지) */
.lg-what{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--fs-body);line-height:1.45}
.lg-2{font-size:var(--fs-caption);color:var(--txt-2)}
.lg-row{border-bottom:1px solid rgba(236,228,210,.06)}
.ledger-sheet .cab-ledger{background:none!important;padding:0}
/* 5-7 설정: 라벨 왼쪽 · 선택 오른쪽 한 줄(좁으면 셋 다 라벨 위 · 선택 아래) */
.set-row{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:12px}
.set-l{font-size:var(--fs-label);color:var(--txt-1);white-space:nowrap}
.set-seg{border:0;background:var(--surface-0);border-radius:8px;padding:2px;flex:none}
.set-seg button{min-height:40px;border-radius:6px;padding:0 12px;font-size:var(--fs-label);color:var(--txt-2)}
.set-seg button[aria-pressed=true]{background:var(--surface-2);color:var(--amber2)}
@media (max-width:359px){ .set-row{flex-direction:column;align-items:flex-start;gap:8px} .set-seg{align-self:stretch;display:flex} .set-seg button{flex:1} }
/* 5-11 차트: 원국 / 앞으로의 흐름 구분 */
.cv-part + .cv-part{margin-top:32px;padding-top:24px;border-top:1px solid rgba(236,228,210,.1)}
.cv-kicker{font-size:var(--fs-caption);font-weight:700;letter-spacing:.08em;color:var(--amber2);margin:0 0 4px}
.cv h3{font-size:var(--fs-section);margin:4px 0 8px}
.cv th,.cv td{font-size:var(--fs-label)}
.cp-rel{font-size:var(--fs-caption);color:var(--txt-2)}
.cm-acts{gap:8px}

/* 5-8 출생 정보 폼(방명록 = 새 사람 초대 = 정보 수정) */
.ps-form .seg span{border:0;background:var(--surface-2);color:var(--txt-2);border-radius:8px;padding:10px 0;font-size:var(--fs-body)}
.ps-form .seg input:checked+span{background:var(--gold-b);color:#2b1d0c}
.ps-form .seg legend{font-size:var(--fs-label);color:var(--txt-2)}
.ps-form .row{display:flex;gap:12px}
.fgroup{display:flex;flex-direction:column;gap:12px}
.fgroup + .fgroup{margin-top:12px;padding-top:16px;border-top:1px solid rgba(236,228,210,.08)}
.ps-form label{font-size:var(--fs-label);color:var(--txt-2)}
.ps-form input:not([type=checkbox]):not([type=radio]),.ps-form select{background:var(--surface-1);border:1px solid rgba(236,228,210,.18);font-size:var(--fs-input)}
.birth-form select{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 9.4 12 15l5.6-5.6' fill='none' stroke='%23a99f8b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
.book.birth-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 9.4 12 15l5.6-5.6' fill='none' stroke='%238d7752' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.time-row{display:flex;align-items:flex-end;gap:12px}
.time-field{display:flex;flex-direction:column;gap:3px;flex:1;font-size:var(--fs-label)}
.book .time-field{color:#5a4b33}
.ps-form .time-field{color:var(--txt-2)}
.time-field.off .tf-txt{opacity:.45}
.tf-txt[aria-invalid]{border-color:#c0614a!important}
.book .tf-txt{font:inherit;font-size:var(--fs-input);color:var(--paper-ink);background:transparent;border:0;border-bottom:1.5px solid #8d7752;padding:6px 2px;border-radius:0;outline:none;width:100%}
.ps-form .tf-txt{color:var(--txt-1);border-radius:8px;padding:8px 10px;width:100%}
.ps-form .chk{flex-direction:row;align-items:center;gap:6px;flex:none;padding-bottom:12px;color:var(--txt-1)}
.leap-chk{flex-direction:row!important;align-items:center;gap:6px}
.ps-consent{display:none}
.consent-chk{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;min-height:44px;font-size:var(--fs-label)!important;color:var(--txt-1)!important;background:none;border:0;padding:0;margin:4px 0 0}
.consent-chk input{width:20px;height:20px;accent-color:var(--gold-b)}
.form-acts{display:flex;gap:8px;margin-top:4px}
.form-acts .cta2{flex:1}.form-acts .cta1{flex:2}
.ps-price{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:var(--fs-label);color:var(--txt-1);margin:8px 0 0}
.info-btn{background:none;border:0;color:var(--txt-2);font-size:var(--fs-caption);min-height:32px;padding:0 4px}
.ps-more{width:100%;font-size:var(--fs-caption);color:var(--txt-2)}
.ps-form #ps-del{align-self:center;margin-top:8px}
.rs-fold[hidden],.sheet [hidden]{display:none!important}
#hud .sheet-dim{pointer-events:auto}
.link.card-opt{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 8px;border-radius:8px;background:var(--surface-2);color:var(--txt-1)}
.consent-chk.hidden{display:none!important}
.cab-rows>*{font-size:var(--fs-body)}
.sheet-head{gap:8px}
.sheet-head strong{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-act{flex:none}.sh-act button{white-space:nowrap}
@media (max-width:389px){ .rs-fold .rf-t{display:none} .rs-head .sh-act .cta2{padding:0 10px} }

/* ═══ 6-1 영상 확인 화면: 제목 → 질문 → 장면 → 엔딩 → 제작(아래 고정). 장면 목록만 스크롤 ═══ */
.video-modal.prep{padding:0;justify-content:flex-start}
.video-modal.prep .vprep{display:flex;flex-direction:column;align-items:stretch;gap:0;width:min(100%,460px);height:100dvh;max-height:100dvh;overflow:hidden;padding:calc(8px + env(safe-area-inset-top)) 16px 0;box-sizing:border-box;text-align:left}
.vp-head{display:flex;align-items:center;gap:8px;min-height:52px;flex:none}
.vp-title{flex:1;margin:0;color:var(--txt-1);font-family:var(--ui);font-size:var(--fs-title);font-weight:700;line-height:1.35;letter-spacing:-.01em}
.vp-x{flex:none;position:relative;width:44px;height:44px;margin-right:-10px;border:0;border-radius:8px;background:none;color:var(--txt-2);cursor:pointer}
.vp-x::before,.vp-x::after{content:'';position:absolute;left:50%;top:50%;width:18px;height:1.6px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.vp-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.vp-x:hover,.vp-x:focus-visible{color:var(--txt-1);background:var(--surface-2)}
.vp-qrow{flex:none;display:flex;align-items:center;gap:12px;margin:4px 0 0;padding:10px 12px;border-radius:8px;background:var(--surface-1)}
.vp-q{flex:1;min-width:0;margin:0;color:var(--txt-1);font-size:var(--fs-body);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-q.off{color:var(--txt-2);opacity:.55;text-decoration:line-through;text-decoration-thickness:1px}
.vp-sw{flex:none;display:flex;align-items:center;gap:8px;color:var(--txt-2);font-size:var(--fs-label);cursor:pointer;min-height:44px}
.sw{position:relative;width:44px;height:26px;padding:0;border:0;border-radius:13px;background:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(236,228,210,.18);cursor:pointer;transition:background .2s}
.sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--txt-2);transition:transform .2s,background .2s}
.sw[aria-checked="true"]{background:var(--gold-b);box-shadow:none}
.sw[aria-checked="true"] i{transform:translateX(18px);background:#2b1d0c}
.sw:focus-visible{outline:2px solid var(--gold-a);outline-offset:2px}
.vp-h{margin:0;color:var(--txt-2);font-family:var(--ui);font-size:var(--fs-label);font-weight:600;letter-spacing:.02em}
.vprep > .vp-h{flex:none;margin:20px 0 8px}
.video-modal.prep .vp-list{flex:0 1 auto;min-height:72px;max-height:none;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:16px;margin:0;padding:0 0 4px;list-style:none}
.vp-list li{display:flex;gap:10px;align-items:flex-start;padding:0;border:0;border-radius:0;background:none;cursor:default}
.vp-list li .vp-n{flex:none;width:20px;color:var(--txt-2);font-size:var(--fs-label);line-height:1.6;font-family:var(--ui)}
.vp-list li div{flex:1;min-width:0}
.vp-list li b{display:block;min-width:0;padding:0;font-family:var(--ui);font-size:var(--fs-label);font-weight:600;line-height:1.6}
.vp-list li p{margin:2px 0 0;color:var(--txt-1);font-family:var(--dialog-font);font-size:var(--fs-dialog);line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
.video-modal.prep .vp-end{flex:none;display:block;margin:20px 0 0}
.vp-endhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.vp-endhead .cta2.sm{min-height:36px;padding:0 12px;font-size:var(--fs-label)}
.vp-endhead .cta2.sm.hidden{display:none}
.vp-quote{margin:0;padding:2px 0 2px 14px;border-left:3px solid var(--gold-b)}
.vp-quote p{margin:0;color:var(--txt-1);font-family:var(--brand);font-size:var(--fs-dialog);line-height:1.65;word-break:keep-all;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.vp-quote cite{display:block;margin-top:4px;color:var(--txt-2);font-family:var(--ui);font-style:normal;font-size:var(--fs-label)}
.vp-quote.none p{color:var(--txt-2)}
.video-modal.prep .vp-make{flex:none;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;margin:auto -16px 0;padding:14px 16px calc(8px + env(safe-area-inset-bottom));background:var(--surface-0)}
.vp-make::before{content:'';position:absolute;left:0;right:0;top:-28px;height:28px;background:linear-gradient(rgba(14,15,34,0),var(--surface-0));pointer-events:none}
.vp-make #vp-go{width:100%;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 18px}
.vp-make #vp-go b{font-size:var(--fs-list);font-weight:700}
.vp-make #vp-go small{font-size:var(--fs-caption);font-weight:500;color:rgba(43,29,12,.78);font-variant-numeric:tabular-nums}
.vp-make .text-btn{min-height:44px;font-size:var(--fs-label)}
.vp-end{margin-bottom:12px}
@media (max-height:620px){ .vprep > .vp-h{margin:14px 0 6px} .video-modal.prep .vp-end{margin-top:14px} .vp-quote p{-webkit-line-clamp:2} .vp-head{min-height:46px} .vp-make #vp-go{min-height:52px} }
.video-modal.prep .vp-end{border:0;border-radius:0;padding:0;gap:0}
.vp-endhead .cta2.sm{min-height:40px}
.video-modal.prep .vp-list.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
.vp-make::before{top:-20px;height:20px}

/* ═══ 6-3 카드뉴스 창: 닫기 X(오른쪽 위) · 점으로만 쪽 표시 · 화살표는 카드 바깥(넓은 화면) · 비율 세그먼트 ═══ */
.card-modal{padding:0 16px;justify-content:flex-start;gap:8px}
.card-modal .card-top{width:min(100%,520px);height:auto;min-height:52px;display:flex;justify-content:flex-end;align-items:center;padding-top:env(safe-area-inset-top)}
.card-modal .card-top .vp-x{margin-right:-10px}
.card-modal .card-stage{width:min(100%,520px)}
.card-modal .card-dots{gap:8px;height:20px}
.card-modal .card-dots i{width:8px;height:8px}
.card-nav{font-size:0;color:var(--txt-1);border-color:rgba(236,228,210,.22);background:var(--surface-1)}
.card-nav::before{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;border:solid currentColor;border-width:0 0 1.8px 1.8px;transform:translate(-30%,-50%) rotate(45deg)}
.card-nav.next::before{transform:translate(-70%,-50%) rotate(-135deg)}
@media (hover:hover) and (pointer:fine){ .card-nav.prev{left:-60px}.card-nav.next{right:-60px} }
@media (max-width:660px){ .card-nav{display:none!important} }   /* 좁은 화면: 밀어서 넘기기 + 점 */
.card-modal .card-bar{gap:12px;padding:4px 0 calc(12px + env(safe-area-inset-bottom))}
.seg2{display:inline-flex;padding:3px;gap:2px;border-radius:8px;background:var(--surface-1);box-shadow:inset 0 0 0 1px rgba(236,228,210,.12)}
.seg2 button{min-height:38px;min-width:104px;padding:0 14px;border:0;border-radius:6px;background:none;color:var(--txt-2);font:600 var(--fs-label)/1 var(--ui);cursor:pointer}
.seg2 button[aria-checked="true"]{background:var(--surface-2);color:var(--txt-1);box-shadow:0 0 0 1px rgba(243,211,154,.35)}
.seg2 button:focus-visible{outline:2px solid var(--gold-a);outline-offset:1px}
.card-modal .acts-card{width:100%}
.card-modal .acts-card .cta1,.card-modal .acts-card .cta2{min-height:48px;font-size:var(--fs-body)}
.card-modal .acts-card .cta2.hidden{display:none}
.video-modal.prep{background:var(--surface-0)}
.vp-list li .vp-n{font-size:var(--fs-list);line-height:21px;font-family:"Apple SD Gothic Neo","Noto Sans KR",var(--ui)}
.vp-list li .vp-n{box-sizing:border-box;width:22px;height:22px;margin-top:1px;border:1.2px solid var(--txt-2);border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 var(--fs-caption)/1 var(--ui);font-variant-numeric:tabular-nums}

/* ═══ 2차 QA ═══ */
/* 5) 기록 날짜 묶음(최신순) */
.day-sec+.day-sec{margin-top:20px}
.day-h{position:sticky;top:0;z-index:1;margin:0 0 8px;padding:6px 0;background:var(--surface-0);color:var(--txt-2);font:600 var(--fs-label)/1.4 var(--ui);letter-spacing:.02em}
/* 6) 긴 기록: 이어짐 표시 + 전체·남은 수 */
.chat-cont{position:relative;margin-top:4px}
.chat-cont::before{content:'';position:absolute;left:0;right:0;top:-44px;height:44px;background:linear-gradient(rgba(14,15,34,0),var(--surface-0));pointer-events:none}
.cc-note{display:flex;align-items:center;justify-content:center;gap:5px;margin:4px 0 10px;color:var(--txt-2);font-size:var(--fs-caption)}
.cc-note i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}
.cc-note span{margin-left:6px}
.chat-cont .chat-more{margin-top:0}
/* 7) 시트 크기 전환(작게/크게 보기) · 대화 접기 · 손잡이 터치 44px · 작게 보기 깔개 30% */
.rs-fold .ic{transition:transform .2s}
.rs-fold.up .ic{transform:rotate(180deg)}
.r-fold{align-items:center;gap:4px}
details.round[open]>summary .r-fold{display:inline-flex}
.r-fold .ic{width:14px;height:14px}
.rs-grip{height:44px;margin:-12px -16px -12px;position:relative}
.sheet-dim.lite{background:rgba(0,0,0,.3)}
/* 8) 영상 확인 화면: 긴 질문은 두 줄까지, 눌러서 전체 */
.vp-q{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:clip;line-height:1.5}
.vp-q.more{cursor:pointer}
.vp-q.more:not(.open)::after{content:''}
.vp-q.open{display:block;-webkit-line-clamp:unset;max-height:40dvh;overflow-y:auto}
.vp-q:focus-visible{outline:2px solid var(--gold-a);outline-offset:2px;border-radius:4px}
/* 11) 말풍선 키보드 조작(Enter/Space로 다음) · 포커스 링 */
#bubble:focus{outline:none}
#bubble:focus-visible{outline:2px solid var(--gold-a);outline-offset:3px}
/* 11) 상단 칩(찻자리 이름·찻잎): 다른 요소와 같은 모서리 12 */
.seat-switch,.leaf-chip{border-radius:12px}
#cab-talks .day-h{background:transparent;position:static;padding:4px 2px}
#cab-talks .day-sec{display:flex;flex-direction:column;gap:var(--gap-card)}
@media (max-width:429px){ .rs-head .rs-fold .rf-t{display:none} .rs-head .rs-fold{padding:0 12px} }   /* 좁은 화면: 크기 전환은 아이콘만(위/아래 화살표) — 제목이 잘리지 않게 */

/* ═══ D-1 출생 정보 폼 가로 넘침(DESIGN_SPEC 작업 1) ═══
   숨긴 성별·달력 라디오에 '.ps-form input:not([type=checkbox])'의 width:100%가 걸리고, position:absolute의 기준이 시트 전체라
   라디오마다 시트 폭만큼 오른쪽으로 뻗어 가로 스크롤이 생김(390px에서 내용 폭 681px). 라디오를 자기 선택지(label) 안에 가둠 */
.seg label{position:relative;min-width:0}
.seg input[type=radio]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.ps-form{min-width:0;max-width:100%}
/* ═══ D-2 공통 토큰 적용(DESIGN_SPEC 작업 2) — 값은 위 '디자인 토큰(D-2)' 블록에서만 정의 ═══ */
/* 글자 역할: 페이지 제목(명조) · 팝업 제목(고딕) · 섹션 제목 · 목록 제목 · 일반 본문 */
.cab-title,.cp-name{font-family:var(--brand);font-size:var(--fs-display);font-weight:700;line-height:var(--lh-display);letter-spacing:-.01em}
.sheet-head strong,.vp-title{font-family:var(--ui);font-size:var(--fs-title);font-weight:700;line-height:var(--lh-title);letter-spacing:0}
.cab-h h2,.cv h3{font-family:var(--ui);font-size:var(--fs-section);font-weight:600;line-height:var(--lh-section);letter-spacing:.01em;color:var(--txt-1)}
.cab-h h2 .ic{color:var(--txt-2)}   /* 섹션 제목·아이콘의 반복 금색을 줄임 — 금색은 선택한 사람·주요 CTA에 집중 */
.cab-talk .ct-q,.r-q,.cab-people .cab-card .cc-nm{font-size:var(--fs-list);font-weight:600;line-height:var(--lh-list)}
.sheet > .note,.cab-empty .note{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--txt-2)}   /* 12px로 섞여 있던 안내 문단 → 본문 15 */

/* 버튼 3단계: 주요 CTA(금색 채움 15/600 · 48) · 보조(반투명 면 14/500 · 44) · 텍스트(13/500 · 터치 44) — 모서리 12 */
.cta1,.btn:not(.ghost):not(.ghost-sm){display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:0;border-radius:var(--r-card);background:linear-gradient(var(--gold-a),var(--gold-b));color:#2b1d0c;font-size:var(--fs-btn);font-weight:600;line-height:var(--lh-btn);letter-spacing:0}
.cta1:disabled{background:#4a3d2a;color:var(--txt-2)}
.cta2,.cta2.sm,.btn.ghost-sm{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:0;border-radius:var(--r-card);background:rgba(236,228,210,.08);color:var(--txt-1);font-size:var(--fs-btn2);font-weight:500;line-height:var(--lh-btn);letter-spacing:0}
.cta2:not(:disabled):hover,.cta2:not(:disabled):active,.btn.ghost-sm:not(:disabled):hover,.btn.ghost-sm:not(:disabled):active{background:rgba(236,228,210,.14);border:0}
.text-btn,.danger-text{min-height:44px;font-size:var(--fs-label);font-weight:500}
/* 위험 동작: 주요 CTA와 같은 크기·모양에 붉은 글씨(금색 채움 대신 면) */
#withdraw-go{background:var(--surface-2);color:#ef9f8e}
#ask-btn{border-radius:var(--r-card)}

/* 모서리 4종: 칩 8 · 카드·버튼 12 · 팝업 위쪽 20 · 배지 완전 둥근 */
.sheet{border-radius:var(--r-sheet) var(--r-sheet) 0 0}
.pill,.sh-x,.modal-x,.kakao-btn,.kakao-sm,.cab-add,.sent,.seat-menu,.keep-menu{border-radius:var(--r-card)}
.cab-surface,.cab-talk,.ls-item,.cab-people .cab-card,.cab-people:not(.all) .cab-card:nth-child(n+5),.bubble,.msg.guest .txt,.video-box,.vp-end,.login-perks li,.shop-item{border-radius:var(--r-card)}
.chips button,.seg span,.pillars div,.chip-tool,.vp-pick,.set-seg,.set-seg button,.seg2,.seg2 button{border-radius:var(--r-chip)}
.text-btn,.danger-text{border-radius:var(--r-card)}
.hint,.ct-tag,.r-replay,.ai-badge,.r-cut{border-radius:var(--r-pill)}
/* ═══ D-3 나의 찻장(DESIGN_SPEC 작업 3) ═══ */
/* 순서: 내 사람들 → 선택한 사람의 차트 → 지난 이야기 → 찻잎 → 설정·계정
   세 묶음 간격: 큰 묶음 사이 48 · 묶음 안 섹션 사이 32 · 제목→내용 16 · 관련 항목 8~12. 항목마다 상자를 더하지 않음 */
.cab-g{margin-top:48px}
.cab-g1{margin-top:32px}
.cab-g .cab-sec,.cab-g .cab-sec.cab-first{margin-top:0}
.cab-g .cab-sec + .cab-sec{margin-top:32px}
.cab-g .cab-h{height:auto;min-height:32px;margin:0 0 16px;justify-content:flex-start}
@media (max-width:360px){ .cab-g{margin-top:40px} }

/* 머리: 큰 잔액(28px) → 작은 찻잎 칩, 누르면 찻잎으로 */
.cab-bal{position:relative;min-height:32px;margin-top:4px;padding:4px 12px 4px 8px;gap:4px;border-radius:var(--r-pill);background:var(--surface-1);color:var(--txt-1)}
.cab-bal::after{content:'';position:absolute;inset:-6px 0}
.cab-bal .ic{width:16px;height:16px}
.cab-bal b{font-size:var(--fs-label);font-weight:600;letter-spacing:0}
.cab-bal span{margin-top:0;font-size:var(--fs-label);color:var(--txt-2)}

/* 선택한 사람의 기본 차트: 명식 글자 28px(라벨·이름·출생 정보는 그대로) · '차트 보기'만 */
.cm-top{flex-wrap:wrap;row-gap:12px;align-items:flex-end}
.cm-pillars .pc{width:48px;padding:8px 0}
.cm-pillars .pc b{font-size:var(--fs-glyph);line-height:var(--lh-glyph);font-weight:700;letter-spacing:.02em}
.cm-who{flex:1 1 120px}
.cm-who b{font-size:var(--fs-list);font-weight:600}

/* 지난 이야기: 묶음 배경 하나 + 구분선(항목 상자 없음) · 제목 16/600 두 줄 · 대사 미리보기 14/400 한 줄 · 날짜 12 */
.cab-talks{gap:0;padding:4px 16px;border-radius:var(--r-card);background:var(--surface-1)}
#cab-talks .day-sec{gap:0}
#cab-talks .day-h{margin:0;padding:12px 0 0;font-size:var(--fs-caption);font-weight:500;color:var(--txt-2)}
.cab-talks .cab-talk{gap:4px;padding:12px 0;border-radius:0;background:none!important;border-bottom:1px solid var(--surface-line)!important}
.cab-talks .day-sec:last-child > .cab-talk:last-child{border-bottom:0!important}
.ct-gist{font-size:var(--fs-sub);font-weight:400;line-height:1.5}
.ct-foot .ct-at{font-size:var(--fs-caption)}
#cab-talks .cab-empty{padding:12px 0;background:none}

/* 찻잎: 잔액은 여기서 크게 · '받은 · 쓴' 한 줄 · 최근 내역 3개 · 안내는 (i) · 충전 준비 중은 작은 배지 */
.cab-h .info-i{flex:none;position:relative;display:grid;place-items:center;width:44px;height:44px;margin:-6px 0 -6px -6px;padding:0;background:none;border:0;color:var(--txt-2)}
.info-i i{display:grid;place-items:center;width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;font:600 12px/1 var(--ui);font-style:normal}
.info-i[aria-expanded=true]{color:var(--txt-1)}
.badge-soon{flex:none;margin-left:auto;padding:2px 10px;border-radius:var(--r-pill);background:var(--surface-1);color:var(--txt-2);font-size:var(--fs-caption);white-space:nowrap}
.cab-leaf-note{margin:-4px 0 12px;font-size:var(--fs-label);line-height:var(--lh-label);color:var(--txt-2)}
.leaf-sum{display:block;margin:0 0 12px}
.ls-main{display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:var(--r-card);background:var(--surface-2)}
.ls-l{font-size:var(--fs-label);color:var(--txt-2)}
.ls-bal{display:flex;align-items:baseline;gap:4px;font-size:var(--fs-display);font-weight:700;line-height:var(--lh-display);color:var(--txt-1);font-variant-numeric:tabular-nums}
.ls-bal small{font-size:var(--fs-label);font-weight:400;color:var(--txt-2)}
.ls-sub{font-size:var(--fs-label);color:var(--txt-2);font-variant-numeric:tabular-nums}
.lg-what{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-sub);font-weight:400;line-height:1.5}
.lg-what b{font-weight:400}
.lg-d{font-size:var(--fs-list);font-weight:700}
.lg-2{font-size:var(--fs-caption)}

/* 설정·계정 줄 라벨 하나로(13 · 500) */
.cab-sec .set-l,.cab-rows>*{font-size:var(--fs-label);font-weight:500}
.cab-rows .row-i{font-weight:400;color:var(--txt-2)}

/* '불러오는 중…' 대신 같은 높이의 자리 표시 */
.skel{display:block;border-radius:var(--r-card);background:linear-gradient(90deg,rgba(236,228,210,.05) 25%,rgba(236,228,210,.1) 50%,rgba(236,228,210,.05) 75%);background-size:200% 100%;animation:skel 1.4s ease-in-out infinite}
@keyframes skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){ .skel{animation:none} }
.skel-person{flex:0 0 120px;width:120px;height:88px}
.skel-chart{height:112px}
.skel-talk{height:64px;margin:8px 0}
.skel-bal{height:100px}
.skel-row{height:44px;margin:8px 0}

/* PC: 어두운 얇은 스크롤바 · 1024px 이상은 ①사람·차트 | ②지난 이야기 두 칸, ③은 아래에 두 칸 */
@media (hover:hover) and (pointer:fine){ .cabinet,.sheet,.rs-body{scrollbar-width:thin;scrollbar-color:rgba(236,228,210,.22) transparent} }
@media (min-width:1024px){
  #cab-main{max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start}
  #cab-main > .cab-top,#cab-main > .cab-head,#cab-main > .cab-g3,#cab-main > .cab-foot{grid-column:1 / -1}
  #cab-main > .cab-g1,#cab-main > .cab-g2{margin-top:40px}
  .cab-g1 .cab-people{margin:0;padding:2px 0 4px}
  .cab-g3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start}
  .cab-g3 > #cab-leaf-sec{grid-row:span 2}
  .cab-g3 > .cab-sec:nth-child(2){margin-top:0}
}
/* ═══ D-4 팝업·시트 공통 규격(DESIGN_SPEC 작업 4) ═══ */
:root{--sheet-pad-x:16px;--sheet-pad-b:24px;--sheet-head-h:56px;--sheet-gap:16px}
.sheet:not(.rec-sheet){padding:0 var(--sheet-pad-x) calc(var(--sheet-pad-b) + env(safe-area-inset-bottom))}
.rs-head{padding:0 var(--sheet-pad-x)}
.rs-body{padding:0 var(--sheet-pad-x) calc(var(--sheet-pad-b) + env(safe-area-inset-bottom))}
.sheet-head{min-height:var(--sheet-head-h);padding:8px 0;gap:8px}
.rs-head .sheet-head{min-height:48px;padding:0}
/* 닫기: 오른쪽 위 X 하나(44×44) — 모든 팝업·카드·영상 같은 모양 */
.x-btn,.vp-x{flex:none;position:relative;width:44px;height:44px;min-height:44px;margin:0 -10px 0 0;padding:0;border:0;border-radius:var(--r-card);background:none;color:var(--txt-2);cursor:pointer}
.x-btn::before,.x-btn::after,.vp-x::before,.vp-x::after{content:'';position:absolute;left:50%;top:50%;width:18px;height:1.6px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.x-btn::after,.vp-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.x-btn:hover,.x-btn:focus-visible,.vp-x:hover,.vp-x:focus-visible{color:var(--txt-1);background:var(--surface-2)}
.card-modal .card-top{justify-content:flex-end}
/* 부가 동작(차트·차트 이미지 저장·이어서 질문·크기 전환)은 제목 아래 보조 행동 줄 */
.sh-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 0 12px}
.sh-sub [hidden]{display:none!important}
#chart-sheet .tabs{top:var(--sheet-head-h)}
/* 주요 CTA: 맨 아래 꽉 찬 폭 · 보조와 나란히 둘 땐 1:2(취소|등록 · 공유|사진 저장) · 취소는 입력을 버리는 폼에만 */
.sheet-acts{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:var(--sheet-gap)}
.sheet-acts > .btn,.sheet-acts > .cta1{width:100%}
.sheet-acts > .text-btn{align-self:center}
.form-acts{gap:8px}.form-acts .cta2{flex:1}.form-acts .cta1{flex:2}
/* 입력 필드: 글자 16px · 높이 최소 44 */
.ps-form input:not([type=checkbox]):not([type=radio]),.ps-form select,.book input:not([type=radio]):not([type=checkbox]),.book select,.book .tf-txt,.vp-input,.ask-row textarea{min-height:44px;font-size:var(--fs-input)}
/* 카카오 로그인: 카카오 색(노랑·검정 85%)은 그대로, 크기·글자·모서리는 주요 CTA 규격 */
.kakao-btn{height:48px;border-radius:var(--r-card);font:600 var(--fs-btn)/var(--lh-btn) var(--ui)}

/* 기록 목록: '질문 · ' 접두어 없음(records.js) · 날짜는 제목 아래 메타 줄 · 펼치면 머리 제목 숨김(말풍선에 이미 있음)
   일반 기록은 테두리 대신 배경 명도와 여백으로 구분 */
.log details.round>summary .r-q,.rec-list details.round>summary .r-q{flex:1 1 100%}
.log details.round,.rec-list details.round{margin:0 0 8px;padding:0 12px;border-top:0;border-radius:var(--r-card);background:var(--surface-1)}
.log details.round:first-child,.rec-list details.round:first-child{border-top:0}
.log details.round[open] + details.round,.rec-list details.round[open] + details.round{border-top:0}
.log details.round>summary,.rec-list details.round>summary{padding:12px 0;gap:2px 8px}
.log details.round[open],.rec-list details.round[open]{margin:8px 0 32px;padding:0;background:none;border-radius:0}
details.round[open]>summary .r-q{display:none}
/* ═══ D-5 첫 화면(DESIGN_SPEC 작업 5) ═══ */
/* 자간: 넓은 자간은 마지막 글자 뒤에도 붙어 왼쪽으로 쏠려 보이므로 같은 값만큼 text-indent로 보정 */
#gate .kicker{font-size:var(--fs-caption);letter-spacing:.04em;text-indent:.04em;text-shadow:0 1px 6px #000}   /* 4-15 D1 자간 .12em → .04em(N4) */
h1 .kor{letter-spacing:4px;text-indent:4px;padding-left:0;text-shadow:0 1px 8px rgba(0,0,0,.8)}
#btn-open{font-size:var(--fs-list);font-weight:500;letter-spacing:2px;text-indent:2px;padding:13px 40px}
/* 배치: 로고 → 소개 → 문 열기 순서로 시선 · 모바일은 로고를 조금 내리고 링크 줄은 화면 바닥(안전 영역 포함)에 */
#gate{padding-top:16vh;padding-bottom:0}
@media (min-aspect-ratio:1/1){ #gate{padding-top:12vh} }
#gate .links{margin:12px 0 calc(12px + env(safe-area-inset-bottom))}
#gate .links .link{min-height:32px;display:inline-flex;align-items:center}
/* 로딩 문구는 고운바탕 */
#loader p{font-family:var(--serif);font-size:var(--fs-label)}
/* ═══ D-7 다실 화면(DESIGN_SPEC 작업 7) ═══ */
/* 인사말·지문: 한글 기울임 없이, 화면 위쪽 자막처럼 — 뒤에 은은한 어둠 그러데이션(창호지·인물과 겹쳐도 읽히게) */
.direction{font-style:normal;color:var(--txt-1);padding:10px 18px;border-radius:var(--r-card);background:radial-gradient(ellipse at center,rgba(7,8,20,.66) 0%,rgba(7,8,20,.42) 55%,rgba(7,8,20,0) 100%);text-shadow:0 1px 6px rgba(0,0,0,.85)}
.stage-dir{font-style:normal;color:var(--txt-2)}
/* 여쭙기: 입력 전·잠금은 보조 버튼 모양, 입력 후 금색 주요 CTA · 비용을 앞에(잎 5 여쭙기) */
#ask-btn{gap:6px;font-size:var(--fs-btn);font-weight:600;letter-spacing:0}
#ask-btn .ab-c::before{content:none}
#ask-btn:not(.ready),#ask-btn:disabled{opacity:1;background:rgba(236,228,210,.08);color:var(--txt-2)}
#ask-btn:not(.ready) .ab-c .ic,#ask-btn:disabled .ab-c .ic{color:#b7cf9c}
#ask-btn.ready{background:linear-gradient(var(--gold-a),var(--gold-b));color:#2b1d0c}
#ask-btn.ready .ab-c .ic{color:#2b4a1e}
@media (max-width:359px){ #ask-btn{flex-direction:row;padding:0 10px} }
/* PC: 상단 찻자리 이름·찻잎 배지를 입력부 폭(640) 안쪽으로 */
@media (min-width:1024px){ .top{padding-left:max(16px,calc((100% - 640px) / 2));padding-right:max(16px,calc((100% - 640px) / 2))} .seat-menu{left:max(12px,calc((100% - 640px) / 2))} }

/* ═══ 4단계 · 화면(FIX_PLAN 4-A~4-D) ═══ */
/* 4-1 WebGL을 못 쓰는 브라우저: 3D 방 대신 어두운 배경 + 안내, 3D가 필요한 분위기 동작은 숨김 */
.no3d-note{max-width:340px;margin:16px auto 0;padding:12px 16px;border-radius:var(--r-card);background:rgba(7,8,20,.72);color:var(--txt-1);font:400 var(--fs-label)/var(--lh-label) var(--ui)}
body.no3d{background:radial-gradient(120% 80% at 50% 30%,#1a1733,var(--night) 70%)}
body.no3d #world{display:none}
body.no3d #m-mood{display:none}
/* 4-4 불러오기 실패·끊긴 이야기: '기록 없음'과 다른 모양(안내 + 다시 불러오기) */
.load-fail{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px}
.load-fail .note{margin:0;color:var(--txt-1)}
details.round.cut>summary .r-cut{color:var(--txt-2)}
/* 4-12 화면 읽기 전용 · 터치 영역 44px(보이는 크기는 그대로, 누르는 범위만 위아래로 넓힘, UI-22) */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.seat-switch,.leaf-chip,#btn-login{position:relative}
.seat-switch::after,.leaf-chip::after,#btn-login::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* 4-14 로그인 팝업: 제목 20/700·27 → 이유 15/400·1.6 → 가입 혜택(면 강조 16/600) → 보조 혜택(목록 15/400, 테두리 없음) → 비용(13 보조색)
   → 카카오 버튼(48) → 개인정보(12, 보조색) → 보조 행동. 팝업 안만 스크롤(배경은 body가 이미 잠김) */
.login-sheet{max-height:min(86dvh,720px);overscroll-behavior:contain}
.login-sheet .sheet-head strong{font-size:var(--fs-title);font-weight:700;line-height:27px}
.login-sheet .login-reason{font:400 var(--fs-body)/1.6 var(--ui)!important;color:var(--txt-1);margin:0 0 16px!important}
.login-sheet .login-gift{margin:0 0 12px!important;padding:14px 16px;border-radius:var(--r-card);background:var(--surface-1);font:600 var(--fs-list)/1.5 var(--ui)!important;color:var(--txt-1)}
.login-sheet .login-perks{gap:4px;margin:0 0 12px;padding:0 4px}
.login-sheet .login-perks li{padding:2px 0 2px 16px;border:0;border-radius:0;background:none;font:400 var(--fs-body)/1.6 var(--ui);color:var(--txt-1)}
.login-sheet .login-perks li::before{content:'';left:2px;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--txt-2);-webkit-mask:none;mask:none}
.login-sheet .login-cost{margin:0 0 16px!important;padding:0 4px;font:400 var(--fs-label)/1.5 var(--ui)!important;color:var(--txt-2)}
.lnum{font-family:var(--ui);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.login-cost .lnum{font-weight:600;color:var(--txt-1)}
.login-sheet .kakao-btn{min-height:48px;height:auto;font:600 var(--fs-btn)/var(--lh-btn) var(--ui);margin:0 0 12px}
.login-sheet .login-privacy{margin:0 0 8px!important;text-align:left;font:400 var(--fs-caption)/1.5 var(--ui)!important;color:var(--txt-2)}
.login-sheet .login-privacy a{color:var(--txt-1);text-decoration:underline;white-space:nowrap}
.login-sheet .login-alt{display:flex;justify-content:center;margin:4px 0 0}
/* 4-15 A1 로고 四天茶室 = SVG 윤곽(Noto Serif KR Black, OFL) — 글자 크기(clamp)·금빛·은은한 번짐은 그대로, 자간(.12em)은 윤곽에 포함 */
h1 .hanja{letter-spacing:0;text-shadow:none;line-height:1}
/* 4-15 A2 말풍선 높이 고정: 하단 기준(translate -100%)이라 '다음' 표시가 나타날 때 말풍선이 위로 밀렸음 → 늘 자리를 차지하고 보이기만 바꿈 */
.bubble .b-next{display:block;visibility:hidden;opacity:0;transition:opacity .2s}
.bubble.wait .b-next{visibility:visible;opacity:1}
/* 4-15 A4 초대·정보 수정 폼 등록 버튼: '등록하고 풀이 듣기 · (잎)10' 한 줄 */
#ps-go{white-space:nowrap;min-width:0}
#ps-go .leafn{display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums}
/* 4-15 B1 말풍선 AI 표시: 이름과 같은 줄 오른쪽 끝, 테두리 없이 12px, 흐림은 opacity 대신 보조 글자색(대비 4.5:1 이상, UI-21) */
.bubble .b-head .ai-badge{margin-left:auto;padding:0;border:0;border-radius:0;font:500 var(--fs-caption)/1.2 var(--ui);letter-spacing:.02em;color:var(--paper-ink-2);opacity:1}
/* 4-15 B2 기록 시트 상단 한 줄: [차트/이어서 질문] ··· [최신순 ▾] [크기 전환] · 첫 기록까지 위쪽 여백 축소 */
.rs-tools{flex-wrap:nowrap;padding-bottom:8px}
.rs-tools .sh-sp{flex:1}
.rs-sort{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 6px;font-size:var(--fs-label);color:var(--txt-2);white-space:nowrap}
.rs-sort .ic{width:14px;height:14px}
.rs-tools .rs-fold{flex:none}
.rec-sheet .rs-body>.log,.rec-sheet .rs-body>.rec-list{margin-top:0;padding-top:0}
.rec-sheet .rs-meta{margin:0 0 8px;font-size:var(--fs-caption);color:var(--txt-2)}
.rec-sheet .day-sec:first-child .day-h{padding-top:0}
/* 4-15 B3 기록 항목: 펼침 화살표(›)를 제목과 같은 줄 왼쪽에 — 제목이 100% 폭이라 화살표만 윗줄에 혼자 남던 문제
   B4 펼친 기록의 '대화 접기'는 오른쪽 위 작은 텍스트 버튼(같은 줄 왼쪽엔 화살표·날짜) — 혼자 한 줄을 차지하지 않게 */
.log details.round>summary{display:grid;grid-template-columns:12px minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center}
.log details.round>summary::before{grid-column:1;grid-row:1}
.log details.round>summary>*{grid-column:2}
.log details.round>summary>.r-q{grid-row:1}
.log details.round>summary>.r-fold{grid-column:3;grid-row:1;justify-self:end;padding:4px 0 4px 8px;font:500 var(--fs-caption)/1.3 var(--ui);color:var(--txt-2)}
.log details.round[open]>summary>.r-meta{display:inline;grid-row:1}
/* 4-15 C1 차트 상세 명식 글자: 찻장 미리보기(28px) 이상 · 지지 십신('겁재·상관·정인')과 12운성은 따로 줄, '·' 뒤에서만 줄바꿈 */
.cv .pillars b{font-size:var(--fs-glyph);line-height:var(--lh-glyph);letter-spacing:.02em;font-weight:700;margin:2px 0}
.cv .pillars small{line-height:1.35;word-break:keep-all}
.cv .pillars .pl-tw{margin-top:1px}
/* 4-15 C2 대운: 화살표째 줄바꿈되던 한 줄 → 나이·간지 작은 칸 4열 격자(순서는 왼→오, 위→아래) */
.daeun{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.daeun span{display:flex;flex-direction:column;align-items:center;padding:4px 2px;border-radius:var(--r-chip);background:var(--surface-1)}
.daeun small{font-size:var(--fs-caption);color:var(--txt-2);font-variant-numeric:tabular-nums}
.daeun b{font:700 var(--fs-list)/1.3 var(--brand);color:var(--txt-1)}
/* 4-15 C3 폼 선택 상태(여/남·양력/음력): 금색 채움 대신 금색 테두리 + 금색 글자 — 금색 채움은 주요 CTA(저장·등록)만 */
.ps-form .seg input:checked+span{background:var(--surface-2);color:var(--gold-a);box-shadow:inset 0 0 0 1.5px var(--gold-b);font-weight:600}
/* 4-15 C4 체크박스('모름'·윤달·출생 정보 동의)를 사이트 톤으로 — 라벨 전체가 누르는 범위(44px), 키보드 포커스 링 유지 */
.chk,.leap-chk,.consent-chk{min-height:44px;cursor:pointer}
.chk input[type=checkbox],.leap-chk input[type=checkbox],.consent-chk input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;border-radius:5px;border:1.5px solid rgba(236,228,210,.45);background:var(--surface-1) center/14px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
.chk input[type=checkbox]:checked,.leap-chk input[type=checkbox]:checked,.consent-chk input[type=checkbox]:checked{border-color:var(--gold-b);background-color:var(--surface-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23f3d39a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.book .chk input[type=checkbox],.book .leap-chk input[type=checkbox]{border-color:#8d7752;background-color:transparent}
.book .chk input[type=checkbox]:checked,.book .leap-chk input[type=checkbox]:checked{border-color:#3b2c1a;background-color:#3b2c1a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23f1e8d4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.chk input[type=checkbox]:focus-visible,.leap-chk input[type=checkbox]:focus-visible,.consent-chk input[type=checkbox]:focus-visible{outline:2px solid var(--gold-a);outline-offset:2px}
.book .chk input[type=checkbox]:focus-visible,.book .leap-chk input[type=checkbox]:focus-visible{outline-color:#b8864a}
/* 4-15 C5 select 기본값(년·월·일)과 ::placeholder를 흐린 글자 토큰으로(기본 #757575 대신) — 어두운 폼 --txt-3, 종이 방명록 --paper-ink-2 */
.ps-form input::placeholder,.ps-form textarea::placeholder,.ask-row textarea::placeholder{color:var(--txt-3);opacity:1}
.book input::placeholder{color:var(--paper-ink-2);opacity:1}
.ps-form select:has(>option[value=""]:checked){color:var(--txt-3)}
.book select:has(>option[value=""]:checked){color:var(--paper-ink-2)}
.ps-form select option{color:var(--txt-1);background:var(--surface-1)}
/* 4-15 C6 찻잎 내역 '무엇' 줄은 보조 글자색(14/400 유지) */
.lg-what{color:var(--txt-2)}
/* 4-15 D2 추천 질문 칩: 입장 카메라 이동 중엔 숨겼다가 끝나면 부드럽게(오른쪽 끝 페이드는 기존 mask 그대로) */
#ask .chips,#ask .chips-head{transition:opacity .4s ease}
body.entering #ask .chips,body.entering #ask .chips-head{opacity:0;visibility:hidden}
/* 4-15 D5 PC 첫 화면 아래 링크 줄: 등롱 받침과 겹쳐 대비가 약함 → 링크 줄 뒤에 옅은 어둠 띠(가로로 퍼지는 그러데이션) */
@media (min-aspect-ratio:1/1){
  #gate .links{position:relative;padding:6px 20px;border-radius:var(--r-pill);background:radial-gradient(ellipse at center,rgba(7,8,20,.78) 0%,rgba(7,8,20,.6) 60%,rgba(7,8,20,0) 100%);text-shadow:0 1px 4px rgba(0,0,0,.9)}
  #gate .links .link{color:var(--txt-1)}
}
/* 5단계 지난 이야기 검색: 기록 시트 맨 위 검색창 · 결과(제목 · 날짜 · 화자 + 일치 대사 일부, 검색어는 금색 mark) · 결과로 이동한 대사 1.5초 강조 */
.rs-search{position:relative;display:flex;align-items:center;gap:6px;padding:0 0 10px}
.rs-field{position:relative;flex:1;min-width:0;display:flex}
.rs-search .rs-q{flex:1;min-width:0;min-height:44px;padding:0 40px 0 12px;border:1px solid rgba(236,228,210,.18);border-radius:var(--r-card);background:var(--surface-1);color:var(--txt-1);font:400 var(--fs-input)/1.3 var(--ui);-webkit-appearance:none;appearance:none}
.rs-search .rs-q::placeholder{color:var(--txt-3);opacity:1}
.rs-search .rs-q::-webkit-search-cancel-button{display:none}
.rs-search .rs-q:focus-visible{outline:2px solid var(--gold-a);outline-offset:1px}
.rs-x{position:absolute;right:0;top:0;width:44px;height:44px;border:0;background:none;color:var(--txt-2)}
.rs-x::before,.rs-x::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:1.6px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.rs-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.rs-back{flex:none;min-height:44px;padding:0 4px;font-size:var(--fs-label);color:var(--gold-a);white-space:nowrap}
.rec-sheet.searching .rs-body>:not(.rs-results){display:none!important}
.rec-sheet:not(.searching) .rs-results{display:none}
.rec-sheet .rs-body{padding-bottom:calc(var(--kb,0px) + var(--sheet-pad-b) + env(safe-area-inset-bottom))}   /* 키보드가 올라와도 결과 끝까지 올려 볼 수 있게 */
.rs-results{display:flex;flex-direction:column;gap:8px}
.sr-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:12px;border:0;border-radius:var(--r-card);background:var(--surface-1);color:var(--txt-1);text-align:left}
.sr-t{font:600 var(--fs-list)/var(--lh-list) var(--ui);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr-d{font-size:var(--fs-caption);color:var(--txt-2);font-variant-numeric:tabular-nums}
.sr-s{margin-top:4px;font:400 var(--fs-sub)/1.5 var(--dialog-font);color:var(--txt-2)}
.sr-who{font:600 var(--fs-label)/1.5 var(--ui);color:var(--txt-1);margin-right:2px}
.sr-s mark,.hit-mark{background:rgba(217,166,86,.32);color:var(--gold-a);border-radius:3px;padding:0 1px}
.sr-empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 4px}
.sr-empty .note{margin:0;color:var(--txt-1)}
.hit-flash{animation:hitflash 1.5s ease-out}
@keyframes hitflash{0%,40%{background:rgba(217,166,86,.28);box-shadow:0 0 0 6px rgba(217,166,86,.28);border-radius:8px}100%{background:transparent;box-shadow:0 0 0 6px rgba(217,166,86,0)}}
@media (prefers-reduced-motion:reduce){ .hit-flash{animation:none;outline:2px solid var(--gold-b);outline-offset:4px} }
h1 .hanja svg{display:block;height:1em;width:auto;margin:.18em auto .22em;overflow:visible;filter:drop-shadow(0 0 30px rgba(232,184,107,.45))}
/* 3-6 로그인 시트 만 14세 이상 확인(필수) — 체크박스 모양은 4-15 C4(.consent-chk, 라벨 전체 44px·포커스 링) 그대로, 위치만 카카오 버튼 바로 위 */
.login-sheet .login-age{margin:0 0 2px;font:400 var(--fs-label)/1.5 var(--ui)!important}
.login-sheet .login-age em{font-style:normal;color:var(--txt-2)}
.login-sheet .login-age-hint{margin:0 0 8px;min-height:1.5em;font:400 var(--fs-caption)/1.5 var(--ui);color:var(--txt-2)}
/* ── PLAY_AND_SHARE 1 다시 보기: 머리 줄(날짜 + 질문 제목 · 그만 보기) · 기록을 읽을 때 펼친 항목의 제목 줄이 위에 붙어 있음 ── */
.replay-bar{position:absolute;top:calc(56px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:3;width:min(calc(100% - 32px),640px);min-height:44px;display:flex;align-items:center;gap:8px;padding:0 4px 0 14px;border-radius:var(--r-card);background:rgba(14,15,34,.82);border:1px solid rgba(236,228,210,.12)}
.replay-bar.hidden{display:none}
.rb-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:4px 0}
.rb-date{font:400 var(--fs-caption)/var(--lh-caption) var(--ui);color:var(--txt-2);font-variant-numeric:tabular-nums}
.rb-title{font:600 var(--fs-label)/var(--lh-label) var(--ui);color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-stop{flex:none;min-width:44px;justify-content:center;color:var(--gold-a)}
body.replaying .bubble{top:calc(110px + env(safe-area-inset-top))}
body.replaying .hint,body.replaying .direction{top:calc(108px + env(safe-area-inset-top))}
body.in-cabinet .replay-bar{visibility:hidden}
.r-again{margin:0 0 12px}
.r-again .ic{color:var(--txt-2)}
.rec-sheet details.round[open] > summary{position:sticky;top:0;z-index:1;background:var(--surface-0)}
/* ── PLAY_AND_SHARE 2 이어서 질문(연결된 원래 질문 한 줄 + ✕) · 새로고침 뒤 '이어서 보기 / 처음부터 보기' ── */
.ask-link,.play-offer{display:flex;align-items:center;gap:6px;min-height:44px;margin:0 0 6px;padding:0 0 0 12px;border-radius:var(--r-card);background:rgba(14,15,34,.72);border:1px solid rgba(236,228,210,.1)}
.ask-link.hidden,.play-offer.hidden{display:none}
.al-l,.po-l{flex:none;font:500 var(--fs-caption)/var(--lh-caption) var(--ui);color:var(--txt-2)}
.al-q{flex:1;min-width:0;font:600 var(--fs-label)/var(--lh-label) var(--ui);color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.po-t{flex:1;min-width:0;display:flex;flex-direction:column;padding:4px 0}
.po-q{font:600 var(--fs-label)/var(--lh-label) var(--ui);color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play-offer .text-btn{flex:none;min-height:44px;color:var(--gold-a);white-space:nowrap}
.al-x{flex:none;position:relative;width:44px;height:44px;padding:0;border:0;background:none;color:var(--txt-2);cursor:pointer;border-radius:var(--r-card)}
.al-x::before,.al-x::after{content:'';position:absolute;left:50%;top:50%;width:13px;height:1.6px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.al-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.al-x:hover,.al-x:focus-visible{color:var(--txt-1)}
body.typing .play-offer{display:none}
@media (max-width:374px){ .po-l{display:none} .play-offer .text-btn{padding:0 2px} }
/* ── 3-1 '이 이야기 남기기' 한 줄(기록 안 .r-keep과 다실 입력창 위가 같은 모양): 카드 첫 장 40px + 13px 고딕 · 텍스트 버튼(13/500) · 금색 채움 없음 ── */
.r-keep{flex-wrap:nowrap;gap:6px}
.rk-th{flex:none;width:40px;height:40px;border-radius:var(--r-chip);overflow:hidden;display:grid;place-items:center;background:var(--surface-2);color:var(--txt-2)}
.rk-th img{display:block;width:100%;height:100%;object-fit:cover}
.r-keep .rk-l{font:400 var(--fs-label)/var(--lh-label) var(--ui);color:var(--txt-2);margin:0 auto 0 4px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-b{flex:none;min-height:44px;min-width:44px;justify-content:center;font:500 var(--fs-label)/1.3 var(--ui);color:var(--txt-1)}
.rk-dot{flex:none;color:var(--txt-3);font-size:var(--fs-label)}
.keep-line{margin:0 0 6px;transition:opacity .2s ease}
.keep-line.hidden{display:none}
.keep-line.out{opacity:0;pointer-events:none}
.keep-line .r-keep{margin:0;padding:0 2px 0 2px;border-top:0}
body.typing .keep-line{display:none}
@media (prefers-reduced-motion:reduce){ .keep-line{transition:none} }
/* ── 3-2 카드 공유 버튼 세 개: 카카오톡 공유(주요) · 다른 앱으로 · 사진 저장(보조) — 카카오 키가 없으면 '다른 앱으로'가 주요 ── */
.card-modal .card-actions #card-save{flex:1 1 0}
.card-modal .acts-card .cta1{flex:1.35 1 0}
.card-modal .acts-card .cta1.hidden{display:none}
.card-modal .acts-card button{min-width:0;padding:0 8px;white-space:nowrap}
@media (max-width:359px){ .card-modal .acts-card .cta1,.card-modal .acts-card .cta2{font-size:var(--fs-label)} }
/* ── 3-3 영상 완료: 공유하기(주요 · 한 줄 전체) → 영상 저장 · 다른 장면으로 · 닫기(보조) ── */
.video-modal .acts-done #video-share{flex:1 1 100%;min-height:48px;font-size:var(--fs-btn);font-weight:600}
/* ── 3-4 다실 소개하기 · 메뉴에서 '새 사람 초대'(사람 아이콘)와 '다실 소개하기'(문 아이콘) 구분 ── */
.sm-item b{display:inline-flex;align-items:center;gap:6px}
.sm-item b .ic{flex:none;color:var(--txt-2)}
.sm-item{min-height:44px}
.intro-line{margin:4px 0 16px;font:400 var(--fs-dialog)/var(--dialog-lh,1.7) var(--dialog-font);color:var(--txt-1)}
.intro-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.intro-acts .cta1,.intro-acts .cta2{flex:1 1 0;min-width:0;min-height:48px;font-size:var(--fs-body);white-space:nowrap}
.intro-acts .hidden{display:none}
.intro-acts .text-btn{flex:none;min-width:88px;justify-content:center}
.intro-note{margin:12px 0 0;font-size:var(--fs-caption);color:var(--txt-2)}
/* ═══ PLAY_AND_SHARE 4 찻장 '모두 보기' 검색·정렬 — 기록 시트 검색(.rs-search·.sr-item)을 그대로 쓰고 자리만 맞춤 ═══ */
/* 검색창 + 최신순·오래된순 한 줄 · 검색 중에는 목록·'모두 보기' 대신 결과 · 키보드가 올라오면 그만큼 아래 여백(--kb) */
.cab-tools .rs-search{padding:0 0 12px}
.cab-tools .rs-sort{flex:none}
#cab-talks-sec:not(.searching) .cab-results{display:none}
#cab-talks-sec.searching #cab-talks,#cab-talks-sec.searching #cab-alltalks{display:none!important}
.cab-results{margin-bottom:12px}
.cab-results .sr-empty{padding:12px 4px}
#cab-main{padding-bottom:calc(32px + var(--kb,0px) + env(safe-area-inset-bottom))}
/* ═══ PLAY_AND_SHARE 5 찻장 '나의 지난 이야기' 글자 위계 — 크기는 D-2 토큰 블록의 --fs-hist-*(글자 크기 설정이 작게·보통·크게로 바꿈) ═══ */
/* 섹션 제목 18/600(--fs-section) · 질문 제목 15/22→16/24 두 줄 · 미리보기 13/20→14/21 한 줄 · 날짜 12 · 열린 기록 본문 = 대화 본문(15/17)
   탐색 UI(제목·날짜)는 고딕, 대사(미리보기·본문)는 고른 대화 글꼴 · 행 전체 터치 44px 이상 */
.cab-talks .cab-talk{min-height:44px}
.cab-talks .cab-talk .ct-q,.cab-talks .cab-talk.intro .ct-q,.rec-list details.round:not([open])>summary .r-q,.sr-t{font:600 var(--fs-hist-title)/var(--lh-hist-title) var(--ui);letter-spacing:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.cab-talks .ct-gist{font:400 var(--fs-hist-prev)/var(--lh-hist-prev) var(--dialog-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;color:var(--txt-2)}
.sr-s{font:400 var(--fs-hist-prev)/var(--lh-hist-prev) var(--dialog-font);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}   /* 검색 결과는 일치 구절이 잘리지 않게 두 줄까지 */
.sr-who{font-size:var(--fs-hist-prev)}
.cab-talks .ct-foot .ct-at,#cab-talks .day-h,.rec-list .r-meta,.sr-d{font-size:var(--fs-hist-date)}
.rec-list .txt{font-size:var(--fs-dialog);line-height:var(--dialog-lh)}
.rec-list details.round>summary .r-q{font:600 var(--fs-hist-title)/var(--lh-hist-title) var(--ui)}   /* 펼친 기록의 제목 줄은 기존 규칙대로 숨김(:not([open])에만 두 줄 자르기) */
/* ═══ PLAY_AND_SHARE 7-1 태어난 시각 범위 밖 안내 — 빨간 표시(.tf-txt[aria-invalid]) 바로 아래에 고치는 방법 한 줄 ═══ */
/* 방명록(밝은 종이)은 기존 field-msg 색, 사람 시트(어두운 면)는 기존 .ps-form .err 색 · 글자는 라벨 13 */
.tf-msg{margin:4px 0 0;font:400 var(--fs-label)/var(--lh-label) var(--ui)}
.ps-form .tf-msg{color:#e08b7a}
.tf-txt[aria-invalid]{border-bottom-color:#c0614a!important;box-shadow:inset 0 -1px 0 #c0614a}
/* ── 카드 창 안 안내(저장·공유 결과) — 다실 안내 문구는 카드 창 뒤에 가려지므로 버튼 줄 바로 아래에 한 줄(라벨 13 · 보조 글자색) ── */
.card-modal .card-msg{margin:0;min-height:0;max-height:0;overflow:hidden;opacity:0;font:400 var(--fs-label)/1.5 var(--ui);color:var(--txt-2);text-align:center;transition:opacity .2s,max-height .2s}
.card-modal .card-msg.on{max-height:6em;opacity:1;margin:0 0 4px;color:var(--txt-1)}