/* 종이배 쪽지 v4 — 광안리 밤바다 (docs/mockup-v4.html r2 스타일 이식) */
:root { --ink:#1d1c22; --paper:#fbf8f2; --mute:#8d8a94; --acc:#ffd38a; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:#273A60; color:#f3f1ee; font:15px/1.55 "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif; overflow:hidden; }
[hidden] { display:none !important; }
#stage { position:fixed; inset:0; overflow:hidden; background:#05070d; user-select:none; -webkit-user-select:none; touch-action:none; }
#stage canvas.gl { display:block; width:100%; height:100%; cursor:pointer; }
#grain { position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay; z-index:1; }
.loading { position:absolute; inset:0; z-index:9; display:grid; place-items:center; background:#273A60; font-size:15px; color:#e8e4ee; transition:opacity .6s; }
.loading.done { opacity:0; pointer-events:none; }
.ui { position:absolute; z-index:3; }
button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
button:disabled { cursor:default; opacity:.5; }
a { color:inherit; }

/* 상단 바 (온라인 남산 배치) */
.top { top:0; left:0; right:0; display:flex; align-items:center; gap:10px; padding:14px 18px; padding-top:max(14px, env(safe-area-inset-top)); pointer-events:none; }
.top > * { pointer-events:auto; }
.logo { display:flex; align-items:center; gap:8px; font-weight:800; font-size:19px; letter-spacing:-.3px; text-shadow:0 1px 6px rgba(0,0,0,.5); margin-right:auto; }
.logo svg { width:30px; height:30px; }
.circ { width:38px; height:38px; border-radius:50%; background:rgba(250,248,244,.92); color:#2b2a30; display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.circ svg { width:19px; height:19px; }
.circ.off { opacity:.75; }
.pill { height:38px; border-radius:12px; padding:0 14px; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; text-decoration:none; }
.pill.chan { background:rgba(22,52,58,.9); border:1px solid rgba(150,220,210,.35); }
.pill.chan svg { width:12px; height:12px; }
.stats { display:flex; align-items:center; gap:10px; }
.stat { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.6); white-space:nowrap; }
.stat svg { width:16px; height:16px; opacity:.9; }
.dot { width:7px; height:7px; border-radius:50%; background:#7ee0a0; box-shadow:0 0 0 3px rgba(126,224,160,.18); }
.dot.off { background:#9a97a3; box-shadow:none; }
.sep { width:1px; height:18px; background:rgba(255,255,255,.25); }
#boatCount.pop { animation:pop .6s ease; }
@keyframes pop { 30% { transform:scale(1.25); color:#ffe3ad; } }
.menu { position:absolute; top:58px; background:rgba(20,22,30,.96); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:6px; display:none; z-index:6; min-width:190px; }
.menu.open { display:block; }
.menu button { display:flex; justify-content:space-between; gap:12px; width:100%; padding:9px 11px; border-radius:8px; font-size:14px; }
.menu button:hover { background:rgba(255,255,255,.07); }
.menu button.dis { opacity:.45; cursor:not-allowed; }
.menu button.cur { color:var(--acc); }
.menu small { color:#9a97a3; }
.help { right:18px; top:62px; width:260px; font-size:13px; line-height:1.7; padding:12px 14px; }
.help .mob { display:none; }

/* 여정 한 줄 */
.journey { top:62px; left:50%; transform:translateX(-50%); background:rgba(14,16,24,.72); border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:7px 16px; font-size:13.5px; display:none; white-space:nowrap; max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; }
.journey b { color:var(--acc); }

/* 하단 */
.ctrl { left:18px; bottom:16px; font-size:12.5px; color:#e6e3ea; text-shadow:0 1px 3px rgba(0,0,0,.8); pointer-events:none; }
.ctrl small { display:block; color:#a19eaa; font-size:11px; }
.me { left:50%; bottom:max(18px, env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; }
.meBtn { background:#111216; border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:10px 16px; font-size:14px; font-weight:600; }
.acts { display:none; gap:6px; background:rgba(17,18,22,.92); border-radius:12px; padding:6px; border:1px solid rgba(255,255,255,.12); }
.acts.open { display:flex; }
.acts button { padding:7px 11px; border-radius:8px; font-size:13px; background:rgba(255,255,255,.08); white-space:nowrap; }

/* 3D 위 라벨 */
.tag { position:absolute; z-index:2; left:0; top:0; transform:translate(-50%,-100%); pointer-events:none; white-space:nowrap; font-size:10.5px; font-weight:700; padding:1px 6px; opacity:.92; border-radius:6px; background:rgba(10,10,14,.55); text-shadow:0 1px 2px #000; visibility:hidden; }
.tag.mine { background:rgba(10,10,14,.7); font-size:11.5px; padding:2px 7px; opacity:1; }
.tag.mine::before { content:"나"; background:#ffd38a; color:#3a2a12; border-radius:4px; padding:0 4px; margin-right:5px; font-size:10.5px; }
.tag.npc { color:#ffe2a8; font-size:11.5px; padding:2px 7px; opacity:1; }
.tag.boat { color:#ffe2a8; font-size:10.5px; background:rgba(10,10,14,.5); }
.guide { position:absolute; z-index:2; left:0; top:0; transform:translate(-50%,8px); pointer-events:none; white-space:nowrap; font-size:13px; font-weight:600; text-shadow:0 1px 3px #000, 0 0 8px rgba(0,0,0,.6); }
.bubble { position:absolute; z-index:4; left:0; top:0; transform:translate(-50%,-100%); background:#fbf8f2; color:var(--ink); border-radius:14px; padding:10px 13px; font-size:13.5px; max-width:250px; box-shadow:0 6px 20px rgba(0,0,0,.35); display:none; }
.bubble::after { content:""; position:absolute; left:var(--tail,50%); bottom:-7px; margin-left:-7px; border:7px solid transparent; border-bottom:0; border-top-color:#fbf8f2; }
.bubble b { display:block; font-size:12px; color:#8a6a2a; margin-bottom:2px; }
.bubble .row { margin-top:8px; display:flex; gap:6px; }
.act { position:absolute; z-index:4; left:0; top:0; transform:translate(-50%,-100%); display:none; }
.btn { background:#1d1c22; color:#fbf8f2; border-radius:10px; padding:8px 14px; font-weight:700; font-size:14px; white-space:nowrap; text-decoration:none; display:inline-block; }
.btn.light { background:#fbf8f2; color:#1d1c22; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.btn.acc { background:#ffd38a; color:#3a2a12; box-shadow:0 4px 16px rgba(255,200,120,.25); }
.btn.ghost { background:transparent; border:1px solid #cfc7ba; color:#4a4650; font-weight:600; }
.btn.small { font-size:12px; padding:6px 10px; }
.btn.on { background:#efe8dc; }
.btn kbd { font:11px ui-monospace,monospace; background:rgba(0,0,0,.12); border-radius:4px; padding:0 5px; margin-left:6px; }
.btn.loading { opacity:.6; pointer-events:none; }
.link { color:#6d6672; text-decoration:underline; font-size:13px; padding:4px; }

/* 시트(종이) */
.sheet { position:absolute; z-index:7; left:50%; top:calc(var(--vvt, 0px) + var(--vvh, 100%) / 2); transform:translate(-50%,-50%); width:min(430px, calc(100% - 24px)); max-height:calc(var(--vvh, 100%) - 90px); overflow:auto; background:var(--paper); color:var(--ink); border-radius:18px; padding:18px 18px 16px; display:none; box-shadow:0 18px 50px rgba(0,0,0,.5); user-select:text; -webkit-user-select:text; touch-action:auto; }
.sheet.open { display:block; }
.sheet h3 { margin:0 0 4px; font-size:18px; padding-right:24px; font-family:"Gowun Batang","AppleMyungjo",serif; }
.sheet .sub { margin:0 0 10px; color:#77727c; font-size:13px; }
.sheet .npcline { display:flex; gap:10px; align-items:flex-start; background:#f1ebe0; border-radius:12px; padding:9px 11px; margin-bottom:12px; font-size:13.5px; }
.sheet .npcline i { font-style:normal; font-weight:700; color:#8a6a2a; display:block; font-size:12px; }
.sheet textarea { width:100%; min-height:110px; border:1px solid #ddd3c4; border-radius:10px; background:#fff; padding:11px; font:inherit; resize:none; color:var(--ink); }
.sheet textarea.error { border-color:#b4432f; }
#tText { min-height:64px; }
.chips { display:flex; gap:6px; margin:0 0 8px; flex-wrap:wrap; }
.chip { border:1px solid #ddd3c4; background:#fff; color:#5c5560; border-radius:20px; padding:4px 12px; font-size:13px; }
.chip.on { background:#1d1c22; color:#fbf8f2; border-color:#1d1c22; }
.sheet .row { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; }
.sheet .row.spread { justify-content:space-between; }
.sheet .row.col { flex-direction:column; align-items:stretch; }
.sheet .row .btns { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.sheet .note { font-size:12px; color:#8d8794; margin:6px 0 0; }
.sheet .err { font-size:13px; color:#b4432f; white-space:pre-line; }
.count-row { display:flex; justify-content:space-between; gap:8px; margin-top:4px; min-height:18px; }
.count { font-size:12px; color:#8d8794; flex:none; }
.count.over { color:#b4432f; }
.letter { background:#fff; border:1px solid #e7ddcc; border-radius:8px; padding:14px; font-family:"Gowun Batang","AppleMyungjo",serif; transform:rotate(-.5deg); line-height:1.7; white-space:pre-wrap; word-break:break-word; margin:4px 0; }
.letter .k { font-family:-apple-system,sans-serif; font-size:11.5px; color:#8d8794; display:block; margin-bottom:4px; white-space:normal; }
.letter .op { color:#8a6a2a; font-weight:700; }
.x { position:sticky; top:0; float:right; z-index:1; margin:-8px -6px 0 0; width:32px; height:32px; border-radius:50%; background:var(--paper); font-size:20px; color:#8d8794; }   /* 긴 대화를 내려도 닫기는 위에 남는다(C-3) */
.list .it { border:1px solid #e7ddcc; border-radius:10px; padding:10px 12px; margin:8px 0; background:#fff; font-size:14px; display:block; width:100%; text-align:left; color:var(--ink); }
.list .it b { color:#8a5a12; }
.list .it small { color:#8d8794; display:block; }
.list .it.dim { opacity:.6; }
.list h4 { margin:14px 0 2px; font-size:13px; color:#77727c; font-weight:700; }
.list .listened { font-size:13px; color:#5c5560; margin:6px 0; }
.msg { max-width:80%; padding:8px 11px; border-radius:12px; margin:6px 0; font-size:14px; white-space:pre-wrap; word-break:break-word; }
.msg.them { background:#efe8dc; }
.msg.mine { background:#1d1c22; color:#fbf8f2; margin-left:auto; }
.msg.pending { opacity:.6; }
.msgNote { font-size:11.5px; color:#8d8794; text-align:right; margin:-3px 2px 4px; }
.typing { color:#8a6a2a !important; }
.safety { display:flex; gap:6px; margin-bottom:8px; }
.safety button { font-size:12px; border:1px solid #ddd3c4; border-radius:8px; padding:4px 9px; color:#5c5560; }
.closed { margin-top:12px; padding:10px 12px; background:#f1ebe0; border-radius:10px; font-size:14px; }
.reasons { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.reasons button { text-align:left; border:1px solid #ddd3c4; background:#fff; border-radius:10px; padding:9px 12px; font-size:14px; }
.reasons button[aria-pressed="true"] { background:#1d1c22; color:#fbf8f2; border-color:#1d1c22; }
.check { font-size:13px; color:#5c5560; display:flex; gap:6px; align-items:center; }
.sheet.calm { background:#f4f0e8; }
.lines:empty { display:none; }
.lines { display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.lines .btn { text-align:center; }
.toast { position:absolute; z-index:8; left:50%; top:104px; transform:translateX(-50%); background:#fbf8f2; color:var(--ink); border-radius:12px; padding:10px 16px; display:none; font-size:14px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.4); max-width:calc(100% - 24px); text-align:center; }
.toast.click { cursor:pointer; }
.toast a { display:block; font-size:13px; font-weight:500; color:#8a5a12; margin-top:4px; }

/* 모바일 (목업 r2 세로 화면) */
@media (max-width: 600px) {
  .top { flex-wrap:wrap; padding:12px; gap:8px; }
  .logo { font-size:16px; } .logo svg { width:24px; height:24px; }
  .stats { order:5; width:100%; display:flex; gap:10px; justify-content:flex-start; }
  .circ { width:34px; height:34px; }
  .pill { height:34px; padding:0 10px; font-size:13px; }
  .ctrl { display:none; }
  .journey { top:100px; font-size:12px; }
  .toast { top:140px; white-space:normal; }
  .help { top:100px; right:12px; }
  .help .desk { display:none; } .help .mob { display:inline; }
  .menu { top:100px; }
}
@media (prefers-reduced-motion: reduce) { #boatCount.pop { animation:none; } .loading { transition:none; } }

/* v5: 상대 표시 · 익명 체크 · 배 상세(S6-1) */
.whoName { display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--ink); }
.whoName.anon { color:#4f6a86; }
.whoName .av { width:20px; height:23px; flex:none; }
#tWho .av, #readWho .av { width:28px; height:32px; }
.list .it .whoName, #sBoat .it .whoName { vertical-align:middle; }
.toast.high { top:6px; }   /* 시트가 열려 있으면 화면 맨 위(시트 바깥)로 */
#sBoat .recallBar { position:sticky; bottom:-16px; margin:12px -18px -16px; padding:10px 18px 14px; background:var(--paper); border-top:1px solid #eee4d4; }
.sheet .who { font-size:12.5px; color:#77727c; margin:0 0 6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.check.anon { margin-top:8px; flex-wrap:wrap; }
.check.anon input { width:17px; height:17px; accent-color:#1d1c22; }
.check.anon small { color:#8d8794; font-size:12px; }
.notice { background:#f1ebe0; border-radius:10px; padding:8px 10px; font-size:12.5px; color:#5c5560; margin:6px 0 0; }
.notice b { color:#8a5a12; }
#cfSub { white-space:pre-line; }
.sheet h3 .back { font-size:20px; color:#8d8794; padding:0 8px 0 0; vertical-align:-1px; }
.list .it .t { font-family:"Gowun Batang","AppleMyungjo",serif; }
.stats3 { display:flex; gap:6px; margin:10px 0 4px; }
.stats3 div { flex:1; background:#f1ebe0; border-radius:10px; padding:6px; text-align:center; font-size:12px; color:#77727c; }
.stats3 b { display:block; font-size:18px; color:var(--ink); }
#sBoat h4 { margin:14px 0 2px; font-size:13px; color:#77727c; font-weight:700; }
#sBoat .it { border:1px solid #e7ddcc; border-radius:10px; padding:10px 12px; margin:8px 0; background:#fff; font-size:14px; display:block; width:100%; text-align:left; color:var(--ink); }
#sBoat .it b { color:#8a5a12; } #sBoat .it small { color:#8d8794; display:block; }
.tl { list-style:none; margin:6px 0; padding:0 0 0 16px; border-left:2px solid #e3d7c3; }
.tl li { position:relative; font-size:13.5px; margin:0 0 7px; }
.tl li::before { content:""; position:absolute; left:-22px; top:6px; width:10px; height:10px; border-radius:50%; background:#d9c7a6; }
.tl li.now::before { background:#e0a43a; box-shadow:0 0 0 3px rgba(224,164,58,.25); }
.tl li.rest { color:#8d8794; } .tl li.rest::before { background:#fff; border:2px solid #d9c7a6; width:6px; height:6px; }
.tl small { color:#8d8794; }
.btn.warn { background:none; color:#a2442f; border:1px solid #e3c2b6; }
.sheet .row.spread .note { margin:0; align-self:center; }

/* UX 점검 수정(2026-11-06, docs/ux-audit-20261106.md) */
.dim { position:absolute; inset:0; z-index:6; background:rgba(5,7,13,.45); display:none; }   /* #8 시트 뒤 딤, 누르면 닫기 */
.dim.on { display:block; }
.journey.hush { visibility:hidden; }   /* #7 답장 토스트가 떠 있는 동안 위쪽 한 줄은 숨김 */
.guide.tap { pointer-events:auto; cursor:pointer; padding:12px 14px; margin-top:-12px; }   /* #2-A 발밑 답장 안내 → 우체통 */
.toast { width:max-content; }   /* left:50% 기준으로 폭이 반으로 줄어 모바일에서 두 줄로 꺾이던 것(#7) */
.toast .tbtn { margin-left:8px; vertical-align:middle; }
@media (max-width: 600px) {   /* #4 터치 영역 최소 44px: 겉모습이 작은 것은 ::after 로 누르는 영역만 넓힌다 */
  .circ, .pill.chan, .chip, .safety button, .sheet h3 .back { position:relative; }
  .circ::after { content:""; position:absolute; inset:-5px; }
  .pill.chan::after { content:""; position:absolute; inset:-6px 0; }   /* 테두리 1px 포함 */
  .chips { row-gap:14px; }   /* 두 줄로 꺾여도 위아래 칩의 누르는 영역이 겹치지 않게 */
  .chip::after { content:""; position:absolute; inset:-8px -3px; }
  .safety { margin-bottom:12px; }
  .safety button::after { content:""; position:absolute; inset:-8px 0; }
  .sheet h3 .back::after { content:""; position:absolute; inset:-12px -6px -12px -14px; }
  .x { width:44px; height:44px; margin:-12px -12px 0 0; }
  .btn, .meBtn, .acts button, .menu button, .reasons button { min-height:44px; }
  .link { min-height:44px; display:inline-flex; align-items:center; }
  .check.anon { min-height:44px; margin-top:4px; }
}

/* v6 ①A: 하단 = 왼쪽 작은 [동작] + 가운데 큰 [우체통](안 읽은 답장이 있는 대화 수 배지) */
.me { flex-direction:row; align-items:flex-end; gap:10px; }
.me .meBtn { height:48px; padding:0 14px; border-radius:14px; }
.me .acts { position:absolute; left:0; bottom:calc(100% + 8px); }
.me .acts button { min-height:44px; }
.mailBtn { position:relative; height:56px; padding:0 22px; border-radius:14px; display:flex; align-items:center; gap:7px; font-size:15px; font-weight:700; background:var(--paper); color:var(--ink); border:1px solid var(--paper); box-shadow:0 6px 20px rgba(0,0,0,.35); }
.mailBtn svg { width:20px; height:20px; }
.mailBtn .bdg { position:absolute; top:-7px; right:-7px; min-width:22px; height:22px; border-radius:11px; padding:0 6px; background:#e0583f; color:#fff; font-size:12px; font-style:normal; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #10131C; }
.mailBtn .bdg[hidden] { display:none; }
/* v6 공통: 띄운 직후 위쪽 줄 둘째 줄 */
.journey.two { border-radius:14px; white-space:normal; text-align:center; width:max-content; }
.journey.two:not(.hush) ~ .toast:not(.high) { top:128px; }   /* 두 줄 안내와 겹치지 않게 아래로 */
@media (max-width: 600px) { .journey.two:not(.hush) ~ .toast:not(.high) { top:178px; } }
.journey small { display:block; font-size:11.5px; color:#c9c5d0; margin-top:2px; }
.help .legal { display:block; margin-top:6px; }
.help .legal a, .sheet .legal a { text-decoration:underline; }
.sheet .legal { font-size:11px; line-height:1.6; color:#9a94a0; margin:10px 0 0; text-align:center; }

/* v7 ④A 조치 통지 · ⑤A 문의·이의제기 (docs/mockup-v7.html) */
.help .askLink { display:block; margin-top:8px; padding:4px 0; font-size:13px; font-weight:700; color:var(--acc); text-decoration:underline; }
.it.noti { border-color:#e8c6bd !important; background:#fff7f4 !important; }
.it.noti .in { display:block; width:100%; text-align:left; color:var(--ink); padding:0; }
.it .nt { display:block; font-size:12.5px; color:#8a3a2a; font-weight:700; margin-top:4px; }
.mini { display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:10px; border:1px solid #d8cfc0; background:#fff; color:var(--ink); font-size:12.5px; font-weight:600; margin-top:6px; }
.msgNote.noti { color:#8a3a2a; font-weight:700; }
.msgNote.noti .mini { margin:2px 0 0 4px; height:30px; }
.inq-card .t { font-weight:700; }
.inq-ans { margin:6px 0 0; padding:8px 10px; background:#f1ebe0; border-radius:8px; font-size:13.5px; white-space:pre-wrap; word-break:break-word; }
.inq-ans small { display:block; margin-top:4px; }
.inq-sub { margin:0 0 10px; color:#77727c; font-size:13px; }
.inq-h { margin:12px 0 4px; font-size:12px; color:#77727c; font-weight:700; }
.inq-types { display:flex; flex-wrap:wrap; gap:6px; }
.inq-types button { border:1px solid #ddd3c4; background:#fff; color:#5c5560; border-radius:20px; padding:6px 12px; font-size:13px; }
.inq-types button[aria-checked="true"] { background:#1d1c22; color:#fbf8f2; border-color:#1d1c22; }
.inq-tbox { border:1px solid #e7ddcc; border-radius:10px; padding:9px 11px; background:#fff; font-size:14px; }
.inq-tbox .t { font-family:"Gowun Batang","AppleMyungjo",serif; display:block; }
.inq-tbox small { color:#8d8794; font-size:12px; }
.inq .inq-text { min-height:120px; }
.inq-row { display:flex; justify-content:space-between; gap:8px; margin-top:4px; min-height:18px; }
.inq-err { font-size:13px; color:#b4432f; }
.inq-count { font-size:12px; color:#8d8794; flex:none; } .inq-count.over { color:#b4432f; }
.inq-note { font-size:12px; color:#8d8794; margin:6px 0 0; }
.inq .inq-send { display:block; width:100%; height:48px; border-radius:12px; margin-top:10px; font-size:15px; }
.inq-link { display:block; margin:12px auto 0; font-size:13px; color:#6d6672; text-decoration:underline; min-height:36px; }
.inq-code { font:700 20px/1.3 ui-monospace, Menlo, monospace; letter-spacing:1px; background:#f1ece2; border-radius:10px; padding:10px; text-align:center; margin:2px 0 6px; user-select:all; -webkit-user-select:all; }
.inq-warn { font-size:13px; color:#5c5560; background:#fff3d9; border-radius:10px; padding:9px 11px; margin:8px 0 0; }
.inq-warn b { color:#8a3a2a; }
.inq-in { display:block; width:100%; height:44px; border:1px solid #ddd3c4; border-radius:10px; background:#fff; padding:0 11px; font:inherit; color:var(--ink); margin:0 0 8px; text-transform:uppercase; }
.inq-result .inq-card { border:1px solid #e7ddcc; border-radius:10px; padding:10px 12px; margin:10px 0 0; background:#fff; font-size:14px; }
.inq-result small, .inq-card small { color:#8d8794; display:block; font-size:12px; }
@media (max-width: 600px) { .inq-types button { min-height:40px; } .mini { min-height:40px; } }