/* DearCameo — DearCast white edition 을 그대로 잇는다 */

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f6f6f6;   /* 눌린 면 */
  --line:#e4e4e4;
  --line-soft:#efefef;
  --ink:#111111;
  --ink-2:#5a5a5a;
  --ink-3:#9a9a9a;
  --accent:#111111;      /* 강조는 색이 아니라 먹 */
  --accent-soft:#f2f2f2;
  --accent-2:#6b6b6b;
  --accent-2-soft:#f7f7f7;
  --ai:#7a7a7a;
  --ai-soft:#f4f4f4;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Noto Sans KR",sans-serif;
  /* 배경 상자(Context)는 해설이라 세리프로 둔다 — 라틴 Newsreader, 한글 Noto Serif KR */
  --read:"Newsreader","Noto Serif KR",Georgia,"Apple SD Gothic Neo",serif;

  --shadow:none;
  --hot:#e2542b;          /* beta 라벨과 피드백 버튼 */
  --hot-dark:#c2431f;
  --go:#4338ca;           /* 글쓰기 버튼 — 먹색 UI 와 섞이지 않게 남보라 */
  --go-dark:#372ea8;
}

*{box-sizing:border-box}
/* display:flex 를 쓰는 요소들도 hidden 속성을 존중하도록 */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
/* 가로로 미는 줄(캐스트·키워드·웹툰)에서 손가락이 페이지까지 끌고 가지 않게.
   clip 은 스크롤 컨테이너를 만들지 않아 sticky 헤더를 깨지 않는다 (hidden 은 깬다). */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
