/* =========================================================
   CODE:GRID 시민 단말기 — 스타일
   바깥은 문서와 같은 회색 측량지, 안쪽 화면은 어두운 단말기.
   색을 바꾸려면 아래 :root 의 값만 고치면 됩니다.
   ========================================================= */
:root{
  --paper:#ECECEA; --ink:#151515; --mute:#8B8B87; --rule:#D3D3CF;
  --scr:#0D0E0F; --scr2:#16181A; --line:#272A2D; --txt:#E7E6E1; --dim:#80848A; --hi:#FFFFFF;
  --warn:#C8A35E; --bad:#B9573F; --ok:#8FA79A;
  --card:#E7E6E1; --cardline:transparent; --bar:rgba(13,14,15,.86); --vig:rgba(13,14,15,.5); --scheme:dark;
  --f-sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --f-map:"IM Fell English SC","Times New Roman",serif;
  color-scheme: light;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
/* 밝은 테마: 단말기 화면 · 메인 화면 · 시트의 색만 바뀝니다 */
:root[data-theme="light"]{
  --scr:#EEEDE8; --scr2:#FBFBF9; --line:#D5D4CE; --txt:#17181A; --dim:#666A70; --hi:#000000;
  --warn:#8F681C; --bad:#A33E27; --ok:#3B7059;
  --card:#FFFFFF; --cardline:#D5D4CE; --bar:rgba(238,237,232,.88); --vig:rgba(238,237,232,.3); --scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:14px;-webkit-font-smoothing:antialiased}
body.in-os{background:var(--scr);color:var(--txt);color-scheme:var(--scheme)}
body.zooming,body.locked{overflow:hidden}
[hidden]{display:none!important}
img{max-width:100%}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--hi);outline-offset:2px}

/* ---------- 단말기 ---------- */
#gate{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding-block:28px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:104px 104px;background-position:center}
.gate-cap{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--mute);text-align:center;text-transform:uppercase;line-height:1.8}
.gate-cap b{color:var(--ink);font-weight:500}
.gate-set{appearance:none;background:none;border:1px solid var(--rule);border-radius:999px;padding:6px 14px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--mute);cursor:pointer}
.gate-set:hover{color:var(--ink);border-color:var(--mute)}
.gate-tools{display:flex;gap:8px;align-items:center}
.gate-icon{width:32px;height:30px;padding:0;display:grid;place-items:center}
.gate-icon svg{width:15px;height:15px}
.phone{position:relative;width:min(372px,100%);height:min(780px,calc(100dvh - 140px));min-height:660px;
  background:#050505;border-radius:48px;padding:10px;
  box-shadow:0 0 0 1.5px #2b2b2b inset,0 40px 70px -30px rgba(0,0,0,.55),0 12px 24px -12px rgba(0,0,0,.35);
  transform-origin:50% 50%;will-change:transform}
.phone.zoom{transition:transform 1.15s cubic-bezier(.75,0,.2,1)}
.phone::before{content:"";position:absolute;left:-3px;top:150px;width:3px;height:64px;background:#1a1a1a;border-radius:2px 0 0 2px}
.phone::after{content:"";position:absolute;right:-3px;top:190px;width:3px;height:90px;background:#1a1a1a;border-radius:0 2px 2px 0}
.screen{position:relative;height:100%;border-radius:38px;background:var(--scr);color:var(--txt);overflow:hidden;display:flex;flex-direction:column;color-scheme:var(--scheme);transition:background .3s,color .3s}
.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#000;z-index:3}
.screen .sb{display:flex;justify-content:space-between;align-items:center;padding:14px 26px 6px;font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums;height:28px;flex:none;box-sizing:content-box}
.sb-r{display:flex;gap:6px;align-items:center}
.sb-r svg{width:14px;height:14px}
.pane{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 22px 22px;display:flex;flex-direction:column;transition:opacity .35s}
.pane::-webkit-scrollbar{width:0}
.screen.fade .pane,.screen.fade .sb{opacity:0;transition:opacity .3s}
.mode{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;color:var(--dim);text-align:center;margin-top:14px;text-transform:uppercase}
.mode i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}
.mode.local i{background:var(--warn)}

.logo{display:flex;flex-direction:column;align-items:center;gap:8px;margin:10px 0 20px}
.logo svg{width:56px;height:56px}
.logo .wm{font-weight:300;font-size:17px;letter-spacing:.02em}
.logo .wm span{color:var(--dim)}
.logo .sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--dim)}

