@font-face{font-family:Pretendard;src:url(vendor/fonts/PretendardVariable.woff2) format("woff2-variations");font-weight:45 920;font-display:swap}

:root{
  --bg:#07090d;--bg2:#0c0f15;--panel:rgba(20,24,33,.72);--panel2:rgba(28,33,45,.8);--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.12);
  --text:#e9ecf2;--sub:#9aa3b2;--mute:#5f6878;
  --red:#ff2d3d;--red2:#d71a21;--red-rgb:255,45,61;--blue:#4f9dff;--orange:#ffb020;--green:#3ddc97;--purple:#b06cff;--cyan:#22c3e6;
  --redbg:rgba(var(--red-rgb),.12);--shadow:0 10px 30px rgba(0,0,0,.35);
}
body.light{
  --bg:#f3f5f9;--bg2:#ffffff;--panel:rgba(255,255,255,.86);--panel2:#f6f8fb;--line:rgba(15,23,42,.08);--line2:rgba(15,23,42,.14);
  --text:#151a24;--sub:#556072;--mute:#8b95a5;--redbg:rgba(var(--red-rgb),.09);--shadow:0 8px 24px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font,Pretendard),Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;background:var(--bg);color:var(--text);font-size:13.5px;
  background-image:radial-gradient(900px 500px at 85% -10%,rgba(var(--red-rgb),.10),transparent 60%),radial-gradient(800px 500px at -10% 110%,rgba(79,157,255,.08),transparent 60%);background-attachment:fixed}