body{
  position:relative;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
::selection{background:#111;color:#fff}

/* 아주 옅은 종이 결. 화면을 탁하게 만들지 않을 정도로만. */
.grain{
  display:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

.app{
  position:relative;z-index:1;
  max-width:580px;margin:0 auto;
  min-height:100vh;
  padding:0 0 130px;
  background:var(--bg);
}

/* ── header ─────────────────────────────── */
.top{
  position:sticky;top:0;z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.top-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 20px 10px;
}
.brand{font-family:var(--serif);font-size:26px;letter-spacing:.2px}
.brand .mark{color:var(--accent);font-style:italic;margin-right:1px}
.top-right{display:flex;align-items:center;gap:10px}
.model-pick{
  appearance:none;
  background:var(--surface);color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;
  font:500 11px/1 var(--sans);padding:7px 26px 7px 12px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%239a9a9a' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;
}
.model-pick:hover{color:var(--ink);border-color:var(--accent-2)}
.health{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none;transition:background .3s,box-shadow .3s}
.health.ok{background:#2e9e6b;box-shadow:0 0 0 3px rgba(46,158,107,.16)}
.health.bad{background:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.14)}

/* ── hero ───────────────────────────────── */
.hero{padding:46px 20px 34px;border-bottom:1px solid var(--line)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:46px;line-height:1.05;margin:0;letter-spacing:-.6px}
.hero h1 em{color:var(--accent);font-style:italic}
.hero p{color:var(--ink-2);font-size:13px;line-height:1.62;margin:16px 0 0;max-width:44ch}

/* ── feed ───────────────────────────────── */
.feed{display:flex;flex-direction:column;gap:14px;padding:14px 0}

.post{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px 20px 20px;
  margin:0 12px;
  animation:rise .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.post-head{display:flex;gap:12px;align-items:center}
.who{flex:1;min-width:0}
.who .name{font-weight:600;font-size:15px;letter-spacing:-.1px}
.who .meta{font-size:10.5px;color:var(--ink-3);margin-top:4px;letter-spacing:.2px;line-height:1.5}
.who .meta a{color:var(--accent-2);text-decoration:none;border-bottom:1px solid var(--line)}
.who .meta a:hover{color:var(--accent);border-color:var(--accent)}

.avatar{
  width:46px;height:46px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--accent-2-soft);
  border:1px solid var(--line);
  box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line-soft);
  display:grid;place-items:center;
  font:600 13px/1 var(--sans);color:var(--accent-2);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

.badge{
  display:inline-block;vertical-align:1px;
  font:600 8.5px/1 var(--sans);letter-spacing:.7px;
  padding:4px 6px;border-radius:4px;margin-left:7px;text-transform:uppercase;
}
.badge.human{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.badge.ai{background:transparent;color:var(--ai);border:1px solid var(--line)}
.badge.op{background:transparent;color:var(--ink);border:1px solid var(--ink);margin-left:4px}

.post-title{font-family:var(--serif);font-size:27px;line-height:1.22;margin:18px 0 0;letter-spacing:-.3px}
/* 본문은 댓글·화면과 똑같은 글꼴(Inter). 크기만 키우고 줄간격을 좁혔다 —
   자간을 건드리면 같은 글꼴인데도 다른 글꼴처럼 보인다. */
.post-body{
  font-family:var(--sans);font-size:15px;line-height:1.45;
  color:#1a1a1a;margin:14px 0 0;white-space:pre-wrap;
}
.post-body .tag{color:var(--ink-2);font-weight:600}

.ctx{
  margin:18px 0 0;padding:15px 16px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-left:2px solid var(--ink);
  border-radius:2px 10px 10px 2px;
}
.ctx b{display:block;font-size:11px;letter-spacing:.3px;color:var(--ink-2);margin-bottom:8px;font-weight:600}
.ctx p{font-family:var(--read);margin:0;font-size:14.5px;line-height:1.58;color:var(--ink-2)}
.ctx .src{display:inline-block;margin-top:10px;font-size:10px;color:var(--ink-3);text-decoration:none}
.ctx .src:hover{color:var(--accent)}

.actions{display:flex;gap:22px;align-items:center;margin:16px 0 0;font-size:12.5px;color:var(--ink-3)}
.actions button{
  background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;
  display:flex;align-items:center;gap:6px;transition:color .18s;
}
.actions button:hover{color:var(--ink)}
.actions button.on{color:var(--accent)}

/* ── cast ───────────────────────────────── */
.cast{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line-soft)}
.cast-label{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font:600 10px/1 var(--sans);letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-2);
}
.cast-label .hint{font-weight:400;letter-spacing:0;text-transform:none;font-size:10.5px;color:var(--ink-3)}
.cast-label.ai{color:var(--ink-3);margin-top:22px}

.people{display:flex;gap:6px;margin-top:13px}
.person{
  flex:1;min-width:0;text-align:center;
  padding:10px 3px 9px;border-radius:12px;
  border:1px solid transparent;background:transparent;
  transition:background .18s,border-color .18s,transform .18s;
}
.person.pickable{cursor:pointer}
.person.pickable:hover{background:var(--surface-2);border-color:var(--line);transform:translateY(-2px)}
.person.active{background:var(--accent-soft);border-color:rgba(0,0,0,.28)}
.person{position:relative}
.person .op-tag{
  position:absolute;top:6px;left:50%;transform:translateX(12px);
  font:700 7.5px/1 var(--sans);letter-spacing:.5px;
  background:var(--ink);color:#fff;border:2px solid var(--surface);
  border-radius:999px;padding:3px 5px;
}
.person .face{
  width:44px;height:44px;border-radius:50%;margin:0 auto;overflow:hidden;
  background:var(--accent-2-soft);border:1px solid var(--line);
  display:grid;place-items:center;font:600 12px/1 var(--sans);color:var(--accent-2);
}
.person .face img{width:100%;height:100%;object-fit:cover;display:block}
.person small{
  display:block;margin-top:8px;font-size:9.5px;font-weight:600;line-height:1.2;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.person .bio{
  margin-top:3px;font-size:8px;line-height:1.32;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ── roleplay composer ──────────────────── */
.roleplay{
  display:none;margin-top:15px;padding:15px;
  border:1px solid rgba(0,0,0,.22);border-radius:14px;background:var(--accent-soft);
}
.roleplay.show{display:block;animation:rise .35s ease both}
.rp-head{display:flex;gap:11px;align-items:center;margin-bottom:12px}
.rp-head .avatar{width:36px;height:36px;box-shadow:none}
.rp-title{font-family:var(--serif);font-size:18px;line-height:1.2}
.rp-sub{font-size:10px;color:var(--ink-3);margin-top:3px}
.roleplay textarea{
  width:100%;min-height:70px;resize:vertical;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;font:14.5px/1.6 var(--sans);
}
.roleplay textarea:focus{outline:none;border-color:var(--accent)}
.rp-actions{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px}
.rp-actions .hint{font-size:10px;color:var(--ink-3)}
.rp-actions button{
  border:0;border-radius:9px;cursor:pointer;
  background:var(--go);color:#fff;
  font:600 12px/1 var(--sans);padding:11px 17px;transition:background .18s;
}
.rp-actions button:hover{background:var(--go-dark)}
.rp-actions button:disabled{opacity:.35;cursor:default}

/* ── thread ─────────────────────────────── */
.thread{margin:18px 0 0;padding-left:14px;border-left:1px solid var(--line-soft)}
.divider{font-size:10px;color:var(--ink-3);letter-spacing:.3px;margin:14px 0 8px;display:flex;align-items:center;gap:8px}
.divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}

.comment{display:flex;gap:10px;padding:9px 0;animation:rise .4s ease both}
.comment .avatar{width:32px;height:32px;box-shadow:none}
.comment .ct{flex:1;min-width:0}
.comment .chead{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.comment .ct .cname{font-weight:600;font-size:12px}
.comment .ct .cbio{font-size:10.5px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.comment .ct .text{font-size:13.5px;line-height:1.54;color:#333333;margin-top:5px}
/* @멘션은 본문 글자와 또렷이 구분되게 — 회색 + 굵게 + 아주 옅은 바탕 */
.comment .ct .text .tag,
.comment .text .to,
.rp-target .tag{
  color:var(--ink-2);font-weight:600;
  background:var(--surface-2);border-radius:5px;padding:1px 4px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.comment .text .to{margin-right:6px}   /* 칩 바로 뒤에 글이 붙어 보이지 않게 */


.typing{display:flex;gap:9px;align-items:center;padding:11px 0;color:var(--ink-3);font-size:11.5px}
.dots{display:inline-flex;gap:3px}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--accent-2);animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.post-error{
  margin-top:14px;padding:11px 13px;border-radius:10px;
  background:var(--accent-soft);border:1px solid rgba(0,0,0,.25);
  color:var(--accent);font-size:11.5px;line-height:1.52;
}

/* ── fab ────────────────────────────────── */
.fab{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:30;cursor:pointer;display:flex;align-items:center;gap:8px;
  border:0;border-radius:999px;
  background:var(--accent);color:#fff;
  font:600 13.5px/1 var(--sans);padding:16px 26px;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:transform .2s,box-shadow .2s;
}
.fab:hover{background:#363636;transform:translateX(-50%) translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.24)}
.fab-plus{font-size:17px;line-height:1;margin-top:-2px}
.fab{white-space:nowrap}

/* ── modal ──────────────────────────────── */
.modal{
  /* 높이는 키보드를 뺀 '실제 보이는 영역'(--vv-h, app.js 가 visualViewport 로 채운다).
     모바일에서 키보드가 올라오면 창이 그만큼 줄어 맨 아래 버튼이 키보드 위에 남는다. */
  position:fixed;left:0;right:0;top:var(--vv-top,0px);
  height:var(--vv-h,100%);z-index:50;
  background:rgba(0,0,0,.4);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fade .25s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  position:relative;width:100%;max-width:580px;max-height:min(93%,var(--vv-h,93vh));overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--surface);
  border:1px solid var(--line);border-bottom:0;
  border-radius:20px 20px 0 0;
  padding:32px 22px 0;
  animation:slideUp .34s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes slideUp{from{transform:translateY(28px)}to{transform:none}}
.sheet-close{
  position:absolute;top:20px;right:20px;width:31px;height:31px;border-radius:50%;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);font-size:17px;line-height:1;
}
.sheet-close:hover{color:var(--ink);border-color:var(--accent-2)}
.sheet h2{font-family:var(--serif);font-weight:400;font-size:33px;margin:0;letter-spacing:-.4px}
.sheet-sub{font-size:12px;color:var(--ink-3);margin:8px 0 0;line-height:1.52}

.step{
  display:flex;align-items:center;gap:9px;margin:28px 0 8px;
  font:600 11px/1 var(--sans);letter-spacing:.6px;color:var(--ink-2);text-transform:uppercase;
}
.step i{font-style:normal;font-family:var(--serif);font-size:15px;color:var(--accent);letter-spacing:0}
.step b{font-size:8.5px;padding:3px 5px;border-radius:4px;letter-spacing:.5px}
.step .req{background:var(--accent-soft);color:var(--accent)}
.step .opt{background:var(--surface-2);color:var(--ink-3)}
.step-help{font-size:11.5px;line-height:1.55;color:var(--ink-3);margin:0 0 10px}
.step-help b{color:var(--ink-2);font-weight:600}
.step-help a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.3);white-space:nowrap}

.picker{position:relative}
.pick-input,.title-input,.sheet textarea{
  width:100%;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:11px;
  padding:13px 14px;font:14px/1.5 var(--sans);
}
.pick-input{-webkit-appearance:none;appearance:none}
.pick-input::-webkit-search-cancel-button{-webkit-appearance:none}
.pick-input:focus,.title-input:focus,.sheet textarea:focus{outline:none;border-color:var(--accent)}
.pick-input::placeholder,.title-input::placeholder,.sheet textarea::placeholder{color:#b5b5b5}

/* 라이브 검색 결과 */
.suggest{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:8;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  max-height:296px;overflow-y:auto;
  box-shadow:0 12px 32px rgba(0,0,0,.1);
}
.suggest-row{
  display:flex;gap:11px;align-items:center;
  padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--line-soft);
}
.suggest-row:last-child{border-bottom:0}
.suggest-row:hover,.suggest-row.active{background:var(--accent-2-soft)}
.suggest-row .thumb{
  width:38px;height:38px;border-radius:8px;flex:none;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;font:600 11px/1 var(--sans);color:var(--accent-2);
}
.suggest-row .thumb img{width:100%;height:100%;object-fit:cover}
.suggest-row .info{min-width:0;flex:1}
.suggest-row .t{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest-row .d{font-size:11px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest-empty{padding:16px;font-size:12px;color:var(--ink-3);text-align:center}

.note-input{
  width:100%;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:11px;
  padding:13px 14px;font:14px/1.6 var(--sans);resize:vertical;min-height:62px;
}
.note-input:focus{outline:none;border-color:var(--accent)}
.note-input::placeholder{color:#b5b5b5}
.title-input{margin-bottom:9px;font-family:var(--serif);font-size:18px}
.sheet textarea{min-height:120px;resize:vertical;font-size:14.5px;line-height:1.5}

.resolved{
  display:flex;gap:12px;align-items:center;margin-top:10px;padding:13px;
  border-radius:12px;background:var(--accent-2-soft);border:1px solid var(--line);
}
.resolved .face{
  width:44px;height:44px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;font:600 13px/1 var(--sans);color:var(--accent-2);
}
.resolved .face img{width:100%;height:100%;object-fit:cover}
.resolved .info{min-width:0;flex:1}
.resolved .t{font-size:14px;font-weight:600}
.resolved .d{
  font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.resolved .drop{background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:18px;padding:0 4px;line-height:1}
.resolved .drop:hover{color:var(--accent)}

.field-error{
  margin-top:9px;font-size:11.5px;line-height:1.52;color:var(--accent);
  padding:10px 12px;border-radius:9px;background:var(--accent-soft);
}

.note{
  margin-top:22px;padding:13px 14px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line-soft);
  font-size:11.5px;line-height:1.56;color:var(--ink-3);
}
.note b{color:var(--ink-2)}

.sheet-actions{
  position:sticky;bottom:0;z-index:6;
  margin-top:18px;padding:14px 0 calc(6px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(255,255,255,0) 0,var(--surface) 18%,var(--surface) 100%);
}
.publish{
  display:block;width:100%;cursor:pointer;border:0;border-radius:12px;
  background:var(--go);color:#fff;font:600 14.5px/1 var(--sans);padding:17px;
  transition:background .18s;
}
.publish:hover{background:var(--go-dark)}
.publish:disabled{opacity:.55;cursor:default}

.sheet-error{
  margin-top:12px;padding:12px 14px;border-radius:10px;
  background:var(--accent-soft);border:1px solid rgba(0,0,0,.25);
  color:var(--accent);font-size:11.5px;line-height:1.55;white-space:pre-wrap;
}

/* ── misc ───────────────────────────────── */
.empty{padding:64px 20px;text-align:center}
.empty p{color:var(--ink-3);font-size:13px;margin:0 0 18px}
.ghost-btn{
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  color:var(--ink-2);font:500 12.5px/1 var(--sans);padding:12px 22px;cursor:pointer;
}
.ghost-btn:hover{color:var(--accent);border-color:var(--accent)}

.foot{padding:36px 20px 10px;text-align:center}
.foot span{font-size:10px;color:#b5b5b5;letter-spacing:.3px}

.toast{
  position:fixed;left:50%;bottom:100px;transform:translateX(-50%);
  z-index:60;padding:12px 19px;border-radius:999px;
  background:var(--ink);border:1px solid rgba(0,0,0,.1);color:#ffffff;font-size:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  animation:rise .28s ease both;max-width:90vw;text-align:center;
}
.toast.bad{background:var(--accent)}

.skeleton{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  margin:0 12px;padding:24px 20px;
}
.sk-line{
  height:11px;border-radius:5px;margin-bottom:11px;
  background:linear-gradient(90deg,var(--surface-2),#e8e8e8,var(--surface-2));
  background-size:200% 100%;animation:shimmer 1.4s infinite;
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

@media (max-width:430px){
  .hero h1{font-size:38px}
  .post{margin:0 8px;padding:20px 16px 18px}
  .person small{font-size:9px}
}


/* ══ DearCameo 추가 ══════════════════════════════════════ */

a{color:inherit}
.brand{text-decoration:none;color:var(--ink)}

/* ── 상단 탭 ─────────────────────────────── */
.tabs{display:flex;gap:4px;padding:0 14px}
.tabs a{
  position:relative;padding:10px 8px 11px;text-decoration:none;
  font:500 12.5px/1 var(--sans);color:var(--ink-3);transition:color .18s;
}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);font-weight:600}
.tabs a.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--ink);border-radius:2px}
.tabs .me-face{margin-right:3px}

.hero{padding:40px 20px 30px}
.hero h1{font-size:42px}

/* ── 포스트 머리 ─────────────────────────── */
.who .name a,.cname a{text-decoration:none}
.who .name a:hover,.cname a:hover{text-decoration:underline;text-underline-offset:3px}
.who .meta .thrower{color:var(--ink-2)}
.avatar.link{cursor:pointer}

/* 원문 카드: 링크 미리보기 + 중립 요약 */
.src-card{
  display:flex;gap:12px;margin:16px 0 0;padding:12px;
  border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;
  transition:border-color .18s,background .18s;
}
.src-card:hover{border-color:var(--accent-2);background:var(--surface-2)}
.src-card .img{
  width:84px;height:62px;border-radius:8px;flex:none;overflow:hidden;background:var(--surface-2);
  display:grid;place-items:center;font-size:20px;color:var(--ink-3);
}
.src-card .img img{width:100%;height:100%;object-fit:cover;display:block}
.src-card .info{min-width:0;flex:1}
.src-card .site{font-size:10px;color:var(--ink-3);letter-spacing:.2px}
.src-card .t{
  font-size:13px;font-weight:600;line-height:1.4;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.summary{margin:10px 0 0;font-size:12px;line-height:1.58;color:var(--ink-2)}
.summary b{font-weight:600;color:var(--ink-2);margin-right:4px}

/* ── 캐스트 10명: 사진 옆에 짧은 소개 ────────── */
.cast{margin:18px 0 0;padding:16px 0 0}
.chips{
  display:flex;gap:6px;margin:12px -20px 0;padding:2px 20px 6px;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;scroll-snap-align:start;position:relative;
  display:flex;align-items:center;gap:8px;max-width:172px;
  padding:6px 11px 6px 6px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);
  transition:background .18s,border-color .18s,transform .18s;
}
.chip:hover{background:var(--surface-2);transform:translateY(-1px)}
.chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.active .cb{color:rgba(255,255,255,.66)}
.chip .face{
  width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--accent-2-soft);border:1px solid var(--line);
  display:grid;place-items:center;font:600 11px/1 var(--sans);color:var(--accent-2);
}
.chip .face img{width:100%;height:100%;object-fit:cover;display:block}
.chip .ct{min-width:0;display:flex;flex-direction:column;gap:2px}
.chip .cn{font-size:11.5px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .cb{font-size:9.5px;line-height:1.2;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .op-tag{
  position:absolute;top:-4px;left:28px;
  font:700 7.5px/1 var(--sans);letter-spacing:.5px;
  background:var(--ink);color:#fff;border:2px solid var(--surface);border-radius:999px;padding:2px 4px;
}
.chip.active .op-tag{background:#fff;color:var(--ink);border-color:var(--ink)}

/* ── 역할극 입력창 ───────────────────────── */
.rp-sub a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.rp-sub a:hover{color:var(--ink);border-color:var(--ink)}
.rp-target{
  display:flex;align-items:center;gap:8px;margin:0 0 9px;
  font-size:11px;color:var(--ink-2);
}
.rp-target b{font-weight:600}
.rp-target button{
  border:0;background:none;cursor:pointer;color:var(--ink-3);font-size:14px;line-height:1;padding:0 2px;
}
.rp-target button:hover{color:var(--ink)}
.rp-close{
  margin-left:auto;align-self:flex-start;border:0;background:none;cursor:pointer;
  color:var(--ink-3);font-size:17px;line-height:1;padding:0 2px;
}
.rp-close:hover{color:var(--ink)}

/* ── 스레드 ──────────────────────────────── */
.thread{border-left:0;padding-left:0}
.thread-empty{
  margin:16px 0 0;padding:16px;border:1px dashed var(--line);border-radius:12px;
  text-align:center;font-size:12px;line-height:1.56;color:var(--ink-3);
}
.thread-empty b{color:var(--ink);font-weight:600}
.croot{padding:12px 0 4px;border-top:1px solid var(--line-soft)}
.croot:first-child{border-top:0}
.replies{margin:2px 0 0 42px;padding-left:12px;border-left:1px solid var(--line-soft)}
.replies .comment .avatar{width:28px;height:28px}
.comment .cname{cursor:pointer}
.comment .player{
  font-size:10.5px;color:var(--ink-2);margin-left:6px;text-decoration:none;white-space:nowrap;
}
.comment .player:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

.cfoot{display:flex;gap:14px;align-items:center;margin-top:6px;font-size:11px;color:var(--ink-3)}
.cfoot button{
  background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;
  display:flex;align-items:center;gap:4px;transition:color .18s;
}
.cfoot button:hover{color:var(--ink)}
.cfoot button.on{color:var(--ink);font-weight:600}
.cfoot button:disabled{opacity:.4;cursor:default}
.top-flag{
  display:inline-block;margin:0 0 6px 42px;font:600 9.5px/1 var(--sans);letter-spacing:.4px;
  padding:4px 7px;border-radius:999px;background:var(--ink);color:#fff;
}
.comment.flash{animation:flash 2.2s ease}
@keyframes flash{0%,40%{background:#fff4c2}100%{background:transparent}}
.ai-err{font-size:10.5px;color:var(--ink-3);margin:4px 0 0 42px}

/* ── 홈 (카메오 · 플레이어) ─────────────── */
.home{padding:28px 20px 8px}
.home-head{display:flex;gap:16px;align-items:center}
.home-face{
  width:84px;height:84px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--accent-2-soft);border:1px solid var(--line);
  box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--line-soft);
  display:grid;place-items:center;font:600 22px/1 var(--sans);color:var(--accent-2);
}
.home-face img{width:100%;height:100%;object-fit:cover;display:block}
.home-face.emoji{font-size:44px;background:var(--surface-2)}
.home-name{font-family:var(--serif);font-size:34px;line-height:1.05;letter-spacing:-.4px}
.home-bio{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.home-bio a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line);margin-left:6px;font-size:11px}
.home-bio a:hover{color:var(--ink)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:22px 0 0;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stat{background:var(--surface);padding:13px 10px 12px}
.stat b{display:block;font-family:var(--serif);font-size:24px;font-weight:400;line-height:1;letter-spacing:-.3px}
.stat span{display:block;font-size:9.5px;color:var(--ink-3);margin-top:6px;letter-spacing:.2px}
.stat .up{font-size:10px;color:var(--ink-2);font-family:var(--sans);margin-left:3px}

.home-actions{display:flex;gap:8px;margin:16px 0 0}
.home-actions .publish{padding:14px;font-size:13.5px}
.home-actions .ghost-btn{flex:none}

.section{margin:30px 0 0}
.section-label{
  display:flex;align-items:baseline;gap:8px;
  font:600 10px/1 var(--sans);letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px;
}
.section-label .hint{font-weight:400;letter-spacing:0;text-transform:none;font-size:10.5px;color:var(--ink-3)}

.best{
  display:block;padding:16px;border-radius:14px;text-decoration:none;
  background:var(--ink);color:#fff;
}
.best .bh{display:flex;gap:10px;align-items:center}
.best .face{width:36px;height:36px;border-radius:50%;overflow:hidden;background:#333;flex:none;display:grid;place-items:center;font:600 11px/1 var(--sans)}
.best .face img{width:100%;height:100%;object-fit:cover}
.best .bn{font-weight:600;font-size:13px}
.best .bs{font-size:10.5px;color:rgba(255,255,255,.6);margin-top:3px}
.best .bt{font-size:14px;line-height:1.66;margin-top:12px}
.best .bl{font-size:12px;margin-top:10px;color:rgba(255,255,255,.8)}

.played{display:flex;flex-wrap:wrap;gap:6px}
.played .chip{cursor:pointer;text-decoration:none;color:inherit}

.players{display:flex;flex-direction:column}
.prow{
  display:flex;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:inherit;
}
.prow:last-child{border-bottom:0}
.prow:hover{background:var(--surface-2)}
.prow .rk{width:26px;flex:none;text-align:center;font-family:var(--serif);font-size:19px;color:var(--ink-2)}
.prow .rk.medal{font-family:var(--sans);font-size:17px}
.prow .pf{
  width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;font:600 12px/1 var(--sans);color:var(--accent-2);
}
.prow .pf.emoji{font-size:20px}
.prow .pf img{width:100%;height:100%;object-fit:cover}
.prow .pi{flex:1;min-width:0}
.prow .pn{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .ps{font-size:10.5px;color:var(--ink-3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .sc{font-family:var(--serif);font-size:20px;flex:none}
.prow.me{background:var(--accent-soft)}

.seg{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.seg button{
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:999px;font:500 12px/1 var(--sans);padding:9px 14px;cursor:pointer;
}
.seg button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.seg .gap{flex:1}

.acts{display:flex;flex-direction:column}
.act{
  display:flex;gap:11px;padding:14px 4px;border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:inherit;
}
.act:hover{background:var(--surface-2)}
.act .avatar{width:34px;height:34px;box-shadow:none}
.act .ab{flex:1;min-width:0}
.act .ak{font-size:10.5px;color:var(--ink-3);line-height:1.5}
.act .ak b{color:var(--ink);font-weight:600}
.act .at{font-size:13.5px;line-height:1.62;color:#222;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.act .at .ttl{font-family:var(--serif);font-size:17px;display:block;margin-bottom:2px}
.act .am{font-size:10.5px;color:var(--ink-3);margin-top:6px}

.back{display:inline-flex;align-items:center;gap:6px;margin:16px 20px 0;font-size:12px;color:var(--ink-3);text-decoration:none}
.back:hover{color:var(--ink)}

/* ── 시트 부가 ───────────────────────────── */
.sheet.small{max-width:460px}
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.emoji-grid button{
  aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  font-size:24px;cursor:pointer;transition:background .15s,border-color .15s;
}
.emoji-grid button:hover{background:var(--surface-2)}
.emoji-grid button.on{border-color:var(--ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--ink)}
.paste{margin-top:20px}
.paste summary{cursor:pointer;font-size:11.5px;color:var(--ink-3)}
.paste summary:hover{color:var(--ink)}
.paste textarea{margin-top:10px;min-height:96px !important}
.resolved.locked .drop{display:none}

.stage{
  display:flex;flex-direction:column;gap:8px;margin:18px 0 0;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
}
.stage .st{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-3)}
.stage .st.done{color:var(--ink-2)}
.stage .st.now{color:var(--ink);font-weight:500}
.stage .st i{width:16px;text-align:center;font-style:normal}

@media (max-width:430px){
  .hero h1{font-size:36px}
  .home-name{font-size:28px}
  .home-face{width:70px;height:70px}
  .stat b{font-size:20px}
  .chips{margin:12px -16px 0;padding:2px 16px 6px}
  .replies{margin-left:30px}
}

/* ── OP 고르기 (링크를 던진 사람에게만) ──── */
.chooser{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line-soft)}
.cands{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.cand{
  display:flex;gap:10px;align-items:flex-start;text-align:left;cursor:pointer;
  padding:11px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  font:inherit;color:inherit;transition:background .18s,border-color .18s,transform .18s;
}
.cand:hover{background:var(--surface-2);border-color:var(--accent-2);transform:translateY(-1px)}
.cand:disabled{cursor:default;opacity:.45;transform:none}
.cand.on{opacity:1;background:var(--ink);border-color:var(--ink);color:#fff}
.cand.on .cb,.cand.on .ce{color:rgba(255,255,255,.7)}
.cand .face{
  width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--accent-2-soft);border:1px solid var(--line);
  display:grid;place-items:center;font:600 12px/1 var(--sans);color:var(--accent-2);
}
.cand .face img{width:100%;height:100%;object-fit:cover;display:block}
.cand .ci{min-width:0;display:flex;flex-direction:column;gap:3px}
.cand .cn{font-size:13px;font-weight:600;line-height:1.3}
.cand .cb{font-size:10.5px;color:var(--ink-3);line-height:1.3}
.cand .ce{font-size:11px;color:var(--ink-2);line-height:1.4}
.ctag{
  display:inline-block;vertical-align:1px;margin-left:5px;
  font:600 8.5px/1 var(--sans);letter-spacing:.3px;padding:3px 5px;border-radius:4px;
  border:1px solid var(--line);color:var(--ink-3);
}
.ctag.rec{background:var(--ink);border-color:var(--ink);color:#fff}
.cand.on .ctag{border-color:rgba(255,255,255,.4);color:#fff}
@media (max-width:430px){ .cands{grid-template-columns:1fr} }

/* ── 헤더 검색 (DearCast 와 같은 모양) ───── */
.top-row{gap:12px}
.brand{flex:none}
.search-field{
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:38px;
  padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);
  cursor:text;transition:border-color .15s,background .15s;
}
.search-field:focus-within{border-color:var(--ink);background:var(--surface)}
.sf-icon{color:var(--ink-3);display:flex}
.sf-icon .ic{width:16px;height:16px}
.search-field input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:14px/1.3 var(--sans);color:var(--ink);padding:0;
  -webkit-appearance:none;appearance:none;
}
.search-field input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-field input::placeholder{color:#b5b5b5}
.search-cancel{
  flex:none;border:0;background:none;cursor:pointer;padding:6px 2px;
  font:500 13.5px/1 var(--sans);color:var(--ink);
}
.search-results{padding:4px 8px 40px}
.search-hint{padding:36px 16px;text-align:center;font-size:12.5px;color:var(--ink-3)}
.sr-head{font:600 10.5px/1 var(--sans);letter-spacing:.8px;color:var(--ink-3);padding:18px 10px 8px;text-transform:uppercase}
.sr-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;text-decoration:none;color:inherit}
.sr-row:hover{background:var(--surface-2)}
.sr-face{
  width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;font:600 12px/1 var(--sans);color:var(--ink-3);
}
.sr-face.emoji{font-size:20px}
.sr-face img{width:100%;height:100%;object-fit:cover}
.sr-info{min-width:0;flex:1}
.sr-title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-sub{font-size:11.5px;color:var(--ink-3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-side{font-size:11px;color:var(--ink-3);flex:none;white-space:nowrap}

/* ── 분야 탭 · 라벨 ──────────────────────── */
.cats{
  display:flex;gap:6px;padding:9px 16px 10px;border-top:1px solid var(--line-soft);
  overflow-x:auto;scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.cats::-webkit-scrollbar{display:none}
.cats a{
  flex:none;padding:7px 12px;border-radius:999px;text-decoration:none;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font:500 12px/1 var(--sans);transition:background .15s,color .15s,border-color .15s;
}
.cats a:hover{color:var(--ink);border-color:var(--accent-2)}
.cats a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-label{
  display:inline-block;padding:3px 7px;border-radius:999px;text-decoration:none;
  border:1px solid var(--line);color:var(--ink-2);font:600 9.5px/1 var(--sans);letter-spacing:.2px;
}
.cat-label:hover{border-color:var(--ink);color:var(--ink)}
.post-top{display:flex;justify-content:flex-end;margin:-8px 0 8px}

/* 실패한 링크: 던진 사람에게 다시 던지기 / 닫기 */
.err-actions{display:flex;gap:8px;margin-top:10px}
.err-actions button{
  border:0;border-radius:9px;cursor:pointer;background:var(--ink);color:#fff;
  font:600 12px/1 var(--sans);padding:10px 14px;
}
.err-actions button.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.err-actions button:hover{filter:brightness(1.15)}

/* ── 도착 전 자리 표시 (진행 문구 대신) ───── */
.sk-body{display:flex;flex-direction:column;gap:9px;margin:16px 0 0}
.who .sk-body{margin:2px 0 0;gap:7px}
.sk-body .sk-line,.cand.sk .sk-line{display:block;margin:0;height:10px}
.avatar.sk-face,.cand.sk .face{
  background:linear-gradient(90deg,var(--surface-2),#e8e8e8,var(--surface-2));
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-color:var(--line-soft);
}
.cand.sk{cursor:default;pointer-events:none;border-color:var(--line-soft)}
.cand.sk .ci{flex:1;gap:8px;padding-top:6px}
#throwCast{animation:rise .35s ease both}
#throwCast .src-card{margin:0 0 12px}
#throwCast .cands{margin-top:0}
.sheet-foot{height:calc(22px + env(safe-area-inset-bottom))}
/* 섭외되는 대로 한 명씩: 새로 온 카드는 살짝 떠오르며 등장, 다 모이기 전엔 누를 수 없다 */
.cand.arrive{animation:rise .38s cubic-bezier(.2,.8,.3,1) both}
.cand.arrive:disabled{opacity:1;cursor:default}

/* ── 공유 ────────────────────────────────── */
.actions .share-btn{margin-left:auto}
.share-preview{
  display:block;width:100%;height:auto;aspect-ratio:1200/630;margin-top:16px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);object-fit:cover;
}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.share-grid button{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;
  border-radius:10px;padding:13px 8px;font:500 13px/1 var(--sans);transition:background .15s,border-color .15s;
}
.share-grid button:hover{background:var(--surface-2);border-color:var(--accent-2)}
.share-grid .share-copy{grid-column:1/-1;background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.share-grid .share-copy:hover{background:#363636}

/* ── 팔로우 ──────────────────────────────── */
.follow{
  flex:none;align-self:flex-start;cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:#fff;
  border-radius:999px;font:600 11.5px/1 var(--sans);padding:8px 14px;transition:background .15s,color .15s;
}
.follow:hover{background:#363636}
.follow.on{background:var(--surface);color:var(--ink-2);border-color:var(--line)}
.follow.on:hover{color:var(--ink);border-color:var(--ink)}
.follow.on::before{content:"✓ "}
.follow.wide{flex:1;padding:14px;font-size:13.5px;border-radius:12px}
.home-actions .publish{flex:1}

/* ── 포스트 그림 (웹툰) ─────────────────── */
.post-image{margin:14px 0 0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.post-image img{display:block;width:100%;height:auto;max-height:680px;object-fit:contain;background:var(--surface-2)}
.post-image img:not(.loaded){aspect-ratio:4/5}
.post-image figcaption{font-size:10.5px;color:var(--ink-3);padding:7px 10px}
.post-image.toon{position:relative}
.toon-strip{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.toon-strip::-webkit-scrollbar{display:none}
.toon-strip img{
  flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  /* 컷마다 잘린 크기가 1~2% 씩 달라서, 틀을 고정해야 넘길 때 높이가 안 흔들린다 */
  aspect-ratio:4/5;max-height:680px;object-fit:contain;
}
.toon-dots{
  position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:5px;
  pointer-events:none;
}
.toon-dots i{
  width:5px;height:5px;border-radius:50%;background:rgba(17,17,17,.22);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75);transition:background .15s;
}
.toon-dots i.on{background:var(--ink)}
.toon-nav{
  position:absolute;top:calc(50% - 16px);width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);
  font:400 19px/1 var(--sans);cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .15s;
}
.toon-nav.prev{left:8px}
.toon-nav.next{right:8px}
.post-image.toon:hover .toon-nav{opacity:1}
.toon-nav:hover{border-color:var(--ink)}
/* 손가락으로 넘기는 화면에선 화살표가 거치적거린다 */
@media (hover:none){ .toon-nav{display:none} }
/* ── timeline (시대 드래그바) ───────────── */
.timeline{padding:2px 20px 10px}
/* 머리글이 숨으면 막대가 키워드 버튼에 붙어 버린다 */
.tl-head[hidden] + .tl-track{margin-top:10px}
.tl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:22px}
.tl-label{font-size:11.5px;color:var(--ink-3)}
.tl-label b{color:var(--ink);font-weight:600}

.tl-track{position:relative;height:34px;margin-top:6px}
/* 포스트가 몰린 시대가 보이는 밀도 막대 */
.tl-hist{
  position:absolute;left:0;right:0;bottom:9px;height:22px;
  display:flex;align-items:flex-end;gap:1px;pointer-events:none;
}
/* 바깥 막대 = 그 시기의 모든 글, 안쪽 막대 = 지금 고른 키워드의 글 (아래에서 차오른다) */
.tl-hist i{
  flex:1;background:#ececec;border-radius:1px 1px 0 0;min-width:1px;
  display:flex;align-items:flex-end;
}
.tl-hist i b{display:block;width:100%;background:#c4c4c4;border-radius:1px 1px 0 0}
.tl-hist i.on b{background:var(--ink)}
.tl-track.idle .tl-hist i.on b{background:#8e8e8e}
.tl-band{
  position:absolute;bottom:4px;height:3px;border-radius:2px;
  background:var(--ink);pointer-events:none;
}
.tl-track::after{
  content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;
  background:var(--line);pointer-events:none;
}

.tl-range{
  -webkit-appearance:none;appearance:none;
  position:absolute;left:-8px;right:-8px;bottom:-4px;width:calc(100% + 16px);height:22px;
  margin:0;background:transparent;cursor:pointer;z-index:2;
}
.tl-range:focus{outline:none}
.tl-range::-webkit-slider-runnable-track{height:22px;background:transparent}
.tl-range::-moz-range-track{height:22px;background:transparent}
.tl-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;margin-top:3px;border-radius:50%;
  background:var(--surface);border:2px solid var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.tl-range::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.tl-track.idle .tl-range::-webkit-slider-thumb{border-color:#bdbdbd}
.tl-track.idle .tl-range::-moz-range-thumb{border-color:#bdbdbd}
.tl-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(0,0,0,.12)}

.tl-ticks{position:relative;height:13px;margin-top:2px}
.tl-ticks span{
  position:absolute;top:0;transform:translateX(-50%);
  font-size:9px;color:var(--ink-3);white-space:nowrap;letter-spacing:.2px;
}
.tl-ticks span:first-child{transform:none}
.tl-ticks span:last-child{transform:translateX(-100%)}

@media (max-width:430px){
  .timeline{padding:2px 16px 9px}
  /* 좁은 화면에선 1900 눈금이 1800·2000과 겹친다 */
  .tl-ticks span:nth-child(6){display:none}
}

/* ── 인물 홈 ─────────────────────────────── */
a.to-char{color:inherit;text-decoration:none}
a.to-char:hover{text-decoration:underline;text-underline-offset:2px}
/* 아바타 링크만. (예전엔 :first-child 로 잡아서 이름 링크까지 높이 32px 이 걸렸다) */
a.av-link{flex:none;border-radius:50%;display:block;line-height:0}
a.av-link:hover{text-decoration:none}
.comment .cname{line-height:1.35}

.back-bar{padding:12px 20px 0}
.back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--ink-2);text-decoration:none;
  padding:6px 10px 6px 6px;border-radius:999px;
}
.back:hover{background:var(--surface-2);color:var(--ink)}

.char-head{padding:22px 20px 22px;text-align:center;border-bottom:1px solid var(--line)}
.char-avatar{
  width:96px;height:96px;border-radius:50%;margin:0 auto;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;font:600 26px/1 var(--sans);color:var(--ink-3);
}
.char-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.char-name{font-family:var(--serif);font-weight:400;font-size:34px;letter-spacing:-.4px;margin:14px 0 0}
.char-bio{font-size:13px;color:var(--ink);margin-top:6px}
.char-desc{font-size:12px;color:var(--ink-3);margin-top:4px}
.char-extract{
  font-size:13px;line-height:1.75;color:var(--ink-2);
  max-width:46ch;margin:14px auto 0;text-align:left;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.char-stats{display:flex;justify-content:center;gap:18px;margin-top:14px;font-size:12.5px;color:var(--ink-3)}
.char-stats b{color:var(--ink);font-weight:600;margin-right:2px}
.char-stats a{color:var(--ink-3);text-decoration:none}
.char-stats a:hover{color:var(--ink)}
.char-cta{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;cursor:pointer;
  border:0;border-radius:999px;background:var(--ink);color:#fff;
  font:600 13.5px/1 var(--sans);padding:14px 22px;
}
.char-cta:hover{background:#363636}

.char-tabs{display:flex;border-bottom:1px solid var(--line);padding:0 12px}
.char-tabs button{
  flex:1;background:none;border:0;cursor:pointer;
  font:500 13px/1 var(--sans);color:var(--ink-3);
  padding:15px 0 13px;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.char-tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}

.char-comments{padding:6px 12px}
.char-comment{
  display:block;text-decoration:none;color:inherit;
  padding:14px 8px;border-bottom:1px solid var(--line-soft);border-radius:8px;
}
.char-comment:hover{background:var(--surface-2)}
.cc-meta{display:flex;align-items:center;gap:0;font-size:11px;color:var(--ink-3)}
.cc-meta .badge:first-child{margin-left:0}
.cc-meta span:last-child{margin-left:8px}
.cc-text{font-size:14px;line-height:1.65;color:var(--ink);margin-top:6px}
.cc-where{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;color:var(--ink-3);min-width:0}
.cc-where span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-where b{color:var(--ink-2);font-weight:600}
.cc-face{
  width:20px;height:20px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;font:600 8px/1 var(--sans);color:var(--ink-3);
}
.cc-face img{width:100%;height:100%;object-fit:cover}

/* ── 아이콘 · 검색 ───────────────────────── */
.ic{width:17px;height:17px;flex:none;display:block}
.icon-btn{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-2);border:1px solid var(--line);background:var(--surface);
}
.icon-btn:hover{color:var(--ink);border-color:var(--ink)}
.search-pill{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px 0 11px;
  border-radius:999px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink-2);text-decoration:none;font:500 12.5px/1 var(--sans);
}
.search-pill:hover{color:var(--ink);border-color:var(--ink);background:var(--surface)}
.search-pill .ic{width:15px;height:15px}
@media (max-width:380px){ .search-pill span{display:none} .search-pill{padding:0 9px} }
.back .ic{width:15px;height:15px}
.char-cta .ic{width:15px;height:15px}

.search-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.search-bar .back{padding:8px}
.search-bar input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);
  padding:11px 16px;font:14.5px/1.4 var(--sans);color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.search-bar input:focus{outline:none;border-color:var(--ink);background:var(--surface)}
.search-results{padding:4px 8px 40px}
.search-hint{padding:36px 16px;text-align:center;font-size:12.5px;color:var(--ink-3)}
.sr-head{font:600 10.5px/1 var(--sans);letter-spacing:.8px;color:var(--ink-3);padding:18px 10px 8px;text-transform:uppercase}
.sr-head span{font-weight:400;letter-spacing:0;text-transform:none;margin-left:4px}
.sr-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;text-decoration:none;color:inherit}
.sr-row:hover{background:var(--surface-2)}
.sr-face{
  width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;font:600 12px/1 var(--sans);color:var(--ink-3);
}
.sr-face img{width:100%;height:100%;object-fit:cover}
.sr-info{min-width:0;flex:1}
.sr-title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-sub{font-size:11.5px;color:var(--ink-3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-side{font-size:11px;color:var(--ink-3);flex:none;white-space:nowrap}

/* ── 인물 홈 포스트 카드 ─────────────────── */
.post-cards{display:flex;flex-direction:column;gap:10px;padding:14px 12px}
.post-card{
  display:flex;gap:14px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface);
}
.post-card:hover{border-color:var(--ink-3)}
.pc-img{width:84px;height:84px;flex:none;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.pc-img img{width:100%;height:100%;object-fit:cover;display:block}
.pc-body{min-width:0;flex:1}
.pc-meta{font-size:11px;color:var(--ink-3)}
.pc-title{font-family:var(--serif);font-size:19px;line-height:1.25;margin-top:5px}
.pc-text{
  font-size:13px;line-height:1.6;color:var(--ink-2);margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pc-foot{display:flex;gap:14px;margin-top:8px;font-size:11.5px;color:var(--ink-3)}

/* ── 포스트 이미지 (샘플) ────────────────── */
.post-image{margin:14px 0 0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
/* 말풍선이 잘리지 않게 자르지 않는다 (웹툰 컷은 4:5) */
.post-image img{display:block;width:100%;height:auto;max-height:680px;object-fit:contain;background:var(--surface-2)}
.post-image figcaption{font-size:10.5px;color:var(--ink-3);padding:7px 10px}

/* ── 멘션 ───────────────────────────────── */
.mention-strip{
  display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px;margin-top:2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.mention-strip::-webkit-scrollbar{display:none}
.m-chip{
  flex:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:3px 10px 3px 3px;font:500 12px/1 var(--sans);color:var(--ink);
}
.m-chip:hover{border-color:var(--ink)}
.m-chip i{font-style:normal;font-size:9.5px;color:var(--ink-3);letter-spacing:.3px}
.m-face{
  width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--surface-2);display:grid;place-items:center;font:600 8px/1 var(--sans);color:var(--ink-3);
}
.m-face img{width:100%;height:100%;object-fit:cover}
.rp-actions{flex-wrap:nowrap}
.rp-actions .mention-btn{
  flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:999px;font:600 11.5px/1 var(--sans);padding:8px 11px;cursor:pointer;
}
.rp-actions .mention-btn:hover{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.rp-actions .hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 캐스트 한 목록 (OP + 10명) ─────────────── */
/* OP 포함 10명을 5명씩 두 줄 */
.people.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px 4px}

/* ── 헤더 검색창 (가로로 길게, 바로 입력) ───── */
.top-row{gap:12px}
.brand{flex:none}
.search-field{
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:38px;
  padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);
  cursor:text;transition:border-color .15s,background .15s;
}
.search-field:focus-within{border-color:var(--ink);background:var(--surface)}
.sf-icon{color:var(--ink-3);display:flex}
.sf-icon .ic{width:16px;height:16px}
.search-field input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:14px/1.3 var(--sans);color:var(--ink);padding:0;
  -webkit-appearance:none;appearance:none;
}
.search-field input::placeholder{color:#b5b5b5}
.search-cancel{
  flex:none;border:0;background:none;cursor:pointer;padding:6px 2px;
  font:500 13.5px/1 var(--sans);color:var(--ink);
}

/* 폴링으로 다시 그린 포스트는 조용히: 등장 애니메이션은 새 댓글에만 */
.post.settled,.post.settled .roleplay.show,.post.settled .comment:not(.is-new){animation:none}
/* 그림이 로드되기 전 높이 0 → 로드 후 튀는 걸 막는다. 웹툰 컷은 4:5 라 자리를 미리 잡아 두고,
   로드되면 원래 비율로 (예전 가로형 그림도 있어서) */
.post-image img:not(.loaded){aspect-ratio:4/5}

.comment .ctime{font-size:10.5px;color:var(--ink-3);margin-left:7px}

/* ── 공유 ───────────────────────────────── */
.actions .share-btn{margin-left:auto}
.sheet.small{max-width:460px;border-radius:20px 20px 0 0}
.share-preview{
  width:100%;height:auto;aspect-ratio:1200/630;margin-top:16px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);object-fit:cover;
}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.share-grid button{
  border:1px solid var(--line);background:var(--surface);border-radius:10px;
  padding:12px 6px;font:500 12.5px/1 var(--sans);color:var(--ink);cursor:pointer;
}
.share-grid button:hover{background:var(--surface-2);border-color:var(--ink)}
.share-grid .share-copy{grid-column:1/-1;background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.share-grid .share-copy:hover{background:#363636}

/* ── 키워드 버튼 ─────────────────────────── */
.tags{
  display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  overscroll-behavior-x:contain;
}
.tags::-webkit-scrollbar{display:none}
.tag-chip{
  flex:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:5px 11px;font:500 12.5px/1 var(--sans);color:var(--ink-2);white-space:nowrap;
  transition:border-color .12s,color .12s,background .12s;
}
.tag-chip:hover{border-color:var(--ink-3);color:var(--ink)}
.tag-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tag-chip .n{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tag-chip.on .n{color:rgba(255,255,255,.62)}

/* ── 웹툰 넘겨 보기 ───────────────────────── */
.post-image.toon{position:relative}
.toon-strip{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.toon-strip::-webkit-scrollbar{display:none}
.toon-strip img{
  flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  /* 컷마다 잘린 크기가 1~2% 씩 달라서, 틀을 고정해야 넘길 때 높이가 안 흔들린다 */
  aspect-ratio:4/5;max-height:680px;object-fit:contain;
}
.toon-dots{
  position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:5px;
  pointer-events:none;
}
.toon-dots i{
  width:5px;height:5px;border-radius:50%;background:rgba(17,17,17,.22);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75);transition:background .15s;
}
.toon-dots i.on{background:var(--ink)}
.toon-nav{
  position:absolute;top:calc(50% - 16px);width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);
  font:400 19px/1 var(--sans);cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .15s;
}
.toon-nav.prev{left:8px}
.toon-nav.next{right:8px}
.post-image.toon:hover .toon-nav{opacity:1}
.toon-nav:hover{border-color:var(--ink)}
/* 손가락으로 넘기는 화면에선 화살표가 거치적거린다 */
@media (hover:none){ .toon-nav{display:none} }

/* ── 죽은 사람들의 SNS: 생몰년 · 등록 후보 ── */
.life{font-size:10.5px;color:var(--ink-3);font-weight:400;letter-spacing:.2px}
.prow .life{margin-left:4px}
.suggest-row.off{opacity:.55}
.suggest-row.off .d{color:var(--accent-2)}
.suggest-row .life{margin-left:4px}
.resolved .life{margin-left:5px}
.seg.mode{margin:0 0 10px}
#writeNote{font-size:13px}

/* ── 키워드 태그 줄 (분야 구분 대신) ────── */
.tags{
  display:flex;gap:6px;padding:0 16px 10px;overflow-x:auto;scrollbar-width:none;
}
.tags::-webkit-scrollbar{display:none}
.tags a{
  flex:none;padding:6px 11px;border-radius:999px;text-decoration:none;white-space:nowrap;
  background:var(--surface-2);color:var(--ink-2);font:500 11.5px/1 var(--sans);
  border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;
}
.tags a:hover{color:var(--ink);border-color:var(--line)}
.tags a.on{background:var(--ink);color:#fff}
.hero h1 em{font-style:italic}
/* 작성 창의 AI 도움 줄 */
.ai-row{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.ai-row .ghost-btn{padding:9px 14px;font-size:12px}
.ai-row .ghost-btn:disabled{opacity:.5;cursor:default}
.ai-left{font-size:10.5px;color:var(--ink-3);margin-left:auto}

/* 방금 쓴 댓글 — 어디에 붙었는지 잠깐 표시해 준다 */
.comment.just-mine{animation:mineGlow 2.4s ease-out}
@keyframes mineGlow{
  0%{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
  70%{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
  100%{background:transparent;box-shadow:none}
}

/* ── beta 라벨 ───────────────────────────── */
.brand .beta{
  font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:super;margin-left:5px;padding:2px 6px;border-radius:999px;
  background:var(--hot);color:#fff;line-height:1;top:0;
}

/* ── 피드백 ─────────────────────────────── */
.foot-link{
  display:inline-block;margin-top:8px;padding:6px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--hot);background:transparent;color:var(--hot);
  font:700 11.5px/1 var(--sans);
}
.foot-link:hover{background:var(--hot);color:#fff}
.hero-feedback{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  padding:11px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--hot);background:var(--hot);color:#fff;
  font:700 13px/1 var(--sans);letter-spacing:.01em;
  box-shadow:0 3px 14px rgba(226,84,43,.3);
  transition:background .15s,box-shadow .15s,transform .1s;
}
.hero-feedback:hover{background:var(--hot-dark);box-shadow:0 4px 18px rgba(226,84,43,.38)}
.hero-feedback:active{transform:translateY(1px)}
.hero-feedback .hf-star{font-size:15px;line-height:1}
.hero-feedback .hf-sub{font-weight:500;opacity:.85}
.stars{display:flex;gap:4px;margin:16px 0 12px}
.stars button{
  border:0;background:none;cursor:pointer;padding:2px;line-height:1;
  font-size:30px;color:var(--line);transition:color .12s,transform .12s;
}
.stars button.on{color:var(--hot)}
.stars button:hover{transform:scale(1.12)}
#feedback textarea{
  width:100%;box-sizing:border-box;resize:vertical;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  padding:12px 14px;font:400 14.5px/1.55 var(--sans);color:var(--ink);outline:none;
}
#feedback textarea:focus{border-color:var(--ink)}

/* ── 추천 카메오 ─────────────────────────── */
.rec-why{font-size:11px;color:var(--ink-2);margin-top:3px}
.rec .prow{align-items:flex-start}

/* You 탭: 누르면 펼쳐지는 Following 칸 */
.stats .stat-btn{
  grid-column:1 / -1;                 /* 넷씩 놓인 칸 아래 한 줄을 통째로 쓴다 */
  display:flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;color:inherit;cursor:pointer;border:0;background:var(--surface);
  padding:11px 10px;
}
.stats .stat-btn:hover{background:var(--surface-2)}
.stats .stat-btn b{display:inline;font-size:18px}
.stats .stat-btn span{display:inline;margin:0;font-size:11px;color:var(--ink-2);white-space:nowrap}

/* 만들어지는 중인 포스트 — 한 카드로 가만히 기다린다 */
.post.pending{opacity:.96}
.post.pending .pend{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:13.5px;color:var(--ink-2)}
.post.pending .pend-status{font-weight:600;color:var(--ink)}
.post.pending .pend-hint{margin-top:8px;font-size:11.5px;color:var(--ink-3)}

/* 생몰년 확인이 아직 안 끝난 검색 결과 */
.suggest-row.checking .life{opacity:.4}
.suggest-row.checking{opacity:.92}

/* 성인 확인 */
.age-actions{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.age-actions .publish{width:100%}
.age-actions .ghost-btn{width:100%;justify-content:center}
#age .sheet-close{display:none}

/* 글은 다 됐지만 웹툰이 아직 도착하지 않은 자리 */
.toon-wait{
  display:flex;align-items:center;gap:9px;margin:14px 0 0;padding:16px;
  border:1px dashed var(--line);border-radius:14px;
  color:var(--ink-3);font-size:12px;
}

/* 푸터의 설치 버튼 — 피드백 버튼 옆, 색은 빼고 */
.foot-link.ghost{border-color:var(--line);color:var(--ink-2);margin-left:6px}
.foot-link.ghost:hover{background:var(--surface-2);color:var(--ink)}


/* ══ 모바일: 탭을 아래로, 머리글은 얇게 ══════════════════ */

/* 아래로 스크롤하면 머리글이 접혀 올라간다 (위로 올리면 다시 내려온다) */
.top{transition:transform .22s ease}
.top.away{transform:translateY(-100%)}

/* 시대 드래그바는 접어 둔다 — 키워드 줄의 "Eras" 칩으로 펼친다 */
.tl-chip{
  flex:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:7px 11px 7px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font:600 11.5px/1 var(--sans);white-space:nowrap;
}
/* 아래가 펼쳐진다는 걸 화살표로 알린다 — 열리면 뒤집힌다 */
.tl-chip .cv{
  width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;
}
.tl-chip.open .cv{transform:rotate(180deg)}
.tl-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* 펼쳐진 동안에는 아래 막대와 한 덩어리로 보이게 */
.tl-chip.open{border-color:var(--ink);color:var(--ink);background:var(--surface-2)}
.tl-chip.open.on{background:var(--ink);color:#fff}

@media (max-width:768px){
  /* 탭은 화면 아래 고정 — 일반적인 모바일 앱처럼 */
  .tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    gap:0;padding:0 6px calc(env(safe-area-inset-bottom) * 1);
    background:var(--bg);border-top:1px solid var(--line);
    box-shadow:0 -2px 14px rgba(0,0,0,.05);
  }
  .tabs a{
    flex:1;text-align:center;padding:13px 4px 14px;font-size:12px;
  }
  .tabs a.on::after{left:50%;transform:translateX(-50%);right:auto;width:22px;bottom:6px}
  .app{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  /* 글 위를 덜 가리게 오른쪽으로 옮기고, 아래로 읽어 내려갈 땐 잠시 비켜 준다 */
  .fab{
    left:auto;right:16px;transform:none;
    bottom:calc(74px + env(safe-area-inset-bottom));padding:13px 20px;font-size:13px;
    transition:transform .22s ease,opacity .22s ease;
  }
  .fab.away{transform:translateY(160%);opacity:0;pointer-events:none}
  .foot{padding-bottom:18px}

  /* 머리글 각 줄의 군살 빼기 */
  .top-row{padding:10px 16px 8px}
  .cats{padding:7px 16px 8px}
  .tags{padding:0 16px 8px}
  .timeline{padding:0 16px 10px}
}

@media (max-width:480px){
  /* 좁은 화면에서는 피드백 버튼 부제를 접는다 (두 줄로 접히면 지저분하다) */
  .hero-feedback .hf-sub{display:none}
  .hero-feedback{padding:12px 20px}
}

/* 탭 아이콘 */
.tabs .ti{width:19px;height:19px;fill:currentColor;flex:none}
.tabs a{display:inline-flex;align-items:center;gap:6px}
.tabs .me-face{font-size:15px;line-height:1}

/* 글쓰기 버튼은 색으로 구분한다 (검정 버튼이 많아 섞인다) */
.fab{background:var(--go);box-shadow:0 4px 16px rgba(67,56,202,.32)}
.fab:hover{background:var(--go-dark)}

@media (max-width:768px){
  /* 바텀 탭은 아이콘 위, 글씨 아래 */
  .tabs a{flex-direction:column;gap:3px;padding:8px 4px calc(9px);font-size:10.5px;letter-spacing:.01em}
  .tabs .ti{width:22px;height:22px}
  .tabs .me-face{font-size:19px}
  .tabs a.on::after{display:none}
  .tabs a.on{color:var(--ink)}
  .tabs a.on .ti{fill:var(--ink)}
}

/* ── 댓글에서 @멘션 고르기 ───────────────── */
.rp-field{position:relative}
.mention-pop{
  position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:5;
  max-height:212px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);padding:5px;
}
.mention-pop button{
  display:flex;align-items:center;gap:9px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:8px 9px;border-radius:10px;font:inherit;color:var(--ink);
}
.mention-pop button:hover{background:var(--surface-2)}
.mention-pop .mface{
  width:26px;height:26px;border-radius:999px;overflow:hidden;flex:none;
  background:var(--surface-2);display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:var(--ink-2);
}
.mention-pop .mface img{width:100%;height:100%;object-fit:cover;display:block}
.mention-pop .mn{font-size:13px;font-weight:600;white-space:nowrap}
.mention-pop .mb{
  font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.rp-actions .at-btn{
  flex:none;width:32px;height:32px;padding:0;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font:700 14px/1 var(--sans);
}
.rp-actions .at-btn:hover{background:var(--surface-2);border-color:var(--ink);color:var(--ink)}