:root {
  --ink: #f4e6c8;
  --ink-dim: #c9b38a;
  --wood-0: #1a0f08;
  --wood-1: #2b1a0e;
  --wood-2: #4a2c16;
  --brass: #d9a441;
  --brass-hi: #f3cf72;
  --up: #ff5a4f;      /* 한국식: 상승 빨강 */
  --down: #4f9dff;    /* 하락 파랑 */
  --panel: rgba(26, 15, 8, 0.82);
  --line: rgba(217, 164, 65, 0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--wood-0); color: var(--ink);
  font-family: 'Noto Sans KR', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.tv-layer { position: fixed !important; inset: 0; pointer-events: none; }
.tv-layer * { pointer-events: none !important; }
.tv-board { background: #07090c; overflow: hidden; }
.tv-board .tradingview-widget-container { width: 100%; height: 100%; display: flex; flex-direction: column; }
.tv-board .tradingview-widget-container__widget { flex: 1; min-height: 0; }
.tv-board .tradingview-widget-copyright { font-size: 11px; line-height: 18px; text-align: right; padding: 0 8px; }
.tv-board .tradingview-widget-copyright a { color: #6b7a8c; text-decoration: none; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

/* ---------- top bar ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(20,11,5,.95), rgba(20,11,5,.6) 80%, transparent);
  z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-star { color: var(--brass); font-size: 18px; text-shadow: 0 0 10px rgba(243,207,114,.6); }
.brand-name { font-family: 'Black Han Sans', sans-serif; font-size: 18px; letter-spacing: .5px; }
.brand-name em { font-style: normal; color: var(--brass-hi); }
.online { font-size: 12px; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 99px; }
.online i { width: 7px; height: 7px; border-radius: 50%; background: #5bd36a; box-shadow: 0 0 6px #5bd36a; }
.online b { color: var(--ink); font-size: 13px; }
.online .gauge { width: 46px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.online .gauge span { display: block; height: 100%; width: 0; background: #5bd36a; transition: width .4s, background .4s; }
.online em { font-style: normal; font-weight: 800; color: #fff; background: #c0392b; padding: 1px 6px; border-radius: 4px; }
.online.busy i, .online.busy .gauge span { background: #ff9a3c; box-shadow: 0 0 6px #ff9a3c; }
.online.full i, .online.full .gauge span { background: #ff4a3c; box-shadow: 0 0 6px #ff4a3c; }
.online.full { border-color: #ff4a3c; }

.ticker { flex: 1; overflow: hidden; height: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker-track { display: inline-flex; gap: 40px; white-space: nowrap; line-height: 28px; font-size: 13px;
  animation: ticker 40s linear infinite; padding-left: 100%; }
.ticker-track span b { font-family: 'Rye', serif; font-weight: 400; color: var(--brass-hi); margin-right: 6px; }
.ticker-track .up { color: var(--up); } .ticker-track .down { color: var(--down); }
@keyframes ticker { to { transform: translateX(-100%); } }

.btn-brass { font: 700 13px 'Noto Sans KR', sans-serif; color: #2a1606; cursor: pointer; white-space: nowrap;
  padding: 8px 14px; border-radius: 8px; border: 1px solid #f7dc95;
  background: linear-gradient(180deg, #f6d77f, #c98d2c); box-shadow: 0 2px 0 #7a4f12, inset 0 1px 0 #fff6; }
.btn-brass:active { transform: translateY(1px); box-shadow: 0 1px 0 #7a4f12; }
.btn-icon { width: 36px; height: 34px; flex: none; border-radius: 8px; border: 1px solid var(--line); cursor: pointer;
  background: rgba(20, 11, 5, .7); font-size: 16px; line-height: 1; }
.btn-icon[aria-pressed="true"] { border-color: var(--brass-hi); box-shadow: 0 0 10px rgba(243, 207, 114, .35); }
.btn-ghost { font: 600 13px 'Noto Sans KR', sans-serif; color: var(--ink-dim); background: none; cursor: pointer;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; }

.mode-badge { position: fixed; top: 58px; right: 16px; font-size: 11px; padding: 4px 9px; border-radius: 6px;
  background: rgba(120, 60, 20, .8); border: 1px solid var(--line); color: var(--brass-hi); z-index: 5; }
.clock { flex: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 15px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; background: var(--panel); padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); }
.clock b { color: var(--ink); font-weight: 800; }
.clock .next { color: var(--brass-hi); }
.clock .next b { color: var(--brass-hi); display: inline-block; min-width: 2ch; text-align: right; }
.clock .sep { opacity: .35; }
.clock .mk::before { content: '●'; margin-right: 4px; }
.clock .mk.regular { color: #5bd36a; }
.clock .mk.pre, .clock .mk.after { color: #ffb347; }
.clock .mk.closed, .clock .mk.weekend, .clock .mk.holiday { color: #9a8a74; }
.hint { position: fixed; left: 50%; top: 58px; transform: translateX(-50%); font-size: 12px; color: var(--ink-dim);
  background: var(--panel); padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line);
  transition: opacity .6s; white-space: nowrap; z-index: 4; }
.hint.gone { opacity: 0; }

/* ---------- chat ---------- */
.chatbar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom) + var(--kb, 0px)); transform: translateX(-50%); width: min(560px, calc(100% - 32px)); z-index: 5; }
.chat-log { max-height: min(30vh, calc(var(--vvh, 100vh) - 190px)); overflow-y: auto; display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px;
  mask-image: linear-gradient(180deg, transparent, #000 30%); font-size: 13px; scrollbar-width: none; }
.chat-log div { text-shadow: 0 1px 2px #000, 0 0 6px #000; animation: chat-fade 20s linear forwards; }
@keyframes chat-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.chat-warn { margin-bottom: 6px; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: rgba(120, 30, 20, .9); border: 1px solid #ff8a6a; color: #ffe2d6; }
.chat-warn[hidden] { display: none; }
.chat-log b { color: var(--brass-hi); font-weight: 700; margin-right: 6px; }
.chat-input { display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 5px;
  backdrop-filter: blur(6px); }
.chat-input input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: 14px 'Noto Sans KR', sans-serif; padding: 6px 8px; }
.chat-input input::placeholder { color: #8d7655; }
.chat-input .emoji-btn { width: 36px; background: none; font-size: 18px; color: inherit; }
.chat-input .drink-btn { padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(224, 161, 44, .18); color: var(--ink); font: 700 14px 'Noto Sans KR', sans-serif; cursor: pointer; }
.chat-input .drink-btn[hidden] { display: none; }
.talk { margin-bottom: 8px; padding: 10px; background: var(--panel); border: 1px solid #c9953a; border-radius: 12px; backdrop-filter: blur(6px); }
.talk:not([hidden]) { animation: fade-in .15s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
.talk[hidden] { display: none; }
.talk-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); margin-bottom: 8px; }
.talk-head b { color: var(--brass-hi); font-size: 15px; }
.talk-close { margin-left: auto; background: none; border: 0; color: var(--ink-dim); font-size: 16px; cursor: pointer; }
.talk-options { display: flex; flex-wrap: wrap; gap: 6px; }
.talk-options button { font: 600 13px 'Noto Sans KR', sans-serif; color: var(--ink); background: rgba(243, 207, 114, .1);
  border: 1px solid var(--line); border-radius: 99px; padding: 7px 12px; cursor: pointer; }
.talk-options button:hover, .talk-options button:active { background: rgba(243, 207, 114, .25); }
.tag.staff { pointer-events: auto; cursor: pointer; }
.tag.staff.nameless { visibility: hidden; pointer-events: none; } /* 밴드: 명찰 없이 몸을 눌러 말 걸기 */

.confess { position: fixed; z-index: 8; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom) + var(--kb, 0px)); transform: translateX(-50%); width: min(620px, calc(100% - 32px));
  display: flex; flex-direction: column; animation: fade-in .6s ease-out; }
.confess[hidden] { display: none; }
.cf-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.cf-head b { font-family: 'Black Han Sans', sans-serif; font-weight: 400; font-size: 16px; color: #e8c9a0; opacity: .8; }
.cf-timer { font: 800 14px 'Noto Sans KR', sans-serif; color: #e8c9a0; font-variant-numeric: tabular-nums; }
.cf-timer::before { content: '🕯️ '; }
.cf-timer.soon { color: #ff8a7a; }
.cf-exit { font: 600 12px 'Noto Sans KR', sans-serif; color: #c9a37a; background: rgba(0,0,0,.4); border: 1px solid rgba(232,201,160,.3);
  border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.cf-note { text-align: center; font-size: 11px; color: #8a7458; margin-bottom: 8px; }
/* 대화는 자막처럼: 상자 없이 화면 아래에 떠오른다 */
.cf-log { max-height: min(34vh, calc(var(--vvh, 100vh) - 240px)); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 6px; scrollbar-width: none;
  mask-image: linear-gradient(180deg, transparent, #000 25%); }
.cf-msg { max-width: 100%; text-align: center; font-size: 17px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  text-shadow: 0 2px 6px #000, 0 0 12px #000; animation: fade-in .8s ease-out; }
.cf-msg.ant { color: #f6dfb6; }
.cf-msg.ant::before { content: '격자창 너머 · '; font-size: 12px; color: #a88a62; }
.cf-msg.ant.typing { opacity: .6; letter-spacing: 4px; }
.cf-msg.me { color: #b7a99a; font-size: 14px; font-style: italic; }
.cf-msg.sys { color: #c9a37a; font-size: 13px; }
.cf-form { display: flex; gap: 6px; margin-top: 10px; }
.cf-form input { flex: 1; min-width: 0; background: rgba(10, 6, 4, .7); border: 1px solid rgba(232,201,160,.25); border-radius: 12px;
  color: #f6dfb6; padding: 10px 12px; font: 15px 'Noto Sans KR', sans-serif; outline: 0; }
.cf-form input::placeholder { color: #7a6650; }
.cf-form input:focus { border-color: rgba(232,201,160,.6); }
.cf-form button { width: 44px; border: 0; border-radius: 12px; cursor: pointer; color: #2a1606; background: linear-gradient(180deg, #e8c9a0, #a8834a); }
.cf-form button:disabled { opacity: .5; }

/* 고해실 안: 사방이 어둡고, 살룬 UI 는 숨긴다 */
body.in-booth::after { content: ''; position: fixed; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 25%, rgba(0,0,0,.92) 75%); animation: fade-in 1.4s ease-out; }
body.in-booth #labels, body.in-booth .chatbar, body.in-booth .hint, body.in-booth .tv-layer { display: none; }
body.in-booth .topbar, body.in-booth .clock { opacity: .25; transition: opacity 1s; }
.emoji-pad { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-bottom: 8px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(6px); }
.emoji-pad[hidden] { display: none; }
.emoji-pad button { font-size: 24px; line-height: 1; padding: 6px 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.emoji-pad button:hover, .emoji-pad button:active { background: rgba(243, 207, 114, .15); }
.bubble.emoji { font-size: 36px; line-height: 1; padding: 6px 10px; }
.chat-input button[type=submit] { width: 36px; border: 0; border-radius: 8px; cursor: pointer; color: #2a1606;
  background: linear-gradient(180deg, #f6d77f, #c98d2c); font-size: 14px; }

/* ---------- labels over ants ---------- */
.tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; text-align: center;
  font-size: 16px; line-height: 1.25; will-change: transform; }
.tag .name { display: inline-block; padding: 3px 9px; border-radius: 6px; background: rgba(20, 11, 5, .78);
  border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.tag.far { opacity: .45; z-index: 0; }
.tag.far .pnl { display: none; }
.tag:not(.far) { z-index: 1; }
.tag.me .name { border-color: var(--brass-hi); color: var(--brass-hi); }
.tag.staff .name { background: rgba(60, 30, 10, .88); border-color: #c9953a; color: #f3cf72; }
.tag .pnl { display: block; font-weight: 800; font-size: 14px; text-shadow: 0 1px 2px #000; }
.tag .pnl .up { color: var(--up); } .tag .pnl .down { color: var(--down); }
.bubble { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); max-width: 200px; padding: 6px 10px;
  border-radius: 12px; background: #fbf1da; color: #2a1606; font-size: 12px; font-weight: 600; line-height: 1.35;
  box-shadow: 0 3px 10px rgba(0,0,0,.4); word-break: break-word; animation: pop .18s ease-out; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fbf1da; border-bottom: 0; }
/* 위치(transform)는 JS 가 매 프레임 정한다. 등장 효과에 transform/scale 을 쓰면 위치까지 같이 변해서
   화면 구석에서 날아오므로, 독립 translate(위치와 더해질 뿐)와 opacity 만 쓴다 */
@keyframes pop { from { translate: 0 6px; opacity: 0; } }

/* ---------- dialog ---------- */
dialog { border: 1px solid var(--brass); border-radius: 14px; padding: 0; color: var(--ink); width: min(420px, calc(100% - 32px));
  background: radial-gradient(120% 80% at 50% 0%, #3b2412, #1e1209); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(10, 5, 2, .6); backdrop-filter: blur(3px); }
dialog form { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
dialog h2 { margin: 0; font-family: 'Black Han Sans', sans-serif; font-weight: 400; font-size: 22px; color: var(--brass-hi); }
dialog .sub { margin: -6px 0 4px; font-size: 12px; color: var(--ink-dim); }
dialog label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-dim); flex: 1; }
dialog input[type=text], dialog input:not([type]), dialog input[type=number] { background: rgba(0,0,0,.35); border: 1px solid var(--line);
  border-radius: 8px; color: var(--ink); padding: 9px 10px; font: 14px 'Noto Sans KR', sans-serif; outline: 0; }
dialog input:focus { border-color: var(--brass); }
dialog .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
dialog input { width: 100%; min-width: 0; } /* 좁은 화면에서 입력칸이 화면 밖으로 밀려나지 않게 */
dialog fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 10px; align-items: center; }
dialog legend { font-size: 12px; color: var(--ink-dim); margin-bottom: 6px; float: left; width: 100%; white-space: nowrap; }
.hats label { flex: 0; cursor: pointer; }
.hats input { position: absolute; opacity: 0; }
.hats span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid #0006; }
.hats input:checked + span { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
dialog menu { display: flex; justify-content: flex-end; gap: 8px; margin: 6px 0 0; padding: 0; }

dialog .namebox { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; font-size: 12px; color: var(--ink-dim); }
dialog .namebox b { flex: 1; font-family: 'Black Han Sans', sans-serif; font-weight: 400; font-size: 18px; color: var(--brass-hi); }
dialog .namebox .btn-ghost { padding: 5px 10px; font-size: 12px; }

.full { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(10, 5, 2, .85); text-align: center; padding: 16px; }
.full[hidden] { display: none; }
.full h2 { font-family: 'Black Han Sans', sans-serif; font-weight: 400; font-size: 28px; color: var(--brass-hi); margin: 0 0 8px; }
.full p { color: var(--ink-dim); margin: 0 0 18px; }

@media (max-width: 640px), (max-height: 500px) { /* 폰 세로, 폰 가로(키 낮은 화면) 모두 */
  .ticker { display: none; }
  .topbar { justify-content: space-between; }
  .brand-name { font-size: 13px; }
  .brand { gap: 6px; }
  .brand-star { display: none; }
  .online { padding: 3px 7px; gap: 4px; font-size: 11px; }
  .online .gauge, .online .unit { display: none; }
  .topbar { gap: 6px; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); }
  .btn-brass { padding: 6px 8px; font-size: 11px; }
  .btn-icon { width: 30px; height: 30px; font-size: 14px; }
  /* 아이폰은 16px 보다 작은 입력칸을 누르면 화면을 확대해버린다 (좌우가 잘리고 확대가 안 풀림) */
  .chat-input input, .cf-form input, dialog input[type=number] { font-size: 16px; }
  .tag { font-size: 12px; }
  .tag .pnl { font-size: 11px; }
  .mode-badge { top: 92px; right: 12px; }
  .hint { font-size: 11px; top: 88px; white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 20px); }
  /* 휴대폰: 시세 띠가 숨으니 상단 바 아래 줄에 왼쪽 시계, 오른쪽 갱신 */
  .clock { position: fixed; top: 50px; left: max(10px, env(safe-area-inset-left)); font-size: 12px; gap: 6px; padding: 4px 9px; z-index: 4; }
  .clock.refresh { left: auto; right: max(10px, env(safe-area-inset-right)); }
  .clock .wide { display: none; }
}
/* 아주 좁은 폰(360px 안드로이드 등): 왼쪽 시계와 오른쪽 갱신이 겹치므로 한국 시간은 빼고 뉴욕 시간·장 상태만 */
@media (max-width: 370px) {
  #clock > span:first-child, #clock > .sep:nth-child(2) { display: none; }
}

/* ---------- 방송 모드 (?broadcast): 유튜브 송출 화면. 입력·버튼은 숨기고 채팅 흐름만 보여 준다 ---------- */
body.broadcast .chat-input, body.broadcast .hint, body.broadcast #btn-profile, body.broadcast #btn-music,
body.broadcast .talk, body.broadcast .emoji-pad, body.broadcast .chat-warn { display: none !important; }
body.broadcast .chatbar { pointer-events: none; }
body.broadcast .chat-log { max-height: 34vh; font-size: 15px; }
body.broadcast .chat-log div { animation-duration: 40s; }

/* 화면에는 안 보이고 검색엔진·스크린리더만 읽는 글 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }