/* Cineris(시네리스) — 고서(古書) UI
   책상 위 가죽 장정(바탕 · 메뉴 · 상태 띠) 위에 양피지 한 장(본문)을 펼치고, 그 위에 낱장(패널)을 올린다.
   색: 철잉크(글) · 세피아(선) · 금박(장식 · 보상) · 소혈색(주요 행동 · HP) · 녹청(좋은 것 · 회복) · 남색 잉크(보호막 · 정보) */
:root {
  --fs: 15px;
  --desk: #241b14; --desk-2: #2f241b; --leather-ink: #e9dbbd; --leather-ink-2: #c4ad85; --leather-ink-3: #94805f;
  --bg: #e9dcc0; --page: #eadcbd;
  --surface: #f3e8cf; --surface-2: #eee1c3; --surface-3: #e2d1ac;
  --line: #cdb68a; --line-2: #a98b5d;
  --ink: #2e2318; --ink-2: #54412c; --ink-3: #765e42; /* 보조 글씨도 양피지 위에서 4.5:1 넘게 */
  --primary: #7d2f2a; --primary-2: #9a3f35; --primary-soft: #ecd3bd; --on-primary: #f6e8c9;
  --rose: #a33d33; --rose-soft: #efd1bf;
  --mint: #3f6f5c; --mint-soft: #d9e2c8;
  --sky: #3c5a78; --sky-soft: #d8dccf;
  --butter: #94681a; --butter-soft: #ecdcae;
  --peach: #a8582c; --peach-soft: #efd5b6;
  --gilt: #b08a3e; --gilt-2: #d6b46a;
  --hp: #9b3a30; --sh: #4f7394; --exp: #b08a3e; --pip: #c08a2a;
  --g0: #7d7466; --g1: #3d7a4f; --g2: #2f5f93; --g3: #8a3d7a; --g4: #a6561c; --g5: #9a7410;
  --shadow: 0 1px 0 rgba(255, 248, 228, .6) inset, 0 2px 6px rgba(40, 24, 10, .14);
  --shadow-up: 0 18px 46px rgba(20, 10, 4, .45);
  --r: 4px; --r-s: 3px;
  /* ── 디자인 체계: 새 기능은 아래 값만 쓴다 (색 · 글자 · 간격 · 모서리 · 그림자 · 단추 · 모달) ──
     글자: 페이지 리본 > 낱장 제목(h3) > 소제목(h4 · .mini-h) > 본문 > 보조(.faint) > 꼬리표 */
  --t-page: 1.22rem; --t-title: 1.14rem; --t-sub: .95rem; --t-body: 1rem; --t-ui: .92rem; --t-small: .82rem; --t-micro: .72rem;
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.4rem; --sp-6: 2rem;
  --r-l: 6px;  /* 종이는 각지다: 3 · 4 · 6px 셋만. 둥근 것은 점 · 인장 · 동전뿐 */
  --shadow-card: 0 2px 6px rgba(40, 24, 10, .12);
  --shadow-pop: 0 10px 24px rgba(20, 10, 4, .35);
  --ring: 0 0 0 2px color-mix(in srgb, var(--gilt) 45%, transparent);
  --ctl: 2.25rem; --ctl-s: 1.85rem; --ctl-l: 2.9rem; --tap: 40px;
  /* 밀도(간격 눈금): 화면 뼈대(본문 종이 · 낱장 · 목록 줄 · 제목 간판 · 장식)는 아래 값만 쓴다. 휴대폰(≤860px)과 「촘촘하게」 설정은 값만 바꾼다 */
  --d-gap: .4rem; --d-grid: .6rem; --d-stack: .65rem; --d-li: .4rem; --d-sec: 1rem; --d-dash: .7rem;
  --plate-bw: 10px; --plate-pad: .5rem .7rem; --plate-h3: .4rem;
  --page-bw: 16px; --page-pad: .7rem max(12px, 1.2rem) 1.4rem; --page-mt: .6rem;
  --head-h: 42px; --head-fs: 1.1rem; --head-mb: .55rem; --orn-h: 10px; --tabs-mb: .6rem;
  --modal: 560px; --modal-l: 720px; --modal-xl: 880px;
  --track: color-mix(in srgb, var(--surface-3) 80%, #000 4%);
  /* 리본 · 어두운 그림 위의 글씨 */
  --on-dark: #f1e4c6; --on-dark-2: #cdb994;
  /* 제목 간판: 짙은 호두나무 판 + 놋쇠 상감선 · 못 + 새긴 글씨 (테마와 상관없이 같은 나무) */
  --wood-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='56'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0045 0.26' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.045 0 0 0 0 0.015 0 0 0 1.5 -0.48'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --wood: linear-gradient(90deg, rgba(0, 0, 0, .38), transparent 8%, transparent 92%, rgba(0, 0, 0, .38)), linear-gradient(180deg, #6b4529 0%, #50311c 46%, #3c2414 100%);
  --wood-edge: #1c110a; --wood-ink: #f0dbab;
  --engrave: 0 -1px 0 rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 214, 150, .22);
  --brass-nail: radial-gradient(circle, #f8e4a6 0 .9px, #c99d4c 1.6px, #6e4c1a 2.5px, rgba(0, 0, 0, .45) 3.1px, transparent 3.7px);
  /* 도장(바탕을 채운 꼬리표): 테마와 상관없이 같은 잉크 + 밝은 글씨 */
  --st-ink: #f6ecd6; --st-green: #4f7a52; --st-red: #7d2f2a; --st-blue: #3c5a78; --st-brown: #6b5a3a; --st-olive: #6b5a2a;
  --st-amber: #a0602a; --st-violet: #5a4a7a; --st-rose: #9a4a62; --st-grey: #8a7d6a;
  --medal-1: #b08a3e; --medal-2: #8f9aa3; --medal-3: #9a6a3a;
  --dusk: #64548f; --dusk-soft: #e3dcea;
  --frame: url(/assets/ui/frame-sepia.svg); --frame-gilt: url(/assets/ui/frame-gilt.svg);
  --paper: url(/assets/ui/paper.svg);
  --font-head: 'Gowun Batang', 'Noto Serif KR', serif;
  --font-body: 'Noto Serif KR', 'Gowun Batang', serif;
  --font-num: 'Cinzel', 'Noto Serif KR', serif;
  color-scheme: light;
}
/* 다른 테마(등대의 새벽 · 숲의 오두막 · 장미 정원 · 대장간)는 public/css/themes.css — 어두운 테마는 html[data-tone="dark"] 를 함께 단다 (public/js/theme.js) */
/* 밤의 서고 */
:root[data-theme="night"] {
  --desk: #15100c; --desk-2: #1d1610; --bg: #231b15; --page: #2a211a;
  --surface: #33291f; --surface-2: #2e251c; --surface-3: #3d3125; --line: #5a4734; --line-2: #7b6346;
  --ink: #ecdfc4; --ink-2: #d2bf9b; --ink-3: #ab9673;
  --primary: #b5543f; --primary-2: #c96a52; --primary-soft: #4a2f25; --on-primary: #f8ead0;
  --rose: #d66e5e; --rose-soft: #4a2a24; --mint: #86b49b; --mint-soft: #26352c; --sky: #8eaecb; --sky-soft: #26303a;
  --butter: #d8b45e; --butter-soft: #45391f; --peach: #dd9466; --peach-soft: #46301f;
  --hp: #c4584a; --sh: #7fa3c4; --exp: #d0a85a;
  --g0: #b5aa96; --g1: #7fc196; --g2: #86aee6; --g3: #d796c9; --g4: #e7a15d; --g5: #e9c650;
  --frame: url(/assets/ui/frame-night.svg); --frame-gilt: url(/assets/ui/frame-night.svg);
  --shadow: 0 2px 8px rgba(0, 0, 0, .35); --shadow-card: 0 2px 8px rgba(0, 0, 0, .3); color-scheme: dark;
  --track: color-mix(in srgb, var(--desk) 70%, var(--surface-2)); --dusk: #b9a8e6; --dusk-soft: #2e2838;
}
/* 글꼴: 모두 SIL 오픈 폰트 라이선스(OFL) — 게임에 넣어 배포해도 된다. 원문은 /fonts/LICENSES/
   본문: Noto Serif KR(본명조) Medium · Bold — 휴대폰에서도 획이 또렷하다. 보통 굵기(400)도 Medium(500) 파일로 그린다.
   제목: 고운바탕 Bold 한 벌만 — 어떤 굵기를 불러도 이 파일(가는 획 없음). 숫자 · 라틴: Cinzel.
   한글은 완성형 2,350자 + 게임에 쓰인 글자만 남겨 가볍게 만들었다(tools/fonts.sh). */
@font-face { font-family: 'Noto Serif KR'; src: url('/fonts/NotoSerifKR-Medium.woff2') format('woff2'); font-weight: 100 599; font-display: swap; }
@font-face { font-family: 'Noto Serif KR'; src: url('/fonts/NotoSerifKR-Bold.woff2') format('woff2'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: 'Gowun Batang'; src: url('/fonts/GowunBatang-Bold.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('/fonts/Cinzel.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

* { box-sizing: border-box; }
html { font-size: var(--fs); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font-family: var(--font-body); color: var(--ink); line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; /* 한국어는 낱말(어절) 단위로 줄을 바꾼다 — 「보 / 스 22」 · 「이 / 슬」 같은 꺾임 없이 */
  background: url(/assets/ui/damask.svg), url(/assets/ui/leather.svg), var(--desk); background-attachment: fixed;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 400; margin: 0; line-height: 1.3; text-wrap: balance; letter-spacing: .01em; }
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.14rem; } h4 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--primary); }
img, canvas { max-width: 100%; }
code { font-size: .88em; background: var(--surface-3); padding: .05em .35em; border-radius: 3px; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; }
::selection { background: var(--butter-soft); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.faint { color: var(--ink-3); font-size: .86rem; }
.mute { color: var(--ink-3); }
small { font-size: .8rem; }
.lore { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.95; color: var(--ink-2); }
.good { color: var(--mint); } .bad { color: var(--rose); } .gold { color: var(--butter); }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── 배치 도구 ── */
.row { display: flex; align-items: center; gap: var(--d-gap); flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.row.center { justify-content: center; }
.col { display: flex; flex-direction: column; gap: var(--d-gap); }
.grow { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: var(--d-grid); grid-template-columns: repeat(auto-fill, minmax(var(--min, 240px), 1fr)); }
.stack > * + * { margin-top: var(--d-stack); }
.between { justify-content: space-between; }
.center { text-align: center; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 버튼 · 입력: 낡은 종이 단추와 소혈색 밀랍 ── */
/* 단추 갈래: 기본(낡은 종이) · .primary(소혈색 밀랍) · .danger · .ghost · .link · .icon · .small · .big
   상태: :hover · :focus-visible(금박 고리) · :disabled · .sel / [aria-pressed=true](눌린 철잉크) */
button, .btn {
  font: inherit; font-size: var(--t-ui); font-weight: 700; color: var(--ink); background: linear-gradient(180deg, var(--surface), var(--surface-3));
  border: 1px solid var(--line-2); border-radius: var(--r-s); padding: .45rem .95rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, .55), 0 1px 0 rgba(60, 40, 20, .12);
  transition: background .15s, transform .08s, box-shadow .15s, color .15s, border-color .15s; white-space: nowrap; line-height: 1.2; min-height: var(--ctl);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* 고른 단추(.sel)에는 바탕을 바꾸는 hover 를 걸지 않는다: 밝은 바탕 + 밝은 글씨로 글자가 사라지던 문제 */
button:where(:not(.sel, [aria-pressed="true"])):hover:not(:disabled) { border-color: var(--ink-3); background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(60, 40, 20, .25); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; }
button > .si, button > svg { flex: none; }
button > .si { width: min(16px, 1.1em); height: min(16px, 1.1em); stroke-width: 1.75; } /* 글 단추 속 아이콘 14~16px */
button.primary { background: linear-gradient(180deg, var(--primary-2), var(--primary)); color: var(--on-primary); border-color: color-mix(in srgb, var(--primary) 60%, #000);
  box-shadow: inset 0 0 0 1px rgba(230, 196, 120, .35), inset 0 1px 0 rgba(255, 220, 190, .3), 0 2px 4px rgba(50, 20, 10, .25); text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
button.primary:hover:not(:disabled) { background: linear-gradient(180deg, color-mix(in srgb, var(--primary-2) 85%, #fff), var(--primary-2)); color: var(--on-primary); border-color: color-mix(in srgb, var(--primary) 60%, #000); }
button.danger { background: transparent; color: var(--rose); border-color: color-mix(in srgb, var(--rose) 55%, transparent); box-shadow: none; }
button.danger:hover:not(:disabled) { background: var(--rose); color: var(--on-primary); }
button.ghost { background: transparent; box-shadow: none; }
button.small, .small > button { font-size: .8rem; padding: .28rem .62rem; min-height: var(--ctl-s); }
button.primary.big { clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); padding-inline: 1.9rem; }
button.big { font-size: 1.04rem; padding: .7rem 1.4rem; min-height: var(--ctl-l); font-family: var(--font-head); font-weight: 400; letter-spacing: .04em; }
/* 아이콘 단추: 정사각형 칸 한가운데 */
button.icon { width: 2rem; height: 2rem; padding: 0; min-height: 0; display: inline-grid; place-items: center; background: transparent; border-color: transparent; box-shadow: none; position: relative; overflow: visible; }
button.icon > svg, button.icon > .si { width: 18px; height: 18px; stroke-width: 1.6; }
button.icon::after { content: ''; position: absolute; inset: -5px; } /* 아이콘은 작게, 누르는 자리는 40px 이상 */
button.icon:hover { background: rgba(255, 240, 210, .08); border-color: transparent; }
button.sel, button[aria-pressed="true"] { background: var(--ink-2); color: var(--surface); border-color: var(--ink); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); }
button.sel:hover:not(:disabled), button[aria-pressed="true"]:hover:not(:disabled) { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* 눌린 단추 안의 흐린 글씨는 바탕에 묻히지 않게 */
button.sel :is(.faint, .mute, small, .num), button[aria-pressed="true"] :is(.faint, .mute, small) { color: inherit; opacity: .78; }
button.link { background: none; border: 0; box-shadow: none; padding: 0; min-height: auto; color: var(--primary); font-weight: 700; }
button.link:hover { background: none; text-decoration: underline; }
input, select, textarea {
  font: inherit; color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, #fff8e8); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: .45rem .7rem; min-height: 2.25rem;
  box-shadow: inset 0 1px 2px rgba(60, 40, 20, .12);
}
:root[data-tone="dark"] input, :root[data-tone="dark"] select, :root[data-tone="dark"] textarea { background: var(--surface-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gilt); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gilt) 35%, transparent); }
input[type="range"] { padding: 0; accent-color: var(--primary); box-shadow: none; }
input[type="checkbox"] { accent-color: var(--primary); width: 1.05rem; height: 1.05rem; min-height: auto; }
label { font-size: .88rem; color: var(--ink-2); }
.toggle { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }

/* ── 낱장(패널) · 목록 · 꼬리표 ── */
.plate {
  background: var(--surface) var(--paper); border: var(--plate-bw) solid transparent; border-image: var(--frame) 40 stretch; border-radius: 0;
  padding: var(--plate-pad); box-shadow: 0 2px 6px rgba(40, 24, 10, .12); min-width: 0; position: relative;
}
.plate.tight { border: 1px solid var(--line); border-image: none; padding: .6rem .75rem; box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--line) 70%, transparent); }
.plate.flat { box-shadow: none; background: var(--surface-2); border: 1px solid var(--line); border-image: none; padding: .7rem .85rem; }
.plate > h3, .plate > .hdr { margin-bottom: var(--plate-h3); }
.plate h3 { display: flex; align-items: center; gap: .45rem; }
.plate > h3::before { content: '❦'; color: var(--gilt); font-size: .9em; }
.plate > h3::after { content: ''; flex: 1; height: 6px; background: linear-gradient(var(--line-2), var(--line-2)) left center / 100% 1px no-repeat, linear-gradient(var(--line), var(--line)) left 5px / 70% 1px no-repeat; margin-left: .4rem; }
.sec { margin-top: var(--d-sec); }
.list { display: flex; flex-direction: column; }
.li { display: flex; align-items: center; gap: .5rem; padding: var(--d-li) .2rem; border-bottom: 1px dotted var(--line-2); min-width: 0; }
.li:last-child { border-bottom: 0; }
.li.clk { cursor: pointer; padding-inline: .5rem; }
.li.clk:hover { background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
.tag { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--t-micro); font-weight: 700; padding: .08rem .45rem; border-radius: var(--r-s); background: var(--surface-3); color: var(--ink-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; border: 1px solid color-mix(in srgb, var(--line-2) 60%, transparent); }
.tag.good { background: var(--mint-soft); color: var(--mint); border-color: color-mix(in srgb, var(--mint) 35%, transparent); }
.tag.bad { background: var(--rose-soft); color: var(--rose); border-color: color-mix(in srgb, var(--rose) 35%, transparent); }
.tag.gold { background: var(--butter-soft); color: var(--butter); border-color: color-mix(in srgb, var(--butter) 40%, transparent); }
.tag.sky { background: var(--sky-soft); color: var(--sky); border-color: color-mix(in srgb, var(--sky) 35%, transparent); }
.tag.lilac { background: var(--primary-soft); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.tag.mint { background: var(--mint-soft); color: var(--mint); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; font-size: .9rem; }
.kv > :nth-child(odd) { color: var(--ink-3); }
.kv > :nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.badge { position: absolute; top: 4px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-2); box-shadow: 0 0 0 2px var(--desk); }
.dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink-3); }
.dot.on { background: var(--mint); }
.divider { height: 18px; background: url(/assets/ui/flourish.svg) center / auto 100% no-repeat; margin: .5rem 0; border: 0; opacity: .8; }
/* 빈 자리: 점선 칸 하나, 가운데 한 줄 */
.empty, .jr-empty { padding: 1.4rem 1rem; text-align: center; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--r-s); font-style: italic; font-size: .88rem; line-height: 1.7; background: color-mix(in srgb, var(--surface-3) 18%, transparent); }

details.note { font-size: .84rem; color: var(--ink-2); margin: .1rem 0 .3rem; }
details.note summary { list-style: none; cursor: pointer; color: var(--ink-3); font-size: .76rem; display: inline-flex; align-items: center; gap: .25rem; user-select: none; }
details.note summary::-webkit-details-marker { display: none; }
details.note summary::before { content: '❦'; color: var(--gilt); }
details.note[open] summary { color: var(--ink-2); }
details.note p { margin-top: .3rem; padding: .45rem .65rem; border-left: 2px solid var(--gilt); background: color-mix(in srgb, var(--surface-3) 45%, transparent); line-height: 1.65; font-style: italic; }
/* ── 바: 가는 잉크 홈에 물감 ── */
.bar { height: 7px; background: var(--track); border: 1px solid var(--line-2); border-radius: 1px; overflow: hidden; position: relative; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, var(--gilt-2), var(--gilt)); transition: width .4s; }
.bar.exp > i { background: linear-gradient(180deg, var(--gilt-2), var(--gilt)); }
.bar.hp > i { background: linear-gradient(180deg, color-mix(in srgb, var(--hp) 75%, #fff), var(--hp)); }
.bar.good > i { background: linear-gradient(180deg, color-mix(in srgb, var(--mint) 70%, #fff), var(--mint)); }
.bar.gold > i { background: linear-gradient(180deg, var(--gilt-2), var(--gilt)); }
.meter { display: flex; flex-direction: column; gap: .3rem; }
.meter .row { font-size: .82rem; }

/* ── 아이콘 (64px 칸 아틀라스) ── */
.ic { --s: 28px; display: inline-block; width: var(--s); height: var(--s); flex: 0 0 auto; background-repeat: no-repeat; vertical-align: middle; image-rendering: auto; }
button.ic.clk { cursor: pointer; border: 0; padding: 0; min-height: 0; background-color: transparent; box-shadow: none; }
button.ic.clk:hover { background-color: var(--surface-3); }
.cur { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gl { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 2px; font-size: .8rem; font-weight: 800; background: var(--surface-3); color: var(--ink-2); flex: 0 0 auto; border: 1px solid var(--line); font-family: var(--font-num); }
.portrait { display: inline-grid; place-items: center; overflow: hidden; flex: 0 0 auto; background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: inset 0 0 0 2px var(--surface); }
.portrait img, .portrait canvas { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }

/* ── 이름표 (항상 한 줄, 가운데) ── */
.nametag { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; white-space: nowrap; max-width: 100%; overflow: hidden; }
.nametag .n { overflow: hidden; text-overflow: ellipsis; }
.nametag .ttl { color: var(--butter); font-size: .78em; font-weight: 700; }
.nm1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }

/* ── 입장 화면: 펼친 책 ── */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 2rem max(16px, env(safe-area-inset-left, 0px)); }
.book { width: min(1040px, 100%); display: grid; grid-template-columns: 1fr 1fr; background: var(--page) var(--paper); border: 18px solid transparent; border-image: var(--frame-gilt) 40 stretch; box-shadow: var(--shadow-up), 0 0 0 6px var(--desk-2); position: relative; }
.book::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 30px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(80, 50, 20, .14), transparent); pointer-events: none; }
.leaf { padding: 2rem 2.2rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.leaf:first-child { align-items: center; text-align: center; justify-content: center; }
@keyframes glow { 50% { transform: scale(1.1); opacity: .8; } }
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.pick button { flex-direction: column; align-items: flex-start; text-align: left; white-space: normal; padding: .55rem .75rem; gap: .15rem; }
.pick button small { color: inherit; opacity: .75; font-weight: 400; }
.swatches { display: flex; gap: .3rem; flex-wrap: wrap; }
.swatches button { width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); }

/* ── 본 화면: 가죽 책등(메뉴) + 상태 띠 + 펼친 양피지(본문) ── */
.shell { display: grid; grid-template-columns: 88px 1fr; min-height: 100vh; }
.side, .topbar { --ink: var(--leather-ink); --ink-2: var(--leather-ink-2); --ink-3: var(--leather-ink-3); --surface: #3a2d22; --surface-2: #33271e; --surface-3: #46372a; --line: #5d4935; --line-2: #7a6146; color: var(--leather-ink); }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: stretch; gap: .1rem; padding: .9rem .5rem; background: linear-gradient(90deg, #1c140e, #2c2118 30%, #2a1f16 85%, #1a120c) , url(/assets/ui/leather.svg); border-right: 1px solid #120c08; box-shadow: inset -3px 0 0 rgba(176, 138, 62, .35), inset -5px 0 0 rgba(0, 0, 0, .3); overflow-y: auto; z-index: 20; }
.side .logo { height: 58px; margin-bottom: .5rem; background: url(/assets/ui/crest.svg) center / contain no-repeat; font-size: 0; filter: drop-shadow(0 0 6px rgba(214, 180, 106, .35)); }
.nav { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem .2rem; border: 1px solid transparent; border-radius: 2px; background: transparent; box-shadow: none; min-height: 0; color: var(--leather-ink-3); font-size: .74rem; font-weight: 700; position: relative; font-family: var(--font-head); }
.nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav:hover:not(:disabled) { background: rgba(214, 180, 106, .07); color: var(--leather-ink); border-color: transparent; }
.nav[aria-current="page"] svg { stroke-width: 1.8; filter: drop-shadow(0 0 3px rgba(214, 180, 106, .35)); } /* 켜진 메뉴: 금빛 · 조금 굵게 */
.nav[aria-current="page"] { color: var(--gilt-2); background: linear-gradient(180deg, rgba(214, 180, 106, .16), rgba(214, 180, 106, .04)); border-color: rgba(214, 180, 106, .45); border-radius: 22px 22px 2px 2px; }
.nav[aria-current="page"]::before { content: ''; position: absolute; left: -.5rem; top: 20%; bottom: 20%; width: 3px; background: var(--gilt-2); }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 1rem; padding: .55rem max(16px, 1.4rem); background: linear-gradient(180deg, #2c2118, #211810), url(/assets/ui/leather.svg); border-bottom: 1px solid #120c08; box-shadow: 0 1px 0 rgba(176, 138, 62, .4), 0 4px 10px rgba(0, 0, 0, .3); flex-wrap: wrap; }
.who { display: flex; align-items: center; gap: .7rem; cursor: pointer; min-width: 0; }
.avatar { width: 46px; height: 46px; background: #3a2d22; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; border: 1px solid var(--gilt); box-shadow: 0 0 0 2px #1a120c, 0 0 0 3px rgba(176, 138, 62, .5); }
.avatar img, .avatar canvas { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.who .nm { font-family: var(--font-head); font-size: 1.08rem; }
.lvbox { display: flex; align-items: center; gap: .7rem; min-width: 240px; flex: 1 1 260px; max-width: 420px; }
.lvbox .lv { font-family: var(--font-num); font-size: 1.05rem; white-space: nowrap; color: var(--gilt-2); padding: .35rem .7rem .45rem; border: 1px solid rgba(214, 180, 106, .6); background: linear-gradient(180deg, #3a2a1e, #24190f); clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); line-height: 1; }
.topbar .bar { background: #1a120c; border-color: #5d4935; }
.wallet { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }
.tools { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.tools button.icon { color: var(--leather-ink-2); }
/* 위 띠는 넓은 화면(861px~)에서 한 줄: 이름 줄은 말줄임, 레벨 막대가 먼저 줄고, 도구는 줄바꿈하지 않는다. 날씨 남은 시간은 1440px 아래에서 풍선말로 */
@media (min-width: 861px) {
  .topbar { flex-wrap: nowrap; gap: .8rem; }
  .topbar .who { flex: 0 1 auto; max-width: 300px; } .topbar .who > div:last-child { min-width: 0; } .topbar .who .faint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .lvbox { min-width: 150px; flex: 1 1 220px; }
  .topbar .wallet { flex-wrap: nowrap; flex: 0 0 auto; gap: .7rem; } .topbar .wallet .cur { white-space: nowrap; }
  .topbar .tools { flex: 0 0 auto; flex-wrap: nowrap; gap: .3rem; }
}
@media (min-width: 861px) and (max-width: 1439px) { .topbar #wx-left { display: none; } }
@media (min-width: 861px) and (max-width: 1199px) { .topbar .tools .chip > *:not(.ic) { display: none; } .topbar .who { max-width: 210px; } }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: var(--r-s); background: var(--surface-3); border: 1px solid var(--line-2); font-size: var(--t-small); font-weight: 700; white-space: nowrap; }
.page {
  margin: var(--page-mt) max(10px, 1.2rem) 6rem; padding: var(--page-pad); max-width: 1360px; width: auto; position: relative; z-index: 1;
  background: var(--page) var(--paper); border: var(--page-bw) solid transparent; border-image: var(--frame-gilt) 40 stretch;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 14px 40px rgba(0, 0, 0, .45); min-height: calc(100vh - 7rem);
}
@media (min-width: 1440px) { .page { margin-inline: auto; width: calc(100% - 2.4rem); } }
.page::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url(/assets/ui/band.svg) top center / auto 8px repeat-x, url(/assets/ui/band.svg) bottom center / auto 8px repeat-x, radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(110, 70, 30, .13)); opacity: .9; }
:root[data-tone="dark"] .page::before { background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, .3)); }
.page-head { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin-bottom: var(--head-mb); text-align: center; }
/* 페이지 제목 = 나무 간판. 높이는 늘 같고, 긴 제목은 판이 넓어지다가 끝에서 말줄임 (넘치지 않는다) */
.page-head h2 {
  position: relative; display: block; width: fit-content; min-width: 200px; max-width: min(100%, 620px); height: var(--head-h); padding: 0 2.2rem; box-sizing: border-box;
  font-size: var(--head-fs); line-height: calc(var(--head-h) - 2px); letter-spacing: .14em; text-indent: .14em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--wood-ink); text-shadow: var(--engrave);
  background: var(--wood-grain) 0 0 / 260px var(--head-h), radial-gradient(ellipse at 50% 35%, rgba(255, 205, 140, .13), transparent 68%), var(--wood);
  border: 1px solid var(--wood-edge); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 222, 170, .28), inset 0 -2px 0 rgba(0, 0, 0, .35), inset 0 0 18px rgba(0, 0, 0, .42), 0 1px 0 rgba(255, 240, 210, .35), 0 5px 12px rgba(30, 15, 5, .38), 0 1px 2px rgba(30, 15, 5, .5);
}
/* 놋쇠 상감선 + 네 귀의 못 */
.page-head h2::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(214, 180, 106, .6); border-radius: 2px; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .35), 0 1px 0 rgba(0, 0, 0, .3); pointer-events: none; }
.page-head h2::after { content: ''; position: absolute; inset: 1px; pointer-events: none;
  background: var(--brass-nail) 1px 1px / 9px 9px no-repeat, var(--brass-nail) calc(100% - 1px) 1px / 9px 9px no-repeat, var(--brass-nail) 1px calc(100% - 1px) / 9px 9px no-repeat, var(--brass-nail) calc(100% - 1px) calc(100% - 1px) / 9px 9px no-repeat; }
:root[data-tone="dark"] .page-head h2 { box-shadow: inset 0 1px 0 rgba(255, 222, 170, .28), inset 0 -2px 0 rgba(0, 0, 0, .35), inset 0 0 18px rgba(0, 0, 0, .42), 0 0 0 1px rgba(214, 180, 106, .28), 0 5px 14px rgba(0, 0, 0, .6); }
.page-head::after { content: ''; display: block; width: 200px; max-width: 60vw; height: var(--orn-h); margin: .1rem auto 0; background: url(/assets/ui/flourish.svg) center / contain no-repeat; }
.page-head .sub { display: none; }
.row.nowrap > button, .row > button, .li > button, .tag { flex-shrink: 0; }

/* ── 탭 두 갈래 ──
   1) 책갈피 탭(.subtabs, 페이지 맨 위 · 모달 맨 위): 밑줄 위에 고른 칸만 종이로 솟는다
   2) 마디 스위치(페이지 안의 두 번째 줄 탭 · .vy-switch · .jr-switch · .whotabs): 한 테 안에 칸을 나누고 고른 칸은 철잉크 */
.subtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; padding: 0; background: transparent; border-bottom: 1px solid var(--line-2); margin: 0 auto var(--tabs-mb); width: fit-content; max-width: 100%; }
.subtabs button { flex: 0 0 auto; background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: var(--r-s) var(--r-s) 0 0; box-shadow: none; min-height: 2rem; padding: .35rem .95rem; font-family: var(--font-head); font-weight: 400; color: var(--ink-3); margin-bottom: -1px; }
.subtabs button:not(.sel):hover:not(:disabled) { color: var(--ink); background: transparent; border-color: transparent; }
.subtabs button.sel, .subtabs button.sel:hover:not(:disabled) { background: var(--surface); color: var(--ink); border-color: var(--line-2); border-bottom: 1px solid var(--surface); box-shadow: none; }
:where(#page > :not(.stwrap)) .subtabs, .vy-switch, .jr-switch, .whotabs {
  display: flex; flex-wrap: nowrap; gap: 2px; padding: 2px; width: fit-content; max-width: 100%; margin-inline: auto;
  border: 1px solid var(--line-2); border-radius: var(--r); background: color-mix(in srgb, var(--surface-3) 50%, transparent); box-shadow: inset 0 1px 2px rgba(60, 40, 20, .12);
}
:is(:where(#page > :not(.stwrap)) .subtabs, .vy-switch, .jr-switch, .whotabs) button {
  flex: 0 0 auto; margin: 0; min-height: var(--ctl-s); padding: .2rem .85rem; border: 1px solid transparent; border-radius: var(--r-s); background: transparent; box-shadow: none;
  font-family: var(--font-head); font-weight: 400; font-size: var(--t-ui); color: var(--ink-2);
}
:is(:where(#page > :not(.stwrap)) .subtabs, .vy-switch, .jr-switch, .whotabs) button:not(.sel):hover:not(:disabled) { background: color-mix(in srgb, var(--surface) 75%, transparent); color: var(--ink); border-color: transparent; }
:is(:where(#page > :not(.stwrap)) .subtabs, .vy-switch, .jr-switch, .whotabs) button.sel,
:is(:where(#page > :not(.stwrap)) .subtabs, .vy-switch, .jr-switch, .whotabs) button.sel:hover:not(:disabled) { background: var(--ink-2); color: var(--surface); border-color: var(--ink); border-bottom: 1px solid var(--ink); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }

/* ── 날씨 효과 층 ── */
#wx { position: fixed; inset: 0; pointer-events: none; z-index: 2; }

/* ── 쪽지(토스트) · 서신(모달) ── */
#toasts { position: fixed; top: 4.6rem; right: 1rem; z-index: 80; display: flex; flex-direction: column; align-items: stretch; gap: .35rem; pointer-events: none; width: min(360px, calc(100vw - 2rem)); }
/* 쪽지: 얇은 한 줄 — 아이콘 · 글(길면 두 줄까지 …) 가지런히. 폭은 모두 같게 */
.toast { pointer-events: none; /* 알림은 눌러지지 않는다: 아래 지도 핀 · 단추를 가로채지 않게 (휴대폰에서는 지도 위에 쌓인다) */ display: flex; align-items: flex-start; gap: .5rem; box-sizing: border-box;
  background: var(--surface) var(--paper); border: 1px solid var(--line-2); border-left: 3px solid var(--gilt); border-radius: 8px; padding: .42rem .7rem .42rem .6rem; box-shadow: 0 6px 16px rgba(20, 10, 4, .3); font-size: .84rem; line-height: 1.42; animation: tin .25s ease-out; }
.toast .t-ic { flex: none; width: 16px; height: 16px; margin-top: .1rem; color: var(--gilt); }
.toast .t-tx { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.toast.error .t-tx { -webkit-line-clamp: 3; line-clamp: 3; }
.toast.good { border-left-color: var(--mint); } .toast.error, .toast.bad { border-left-color: var(--rose); } .toast.story, .toast.npc { border-left-color: var(--primary); } .toast.social { border-left-color: var(--sky); } .toast.unlock { border-left-color: var(--gilt, #d6b46a); font-weight: 600; } /* 별지기 레벨로 새로 열린 기능 (src/data/unlocks.js) */
.toast.good .t-ic { color: var(--mint); } .toast.error .t-ic, .toast.bad .t-ic { color: var(--rose); } .toast.story .t-ic, .toast.npc .t-ic { color: var(--primary); } .toast.social .t-ic { color: var(--sky); }
/* 소식함 줄: 얇게 · 왼쪽 칸에 꼬리표와 시각(같은 폭) · 글은 넓게 두 줄까지(누르면 다) (app.js showNotices) */
.modal .ntlist .nt-li { display: grid; grid-template-columns: 3.3rem minmax(0, 1fr); grid-template-areas: "tag tx" "tm tx"; align-items: start; column-gap: .6rem; row-gap: .05rem; padding: .36rem .15rem; cursor: pointer; }
.modal .ntlist .nt-li .tag { grid-area: tag; justify-content: center; width: 100%; box-sizing: border-box; margin-top: .1rem; padding-inline: .2rem; font-size: .66rem; font-weight: 600; }
.modal .ntlist .nt-tx { grid-area: tx; font-size: .84rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.modal .ntlist .nt-li.open .nt-tx { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.modal .ntlist .nt-tm { grid-area: tm; margin: 0; min-width: 0; text-align: center; font-size: .62rem; line-height: 1.3; white-space: nowrap; }
.modal .ntlist .nt-li:hover { background: color-mix(in srgb, var(--surface-3) 45%, transparent); }
@keyframes tin { from { opacity: 0; transform: translateY(-6px); } }
.modal-back { position: fixed; inset: 0; background: rgba(20, 12, 6, .55); display: grid; place-items: center; z-index: 90; padding: 1rem; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
/* 모달 폭은 셋: 기본 560 · .wide 880 · (거래 · 마을 사람 · 편지 · 행사) 720 */
.modal { background: var(--page) var(--paper); border: 20px solid transparent; border-image: var(--frame-gilt) 40 stretch; padding: .9rem 1.2rem 1rem; width: min(var(--modal), 100%); max-height: min(88vh, 900px); overflow-y: auto; box-shadow: var(--shadow-up); display: flex; flex-direction: column; gap: .8rem; animation: pop .2s ease-out; }
.modal > h3:first-child { text-align: center; font-size: 1.3rem; }
.modal::before { content: ''; display: block; height: 22px; margin: -.5rem auto -.2rem; width: 150px; flex: 0 0 auto; background: url(/assets/ui/crown-orn.svg) center / contain no-repeat; }
.modal.wide { width: min(var(--modal-xl), 100%); }
/* 모달은 통째로 스크롤한다: 안의 칸이 줄어들며 글이 아래 단추 밑으로 넘치지 않게 */
.modal > * { flex-shrink: 0; }
/* 모달 맨 아래 단추 줄: 오른쪽 끝, 주요 행동이 맨 오른쪽 */
.modal > .row.end:last-child { margin-top: .2rem; padding-top: .7rem; border-top: 1px dotted var(--line-2); }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }

/* ── 득템 연출 ── */
.fanfare { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(60, 36, 14, .55), rgba(12, 8, 4, .82)); animation: fade .25s; padding: 1rem; }
.fanfare.out { animation: fade .25s reverse forwards; }
.ff-rays { position: absolute; width: 140vmax; height: 140vmax; left: 50%; top: 45%; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(214, 180, 106, .16) 0 6deg, transparent 6deg 18deg); animation: spin 24s linear infinite; pointer-events: none; mask: radial-gradient(circle, #000 0, transparent 55%); -webkit-mask: radial-gradient(circle, #000 0, transparent 55%); }
.fanfare.top .ff-rays { background: repeating-conic-gradient(from 0deg, rgba(240, 200, 110, .26) 0 5deg, transparent 5deg 15deg); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ff-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; width: min(420px, 100%); padding: 1.2rem 1.3rem 1.3rem; background: var(--page) var(--paper); border: 20px solid transparent; border-image: var(--frame-gilt) 40 stretch; box-shadow: 0 0 60px rgba(214, 180, 106, .45), var(--shadow-up); animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); text-align: center; }
/* 작은 리본(득템 · 원정 구역 · 길잡이): 글씨 · 높이 · 그림을 함께 쓴다. 폭과 여백만 저마다 */
/* 작은 나무 명판(득템 · 원정 구역 · 길잡이): 같은 나무 · 새긴 글씨, 양옆 못 두 개 */
.ff-k, .gatehead span, .guide .gl2 {
  position: relative; display: inline-block; height: 2rem; line-height: calc(2rem - 2px); max-width: 100%; padding: 0 1.25rem; box-sizing: border-box; flex-shrink: 0;
  font-family: var(--font-head); font-weight: 400; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--wood-ink); text-shadow: var(--engrave);
  background: var(--brass-nail) 3px 50% / 9px 9px no-repeat, var(--brass-nail) calc(100% - 3px) 50% / 9px 9px no-repeat, var(--wood-grain) 0 0 / 200px 32px, var(--wood);
  border: 1px solid var(--wood-edge); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 222, 170, .24), inset 0 -1px 0 rgba(0, 0, 0, .35), inset 0 0 10px rgba(0, 0, 0, .38), 0 2px 5px rgba(30, 15, 5, .35);
}
.ff-k { padding-inline: 1.7rem; letter-spacing: .06em; }
.ff-art { width: 112px; height: 112px; display: grid; place-items: center; background: #2b211a; border: 1px solid var(--gilt); box-shadow: 0 0 0 3px #3a2d22, 0 0 24px rgba(214, 180, 106, .6); animation: glowp 2.4s ease-in-out infinite; }
@keyframes glowp { 50% { box-shadow: 0 0 0 3px #3a2d22, 0 0 40px rgba(240, 200, 110, .85); } }
.ff-n { font-family: var(--font-head); font-size: 1.3rem; line-height: 1.3; }
.ff-sig { font-size: .86rem; color: var(--primary); font-weight: 700; }
.ff-card { width: 100%; text-align: left; }
@media (prefers-reduced-motion: reduce) { .ff-rays, .ff-art { animation: none; } }
/* ── 장면 (대화 · 이벤트): 소설 한 쪽 ── */
.scene { display: flex; flex-direction: column; gap: .6rem; font-size: 1.02rem; line-height: 1.95; }
.scene p { color: var(--ink-2); text-indent: .6em; }
.scene p.q { color: var(--ink); text-indent: 0; padding-left: .9rem; border-left: 1px solid var(--line-2); }
.scene p.sp { text-indent: 0; }
.scene p.sp b { color: var(--primary); font-weight: 700; margin-right: .4rem; font-family: var(--font-head); }
.scene-head { display: flex; align-items: center; gap: .8rem; justify-content: center; }
.scene-head > div:not(.por) { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .15rem; } /* 이야기 창 제목 · 이름: 장식 아래 가운데로 가지런히 */
.scene-head h3 { margin: 0; text-wrap: balance; }
.scene-head .faint { margin: 0; }
.scene-head .por { width: 48px; height: 48px; flex: 0 0 auto; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; border: 1px solid var(--line-2); box-shadow: inset 0 0 0 2px var(--surface); }
.scene-head .por img { width: 32px; height: 32px; }
.choices { display: flex; flex-direction: column; gap: .4rem; margin-top: .3rem; }
.choices button { justify-content: flex-start; text-align: left; white-space: normal; padding: .6rem .9rem; font-weight: 400; background: transparent; box-shadow: none; border: 0; border-bottom: 1px dotted var(--line-2); border-radius: 0; }
.choices button::before { content: '❧'; color: var(--gilt); margin-right: .5rem; }
.choices button:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-3) 55%, transparent); border-color: var(--line-2); }
.choices.locked { pointer-events: none; opacity: .55; transition: opacity .15s; }
/* 고른 길: 「내가 한 말」 + 그 말로 이어진 대사 한 덩이 + 달라진 것 (app.js pathBlock) */
.scene .path { display: flex; flex-direction: column; gap: .35rem; margin: .35rem 0 .1rem; animation: pathIn .35s ease-out both; }
.scene .said { display: flex; align-items: baseline; gap: .55rem; padding: .15rem .2rem .15rem .7rem; border-left: 2px solid var(--gilt); font-size: .95rem; line-height: 1.7; }
.scene .said-who { flex: none; font-family: var(--font-head); font-size: .78rem; color: color-mix(in srgb, var(--gilt) 70%, var(--ink)); letter-spacing: .03em; }
.scene .said-who::after { content: '·'; margin-left: .45rem; color: var(--line-2); }
.scene .said-t { color: var(--ink); font-style: italic; }
.scene .reply-blk { display: flex; flex-direction: column; gap: .5rem; padding: .55rem .8rem .55rem .9rem; margin-left: .2rem; border-left: 1px solid color-mix(in srgb, var(--gilt) 55%, transparent); background: color-mix(in srgb, var(--gilt) 7%, transparent); }
.scene .reply-blk:empty { display: none; }
.scene .reply-fx { margin-top: .1rem; padding-top: .4rem; border-top: 1px dotted var(--line-2); }
.scene .reply-fx p { text-indent: 0; margin: 0; font-size: .84rem; line-height: 1.6; color: var(--ink-3); font-style: italic; }
@keyframes pathIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .scene .path { animation: none; } }

/* ── 이름 카드 ── */
.ncard { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; gap: .05rem .6rem; align-items: center; padding: .5rem .7rem; background: var(--surface) var(--paper); border: 1px solid var(--line-2); box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px color-mix(in srgb, var(--line) 60%, transparent); min-width: 0; }
.ncard .por { grid-row: span 2; width: 44px; height: 44px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; border: 1px solid var(--line-2); }
.ncard .por canvas, .ncard .por img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: cover; }
.ncard .por img.npc { width: 32px; height: 32px; image-rendering: auto; object-fit: contain; }
.ncard .nm { display: flex; align-items: center; gap: .3rem; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; font-family: var(--font-head); }
.ncard .nm .n { overflow: hidden; text-overflow: ellipsis; }
.ncard .title { font-size: .72rem; color: var(--butter); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncard .sub { font-size: .76rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncard .pws { position: absolute; top: .4rem; right: .55rem; display: grid; justify-items: end; gap: .05rem; }
.ncard .pw { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 700; color: var(--ink-2); font-family: var(--font-num); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ncard .pw.life { color: var(--mint); font-weight: 600; }
.ncard .pw .si { width: 12px; height: 12px; stroke-width: 2.2; } /* 전투력 · 생활력 표시: 선 아이콘 (docs/UI_ICONS.md) */

.ncard .hp { grid-column: 1 / -1; margin-top: .3rem; }
.hpbar { height: 8px; background: var(--track); border: 1px solid var(--line-2); overflow: hidden; position: relative; }
.hpbar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--hp) 70%, #fff), var(--hp)); transition: width .35s; }
.hpbar > i.sh { background: color-mix(in srgb, var(--sh) 70%, transparent); left: 0; }
.hpnum { display: flex; justify-content: space-between; font-size: .7rem; color: var(--ink-3); margin-top: .1rem; font-variant-numeric: tabular-nums; }
.ncard.dead { filter: grayscale(.9) sepia(.3); opacity: .55; }
.pips { display: inline-flex; gap: 3px; margin-left: .3rem; vertical-align: middle; }
.pips span { width: 7px; height: 7px; transform: rotate(45deg); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.pips span.on { background: var(--pip); box-shadow: 0 0 4px rgba(192, 138, 42, .6); }
/* 명함 꾸밈 (프레임 · 배경 · 이름 효과) */
.ncard[class*="fr-"] { border-width: 2px; }
.ncard.fr-parchment { border-color: #b59a68; } .ncard.fr-ironvine { border-color: #5e6a5f; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #8a978b; }
.ncard.fr-gilded, .ncard.fr-raidcrown, .ncard.fr-auction { border-color: #b08a3e; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #d6b46a, 0 0 12px rgba(214, 180, 106, .35); }
.ncard.fr-ember { border-color: #a8582c; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #d48a5a; }
.ncard.fr-tide { border-color: #3c5a78; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #7f9bb6; }
.ncard.fr-harvest { border-color: #9a7a2a; } .ncard.fr-runic, .ncard.fr-tower { border-color: #5d4a8a; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #9a88c4; }
.ncard.fr-starforged { border-color: #6a7a96; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #a8b6cc, 0 0 12px rgba(168, 182, 204, .35); }
.ncard.fr-lantern { border-color: #c08a2a; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #e2b864, 0 0 16px rgba(226, 184, 100, .4); }
.ncard.fr-hope { border-color: #d6a84a; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #f2d48a, 0 0 18px rgba(242, 212, 138, .5); background-image: radial-gradient(circle at 50% 0, rgba(255, 236, 190, .35) 0 3px, transparent 4px); } /* 성역의 희망 (불빛지기 5단계) */
.rk-card { margin-top: .2rem; }
.ncard.fr-abyss { border-color: #2e2840; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #5a5078; }
.ncard.fr-dragonscale { border-color: #7a3a24; }
.ncard.fr-wedding { border-color: #9a4a5a; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #d6a0aa, 0 0 16px rgba(214, 160, 170, .45); }
.ncard.fr-teaparty { border-color: #2e3a6a; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #c9a85a, 0 0 12px rgba(201, 168, 90, .35); background-image: radial-gradient(circle at 8px 8px, #e2c47a 0 2px, transparent 3px), radial-gradient(circle at calc(100% - 8px) 8px, #e2c47a 0 2px, transparent 3px); background-repeat: no-repeat; } /* 다과회 테두리 (src/game/teaparty.js) */
.ncard.bg-sanctuary { background-color: #f3e2c8; } .ncard.bg-ashfield { background-color: #e6e0d6; } .ncard.bg-whisper { background-color: #e3e6cf; } .ncard.bg-monastery { background-color: #dfe2dc; }
.ncard.bg-rustcity { background-color: #ecd9c5; } .ncard.bg-stargrave { background-color: #dedbe8; } .ncard.bg-tower { background-color: #e6dcea; } .ncard.bg-silentsea { background-color: #dce4e4; }
.ncard.bg-cathedral { background-color: #e8e2da; } .ncard.bg-garden { background-color: #ebe3d3; } .ncard.bg-worldroot { background-color: #e1e3c9; } .ncard.bg-veilheart { background-color: #e6dbe6; }
.ncard.bg-lampglow { background-color: #f6e6bd; } .ncard.bg-library { background-color: #ecdfc8; } .ncard.bg-wedding { background-color: #f1dfe0; } .ncard.bg-auction { background-color: #efe2bf; }
:root[data-tone="dark"] .ncard[class*="bg-"] { background-color: var(--surface-2); }
.nfx-ink { color: #3a2f4a !important; text-shadow: 0 1px 2px rgba(58, 47, 74, .35); } :root[data-tone="dark"] .nfx-ink { color: #d6d0ea !important; }
.nfx-gold { background: linear-gradient(90deg, #9a7410, #d9b551, #9a7410); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.nfx-frost { color: #3c6a96 !important; text-shadow: 0 0 6px rgba(140, 180, 220, .6); }
.nfx-starlight { color: var(--sky) !important; text-shadow: 0 0 8px rgba(140, 170, 210, .6); }
.nfx-bloodmoon { color: #9b2f3c !important; animation: pulse-t 2.4s ease-in-out infinite; }
.nfx-whisper { letter-spacing: .06em; font-style: italic; }
.nfx-ember { color: var(--peach) !important; text-shadow: 0 0 6px rgba(200, 110, 50, .45); }
.nfx-lamp { color: #9a6a10 !important; text-shadow: 0 0 10px rgba(226, 184, 100, .7); }
.nfx-wedding { background: linear-gradient(90deg, #a8465e, #7a5aa0, #3c6a96, #a8465e); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: shimmer 4s linear infinite; }
.nfx-auction { background: linear-gradient(90deg, #8a6410, #d6b046, #8a6410); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: shimmer 5s linear infinite; }
@keyframes pulse-t { 50% { opacity: .7; } }
@keyframes shimmer { to { background-position: 200% 0; } }
.title-wedding { background: linear-gradient(90deg, #a8465e, #6a4a9a); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 800; }

/* ── 스킬카드: 글 중심, 등급 표시만 ── */
.skc { position: relative; gap: .3rem; padding: .65rem .8rem .7rem; background: var(--surface) var(--paper); border: 1px solid var(--line-2); box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px color-mix(in srgb, var(--line) 60%, transparent); min-width: 0; text-align: left; }
.skc.clk { cursor: pointer; } .skc.clk:hover { border-color: var(--ink-3); }
.skc.on { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--primary-2); }
.skc { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: .65rem; align-content: start; }
.skc > * { grid-column: 2; }
.skc > .art { grid-column: 1; grid-row: 1 / span 6; align-self: start; width: 52px; height: 52px; display: grid; place-items: center; background: #2b211a; border: 1px solid var(--line-2); box-shadow: inset 0 0 0 2px #3a2d22, 0 1px 3px rgba(40, 24, 10, .25); }
.skc.gS > .art, .skc.gSS > .art { box-shadow: inset 0 0 0 2px #3a2d22, 0 0 0 1px var(--gilt), 0 0 10px rgba(214, 180, 106, .45); }

.skc .top { display: flex; align-items: center; gap: .45rem; }
.skc .g { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.35rem; padding: 0 .3rem; font-size: .72rem; font-weight: 700; color: #f6e8c9; letter-spacing: .02em; font-family: var(--font-num); clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); }
.skc .g.gC { background: #7d7466; } .skc .g.gB { background: #3d7a4f; } .skc .g.gA { background: #2f5f93; } .skc .g.gS { background: linear-gradient(135deg, #8a3d7a, #5d3d8a); } .skc .g.gSS { background: linear-gradient(135deg, #a6561c, #b8902a); }
.skc .nm { font-weight: 700; font-size: .96rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-family: var(--font-head); }
.skc .lv { font-size: .72rem; color: var(--ink-3); font-weight: 700; font-family: var(--font-num); }
.skc .opt { font-size: .88rem; font-weight: 700; color: var(--ink); line-height: 1.45; }
.skc .desc { font-size: .78rem; color: var(--ink-3); line-height: 1.45; }
.skc .meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .72rem; color: var(--ink-2); }
.skc .cost { display: flex; gap: .4rem; }
.skc .cost span { background: var(--surface-3); border: 1px solid var(--line); padding: 0 .4rem; font-weight: 700; }
.tgt { display: inline-flex; align-items: center; gap: 2px; font-size: .7rem; }
.tgt i { font-style: normal; width: 1.2rem; height: 1.2rem; display: inline-grid; place-items: center; background: var(--surface-3); color: var(--ink-3); font-weight: 800; border: 1px solid var(--line); }
.tgt i.on { background: var(--rose-soft); color: var(--rose); border-color: color-mix(in srgb, var(--rose) 40%, transparent); }
.tgt i.ally.on { background: var(--mint-soft); color: var(--mint); border-color: color-mix(in srgb, var(--mint) 40%, transparent); }
.tgt b { margin-left: .3rem; font-weight: 700; color: var(--ink-2); }
.skc.mini { padding: .45rem .55rem; gap: .2rem; }
.skc.mini .opt { font-size: .78rem; }
.cardgrid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* 등급 글자색 */
.g0 { color: var(--g0); } .g1 { color: var(--g1); } .g2 { color: var(--g2); } .g3 { color: var(--g3); } .g4 { color: var(--g4); } .g5 { color: var(--g5); }
.gb0 { --gc: var(--g0); } .gb1 { --gc: var(--g1); } .gb2 { --gc: var(--g2); } .gb3 { --gc: var(--g3); } .gb4 { --gc: var(--g4); } .gb5 { --gc: var(--g5); }
.gearslot { position: relative; display: grid; place-items: center; width: 52px; height: 52px; background: color-mix(in srgb, var(--gc, var(--g0)) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--gc, var(--g0)) 65%, transparent); box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px color-mix(in srgb, var(--gc, var(--g0)) 30%, transparent); flex: 0 0 auto; }
.gearslot .en { position: absolute; right: 3px; bottom: 0; font-size: .68rem; font-weight: 700; color: var(--ink-2); font-family: var(--font-num); }

/* ── 옛 지도 ── */
.townwrap { position: relative; overflow: hidden; border: 16px solid transparent; border-image: var(--frame-gilt) 40 stretch; background: #e8d7b0; box-shadow: 0 6px 18px rgba(40, 24, 10, .25); }
.townmap { position: relative; width: 100%; aspect-ratio: 16 / 10; }
.townmap canvas.bgmap { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin { overflow: visible !important; max-width: none !important; position: absolute; transform: none !important; translate: -50% -50%; display: flex; flex-direction: row; align-items: center; gap: 4px; min-height: 0; height: 28px; padding: 0 9px 0 5px !important; background: #f1e4c6 !important; color: #3a2a18; border: 1px solid #6b5232 !important; border-radius: 14px !important; white-space: nowrap; box-shadow: inset 0 0 0 2px #f1e4c6, inset 0 0 0 2.6px rgba(107, 82, 50, .45), 0 2px 5px rgba(40, 24, 10, .35) !important; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.pin .mk { width: 22px; height: 22px; display: grid; place-items: center; position: static; flex: none; }
/* 지도가 좁아 겹칠 때: 이름을 숨기고 아이콘만 (가리키면 이름이 뜬다) */
.pin.compact { padding: 0 3px !important; width: 30px; justify-content: center; }
.pin.compact .lb { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); padding: 1px 6px; background: #f1e4c6; border: 1px solid #6b5232; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.pin.compact:hover .lb, .pin.compact:focus-visible .lb { opacity: 1; }
.pin.compact:hover { z-index: 6; }
.pin .mk .ic { filter: sepia(.35) saturate(.85); }
.pin { cursor: pointer; }
.pin:focus-visible { outline: 1.5px solid #7d2f2a; outline-offset: 2px; z-index: 6; }
.pin:hover, .pin:focus-visible, .pin.sel { border-color: #7d2f2a !important; box-shadow: inset 0 0 0 2px #f1e4c6, inset 0 0 0 2.8px rgba(125, 47, 42, .6), 0 4px 8px rgba(40, 24, 10, .4) !important; z-index: 2; }
.pin .lb { font-family: var(--font-head); font-size: .76rem; color: #3a2a18; white-space: nowrap; letter-spacing: .02em; line-height: 1.25; padding: 0; margin: 0; }
.pin.sel .lb { color: #7d2f2a; }
.pin .nt { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; transform: rotate(45deg); background: #7d2f2a; border: 1.5px solid #f1e4c6; }
/* 핀 누름 · 고름: 자리는 그대로(가운데 맞춤은 translate 로, 공통 button:active 의 transform 이 덮지 않게) — 색 · 테두리만 바뀌고 고를 때 2px 남짓 살짝 흔들린다 */
.pin:active:not(:disabled) { background: #e8d4a8 !important; border-color: #7d2f2a !important; }
.pin.sel { background: #f6e3bd !important; }
.pin.tap { animation: pinWiggle .28s ease-in-out; }
@keyframes pinWiggle { 0%, 100% { translate: -50% -50%; } 25% { translate: calc(-50% - 2px) -50%; } 50% { translate: calc(-50% + 2px) -50%; } 75% { translate: calc(-50% - 1px) -50%; } }
@media (prefers-reduced-motion: reduce) { .pin.tap { animation: none; } }
.friendpin { position: absolute; transform: translate(-50%, -50%); font-size: .7rem; background: #3c5a78; color: #f1e4c6; padding: .02rem .45rem; white-space: nowrap; border: 1px solid #f1e4c6; }

/* ── 홈 = 마을 ── */
.hbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.1rem; padding: .2rem .3rem .6rem; border-bottom: 1px solid var(--line-2); margin-bottom: .6rem; }
.hbar .greet { font-family: var(--font-head); font-size: 1.3rem; margin-right: .4rem; }
.guide { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; margin: 0 0 .8rem; }
.guide .gl2 { font-size: .9rem; min-width: 92px; }
.gstep { font-weight: 400; font-size: .82rem; min-height: 1.75rem; padding: .2rem .65rem; background: transparent; box-shadow: none; border-color: color-mix(in srgb, var(--line-2) 70%, transparent); }
.gstep .fl { color: var(--gilt); margin-right: .3rem; }
/* 한 격자 (pages/home.js): 머리(퀘스트 칸)는 격자 너비 그대로 · 아래 세 칸(오늘 · 의뢰 / 지도 · 장소 / 알림)은 윗선과 사이가 같다 */
.htop { min-width: 0; }
.homegrid { display: grid; grid-template-columns: 256px minmax(0, 1fr) 280px; gap: .9rem; align-items: start; }
.hcol { gap: .9rem; min-width: 0; }
.hcol > * { min-width: 0; }
/* 넓은 화면: 지도 · 장소 패널이 길면 양옆 칸이 따라 내려온다 (윗선은 그대로) */
@media (min-width: 1241px) { .homegrid > .hleft, .homegrid > .hright { position: sticky; top: 5.6rem; } }
.hmap .townwrap { border-width: 14px; }
.manage { padding: .45rem .55rem; border-width: 10px; }
.manage > h3 { font-size: var(--t-sub); margin-bottom: .2rem; justify-content: center; }
.manage > h3::after { display: none; }
.mrow { display: flex; align-items: center; gap: .45rem; padding: .38rem .1rem; border-bottom: 1px dotted var(--line-2); min-width: 0; }
.mrow:last-child { border-bottom: 0; }
.mrow .mk { width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-2); flex: 0 0 auto; }
.mrow .mk .si { width: 18px; height: 18px; }
.mrow b { font-size: .84rem; font-weight: 700; white-space: nowrap; }
.mrow .st { font-size: .72rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: .3rem; }
.mrow button { flex: 0 0 auto; font-size: .72rem; min-height: 1.55rem; padding: .12rem .45rem; }
/* 홈 「오늘」: 아이콘 | 이름 · 상태 | 같은 너비 버튼 — 이름은 자르지 않고, 상태만 작게 · 넘치면 … (home.js row) */
.today { container: today / inline-size; }
.today .mrow { display: grid; grid-template-columns: 18px minmax(0, 1fr) 3.9rem; column-gap: .4rem; align-items: center; padding: .3rem .05rem; }
.today .mrow .mk { width: 18px; height: 18px; } .today .mrow .mk .si { width: 16px; height: 16px; }
.today .mtx { min-width: 0; }
.today .mln { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.today .mnm { font-size: .78rem; white-space: nowrap; letter-spacing: -.01em; }
.today .mrow .st { display: block; min-width: 0; margin: 0; font-size: .66rem; line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.today .mrow .st:empty { display: none; }
.today .mrow > button, .today .mbtn-gap { width: 100%; min-width: 0; justify-self: end; }
.today .mrow > button { font-size: .68rem; min-height: 1.5rem; padding: .1rem .15rem; white-space: nowrap; overflow: hidden; text-overflow: clip; letter-spacing: -.02em; }
.today .mrow .bar { margin-top: 3px; }
.today .tdone-wrap { margin-top: .25rem; border-top: 1px dashed var(--line, rgba(0,0,0,.12)); padding-top: .2rem; }
.today .tdone { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: .4rem; align-items: center; width: 100%; min-height: 1.6rem; padding: .2rem .05rem; border: 0; background: none; box-shadow: none; color: var(--ink-3); font-size: .72rem; text-align: left; cursor: pointer; }
.today .tdone .mk { width: 18px; height: 18px; opacity: .7; } .today .tdone .mk .si { width: 14px; height: 14px; }
.today .tdone b { color: var(--ink-2, inherit); font-weight: 600; }
.today .tdone .car { font-size: .7rem; padding-right: .3rem; }
.today .tdone:hover, .today .tdone:focus-visible { color: var(--ink-2, inherit); }
.today .mrow.mdone { opacity: .72; }
@container today (min-width: 300px) {
  .today .mrow { grid-template-columns: 20px minmax(0, 1fr) 4.5rem; column-gap: .55rem; padding: .36rem .1rem; }
  .today .mln { flex-direction: row; align-items: baseline; gap: .6rem; }
  .today .mnm { font-size: .84rem; flex: none; }
  .today .mrow .st { flex: 1 1 auto; text-align: right; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .today .mrow > button { font-size: .72rem; min-height: 1.6rem; }
  .today .tdone { grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: .55rem; font-size: .76rem; }
}
.mini-h { font-family: var(--font-head); font-size: var(--t-sub); color: var(--ink-2); margin-bottom: .3rem; text-align: center; }
.small-list .li { padding: .3rem .1rem; font-size: .8rem; }
.small-list .li button { font-size: .7rem; min-height: 1.45rem; padding: .1rem .45rem; }
.face { flex-direction: column; gap: .1rem; padding: .3rem .6rem; min-width: 58px; min-height: 36px; font-weight: 600; font-size: .82rem; }
.face span:last-child { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place .pk { color: var(--primary); display: grid; place-items: center; } .place .pk .si { width: 22px; height: 22px; }
.place h3::after { display: none; }
.pin .mk .si { width: 18px; height: 18px; color: #3a2a18; stroke-width: 1.6; }
.pin.sel .mk .si { color: #7d2f2a; }
/* 가운데 너비: 두 칸 — 왼쪽에 오늘 · 의뢰 · 알림을 차례로 쌓고, 오른쪽에 지도 + 장소 패널 (왼쪽 아래가 비지 않게) */
@media (max-width: 1240px) { .homegrid { grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .homegrid > .hleft { grid-column: 1; grid-row: 1; } .homegrid > .hmap { grid-column: 2; grid-row: 1 / span 2; } .homegrid > .hright { grid-column: 1; grid-row: 2; }
  .homegrid > .hmap { position: sticky; top: 5.6rem; } }
/* 좁은 화면: 한 줄 — 메인 퀘스트(머리) → 지금 할 일 → 오늘 → 지도 · 장소 → 오늘의 의뢰 → 알림 */
@media (max-width: 860px) { .homegrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .homegrid > .hmap { grid-column: auto; grid-row: auto; position: static; } .hbar .greet { font-size: 1.1rem; }
  .homegrid > .hleft { display: contents; } .homegrid .plate.tasks { order: -3; } .homegrid .plate.today { order: -2; } .homegrid > .hmap { order: -1; }
  .homegrid > .hright { order: 1; display: block; columns: 2 260px; column-gap: .9rem; grid-column: auto; grid-row: auto; }
  .homegrid > .hright > * { break-inside: avoid; margin-bottom: .9rem; } .homegrid > .hright > :last-child { margin-bottom: 0; } }
/* ── 홈 ── */
.dash { display: grid; gap: var(--d-dash); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dash > * { grid-column: span 4; }
.dash > .w8 { grid-column: span 8; } .dash > .w6 { grid-column: span 6; } .dash > .w12 { grid-column: 1 / -1; } .dash > .w3 { grid-column: span 3; }
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem; align-items: stretch; background: var(--surface) var(--paper); border: 14px solid transparent; border-image: var(--frame) 40 stretch; padding: .6rem 1rem; }
.hero .greet { font-family: var(--font-head); font-size: 1.5rem; }
.hero .quote { color: var(--ink-2); font-size: .98rem; line-height: 1.85; font-style: italic; }

/* ── 원정 고르기: 판화 도판 ── */
.gatehead { display: flex; justify-content: center; margin: .3rem 0 .1rem; }
.gatehead span { font-size: 1rem; padding-inline: 1.7rem; letter-spacing: .1em; text-indent: .1em; }
.zgrid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.zplate { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; padding: .5rem .5rem .55rem; text-align: left; white-space: normal; font-weight: 400; background: var(--surface) var(--paper); border: 1px solid var(--line-2); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--line) 70%, transparent), 0 2px 5px rgba(40, 24, 10, .14); transition: transform .15s, box-shadow .15s; }
.zplate:hover:not(:disabled) { transform: translateY(-2px); background: var(--surface) var(--paper); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--gilt), 0 8px 16px rgba(40, 24, 10, .22); }
.zplate.sel, .zplate.sel:hover:not(:disabled) { background: var(--surface) var(--paper); color: var(--ink); border-color: var(--primary); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--primary-2), 0 6px 14px rgba(125, 47, 42, .25); }
.zplate.locked { filter: grayscale(.85) sepia(.3); opacity: .62; }
.zart { position: relative; border: 1px solid var(--line-2); overflow: hidden; }
/* 그림 위 꼬리표(구역 · 권장 · 추천): 높이 20px · 작은 글씨 · 금박 테 한 줄 */
.zart .zt, .zfeel, .recz .rectag { height: 20px; padding: 0 .5rem; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; font-size: .68rem; line-height: 1; white-space: nowrap; color: var(--st-ink); border-radius: var(--r-s); box-shadow: 0 0 0 1px rgba(214, 180, 106, .75), 0 2px 3px rgba(0, 0, 0, .35); }
.zart .zt { position: absolute; top: 6px; right: 6px; background: linear-gradient(#94403a, #6b2420); }

.zart .seal { position: absolute; left: 6px; bottom: 5px; width: 30px; height: 30px; border-radius: 0; box-shadow: none; background: url(/assets/ui/seal.svg) center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.zart .lock { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-size: 1.1rem; color: #f3e6c8; text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 6px rgba(0, 0, 0, .6); background: repeating-linear-gradient(45deg, rgba(20, 12, 6, .34) 0 6px, rgba(20, 12, 6, .18) 6px 12px); }
.zname { font-family: var(--font-head); font-size: 1.06rem; text-align: center; line-height: 1.25; }
.zmeta { display: flex; align-items: center; justify-content: space-between; gap: .3rem; font-size: .74rem; color: var(--ink-3); }
.zmons { display: inline-flex; align-items: center; gap: 1px; }
.zboss { margin-left: 4px; padding-left: 4px; border-left: 1px dotted var(--line-2); }
.zart.big { border-width: 1px; }
/* ── 던전: 원정 일지 위의 전장 ── */
.dun { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.dun.town { grid-template-columns: minmax(0, 1fr) 320px; }
.stage { position: relative; overflow: hidden; background: color-mix(in srgb, var(--zc, #b09a70) 10%, var(--surface)) var(--paper); border: 14px solid transparent; border-image: var(--frame) 40 stretch; }
.stage-top { display: flex; align-items: center; gap: .7rem; padding: .3rem .6rem .55rem; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; justify-content: center; }
.stage-top .ttl { font-family: var(--font-head); font-size: 1.2rem; letter-spacing: .04em; }
.field { display: grid; grid-template-columns: minmax(0, 1fr) 62px; }
.erows { display: flex; flex-direction: column; }
.erow { position: relative; display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .6rem 1rem .6rem 3.4rem; min-height: 92px; flex-wrap: wrap; }
.erow + .erow { border-top: 1px dashed var(--line-2); }
.erows { border-bottom: 1px solid var(--ink-3); box-shadow: 0 1px 0 var(--line); }
.rl { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); font-size: .72rem; color: var(--ink-3); font-family: var(--font-head); writing-mode: vertical-rl; letter-spacing: .2em; }
.mon { position: relative; width: 108px; display: flex; flex-direction: column; align-items: center; gap: .2rem; transition: transform .2s; }
.mon .art { width: 72px; height: 72px; display: grid; place-items: center; }
.mon .art .ic { filter: sepia(.2); }
.mon .n { font-size: .76rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; font-family: var(--font-head); }
.mon .ehp { width: 100%; height: 5px; background: var(--surface-3); border: 1px solid var(--line-2); overflow: hidden; }
.mon .ehp i { display: block; height: 100%; background: var(--hp); transition: width .3s; }
.mon.boss { width: 176px; } .mon.boss .art { width: 132px; height: 132px; } .mon.boss .n { font-size: .92rem; color: var(--primary); }
.mon.mini { width: 136px; } .mon.mini .art { width: 96px; height: 96px; }
.mon .st { position: absolute; top: -4px; right: 4px; display: flex; gap: 2px; }
.mon .st span { font-size: .62rem; font-weight: 800; background: var(--surface); border: 1px solid var(--line); padding: 0 .25rem; }
.turnbar { display: flex; flex-direction: column; gap: .3rem; padding: .6rem .4rem; border-left: 1px solid var(--line-2); align-items: center; }
.turnbar .tt { font-size: .66rem; color: var(--ink-3); text-align: center; line-height: 1.2; font-family: var(--font-head); }
.turnbar .tc { width: 38px; height: 38px; overflow: hidden; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2); font-size: .6rem; position: relative; }
.turnbar .tc.tc-foe { border-color: color-mix(in srgb, var(--rose) 70%, transparent); }
.turnbar .tc.tc-ally { border-color: color-mix(in srgb, var(--mint) 70%, transparent); }
.turnbar .tc.now { transform: scale(1.12); box-shadow: 0 0 0 2px var(--gilt); }
.turnbar .tc.done { opacity: .35; }
.blog { --bl-lh: 1.45; --bl-pad: .45rem; position: static; margin: .5rem .6rem .2rem; max-height: 130px; overflow-y: auto; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line-2); padding: .4rem .6rem; font-size: .8rem; line-height: var(--bl-lh); box-shadow: 0 4px 12px rgba(40, 24, 10, .2); z-index: 3; }
.blog p { margin: 0; color: var(--ink-2); } .blog p b { color: var(--ink); }
/* 전투 기록 줄 (public/js/blogline.js): 공격 · 대사 · 알림 · 라운드 · 결과 · 보상. 크기는 em 이라 .blog 글 크기 하나로 함께 줄고 는다.
   모든 줄의 글은 같은 왼쪽 선에서 시작한다 (2px 표시 + --bl-pad) */
.blog p.bl { padding: .06rem 0 .06rem var(--bl-pad); border-left: 2px solid transparent; line-height: var(--bl-lh); overflow-wrap: anywhere; }
.blog .bl-act { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .45em; align-items: start; font-size: 1em; margin: .08rem 0; }
.blog .bl-act.side-ally { border-left-color: color-mix(in srgb, var(--mint) 60%, transparent); }
.blog .bl-act.side-foe { border-left-color: color-mix(in srgb, var(--rose) 60%, transparent); }
.blog .bl-who { font-weight: 700; color: var(--ink); white-space: nowrap; max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; }
.blog .bl-body { min-width: 0; }
.blog .bl-sk { color: var(--ink-2); }
.blog .bl-act.is-card .bl-sk { color: var(--ink); font-weight: 600; }
.blog .bl-arw { color: var(--ink-3); margin: 0 .3em; }
.blog .bl-t { display: inline-block; white-space: nowrap; }
.blog .bl-t:not(:last-child)::after { content: '·'; color: var(--ink-3); margin: 0 .35em; font-weight: 400; }
.blog .bl-tn { color: var(--ink-2); }
.blog .bl-n { font-weight: 800; font-variant-numeric: tabular-nums lining-nums; }
.blog p .bl-dmg { color: var(--ink); }
.blog .side-foe .bl-dmg { color: var(--rose); }
.blog p .bl-dmg.crit { color: var(--butter); }
.blog .side-foe .bl-dmg.crit { color: var(--hp); }
.blog p .bl-heal { color: var(--mint); }
.blog .bl-crit { display: inline-block; margin-left: .25em; padding: 0 .28em; font-size: .68em; font-weight: 800; line-height: 1.35; vertical-align: .12em; color: var(--surface); background: var(--butter); border-radius: var(--r-s); }
.blog .side-foe .bl-crit { background: var(--rose); }
.blog p .g0 { color: var(--g0); } .blog p .g1 { color: var(--g1); } .blog p .g2 { color: var(--g2); } .blog p .g3 { color: var(--g3); } .blog p .g4 { color: var(--g4); } .blog p .g5 { color: var(--g5); } /* 보상 이름은 등급 색 (.blog p b 보다 앞서게) */
html[data-gcol="off"] .blog p .gname { color: inherit; }
.blog .bl-miss, .blog .bl-mv, .blog .bl-note { color: var(--ink-3); font-size: .92em; }
.blog .bl-sh { color: var(--sh); font-weight: 700; font-size: .92em; }
.blog .bl-chip { display: inline-block; margin-left: .3em; padding: 0 .3em; font-size: .66em; font-weight: 700; line-height: 1.4; vertical-align: .12em; border: 1px solid currentColor; border-radius: var(--r-s); background: var(--surface-2); white-space: nowrap; }
.blog .bl-chip.card:not(.gname) { color: var(--ink-3); }
.blog .bl-chip.pet { margin: 0 .3em 0 0; color: var(--ink-3); }
.blog .bl-say { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .45em; align-items: baseline; font-size: .9em; color: var(--ink-3); font-family: var(--font-head); border-left: 2px dotted color-mix(in srgb, var(--ink-3) 45%, transparent); margin: .12rem 0; }
.blog .bl-say.narr { display: block; }
.blog .bl-spk { font-family: var(--font-body); font-size: .86em; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.blog .bl-sys { font-size: .88em; color: var(--ink-3); }
.blog .bl-sys.bad { color: var(--rose); font-weight: 700; }
.blog .bl-round { display: flex; align-items: center; gap: .6em; font-size: .8em; color: var(--ink-3); letter-spacing: .06em; padding-left: 0; margin: .3rem 0 .12rem; }
.blog .bl-round:first-child { margin-top: 0; }
.blog .bl-round::before, .blog .bl-round::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--line-2) 55%, transparent); }
.blog .bl-round::before { flex: 0 0 .6em; }
.blog .bl-end { font-family: var(--font-head); font-weight: 700; font-size: 1em; margin-top: .3rem; padding-top: .2rem; border-top: 1px dashed var(--line); }
.blog .bl-end.win { color: var(--mint); } .blog .bl-end.lose { color: var(--rose); }
.blog .bl-rw { display: flex; flex-wrap: wrap; gap: .2rem .3rem; font-size: .88em; padding-top: .15rem; padding-bottom: .15rem; }
.blog .bl-ri { display: inline-flex; align-items: baseline; gap: .3em; padding: 0 .4em; line-height: 1.55; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); white-space: nowrap; }
.blog .bl-rk { color: var(--ink-3); } .blog .bl-rv { color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.blog .dmg { color: var(--rose); font-weight: 800; } .blog .heal { color: var(--mint); font-weight: 800; }
.cardchip { display: inline-flex; align-items: center; gap: .2rem; font-size: .68rem; font-weight: 700; padding: .05rem .4rem .05rem .15rem; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); cursor: default; position: relative; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.cardchip.used { background: var(--primary-soft); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.tip { position: fixed; z-index: 95; max-width: 300px; background: var(--surface) var(--paper); color: var(--ink); border: 1px solid var(--line-2); padding: .55rem .75rem; box-shadow: 0 10px 24px rgba(20, 10, 4, .35), inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--line); font-size: .82rem; line-height: 1.5; pointer-events: none; }
.tip b { display: block; margin-bottom: .2rem; font-family: var(--font-head); font-weight: 400; font-size: .95rem; }
.statpanel { display: flex; flex-direction: column; gap: .8rem; }
.dps-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: .45rem; align-items: center; font-size: .8rem; }
.dps-row .bar { height: 5px; }
.dps-row .nm1 { text-align: left; font-weight: 700; }
.dmap { display: flex; flex-direction: column; gap: .5rem; }
.dmap .floor { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dmap .fl { font-size: .7rem; color: var(--ink-3); width: 2.4rem; font-family: var(--font-head); }
.rm { width: 26px; height: 26px; transform: rotate(45deg); display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); font-size: .72rem; position: relative; border: 1px solid var(--line-2); margin: 3px; }
.rm > * { transform: rotate(-45deg); }
.rm svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rm.d { background: var(--mint-soft); color: var(--mint); border-color: color-mix(in srgb, var(--mint) 45%, transparent); }
.rm.now { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); animation: pulse 1.6s infinite; }
.rm.next { border-color: var(--gilt); box-shadow: 0 0 0 1px var(--gilt); }
.rm.boss { background: var(--rose-soft); color: var(--rose); } .rm.boss.d { background: var(--mint-soft); color: var(--mint); }
.rm.x { opacity: .45; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px transparent; } }
/* 등장 · 사망 · 피격 · 행동 */
.spawn { animation: spawn .7s ease-out; }
@keyframes spawn { 0% { opacity: 0; filter: brightness(2.4) sepia(.6); } 25% { opacity: 1; } 100% { filter: none; } }
.dying { animation: dying .8s ease-in forwards; }
@keyframes dying { 0% { filter: none; } 20% { filter: sepia(1) saturate(4) hue-rotate(-25deg); } 100% { opacity: 0; transform: translateY(6px) scale(.95); filter: grayscale(1); } }
.hit { animation: hit .38s; }
@keyframes hit { 0%, 100% { transform: none; filter: none; } 20% { transform: translateX(-5px); filter: sepia(1) saturate(5) hue-rotate(-40deg); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
.acting { animation: acting .45s; }
@keyframes acting { 50% { transform: translateY(-8px) scale(1.04); } }
.healfx { animation: healfx .6s; }
@keyframes healfx { 40% { filter: brightness(1.2) drop-shadow(0 0 8px #9cc4a6); } }
.float { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); font-weight: 700; font-size: 1rem; pointer-events: none; animation: floatup 1s ease-out forwards; text-shadow: 0 0 3px var(--surface), 0 0 6px var(--surface); z-index: 4; font-family: var(--font-num); }
.float.dmg { color: var(--rose); } .float.heal { color: var(--mint); } .float.crit { color: var(--peach); font-size: 1.2rem; } .float.miss { color: var(--ink-3); }
@keyframes floatup { to { transform: translate(-50%, -34px); opacity: 0; } }

/* ── 채팅: 접힌 서신 ── */
.si { width: 1.1em; height: 1.1em; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.6; /* 선 아이콘 한 벌: 24 칸 · 선 1.5~1.9 (작을수록 굵게) · docs/UI_ICONS.md */ stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
.cmain { display: flex; flex: 1; min-height: 0; }
.cside { width: 120px; border-right: 1px solid var(--line); overflow-y: auto; flex: 0 0 auto; font-size: .78rem; }
.cside button { width: 100%; justify-content: flex-start; background: transparent; border: 0; box-shadow: none; border-radius: 0; min-height: 2rem; font-size: .8rem; padding: .3rem .6rem; font-weight: 400; }
.cside button.sel { background: var(--surface-3); color: var(--ink); }
.cbody { flex: 1; overflow-y: auto; padding: .5rem .7rem; display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; min-width: 0; }
.cmsg { line-height: 1.55; word-break: break-word; }
.cmsg .t { color: var(--ink-3); font-size: .7rem; margin-left: .3rem; }
.cmsg.rp { font-style: italic; color: var(--ink-2); }
.cmsg.rp .tag { font-style: normal; }
.cmsg.sys { color: var(--ink-3); font-size: .8rem; text-align: center; font-style: italic; }
.cmsg .em { color: var(--primary); font-weight: 700; }
.cmsg.rp .em { color: var(--sky); }
.itemlink { display: inline-flex; align-items: center; gap: .2rem; padding: 0 .4rem; background: var(--surface-3); border: 1px solid var(--line); font-weight: 700; cursor: pointer; font-style: normal; }
.cin { display: flex; gap: .35rem; padding: .45rem; border-top: 1px solid var(--line-2); background: var(--surface-2); }
.cin input { flex: 1; min-width: 0; }
.cin button { flex: 0 0 auto; }

/* ── 마이룸 · 길드 아지트 (도트 방) ── */
.room { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.roomview { position: relative; border: 14px solid transparent; border-image: var(--frame-gilt) 40 stretch; background: #1e1712; }
.roomview canvas { display: block; width: 100%; image-rendering: pixelated; cursor: pointer; }
.roomview .bubble { position: absolute; transform: translate(-50%, -100%); background: #f6ecd4; color: #2e2318; border: 1px solid #6b5232; padding: .15rem .5rem; font-size: .76rem; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.roomview .bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: #f6ecd4; border-right: 1px solid #6b5232; border-bottom: 1px solid #6b5232; transform: translateX(-50%) rotate(45deg); }
.roomview .rname { position: absolute; top: .4rem; left: 50%; transform: translateX(-50%); font-family: var(--font-head); color: #f1e4c6; text-shadow: 0 1px 2px #000; font-size: 1rem; pointer-events: none; white-space: nowrap; }
.roomview .hint { position: absolute; bottom: .4rem; right: .6rem; color: #cdb994; font-size: .72rem; pointer-events: none; }
.furn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
/* 벽지 · 바닥 상점 (pages/room.js styleShop): 견본 칸 판 · 입어 보기 · 구매 확인 */
.ss-open { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .35rem .6rem .35rem .35rem; text-align: left; justify-content: flex-start; }
.ss-open canvas { width: 30px; height: 50px; image-rendering: pixelated; border: 1px solid #6b5232; flex: none; }
.ss-open-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ss-open-t .faint { font-weight: 400; font-size: .78rem; }
.styleshop .ss-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding-right: 2.2rem; }
.styleshop .ss-head h3 { margin: 0; }
.ss-gold { font-weight: 700; color: var(--butter); white-space: nowrap; }
.ss-gold::before { content: ''; display: inline-block; width: .55rem; height: .55rem; margin-right: .3rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b8, #d9a93c 55%, #8a5d16); vertical-align: .05rem; }
.styleshop .ss-tabs { margin: .7rem auto .4rem; }
.styleshop .ss-tabs button { white-space: nowrap; }
.ss-hint { text-align: center; margin: 0 0 .7rem; font-size: .8rem; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .55rem; }
.ss-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .45rem .45rem .55rem; min-width: 0; text-align: center; white-space: normal; position: relative; }
.ss-sw { position: relative; display: block; width: 100%; background: #1e1712; border: 3px solid #4a3522; box-shadow: inset 0 0 0 1px #8a6a3e, 0 1px 0 #fff6; }
.ss-sw canvas { display: block; width: 100%; height: auto; aspect-ratio: 96 / 120; object-fit: cover; image-rendering: pixelated; }
.ss-sw.wall canvas { object-position: top; } /* 벽지는 벽 쪽 · 바닥은 바닥 쪽을 크게 */
.ss-sw.floor canvas { object-position: bottom; }
.ss-badge { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: .68rem; font-weight: 700; padding: 0 .45rem; border-radius: 99px; background: rgba(30, 20, 12, .78); color: #f1e4c6; white-space: nowrap; }
.ss-badge.on { background: #e8c870; color: #3a2610; box-shadow: 0 0 0 1px #8a6a2c; }
.ss-card.on { border-color: #c79a3e; box-shadow: 0 0 0 2px #e8c87088, inset 0 0 0 1px #fff6; }
.ss-card.on .ss-sw { border-color: #b8862c; }
.ss-card.locked .ss-sw canvas { filter: grayscale(.75) brightness(.7); }
.ss-name { font-size: .84rem; max-width: 100%; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; word-break: keep-all; align-content: center; }
.ss-sub { font-size: .74rem; }
.ss-card .tag { margin: 0; }
.ss-preview { position: relative; margin: .7rem 0 .55rem; border: 10px solid transparent; border-image: var(--frame-gilt) 40 stretch; background: #1e1712; }
.ss-preview canvas { display: block; width: 100%; image-rendering: pixelated; }
.ss-try { position: absolute; top: .35rem; left: .4rem; font-size: .7rem; font-weight: 700; padding: 0 .45rem; border-radius: 99px; background: rgba(30, 20, 12, .72); color: #f1e4c6; }
.ss-info { text-align: center; }
.ss-title { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: 1.05rem; }
.ss-info p { margin: .25rem 0 0; }
.ss-foot { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: .7rem; text-align: center; }
.ss-state { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; }
.ss-ask { margin: 0; font-weight: 700; font-size: 1rem; word-break: keep-all; }
.ss-after { margin: -.3rem 0 0; word-break: keep-all; }
.ss-foot .ss-after:first-child { margin: 0; }
.ss-btns { display: flex; justify-content: center; gap: .5rem; width: 100%; }
.ss-btns button { white-space: nowrap; min-width: 6.5rem; }
@media (max-width: 520px) { .ss-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; } .ss-card { padding: .35rem .3rem .45rem; } .ss-name { font-size: .78rem; } .ss-btns button { flex: 1; min-width: 0; } }
.furn { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; text-align: left; justify-content: flex-start; font-weight: 400; white-space: normal; }
.furn canvas { width: 40px; height: 40px; image-rendering: pixelated; flex: 0 0 auto; background: #2a211a; }
.furn.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary-2); }
.tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.token { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; padding: .4rem; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.token img, .token canvas { width: 56px; height: 56px; image-rendering: pixelated; object-fit: contain; }
.token .say { font-size: .74rem; color: var(--ink-2); font-style: italic; line-height: 1.35; max-height: 3em; overflow: hidden; }

/* ── 반응형 ── */
@media (max-width: 1100px) {
  .dash > * { grid-column: span 6; } .dash > .w8, .dash > .w12 { grid-column: 1 / -1; } .dash > .w3 { grid-column: span 6; }
  .dun, .dun.town, .room { grid-template-columns: minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom, 0px)); border-right: 0; border-top: 1px solid #120c08; box-shadow: inset 0 3px 0 rgba(176, 138, 62, .35); overflow-x: auto; overflow-y: hidden; justify-content: flex-start; background: linear-gradient(180deg, #2c2118, #1c140e); }
  .side .logo { display: none; }
  .nav { flex: 0 0 auto; min-width: 58px; font-size: .66rem; padding: .3rem .2rem; }
  .nav[aria-current="page"]::before { left: 20%; right: 20%; top: -.3rem; bottom: auto; width: auto; height: 3px; }
  .topbar { gap: .5rem; padding: .45rem 12px; }
  .lvbox { min-width: 0; order: 3; flex-basis: 100%; max-width: none; }
  .avatar { width: 36px; height: 36px; }
  .who .nm { font-size: .98rem; }
  .wallet { gap: .55rem; font-size: .8rem; order: 4; }
  :root { --plate-bw: 8px; --plate-pad: .4rem .45rem; --page-bw: 10px; --page-pad: .45rem 4px .9rem; --page-mt: .35rem; --d-dash: .55rem; --d-sec: .8rem; }
  .page { margin: var(--page-mt) 4px 7rem; }
  .book { grid-template-columns: minmax(0, 1fr); border-width: 14px; }
  .book::after { display: none; }
  .leaf { padding: 1.2rem 1rem; }
  .dash > *, .dash > .w3, .dash > .w6 { grid-column: 1 / -1; }
  .erow { padding-left: 2rem; gap: .4rem; }
  .mon { width: 84px; } .mon .art { width: 56px; height: 56px; } .mon.boss { width: 132px; } .mon.boss .art { width: 100px; height: 100px; }
  .townwrap, .roomview, .stage, .hero { border-width: 10px; }
  .townmap { aspect-ratio: 4 / 5; }
  .roomview .hint { display: none; }
  .pin { padding: 3px 5px 2px !important; border-radius: 11px 11px 2px 2px !important; } .pin .mk { width: 16px; height: 16px; } .pin .mk .si { width: 14px; height: 14px; } .pin .lb { font-size: .6rem; letter-spacing: 0; }
  #toasts { top: calc(env(safe-area-inset-top, 0px) + 3.4rem); bottom: auto; left: auto; right: .6rem; width: min(300px, calc(100vw - 1.2rem)); } /* 휴대폰도 오른쪽 위: 아래 채팅 · 단추를 가리지 않게 */
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* 픽셀 아바타 편집기 */
.avatar-editor { display: grid; grid-template-columns: repeat(16, 18px); grid-template-rows: repeat(16, 18px); border: 1px solid var(--line-2); overflow: hidden; touch-action: none; user-select: none; background: #fff8e8; }
.avatar-editor span { border: 1px solid rgba(0, 0, 0, .04); }

/* S · SS 카드 반짝이 */
.spks { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
.spks i { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: radial-gradient(circle, #fffdf2 0 22%, #f1c75a 48%, #d99a2b 70%, transparent 74%); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); transform: scale(0); animation: spk var(--t, 2.2s) ease-in-out var(--d, 0s) infinite; filter: drop-shadow(0 0 2px rgba(255, 226, 140, .9)); }
.skc.gSS .spks i:nth-child(3n) { background: radial-gradient(circle, #fff 0 22%, #f0a8cf 50%, #c45f9a 70%, transparent 74%); }
@keyframes spk { 0%, 40%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 55% { transform: scale(var(--s, 1)) rotate(45deg); opacity: 1; } 66% { transform: scale(calc(var(--s, 1) * .5)) rotate(70deg); opacity: .9; } 76% { transform: scale(var(--s, 1)) rotate(90deg); opacity: 1; } 88% { transform: scale(0) rotate(120deg); opacity: 0; } }
.cardchip.gS, .cardchip.gSS { border-color: var(--gilt) !important; }
.cardchip .spks i { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
@media (prefers-reduced-motion: reduce) { .spks { display: none; } }
.skc > .spks { grid-column: auto; grid-row: auto; }
.ff-art { position: relative; } .ff-art .spks i { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.skc > .art { position: relative; }
/* 부가옵션 닦기 */
.ot { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 .4rem; font-size: .68rem; font-weight: 700; line-height: 1; border: 1px solid currentColor; border-radius: var(--r-s); white-space: nowrap; }
.ot.t0 { color: var(--g0); } .ot.t1 { color: var(--g1); } .ot.t2 { color: var(--g2); } .ot.t3 { color: var(--g3); } .ot.t4 { color: var(--butter); background: color-mix(in srgb, var(--gilt-2) 18%, transparent); }
.ot.sig { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.olk { flex: 0 0 auto; min-width: 2.8rem; height: 1.7rem; padding: 0 .4rem; font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; }
.olk.on { background: var(--ink-2); color: var(--surface); border-color: var(--ink); } .olk.sig { color: var(--primary); border: 1px solid var(--primary); font-weight: 700; }
/* 권장 전투력 */
.zart .zfeel { position: absolute; left: 6px; top: 6px; }
.zfeel:not(.zart .zfeel) { box-shadow: none; }
.zfeel.easy { background: var(--st-green); } .zfeel.fit { background: var(--st-brown); } .zfeel.hard { background: var(--st-amber); } .zfeel.risk { background: var(--st-red); }
.pwrcmp { margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: .3rem; }
.pbar { position: relative; height: 6px; background: var(--track); } .pbar i { display: block; height: 100%; }
.pbar i.easy { background: var(--st-green); } .pbar i.fit { background: var(--st-brown); } .pbar i.hard { background: var(--st-amber); } .pbar i.risk { background: var(--st-red); }
.pbar em { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--ink); }
.talkline { font-style: italic; color: var(--ink-2); padding-left: .6rem; border-left: 2px solid var(--gilt); }
.bondline { border-left-color: var(--rose); color: var(--ink); }
/* 관계도 */
.relfaces { display: flex; flex-wrap: wrap; gap: .25rem; } .relfaces .face { padding: 2px; } .relfaces .face.sel { outline: 2px solid var(--primary); }
.relcard { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; } .relcard.on { border-color: var(--gilt); }
.relrow { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.relp { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .82rem; } .relp.dim { opacity: .45; }
.reldash { width: 22px; height: 0; border-top: 1px dashed var(--ink-3); }
.relkind { font-family: var(--font-head); color: var(--primary); font-size: .95rem; padding: 0 .6rem; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
/* 누구와 갈까 */
.whotabs { display: grid; grid-template-columns: 1fr 1fr; width: auto; }
.whotabs button { min-height: var(--ctl); }
.comppick { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .35rem; }
.cpk { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .3rem .2rem; font-size: .72rem; min-width: 0; }
.cpk > span.ellipsis { max-width: 100%; } .cpk.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); box-shadow: inset 0 0 0 1px var(--primary); }
.lineup { display: flex; flex-direction: column; gap: .25rem; padding: .4rem .5rem; background: color-mix(in srgb, var(--surface-3) 30%, transparent); border: 1px dashed var(--line-2); }
.lrow { display: flex; align-items: center; gap: .4rem; min-height: 30px; flex-wrap: wrap; } .lrow .rl, .rlast .rl { position: static; transform: none; writing-mode: horizontal-tb; letter-spacing: 0; }
.lrow .rl { flex: 0 0 2.2rem; width: 2.2rem; font-size: .72rem; color: var(--ink-3); }
.lu { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; max-width: 9rem; } .lu.me b, .lu.me { font-weight: 700; }
.whopanel { align-items: stretch !important; } .whopanel > * { align-self: stretch; width: 100%; box-sizing: border-box; }
/* 길드 아지트 = 관리 공간 */
.ghdash { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; padding: .7rem 1rem; margin-bottom: 1rem; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--line); }
.ghname { display: flex; align-items: center; gap: .4rem; } .ghname b { font-family: var(--font-head); font-size: 1.3rem; }
.ghstat { display: flex; align-items: center; gap: .4rem; min-width: 0; } .ghstat .k, .ghpin .k { font-size: .74rem; color: var(--ink-3); white-space: nowrap; }
.ghpin { flex: 1 1 100%; display: flex; gap: .5rem; align-items: center; min-width: 0; padding-top: .5rem; border-top: 1px dashed var(--line-2); }
.gh-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.gh-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.hallview { cursor: crosshair; }
.htoken { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.htoken .bubble { position: relative; transform: none; margin-bottom: 6px; max-width: 150px; white-space: normal; font-size: .7rem; line-height: 1.3; left: auto; top: auto; }
.htoken .tn { font-size: .66rem; color: #f1e4c6; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.post { align-items: flex-start; } .ptext { margin: .15rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.55; }
.post.pinned, .li.postc.pinned { background: color-mix(in srgb, var(--gilt-2) 12%, transparent); }
.board, .gblist { max-height: 420px; overflow-y: auto; }
.poll { display: flex; flex-direction: column; gap: .3rem; padding: .55rem .6rem; border: 1px solid var(--line-2); } .poll.closed { opacity: .75; }
.popt { position: relative; display: flex; align-items: center; gap: .5rem; justify-content: space-between; overflow: hidden; text-align: left; }
.popt i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--gilt) 22%, transparent); pointer-events: none; } .popt > span, .popt > b { position: relative; }
.popt.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.odot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; } .odot.on { background: var(--mint); }
.members { max-height: 420px; overflow-y: auto; }
@media (max-width: 1240px) { .gh-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 1100px) { .gh-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .gh-cols { grid-template-columns: minmax(0, 1fr); } }
.li.postc { flex-direction: column; align-items: stretch; }
/* 뒷이야기 · 회상록 */
/* 도장 꼬리표: 바탕을 채운 작은 표 (갈래 · 역할 · 손길) */
.rtag, .homelog .lk { display: inline-flex; align-items: center; justify-content: center; height: 1.3rem; padding: 0 .45rem; font-size: .7rem; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--st-ink); border-radius: var(--r-s); flex: 0 0 auto; }
.g-horror { --g: #3a2a3a; } .g-eerie { --g: #3d5a5a; } .g-comic { --g: #a0712a; } .g-tear { --g: #4a6a8a; } .g-drama { --g: var(--st-red); } .g-warm { --g: #8a5a3a; } .g-mystery { --g: var(--st-violet); }
.memo { display: flex; align-items: center; gap: .6rem; text-align: left; justify-content: flex-start; max-width: none; }
.scene .picked { margin: .6rem 0; color: var(--primary); font-style: italic; }
.dunbody .page-head { display: none; } .duntabs { margin-bottom: 1rem; }
/* 마이홈: 텃밭 · 펫 · 손길 */
.homebox { margin-top: 1rem; }
.matefarms > .matefarm { margin-top: .8rem; }
.mates .mate-row button { white-space: nowrap; }
.homegrid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; } .homegrid2 > .hcard:last-child { grid-column: 1 / -1; }
.plots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .35rem; }
.plot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: .35rem .25rem; text-align: center; border: 1px solid var(--line-2); border-radius: var(--r-s); background: color-mix(in srgb, var(--surface-3) 30%, transparent); font-size: .78rem; font-style: normal; }
.plot.empty { opacity: .7; } .plot .ic { display: block; margin: 0 auto; } .pmarks { display: flex; gap: .2rem; justify-content: center; min-height: 1rem; }
.homelog .lk { min-width: 2.4rem; background: var(--st-brown); }
.homelog .lk.water { background: var(--st-blue); } .homelog .lk.fert { background: var(--st-olive); } .homelog .lk.pet { background: var(--st-rose); } .homelog .lk.care { background: var(--st-green); }
.g-ensemble, .jc-ensemble { --g: var(--st-red); } .g-friend, .jc-friend { --g: var(--st-green); } .g-aff, .jc-aff { --g: var(--st-rose); } .g-rel, .jc-rel { --g: var(--st-violet); } .g-side, .jc-side { --g: var(--st-brown); }
.journal { display: flex; flex-direction: column; gap: .35rem; max-height: 360px; overflow-y: auto; padding: .6rem .8rem; background: color-mix(in srgb, var(--surface-3) 30%, transparent); border-left: 3px double var(--line-2); font-family: var(--font-head); }
.journal p { margin: 0; line-height: 1.7; } .journal .jn { font-family: var(--font-body); font-size: .72rem; color: var(--ink-3); margin-right: .5rem; }
.rk { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; font-size: .72rem; font-weight: 700; color: var(--st-ink); background: var(--st-grey); border-radius: 50%; flex: 0 0 auto; line-height: 1; }
.rk.r0 { background: var(--medal-1); } .rk.r1 { background: var(--medal-2); } .rk.r2 { background: var(--medal-3); } .li.me { background: color-mix(in srgb, var(--gilt-2) 14%, transparent); }
.bdaynow { color: var(--primary) !important; font-weight: 700; } .collect summary { cursor: pointer; font-family: var(--font-head); }
/* 초상이 액자보다 클 때 한쪽으로 밀리지 않게: 액자 안의 초상은 액자에 맞춘다 */
.por > .portrait { width: 100% !important; height: 100% !important; border: 0 !important; box-shadow: none !important; background: transparent !important; display: grid !important; place-items: center !important; }
.por > canvas { width: 100% !important; height: 100% !important; }
.por > .portrait img { width: 36px !important; height: 36px !important; object-fit: contain !important; margin: auto; }
.portrait { place-items: center; place-content: center; }
.portrait > img, .portrait > canvas { margin: auto; display: block; }
/* 마이홈 카드 */
.hcard h3 { margin: 0; font-size: var(--t-sub); }
.hhead { display: flex; align-items: center; gap: .35rem; min-height: 1.9rem; }
.plot b { max-width: 100%; font-size: .8rem; } .plot.ready { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 10%, transparent); }
.pmarks .mk { font-size: .62rem; padding: 0 .25rem; line-height: 1rem; color: var(--st-ink); border-radius: 2px; } .pmarks .mk.w { background: var(--st-blue); } .pmarks .mk.f { background: var(--st-olive); }
/* 텃밭 (2026-10-27): 밭 칸 줄 + 작물 고르기 격자 — 스킬카드 강화 판(.cfd)과 같은 결 */
.gplots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .35rem; }
.gplot { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 0; min-height: 0; padding: .3rem .2rem .25rem; white-space: normal; font-weight: 400; text-align: center; background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); border: 1px solid var(--line-2); border-radius: var(--r-s); box-shadow: none; }
.gplot.empty { border-style: dashed; }
.gplot.ready { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 10%, var(--surface)); }
button.gplot:hover:not(:disabled) { border-color: var(--gilt); }
.gplot.cur { box-shadow: 0 0 0 2px var(--gilt), 0 0 8px color-mix(in srgb, var(--gilt) 35%, transparent); }
.gp-art { position: relative; display: grid; place-items: center; width: 36px; height: 34px; }
.gp-ghost { opacity: .45; }
.gp-nx { position: absolute; right: -8px; bottom: -3px; display: grid; place-items: center; width: 18px; height: 18px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 50%; }
.gp-nm { display: block; width: 100%; font-size: .72rem; font-weight: 700; line-height: 1.2; }
.gp-st { font-size: .68rem; color: var(--ink-3); font-family: var(--font-num); line-height: 1.2; white-space: nowrap; }
.gp-st.rd { color: var(--mint); font-weight: 700; font-family: inherit; }
.gplot .pmarks { min-height: 0; }
.gplot > button.small { margin-top: .15rem; min-height: 26px; padding: 0 .5rem; font-size: .72rem; }
.gcrop { display: flex; flex-direction: column; gap: .4rem; padding-top: .45rem; border-top: 1px dotted var(--line-2); }
.gc-ph { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.gc-ph h4 { margin: 0; white-space: nowrap; }
.gc-sum { margin-left: auto; font-size: .74rem; white-space: nowrap; }
.gc-tg { min-height: 26px; padding: .05rem .55rem; font-size: .74rem; font-weight: 700; border-radius: 999px; background: var(--surface); box-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.gc-tg.on { background: var(--ink-2); color: var(--surface); border-color: var(--ink-2); }
.gc-rule { display: flex; align-items: flex-start; gap: .3rem; font-size: .76rem; line-height: 1.4; padding: .3rem .45rem; color: var(--ink-2); background: color-mix(in srgb, var(--gilt) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gilt) 40%, var(--line)); border-radius: var(--r-s); }
.gc-rule .si { flex: none; width: 15px; height: 15px; margin-top: .1rem; color: var(--gilt); }
.gc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .4rem; max-height: 318px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 2px 4px; scrollbar-width: thin; }
.gc-tile { --gc: var(--mint); position: relative; display: flex; flex-direction: column; align-items: center; gap: .12rem; min-width: 0; min-height: 0; padding: .35rem .3rem .3rem; white-space: normal; font-weight: 400; text-align: center; background: color-mix(in srgb, var(--gc) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gc) 40%, var(--line)); border-top: 3px solid var(--gc); border-radius: var(--r-s); box-shadow: none; overflow: visible; }
.gc-tile.orb { --gc: #6b5a8e; }
.gc-tile:hover:not(.lock) { background: color-mix(in srgb, var(--gc) 12%, var(--surface)); border-color: var(--gc); }
.gc-tile.cur { background: color-mix(in srgb, var(--gc) 15%, var(--surface)); box-shadow: 0 0 0 2px var(--gc), 0 0 10px color-mix(in srgb, var(--gc) 35%, transparent); }
.gc-tile.lock { --gc: var(--line-2); background: var(--surface-2); cursor: not-allowed; }
.gc-tile.lock > :not(.gc-art), .gc-tile.lock .gc-art > .ic { opacity: .5; }
.gc-tile.lock .gc-art > .ic { filter: grayscale(.85); }
.gc-art { position: relative; display: grid; place-items: center; width: 44px; height: 44px; background: color-mix(in srgb, var(--gc) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--gc) 35%, var(--line)); border-radius: var(--r-s); flex: none; margin-bottom: 3px; }
.gc-have { position: absolute; right: -7px; bottom: -6px; min-width: 18px; height: 16px; padding: 0 .2rem; display: grid; place-items: center; font-size: .62rem; font-weight: 700; color: #fff8ec; background: var(--mint); border-radius: 999px; box-shadow: 0 0 0 2px var(--surface); }
.gc-lk { position: absolute; inset: auto -8px -7px auto; display: inline-flex; align-items: center; gap: 1px; height: 17px; padding: 0 .25rem 0 .18rem; font-size: .6rem; color: #f6e8c9; background: var(--ink-2); border-radius: var(--r-s); box-shadow: 0 0 0 2px var(--surface); }
.gc-lk .si { width: 10px; height: 10px; stroke-width: 2.6; }
.gc-on { position: absolute; right: -6px; top: -6px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--gc); color: #fff8ec; box-shadow: 0 0 0 2px var(--surface); }
.gc-on .si { width: 11px; height: 11px; stroke-width: 3; }
.gc-nm { display: block; width: 100%; font-size: .78rem; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-meta { display: inline-flex; align-items: center; gap: .15rem; font-size: .66rem; color: var(--ink-2); white-space: nowrap; }
.gc-meta .si { width: 11px; height: 11px; color: var(--ink-3); }
.gc-use { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; min-height: 2.3em; font-size: .64rem; line-height: 1.15; color: var(--ink-3); overflow: hidden; overflow-wrap: anywhere; }
.gc-ft { display: flex; justify-content: space-between; gap: .2rem; width: 100%; margin-top: .1rem; padding-top: .15rem; font-size: .64rem; border-top: 1px dotted color-mix(in srgb, var(--gc) 35%, var(--line)); white-space: nowrap; }
.gc-ft .hv { color: var(--mint); font-weight: 700; } .gc-ft .no, .gc-ft .pr { color: var(--ink-3); } .gc-ft .pr.orb { color: #6b5a8e; }
.gc-ft .lkt { font-weight: 700; color: var(--ink-2); }
.gc-sel { display: flex; align-items: center; gap: .4rem; font-size: .78rem; line-height: 1.35; min-width: 0; }
.gc-sel .grow { min-width: 0; } .gc-sel > .si { flex: none; width: 15px; height: 15px; }
.gc-act { display: flex; gap: .4rem; align-items: stretch; }
.gc-go { flex: 1; min-width: 0; gap: .35rem; white-space: nowrap; }
.gc-cnt { font-size: .72rem; font-weight: 400; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.gc-seed { flex: none; white-space: nowrap; font-size: .8rem; }
@media (min-width: 900px) { .gc-grid { max-height: 420px; } }
@media (max-width: 420px) { .gc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; } .gc-tile { padding: .3rem .2rem .25rem; } .gc-cnt { font-size: .66rem; } }
:root[data-tone="dark"] .gc-lk { background: var(--surface-3); color: var(--ink); }
.li.sold { opacity: .6; }
@media (max-width: 1240px) { .homegrid2 { grid-template-columns: minmax(0, 1fr); } }
/* 만남의 장소 */
.spotlog { position: static !important; max-height: 160px; margin: .5rem 0 0 !important; }
.bubble.nametag { background: rgba(30, 20, 12, .7) !important; color: #f1e4c6 !important; border-color: transparent !important; font-size: .68rem !important; padding: .05rem .35rem !important; }
.catch { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.cafewith { display: flex; flex-wrap: wrap; gap: .3rem; } .cafewith .cpk { flex-direction: row; gap: .3rem; padding: .15rem .45rem; max-width: 9rem; }
.menu { max-height: 420px; overflow-y: auto; }
.confined { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; margin-bottom: .8rem; border: 1px solid var(--primary); border-radius: var(--r-s); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-size: .9rem; }
/* 방 · 만남의 장소의 명함 */
.whocards { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; max-height: 360px; overflow-y: auto; }
.ncard.mini { padding: .3rem .45rem; gap: .05rem .5rem; grid-template-columns: 38px minmax(0, 1fr); }
.ncard.mini .por { width: 38px !important; height: 38px !important; } .ncard.mini .nm { font-size: .86rem; } .ncard.mini .sub, .ncard.mini .title { font-size: .7rem; }
.ncard.clk { cursor: pointer; } .ncard.clk:hover { border-color: var(--ink-3); }
/* 자동 매칭 */
.matchbox { display: flex; flex-direction: column; gap: .4rem; padding: .55rem .65rem; border: 1px dashed var(--gilt); background: rgba(214, 180, 106, .08); }
.mcount { font-family: var(--font-num); font-weight: 700; color: var(--primary); }
.mslots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
.mslots .ms { height: 1.6rem; display: flex; align-items: center; justify-content: center; font-size: .72rem; border: 1px solid var(--line-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 .2rem; color: var(--ink-3); }
.mslots .ms.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* ── 생활: 생활 레벨 · 생활 던전 · 생활 도구 ── */
.lifelv { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem 1.1rem; padding: .65rem .85rem; margin: -.2rem 0 .9rem; border: 1px solid var(--line); background: var(--surface-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gilt) 18%, transparent); }
.lifelv .ll-main { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.lifelv .ll-m { flex: 1; min-width: 0; display: grid; gap: .28rem; }
.lifelv .ll-h { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; min-width: 0; }
.lifelv .ll-h b { font-size: .98rem; white-space: nowrap; }
.lifelv .ll-h span { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lifelv .bar { height: 9px; }
.lifelv .ll-side { display: flex; align-items: center; gap: .9rem; padding-left: 1rem; border-left: 1px solid var(--line); }
.lifelv .ll-st { display: grid; justify-items: center; gap: .05rem; white-space: nowrap; }
.lifelv .ll-st .faint { font-size: .74rem; }
.lifelv .ll-st b.num { font-size: 1.1rem; line-height: 1.1; }
.lifelv .ll-more { white-space: nowrap; }
.lifelv .ll-all { grid-column: 1 / -1; display: grid; gap: .4rem; padding-top: .55rem; border-top: 1px dashed var(--line); }
.lifelv .ll-sec { font-size: .76rem; color: var(--ink-3); letter-spacing: .08em; }
/* LV 배지: 위 띠의 레벨 방패(.lvbox .lv)와 같은 가죽 · 금박 · Cinzel */
.lvbadge { display: inline-grid; justify-items: center; align-content: center; flex: none; min-width: 2.7rem; padding: .22rem .4rem .5rem; color: var(--gilt-2); background: linear-gradient(180deg, #3a2a1e, #24190f); border: 1px solid rgba(214, 180, 106, .6); clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%); font-family: var(--font-num); line-height: 1; text-align: center; }
.lvbadge small { font-size: .56rem; letter-spacing: .14em; padding-left: .14em; color: color-mix(in srgb, var(--gilt-2) 70%, #fff0); }
.lvbadge b { font-size: 1.12rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: .08rem; }
.lvbadge.big { min-width: 3.6rem; padding: .32rem .5rem .7rem; }
.lvbadge.big small { font-size: .62rem; }
.lvbadge.big b { font-size: 1.6rem; }
.lvbadge.sm { min-width: 2.3rem; padding: .16rem .32rem .4rem; }
.lvbadge.sm b { font-size: .92rem; }
.lvbadge.xs { display: inline-flex; align-items: baseline; gap: .18rem; min-width: 0; padding: .14rem .38rem; clip-path: none; border-radius: 1px; }
.lvbadge.xs small { font-size: .52rem; letter-spacing: .06em; padding: 0; }
.lvbadge.xs b { font-size: .8rem; margin: 0; }
.lskill.max .lvbadge, .lvbadge.max { box-shadow: inset 0 0 0 1px var(--gilt-2); }
/* 계열 하나 */
.lskills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 1180px) { .lskills { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lskill { display: grid; gap: .3rem; align-content: start; padding: .5rem .6rem .55rem; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.lskill.spec { border-color: var(--gilt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gilt) 35%, transparent); background: color-mix(in srgb, var(--gilt-2) 9%, var(--surface)); }
.lsk-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .45rem; }
.lsk-ic { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface-3); }
.lsk-nm { display: grid; gap: .05rem; min-width: 0; line-height: 1.2; }
.lsk-nm b { font-size: .9rem; }
.lsk-nm b, .lsk-nm span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsk-nm span { font-size: .7rem; }
.lskill .bar { height: 8px; }
.lsk-num { display: flex; justify-content: space-between; align-items: center; gap: .4rem; height: .95rem; font-size: .72rem; font-variant-numeric: tabular-nums; line-height: 1; }
.lsk-num .gold { font-family: var(--font-num); letter-spacing: .08em; font-weight: 700; }
.lsk-next { font-size: .72rem; color: var(--ink-2); padding-top: .25rem; border-top: 1px dotted var(--line); }
.lsk-act { display: flex; justify-content: center; padding-top: .15rem; }
.lsk-act button, .lsk-act .tag { white-space: nowrap; }
.lsk-act button { width: 100%; }
.lsk-act .tag { min-height: 32px; width: 100%; display: inline-flex; align-items: center; justify-content: center; }
.lsk-sel { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: .8rem; align-items: center; margin-bottom: .7rem; }
.lsk-sel p { margin: 0; }
.lsk-chip { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; color: var(--ink-3); }
.lsk-chip.spec { color: var(--gilt); font-weight: 600; }
.ltypes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.ltype { display: grid; justify-items: center; align-content: center; gap: .15rem; padding: .5rem .3rem; min-height: 5.2rem; }
.ltype .ic { margin: 0 auto; }
/* 그림이 있는 칸을 고르면: 어둡게 채우지 않고 소혈색 테로 (그림이 바탕에 묻히지 않게) — .zplate · .cpk · .wd-it 과 같은 방식 */
.ltype[aria-pressed="true"], .ltype[aria-pressed="true"]:hover:not(:disabled), .vy-cm.on, .vy-cm.on:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); color: var(--ink); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.ltype b { font-size: .86rem; white-space: nowrap; }
.ltype .num { font-size: .78rem; }
.ldareas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.ldarea { display: grid; gap: .3rem; padding: .45rem; border: 1px solid var(--line); background: var(--surface); cursor: pointer; min-width: 0; }
.ldarea .faint { font-size: .8rem; line-height: 1.45; }
.ldarea.sel { border-color: var(--gilt); box-shadow: 0 0 0 2px var(--primary-soft) inset; background: var(--surface-2); }
.ldarea.locked { cursor: not-allowed; opacity: .55; }
.stars { color: var(--gilt); letter-spacing: .05em; font-size: .95rem; }
.stars-pick button { min-width: 2.6rem; }
.found { gap: .35rem .9rem; font-size: .9rem; }
.found .rare { color: var(--primary); font-weight: 600; }
.toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.toolcard { display: grid; gap: .55rem; }
.toolic { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--line); background: var(--surface-3); flex: none; }
.toolcard.g3 .toolic, .toolcard.g4 .toolic { border-color: var(--line-2); box-shadow: 0 0 0 2px var(--primary-soft) inset; }
.toolcard.g5 .toolic { border-color: var(--gilt); box-shadow: 0 0 10px rgba(214, 170, 80, .45); }
@media (max-width: 640px) {
  .ltypes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lifelv { grid-template-columns: 1fr; padding: .6rem .65rem; }
  .lifelv .ll-side { padding: .45rem 0 0; border-left: 0; border-top: 1px solid var(--line); justify-content: space-between; gap: .5rem; }
  .lifelv .ll-st { display: flex; align-items: baseline; gap: .35rem; }
  .lskills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .lskill { padding: .45rem .45rem .5rem; }
  .lsk-ic { width: 28px; height: 28px; }
  .lsk-ic .ic { transform: scale(.85); }
  .lsk-top { gap: .35rem; }
  .lsk-nm b { font-size: .84rem; }
  .lskill .lvbadge { min-width: 2.3rem; padding: .16rem .3rem .42rem; }
  .lskill .lvbadge b { font-size: .95rem; }
  .lskill .lsk-next { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; min-height: calc(2 * 1.35em + .25rem); line-height: 1.35; }
  .lsk-sel { grid-template-columns: 1fr; gap: .4rem; }
}

/* ── 1:1 거래 ── */
.modal.trade { width: min(var(--modal-l), 100%); }
.tr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: .6rem 0; }
.tr-col { display: grid; gap: .5rem; align-content: start; padding: .6rem; border: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.tr-offer { display: grid; gap: .25rem; min-height: 3rem; }
.tr-offer .li { display: flex; align-items: center; gap: .45rem; padding: .2rem 0; border-bottom: 1px dashed var(--line); }
.tr-col select { min-width: 0; flex: 1; }
@media (max-width: 560px) { .tr-cols { grid-template-columns: 1fr; } }

/* ── 예배당 ── */
.wishes { display: grid; gap: .45rem; max-height: 360px; overflow-y: auto; padding-right: .2rem; }
.wish { padding: .5rem .65rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: 1px 2px 0 rgba(58, 40, 22, .12); }
.wish p { margin: 0 0 .3rem; font-family: var(--font-body); line-height: 1.6; }
.wish.mine { border-color: var(--line-2); background: var(--surface-2); }
.wish-like { display: inline-flex; align-items: center; gap: .3rem; } .wish-like.sel, .wish-like.sel:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--rose) 10%, var(--surface)); box-shadow: none; } .wish-like .si { width: 15px; height: 15px; color: var(--rose); } .wish-like.sel .si { fill: color-mix(in srgb, var(--rose) 70%, transparent); }

/* ── 홈: 지금 할 일 · 마을 사람 창 ── */
.tasks .task { align-items: center; }
.tasks .task.ready b { color: var(--primary); }
.tasks .task .st { font-size: .78rem; }
.modal.hostm { width: min(var(--modal-l), 100%); }
.taskgoal { padding: .45rem .6rem; border: 1px dashed var(--line-2); background: var(--surface-2); }
.chainrow { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px dotted var(--line); }
.chainrow.locked { opacity: .5; }
.shipline { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .3rem; }
.shipst { display: grid; justify-items: center; gap: .2rem; padding: .4rem .2rem; border: 1px solid var(--line); background: var(--surface-2); font-size: .8rem; text-align: center; }
.shipst .n { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); font-size: .75rem; }
.shipst.done { background: var(--primary-soft); }
.shipst.done .n { background: var(--gilt); color: var(--on-primary); border-color: var(--gilt); }
.shipst.gather, .shipst.building { border-color: var(--gilt); box-shadow: 0 0 0 1px var(--gilt) inset; }
.shipst.locked { opacity: .5; }
@media (max-width: 640px) { .shipline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── 보스 릴레이 ── */
.rtag { min-width: 2.6rem; }
.rtag.tank { background: var(--st-blue); } .rtag.heal { background: var(--st-green); } .rtag.dps { background: var(--st-red); }
.relayq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.relayq .rq { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem; border: 1px solid var(--line); background: var(--surface-2); }
.rboss { display: flex; align-items: center; gap: .9rem; }
.rboss .bic { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid var(--line-2); background: radial-gradient(circle at 50% 60%, rgba(160, 60, 50, .25), transparent 70%), var(--surface-3); flex: none; }
.hpbar.big { height: 12px; margin: .3rem 0; background: var(--track); border: 1px solid var(--line-2); overflow: hidden; }
.hpbar.big > i { display: block; height: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--hp) 70%, #fff), var(--hp)); transition: width .8s ease; }
.relayvote { border-color: var(--gilt); margin-top: .8rem; display: grid; gap: .5rem; }
.rmem { display: grid; grid-template-columns: auto minmax(0, 8rem) minmax(0, 1fr) auto; align-items: center; gap: .5rem; font-size: .86rem; }
.rmem.me .nm { font-weight: 700; color: var(--primary); }
.rmem .bar { height: 6px; overflow: hidden; } .rmem .bar > i { display: block; height: 100%; background: var(--gilt); }
@media (max-width: 760px) {  .rmem { grid-template-columns: auto minmax(0, 6rem) minmax(0, 1fr) auto; } }

.chatwin .cmsg.note { color: var(--ink-2); font-size: .86em; border-left: 2px solid var(--line-2); padding-left: .45rem; }
.chatwin .cmsg.note.notice { border-left-color: var(--gilt); color: var(--ink); }
/* 좁은 화면: 아래 메뉴 열한 칸이 한 줄에 다 들어가게 */
@media (max-width: 860px) { .side { overflow-x: auto; scrollbar-width: none; } .side::-webkit-scrollbar { display: none; } }
@media (max-width: 640px) {
  .side .nav { flex: 1 1 0; min-width: 0; min-height: 44px; padding: .18rem 0; gap: .05rem; font-size: .58rem; letter-spacing: -.03em; white-space: nowrap; }
  .side .nav svg { width: 20px; height: 20px; }
}

/* 페이지 탭 줄: 한 줄 + ‹ › */
.stwrap { position: relative; display: flex; align-items: stretch; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto var(--tabs-mb); min-width: 0; }
.stwrap > .subtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; min-width: 0; justify-content: flex-start; }
.stwrap > .subtabs::-webkit-scrollbar { display: none; }
.stwrap > .subtabs button { white-space: nowrap; }
/* 넘김 화살표: 탭 줄 높이 안, 양 끝에 겹쳐 세로 가운데 (넘친 쪽에만) */
.tabarrow.st { position: absolute; top: 0; bottom: 1px; z-index: 2; width: 30px; min-height: 0 !important; margin: 0; padding: 0 !important; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; border: 0; border-radius: 0; color: var(--ink-2); box-shadow: none; }
.tabarrow.st:first-child { left: 0; justify-content: flex-start; padding-left: 4px !important; background: linear-gradient(90deg, var(--surface-2) 55%, color-mix(in srgb, var(--surface-2) 0%, transparent)); border-radius: var(--r) 0 0 var(--r); }
.tabarrow.st:last-child { right: 0; justify-content: flex-end; padding-right: 4px !important; background: linear-gradient(270deg, var(--surface-2) 55%, color-mix(in srgb, var(--surface-2) 0%, transparent)); border-radius: 0 var(--r) var(--r) 0; }
.tabarrow.st:hover:not(:disabled) { color: var(--ink); }
.tabarrow.st[hidden] { display: none !important; }
.tabarrow.st > .si { width: 16px; height: 16px; stroke-width: 2.2; vertical-align: 0; } .tabarrow.st::after { content: ''; position: absolute; inset: 0 -6px; } /* 누르는 자리 40px 이상 */

/* RP 행동 묘사 (**…**) */
.cmsg .act { color: var(--dusk); font-style: italic; }
.cmsg .act::before, .cmsg .act::after { content: ''; }
/* 메뉴 한가운데의 홈 */
.side .nav.center { color: var(--leather-ink); }
.side .nav.center svg { width: 22px; height: 22px; }
@media (min-width: 861px) { .side .nav.center { margin: .35rem 0; border-top: 1px solid rgba(214, 180, 106, .25); border-bottom: 1px solid rgba(214, 180, 106, .25); } }
@media (max-width: 860px) { .side .nav.center { transform: translateY(-6px); background: radial-gradient(circle at 50% 40%, rgba(214, 180, 106, .28), transparent 70%); border-radius: 50%; } }

/* ── 휴대폰 정렬 (≤640px) ── */
@media (max-width: 640px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .5rem; padding: .4rem 10px .45rem; }
  .topbar .who { grid-column: 1; grid-row: 1; }
  .topbar .tools { grid-column: 2; grid-row: 1; margin: 0; gap: .15rem; }
  .topbar .tools .chip { padding: .15rem .35rem; font-size: 0; gap: 0; } /* 날씨는 아이콘만 */
  .topbar .tools .chip .ic { margin: 0; }
  .topbar .tools button.icon { width: 30px; height: 30px; min-height: 0; padding: 0; }
  .topbar .lvbox { grid-column: 1 / -1; grid-row: 2; gap: .45rem; }
  .topbar .lvbox .lv { font-size: .82rem; padding: .22rem .5rem .32rem; }
  .topbar .wallet { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: .3rem; font-size: .76rem; overflow-x: auto; scrollbar-width: none; }
  .topbar .wallet::-webkit-scrollbar { display: none; }
  .topbar .wallet .cur { flex: none; white-space: nowrap; }
  .who .avatar { width: 34px; height: 34px; }
  .who .nm { font-size: .92rem; }
  .who .faint { font-size: .72rem; }
  :root { --head-h: 36px; --head-fs: 1rem; --head-mb: .4rem; --orn-h: 8px; --tabs-mb: .45rem; }
  .page-head h2 { min-width: 150px; padding: 0 1.6rem; background-size: 220px var(--head-h), auto, auto, auto; }
  /* 홈: 머리 띠와 길잡이를 한 줄씩, 넘치면 옆으로 */
  .hbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .5rem; }
  .hbar::-webkit-scrollbar, .guide::-webkit-scrollbar { display: none; }
  .hbar > * { flex: none; }
  .hbar .greet { font-size: 1.05rem; }
  .guide { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .guide > * { flex: none; white-space: nowrap; }
  /* 지도 핀: 한 줄 · 작게 */
  .pin { height: 22px; padding: 0 6px 0 3px !important; border-radius: 11px !important; gap: 2px; }
  .pin.compact { width: 24px; padding: 0 !important; }
  .pin .mk { width: 16px; height: 16px; }
  .subtabs button { padding: .3rem .7rem; font-size: .9rem; }
  .plate h3 { font-size: 1.05rem; }
}
@media (max-width: 640px) {
  .topbar .tools .chip > *:not(.ic) { display: none !important; } .topbar .tools .chip { width: 30px; height: 30px; justify-content: center; }
}

/* ── 추천 던전 (맨 위) ── */
.recz { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1rem; align-items: center; border-color: var(--gilt) !important; margin-bottom: .8rem; animation: recin .5s ease-out; }
.recz .rn { font-family: var(--font-head); font-size: 1.2rem; font-weight: 400; color: var(--primary); }
.recz .rectag { position: absolute; top: 6px; left: 6px; color: #3a2a18; background: linear-gradient(#f1d98a, #d6b46a); box-shadow: 0 0 0 1px #8a6a2a, 0 2px 3px rgba(0, 0, 0, .35); }
@keyframes recin { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .recz { animation: none; } }
@media (max-width: 640px) { .recz { grid-template-columns: 1fr; } }

/* ── 편지 ── */
.modal.lettermodal { width: min(var(--modal-l), 100%); background: #f4ead2 url(/assets/ui/paper.svg); }
.letter { display: grid; gap: .9rem; padding: .4rem .6rem; }
.letter .lhead { display: flex; align-items: center; gap: .8rem; border-bottom: 1px solid var(--line); padding-bottom: .7rem; }
.letter .lhead h3 { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: 1.35rem; color: var(--ink); }
.letter .lkind { font-size: .78rem; letter-spacing: .12em; color: var(--ink-3); }
.letter.love .lkind { color: var(--primary); }
.letter .lbody { display: grid; gap: .85rem; max-height: 58vh; overflow-y: auto; padding-right: .4rem; }
.letter .lbody p { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.95; text-indent: 1em; color: var(--ink); }
.letter .lsign { margin: 0; text-align: right; font-family: var(--font-head); font-size: 1.05rem; color: var(--ink-2); }
.letter .lps { margin: .9rem 0 0; padding: .55rem .75rem; font-size: .84rem; line-height: 1.7; color: var(--ink-3); border-top: 1px dashed currentColor; background: color-mix(in srgb, currentColor 6%, transparent); border-radius: 0 0 4px 4px; }
.letter .lps p { margin: .15rem 0; }
.letter .lps .lps-k { font-weight: 700; margin-right: .2rem; letter-spacing: .04em; }
:root[data-tone="dark"] .modal.lettermodal { background: var(--surface) var(--paper); }
.mailgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
.mailcard { position: relative; display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; text-align: left; background: var(--surface); border: 1px solid var(--line); min-height: 0; }
.mailcard.love { border-left: 3px solid var(--primary); }
.mailcard.friend { border-left: 3px solid var(--gilt); }
.mailcard.unread b { color: var(--primary); }
.seal { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c45a4a, #7d2f2a); box-shadow: 0 0 0 2px rgba(125, 47, 42, .25); flex: none; }
.mailcard .seal { position: absolute; top: .5rem; right: .5rem; }

/* ── 명함 (큰 명함 · 꾸미기) ── */
.bigcard { display: grid; gap: .45rem; padding: .55rem; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--surface) 55%, transparent); min-width: 0; }
.bigcard .ncard { margin: 0; }
.bc-motto { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.bc-motto q { font-family: var(--font-head); font-size: .98rem; color: var(--ink); quotes: '“' '”'; min-width: 0; overflow-wrap: anywhere; }
.pstyles { display: inline-flex; gap: .25rem; flex: 0 0 auto; }
.pst { font-size: .68rem; padding: 0 .4rem; border: 1px solid var(--gilt); border-radius: var(--r-s); color: var(--ink-2); line-height: 1.5; }
.bc-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .3rem; }
.pin-rel { display: flex; align-items: center; gap: .35rem; min-width: 0; padding: .2rem .3rem; border-radius: var(--r-s); background: color-mix(in srgb, var(--surface) 45%, transparent); }
.pin-rel .pr-t { display: grid; min-width: 0; line-height: 1.2; }
.pin-rel .pr-t b { font-size: .8rem; }
.pin-rel .pr-t span { font-size: .68rem; color: var(--rose); }
.bc-bio { margin: 0; font-size: .74rem; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.bc-credit { margin: -.3rem 0 0; padding: 0 .55rem; font-size: .68rem; line-height: 1.4; color: var(--ink-3); opacity: .9; overflow-wrap: anywhere; } /* 올린 그림의 출처 (public/js/ui.js bigCard) */
.cardedit { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.cf { gap: .7rem; min-width: 0; }
.pinedit { display: grid; gap: .3rem; }
.pinrow { display: grid; grid-template-columns: minmax(3rem, 6rem) minmax(0, 1fr) auto; gap: .4rem; align-items: center; }
.tokbox { width: 64px; height: 64px; display: inline-grid; place-items: center; border: 1px dashed var(--gilt); border-radius: var(--r-s); background: repeating-conic-gradient(rgba(0,0,0,.06) 0 25%, transparent 0 50%) 0 0/12px 12px; }
.tokbox img { image-rendering: pixelated; }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .3rem; }
.pickp { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .4rem; text-align: left; align-items: center; }
.pickp small { color: var(--ink-3); font-size: .7rem; }
.relgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .3rem; }
.relopt { display: grid; text-align: left; gap: .1rem; padding: .35rem .5rem; }
.relopt small { font-size: .68rem; color: inherit; opacity: .75; line-height: 1.35; }
.relbtn { min-width: 4.5rem; }
.spot-token { position: absolute; transform: translate(-50%, -100%); image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.roomview .ic.roompet { position: absolute; margin: 0; pointer-events: none; transform-origin: 50% 50%; }
@media (max-width: 640px) { .cardedit { grid-template-columns: minmax(0, 1fr); } }

/* ── 세력 겨루기 ── */
.femblem { image-rendering: pixelated; vertical-align: middle; }
.fbars { display: grid; gap: .35rem; margin-top: .5rem; }
.fbar { display: grid; grid-template-columns: 28px minmax(4.5rem, 7rem) minmax(0, 1fr) 3.5rem 2.4rem; gap: .5rem; align-items: center; padding: .15rem .3rem; border-radius: var(--r-s); }
.fbar.mine { background: color-mix(in srgb, var(--gilt-2) 14%, transparent); outline: 1px solid var(--gilt); }
.fb-track { height: 8px; border-radius: 1px; background: var(--track); border: 1px solid var(--line-2); overflow: hidden; }
.fb-track i { display: block; height: 100%; }
.ftitles { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.ftitle { font-size: var(--t-micro); padding: .05rem .5rem; border: 1px dashed var(--ink-3); border-radius: var(--r-s); color: var(--ink-3); }
.ftitle.have { border-style: solid; border-color: var(--gilt); color: var(--ink); background: color-mix(in srgb, var(--gilt-2) 22%, transparent); }
.ftop ol { margin: .3rem 0 0; padding-left: 1.4rem; font-size: .85rem; }
@media (max-width: 640px) { .fbar { grid-template-columns: 24px minmax(0, 1fr) 3rem 2rem; } .fbar .fb-track { grid-column: 1 / -1; order: 9; } }

/* ── 출석부 · 우편함 · 랭킹 (attend.js · sysmail.js · pages/ranking.js) ── */
.seal.gilt { background: radial-gradient(circle at 35% 35%, var(--gilt-2), var(--butter)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gilt) 30%, transparent); }
.modal.attendmodal { width: min(var(--modal-xl), 100%); }
.attend { display: grid; gap: .7rem; }
.attend .ahead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.attend .acount { display: flex; align-items: baseline; gap: .35rem; font-family: var(--font-head); color: var(--ink-2); }
.attend .acount b { font-family: var(--font-num); font-size: 2.1rem; line-height: 1; color: var(--butter); font-weight: 700; }
.attend .astreak { font-size: .88rem; color: var(--ink-2); }
.attend .astreak .num { font-family: var(--font-num); font-weight: 700; color: var(--primary); margin-right: .15rem; }
.attend .agrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 1.1rem; align-items: start; }
.attend .amnav { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: .45rem; font-family: var(--font-head); }
.attend .amnav b { font-weight: 400; font-size: 1.02rem; min-width: 7.5rem; text-align: center; }
.attend .amnav button { min-height: 1.7rem; padding: 0 .55rem; font-size: 1rem; }
.acal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.acal .aw { text-align: center; font-size: .72rem; color: var(--ink-3); padding-bottom: .15rem; }
.acal .aw.sun, .acal .ad.sun .dn { color: var(--rose); }
.acal .ad { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: var(--r-s); min-width: 0; }
.acal .ad.pad { background: transparent; border-color: transparent; }
.acal .ad .dn { position: absolute; top: 2px; left: 4px; font-size: .68rem; color: var(--ink-3); }
.acal .ad.later { opacity: .55; }
.acal .ad.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.acal .ad.on { background: color-mix(in srgb, var(--butter-soft) 70%, var(--surface)); }
.acal .stamp { width: 62%; aspect-ratio: 1; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--primary) 70%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--primary) 18%, transparent) 40%, transparent 41%); transform: rotate(-12deg); }
.atrack { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.acell { position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; padding: .3rem 0 .25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); min-width: 0; }
.acell .ak { position: absolute; top: 1px; left: 4px; font-size: .62rem; color: var(--ink-3); }
.acell .av { font-size: .68rem; color: var(--ink-2); line-height: 1.1; min-height: .8rem; white-space: nowrap; }
.acell.week { border-color: var(--gilt); background: color-mix(in srgb, var(--butter-soft) 45%, var(--surface)); }
.acell.last { border: 1px solid var(--gilt); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gilt-2) 45%, transparent); }
.acell.got { opacity: .45; filter: saturate(.5); }
.acell.got::after { content: ''; position: absolute; inset: 18% 22%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--primary) 65%, transparent); transform: rotate(-12deg); }
.acell.next { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 2px 8px color-mix(in srgb, var(--primary) 25%, transparent); }
@media (max-width: 760px) { .attend .agrid { grid-template-columns: minmax(0, 1fr); } .attend .acount b { font-size: 1.7rem; } }

.modal.sysmailmodal { width: min(var(--modal), 100%); }
.sysletter { display: grid; gap: .8rem; }
.sysletter header { border-bottom: 1px solid var(--line); padding-bottom: .55rem; }
.sysletter header .lkind { font-size: .76rem; letter-spacing: .12em; color: var(--ink-3); }
.sysletter header h3 { margin: .1rem 0; font-family: var(--font-head); font-weight: 400; font-size: 1.3rem; }
.sysletter .sbody { margin: 0; line-height: 1.9; text-indent: 1em; white-space: pre-line; }
.sysletter .sgift { padding: .55rem .6rem; border: 1px dashed var(--gilt); background: color-mix(in srgb, var(--butter-soft) 40%, transparent); }
.sysletter .sgift.done { opacity: .55; }
.gchips { display: flex; flex-wrap: wrap; gap: .35rem .7rem; }
.gchip { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; }
.gchip.ttl { color: var(--butter); font-family: var(--font-head); }

.rcls-pick { gap: .3rem; margin: -.4rem 0 .8rem; }
.rboard { max-width: 760px; margin: 0 auto; display: grid; gap: .6rem; }
.rlast { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .3rem .9rem; font-size: .85rem; padding: .35rem .5rem; border-block: 1px dotted var(--line-2); }
.rlast .rl { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.rlast .rn { font-family: var(--font-num); color: var(--butter); font-weight: 700; }
.rlist { display: grid; background: var(--surface); border: 1px solid var(--line); }
.rlist.mine { border-color: var(--primary); }
.rrow { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .42rem .7rem; border-bottom: 1px dotted var(--line-2); min-width: 0; }
.rrow:last-child { border-bottom: 0; }
.rrow .rn { font-family: var(--font-num); font-size: .95rem; text-align: center; color: var(--ink-3); }
.rrow.top .rn { font-weight: 700; font-size: 1.1rem; color: var(--butter); }
.rrow.t1 .rn { color: var(--gilt); }
.rrow.me { background: color-mix(in srgb, var(--primary-soft) 70%, transparent); box-shadow: inset 3px 0 0 var(--primary); }
.rrow .rwho { display: flex; align-items: center; gap: .5rem; min-width: 0; overflow: hidden; }
.rrow .rwho .nametag { flex: none; max-width: 60%; overflow: hidden; }
.rrow .rcls { font-size: .78rem; min-width: 0; }
.rrow .rv { display: inline-flex; align-items: baseline; gap: .45rem; white-space: nowrap; }
.rrow .rv b { font-family: var(--font-num); }
.fdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
@media (max-width: 640px) { .rrow { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .4rem; padding: .4rem .45rem; } .rrow .rcls { display: none; } .rrow .rwho .nametag { max-width: 100%; } }

/* ── 함께 걷기 (spot_walk.js) ── */
.roomview .bubble.compsay { background: #efe6f6; border-color: #6a5290; color: #2a2038; white-space: normal; width: max-content; max-width: min(220px, 60vw); line-height: 1.35; text-align: center; z-index: 1; }
.roomview .bubble.compsay b { font-weight: 700; color: #5a4280; font-size: .7rem; }
.roomview .bubble.compsay::after { background: #efe6f6; border-color: #6a5290; }
.spotlog p.compline { font-style: italic; }

/* ── 캐릭터 만들기: 사진 · 토큰 ── */
.cr-faces { display: flex; gap: 1.6rem; justify-content: center; align-items: flex-end; flex-wrap: wrap; margin: .6rem 0; }
.cr-faces .col { gap: .5rem; align-items: center; }
.cr-photo { width: 128px; height: 128px; border-radius: var(--r-l); border: 1px solid var(--line-2); box-shadow: inset 0 0 0 2px var(--surface); overflow: hidden; display: grid; place-items: center; }
.cr-photo img { width: 100%; height: 100%; object-fit: cover; }
.cr-token { width: 72px; height: 72px; display: grid; place-items: center; border: 1px dashed var(--gilt); border-radius: var(--r-s); background: repeating-conic-gradient(rgba(0,0,0,.06) 0 25%, transparent 0 50%) 0 0/12px 12px; }
.cr-token img, .cr-token canvas { image-rendering: pixelated; }
.demoroom { position: relative; width: min(100%, 380px); margin: .4rem auto 0; border: 6px solid #3a2a1c; border-radius: var(--r-s); box-shadow: 0 0 0 1px var(--gilt), 0 4px 12px rgba(0,0,0,.25); background: #1e1712; }
.demoroom canvas { display: block; width: 100%; image-rendering: pixelated; cursor: pointer; }
.demoroom .dr-layer { position: absolute; inset: 0; pointer-events: none; }
.bc-lore summary { cursor: pointer; font-size: .78rem; color: var(--ink-2); }
.bc-lore dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem .6rem; margin: .4rem 0 0; font-size: .76rem; }
.bc-lore dt { color: var(--ink-3); }
.bc-lore dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }

/* ── 계절 행사 「등불 없는 밤」 · 등불 기부 · 사치품 장식 (public/js/fest.js · econ.js) ── */
.fc-lamp { position: relative; flex: none; width: 14px; height: 19px; border-radius: 3px 3px 5px 5px; background: radial-gradient(circle at 50% 62%, #ffe3a0 0 22%, #e09a3a 48%, #6a3a1a 100%); box-shadow: 0 0 10px rgba(240, 180, 90, .55), inset 0 0 0 1px rgba(40, 20, 8, .5); animation: festflick 3.2s ease-in-out infinite; }
.fc-lamp::before { content: ''; position: absolute; left: 3px; right: 3px; top: -4px; height: 4px; border: 1px solid #5a3a22; border-bottom: 0; border-radius: 4px 4px 0 0; }
.fc-lamp.big { width: 22px; height: 30px; }
@keyframes festflick { 0%, 100% { filter: brightness(1); } 40% { filter: brightness(.86); } 55% { filter: brightness(1.08); } }
.festcard { background: color-mix(in srgb, var(--surface) 82%, #3a2f5a) var(--paper); }
.festcard.mist { box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, #7a6aa8 60%, transparent), inset 0 0 26px rgba(122, 106, 168, .22); }
.festcard .fc-top { display: flex; align-items: center; gap: .55rem; }
.festcard .fc-name { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.festcard .fc-line { margin: .35rem 0 .35rem; font-size: .84rem; font-style: italic; line-height: 1.55; color: var(--ink-2); }
.cur.taffy .num { color: var(--peach); }
.lampbar { height: 6px; margin: .35rem 0 .3rem; }
.lampbar i { background: linear-gradient(90deg, #a8582c, #e0b45a) !important; }
.lampbar.big { height: 9px; }
.lampcard.lit { box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--gilt-2) 70%, transparent), 0 0 14px rgba(214, 180, 106, .35); }
.townwrap.fest-night::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(255, 210, 130, .16), transparent 32%), radial-gradient(ellipse at center, transparent 55%, rgba(30, 20, 50, .28) 100%); mix-blend-mode: multiply; }
.festpin { position: absolute; z-index: 3; width: 30px; height: 30px; min-height: 0; padding: 0; margin: -38px 0 0 14px; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(200, 180, 255, .55), rgba(122, 106, 168, 0) 70%); box-shadow: none; cursor: pointer; animation: festfloat 4s ease-in-out infinite; }
.festpin i { position: absolute; left: 10px; top: 6px; width: 10px; height: 15px; border: 1px solid #3a2f5a; border-radius: 2px 2px 4px 4px; background: radial-gradient(circle at 50% 60%, #fff4d0 0 25%, #d9c4ff 60%, #6a5a9a 100%); box-shadow: 0 0 8px rgba(220, 200, 255, .9); }
.festpin:hover:not(:disabled) { background: radial-gradient(circle, rgba(220, 200, 255, .75), rgba(122, 106, 168, 0) 72%); }
@keyframes festfloat { 50% { transform: translateY(-3px); opacity: .8; } }
.modal.festmodal { width: min(var(--modal-l), 100%); }
.fest-head { display: flex; align-items: center; gap: .7rem; }
.fest-head h3 { margin: 0; }
.fest-dots { display: flex; gap: .4rem; justify-content: center; margin: .2rem 0 .7rem; }
.fest-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface-2); }
.fest-dots i.on { background: var(--gilt); border-color: var(--gilt); }
.fest-dots i.now { background: #9a88c4; border-color: #7a6aa8; box-shadow: 0 0 6px rgba(154, 136, 196, .7); }
.fest-shade { display: flex; flex-direction: column; gap: .45rem; }
.fest-shade.mist { background: color-mix(in srgb, var(--surface-2) 86%, #7a6aa8); }
.fest-shade .fs-name { font-family: var(--font-head); font-size: 1.05rem; }
.fest-shade p { margin: 0; }
.fest-shade .fs-hint, .fest-shade .fs-found { font-size: .95rem; line-height: 1.85; }
.fest-shade .fs-goal { padding: .45rem .55rem; border: 1px dashed var(--line-2); border-radius: var(--r-s); font-size: .88rem; }
.fest-sub { margin: .9rem 0 .2rem; font-family: var(--font-head); color: var(--ink-2); font-size: var(--t-sub); }
.fest-foot { margin: .6rem 0 0; font-size: .8rem; }
.fest-scene p { line-height: 1.95; }
.fest-shop .fs-item { gap: .3rem; min-width: 0; }
.fest-shop .fs-pic { min-height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fest-shop .fs-prev { transform: scale(.78); transform-origin: center; width: 128%; flex: none; }
.fest-shop .fs-title { font-family: var(--font-head); color: var(--ink-2); text-align: center; font-size: .95rem; }
.fest-about p { margin: 0 0 .6rem; }
.rename-box { margin-bottom: .6rem; }
/* 행사 장식 */
.ncard.fr-unlit { border-color: #3a3458; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #7a6aa8, 0 0 12px rgba(122, 106, 168, .3); }
.ncard.bg-onelamp { background-color: #dcd8e6; background-image: radial-gradient(circle at 86% 22%, rgba(240, 190, 90, .55) 0 3px, rgba(240, 190, 90, .14) 14px, transparent 34px), var(--paper); }
.nfx-shade { text-shadow: 3px 2px 0 rgba(122, 106, 168, .35), 6px 4px 2px rgba(122, 106, 168, .15); animation: festshade 5s ease-in-out infinite; }
@keyframes festshade { 50% { text-shadow: 1px 1px 0 rgba(122, 106, 168, .3), 2px 2px 1px rgba(122, 106, 168, .1); } }
/* 사치품 장식 */
.ncard.fr-belfry { border-color: #4f7a6a; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #8ab0a0, 0 0 10px rgba(110, 150, 130, .3); }
.ncard.fr-moonsilver { border-color: #8a90a8; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px #d6dae6, inset 0 0 0 4px #8a90a8, 0 0 16px rgba(200, 206, 226, .5); }
.ncard.bg-lampstreet { background-color: #f1dfc0; background-image: linear-gradient(180deg, rgba(200, 120, 40, .12), transparent 60%), var(--paper); }
.ncard.bg-belltop { background-color: #f4e2b8; background-image: radial-gradient(ellipse at 50% 0%, rgba(240, 200, 110, .5), transparent 60%), var(--paper); }
:root[data-tone="dark"] .ncard.bg-onelamp, :root[data-tone="dark"] .ncard.bg-lampstreet, :root[data-tone="dark"] .ncard.bg-belltop { background-color: var(--surface-2); }
.nfx-candle { color: #8a5a14 !important; text-shadow: 0 3px 4px rgba(120, 70, 20, .35); animation: festcandle 3.6s ease-in-out infinite; }
:root[data-tone="dark"] .nfx-candle { color: #e6c27a !important; }
@keyframes festcandle { 30% { text-shadow: 1px 4px 5px rgba(120, 70, 20, .3); } 60% { text-shadow: -1px 3px 4px rgba(120, 70, 20, .38); } }
@media (prefers-reduced-motion: reduce) { .fc-lamp, .festpin, .nfx-shade, .nfx-candle { animation: none; } }
.market-fee { margin: 0 0 .35rem; font-size: .8rem; text-align: right; }
.fest-body, .festcard, .lampcard { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 520px) { .fest-head { flex-wrap: wrap; } .fest-head > .col { align-items: flex-start !important; flex-basis: 100%; flex-direction: row !important; gap: .6rem !important; } }
.fest-recall { font-size: .92rem; }
.fest-recall p { margin: 0 0 .3rem; }
/* ── 계절 행사 · 등불 기부 끝 ── */

/* ── 2막 · 항해: 생활 › 배 › 「해도 · 항해」 (public/js/voyage.js) ── */
.vy-switch { margin: -.3rem auto .9rem; }
.vy-lock { font-family: var(--font-body); font-size: .66rem; line-height: 1.4; padding: 0 .35rem; margin-left: .35rem; border: 1px solid currentColor; border-radius: var(--r-s); opacity: .75; }
.vy { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); grid-template-areas: 'chart side' 'sec side'; grid-template-rows: auto 1fr; gap: 1rem; align-items: start; }
.vy > .vy-chart { grid-area: chart; } .vy > .vy-side { grid-area: side; } .vy > .vy-sections { grid-area: sec; margin-top: 0; }
.vy-chart { position: relative; aspect-ratio: 16 / 10; border: 6px solid #3a2a1c; outline: 1px solid var(--gilt); outline-offset: -3px; box-shadow: 0 0 0 1px var(--line-2), 0 6px 18px rgba(30, 20, 10, .35); background: #0a0c16; overflow: hidden; user-select: none; }
.vy-sea { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.vy-pin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; min-height: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #f4e6c4; cursor: pointer; z-index: 2; }
.vy-pin .vy-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px dashed transparent; }
.vy-pin:hover .vy-dot, .vy-pin:focus-visible .vy-dot { border-color: rgba(250, 220, 150, .7); }
.vy-pin.sel .vy-dot { border: 1px solid #f6d68a; box-shadow: 0 0 0 2px rgba(246, 214, 138, .25), 0 0 12px rgba(246, 214, 138, .45); }
.vy-pin.dest .vy-dot { border: 1px solid #ffe2a0; animation: vypulse 2.4s ease-in-out infinite; }
.vy-pin .vy-name { font-family: var(--font-head); font-size: .74rem; line-height: 1.1; white-space: nowrap; padding: 1px 5px; background: rgba(14, 12, 22, .62); border: 1px solid rgba(214, 180, 106, .35); border-radius: 2px; text-shadow: 0 1px 0 #000; }
.vy-pin.b-dark .vy-name { color: #c8c0d8; border-color: rgba(150, 140, 190, .35); }
.vy-pin.rumor { color: #b8a888; opacity: .75; }
.vy-pin.rumor .vy-name { background: transparent; border-style: dashed; }
.vy-home { position: absolute; transform: translate(-50%, 14px); font-family: var(--font-head); font-size: .72rem; color: #ffe6b0; background: rgba(40, 26, 14, .7); padding: 1px 6px; border: 1px solid rgba(240, 200, 120, .5); white-space: nowrap; pointer-events: none; }
.vy-shipw { position: absolute; transform: translate(-50%, -80%); z-index: 3; pointer-events: none; }
.vy-ship { display: block; width: 33px; height: 30px; image-rendering: pixelated; animation: vybob 2.6s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255, 214, 140, .6)); }
.vy-legend { position: absolute; right: 8px; top: 6px; display: flex; gap: .5rem; align-items: center; font-size: .7rem; color: #e8dcc0; background: rgba(12, 10, 18, .55); padding: 2px 8px; border: 1px solid rgba(214, 180, 106, .3); }
.vy-legend .lg::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 4px; vertical-align: -1px; border: 1px solid rgba(255, 255, 255, .3); }
.vy-legend .lit::before { background: #9cb8a6; } .vy-legend .dusk::before { background: #7e8498; } .vy-legend .dark::before { background: #231c26; }
.vy-chart.locked .vy-sea { filter: saturate(.5) brightness(.8); }
.vy-veil { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; color: #f0e2c0; background: rgba(16, 12, 20, .72); border: 1px solid rgba(214, 180, 106, .45); padding: .8rem 1.4rem; white-space: nowrap; }
.vy-teaser { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 1rem; align-items: center; max-width: 1100px; margin: 0 auto; }
.vy-teaser .vy-note { margin: 0; }
.vy-veil b { font-family: var(--font-head); font-size: 1.15rem; font-weight: 400; letter-spacing: .04em; }
.vy-veil p { margin: 0; font-size: .9rem; line-height: 1.75; color: #d8cbb0; max-width: 32rem; }
.vy-veil .tag { background: rgba(240, 210, 150, .15); color: #f4dfa8; border-color: rgba(240, 210, 150, .4); }
.vy-note { margin-top: .8rem; }
.vy-note p { margin: 0 0 .3rem; }
.vy-side { gap: .8rem; }
.vy-plan, .vy-run { gap: .55rem; }
.vy-vig { width: 100%; height: auto; aspect-ratio: 168 / 72; image-rendering: pixelated; border: 1px solid #3a2a1c; outline: 1px solid rgba(214, 180, 106, .5); outline-offset: -3px; }
.vy-iname { margin: 0; font-family: var(--font-head); font-weight: 400; }
.vy-iname::before, .vy-iname::after { display: none; }
.vy-desc { margin: 0; font-size: .92rem; line-height: 1.8; color: var(--ink-2); }
.tag.b-lit { background: color-mix(in srgb, var(--sky) 18%, var(--surface)); color: var(--sky); border-color: color-mix(in srgb, var(--sky) 45%, transparent); }
.tag.b-dusk { background: color-mix(in srgb, var(--dusk) 16%, var(--surface)); color: var(--dusk); border-color: color-mix(in srgb, var(--dusk) 45%, transparent); }
.tag.b-dark { background: #1a1824; color: #d8d0e8; border-color: #3a3448; }
.vy-plan .mini-h, .vy-run .mini-h { text-align: left; margin: .25rem 0 0; }
.vy-crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .35rem; max-height: 210px; overflow: auto; padding: 2px; }
.vy-cm { flex-direction: column; gap: .15rem; padding: .3rem .25rem; min-height: 0; font-size: .78rem; font-weight: 400; }
.vy-cm > .ellipsis { max-width: 100%; }
.vy-trait { font-size: .66rem; padding: 0 .3rem; border-radius: var(--r-s); border: 1px solid currentColor; opacity: .85; }
.vy-trait.t-sail { color: var(--sky); } .vy-trait.t-salvage { color: var(--butter); } .vy-trait.t-trade { color: var(--primary); } .vy-trait.t-fish { color: var(--mint); } .vy-trait.t-gaze { color: var(--dusk); }
.vy-prices { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .45rem .55rem; background: color-mix(in srgb, var(--surface-3) 45%, transparent); border: 1px solid var(--line); border-radius: var(--r-s); }
.vy-prices .mini-h { text-align: left; font-size: var(--t-small); }
.vy-pr { display: flex; align-items: center; gap: .3rem; font-size: .82rem; min-width: 0; }
.vy-log { display: flex; flex-direction: column; gap: .45rem; max-height: 320px; overflow: auto; }
.vy-le { padding: .4rem .55rem; border-left: 2px solid var(--line-2); background: color-mix(in srgb, var(--surface-3) 35%, transparent); font-size: .88rem; line-height: 1.75; }
.vy-le b { display: block; font-family: var(--font-head); font-weight: 400; color: var(--ink-2); font-size: .82rem; }
.vy-le.good { border-left-color: var(--mint); } .vy-le.bad { border-left-color: var(--rose); }
.scene.vy-log { max-height: 52vh; }
.vy-sections { margin-top: 1.1rem; }
.vy-tabs { margin-bottom: .8rem; }
.vy-goods .li { gap: .55rem; flex-wrap: wrap; }
.vy-cargo-head { gap: .8rem; flex-wrap: wrap; } .vy-cargo-head .bar { width: 140px; flex: none; }
.vy-ups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; }
.vy-pips { display: inline-flex; gap: 3px; }
.vy-pips i { width: 10px; height: 10px; border: 1px solid var(--line-2); background: var(--surface-2); transform: rotate(45deg); }
.vy-pips i.on { background: var(--gilt); border-color: var(--gilt); }
.vy-frags details summary { cursor: pointer; font-family: var(--font-head); }
.vy-frags details p { margin: .4rem 0 0; }
@keyframes vybob { 50% { transform: translateY(-2px); } }
@keyframes vypulse { 50% { box-shadow: 0 0 0 4px rgba(255, 226, 160, .2), 0 0 14px rgba(255, 226, 160, .5); } }
@media (max-width: 900px) { .vy, .vy-teaser { grid-template-columns: minmax(0, 1fr); } .vy { grid-template-areas: 'chart' 'side' 'sec'; } }
@media (max-width: 520px) { .vy-pin .vy-name { font-size: .62rem; padding: 0 3px; } .vy-pin .vy-dot { width: 18px; height: 18px; } .vy-legend { font-size: .6rem; gap: .3rem; } .vy-veil { padding: .5rem .8rem; } .vy-veil b { font-size: 1rem; } .vy-prices { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vy-ship, .vy-pin.dest .vy-dot { animation: none; } }

/* ── 어둠 너머 (2막 2부): 등불 마도구 · 건너편 땅 지도 · 시선 게이지 · 잃어버린 것들 ── */
.bz { --bz-bg: #0f0d14; --bz-bg2: #17141f; --bz-line: #2c2738; --bz-ink: #ebdfc6; --bz-ink2: #bcae94; --bz-ink3: #8d8272; --bz-amber: #f2c46e; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.bz-hero { display: grid; grid-template-columns: minmax(0, 1fr) 250px; border-radius: var(--r-l); overflow: hidden; background: var(--bz-bg); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(242, 196, 110, .16), 0 6px 22px rgba(20, 12, 4, .28); }
.bz-scene { position: relative; height: clamp(150px, 16vw, 220px); background: #0c0b11; overflow: hidden; }
.bz-scene .bzart { width: 100%; height: 100%; object-fit: cover; object-position: center 78%; image-rendering: pixelated; display: block; }
.bz-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1rem .8rem; background: linear-gradient(180deg, transparent, rgba(8, 7, 12, .88) 55%); color: var(--bz-ink); }
.bz-cap b { font-family: var(--font-head); font-size: 1.25rem; letter-spacing: .05em; }
.bz-cap p { margin: .2rem 0 0; font-size: .86rem; line-height: 1.75; color: var(--bz-ink2); max-width: 62ch; word-break: keep-all; }
.bz-lamp { display: flex; gap: .8rem; align-items: center; padding: 1rem; background: radial-gradient(circle at 26% 50%, rgba(242, 196, 110, .15), transparent 62%), var(--bz-bg2); color: var(--bz-ink); border-left: 1px solid var(--bz-line); min-width: 0; }
.bz-lamp .faint, .bz-lamp .cur { color: var(--bz-ink3); font-size: .8rem; }
.bz-lamp .link { color: var(--bz-amber); font-size: .82rem; }
.bz-lname { font-family: var(--font-head); font-size: 1.05rem; }
.bz-lampart { flex: none; width: 66px; height: 66px; display: grid; place-items: center; border-radius: var(--r); background: radial-gradient(circle at 50% 56%, rgba(242, 196, 110, .22), transparent 66%), #15121b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.bz-lampart.sm { width: 56px; height: 56px; }
.lampspr { image-rendering: pixelated; display: block; }
.lampspr.lit { filter: drop-shadow(0 0 5px var(--lg)) drop-shadow(0 0 12px rgba(242, 196, 110, .32)); animation: bzflick 4.6s ease-in-out infinite; }
.lampspr:not(.lit) { opacity: .5; filter: grayscale(.7); }
@keyframes bzflick { 46% { filter: drop-shadow(0 0 4px var(--lg)) drop-shadow(0 0 9px rgba(242, 196, 110, .25)); } 52% { filter: drop-shadow(0 0 6px var(--lg)) drop-shadow(0 0 15px rgba(242, 196, 110, .4)); } }
.bz-hero.locked .bz-cap b { color: var(--bz-ink2); }
.bz-running { display: flex; align-items: center; gap: .8rem; padding: .6rem .9rem; border-radius: var(--r); background: var(--bz-bg2); color: var(--bz-ink); box-shadow: inset 0 0 0 1px rgba(242, 196, 110, .25); }
.bz-gates { padding: .9rem 1rem; border-radius: var(--r); border: 1px dashed var(--line-2); background: var(--surface-2); }
.bz-gates b { font-family: var(--font-head); font-weight: 400; font-size: var(--t-sub); }
.bz-gates ul { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .3rem; }
.bz-gates li { display: flex; align-items: center; gap: .55rem; color: var(--ink-2); }
.bz-gates .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink-3); }
.bz-gates li.ok { color: var(--ink-3); }
.bz-gates li.ok .dot { background: var(--gilt-2); border-color: var(--gilt); box-shadow: 0 0 6px rgba(242, 196, 110, .7); }
.bz-tabs { margin: 0; }
/* 지도 */
.bz-mapwrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.bz-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; padding: .9rem .8rem; border-radius: var(--r-l); background: radial-gradient(ellipse at 50% 115%, rgba(242, 196, 110, .09), transparent 60%), linear-gradient(180deg, #15121c, #0d0b12); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); color: var(--bz-ink); }
.bz-region { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.bz-rhead { display: flex; justify-content: space-between; align-items: baseline; gap: .3rem; padding-bottom: .35rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.bz-rhead b { font-family: var(--font-head); font-size: .95rem; color: var(--bz-ink); word-break: keep-all; line-height: 1.35; }
.bz-rhead .faint { color: var(--bz-ink3); font-size: .74rem; }
.bz-path { position: relative; display: flex; flex-direction: column; gap: .45rem; padding-left: 15px; }
.bz-path::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; border-left: 1px dashed rgba(242, 196, 110, .28); }
button.bz-node { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .45rem .55rem; text-align: left; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r); color: var(--bz-ink); font-weight: 400; min-width: 0; white-space: normal; box-shadow: none; }
button.bz-node:hover:not(:disabled) { background: rgba(242, 196, 110, .08); border-color: rgba(242, 196, 110, .32); }
button.bz-node.sel, button.bz-node.sel:hover:not(:disabled) { color: var(--bz-ink); background: rgba(242, 196, 110, .12); border-color: rgba(242, 196, 110, .6); box-shadow: 0 0 14px rgba(242, 196, 110, .14); }
button.bz-node.locked { opacity: .5; }
.bz-pip { position: absolute; left: -14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #2a2533; border: 1px solid rgba(242, 196, 110, .4); }
.bz-node.done .bz-pip { background: var(--rg); box-shadow: 0 0 6px var(--rg); }
.bz-node.last .bz-pip { width: 10px; height: 10px; margin-top: -5px; left: -14.5px; transform: rotate(45deg); border-radius: 2px; }
.bz-nname { display: flex; flex-direction: column; min-width: 0; }
.bz-nname b { font-size: .86rem; line-height: 1.35; word-break: keep-all; color: var(--bz-ink); }
.bz-d { font-size: .68rem; color: var(--bz-ink3); letter-spacing: .08em; }
.bz-lamps { display: flex; gap: 2px; }
.bz-lamps i { width: 5px; height: 5px; border-radius: 1px; background: rgba(255, 255, 255, .09); }
.bz-lamps i.on { background: var(--bz-amber); box-shadow: 0 0 3px rgba(242, 196, 110, .6); }
.bz-zone { display: flex; flex-direction: column; gap: .65rem; min-width: 0; }
.bz-zone .lore { margin: 0; font-size: .95rem; }
.bz-mons { gap: .3rem; align-items: center; }
.bz-boss { margin-left: auto; filter: drop-shadow(0 0 6px rgba(110, 90, 170, .55)); }
.bz-facts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; color: var(--ink-2); }
.bz-facts > span { display: inline-flex; align-items: center; gap: .25rem; }
.bz-comps { display: flex; flex-wrap: wrap; gap: .3rem; }
.bz-comps .face { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem .2rem .2rem; max-width: 9rem; font-size: .8rem; font-weight: 400; }
.bz-comps .face.sel, .bz-comps .face.sel:hover:not(:disabled) { color: var(--ink); border-color: var(--gilt); background: color-mix(in srgb, var(--gilt-2) 26%, var(--surface)); font-weight: 700; box-shadow: none; }
.bz-go { min-width: 12rem; }
.bz-line { font-size: .86rem; line-height: 1.8; color: var(--ink-2); word-break: keep-all; }
/* 잃어버린 것들 */
.bz-lhead { display: flex; justify-content: space-between; align-items: baseline; margin: .9rem 0 .45rem; font-family: var(--font-head); font-size: var(--t-sub); }
.bz-lost { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: .4rem; }
button.bz-li, .bz-li { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 0; min-width: 0; border-radius: var(--r); background: radial-gradient(circle at 50% 62%, rgba(242, 196, 110, .2), transparent 70%), #1a1622; border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
button.bz-li:hover:not(:disabled) { background: radial-gradient(circle at 50% 62%, rgba(242, 196, 110, .32), transparent 72%), #1f1a28; border-color: #000; }
.bz-li.empty { background: #15121b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), inset 0 0 12px rgba(0, 0, 0, .55); }
.bz-li.empty::after { content: ''; width: 28%; height: 28%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .13); }
.bz-lmodal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding-top: .4rem; }
.bz-lmodal h3 { margin: .2rem 0 0; }
/* 이야기 조각 */
.bz-lore { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
.bz-scard { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.bz-sn { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); background: #1a1622; color: var(--bz-amber); box-shadow: 0 0 0 1px rgba(242, 196, 110, .4), 0 0 8px rgba(242, 196, 110, .18); }
.bz-scard.locked .bz-sn { color: #6e6474; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); background: var(--surface-3); }
.bz-scard.locked b { color: var(--ink-3); font-weight: 400; }
/* 연구소 · 마도구 */
.bz-lab { display: flex; flex-direction: column; gap: .55rem; }
.bz-labhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .3rem 1rem; margin-bottom: .2rem; }
.bz-labhead p { margin: 0; max-width: 46ch; }
.bz-lrow, .bz-wick { display: flex; gap: .8rem; align-items: center; min-width: 0; }
.bz-lrow:not(.owned) .bz-lampart { background: #1b1920; }
.bz-lrow.eq { box-shadow: inset 0 0 0 1.5px var(--gilt); }
.bz-cost { gap: .25rem .75rem; font-size: .8rem; flex-wrap: wrap; }
.bz-cost .cur.short { color: var(--rose); }
.bz-lostroom { display: grid; place-items: center; width: 84px; height: 84px; border-radius: var(--r-round); background: radial-gradient(circle, rgba(242, 196, 110, .28), transparent 68%); }
/* 탐사 보고서 */
.bz-rephead { position: relative; margin: -.2rem -.2rem .4rem; border-radius: var(--r); overflow: hidden; }
.bz-rephead .bzart { width: 100%; height: 96px; object-fit: cover; image-rendering: pixelated; display: block; }
.bz-repcap { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem .9rem .5rem; background: linear-gradient(180deg, transparent, rgba(8, 7, 12, .85)); color: #ebdfc6; }
.bz-repcap h3 { margin: 0; color: #ebdfc6; } .bz-repcap .faint { color: #a99d8a; }
.bz-replost { gap: .55rem; padding: .7rem; border-radius: var(--r); background: var(--surface-2); }
/* 시선 게이지: 감긴 눈이 뜨인다 */
.gz { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; color: inherit; }
.gz-eye svg { display: block; overflow: visible; }
.gz-lid { fill: #0e0c14; stroke: #c9b48a; stroke-width: 1.1; }
.gz-line { fill: none; stroke: #ecdcb0; stroke-width: 1.4; stroke-linecap: round; }
.gz-iris { fill: #6a5aa4; } .gz-pupil { fill: #08060c; }
.gz-lash { fill: none; stroke: #c9b48a; stroke-width: 1.1; stroke-linecap: round; opacity: .8; }
.gz-near .gz-iris { fill: #8a5a9e; } .gz-close .gz-iris { fill: #a8486a; }
.gz-track { position: relative; flex: none; width: 140px; height: 8px; border-radius: 999px; background: #17131f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 1px rgba(0, 0, 0, .25); overflow: hidden; }
.gz.big .gz-track { width: 180px; height: 10px; }
.gz-track > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #ebbd64, #c97a62 52%, #8a4a9e 78%, #4c2a80); background-size: 140px 100%; transition: width .9s ease; }
.gz.big .gz-track > i { background-size: 180px 100%; }
.gz-track::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .2) 50%, transparent calc(50% + 1px)), linear-gradient(90deg, transparent calc(75% - 1px), rgba(255, 255, 255, .26) 75%, transparent calc(75% + 1px)); }
.gz-spark { position: absolute; inset: 1px 0; opacity: .6; }
.gz-spark svg { width: 100%; height: 100%; display: block; }
.gz-spark polyline { fill: none; stroke: rgba(255, 244, 220, .7); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gz-n { min-width: 1.7em; font-size: .86rem; text-align: right; }
.gz-close .gz-track > i { animation: gzpulse 3.4s ease-in-out infinite; }
.gz-close .gz-eye { animation: gzeye 5.5s ease-in-out infinite; transform-origin: center; }
@keyframes gzpulse { 50% { filter: brightness(1.28); } }
@keyframes gzeye { 50% { transform: scale(1.07); } }
.stage.bzstage { background: color-mix(in srgb, #2a2236 15%, var(--surface)) var(--paper); box-shadow: inset 0 0 70px rgba(24, 16, 36, .22); }
.stage.bzstage .stage-top { margin: -.1rem -.1rem 0; padding: .45rem .7rem .55rem; background: linear-gradient(180deg, #17141f, #100e16); color: #ebdfc6; border-bottom: 1px solid #000; border-radius: var(--r-s) var(--r-s) 0 0; }
.stage.bzstage .stage-top .faint { color: #a99d8a; }
.stage.bzstage .stage-top .chip { background: rgba(255, 255, 255, .06); color: #ebdfc6; border-color: rgba(255, 255, 255, .12); }
@media (max-width: 900px) { .bz-mapwrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .bz-hero { grid-template-columns: minmax(0, 1fr); }
  .bz-lamp { border-left: 0; border-top: 1px solid var(--bz-line); padding: .7rem .9rem; }
  .bz-lampart { width: 56px; height: 56px; }
  .bz-scene { height: auto; overflow: visible; }
  .bz-scene .bzart { height: 118px; }
  .bz-cap { position: static; padding: .6rem .9rem .8rem; background: linear-gradient(180deg, #0b0a10, var(--bz-bg)); }
  .bz-map { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .bz-region { scroll-snap-align: start; }
  .bz-lost { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
  .gz.big .gz-track { width: 120px; } .gz.big .gz-track > i { background-size: 120px 100%; }
  .bz-go { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lampspr.lit, .gz-close .gz-track > i, .gz-close .gz-eye { animation: none; } }
/* ── 어둠 너머 끝 ── */

/* ── 퀘스트 일지 · 소문 게시판 · 패치 노트 (public/js/journal.js) ── */
.jr { max-width: 980px; margin: 0 auto; }
.jr, .jr-rumors, .jr-notes { word-break: keep-all; overflow-wrap: anywhere; }
.jr-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; padding-bottom: .6rem; border-bottom: 1px solid var(--line-2); margin-bottom: 1rem; }
.jr-switch { margin: 0; }
.jr-switch button { position: relative; padding-inline: 1.1rem; min-height: var(--ctl); }
.jr-pip { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-2); margin-left: .35rem; vertical-align: super; }
.jr-links { display: flex; gap: .9rem; font-size: var(--t-small); }
.jr-links button.link { color: var(--ink-2); font-weight: 400; }
.jr-links button.link:hover { color: var(--primary); }
.jr-sh { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 1.1rem 0 .35rem; padding-bottom: .2rem; border-bottom: 1px dotted var(--line-2); font-family: var(--font-head); font-size: var(--t-sub); color: var(--ink-2); }
.jr-sh button.link { font-family: var(--font-body); font-size: .8rem; font-weight: 400; }
.jr-empty { margin: .4rem 0; padding: .8rem 1rem; }
.jr-bar { display: inline-block; position: relative; width: 84px; height: 5px; flex: 0 0 auto; background: var(--track); border-radius: 1px; border: 1px solid var(--line-2); overflow: hidden; }
.jr-bar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, var(--gilt-2), var(--gilt)); }
.jr-bar.good > i { background: var(--mint); } .jr-bar.wait > i { background: color-mix(in srgb, var(--sky, #5a7a9a) 70%, var(--gilt)); }
/* 메인 이야기 */
.jr-now { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem 1.6rem; align-items: center; }
.jr-now h3 { margin: .1rem 0 .5rem; font-size: 1.3rem; line-height: 1.35; }
.jr-now-r { border-left: 1px solid var(--line-2); padding-left: 1.4rem; display: flex; flex-direction: column; gap: .2rem; }
.jr-ep { font-family: var(--font-head); font-weight: 400; font-size: 1.08rem; }
.jr-need { font-size: .86rem; color: var(--ink-2); }
.jr-dots { display: inline-flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.jd { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink-3); background: transparent; flex: 0 0 auto; }
.jr-dots.big .jd { width: 12px; height: 12px; }
.jd.seen { background: var(--gilt); border-color: var(--gilt); }
.jd.open { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); background: color-mix(in srgb, var(--primary) 30%, transparent); }
.jd.lock { opacity: .5; }
.jr-chs { display: flex; flex-direction: column; }
.jr-ch { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto 2.6rem; align-items: center; gap: .7rem; width: 100%; max-width: none; text-align: left; justify-content: stretch; background: transparent; border: 0; border-bottom: 1px dotted var(--line-2); border-radius: 0; box-shadow: none; padding: .45rem .4rem; min-height: 2.3rem; font-weight: 400; }
.jr-ch:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-3) 55%, transparent); border-color: var(--line-2); }
.jr-ch.cur { background: color-mix(in srgb, var(--butter-soft) 55%, transparent); }
.jr-ch.dim { color: var(--ink-3); }
.jr-chl { font-size: .8rem; color: var(--ink-3); white-space: nowrap; }
.jr-cht { font-family: var(--font-head); }
.jr-chn { text-align: right; }
.jr-eps { padding: .2rem 0 .5rem 1rem; border-bottom: 1px dotted var(--line-2); }
.jr-eps .li { padding: .35rem .4rem; font-size: .9rem; }
.jr-epneed { max-width: 45%; }
/* 뒷이야기 */
.jr-cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--g); flex: 0 0 auto; }
.jr-list { display: flex; flex-direction: column; }
.jr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: center; gap: .4rem 1rem; padding: .5rem .5rem .5rem .7rem; border-bottom: 1px dotted var(--line-2); border-left: 3px solid var(--g, var(--line-2)); min-width: 0; }
.jr-row.ready { background: color-mix(in srgb, var(--mint-soft) 55%, transparent); }
.jr-t { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.jr-t b, .jr-t > span:first-child { flex: 0 1 auto; min-width: 0; }
.jr-t .faint { flex: 1 1 auto; font-size: .8rem; }
.jr-g { display: flex; align-items: center; gap: .6rem; min-width: 0; font-size: .86rem; }
.jr-g > .ellipsis { flex: 1 1 auto; min-width: 0; }
.jr-gp { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.jr-gp .num { min-width: 3.2rem; text-align: right; font-size: .78rem; }
.jr-b { display: flex; align-items: center; gap: .2rem; justify-content: flex-end; }
.jr-b > button { min-width: 4.6rem; }
.jr-more { position: relative; }
.jr-more > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; color: var(--ink-3); font-weight: 700; user-select: none; border-radius: var(--r-s); }
.jr-more > summary::-webkit-details-marker { display: none; }
.jr-more > summary { position: relative; } .jr-more > summary::after { content: ''; position: absolute; inset: -6px; } /* 누르는 자리 40px 이상 */
.jr-more > summary:hover, .jr-more[open] > summary { background: var(--surface-3); color: var(--ink); }
.jr-menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 6; padding: .3rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s); box-shadow: var(--shadow-pop); white-space: nowrap; }
.jr-row.done { grid-template-columns: minmax(0, 1fr) auto; padding-block: .35rem; font-size: .88rem; border-left-width: 2px; }
.jr-when { font-size: .76rem; white-space: nowrap; }
.jr-search { width: 9rem; min-height: var(--ctl-s); padding: .2rem .5rem; font-size: var(--t-small); }
.jr-morebtn { margin: .5rem auto 0; display: block; font-size: .84rem; }
.jr-foot { display: flex; justify-content: center; gap: .6rem; align-items: baseline; margin-top: 1.4rem; font-size: .86rem; }
/* 소문 */
.jr-board { margin-bottom: 1rem; }
.jr-rumors .jr-rh { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.jr-rumors .jr-rh h3 { margin: 0 0 .5rem; }
.jr-rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: .6rem; }
.jr-rumor { display: flex; flex-direction: column; gap: .5rem; padding: .7rem .8rem .55rem; background: color-mix(in srgb, var(--surface-2) 70%, transparent); border: 1px solid color-mix(in srgb, var(--line-2) 70%, transparent); border-top: 2px solid var(--g, var(--line-2)); border-radius: var(--r-s); }
.jr-rt { margin: 0; font-style: italic; line-height: 1.65; color: var(--ink-2); font-size: .92rem; flex: 1 1 auto; }
.jr-rf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; min-width: 0; }
.jr-rw { gap: .35rem; min-width: 0; color: var(--ink-2); }
.jr-rw .por, .jr-rw canvas, .jr-rw img { flex: 0 0 auto; }
.jr-rn { gap: .35rem; flex: 0 0 auto; }
.jr-rn .jr-bar { width: 56px; }
/* 기록 › 일지 › 퀘스트: 메인 퀘스트 카드 + 서브 퀘스트 카드 (public/js/journal.js questView) */
.mq-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; padding: 1.1rem 1.1rem 1rem; border-top: 3px solid var(--gilt); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gilt-2) 35%, transparent), var(--shadow-1, none); }
.mq-card.ready { border-top-color: var(--mint); }
.mq-k { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.mq-pill { padding: .12rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .08em; color: var(--surface); background: var(--ink-2); }
.mq-ch { font-size: .8rem; color: var(--ink-3); letter-spacing: .03em; }
.mq-chapter { font-size: .84rem; color: var(--ink-2); margin-top: -.2rem; }
.mq-title { margin: .1rem 0 0; font-size: 1.3rem; line-height: 1.35; }
.mq-hint { margin: 0; max-width: 40rem; font-size: .9rem; line-height: 1.7; color: var(--ink-2); }
.mq-goal { width: 100%; max-width: 36rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding-top: .55rem; border-top: 1px dashed var(--line-2); font-size: .92rem; }
.mq-gt { display: flex; align-items: baseline; justify-content: center; gap: .45rem; max-width: 100%; }
.mq-gt .grow { flex: 0 1 auto; min-width: 0; }
.mq-gl { flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: var(--ink-3); letter-spacing: .06em; margin-right: .35rem; }
.mq-gp { display: flex; align-items: center; gap: .5rem; width: 100%; max-width: 20rem; }
.mq-gp .jr-bar { flex: 1 1 auto; width: auto; height: 7px; }
.mq-gp .num { flex: 0 0 auto; font-size: .8rem; }
.mq-rw { display: flex; align-items: baseline; justify-content: center; max-width: 100%; font-size: .86rem; color: var(--ink-2); }
.mq-act { display: flex; justify-content: center; align-items: center; gap: .5rem; flex-wrap: nowrap; margin-top: .3rem; max-width: 100%; }
.mq-act > button { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-head { display: flex; justify-content: center; margin: 1.5rem 0 .55rem; scroll-margin-top: 190px; }
.sq-h { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.12rem; }
.sq-chips { display: flex; flex-wrap: nowrap; justify-content: safe center; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding: .1rem 0 .7rem; }
.sq-chips::-webkit-scrollbar { display: none; }
.sq-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; min-height: var(--ctl-s, 34px); padding: .2rem .75rem; border-radius: 999px; font-size: var(--t-small); font-weight: 400; white-space: nowrap; }
.sq-chip.sel { background: var(--ink-2); color: var(--surface); border-color: var(--ink); }
.sq-cnt { min-width: 1.25rem; padding: 0 .3rem; border-radius: 999px; font-size: .72rem; line-height: 1.25rem; text-align: center; background: var(--surface-3); color: var(--ink-2); }
.sq-chip.sel .sq-cnt { background: color-mix(in srgb, var(--surface) 22%, transparent); color: inherit; }
.sq-cnt.hot, .sq-chip.sel .sq-cnt.hot { background: var(--mint); color: var(--surface); }
.sq-cnt.new { background: var(--primary-soft); color: var(--primary); }
.sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .6rem; align-items: start; }
.sq-grid.who { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 340px)); justify-content: center; }
.sq-card { display: flex; flex-direction: column; gap: .4rem; min-width: 0; padding: .7rem .8rem .6rem; background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid color-mix(in srgb, var(--line-2) 75%, transparent); border-left: 3px solid var(--g, var(--line-2)); border-radius: var(--r-s); }
.sq-card.ready { background: color-mix(in srgb, var(--mint-soft) 60%, var(--surface-2)); border-color: color-mix(in srgb, var(--mint) 45%, transparent); border-left-color: var(--mint); }
.sq-top { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.sq-t { flex: 1 1 auto; min-width: 0; font-family: var(--font-head); font-weight: 400; font-size: 1.02rem; }
.sq-st { flex: 0 0 auto; padding: .05rem .45rem; border-radius: var(--r-s); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.sq-st.rd { background: var(--mint); color: var(--surface); }
.sq-st.ip { background: color-mix(in srgb, var(--gilt-2) 30%, transparent); color: var(--ink); }
.sq-st.nw { background: var(--primary-soft); color: var(--primary); }
.sq-top .jr-fav { flex: 0 0 auto; }
.sq-who { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .84rem; }
.sq-who .npcname { font-weight: 700; }
.sq-lv { margin-left: auto; font-size: .74rem; } .sq-lv.hi { color: var(--rose); }
.sq-hook { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sq-goal { display: flex; align-items: center; gap: .6rem; min-width: 0; font-size: .86rem; }
.sq-goal > .ellipsis { flex: 1 1 auto; min-width: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.45; }
.sq-goal .jr-bar { width: 64px; }
.sq-foot { display: flex; align-items: center; gap: .4rem; min-width: 0; padding-top: .4rem; border-top: 1px dotted var(--line-2); }
.sq-rw { flex: 1 1 auto; min-width: 0; font-size: .8rem; color: var(--ink-2); }
.sq-foot > button { flex: 0 0 auto; min-width: 4.6rem; }
.sq-gh { display: flex; align-items: baseline; justify-content: center; gap: .5rem; margin: 1rem 0 .4rem; font-size: .95rem; }
.sq-note { text-align: center; margin: .7rem 0 0; font-size: .82rem; }
.sq-done { margin-top: 1.2rem; border-top: 1px solid var(--line-2); padding-top: .5rem; }
.sq-done > summary { display: flex; justify-content: center; align-items: baseline; gap: .6rem; cursor: pointer; padding: .45rem; font-family: var(--font-head); color: var(--ink-2); list-style: none; border-radius: var(--r-s); }
.sq-done > summary::-webkit-details-marker { display: none; }
.sq-done > summary::before { content: '▸'; font-size: .8rem; color: var(--ink-3); transition: transform .15s; }
.sq-done[open] > summary::before { transform: rotate(90deg); }
.sq-done > summary:hover { background: var(--surface-3); }
.side .nav .badge.sq-dot { background: var(--rose, #d66e5e); }
.sq-entry { position: relative; display: flex; align-items: center; gap: .5rem; width: 100%; max-width: none; min-height: 44px; padding: .45rem .8rem; text-align: left; justify-content: flex-start; font-weight: 400; white-space: nowrap; }
.sq-entry .mk { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--ink-2); flex: 0 0 auto; }
.sq-entry .mk svg { width: 20px; height: 20px; }
.sq-entry b { font-family: var(--font-head); font-weight: 400; font-size: 1rem; }
.sq-en { min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; font-size: .76rem; line-height: 1.35rem; text-align: center; background: var(--ink-2); color: var(--surface); }
.sq-es { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; color: var(--ink-3); text-align: right; }
.sq-entry.ready { border-color: var(--mint); background: color-mix(in srgb, var(--mint-soft) 55%, var(--surface)); }
.sq-entry.ready .sq-es { color: var(--mint); font-weight: 700; }
.sq-ego { flex: 0 0 auto; color: var(--ink-3); font-size: 1.1rem; }
.sq-edot { position: absolute; top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose, #d66e5e); }
@media (max-width: 480px) { .mq-card { padding: 1rem .8rem .9rem; } .mq-title { font-size: 1.16rem; } .sq-chip { padding: .2rem .6rem; } }
.jr-rumors.in-modal .jr-rgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
/* 홈 · 패치 노트 */
.jr-th { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.jr-th button.link { font-family: var(--font-body); font-size: .8rem; font-weight: 400; color: var(--ink-2); }
.hbar .jr-patch { color: var(--ink-3); margin-left: -.6rem; }
.hbar .jr-patch .si { width: 18px; height: 18px; }
.hbar .jr-patch .badge { top: 2px; right: 2px; box-shadow: 0 0 0 2px var(--surface); }
.jr-notes { display: flex; flex-direction: column; gap: .2rem; max-height: min(64vh, 560px); overflow-y: auto; }
.jr-note { border-bottom: 1px dotted var(--line-2); padding: .35rem 0; }
.jr-note > summary { display: flex; align-items: baseline; gap: .7rem; cursor: pointer; list-style: none; }
.jr-note > summary::-webkit-details-marker { display: none; }
.jr-note > summary b { color: var(--primary); min-width: 2.6rem; }
.jr-nt { font-family: var(--font-head); flex: 1 1 auto; }
.jr-note ul { margin: .4rem 0 .3rem; padding-left: 1.2rem; font-size: .9rem; line-height: 1.65; color: var(--ink-2); }
.jr-note li { margin: .12rem 0; }
@media (max-width: 760px) {
  .jr-now { grid-template-columns: minmax(0, 1fr); }
  .jr-now-r { border-left: 0; border-top: 1px solid var(--line-2); padding: .7rem 0 0; }
  .jr-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 't b' 'g b'; gap: .2rem .6rem; }
  .jr-row .jr-t { grid-area: t; } .jr-row .jr-g { grid-area: g; } .jr-row .jr-b { grid-area: b; }
  .jr-row.done { grid-template-areas: none; }
  .jr-g { flex-wrap: wrap; row-gap: .15rem; } .jr-g > .ellipsis { flex-basis: 100%; }
  .jr-gp .jr-bar { width: 96px; }
  .jr-b > button { min-width: 0; }
  .jr-ch { grid-template-columns: 2.6rem minmax(0, 1fr) auto; } .jr-ch .jr-chn { display: none; }
  .jr-switch button { padding-inline: .8rem; }
  .jr-links { gap: .7rem; font-size: .8rem; }
  .jr-search { width: 7rem; }
}
/* ── 퀘스트 일지 끝 ── */

/* ── 펫 마중 (동물보호소 · 등불 마중 · 보금자리) — public/js/pages/petgacha.js ── */
.pgpanel { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1rem; padding: 0; overflow: hidden; }
.pgstage { position: relative; min-height: 214px; overflow: hidden; background: linear-gradient(180deg, #1b1826 0%, #2a2232 52%, #3b2d22 100%); }
.pgglow { position: absolute; left: 50%; top: 80px; width: 180px; height: 180px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 130, .55), rgba(255, 186, 90, .16) 42%, transparent 70%); animation: pgflick 3.4s ease-in-out infinite; }
.pgcord { position: absolute; left: 50%; top: 0; width: 2px; height: 24px; background: #6b5236; transform: translateX(-50%); }
.pglantern { position: absolute; left: 50%; top: 22px; width: 80px; height: 85px; transform: translateX(-50%); transform-origin: 50% 0; animation: pgsway 6s ease-in-out infinite; }
.pglantern .pgflame { animation: pgflame 1.8s steps(2, end) infinite; }
.pgground { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; justify-content: center; align-items: flex-end; gap: 12px; padding-bottom: 10px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .28)); }
.pgpaw { opacity: 0; color: #ead8a6; display: grid; transform: rotate(-18deg); }
.pgpaw:nth-child(even) { transform: rotate(18deg) translateY(-7px); }
.pgpaw .si { width: 15px; height: 15px; stroke-width: 1.6; }
.pg-call .pgpaw { animation: pgstep 1s ease-out forwards; animation-delay: calc((4 - var(--i)) * 140ms); }
.pg-call .pgglow { animation: pgbloom 1.15s ease-out; }
@keyframes pgflick { 0%, 100% { opacity: .85; } 45% { opacity: 1; } 62% { opacity: .76; } }
@keyframes pgflame { 50% { opacity: .78; } }
@keyframes pgsway { 0%, 100% { transform: translateX(-50%) rotate(-1.5deg); } 50% { transform: translateX(-50%) rotate(1.5deg); } }
@keyframes pgstep { 0% { opacity: 0; } 35% { opacity: .95; } 100% { opacity: .4; } }
@keyframes pgbloom { 40% { transform: translate(-50%, -50%) scale(1.55); opacity: 1; } }
.pgside { padding: 1rem 1.1rem 1rem 0; display: flex; flex-direction: column; gap: .65rem; min-width: 0; }
.pglead { font-style: italic; color: var(--ink-2); line-height: 1.7; margin: 0; }
.pgpebble { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .6rem .12rem .25rem; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r); font-size: .86rem; }
.pgbtns { gap: .5rem; }
.pgbtn { flex-direction: column; align-items: flex-start; gap: .12rem; min-width: 9rem; padding: .5rem .9rem; }
.pgcost { font-size: .76rem; font-weight: 400; display: inline-flex; align-items: center; gap: .2rem; opacity: .92; }
.pgodds { margin: 0; }
.pgrates { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: .8rem; margin-top: .35rem; font-weight: 700; }
.pgresults { margin-top: .9rem; }
.pgresults:empty { display: none; }
.pggrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-top: .45rem; }
.pggrid.one { grid-template-columns: minmax(0, 170px); }
.pgres { --c: var(--g0); display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 0; padding: .55rem .35rem .5rem; text-align: center;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); border-radius: var(--r); box-shadow: var(--shadow); }
.pgres.g1 { --c: var(--g1); } .pgres.g2 { --c: var(--g2); } .pgres.g3 { --c: var(--g3); } .pgres.g4 { --c: var(--g4); } .pgres.g5 { --c: var(--g5); }
.pgres-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); }
.pgres.g2 .pgres-ic, .pgres.g3 .pgres-ic { background: radial-gradient(circle, color-mix(in srgb, var(--c) 36%, transparent), transparent 72%); }
.pgres.g4, .pgres.g5 { background: color-mix(in srgb, var(--c) 7%, var(--surface)); box-shadow: var(--shadow), 0 0 14px color-mix(in srgb, var(--c) 42%, transparent); }
.pgres.g4 .pgres-ic, .pgres.g5 .pgres-ic { background: radial-gradient(circle, color-mix(in srgb, var(--c) 50%, transparent), transparent 72%); }
.pgres b { font-size: .84rem; max-width: 100%; color: var(--c); }
.pgres.g0 b { color: var(--ink); }
.pgres-l { font-size: .74rem; color: var(--ink-3); display: inline-flex; align-items: center; gap: .15rem; }
.pgres.new .pgres-l { color: var(--butter); font-weight: 700; }
.pgres.anim { animation: pgin .45s ease-out both; animation-delay: var(--d); }
@keyframes pgin { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.pgweek { margin-top: 1rem; gap: .45rem; }
.pgweek h4 { margin: 0; }
.pgweek .li.done, .pgweek .li.dim { opacity: .55; }
.pggive { display: inline-flex; align-items: center; justify-content: flex-end; gap: .15rem; min-width: 2.7rem; font-size: .8rem; color: var(--butter); font-weight: 700; }
.pgsrc { font-size: .78rem; line-height: 1.65; margin: .2rem 0 0; }
.pgpips { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.pgpips i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--line-2); }
.pgpips i.on { background: var(--rose); border-color: var(--rose); }
.bondtag { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.bondtag-l { font-size: .85em; color: var(--butter); font-weight: 600; white-space: nowrap; }
.bondpips { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.bondpips i { position: relative; width: 14px; height: 6px; border-radius: 2px; border: 1px solid var(--line-2); overflow: hidden; }
.bondpips.sm i { width: 9px; height: 5px; }
.bondpips i.on { background: var(--gilt); border-color: var(--gilt); }
.bondpips i.cur { border-color: var(--gilt); }
.bondpips i.cur b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gilt); opacity: .55; }
.gxcomp-fx { font-size: .85em; color: var(--butter); overflow-wrap: anywhere; }
.petfood-g { color: var(--butter); font-weight: 600; margin-left: .15rem; }
.petfood-h { margin: .2rem 0 .3rem; }
.gxpt .bondpips { margin-top: 1px; }
@media (max-width: 640px) {
  .pgpanel { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .pgstage { min-height: 176px; }
  .pgside { padding: 0 .85rem .9rem; }
  .pgbtn { flex: 1 1 0; min-width: 0; }
  .pggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .pgglow, .pglantern, .pglantern .pgflame, .pgres.anim { animation: none; }
  .pg-call .pgpaw, .pg-call .pgglow { animation: none; }
  .pg-call .pgpaw { opacity: .4; }
}
/* ── 펫 마중 끝 ── */

/* ── 운영 콘솔 (public/js/pages/gm.js) · 운영자에게만 보이는 아이콘 · 배율 칩 ── */
.gm-icon { color: var(--gilt); }
.gm-boost { color: var(--gilt); font-weight: 700; }
.gm-boost .si { width: 14px; height: 14px; }
.gm { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.gm-tabs { margin-bottom: .6rem; }
.gm-sec { min-width: 0; }
.gm-sec h4 { margin: .9rem 0 .4rem; font-size: var(--t-sub); }
.gm-sec > .row, .gm-sec > .gm-form, .gm-sec > textarea, .gm-sec > p { margin-bottom: .55rem; }
.gm-bar { margin-bottom: .2rem; }
.gm-alert { padding: .6rem .8rem; border: 1px solid var(--rose); background: var(--rose-soft); color: var(--rose); font-weight: 700; border-radius: var(--r-s); }
.gm-kpis { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.gm-kpi { display: flex; flex-direction: column; gap: .1rem; padding: .65rem .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); min-width: 0; }
.gm-kpi b { font-size: 1.45rem; line-height: 1.2; }
.gm-kpi .faint { font-size: .76rem; overflow-wrap: anywhere; }
.gm-kpi.warn { border-color: var(--rose); }
.gm-kpi.warn b { color: var(--rose); }
.gm-kl, .gm-k { font-size: .78rem; color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.gm-k { min-width: 4.5rem; display: inline-block; }
.gm-two { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.gm-pl { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.gm-plist { max-height: 60vh; overflow: auto; }
.gm-form { display: flex; flex-direction: column; gap: .5rem; }
.gm-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.gm-field > input, .gm-field > select, .gm-field > textarea { width: 100%; }
.gm-lab { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.gm-grid4 { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.gm-num { width: 7rem; }
.gm-sec textarea { width: 100%; }
.gm-results { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 11rem; overflow: auto; }
.gm-picked { display: flex; flex-wrap: wrap; gap: .4rem; }
.gm-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .4rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); font-size: .85rem; }
.gm-facts { display: grid; gap: .35rem .9rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gm-facts > div { display: flex; gap: .4rem; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.gm-inv summary { cursor: pointer; font-size: .85rem; color: var(--ink-3); margin-top: .4rem; }
.gm-inv .gm-results { margin-top: .4rem; }
.gm-wrap { flex-wrap: wrap; }
.gm-dim { opacity: .55; }
.gm-rep .faint.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-feat { cursor: pointer; }
.gm-feat.off span.grow { color: var(--rose); }
.gm-fore { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .3rem; margin: .4rem 0 .6rem; }
.gm-fc { display: flex; flex-direction: column; align-items: center; padding: .3rem; border: 1px solid var(--line-2); border-radius: var(--r-s); font-size: var(--t-small); }
.gm-fc.gm { border-color: var(--gilt); background: color-mix(in srgb, var(--gilt) 14%, transparent); }
.gm-tlist { display: flex; flex-direction: column; }
.gm-trow { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, .8fr); gap: .4rem .8rem; align-items: center; padding: .5rem .3rem; border-bottom: 1px dotted var(--line-2); }
.gm-trow.changed { background: color-mix(in srgb, var(--gilt) 12%, transparent); }
.gm-trow.changed b::after { content: ' · 바뀜'; color: var(--gilt); font-size: .75rem; }
.gm-tname { display: flex; flex-direction: column; min-width: 0; }
.gm-tval { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.gm-tval .gm-num { width: 5.5rem; }
.gm-tb { text-align: right; font-size: .76rem; }
.gm-log .gm-when { min-width: 7.5rem; }
@media (max-width: 900px) {
  .gm-two, .gm-pl { grid-template-columns: minmax(0, 1fr); }
  .gm-trow { grid-template-columns: minmax(0, 1fr); }
  .gm-tb { text-align: left; }
  .gm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-kpi b { font-size: 1.2rem; }
  .gm-num { width: 6rem; }
  .gm-log .gm-when { min-width: 0; }
}
/* ── 운영 콘솔 끝 ── */
/* ── v5 갈림길 지도 (원정 지도): 양피지에 잉크로 그린 미궁 지도 · public/js/pages/dungeon.js mapChart ── */
.dmap.chartmode { gap: .45rem; }
.dc-floors { display: flex; flex-wrap: wrap; gap: .25rem; }
.dc-floors button { min-height: 0; padding: .12rem .5rem; font-size: var(--t-micro); font-family: var(--font-head); font-weight: 400; border-radius: var(--r-s); color: var(--ink-3); }
.dc-floors button.past { color: var(--mint); }
.dc-floors button.cur { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 55%, var(--line-2)); }
.dc-floors button.sel, .dc-floors button.sel:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); border-color: var(--line-2); box-shadow: inset 0 0 0 1px var(--gilt); }
.dchart-wrap { width: 100%; max-width: 300px; margin: 0 auto; }
.dchart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-head); -webkit-tap-highlight-color: transparent; }
.dchart .pp0 { stop-color: var(--surface); } .dchart .pp1 { stop-color: var(--surface-2); } .dchart .pp2 { stop-color: var(--surface-3); }
.dchart .paper { stroke: var(--line-2); stroke-width: 1; }
.dchart .fr1 { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.dchart .fr2 { fill: none; stroke: color-mix(in srgb, var(--gilt) 55%, transparent); stroke-width: .6; stroke-dasharray: 1 3; stroke-linecap: round; }
.dchart .corner { fill: var(--gilt); opacity: .8; }
.dchart .cart path { fill: var(--surface-3); stroke: var(--line-2); stroke-width: .9; }
.dchart .cart text { font-size: 12px; fill: var(--ink-2); letter-spacing: .08em; }
.dchart .compass circle { fill: none; stroke: var(--line-2); stroke-width: .7; }
.dchart .compass path { fill: var(--ink-3); opacity: .8; } .dchart .compass path.cw { fill: var(--gilt); opacity: .55; }
/* 길 */
.dchart .e { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dchart .e.fut { stroke: var(--ink-3); stroke-width: 1.7; stroke-dasharray: .1 5; opacity: .85; }
.dchart .e.gone { stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: .1 5; opacity: .45; }
.dchart .e.walk { stroke: var(--ink-2); stroke-width: 2.6; }
.dchart .e.go { stroke: var(--primary); stroke-width: 2.2; stroke-dasharray: 5 4; animation: dc-march 1.2s linear infinite; }
.dchart .e.soon { stroke: var(--gilt); stroke-width: 2; stroke-dasharray: 2 4; }
.dchart .e.open { stroke: var(--gilt); stroke-width: 2.6; stroke-dasharray: 6 4; animation: dc-march 1s linear infinite; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--gilt-2) 70%, transparent)); }
@keyframes dc-march { to { stroke-dashoffset: -18; } }
/* 방 */
.dchart .dc-n .ring { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.4; }
.dchart .dc-n .ring2 { fill: none; stroke: var(--rose); stroke-width: 1; stroke-dasharray: 2 2.5; }
.dchart .dc-n .ic path, .dchart .dc-n .ic circle { fill: none; stroke: var(--ink-2); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.dchart .dc-n.t-elite .ring { stroke: var(--rose); } .dchart .dc-n.t-elite .ic * { stroke: var(--rose); }
.dchart .dc-n.big .ring { stroke: var(--rose); stroke-width: 1.8; fill: var(--rose-soft); } .dchart .dc-n.big .ic * { stroke: var(--rose); }
.dchart .dc-n.t-treasure .ring { stroke: var(--gilt); } .dchart .dc-n.t-treasure .ic * { stroke: var(--butter); }
.dchart .dc-n.t-buff .ring { stroke: var(--sky); } .dchart .dc-n.t-buff .ic * { stroke: var(--sky); }
.dchart .dc-n.t-camp .ring { stroke: var(--mint); } .dchart .dc-n.t-camp .ic * { stroke: var(--mint); }
.dchart .dc-n.t-trap .ring { stroke: var(--peach); } .dchart .dc-n.t-trap .ic * { stroke: var(--peach); }
.dchart .dc-n.small .ring { stroke-dasharray: 2 2; }
.dchart .dc-n.seen .ring { fill: var(--surface-3); stroke: var(--ink-2); stroke-width: 1.8; }
.dchart .dc-n.seen .ic * { stroke: var(--ink-3); }
.dchart .dc-n.gone { opacity: .38; }
.dchart .dc-n.skip { opacity: .5; }
.dchart .dc-n .halo { fill: none; stroke-width: 1.6; }
.dchart .dc-n.now .ring { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 2.2; }
.dchart .dc-n.now .halo { stroke: var(--primary); opacity: .5; transform-box: fill-box; transform-origin: center; animation: dc-pulse 1.8s ease-in-out infinite; }
.dchart .dc-n.next .ring { stroke: var(--primary); stroke-width: 1.8; stroke-dasharray: 3 2; }
.dchart .dc-n.next .halo { stroke: var(--primary); opacity: .25; }
.dchart .dc-n.soon .ring { stroke: var(--gilt); stroke-width: 1.8; }
.dchart .dc-n.pick { cursor: pointer; }
.dchart .dc-n.pick .ring { fill: var(--butter-soft); stroke: var(--gilt); stroke-width: 2.2; }
.dchart .dc-n.pick .halo { stroke: var(--gilt-2); opacity: .7; transform-box: fill-box; transform-origin: center; animation: dc-pulse 1.4s ease-in-out infinite; }
.dchart .dc-n.pick:hover .ring, .dchart .dc-n.pick:focus-visible .ring { fill: var(--surface); stroke-width: 3; }
.dchart .dc-n.pick:focus { outline: none; }
.dchart .dc-n.mine .ring { fill: var(--gilt-2); stroke: var(--primary); stroke-width: 2.4; }
.dchart .dc-n.mine .ic * { stroke: var(--ink); }
.dchart .dc-n .lbl { font-size: 10.5px; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.dchart .dc-n.mine .lbl { fill: var(--primary); }
.dchart .tally circle { fill: var(--primary); stroke: var(--surface); stroke-width: 1.2; }
.dchart .tally text { font-size: 9px; fill: var(--on-primary); font-family: var(--font-num); }
@keyframes dc-pulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.18); opacity: .15; } }
.dc-legend { display: flex; flex-wrap: wrap; gap: .2rem .55rem; font-size: .7rem; color: var(--ink-3); }
.dc-legend .lg { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; }
.dc-legend .lg i { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--ink-3); display: grid; place-items: center; background: var(--surface); }
.dc-legend .lg svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dc-legend .t-elite i, .dc-legend .t-boss i { border-color: var(--rose); color: var(--rose); } .dc-legend .t-boss i { background: var(--rose-soft); }
.dc-legend .t-treasure i { border-color: var(--gilt); color: var(--butter); } .dc-legend .t-buff i { border-color: var(--sky); color: var(--sky); }
.dc-legend .t-camp i { border-color: var(--mint); color: var(--mint); } .dc-legend .t-trap i { border-color: var(--peach); color: var(--peach); }
/* 갈림길 투표: 선택지 아이콘 · 좁은 화면에서는 무대에도 지도를 */
.choices .rm.pathic { width: 24px; height: 24px; margin: 0 .55rem 0 .2rem; flex: none; }
.forkchart { display: none; }
@media (max-width: 860px) { .forkchart { display: block; margin: 0 auto; width: min(100%, 230px); } }
@media (prefers-reduced-motion: reduce) { .dchart .e.go, .dchart .e.open, .dchart .dc-n .halo { animation: none; } }
/* ── v5 갈림길 지도 끝 ── */

/* ── v5 홈 광장 · 즐겨찾기 · 별 정령 (plaza_strip.js · journal.js · party.js · star_avatar.js) ── */
/* 일지: 즐겨찾기 별 (금박) · 좋아하는 동료 (옅은 하트) */
.jr-fav { flex: 0 0 auto; align-self: center; display: inline-grid; place-items: center; width: 22px; height: 22px; min-width: 0; min-height: 0; padding: 0; margin: 0 -.15rem 0 -.25rem; border: 0; background: transparent; box-shadow: none; color: var(--ink-3); opacity: .45; cursor: pointer; }
.jr-fav .si { width: 15px; height: 15px; stroke-width: 1.6; }
.jr-fav:hover, .jr-fav:focus-visible { opacity: 1; color: var(--gilt); }
.jr-fav.on { opacity: 1; color: var(--gilt); }
.jr-fav.on .si { fill: var(--gilt-2); stroke: var(--gilt); }
.jr-row.fav { background: linear-gradient(90deg, color-mix(in srgb, var(--gilt-2) 16%, transparent), transparent 55%); }
.jr-row.fav.ready { background: linear-gradient(90deg, color-mix(in srgb, var(--gilt-2) 16%, transparent), color-mix(in srgb, var(--mint-soft) 55%, transparent) 55%); }
.jr-liked { display: inline-grid; place-items: center; color: var(--rose); opacity: .75; margin-right: .2rem; vertical-align: -.1em; }
.jr-liked .si { width: 11px; height: 11px; fill: color-mix(in srgb, var(--rose) 35%, transparent); stroke-width: 2; }
.jr-row.liked:not(.fav) { background: linear-gradient(90deg, color-mix(in srgb, var(--rose) 7%, transparent), transparent 45%); }
.jr-rumor.liked { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rose) 28%, transparent); }
.jr-rw .jr-liked { margin: 0 0 0 .1rem; }
/* 동료 카드: 좋아하는 동료 하트 (셋까지) */
/* 별 정령 · 첫 화면 빛깔 고르기 · 설정의 기본 모습 */
canvas.staravatar { image-rendering: pixelated; }
.cr-hues { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; line-height: 0; max-width: 220px; }
.cr-hues[hidden] { display: none; }
.cr-hue { width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; border-radius: 8px; border: 2px solid rgba(60, 40, 20, .35); box-shadow: none; cursor: pointer; }
.cr-hue.sel { outline: 2px solid var(--gilt); outline-offset: 1px; }
/* 눌린 단추의 어두운 바탕(button[aria-pressed]) 대신 아이콘 빛깔로만 */
.jr-fav[aria-pressed="true"] { background: transparent; border-color: transparent; box-shadow: none; }
.jr-fav[aria-pressed="true"] { color: var(--gilt); } 
.cr-hue[aria-pressed="true"] { box-shadow: none; }
/* ── v5 홈 광장 · 즐겨찾기 · 별 정령 끝 ── */

/* ── 디자인 체계 마지막 층: 휴대폰의 손가락 크기 · 모달 여백 (어느 기능 블록보다 뒤에 둔다) ── */
@media (max-width: 640px) {
  button.primary:not(.small), button.big, button.danger:not(.small), .modal .row.end > button:not(.small), .choices button { min-height: var(--tap); }
  button.small, .small > button { min-height: 2.1rem; }
  .subtabs button { min-height: 2.4rem; }
  :is(:where(#page > :not(.stwrap)) .subtabs, .vy-switch, .jr-switch, .whotabs) button { min-height: 2.25rem; }
  .modal-back { padding: .5rem; }
  .modal { border-width: 14px; padding: .7rem .85rem .9rem; max-height: calc(100dvh - 1rem); }
  .modal > h3:first-child { font-size: 1.18rem; }
  /* 모달 맨 아래 단추는 손가락 폭으로 나눠 갖는다 */
  .modal > .row.end:last-child > button { flex: 1 1 0; }
}


/* ── B2: 생활 탭 정리 · 우편함 한 탭 · 위 띠 지갑 (pages/life.js · sysmail.js postTab · wallet.js) ── */
/* 생활: 두 번째 줄은 마디 스위치(.vy-switch 와 같은 모양) */
.lf-switch { margin: -.3rem auto .9rem; }

/* 우편함: 편지(밀랍 인장) · 우편(꾸러미)이 한 줄로 */
.post { width: 100%; max-width: 880px; margin-inline: auto; }
.post > * { align-self: stretch; }
.post .pfhead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.post .pf-switch { margin: 0; }
.post .pfacts { gap: .35rem; margin-left: auto; }
.pfn { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; margin-left: .3rem; padding: 0 .25rem; border-radius: 999px; font-size: .66rem; line-height: 1; background: var(--primary); color: var(--on-primary); }
.sel > .pfn, :is(.subtabs, .vy-switch, .jr-switch) button.sel > .pfn { background: var(--gilt-2); color: var(--wood-edge); } /* 금빛 바탕엔 테마와 상관없이 짙은 글씨 */
.pflist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); overflow: hidden; }
.pfrow { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 3.2rem; padding: .5rem .75rem; text-align: left; background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: none; cursor: pointer; font-weight: 400; color: var(--ink); min-width: 0; }
.pfrow:last-child { border-bottom: 0; }
.pfrow:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-3) 35%, transparent); border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.pfrow:focus-visible { outline: 2px solid var(--gilt-2); outline-offset: -2px; }
.pfrow .pfmain { flex: 1 1 0; gap: .1rem; min-width: 0; align-items: flex-start; overflow: hidden; }
.pfrow .pfmain b { font-weight: 700; max-width: 100%; }
.pfrow .pfmain .faint { font-size: var(--t-small); max-width: 100%; }
.pfrow.unread .pfmain b { color: var(--primary); }
.pfrow .pfside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; font-size: var(--t-micro); }
.pfrow .pfic { flex: none; width: 30px; display: grid; place-items: center; }
.pfrow.sys.gift { box-shadow: inset 3px 0 0 var(--gilt); }
.pfrow.sys.claimed { opacity: .72; }
.pfrow.letter.love { box-shadow: inset 3px 0 0 var(--primary); }
.pfrow.letter.friend { box-shadow: inset 3px 0 0 var(--gilt); }
/* 밀랍 인장: 아직 뜯지 않은 편지는 붉은 밀랍, 읽은 편지는 반으로 갈라진 자국 */
.pfwax { flex: none; width: 30px; height: 30px; background: url(/assets/ui/seal.svg) center / contain no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.pfwax.broken { opacity: .34; filter: grayscale(.7); }

/* 위 띠 지갑: 골드 · 마석 · 정수 (+ 행사 기간에는 행사 재화). v6 재화 정리 — 주머니(「···」)는 없앴다 */
.wallet .cur.fest { min-height: 0; height: 1.6rem; padding: 0 .5rem 0 .3rem; gap: .3rem; background: rgba(214, 180, 106, .1); border: 1px solid rgba(214, 180, 106, .45); border-radius: 999px; color: inherit; box-shadow: none; font: inherit; cursor: pointer; }
.wallet .cur.fest:hover { background: rgba(214, 180, 106, .2); border-color: rgba(214, 180, 106, .75); }
@media (max-width: 640px) { .topbar .wallet .cur.fest { height: 1.45rem; } }
/* ── B2 끝 ── */

/* ── v5 설정 · 편의 설정 (pages/settings.js · prefs.js · theme.js) ── */
.setbar { display: flex; justify-content: flex-end; margin: -.3rem 0 .8rem; }
.setfind { width: min(100%, 260px); }
.setpage { display: flex; flex-direction: column; gap: 1rem; }
.setcols { columns: 2 500px; column-gap: 1rem; }
.setcols > .setsec { break-inside: avoid; page-break-inside: avoid; display: block; width: 100%; margin: 0 0 1rem; }
.setsec[hidden] { display: none !important; }
.setsec > summary { list-style: none; cursor: pointer; user-select: none; position: relative; padding-right: 1.5rem; }
.setsec > summary::-webkit-details-marker { display: none; }
.setsec > summary h3 { display: flex; align-items: center; gap: .45rem; }
.setsec > summary h3::before { content: '❦'; color: var(--gilt); font-size: .9em; }
.setsec > summary h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.setsec > summary::after { content: ''; position: absolute; right: .3rem; top: 50%; width: .45rem; height: .45rem; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: translateY(-75%) rotate(45deg); transition: transform .15s; }
.setsec:not([open]) > summary::after { transform: translateY(-50%) rotate(-45deg); }
.setsec > summary:hover h3 { color: var(--primary); }
.setsec[open] > summary { margin-bottom: .3rem; }
.setbody { display: flex; flex-direction: column; }
.setrow { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); align-items: center; gap: .35rem 1rem; padding: .5rem 0; border-top: 1px dotted color-mix(in srgb, var(--line-2) 55%, transparent); min-width: 0; }
.setbody > .setrow:first-child, .setbody > [hidden] + .setrow { border-top: 0; }
.setrow[hidden] { display: none; }
.setrow .sl { font-size: .92rem; line-height: 1.35; min-width: 0; }
.setrow .sl small { display: block; color: var(--ink-3); font-size: .74rem; margin-top: .12rem; }
.setrow .sc { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.setrow .sc > input:not([type]), .setrow .sc > select, .setrow .sc input[type="password"] { max-width: 100%; }
.setrow.sw-row { grid-template-columns: minmax(0, 1fr) auto; cursor: pointer; }
.setrow.wide { grid-template-columns: minmax(0, 1fr); }
.seg { display: flex; flex-wrap: wrap; gap: .3rem; }
.seg > button { gap: .35rem; }
.seg > button:disabled[aria-pressed="true"] { opacity: .75; }
.seg .swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.sw { position: relative; display: inline-block; width: 2.5rem; height: 1.4rem; flex: none; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; min-height: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 1rem; background: var(--surface-3); border: 1px solid var(--line-2); transition: background .15s, border-color .15s; }
.sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.4rem - 6px); height: calc(1.4rem - 6px); border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.sw input:checked + i { background: var(--primary); border-color: color-mix(in srgb, var(--primary) 70%, #000); }
.sw input:checked + i::after { transform: translateX(1.1rem); background: var(--on-primary); }
.sw input:focus-visible + i { outline: 2px solid var(--gilt); outline-offset: 2px; }
.sc.snd { flex-wrap: nowrap; }
.sc.snd input[type="range"] { width: 160px; min-width: 0; flex: 0 1 160px; }
.setrow.gradeprev { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .86rem; font-weight: 700; padding-top: .2rem; border-top: 0; }
.mutechip { gap: .3rem; } .mutechip svg { width: 11px; height: 11px; }
.setempty { margin: 0; }
@media (max-width: 600px) {
  .setbar { margin-top: 0; } .setfind { width: 100%; }
  .setrow:not(.sw-row):not(.wide) { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .setrow .sl:empty { display: none; }
}
/* 화면 설정이 문서(html)에 입히는 것 */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html[data-density="compact"] { --ctl: 2rem; --ctl-s: 1.65rem; --ctl-l: 2.55rem; }
html[data-density="compact"] { --d-gap: .3rem; --d-grid: .45rem; --d-stack: .5rem; --d-li: .3rem; --d-dash: .5rem; --plate-pad: .35rem .5rem; --page-pad: .5rem max(8px, .9rem) 1rem; --page-mt: .3rem; --head-mb: .35rem; --tabs-mb: .4rem; }
html[data-density="compact"] .setrow { padding: .32rem 0; }
html[data-contrast="high"] { --ink: #140d06; --ink-2: #2f2316; --ink-3: #4f3e2a; --line-2: #6f5533; }
html[data-contrast="high"][data-tone="dark"] { --ink: #fff7e6; --ink-2: #f0e0bf; --ink-3: #d2bf98; --line-2: #a08458; }
html[data-contrast="high"] .faint { color: var(--ink-2); }
html[data-tap="big"] { --ctl: 2.75rem; --ctl-s: 2.35rem; --ctl-l: 3.2rem; --tap: 48px; }
html[data-tap="big"] button.icon { width: 2.6rem; height: 2.6rem; }
html[data-tap="big"] input[type="checkbox"] { width: 1.35rem; height: 1.35rem; }
html[data-tap="big"] .sw { width: 3rem; height: 1.7rem; } html[data-tap="big"] .sw i::after { width: calc(1.7rem - 6px); height: calc(1.7rem - 6px); } html[data-tap="big"] .sw input:checked + i::after { transform: translateX(1.3rem); }
html[data-lh="wide"] body { line-height: 1.9; letter-spacing: .015em; word-spacing: .05em; }
html[data-lh="wide"] :is(.lore, .scene p, .cmsg, .blog p:not(.bl)) { line-height: 2; }
html[data-lh="wide"] .blog { --bl-lh: 1.85; }
html[data-cb="on"] { --g0: #6e6a62; --g1: #00796b; --g2: #1f5fa8; --g3: #a03e86; --g4: #c25400; --g5: #8a6a00; }
html[data-cb="on"][data-tone="dark"] { --g0: #b5aa96; --g1: #4fc3b0; --g2: #78b4f0; --g3: #e08cc8; --g4: #ff9a4a; --g5: #f0d050; }
html[data-px="crisp"] :is(.ic, .por32, .portrait img, .ncard .por img.npc, .spot-token, .pgres-ic img) { image-rendering: pixelated; }
html[data-maplb="always"] .pin.compact .lb { opacity: 1; }
html[data-maplb="hover"] .pin:not(:hover):not(:focus-visible):not(.sel) .lb { display: none; }
html[data-maplb="hover"] .pin:not(:hover):not(:focus-visible):not(.sel) { padding: 0 3px !important; }
.mon .ehpn { display: none; font-size: .64rem; line-height: 1.2; color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }
html[data-hpnum="all"] .mon .ehpn { display: block; }
html[data-hpnum="off"] .hpnum > span:first-child { visibility: hidden; }
html[data-blog="brief"] .blog p.mn { display: none; }
html[data-chatts="off"] .cmsg .t { display: none; }
.chatwin .cbody { font-size: var(--chat-fs, .88rem); }
/* ── v5 설정 · 편의 설정 끝 ── */

/* ── 운영 콘솔 › 초대 코드 ── */
.gm-code { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); letter-spacing: .12em; font-size: 1.02rem; user-select: all; }
.gm-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .4rem; }
.gm-codes .gm-chip { justify-content: space-between; padding: .35rem .5rem; }
.gm-invrow .faint { font-size: .78rem; }
.gm-invrow.dead { opacity: .55; }
.gm-export { width: 100%; min-height: 7rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: .82rem; }

/* ── v6 건의 게시판 (광장 › 별지기 협회 › 건의 · 운영 콘솔 › 건의): public/js/suggest.js ──
   도장(.sg-stamp)은 디자인 체계의 도장 색(--st-*)을 쓴다: 접수 회색 · 확인 중 남색 · 구현 완료 녹색 · 구현 불가 소혈색 · 보류 호박색 · 중복 자색 */
.st-open { --st: var(--st-grey); } .st-review { --st: var(--st-blue); } .st-done { --st: var(--st-green); } .st-wontfix { --st: var(--st-red); } .st-hold { --st: var(--st-amber); } .st-dup { --st: var(--st-violet); }
.sg-stamp { display: inline-flex; align-items: center; flex: 0 0 auto; padding: .1rem .5rem; font-family: var(--font-head); font-size: var(--t-micro); letter-spacing: .06em; line-height: 1.5; white-space: nowrap;
  color: var(--st-ink); background: var(--st); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px rgba(255, 245, 220, .35), inset 0 0 0 2px var(--st), inset 0 0 0 3px rgba(255, 245, 220, .2); transform: rotate(-2deg); }
.sg-stamp.big { font-size: var(--t-small); padding: .15rem .7rem; }
.sg-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--st); flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.sg-cat { background: transparent; color: var(--ink-2); border-color: color-mix(in srgb, var(--line-2) 80%, transparent); font-weight: 400; }
.sg-sw { margin: 0 auto 1rem; }
.sg-filters { display: flex; flex-direction: column; gap: .4rem; padding: .55rem .7rem; margin-bottom: .8rem; background: color-mix(in srgb, var(--surface-2) 70%, transparent); border: 1px solid var(--line); border-radius: var(--r-s); }
.sg-fl { font-family: var(--font-head); font-size: var(--t-small); color: var(--ink-3); margin-right: .25rem; flex: none; }
.sg-chip { display: inline-flex; align-items: center; gap: .3rem; min-height: var(--ctl-s); padding: .1rem .7rem; font-size: var(--t-small); font-weight: 400; background: transparent; border: 1px solid color-mix(in srgb, var(--line-2) 70%, transparent); border-radius: var(--r-s); box-shadow: none; color: var(--ink-2); }
.sg-chip:hover:not(:disabled) { background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--ink); }
.sg-chip.sel, .sg-chip.sel:hover { background: var(--ink-2); color: var(--surface); border-color: var(--ink); }
.sg-chip .sg-n { font-size: var(--t-micro); opacity: .75; }
.sg-chip.sel .sg-dot { box-shadow: 0 0 0 1px rgba(255, 245, 220, .6); }
.sg-tools { gap: .5rem; } .sg-tools .sg-q { flex: 1 1 10rem; min-width: 8rem; max-width: 18rem; margin-left: auto; min-height: var(--ctl-s); }
.sg-sort { margin: 0; } .sg-sort button { min-height: calc(var(--ctl-s) - 4px); padding-inline: .7rem; }
.sg-list { display: flex; flex-direction: column; }
.sg-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .5rem; border-bottom: 1px dotted var(--line-2); cursor: pointer; min-width: 0; }
.sg-item:last-child { border-bottom: 0; }
.sg-item:hover, .sg-item:focus-visible { background: color-mix(in srgb, var(--surface-3) 55%, transparent); }
.sg-item.hidden-post { opacity: .55; }
.sg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.sg-t { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.sg-title { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-meta { font-size: var(--t-small); }
.sg-notel { font-size: var(--t-small); color: var(--ink-2); font-style: italic; }
.sg-ist { align-self: center; }
.sg-item:not(.stamped) .sg-ist { opacity: .85; }
.sg-foot { margin-top: .8rem; } 
/* 글 보기 */
.modal.sg-modal { width: min(var(--modal-l), 100%); }
.sg-view { display: flex; flex-direction: column; gap: .7rem; }
.sg-vhead { display: flex; flex-direction: column; gap: .3rem; }
.sg-vtitle { text-align: left; font-size: var(--t-title); overflow-wrap: anywhere; }
.sg-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; padding: .7rem .9rem; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); border-radius: var(--r-s); }
.sg-note { position: relative; padding: .6rem .9rem .6rem 1.1rem; border: 1px solid color-mix(in srgb, var(--st) 55%, var(--line)); border-left: 4px solid var(--st); border-radius: var(--r-s); background: color-mix(in srgb, var(--st) 7%, var(--surface)); }
.sg-note .sg-nh { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.sg-note p { line-height: 1.7; overflow-wrap: anywhere; }
.sg-acts { gap: .5rem; }
.sg-up { display: inline-flex; align-items: center; gap: .25rem; }
.sg-up.on { background: var(--butter-soft); color: var(--butter); border-color: color-mix(in srgb, var(--butter) 50%, transparent); }
.sg-up .sg-upic { color: var(--gilt); } .sg-up.on .sg-upic { color: var(--butter); }
.sg-ch { margin-top: .2rem; padding-top: .5rem; border-top: 1px dotted var(--line-2); }
.sg-comments { display: flex; flex-direction: column; gap: .35rem; max-height: 40vh; overflow-y: auto; }
.sg-c { padding: .4rem .6rem; border-radius: var(--r-s); background: color-mix(in srgb, var(--surface-2) 70%, transparent); border: 1px solid transparent; }
.sg-c.admin { border-color: color-mix(in srgb, var(--primary) 35%, transparent); background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); }
.sg-cm { display: flex; align-items: center; gap: .3rem; font-size: var(--t-small); }
.sg-cm .sg-cdel { margin-left: auto; font-size: var(--t-micro); font-weight: 400; color: var(--ink-3); }
.sg-badge { display: inline-block; padding: 0 .35rem; font-size: var(--t-micro); font-family: var(--font-head); line-height: 1.4; color: var(--st-ink); background: var(--primary); border-radius: 2px; }
.sg-ct { overflow-wrap: anywhere; line-height: 1.6; }
.sg-cin { gap: .4rem; } .sg-cin input { flex: 1 1 auto; min-width: 0; } .sg-cnt { flex: none; font-size: var(--t-micro); }
/* 새 글 */
.sg-f { display: flex; flex-direction: column; gap: .25rem; }
.sg-f > .row { width: 100%; }
.sg-cats { display: flex; flex-wrap: wrap; gap: .3rem; }
/* 운영: 도장 칸 */
.sg-admin { display: flex; flex-direction: column; gap: .4rem; padding: .6rem .8rem; border: 1px dashed color-mix(in srgb, var(--primary) 50%, transparent); border-radius: var(--r-s); background: color-mix(in srgb, var(--primary-soft) 30%, transparent); }
.sg-al { font-family: var(--font-head); font-weight: 400; color: var(--primary); }
.sg-stbtns { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.sg-stb { padding: .15rem .25rem; min-height: auto; background: transparent; border: 1px solid transparent; box-shadow: none; opacity: .72; }
.sg-stb:hover:not(:disabled) { opacity: 1; background: transparent; }
.sg-stb.cur { opacity: 1; border-color: var(--ink-2); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.sg-stb .sg-stamp { transform: none; }
.sg-gmbar { gap: .35rem; margin-bottom: .6rem; } .sg-gmbar .sg-q { min-height: var(--ctl-s); max-width: 14rem; margin-left: auto; }
.sg-gmrow { align-items: flex-start; }
.sg-gmt { cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sg-gmt:hover { text-decoration: underline; }
.sg-gmbody { font-size: var(--t-small); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.5em; overflow: hidden; margin-top: .2rem; }
.gm-kpi.clk { cursor: pointer; } .gm-kpi.clk:hover { border-color: var(--line-2); }
@media (max-width: 600px) {
  .sg-filters { padding: .45rem .55rem; }
  .sg-tools .sg-q { flex: 1 1 100%; max-width: none; margin-left: 0; }
  .sg-item { align-items: flex-start; } .sg-ist { margin-top: .15rem; }
  .sg-title { white-space: normal; }
  .sg-acts { flex-direction: column; align-items: stretch; } .sg-acts > .row { justify-content: flex-end; }
  .sg-cin { flex-wrap: wrap; } .sg-cin input { flex-basis: 100%; }
  .sg-gmbar .sg-q { max-width: none; flex: 1 1 100%; margin-left: 0; }
}
/* ── v6 건의 게시판 끝 ── */

/* 새 판 알림 · 점검 예고 띠 (public/js/version.js) */
.vbar { position: fixed; top: 4.9rem; left: 50%; transform: translateX(-50%); z-index: 85; display: flex; align-items: center; gap: .6rem; max-width: min(560px, calc(100vw - 2rem)); padding: .5rem .8rem; background: var(--surface) var(--paper); border: 1px solid var(--line-2); border-left: 4px solid var(--gilt); box-shadow: 0 8px 20px rgba(20, 10, 4, .35); font-size: .9rem; }
.vbar[hidden] { display: none; }
.vbar .grow { flex: 1; min-width: 0; }
.vbar-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.vbar-sub { font-size: .8rem; }
.vbar-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--gilt); flex: none; animation: vbarp 1.6s ease-in-out infinite; }
@keyframes vbarp { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .vbar-dot { animation: none; } }
@media (max-width: 600px) { .vbar { top: 7.6rem; width: calc(100vw - 2rem); } }
/* 운영 콘솔 「업데이트」 탭 (public/js/pages/gm_update.js) */
.gm-uplog { max-height: 22rem; overflow: auto; white-space: pre-wrap; word-break: break-all; font: .78rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); border: 1px solid var(--line); padding: .6rem; margin: .4rem 0 0; }


/* ── 동료 탭: 편성 띠 · 자동 편성 · 얼굴 모음 · 낱장 (public/js/autoform.js · pages/party.js) ── */
.pform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4) var(--sp-5); align-items: center; }
.pform.detail { align-items: start; }
.af-band { display: flex; justify-content: center; gap: var(--sp-5); min-width: 0; }
.af-row { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; }
.af-row + .af-row { padding-left: var(--sp-5); border-left: 1px dashed var(--line-2); }
.af-rl { font-family: var(--font-head); font-size: var(--t-small); color: var(--ink-3); letter-spacing: .12em; }
.af-cells { display: flex; gap: var(--sp-3); }
.af-slot { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: calc(var(--sz) + 10px); min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; min-height: 0; }
.af-slot .portrait { box-shadow: 0 0 0 1px var(--line-2), 0 2px 4px rgba(40, 24, 10, .18); }
.af-slot.me .portrait, .af-slot.me canvas { box-shadow: 0 0 0 2px var(--gilt), 0 2px 4px rgba(40, 24, 10, .18); }
.af-slot > canvas { width: var(--sz); height: var(--sz); border-radius: var(--r-s); background: var(--surface-2); }
.af-nm { font-size: var(--t-small); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-slot.empty i { display: block; width: var(--sz); height: var(--sz); border: 1px dashed var(--line-2); border-radius: var(--r-s); background: color-mix(in srgb, var(--surface-3) 35%, transparent); }
.af-slot.empty::after { content: ''; height: 1.1em; }
.pf-side { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); min-width: 210px; padding-left: var(--sp-5); border-left: 1px solid var(--line); }
.pf-pw { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.pf-pw span { font-size: var(--t-small); color: var(--ink-3); }
.pf-pw b { font-family: var(--font-head); font-size: 1.45rem; color: var(--ink); }
.af { display: flex; flex-direction: column; gap: .35rem; }
.af-go.big { min-height: var(--ctl-l); font-size: 1.02rem; letter-spacing: .08em; }
.af-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; }
.af-seg button { min-height: var(--ctl-s); padding: .15rem .4rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--ink-3); font-size: var(--t-small); }
.af-seg button + button { border-left: 1px solid var(--line); }
.af-seg button.sel, .af-seg button.sel:hover:not(:disabled) { background: var(--ink-2); color: var(--surface); }
.pf-more { justify-content: center; font-size: var(--t-small); color: var(--ink-2); margin-top: .15rem; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.ctile { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .65rem .4rem .5rem; min-width: 0; min-height: 0; font-weight: 400; background: var(--surface); }
.ctile.in { border-color: var(--gilt); box-shadow: inset 0 0 0 1px var(--gilt), var(--shadow-card); background: linear-gradient(180deg, color-mix(in srgb, var(--gilt-2) 16%, var(--surface)), var(--surface)); }
.ctile.busy .ct-por > .portrait { filter: grayscale(.7); opacity: .7; }
.ct-por { position: relative; display: block; margin-bottom: .45rem; }
.ct-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--surface); }
.ct-busy { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-size: var(--t-micro); padding: 0 .35rem; white-space: nowrap; background: var(--ink-2); color: var(--surface); border-radius: var(--r-s); }
.ct-nm { max-width: 100%; font-size: var(--t-ui); }
.ct-cl { max-width: 100%; font-size: var(--t-small); color: var(--ink-3); }
.ct-aff { display: inline-flex; align-items: center; gap: .2rem; font-size: var(--t-small); color: var(--ink-3); }
.ct-aff .affh { margin: 0; }
/* 호감 하트 다섯 칸 (public/js/core.js affHearts · hearts.js): 이름 바로 뒤, 한 줄을 밀지 않게 */
.affh { display: inline-flex; align-items: center; gap: 1px; flex: none; white-space: nowrap; margin-left: .35em; vertical-align: -.08em; color: var(--rose); line-height: 1; }
.affh .si.afh { width: 11px; height: 11px; stroke-width: 2.1; vertical-align: 0; }
.affh .afh:not(.full) > path:not(.afh-in) { stroke: color-mix(in srgb, var(--rose) 55%, var(--ink-3)); }
.affh .afh.full { fill: currentColor; }
.affh .afh-in { fill: currentColor; stroke: none; }
.affh.nm-gap, .ib-head > .affh { margin-left: 0; }
.affh-nm { margin-left: .35em; font-size: var(--t-small); color: var(--ink-3); white-space: nowrap; letter-spacing: -.01em; } /* 하트 곁의 단계 이름 (affHearts name: true) */
.affh[data-stage="4"] .affh-nm, .affh[data-stage="5"] .affh-nm { color: color-mix(in srgb, var(--rose) 70%, var(--ink-2)); }
.ct-aff .affh { flex-wrap: wrap; justify-content: center; row-gap: .15rem; max-width: 100%; }
.ct-aff .affh-nm { flex-basis: 100%; margin-left: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.nmrow { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; gap: 0; }
.nmrow > .npcname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctile.add { justify-content: center; border-style: dashed; background: transparent; box-shadow: none; color: var(--ink-3); }
.ct-plus { position: relative; width: 60px; height: 60px; margin-bottom: .2rem; }
.ct-plus::before, .ct-plus::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--line-2); transform: translate(-50%, -50%); }
.ct-plus::before { width: 22px; height: 2px; } .ct-plus::after { width: 2px; height: 22px; }
.modal.csheet { width: min(440px, 100%); }
.cs-head { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); }
.cs-head h3 { margin: 0; }
.cs-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); }
.cs-acts button { min-height: var(--ctl-l); }
.cs-swap { display: flex; flex-direction: column; gap: .35rem; }
.cs-swap:empty { display: none; }
.cs-more { margin: var(--sp-2) 0; }
.cs-etc { gap: .3rem; padding-top: var(--sp-2); border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  .pform { grid-template-columns: 1fr; gap: var(--sp-3); }
  .af-band { gap: var(--sp-3); }
  .af-row + .af-row { padding-left: var(--sp-3); }
  .af-cells { gap: var(--sp-2); }
  .pf-side { padding-left: 0; border-left: 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); min-width: 0; }
  .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .ctile { padding: .5rem .25rem .4rem; }
}
/* 동료 › 내 동료: 편성 띠는 내용만큼만(가운데), 오른쪽 손잡이도 촘촘히. 얼굴 모음은 작은 칸을 가운데로 */
.pform:not(.detail) { width: fit-content; max-width: 100%; margin-inline: auto; gap: .5rem 1.1rem; padding: .35rem .9rem .45rem; }
.pform .pf-side { min-width: 200px; gap: .3rem; padding-left: 1.1rem; }
.pform .pf-pw b { font-size: 1.2rem; }
.pform .af { gap: .3rem; }
.pform .af-go.big { min-height: var(--tap); font-size: .98rem; }
.pform .pf-more { margin-top: 0; }
.pform:not(.detail) .af-band { gap: .9rem; }
.pform:not(.detail) .af-row { gap: .3rem; }
.pform:not(.detail) .af-row + .af-row { padding-left: .9rem; }
.pform:not(.detail) .af-cells { gap: .5rem; }
.cgrid { grid-template-columns: repeat(auto-fit, minmax(96px, 112px)); justify-content: center; gap: .45rem; margin-top: .45rem; }
.ctile { padding: .4rem .3rem .35rem; gap: .05rem; }
.ct-por { margin-bottom: .2rem; }
.ct-plus { width: 44px; height: 44px; }
@media (max-width: 860px) {
  .pform:not(.detail) { width: auto; gap: .35rem; padding: .3rem .4rem .4rem; }
  .pform .pf-side { min-width: 0; padding: .35rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem .6rem; }
  .pform .pf-side > .af { grid-column: 1 / -1; grid-row: 2; flex-direction: row; }
  .pform .pf-side > .af > .af-go { flex: 1 1 0; min-width: 0; }
  .pform .pf-side > .af > .af-seg { flex: 1.4 1 0; min-width: 0; }
  .pform .af-seg button { min-height: var(--tap); }
  .pform .pf-pw { justify-content: flex-start; gap: .5rem; }
  .cgrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .35rem; }
}
.af-lineup { align-items: center; padding: .5rem .4rem; }
.af-lineup .af-band { gap: .5rem; }
.af-lineup .af-row + .af-row { padding-left: .5rem; }
.af-lineup .af-cells { gap: .3rem; }

/* ── 펫 효과: 보유 · 배치 · 쓰다듬기 · 밥 (public/js/pages/petfx.js) ── */
.ic.pix { image-rendering: pixelated; }
.pethelp-box { margin: .35rem 0 .55rem; padding: .55rem .7rem .6rem; background: color-mix(in srgb, var(--paper) 55%, var(--surface)); border: 1px solid var(--line); border-left: 3px solid var(--gilt); border-radius: var(--r-s); }
.pethelp-box h4, .pethelp-box summary { margin: 0 0 .35rem; font-family: var(--font-head); font-size: .9rem; color: var(--ink); }
details.pethelp-box summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .35rem; margin: 0; }
details.pethelp-box summary::-webkit-details-marker { display: none; }
details.pethelp-box summary::after { content: '펼치기'; margin-left: auto; font-family: var(--font-body); font-size: .72rem; color: var(--ink-3); }
details.pethelp-box[open] summary { margin-bottom: .35rem; }
details.pethelp-box[open] summary::after { content: '접기'; }
.pethelp { width: 100%; border-collapse: collapse; font-size: .8rem; line-height: 1.5; }
.pethelp th { width: 4.6em; text-align: left; vertical-align: top; padding: .22rem .5rem .22rem 0; color: color-mix(in srgb, var(--gilt) 45%, var(--ink)); font-weight: 700; white-space: nowrap; }
.pethelp td { padding: .22rem 0; color: var(--ink-2); }
.pethelp tr + tr :is(th, td) { border-top: 1px dashed color-mix(in srgb, var(--line-2) 70%, transparent); }
.petfx { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .28rem .8rem; margin: .5rem 0 .8rem; font-size: .84rem; }
.petfx dt { color: var(--ink-3); }
.petfx dd { margin: 0; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; }
.petfx dd.on { color: var(--mint); font-weight: 700; }
.petdesc { margin: .5rem 0 0; font-size: .86rem; line-height: 1.7; color: var(--ink-2); font-style: italic; }
.scene-head .por.pgpor { width: 72px; height: 72px; }
.pgres-ic { width: 72px; height: 72px; }
.pgres-g { font-size: .7rem; color: var(--c); font-weight: 700; }
.pgres-fx { font-size: .72rem; color: var(--ink-2); line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 640px) { .pethelp { font-size: .78rem; } .pethelp th { width: 4.2em; } .pgres-ic { width: 66px; height: 66px; } }
/* 가방 머리: 「가방 37 / 50」 · 가는 띠 · 늘리기 (public/js/pages/char.js bagHead) */
.bar.warn > i { background: linear-gradient(180deg, color-mix(in srgb, var(--rose) 40%, var(--gilt-2)), color-mix(in srgb, var(--rose) 55%, var(--gilt))); }
.baghint { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .84rem; color: var(--ink-2); padding: .4rem .6rem; border: 1px dashed var(--line-2); border-radius: 2px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.baghint span { flex: 1 1 220px; }
.bagx { display: flex; flex-direction: column; gap: .35rem; margin: .2rem 0 .6rem; }
.bagx .row { gap: .7rem; align-items: baseline; }
.bagx .row > .faint:first-child { min-width: 2.2em; }
.bagx p { margin: .2rem 0 0; font-size: .84rem; }
/* 홈 지도 바로 아래에 펼치는 장소 패널 (town.js) */
.tpanel { margin-top: .55rem; scroll-margin-top: 4.5rem; }
.tpanel[hidden] { display: none; }
.tpanel .tp-box { gap: .55rem; animation: tpIn .22s ease-out both; }
.tp-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.tp-head h3 { margin: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-head .tp-full { flex: none; font-size: var(--t-small); }
.tp-head .tp-x { flex: none; width: 28px; height: 28px; min-height: 0; padding: 0; }
.tp-head .tp-x .si { width: 14px; height: 14px; }
.tp-desc { margin: 0; font-size: .86rem; line-height: 1.7; color: var(--ink-2); }
.tp-acts { gap: .35rem; align-items: center; flex-wrap: wrap; }
.tp-stat { margin-right: .2rem; }
.tp-embed { border-top: 1px dotted var(--line-2); padding-top: .55rem; min-width: 0; }
.tp-npc { gap: .45rem; border-top: 1px dotted var(--line-2); padding-top: .55rem; }
.tp-nn { font-family: var(--font-head); font-weight: 400; font-size: 1rem; }
@keyframes tpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tpanel .tp-box { animation: none; } }

/* ── 명함 꾸미기 v6: 배경 · 테두리 · 이펙트 · 이름 효과 (public/js/cardfx.js · src/data/cardfx.js) ── */
@property --cfa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cfx-host { position: relative; isolation: isolate; }
.cfx-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; z-index: 3; border-radius: inherit; }
/* 배경: 큰 명함은 바깥 틀이 입고, 안쪽 작은 명함은 비친다 */
.cbg { background-color: var(--surface); }
.bigcard.cbg > .ncard, .bigcard.cfr > .ncard { background: color-mix(in srgb, var(--surface) 28%, transparent); border-color: color-mix(in srgb, var(--ink) 16%, transparent); box-shadow: none; }
.cbg .pin-rel { background: color-mix(in srgb, var(--surface) 38%, transparent); }
.cbg-g-dawn { background: linear-gradient(170deg, #fbe2ea 0%, #f3e7f3 46%, #dceaf8 100%); }
.cbg-g-dusk { background: linear-gradient(176deg, #fde3c2 0%, #f9ceb6 48%, #e6c4dc 100%); }
.cbg-g-lake { background: linear-gradient(180deg, #e4f2f4 0%, #cde3ee 52%, #e5f0e5 100%); }
.cbg-g-lamp { background: radial-gradient(120% 90% at 88% 6%, #ffe6a2 0%, #f9e2b8 38%, #efe1c9 100%); }
.cbg-g-ash { background: var(--cbgt) 7px 3px / 40px 40px, linear-gradient(180deg, #b8b6c8 0%, #a9a7bb 60%, #b9b3b6 100%); }
.cbg-p-floral { background: var(--cbgt) 0 0 / 32px 32px, var(--paper), linear-gradient(180deg, #f7ecd6, #efdcbd); }
.cbg-p-chart { background: var(--cbgt) 0 0 / 48px 48px, linear-gradient(0deg, rgba(106, 127, 174, .07) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, rgba(106, 127, 174, .07) 1px, transparent 1px) 0 0 / 12px 12px, var(--paper), linear-gradient(180deg, #efe6d2, #e6d8bb); }
.cbg-a-shimmer { background: linear-gradient(162deg, #f4e2f2 0%, #e3ecfa 50%, #f7ebda 100%); }
.cbg-a-shimmer::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .62) 45%, rgba(255, 236, 248, .35) 52%, transparent 64%) 0 0 / 260% 100% no-repeat; animation: cfx-sweep 6.5s ease-in-out infinite; }
.cbg-a-pearl { background: linear-gradient(118deg, #f7eef5, #e6eef9, #f4f1e4, #e6f4f0, #f3e6f3, #f7eef5) 0 50% / 320% 320%; animation: cfx-pearl 16s ease-in-out infinite alternate; }
.cbg-a-galaxy { background: var(--cbgt) 0 0 / 40px 40px, radial-gradient(ellipse at 24% 18%, rgba(170, 130, 235, .38), transparent 58%), radial-gradient(ellipse at 82% 92%, rgba(90, 150, 230, .32), transparent 55%), linear-gradient(180deg, #1e1a3c, #29225a 58%, #1b2546); }
.cbg-a-galaxy::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--cbgt2) 10px 6px / 40px 40px; animation: cfx-twk 3.2s steps(2, jump-none) infinite; }
.cfx-dark { --ink: #f2eeff; --ink-2: #d9d2f4; --ink-3: #ada6d2; --butter: #ffe08a; --rose: #ffb3cb; --line: #6a5f9a; --line-2: #8a80bb; --surface: #2c2652; --surface-3: #3a3368; color: var(--ink); }
:root[data-tone="dark"] .cbg-g-dawn { background: linear-gradient(170deg, #45303f 0%, #35304a 46%, #283550 100%); }
:root[data-tone="dark"] .cbg-g-dusk { background: linear-gradient(176deg, #4d3527 0%, #4a2f30 48%, #3a2c42 100%); }
:root[data-tone="dark"] .cbg-g-lake { background: linear-gradient(180deg, #23383d 0%, #1f3242 52%, #253a30 100%); }
:root[data-tone="dark"] .cbg-g-lamp { background: radial-gradient(120% 90% at 88% 6%, #6a4a1c 0%, #43331f 40%, #33291f 100%); }
:root[data-tone="dark"] .cbg-g-ash { background: var(--cbgt) 7px 3px / 40px 40px, linear-gradient(180deg, #3a3846 0%, #2e2c3a 60%, #33302f 100%); }
:root[data-tone="dark"] .cbg-p-floral, :root[data-tone="dark"] .cbg-p-chart { background-color: #3d3226; background-blend-mode: normal; }
:root[data-tone="dark"] .cbg-p-floral { background: var(--cbgt) 0 0 / 32px 32px, linear-gradient(180deg, #43372a, #3a2f23); }
:root[data-tone="dark"] .cbg-p-chart { background: var(--cbgt) 0 0 / 48px 48px, linear-gradient(0deg, rgba(160, 180, 230, .08) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, rgba(160, 180, 230, .08) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(180deg, #2f3040, #282836); }
:root[data-tone="dark"] .cbg-a-shimmer { background: linear-gradient(162deg, #3f2f45 0%, #2c3550 50%, #45392a 100%); }
:root[data-tone="dark"] .cbg-a-shimmer::before { background-image: linear-gradient(112deg, transparent 32%, rgba(255, 240, 255, .16) 45%, rgba(255, 220, 240, .08) 52%, transparent 64%); }
:root[data-tone="dark"] .cbg-a-pearl { background-image: linear-gradient(118deg, #3e3442, #2f3648, #3d3a2e, #2d3e3b, #3c3045, #3e3442); }

/* 테두리: 도트 그림 하나를 9칸으로 늘린다. 큰 명함 2배, 작은 명함 1.5배 */
.cfr { border-color: transparent !important; box-shadow: none !important; }
.bigcard.cfr { padding: 16px; }
.ncard.cfr { padding: 12px 14px; }
.cfx-fr { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; --frw: calc(var(--frn) * 2px); }
.ncard > .cfx-fr { --frw: calc(var(--frn) * 1.5px); }
.cfx-fr > .fimg { position: absolute; inset: 0; border: var(--frw) solid transparent; border-image: var(--frimg) var(--frn) / var(--frw) round; image-rendering: pixelated; }
.cfr-hue { animation: cfx-hue 14s linear infinite; }
.cfr-rainbow > .ring { position: absolute; inset: calc(var(--frw) * .22); padding: calc(var(--frw) * .34); background: conic-gradient(from var(--cfa), #ff8a8a 0 16.6%, #ffbe6a 0 33.3%, #ffe78a 0 50%, #9fe08a 0 66.6%, #8ac8ff 0 83.3%, #b79cf0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: cfx-spin 9s linear infinite; }
.cfr-twinkle > .tw { position: absolute; width: 2px; height: 2px; background: #fff; opacity: 0; box-shadow: 0 -2px #fff3c0, 0 2px #fff3c0, -2px 0 #fff3c0, 2px 0 #fff3c0; animation: cfx-tw 3.4s linear infinite; }
.cfr-twinkle > .t0 { top: calc(var(--frw) * .45); left: 24%; } .cfr-twinkle > .t1 { top: calc(var(--frw) * .45); left: 71%; animation-delay: -.9s; }
.cfr-twinkle > .t2 { right: calc(var(--frw) * .45); top: 38%; animation-delay: -1.7s; } .cfr-twinkle > .t3 { bottom: calc(var(--frw) * .45); left: 46%; animation-delay: -2.5s; }
.cfr-twinkle > .t4 { left: calc(var(--frw) * .45); top: 62%; animation-delay: -1.2s; } .cfr-twinkle > .t5 { bottom: calc(var(--frw) * .45); left: 86%; animation-delay: -3s; }
.cfr-twinkle { filter: drop-shadow(0 0 3px rgba(255, 214, 120, .35)); }

/* 이름 효과 */
.nfx-softglow { color: #9a5a22 !important; text-shadow: 0 0 6px rgba(255, 196, 110, .95), 0 0 12px rgba(255, 186, 104, .55); animation: cfx-glow 3.8s ease-in-out infinite; }
:root[data-tone="dark"] .nfx-softglow, .cfx-dark .nfx-softglow { color: #ffe3b4 !important; }
.nfx-dawnink { background: linear-gradient(90deg, #d24f80, #9a62cc 52%, #3f83cc); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
:root[data-tone="dark"] .nfx-dawnink, .cfx-dark .nfx-dawnink { background-image: linear-gradient(90deg, #ff9fc2, #cfaeff 52%, #8fcaff); }
.nfx-dyedname { color: #c0507a; animation: cfx-dye 12s linear infinite; }
:root[data-tone="dark"] .nfx-dyedname, .cfx-dark .nfx-dyedname { animation-name: cfx-dye-n; color: #ff9ec0; }
.nfx-glitter, .nfx-stardust { position: relative; }
.nfx-glitter .nt { background: linear-gradient(90deg, #a8701a, #dda236 40%, #c07a52 70%, #a8701a); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-tone="dark"] .nfx-glitter .nt, .cfx-dark .nfx-glitter .nt { background-image: linear-gradient(90deg, #ffd27a, #fff0b8 40%, #ffc0a8 70%, #ffd27a); }
.nfx-stardust .nt { background: linear-gradient(90deg, #d8487a, #e0862a, #b8a01a, #3f9a5a, #3a7ad0, #8452cc, #d8487a) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cfx-rbw 7s linear infinite; }
:root[data-tone="dark"] .nfx-stardust .nt, .cfx-dark .nfx-stardust .nt { background-image: linear-gradient(90deg, #ff9ec0, #ffc08a, #ffe88a, #a8f0b0, #9ad0ff, #cdb0ff, #ff9ec0); }
.gls { position: absolute; inset: 0; pointer-events: none; }
.gls .gl { position: absolute; top: 50%; left: -8%; width: 2px; height: 2px; margin-top: -1px; background: #fff; box-shadow: 0 -2px #fff6c8, 0 2px #fff6c8, -2px 0 #fff6c8, 2px 0 #fff6c8; opacity: 0; animation: cfx-gl 3.6s linear infinite; }
.gls .g1 { animation-delay: -1.2s; animation-duration: 4.2s; margin-top: -5px; } .gls .g2 { animation-delay: -2.6s; margin-top: 3px; }
.nfx-stardust .gl { background: #fff; box-shadow: 0 -2px #ffe0f0, 0 2px #e0f0ff, -2px 0 #fff3c0, 2px 0 #e8ffe0; }

@keyframes cfx-sweep { 0% { background-position: 130% 0; } 60%, 100% { background-position: -40% 0; } }
@keyframes cfx-pearl { to { background-position: 100% 50%; } }
@keyframes cfx-twk { 0% { opacity: .15; } 50% { opacity: 1; } 100% { opacity: .15; } }
@keyframes cfx-hue { to { filter: hue-rotate(360deg); } }
@keyframes cfx-spin { to { --cfa: 360deg; } }
@keyframes cfx-tw { 0%, 58%, 100% { opacity: 0; transform: none; } 64% { opacity: 1; } 70% { opacity: 1; transform: scale(1.5); } 78% { opacity: .8; transform: none; } 84% { opacity: 0; } }
@keyframes cfx-glow { 50% { text-shadow: 0 0 3px rgba(255, 196, 110, .6), 0 0 7px rgba(255, 186, 104, .25); } }
@keyframes cfx-dye { 0%, 100% { color: #c0507a; } 25% { color: #b8701c; } 50% { color: #3c8a58; } 75% { color: #3a68c0; } }
@keyframes cfx-dye-n { 0%, 100% { color: #ff9ec0; } 25% { color: #ffcf7a; } 50% { color: #9fe8b0; } 75% { color: #9cc8ff; } }
@keyframes cfx-rbw { to { background-position: 300% 0; } }
@keyframes cfx-gl { 0% { left: -8%; opacity: 0; } 8% { opacity: 1; } 30% { opacity: .5; } 45% { opacity: 1; } 62% { left: 108%; opacity: 0; } 100% { left: 108%; opacity: 0; } }

/* 움직임 줄이기: 기기 설정 · 설정 › 화면 › 움직임 — 멈춘 그림 */
@media (prefers-reduced-motion: reduce) {
  .cfx-a, .cfx-a *, .cfx-a::before, .cfx-a *::before { animation: none !important; }
  .nfx-dyedname.cfx-a { color: #c0507a !important; }
  .cfr-twinkle > .t0, .cfr-twinkle > .t3 { opacity: 1; }
  .gls .g0 { left: 22%; opacity: 1; } .gls .g1 { left: 68%; opacity: .8; }
}
:root[data-motion="reduce"] :is(.cfx-a, .cfx-a *, .cfx-a::before, .cfx-a *::before) { animation: none !important; }
:root[data-motion="reduce"] .nfx-dyedname.cfx-a { color: #c0507a !important; }
:root[data-motion="reduce"] :is(.cfr-twinkle > .t0, .cfr-twinkle > .t3) { opacity: 1; }
:root[data-motion="reduce"] .gls .g0 { left: 22%; opacity: 1; } :root[data-motion="reduce"] .gls .g1 { left: 68%; opacity: .8; }

/* 명함 꾸미기 상점 (public/js/pages/cardshop.js) */
.cshop { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.cshop-prev { position: sticky; top: .6rem; display: grid; gap: .6rem; }
.cshop-stage { padding: 1rem; border-radius: var(--r); background: var(--surface-3) var(--paper); border: 1px solid var(--line-2); box-shadow: inset 0 0 0 3px var(--surface-2), inset 0 0 0 4px var(--line); }
.cshop-stage .bigcard { margin: 0 auto; max-width: 300px; }
.cshop-tag { font-family: var(--font-head); font-size: .82rem; color: var(--ink-3); text-align: center; min-height: 1.2em; }
.cshop-buy { display: grid; gap: .4rem; padding: .7rem .8rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface) var(--paper); }
.cshop-buy h4 { margin: 0; font-family: var(--font-head); font-size: 1.05rem; }
.cshop-buy p { margin: 0; font-size: .8rem; color: var(--ink-2); line-height: 1.5; }
.cshop-buy .row { gap: .4rem; flex-wrap: wrap; align-items: center; }
.cshop-buy .lock { font-size: .76rem; color: var(--rose); }
.cshop-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .7rem; }
.cshop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .55rem; }
.csw { position: relative; display: grid; grid-template-rows: 64px auto auto; align-items: stretch; justify-items: stretch; justify-content: stretch; white-space: normal; box-shadow: none; gap: .25rem; padding: .35rem .35rem .45rem; text-align: left; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); min-height: 0; cursor: pointer; color: var(--ink); font: inherit; }
button.csw:hover:not(:disabled) { border-color: var(--line-2); background: var(--surface); }
button.csw.sel, button.csw.sel:hover:not(:disabled) { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); background: var(--surface); color: var(--ink); }
button.csw.sel .sw-p { opacity: 1; }
.csw .sw-art { position: relative; overflow: hidden; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); display: grid; place-items: center; }
.csw .sw-art:not(.cbg):not(.ncard) { background: var(--surface) var(--paper); } /* 견본 배경: 새 꾸미기(cbg-*)는 제 그림을 그대로 */
.csw .sw-art.cfr { border: 0; }
.csw .sw-art .cfx-fr { --frw: calc(var(--frn) * 1.5px); }
.csw .sw-art .n { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; max-width: 92%; overflow: hidden; white-space: nowrap; }
.csw b { font-family: var(--font-head); font-weight: 400; font-size: .86rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csw .sw-p { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; font-size: .72rem; color: var(--ink-3); min-height: 1.1rem; }
.csw .sw-p .cur { font-size: .74rem; }
.csw .mark { position: absolute; top: .3rem; right: .3rem; z-index: 4; font-size: .64rem; padding: 0 .3rem; border-radius: 2px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); line-height: 1.5; }
.csw .mark.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.csw.locked .sw-art { filter: saturate(.55); }
.cshop-none { display: grid; place-items: center; color: var(--ink-3); font-size: .8rem; }
@media (max-width: 760px) { .cshop { grid-template-columns: minmax(0, 1fr); } .cshop-prev { position: static; } .cshop-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }

/* ── 겹창 공통 (core.js modal · trackOverlay): ✕ 는 낱장 오른쪽 위에 붙어 스크롤해도 보이고, 뒤 화면은 잠근다 ── */
html.ov-open, html.ov-open body { overflow: hidden; }
.modal-back { overscroll-behavior: contain; padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); }
.modal { overscroll-behavior: contain; position: relative; }
.modal > .mx {
  position: sticky; top: 0; z-index: 6; order: -1; align-self: flex-end; flex: none;
  width: 30px; height: 30px; min-height: 0; padding: 0; margin: -.25rem -.4rem calc(-30px - .5rem) 0; box-sizing: border-box;
  display: grid; place-items: center; line-height: 0; color: var(--ink-3);
  background: color-mix(in srgb, var(--ink) 7%, transparent); border: 0; border-radius: 50%; box-shadow: none;
  transition: color .15s, background-color .15s, transform .15s;
}
.modal > .mx::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; } /* 보이는 원은 30px, 누르는 자리는 46px */
.modal > .mx:hover:not(:disabled), .modal > .mx:focus-visible { color: var(--gilt-2, var(--ink)); background: color-mix(in srgb, var(--gilt) 18%, transparent); transform: rotate(90deg); }
.ff-x { position: absolute; top: .35rem; right: .35rem; z-index: 3; width: 30px; height: 30px; min-height: 0; padding: 0; display: grid; place-items: center; line-height: 0; color: var(--ink-3);
  background: color-mix(in srgb, var(--ink) 7%, transparent); border: 0; border-radius: 50%; box-shadow: none; transition: color .15s, background-color .15s, transform .15s; }
.ff-x::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.ff-x:hover, .ff-x:focus-visible { color: var(--gilt-2, var(--ink)); background: color-mix(in srgb, var(--gilt) 18%, transparent); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .modal > .mx, .ff-x { transition: none; } .modal > .mx:hover, .ff-x:hover { transform: none; } }
.mx > .si, .ff-x > .si { display: block; width: 14px; height: 14px; stroke-width: 1.8; margin: 0; } /* 닫기: 가는 선 ✕ 를 원 한가운데 (docs/UI_ICONS.md) */
.modal > .mx + h3 { text-align: center; font-size: 1.3rem; padding-inline: 2.2rem; } /* ✕ 가 맨 앞에 붙어도 첫 제목은 첫 제목 */
.modal > .mx + :is(div, header) { padding-right: 2.2rem; }
.modal > .mx + .page-head { padding-inline: 2.2rem; } /* 가운데 정렬 간판은 양쪽을 같게: 닫기 단추 자리만큼 오른쪽만 비우면 간판이 왼쪽으로 쏠린다 */
.fanfare { overscroll-behavior: contain; padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px)); }
.ff-box { max-height: calc(100dvh - 2rem); overflow-y: auto; }
@media (max-width: 640px) {
  .modal-back { padding: max(.5rem, env(safe-area-inset-top, 0px)) max(.5rem, env(safe-area-inset-right, 0px)) max(.5rem, env(safe-area-inset-bottom, 0px)) max(.5rem, env(safe-area-inset-left, 0px)); }
  .modal { max-height: calc(100dvh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .modal > .mx { margin: -.2rem -.3rem calc(-30px - .45rem) 0; }
  .modal > .mx + h3 { font-size: 1.18rem; }
}
/* ── 겹창 공통 끝 ── */
/* 돌봄 막대: 친밀도 · 다음 단계 (값은 서버 응답 그대로). 늘 때 조용히 차오르고 +n 이 한 번 떠오른다 */
.carebars { display: grid; gap: .3rem; margin: .55rem 0 .45rem; }
.carebars.compact { margin: .2rem 0 0; gap: .1rem; }
.cb-row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; align-items: center; gap: .5rem; font-size: .78rem; border-radius: var(--r-s); padding: .05rem .2rem; transition: background-color .9s ease; }
.carebars.compact .cb-row { grid-template-columns: 3.4em minmax(0, 1fr) auto; font-size: .72rem; padding: 0; }
.cb-l { color: var(--ink-3); white-space: nowrap; }
.cb-v { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .9s ease; }
.cb-t { position: relative; display: block; height: 6px; background: var(--track, var(--surface-3)); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(0,0,0,.18); }
.carebars.compact .cb-t { height: 4px; }
.cb-t > i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--rose) 75%, var(--gilt)), var(--rose)); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.cb-row:nth-child(2) .cb-t > i { background: linear-gradient(90deg, color-mix(in srgb, var(--gilt) 70%, var(--surface)), var(--gilt)); }
.cb-row:nth-child(3) .cb-t > i { background: linear-gradient(90deg, color-mix(in srgb, var(--sky) 70%, var(--surface)), var(--sky)); }
.cb-row.hit { background: color-mix(in srgb, var(--gilt) 16%, transparent); transition: none; }
.cb-row.hit .cb-v { color: var(--ink); font-weight: 700; transition: none; }
.cb-float { position: absolute; right: 0; top: -.2rem; transform: translateY(-50%); font-size: .74rem; font-weight: 700; color: color-mix(in srgb, var(--gilt) 60%, var(--ink)); pointer-events: none; white-space: nowrap; animation: cbfloat 1.2s ease-out forwards; text-shadow: 0 1px 0 var(--surface); }
@keyframes cbfloat { from { opacity: 0; transform: translateY(-20%); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-160%); } }
.cb-note { display: none; margin: .15rem 0 0; font-size: .78rem; color: var(--ink-2); font-style: italic; }
.cb-note.on { display: block; animation: cbnote .5s ease-out; }
@keyframes cbnote { from { opacity: 0; } }
.petcare { gap: .3rem; margin: .1rem 0 .3rem; }
.petfood-list { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .4rem; }
.hit > .petfx { animation: cbhit 1.6s ease-out; border-radius: var(--r-s); }
@keyframes cbhit { from { background: color-mix(in srgb, var(--gilt) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .cb-t > i, .cb-row, .cb-v { transition: none; }
  .cb-float { display: none; }
  .cb-note.on, .hit > .petfx { animation: none; }
}
@media (max-width: 860px) { .cs-etc button { min-height: var(--tap); } .cs-acts button { min-height: 48px; padding-inline: .3rem; } }


/* ── 원정 진행: 무대가 주인공. 파티 · 지도는 옆에 작게 (pages/dungeon.js ExpView) ── */
.exprun .expside > .plate.tight { padding: .55rem .6rem; }
.expmap > h3 { font-size: var(--t-sub); margin-bottom: .35rem; }
.ptight { display: flex; flex-direction: column; gap: .3rem; }
.prow { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .3rem; align-items: center; }
.prow + .prow { padding-top: .3rem; border-top: 1px dashed var(--line); }
.prow > .rl { position: static; transform: none; writing-mode: vertical-rl; font-family: var(--font-head); font-size: var(--t-micro); color: var(--ink-3); letter-spacing: .15em; justify-self: center; }
.pcells { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pchip { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .45rem; align-items: center; padding: .25rem .35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); min-width: 0; }
.pchip.me { border-color: var(--gilt); }
.pchip.dead { filter: grayscale(.9) sepia(.3); opacity: .55; }
.pc-por { display: block; width: 40px; height: 40px; }
.pc-por > canvas, .pc-por > .portrait { width: 40px !important; height: 40px !important; border-radius: var(--r-s); }
.pc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-top { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.pc-nm { flex: 1 1 auto; min-width: 0; font-size: var(--t-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-pips { display: inline-flex; gap: 3px; flex: none; }
.pc-pips span { width: 6px; height: 6px; transform: rotate(45deg); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.pc-pips span.on { background: var(--pip); box-shadow: 0 0 4px rgba(192, 138, 42, .6); }
.pc-hp { position: relative; height: 5px; background: var(--track); border-radius: 3px; overflow: hidden; }
.pc-hp > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--hp); transition: width .25s; }
.pc-hp > i.sh { background: color-mix(in srgb, var(--sh) 75%, #fff); opacity: .85; }
.pc-bot { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: var(--t-micro); color: var(--ink-3); }
.pc-hpn { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.pc-it { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; }
.pc-it b { position: absolute; right: -3px; bottom: -3px; font-size: .58rem; line-height: 1; color: var(--ink); text-shadow: 0 0 2px var(--surface), 0 0 2px var(--surface); }
.pc-cards { display: inline-flex; gap: 2px; flex: none; }
.pc-card { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--surface-2); font-size: .6rem; overflow: hidden; }
.pc-card.used { box-shadow: 0 0 0 2px var(--gilt); }
.expmap .dchart-wrap { max-width: 232px; }
.expmap .dc-legend { font-size: .66rem; gap: .2rem .45rem; }
.expmap .dmap .floor { gap: 3px; }
@media (max-width: 860px) {
  .exprun .expside { gap: .6rem; }
  .exprun .expside > .expparty, .exprun .expside > .expmap { order: -1; }
  .ptight { gap: .25rem; }
  .prow { grid-template-columns: 1.1rem minmax(0, 1fr); }
  .prow + .prow { padding-top: .25rem; }
  .pcells { flex-direction: row; gap: .25rem; }
  .pchip { flex: 1 1 0; max-width: calc(50% - .125rem); grid-template-columns: 34px minmax(0, 1fr); padding: .2rem .3rem; gap: .35rem; }
  .pc-por, .pc-por > canvas, .pc-por > .portrait { width: 34px !important; height: 34px !important; }
  .expmap .dchart-wrap { max-width: 200px; }
}
/* 마을 사람 · 동료의 이름 빛깔 (src/data/name_colors.js · core.js npcName · nameNodes): 밝은 바탕은 --ncl, 어두운 바탕은 --ncd */
.npcname { color: var(--ncl, inherit); font-weight: 700; text-decoration: underline 1px color-mix(in srgb, var(--ncl, currentColor) 35%, transparent); text-underline-offset: .18em; } /* 인물마다 다른 이름 색 · 굵게 · 옅은 밑줄로 눈에 띄게 */
:root[data-tone="dark"] .npcname, .topbar .npcname, .storybar .npcname { color: var(--ncd, inherit); }

/* ── 인물 루트 (src/game/route.js · public/js/route.js) ── */
/* 지나온 선택: 세로 줄 */
.modal.routetl { width: min(var(--modal-l), 100%); }
.rt-body { display: flex; flex-direction: column; gap: .7rem; }
.rt-head { display: flex; flex-direction: column; gap: .25rem; }
.rt-who { display: flex; align-items: baseline; gap: .6rem; font-size: 1.12rem; font-family: var(--font-head); }
.rt-stage { font-size: .8rem; color: var(--ink-3); letter-spacing: .08em; }
.rt-hint { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.7; }
.rt-ends { display: flex; flex-wrap: wrap; gap: .35rem; }
.rt-endchip { font-size: .8rem; padding: .15rem .6rem; border: 1px solid var(--gilt); border-radius: 999px; color: color-mix(in srgb, var(--gilt) 60%, var(--ink)); background: color-mix(in srgb, var(--gilt) 10%, transparent); }
.rt-endchip.now { background: color-mix(in srgb, var(--gilt) 24%, transparent); }
.rt-wick { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px dashed var(--line-2); border-radius: var(--r-s, 4px); min-height: 44px; }
.rt-wick.on { border-style: solid; border-color: var(--gilt); background: color-mix(in srgb, var(--gilt) 8%, transparent); }
.rt-pickhint { margin: 0; font-size: .88rem; color: var(--ink-2); text-align: center; }
.rt-line { list-style: none; margin: 0; padding: 0 0 0 1.1rem; position: relative; display: flex; flex-direction: column; gap: .7rem; }
.rt-line::before { content: ''; position: absolute; left: .42rem; top: .4rem; bottom: .4rem; width: 1px; background: var(--line-2); }
.rt-node { position: relative; display: flex; flex-direction: column; gap: .3rem; }
.rt-dot { position: absolute; left: -1.02rem; top: .95rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink-3); box-sizing: border-box; }
.rt-node.end .rt-dot { background: var(--gilt); border-color: color-mix(in srgb, var(--gilt) 60%, var(--ink)); width: .85rem; height: .85rem; left: -1.1rem; }
.rt-node.old .rt-dot { border-style: dotted; }
.rt-node.old .rt-card { opacity: .85; }
.rt-card { display: flex; flex-direction: column; align-items: stretch; gap: .15rem; text-align: left; width: 100%; padding: .55rem .75rem; min-height: 44px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); border-radius: var(--r-s, 4px); box-shadow: none; font: inherit; color: var(--ink); white-space: normal; }
.rt-card:disabled { opacity: .45; }
.rt-node.can .rt-card { border-color: var(--gilt); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gilt) 40%, transparent); }
.rt-node.end .rt-card { border-color: color-mix(in srgb, var(--gilt) 70%, var(--line)); }
.rt-meta { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--ink-3); letter-spacing: .03em; }
.rt-title { font-size: .8rem; color: var(--ink-3); line-height: 1.4; }
.rt-said { font-size: .98rem; color: var(--ink); padding-left: .55rem; border-left: 2px solid var(--gilt); line-height: 1.55; }
.rt-endmark { font-size: .82rem; color: color-mix(in srgb, var(--gilt) 65%, var(--ink)); letter-spacing: .04em; margin: 0; }
.rt-closes { display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: .78rem; color: var(--ink-3); opacity: .62; letter-spacing: .02em; }
.rt-ash.si { width: 18px; height: 18px; margin-left: auto; flex: none; align-self: center; color: var(--ink-3); }
.rt-node.ash .rt-card { background: transparent; border-style: dashed; border-color: color-mix(in srgb, #8a8178 45%, transparent); opacity: 1; }
.rt-node.ash .rt-card, .rt-node.ash .rt-said, .rt-node.ash .rt-title, .rt-node.ash .rt-meta { color: #9a928a; }
.rt-node.ash .rt-said { border-left-color: #b3aaa0; }
.rt-node.ash .rt-dot { background: #b3aaa0; border-color: #9a928a; }
:root[data-tone="dark"] .rt-node.ash .rt-card, :root[data-tone="dark"] .rt-node.ash .rt-said, :root[data-tone="dark"] .rt-node.ash .rt-title, :root[data-tone="dark"] .rt-node.ash .rt-meta { color: #7d766f; }
.rt-wickline { margin: 0; text-align: center; font-size: .9rem; color: var(--ink-3); }
.rt-lore { color: var(--ink-3); font-size: .92rem; }
.li.wickrow { border-top: 1px dotted var(--line-2); }

/* 동료 · 마을 사람의 편지: 낡은 양피지 한 장 (종이결 · 들쭉날쭉한 가장자리 · 잉크 · 보낸 이의 빛깔로 찍은 밀랍 봉인) */
.modal.lettermodal { background: none; border: 0; border-image: none; box-shadow: none; padding: 0; width: min(560px, 100%); overflow: visible; filter: drop-shadow(0 10px 18px rgba(20, 10, 2, .45)); }
:root[data-tone="dark"] .modal.lettermodal { background: none; }
.modal.lettermodal::before { display: none; }
.modal.lettermodal > .mx { position: absolute; top: .35rem; right: .35rem; margin: 0; z-index: 3; background: color-mix(in srgb, #f3e5c4 80%, transparent); }
.modal.lettermodal .letter {
  --ink-l: #2a2c45; --sepia: #6b4a2b; --seal: var(--ncl, #8a2e2a);
  position: relative; gap: 1rem; padding: 2.4rem 1.6rem 2.2rem; color: var(--ink-l);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .12  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .33  0 0 0 0 .16  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 12% 8%, rgba(140, 96, 40, .18), transparent 42%),
    radial-gradient(ellipse at 92% 88%, rgba(120, 78, 30, .22), transparent 46%),
    radial-gradient(ellipse at 80% 15%, rgba(255, 250, 230, .55), transparent 40%),
    linear-gradient(172deg, #f6ead0 0%, #efdfba 48%, #e6d0a3 100%);
  box-shadow: inset 0 0 38px rgba(110, 72, 28, .32), inset 0 0 6px rgba(90, 60, 20, .25);
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 12px) calc(100% - 12px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='7' viewBox='0 0 160 7'%3E%3Cpath d='M0 7 L0 1.8 L3 2.6 L5 0.6 L10 0.6 L13 3.4 L15 3.4 L18 0.6 L20 2.6 L24 0.6 L27 0.6 L32 2.6 L34 2.2 L39 0.6 L42 1 L47 0.6 L52 3.4 L56 0.6 L59 0.6 L64 2.2 L67 1.8 L71 1.2 L76 0.6 L81 1.8 L86 2.2 L89 0.6 L94 3.4 L97 1.8 L99 3.4 L101 3.4 L103 3.4 L106 2.6 L111 2.6 L114 2.6 L119 2.6 L122 1.8 L125 2.2 L128 1 L131 0.6 L136 1.8 L141 2.6 L144 1 L148 1.8 L153 0.6 L155 3.4 L159 1.2 L160 1.8 L160 7 Z'/%3E%3C/svg%3E") top left / 160px 7px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='7' viewBox='0 0 160 7'%3E%3Cpath d='M0 0 L0 5.8 L4 4.4 L6 6 L8 4.8 L13 3.6 L16 5.2 L19 3.6 L23 3.6 L27 6.4 L29 5.2 L33 6 L35 6.4 L38 6 L43 6 L47 5.2 L51 6 L54 6.4 L58 5.2 L61 3.6 L63 4.4 L65 5.8 L68 5.8 L71 4.4 L75 4.8 L79 6.4 L82 4.4 L86 3.6 L89 5.8 L93 4.8 L98 5.2 L102 5.2 L106 5.8 L109 6.4 L112 5.8 L115 6 L118 6.4 L122 4.8 L127 5.8 L130 5.2 L132 5.8 L136 3.6 L139 3.6 L144 5.2 L147 6 L152 3.6 L154 4.4 L159 4.4 L160 5.8 L160 0 Z'/%3E%3C/svg%3E") bottom left / 160px 7px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='160' viewBox='0 0 7 160'%3E%3Cpath d='M7 0 L2.6 0 L0.6 4 L1 8 L0.6 12 L0.6 15 L2.6 18 L0.6 21 L3.4 24 L0.6 26 L3.4 28 L3.4 31 L1.8 33 L0.6 38 L2.2 40 L3.4 43 L1.2 47 L1.8 50 L1.8 55 L0.6 59 L2.2 61 L2.6 65 L2.6 69 L0.6 72 L0.6 75 L1 78 L2.6 81 L3.4 84 L1.2 86 L1.8 91 L1 94 L0.6 99 L1.8 104 L1 106 L3.4 109 L1.2 112 L2.2 115 L3.4 118 L2.2 123 L1.8 128 L3.4 131 L2.2 134 L2.2 137 L1 141 L1.2 144 L2.6 149 L1 152 L0.6 154 L2.6 157 L2.6 160 L7 160 Z'/%3E%3C/svg%3E") top left / 7px 160px repeat-y, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='160' viewBox='0 0 7 160'%3E%3Cpath d='M0 0 L5.8 0 L5.2 5 L4.8 9 L5.2 12 L5.8 14 L5.8 16 L5.8 20 L5.8 23 L3.6 27 L4.8 32 L4.4 34 L4.8 37 L4.8 39 L4.4 41 L4.4 44 L4.4 47 L6.4 50 L4.4 54 L6 58 L6 60 L5.8 63 L6.4 66 L3.6 69 L4.8 73 L3.6 76 L4.4 81 L5.8 84 L3.6 89 L6.4 92 L4.8 94 L3.6 96 L4.4 99 L4.8 102 L6.4 105 L5.8 108 L3.6 111 L4.8 114 L5.2 119 L3.6 122 L4.8 126 L6.4 129 L4.4 132 L4.8 137 L4.4 142 L5.8 147 L5.8 152 L3.6 157 L4.8 159 L5.8 160 L0 160 Z'/%3E%3C/svg%3E") top right / 7px 160px repeat-y;
          mask: linear-gradient(#000 0 0) center / calc(100% - 12px) calc(100% - 12px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='7' viewBox='0 0 160 7'%3E%3Cpath d='M0 7 L0 1.8 L3 2.6 L5 0.6 L10 0.6 L13 3.4 L15 3.4 L18 0.6 L20 2.6 L24 0.6 L27 0.6 L32 2.6 L34 2.2 L39 0.6 L42 1 L47 0.6 L52 3.4 L56 0.6 L59 0.6 L64 2.2 L67 1.8 L71 1.2 L76 0.6 L81 1.8 L86 2.2 L89 0.6 L94 3.4 L97 1.8 L99 3.4 L101 3.4 L103 3.4 L106 2.6 L111 2.6 L114 2.6 L119 2.6 L122 1.8 L125 2.2 L128 1 L131 0.6 L136 1.8 L141 2.6 L144 1 L148 1.8 L153 0.6 L155 3.4 L159 1.2 L160 1.8 L160 7 Z'/%3E%3C/svg%3E") top left / 160px 7px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='7' viewBox='0 0 160 7'%3E%3Cpath d='M0 0 L0 5.8 L4 4.4 L6 6 L8 4.8 L13 3.6 L16 5.2 L19 3.6 L23 3.6 L27 6.4 L29 5.2 L33 6 L35 6.4 L38 6 L43 6 L47 5.2 L51 6 L54 6.4 L58 5.2 L61 3.6 L63 4.4 L65 5.8 L68 5.8 L71 4.4 L75 4.8 L79 6.4 L82 4.4 L86 3.6 L89 5.8 L93 4.8 L98 5.2 L102 5.2 L106 5.8 L109 6.4 L112 5.8 L115 6 L118 6.4 L122 4.8 L127 5.8 L130 5.2 L132 5.8 L136 3.6 L139 3.6 L144 5.2 L147 6 L152 3.6 L154 4.4 L159 4.4 L160 5.8 L160 0 Z'/%3E%3C/svg%3E") bottom left / 160px 7px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='160' viewBox='0 0 7 160'%3E%3Cpath d='M7 0 L2.6 0 L0.6 4 L1 8 L0.6 12 L0.6 15 L2.6 18 L0.6 21 L3.4 24 L0.6 26 L3.4 28 L3.4 31 L1.8 33 L0.6 38 L2.2 40 L3.4 43 L1.2 47 L1.8 50 L1.8 55 L0.6 59 L2.2 61 L2.6 65 L2.6 69 L0.6 72 L0.6 75 L1 78 L2.6 81 L3.4 84 L1.2 86 L1.8 91 L1 94 L0.6 99 L1.8 104 L1 106 L3.4 109 L1.2 112 L2.2 115 L3.4 118 L2.2 123 L1.8 128 L3.4 131 L2.2 134 L2.2 137 L1 141 L1.2 144 L2.6 149 L1 152 L0.6 154 L2.6 157 L2.6 160 L7 160 Z'/%3E%3C/svg%3E") top left / 7px 160px repeat-y, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='160' viewBox='0 0 7 160'%3E%3Cpath d='M0 0 L5.8 0 L5.2 5 L4.8 9 L5.2 12 L5.8 14 L5.8 16 L5.8 20 L5.8 23 L3.6 27 L4.8 32 L4.4 34 L4.8 37 L4.8 39 L4.4 41 L4.4 44 L4.4 47 L6.4 50 L4.4 54 L6 58 L6 60 L5.8 63 L6.4 66 L3.6 69 L4.8 73 L3.6 76 L4.4 81 L5.8 84 L3.6 89 L6.4 92 L4.8 94 L3.6 96 L4.4 99 L4.8 102 L6.4 105 L5.8 108 L3.6 111 L4.8 114 L5.2 119 L3.6 122 L4.8 126 L6.4 129 L4.4 132 L4.8 137 L4.4 142 L5.8 147 L5.8 152 L3.6 157 L4.8 159 L5.8 160 L0 160 Z'/%3E%3C/svg%3E") top right / 7px 160px repeat-y;
  max-height: min(86vh, 900px); overflow-y: auto;
}
.modal.lettermodal .letter .lhead { border-bottom: 1px solid rgba(107, 74, 43, .35); padding-bottom: .8rem; padding-right: 2.4rem; }
.modal.lettermodal .letter .lhead h3 { color: var(--ink-l); font-size: 1.45rem; letter-spacing: .04em; }
.modal.lettermodal .letter .lkind { color: var(--sepia); letter-spacing: .14em; }
.modal.lettermodal .letter .lkind .npcname { color: color-mix(in srgb, var(--seal) 75%, var(--ink-l)); }
.modal.lettermodal .letter .lbody { max-height: none; overflow: visible; gap: 1rem; padding: 0 .1rem; }
.modal.lettermodal .letter .lbody p { color: var(--ink-l); font-size: 1.02rem; line-height: 2.15; letter-spacing: .025em; word-spacing: .12em; text-indent: 1.2em; text-shadow: 0 0 .5px rgba(42, 44, 69, .35); }
.modal.lettermodal .letter .lsign { color: var(--sepia); font-family: var(--font-head); font-size: 1.12rem; letter-spacing: .06em; margin-top: .4rem; }
.modal.lettermodal .letter .lsign .npcname { color: inherit; }
.modal.lettermodal .letter .lps { color: #2a4566; border-top-color: rgba(42, 69, 102, .5); background: rgba(42, 69, 102, .08); font-size: .9rem; } /* 추신: 양피지 위에서도 또렷한 짙은 잉크색 */
.modal.lettermodal .letter .lps p { color: #2a4566; text-indent: 0; line-height: 1.75; }
.modal.lettermodal .letter > .row.end { border-top: 0; padding-top: 0; }
.modal.lettermodal .letter > .row.end button { background: transparent; border-color: rgba(107, 74, 43, .45); color: var(--sepia); box-shadow: none; }
.lseal { position: relative; justify-self: end; margin: -.3rem .5rem -.6rem 0; width: 3.1rem; height: 3.1rem; display: grid; place-items: center; pointer-events: none;
  border-radius: 47% 53% 50% 46% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--seal) 55%, #fff) 0 12%, transparent 34%), radial-gradient(circle at 50% 55%, var(--seal) 0 58%, color-mix(in srgb, var(--seal) 70%, #000) 100%);
  box-shadow: 0 2px 3px rgba(40, 10, 5, .45), inset 0 -2px 4px rgba(0, 0, 0, .35), inset 0 1px 2px rgba(255, 255, 255, .25);
  transform: rotate(-9deg); }
.lseal::before { content: ''; position: absolute; inset: .42rem; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--seal) 60%, #000); box-shadow: 0 1px 0 color-mix(in srgb, var(--seal) 55%, #fff); opacity: .8; }
@media (max-width: 480px) {
  .modal.lettermodal .letter { padding: 2.2rem 1.15rem 2rem; }
  .modal.lettermodal .letter .lbody p { font-size: .98rem; line-height: 2.05; }
  .lseal { width: 2.7rem; height: 2.7rem; }
}
/* 일지 › 인물 */
.jr-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .6rem; }
.jr-person { display: flex; flex-direction: column; gap: .35rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--r-s, 4px); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.jr-ph { gap: .5rem; align-items: baseline; }
.jr-phint { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.6; }
.jr-person > button { align-self: flex-start; }

/* ── 채팅 창 하나 (chat.js) · RP 방의 도트 마을 (rproom.js) ──
   넓은 화면: 오른쪽에 붙여 두거나(.side) 띄워 둔다. 좁은 화면: 아래에서 올라오는 판, 접으면 이름 띠 또는 마을 띠(.rp-strip) */
.chatwin { position: fixed; right: 1rem; bottom: 1rem; width: 380px; height: 520px; min-width: 260px; min-height: 180px; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); z-index: 60; display: flex; flex-direction: column; background: var(--surface) var(--paper); border: 1px solid #6b5232; box-shadow: 0 14px 34px rgba(20, 10, 4, .45), inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--line-2); overflow: hidden; resize: both; }
.chatwin > * { flex: 0 0 auto; min-width: 0; }
.chatwin > .cmain { flex: 1 1 auto; min-height: 0; }
.chatwin.max { inset: 4.6rem 1rem 1rem auto; width: min(720px, calc(100vw - 2rem)); height: auto; resize: none; }
.chatwin.docked { top: 0; right: 0; bottom: 0; height: auto; max-height: none; max-width: none; min-width: 0; resize: none; border-width: 0 0 0 1px; box-shadow: -10px 0 26px rgba(20, 10, 4, .32); }
html.chat-side .shell { margin-right: var(--chat-dock-w, 380px); }
html.chat-side #toasts { right: calc(var(--chat-dock-w, 380px) + 1rem); }
.chatwin.min { height: auto; min-height: 0; width: auto; resize: none; }
.chatwin.min > :not(.chead) { display: none !important; }
.chatwin.min .chead button:not(.cmin):not(.conl):not(.csos) { display: none; }
.chatwin.stripped { display: none; }
.chead { display: flex; align-items: center; gap: .35rem; min-height: 40px; padding: .3rem .4rem .3rem .75rem; background: linear-gradient(180deg, #2c2118, #211810); color: var(--leather-ink); cursor: move; user-select: none; --ink: var(--leather-ink); --ink-2: var(--leather-ink-2); --surface: #3a2d22; --surface-3: #46372a; --surface-2: #33271e; --line-2: #7a6146; }
.chatwin.docked .chead { cursor: default; }
.chead > .si { width: 16px; height: 16px; color: var(--gilt-2); flex: 0 0 auto; }
.chead .ctitle { min-width: 0; font-size: .92rem; font-family: var(--font-head); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chead .cgrow { flex: 1 1 auto; }
.chead button { position: relative; flex: 0 0 auto; min-height: 1.75rem; padding: .15rem .5rem; font-size: .76rem; }
.chead button::after { content: ''; position: absolute; inset: -7px -2px; } /* 누르는 자리는 44px */
.chead .cico { width: 1.9rem; padding: 0; display: grid; place-items: center; }
.chead .cico .si { width: 15px; height: 15px; }
.chead .cico.sel, .chead .cico.sel:hover { color: var(--gilt-2); background: rgba(214, 180, 106, .12); border-color: var(--gilt); }
.chead .cmin .si { width: 16px; height: 16px; }
.chead .conl { min-height: 1.35rem; padding: 0 .45rem; border-radius: 999px; font-size: .7rem; font-family: var(--font-body); font-weight: 400; background: rgba(255, 236, 180, .07); border: 1px solid #5d4935; color: var(--leather-ink-2); box-shadow: none; white-space: nowrap; }
.chead .conl::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: .3rem; border-radius: 50%; background: var(--mint); vertical-align: .06em; }
.chead .conl[hidden] { display: none; }
/* 위 탭: 한 번 누르면 바뀐다 · 새 말이 오면 점 */
.ctabrow { position: relative; display: flex; align-items: flex-end; padding: .25rem .3rem 0; border-bottom: 1px solid var(--line-2); }
.ctabs { display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ctabs::-webkit-scrollbar { display: none; }
.ctabs button { position: relative; flex: 1 0 auto; min-width: 2.7rem; min-height: 2rem; padding: .2rem .5rem; margin-bottom: -1px; font-size: .86rem; font-family: var(--font-head); font-weight: 400; color: var(--ink-3); white-space: nowrap; background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; box-shadow: none; }
.ctabs button:hover:not(.sel) { color: var(--ink); background: transparent; }
.ctabs button.sel { background: var(--surface); color: var(--ink); border-color: var(--line-2); border-bottom: 1px solid var(--surface); }
/* 파티 게시판 탭: 대화가 아니라 글 목록이라 남색 잉크로 따로 보이게 (파티 채팅과 헷갈리지 않게) */
.ctabs button[data-ch="board"] { color: var(--sky); }
.ctabs button[data-ch="board"]::before { content: ''; position: absolute; left: .35rem; right: .35rem; top: 0; height: 2px; background: var(--sky); opacity: .55; }
.ctabs button[data-ch="board"].sel { color: var(--sky); background: color-mix(in srgb, var(--sky-soft) 70%, var(--surface)); border-color: color-mix(in srgb, var(--sky) 55%, var(--line-2)); border-bottom-color: color-mix(in srgb, var(--sky-soft) 70%, var(--surface)); }
.ctabs button[data-ch="board"].sel::before { opacity: 1; }
.cdot { position: absolute; top: 5px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-2); }
.cmore { position: relative; flex: 0 0 auto; width: 2.1rem; min-height: 2rem; padding: 0; display: grid; place-items: center; color: var(--ink-3); background: transparent; border: 0; box-shadow: none; }
.cmore[hidden] { display: none; }
.cmore.dot::after { content: ''; position: absolute; top: 5px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-2); }
.cmorepop { position: absolute; top: 100%; right: .3rem; z-index: 3; display: flex; flex-direction: column; min-width: 8.5rem; padding: .25rem; background: var(--surface) var(--paper); border: 1px solid var(--line-2); box-shadow: 0 8px 18px rgba(20, 10, 4, .3); }
.cmorepop[hidden] { display: none; }
.cmorepop button { justify-content: flex-start; min-height: 2.2rem; padding: .2rem .6rem; font-weight: 400; background: transparent; border: 0; box-shadow: none; }
.cmorepop button.sel { background: var(--surface-3); }
.cmorepop .cdot { position: static; display: inline-block; margin-left: .35rem; }
.csub { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem; font-size: .78rem; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.csub select { min-height: 1.65rem; margin-left: auto; padding: .05rem .3rem; font-size: .76rem; }
.csub[hidden], .cmodes[hidden], .rp-w[hidden] { display: none !important; }
/* 사담 · RP 하위 탭 */
.cmodes { display: flex; padding: .3rem .5rem 0; border-bottom: 1px solid var(--line); }
.cmode { position: relative; min-height: 1.6rem; padding: .05rem .85rem; margin-bottom: -1px; font-size: .76rem; letter-spacing: .04em; font-weight: 400; color: var(--ink-3); background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; box-shadow: none; }
.cmode::after { content: ''; position: absolute; inset: -9px 0 -6px; }
.cmode.sel { color: var(--ink); background: var(--surface); border-color: var(--line); border-bottom-color: var(--surface); }
.cmode .cdot { top: 3px; right: 2px; }
.cmain { display: flex; min-height: 0; }
.cmsg.act { color: var(--ink-3); font-style: italic; font-size: .86em; }
.cmsg .cname { font-weight: 600; color: var(--ink); }
.cmsg .cname.clk { cursor: pointer; border-bottom: 1px dotted var(--line-2); }
.cin input { min-height: 2.2rem; }
/* RP 방 고르기: 낚시터 · 카페 · 성당 · 광장 (사람 수) */
.rp-rooms { display: flex; gap: .25rem; width: 100%; }
.rp-room { flex: 1 1 0; min-width: 0; min-height: 1.85rem; gap: .3rem; padding: .1rem .3rem; font-size: .8rem; font-weight: 400; color: var(--ink-2); white-space: nowrap; background: transparent; border: 1px solid var(--line); border-radius: 3px; box-shadow: none; }
.rp-room .n { font-size: .7rem; opacity: .75; font-variant-numeric: tabular-nums; }
.rp-room.sel { background: var(--ink-2); color: var(--surface); border-color: var(--ink); }
/* 도트 마을: 이름 · 채널은 그림 위에 작게, 아래에 여기 있는 사람 */
.rp-w { display: flex; flex-direction: column; background: #1d1611; border-bottom: 1px solid #6b5232; }
.rp-stage { position: relative; height: 160px; overflow: hidden; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.rp-stage:focus { outline: none; }
.rp-stage:focus-visible { outline: 2px solid var(--gilt-2); outline-offset: -2px; }
.rp-cv { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.rp-layer { position: absolute; inset: 0; pointer-events: none; line-height: 1.2; }
.rp-tag { position: absolute; transform: translateX(-50%); padding: 0 .25rem; font-size: .6rem; white-space: nowrap; color: #f6ecd4; background: rgba(28, 20, 13, .55); border-radius: 2px; }
.rp-tag.me { color: #ffe39a; }
.rp-tag.zz, .rp-tok.zz { opacity: .5; }
.rp-bub { position: absolute; transform: translate(-50%, -100%); max-width: min(220px, 70%); padding: .1rem .45rem; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #f6ecd4; color: #2e2318; border: 1px solid #6b5232; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); animation: rpbub .25s ease-out; }
.rp-layer .bubble.compsay { position: absolute; transform: translate(-50%, -100%); width: max-content; max-width: min(200px, 60%); padding: .1rem .4rem; font-size: .66rem; line-height: 1.3; text-align: center; background: #efe6f6; color: #2a2038; border: 1px solid #6a5290; }
.rp-layer .bubble.compsay b { color: #5a4280; }
@keyframes rpbub { from { opacity: 0; transform: translate(-50%, -80%); } }
@media (prefers-reduced-motion: reduce) { .rp-bub { animation: none; } }
.rp-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .35rem; padding: .3rem .4rem; pointer-events: none; background: linear-gradient(180deg, rgba(20, 14, 9, .55), transparent); }
.rp-title { padding: .05rem .4rem; background: rgba(20, 14, 9, .62); border-radius: 2px; font-family: var(--font-head); font-size: .8rem; color: #f1e4c6; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rp-chans { display: flex; gap: 2px; pointer-events: auto; flex: 0 0 auto; }
.rp-ch, .rp-tool { position: relative; min-height: 1.35rem; padding: 0 .2rem; font-size: .68rem; line-height: 1; font-weight: 400; color: #e8dcc0; background: rgba(28, 20, 13, .62); border: 1px solid rgba(214, 180, 106, .35); border-radius: 2px; box-shadow: none; }
.rp-ch { min-width: 1.4rem; }
.rp-ch::after, .rp-tool::after { content: ''; position: absolute; inset: -8px -2px; }
.rp-ch.sel { background: #d6b46a; color: #2a1f16; border-color: #d6b46a; }
.rp-ch:disabled { opacity: .45; }
.rp-tools { display: flex; gap: 3px; margin-left: auto; pointer-events: auto; flex: 0 0 auto; }
.rp-tool { width: 1.75rem; min-height: 1.6rem; padding: 0; display: grid; place-items: center; }
.rp-tool .si { width: 14px; height: 14px; }
.rp-who { display: flex; align-items: center; gap: .5rem; min-height: 1.65rem; padding: .15rem .5rem; font-size: .74rem; color: var(--ink-2); background: var(--surface-2); border-top: 1px solid #6b5232; }
.rp-names { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.rp-names::-webkit-scrollbar { display: none; }
.rp-n { cursor: pointer; padding: .1rem 0; }
.rp-n:hover, .rp-n:focus-visible { color: var(--ink); text-decoration: underline dotted; outline: none; }
.rp-n + .rp-n::before { content: '·'; display: inline-block; margin: 0 .4rem; color: var(--line-2); text-decoration: none; }
.rp-n.me { font-weight: 600; color: var(--ink); }
.rp-n.comp { font-style: italic; color: var(--ink-3); }
.rp-n.zz { opacity: .55; }
.rp-count { flex: 0 0 auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rp-back { min-height: 1.45rem; margin-left: .5rem; padding: 0 .55rem; font-size: .72rem; }
.rp-card .bigcard { margin: 0 auto; }
.rp-card-act { margin-top: .5rem; gap: .35rem; flex-wrap: wrap; }
/* 채팅을 접어도: 아래 작은 마을 띠 (누르면 펼친다) */
.rp-strip { position: fixed; right: 1rem; bottom: 1rem; z-index: 59; display: flex; align-items: center; justify-content: flex-start; gap: .6rem; width: min(340px, calc(100vw - 2rem)); height: 48px; padding: 0 .75rem 0 0; overflow: hidden; font-weight: 400; color: var(--leather-ink); background: linear-gradient(180deg, #2c2118, #211810); border: 1px solid #6b5232; border-radius: 3px; box-shadow: 0 8px 22px rgba(20, 10, 4, .4); }
.rp-strip[hidden] { display: none; }
.rp-strip:hover { filter: brightness(1.08); }
.rp-mcv { flex: 0 0 auto; height: 100%; width: auto; image-rendering: pixelated; border-right: 1px solid #6b5232; }
.rp-stxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.rp-stxt b { font-family: var(--font-head); font-size: .86rem; font-weight: 400; color: var(--leather-ink); white-space: nowrap; }
.rp-sn { font-size: .7rem; color: var(--leather-ink-2); white-space: nowrap; }
.rp-strip > .si { flex: 0 0 auto; width: 16px; height: 16px; color: var(--gilt-2); }
@media (max-width: 860px) {
  .chatwin { left: .5rem; right: .5rem; width: auto; bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); height: var(--cvh, 58vh); max-height: calc(100vh - 7rem); resize: none; }
  .chatwin.rpon { height: max(var(--cvh, 58vh), 68vh); }
  .chatwin.kb, .chatwin.kb.rpon { bottom: calc(var(--kb, 0px) + 4px); height: calc(var(--vvh, 60vh) - 10px); max-height: calc(var(--vvh, 60vh) - 10px); }
  .chatwin.min { left: auto; width: auto; height: auto; }
  .chead { cursor: default; }
  .chead .cmin { min-width: 2.3rem; }
  .chatwin .cmain { flex-direction: column; }
  .cside { width: auto; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .cside button { width: auto; flex: 0 0 auto; }
  .rp-strip { left: .5rem; right: .5rem; width: auto; bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px) + 4px); height: 46px; }
  html.has-rpstrip .page { margin-bottom: calc(7.5rem + 50px); }
  html.has-rpstrip #toasts { bottom: calc(5rem + 52px); }
}
/* 채팅 창을 오른쪽에 붙여 두면 본 화면이 그만큼 좁아진다: 홈은 좁은 화면 배치로 */
@media (min-width: 861px) and (max-width: 1640px) { html.chat-side .homegrid { grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto 1fr; } html.chat-side .homegrid > .hleft, html.chat-side .homegrid > .hright { position: static; }
  html.chat-side .homegrid > .hleft { grid-column: 1; grid-row: 1; } html.chat-side .homegrid > .hmap { grid-column: 2; grid-row: 1 / span 2; } html.chat-side .homegrid > .hright { grid-column: 1; grid-row: 2; } html.chat-side .homegrid > .hmap { position: sticky; top: 5.6rem; } }
.chatwin button[hidden] { display: none !important; }
/* ── 채팅 창 · RP 방 끝 ── */

/* 인연의 선물: 그 사람의 빛깔로 칠하는 명함 배경 · 이름 효과 (public/js/cardfx.js bondBg · styledName) */
.cbg-bond { background: var(--cbgt) 0 0 / 48px 48px, linear-gradient(170deg, var(--bga) 0%, var(--bgb) 100%); }
:root[data-tone="dark"] .cbg-bond { background: var(--cbgtn) 0 0 / 48px 48px, linear-gradient(170deg, var(--bna) 0%, var(--bnb) 100%); }
.nfx-bond { background: linear-gradient(100deg, var(--nb1) 0%, var(--nb1) 36%, var(--nb2) 50%, var(--nb1) 64%, var(--nb1) 100%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: cfx-nbond 5s linear infinite; }
:root[data-tone="dark"] .nfx-bond, .cfx-dark .nfx-bond { background-image: linear-gradient(100deg, var(--nn1) 0%, var(--nn1) 36%, var(--nn2) 50%, var(--nn1) 64%, var(--nn1) 100%); }
@keyframes cfx-nbond { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.bond-tag { font-size: .68rem; padding: 0 .3rem; border-radius: 3px; background: color-mix(in srgb, var(--rose, #b45a6a) 18%, transparent); color: var(--ink); white-space: nowrap; }
.cshop-grid > .cshop-sec { grid-column: 1 / -1; margin: .5rem 0 0; font-size: .85rem; color: var(--ink-soft, var(--ink)); border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); padding-top: .45rem; }
.csw > .bond-tag { position: absolute; left: .3rem; top: .3rem; z-index: 4; line-height: 1.5; background: var(--surface); border: 1px solid var(--line); font-size: .64rem; border-radius: 2px; }
/* 인연의 선물: 받을 때의 양피지 (fanfare.js bondNext) · 기록 › 업적 › 인연의 선물 (public/js/bondgift.js) */
.fanfare.ff-bond { background: radial-gradient(circle at 50% 45%, rgba(60, 36, 24, .42), rgba(14, 8, 10, .72)); }
.ff-bond .ff-box { width: min(360px, 100%); }
.ff-bond .ff-x { top: -8px; right: -8px; }
.ff-bond .bg-ff { display: grid; place-items: center; min-height: 104px; }
.bg-ff .bg-sw { width: 150px !important; height: 92px !important; }
.bg-ff-desc { margin: 0; text-align: center; font-size: .9rem; line-height: 1.6; color: var(--ink-2, var(--ink)); }
.bg-sw { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.bg-sw:not(.cbg) { background: var(--surface-2); }
.bg-sw.cfr { border: 0; }
.bg-sw .cfx-fr { --frw: calc(var(--frn) * 1px); }
.bg-sw .n { font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.bg-sw.lock { opacity: .45; }
canvas.bg-thumb { image-rendering: pixelated; flex: none; }
.furn-grid .bond-tag { align-self: start; }
.ff-bond .ff-art.bg-ff { background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-color: color-mix(in srgb, var(--ink) 18%, transparent); box-shadow: none; }
.bond-furn > summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; min-height: 36px; list-style: none; }
.bond-furn > summary h3 { margin: 0; }
.bond-furn[open] > summary { margin-bottom: .5rem; }
.furn-grid .furn.placed { position: relative; }
.furn-grid .furn.placed > .bond-tag { position: absolute; top: 3px; right: 3px; }

/* ── 파티 게시판 (board.js): 채팅 창 「파티」 탭 · 글 한 장 · 올리기 판 ──
   자리: 수호 파랑 · 치유 초록 · 공격 빨강. 찬 자리는 칠하고, 빈자리는 테두리만, 필요 없는 자리는 흐리게 */
:root { --role-tank: #3d6fc8; --role-healer: #3c9a4e; --role-dealer: #c4443c; }
:root[data-tone="dark"] { --role-tank: #5b8de0; --role-healer: #57b76a; --role-dealer: #e0605a; }
.cbody.isboard { padding: 0; gap: 0; }
.bboard { display: flex; flex-direction: column; min-height: 100%; }
.bbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .35rem; padding: .3rem .4rem; background: var(--surface) var(--paper); border-bottom: 1px solid var(--line); }
.bkinds { display: flex; gap: 2px; min-width: 0; flex: 1 1 auto; }
.bkinds button, .bmine { position: relative; min-height: 1.75rem; padding: .05rem .5rem; font-size: .76rem; font-weight: 400; color: var(--ink-2); white-space: nowrap; background: transparent; border: 1px solid var(--line); border-radius: 3px; box-shadow: none; }
.bkinds button::after, .bmine::after { content: ''; position: absolute; inset: -8px -1px; }
.bkinds button.sel { background: var(--ink-2); color: var(--surface); border-color: var(--ink); }
.bmine { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.bmine.sel { color: var(--ink); border-color: var(--ink-2); background: var(--surface-3); }
.bmine .bseat { width: 10px; height: 10px; }
.blist { display: flex; flex-direction: column; }
.brow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: .5rem; width: 100%; min-height: 3.6rem; padding: .4rem .5rem; text-align: left; font: inherit; font-weight: 400; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.brow:hover { background: color-mix(in srgb, var(--surface-3) 55%, transparent); }
.brow.mine { background: color-mix(in srgb, var(--gilt-2) 14%, transparent); box-shadow: inset 3px 0 0 var(--gilt); }
.brow.no .bmid { opacity: .62; }
.brow .bic, .bsheet .bic { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-2); background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.bsheet .bsheet-head .bic { width: 46px; height: 46px; flex: none; }
.bmid { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.btop { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.btitle { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bchip { flex: 0 0 auto; padding: 0 .3rem; font-size: .66rem; line-height: 1.45; color: var(--ink-2); border: 1px solid var(--line); border-radius: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bchip.m-hard { color: #b0601c; border-color: color-mix(in srgb, #f08a2c 55%, transparent); }
.bchip.m-challenge { color: var(--role-dealer); border-color: color-mix(in srgb, var(--role-dealer) 55%, transparent); }
.bchip.k { color: var(--ink); background: var(--surface-3); }
.bnote { font-size: .76rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blead { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: .7rem; color: var(--ink-2); }
.blead canvas, .blead img, .blead .ic, .blead .portrait { flex: 0 0 auto; border-radius: 2px; }
.btag { flex: 0 0 auto; padding: 0 .25rem; font-size: .62rem; line-height: 1.4; border: 1px solid var(--line); border-radius: 2px; color: var(--ink-2); }
.btag.gold { color: var(--gilt); border-color: color-mix(in srgb, var(--gilt) 50%, transparent); }
/* 네 자리 */
.bseats { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.bseat { --rc: var(--ink-3); position: relative; display: inline-grid; place-items: center; width: 19px; height: 19px; padding: 0; border-radius: 3px; box-sizing: border-box; border: 2px solid var(--rc); background: transparent; box-shadow: none; min-height: 0; }
.bseat.tank { --rc: var(--role-tank); } .bseat.healer { --rc: var(--role-healer); } .bseat.dealer { --rc: var(--role-dealer); }
.bseat.fill { background: var(--rc); border-color: color-mix(in srgb, var(--rc) 70%, #000); }
.bseat.fill .ic { filter: brightness(0) invert(1) drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); opacity: .92; }
.bseat.open { background: color-mix(in srgb, var(--rc) 12%, transparent); }
.bseat.open.me { box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 35%, transparent); animation: bseatme 1.8s ease-in-out infinite; }
@keyframes bseatme { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .bseat.open.me { animation: none; } }
.bseat.off { border-style: dashed; border-width: 1px; border-color: color-mix(in srgb, var(--ink-3) 55%, transparent); opacity: .5; }
button.bseat::after { content: ''; position: absolute; inset: -10px -2px; }
.bpost-seats .bseat { width: 30px; height: 30px; border-width: 2px; }
.bpost-seats .bseats { gap: 6px; }
.bpost-seats { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .5rem 0 .2rem; }
.bpost-dest { display: flex; align-items: center; gap: .35rem; margin-bottom: .45rem; }
.bsheet input { width: 100%; }
.bempty { padding: 1.2rem .8rem; color: var(--ink-3); font-size: .82rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.bempty p { margin: 0; }
/* 구조 요청(SOS) 칸: 파티 게시판 맨 위. 붉은 바탕 · 왼쪽 붉은 띠 · 「SOS!」 표 (public/js/board.js sosCard) */
.bboard { --sos: #c8372d; --sos-ink: #a3241b; }
:root[data-tone="dark"] .bboard { --sos: #e0605a; --sos-ink: #f08a82; }
.bsos { display: flex; flex-direction: column; gap: .2rem; padding: .45rem .55rem .5rem .75rem; background: color-mix(in srgb, var(--sos) 10%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--sos) 30%, var(--line)); box-shadow: inset 4px 0 0 var(--sos); }
.bsos.mine { background: color-mix(in srgb, var(--sos) 6%, var(--surface)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--sos) 55%, transparent); }
.bsos-top { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.bsos-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; line-height: 1.4; color: #fff; background: var(--sos); border-radius: 3px; }
.bsos-tri { width: 11px; height: 11px; color: #fff; } .bsos-tri path:first-child { fill: rgba(255, 255, 255, .95); } .bsos-tri path:last-child { stroke: var(--sos); } .bsos-tri circle { fill: var(--sos); }
.bsos-who { display: flex; align-items: center; gap: .3rem; min-width: 0; flex: 1 1 auto; }
.bsos-who b { font-size: .88rem; min-width: 0; }
.bsos-lv { flex: 0 0 auto; font-size: .72rem; color: var(--ink-2); white-space: nowrap; }
.bsos-time { flex: 0 0 auto; font-size: .7rem; color: var(--sos-ink); white-space: nowrap; }
.bsos-zone { display: flex; align-items: center; gap: .35rem; min-width: 0; font-size: .78rem; }
.bsos-zone .faint { font-size: .68rem; flex: 0 0 auto; }
.bsos-note { font-size: .78rem; color: var(--ink-2); overflow-wrap: anywhere; }
.bsos-act { display: flex; align-items: center; gap: .5rem; margin-top: .15rem; }
.bsos-help { flex: 1 1 auto; min-width: 0; font-size: .7rem; color: var(--ink-3); }
.bsos-act button { flex: 0 0 auto; }
.bsos-go, .bsos-go:hover { background: var(--sos); border-color: color-mix(in srgb, var(--sos) 70%, #000); color: #fff; }
/* 채팅 창 머리의 SOS 수 · 파티 게시판 탭의 빨간 점 */
.chead .csos { min-height: 1.35rem; padding: 0 .45rem; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: #c8372d; border: 1px solid #e0605a; box-shadow: 0 0 0 2px rgba(200, 55, 45, .25); white-space: nowrap; }
.chead .csos[hidden] { display: none; }
.cdot.sos { width: 8px; height: 8px; top: 4px; right: 2px; background: #d33a2f; box-shadow: 0 0 0 1.5px var(--surface); }
/* 글 한 장 */
.bsheet { width: min(420px, calc(100vw - 1.5rem)); }
.bsheet h3 { margin: 0 0 .15rem; }
.bsheet-head { display: flex; align-items: center; gap: .6rem; padding-right: 2.4rem; }
.bsheet-note { margin: .55rem 0 .45rem; color: var(--ink-2); font-size: .88rem; }
.bmembers { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.bmem { display: flex; align-items: center; gap: .45rem; min-height: 2.3rem; padding: .2rem .1rem; border-bottom: 1px solid var(--line); font-size: .84rem; min-width: 0; }
.bmem b { min-width: 0; }
.bmem .faint { font-size: .74rem; white-space: nowrap; }
.bmem .btag { margin-left: auto; }
.bmem.empty { color: var(--ink-2); }
.bmem.off { color: var(--ink-3); }
.bmem canvas, .bmem img { border-radius: 3px; flex: 0 0 auto; }
.bsheet-time { margin: .4rem 0; font-size: .74rem; }
.bjoin { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.bjoin .primary { min-width: 7rem; }
.bwhy { font-size: .78rem; color: var(--rose, #a5465c); }
/* 파티 화면 안의 한 줄 */
.bpostline { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.bpostline.make { flex-wrap: wrap; row-gap: .3rem; }
.bmanual { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.bpostline .bmanual { margin-left: .3rem; }
.bsheet .bmanual { margin: .2rem 0; }
.bsheet .bmanual input[type="checkbox"] { width: 1.05rem; flex: none; padding: 0; box-shadow: none; }
.bchip.man { color: var(--ink); border-style: dashed; }
.bmine-line { display: flex; align-items: center; gap: .4rem; min-width: 0; flex: 1 1 auto; min-height: 2rem; padding: .15rem .45rem; font-weight: 400; font-size: .82rem; background: color-mix(in srgb, var(--gilt-2) 12%, transparent); border: 1px solid var(--line); box-shadow: none; }
.bmine-line .bseats { margin-left: auto; }
/* 동료끼리의 궁합: 편성 줄 아래 이음 표 (public/js/autoform.js synChips) */
.af-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; }
.syn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; min-width: 0; max-width: 100%; }
.syn-chip { --k: var(--gilt, #b08a3a); position: relative; display: inline-flex; align-items: center; gap: 0; min-height: 30px; height: 30px; padding: 0 .55rem 0 .3rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--k) 45%, var(--line-2)); background: color-mix(in srgb, var(--k) 12%, var(--surface)); box-shadow: none; font-size: var(--t-micro); font-weight: 700; color: var(--ink-2); max-width: 100%; }
.syn-chip::after { content: ''; position: absolute; inset: -7px 0; } /* 누르는 칸은 44px */
.syn-chip.k-rival { --k: var(--rose, #a5465c); }
.syn-chip.k-secret { --k: var(--primary, #7a5fb0); }
.syn-chip .portrait, .syn-chip .syn-ini { flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--surface), 0 0 0 2px color-mix(in srgb, var(--k) 55%, transparent); }
.syn-link { flex: none; display: block; width: 10px; height: 2px; margin: 0 1px; background: var(--k); border-radius: 1px; }
.syn-chip .syn-nm { margin-left: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syn-ini { display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 70%, var(--surface-2)); color: #fff8ec; font-weight: 700; line-height: 1; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.syn-sheet .syn-head { align-items: center; gap: .6rem; }
.syn-pair { --k: var(--gilt, #b08a3a); display: inline-flex; align-items: center; flex: none; }
.syn-pair .syn-link { width: 14px; }
.syn-pair .portrait, .syn-pair .syn-ini { border-radius: 50%; overflow: hidden; }
.syn-fx { margin: .3rem 0 0; font-weight: 700; color: var(--ink); }
.syn-fx.k-rival { color: var(--rose, #a5465c); }
.syn-cap { margin: .25rem 0 0; font-size: var(--t-small); }
/* 원정 선택지: 낱말 가운데서 줄이 꺾이지 않게 (끼어드는 선택의 긴 기척) */
.choices button .grow { word-break: keep-all; overflow-wrap: break-word; }

/* 함께한 이야기 (public/js/tales.js): 접히는 묶음 · 촘촘한 줄 */
.tales { margin: var(--sp-2, .5rem) 0; border-top: 1px solid var(--line); }
.tales.person { margin: 0; border: 1px solid var(--line); border-radius: var(--r-s, 4px); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.tl-people { gap: .4rem; }
.tl-head, .tl-gh { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 36px; padding: .3rem .2rem; background: transparent; border: 0; box-shadow: none; font: inherit; color: var(--ink); text-align: left; position: relative; }
.tl-head { font-family: var(--font-head); font-size: 1rem; }
.tales.person .tl-head { padding: .3rem .6rem; }
.tl-h { flex: 1 1 auto; min-width: 0; }
.tl-n { font-size: .78rem; color: var(--ink-3); flex: none; }
.tl-chev { flex: none; width: .5rem; height: .5rem; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); transition: transform .15s; margin: 0 .25rem; }
.tales.open > .tl-head .tl-chev, .tl-grp.open > .tl-gh .tl-chev { transform: rotate(45deg); }
.tl-body { display: flex; flex-direction: column; gap: .15rem; padding: 0 0 .3rem; }
.tales.person .tl-body { padding: 0 .5rem .4rem; }
.tl-gh { min-height: 36px; font-size: .88rem; color: var(--ink-2); border-bottom: 1px dotted var(--line-2); }
.tl-gl { flex: 1 1 auto; min-width: 0; letter-spacing: .04em; }
.tl-rows { list-style: none; margin: 0; padding: .15rem 0 0 .55rem; display: flex; flex-direction: column; gap: 1px; content-visibility: auto; }
.tl-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; min-height: 36px; padding: .28rem .5rem; background: transparent; border: 0; border-left: 2px solid var(--line-2); border-radius: 0; box-shadow: none; font: inherit; color: var(--ink); text-align: left; position: relative; }
.tl-row:hover { background: color-mix(in srgb, var(--gilt) 8%, transparent); border-left-color: var(--gilt); }
.tl-top { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.tl-t { flex: 1 1 auto; min-width: 0; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-d { flex: none; font-size: .72rem; color: var(--ink-3); }
.tl-end { flex: none; font-size: .7rem; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 .35rem; }
.tl-said { font-size: .78rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-said::before { content: '— '; }
.tl-more { align-self: center; margin-top: .2rem; }
.tl-empty { margin: .3rem 0; font-size: .86rem; }
.tl-vhead { justify-content: flex-start; }
.tl-vt { min-width: 0; padding-right: 2.6rem; }
.modal.talesm { width: min(var(--modal-l, 640px), 100%); }
.ib-links { display: flex; flex-wrap: wrap; gap: .3rem; }
.tales [hidden], .tales[hidden] { display: none !important; }

/* 캐릭터 생일: 명함의 한 줄 (public/js/ui.js bigCard · src/game/ubday.js) */
.bc-bday .si { width: 14px; height: 14px; flex: none; }

/* 생활 › 제작 · 음식: 넓은 화면에서 줄이 끝까지 늘어나 이름과 단추가 멀어지지 않게 (public/js/pages/life.js) */
.scroll-box { display: flex; flex-direction: column; align-items: center; gap: .45rem; max-width: 720px; margin: 0 auto .7rem; }
.scroll-head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .45rem; }
.scroll-head button { white-space: nowrap; }
.scroll-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; width: 100%; }
.scroll-chip { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; max-width: 100%; padding: .2rem .25rem .2rem .3rem; border: 1px solid color-mix(in srgb, var(--line-2) 55%, transparent); border-radius: var(--r-s); background: var(--surface); }
.scroll-chip .sc-n { font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9.5rem; min-width: 0; }
.scroll-chip button { flex: none; white-space: nowrap; font-size: .7rem; min-height: 1.45rem; padding: .1rem .5rem; }
.scroll-chip .sc-pin { flex: none; font-size: var(--t-micro); font-weight: 700; letter-spacing: .02em; padding: 0 .3rem; border-radius: 2px; color: var(--butter); background: var(--butter-soft); line-height: 1.5; }
.narrow-list { width: 100%; max-width: 640px; margin-inline: auto; }
.buff-plate { width: 100%; max-width: 720px; margin-inline: auto; }
.buff-list .li { flex-wrap: wrap; row-gap: .1rem; }
.unk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .15rem .9rem; margin-top: .4rem; }
.unk-i { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .25rem .1rem; border-bottom: 1px dotted var(--line-2); }
.unk-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.unk-t b { font-size: var(--t-small); font-weight: 600; }

/* ── 스킬 설명 (public/js/skilltext.js): 굵은 효과 한 줄 · 작은 대상/위치/기력 한 줄 · 흐린 원래 설명 ── */
.sk-li { align-items: flex-start; }
.sk-eff { font-size: .86rem; font-weight: 700; color: var(--ink); line-height: 1.45; margin-top: .15rem; word-break: keep-all; overflow-wrap: anywhere; }
.sk-meta { font-size: .74rem; color: var(--ink-2); line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.sk-pas { font-size: .82rem; line-height: 1.45; margin: .2rem 0 .3rem; word-break: keep-all; }
.sk-aw { font-size: .74rem; font-weight: 700; color: var(--ink-3); margin-top: .5rem; letter-spacing: .02em; }
.sktip { display: flex; flex-direction: column; gap: .15rem; max-width: 22rem; }
.sktip .sk-eff { margin-top: 0; }
/* 효과 · 옵션 한 줄에 하나 (public/js/ui.js effLines · 2026-10-28 「줄나눔」): 조각이 둘 이상이면 작은 점 + 내어쓰기 */
.lns > .ln { display: block; position: relative; padding-left: .75em; }
.lns > .ln::before { content: ''; position: absolute; left: .12em; top: .6em; width: .3em; height: .3em; background: currentColor; opacity: .4; }
.lns > .ln:only-child { padding-left: 0; } .lns > .ln:only-child::before { display: none; }
.lns > .ln + .ln { margin-top: .1rem; }
.ln-more { font-size: .8em; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.cr-sk .lns > .ln { padding-left: 0; } .cr-sk .lns > .ln::before { display: none; }
.cr-skills { display: flex; flex-direction: column; gap: .35rem; margin: .2rem 0 .4rem; text-align: center; }
.cr-sk { display: flex; flex-direction: column; align-items: center; gap: .05rem; }
.cr-sk > b { font-size: .84rem; }
.cr-sk .sk-eff { margin-top: 0; font-size: .8rem; }
.cr-sk .sk-meta { font-size: .7rem; }
/* 텃밭 접기 · 펼치기 (room.js foldBtn) */
.fold-tg { display: inline-flex; align-items: center; gap: .2rem; min-height: 26px; padding: .05rem .5rem; font-size: .72rem; font-weight: 700; white-space: nowrap; box-shadow: none; flex-shrink: 0; }
.fold-tg .si { width: 13px; height: 13px; }
.fold-tg .si.flip-v { transform: rotate(180deg); }
.gc-ph .gc-sum { margin-left: auto; }
.gcrop.folded .gc-sel { margin-top: .25rem; }
.fold-sum { font-size: .78rem; text-align: center; padding: .15rem 0 .1rem; }
.af-hearts { display: flex; justify-content: center; line-height: 1; margin-top: -.1rem; }
.af-hearts .affh .si.afh { width: 9px; height: 9px; }
.af-hearts .affh { margin: 0; }
/* 세력 고르기: 세 장 같은 높이 · 이야기는 스크롤 칸 · 단추는 맨 아래 (plaza.js faction) */
.fac-intro { text-align: center; }
.fac-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; align-items: stretch; }
.fac-card { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.fac-pick > .fac-card.plate, .dunbody .fac-pick > .fac-card.plate + .fac-card.plate { margin: 0; } /* 원정 칸의 .plate + .plate 위 여백(ux.css)이 둘째 · 셋째 장만 내려 높이가 어긋났다 */
.fac-card h3 { margin: 0; }
.fac-card > p { margin: 0; }
.fac-lore { flex: 1 1 auto; height: 13.5rem; overflow-y: auto; overscroll-behavior: contain; font-size: .88rem; line-height: 1.65; padding: .45rem .6rem; border-radius: var(--r-s); background: color-mix(in srgb, var(--surface-2) 60%, transparent); box-shadow: inset 0 0 0 1px var(--line); scrollbar-width: thin; }
.fac-card > button { margin-top: auto; align-self: center; white-space: nowrap; }
.fac-card .faint { font-size: .78rem; }
@media (max-width: 600px) { .fac-lore { height: 10rem; } }
/* 공격대 보스 설명: 곁글이라 작게 (오너 2026-10-28) */
.ri-lore { font-size: .78rem; line-height: 1.55; color: var(--ink-3); margin: .2rem 0; }
/* 세력 기여도 순위 (plaza.js) */
.ftop-list { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .15rem; }
.ftop-list li { display: flex; align-items: center; gap: .5rem; padding: .2rem .45rem; border-radius: var(--r-s); font-size: .86rem; }
.ftop-list li:nth-child(-n+3) .ftop-rk { color: var(--gilt); }
.ftop-list li.me { background: color-mix(in srgb, var(--gilt) 14%, transparent); }
.ftop-rk { width: 1.4rem; text-align: right; }
.ftop-pt { color: var(--ink-3); font-size: .8rem; white-space: nowrap; }