/* ===== 워키토키 · 스킨 토큰 =====
   모든 색·모서리·글꼴은 토큰으로만 쓴다. 스킨은 html[data-skin] 에서 토큰만 갈아끼운다 (추후 상품화 단위)
   기본 「모던」: 따뜻한 흰 바탕, 1px 경계선, 그림자 없음, 검정 주 버튼, 옅은 파스텔은 태그에만 */
:root{
  --bg:#FBFBFA; --surface:#FFFFFF; --sunken:#F4F3EF; --border:#E7E6E2; --border-strong:#D6D4CE;
  --text:#1B1B19; --muted:#77756F; --faint:#A8A69F;
  --primary:#1B1B19; --on-primary:#FFFFFF; --primary-hover:#34342F;
  --ok:#2F6B3B; --ok-bg:#EAF2EA; --bad:#A33A36; --bad-bg:#FBECEB; --info:#1F6C9F; --info-bg:#E4F2FB; --warn:#8A5D00; --warn-bg:#FAF1D8; --violet:#5B4A9E; --violet-bg:#EEEBFA;
  --talk:#2F6B3B;
  --radius:10px; --radius-sm:6px; --bw:1px; --shadow:none; --press:scale(.98);
  --font:'Pretendard Variable',Pretendard,-apple-system,'SF Pro Display','Helvetica Neue','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
  --display-weight:700; --tracking:-.02em;
}
html[data-skin="midnight"]{
  --bg:#121311; --surface:#1A1B19; --sunken:#0E0F0D; --border:#2B2C29; --border-strong:#3A3B37;
  --text:#ECEBE6; --muted:#9B9A93; --faint:#6A6963;
  --primary:#ECEBE6; --on-primary:#121311; --primary-hover:#FFFFFF;
  --ok:#8FD19B; --ok-bg:#1B2A1E; --bad:#F09A95; --bad-bg:#2E1B1A; --info:#8CC7EE; --info-bg:#162733; --warn:#E6C470; --warn-bg:#2C2514; --violet:#B9ABF2; --violet-bg:#221E36;
  --talk:#8FD19B;
}
html[data-skin="tile"]{   /* 하유빈 타임의 만화 타일 */
  --bg:#CFEFFF; --surface:#FFFFFF; --sunken:#FFF6D8; --border:#1F1F1F; --border-strong:#1F1F1F;
  --text:#1F1F1F; --muted:#4B4B4B; --faint:#7A7A7A;
  --primary:#3DC95A; --on-primary:#1F1F1F; --primary-hover:#35B850;
  --ok:#1F1F1F; --ok-bg:#9BE5AB; --bad:#1F1F1F; --bad-bg:#FF9C9C; --info:#1F1F1F; --info-bg:#8FD3FF; --warn:#1F1F1F; --warn-bg:#FFD93D; --violet:#1F1F1F; --violet-bg:#D5C2FF;
  --talk:#3DC95A;
  --radius:16px; --radius-sm:12px; --bw:3px; --shadow:4px 4px 0 #1F1F1F; --press:translate(4px,4px);
  --font:'Jua','Pretendard Variable',sans-serif; --display-weight:400; --tracking:0;
}
html[data-skin="tile"] body{background-image:radial-gradient(#7FC4F0 1.6px, transparent 1.7px);background-size:16px 16px}
html[data-skin="tile"] .btn:active,html[data-skin="tile"] .round:active,html[data-skin="tile"] .ptt:active{box-shadow:none}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html{font-size:16px} html[data-size="large"]{font-size:19px}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
::selection{background:var(--warn-bg)}
:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.ic{width:1.25em;height:1.25em;display:block;flex:0 0 auto}
code,.mono,.handle{font-family:var(--mono),var(--font);font-weight:500}

.app{height:100dvh;max-width:34rem;margin:0 auto;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem .5rem}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:var(--tracking);font-size:1.05rem}
.brand-mark{display:flex;color:var(--text)}
.conn{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted)}
.conn-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--faint)} .conn.on .conn-dot{background:var(--ok)}