/* 로그인 · 회원가입 */
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs button{appearance:none;background:none;border:0;padding:10px 0;color:var(--dim);font-size:13px;cursor:pointer;border-bottom:1.5px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--hi);border-bottom-color:var(--hi)}
form{display:flex;flex-direction:column;gap:14px;flex:1}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label,.lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.fld input,.fld select{background:transparent;border:0;border-bottom:1px solid var(--line);padding:6px 0 8px;font-size:15px;border-radius:0;outline:none;width:100%}
.fld input:focus,.fld select:focus{border-bottom-color:var(--hi)}
.fld input[aria-invalid="true"]{border-bottom-color:var(--bad)}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 9px) 50%,calc(100% - 4px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.fld select option{background:var(--scr2);color:var(--txt)}
.fld .note{font-size:11px;color:var(--dim)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{text-align:center;padding:9px 0;font-size:13px;cursor:pointer;color:var(--dim);transition:background .2s,color .2s;letter-spacing:0;text-transform:none;font-family:var(--f-sans)}
.seg input:checked+label{background:var(--txt);color:var(--scr)}
.seg input:focus-visible+label{outline:1.5px solid var(--hi);outline-offset:-3px}
.hint{font-size:11.5px;color:var(--dim);line-height:1.6;margin:0}
.hint.err{color:var(--bad)}
.btn{appearance:none;border:1px solid var(--txt);background:var(--txt);color:var(--scr);border-radius:14px;padding:13px 16px;font-size:14px;font-weight:600;cursor:pointer;letter-spacing:.02em;transition:transform .15s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.35;cursor:default}
.btn.ghost{background:transparent;color:var(--txt);border-color:var(--line);font-weight:400}
.btn.warn{background:transparent;color:var(--warn);border-color:var(--warn);font-weight:500}
.btn-col{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:18px}
.link{appearance:none;background:none;border:0;color:var(--dim);font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px}

.boot{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px}
.login{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.login h2{font-weight:300;font-size:20px;margin:6px 0 6px}
.login .mid{font-family:var(--f-mono);font-size:12px;color:var(--dim);letter-spacing:.08em}
.finger{appearance:none;background:none;border:0;cursor:pointer;margin:34px auto 10px;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;position:relative;color:var(--txt)}
.finger svg{width:64px;height:64px}
.finger::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
.finger::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--line);opacity:.5}
.finger.read svg{color:var(--hi);animation:pulse .9s ease-in-out infinite}
.finger.read::before{border-color:var(--hi)}
@keyframes pulse{50%{opacity:.35}}
.finger-cap{font-size:12.5px;color:var(--dim)}

.scan{display:flex;flex-direction:column;gap:22px;justify-content:center;flex:1}
.scan-ring{width:120px;height:120px;margin:0 auto}
.scan-ring svg{width:100%;height:100%;animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scan-log{font-family:var(--f-mono);font-size:11.5px;line-height:2;color:var(--dim);min-height:120px}
.boot .scan-log{min-height:0}
.scan-log div{opacity:0;animation:in .3s forwards}
.scan-log div.done::after{content:"  OK";color:var(--hi)}
@keyframes in{to{opacity:1}}
.bar{height:2px;background:var(--line);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0;width:0;background:var(--hi);transition:width 2.3s linear}

/* 시민권 카드 */
.slit{height:3px;border-radius:2px;background:#000;box-shadow:0 1px 0 var(--line);margin:4px -4px 0;position:relative;z-index:2}
.slot{overflow:hidden;margin:0 2px}
.card{background:var(--card);border:1px solid var(--cardline);color:#111;border-radius:0 0 14px 14px;padding:16px 16px 14px;position:relative}
.slot.print .card{animation:print 1.9s steps(24,end) both}
@keyframes print{from{transform:translateY(-100%)}to{transform:none}}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;color:#555;line-height:1.5}
.card-mid{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:14px 0 12px;border-bottom:1px solid #bdbdb8;padding-bottom:12px}
.card-name{font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.2;word-break:keep-all;overflow-wrap:anywhere;min-width:0}
.card-name small{display:block;font-size:11px;font-weight:400;color:#666;margin-top:3px;font-family:var(--f-mono);letter-spacing:.06em}
.grade{text-align:right;flex:none}
.grade b{display:block;font-weight:200;font-size:46px;line-height:.9;letter-spacing:-.02em}
.grade span{font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;color:#666}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12px;margin:0}
.kv dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;color:#777;padding-top:2px}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.access{margin-top:12px;font-size:11.5px;padding:8px 10px;border:1px solid #bdbdb8;border-radius:8px;line-height:1.5}
.access .lbl{color:#777;display:block;margin-bottom:2px}
.code{display:flex;justify-content:space-between;align-items:flex-end;margin-top:12px;gap:10px}
.code svg{height:30px;width:150px;max-width:60%}
.code span{font-family:var(--f-mono);font-size:9px;color:#555;letter-spacing:.08em;text-align:right}
.stamp{position:absolute;right:14px;top:58px;border:1.5px solid var(--bad);color:var(--bad);font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;padding:3px 7px;transform:rotate(-8deg);opacity:.85}
.typed{opacity:0}
.typed.on{opacity:1;transition:opacity .25s}

/* ---------- 메인 화면 ---------- */
#os{min-height:100%;background:var(--scr);color:var(--txt);opacity:0;transition:opacity .6s}
#os.on{opacity:1}
body.in-os::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--scr)}
.osbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bar);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.osbar-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;height:48px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums}
.osbar .l,.osbar .r{display:flex;align-items:center;gap:12px;min-width:0}
.osbar .clock{font-size:14px;color:var(--hi)}
.osbar .date{color:var(--dim);white-space:nowrap}
.osbar .wxs{display:flex;align-items:center;gap:6px;white-space:nowrap}
.osbar .wxs svg{width:15px;height:15px;flex:none}
.osbar .zone{border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--dim);white-space:nowrap}
.icon-btn{appearance:none;background:none;border:0;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;cursor:pointer;color:var(--txt)}
.icon-btn:hover{background:var(--scr2)}
.icon-btn svg{width:18px;height:18px}
@media (max-width:560px){.osbar .date{display:none}}
@media (max-width:400px){.osbar .zone{display:none}}

.os-main{max-width:1080px;margin:0 auto;padding-block:28px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:22px}
.hello .eb{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hello .eb i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
.hello h1{font-weight:300;font-size:clamp(24px,4.4vw,36px);letter-spacing:-.015em;margin:8px 0 0;text-wrap:balance;line-height:1.3;word-break:keep-all}
.hello h1 b{font-weight:600}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:820px){.grid{grid-template-columns:1.15fr 1fr}.apps{grid-column:1 / -1}}
.panel{background:var(--scr2);border:1px solid var(--line);border-radius:20px;padding:20px;min-width:0}
.sec-h,.apps h2{font-family:var(--f-mono);font-size:10.5px;font-weight:400;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;margin:0 0 12px}
.wx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wx-t{font-weight:200;font-size:64px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.wx-t sup{font-size:22px;vertical-align:top;margin-left:2px;font-weight:300}
.wx-n{font-size:17px;margin-top:8px}
.wx-p{font-family:var(--f-mono);font-size:11px;color:var(--dim);margin-top:4px;letter-spacing:.06em}
.wx-ic svg{width:56px;height:56px;color:var(--hi)}
.wx-note{margin-top:16px;padding:10px 12px;border-left:2px solid var(--warn);background:rgba(200,163,94,.07);font-size:12.5px;line-height:1.55}
.wx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.wx-stats div{display:flex;flex-direction:column;gap:4px}
.wx-stats b{font-weight:400;font-size:15px;font-variant-numeric:tabular-nums}
.aq{display:inline-flex;align-items:center;gap:6px}
.aq i{width:7px;height:7px;border-radius:50%;background:currentColor}
.periods{display:grid;grid-template-columns:repeat(5,1fr);margin-top:18px;border-top:1px solid var(--line);padding-top:14px;gap:4px;text-align:center}
.periods div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--dim);font-family:var(--f-mono)}
.periods div.now{color:var(--hi)}
.periods svg{width:20px;height:20px}
.periods b{font-weight:400;font-variant-numeric:tabular-nums}

.side{display:flex;flex-direction:column;gap:16px;min-width:0}
.gps-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.gps-name{font-size:17px;line-height:1.3}
.gps-name small{display:block;font-family:var(--f-mono);font-size:11px;color:var(--dim);margin-top:3px;letter-spacing:.04em}
.gps-ref{font-family:var(--f-mono);font-size:11px;color:var(--dim);text-align:right;line-height:1.6;white-space:nowrap;font-variant-numeric:tabular-nums}
.gps-ref b{color:var(--hi);font-weight:400}
.mini{position:relative;height:200px;margin-top:14px;border-radius:12px;overflow:hidden;background:#f4f4f1;cursor:pointer;border:1px solid var(--line)}
.mini svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mini::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 45%,var(--vig));pointer-events:none}
.you{position:absolute;width:14px;height:14px;border-radius:50%;background:#111;border:2.5px solid #fff;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #111;z-index:2;pointer-events:none}
.you::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid #111;animation:ping 2s ease-out infinite;opacity:0}
@keyframes ping{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.mini .you{left:50%;top:50%}
.gps-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px}
.chip{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap;color:var(--dim)}
.chip.in{color:var(--hi);border-color:var(--dim)}
.small-btn{appearance:none;background:none;border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:7px 12px;font-size:12px;cursor:pointer}
.small-btn:hover{border-color:var(--dim)}
.id-panel .card{border-radius:14px;cursor:pointer}

.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (min-width:820px){.app-grid{grid-template-columns:repeat(8,1fr)}}
.app{appearance:none;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;padding:4px 0;color:var(--txt)}
.app .ic{width:58px;height:58px;border-radius:17px;background:var(--scr2);border:1px solid var(--line);display:grid;place-items:center;transition:border-color .2s}
.app:hover .ic{border-color:var(--dim)}
.app .ic svg{width:24px;height:24px}
.app.live .ic{background:var(--txt);color:var(--scr);border-color:var(--txt)}
.app.lock{color:var(--dim)}
.app span{font-size:11.5px;text-align:center;word-break:keep-all}

.ticker{border-top:1px solid var(--line);overflow:hidden;white-space:nowrap;font-family:var(--f-mono);font-size:11px;color:var(--dim);padding-block:10px}
.ticker div{display:inline-block;padding-left:100%;animation:tick 48s linear infinite}
.ticker b{color:var(--warn);font-weight:400;margin-right:10px}
.ticker b.brk{color:var(--bad)}
@keyframes tick{to{transform:translateX(-100%)}}

/* ---------- 지도 ---------- */
.aet-map{display:block;width:100%;height:auto}
.aet-map .m-label{font-family:var(--f-map);fill:#151515;letter-spacing:.06em;paint-order:stroke;stroke:#f4f4f1;stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.aet-map .m-n,.aet-map .m-s{font-family:var(--f-map);fill:#222;font-size:14px}
.aet-map .m-s{font-size:12px}
.aet-map .m-region{fill:transparent;stroke:transparent;stroke-width:2;cursor:pointer;transition:fill .2s,stroke .2s}
.aet-map .m-region:hover{fill:rgba(20,20,20,.08);stroke:rgba(20,20,20,.5);stroke-dasharray:6 4}
.aet-map .m-region.sel{fill:rgba(20,20,20,.14);stroke:#111;stroke-dasharray:6 4}
.aet-map .m-region.here{stroke:#111}
.aet-map .m-bridge{cursor:pointer}
.aet-map .m-bridge.sel path:nth-child(2),.aet-map .m-bridge:hover path:nth-child(2){stroke:#111}
.mini .m-region,.mini .m-bridge{pointer-events:none}

#mapv{position:fixed;inset:0;z-index:15;background:var(--scr);display:flex;flex-direction:column;opacity:0;transition:opacity .3s}
#mapv.on{opacity:1}
.mv-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mv-bar h3{margin:0;font-weight:400;font-size:15px}
.mv-scroll{flex:1;overflow:auto;padding-block:16px 240px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mv-fig{position:relative;max-width:720px;margin:0 auto;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.mv-fig .you{transition:left 1.4s cubic-bezier(.6,0,.2,1),top 1.4s cubic-bezier(.6,0,.2,1);z-index:3}
.mv-card{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:min(560px,100%);background:var(--scr2);color:var(--txt);border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;z-index:16;transition:transform .3s;
  padding-block:18px calc(20px + env(safe-area-inset-bottom,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mv-card.on{transform:translate(-50%,0)}
.mv-card h4{margin:0;font-weight:400;font-size:19px}
.mv-card .en{font-family:var(--f-mono);font-size:11px;color:var(--dim);margin-top:4px;letter-spacing:.06em}
.mv-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mv-msg{margin-top:12px;font-size:13px;line-height:1.55}
.mv-msg.bad{color:var(--bad)}
.mv-msg.warn{color:var(--warn)}
.mv-acts{display:flex;gap:8px;margin-top:14px}
.mv-acts .btn{flex:1}

/* ---------- 시트 · 설정 ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:20;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s}
.sheet-bg.on{opacity:1}
.sheet{width:min(560px,100%);max-height:86dvh;overflow-y:auto;background:var(--scr2);color:var(--txt);color-scheme:var(--scheme);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;
  padding-block:18px calc(22px + env(safe-area-inset-bottom,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));transform:translateY(30px);transition:transform .3s}
.sheet-bg.on .sheet{transform:none}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 16px}
.sheet h3{font-weight:400;font-size:19px;margin:0 0 14px}
.set-row{display:flex;flex-direction:column;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.set-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.set-top b{font-weight:400;font-size:15px}
.set-top small{display:block;color:var(--dim);font-size:11.5px;margin-top:3px}
.switch{position:relative;width:46px;height:26px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .2s}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--dim);transition:transform .2s,background .2s}
.switch input:checked+span{background:var(--txt)}
.switch input:checked+span::after{transform:translateX(20px);background:var(--scr)}
.switch input:focus-visible+span{outline:1.5px solid var(--hi);outline-offset:2px}
.vol{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.vol input{flex:1;accent-color:var(--txt)}
.vol output{width:30px;text-align:right}
.zrow{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line)}
.zrow b{font-family:var(--f-mono);font-weight:400;font-size:15px}
.zrow p{margin:0;font-size:13px;line-height:1.5}
.zrow small{display:block;color:var(--dim);font-size:11px;margin-top:2px}
.zrow em{font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--dim);letter-spacing:.1em}
.zrow.me b,.zrow.me p{color:var(--hi)}
.zrow.me em{color:var(--warn)}
.zgroup{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;color:var(--dim);margin:14px 0 4px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--txt);color:var(--scr);padding:10px 16px;border-radius:12px;font-size:13px;opacity:0;transition:opacity .25s,transform .25s;z-index:30;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 유튜브 플레이어는 화면 밖에 숨겨 둡니다 */
#bgm-holder{position:fixed;left:-9999px;top:0;width:200px;height:200px;overflow:hidden;opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ticker div{padding-left:0}
}

/* ---------- 속보 띠 ---------- */
.alert{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--bad);border-left-width:4px;border-radius:14px;padding:14px 12px 14px 16px;background:color-mix(in srgb,var(--bad) 8%,var(--scr2))}
.alert-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--scr2);background:var(--bad);padding:3px 7px;border-radius:4px;flex:none;margin-top:2px;animation:pulse 1.6s infinite}
.alert-txt{flex:1;min-width:0;line-height:1.5}
.alert-txt b{font-size:15px;font-weight:600;display:block}
.alert-txt p{margin:4px 0 0;font-size:13px;overflow-wrap:anywhere}
.alert-txt small{display:block;margin-top:4px;font-family:var(--f-mono);font-size:10.5px;color:var(--dim)}
.alert .icon-btn{flex:none;width:28px;height:28px}

/* ---------- 앱 배지 ---------- */
.app .ic{position:relative}
.badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font-style:normal;font-family:var(--f-mono);font-size:10.5px;line-height:20px;text-align:center;border:2px solid var(--scr)}
.row-meta .badge{position:static;border:0;display:inline-block}
.app.gm .ic{border-color:var(--warn);color:var(--warn)}
.app-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}

/* ---------- 전체 화면 보기 ---------- */
#view{position:fixed;inset:0;z-index:15;background:var(--scr);color:var(--txt);display:flex;flex-direction:column;opacity:0;transition:opacity .25s;color-scheme:var(--scheme)}
#view.on{opacity:1}
#view .mv-bar h3{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-right{width:64px;flex:none}
.v-body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.v-wrap{max-width:640px;margin:0 auto;padding-block:18px 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.v-lead{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--dim);margin:0 0 12px}
.v-lead b{color:var(--hi);font-weight:400}
.v-foot{flex:none;border-top:1px solid var(--line);background:var(--scr2);padding-block:10px calc(10px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.empty{text-align:center;color:var(--dim);font-size:13px;line-height:1.7;padding:48px 0}
.muted{color:var(--dim);font-size:12px;font-weight:400;font-family:var(--f-mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--scr2)}
.row{appearance:none;background:none;border:0;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:14px;text-align:left;cursor:pointer;color:var(--txt);width:100%}
.row:first-child{border-top:0}
.row:hover{background:color-mix(in srgb,var(--txt) 4%,transparent)}
.row.static{cursor:default}.row.static:hover{background:none}
.ava{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--scr);border:1px solid var(--line);font-size:16px;font-weight:600}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-main b{font-weight:500;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.row-main b em{font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--dim);border:1px solid var(--line);border-radius:4px;padding:0 5px}
.row-main small{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-main .prev{color:var(--txt);opacity:.75}
.row-grade{font-weight:200;font-size:30px;line-height:1;flex:none;min-width:40px;text-align:right}
.row-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;font-family:var(--f-mono);color:var(--dim)}
.near{color:var(--ok)}
.chip.brk{color:var(--bad);border-color:var(--bad)}
.gmchip{color:var(--warn);border-color:var(--warn);padding:1px 6px;font-size:9px}

/* 메시지 */
.chat{display:flex;flex-direction:column;gap:10px}
.msg{max-width:78%;display:flex;flex-direction:column;gap:4px}
.msg small{font-size:11px;color:var(--dim);padding:0 4px}
.msg p{margin:0;padding:10px 13px;border-radius:16px;background:var(--scr2);border:1px solid var(--line);line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
.msg time{font-family:var(--f-mono);font-size:10px;color:var(--dim);padding:0 4px}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.me small{display:none}
.msg.me p{background:var(--txt);color:var(--scr);border-color:var(--txt);border-bottom-right-radius:5px}
.msg.them p{border-bottom-left-radius:5px}
.m-form{max-width:640px;margin:0 auto;display:flex;gap:8px;align-items:flex-end}
.m-form textarea{flex:1;min-width:0;resize:none;background:var(--scr);color:var(--txt);border:1px solid var(--line);border-radius:14px;padding:11px 13px;font:inherit;font-size:14px;line-height:1.45;max-height:120px;outline:none}
.m-form textarea:focus{border-color:var(--dim)}
.m-form .btn{padding:11px 16px;flex:none}

/* 국영 방송 */
.news{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--scr2);margin-bottom:10px}
.news.brk{border-color:var(--bad)}
.news-top{display:flex;align-items:center;gap:8px}
.news-top small{font-family:var(--f-mono);font-size:10.5px;color:var(--dim);flex:1}
.news h4{margin:10px 0 0;font-size:17px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.news p{margin:6px 0 0;font-size:13.5px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--txt);opacity:.85}

/* 진행자 모드 */
.gm-sec{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--scr2);margin-bottom:14px}
.gm-sec h4{margin:0 0 12px;font-weight:500;font-size:15px}
.gm-sec>.hint{margin-bottom:10px}
.gm-form{display:flex;flex-direction:column;gap:14px;flex:none}
.gm-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.gm-row span{display:flex;flex-direction:column;gap:2px;min-width:0}
.gm-row b{font-weight:400;font-size:14px}
.gm-row small{font-size:11.5px;color:var(--dim);font-family:var(--f-mono)}
.gm-sel{background:var(--scr);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-family:var(--f-mono)}
.fld textarea{background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;line-height:1.5;resize:vertical;outline:none;color:var(--txt)}
.fld textarea:focus{border-color:var(--dim)}

/* 지도 · 봉쇄 */
.aet-map .m-region.locked{fill:rgba(185,87,63,.16);stroke:#B9573F;stroke-dasharray:3 3}
.aet-map .m-bridge.locked path:nth-child(2){stroke:#B9573F}

/* ---------- 홈 화면 국영 방송 ---------- */
.news-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.news-h .sec-h{margin:0}
.feed{display:flex;flex-direction:column}
.feed-item{border-top:1px solid var(--line)}
.feed-item:first-child{border-top:0}
.feed-item summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer}
.feed-item summary::-webkit-details-marker{display:none}
.feed-item summary b{flex:1;min-width:0;font-weight:400;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-item[open] summary b{white-space:normal}
.feed-item summary time{font-family:var(--f-mono);font-size:10.5px;color:var(--dim);flex:none;font-variant-numeric:tabular-nums}
.feed-item p{margin:0 0 12px;font-size:13px;line-height:1.65;opacity:.85;overflow-wrap:anywhere}
.feed-item.brk summary b{color:var(--bad)}

/* ---------- 경제 ---------- */
.cr-chip{appearance:none;border:1px solid var(--line);background:none;color:var(--hi);border-radius:999px;padding:4px 10px;font-family:var(--f-mono);font-size:11.5px;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.cr-chip:hover{border-color:var(--dim)}
.wallet-line{display:flex;gap:24px;align-items:flex-end;padding:14px 16px;margin-bottom:16px;border:1px solid var(--line);border-radius:14px;background:var(--scr2)}
.wallet-line span{display:flex;flex-direction:column;gap:2px}
.wallet-line small{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--dim)}
.wallet-line b{font-weight:300;font-size:24px;font-variant-numeric:tabular-nums}
.job-now{border:1px solid var(--dim);border-radius:16px;padding:16px;margin-bottom:18px;background:var(--scr2)}
.job-now h4{margin:6px 0 12px;font-weight:500;font-size:17px}
.job-bar{height:4px;border-radius:2px}
.job-bar i{transition:width 1s linear}
.job-now-f{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.job-now-f .mono{font-family:var(--f-mono);font-size:12px;color:var(--dim)}
.job-acts{display:flex;gap:8px}
.job-acts .btn{padding:9px 14px;font-size:13px}
.row.job{align-items:flex-start}
.row-main small.wrap{white-space:normal;line-height:1.5}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.tags .chip{font-size:9.5px;padding:2px 7px}
.row-btns{display:flex;gap:6px;flex:none;align-items:center}
.small-btn.primary{background:var(--txt);color:var(--scr);border-color:var(--txt);font-family:var(--f-mono)}
.small-btn:disabled{opacity:.35;cursor:default}
.lockline{color:var(--warn)!important}
.amt{font-family:var(--f-mono);font-size:14px;flex:none;font-variant-numeric:tabular-nums}
.amt.pos{color:var(--ok)}.amt.neg{color:var(--bad)}
.v-wrap.black .rows{border-color:color-mix(in srgb,var(--warn) 50%,var(--line))}
.v-wrap.black .v-lead{color:var(--warn)}
.chk{display:flex;flex-wrap:wrap;gap:6px}
.chk label{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-family:var(--f-mono);font-size:12px;cursor:pointer;letter-spacing:0;text-transform:none;color:var(--txt)}
.chk input{accent-color:var(--txt);margin:0}
#mapv{z-index:17}.mv-card{z-index:18}
@media (max-width:480px){.osbar .wxs span{display:none}}

/* ---------- 상태 이상 ---------- */
.st-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.st-row[hidden]{display:none}
.st-chip{appearance:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--scr2);color:var(--txt);border-radius:999px;padding:4px 10px 4px 8px;font-size:12px;cursor:pointer}
span.st-chip{cursor:default}
.st-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bad)}
.st-chip.good::before{background:var(--ok)}
.st-chip b{font-weight:500}
.st-chip small{font-family:var(--f-mono);font-size:10.5px;color:var(--dim)}
.st-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bad);margin-right:2px}
.st-dot.good{background:var(--ok)}
.chip.xp{color:var(--warn);border-color:var(--warn);margin-right:4px}

/* ---------- 사건 카드 ---------- */
.ev .lbl{color:var(--warn)}
.ev h3{font-size:21px;margin:6px 0 10px}
.ev-body{font-size:14.5px;line-height:1.75;margin:0 0 10px;overflow-wrap:anywhere}
.ev-choices{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.ev-c{display:flex;align-items:center;gap:12px;text-align:left;font-weight:400}
.ev-c span{font-family:var(--f-mono);font-size:11px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.ev-c.picked{border-color:var(--txt)}
.ev .tags{margin:6px 0 4px}

/* ---------- 단말기 넣기 ---------- */
.pocket-btn{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px;
  appearance:none;border:1px solid var(--line);background:var(--bar);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--txt);border-radius:999px;padding:11px 18px;font-size:13px;cursor:pointer;box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.pocket-btn:hover{border-color:var(--dim)}
.pocket-btn svg{width:17px;height:17px}
.os-main{padding-bottom:96px}
#os{transition:opacity .6s,transform .55s cubic-bezier(.6,0,.3,1)}
#os.stow{transform:translateY(70vh) scale(.55) rotate(-7deg);opacity:0;transition:transform .5s cubic-bezier(.6,0,.4,1),opacity .45s;transform-origin:50% 100%;pointer-events:none}

/* ---------- 현장 ---------- */
:root{--f-shade:linear-gradient(180deg,rgba(8,9,10,.78),rgba(8,9,10,.6) 35%,rgba(8,9,10,.86));--f-ink:#ECEAE4;--f-dim:#9A9DA2;--f-line:rgba(255,255,255,.12);--f-glass:rgba(16,17,19,.6);--f-filter:grayscale(1) brightness(.62) contrast(1.15) blur(1.2px)}
:root[data-theme="light"]{--f-shade:linear-gradient(180deg,rgba(240,239,234,.82),rgba(240,239,234,.6) 35%,rgba(240,239,234,.9));--f-ink:#141518;--f-dim:#5F6368;--f-line:rgba(0,0,0,.12);--f-glass:rgba(250,250,247,.72);--f-filter:grayscale(1) contrast(1.05) blur(1.2px)}
#field{position:fixed;inset:0;z-index:12;display:flex;flex-direction:column;color:var(--f-ink);background:#0b0c0d;opacity:0;transition:opacity .45s;overflow:hidden}
:root[data-theme="light"] #field{background:#e9e8e3}
#field.on{opacity:1}
.f-bg{position:absolute;inset:-4%;pointer-events:none;animation:drift 60s ease-in-out infinite alternate}
.f-bg svg{width:100%;height:100%;filter:var(--f-filter)}
.f-bg .m-labels,.f-bg .m-compass,.f-bg .m-scale{display:none}
@keyframes drift{to{transform:scale(1.06) translate(-1%,1%)}}
.f-shade{position:absolute;inset:0;background:var(--f-shade);pointer-events:none}
.f-fx{position:absolute;inset:0;pointer-events:none;opacity:.55}
.fx-acid{background:repeating-linear-gradient(105deg,transparent 0 14px,rgba(190,210,170,.18) 14px 15px);background-size:200% 200%;animation:rain .5s linear infinite}
@keyframes rain{to{background-position:-40px 120px}}
.fx-sand{background:radial-gradient(circle at 20% 30%,rgba(200,163,94,.25),transparent 60%),repeating-linear-gradient(170deg,transparent 0 3px,rgba(200,163,94,.08) 3px 4px);animation:sand 3s linear infinite}
@keyframes sand{to{background-position:0 0,-200px 30px}}
.fx-fog{background:linear-gradient(0deg,rgba(200,200,200,.35),transparent 70%);animation:pulse 8s ease-in-out infinite}
.fx-smog{background:linear-gradient(0deg,rgba(120,100,70,.35),rgba(120,100,70,.08))}
.fx-heat{background:radial-gradient(ellipse at 50% 120%,rgba(185,87,63,.3),transparent 60%)}
.fx-clear,.fx-cloud{opacity:0}
.f-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-top:calc(18px + env(safe-area-inset-top,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.f-place small{font-family:var(--f-map);font-size:14px;letter-spacing:.12em;color:var(--f-dim)}
.f-place h2{margin:2px 0 8px;font-weight:300;font-size:clamp(26px,5vw,40px);letter-spacing:-.01em;line-height:1.1}
.f-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--f-mono);font-size:11px;color:var(--f-dim);font-variant-numeric:tabular-nums}
.f-meta span{display:inline-flex;align-items:center;gap:5px}
.f-meta svg{width:13px;height:13px}
.f-pull{position:relative;appearance:none;display:flex;align-items:center;gap:8px;border:1px solid var(--f-line);background:var(--f-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--f-ink);border-radius:999px;padding:9px 14px;font-size:12.5px;cursor:pointer;flex:none}
.f-pull svg{width:16px;height:16px}
.f-pull .badge{top:-6px;right:-4px;border-color:transparent}
.f-sub{position:relative;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-top:12px}
.f-sub .st-row{margin-top:8px}
.f-sub .st-chip{background:var(--f-glass);border-color:var(--f-line);color:var(--f-ink)}
.f-here{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px}
.f-here-l{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;color:var(--f-dim);margin-right:2px}
.f-p{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--f-line);background:var(--f-glass);border-radius:999px;padding:3px 10px}
.f-p i{width:6px;height:6px;border-radius:50%;background:var(--f-dim);opacity:.6}
.f-p i.on{background:var(--ok);opacity:1}
.f-p.me{border-color:var(--f-dim)}
.f-alone{color:var(--f-dim);font-size:12px}
.f-log{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:14px;
  padding-block:20px 8px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));
  max-width:760px;width:100%;margin:0 auto;box-sizing:border-box;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40px)}
.f-ln{position:relative;max-width:620px}
.f-ln.say .who{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--f-dim);margin-bottom:3px;font-weight:400}
.f-ln.say p{margin:0;font-size:16px;line-height:1.65;overflow-wrap:anywhere}
.f-ln.say p i{color:var(--f-dim)}
.f-ln.say time{font-family:var(--f-mono);font-size:9.5px;color:var(--f-dim);opacity:.7}
.f-ln.me .who{color:var(--f-ink)}
.f-ln.act p{margin:0;font-style:italic;color:var(--f-dim);font-size:14.5px;line-height:1.6;overflow-wrap:anywhere;padding-left:12px;border-left:1px solid var(--f-line)}
.f-ln.act b{font-style:normal;color:var(--f-ink);font-weight:500}
.f-div{display:flex;align-items:center;gap:12px;color:var(--f-dim);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;position:relative}
.f-div::before,.f-div::after{content:"";flex:1;height:1px;background:var(--f-line)}
.f-note{text-align:center;color:var(--f-dim);font-size:12px;font-style:italic}
.f-empty{margin:auto;text-align:center;color:var(--f-dim);font-size:14px;line-height:1.8;padding:40px 0}
.f-del{appearance:none;position:absolute;top:0;right:-24px;width:20px;height:20px;border:0;background:none;color:var(--f-dim);cursor:pointer;opacity:0;font-size:14px}
.f-ln:hover .f-del,.f-div:hover .f-del{opacity:.8}
.f-div .f-del{position:static}
@media (hover:none){.f-del{opacity:.5;right:-20px}}
.f-typing{position:relative;min-height:20px;max-width:760px;width:100%;margin:0 auto;box-sizing:border-box;font-size:12px;font-style:italic;color:var(--f-dim);padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.f-form{position:relative;max-width:760px;width:100%;margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;
  padding-block:8px calc(16px + env(safe-area-inset-bottom,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.f-tools{display:flex;gap:8px;align-items:center}
.f-seg{width:140px;border-color:var(--f-line)}
.f-seg label{padding:6px 0;font-size:12px;color:var(--f-dim)}
.f-seg input:checked+label{background:var(--f-ink);color:#0b0c0d}
:root[data-theme="light"] .f-seg input:checked+label{color:#fff}
.f-tools .small-btn{border-color:var(--f-line);color:var(--f-ink);background:var(--f-glass)}
.f-input{display:flex;gap:8px;align-items:flex-end}
.f-input textarea{flex:1;min-width:0;resize:none;background:var(--f-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--f-ink);border:1px solid var(--f-line);border-radius:14px;padding:12px 14px;font:inherit;font-size:15px;line-height:1.5;max-height:140px;outline:none}
.f-input textarea:focus{border-color:var(--f-dim)}
.f-input .btn{background:var(--f-ink);color:#0b0c0d;border-color:var(--f-ink);flex:none}
:root[data-theme="light"] .f-input .btn{color:#fff}
@media (prefers-reduced-motion:reduce){.f-bg,.f-fx{animation:none!important}}

/* ---------- 체력 · 이성 · 포만감 · 수분 ---------- */
.vt-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px;margin-top:14px;max-width:560px}
.vt-row[hidden]{display:none}
.vt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;font-size:11.5px;color:var(--dim);min-width:0}
.vt span{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;white-space:nowrap}
.vt b{font-weight:400;font-family:var(--f-mono);font-size:11px;color:var(--txt);font-variant-numeric:tabular-nums;min-width:20px;text-align:right}
.vt-bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;min-width:24px}
.vt-bar i{display:block;height:100%;background:var(--txt);border-radius:2px;transition:width .6s}
.vt.low span,.vt.low b{color:var(--bad)}
.vt.low .vt-bar i{background:var(--bad)}
@media (max-width:520px){.vt-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vt-row.compact{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px;max-width:480px}
.f-sub .vt span{color:var(--f-dim)}
.f-sub .vt-bar{background:var(--f-line)}
.f-sub .vt-bar i{background:var(--f-ink)}
.f-sub .vt.low .vt-bar i{background:var(--bad)}
.ev .vt-row{margin:14px 0 2px}

/* 이동 중 */
#o-travel,#f-travel{margin-top:12px;max-width:560px}
.tv{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--scr2)}
.tv-top{display:flex;align-items:center;gap:8px;font-size:13px}
.tv-top b{color:var(--dim);font-weight:400}
.tv-top small{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.tv-bar{margin-top:8px;height:3px}
.tv-bar i{transition:width .5s linear}
.f-sub .tv{background:var(--f-glass);border-color:var(--f-line)}
.mv-travel:empty{display:none}
.mv-travel{margin-top:12px}
.f-form.moving textarea,.f-form.moving #f-send{opacity:.4;pointer-events:none}

/* 사건 카드 확장 */
.ev-c.esper{border-color:color-mix(in srgb,var(--warn) 60%,var(--line))}
.ev-c.esper span{border-color:var(--warn);color:var(--warn)}
.ev-c em{margin-left:auto;font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--warn);letter-spacing:.06em}
.ev-c:disabled em{color:var(--dim)}
.ev.log .ev-script p{font-size:14.5px;line-height:1.8;margin:0 0 10px;opacity:0;animation:in .6s forwards}
.ev.log #go{opacity:0;animation:in .4s forwards}
.ev.collapse h3{color:var(--bad)}
.loot{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.loot .tags{margin-top:6px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.row4 input{background:transparent;border:0;border-bottom:1px solid var(--line);padding:6px 0 8px;font-size:14px;min-width:0;width:100%;color:var(--txt);outline:none}
.f-tools{flex-wrap:wrap}
.f-tools .small-btn.primary{background:var(--f-ink);color:#0b0c0d;border-color:var(--f-ink)}
:root[data-theme="light"] .f-tools .small-btn.primary{color:#fff}
.f-tools .small-btn:disabled{opacity:.5}
/* 현장 배경: 지도 대신 풍경 */
.f-bg svg{width:100%;height:100%;filter:none}
:root{--f-shade:linear-gradient(180deg,rgba(8,9,10,.55),rgba(8,9,10,.25) 30%,rgba(8,9,10,.55) 60%,rgba(8,9,10,.9))}
:root[data-theme="light"]{--f-shade:linear-gradient(180deg,rgba(240,239,234,.7),rgba(240,239,234,.35) 30%,rgba(240,239,234,.7) 60%,rgba(240,239,234,.94))}

/* ---------- 현장: 크게 보이는 상태 ---------- */
.vt-row.big{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:680px;margin-top:12px;padding:12px 14px;border:1px solid var(--f-line);border-radius:14px;background:var(--f-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vt-row.big .vt{grid-template-columns:1fr auto;grid-template-areas:"n v" "b b";gap:5px 8px}
.vt-row.big .vt span{grid-area:n;font-family:var(--f-sans);font-size:12px;letter-spacing:0;color:var(--f-dim)}
.vt-row.big .vt b{grid-area:v;font-size:15px;color:var(--f-ink)}
.vt-row.big .vt b::after{content:" / 100";font-size:10px;color:var(--f-dim)}
.vt-row.big .vt-bar{grid-area:b;height:6px;border-radius:3px}
.vt-row.big .vt.low b{color:var(--bad)}
@media (max-width:520px){.vt-row.big{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 탐색 결과 줄 (나에게만 보임) */
.f-find{align-self:center;max-width:520px;width:100%;border:1px dashed var(--f-line);border-radius:12px;padding:10px 12px;background:var(--f-glass);text-align:left}
.f-find p{margin:4px 0;font-size:14px;line-height:1.55}
.f-find small{font-family:var(--f-mono);font-size:9.5px;color:var(--f-dim)}
.f-find .tags{margin:4px 0}
.f-find-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--f-dim)}
.f-find.loot .f-find-tag{color:var(--ok)}
.f-find.accident .f-find-tag{color:var(--bad)}
.f-find.event .f-find-tag{color:var(--warn)}
#f-scout small{font-family:var(--f-mono);font-size:10px;opacity:.7;margin-left:4px}
.f-gear{display:inline-flex;align-items:center;gap:5px;margin-left:auto}
.f-gear svg{width:14px;height:14px}

/* 설정 · 내보내기 */
.exp{display:flex;flex-wrap:wrap;gap:8px}

/* 은신처 */
.hide-intro ul{padding-left:18px;margin:8px 0 0;line-height:1.8}
.hide-card{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--scr2);margin-bottom:12px}
.hide-card h4{margin:6px 0 2px;font-weight:400;font-size:20px}
.hide-card small{color:var(--dim);font-size:12px}
.hide-card .btn-col .btn{flex:1}

/* 지하 주파수 */
.radio-off{border:1px dashed var(--line);border-radius:16px;padding:20px;position:relative;overflow:hidden}
.noise{height:46px;margin-bottom:14px;border-radius:8px;background:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 5px),repeating-linear-gradient(0deg,transparent 0 3px,var(--scr2) 3px 4px);animation:noise .25s steps(3) infinite;opacity:.8}
@keyframes noise{to{background-position:7px 0,0 2px}}
.mono-s{font-family:var(--f-mono);font-size:11px;color:var(--dim);margin:0}
.radio-on .v-lead{color:var(--warn)}
.under{border-left:2px solid var(--warn);padding:10px 0 10px 14px;margin-bottom:14px}
.under h4{margin:8px 0 4px;font-family:var(--f-mono);font-weight:400;font-size:15px;letter-spacing:.04em}
.under p{margin:0;font-family:var(--f-mono);font-size:13px;line-height:1.75;opacity:.9;overflow-wrap:anywhere}

/* 일지 */
.journal-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.journal-h .v-lead{margin:0}
.jday{margin-top:18px}
.jday h4{margin:0 0 8px;font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.12em;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:6px}
.jrow{display:grid;grid-template-columns:44px 52px 1fr;gap:8px;align-items:baseline;padding:6px 0}
.jrow time{font-family:var(--f-mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.jrow p{margin:0;font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}
.jk{font-size:10.5px;border:1px solid var(--line);border-radius:999px;padding:1px 7px;text-align:center;color:var(--dim);white-space:nowrap}
.jk.collapse{color:var(--bad);border-color:var(--bad)}
.jk.scout,.jk.explore{color:var(--ok)}
.jk.event,.jk.radio{color:var(--warn)}

/* 장기 탐사 실황 창 */
aside.live{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:14;width:min(360px,calc(100vw - 32px));max-height:min(420px,60vh);display:flex;flex-direction:column;
  background:var(--scr2);color:var(--txt);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);overflow:hidden;color-scheme:var(--scheme)}
.live-h{display:flex;align-items:center;gap:8px;padding:10px 12px 8px;font-size:12.5px}
.live-h small{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.live-left{font-family:var(--f-mono);font-size:11px;color:var(--dim);white-space:nowrap}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--bad);animation:pulse 1.4s infinite;flex:none}
.live-min{appearance:none;border:0;background:none;color:var(--dim);cursor:pointer;font-size:13px;padding:2px 4px}
.live-bar{height:2px;margin:0 12px}
.live-bar i{transition:width 1s linear}
.live-body{overflow-y:auto;padding:10px 14px 14px;display:flex;flex-direction:column;gap:8px}
.live-body p{margin:0;font-size:13px;line-height:1.6}
.live-body p.res{color:var(--txt)}
.live-body p.res b{font-weight:500;color:var(--warn)}
.live-beat{border:1px solid var(--warn);border-radius:12px;padding:10px;margin-top:4px;background:color-mix(in srgb,var(--warn) 8%,transparent)}
.live-beat p{font-size:13.5px;margin-bottom:8px}
.live-ch{display:flex;flex-direction:column;gap:6px}
.live-ch .small-btn{text-align:left}
.live-ch .small-btn.esper{border-color:var(--warn);color:var(--warn)}
aside.live.min .live-body,aside.live.min .live-bar{display:none}
#field ~ aside.live{z-index:14}

#field:not([hidden]) ~ aside.live{bottom:auto;top:calc(150px + env(safe-area-inset-top,0px))}
@media (max-width:640px){#field:not([hidden]) ~ aside.live{top:auto;bottom:calc(170px + env(safe-area-inset-bottom,0px));max-height:38vh}}

/* ---------- 8-5. 무리 · 프로필 이미지 · 도움말 · 방송 종류 · 물건 분류 ---------- */
/* 프로필 이미지 */
.ava{overflow:hidden}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava.sm{width:30px;height:30px;border-radius:9px;font-size:12px;margin-top:2px}
.ava.xs{width:20px;height:20px;border-radius:6px;font-size:10px;font-weight:500;display:inline-grid;vertical-align:middle}
.msg small.who{display:inline-flex;align-items:center;gap:6px}
.card-ava{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none;border:1px solid #bdbdb8;filter:grayscale(.25) contrast(1.05);align-self:center}
.card-mid .card-name{flex:1}
#s-ava .ava{width:44px;height:44px}

/* 현장: 채널 탭 */
.f-chan{position:relative;display:flex;gap:6px;max-width:760px;width:100%;margin:6px auto 0;box-sizing:border-box;overflow-x:auto;scrollbar-width:none;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.f-chan::-webkit-scrollbar{display:none}
.f-chan:empty{display:none}
.f-chan button{appearance:none;position:relative;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;font:inherit;font-size:12.5px;
  color:var(--f-dim);background:var(--f-glass);border:1px solid var(--f-line);border-radius:999px;padding:6px 13px}
.f-chan button svg{width:15px;height:15px}
.f-chan button.on{color:#0b0c0d;background:var(--f-ink);border-color:var(--f-ink)}
:root[data-theme="light"] .f-chan button.on{color:#fff}
.f-chan button.ghost{border-style:dashed}
.f-chan .badge{position:static;margin-left:2px;border:0;height:18px;min-width:18px;line-height:18px;font-size:10px;padding:0 5px}
.f-log.party{-webkit-mask-image:linear-gradient(180deg,transparent,#000 40px)}
.f-log.party .f-ln.say{border-left:2px solid color-mix(in srgb,var(--warn) 55%,transparent);padding-left:10px}

/* 현장: 대사 줄에 프로필 */
.f-ln.say{display:flex;gap:10px;align-items:flex-start}
.f-ln.say .ava{background:var(--f-glass);border-color:var(--f-line);color:var(--f-ink)}
.f-ln-b{min-width:0;flex:1}
.f-at{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;color:var(--f-dim);margin-left:8px;border:1px solid var(--f-line);border-radius:4px;padding:0 5px;text-transform:none}
/* 주사위 */
.f-dice{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;color:var(--f-ink);
  border:1px solid var(--f-line);background:var(--f-glass);border-radius:999px;padding:5px 12px 5px 6px}
.f-dice .ava{background:transparent;border-color:var(--f-line);color:var(--f-ink)}
.f-dice b{font-weight:500}
.f-dice span{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:12.5px;color:var(--warn)}
.f-dice .die{width:15px;height:15px}
.f-dice .f-del{position:static}
.f-dice:hover .f-del{opacity:.8}
/* 진행자 나레이션 */
.f-gm{position:relative;align-self:center;max-width:560px;width:100%;text-align:center;padding:12px 16px;border-top:1px solid var(--f-line);border-bottom:1px solid var(--f-line)}
.f-gm span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.3em;color:var(--warn)}
.f-gm p{margin:6px 0 0;font-size:15px;line-height:1.75;font-style:italic;overflow-wrap:anywhere}
.f-gm:hover .f-del{opacity:.8}

/* 무리 시트 */
.sheet h3 svg{width:20px;height:20px;vertical-align:-3px;margin-right:6px}
.pt-code{display:flex;align-items:center;gap:12px;border:1px dashed var(--line);border-radius:12px;padding:10px 14px;background:var(--scr2)}
.pt-code span{font-size:12px;color:var(--dim)}
.pt-code b{font-family:var(--f-mono);font-size:20px;letter-spacing:.3em;flex:1}

/* 도움말 */
.help-btn svg{width:18px;height:18px}
.help{display:flex;flex-direction:column;gap:8px}
.help-i{border:1px solid var(--line);border-radius:12px;background:var(--scr2)}
.help-i summary{cursor:pointer;padding:11px 14px;font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.help-i summary::-webkit-details-marker{display:none}
.help-i summary::after{content:"+";font-family:var(--f-mono);color:var(--dim)}
.help-i[open] summary::after{content:"−"}
.help-i p{margin:0;padding:0 14px 13px;font-size:13px;line-height:1.7;color:var(--dim)}

/* 방송 종류 */
.chip.wx{color:#6f97b5;border-color:#6f97b5}
.chip.wanted{color:var(--bad);border-color:var(--bad);border-style:dashed}
.chip.ration{color:var(--ok);border-color:var(--ok)}
.chip.camp{color:var(--txt);border-color:var(--dim)}
.chip.health{color:#9a86b8;border-color:#9a86b8}
.chip.under{color:var(--warn);border-color:var(--warn)}
:root[data-theme="light"] .chip.wx{color:#2f6087;border-color:#2f6087}
:root[data-theme="light"] .chip.health{color:#5f4a85;border-color:#5f4a85}
.ticker b.wx{color:#6f97b5}.ticker b.wanted{color:var(--bad)}.ticker b.ration{color:var(--ok)}.ticker b.health{color:#9a86b8}

/* 물건 분류 꼬리표 */
.itag{display:inline-block;margin-left:6px;font-family:var(--f-mono);font-size:9.5px;font-weight:400;letter-spacing:.06em;vertical-align:1px;border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--dim)}
.itag.t-contraband{color:var(--bad);border-color:var(--bad)}
.itag.t-valuable{color:var(--warn);border-color:var(--warn)}
.itag.t-med{color:var(--ok);border-color:var(--ok)}
.itag.t-food{color:var(--txt)}
.bag-filt{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.bag-filt button{appearance:none;font:inherit;font-size:12px;cursor:pointer;color:var(--dim);background:none;border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.bag-filt button.on{color:var(--scr);background:var(--txt);border-color:var(--txt)}

/* ---------- 8-4b. 장면 분위기 · 기분 태그 · 사람 메뉴 · 쪽지 · 도감 ---------- */
.f-mood{position:absolute;inset:0;pointer-events:none;z-index:0;transition:background .8s}
.f-mood.m-tension{box-shadow:inset 0 0 160px 30px rgba(120,20,20,.45);animation:mTension 4s ease-in-out infinite}
.f-mood.m-siren{animation:mSiren 1.6s steps(1) infinite}
.f-mood.m-blackout{background:rgba(0,0,0,.6);animation:mFlicker 7s infinite}
.f-mood.m-ration{background:linear-gradient(180deg,rgba(220,170,80,.12),rgba(220,170,80,.05))}
.f-mood.m-quiet{backdrop-filter:grayscale(.7) brightness(.92);-webkit-backdrop-filter:grayscale(.7) brightness(.92)}
@keyframes mTension{50%{box-shadow:inset 0 0 220px 60px rgba(140,20,20,.55)}}
@keyframes mSiren{0%{box-shadow:inset 0 0 140px 20px rgba(200,40,40,.5)}50%{box-shadow:inset 0 0 140px 20px rgba(40,80,220,.45)}}
@keyframes mFlicker{0%,100%{opacity:1}3%{opacity:.6}4%{opacity:1}61%{opacity:1}62%{opacity:.5}64%{opacity:1}}
@media (prefers-reduced-motion:reduce){.f-mood{animation:none!important}}
.f-mood-tag{color:var(--warn)}
.f-p{appearance:none;font:inherit;font-size:12px;color:var(--f-ink);cursor:pointer}
.f-p em{font-style:normal;font-size:10.5px;color:var(--f-dim);margin-left:2px}
.f-p em.add{opacity:.6}
.mood-tag{font-family:var(--f-mono);font-size:10px;font-weight:400;color:var(--warn);border:1px solid var(--warn);border-radius:999px;padding:0 6px;vertical-align:2px}
.pp-top{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.pp-top .ava{width:52px;height:52px;border-radius:14px}
.mood-grid{display:flex;flex-wrap:wrap;gap:6px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);margin:2px 0 4px}
.req{font-style:normal;font-family:var(--f-mono);font-size:9.5px;color:var(--bad);border:1px solid var(--bad);border-radius:4px;padding:0 4px;margin-left:4px}
/* 물건 도감 */
.cx{border-bottom:1px solid var(--line)}
.cx summary{cursor:pointer;list-style:none;padding:12px 2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cx summary::-webkit-details-marker{display:none}
.cx summary b{font-weight:500}
.cx summary em{font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--dim);margin-left:auto}
.cx-body{margin:0 0 10px;font-size:13px;line-height:1.65;color:var(--dim)}
.cx-sec{margin:0 0 12px}
.cx-sec span{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--dim);margin-bottom:4px}
.cx-sec ul{margin:0;padding-left:18px;font-size:13px;line-height:1.7}

/* ---------- 8-4d. 거처 ---------- */
.home-now{border:1px solid var(--warn);border-radius:14px;padding:14px;margin-bottom:18px;background:color-mix(in srgb,var(--warn) 7%,transparent)}
.home-card{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;background:var(--scr2)}
.home-card .btn{width:100%}
.home-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.home-top b{font-size:16px;font-weight:500;margin-right:4px}
.home-top .amt{margin-left:auto;font-family:var(--f-mono);font-size:13px}
.lockline{color:var(--bad);font-size:12px;margin:0 0 8px}
.hi-sec{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding:12px 0}
.hi-sec>b{font-weight:500;min-width:52px}
.hi-sec>b small{font-family:var(--f-mono);font-weight:400;font-size:10.5px;color:var(--dim);margin-left:4px}
.hi-sec>span{flex:1;font-size:12.5px;color:var(--dim);min-width:140px}
.hi-sec.col{flex-direction:column;align-items:stretch}
.hi-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hi-two>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.hi-two small{font-size:11px;color:var(--dim)}
.hi-it{appearance:none;font:inherit;font-size:12px;text-align:left;cursor:pointer;color:var(--txt);background:var(--scr);border:1px solid var(--line);border-radius:8px;padding:6px 8px;overflow-wrap:anywhere}
.hi-it:disabled{opacity:.5}
.hi-rc{display:flex;align-items:center;gap:10px;padding:6px 0}
.hi-rc span{flex:1;min-width:0;display:flex;flex-direction:column}
.hi-rc span b{font-weight:500;font-size:13px}
.hi-rc small{font-size:11.5px;color:var(--dim);line-height:1.5}

/* ---------- 8-4e. 단말 서비스 묶음 · 현장 행동 · 배급 · 소문 ---------- */
.app-groups{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:820px){.app-groups{grid-template-columns:1fr 1fr}}
.app-sec{border:1px solid var(--line);border-radius:16px;background:var(--scr2);padding:4px 10px 10px}
.app-sec.shut{padding-bottom:4px}
.app-sec[data-g="gm"]{border-color:color-mix(in srgb,var(--warn) 50%,var(--line))}
.app-sec-h{appearance:none;width:100%;display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:var(--dim);font:inherit;padding:8px 4px;text-align:left}
.app-sec-h span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;color:var(--txt);white-space:nowrap}
.app-sec-h small{flex:1;min-width:0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-sec-h b{font-weight:400;font-size:11px}
.app-sec-h .badge{position:static;border:0}
.app-sec .app-grid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px}
.app-sec .app .ic{width:52px;height:52px;border-radius:15px}
.app-sec .app span{font-size:11px}
.ration-box{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:14px;font-size:12.5px;color:var(--dim)}
.ration-box b{color:var(--txt);font-weight:500;font-family:var(--f-mono)}
.ration-box small{flex-basis:100%;font-size:11.5px;line-height:1.55}
.ration-tag{font-family:var(--f-mono);font-size:9.5px;color:var(--ok);border:1px solid var(--ok);border-radius:4px;padding:0 5px;align-self:center;white-space:nowrap}
.row-btns s{opacity:.55;font-size:.9em}
.fa-list{display:flex;flex-direction:column;gap:8px}
.fa-row{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--scr2)}
.fa-row>div:first-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fa-row b{font-weight:500;font-size:14px}
.fa-row small{font-size:12px;color:var(--dim);line-height:1.5}
.fa-btns{display:flex;gap:6px;flex:none}
.f-ln.coop p{border-left-color:var(--warn)}
.coop-btns{display:flex;gap:6px;margin:6px 0 0 12px}
.rumors{display:flex;flex-direction:column;gap:8px}
.rumor{border-left:2px solid var(--warn);padding:6px 0 6px 12px}
.rumor p{margin:0;font-size:13.5px;line-height:1.65}
.rumor time{font-family:var(--f-mono);font-size:10px;color:var(--dim)}

/* ---------- 확장 16: 전투 · 도감 · 거처 탭 · 반려동물 · 플레이어 · 오늘의 사건 ---------- */
.alert.wev{border-color:var(--warn)}
.alert-tag.wev{background:var(--warn);color:#111}
.ev-c.need em{color:var(--ok)}
.ev-c:disabled em{color:var(--dim)}
/* 전투 */
.ev.cb h3{margin-bottom:10px}
.cb-hp{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;font-size:12px;color:var(--dim);margin-bottom:8px}
.cb-hp b{font-family:var(--f-mono);font-weight:400;color:var(--txt);font-size:12px}
.cb-hp .bar{height:8px;border-radius:4px}
.cb-e i{background:var(--bad)!important}
.cb-me i{background:var(--ok)!important}
.cb-gear{font-size:12.5px;color:var(--dim);margin:0 0 10px}
.cb-gear b{color:var(--txt);font-weight:500}
.cb-log{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--scr2);min-height:96px;max-height:200px;overflow-y:auto;margin-bottom:12px}
.cb-log p{margin:0 0 4px;font-size:13px;line-height:1.55}
.cb-log p:last-child{margin:0;color:var(--txt)}
.cb-log p:not(:last-child){color:var(--dim)}
.cb-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cb-acts .btn{padding:11px 8px;font-size:14px}
.cb-acts .btn small{font-family:var(--f-mono);font-size:10px;opacity:.7}
.cb-acts .esper{border-color:var(--warn);color:var(--warn)}
.cb-items{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* 도감 */
.cx-head{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-bottom:6px}
.cx-head>div:first-child{font-family:var(--f-mono);font-size:13px;color:var(--dim)}
.cx-head>div:first-child b{font-size:26px;color:var(--txt);font-weight:400}
.cx-head small{display:block;font-family:var(--f-sans,inherit);font-size:11px}
.cx-prog{height:6px;border-radius:3px}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;margin-top:6px}
.cx-tile{appearance:none;font:inherit;color:var(--txt);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:12px 6px 10px;border:1px solid var(--line);border-radius:14px;background:var(--scr2);min-height:104px}
.cx-tile:hover{border-color:var(--dim)}
.cx-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;background:var(--scr);border:1px solid var(--line)}
.cx-tile b{font-weight:500;font-size:12.5px;line-height:1.3;word-break:keep-all}
.cx-tile small{font-size:10.5px;color:var(--dim)}
.cx-tile.unknown{background:transparent;border-style:dashed;color:var(--dim)}
.cx-tile.unknown .cx-ic{font-family:var(--f-mono);border-style:dashed}
.cx-tile.illegal:not(.unknown) .cx-ic{border-color:var(--bad);color:var(--bad)}
.cx-detail .cx-big{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:30px;background:var(--scr2);border:1px solid var(--line);margin-bottom:10px}
.cx-detail .cx-big.unknown{border-style:dashed;color:var(--dim);font-family:var(--f-mono)}
.cx-facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--dim);margin:6px 0 12px}
.cx-facts b{color:var(--txt);font-weight:500}
/* 거처 탭 · 조합 */
.hi-tabs{margin:8px 0 6px}
.hi-body{min-height:120px}
.hi-rc i{font-style:normal}
.hi-rc i.no{color:var(--bad)}
.hi-rc i.ok{color:var(--ok)}
.hi-rc{border-bottom:1px solid var(--line);padding:8px 0}
/* 반려동물 */
.pet-card{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--scr2)}
.pet-ic{width:64px;height:64px;flex:none;border-radius:16px;background:var(--scr);border:1px solid var(--line);display:grid;place-items:center;color:var(--txt)}
.pet-ic svg{width:44px;height:44px}
.pet-card b{font-size:17px;font-weight:500}.pet-card small{color:var(--dim);margin-left:4px}
.pet-card p{margin:4px 0 0;font-size:13px;color:var(--dim)}
.pet-bars{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;font-size:12px;color:var(--dim);margin:12px 0 4px}
.pet-bars b{font-family:var(--f-mono);font-weight:400;font-size:12px;color:var(--txt)}
.pet-aff i{background:var(--warn)!important}
.pet-acts{display:flex;flex-wrap:wrap;gap:6px}
.pet-acts small{font-family:var(--f-mono);font-size:10px;opacity:.75}
.f-p.pet{gap:4px;color:var(--f-ink)}
.f-p.pet svg{width:16px;height:16px}
/* 플레이어 */
.ava.rec{font-size:18px}
.ava.rec.on{background:var(--txt);color:var(--scr);animation:pulse 1.4s infinite}

/* ===== 5차: 메시지 입력칸 ===== */
.m-form{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.m-box{display:flex;align-items:flex-end;gap:6px;background:var(--scr);border:1px solid var(--line);border-radius:22px;padding:5px 5px 5px 14px;transition:border-color .2s,box-shadow .2s}
.m-box:focus-within{border-color:var(--dim);box-shadow:0 0 0 3px color-mix(in srgb,var(--txt) 8%,transparent)}
.m-form textarea{flex:1;min-width:0;resize:none;background:transparent;color:var(--txt);border:0;border-radius:0;padding:8px 0;font:inherit;font-size:14.5px;line-height:1.45;max-height:132px;outline:none}
.m-form textarea::placeholder{color:var(--dim)}
.m-send{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--txt);color:var(--scr);display:grid;place-items:center;cursor:pointer;transition:transform .15s,opacity .2s}
.m-send svg{width:18px;height:18px}
.m-send:disabled{opacity:.28;cursor:default}
.m-send:not(:disabled):active{transform:scale(.92)}
.m-meta{display:flex;justify-content:space-between;padding:0 14px;font-size:10.5px;color:var(--dim);font-family:var(--f-mono);letter-spacing:.02em}
.m-meta .warn{color:var(--warn)}
.m-tools{display:flex;gap:4px;flex:none;align-self:flex-end;padding-bottom:4px}
.m-tool{appearance:none;border:0;background:none;color:var(--dim);width:30px;height:30px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:15px}
.m-tool:hover{color:var(--txt);background:var(--scr2)}
.m-quick{display:flex;gap:6px;overflow-x:auto;padding:0 2px 2px;scrollbar-width:none}
.m-quick::-webkit-scrollbar{display:none}
.m-quick button{flex:none;appearance:none;border:1px solid var(--line);background:var(--scr2);color:var(--dim);border-radius:999px;padding:5px 11px;font-size:12px;cursor:pointer}
.m-quick button:hover{color:var(--txt);border-color:var(--dim)}

/* ===== 5차: 시민권 기록 · 이능 상자 ===== */
.hid-chk{display:flex;flex-wrap:nowrap;gap:10px;align-items:flex-start;padding:11px 12px;border:1px dashed var(--line);border-radius:12px;margin:-4px 0 14px;cursor:pointer}
.hid-chk input{margin:3px 0 0;accent-color:var(--warn);width:auto;flex:none}
.hid-chk span{display:flex;flex-direction:column;gap:3px}
.hid-chk b{font-size:13px}.hid-chk small{font-size:11.5px;color:var(--dim);line-height:1.55}
.rec-box,.esp-box{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--scr2);display:flex;flex-direction:column;gap:8px}
.rec-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.rec-top b{font-size:13.5px}.rec-top small{font-size:11px;color:var(--dim);font-family:var(--f-mono)}
.rec-warning{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}
.rec-suspended,.rec-void{border-color:color-mix(in srgb,var(--bad) 60%,var(--line))}
.rec-warning .rec-top b{color:var(--warn)}.rec-suspended .rec-top b,.rec-void .rec-top b{color:var(--bad)}
dd.rec-warning{color:var(--warn)}dd.rec-suspended,dd.rec-void{color:var(--bad)}
.rec-bar,.esp-bar{height:5px;border-radius:3px;overflow:visible}
.rec-bar i,.esp-bar i{transition:width .6s;border-radius:3px;background:linear-gradient(90deg,var(--ok),var(--warn) 45%,var(--bad))}
.rec-bar em{position:absolute;top:-3px;width:1px;height:11px;background:var(--dim);opacity:.6}
.rec-log summary{cursor:pointer;font-size:12px;color:var(--dim)}
.rec-log div{display:grid;grid-template-columns:52px 1fr auto;gap:8px;font-size:12px;padding:5px 0;border-top:1px solid var(--line)}
.rec-log small{color:var(--dim);font-family:var(--f-mono);font-size:10.5px}
.rec-log b{font-family:var(--f-mono);font-size:11px}
.esp-box.hid{border-style:dashed}
.esp-row{display:grid;grid-template-columns:62px auto 1fr;gap:4px 10px;align-items:baseline}
.esp-row span{font-size:11.5px;color:var(--dim)}.esp-row b{font-size:13px;font-family:var(--f-mono)}.esp-row small{grid-column:1/-1;font-size:11px;color:var(--dim);line-height:1.5}
.stamp.unreg{color:var(--warn);border-color:var(--warn);font-size:9px;letter-spacing:.12em;top:52px}

/* ===== 5차: 플레이어 ===== */
.pl-now{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--scr2);margin-bottom:14px}
.pl-disc{width:64px;height:64px;border-radius:50%;flex:none;background:radial-gradient(circle,var(--scr) 0 9%,var(--txt) 10% 12%,#1c1d1f 13% 100%);box-shadow:inset 0 0 0 1px var(--line);position:relative}
.pl-disc::after{content:"";position:absolute;inset:6px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 2px,rgba(255,255,255,.05) 2px 3px)}
.pl-now.on .pl-disc{animation:plspin 3.2s linear infinite}
@keyframes plspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pl-now.on .pl-disc{animation:none}}
.pl-now b{display:block;font-size:15px}.pl-now small{color:var(--dim);font-size:12px}
.pl-eq{display:flex;gap:3px;align-items:flex-end;height:16px;margin-top:6px}
.pl-eq i{width:3px;background:var(--dim);height:3px;border-radius:1px}
.pl-now.on .pl-eq i{animation:pleq .9s ease-in-out infinite alternate}
.pl-now.on .pl-eq i:nth-child(2){animation-delay:.2s}.pl-now.on .pl-eq i:nth-child(3){animation-delay:.4s}.pl-now.on .pl-eq i:nth-child(4){animation-delay:.1s}
@keyframes pleq{from{height:3px}to{height:15px}}
.row.locked{opacity:.5}
.v-foot .m-form{width:100%}
.m-meta{gap:12px}
.m-meta span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-send:not(:disabled){background:var(--hi);color:var(--scr)}
.v-foot .m-form{align-items:stretch}