/* 🫖 티타임(2026-11-03 톤 A 「밀크티 퀵바」, 시안 outputs/20261103_티타임_UI시안/2_톤A.html): 크림 카드 · 라테 테두리 · 코코아 글자.
   화면은 꽉 찬 3D 방 위에 위 한 줄 + 아래 퀵바 한 줄 + 점프뿐. 판·퀵바·칩은 뒤가 흐리게 비치는 반투명 유리(사용자) */
:root { --milk: #fffaf3; --latte: #e7d3bd; --cocoa: #6b4a3a; --ink: #4a3a42; --pink: #e86a8a; --sand: #ead9c4; --line: #ecdcea; --glass: rgba(255, 250, 243, .55); --glass-line: rgba(231, 211, 189, .9); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sand); font-family: Pretendard, system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif; color: var(--ink); -webkit-user-select: none; user-select: none; touch-action: none; -webkit-touch-callout: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
/* 반투명 유리: 뒤 방이 흐리게 비친다(블러를 못 쓰는 폰은 조금 더 진하게) */
.glass { background: var(--glass); border: 1.5px solid var(--glass-line); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); box-shadow: 0 4px 14px rgba(107, 74, 58, .14); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255, 250, 243, .9); } }
/* 이름표 */
#tags { position: fixed; inset: 0; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 10.5px; font-weight: 800; line-height: 14px; padding: 2px 7px; border-radius: 7px; background: rgba(255, 250, 243, .9); border: 1px solid var(--latte); color: var(--cocoa); }
.tag.me { background: var(--cocoa); border-color: var(--cocoa); color: var(--milk); }
.tag.bot { opacity: .9; }
/* 위 한 줄: 방 이름 · 소리/꾸미기 */
.cafe-top { position: fixed; left: 10px; right: 10px; top: calc(env(safe-area-inset-top) + 10px); display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.cafe-top > * { pointer-events: auto; }
.room { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 900; color: var(--cocoa); padding: 5px 6px 5px 10px; border-radius: 12px; }
.room small { font-size: 11px; font-weight: 900; background: var(--cocoa); color: var(--milk); border-radius: 7px; padding: 1px 6px; }
.seg { display: flex; border-radius: 12px; overflow: hidden; }
.seg button { border: 0; background: none; width: 38px; height: 32px; font-size: 15px; padding: 0; }
.seg button + button { border-left: 1.5px solid var(--glass-line); }
/* 조이스틱(누른 자리에 생김) · 처음 한 번 안내 */
.stick { position: fixed; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 250, 243, .28); border: 2px solid rgba(255, 250, 243, .9); box-shadow: 0 0 0 1px rgba(107, 74, 58, .18); pointer-events: none; }
.stick i { position: absolute; left: 33px; top: 33px; width: 44px; height: 44px; border-radius: 50%; background: var(--milk); box-shadow: 0 2px 6px rgba(107, 74, 58, .3); }
.walk-hint { position: fixed; left: 40px; bottom: calc(env(safe-area-inset-bottom) + 190px); width: 104px; height: 104px; border-radius: 50%; border: 2px dashed rgba(107, 74, 58, .45); display: grid; place-items: center; pointer-events: none; }
.walk-hint::before { content: '👆'; font-size: 26px; opacity: .8; }
.walk-hint span { position: absolute; top: 112px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 900; color: var(--cocoa); background: rgba(255, 250, 243, .85); border: 1px solid var(--latte); border-radius: 8px; padding: 3px 8px; }
/* 아래 퀵바(최근 3칸 + 고정 4칸 + ＋, 2026-11-03 사용자: 고정은 더 작게 · 왼쪽에 최근 보낸 것 3개) · 점프 · 앉기(할 수 있을 때만) */
.quickbar { --slot: clamp(24px, calc((100vw - 144px) / 8.5), 36px); position: fixed; left: 10px; bottom: calc(env(safe-area-inset-bottom) + 14px); height: 52px; display: flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 16px; } /* 칸 크기는 화면 폭에 맞춤(360폭에서도 점프와 안 겹침) */
.quickbar .slots { position: relative; display: flex; gap: 4px; }
.quickbar .slots::before { content: attr(data-label); position: absolute; left: 2px; top: -21px; font-size: 9.5px; font-weight: 900; color: var(--cocoa); background: rgba(255, 250, 243, .85); border-radius: 6px; padding: 0 5px; white-space: nowrap; pointer-events: none; }
.quickbar .slots[hidden] { display: none; }
.quickbar .s { width: var(--slot); height: calc(var(--slot) + 4px); font-size: calc(var(--slot) * .56); border-radius: 10px; }
.quickbar .recent .s { background: rgba(255, 255, 255, .42); border-style: dashed; }
.quickbar hr { flex: none; width: 1.5px; height: 26px; margin: 0 1px; border: 0; background: var(--glass-line); }
.quickbar hr[hidden] { display: none; }
.s { position: relative; flex: none; width: 42px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(240, 226, 212, .95); font-size: 21px; padding: 0; }
.s .dot { position: absolute; right: 2px; top: 2px; width: 6px; height: 6px; }
.s.more { background: var(--cocoa); color: var(--milk); border-color: var(--cocoa); font-size: 22px; font-weight: 700; }
.quickbar.pinning .s[data-quick] { border: 2px dashed var(--pink); }
.s.picked { background: #fff3f6; box-shadow: 0 0 0 3px var(--pink); transform: scale(1.06); }
.ec.picked { background: #fff3f6; box-shadow: inset 0 0 0 3px var(--pink); } /* 판 카드는 안쪽 테두리(맨 윗줄이 잘리지 않게) */ /* 📌 퀵바 바꾸기에서 고른 칸·카드 */
.sent { animation: sent .45s ease-out; }
@keyframes sent { 0% { box-shadow: 0 0 0 0 rgba(232, 106, 138, .6); transform: scale(.92); } 60% { transform: scale(1.06); } 100% { box-shadow: 0 0 0 8px rgba(232, 106, 138, 0); transform: scale(1); } }
.busy { opacity: .45; }
.jump { position: fixed; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 14px); width: 64px; height: 58px; border: 0; border-radius: 18px; background: rgba(232, 106, 138, .92); color: #fff; font-size: 26px; font-weight: 900; box-shadow: 0 4px 14px rgba(232, 106, 138, .35); display: grid; place-items: center; }
.sit { position: fixed; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 82px); height: 38px; padding: 0 12px; border-radius: 14px; font-size: 13px; font-weight: 900; color: var(--cocoa); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2fc46b; box-shadow: 0 0 0 1.5px #fff; }
/* ＋ 판: 카테고리 칩 + 이름 붙은 카드(5칸, 위아래로 넘김) */
.panel { position: fixed; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 82px); max-width: 460px; padding: 12px 10px 10px; border-radius: 20px; display: grid; gap: 9px; }
.chips { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; border: 1px solid var(--latte); background: rgba(255, 255, 255, .7); color: var(--cocoa); border-radius: 10px; padding: 5px 9px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.chips button[aria-pressed="true"] { background: var(--cocoa); border-color: var(--cocoa); color: var(--milk); }
.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-height: 186px; overflow-y: auto; /* 3줄만 보이고 나머지는 넘김(판이 방을 덜 가리게) */ overscroll-behavior: contain; touch-action: pan-y; }
.ec { position: relative; height: 56px; border-radius: 12px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(240, 226, 212, .95); display: grid; place-items: center; align-content: center; gap: 1px; padding: 0 2px; color: var(--cocoa); }
.ec em { font-style: normal; font-size: 21px; line-height: 1; }
.ec.emo em { font-size: 24px; }
.ec small { font-size: 9.5px; font-weight: 800; color: #8a6a5a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ec .dot { position: absolute; right: 4px; top: 4px; }
.tip { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 800; color: #8a6a5a; text-align: left; }
.tip .pin-mode { flex: none; font: inherit; font-size: 11.5px; font-weight: 900; border: 1px solid var(--latte); background: rgba(255, 255, 255, .8); color: var(--cocoa); border-radius: 10px; padding: 5px 9px; }
.tip .pin-mode.on { background: var(--pink); border-color: var(--pink); color: #fff; }
.panel.editing .ec:not(.picked) .dot { opacity: .5; }
/* 👯 같이 추기 말풍선(춤추는 멜로미를 누르면 그 머리 위에) */
.dance-pop { position: fixed; left: 0; top: 0; font-size: 13px; font-weight: 900; color: var(--milk); background: var(--cocoa); border: 0; border-radius: 12px; padding: 8px 14px; box-shadow: 0 3px 10px rgba(60, 30, 40, .3); display: grid; justify-items: center; line-height: 1.2; }
.dance-pop small { font-size: 10.5px; font-weight: 800; opacity: .85; }
/* 🔊 소리 창: 배경음·효과음 따로 크기·음소거 */
.sound-sheet { position: fixed; inset: 0; display: grid; place-items: start end; padding: calc(env(safe-area-inset-top) + 50px) 10px 0; pointer-events: none; }
.sound-sheet .card { pointer-events: auto; width: min(300px, 92vw); height: auto; display: grid; gap: 10px; padding: 12px 14px; border-radius: 16px; place-items: stretch; }
.sound-sheet b { font-size: 14px; color: var(--cocoa); }
.snd-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 8px; align-items: center; }
.snd-row span { font-size: 12.5px; font-weight: 900; display: grid; } .snd-row small { font-size: 10px; font-weight: 700; color: #8a6a5a; }
.snd-row input[type="range"] { width: 100%; accent-color: var(--cocoa); }
.snd-row.off input[type="range"] { opacity: .4; }
.snd-mute, .snd-close { font-size: 11.5px; font-weight: 800; border: 1px solid var(--latte); background: rgba(255, 255, 255, .8); color: var(--cocoa); border-radius: 10px; padding: 5px 9px; white-space: nowrap; }
.snd-mute[aria-pressed="true"] { background: rgba(240, 230, 234, .8); color: #9a8a92; }
.snd-close { justify-self: end; }
/* 그 밖: 확인 띠 · 안내 한 줄 · 로딩 · 꾸미기 안내 */
.qa { position: fixed; left: 8px; top: calc(env(safe-area-inset-top) + 50px); margin: 0; font: 700 10.5px ui-monospace, monospace; color: #fff; background: rgba(0, 0, 0, .55); padding: 3px 7px; border-radius: 8px; }
.toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 54px); transform: translateX(-50%); max-width: 86vw; font-size: 12.5px; font-weight: 800; color: var(--milk); background: rgba(107, 74, 58, .82); padding: 7px 13px; border-radius: 12px; text-align: center; }
.loading { position: fixed; inset: 0; display: grid; place-items: center; background: var(--sand); opacity: 1; transition: opacity .3s; }
.loading .card { display: grid; gap: 8px; justify-items: center; padding: 18px 22px; border-radius: 18px; background: var(--milk); box-shadow: 0 6px 20px rgba(90, 60, 40, .15); min-width: 220px; height: auto; }
.loading b { font-size: 18px; color: var(--cocoa); } .loading span { font-size: 12px; color: #8a7a72; font-weight: 700; }
.loading .bar { width: 180px; height: 8px; border-radius: 99px; background: #f0e2d2; overflow: hidden; } .loading .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e86a8a, #f5a35c); transition: width .25s; }
.deco-sheet { position: fixed; inset: 0; display: grid; place-items: end center; padding: 16px; background: rgba(40, 25, 30, .25); }
.deco-sheet .card { width: min(360px, 100%); height: auto; display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: var(--milk); box-shadow: 0 6px 20px rgba(60, 30, 40, .25); margin-bottom: env(safe-area-inset-bottom); place-items: stretch; }
.deco-sheet b { font-size: 16px; } .deco-sheet p { margin: 0; font-size: 13px; line-height: 1.5; color: #6a5a62; }
.deco-sheet .row { display: flex; gap: 8px; } .deco-sheet .go, .deco-sheet button { flex: 1; text-align: center; font-size: 14px; font-weight: 900; padding: 10px; border-radius: 12px; border: 0; text-decoration: none; }
.deco-sheet .go { background: var(--pink); color: #fff; } .deco-sheet button { background: #f0e6ea; color: var(--ink); }

/* 🫖 방 목록(2026-11-03 C단계 실시간): 왼쪽 위 방 칩을 누르면 그 아래로 유리 판 — 고정 방 8개 · 45명 */
button.room { border: 1.5px solid var(--glass-line); font: inherit; font-size: 12.5px; font-weight: 900; cursor: pointer; }
.room .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #9a8a92; flex: none; }
.room[data-live="live"] .live-dot { background: #4caf50; box-shadow: 0 0 0 2px rgba(76, 175, 80, .25); }
.room[data-live="retry"] .live-dot, .room[data-live="connecting"] .live-dot { background: #e0a800; animation: tea-blink 1s infinite; }
@keyframes tea-blink { 50% { opacity: .3; } }
/* 2026-11-03 사용자(폰): 방 목록이 퀵바·점프·담그기 밑에 깔려 아래 버튼이 안 보임 → 모든 메뉴 위(z-index)·뒤를 살짝 덮고(누르면 닫힘)·화면 높이 안에 들어오게(목록만 넘김) */
.rooms-sheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: start start; padding: calc(env(safe-area-inset-top) + 50px) 10px calc(env(safe-area-inset-bottom) + 12px); background: rgba(40, 25, 30, .18); }
.rooms-sheet .card { pointer-events: auto; width: min(320px, 92vw); height: auto; max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 62px); max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 62px); display: grid; gap: 8px; padding: 12px; border-radius: 16px; place-items: stretch; overflow: hidden; grid-template-rows: auto auto 1fr auto; }
.rooms-sheet b { font-size: 14px; color: var(--cocoa); }
.rooms-sheet b small { font-size: 10.5px; font-weight: 700; color: #8a6a5a; margin-left: 4px; }
.rooms-quick { font: inherit; font-size: 13px; font-weight: 900; border: 0; border-radius: 12px; padding: 9px; background: var(--cocoa); color: var(--milk); }
.rooms-list { display: grid; gap: 5px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.rooms-list button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; text-align: left; font: inherit; color: var(--cocoa); border: 1px solid var(--latte); background: rgba(255, 255, 255, .62); border-radius: 12px; padding: 5px 10px; }
.rooms-list button b { font-size: 13px; } .rooms-list button small { font-size: 10.5px; font-weight: 800; color: #8a6a5a; }
.rooms-list button .n { grid-row: span 2; font-size: 12px; font-weight: 900; background: rgba(255, 250, 243, .9); border: 1px solid var(--latte); border-radius: 9px; padding: 2px 7px; }
.rooms-list button .bar { grid-column: 1; height: 4px; border-radius: 2px; background: rgba(107, 74, 58, .12); overflow: hidden; } .rooms-list button .bar i { display: block; height: 100%; background: var(--cocoa); border-radius: 2px; }
.rooms-list button[aria-current="true"] { border-color: var(--cocoa); background: rgba(255, 248, 236, .92); box-shadow: inset 0 0 0 1px var(--cocoa); }
.rooms-list button:disabled { opacity: .45; }
.rooms-foot { display: flex; gap: 6px; justify-content: space-between; }
.rooms-foot button { font-size: 11.5px; font-weight: 800; border: 1px solid var(--latte); background: rgba(255, 255, 255, .8); color: var(--cocoa); border-radius: 10px; padding: 5px 9px; }
/* 닫힘 안내(2026-11-03): 관리자가 고른 사유별 글 — 모든 메뉴 위 가운데 */
.closed-sheet { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; background: rgba(40, 25, 30, .3); }
.closed-sheet .card { width: min(340px, 100%); height: auto; display: grid; gap: 10px; padding: 18px 16px 14px; border-radius: 20px; place-items: stretch; text-align: center; }
.closed-sheet b { font-size: 17px; color: var(--cocoa); }
.closed-sheet p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #5a4a44; white-space: pre-wrap; word-break: keep-all; }
.closed-sheet .row { display: grid; gap: 7px; margin-top: 4px; }
.closed-sheet .go, .closed-sheet button { font: inherit; font-size: 14px; font-weight: 900; padding: 11px; border-radius: 13px; border: 0; text-decoration: none; text-align: center; }
.closed-sheet .go { background: var(--cocoa); color: var(--milk); } .closed-sheet button { background: rgba(255, 255, 255, .75); color: var(--cocoa); border: 1px solid var(--latte); }
.rooms-note { margin: 2px; font-size: 12.5px; line-height: 1.5; color: #6a5a52; }
/* 혼자 놀기 표시(2026-11-03): 실시간 방 밖일 때 방 칩 아래에 작게 */
.solo-badge { position: fixed; left: 12px; top: calc(env(safe-area-inset-top) + 50px); font-size: 10.5px; font-weight: 800; color: var(--cocoa); background: rgba(255, 250, 243, .78); border: 1px solid var(--glass-line); border-radius: 9px; padding: 2px 8px; pointer-events: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.quickbar.cool .slots { opacity: .45; transition: opacity .2s; } /* ⏳ 연타 제한 중(2026-11-03) */
/* ⚙️ 설정 창(2026-11-03): 소리 + 🏷️ 이름표(모두 보기 · 내 것만 · 모두 가리기) */
.set-sub { font-size: 11px; font-weight: 900; color: #8a6a5a; margin-top: 2px; }
.tag-row { grid-template-columns: 76px 1fr; }
.tag-modes { display: flex; gap: 4px; flex-wrap: wrap; }
.tag-modes button { font: inherit; font-size: 11px; font-weight: 800; border: 1px solid var(--latte); background: rgba(255, 255, 255, .8); color: var(--cocoa); border-radius: 10px; padding: 5px 8px; white-space: nowrap; }
.tag-modes button[aria-pressed="true"] { background: var(--cocoa); border-color: var(--cocoa); color: var(--milk); }
.seg #sound.muted { position: relative; } .seg #sound.muted::after { content: '🔇'; position: absolute; right: 2px; bottom: 0; font-size: 9px; }
/* 👤 계정(2026-11-03): 설정 창 안 로그인 — 광장·꾸미기와 같은 구글 로그인 블록(plaza-account.css) */
.sound-sheet .card { max-height: calc(100dvh - env(safe-area-inset-top) - 70px); overflow-y: auto; overscroll-behavior: contain; }
.acct { display: grid; gap: 6px; justify-items: start; }
.acct-note { margin: 0; font-size: 12px; font-weight: 700; color: #6a5a52; line-height: 1.45; }
.acct .login-block { width: 100%; }
.deco-sheet #deco-login { background: var(--cocoa); color: var(--milk); }