/* 물음표 — 모바일 우선. 어둡고 장난기 있는 톤. */
:root{
  --bg:#0b0b10;--bg2:#13131b;--card:#181824;--line:rgba(255,255,255,.09);
  --ink:#f3f1ff;--ink2:#b7b4c9;--ink3:#7d7a92;
  --q:#ffd23f;--q2:#ff8f3f;--good:#6ee7b7;--bad:#ff6b8a;
  --r:16px;--font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:var(--font);background:radial-gradient(circle at 50% -10%,rgba(255,210,63,.10),transparent 42%) no-repeat,var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.6;overscroll-behavior-y:contain}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:var(--q);text-decoration:none}
.wrap{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
#main{flex:1;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;height:44px}
.logo{font-weight:900;font-size:18px;letter-spacing:-.02em}
.logo{display:inline-flex;align-items:center;gap:1px;color:var(--ink)}
.logo-q{height:20px;width:20px;margin:0 3px 1px;display:inline-block;vertical-align:-1px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{font-size:12.5px;padding:7px 11px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--ink2)}
.chip.on{border-color:var(--q);color:var(--ink)}
.fb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:12.5px}.fb .q,.fb .muted{color:var(--ink3)}.fb input{flex:1;min-width:0;font:inherit;font-size:13px;padding:7px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.nickline{font-size:12.5px;color:var(--ink3);margin:0 0 8px}.nickline b{color:var(--ink2)}.nickline button{font:inherit;font-size:12px;background:none;border:0;color:var(--q);padding:0 4px;text-decoration:underline}
.pill{font-size:12.5px;color:var(--ink2);background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:5px 11px}button.pill{font:inherit;font-size:12.5px;cursor:pointer;line-height:inherit}button.pill:active{border-color:var(--q)}
.pill b{color:var(--q);font-weight:800}
.ghost{font-size:13px;color:var(--ink2);padding:6px 10px;border-radius:10px}
.ghost:active{background:var(--bg2)}

/* 홈: 박스 */
.home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px}
.box{width:168px;height:168px;border-radius:34px;background:linear-gradient(145deg,#ffe066,#ff9a3f);box-shadow:0 18px 50px rgba(255,160,60,.28),inset 0 -8px 0 rgba(0,0,0,.14),inset 0 2px 0 rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:96px;font-weight:900;color:#2a1a05;position:relative;transition:transform .15s;user-select:none;-webkit-tap-highlight-color:transparent}
.box-q{width:100%;height:100%;display:block;pointer-events:none}
.box:active{transform:scale(.96)}
.box.idle{animation:bob 2.6s ease-in-out infinite}
.box.shake{animation:shake .5s ease-in-out}.box.wait{animation:shake .55s ease-in-out infinite}
.box.pop{animation:pop .3s cubic-bezier(.2,1.4,.4,1) forwards}
.box.dim{filter:grayscale(1) brightness(.5);animation:none}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg) scale(1.02)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(5deg)}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.18) rotate(3deg);opacity:1}100%{transform:scale(.6);opacity:0}}
.home h1{font-size:22px;font-weight:900;margin:0;letter-spacing:-.02em}
.home p{margin:0;color:var(--ink2);font-size:14px}
.home .hint{font-size:12.5px;color:var(--ink3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:14px 18px;border-radius:14px;font-weight:800;font-size:15px;width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--ink)}
.btn.q{background:linear-gradient(135deg,var(--q),var(--q2));color:#2a1a05;border:0}
.btn.sm{width:auto;padding:10px 14px;font-size:13.5px;border-radius:12px}
.btn:disabled{opacity:.45}
.row{display:flex;gap:8px}
.row .btn{flex:1}

/* 리더 */
.reader{flex:1;display:flex;flex-direction:column;gap:12px;padding-top:8px}
.axis{font-size:12px;color:var(--q);font-weight:800;letter-spacing:.04em}
.title{font-size:21px;font-weight:900;margin:0 0 4px;letter-spacing:-.02em;line-height:1.35}
.frag{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;animation:up .35s ease-out both}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.frag .src{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink3);margin-bottom:8px}
.frag .src .k{font-weight:800;color:var(--ink2);background:rgba(255,255,255,.06);padding:2px 7px;border-radius:6px;white-space:nowrap;flex:none}
.frag .tx{font-size:15px;white-space:pre-wrap;word-break:keep-all;color:var(--ink)}
.frag.post .tx{font-family:var(--font)}
.frag.news .tx{font-family:"Noto Serif KR",Georgia,serif;font-size:14.5px}
.frag.memo .tx{font-size:14.5px;color:#e6e3f5;font-style:normal;background:rgba(255,255,255,.03);border-radius:8px;padding:8px 10px}
.frag.log .tx,.frag.doc .tx{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#d9d6ec;letter-spacing:-.01em}
.frag.chat .tx{background:rgba(255,255,255,.04);border-radius:10px;padding:8px 10px}
.frag.listing{border-color:rgba(255,210,63,.35)}
.frag.wiki .tx{border-left:3px solid var(--line);padding-left:10px}
.choice{display:flex;flex-direction:column;gap:8px;margin-top:4px;animation:up .35s .1s ease-out both}
.reader .choice:not(.open){animation:up .4s .95s ease-out both} /* lead → 카드 → 갈림길(10-10 레디 P1-9: 카드를 다 읽기 전에 버튼부터 읽지 않게) */
.choice .btn{justify-content:flex-start;padding:13px 16px;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.choice .btn .lab{font-size:15px}
.coach{font-size:12.5px;color:var(--ink2);line-height:1.55;padding:10px 12px;border-radius:12px;background:rgba(255,210,63,.07);border:1px dashed rgba(255,210,63,.35);margin-bottom:2px}
.choice .btn small{font-size:11.5px;color:var(--ink3);font-weight:600}
.altrow{display:flex;gap:14px;padding:2px 4px}
.altbtn{font-size:13px;color:var(--ink3);padding:6px 4px;text-align:left}
.altbtn:active{color:var(--ink)}
.tag{display:inline-block;font-size:11px;color:var(--ink2);background:rgba(255,255,255,.07);padding:1px 7px;border-radius:999px;font-weight:600;vertical-align:middle}
.frag .src .by{margin-left:auto;color:var(--q);font-weight:700}
.frag.pend{border-style:dashed}
.ending.pend{border-style:dashed;border-color:rgba(255,255,255,.3)}
.by-end{font-size:12px;color:var(--ink3);font-weight:500;margin-top:8px}
.ending{margin-top:6px;padding:16px;border-radius:var(--r);background:linear-gradient(180deg,rgba(255,210,63,.08),transparent);border:1px dashed rgba(255,210,63,.4);font-size:16px;font-weight:700;animation:up .4s ease-out both;white-space:pre-wrap}
.ending.b{border-color:rgba(255,255,255,.2);color:var(--ink2);font-weight:600}
.next{align-self:stretch;width:100%;margin-top:2px;color:var(--ink3);font-size:13px;padding:16px;border-radius:14px;border:1px dashed var(--line);background:rgba(255,255,255,.015)}
.next:active{color:var(--ink);background:rgba(255,255,255,.04)}
.frag.tap{cursor:pointer}
.frag.tap:active{border-color:var(--ink3)}
.fict{font-size:11.5px;color:var(--ink3);text-align:center;margin-top:6px}

/* 엔딩 액션 */
.after{display:flex;flex-direction:column;gap:10px;margin-top:8px;animation:up .4s .15s ease-out both}
.react{display:flex;gap:8px}
.react .btn{flex:1}
.react .btn.on{border-color:var(--bad);color:var(--bad);background:rgba(255,107,138,.08)}
.author{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink2);padding:4px 2px}
.author .btn{width:auto}
.remix{border:1px solid rgba(255,210,63,.35);background:rgba(255,210,63,.06);border-radius:var(--r);padding:14px}
.remix h3{margin:0 0 6px;font-size:15px}
.remix p{margin:0 0 10px;font-size:13px;color:var(--ink2)}
.remix input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:16px;margin-bottom:8px}
.remix .tabs{display:flex;gap:6px;margin-bottom:10px}
.remix .tabs button{flex:1;padding:9px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font-size:13px;color:var(--ink2)}
.remix .tabs button.on{color:var(--ink);border-color:var(--q)}
.remix .cr{font-size:12px;color:var(--ink3);text-align:right}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--q);animation:sp .8s linear infinite;margin:0 auto}
@keyframes sp{to{transform:rotate(360deg)}}

