@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:grid;grid-template-columns:var(--railw,72px) minmax(0,1fr);height:100vh;transition:grid-template-columns .2s}
.icon-btn.mshow{display:none}
/* 왼쪽 메뉴: 공통 부품 astran-rail.css(CSI 메뉴와 같은 동작). 여기서는 PMS 배경색만 */
.rail{background:var(--bg2)}
/* 메뉴를 넓게 써도 위쪽 줄이 넘치지 않게: 검색창이 먼저 줄어들고 이름은 줄바꿈하지 않음 */
.top .cmd{flex:0 1 300px;min-width:170px}
.user>div:last-child{white-space:nowrap}
body.raildrag #app{transition:none}
.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}
#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·파일·모바일 ── */
.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}
.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:768px){
  #app{grid-template-columns:minmax(0,1fr)!important;height:100dvh}
  .icon-btn.mshow{display:grid}
  .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:76px;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:768px){.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}
body.resizing{cursor:col-resize;user-select:none}
@media (max-width:768px){.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:768px){
  .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:768px){#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:768px){.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:768px){.logout-btn span{display:none}.logout-btn{padding:0;width:36px;justify-content:center}}
@media (max-width:768px){.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}
/* 도움말: 위쪽 도구줄 + 사용자 매뉴얼(iframe) */
.view.vhelp{padding:0!important;overflow:hidden;display:flex}
.view.vhelp>.helpwrap{zoom:1;flex:1;min-height:0;display:flex;flex-direction:column}
.helpbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--bg2)}
.helpbar .mute{font-size:12px}
.helpbar a.btn,a.btn{text-decoration:none}
.helpwrap iframe{flex:1;width:100%;min-height:0;border:0;background:#fff}
@media (max-width:768px){.helpbar .mute{display:none}.helpbar{padding:8px 10px}}
/* 2026-11-13 화면 전수 점검 보완 */
/* 한글 줄바꿈을 낱말 단위로(…적용됩니
다, 로
그인합니다 같은 끊김 방지), 너무 긴 낱말만 끊음 */
body{word-break:keep-all;overflow-wrap:break-word}
/* 로그인 로고: ASTRAN PMS 한 줄 + ASTRAN 시리즈 */
#login .brand{display:flex;align-items:center;gap:12px}
#login .brand svg{width:50px;height:50px;flex:none;color:var(--text)}
#login .brand .bn{font-size:25px;font-weight:800;letter-spacing:.05em;line-height:1.15;white-space:nowrap}
#login .brand .bn span{color:var(--red)}
#login .brand .bs{font-size:12px;color:var(--sub);margin-top:3px;letter-spacing:.02em}
/* 공통 idmemo.js의 '이 PC에 아이디 기억' 줄: 마진 겹침에 기대지 않고 입력칸 아래 8px·비밀번호 칸 위 12px로 고정 */
#loginBox label.f + label:not(.f){margin:-4px 0 12px!important;line-height:1.4}
/* 앱 위쪽 제품 표시: ASTRAN PMS */
.top .prod{white-space:nowrap}
/* 오른쪽 아래 AI 도우미 단추가 화면 맨 아래 내용을 가리지 않게 여백 */
.view:not(.vhelp){padding-bottom:84px}
/* 목록 줄: 가운데 글이 줄어들 수 있게(휴대폰에서 단추·진도 % 가 카드 밖으로 밀리던 문제) */
.list-li .grow{min-width:0}
/* 카드 제목 오른쪽 단추가 많으면 다음 줄로 */
.card h3{flex-wrap:wrap;row-gap:8px}
.card h3 .r{flex-wrap:wrap;justify-content:flex-end}
/* 단독 화면(비밀번호 다시 정하기·메일 확인·결제) 머리: ASTRAN 시리즈 */
.solo-head b span{color:var(--red)}
.solo-head .series{font-size:11.5px;color:var(--mute);margin-left:2px}
@media (max-width:768px){.view:not(.vhelp){padding-bottom:80px}}
/* 1.6 관리자 화면 표준(ASTRAN 시리즈): 탭 건수 배지 · 키 가림 칸 · 왼쪽 메뉴 맨 아래 묶음 */
.seg .cnt{display:inline-block;min-width:18px;height:18px;line-height:18px;border-radius:9px;background:#ff3b5c;color:#fff;font-size:11px;font-weight:800;padding:0 5px;margin-left:4px;text-align:center}
.seg button{white-space:nowrap}
.pwbox{position:relative}
.pwbox .inp{padding-right:40px;width:100%}
.pwbox .eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:30px;border:0;background:none;cursor:pointer;opacity:.7;font-size:14px;border-radius:6px}
.pwbox .eye:hover{opacity:1;background:var(--panel2)}
.section-sub a{color:var(--red)}
/* 항목·내용 2열 표: 내용 칸은 줄바꿈(휴대폰 가로 넘침 방지) */
.t.kv td{white-space:normal}
.t.kv td:first-child{white-space:nowrap;width:1%}
/* 휴대폰: 위쪽 제목은 메뉴 짧은 이름(예: 관리자)으로, 넘치면 말줄임 */
@media (max-width:768px){.top h1[data-short]{font-size:0;min-width:0;overflow:hidden;text-overflow:ellipsis}.top h1[data-short]::after{content:attr(data-short);font-size:16px}}
/* 1.9.4 SW영업 거래 목록: 머리줄 눌러 정렬, 묶어 보기 소계 줄 */
table.t th.sl-th{cursor:pointer;user-select:none}
table.t th.sl-th:hover{color:var(--text)}
table.t th.sl-th.on{color:var(--red)}
table.t th .sl-ar{margin-left:4px;font-size:10px;opacity:.45}
table.t th.sl-th.on .sl-ar{opacity:1}
table.t tr.sl-grp td{background:var(--panel2);border-top:1px solid var(--line2);padding-top:8px;padding-bottom:8px}
.sl-pick select.inp{margin-top:0;height:34px}
.sl-pick{white-space:nowrap}
/* 1.9.5 SW영업: 목록에서 바로 고치기, 여러 줄 한꺼번에, 입금 예정 */
table.t th.sl-ck,table.t td.sl-ck{width:30px;padding-right:0;text-align:center}
table.t td.sl-ck input,table.t th.sl-ck input{width:15px;height:15px;accent-color:var(--red);cursor:pointer}
table.t tr.sl-on td{background:var(--redbg)}
.sl-q{cursor:pointer;border-bottom:1px dashed transparent;border-radius:3px;padding:1px 2px}
.sl-q:hover{border-bottom-color:var(--sub);background:var(--panel2)}
.sl-qi.inp{margin-top:0;height:30px;width:auto;min-width:96px;padding:0 6px;font-size:12.5px}
.sl-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;margin-bottom:8px;border:1px solid var(--red);border-radius:10px;background:var(--redbg);font-size:13px}
.sl-bulk select.inp{margin-top:0;height:32px;width:auto;min-width:130px}
table.t tr.sl-sub>td{background:var(--panel2);padding:6px 10px 10px}
table.t tr.sl-sub table.t td{padding:6px 8px}
table.t tr.sl-now td:first-child{box-shadow:inset 3px 0 0 var(--red)}
/* 1.9.7 고객사 전용판(PMS_BRAND) 로그인 로고 */
#login .brand.cust{flex-direction:column;align-items:flex-start;gap:6px}
#login .brand.cust .blogo{height:46px;width:auto;max-width:100%}
#login .brand.cust .bs{font-size:13px;color:var(--sub);margin-top:2px}
#login .brand.cust .pwd{font-size:11px;color:var(--mute);letter-spacing:.2px}
.solo-head img.cust{height:26px;width:auto}
.solo-head .pwd{font-size:11px;color:var(--mute);margin-left:auto}