:root{
  --bg:#08080c; --bg2:#0e0e15; --fg:#efedf5; --dim:#a29eb0;
  --line:rgba(255,255,255,.08); --card:rgba(255,255,255,.035);
  /* 🔴 회색이 너무 어두웠다. 소형 글자와 겹치면 중학생은 못 읽는다 (docs/11 P1) */
  --a1:#7c5cff; --a2:#ff5c8a; --a3:#4cc9f0; --r:18px; --r-s:12px;
  /* 🔴 주 색은 **평면**이다. 예전에는 버튼·탭·배지·막대·제목 28곳이 전부
     보라→분홍 그라디언트였다 — docs/16 이 「AI 쇠맛」의 1번으로 지목한 층이다.
     그라디언트는 의식에만 남긴다: 봉인·개봉·표지 자리표시자·종막 게이지.
     색상(hue)은 그대로 두었다 — 이건 재설계가 아니라 **표면을 가라앉히는** 일이다. */
  --pri:#6d5bd0;
  /* 🔴 예전에는 색 8개 + --r 이 전부였다. 간격·타입·모션 토큰이 0이라
     인라인 style 46곳 · font-size 리터럴 33종 · border-radius 5종이 한 화면에서 어긋났다. */
  --tap:44px;                     /* 손가락 최소 타겟 */
  --dur-fast:.14s; --dur:.24s;
  --faint:#7d7a8a;                /* 🔴 선언된 적 없는데 참조되고 있었다 (병렬 씬 안내문). 대비 4.6:1 */
  --serif:"Noto Serif KR","Nanum Myeongjo","Apple SD Gothic Neo",Batang,Georgia,serif;
  /* 🔴 네이티브 위젯(select 드롭다운, 달력, 스크롤바)을 다크로 그리게 한다.
     이게 없으면 select 목록이 흰 배경 + 흰 글씨가 되어 아무것도 안 보인다. */
  color-scheme: dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--fg); min-height:100vh; min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em;
}
/* 🔴 background-attachment:fixed 는 iOS 사파리가 문서 전체 크기로 잡고 스크롤마다 재합성한다.
   이 앱에서 가장 긴 스크롤이 소설 본문이다. 시각 결과는 같고 레이어 하나로 고정된다. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(50rem 36rem at 92% 4%, rgba(255,92,138,.13), transparent 60%),
    radial-gradient(44rem 30rem at 50% 108%, rgba(76,201,240,.10), transparent 60%)}
.skipnav{position:fixed;left:.7rem;top:.7rem;z-index:100;display:flex;gap:.4rem;pointer-events:none}
.skipnav a{position:absolute;left:-999rem;min-width:max-content;padding:.65rem .9rem;border-radius:10px;
  background:#fff;color:#08080c;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.skipnav a:focus{position:static;left:auto;pointer-events:auto;outline:3px solid var(--a3);outline-offset:2px}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
header{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.6rem;
  padding:.85rem clamp(1rem,4vw,2.5rem);
  background:rgba(8,8,12,.72); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.logo{font-weight:800;font-size:1.02rem;letter-spacing:-.03em;display:flex;align-items:center;gap:.5rem}
.logo i{width:1.45rem;height:1.45rem;border-radius:7px;display:block;
  background:var(--pri);box-shadow:0 0 18px rgba(124,92,255,.55)}
.spacer{flex:1}
.topnav{display:flex;align-items:center;gap:.6rem}
.who{font-size:.85rem;color:var(--dim)}
.who b{color:var(--fg);font-weight:600}
.chip{font-size:.66rem;font-weight:800;letter-spacing:.06em;padding:.2rem .45rem;border-radius:6px;
  background:var(--pri);color:#fff;margin-left:.4rem}
.ghost{font-size:.78rem;padding:.42rem .8rem;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--dim);transition:.18s;cursor:pointer}
.ghost:hover{color:var(--fg);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
main{padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2.5rem) 6rem;max-width:76rem;margin:0 auto;
  padding-left:max(clamp(1rem,4vw,2.5rem),env(safe-area-inset-left));
  padding-right:max(clamp(1rem,4vw,2.5rem),env(safe-area-inset-right))}
.hero{padding:clamp(2rem,7vw,4.5rem) 0 clamp(1.8rem,4vw,2.8rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.7rem;font-weight:700;
  letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-bottom:1rem}
.eyebrow s{width:1.6rem;height:1px;background:linear-gradient(90deg,var(--a1),transparent);display:block}
h1{font-size:clamp(2.1rem,6.5vw,3.6rem);font-weight:800;line-height:1.08;letter-spacing:-.045em}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--a1) 10%,var(--a2) 55%,var(--a3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--dim);margin-top:.9rem;font-size:clamp(.9rem,2.2vw,1.02rem);line-height:1.7;max-width:32rem}
.rowhead{display:flex;align-items:baseline;gap:.7rem;margin:2.2rem 0 1.1rem}
.rowhead h2{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.rowhead span{font-size:.78rem;color:var(--dim)}
.grid{display:grid;gap:clamp(.8rem,2vw,1.35rem);
  grid-template-columns:repeat(auto-fill,minmax(clamp(9rem,20vw,12.5rem),1fr))}
.work{display:block;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.work:hover{transform:translateY(-7px)}
.poster{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);isolation:isolate;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.poster::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.42) 68%,rgba(0,0,0,.88))}
.poster b{position:absolute;left:.85rem;right:.85rem;bottom:2.1rem;z-index:2;
  font-size:1.02rem;font-weight:800;letter-spacing:-.03em;line-height:1.25;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
.poster u{position:absolute;left:.85rem;right:.85rem;bottom:.95rem;z-index:2;text-decoration:none;
  font-size:.72rem;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{position:absolute;top:.7rem;left:.7rem;z-index:2;font-size:.62rem;font-weight:800;
  letter-spacing:.08em;padding:.26rem .5rem;border-radius:999px;
  background:rgba(0,0,0,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18)}
.badge.live{background:var(--pri);border-color:transparent}
.bar{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;background:rgba(255,255,255,.12)}
.bar i{display:block;height:100%;background:var(--pri)}
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:3.5rem 1.5rem;
  text-align:center;color:var(--dim);font-size:.9rem}
.reader{max-width:40rem;margin:0 auto}
.reader h1{font-size:clamp(1.7rem,5vw,2.5rem)}
.scene{margin:0 0 3.2rem}
.scene h3{font-size:.68rem;font-weight:800;letter-spacing:.2em;margin:0 0 1.2rem;
  background:var(--pri);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.scene p{font-family:var(--serif);font-size:1.02rem;line-height:2.05;
  color:#ddd9e6;margin:0 0 1.25rem;text-indent:1em;letter-spacing:0}
.scene p.q{text-indent:0;font-weight:700}
/* 🔴 문단 안에 섞인 대사도 강조한다. 「큰따옴표 안은 전부 사람이 쓴 것」이 이 앱의 약속이다 */
.scene .q{color:#fff;font-weight:600;font-style:normal}
.sep{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:3rem 0}
.auth{min-height:calc(100vh - 8rem);display:grid;place-items:center;padding:2rem 1rem 4rem}
.panel{width:100%;max-width:23rem;background:rgba(16,16,24,.72);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:24px;padding:2.1rem 1.7rem;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.panel h1{font-size:1.55rem;margin-bottom:.4rem}
.panel .sub{font-size:.9rem;margin:0 0 1.6rem}
label{display:block;font-size:.73rem;font-weight:600;color:var(--dim);margin:0 0 .35rem;letter-spacing:.02em}
input{width:100%;padding:.72rem .85rem;border-radius:12px;margin-bottom:.95rem;
  background:rgba(255,255,255,.045);border:1px solid var(--line);transition:.18s}
input:focus{outline:none;border-color:rgba(124,92,255,.7);background:rgba(124,92,255,.07)}
.btn{width:100%;padding:.8rem;border:0;border-radius:12px;cursor:pointer;font-weight:700;
  color:#fff;background:var(--pri);
  box-shadow:0 8px 24px rgba(124,92,255,.32);transition:.18s}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.alt{text-align:center;margin-top:1.2rem;font-size:.84rem;color:var(--dim)}
.alt a{color:var(--fg);font-weight:600;border-bottom:1px solid rgba(255,255,255,.25)}
.msg{padding:.7rem .85rem;border-radius:12px;font-size:.82rem;margin-bottom:1.1rem;line-height:1.55}
.msg.err{background:rgba(255,92,138,.12);border:1px solid rgba(255,92,138,.32);color:#ffb3c7}
.msg.ok{background:rgba(76,201,240,.1);border:1px solid rgba(76,201,240,.3);color:#a9e6fa}
/* 🔴 경고 색이 없어서 24시간 독촉이 파란 「알림」으로 나오고 있었다. err 와 ok 사이가 필요하다 */
.msg.warn{background:rgba(255,196,92,.12);border:1px solid rgba(255,196,92,.34);color:#ffd08a}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;font-size:.66rem;letter-spacing:.12em;color:var(--dim);font-weight:700;
  padding:0 .8rem .7rem;text-transform:uppercase}
td{padding:.85rem .8rem;border-top:1px solid var(--line);vertical-align:middle}
tr:hover td{background:rgba(255,255,255,.02)}
.st{font-size:.66rem;font-weight:800;padding:.22rem .5rem;border-radius:999px}
.st.pending{background:rgba(255,196,92,.14);color:#ffd08a;border:1px solid rgba(255,196,92,.3)}
.st.active{background:rgba(76,201,240,.13);color:#9fe0f5;border:1px solid rgba(76,201,240,.3)}
.st.rejected{background:rgba(255,92,138,.12);color:#ffa9c1;border:1px solid rgba(255,92,138,.3)}
.acts{display:flex;gap:.4rem;justify-content:flex-end}
.mini{font-size:.72rem;padding:.35rem .7rem;border-radius:8px;border:1px solid var(--line);
  background:var(--card);color:var(--dim);cursor:pointer;transition:.16s}
.mini:hover{color:var(--fg);border-color:rgba(255,255,255,.24)}
.mini.go{background:var(--pri);color:#fff;border-color:transparent}
.mini.no:hover{color:#ffa9c1;border-color:rgba(255,92,138,.4)}
footer{color:var(--dim);font-size:.72rem;text-align:center;padding:0 1rem 3rem;line-height:1.8}
.roster{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));margin-bottom:1.4rem}
.slot{border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;background:var(--card)}
.slot b{display:block;font-size:.95rem;font-weight:700}
.slot span{display:block;font-size:.74rem;color:var(--dim);margin-top:.15rem}
.slot.on{border-color:rgba(124,92,255,.5);background:rgba(124,92,255,.08)}
.slot.on span{color:#c9b8ff}
.job{border:1px solid var(--line);border-radius:16px;padding:1rem 1.15rem;background:rgba(124,92,255,.06);margin-bottom:1.4rem}
.jhead{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.6rem}
.jhead b{font-size:.9rem;font-weight:800}
.jhead span{font-size:.72rem;color:var(--dim)}
.jlog{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;color:var(--dim);line-height:1.85}
.panel.wide{max-width:none;background:rgba(16,16,24,.5)}
.decision{min-width:0;border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.15rem .15rem;
  margin:0 0 1.1rem;background:rgba(255,255,255,.018)}
.decision legend{padding:0 .45rem;font-size:.86rem;font-weight:800;color:var(--fg)}
.decision legend b{display:inline-grid;place-items:center;width:1.45rem;height:1.45rem;margin-right:.35rem;
  border-radius:50%;background:var(--pri);font-size:.7rem;color:#fff}
.decision>.who{margin:-.1rem 0 .9rem;line-height:1.6}
.quicknote{display:flex;align-items:flex-start;gap:.55rem;margin:0 0 1rem;padding:.7rem .8rem;
  border-radius:12px;background:rgba(76,201,240,.08);border:1px solid rgba(76,201,240,.22);
  color:#bdeafa;font-size:.8rem;line-height:1.55;word-break:keep-all}
.quicknote b{color:#fff;white-space:nowrap}
.sealreview{width:min(31rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;
  margin:auto;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:20px;
  color:var(--fg);background:#12121a;box-shadow:0 30px 90px rgba(0,0,0,.75)}
.sealreview::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.sealreview .reviewin{padding:1.25rem}
.sealreview h2{font-size:1.15rem;margin-bottom:.35rem}
.sealreview .reviewlead{font-size:.8rem;color:var(--dim);line-height:1.6;margin-bottom:1rem}
.sealreview dl{display:grid;grid-template-columns:5rem 1fr;gap:.55rem .75rem;margin:0 0 1.1rem;
  padding:.85rem;border-radius:14px;background:rgba(255,255,255,.035)}
.sealreview dt{font-size:.72rem;font-weight:800;color:var(--a3)}
.sealreview dd{font-size:.84rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.sealreview .reviewactions{display:grid;grid-template-columns:1fr 1.4fr;gap:.55rem}
.sealreview .reviewactions button{min-height:var(--tap);margin:0}
.sealreview .cancel{border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg);font-weight:700;cursor:pointer}
textarea,select{width:100%;padding:.72rem .85rem;border-radius:12px;margin-bottom:.95rem;
  background:rgba(255,255,255,.045);border:1px solid var(--line);transition:.18s;resize:vertical;
  font-family:inherit;line-height:1.6}
textarea:focus,select:focus{outline:none;border-color:rgba(124,92,255,.7);background:rgba(124,92,255,.07)}
label em{font-style:normal;font-weight:400;color:var(--dim);opacity:.95;margin-left:.35rem}
.btn.go{margin:0 0 1.6rem;background:linear-gradient(100deg,var(--a3),var(--a1))}
.rolls{display:grid;gap:.7rem;margin:0 0 1.6rem}
.roll{display:flex;align-items:center;gap:.9rem;border:1px solid var(--line);border-radius:14px;
  padding:.8rem 1rem;background:var(--card);transition:border-color .3s,background .3s}
.roll .who2{width:5.5rem;font-size:.85rem;font-weight:700;flex:none}
.roll .die{width:2.6rem;height:2.6rem;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  font-variant-numeric:tabular-nums;font-weight:800;font-size:1.05rem;transition:.25s}
.roll.rolling .die{background:var(--pri);border-color:transparent;
  color:#fff;animation:shake .12s infinite}
@keyframes shake{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
.roll.landed .die{background:rgba(255,255,255,.1);transform:scale(1.08)}
.roll .out{font-size:.8rem;color:var(--dim);font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .35s}
.roll.shown .out{opacity:1}
.roll .band{margin-left:auto;font-size:.78rem;font-weight:800;padding:.3rem .65rem;border-radius:999px;
  opacity:0;transform:translateX(6px);transition:.35s;white-space:nowrap}
.roll.done .band{opacity:1;transform:none}
.band.crit{background:var(--pri);color:#fff}
.band.ok{background:rgba(76,201,240,.16);color:#9fe0f5;border:1px solid rgba(76,201,240,.35)}
.band.cost{background:rgba(255,196,92,.16);color:#ffd08a;border:1px solid rgba(255,196,92,.35)}
.band.fail{background:rgba(255,255,255,.07);color:var(--dim);border:1px solid var(--line)}
.band.critfail{background:rgba(255,92,138,.18);color:#ffa9c1;border:1px solid rgba(255,92,138,.45)}
.roll.done{border-color:rgba(255,255,255,.16)}
.announce{font-size:.9rem;color:var(--dim);margin:0 0 .5rem;line-height:1.75;max-width:54rem}
.table-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem;margin:1rem 0}
.table-actions .say{margin:0}.table-risk p{margin:.65rem 0;line-height:1.7}
/* 무엇으로 굴렸는지 — 선언한 접근이 결과 옆에 남는다 */
.tag.by{background:rgba(76,201,240,.14);border-color:rgba(76,201,240,.35);color:#9fe0f5;font-weight:700}
.tag.luck{background:linear-gradient(100deg,rgba(124,92,255,.3),rgba(255,92,138,.24));
  border-color:rgba(124,92,255,.5);color:#e6ddff;font-weight:800}
.roll.luck{border-color:rgba(124,92,255,.4);
  background:linear-gradient(140deg,rgba(124,92,255,.09),rgba(255,92,138,.05))}
/* 초대 링크 — 폰에서 길게 눌러 복사할 수 있어야 한다. 잘리면 못 쓴다 */
/* 초대장 — 이 서비스를 처음 보는 사람이 만나는 유일한 설명 화면 */
.invcard{border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.15rem;margin:0 0 1.2rem;
  background:linear-gradient(140deg,rgba(124,92,255,.16),rgba(255,92,138,.1))}
.invcard .eyebrow{margin-bottom:.55rem}
.invcard b{display:block;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.45rem}
.invcard p{font-size:.85rem;line-height:1.7;color:#cfc9d8;margin-bottom:.55rem}
.invcard u{text-decoration:none;font-size:.74rem;color:var(--a3);font-weight:700}
/* 완결된 책 */
.bookcover{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-bottom:1.4rem;
  box-shadow:0 22px 60px rgba(0,0,0,.55);max-width:22rem}
.bookcover img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.byline{font-size:.84rem;color:#cfc9d8;margin-top:.7rem;letter-spacing:.01em}
.donestats{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem}
.donestats span{font-size:.76rem;color:var(--dim);border:1px solid var(--line);border-radius:999px;
  padding:.3rem .7rem;background:var(--card)}
.donestats b{color:var(--fg);font-weight:800;margin-right:.25rem}
.toc{display:grid;gap:.3rem}
.toc a{display:flex;gap:.7rem;padding:.45rem .6rem;border-radius:10px;font-size:.82rem}
.toc a:hover{background:rgba(255,255,255,.04)}
.toc b{flex:none;width:2.6rem;color:var(--a3);font-weight:700}
.toc span{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ol.howto{margin:0 0 .8rem 1.1rem;display:grid;gap:.5rem}
ol.howto li{font-size:.92rem;line-height:1.75;color:#cfc9d8}
ol.howto b{color:var(--fg)}
ol.howto u{text-decoration:none;color:var(--a3)}
.pushnote{display:flex;align-items:center;gap:.9rem;border:1px solid rgba(76,201,240,.35);
  background:rgba(76,201,240,.08);border-radius:16px;padding:.85rem 1rem;margin:0 0 1.4rem}
.pushnote div{flex:1;min-width:0}
.pushnote b{display:block;font-size:.88rem;font-weight:800;margin-bottom:.15rem}
.pushnote span{display:block;font-size:.78rem;color:var(--dim);line-height:1.5}
.pushnote button{flex:none}
/* 🔴 「나중에」로 접어도 완전히 지우지 않는다 — 한 줄 칩으로 같은 자리에 남긴다 */
.pushnote .pchip{display:none}
.pushnote.folded{display:block;border:0;background:none;padding:0;margin:0 0 1rem}
.pushnote.folded>div,.pushnote.folded [data-pushbtn],.pushnote.folded [data-pushlater]{display:none}
.pushnote.folded .pchip{display:inline-flex;align-items:center;
  border-color:rgba(76,201,240,.35);background:rgba(76,201,240,.08);border-radius:999px}
/* 🔴 .pushnote 의 display:flex 가 브라우저 기본 [hidden]{display:none} 을 이겨버려서,
   서버가 붙인 hidden 도 push.js 의 note.hidden = true 도 실제로는 아무 일도 안 했다 —
   이미 알림을 켠 기기에도 배너가 계속 떴다. 접힘 규칙보다 **뒤에** 둬야 둘 다 이긴다. */
.pushnote[hidden]{display:none}
.castgrid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr))}
.castcard{text-align:center}
.castcard img,.castcard .ph{width:100%;aspect-ratio:1/1;border-radius:14px;object-fit:cover;object-position:center top;
  display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.05);
  font-size:1.4rem;font-weight:800;color:var(--dim);margin-bottom:.4rem}
.castcard b{display:block;font-size:.85rem;font-weight:700}
.castcard span{display:block;font-size:.72rem;color:var(--dim);line-height:1.4;margin-top:.1rem}
.share{border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;margin:2.5rem 0 0;background:var(--card)}
.share b{display:block;font-size:.78rem;color:var(--dim);font-weight:700;margin-bottom:.35rem}
.share code{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84rem;
  word-break:break-all;user-select:all;color:var(--a3)}
/* 관전자가 책을 다 읽은 자리. 「나도 하고 싶다」를 받아 주는 유일한 문이다. */
.joinpitch{border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.2rem;
  margin:2.5rem 0 0;background:var(--card);text-align:center}
.joinpitch b{display:block;font-family:var(--serif);font-size:1.05rem;color:#fff;margin-bottom:.5rem}
.joinpitch p{margin:0;font-size:.9rem;color:var(--dim)}
.joinpitch .cta,.joinpitch .ghost{display:inline-block;padding:.7rem 1.2rem;margin:0 .2rem}
p.mineline{font-family:var(--serif);font-size:1.02rem;line-height:1.9;color:#fff;
  font-weight:600;padding:.55rem .9rem;border-left:2px solid var(--a1);margin:0 0 .5rem;
  background:rgba(124,92,255,.06);border-radius:0 10px 10px 0}
.dstats{display:grid;gap:.5rem;margin:0 0 2rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
.dstat{border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;background:var(--card)}
.dstat b{display:block;font-size:.9rem;font-weight:800;margin-bottom:.25rem}
.dstat span{display:block;font-size:.75rem;color:var(--dim);line-height:1.7}
.dstat i{font-style:normal;color:var(--a3);font-weight:700;font-variant-numeric:tabular-nums}
/* 병렬 씬 — 다른 줄기는 인원과 진행만 보인다 */
.branches{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));margin:0 0 1.2rem}
.branch{border:1px dashed var(--line);border-radius:12px;padding:.6rem .8rem;background:rgba(255,255,255,.015)}
.branch b{display:block;font-size:.82rem;font-weight:700;color:var(--dim)}
.branch span{display:block;font-size:.72rem;color:var(--faint,#6b6878);margin-top:.15rem}
.setup b i{font-style:normal;font-weight:400;color:var(--dim);margin-left:.4rem;font-size:.9em}
/* 마스터의 육성 — scene 만 소설 서체, 나머지는 산세리프 (docs/08 6.2) */
.setup b.sub{margin:1rem 0 .45rem;font-size:.62rem;opacity:.75}
.setup ul{list-style:none;padding:0;margin:0 0 .55rem;font-family:inherit;font-size:.92rem;line-height:1.7}
.setup li{padding-left:.9rem;text-indent:-.9rem;margin-bottom:.4rem;word-break:keep-all}
.setup li:before{content:"· ";color:var(--a3)}
.setup .free{font-family:inherit;font-size:.78rem;opacity:.65;line-height:1.55;margin:0}
.setup .idle{font-family:inherit;font-size:.86rem;opacity:.8;line-height:1.65;word-break:keep-all;
  border-top:1px dashed rgba(124,92,255,.25);padding-top:.6rem;margin-top:.7rem}
.setup .idle i{font-style:normal;font-weight:700;color:var(--a2);font-variant-numeric:tabular-nums}
/* 마스터가 읽은 결 — 고르는 것이 아니라 확인하는 것이므로 입력처럼 보이지 않게 한다 */
.toneread{border:1px solid rgba(76,201,240,.3);background:rgba(76,201,240,.07);border-radius:16px;
  padding:.9rem 1.1rem;margin:0 0 1rem}
.toneread b{display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;color:var(--a3);margin-bottom:.35rem}
.toneread i{display:block;font-style:normal;font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.toneread span{display:block;font-size:.83rem;color:var(--dim);line-height:1.6;margin-top:.3rem}
.tonebar{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--dim);margin:0 0 .8rem;flex-wrap:wrap}
.tonebar b{font-weight:700;color:var(--fg)}
.tonebar em{font-style:normal;color:var(--a2)}
.invites{display:grid;gap:.5rem;margin-bottom:1.4rem}
.inv{border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;background:var(--card)}
.inv b{display:block;font-size:.72rem;color:var(--dim);font-weight:700;margin-bottom:.3rem}
.inv code{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;
  word-break:break-all;user-select:all;color:var(--a3)}
/* 대립 판정 — 두 굴림을 한 묶음으로 세운다 */
.duel{border:1px solid rgba(124,92,255,.35);border-radius:16px;padding:.6rem;background:rgba(124,92,255,.05);
  display:grid;gap:.5rem}
.duel .roll{background:rgba(255,255,255,.03)}
.band.win{background:linear-gradient(100deg,var(--a3),var(--a1));color:#fff}
.band.lose{background:rgba(255,255,255,.06);color:var(--dim);border:1px solid var(--line)}
/* skip·collision·자동진행 — 굴리지 않은 대신 확실히 얻는 것. 자르지 않는다 */
.note{display:flex;gap:.9rem;align-items:flex-start;border:1px solid var(--line);border-radius:14px;
  padding:.85rem 1rem;background:var(--card)}
.note b{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;margin-bottom:.3rem}
.note .band{opacity:1;transform:none;font-size:.68rem;padding:.18rem .5rem}
.note p{font-size:.85rem;line-height:1.75;color:#cfc9d8}
.portrait{width:2.4rem;height:2.4rem;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line);background:rgba(255,255,255,.05)}
.slot{display:flex;align-items:center;gap:.7rem}
.pface{width:2.6rem;height:2.6rem;border-radius:10px;object-fit:cover;object-position:top;flex:none;
  background:rgba(255,255,255,.06);border:1px solid var(--line);display:grid;place-items:center;
  font-weight:800;font-size:.9rem;color:var(--dim)}
.locband{position:relative;height:8.5rem;border-radius:var(--r);overflow:hidden;margin:0 0 1.4rem;
  border:1px solid var(--line);background:linear-gradient(135deg,#1a2a3a,#2b1055)}
.locband img{width:100%;height:100%;object-fit:cover;display:block}
.locband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(8,8,12,.9))}
.locband span{position:absolute;left:1rem;bottom:.8rem;z-index:2;font-size:.8rem;font-weight:700;
  letter-spacing:.02em;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.locband.night img{filter:brightness(.5) saturate(.7) hue-rotate(-15deg)}
.locband.dawn img{filter:brightness(.75) saturate(.85) sepia(.15)}
.locband.dusk img{filter:brightness(.8) saturate(1.15) sepia(.25)}
.locband.morning img{filter:brightness(1.05) saturate(.95)}
.myturn{position:absolute;top:.7rem;right:.7rem;z-index:3;font-size:.62rem;font-weight:800;
  letter-spacing:.06em;padding:.26rem .5rem;border-radius:999px;
  background:linear-gradient(135deg,var(--a3),var(--a1));color:#fff;box-shadow:0 0 14px rgba(76,201,240,.5)}
.pick{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 1rem;margin-bottom:.6rem;
  border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;transition:.18s}
.pick:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.pick input{width:auto;margin:.2rem 0 0;flex:none;accent-color:var(--a1)}
.pick span{display:block;font-size:.84rem;color:var(--dim);line-height:1.6}
.pick b{display:block;color:var(--fg);font-size:.95rem;font-weight:700;margin-bottom:.15rem}
.pick:has(input:checked){border-color:rgba(124,92,255,.55);background:rgba(124,92,255,.09)}
/* 🎯 접근 선언 — 플레이어가 내리는 유일한 숫자 결정. 크고 만지기 쉬워야 한다 */
/* 🔴 375px 폰에서 패널 안쪽 폭이 287px 다. 9.5rem(152px) 이면 1열이 되어
   스탯 5개 + 행운이 세로로 6칸을 먹었다. 8rem 으로 내려 2열을 만든다 (실측). */
/* 당신이 가진 것 — 기존 .tag 재사용. 신규 CSS 는 컨테이너 한 줄뿐 */
.hands{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 1rem}
/* 🎙 서술자 — 행동 칸 바로 위의 인물 브리핑. VN 박스(장면)와 구분되는 청록 톤 */
.narrator{border:1px solid rgba(76,201,240,.28);border-radius:var(--r-s);padding:.95rem 1.05rem;
  margin-bottom:1.2rem;background:rgba(76,201,240,.05)}
.narrator>b{display:block;font-size:.66rem;font-weight:800;letter-spacing:.22em;color:var(--a3);
  margin-bottom:.45rem}
.narrator p{font-size:.9rem;line-height:1.7;margin:0 0 .45rem;word-break:keep-all}
.mmstrip{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .45rem;font-size:.78rem;
  color:var(--dim);margin:.55rem 0 .8rem;line-height:1.9}
.mmchip{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.1rem .6rem;white-space:nowrap}
.mmchip.on{border-color:rgba(76,201,240,.55);color:#dff3ff;font-weight:600}
.mmchip.me{box-shadow:0 0 0 1px rgba(76,201,240,.35)}
.mmchip i{font-style:normal;opacity:.85}
.mmsep{opacity:.35;font-style:normal}
.mmtime{margin-left:auto;opacity:.7}
.fchips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0 0}
.fchip{font-size:.72rem;border:1px solid rgba(255,193,7,.35);border-radius:999px;
  padding:.12rem .6rem;color:#ffe6a6;white-space:normal;word-break:keep-all}
.fchip.done{border-color:rgba(129,199,132,.45);color:#c9ecc9}
.narrator p b{color:var(--fg)}
/* 🧭 길잡이 칩 — 누르면 행동 칸에 채워지는 시작점. 버튼처럼 보이되 정답처럼 보이면 안 된다 */
.gchips{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;margin:.55rem 0 .1rem}
.gchips>span{font-size:.72rem}
.gchip{display:block;width:100%;text-align:left;font-size:.84rem;line-height:1.55;cursor:pointer;
  border:1px dashed rgba(76,201,240,.4);border-radius:10px;padding:.5rem .7rem;
  background:rgba(76,201,240,.04);color:var(--fg);word-break:keep-all;transition:.15s}
.gchip:hover{border-style:solid;background:rgba(76,201,240,.1)}
.narrator p.hint i{font-style:normal;color:#9fe0f5}
.narrator .secret{margin:.3rem 0 .55rem}
.narrator .hands{margin-bottom:.1rem}
/* 필수와 선택의 경계선 — 여기까지만 채워도 제출된다는 것이 보여야 한다 */
.optline{display:flex;align-items:center;gap:.6rem;margin:.4rem 0 1rem;
  font-size:.66rem;letter-spacing:.14em;color:var(--dim);opacity:.6}
.optline:before,.optline:after{content:"";flex:1;height:1px;background:var(--line)}
.recap{list-style:none;padding:0;margin:.6rem 0 0;font-size:.82rem;line-height:1.6;color:var(--dim)}
.recap li{padding-left:.9rem;text-indent:-.9rem;margin-bottom:.25rem;word-break:keep-all}
.recap li:before{content:"· ";color:var(--a3)}
.approach{display:grid;gap:.5rem;margin:0 0 .95rem;
  grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
.ap{position:relative;display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:.1rem .5rem;min-height:3.4rem;padding:.6rem .8rem;cursor:pointer;margin:0;
  border:1px solid var(--line);border-radius:14px;background:var(--card);transition:.16s}
.ap:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
/* 라디오는 접근성을 위해 남기되 화면에서만 감춘다 — 카드 전체가 타겟이다 */
.ap input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ap b{font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:var(--fg)}
.ap i{font-style:normal;font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--dim)}
.ap span{grid-column:1/-1;font-size:.72rem;line-height:1.45;color:var(--dim);margin-top:.15rem}
/* 🔴 유일한 숫자 결정 옆에 확률을 붙인다 — 시트(.stat .odds)와 같은 계산이다 */
.ap .odds{font-size:.7rem;font-weight:700;color:var(--a3);font-variant-numeric:tabular-nums;margin-top:.1rem}
.ap.hi{border-color:rgba(76,201,240,.4)}
.ap.hi i{color:#9fe0f5}
.ap.lo i{color:#ffa9c1}
/* 🔴 행운의 보라-분홍 그라디언트는 「탁자 문법」의 놋쇠 칩으로 대체됐다.
      실제 모양은 아래 .ap.luck 블록에서 정한다 (docs/16 1단계). */
.ap:has(input:checked){border-color:rgba(124,92,255,.75);background:rgba(124,92,255,.14);
  box-shadow:0 0 0 1px rgba(124,92,255,.35),0 6px 20px rgba(124,92,255,.18)}
.ap:has(input:checked) span{color:#c9b8ff}
/* 🔴 포커스 링을 지우지 않는다. 라디오를 감췄으므로 키보드 사용자는 이것만 보고 움직인다 */
.ap:has(input:focus-visible){outline:2px solid var(--a3);outline-offset:2px}
.ap.off{opacity:.42;cursor:not-allowed}
.ap.off:hover{border-color:var(--line);background:var(--card)}
/* ══════════ 상단 상태 스트립 (docs/07 1단계) ══════════ */
/* 🔴 매일 3분 여는 앱이다. 「내가 냈나 · 몇 명이 냈나 · 마감이 언제인가」가 스크롤 없이 보여야 한다 */
.turnbar{border:1px solid var(--line);border-radius:14px;padding:.7rem .8rem;
  background:rgba(255,255,255,.03);margin:0 0 .8rem}
.tb-top{display:flex;align-items:center;gap:.7rem;font-size:.78rem}
.tb-top b{font-weight:800;white-space:nowrap}
.tb-top>span:last-child{margin-left:auto;color:var(--dim);white-space:nowrap}
.dots{display:flex;gap:.3rem;align-items:center}
.dots i{width:.5rem;height:.5rem;border-radius:50%;background:rgba(255,255,255,.15);display:block}
.dots i.on{background:var(--pri)}
.dots i.late{background:none;box-shadow:inset 0 0 0 1px var(--a2)}
/* 루프 3단을 상태로 만든다 — 대화를 건너뛰면 그 씬에 사람이 쓴 대사가 하나도 안 남는다 */
.phases{display:flex;gap:.35rem;margin-top:.6rem}
.phase{flex:1;text-align:center;font-size:.7rem;padding:.4rem .3rem;border-radius:9px;
  border:1px solid var(--line);color:var(--dim);line-height:1.35;min-height:44px;
  display:flex;flex-direction:column;justify-content:center;transition:.16s}
.phase u{display:block;text-decoration:none;font-size:.66rem;opacity:.8;margin-top:.1rem}
.phase.on{color:var(--fg);border-color:rgba(124,92,255,.55);background:rgba(124,92,255,.1)}
.phase.done{color:var(--a3);opacity:.75}
.phase:active{transform:scale(.98)}
/* 다음 이벤트 하나. 여러 개를 늘어놓지 않는다 */
.clock{display:flex;align-items:baseline;gap:.6rem;border:1px solid var(--line);
  border-left:3px solid var(--a3);border-radius:12px;padding:.6rem .9rem;
  margin:0 0 1.1rem;background:var(--card);flex-wrap:wrap}
.clock b{font-size:.78rem;font-weight:800;color:var(--dim);letter-spacing:.04em}
.clock i{font-style:normal;font-size:1.15rem;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* 🔴 경고문이 오른쪽 구석 10px 글씨였다 — 시계에서 제일 중요한 문장인데 (docs/11 P3) */
.clock span{font-size:.8rem;color:var(--dim);flex-basis:100%;margin-top:.15rem}
.clock.reveal{border-left-color:var(--a1)}
.clock.urgent{border-left-color:var(--a2)}
.clock.urgent i{color:#ffb3c7}
/* 3막 게이지 — 막이 넘어가면 사망 허용·비밀 보정·복선 규칙이 조용히 바뀐다 */
.actgauge{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;height:4px;margin:.8rem 0 .2rem}
.actgauge i{background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;display:block}
.actgauge i.on{background:var(--pri)}
.actgauge u{display:block;height:100%;background:var(--pri)}
.actgauge.finale i:last-child{box-shadow:0 0 10px rgba(255,92,138,.6)}
/* 🔴 앵커가 sticky 헤더 밑에 깔린다. 헤더는 약 3.2rem */
:root{scroll-behavior:smooth}
[id]{scroll-margin-top:4.2rem}
.says{display:grid;gap:.5rem;margin-bottom:1.2rem}
.say{border:1px solid var(--line);border-radius:14px;padding:.7rem 1rem;background:var(--card)}
.say b{display:block;font-size:.72rem;color:var(--dim);font-weight:700;letter-spacing:.04em;margin-bottom:.25rem}
.say p{font-family:var(--serif);font-size:.95rem;line-height:1.7;color:#fff;font-weight:600}
.say.me{border-color:rgba(124,92,255,.4);background:rgba(124,92,255,.08)}
/* 🔴 폰에서 줄바꿈 대신 가로 스크롤. 탭이 두 줄로 접히면 「탭」으로 안 읽힌다 */
.ctabs{display:flex;gap:.4rem;flex-wrap:nowrap;margin-bottom:.6rem;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ctabs::-webkit-scrollbar{display:none}
.ctab{white-space:nowrap;flex:none}
.ctab u{text-decoration:none;margin-left:.35rem;background:var(--a2);color:#fff;
  border-radius:999px;padding:0 .35rem;font-size:.66rem;font-weight:800}
.fold .peek{display:block;font-weight:400;color:var(--dim);font-size:.76rem;margin-top:.2rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 🔴 펼치면 바로 아래에 본문 첫 문단이 온다 — 미리보기와 글자 그대로 중복이었다 */
.fold[open]>summary .peek{display:none}
.ctab{font-size:.74rem;padding:.32rem .7rem;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--dim);transition:.16s}
.ctab:hover{color:var(--fg)}
.ctab.on{background:var(--pri);color:#fff;border-color:transparent}
.clog{border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;background:rgba(255,255,255,.02);
  max-height:16rem;overflow-y:auto;display:grid;gap:.5rem}
.cmsg b{font-size:.72rem;color:var(--a3);font-weight:700;margin-right:.5rem}
.cmsg span{font-size:.85rem;line-height:1.6}
.asks{display:grid;gap:.7rem;margin-bottom:1.2rem}
.ask{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.ask .q{padding:.7rem 1rem;background:rgba(255,255,255,.03);font-size:.86rem;line-height:1.6}
.ask .a{padding:.8rem 1rem;font-size:.88rem;line-height:1.75;position:relative}
.ask b{display:block;font-size:.7rem;color:var(--dim);font-weight:700;letter-spacing:.04em;margin-bottom:.25rem}
.ask .a b{color:var(--a3)}
.kind{position:absolute;top:.7rem;right:.9rem;font-size:.62rem;font-weight:800;padding:.18rem .45rem;
  border-radius:999px;background:rgba(255,255,255,.06);color:var(--dim);border:1px solid var(--line)}
/* 로스터 3단 트랙 — 대화 ready / 제출 */
.slot .track{display:flex;gap:.2rem;margin-top:.35rem}
.slot .track i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.12);display:block}
.slot .track i.on{background:var(--pri)}
.slot .acct{display:block;font-style:normal;font-size:.66rem;font-weight:400;
  color:var(--dim);margin-top:.1rem}
.slot .spec{display:inline-block;font-size:.64rem;font-weight:800;color:#9fe0f5;
  border:1px solid rgba(76,201,240,.3);border-radius:6px;padding:.06rem .3rem;margin-top:.25rem}
.slot .chip{font-size:.58rem;padding:.1rem .3rem;margin-left:.3rem;vertical-align:middle}
.slot.gone{opacity:.45;border-style:dashed}
/* 🔒 봉인한 뒤 내가 뭘 냈는지 되돌려준다. 봉인은 남에게만 걸린다 (P2) */
.sealed{border:1px solid rgba(124,92,255,.4);background:rgba(124,92,255,.07);
  border-radius:16px;padding:1rem 1.15rem;margin:0 0 1.4rem}
.sealed>b{display:block;font-size:.8rem;font-weight:800;color:var(--a3);margin-bottom:.6rem}
.sealed>b em{font-style:normal;font-weight:400;color:var(--dim);margin-left:.4rem}
.sealed .q{font-family:var(--serif);color:#fff;font-weight:600}
.sealed .foot{font-size:.76rem;color:var(--dim);margin-top:.7rem;line-height:1.6}
.sealed .foot u{text-decoration:none;color:var(--fg);font-weight:600}
/* 상태 어휘 — 「빈 목록」과 「내가 방금 성공한 행동」과 「규칙에 잠김」을 가른다 */
.state{border:1px solid var(--line);border-left:3px solid var(--a1);border-radius:14px;max-width:54rem;
  padding:.95rem 1.15rem;font-size:.85rem;color:#cfc9d8;line-height:1.6;margin:0 0 1.4rem}
.state b{color:#fff;font-weight:700}
.state.lock{border-left-color:var(--dim);color:var(--dim)}
.slot.late{border-color:rgba(255,92,138,.4);background:rgba(255,92,138,.07)}
.strike{display:inline-block;margin-left:.35rem;font-size:.6rem;font-weight:800;padding:.1rem .35rem;
  border-radius:999px;background:rgba(255,92,138,.2);color:#ffa9c1;vertical-align:middle}
.lscene{margin:0 0 2.2rem}
.lscene h3{font-size:.72rem;font-weight:800;letter-spacing:.2em;margin:0 0 .8rem;
  background:var(--pri);-webkit-background-clip:text;background-clip:text;color:transparent}
.lscene h4{font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--dim);margin:1rem 0 .4rem}
.lrow{display:flex;gap:.8rem;padding:.45rem .8rem;border-radius:10px;background:rgba(255,255,255,.02);
  margin-bottom:.3rem;font-size:.82rem;line-height:1.65}
.lrow b{flex:none;width:5.5rem;font-weight:700;color:var(--dim);font-size:.75rem;padding-top:.1rem}
.lrow span{flex:1;color:#cfc9d8}
.lrow i{font-style:normal;color:#fff;font-weight:600}
.lrow u{text-decoration:none;color:var(--a3);font-size:.78rem}
.lrow em{font-style:normal;color:var(--a2);font-weight:700}
.rels{display:grid;gap:.5rem;margin-bottom:1.4rem}
.rel{display:flex;gap:.8rem;padding:.7rem 1rem;border:1px solid var(--line);border-radius:12px;
  background:var(--card);font-size:.85rem;line-height:1.6}
.rel b{flex:none;width:5rem;font-weight:700;color:var(--a3);font-size:.8rem}
.rel span{flex:1;color:#cfc9d8}
.illust{width:100%;border-radius:var(--r);border:1px solid var(--line);margin-bottom:1.4rem;display:block}
.comicfig{margin:1rem 0 1.4rem}
.comicfig .illust{margin-bottom:.5rem}
.comiccaps{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .9rem;font-size:.82rem;color:var(--dim);line-height:1.5}

/* ---------- 내 인물 시트 ---------- */
.sheet{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin:0 0 1.4rem;overflow:hidden}
.sheet>summary{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;cursor:pointer;list-style:none}
.sheet>summary::-webkit-details-marker{display:none}
.sheet[open]>summary{border-bottom:1px solid var(--line)}
.sh-nm{display:flex;flex-direction:column;min-width:0;flex:1}
.sh-nm b{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.sh-nm i{font-style:normal;font-size:.76rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-more{flex:none;font-size:.72rem;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:.22rem .6rem}

.sh-body{padding:1rem}
.stats{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.9rem}
.stat{display:inline-flex;align-items:baseline;gap:.35rem;padding:.34rem .65rem;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid var(--line)}
.stat b{font-size:.8rem;font-weight:700}
.stat i{font-style:normal;font-size:.86rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--dim)}
.stat.hi{border-color:rgba(76,201,240,.45);background:rgba(76,201,240,.1)}
.stat.hi i{color:#9fe0f5}
/* 🔴 세로 스택 — 막대 길이가 서로 비교되어야 의미가 있다 */
.stats{display:grid;gap:.4rem}
.stat{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.15rem .6rem;
  padding:.5rem .7rem}
.stat b{display:flex;flex-direction:column;gap:.05rem}
.stat b em{font-style:normal;font-weight:400;font-size:.66rem;color:var(--dim)}
.stat s{grid-column:1/-1;display:flex;gap:2px;text-decoration:none;margin-top:.25rem}
.stat s u{flex:1;max-width:1.6rem;height:.34rem;border-radius:2px;background:rgba(255,255,255,.09);display:block}
.stat s u.on{background:linear-gradient(90deg,var(--a1),var(--a3))}
.stat.lo s u.on{background:var(--a2)}
.stat .odds{grid-column:1/-1;font-size:.66rem;color:var(--dim);
  font-variant-numeric:tabular-nums;margin-top:.2rem}
.stat i u.up{font-style:normal;font-size:.7rem;color:var(--a3);margin-left:.2rem;text-decoration:none}
.nowchips{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .9rem}
.tag.gone{text-decoration:line-through;opacity:.5}
.tag.up{background:rgba(76,201,240,.16);border-color:rgba(76,201,240,.4);color:#9fe0f5}
.tag.new{background:rgba(255,92,138,.18);border-color:rgba(255,92,138,.45);color:#ffb3c7}
.tag.warn{background:rgba(255,196,92,.14);border-color:rgba(255,196,92,.36);color:#ffd08a}
.stat.lo{border-color:rgba(255,92,138,.3)}
.stat.lo i{color:#ffa9c1}
/* 🔴 시트의 행운도 같은 칩을 쓴다 — 폼과 시트가 다른 물건을 보여주면 안 된다.
      모양은 「탁자 문법」 블록에서 정한다. */
.stat.luck.spent i{color:var(--dim)}
.sh-p{font-size:.86rem;line-height:1.7;color:#cfc9d8;margin-bottom:.9rem}
.sh-rows{display:grid;gap:.4rem;margin-bottom:.6rem}
.sh-rows>div{display:flex;gap:.7rem;align-items:baseline;font-size:.84rem}
.sh-rows b{flex:none;width:4.6rem;font-size:.72rem;font-weight:700;color:var(--dim)}
.sh-rows span{flex:1;color:#cfc9d8}
.tag{display:inline-block;font-size:.74rem;padding:.16rem .5rem;border-radius:999px;margin:0 .3rem .3rem 0;
  background:rgba(124,92,255,.14);border:1px solid rgba(124,92,255,.3);color:#c9b8ff}
.sh-h{font-size:.7rem;font-weight:800;letter-spacing:.1em;color:var(--dim);margin:1rem 0 .5rem}
.sh-h em{font-style:normal;font-weight:400;opacity:.7;letter-spacing:0}
.secret{margin-top:1rem;border:1px solid rgba(255,92,138,.35);border-radius:14px;background:rgba(255,92,138,.07)}
.secret summary{padding:.7rem .9rem;cursor:pointer;font-size:.82rem;font-weight:700;color:#ffb3c7}
.secret summary em{font-style:normal;font-weight:400;font-size:.72rem;color:var(--dim);margin-left:.35rem}
.secret p{padding:0 .9rem .85rem;font-size:.88rem;line-height:1.8;color:#f2dbe3}
details.fold{border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02);margin:0 0 1.6rem}
details.fold>summary{padding:.75rem 1rem;cursor:pointer;font-size:.82rem;font-weight:700;color:var(--dim);list-style:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"▸ ";color:var(--a1)}
details.fold[open]>summary::before{content:"▾ "}
details.fold[open]>summary{border-bottom:1px solid var(--line);color:var(--fg)}
details.fold .foldin{padding:1rem}
/* 🔴 연재 중 「지난 이야기」는 화마다 접는다 (실측 스크롤 24,000px). 본문이라 카드 테두리는 벗긴다 */
details.fold.scenefold{border:0;background:none;border-radius:0;margin:0 0 .5rem}
details.fold.scenefold>summary{padding:.6rem 0;color:var(--a3);font-size:.72rem;letter-spacing:.14em}
details.fold.scenefold[open]>summary{border-bottom:1px solid var(--line);color:var(--fg);padding-bottom:.5rem}
details.fold.scenefold .foldin{padding:1.2rem 0 0}
details.fold.scenefold .scene{margin:0 0 1.4rem}
details.fold.scenefold .scene>h3{display:none}
.expandall{margin:0 0 1rem;text-align:right}
.finale{border:1px solid rgba(255,92,138,.45);border-radius:var(--r);padding:1.1rem 1.25rem;margin:0 0 1.4rem;
  background:linear-gradient(100deg,rgba(255,92,138,.14),rgba(124,92,255,.12));text-align:center}
.finale b{display:block;font-size:.95rem;font-weight:800;letter-spacing:.24em;margin-bottom:.35rem}
.finale span{font-size:.8rem;color:var(--dim)}
.cta{display:block;text-align:center;padding:.95rem;border-radius:14px;font-weight:800;color:#fff;
  background:var(--pri);box-shadow:0 8px 24px rgba(124,92,255,.3);margin:0 0 1.6rem}
.cta:hover{filter:brightness(1.08)}

/* 🔴 제출 버튼은 본문·판정·대화 아래에 있다. 어디를 보고 있든 한 번에 닿아야 한다. */
.actbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:.6rem clamp(.8rem,4vw,1.2rem);
  padding-bottom:max(.6rem,env(safe-area-inset-bottom));
  background:rgba(8,8,12,.86);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.actbar a,.actbar .done{display:block;max-width:34rem;margin:0 auto;text-align:center;
  padding:.8rem;border-radius:14px;font-weight:800;font-size:.92rem}
.actbar a{color:#fff;background:var(--pri);
  box-shadow:0 6px 22px rgba(124,92,255,.35)}
.actbar .done{color:var(--dim);background:var(--card);border:1px solid var(--line);font-weight:600}
/* 🔴 갱신이 입력 때문에 미뤄지는 동안 띄우는 칩. 사람이 누를 때까지 절대 reload 하지 않는다 */
.livechip{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(4.6rem + env(safe-area-inset-bottom));z-index:31;
  min-height:44px;display:flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;border-radius:999px;font-size:.8rem;font-weight:700;
  border:1px solid rgba(76,201,240,.5);background:rgba(8,8,12,.94);
  backdrop-filter:blur(12px);color:#9fe0f5;cursor:pointer;
  box-shadow:0 8px 28px rgba(0,0,0,.55)}
.livechip:active{transform:translateX(-50%) scale(.97)}
body:has(.actbar) footer{padding-bottom:6.5rem}
body:has(.actbar) main{padding-bottom:7.5rem}
/* select 팝업은 OS 가 그린다. option 에 색을 직접 지정해야 확실하다. */
select option{background:#14121a;color:#efedf5}
select option:checked{background:#2a2340}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#8b8798 50%),linear-gradient(135deg,#8b8798 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 1.15rem,calc(100% - .75rem) 1.15rem;
  background-size:.35rem .35rem,.35rem .35rem;background-repeat:no-repeat;padding-right:2.2rem}
/* ══════════ 6단계 — 손가락·눈·기기 ══════════ */
/* 🔴 CSS 전체에 :active 가 0회였다. 주 사용처가 폰인데 폰에는 hover 가 없고,
   iOS 는 탭 뒤 hover 상태를 다음 탭까지 붙잡는다. 누르는 순간의 응답이 0이었다. */
.btn,.mini,.ghost,.cta,.ctab,.chatbtn,.actbar a,.pick,.ap,.work,.toc a,.phase,.livechip{
  transition:transform var(--dur-fast) ease,filter var(--dur-fast) ease,
             border-color var(--dur-fast),background var(--dur-fast)}
.mini:active,.ghost:active,.ctab:active,.chatbtn:active,.pick:active,.ap:active,
.work:active,.toc a:active,.phase:active{transform:scale(.965);filter:brightness(1.06)}
.btn:active,.cta:active,.actbar a:active{transform:scale(.985);filter:brightness(1.06)}
/* hover 는 진짜 포인터가 있을 때만 — 폰에서 상태가 눌어붙지 않게 */
@media(hover:none){
  .ghost:hover,.mini:hover,.ctab:hover,.pick:hover,.ap:hover,.work:hover,.toc a:hover{
    border-color:var(--line);background:var(--card);transform:none;filter:none}
  .work:hover{transform:none}
}
/* 🔴 44px 를 지키는 곳이 채팅 둘뿐이었다. .mini 는 27px 인데 투표·개표·퇴장까지 19곳에 쓰이고,
   .ghost 는 헤더의 「알림 켜기」다 — 비동기 게임의 생명줄인데 가장 누르기 어려웠다. */
@media(pointer:coarse){
  .mini,.ghost,.ctab,.chatbtn{min-height:var(--tap);
    display:inline-flex;align-items:center;justify-content:center}
  .dicebtn{min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center}
  details>summary{min-height:var(--tap)}
  .toc a{min-height:var(--tap)}
  .ctabs{gap:.5rem}
}
/* 🔴 focus-visible 규칙이 앱 전체에 1개였다 (접근 선언 라디오). 나머지는 비어 있었다. */
:where(a,button,summary,label.pick,.ctab,.actbar a,.chatbtn,.mini,.ghost):focus-visible{
  outline:2px solid var(--a3);outline-offset:2px;border-radius:var(--r-s)}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--a3);outline-offset:1px}
/* 🔴 word-break:keep-all 이 0회였다. 폰에서 한 줄이 21자 남짓이라 어절이 매 줄 끊겼다. */
.scene p,.say p,.setup p,.lrow span,.sh-p,.state,.sealed .foot,.ask .a,.rel span{
  word-break:keep-all;overflow-wrap:anywhere}
/* 🔴 34ch 를 썼다가 한글 17자 기둥이 됐다 — ch 는 숫자 0 의 폭이라 한글에선 반 글자다.
   본문 폭은 .reader 의 40rem 이 지배한다. 한글 폭 제한은 em 으로만 쓴다. (docs/11 P0) */
/* 🔴 접힘 방지 — 모션을 끈 사람에게는 확대·이동을 주지 않는다 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .roll .die,.roll .out,.roll .band{opacity:1 !important;transform:none !important}
}
@media(prefers-contrast:more){
  :root{--dim:#c7c3d0;--line:rgba(255,255,255,.28);--card:rgba(255,255,255,.09)}
  .turnfocus,.vnbox,.dk,.panel{border-color:rgba(255,255,255,.42)}
}
@media(forced-colors:active){
  .btn,.mini.go,.dk.go,.steps span.on i{forced-color-adjust:auto;border:1px solid ButtonText}
  .turnfocus,.learntip,.decision{border-color:CanvasText}
}
@media(max-width:640px){
  /* 🔴 폰 기준 폰트 16→17px. rem 기반이라 화면 전체가 한 단계 커진다 (docs/11 P1) */
  html{font-size:17px}
  main{padding-left:1rem;padding-right:1rem}
  .scene p{font-size:1.05rem;line-height:1.95}
  .reader{max-width:none}
  .lrow{flex-direction:column;gap:.15rem}
  .lrow b{width:auto}
  .rel{flex-direction:column;gap:.2rem}
  .rel b{width:auto}
  .roll{flex-wrap:wrap;gap:.6rem}
  .roll .band{margin-left:0;width:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
  header{padding-left:.9rem;padding-right:.9rem;gap:.4rem}
  .ghost{padding:.36rem .6rem;font-size:.72rem}
  .locband{height:6.5rem}
  input,textarea,select{font-size:16px}  /* iOS 자동 확대 방지 */
}
@media(display-mode:standalone){
  header{padding-top:max(.85rem,env(safe-area-inset-top))}
  footer{padding-bottom:max(3rem,env(safe-area-inset-bottom))}
}
.setup{border:1px solid rgba(124,92,255,.35);background:rgba(124,92,255,.08);border-radius:16px;max-width:54rem;
  padding:1.1rem 1.25rem;margin:0 0 1.6rem}
.setup b{display:block;font-size:.68rem;font-weight:800;letter-spacing:.16em;color:var(--a3);margin-bottom:.5rem}
.setup p{font-family:var(--serif);font-size:1rem;line-height:1.85;color:#e8e3f0}
@media(max-width:520px){.hide-s{display:none}}

/* ---------- 메신저 ---------- */
body.app{min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.mgr{flex:1;display:grid;grid-template-columns:272px 1fr;min-height:0;max-width:1180px;
  width:100%;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.mgr-side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;
  background:rgba(255,255,255,.015)}
.mgr-side header{all:unset;display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;
  border-bottom:1px solid var(--line)}
.mgr-side header a{font-size:.78rem;color:var(--dim);text-decoration:none}
.mgr-side header a:hover{color:var(--fg)}
.mgr-side header b{font-size:.9rem;font-weight:800;letter-spacing:-.01em}
.mgr-rooms{overflow-y:auto;flex:1;padding:.5rem}
.mgr-room{display:flex;gap:.7rem;align-items:center;padding:.65rem .7rem;border-radius:14px;
  text-decoration:none;color:inherit}
.mgr-room:hover{background:rgba(255,255,255,.045)}
.mgr-room.on{background:linear-gradient(100deg,rgba(124,92,255,.22),rgba(255,92,168,.14));
  box-shadow:inset 0 0 0 1px rgba(124,92,255,.35)}
.mgr-av{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;
  font-size:.68rem;font-weight:800;letter-spacing:.02em;color:#fff;
  background:var(--pri)}
.mgr-room.lb .mgr-av{background:linear-gradient(140deg,#2b3350,#404a6e)}
.mgr-room.dm .mgr-av{background:linear-gradient(140deg,#7a2b4a,#c0397a)}
.mgr-room.dm .mgr-meta b{color:#ffb3c7}
.mgr-meta{min-width:0;flex:1}
.mgr-meta b{display:block;font-size:.85rem;font-weight:700}
.mgr-meta span{display:block;font-size:.74rem;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mgr-badge{flex:none;min-width:20px;height:20px;padding:0 .38rem;border-radius:999px;
  background:var(--a2);color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center}
.mgr-main{display:flex;flex-direction:column;min-height:0}
.mgr-top{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.2rem;
  border-bottom:1px solid var(--line);background:rgba(8,8,12,.75);backdrop-filter:blur(10px)}
.mgr-top b{font-size:.95rem;font-weight:800}
.mgr-top em{font-style:normal;font-size:.72rem;color:var(--dim)}
.mgr-feed{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.2rem}
.mgr-day{align-self:center;font-size:.68rem;color:var(--dim);background:rgba(255,255,255,.05);
  padding:.22rem .7rem;border-radius:999px;margin:.9rem 0 .5rem}
.bub{max-width:min(74%,520px);align-self:flex-start;margin-bottom:.35rem}
.bub .nm{font-size:.72rem;color:var(--a3);font-weight:700;margin:0 0 .28rem .2rem}
.bub .bd{display:inline-block;padding:.55rem .85rem;border-radius:16px 16px 16px 5px;
  background:rgba(255,255,255,.07);font-size:.88rem;line-height:1.62;
  white-space:pre-wrap;word-break:break-word}
.bub .tm{font-size:.64rem;color:var(--dim);margin:.22rem 0 0 .25rem}
.bub.me{align-self:flex-end}
.bub.me .bd{background:var(--pri);color:#fff;
  border-radius:16px 16px 5px 16px}
.bub.me .tm{text-align:right;margin:.22rem .25rem 0 0}
.bub.run .nm{display:none}
.bub.run .bd{border-radius:5px 16px 16px 5px}
.bub.me.run .bd{border-radius:16px 5px 5px 16px}
/* 🔴 채팅은 body.app 이라 footer 도 actbar 도 없다. 아이폰 홈바 34px 이 전송 버튼을 덮었다.
   standalone 미디어쿼리 안에 넣지 않는다 — 탭에서는 env 가 0이라 무해하다. */
.mgr-send{border-top:1px solid var(--line);padding:.7rem .9rem;display:flex;gap:.6rem;
  padding-bottom:max(.7rem,env(safe-area-inset-bottom));
  align-items:flex-end;background:rgba(8,8,12,.8)}
/* 🔴 14.08px 에 포커스가 가면 사파리가 페이지를 확대하고 자동으로 안 풀린다.
   그런데 chat.js 는 방을 여는 즉시 focus() 를 부른다. 16px 로 올리고 padding 으로 높이를 맞춘다. */
.mgr-send textarea{flex:1;resize:none;min-height:44px;max-height:132px;padding:.62rem .85rem;
  font-size:16px;line-height:1.45;
  border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--fg);font:inherit;font-size:.88rem;line-height:1.5}
.mgr-send textarea:focus{outline:none;border-color:var(--a1)}
.mgr-send button{flex:none;height:44px;padding:0 1.15rem;border-radius:14px;border:0;
  background:var(--pri);color:#fff;font-weight:800;
  font-size:.85rem;cursor:pointer}
.mgr-lock{padding:1rem 1.2rem;border-top:1px solid var(--line);color:var(--dim);font-size:.82rem}
.mgr-empty{margin:auto;text-align:center;color:var(--dim);font-size:.85rem;line-height:1.9}
/* 🔴 화마다 방이 늘어난다. 오래된 장면은 접힘 안으로 내린다. 접근은 그대로 열려 있다. */
.mgr-old{flex:none;border-top:1px solid var(--line)}
.mgr-old>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;
  min-height:var(--tap);padding:.5rem .9rem;font-size:.74rem;font-weight:700;color:var(--dim)}
.mgr-old>summary::-webkit-details-marker{display:none}
.mgr-old>summary::before{content:"▸";color:var(--a1)}
.mgr-old[open]>summary::before{content:"▾"}
.mgr-old[open]>summary{color:var(--fg)}
.mgr-old>summary em{font-style:normal;font-weight:800;color:var(--a2)}
.mgr-old .mgr-rooms{max-height:min(46vh,320px)}
.mgr-room.quiet{opacity:.5}
.mgr-room.quiet:hover,.mgr-room.quiet.on{opacity:1}
.chatbtn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--fg);
  border:1px solid var(--line);border-radius:14px;padding:.7rem 1rem;font-size:.85rem;
  font-weight:700;background:rgba(255,255,255,.03);margin-bottom:1.6rem}
.chatbtn:hover{border-color:var(--a1)}
.chatbtn i{font-style:normal}
.chatbtn u{text-decoration:none;min-width:20px;height:20px;padding:0 .38rem;border-radius:999px;
  background:var(--a2);color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center}
@media(max-width:860px){
  /* 🔴 minmax(0,1fr) 이어야 한다. 그냥 1fr 이면 auto 트랙 둘이 남는 높이를 균등 분배해
     방 목록이 화면의 절반을 먹고 타일이 자연 높이의 2.4배로 늘어난다 (375px 실측). */
  .mgr{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);border:0}
  .mgr-side{border-right:0;border-bottom:1px solid var(--line);max-height:none}
  .mgr-side.hidefeed{display:none}
  .mgr-rooms{display:flex;gap:.4rem;overflow-x:auto;overflow-y:hidden;padding:.5rem .7rem}
  .mgr-room{flex:none;flex-direction:column;gap:.3rem;width:74px;text-align:center;padding:.5rem .2rem}
  .mgr-meta span,.mgr-side header a{display:none}
  .mgr-meta b{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mgr-badge{position:absolute;transform:translate(20px,-8px)}
  .mgr-old>summary{padding:.45rem .7rem}
  .mgr-old .mgr-rooms{max-height:none}
  .bub{max-width:82%}
}

/* ---------- 대기실 초상화 미리보기 ---------- */
.castpv{margin:1rem 0 .2rem;border:1px solid var(--line);border-radius:16px;padding:1rem;
  background:rgba(255,255,255,.02);display:flex;gap:1rem;align-items:center}
.castpv img{width:176px;height:176px;flex:none;border-radius:16px;object-fit:cover;
  object-position:top;background:rgba(255,255,255,.05);
  box-shadow:0 14px 40px rgba(0,0,0,.45)}
.castpv p{font-size:.8rem;line-height:1.7;color:var(--dim)}
.castpv.wait{justify-content:flex-start}
.spin{width:176px;height:176px;flex:none;border-radius:16px;
  background:linear-gradient(100deg,rgba(124,92,255,.18),rgba(255,92,168,.12),rgba(124,92,255,.18));
  background-size:220% 100%;animation:sweep 1.4s linear infinite}
@keyframes sweep{to{background-position:-220% 0}}
@media(prefers-reduced-motion:reduce){.spin{animation:none}}
.castbtns{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.castbtns .btn{flex:1;min-width:150px;margin:0}
/* 🎴 운명의 카드 — 캐릭터 선택 화면 (12-G4c). 폰: 스냅 캐러셀 · PC: 3장 나란히 */
.fatecards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15rem,1fr);gap:.85rem;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:.4rem .15rem .7rem;margin:0 -.15rem .4rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.fatecards::-webkit-scrollbar{display:none}
.fatecard{scroll-snap-align:center;position:relative;cursor:pointer;display:block}
.fatecard input{position:absolute;opacity:0;pointer-events:none}
.fatecard .fin{display:flex;flex-direction:column;gap:.55rem;height:100%;border-radius:18px;
  padding:1.2rem 1.1rem 1.05rem;
  background:linear-gradient(168deg,rgba(28,23,44,.92),rgba(12,10,20,.95));
  border:1px solid var(--line);
  transition:border-color .18s,transform .18s,box-shadow .18s}
.fatecard .fno{font-size:.64rem;font-weight:800;letter-spacing:.32em;color:var(--a3);opacity:.85}
.fatecard .fin>b{font-size:1.14rem;font-weight:800;letter-spacing:-.01em;line-height:1.35;
  color:var(--fg);word-break:keep-all}
.fatecard .fin>p{font-size:.84rem;line-height:1.68;color:var(--dim);margin:0;flex:1;word-break:keep-all}
.fatecard .fstats{display:flex;flex-wrap:wrap;gap:.35rem}
.fatecard .fsel{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:#c9b8ff;opacity:0;
  border-top:1px dashed rgba(167,139,250,.28);padding-top:.65rem;text-align:center;
  transition:opacity .18s}
.fatecard input:checked+.fin{border-color:rgba(167,139,250,.65);transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(167,139,250,.4),0 16px 46px rgba(80,50,160,.28)}
.fatecard input:checked+.fin .fsel{opacity:1}
.fatecard input:focus-visible+.fin{outline:2px solid var(--a3);outline-offset:2px}
@media(max-width:640px){.fatecards{grid-auto-columns:78%}}
@media(prefers-reduced-motion:reduce){.fatecard .fin{transition:none}}
.btn.ghost2{background:rgba(255,255,255,.06);color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost2:hover{box-shadow:inset 0 0 0 1px var(--a1)}
.btn[disabled]{opacity:.45;pointer-events:none}
@media(max-width:520px){
  .castpv{flex-direction:column;text-align:center}
  .castbtns .btn{min-width:100%}
}

/* ---------- 앱 설치 안내 ---------- */
.insback{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(4,4,8,.72);backdrop-filter:blur(6px);
  padding:1rem;animation:insfade .18s ease}
.insbox{width:100%;max-width:460px;border-radius:22px;padding:1.6rem 1.4rem 1.4rem;
  background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.6);
  animation:insrise .22s cubic-bezier(.2,.8,.3,1)}
.insbox h3{font-size:1.1rem;font-weight:800;letter-spacing:-.02em;margin-bottom:1rem}
.insbox ol{margin:0 0 1rem;padding-left:1.2rem;display:flex;flex-direction:column;gap:.7rem}
.insbox li{font-size:.9rem;line-height:1.65}
.insbox li b{color:var(--fg);font-weight:700}
.insbox p{font-size:.78rem;color:var(--dim);line-height:1.7;margin-bottom:1.2rem}
.insbox .ico{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;
  border-radius:7px;background:rgba(124,92,255,.22);color:var(--a3);
  font-size:.85rem;vertical-align:-.35rem}
.insbox .btn{width:100%;margin:0}
@keyframes insfade{from{opacity:0}}
@keyframes insrise{from{transform:translateY(14px);opacity:0}}
@media(min-width:560px){.insback{align-items:center}}
@media(prefers-reduced-motion:reduce){.insback,.insbox{animation:none}}

/* ---------- 알림 상태 ---------- */
.alarmbox{border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.3rem;
  background:rgba(255,255,255,.025);margin-bottom:1.8rem}
.alarmrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--line)}
.alarmrow:last-of-type{border-bottom:0}
.alarmrow span{font-size:.85rem;color:var(--dim)}
.alarmrow b{font-size:.85rem;font-weight:800;padding:.18rem .6rem;border-radius:999px;
  background:rgba(255,255,255,.06);color:var(--dim)}
.alarmrow b.good{background:rgba(76,201,240,.16);color:#7fe0ff}
.alarmrow b.warn{background:rgba(255,196,92,.16);color:#ffd489}
.alarmrow b.bad{background:rgba(255,92,138,.16);color:#ff9ab8}
.alarmhint{font-size:.86rem;line-height:1.75;color:var(--dim);margin-top:.9rem}
.alarmhint b{color:var(--fg)}

/* ---------- 진행 감 보강 (docs/10 처방 C) ---------- */
.sign{font-size:.8rem;color:var(--dim);letter-spacing:.02em;margin:-.4rem 0 1.3rem;
  font-family:"Pretendard","Apple SD Gothic Neo",system-ui,sans-serif}
.recap{margin-top:1.6rem}
.ocrow{display:flex;gap:.9rem;padding:.5rem 0;border-bottom:1px solid var(--line);
  font-family:"Pretendard","Apple SD Gothic Neo",system-ui,sans-serif}
.ocrow:last-child{border-bottom:0}
.ocrow b{flex:none;min-width:3.6rem;font-size:.84rem;font-weight:800;color:var(--a3)}
.ocrow span{font-size:.88rem;line-height:1.7;color:var(--dim)}

/* ---------- 주사위 연출 강화 (docs/07 4-②③⑥) ---------- */
.linkish{background:none;border:0;color:var(--a3);font-size:.74rem;cursor:pointer;
  padding:0;text-decoration:underline;text-underline-offset:2px}
.roll .mods{display:flex;gap:.3rem;flex-wrap:wrap;width:100%;margin-top:.35rem}
.roll .mods em{font-style:normal;font-size:.66rem;font-weight:700;padding:.14rem .42rem;
  border-radius:999px;background:rgba(76,201,240,.14);color:#9fe0f5}
.roll .mods em.up{background:rgba(255,196,92,.16);color:#ffd08a}
.roll .mods em.gave{background:rgba(124,92,255,.14);color:#c9b8ff}
/* 내추럴 20 — 4씬에 한 번 나오는 순간. 금색으로 사건을 만든다 */
.roll.hit-nat20{border-color:rgba(255,205,86,.55);
  box-shadow:0 0 0 1px rgba(255,205,86,.25),0 0 24px rgba(255,205,86,.12)}
.roll.hit-nat20 .die{background:linear-gradient(135deg,#ffd056,#ff9d3c);color:#2b1c00;
  border-color:transparent;animation:crithit .7s cubic-bezier(.2,.8,.3,1.4)}
.roll.hit-nat20 .band{background:linear-gradient(100deg,#ffd056,#ff9d3c);color:#2b1c00;border:0}
.roll.hit-nat1 .die{background:rgba(255,92,138,.24);color:#ffa9c1;
  border-color:rgba(255,92,138,.5);animation:critdrop .5s ease}
.roll.hit-margin .die{box-shadow:0 0 0 1px rgba(76,201,240,.4)}
@keyframes crithit{0%{transform:scale(.7) rotate(-18deg)}55%{transform:scale(1.35) rotate(8deg)}
  100%{transform:scale(1.08) rotate(0)}}
@keyframes critdrop{0%{transform:translateY(-6px)}60%{transform:translateY(2px)}100%{transform:none}}
.rolls.flash-nat20{animation:flashgold .45s ease}
.rolls.flash-nat1{animation:flashpink .45s ease}
@keyframes flashgold{0%{box-shadow:0 0 0 0 rgba(255,205,86,0)}
  30%{box-shadow:0 0 0 6px rgba(255,205,86,.22)}100%{box-shadow:0 0 0 0 rgba(255,205,86,0)}}
@keyframes flashpink{0%{box-shadow:0 0 0 0 rgba(255,92,138,0)}
  30%{box-shadow:0 0 0 5px rgba(255,92,138,.2)}100%{box-shadow:0 0 0 0 rgba(255,92,138,0)}}
@media(prefers-reduced-motion:reduce){
  .roll.hit-nat20 .die,.roll.hit-nat1 .die,.rolls.flash-nat20,.rolls.flash-nat1{animation:none}}
/* 폰: 주사위와 밴드를 붙여둔다 — 밴드가 아랫줄 통짜 막대로 떨어지지 않게 (4-⑥) */
@media(max-width:640px){
  .roll{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"pic who die" "pic out die" "pic band band" "mods mods mods";
    gap:.15rem .7rem;align-items:center}
  .roll .portrait{grid-area:pic;align-self:start}
  .roll .who2{grid-area:who;width:auto;font-size:.82rem}
  .roll .die{grid-area:die;width:3.1rem;height:3.1rem;font-size:1.25rem;align-self:center}
  .roll .out{grid-area:out;font-size:.74rem;width:auto}
  .roll .band{grid-area:band;margin-left:0;justify-self:start;width:auto}
  .roll .mods{grid-area:mods;margin-top:.3rem}
}

/* ---------- 골대 · 복선 퀘스트 로그 (docs/07 9-①②) ---------- */
.goals{margin:0 0 .45rem}
.goals summary{font-size:.85rem;color:var(--dim);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.4rem}
.goals summary::before{content:'▸';transition:transform .15s}
.goals[open] summary::before{transform:rotate(90deg)}
.goals summary em{font-style:normal;font-weight:800;color:var(--a3)}
.goals .foldin{padding:.6rem 0 .2rem}
.goal{display:inline-block;font-size:.84rem;font-weight:700;padding:.3rem .6rem;
  margin:.2rem .3rem 0 0;border:1px dashed var(--line);border-radius:999px;color:var(--dim)}
.goal.on{border-style:solid;border-color:rgba(255,92,138,.6);
  background:rgba(255,92,138,.08);color:#ffb3c7;animation:goalglow 2.4s ease infinite}
.goal.off{opacity:.35}
@keyframes goalglow{0%,100%{box-shadow:0 0 0 0 rgba(255,92,138,0)}
  50%{box-shadow:0 0 12px 0 rgba(255,92,138,.25)}}
.clue{display:flex;gap:.6rem;align-items:baseline;padding:.32rem 0;border-bottom:1px solid var(--line)}
.clue:last-of-type{border-bottom:0}
.clue i{font-style:normal;flex:none;font-size:.74rem;font-weight:800;color:var(--a3);min-width:2.6rem}
.clue span{font-size:.875rem;color:var(--dim);line-height:1.65}
.clue.done span{text-decoration:line-through;opacity:.5}
@media(prefers-reduced-motion:reduce){.goal.on{animation:none}}

/* ---------- 홈 대시보드 (docs/07 7-②) ---------- */
.hero.slim{padding-top:1.6rem;padding-bottom:1rem}
.cta.turncta{display:flex;align-items:center;margin:1.2rem 0 0;font-size:.95rem;
  animation:turnpulse 2.6s ease infinite}
@keyframes turnpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,138,0)}
  50%{box-shadow:0 0 22px 0 rgba(255,92,138,.35)}}
.poster .chatband{position:absolute;top:.6rem;right:.6rem;font-size:.68rem;font-weight:800;
  padding:.2rem .5rem;border-radius:999px;background:rgba(8,8,12,.7);color:#9fe0f5;
  backdrop-filter:blur(4px)}
.bar.finale i{background:linear-gradient(90deg,var(--a2),var(--a1),var(--a2));
  background-size:200% 100%;animation:finaleflow 2.2s linear infinite}
@keyframes finaleflow{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.cta.turncta,.bar.finale i{animation:none}}

/* ---------- 방 스위처 (docs/07 7-③) ---------- */
.rooms{position:relative}
.rooms>summary{list-style:none;font-size:.78rem;font-weight:700;padding:.34rem .6rem;
  border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--dim)}
.rooms>summary::-webkit-details-marker{display:none}
.rooms[open]>summary{color:var(--fg);border-color:var(--a1)}
.rooms>div{position:absolute;right:0;top:2.3rem;z-index:25;min-width:14rem;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;
  padding:.4rem;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.rooms a{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;
  border-radius:9px;font-size:.82rem;color:var(--fg);text-decoration:none;white-space:nowrap}
.rooms a:hover{background:rgba(255,255,255,.05)}
.rooms a b{margin-left:auto;font-size:.72rem}
.accountmenu{position:relative}
.accountmenu>summary{list-style:none;width:2.3rem;height:2.3rem;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:9px;color:var(--dim);cursor:pointer;font-weight:800;letter-spacing:.08em}
.accountmenu>summary::-webkit-details-marker{display:none}
.accountmenu[open]>summary{color:var(--fg);border-color:rgba(255,255,255,.28)}
.accountmenu>div{position:absolute;right:0;top:2.7rem;z-index:28;width:11rem;padding:.4rem;
  display:grid;gap:.2rem;background:#14141b;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 36px rgba(0,0,0,.45)}
.accountmenu .ghost,.accountmenu form{width:100%}
.accountmenu .ghost{display:flex;align-items:center;justify-content:flex-start;min-height:2.4rem;
  border:0;border-radius:8px;padding:.55rem .65rem;background:transparent;color:var(--dim)}
.accountmenu .ghost:hover{background:rgba(255,255,255,.055);color:var(--fg)}
.accountmenu .hide-s{display:flex}

.bookcover.pending{display:grid;place-items:center;aspect-ratio:3/4;max-width:220px;
  border-radius:14px;border:1px solid var(--line)}
.bookcover.pending span{font-size:.76rem;color:var(--dim);background:rgba(8,8,12,.6);
  padding:.4rem .8rem;border-radius:999px;animation:pulse 1.8s ease infinite}
@keyframes pulse{50%{opacity:.5}}

/* ---------- 마법사 레일 · 규칙 카드 · 초안 (docs/07 8단계) ---------- */
.steps{display:flex;align-items:center;gap:.5rem;margin:.9rem 0 1.1rem}
.steps span{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:var(--dim)}
.steps span i{font-style:normal;width:1.35rem;height:1.35rem;border-radius:50%;display:grid;place-items:center;
  font-size:.68rem;border:1px solid var(--line)}
.steps span.on{color:var(--fg)}
.steps span.on i{background:var(--pri);border-color:transparent;color:#fff}
.steps span.done{color:var(--a3)}
.steps span.done i{border-color:rgba(76,201,240,.5);color:var(--a3)}
.steps>s{flex:1;max-width:3rem;height:1px;background:var(--line);text-decoration:none}
.errlabel{color:#ff9ab8!important}
.pick.style{align-items:center}
.pick.style .swatch{width:4.5rem;height:3.2rem;flex:none;border-radius:10px;margin-right:.2rem;
  border:1px solid rgba(255,255,255,.12)}
.toneread.rules span{display:block;margin-top:.5rem;font-size:.8rem;line-height:1.7;color:var(--dim)}
.toneread.rules span em{font-style:normal;color:#cfc9d8}
.toneread.rules .stat{display:inline-block;font-size:.72rem;font-weight:800;padding:.1rem .45rem;
  border-radius:999px;background:rgba(76,201,240,.14);color:#9fe0f5}
.toneread.rules .stat.hi{background:rgba(255,196,92,.16);color:#ffd08a}
.draftrow{display:flex;align-items:center;gap:1rem;border:1px dashed var(--line);border-radius:14px;
  padding:.7rem 1rem;margin-bottom:.6rem}
.draftrow span{flex:1;font-size:.84rem;color:var(--dim);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.invcard .promise{display:block;margin-top:.5rem;font-size:.74rem;color:var(--a3);font-weight:700}

/* ---------- 막 카드 · 결 바 · 조명 · 병렬 대기 (docs/07 9단계) ---------- */
.actcard{border:1px solid rgba(255,196,92,.4);border-radius:18px;padding:1.1rem 1.3rem;max-width:54rem;
  margin:0 0 1.2rem;background:linear-gradient(135deg,rgba(255,196,92,.08),rgba(255,92,138,.05))}
.actcard b{display:block;font-size:.7rem;font-weight:800;letter-spacing:.3em;color:#ffd08a}
.actcard i{display:block;font-style:normal;font-size:1.05rem;font-weight:800;margin:.3rem 0 .6rem}
.actcard ul{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
.actcard li{font-size:.82rem;line-height:1.6;color:var(--dim)}
.actcard li.warn{color:#ffb3c7}
.actcard li.grow{color:#9fe0f5}
.tonebar .hint{color:var(--dim);font-style:italic}
.tonebar .chip{font-size:.66rem;font-weight:800;padding:.16rem .5rem;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--dim)}
.tonebar .chip.warn{background:rgba(255,92,138,.14);border-color:rgba(255,92,138,.4);color:#ffb3c7}
.tonebar .tick{display:inline-flex;gap:.2rem;text-decoration:none;vertical-align:middle;margin-left:.25rem}
.tonebar .tick i{width:.7rem;height:.35rem;border-radius:2px;background:rgba(255,255,255,.12)}
.tonebar .tick i.on{background:var(--a2)}
.setup .spot{font-style:normal;font-size:.68rem;font-weight:700;color:var(--dim);margin-left:.5rem}
.setup .spot.me{color:#c9b8ff}
.waitother u{text-decoration:none;color:var(--a3);font-weight:700}
.waitother .btn{display:inline-flex;width:auto}
.witness{border-left:3px solid var(--a3)}

/* ---------- 읽던 위치 · 표지 물성 (docs/07 7-⑤⑥) ---------- */
.cta.contread{margin:0 0 1.6rem;display:flex}
.tocfab{position:fixed;right:1rem;bottom:1rem;z-index:30;width:2.9rem;height:2.9rem;
  border-radius:50%;border:1px solid var(--line);background:rgba(14,14,21,.85);
  color:var(--fg);font-size:1.05rem;cursor:pointer;backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.45)}
.tocfab:active{transform:scale(.94)}
/* 7-⑤a: 책등이 서면 즉시 「책」으로 읽힌다 — 생성 표지가 없는 연재물 카드 */
.poster{box-shadow:inset 8px 0 14px -8px rgba(0,0,0,.55)}
/* 7-⑤b: 끝난 책은 얇은 금테 — 배지 하나에 의존하지 않는다 */
.work .poster:has(.badge:not(.live))::before{content:'';position:absolute;inset:5px;z-index:1;
  border:1px solid rgba(255,205,86,.28);border-radius:calc(var(--r) - 5px);pointer-events:none}

/* ---------- 🗺 미니맵 ---------- */
.mapstrip{display:flex;align-items:stretch;gap:.5rem;overflow-x:auto;padding:.3rem .1rem .6rem;
  -webkit-overflow-scrolling:touch}
.mapnode{flex:none;width:150px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.025);position:relative}
.mapnode .mappic{display:block;width:100%;height:74px;object-fit:cover;object-position:center}
.mapnode .mappic.ph{background-size:cover}
.mapnode b{display:block;font-size:.84rem;font-weight:800;padding:.45rem .6rem 0;letter-spacing:-.01em}
.mapnode>span{display:block;font-size:.72rem;color:var(--dim);padding:.15rem .6rem .55rem;line-height:1.5}
.mapnode.here{border-color:rgba(76,201,240,.55);box-shadow:0 0 0 1px rgba(76,201,240,.25),0 0 18px rgba(76,201,240,.1)}
.mapnode.here b::after{content:'●';font-size:.5rem;color:var(--a3);margin-left:.35rem;
  vertical-align:.1rem;animation:pulse 1.8s ease infinite}
.mapnode .toks{position:absolute;top:52px;right:.45rem;display:flex}
.mapnode .tok{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:top;
  border:2px solid var(--bg2);margin-left:-8px;background:rgba(255,255,255,.1)}
.mapnode i.tok{font-style:normal;display:grid;place-items:center;font-size:.62rem;font-weight:800;color:#fff;
  background:var(--pri)}
.mapnode .tok.me{border-color:var(--a3)}
.mappath{flex:none;align-self:center;width:1.4rem;height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 8px);position:relative}
.mappath::after{content:'›';position:absolute;right:-2px;top:-.62rem;color:var(--dim);font-size:.7rem}

/* ---------- 이미지 라이트박스 ---------- */
.portrait,.pface:not(.ph),.illust,.locband img,.castpv img,.castcard img,.mappic:not(.ph),
.bookcover img,.mapnode .tok:not(.ph){cursor:zoom-in}
.zoomback{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.8rem;padding:1.2rem;
  background:rgba(4,4,8,.88);backdrop-filter:blur(10px);cursor:zoom-out;
  animation:insfade .16s ease}
.zoomback img{max-width:min(94vw,900px);max-height:82vh;border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);object-fit:contain;
  animation:zoomin .2s cubic-bezier(.2,.8,.3,1)}
.zoomback p{font-size:.85rem;color:var(--dim);max-width:min(94vw,900px);text-align:center}
.zoomx{position:fixed;top:max(.9rem,env(safe-area-inset-top));right:1rem;width:2.6rem;height:2.6rem;
  border-radius:50%;border:1px solid var(--line);background:rgba(14,14,21,.8);
  color:var(--fg);font-size:1rem;cursor:pointer}
@keyframes zoomin{from{transform:scale(.92);opacity:0}}
@media(prefers-reduced-motion:reduce){.zoomback,.zoomback img{animation:none}}


/* ---------- 🎭 무대 (docs/12 G1·G2) ---------- */
body.gamebody{background:#000}
.stage{position:relative;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  background:#0a0a10}
.stage::before{content:'';position:absolute;inset:0;background-image:var(--stagebg);
  background-size:cover;background-position:center 30%;z-index:0}
.stage.nobg::before{background-image:var(--stagegrad);filter:saturate(.8)}
/* 🔴 장소 그림이 없는 방은 100dvh 무대가 화면 절반짜리 검은 공백이 된다 (실측 gwang12).
   그림이 없으면 무대는 내용물 높이만큼만 — 서랍이 첫 화면 안으로 들어온다. */
.stage.nobg{min-height:0}
.stage.nobg .stagefloor{padding-top:1.2rem}
/* 시간대 오버레이 — 같은 장소가 밤이 되면 어두워진다 */
.stage::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,4,10,.55),rgba(4,4,10,.15) 30%,rgba(4,4,10,.2) 55%,rgba(4,4,10,.82) 90%)}
.stage.night::after{background:linear-gradient(180deg,rgba(2,4,18,.7),rgba(2,4,18,.35) 35%,rgba(2,4,18,.8) 90%)}
.stage.dusk::after{background:linear-gradient(180deg,rgba(28,8,20,.55),rgba(20,6,24,.28) 35%,rgba(10,4,18,.8) 90%)}
.stage.dawn::after{background:linear-gradient(180deg,rgba(10,12,30,.6),rgba(24,16,36,.3) 35%,rgba(8,8,20,.8) 90%)}
.stage>*{position:relative;z-index:2}

/* 게임 상단바 */
/* 🔴 z-index:30 — .stage>* 가 전부 z2 라 뒤에 오는 vnbox·dock 이 DOM 순서로 위에 그려진다.
   열린 HUD 패널(.hudin)은 상단바 안에 있어서, 상단바를 안 띄우면 패널 아랫부분이
   VN 박스·독 밑에 깔려 그쪽 탭이 패널 대신 VN 박스를 누르게 된다. */
.stagebar{display:flex;align-items:center;gap:.55rem;padding:max(.6rem,env(safe-area-inset-top)) .8rem .5rem;
  font-size:.8rem;z-index:30}
.stagebar b{font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 8px rgba(0,0,0,.8);color:#fff}
.stagebar .sb-meta{color:rgba(255,255,255,.75);font-size:.72rem;white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.8)}
.stagebar .sb-sp{flex:1}
.stagebar .sb,.stagebar .hud>summary{display:grid;place-items:center;width:2.2rem;height:2.2rem;
  border-radius:10px;background:rgba(8,8,14,.55);border:1px solid rgba(255,255,255,.14);
  color:#fff;text-decoration:none;cursor:pointer;list-style:none;font-size:.95rem;
  backdrop-filter:blur(6px);position:relative}
/* 🔴 .sb 의 display:grid 가 브라우저 기본 [hidden]{display:none} 을 이겨버린다.
   JS 로 여는 버튼(축소 토글)이 JS 없이도 떠 버리므로 여기서 다시 눌러 준다. */
.stagebar .sb[hidden]{display:none}
.stagebar .hud>summary::-webkit-details-marker{display:none}
.stagebar .sb u{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;border-radius:999px;
  background:var(--a2);color:#fff;font-size:.58rem;font-weight:800;display:grid;place-items:center;
  text-decoration:none;padding:0 3px}
.stagebar .hud[open]>summary{background:var(--pri);border-color:transparent}
/* HUD 패널 — 상단바 밑에 깔리는 유리판 */
.hud>div.hudin{position:absolute;left:.6rem;right:.6rem;top:3.4rem;z-index:40;max-height:70dvh;
  overflow-y:auto;border-radius:18px;padding:1rem;background:rgba(10,10,18,.92);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.6)}

/* 지금 상태는 무대와 서랍 사이에 흩어 두지 않는다. 첫 화면에서 한 번에 읽힌다. */
.turnfocus{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:center;
  width:calc(100% - 1.4rem);max-width:46rem;margin:.15rem auto .45rem;padding:.75rem .9rem;
  border:1px solid rgba(255,255,255,.16);border-left:3px solid var(--a1);border-radius:16px;
  background:rgba(8,8,16,.82);backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(0,0,0,.24)}
.turnfocus.wait{border-left-color:var(--dim)}
.turnfocus.busy{border-left-color:var(--a3)}
.turnfocus.done{border-left-color:var(--a3)}
.tf-main{min-width:0}
.tf-kicker{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--a3);
  margin-bottom:.12rem}
.turnfocus b{display:block;font-size:1rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.turnfocus p{font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.72);margin:.18rem 0 0;
  word-break:keep-all;overflow-wrap:anywhere}
.tf-side{display:flex;flex-direction:column;align-items:flex-end;gap:.18rem;text-align:right;
  font-variant-numeric:tabular-nums}
.tf-side span{font-size:.76rem;font-weight:700;color:rgba(255,255,255,.72);white-space:nowrap}
.tf-side i{font-style:normal;font-size:.88rem;font-weight:800;color:#fff;white-space:nowrap}
.learntip{display:flex;align-items:center;gap:.55rem;width:calc(100% - 1.4rem);max-width:46rem;
  margin:0 auto .45rem;padding:.55rem .75rem;border-radius:12px;border:1px dashed rgba(76,201,240,.35);
  background:rgba(8,8,16,.72);font-size:.76rem;line-height:1.5;color:rgba(255,255,255,.78);
  word-break:keep-all}
.learntip b{flex:none;color:var(--a3);font-size:.7rem;letter-spacing:.04em}
/* 🎲 개봉 문 — 아직 안 본 결과가 있을 때의 이번 차례 카드 */
.turnfocus.reveal{border-left-color:var(--pri);box-shadow:0 10px 28px rgba(0,0,0,.24),0 0 0 1px rgba(167,139,250,.25)}
.rvchat{margin:-.8rem 0 1.6rem}
/* 🪑 방장의 책상 — 할 일이 있을 때만 */
.desk{width:calc(100% - 1.4rem);max-width:46rem;margin:0 auto .6rem;padding:.6rem .9rem;border-radius:12px;
  border:1px solid rgba(255,196,92,.28);background:rgba(8,8,16,.72);font-size:.8rem;line-height:1.55;
  color:rgba(255,255,255,.82);word-break:keep-all}
.dk-kicker{display:block;font-size:.68rem;font-weight:800;letter-spacing:.08em;color:#ffd08a;margin-bottom:.15rem}
.desk p{margin:.2rem 0}
.dk-line summary{cursor:pointer;list-style:none;font-weight:700}
.dk-line summary::-webkit-details-marker{display:none}
.dk-line p{color:var(--dim);margin:.35rem 0 0}
.desk form{margin:.5rem 0 0}
/* ⚖️ 판관의 각주 — 실패 행 아래, 당사자에게만 */
details.fold.jnote{margin:-.2rem 0 .4rem;border-color:rgba(255,196,92,.22)}
details.fold.jnote>summary{font-size:.76rem;padding:.5rem .9rem}
details.fold.jnote .foldin{padding:.7rem .9rem}
.jnote i{display:block;font-family:var(--serif);font-style:italic;font-size:.95rem;line-height:1.75;color:#fff}
.jnote .who{display:block;margin-top:.4rem}
/* ✍ 저자 도장 — 사람이 쓴 문장. 내 것은 여백에 도장, 남의 것은 점선 */
.scene .q.mine{position:relative}
.scene .q.mine::before{content:"✍";position:absolute;left:-1.35rem;top:.05rem;font-size:.78rem;color:var(--a3);opacity:.9}
.scene .q.human{text-decoration:underline dotted rgba(255,255,255,.3);text-underline-offset:.28em}
.scene .q.mine,.scene .q.human{cursor:help}
.qpop{position:absolute;z-index:30;background:rgba(14,12,24,.97);border:1px solid rgba(167,139,250,.4);
  border-radius:10px;padding:.45rem .7rem;font-size:.76rem;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.5);
  white-space:nowrap;font-style:normal;font-weight:400}
.bktitle{font-family:var(--serif);font-size:1.5rem;margin:0 0 1.2rem}
.pushnote.folded [data-copyline]{display:none}

/* 무대 바닥 — 스탠디와 프레임 */
.stagefloor{flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0;
  padding:0 .5rem}
.standees{display:flex;align-items:flex-end;justify-content:center;
  width:100%;max-width:52rem}
.standee{margin:0;text-align:center;flex:0 1 auto;min-width:0;
  transition:filter .5s ease,transform .5s ease}
.standee img{display:block;max-height:min(46dvh,430px);max-width:26vw;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.standee figcaption{font-size:.72rem;font-weight:800;color:#fff;margin-top:.2rem;
  text-shadow:0 1px 6px rgba(0,0,0,.9)}
/* 🔴 로스터가 곧 무대다 — 낸 사람은 또렷하게 앞으로, 아직인 사람은 실루엣 */
.standee.wait{filter:brightness(.32) saturate(.4);transform:scale(.94)}
.standee.wait figcaption{opacity:.65}
.standee.in{transform:translateY(-4px)}
.standee.me img{filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(124,92,255,.45))}
/* 프레임 모드 — 알파 없는 방의 폴백 */
.framerow{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;padding-bottom:.6rem;
  width:100%}
.fr{width:88px;border-radius:14px;overflow:hidden;background:rgba(10,10,18,.72);
  border:1px solid rgba(255,255,255,.16);text-align:center;backdrop-filter:blur(6px);
  transition:filter .4s}
.fr img{display:block;width:100%;height:92px;object-fit:cover;object-position:top}
.fr i{display:grid;place-items:center;width:100%;height:92px;font-style:normal;font-size:1.6rem;
  font-weight:800;color:#fff;background:var(--pri)}
.fr b{display:block;font-size:.72rem;font-weight:800;padding:.25rem .3rem 0;color:#fff}
.fr span{display:block;font-size:.6rem;color:rgba(255,255,255,.7);padding:0 .3rem .35rem}
.fr.wait{filter:brightness(.45) saturate(.5)}

/* ══════════════════ 탁자 문법 ══════════════════
 *
 * 🔴 보드게임 물성의 절반은 컴포넌트가 아니라 **테이블**이다.
 *    이 층이 하는 일은 하나다 — 화면 요소를 「탁자 위에 놓인 물건」으로 읽히게 만든다.
 *    받침대가 있으면 사진 오리기가 말이 되고, 오목한 홈이 있으면 「썼다」가 손실이 된다.
 *
 * 🔴 전부 CSS 다. 이미지 0개 · JS 0줄 · 데이터 변경 0 · 마크업은 덱 하나뿐.
 *    CSP(default-src 'none')와 무관하고, 마음에 안 들면 이 블록만 지우면 원상복구된다.
 *
 * 🔴 그리고 이건 docs/16 「AI 쇠맛 제거」와 같은 방향이다 —
 *    보라-분홍 그라디언트를 걷어내는 자리에 **놋쇠와 펠트**를 넣는다.
 *    16 이 지키라고 한 것(봉인·개봉 의식의 연출)은 그대로 둔다.
 */
:root{
  --felt:#0d1014;                    /* 펠트 — 말이 놓이는 바닥 */
  --brass:#c9a227;                   /* 놋쇠 — 칩·인장·주사위 테. 이 층의 유일한 강조색 */
  --brass-dim:#8a6f1c;
  --socket:rgba(0,0,0,.62);          /* 오목한 홈 — 비어 있음을 그린다 */
}

/* ① 받침대 — 스탠디를 「사진」에서 「게임 말」로 바꾸는 한 조각.
      아크릴 스탠드의 타원 굽. 이름표 바로 위, 발밑에 깔린다. */
.standee figcaption{position:relative;padding-top:.6rem}
.standee figcaption::before{
  content:'';position:absolute;left:50%;top:-.1rem;transform:translateX(-50%);
  width:min(88%,116px);height:10px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 38%,
    rgba(255,255,255,.18),rgba(255,255,255,.06) 54%,rgba(255,255,255,0) 76%);
  box-shadow:0 2px 7px rgba(0,0,0,.65);
  pointer-events:none;
}
/* 🎴 엎어둔 행동 카드 — 「냈다」가 이모지가 아니라 탁자 위의 물건이 된다.
   동시 비공개 선택 게임의 물성: 카드가 놓인 것은 보이고 앞면은 안 보인다.
   🔒 뒷면뿐이라 유출이 구조적으로 불가능하다 — 내용은 서버가 아예 안 내려보낸다. */
.fdcard{display:inline-block;width:11px;height:15px;margin-left:.28rem;vertical-align:-3px;
  border-radius:2px;background:linear-gradient(150deg,#2a2436,#1a1622);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.55),0 1px 2px rgba(0,0,0,.7);
  position:relative;transform:rotate(-6deg)}
.fdcard::after{content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#e8cf7a,var(--brass) 70%)}
.slot .fdcard{transform:rotate(-4deg)}

/* 아직 안 낸 말은 굽까지 어두워진다 — 실루엣이 바닥에서 뜨면 안 된다 */
.standee.wait figcaption::before{opacity:.35}
/* 🔴 접지 그림자를 발밑으로 당긴다. 예전 drop-shadow(0 10px 18px) 는 **떠 있는** 그림자라
      받침대와 같이 쓰면 말이 굽 위에 붕 뜬 것처럼 보였다. */
.standee img{filter:drop-shadow(0 5px 9px rgba(0,0,0,.62))}
.standee.me img{filter:drop-shadow(0 5px 9px rgba(0,0,0,.62)) drop-shadow(0 0 12px rgba(201,162,39,.34))}

/* ② 무대 바닥 — 말이 서 있는 면. 배경 그림과 바닥을 가르는 지평선 한 줄. */
.stagefloor{position:relative}
.stagefloor::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(40px,11dvh,92px);
  background:linear-gradient(to top,rgba(6,8,11,.78),rgba(6,8,11,.30) 58%,transparent);
  border-top:1px solid rgba(255,255,255,.05);
  pointer-events:none;z-index:-1;
}

/* ③ 행운 칩과 빈 홈 — 「쓰면 자리가 빈다」
      docs/06 이 정한 규칙(막당 1회)을 숫자가 아니라 **자리**로 가르친다. */
.ap.luck{background:var(--card)}
.ap.luck b::before,.stat.luck i::before{
  content:'';display:inline-block;width:15px;height:15px;border-radius:50%;
  margin-right:.42rem;vertical-align:-2px;
  background:radial-gradient(circle at 36% 32%,#f0d98a,var(--brass) 58%,var(--brass-dim));
  box-shadow:0 1px 2px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.22);
}
.ap.luck i{color:#e8cf7a;font-size:.82rem}
/* 소진 — 칩이 있던 자리에 오목한 홈만 남는다 */
.ap.luck.off b::before,.stat.luck.spent i::before{
  background:var(--socket);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.06);
}
.stat.luck{border-color:rgba(201,162,39,.42);background:rgba(201,162,39,.07)}
.stat.luck i{color:#e8cf7a}
.stat.luck.spent{opacity:.5;background:rgba(255,255,255,.03);border-color:var(--line)}

/* ④ 20면체 주사위 — 정지 상태가 스프레드시트 셀처럼 보이던 것을 물건으로.
      clip-path 로 육각 실루엣, 착지하면 살짝 기운다. */
.roll .die{
  border-radius:4px;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
  border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.roll.landed .die{transform:scale(1.06) rotate(-4deg)}
.roll.rolling .die{background:linear-gradient(160deg,#f0d98a,var(--brass));color:#241c00}
.roll.hit-nat20 .die{
  background:linear-gradient(160deg,#ffe9a8,var(--brass) 62%,#a8801a);color:#2b1c00;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
/* 대립 판정은 두 주사위가 마주 본다 — 「맞붙는다」가 배치로 읽힌다 */
.roll.duel .die{transform:rotate(-7deg)}
.roll.duel+.roll.duel .die{transform:rotate(7deg)}

/* ⑤ 봉인된 결말 봉투 — 「어디로 기울고 있는지는 아무에게도 안 보인다」는
      기존 정보 설계와 봉투의 물성이 정확히 일치한다. 은유가 아니라 번역이다. */
.goal{
  position:relative;padding:.42rem .7rem .42rem 1.5rem;border-radius:3px;
  background:linear-gradient(#15151c,#101016);border:1px solid rgba(255,255,255,.13);
}
.goal::before{                       /* 밀랍 인장 */
  content:'';position:absolute;left:.45rem;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#b8484a,#7d2a2c 70%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
}
.goal.on{                            /* 뜯긴 봉투 — 이 결말로 갔다 */
  border-color:rgba(201,162,39,.6);background:linear-gradient(#1d1a12,#15130d);
}
.goal.on::before{background:radial-gradient(circle at 36% 32%,#f0d98a,var(--brass) 70%)}
.goal.off{opacity:.34}               /* 열리지 않은 채 남은 결말 */

/* ⑥ 얇아지는 씬 덱 — 남은 분량이 숫자가 아니라 **두께**로 보인다.
      완주가 서고 등재로 이어지는 이 게임에서 종반 긴장을 공짜로 만든다. */
.deck{display:inline-flex;align-items:flex-end;gap:1px;vertical-align:-2px;margin:0 .3rem}
.deck i{display:block;width:3px;height:11px;border-radius:1px;
  background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.5)}
.deck i.last{background:#b8484a}      /* 마지막 두 장은 붉은 옆면이 비쳐 보인다 */
.deck.thin i{height:13px}

/* ── 🎴 막 결산 — 라운드 종료 정산. 이미 일어난 일에 의식만 입힌다 ── */
.actsum>summary{color:#e8cf7a}
.asrows{display:grid;gap:.5rem}
.asrow{display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem;align-items:baseline;
  padding:.4rem 0;border-bottom:1px solid var(--line)}
.asrow:last-child{border-bottom:0}
.asrow>b{font-size:.76rem;font-weight:700;color:var(--dim)}
.asrow>span{font-size:.85rem;line-height:1.6;color:var(--fg)}
.asrow>span b{color:#e8cf7a;font-weight:800}
.asrow>span i{font-style:normal;font-size:.72rem;color:var(--faint)}
@media(max-width:480px){ .asrow{grid-template-columns:1fr;gap:.15rem} }

/* ── 🎯 위험도 다이얼 — 접근 선언의 짝. 굴리기 전에 판돈을 고른다 ── */
.risks{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:1.1rem}
.rk{position:relative;padding:.55rem .5rem;border-radius:12px;cursor:pointer;text-align:center;
  border:1px solid var(--line);background:var(--card);transition:.15s}
.rk input{position:absolute;opacity:0;width:1px;height:1px}
.rk b{display:block;font-size:.9rem;font-weight:800;color:var(--fg)}
.rk span{display:block;font-size:.66rem;line-height:1.35;color:var(--dim);margin-top:.15rem}
.rk:has(input:checked){border-color:rgba(201,162,39,.7);background:rgba(201,162,39,.12)}
.rk:has(input:checked) b{color:#e8cf7a}
.rk:has(input:focus-visible){outline:2px solid var(--a3);outline-offset:2px}
/* 🔴 색으로 「무리가 나쁘다」고 말하지 않는다 — 둘 다 정당한 선택이다. 온도만 다르게 준다. */
.rk.safe:has(input:checked){border-color:rgba(76,201,240,.6);background:rgba(76,201,240,.1)}
.rk.safe:has(input:checked) b{color:#9fe0f5}
.rk.hot:has(input:checked){border-color:rgba(184,72,74,.7);background:rgba(184,72,74,.13)}
.rk.hot:has(input:checked) b{color:#e8a09c}
@media(max-width:360px){ .risks{grid-template-columns:1fr} }

/* ── 🎉 스탬프 · 👣 발자국 — 테이블의 기척 ──
   결과 옆에 붙는다. 채팅과 달리 작문이 없다 — 한 번 탭이 전부다. */
.stamps{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.55rem 0 0;padding:.15rem 0}
.stgot{display:flex;gap:.3rem;flex-wrap:wrap}
.stchip{display:inline-flex;align-items:center;gap:.15rem;font-size:.86rem;
  padding:.16rem .45rem;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.stchip b{font-size:.72rem;font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums}
.stchip.mine{border-color:rgba(201,162,39,.55);background:rgba(201,162,39,.12)}
.stchip.mine b{color:#e8cf7a}
.stpick{display:flex;gap:.1rem;margin-left:auto}
.stbtn{background:none;border:0;cursor:pointer;font-size:1.05rem;line-height:1;
  padding:.3rem .28rem;border-radius:8px;opacity:.5;transition:opacity .15s,transform .1s}
.stbtn:hover,.stbtn:focus-visible{opacity:1;transform:translateY(-2px)}
@media(max-width:480px){ .stpick{margin-left:0;width:100%;justify-content:space-between}
  .stbtn{opacity:.72;font-size:1.15rem;min-height:38px} }

.foots{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin:.5rem 0 0;font-size:.72rem;color:var(--dim)}
.foots>b{font-weight:700;color:var(--faint);font-size:.7rem}
.fp{display:inline-flex;align-items:baseline;gap:.25rem;padding:.14rem .42rem;
  border-radius:999px;border:1px solid var(--rule,var(--line));background:var(--card)}
.fp i{font-style:normal;font-size:.66rem;color:var(--faint);font-variant-numeric:tabular-nums}
.fp.none{opacity:.38}
.fp.me{border-color:rgba(201,162,39,.5)}
.foots em{font-style:normal;color:#e8cf7a;font-weight:700;font-size:.7rem}

/* ✊ 노크 — 미제출자 옆에 붙는 「부르기」 */
.knock{display:inline-flex;gap:.25rem;align-items:center;margin-left:.35rem}
.knock button{background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer;
  font-size:.7rem;color:var(--dim);padding:.12rem .5rem;min-height:auto}
.knock button:hover{border-color:rgba(201,162,39,.5);color:#e8cf7a}

/* 🤙 봉인 손짓 — 낸 사람의 몸짓. 내용은 안 보여도 표정은 보인다 */
.gesture{display:flex;gap:.35rem;flex-wrap:wrap;margin:.5rem 0 0}
.gesture label{font-size:.74rem;padding:.3rem .6rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--dim)}
.gesture input{position:absolute;opacity:0;width:1px;height:1px}
.gesture label:has(input:checked){border-color:rgba(201,162,39,.6);background:rgba(201,162,39,.12);color:#e8cf7a}
.gcap{display:block;font-size:.63rem;color:rgba(255,255,255,.6);margin-top:.1rem;
  text-shadow:0 1px 4px rgba(0,0,0,.9);font-style:italic}

/* 화면 스위치 — 폰에서 상단바가 못 담는 것들이 여기로 온다 */
.screenopts{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.7rem}
.screenopts .ghost{font-size:.74rem;padding:.4rem .7rem;min-height:auto}
/* 데스크톱에는 상단바에 이미 있다 — 두 번 두지 않는다 */
@media(min-width:481px){ .screenopts{display:none} }

/* ⑦ 펠트 — 서랍 머리에 탁자 면을 깐다. 노이즈 없이 아주 옅게. */
.gamebody #drawer>.hero{
  background:linear-gradient(180deg,var(--felt),transparent 76%);
  border-radius:14px 14px 0 0;
}

/* 🔴 손으로 놓은 흔적 — 카드류에 ±0.4도. nth-child 고정값이라 리렌더에 안정적이다.
      난수를 쓰면 새로고침마다 각도가 바뀌어 「덜그럭거리는」 화면이 된다. */
.roll:nth-child(3n+1){transform:rotate(-.25deg)}
.roll:nth-child(3n+2){transform:rotate(.3deg)}

@media (prefers-reduced-motion:reduce){
  .roll,.roll.landed .die,.roll.duel .die,.roll.duel+.roll.duel .die{transform:none}
}
.fr.me{border-color:rgba(124,92,255,.7);box-shadow:0 0 12px rgba(124,92,255,.3)}

/* VN 서술 박스 */
.vnbox{margin:.5rem .7rem .45rem;border-radius:18px;padding:.95rem 1.1rem;
  background:rgba(8,8,16,.82);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);
  max-width:46rem;width:calc(100% - 1.4rem);align-self:center}
.vnbox>b{display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;color:var(--a3);
  margin-bottom:.4rem}
.vnbox>b .spot{font-size:.66rem;letter-spacing:0;margin-left:.5rem;color:var(--dim)}
.vnbox>b .spot.me{color:#c9b8ff}
.vnbox>p{font-family:var(--serif);font-size:.98rem;line-height:1.8;color:#ece8f2;margin:0}
.vnbox .vnfacts{margin-top:.55rem}
.vnbox .vnfacts summary{font-size:.76rem;color:var(--a3);cursor:pointer;list-style:none;font-weight:700}
.vnbox .vnfacts summary::-webkit-details-marker{display:none}
.vnbox .vnfacts ul{list-style:none;margin:.45rem 0 0;padding:0;font-size:.85rem;line-height:1.65;
  color:#cfc9d8}
.vnbox .vnfacts li{padding-left:.9rem;text-indent:-.9rem;margin-bottom:.3rem;word-break:keep-all}
.vnbox .vnfacts li:before{content:'· ';color:var(--a3)}
.vnbox .vnfacts .free{font-size:.72rem;opacity:.6;margin:.35rem 0 0}
.vnbox .idle{font-size:.78rem;color:rgba(255,255,255,.65);margin:.5rem 0 0;
  border-top:1px dashed rgba(255,255,255,.15);padding-top:.5rem}
.vnbox .idle i{font-style:normal;font-weight:800;color:var(--a2)}

/* 액션 독 */
.dock{display:flex;gap:.5rem;padding:.15rem .7rem calc(.7rem + env(safe-area-inset-bottom));
  max-width:46rem;width:100%;align-self:center}
.dk{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem;
  height:2.9rem;border-radius:14px;font-size:.88rem;font-weight:800;text-decoration:none;
  color:#fff;background:rgba(10,10,18,.7);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px)}
.dk u{text-decoration:none;min-width:18px;height:18px;border-radius:999px;background:var(--a3);
  color:#04222c;font-size:.66rem;font-weight:800;display:grid;place-items:center;padding:0 4px}
.dk.go{background:var(--pri);border:0;flex:1.4;
  animation:turnpulse 2.6s ease infinite}
.dk.next{flex:.9;background:rgba(255,255,255,.08);color:rgba(255,255,255,.78)}
/* 🔴 손잡이가 넷이 되면 375px 에서 넘친다 — .stage 는 overflow:hidden 이라 줄바꿈이 아니라 잘린다 */
.dk.read{flex:.75}
.dk.read span{margin-left:.1rem}
@media(max-width:430px){.dk.read{flex:0 0 auto;padding:0 .55rem}.dk.read span{display:none}}
/* 본문 끝 → 제출 폼으로 잇는 앵커 (P1-3). 접힘 안이라 위쪽 여백만 살짝 준다 */
.jumpsubmit{margin:1.2rem 0 .2rem}
.dk.sealed2,.dk.done2{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);font-weight:700;
  font-size:.8rem;flex:1.6}
.scrollhint{align-self:center;font-size:.7rem;color:rgba(255,255,255,.5);text-decoration:none;
  padding:.1rem 0 .5rem;animation:hintbob 2.2s ease infinite}
@keyframes hintbob{50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.scrollhint,.dk.go{animation:none}}

/* 🔴 재방문 축소 모드 — 기본은 꺼짐. dock.js 가 body 에 클래스를 붙일 때만 적용된다.
   접두 없는 규칙을 여기에 새로 만들지 마라 — 기본 화면이 바뀐다. */
body.stageslim .stage{min-height:0}
body.stageslim .stagefloor{padding-top:.5rem}
body.stageslim .standee img{max-height:6.5rem;max-width:18vw}
body.stageslim .standee figcaption{font-size:.62rem}
body.stageslim .standee.in{transform:none}
body.stageslim .framerow{padding-bottom:.35rem}
body.stageslim .fr{width:60px}
body.stageslim .fr img,body.stageslim .fr i{height:52px}
body.stageslim .fr i{font-size:1.1rem}
body.stageslim .scrollhint{display:none}

/* 폰: 상단바 압축 — 실측 390px 에서 🔇 가 7px 잘리고 제목이 10px 로 짜부됐다 */
@media(max-width:480px){
  .stagebar{gap:.35rem;padding-left:.55rem;padding-right:.55rem}
  .stagebar .sb-meta{display:none}
  .stagebar b{flex:1;min-width:0}
  .stagebar .sb,.stagebar .hud>summary{width:44px;height:44px;flex:0 0 44px;font-size:.9rem;border-radius:11px}
  /* 제목과 핵심 HUD 5개가 320px 에서도 찌그러지지 않게 저빈도 조작은 자동 동작에 맡긴다. */
  .stagebar [data-soundbtn],.stagebar [data-slimbtn]{display:none}
  .turnfocus{grid-template-columns:1fr;padding:.68rem .78rem;gap:.45rem}
  .tf-kicker,.tf-side span,.tf-side i,.learntip{font-size:.82rem}
  .tf-side{flex-direction:row;align-items:center;justify-content:space-between;text-align:left}
  .learntip{align-items:flex-start}
}

/* PC — 무대를 극장 스크린처럼 가운데에 */
@media(min-width:900px){
  .stage{min-height:min(92dvh,820px);max-width:64rem;margin:0 auto;border-radius:0 0 26px 26px;
    box-shadow:0 30px 80px rgba(0,0,0,.5)}
  .standee img{max-height:min(50dvh,470px);max-width:15rem}
  .hud>div.hudin{left:auto;right:1rem;width:min(30rem,92%)}
}


/* ---------- 의식 오버레이 (docs/12 G3) ---------- */
.ritual{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(3,3,8,.85);backdrop-filter:blur(8px);animation:insfade .18s ease}
.ritual.seal{flex-direction:column;gap:.4rem;pointer-events:none}
.ritual.seal i{font-style:normal;font-size:3.4rem;animation:sealstamp .5s cubic-bezier(.2,.9,.3,1.3)}
.ritual.seal b{font-size:1.1rem;font-weight:800;letter-spacing:.5em;color:#ffb3c7;
  animation:sealfade .45s ease .18s both}
@keyframes sealstamp{0%{transform:scale(2.4) rotate(-14deg);opacity:0}
  60%{transform:scale(.92) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes sealfade{from{opacity:0;transform:translateY(6px)}}
.ritual .actin{max-width:26rem;width:calc(100% - 2.4rem);border-radius:22px;padding:1.6rem 1.5rem;
  background:linear-gradient(150deg,rgba(28,20,8,.96),rgba(16,10,14,.96));
  border:1px solid rgba(255,196,92,.45);box-shadow:0 30px 80px rgba(0,0,0,.7);
  animation:insrise .3s cubic-bezier(.2,.8,.3,1)}
.ritual .actin b{display:block;font-size:.72rem;font-weight:800;letter-spacing:.34em;color:#ffd08a}
.ritual .actin i{display:block;font-style:normal;font-size:1.25rem;font-weight:800;margin:.35rem 0 .7rem}
.ritual .actin ul{margin:0 0 1.1rem;padding-left:1.1rem;display:grid;gap:.4rem}
.ritual .actin li{font-size:.85rem;line-height:1.65;color:var(--dim)}
.ritual .actin li.warn{color:#ffb3c7}
.ritual .actin li.grow{color:#9fe0f5}
.ritual .actin .btn{width:100%;margin:0}
.ritual.reveal .rvin{max-width:22rem;width:calc(100% - 2.4rem);text-align:center;border-radius:22px;
  padding:2rem 1.5rem;background:linear-gradient(160deg,rgba(20,14,34,.97),rgba(10,8,18,.97));
  border:1px solid rgba(167,139,250,.45);box-shadow:0 30px 80px rgba(0,0,0,.7);
  animation:insrise .3s cubic-bezier(.2,.8,.3,1)}
.ritual.reveal i{display:block;font-style:normal;font-size:3rem;
  animation:rvbob 1.1s ease-in-out infinite alternate}
.ritual.reveal b{display:block;font-size:1.15rem;font-weight:800;margin:.5rem 0 .2rem}
.ritual.reveal span{display:block;font-size:.8rem;color:var(--dim);margin-bottom:1.2rem}
.ritual.reveal .btn{width:100%;margin:0}
@keyframes rvbob{from{transform:translateY(-3px) rotate(-6deg)}to{transform:translateY(3px) rotate(6deg)}}
/* 🧭 길잡이 코치마크 — 첫 방문 1회. 링 밖은 그림자로 어둡고, 링 안만 또렷하다 */
.coach{position:fixed;inset:0;z-index:140;animation:insfade .2s ease}
.coachring{position:fixed;border:2px solid #c9b8ff;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(3,3,8,.62),0 0 26px rgba(167,139,250,.55);
  transition:top .3s cubic-bezier(.2,.8,.3,1),left .3s cubic-bezier(.2,.8,.3,1),
    width .3s cubic-bezier(.2,.8,.3,1),height .3s cubic-bezier(.2,.8,.3,1)}
.coachbub{position:fixed;left:50%;transform:translateX(-50%);z-index:1;
  width:min(21rem,calc(100vw - 2rem));background:rgba(14,12,24,.97);
  border:1px solid rgba(167,139,250,.4);border-radius:16px;padding:1rem 1.1rem;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.coachbub b{font-size:.66rem;font-weight:800;letter-spacing:.22em;color:var(--a3)}
.coachbub p{font-size:.88rem;line-height:1.7;margin:.4rem 0 .85rem;word-break:keep-all}
.coachbub .btn{width:100%;margin:0;padding:.6rem}
@media(prefers-reduced-motion:reduce){.coachring{transition:none}}
@media (prefers-reduced-motion: reduce){.ritual.reveal i{animation:none}}
.ritual.credits .crin{max-width:24rem;width:calc(100% - 2.4rem);text-align:center;
  border-radius:22px;padding:2rem 1.5rem;background:rgba(10,10,18,.96);
  border:1px solid rgba(255,205,86,.35);animation:insrise .4s cubic-bezier(.2,.8,.3,1)}
.ritual.credits img{width:130px;aspect-ratio:3/4;object-fit:cover;border-radius:10px;
  margin-bottom:1rem;box-shadow:0 16px 40px rgba(0,0,0,.6)}
.ritual.credits b{display:block;font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.ritual.credits span{display:block;font-size:.82rem;color:var(--a3);margin-top:.25rem}
.ritual.credits em{display:inline-block;font-style:normal;font-size:.66rem;font-weight:800;
  letter-spacing:.3em;color:#ffd08a;border:1px solid rgba(255,205,86,.4);border-radius:999px;
  padding:.25rem .8rem;margin:.8rem 0}
.ritual.credits ul{list-style:none;margin:0 0 .6rem;padding:0;display:grid;gap:.25rem}
.ritual.credits li{font-size:.85rem;color:var(--fg)}
.ritual.credits p{font-size:.74rem;color:var(--dim);margin-bottom:1.2rem}
.ritual.credits .btn{width:100%;margin:0}
@media(prefers-reduced-motion:reduce){.ritual,.ritual *{animation:none !important}}

/* ---------- 내 인물들 (docs/12 G4a) ---------- */
.mycast{display:flex;gap:.7rem;overflow-x:auto;padding:1.1rem .1rem .4rem;-webkit-overflow-scrolling:touch}
.mc{flex:none;width:86px;text-align:center;text-decoration:none;color:var(--fg);position:relative}
.mc img,.mc i{width:74px;height:74px;border-radius:50%;object-fit:cover;object-position:top;
  display:inline-grid;place-items:center;font-style:normal;font-size:1.5rem;font-weight:800;color:#fff;
  background:var(--pri);border:2px solid var(--line)}
.mc b{display:block;font-size:.74rem;font-weight:800;margin-top:.3rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mc span{display:block;font-size:.62rem;font-weight:800;color:var(--a2)}
.mc.turn img,.mc.turn i{border-color:var(--a2);box-shadow:0 0 14px rgba(255,92,138,.4);
  animation:turnpulse 2.6s ease infinite}
.mc.fin{opacity:.65}
.mc.fin span{color:var(--dim)}

/* 🎲 랜덤 추천 버튼 */
.dicebtn{float:right;font-size:.74rem;font-weight:800;padding:.3rem .65rem;border-radius:999px;
  border:1px solid rgba(124,92,255,.45);background:rgba(124,92,255,.12);color:#c9b8ff;cursor:pointer}
.dicebtn:hover{background:rgba(124,92,255,.22)}
.dicebtn.rolling{animation:diceroll .4s ease}
@keyframes diceroll{30%{transform:rotate(-12deg) scale(1.08)}70%{transform:rotate(8deg)}}
@media(prefers-reduced-motion:reduce){.dicebtn.rolling{animation:none}}

/* ══════════ 편집형 UI — 작품과 사람이 제품 장식보다 먼저 보이게 ══════════ */
:root{
  --bg:#0a0a0d;--bg2:#111116;--fg:#eeece8;--dim:#aaa6ae;
  --line:rgba(238,236,232,.12);--card:rgba(238,236,232,.035);
  --a1:#786aa5;--a2:#a66f84;--a3:#82aeb5;--r:12px;--r-s:8px;
  --pri:#7566a6;   /* 읽기 모드는 더 가라앉는다 — 책은 조용해야 한다 */
}
body::before{background:
  radial-gradient(42rem 30rem at 12% -8%,rgba(120,106,165,.08),transparent 66%),
  radial-gradient(38rem 28rem at 90% 8%,rgba(166,111,132,.045),transparent 68%)}
h1 em{background:none;-webkit-background-clip:initial;background-clip:initial;color:#c9bfd8}
header{background:rgba(10,10,13,.92);backdrop-filter:none}
.logo i{border-radius:5px;background:#786aa5;box-shadow:none}
.ghost{background:transparent}
.chip,.badge,.myturn,.dicebtn,.rooms>summary{border-radius:7px}
.panel{background:#111116;backdrop-filter:none;border-radius:16px;box-shadow:none}
.btn,.cta,.mini.go,.actbar a,.dk.go,.mgr-send button{
  background:#7566a6;box-shadow:none}
.btn:hover,.cta:hover{filter:brightness(1.12);transform:none}
.btn:active,.cta:active{transform:translateY(1px)}
.steps span.on i{background:#7566a6;box-shadow:none}
.dicebtn{background:transparent;border-color:rgba(238,236,232,.22);color:var(--dim)}
.dicebtn:hover{background:rgba(238,236,232,.05);color:var(--fg)}
.decision{background:transparent;border-radius:12px}
.decision legend b{background:#7566a6}
.work{transition:opacity var(--dur-fast)}
.work:hover{transform:none;opacity:.92}
.poster{border-radius:10px;box-shadow:inset 7px 0 10px -8px rgba(0,0,0,.7)}
.poster.ongoing::before{content:"";position:absolute;z-index:1;inset:0 auto 0 0;width:5px;
  background:rgba(238,236,232,.08);border-right:1px solid rgba(238,236,232,.08)}
.covermark{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:1;
  font-family:var(--serif);font-style:normal;font-size:clamp(3.2rem,7vw,5.4rem);font-weight:800;
  color:rgba(238,236,232,.11);line-height:1}
.poster::after{background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.28) 68%,rgba(0,0,0,.86))}
.badge{background:rgba(10,10,13,.74);backdrop-filter:none;letter-spacing:.03em}
.badge.live{background:#62578b;border-color:#776a9f}
.poster .chatband{border-radius:6px;background:rgba(10,10,13,.78);backdrop-filter:none;color:var(--fg)}
.bar{height:2px;background:rgba(238,236,232,.1)}
.bar i,.bar.finale i{background:#8375ad;animation:none}
.turncta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.4rem;
  padding:.8rem .95rem;border:1px solid var(--line);border-left:3px solid #8375ad;border-radius:10px;
  background:#111116;color:var(--fg);animation:none;text-decoration:none}
.turncta b{font-size:.8rem;font-weight:700;color:var(--dim)}
.turncta span{font-size:.9rem;font-weight:800;text-align:right}
.hero.slim{padding-top:1.1rem;padding-bottom:.5rem}
.eyebrow{letter-spacing:.08em;text-transform:none}
.mycast{gap:.9rem;padding-top:.8rem;scrollbar-width:none}
.mycast::-webkit-scrollbar,.mgr-rooms::-webkit-scrollbar{display:none}
.mgr-rooms{scrollbar-width:none}
.mc img,.mc i{border-radius:10px;background:#24222c;border:1px solid var(--line)}
.mc.turn img,.mc.turn i{border-color:#8d7eb8;box-shadow:none;animation:none}
.mc span{color:#b6aacb}

/* 게임 무대: 배경 그림은 살리고 조작부만 조용하게 */
.stagebar .sb-title{display:flex;align-items:center;gap:.45rem;min-width:0;color:#fff;text-decoration:none}
.stagebar .sb-title>span{display:grid;place-items:center;width:2.1rem;height:2.1rem;flex:none;
  border-radius:8px;background:rgba(8,8,12,.62);border:1px solid rgba(255,255,255,.14)}
.stagebar .sb,.stagebar .hud>summary{border-radius:8px;backdrop-filter:none}
.stagebar .hud[open]>summary{background:#675b91;border-color:#8477ad}
.hud>div.hudin{border-radius:12px;background:rgba(12,12,16,.97);backdrop-filter:none;box-shadow:0 18px 45px rgba(0,0,0,.5)}
.turnfocus{border-radius:10px;background:rgba(10,10,14,.9);backdrop-filter:none;box-shadow:none}
.tf-kicker{color:#a8c9ce;letter-spacing:.04em}
.learntip{border-radius:8px;background:rgba(10,10,14,.82)}
.fr{border-radius:9px;background:rgba(10,10,14,.82);backdrop-filter:none}
.fr.me{box-shadow:none;border-color:#8d7eb8}
.vnbox{border-radius:12px;background:rgba(10,10,14,.9);backdrop-filter:none}
.dk{border-radius:9px;background:rgba(10,10,14,.86);backdrop-filter:none}
.dk.go{background:#7566a6;animation:none}
.dk.next{background:rgba(238,236,232,.08)}
.scrollhint{animation:none}
.mmchip{border-radius:6px}

/* 상세 플레이: 카드보다 여백과 선으로 구분 */
.gamebody #drawer .panel.wide{padding:1.15rem 0;background:transparent;border:0;border-top:1px solid var(--line);
  border-radius:0;box-shadow:none}
.gamebody #drawer .narrator{padding:.25rem 0 .25rem 1rem;background:transparent;border:0;
  border-left:2px solid rgba(130,174,181,.55);border-radius:0}
.gamebody #drawer .quicknote{padding:.55rem 0;margin-bottom:.8rem;background:transparent;border:0;
  color:var(--dim)}
.gamebody #drawer .approach{gap:.4rem}
.gamebody #drawer .ap{border-radius:8px;background:transparent}
.gamebody #drawer .ap.luck{background:rgba(120,106,165,.045)}
.gamebody #drawer .ap:has(input:checked){background:rgba(120,106,165,.12);border-color:#8d7eb8;box-shadow:none}
.gamebody #drawer .slot{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
.pushnote{background:transparent;border-radius:8px;box-shadow:none}
.ctab{border-radius:0!important;background:transparent!important;border:0!important;
  border-bottom:2px solid transparent!important;padding-left:.15rem!important;padding-right:.15rem!important}
.ctab.on{color:var(--fg)!important;border-bottom-color:#8d7eb8!important}
.actbar{background:rgba(10,10,13,.94);backdrop-filter:none}

/* 메신저: 필터 카드가 아니라 사람의 대화 목록 */
.mgr{background:#0b0b0f;min-width:0;max-width:100%}
.mgr-side,.mgr-main{background:#0e0e13;min-width:0}
.mgr-room{border-radius:8px}
.mgr-room.on{background:rgba(238,236,232,.055);box-shadow:inset 2px 0 0 #8d7eb8}
.mgr-av,.mgr-room.lb .mgr-av,.mgr-room.dm .mgr-av{border-radius:8px;background:#24222c;color:#d9d5dc}
.mgr-room.dm .mgr-meta b{color:var(--fg)}
.mgr-badge{background:#7566a6}
.mgr-top{background:#0d0d11;backdrop-filter:none}
.mgr-day{border-radius:6px}
.bub .bd{background:#17171d;border-radius:12px 12px 12px 4px}
.bub.me .bd{background:#62578b;border-radius:12px 12px 4px 12px}
.bub.run .bd{border-radius:4px 12px 12px 4px}
.bub.me.run .bd{border-radius:12px 4px 4px 12px}
.mgr-send{background:#0d0d11;min-width:0;width:100%}
.mgr-send textarea{min-width:0}
.mgr-send textarea,.mgr-send button{border-radius:9px}

/* 완결작은 운영 화면이 아니라 조용한 읽기 공간 */
.readerbody::before{background:none}
.readerbody header{position:relative;background:transparent;border-bottom:1px solid rgba(238,236,232,.08)}
.readerbody header .rooms,.readerbody header .who{display:none}
.readerbody main{padding-top:1rem}
.readerbody .bookcover{border-radius:8px;box-shadow:none}
.readerbody .donestats{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.65rem 0}
.readerbody .donestats span{border:0;background:transparent;border-radius:0;padding:.25rem .8rem .25rem 0;margin-right:.8rem}
.readerbody details.fold{background:transparent;border-left:0;border-right:0;border-radius:0}

@media(max-width:860px){
  .mgr-top{min-width:0}
  .mgr-top em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mgr-room{flex-direction:row;width:auto;min-width:4.6rem;padding:.5rem .65rem;border-radius:0;
    border-bottom:2px solid transparent}
  .mgr-room.on{background:transparent;box-shadow:none;border-bottom-color:#8d7eb8}
  .mgr-av{display:none}
  .mgr-badge{position:static;transform:none}
}
@media(max-width:520px){
  header{padding:.55rem .7rem}
  .topnav{gap:.35rem}
  .rooms>summary,.accountmenu>summary{min-height:44px;height:44px}
  .accountmenu>div{top:3rem}
  .turncta{align-items:flex-start;flex-direction:column;gap:.2rem}
  .turncta span{text-align:left}
}
@media(max-width:480px){
  .stagebar .sb-title{flex:1}
  .stagebar .sb-title b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stagebar .sb-title>span{width:44px;height:44px}
  .stagebar .hud:nth-of-type(2){display:none}
}