/* 공유 랜딩 */
.share-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px}
.share-hero h1{font-size:28px;font-weight:900;margin:0;letter-spacing:-.02em}
.share-hero p{margin:-6px 0 14px;color:var(--ink);font-size:16px;line-height:1.5;word-break:keep-all}
.share-hero .from{font-size:15px;color:var(--ink2);font-weight:700}
.land .top .pill,.land .top .ghost,.land .foot{display:none} /* 공유 첫 화면: 누를 것은 상자 하나 */

/* 시트 */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:flex-end;z-index:20;animation:fade .2s}
.sheet>div{background:var(--bg2);width:100%;max-width:480px;margin:0 auto;border-radius:22px 22px 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--line);max-height:92vh;overflow:auto}
.sheet h3{margin:0 0 8px;font-size:17px}
.sheet p{margin:0 0 14px;font-size:14px;color:var(--ink2)}
.sheet .packs{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.sheet .packs .btn{justify-content:space-between}
@keyframes fade{from{opacity:0}to{opacity:1}}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#fff;color:#111;font-size:13.5px;font-weight:700;padding:10px 16px;border-radius:14px;z-index:30;animation:up .25s;max-width:min(320px,88vw);width:max-content;text-align:center;pointer-events:none;word-break:keep-all;line-height:1.45}
.empty{text-align:center;color:var(--ink2);font-size:14px;line-height:1.7}
.foot{text-align:center;font-size:11.5px;color:var(--ink3);margin-top:16px}
.foot a{color:var(--ink3);text-decoration:underline}
/* 갈래 만들기 — 초안 편집 단계 */
.remix textarea{width:100%;min-height:120px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:16px;line-height:1.55;margin-bottom:4px;resize:vertical}
.remix .cnt{font-size:11.5px;color:var(--ink3);text-align:right;margin-bottom:8px}
.remix .lbl{font-size:12px;color:var(--ink3);margin:2px 0 6px}
.remix .cont{border-left:2px solid var(--line);padding:2px 0 2px 12px;margin:0 0 14px}
.remix .cont .q{font-size:14px;line-height:1.6;color:var(--ink2);word-break:keep-all}
.remix .lnk{display:block;width:100%;background:none;border:0;color:var(--ink2);font-size:13px;padding:10px 4px;text-align:center;text-decoration:underline;text-underline-offset:3px}
.remix .lnk:active{color:var(--ink)}
/* 갈림길 표식(고른 갈래를 접어 둔 자리) · 다시 펼친 갈래 목록 */
.fork{display:flex;align-items:center;gap:8px;width:100%;margin:2px 0;padding:8px 12px;border-radius:999px;border:1px dashed var(--line);background:transparent;color:var(--ink3);font-size:12.5px;text-align:left;animation:up .3s ease-out both}
.fork .fk{color:var(--q);font-weight:800}
.fork .lab{color:var(--ink2);font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fork .n{white-space:nowrap}
.fork:active{color:var(--ink);border-color:var(--ink3)}
.choice.open{margin:4px 0 8px;padding:8px;border-radius:var(--r);border:1px dashed var(--line);background:rgba(255,255,255,.02)}
.choice .btn.cur{border-color:rgba(255,210,63,.5)}
.choice .btn .lab .tag{margin-left:4px;color:var(--q);background:rgba(255,210,63,.12)}
/* 내 이야기 편집기 */
.remix.story{border-color:rgba(255,210,63,.25)}
.fcard{border:1px solid var(--line);border-radius:12px;padding:10px;margin:0 0 10px;background:rgba(255,255,255,.02)}
.fcard .hd{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink3);margin-bottom:6px}
.fcard .hd .altbtn{padding:2px 4px}
.fcard input,.fcard textarea{margin-bottom:6px}
.fcard textarea{min-height:96px}
/* 레디 진단(10-04) — 홈 축 칩 · 결말 카드 안 좋아요 · 갈림길 두 번째 버튼 · 결말 뒤 쓰기 줄 */
.home .chips.axes{justify-content:center;margin:-6px 0 0}
.home .chips.axes .chip{font-size:12.5px}
.ending .like{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--ink2);background:none;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 12px}
.ending .like.on{border-color:var(--bad);color:var(--bad);background:rgba(255,107,138,.08)}
.choice .btn.alt{opacity:.85}
.altrow.center{justify-content:center;gap:18px}
/* 갈림길 = 밸런스 게임: 고르면 막대가 차오르고 퍼센트가 뜬다 · 보낸 사람과 비교 한 줄 */
.choice .q{font-size:12.5px;color:var(--ink3);font-weight:700;padding:0 4px;min-height:16px}
.choice .btn{position:relative;overflow:hidden}
.choice .btn .lab,.choice .btn small{position:relative}
.choice .btn .bar{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.07);transition:width .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.choice .btn.pick .bar{background:rgba(255,210,63,.16)}
.choice .btn .pct{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:800;color:var(--ink2);opacity:0;transition:opacity .3s .2s}
.choice .btn.pick .pct{color:var(--q)}
.choice.voted .btn .pct{opacity:1}
.choice.voted .btn:disabled{opacity:1}
.choice.voted .btn:not(.pick){color:var(--ink3)}
.cmp{font-size:12.5px;color:var(--ink2);padding:2px 10px 4px;animation:up .3s ease-out both}
.cmp.sum{text-align:center;padding:6px 10px;border:1px dashed var(--line);border-radius:12px}
/* 결말 반응 줄(♡ + 이모지) · 결말 카드 미리보기 */
.ending .reacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ending .like{margin-top:0}
.ending .emo{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--ink2);background:none;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 11px}
.ending .emo .n{font-size:12px;color:var(--ink3)}
.ending .emo.on{border-color:var(--q);color:var(--ink);background:rgba(255,210,63,.12)}
.ending .emo.on .n{color:var(--q)}
.card-prev{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);margin:0 0 12px}
.sheet .btn+.btn{margin-top:8px}
/* 손맛: 진행 표시 · 바닥 고정 바 */
.axis{display:flex;justify-content:space-between;align-items:center}
.axis .prog{font-size:12px;color:var(--ink3);font-weight:800;letter-spacing:.02em}
.axis .prog i{font-style:normal;color:var(--ink3);font-weight:600}
.stick{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(11,11,16,0),rgba(11,11,16,.96) 30%);z-index:15;transform:translateY(110%);transition:transform .25s ease-out;pointer-events:none;max-width:480px;margin:0 auto}
.stick.on{transform:none;pointer-events:auto}
.stick .btn{flex:1;padding:13px}
/* '결말' → '지금까지': 라벨 + 열린 줄(다음 조각은 내 차례) */
.ending .lbl{font-size:11px;font-weight:800;color:var(--q);letter-spacing:.08em;margin-bottom:8px;opacity:.9}
.ending.b .lbl{color:var(--ink3)}
.openline{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink3);padding:2px 6px;animation:up .4s .1s ease-out both}
.openline .altbtn{white-space:nowrap;color:var(--q)}
/* 내 이야기 만들기 페이지(/write): 질문 하나 → 카드 고치기 → 올리기 */
.wr{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.wr .steps{display:flex;gap:10px;font-size:11.5px;color:var(--ink3);font-weight:700}
.wr .steps .on{color:var(--q)}
.wr h1.q{font-size:22px;font-weight:900;margin:6px 0 0;letter-spacing:-.02em}
.wr .sub{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.6}
.wr textarea.ask{width:100%;min-height:120px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:16px;line-height:1.6;resize:none}
.wr .chips.tier{margin-top:-4px}
.wr .lnk{display:block;width:100%;background:none;border:0;color:var(--ink2);font-size:13px;padding:8px 4px;text-align:center;text-decoration:underline;text-underline-offset:3px}
.wr .cr{font-size:12px;color:var(--ink3);text-align:center}
.wr .reader{gap:10px;padding-top:0}
.wr .frag{cursor:text}
.wr .frag .src .by{color:var(--ink3);font-weight:600;cursor:pointer}
.wr .frag.bad{border-color:rgba(255,107,138,.55)}
.wr .err{font-size:12px;color:var(--bad);margin-top:6px}
.wr .ph{color:var(--ink3)}
.wr .inl{width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--q);background:var(--bg);color:var(--ink);font:inherit;font-size:15px;line-height:1.55;resize:none}
.wr .meta{padding:8px 0 10px;border-bottom:1px dashed var(--line);margin-bottom:10px}
.wr .meta input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:14px;margin:4px 0}
.wr .forkline{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:var(--ink3);padding:2px 0}
.wr .forkedit{border:1px dashed var(--line);border-radius:12px;padding:10px}
.wr .forkedit .lbl{font-size:12px;color:var(--ink3);margin:6px 0}
.wr .forkedit input,.wr .forkedit textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:16px;line-height:1.55;margin:4px 0;box-sizing:border-box}
.wr .forkedit textarea{min-height:110px;resize:vertical;display:block}
.wr .forkedit .bad{border-color:rgba(255,107,138,.7)}
.wr .ending.bad{border-color:rgba(255,107,138,.7)}
.wr .slot{background:rgba(255,210,63,.22);border-bottom:2px solid var(--q);border-radius:3px;padding:0 2px;color:inherit}
.wr .ending{cursor:text}
.wr .ending.empty{border-color:rgba(255,255,255,.25)}
.wr .ending .tx{font-size:16px;font-weight:700}
.wr .title-in{width:100%;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:18px;font-weight:800}
.wr .sum{font-size:13px;color:var(--ink2);text-align:center}
.top .saved{font-size:12px;color:var(--ink3)}
/* 한 줄 보태기: 카드 구석의 ＋ 한 줄 · 시트 */
.frag{position:relative}
.frag .addline{position:absolute;right:10px;bottom:8px;font-size:11.5px;color:var(--ink3);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:4px 9px;opacity:.85}
.frag .addline:active{color:var(--ink);border-color:var(--ink3)}
.frag .tx{padding-bottom:14px}
.linebox textarea.line{width:100%;min-height:84px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:16px;line-height:1.55;resize:none;margin-bottom:10px}
.linebox .lbl{font-size:12px;color:var(--ink3);margin:2px 0 6px}
.linebox .lnk{display:block;width:100%;background:none;border:0;color:var(--ink2);font-size:13px;padding:10px 4px;text-align:center;text-decoration:underline;text-underline-offset:3px}
/* 맥락 시트 · 진행률 */
.axis .hr{display:flex;align-items:center;gap:8px}
.axis .ctxbtn{font-size:11.5px;color:var(--ink2);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.ctxbox .ctxprog{font-size:12.5px;color:var(--ink2);margin:0 0 10px}
.ctxbox .ctxprog b{color:var(--q)}
.ctxbox .tabs{display:flex;gap:6px;margin-bottom:10px}
.ctxbox .tabs button{flex:1;padding:8px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font-size:13px;color:var(--ink2)}
.ctxbox .tabs button.on{color:var(--ink);border-color:var(--q)}
.ctxbox .pane{font-size:14px;color:var(--ink);line-height:1.65;min-height:80px}
.ctxbox .pane .sum{margin:0 0 10px}
.ctxbox .pane ul{margin:0;padding-left:18px;color:var(--ink2)}
.ctxbox .pane .lbl{font-size:12px;color:var(--ink3);margin:8px 0 4px}
.ctxbox .who{padding:8px 0;border-bottom:1px dashed var(--line)}
.ctxbox .who small{color:var(--ink3);margin-left:6px}
.ctxbox .who .rel{font-size:13px;color:var(--ink2);padding-left:6px}
.ctxbox .sub{font-size:13px;color:var(--ink3);margin:8px 0 0}
/* 피드: 휘몰아치는 이야기 */
.feed{display:flex;flex-direction:column;gap:10px;padding:26px 0 10px;border-top:1px dashed var(--line);margin-top:10px}
.feed .fh h3{margin:0;font-size:16px;font-weight:900}
.feed .fh .sub{font-size:12px;color:var(--ink3)}
.feed .tabs{display:flex;gap:6px}
.feed .tabs button{padding:7px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.feed .tabs button.on{color:var(--ink);border-color:var(--q)}
.feed .fl{display:flex;flex-direction:column;gap:8px}
.feed .fi{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--ink)}
.feed .fi:active{border-color:var(--ink3)}
.feed .fi .ax{font-size:11.5px;color:var(--q);font-weight:700}
.feed .fi b{font-size:15px}
.feed .fi small{font-size:12.5px;color:var(--ink2);line-height:1.5}
.feed .fi .st{font-size:11.5px;color:var(--ink3);margin-top:2px}
/* 화 끝 표시 */
.epbreak{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink3);margin:6px 0 2px}
.epbreak:before,.epbreak:after{content:'';flex:1;border-top:1px dashed var(--line)}