.view{flex:1 1 auto;min-height:0;overflow-y:auto;padding:.5rem 1.25rem 2rem;-webkit-overflow-scrolling:touch}
.view-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.75rem 0 1rem}
h1{font-size:1.6rem;line-height:1.2;letter-spacing:var(--tracking);font-weight:var(--display-weight);margin:0}
h2{font-size:1.2rem;line-height:1.3;letter-spacing:var(--tracking);font-weight:var(--display-weight);margin:0}
.display{font-size:2rem;line-height:1.15;letter-spacing:-.03em;margin:2.5rem 0 1rem}
.lede{color:var(--muted);margin:0 0 2rem;max-width:30rem}
.fine{font-size:.82rem;color:var(--muted);margin:.5rem 0 0;line-height:1.5}
.label{font-size:.82rem;color:var(--muted);margin:0 0 .5rem}
.msg{min-height:1.4rem;font-size:.9rem;color:var(--bad);margin:.75rem 0 0}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.75rem;padding:0 1rem;border:var(--bw) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);font-weight:600;font-size:.95rem;box-shadow:var(--shadow);transition:transform .12s,background .15s,border-color .15s}
.btn:hover{border-color:var(--text)} .btn:active{transform:var(--press)}
.btn.primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)} .btn.primary:hover{background:var(--primary-hover)}
.btn.small{min-height:2.25rem;padding:0 .75rem;font-size:.88rem} .btn.block{width:100%;min-height:3.1rem;font-size:1rem}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)} .btn.ghost:hover{color:var(--text);border-color:var(--border)}
.btn.danger{color:var(--bad)} .btn:disabled{opacity:.45;cursor:default;transform:none}

/* 입력 */
.field{display:block;margin:0 0 1.1rem} .field>span{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.4rem} .field small{color:var(--faint)}
input:not([type=checkbox]),select{width:100%;min-height:2.9rem;padding:0 .85rem;background:var(--surface);border:var(--bw) solid var(--border-strong);border-radius:var(--radius-sm);transition:border-color .15s}
input:focus,select:focus{outline:none;border-color:var(--text)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem}
.seg button{min-height:2.9rem;padding:.4rem .6rem;border:var(--bw) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);font-weight:600;font-size:.92rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;box-shadow:var(--shadow)}
.seg button code{font-size:.72rem;color:var(--muted);font-weight:500} .seg button.on{border-color:var(--text);background:var(--sunken);box-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:.4rem} .chips.center{justify-content:center}
.chip{min-height:2.1rem;padding:0 .8rem;border:var(--bw) solid var(--border-strong);border-radius:999px;background:var(--surface);font-size:.85rem;font-weight:600;color:var(--muted)}
.chip.on{background:var(--text);border-color:var(--text);color:var(--bg)} html[data-skin="tile"] .chip.on{background:var(--warn-bg);color:var(--text)}
.switch{display:flex;align-items:center;gap:.6rem;font-size:.95rem;cursor:pointer;margin:0 0 .4rem} .switch input{width:1.15rem;height:1.15rem;accent-color:var(--text)}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center} .row.between{justify-content:space-between} .row.center{justify-content:center;gap:1rem;margin-top:1rem}