.num{font-variant-numeric:tabular-nums}
button{font-family:inherit}
#app{display:flex;height:100vh}
.rail{width:72px;flex:none;background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;overflow-y:auto}
.rail .logo{margin:4px 0 14px}
.rail a{position:relative;width:60px;padding:9px 0 7px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--sub);text-decoration:none;font-size:10.5px;cursor:pointer}
.rail a svg{width:20px;height:20px}
.rail a:hover{color:var(--text);background:var(--panel2)}
.rail a.on{color:var(--red);background:var(--redbg)}
.rail a.on::before{content:"";position:absolute;left:-6px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--red)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:60px;flex:none;display:flex;align-items:center;gap:14px;padding:0 22px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 70%,transparent);backdrop-filter:blur(10px)}
.top h1{font-size:16px;margin:0;font-weight:700;white-space:nowrap}
.top .prod{font-size:11px;color:var(--red);font-weight:700;letter-spacing:.08em;border:1px solid rgba(var(--red-rgb),.35);border-radius:6px;padding:2px 6px}
.cmd{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:0 10px;height:36px;width:300px;color:var(--mute)}
.cmd svg{width:16px;height:16px}
.cmd input{flex:1;background:none;border:0;outline:0;color:var(--text);font-family:inherit;font-size:13px}
kbd{font-size:10.5px;border:1px solid var(--line2);border-radius:5px;padding:1px 5px;color:var(--mute)}
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--sub);cursor:pointer;display:grid;place-items:center}
.icon-btn svg{width:17px;height:17px}
.user{display:flex;align-items:center;gap:9px;font-size:12px}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;display:grid;place-items:center;font-weight:700}
.view{flex:1;overflow:auto;padding:22px}
.head{display:flex;align-items:flex-end;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.grow{flex:1;min-width:200px}
.section-title{font-size:20px;font-weight:700}
.section-sub{color:var(--sub);font-size:12.5px;margin-top:4px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.g21,.g2{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;backdrop-filter:blur(12px);box-shadow:var(--shadow);min-width:0}
.card h3{font-size:14px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.card h3 .r{margin-left:auto;display:flex;gap:6px}
.kpi .lb{color:var(--sub);font-size:12px}
.kpi .v{font-size:26px;font-weight:800;margin:6px 0 4px}
.kpi .d{color:var(--mute);font-size:11.5px}
.kpi.hl{background:linear-gradient(135deg,rgba(var(--red-rgb),.92),color-mix(in srgb,var(--red2) 85%,transparent));border-color:transparent;color:#fff}
.kpi.hl .lb,.kpi.hl .d{color:rgba(255,255,255,.85)}
.btn{height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{border-color:var(--red)}
.btn.pri{background:linear-gradient(135deg,var(--red),var(--red2));border:0;color:#fff;box-shadow:0 6px 18px rgba(var(--red-rgb),.3)}
.btn.sm{height:28px;padding:0 10px;font-size:12px;border-radius:8px}
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{border:0;background:none;color:var(--sub);padding:6px 12px;border-radius:7px;cursor:pointer;font-size:12.5px}
.seg button.on{background:var(--redbg);color:var(--red);font-weight:700}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap}
.t-red{background:rgba(var(--red-rgb),.14);color:var(--red)}.t-org{background:rgba(255,176,32,.15);color:var(--orange)}
.t-blue{background:rgba(79,157,255,.15);color:var(--blue)}.t-green{background:rgba(61,220,151,.14);color:var(--green)}
.t-pur{background:rgba(176,108,255,.15);color:var(--purple)}.t-gray{background:var(--panel2);color:var(--sub)}
.tw{overflow:auto;max-height:520px}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th{position:sticky;top:0;background:var(--bg2);color:var(--sub);font-weight:600;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line2);white-space:nowrap;z-index:1}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td.r,table.t th.r{text-align:right}
table.t tr.click{cursor:pointer}
table.t tr.click:hover td{background:var(--redbg)}
.bar{height:7px;border-radius:5px;background:var(--panel2);overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--red),color-mix(in srgb,var(--red) 60%,#fff))}
.bar.g i{background:var(--green)}.bar.o i{background:var(--orange)}.bar.b i{background:var(--blue)}
.mute{color:var(--mute)}.sub{color:var(--sub)}
.row{display:flex;align-items:center;gap:10px}
.chart{height:260px;width:100%}
label.f{display:block;font-size:11.5px;color:var(--sub);margin-bottom:12px}
.inp{display:block;width:100%;margin-top:5px;height:36px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);padding:0 10px;font-family:inherit;font-size:13px;outline:none}
.inp:focus{border-color:var(--red)}
textarea.inp{height:auto;padding:10px;line-height:1.6}
.switch{position:relative;width:40px;height:22px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;border-radius:22px;background:var(--line2);cursor:pointer;transition:.2s}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+span{background:var(--red)}
.switch input:checked+span::after{left:21px}
.setrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.setrow>div{flex:1}
.mask{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50}
.modal{width:min(560px,92vw);max-height:88vh;overflow:auto;background:var(--bg2);border:1px solid var(--line2);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.modal h3{margin:0 0 16px;font-size:16px}
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--bg2);border:1px solid var(--line2);border-left:3px solid var(--red);padding:11px 18px;border-radius:10px;box-shadow:var(--shadow);transition:.25s;z-index:60;font-size:13px}
#toast.on{opacity:1;transform:translateX(-50%)}
/* Gantt */
.gantt{position:relative;overflow-x:auto}
.g-row{display:grid;grid-template-columns:230px 1fr;align-items:center;border-bottom:1px solid var(--line);min-height:34px}
.g-name{padding:6px 10px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-name.lv1{padding-left:24px;color:var(--sub)}
.g-track{position:relative;height:34px;min-width:660px}
.g-bar{position:absolute;top:9px;height:16px;border-radius:5px;background:rgba(79,157,255,.25);overflow:hidden;border:1px solid rgba(79,157,255,.45)}
.g-bar i{display:block;height:100%;background:var(--blue)}
.g-bar.red{background:rgba(var(--red-rgb),.2);border-color:rgba(var(--red-rgb),.5)}.g-bar.red i{background:var(--red)}
.g-bar.org{background:rgba(255,176,32,.2);border-color:rgba(255,176,32,.5)}.g-bar.org i{background:var(--orange)}
.g-bar.grn{background:rgba(61,220,151,.2);border-color:rgba(61,220,151,.5)}.g-bar.grn i{background:var(--green)}
.g-ms{position:absolute;top:10px;width:13px;height:13px;transform:rotate(45deg);background:var(--purple);border-radius:2px}
.g-head{display:grid;grid-template-columns:230px 1fr;border-bottom:1px solid var(--line2);font-size:11px;color:var(--mute)}
.g-months{position:relative;height:36px;min-width:660px}
.g-months span{position:absolute;top:7px;transform:translateX(4px)}
.g-grid{position:absolute;top:0;bottom:0;border-left:1px dashed var(--line)}
.g-today{position:absolute;top:0;bottom:0;border-left:2px solid var(--red);z-index:2}
.g-today b{position:absolute;top:20px;left:4px;font-size:10.5px;color:var(--red);white-space:nowrap;background:var(--bg2);padding:0 3px;border-radius:3px}
/* Kanban */
.kb{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;overflow-x:auto}
.kcol{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;min-height:420px}
.kcol h4{margin:0 0 10px;font-size:13px;display:flex;align-items:center;gap:8px}
.kcol.over{border-color:var(--red);background:var(--redbg)}
.kcard{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:10px;margin-bottom:9px;cursor:grab}
.kcard:active{cursor:grabbing}
.kcard .tt{font-weight:600;margin-bottom:6px;line-height:1.4}
.kcard .mt{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--mute);flex-wrap:wrap}
/* participation heat */
.heat td.c{text-align:center;font-weight:600}
.h0{color:var(--mute)}.h1{background:rgba(79,157,255,.10)}.h2{background:rgba(79,157,255,.22)}.h3{background:rgba(255,176,32,.22)}.h4{background:rgba(var(--red-rgb),.28);color:#fff}
/* stage */
.stages{display:flex;gap:0;margin:6px 0 14px;overflow-x:auto}
.stg{flex:1;min-width:120px;position:relative;padding:12px 10px 12px 22px;background:var(--panel2);border:1px solid var(--line);font-size:12.5px;margin-right:-1px}
.stg:first-child{border-radius:10px 0 0 10px;padding-left:12px}.stg:last-child{border-radius:0 10px 10px 0}
.stg b{display:block;font-size:13px;margin-bottom:3px}
.stg.done{background:rgba(61,220,151,.10)}.stg.now{background:var(--redbg);border-color:rgba(var(--red-rgb),.45)}
.chk{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.chk input{accent-color:var(--red);width:16px;height:16px}
.alert b{white-space:nowrap}
.alert{display:flex;gap:10px;padding:10px 12px;border-radius:10px;background:var(--redbg);border:1px solid rgba(var(--red-rgb),.3);margin-bottom:8px;font-size:12.5px;line-height:1.5}
.alert.o{background:rgba(255,176,32,.10);border-color:rgba(255,176,32,.35)}
.alert.b{background:rgba(79,157,255,.10);border-color:rgba(79,157,255,.35)}
.alert.r{background:rgba(229,57,53,.10);border-color:rgba(229,57,53,.40)}
.list-li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.list-li:last-child{border-bottom:0}
.dday{font-weight:800;min-width:46px;font-size:12px}
pre.rep{white-space:pre-wrap;font-family:inherit;line-height:1.7;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px;margin:0;font-size:13px}
.demo-note{font-size:11px;color:var(--mute);margin-left:8px}
/* login */
#login{position:fixed;inset:0;display:grid;grid-template-columns:1.2fr 1fr;z-index:80;background:var(--bg)}
#login .art{background:#06080c;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:56px;color:#e9ecf2}
#login .art svg.bg{position:absolute;inset:0;width:100%;height:100%}
#login .art h2{font-size:38px;line-height:1.3;margin:0 0 12px;position:relative}
#login .art p{color:#9aa3b2;position:relative;margin:0;font-size:15px}
#login .form{display:grid;place-items:center;padding:30px;background:var(--bg2)}
#login .box{width:min(360px,90%)}
@media(max-width:860px){#login{grid-template-columns:1fr}#login .art{display:none}}

.hide{display:none!important}
.stagecards{display:grid;gap:12px}
.scard{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--panel2)}
.scard.now{border-color:rgba(var(--red-rgb),.5);background:var(--redbg)}
.scard.passed{opacity:.85}
.scard .sh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.scard .sh b{font-size:14.5px}
.scard .chk{padding:7px 0}
.big-choice{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.big-choice button{border:1px solid var(--line2);background:var(--panel2);color:var(--text);border-radius:12px;padding:12px;text-align:left;cursor:pointer;font-family:inherit}
.big-choice button b{display:block;font-size:14px;margin-bottom:4px}
.big-choice button span{font-size:11.5px;color:var(--sub)}
.big-choice button.on{border-color:var(--red);background:var(--redbg)}
.empty{padding:40px;text-align:center;color:var(--mute)}
.help{font-size:12px;color:var(--sub);background:var(--panel2);border:1px dashed var(--line2);border-radius:10px;padding:10px 12px;margin-bottom:12px;line-height:1.6}
.err{color:var(--red);font-size:12px;min-height:16px;margin:4px 0 8px}
.linkbtn{background:none;border:0;color:var(--sub);cursor:pointer;font-family:inherit;font-size:12.5px;padding:0}
.linkbtn:hover{color:var(--red)}
.user{cursor:pointer}
input.inp[type=number]{text-align:right}
.inline-inp{height:30px;margin:0;width:120px;display:inline-block}
.rail .logo img{width:40px;height:40px}
#login .box img.wm{height:52px}

.cmd svg{flex:none}
kbd{white-space:nowrap}
.dday{min-width:62px}
.cmd input{min-width:0}

/* ── 1.1: 환경설정·알림·AI·파일·모바일 ── */
.rail,.top,#view>*,.mask,.aipanel,.bellpanel{zoom:var(--zoom,1)}
body.compact .card{padding:11px}
body.compact .grid{gap:9px}
body.compact table.t td, body.compact table.t th{padding:6px 8px}
body.compact .view{padding:14px}
body.compact .kpi .v{font-size:22px;margin:3px 0 2px}
body.no-labels .rail{width:56px}
body.no-labels .rail a{width:44px;font-size:0;gap:0;padding:10px 0}
.icon-btn{position:relative}
.badge{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:9px;padding:1px 5px;min-width:17px;text-align:center}
.bellpanel{position:fixed;top:56px;right:90px;width:380px;max-height:70vh;overflow:auto;background:var(--bg2);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);padding:14px;z-index:40}
.bi{display:flex;gap:10px;align-items:flex-start;padding:9px 6px;border-bottom:1px solid var(--line);cursor:pointer;font-size:12.5px;line-height:1.5;border-radius:8px}
.bi:hover{background:var(--panel2)}
.bi.unread{background:var(--redbg)}
.licbar{background:rgba(255,176,32,.14);color:var(--orange);border-bottom:1px solid rgba(255,176,32,.3);padding:7px 22px;font-size:12.5px;font-weight:600}
.licbar.bad{background:var(--redbg);color:var(--red);border-color:rgba(var(--red-rgb),.35)}
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:35;display:flex;align-items:center;gap:7px;height:46px;padding:0 18px;border-radius:23px;border:0;cursor:pointer;color:#fff;font-weight:700;font-size:13.5px;background:linear-gradient(135deg,var(--red),var(--red2));box-shadow:0 8px 24px rgba(var(--red-rgb),.35)}
.ai-fab svg{width:19px;height:19px}
.aipanel{position:fixed;right:22px;bottom:80px;width:420px;height:min(620px,calc(100vh - 110px));z-index:36;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.aihead{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ailog{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ab{max-width:88%;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ab.ai{background:var(--panel2);border:1px solid var(--line);align-self:flex-start}
.ab.me{background:var(--redbg);border:1px solid rgba(var(--red-rgb),.3);align-self:flex-end}
.aiact{align-self:stretch;border:1px solid rgba(79,157,255,.45);background:rgba(79,157,255,.08);border-radius:12px;padding:10px 12px;font-size:13px}
.aiex{display:flex;flex-wrap:wrap;gap:6px}
.chipbtn{border:1px solid var(--line2);background:var(--panel2);color:var(--sub);border-radius:16px;padding:5px 11px;font-size:12px;cursor:pointer;font-family:inherit}
.chipbtn:hover{border-color:var(--red);color:var(--text)}
.aiform{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);align-items:flex-end}
.aiform textarea{flex:1;resize:none;border:1px solid var(--line2);background:var(--panel2);color:var(--text);border-radius:10px;padding:8px 10px;font-family:inherit;font-size:13px;outline:none}
.aiform textarea:focus{border-color:var(--red)}
.dots::after{content:'…';animation:dots 1.2s infinite}
@keyframes dots{0%{content:''}33%{content:'.'}66%{content:'..'}}
.fchip{border:1px solid var(--line2);background:var(--panel2);color:var(--sub);border-radius:6px;padding:1px 7px;font-size:11px;cursor:pointer;font-family:inherit;margin-right:6px;white-space:nowrap}
.fchip:hover{color:var(--text);border-color:var(--blue)}
.drop{border:1.5px dashed var(--line2);border-radius:12px;padding:16px;text-align:center;color:var(--mute);font-size:12.5px;margin-bottom:12px}
.drop.over{border-color:var(--red);background:var(--redbg);color:var(--text)}
.help-doc{line-height:1.8;max-width:980px}
.help-doc h2{font-size:17px;margin:22px 0 8px;color:var(--red)}
.help-doc h2:first-child{margin-top:0}
.help-doc h3{font-size:14px;margin:14px 0 4px}
.help-doc table{border-collapse:collapse;width:100%;font-size:12.5px;margin:6px 0}
.help-doc td,.help-doc th{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left}
.help-doc kbd{font-size:11px}

/* 휴대폰·작은 화면 */
@media (max-width:760px){
  #app{flex-direction:column-reverse;height:100dvh}
  .rail{width:100%!important;height:60px;flex-direction:row;padding:4px 6px;gap:2px;overflow-x:auto;border-right:0;border-top:1px solid var(--line)}
  .rail .logo{display:none}
  .rail a{min-width:56px;width:auto;flex:1;padding:6px 0;font-size:10px!important}
  .rail a.on::before{left:12px;right:12px;top:-4px;bottom:auto;width:auto;height:3px}
  .top{padding:0 12px;gap:8px}
  .top .prod,.cmd,.user div:not(.avatar){display:none}
  .view{padding:12px}
  .head{align-items:flex-start}
  .head .seg{overflow-x:auto;max-width:100%}
  .g2,.g3,.g4,.g21{grid-template-columns:minmax(0,1fr)!important}
  .kb{grid-template-columns:repeat(4,minmax(240px,1fr))}
  .stages{flex-wrap:nowrap}
  .ai-fab{bottom:72px;right:12px;height:42px;padding:0 14px}
  .ai-fab span{display:none}
  .aipanel{left:8px;right:8px;width:auto;bottom:122px;height:calc(100dvh - 190px)}
  .bellpanel{left:8px;right:8px;width:auto}
  .modal{width:94vw;padding:16px}
  .big-choice{grid-template-columns:1fr}
  .scard .sh{gap:6px}
  table.t td,table.t th{padding:7px 6px}
}
.aihead b,.aihead .linkbtn{white-space:nowrap}
.aihead .mute{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:760px){.head .seg{flex-wrap:wrap}}

/* ── 1.1.1: 통합검색 · 메뉴 너비 조절 ── */
.cmd{position:relative}
.srch{position:absolute;top:42px;left:0;right:0;min-width:420px;max-height:62vh;overflow:auto;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);z-index:45;padding:6px}
.sg{font-size:11px;font-weight:700;color:var(--mute);padding:8px 10px 4px;letter-spacing:.04em}
.si{padding:8px 10px;border-radius:8px;cursor:pointer}
.si.on{background:var(--redbg)}
.si .st{color:var(--text);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si .ss{color:var(--mute);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si mark{background:rgba(var(--red-rgb),.25);color:inherit;border-radius:3px;padding:0 1px}
.sempty{padding:18px;text-align:center;color:var(--mute);font-size:12.5px}
.shint{font-size:10.5px;color:var(--mute);text-align:right;padding:6px 10px 2px;border-top:1px solid var(--line);margin-top:4px}
:root{--rail-w:72px}
.rail{width:var(--rail-w)}
body.no-labels .rail{width:var(--rail-w)}
.rail a{width:calc(var(--rail-w) - 12px)}
.rail-grip{width:6px;margin-left:-3px;margin-right:-3px;cursor:col-resize;position:relative;z-index:6;flex:none;touch-action:none}
.rail-grip::after{content:"";position:absolute;top:0;bottom:0;left:2px;width:2px;background:transparent;transition:background .15s}
.rail-grip:hover::after,.rail-grip:focus::after,body.resizing .rail-grip::after{background:var(--red)}
body.resizing{cursor:col-resize;user-select:none}
body.rail-wide .rail{align-items:stretch;padding:12px 8px}
body.rail-wide .rail .logo{display:flex;align-items:center;gap:8px;padding:0 6px}
body.rail-wide .rail .logo::after{content:"ASTRAN PMS";font-weight:800;font-size:13px;letter-spacing:.04em;color:var(--text);white-space:nowrap}
body.rail-wide .rail a{width:auto;flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 12px;font-size:13px;white-space:nowrap;overflow:hidden}
body.rail-wide .rail a.on::before{left:-8px}
body.rail-narrow .rail a{font-size:0;gap:0;padding:10px 0}
@media (max-width:760px){.rail-grip{display:none}.srch{position:fixed;top:56px;left:8px;right:8px;min-width:0}}
.top{position:relative;z-index:30}
/* 휴대폰 검색 */
.ms-btn,.ms-x{display:none}
@media (max-width:760px){
  .ms-btn{display:grid}
  body.msearch .cmd{display:flex!important;position:fixed;top:8px;left:8px;right:8px;width:auto;height:44px;z-index:60;background:var(--bg2);border-color:var(--red);box-shadow:var(--shadow)}
  body.msearch .cmd kbd{display:none}
  body.msearch .cmd input{font-size:16px}
  body.msearch .ms-x{display:block;border:0;background:none;color:var(--sub);font-family:inherit;font-size:13px;cursor:pointer;padding:0 4px;white-space:nowrap}
  body.msearch::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55}
  body.msearch .srch{top:58px;z-index:60}
  .srch .shint{display:none}
}
.main{min-height:0}
@media (max-width:760px){#app{height:100dvh;overflow:hidden}.main{flex:1;min-height:0;overflow:hidden}.view{flex:1;min-height:0;-webkit-overflow-scrolling:touch}}

/* ── 1.2 사용자 화면 꾸미기 ── */
body.font-system{--font:system-ui}
body.font-serif{--font:"Noto Serif KR","Nanum Myeongjo","Batang",serif}
body.r-square .card,body.r-square .btn,body.r-square .inp,body.r-square .seg,body.r-square .icon-btn,body.r-square .cmd{border-radius:4px}
body.r-round .card{border-radius:22px}body.r-round .btn,body.r-round .inp,body.r-round .icon-btn,body.r-round .cmd{border-radius:18px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 2px rgba(0,0,0,.15)}
.swatch.on{border-color:var(--text);outline:2px solid var(--bg2);outline-offset:-4px}
.swatch-pick{width:38px;height:30px;border:1px solid var(--line2);border-radius:8px;background:none;padding:2px;cursor:pointer}
.range{display:flex;align-items:center;gap:10px}.range input{width:200px;accent-color:var(--red)}.range b{min-width:46px;text-align:right}
.preview-box{border:1px dashed var(--line2);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mlist{display:flex;flex-direction:column;gap:6px;max-width:460px}
.mitem{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.mitem.off{opacity:.45}.mitem .nm{flex:1}.mitem svg{width:18px;height:18px}
.mini{width:28px;height:28px;border-radius:7px;border:1px solid var(--line2);background:var(--bg2);color:var(--sub);cursor:pointer;font-size:13px;display:grid;place-items:center;padding:0}
.mini:hover{border-color:var(--red);color:var(--text)}.mini:disabled{opacity:.3;cursor:default}
/* 상황판 위젯 */
.dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dgrid>.wd{min-width:0;position:relative}
.wd.w1{grid-column:span 1}.wd.w2{grid-column:span 2}.wd.w3{grid-column:span 3}.wd.w4{grid-column:span 4}
.wd>.card{height:100%}
.wd.hid{display:none}
.dedit .wd.hid{display:block;opacity:.38}
.dedit .wd>.card{outline:2px dashed rgba(var(--red-rgb),.45);outline-offset:-2px;cursor:grab}
.dedit .wd.drag>.card{opacity:.4}.dedit .wd.over>.card{outline-style:solid;outline-color:var(--red)}
.wbar{display:none;position:absolute;top:8px;right:8px;z-index:3;gap:4px;background:var(--bg2);border:1px solid var(--line2);border-radius:9px;padding:3px;box-shadow:var(--shadow)}
.dedit .wbar{display:flex}
.wbar .wl{font-size:11px;color:var(--sub);padding:0 4px;align-self:center;white-space:nowrap}
.editbar{display:none;position:sticky;top:0;z-index:5;margin-bottom:12px;padding:10px 14px;border-radius:12px;background:var(--redbg);border:1px solid rgba(var(--red-rgb),.35);align-items:center;gap:8px;flex-wrap:wrap}
.dedit .editbar{display:flex}
@media (max-width:1100px){.wd.w1{grid-column:span 2}.wd.w3{grid-column:span 4}}
@media (max-width:760px){.dgrid{grid-template-columns:minmax(0,1fr)}.wd.w1,.wd.w2,.wd.w3,.wd.w4{grid-column:span 1}.wbar .wsz{display:none}}
/* 로그아웃 버튼 */
.logout-btn{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--sub);cursor:pointer;font-family:inherit;font-size:12.5px;white-space:nowrap}
.logout-btn:hover{border-color:var(--red);color:var(--text)}.logout-btn svg{width:16px;height:16px}
@media (max-width:760px){.logout-btn span{display:none}.logout-btn{padding:0;width:36px;justify-content:center}}
@media (max-width:760px){.list-li>span.mute.num:last-child{display:none}}
/* 1.3 단독 화면(결제·운영자·약관) */
body.solo{overflow:auto}
.solo-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.solo-card{width:min(520px,100%);padding:26px}
.solo-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.solo-head .prod{font-size:11px;color:var(--red);font-weight:700;letter-spacing:.08em;border:1px solid rgba(var(--red-rgb),.35);border-radius:6px;padding:2px 6px}
.doc{max-width:860px;margin:0 auto;padding:32px 22px 60px;line-height:1.8}
.doc h1{font-size:22px}.doc h2{font-size:16px;margin-top:26px;color:var(--red)}.doc table{border-collapse:collapse;width:100%}.doc td,.doc th{border:1px solid var(--line2);padding:6px 8px;font-size:13px;text-align:left;vertical-align:top}
.ops-top{display:flex;align-items:center;gap:12px;padding:12px 22px;border-bottom:1px solid var(--line);background:var(--bg2)}
.ops-main{padding:20px 22px;max-width:1500px;margin:0 auto}