/* 경로 그리드 공유(보내기 시트) */
.pathgrid{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:4px 0 12px;text-align:center}
.pathgrid .g{font-size:28px;letter-spacing:4px;line-height:1.2}
.pathgrid .s{margin-top:6px;font-size:14px;font-weight:700;color:var(--ink)}
.pathgrid .k{margin-top:4px;font-size:11.5px;color:var(--ink3)}
.toast.link{border:0;font-family:inherit;cursor:pointer;pointer-events:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92vw;bottom:64px}
.themebar{display:block;width:fit-content;margin:2px 0 8px;font-size:12px;font-weight:800;color:var(--q);border:1px solid rgba(255,210,63,.45);border-radius:999px;padding:4px 10px}

/* 그림 자료: 영수증·CCTV·평면도 */
.frag .tx.vis{white-space:normal;padding-bottom:22px}
.rcpt{background:#f6f1e4;color:#25211a;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;padding:14px 16px 18px;border-radius:4px 4px 0 0;max-width:290px;margin:2px auto 6px;position:relative;box-shadow:0 6px 18px rgba(0,0,0,.35);transform:rotate(-1deg)}
.rcpt:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(-45deg,transparent 6px,#f6f1e4 0) 0 0/12px 8px repeat-x,linear-gradient(45deg,transparent 6px,#f6f1e4 0) 0 0/12px 8px repeat-x}
.rcpt .rs{text-align:center;font-weight:800;font-size:14px}
.rcpt .rt{text-align:center;color:#6d6656;font-size:12px;margin-top:2px}
.rcpt .rh{border-top:1px dashed #9b937f;margin:8px 0}
.rcpt .ri{display:flex;justify-content:space-between;gap:12px}
.rcpt .ri b{font-weight:700}
.rcpt .ri.tot{font-weight:800;font-size:14px}
.rcpt .rn{margin-top:10px;font-family:inherit;color:#7a3b2e;transform:rotate(-2deg);font-weight:700}
.cctv .cv{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:radial-gradient(120% 90% at 50% 60%,#3a4a43 0%,#1a2420 55%,#0c110f 100%);filter:contrast(1.05) saturate(.6)}
.cctv .cv:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.cctv .cv:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(0,0,0,.75)}
.cctv .rec{position:absolute;left:10px;top:8px;color:#ff4d4d;font:700 11px ui-monospace,Menlo,monospace;z-index:2;animation:blink 1.2s steps(1) infinite}
.cctv .cam{position:absolute;left:10px;top:24px;color:#e8f3ec;font:600 11.5px ui-monospace,Menlo,monospace;z-index:2;text-shadow:0 0 4px #000}
.cctv .ts{position:absolute;right:10px;top:8px;color:#e8f3ec;font:600 11.5px ui-monospace,Menlo,monospace;z-index:2;text-shadow:0 0 4px #000}
.cctv .cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#cfe0d6;font-size:13px;line-height:1.5;z-index:2}
@keyframes blink{50%{opacity:0}}
.plan{background:#0f1a2c;border:1px solid #1f3355;border-radius:8px;padding:12px;background-image:linear-gradient(rgba(120,170,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.08) 1px,transparent 1px);background-size:11px 11px}
.plan .pt{color:#9ec5ff;font:700 12px ui-monospace,Menlo,monospace;margin-bottom:8px}
.plan svg{width:100%;height:auto;display:block}
.plan rect{fill:rgba(158,197,255,.06);stroke:#9ec5ff;stroke-width:2}
.plan text{fill:#cfe2ff;font:600 13px -apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
.plan .odd rect{stroke:#ff6b6b;stroke-dasharray:6 4;fill:rgba(255,107,107,.08)}
.plan .odd text{fill:#ff9b9b}
.plan .pm{margin-top:8px;color:#ffb3b3;font-size:12.5px}
.wr .meta .hint{font-size:11.5px;color:var(--ink3);margin:6px 0 2px}

/* 자료 스킨(10-09): 글은 그대로, 겉만 그 자료처럼. 손글씨·도장은 공용 소품 */
.frag.sk{padding:10px 10px 12px}
.frag.sk .src{margin:2px 4px 8px}
.hand{font-family:"Nanum Pen Script",cursive;font-size:1.45em;line-height:1.1;color:#2f3a52;letter-spacing:.01em;padding:0 .12em;display:inline-block;transform:rotate(-1.5deg)}
.stamp{width:54px;height:54px;transform:rotate(-14deg);opacity:.86;mix-blend-mode:multiply;flex:none}
.stamp circle{fill:none;stroke:#d3312b;stroke-width:3}.stamp circle.in{stroke-width:1}
.stamp text{fill:#d3312b;font-weight:900;text-anchor:middle;font-family:"Noto Serif KR","Apple SD Gothic Neo",serif}
.stamp.mini{width:30px;height:30px;vertical-align:-9px;margin-left:4px;transform:rotate(9deg)}
.paper{color:#24211c;border-radius:4px;box-shadow:0 8px 22px rgba(0,0,0,.4);position:relative}
.paper p{margin:0 0 6px}
/* 문서·공고: 흰 종이, 가운데 제목, 접힌 자국, 인감 */
.docv{background:linear-gradient(180deg,rgba(0,0,0,0) 49.6%,rgba(0,0,0,.05) 50%,rgba(255,255,255,.4) 50.4%,rgba(0,0,0,0) 51%),#f7f5ef;padding:16px 16px 10px;font-size:14px;line-height:1.65}
.docv .dc-h{text-align:center;font-weight:800;font-size:14.5px;letter-spacing:-.01em;padding-bottom:9px;margin-bottom:10px;border-bottom:3px double #3b3730}
.docv .dc-li{display:flex;gap:6px;margin:0 0 3px}.docv .dc-n{flex:none;min-width:16px;color:#5b564c;font-variant-numeric:tabular-nums}
.docv .dc-ann{margin:10px 0 2px;font-size:12.5px;color:#7a7366;font-style:italic}
.docv .dc-f{display:flex;justify-content:space-between;align-items:center;margin-top:8px;color:#6b665b;font-size:12px}
/* 신문 지면 */
.newsv{background:#ecebe3;padding:12px 15px 12px;font-family:"Noto Serif KR",Georgia,serif;font-size:14.5px;line-height:1.7}
.newsv .nw-m{font-weight:900;font-size:13px;letter-spacing:.02em;border-bottom:2px solid #24211c;padding-bottom:4px}
.newsv .nw-d{font:600 11px var(--font);color:#6b665b;border-bottom:1px solid #b9b5a8;padding:3px 0;margin-bottom:9px}
.newsv .nw-b p{word-break:keep-all}
.newsv .nw-b p:first-child:first-letter{font-size:2.1em;font-weight:900;float:left;line-height:1;margin:2px 6px 0 0}
/* 메신저 */
.chatv{background:#1c2230;border-radius:12px;overflow:hidden;font-size:14px}
.chatv .ch-top{display:flex;align-items:baseline;gap:8px;padding:9px 12px;background:#171c27;border-bottom:1px solid rgba(255,255,255,.06)}
.chatv .ch-top b{font-size:13.5px;color:#e9ecf5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chatv .ch-top small{margin-left:auto;color:#8a90a3;font-size:11px;flex:none}
.chatv .ch-back{color:#8a90a3;font-size:18px;line-height:1}
.chatv .ch-body{padding:10px 10px 12px}
.chatv .ch-row{display:flex;gap:7px;margin-top:3px;align-items:flex-start}.chatv .ch-row.first{margin-top:9px}.chatv .ch-row:first-child{margin-top:0}
.chatv .ch-row.me{justify-content:flex-end}
.chatv .ch-av{width:30px;height:30px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;background:hsl(var(--h) 32% 42%)}
.chatv .ch-row:not(.first) .ch-av{background:none}
.chatv .ch-col{max-width:78%;min-width:0}
.chatv .ch-nm{font-size:11.5px;color:#a9afc2;margin:0 0 3px 2px}
.chatv .ch-b{background:#2d3446;color:#eef0f7;padding:7px 11px;border-radius:4px 15px 15px 15px;word-break:keep-all;overflow-wrap:anywhere;line-height:1.5}
.chatv .me .ch-b{background:var(--q);color:#231a03;border-radius:15px 4px 15px 15px}
.chatv .ch-row:not(.first) .ch-b{border-radius:15px}
.chatv .ch-sys{text-align:center;font-size:11.5px;color:#9aa0b3;background:rgba(255,255,255,.05);border-radius:999px;padding:3px 10px;margin:10px auto 2px;width:fit-content;max-width:90%}
.chatv .hand{color:inherit}
/* 커뮤니티 글 */
.postv{background:#15151d;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:11px 13px 9px;font-size:14.5px}
.postv .ps-h{font-size:11.5px;font-weight:800;color:#8fb4ff;margin-bottom:7px}
.postv .ps-meta{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink3);margin-bottom:8px}.postv .ps-meta b{color:var(--ink2)}
.postv .ps-av{width:20px;height:20px;border-radius:50%;background:#2c2c3a;display:inline-block}
.postv .ps-b p{margin:0 0 6px;word-break:keep-all}
.postv .ps-c{border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
.postv .ps-ci{font-size:13px;color:var(--ink2);padding:4px 0 4px 14px;position:relative}.postv .ps-ci:before{content:"ㄴ";position:absolute;left:0;color:var(--ink3)}.postv .ps-ci i{color:var(--ink3)}
.postv .ps-f{font-size:11.5px;color:var(--ink3);margin-top:6px}
.postv .hand,.memov .hand{color:#f5f1d0}
/* 메모앱 */
.memov{background:#1d1b16;border-radius:12px;padding:9px 13px 12px;font-size:14.5px;color:#efe9d6}
.memov .mm-top{display:flex;justify-content:space-between;color:#e8b931;font-size:13px;margin-bottom:6px}
.memov .mm-t{font-size:19px;font-weight:800;color:#fff8e6;letter-spacing:-.02em}
.memov .mm-d{font-size:11.5px;color:#9c9584;margin:1px 0 8px}
.memov .mm-b p{margin:0 0 7px;word-break:keep-all}.memov .mm-b b{color:#e8b931;font-weight:800}
/* 관제·시스템 로그 */
.logv{background:#07100c;border:1px solid #173326;border-radius:8px;overflow:hidden;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9fe7bf}
.logv .lg-t{display:flex;align-items:center;gap:5px;padding:6px 9px;background:#0d1d16;color:#6fae8b;font-size:11px}.logv .lg-t i{width:8px;height:8px;border-radius:50%;background:#24493a}.logv .lg-t span{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logv .lg-b{padding:8px 10px 10px}
.logv .lg-l{white-space:pre-wrap;word-break:break-all}.logv .lg-ts{color:#5c8f74;margin-right:8px}
.logv .lg-l.warn{color:#ffcf6b}.logv .lg-l.dim{color:#5c8f74}
/* 부동산 매물 앱 */
.lstv{background:#fff;overflow:hidden;font-size:13.5px}
.lstv .ls-ph{height:84px;background:repeating-linear-gradient(135deg,#e7e7ea 0 10px,#efeff2 10px 20px);display:flex;align-items:flex-end;justify-content:flex-end;padding:6px}
.lstv .ls-ph span{font-size:11px;color:#fff;background:rgba(0,0,0,.45);border-radius:999px;padding:2px 8px}
.lstv .ls-b{padding:10px 13px 10px}
.lstv .ls-p{font-size:16px;font-weight:900;color:#1b1b1f;letter-spacing:-.02em}
.lstv .ls-s{font-size:11.5px;color:#7a7a85;margin:2px 0 7px}
.lstv .ls-x{color:#33333b;line-height:1.6;word-break:keep-all}
.lstv .ls-r{font-size:11px;color:#a0a0aa;text-align:right;margin-top:6px;text-decoration:underline}
/* 위키 */
.wikiv{background:#14141c;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:11px 13px;font-size:14px}
.wikiv .wk-t{font-size:17px;font-weight:800;border-bottom:1px solid var(--line);padding-bottom:5px}
.wikiv .wk-u{font-size:11px;color:#7fa7ff;margin:4px 0 8px}
.wikiv h4{margin:10px 0 4px;font-size:14px;border-bottom:1px solid var(--line)}
.wikiv p{margin:0 0 6px}.wikiv sup{color:#7fa7ff;font-size:10px}
.frag.sk .tx.vis{font-family:var(--font);font-size:15px;color:var(--ink);letter-spacing:normal;background:none;padding:0 0 22px;border:0;border-radius:0}
/* 만들기: 소품 버튼줄(카드를 누르면 글상자 위에) */
.wr .props{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.wr .props .chip{padding:5px 10px;font-size:12px}
.wr .frag.sk .tx.vis{cursor:text}

/* ── 결말: 상자 없이 혼자 선다 (10-10 레디). 작성 화면(.wr .ending)은 건드리지 않게 .reader로 범위 ── */
.reader .ending{margin:44px 0 0;padding:0 2px;border:0;border-radius:0;background:none;
  font-size:21px;line-height:1.55;font-weight:800;letter-spacing:-.015em;color:var(--ink);
  word-break:keep-all;text-wrap:pretty;white-space:pre-wrap;
  animation:endIn .7s cubic-bezier(.2,.7,.2,1) .12s both}
.reader .ending::before{content:"";display:block;width:24px;height:2px;border-radius:2px;background:var(--q);margin-bottom:16px;animation:endRule .5s ease-out both}
.reader .ending .lbl{display:none}
.reader .ending .by-end{font-size:12.5px;font-weight:500;color:var(--ink3);margin-top:10px;letter-spacing:0}
.reader .ending.pend::before{background:rgba(255,255,255,.3)}
.reader .ending.b{font-size:16px;font-weight:600;color:var(--ink2);line-height:1.6}
.reader .ending.b::before{background:var(--ink3)}
@keyframes endIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes endRule{from{width:0}to{width:24px}}
/* 결말이 혼자 서는 동안 위 조각은 흐리게 */
/* (.frag의 등장 animation이 opacity를 붙잡고 있어서 opacity 대신 filter로 흐린다) */
.reader .frag,.reader .fork,.reader .epbreak,.reader .cmp{transition:filter .8s ease}
.reader.spot .frag,.reader.spot .fork,.reader.spot .epbreak,.reader.spot .cmp:not(.sum){filter:brightness(.45) saturate(.7)}
/* 결말 뒤: 단계 등장 */
.after{animation:none;gap:0;margin-top:28px}
.after .st{opacity:0;transform:translateY(8px);transition:opacity .4s ease-out,transform .4s ease-out;pointer-events:none}
.after .st.on{opacity:1;transform:none;pointer-events:auto}
.after .st2{display:flex;flex-direction:column;gap:6px}
.after .st3{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.after .openline{display:block;animation:none;padding:0 2px;font-size:13px;line-height:1.6;color:var(--ink3);margin-bottom:6px}
.after .openline span{margin-right:6px}
.after .openline .altbtn{display:inline;font-size:13px;font-weight:700;color:var(--q);padding:6px 0;white-space:nowrap}
.after .reacts{display:flex;flex-wrap:nowrap;gap:8px;margin:0}
.after .like,.after .emo{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:34px;min-width:44px;padding:0 12px;font-size:14px;font-weight:700;color:var(--ink2);background:none;border:1px solid rgba(255,255,255,.12);border-radius:999px}
.after .like.on{border-color:var(--bad);color:var(--bad);background:rgba(255,107,138,.08)}
.after .emo .n{font-size:12px;color:var(--ink3)}
.after .emo .n:empty{display:none}
.after .emo.on{border-color:var(--q);color:var(--ink);background:rgba(255,210,63,.12)}
.after .emo.on .n{color:var(--q)}
.after .fb{margin-top:0;gap:2px;font-size:13px;padding:0 2px}
.after .fb .q{color:var(--ink3);margin-right:6px}
.after .fb .tl{font-size:13px;font-weight:700;color:var(--ink2);padding:8px 6px;background:none;border:0}
.after .fb .tl:active{color:var(--ink)}
.after .fb .sep{color:var(--ink3);opacity:.6}
.after .cta{display:flex;gap:8px}
.after .cta .btn{padding:14px 12px;font-size:15px;margin:0}
.after .cta .btn:first-child{flex:1}
.after .cta .btn.q{flex:1.6}
.after .altrow.center{padding:0}
.after .fict{margin-top:4px;font-size:11px;opacity:.8}
@media (prefers-reduced-motion:reduce){.reader .ending,.reader .ending::before{animation:fade .3s both}.after .st{transform:none}}
/* 내레이션(10-10): 자료 앞 '나'의 한 줄 — 본문 글꼴, 카드 밖, 자료보다 먼저 읽힌다 */
.reader .lead{margin:22px 2px 9px;font-size:15.5px;line-height:1.7;color:var(--ink);word-break:keep-all;animation:up .35s ease-out both}
.reader .lead + .frag{margin-top:0}
.reader.spot .lead{filter:brightness(.45);transition:filter .8s ease}
.reader .lead{transition:filter .8s ease}
.wr .lead.empty{margin:14px 2px 6px;font-size:13px;color:var(--ink3);cursor:text}
.wr .lead{cursor:text}
/* 한 줄이 먼저, 자료는 0.3초 뒤에(10-10 사장님: 다음 누르면 텍스트부터) */
.reader .lead + .frag{animation-delay:.3s}
/* 다음 버튼: 엄지 자리에 붙어 있다(10-10 사장님: 다음을 쉽게) — 카드가 길어도 화면 아래에 떠 있고, 제자리에 오면 그 자리에 선다 */
.reader > .next{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));z-index:12;margin-top:14px;color:var(--ink);font-size:15px;font-weight:800;padding:15px;border:1px solid rgba(255,255,255,.14);background:rgba(24,24,36,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.reader > .next:active{background:rgba(40,40,58,.96);transform:scale(.99)}
/* 갈림길은 제자리(10-10 사장님: 떠 있으면 스포 같고 공간을 먹는다) — 화면 밖에 있을 때만 작은 '갈림길 ↓' 알약이 뜬다 */
.forkhint{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translate(-50%,140%);z-index:14;padding:10px 16px;border-radius:999px;font-size:13.5px;font-weight:800;color:var(--ink);background:rgba(24,24,36,.94);border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 22px rgba(0,0,0,.5);transition:transform .25s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.forkhint.on{transform:translate(-50%,0)}
/* 반응(감정)과 이해 확인(10-10 사장님: 명확히 구분) — 반응은 이모지 한 줄, 이해 확인은 따로 묻는 칸 */
.after .like .e,.after .emo .e{font-size:17px;line-height:1}
.after .like.on{border-color:rgba(255,107,138,.6);background:rgba(255,107,138,.1)}
.after .fb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.after .fb .q{width:100%;margin:0 0 2px;font-size:13px;font-weight:700;color:var(--ink2)}
.after .fb .fbr{display:flex;gap:8px;width:100%}
.after .fb .tl{flex:1;height:42px;padding:0 10px;border-radius:12px;font-size:14px;font-weight:800;background:none}
.after .fb .tl.ok{color:var(--good);border:1px solid rgba(110,231,183,.45)}
.after .fb .tl.ok:active{background:rgba(110,231,183,.1)}
.after .fb .tl.no{color:var(--q);border:1px solid rgba(255,210,63,.45)}
.after .fb .tl.no:active{background:rgba(255,210,63,.1)}
.after .fb input{flex:1}
.after .fb .muted{font-size:13px}
.after .fb .tl{font-size:17px}
/* 이어 쓰기 권유(10-10): 결말 아래 '여기까지예요.' + 노란 테두리 버튼 + 5분 안내 */
.after .openline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.after .openline span{margin:0;color:var(--ink2);font-size:14px}
.after .openline .altbtn.wr{display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,210,63,.55);background:rgba(255,210,63,.08);color:var(--q);font-size:14px;font-weight:800}
.after .openline .altbtn.wr:active{background:rgba(255,210,63,.16)}
.after .openline .sub{width:100%;font-size:12px;color:var(--ink3);word-break:keep-all}
.after .openline.wrnext{margin-top:16px;margin-bottom:4px}
.after .reacts{flex-wrap:wrap;gap:6px} .after .like,.after .emo{min-width:42px;padding:0 10px} /* 10-16: 👍/👎 + 이모지 5개 한 줄(390폭) */
.after .emo.fbt.no{margin-right:6px} .after .emo.fbt:disabled{opacity:1} .after .emo.fbt:disabled:not(.on){opacity:.45}
.after .fbnote{margin-top:8px} .after .fbnote:empty{display:none} /* 10-16: 반응 아래로 옮긴 '이어서 쓰기' 줄 */
/* 소품 2차(10-10): 가림 줄·형광펜·안 읽음 1·삭제된 메시지·포스트잇·찢긴 종이 */
.redact{background:#111;color:transparent;border-radius:2px;padding:0 1px;letter-spacing:-.05em;-webkit-user-select:none;user-select:none}
.chatv .redact,.logv .redact,.postv .redact,.memov .redact,.wikiv .redact{background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
mark{background:linear-gradient(transparent 45%,rgba(255,226,64,.75) 45%);color:inherit;padding:0 1px}
.chatv mark,.postv mark,.memov mark,.logv mark,.wikiv mark{background:linear-gradient(transparent 50%,rgba(255,210,63,.35) 50%)}
.chatv .ch-line{display:flex;align-items:flex-end;gap:5px}
.chatv .me .ch-line{justify-content:flex-end}
.chatv .ch-un{font-size:11px;font-weight:800;color:var(--q);flex:none;margin-bottom:2px}
.chatv .ch-b.del{background:none;border:1px dashed rgba(255,255,255,.18);color:#8a90a3;font-style:italic;font-size:13px}
.stickyv{background:#ffe680;color:#3a3220;width:min(260px,84%);margin:6px auto 10px;padding:14px 16px 16px;border-radius:2px;box-shadow:0 10px 22px rgba(0,0,0,.45);transform:rotate(var(--r,-1deg));position:relative}
.stickyv:before{content:"";position:absolute;left:50%;top:-9px;width:64px;height:18px;transform:translateX(-50%) rotate(-2deg);background:rgba(255,255,255,.45)}
.stickyv .sk-t{font-size:10.5px;color:rgba(58,50,32,.6);margin-bottom:6px}
.stickyv p{margin:0 0 2px;font-family:"Nanum Pen Script",cursive;font-size:23px;line-height:1.25}
.docv.torn{border-radius:4px 4px 0 0;margin-bottom:10px}
.docv.torn:after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;background:linear-gradient(-45deg,transparent 7px,#f7f5ef 0) 0 0/14px 10px repeat-x,linear-gradient(45deg,transparent 7px,#f7f5ef 0) 0 0/14px 10px repeat-x}
/* 서식 서랍 */
.kitbox .kit-g{font-size:12px;font-weight:800;color:var(--ink3);margin:14px 2px 6px}
.kitbox .kit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kitbox .kit-it{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);text-align:left}
.kitbox .kit-it b{font-size:14px;color:var(--ink)}.kitbox .kit-it small{font-size:11px;color:var(--ink3)}
.kitbox .kit-it:active{border-color:var(--q)}
.kitbox .lnk{margin-top:14px}
/* 만들기: 이야기 틀 · 기다리는 화면 */
.wr .lbl{font-size:12px;font-weight:800;color:var(--ink3);margin:6px 2px 6px}
.wr .tpls{display:flex;flex-wrap:wrap;gap:6px}
.wr .tpl-desc{font-size:12.5px;color:var(--ink2);margin:6px 2px 10px;min-height:1px}
.sheet.wait{align-items:center}
.sheet.wait .waitbox{border-radius:22px;margin:0 16px;padding:24px 20px;text-align:center}
.waitbox .wsteps{list-style:none;margin:16px 0 8px;padding:0;text-align:left;display:inline-block}
.waitbox .wsteps li{font-size:14px;color:var(--ink3);padding:4px 0 4px 24px;position:relative}
.waitbox .wsteps li:before{content:"○";position:absolute;left:0}
.waitbox .wsteps li.on{color:var(--ink);font-weight:800}.waitbox .wsteps li.on:before{content:"●";color:var(--q)}
.waitbox .wsteps li.done{color:var(--ink2)}.waitbox .wsteps li.done:before{content:"✓";color:var(--good)}
/* 만들기(AI 끈 동안): 이야기 틀 카드 */
.wr .tplgrid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:14px}
.wr .tpl-it{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 15px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-align:left}
.wr .tpl-it b{font-size:15.5px;color:var(--ink)}.wr .tpl-it small{font-size:12.5px;color:var(--ink3)}
.wr .tpl-it:active{border-color:var(--q)}
.remix .kitbtn{width:100%;margin:0 0 10px}
.reader .lead.bridge{font-weight:700}
/* 올린 직후(10-10 레디 P1-1) */
.after .posted{border:1px solid rgba(255,210,63,.45);background:rgba(255,210,63,.07);border-radius:var(--r);padding:18px 16px 12px;text-align:center;animation:up .4s ease-out both}
.after .posted .h{font-size:18px;font-weight:800;color:var(--ink);word-break:keep-all}
.after .posted .h span{color:var(--q)}
.after .posted p{margin:8px 0 14px;font-size:13.5px;line-height:1.6;color:var(--ink2);word-break:keep-all}
.after .posted .btn.q{width:100%}
.after .posted .altrow{margin-top:8px;gap:16px}
.reader .flash{animation:flash 1.6s ease-out 1 both}
@keyframes flash{0%,40%{box-shadow:0 0 0 2px var(--q)}100%{box-shadow:0 0 0 0 transparent}}
.wr.settled .frag,.wr.settled .lead,.wr.settled .ending,.wr.settled .choice{animation:none}
/* 👍/👎(10-16 사장님, 전엔 오!/엥?)는 이모지와 같은 무게(10-10 레디 P1-13) — 결말 아래 노란색은 '이어서 쓰기'와 '다음 박스' 둘뿐 */
.after .fb{border:0;background:none;padding:0 2px;margin-top:10px}
.after .fb .fbr{width:auto;gap:8px}
.after .fb .tl,.after .fb .tl.ok,.after .fb .tl.no{flex:0 0 auto;height:38px;padding:0 18px;border-radius:999px;font-size:18px;line-height:1;color:var(--ink2);border:1px solid var(--line)}
.after .fb .tl:active,.after .fb .tl.ok:active,.after .fb .tl.no:active{border-color:var(--q);color:var(--q);background:none}
.wr .forkline{display:block;padding:6px 0 2px;cursor:pointer}
.wr .forkline .lbl{text-align:center;font-size:12px;color:var(--ink3);margin-bottom:8px}
.wr .choice.prev{animation:none}
.wr .choice.prev .btn.ph .lab{color:var(--ink3);font-weight:600}
.wr .choice.prev .btn.bad{border-color:rgba(255,107,138,.7)}
.wr .choice.prev .bnote{font-size:12px;color:var(--ink3);text-align:center;margin-top:2px}
.kit-it .k{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.07);color:var(--ink3);margin-left:4px;vertical-align:1px}
.kit-it{min-width:0}.kit-it small{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .wclose{margin-left:14px;font-size:13px;font-weight:700;color:var(--ink2);text-decoration:none;padding:6px 2px}
.top .saved{margin-left:auto}
.remix .kitq{margin:0 0 12px}
.remix .kitq .chip.more{color:var(--q);border-color:rgba(255,210,63,.4)}
.remix .pvw .lbl{margin-top:4px}
.remix .pvw .frag{margin:0 0 8px;animation:none}
.remix .pvw .frag p{color:inherit;font-size:inherit;margin:0 0 6px}
.remix .pvw .stickyv p{font-size:23px;margin:0 0 2px}
.kitbox .kit-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:-20px;z-index:2;background:var(--bg2);margin:-20px -18px 0;padding:16px 18px 8px}
.kitbox .kit-hd h3{margin:0}
.kitbox .kit-x{font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 16px;cursor:pointer}
.wr .steps button.back{font:inherit;font-size:11.5px;font-weight:700;color:var(--q);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sheet .nick-in{width:100%;box-sizing:border-box;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:16px;margin:0 0 10px}
.stickyv .sk-back{margin:10px -16px 8px;border-top:1px dashed rgba(58,50,32,.35);padding:4px 16px 0;font-size:10.5px;color:rgba(58,50,32,.55);letter-spacing:.04em}
/* 친구 이름 넣어 보내기(10-11 실험①): 시트 안 이름 단계(입력 하나 + CTA 하나, CTA 아래 비움) · 리더 제목 아래 '이 링크에서 이름 지우기' · 결말 뒤 세로 버튼 */
.namestep .back{display:block;background:none;border:0;color:var(--ink2);font:inherit;font-size:13px;padding:0 0 12px}
.namestep input{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:17px;font-weight:700;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);margin:0 0 10px}
.namestep input::placeholder{color:var(--ink2);font-size:16px;font-weight:500;opacity:1}
.namestep input:focus{outline:none;border-color:var(--q)}
.namerm{display:inline-block;margin:0 0 10px;background:none;border:0;padding:2px 0;font:inherit;font-size:12px;color:var(--ink3);text-decoration:underline;text-underline-offset:3px}
.after .cta.stack{flex-direction:column}
.share-hero .from.wait{visibility:hidden}