/* 카드·목록 */
.card{background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--radius);padding:1.1rem 1.15rem;margin:0 0 .85rem;box-shadow:var(--shadow)}
.card>.field:last-child{margin-bottom:0}
.list{display:flex;flex-direction:column;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.list:empty{display:none}
.item{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-bottom:var(--bw) solid var(--border);text-align:left;width:100%;animation:enter .45s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 40ms)}
.item:last-child{border-bottom:0} button.item:hover{background:var(--sunken)}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.item-main{flex:1 1 auto;min-width:0} .item-title{font-weight:600;display:flex;align-items:center;gap:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-sub{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-sub.mono{font-family:var(--mono),var(--font)}
.tag{display:inline-flex;align-items:center;height:1.35rem;padding:0 .5rem;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.04em;background:var(--sunken);color:var(--muted);flex:0 0 auto}
.tag.family{background:var(--ok-bg);color:var(--ok)} .tag.partner{background:var(--bad-bg);color:var(--bad)} .tag.friend{background:var(--info-bg);color:var(--info)} .tag.coworker{background:var(--warn-bg);color:var(--warn)} .tag.other{background:var(--violet-bg);color:var(--violet)}
.avatar{position:relative;width:2.6rem;height:2.6rem;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sunken);border:var(--bw) solid var(--border);font-weight:700;font-size:1rem}
.avatar.on::after{content:'';position:absolute;right:-1px;bottom:-1px;width:.7rem;height:.7rem;border-radius:50%;background:var(--ok);border:2px solid var(--surface)}
.avatar.xl{width:6.5rem;height:6.5rem;font-size:2.4rem;margin:0 auto}
.icon-btn{width:2.6rem;height:2.6rem;flex:0 0 auto;border-radius:50%;border:var(--bw) solid var(--border-strong);display:flex;align-items:center;justify-content:center;background:var(--surface);transition:transform .12s,border-color .15s} .icon-btn:hover{border-color:var(--text)} .icon-btn:active{transform:scale(.94)}
.section-label{font-size:.78rem;color:var(--muted);margin:1.25rem 0 .5rem;font-weight:600}
.req-actions{display:flex;gap:.4rem;flex:0 0 auto}
.flag{width:2rem;height:1.5rem;flex:0 0 auto;border-radius:3px;border:var(--bw) solid var(--border);object-fit:cover;display:block}
.count{font-family:var(--mono),var(--font);font-size:.8rem;color:var(--muted);flex:0 0 auto} .count.live{color:var(--ok)}
.lock{color:var(--muted);display:flex}
.filters{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.75rem;margin:0 -1.25rem;padding-left:1.25rem;padding-right:1.25rem;scrollbar-width:none} .filters::-webkit-scrollbar{display:none}
.filters .chip{display:flex;align-items:center;gap:.4rem;flex:0 0 auto} .filters .flag{width:1.2rem;height:.9rem}
.langpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.4rem;max-height:11rem;overflow-y:auto}
.langpick button{display:flex;align-items:center;gap:.5rem;min-height:2.4rem;padding:0 .6rem;border:var(--bw) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);font-size:.85rem;font-weight:600} .langpick button.on{border-color:var(--text);background:var(--sunken)} .langpick .flag{width:1.4rem;height:1.05rem}
.empty{border:var(--bw) dashed var(--border-strong);border-radius:var(--radius);padding:2rem 1.25rem;text-align:center;color:var(--muted);font-size:.92rem} .empty-title{color:var(--text);font-weight:600;margin:0 0 .4rem} .empty p{margin:0 0 1rem}

/* 내 코드 */
.handle{font-size:1.35rem;letter-spacing:-.01em;margin:0 0 .9rem;word-break:break-all} .handle.small{font-size:.9rem;color:var(--muted);margin:.15rem 0 0;text-align:center}
.skins{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.skin{border:var(--bw) solid var(--border-strong);border-radius:var(--radius-sm);padding:.5rem;text-align:left;font-size:.82rem;font-weight:600;background:var(--surface)} .skin.on{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.swatch{display:flex;height:2.4rem;border-radius:4px;overflow:hidden;margin-bottom:.45rem;border:1px solid rgba(0,0,0,.08)} .swatch i{flex:1}

/* 하단 탭 */
.tabs{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--bw) solid var(--border);background:var(--bg)}
.tabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.6rem 0 .7rem;font-size:.72rem;font-weight:600;color:var(--faint)} .tabs button.on{color:var(--text)} .tabs .ic{width:1.4rem;height:1.4rem}
.badge{position:absolute;top:.35rem;left:calc(50% + .5rem);min-width:1.05rem;height:1.05rem;padding:0 .3rem;border-radius:999px;background:var(--bad);color:#fff;font-size:.65rem;font-style:normal;line-height:1.05rem;text-align:center}

/* 시트(오버레이) */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,20,18,.42);animation:fade .2s both} @keyframes fade{from{opacity:0}}
.sheet-body{width:100%;max-width:34rem;max-height:92dvh;overflow-y:auto;background:var(--bg);border:var(--bw) solid var(--border);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;padding:1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));animation:rise .3s cubic-bezier(.16,1,.3,1) both} @keyframes rise{from{transform:translateY(24px);opacity:0}}
@media(min-width:40rem){ .sheet{align-items:center} .sheet-body{border-bottom:var(--bw) solid var(--border);border-radius:var(--radius)} }
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem} .x{width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--muted)} .x:hover{background:var(--sunken);color:var(--text)}

/* 통화 */
.call{text-align:center;padding-top:2.5rem}
.call-name{font-size:1.5rem;font-weight:var(--display-weight);letter-spacing:var(--tracking);margin:1rem 0 0}
.call-msg{color:var(--muted);margin:.9rem 0 1.4rem;min-height:1.5rem}
.call .avatar.ringing{animation:ring 1.4s ease-in-out infinite} @keyframes ring{0%,100%{box-shadow:0 0 0 0 var(--border-strong)}50%{box-shadow:0 0 0 .9rem transparent}}
.call .avatar.live{border-color:var(--talk);box-shadow:0 0 0 3px var(--ok-bg)}
.call-btns{display:flex;justify-content:center;gap:1.1rem;margin-top:1.6rem}
.round{width:4rem;height:4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;border:var(--bw) solid var(--border-strong);background:var(--surface);box-shadow:var(--shadow);transition:transform .12s} .round:active{transform:var(--press)} .round .ic{width:1.6rem;height:1.6rem}
.round.ok{background:var(--ok);border-color:var(--ok);color:#fff} html[data-skin="midnight"] .round.ok{color:#121311} html[data-skin="tile"] .round.ok{background:var(--primary);color:var(--text)}
.round.bad{background:var(--bad);border-color:var(--bad);color:#fff} html[data-skin="midnight"] .round.bad{color:#121311} html[data-skin="tile"] .round.bad{background:#FF4B4B;color:#fff}
.round.off{background:var(--sunken);color:var(--muted)}

/* 방 */
.room-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.2rem}
.room-title{font-size:1.25rem;font-weight:var(--display-weight);letter-spacing:var(--tracking);margin:0} .room-meta{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--muted);margin:.3rem 0 0} .room-meta .flag{width:1.2rem;height:.9rem}
.peers{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.2rem,1fr));gap:.8rem;margin-bottom:1.3rem;min-height:5.5rem}
.peer{display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.8rem;text-align:center;color:var(--muted)} .peer .avatar{width:3.4rem;height:3.4rem;font-size:1.2rem;transition:box-shadow .15s,border-color .15s}
.peer.talking .avatar{border-color:var(--talk);box-shadow:0 0 0 3px var(--ok-bg)} .peer.talking{color:var(--text)} .peer.me .avatar{background:var(--surface)} .peer.wait{opacity:.5}
.peer span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptt{width:100%;min-height:5.5rem;margin-top:1.2rem;border-radius:var(--radius);border:var(--bw) solid var(--border-strong);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;font-size:1rem;box-shadow:var(--shadow);touch-action:none;user-select:none;-webkit-user-select:none;transition:background .1s,transform .1s}
.ptt .ic{width:1.7rem;height:1.7rem} .ptt b{font-weight:600} .ptt.on{background:var(--talk);border-color:var(--talk);color:#fff;transform:scale(.99)} html[data-skin="midnight"] .ptt.on,html[data-skin="tile"] .ptt.on{color:#121311}

.toast{position:fixed;left:50%;bottom:calc(5.5rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;background:var(--text);color:var(--bg);padding:.65rem 1rem;border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;max-width:calc(100% - 2.5rem);text-align:center;animation:rise .25s both}
@media(prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }