/* Layout: 첨부 이미지 톤. 진회색 사이드바 + 진회색 상단바, 흰 본문, 오른쪽 연회색 활동 패널. 포인트는 청록, 주요 버튼은 코랄. 단일 테마로 고정. */
:root{
  color-scheme:light;
  --side:#2d3237; --side-hi:#363c42; --side-txt:#a9b1b8; --side-head:#6d767e; --side-line:#3a4046;
  --top:#393e44; --top-txt:#e9edf0;
  --bg:#ffffff; --panel:#f3f4f5; --sunk:#f6f7f8; --line:#e5e8ea; --ink:#40474e; --ink-strong:#2b3136; --muted:#9aa2a9;
  --teal:#6b2fa3; --teal-d:#55208a; --teal-soft:#f1eaf8; --coral:#f0604d; --coral-d:#d94d3b;
  --green:#6dcf96; --navy:#4c5a86; --bar:#e3e7ea; --bar-future:#eff1f3;
  --t-host:#1f80c4; --t-mail:#e08a3c; --t-main:#7b67b0;
  --crit:#e0473a; --warn:#d98a14; --ok:#3aa86b;
  --paper-line:#777;
  --f:"Open Sans","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:13.5px;line-height:1.55;font-weight:400}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
a{color:var(--teal-d)}

.app{display:grid;grid-template-columns:216px minmax(0,1fr);min-height:100%}
/* ---- sidebar ---- */
.side{background:var(--side);color:var(--side-txt);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{background:var(--teal);color:#fff;height:68px;display:flex;align-items:center;justify-content:center;position:relative;flex:none}
.logo b{font-family:"Open Sans",sans-serif;font-weight:300;font-size:30px;letter-spacing:-1px}
.logo small{position:absolute;right:12px;bottom:8px;font-size:10px;opacity:.8}
.upd{background:var(--teal-d);color:#fff;font-size:11.5px;padding:7px 14px;display:flex;justify-content:space-between;align-items:center;border:0;width:100%;cursor:pointer;text-align:left}
.upd:hover{filter:brightness(1.07)}
.nav{padding:8px 0 20px;flex:1}
.nav h6{margin:16px 0 4px;padding:0 18px;font-size:11px;font-weight:400;color:var(--side-head);letter-spacing:.04em}
.nav button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--side-txt);padding:7px 18px;font-size:12.5px;cursor:pointer;text-align:left;letter-spacing:.02em}
.nav button:hover{color:#fff;background:var(--side-hi)}
.nav button[aria-current="page"]{color:#fff}
.nav button[aria-current="page"] svg{color:var(--teal)}
.nav svg{width:15px;height:15px;flex:none}
.nav .bdg{margin-left:auto;background:var(--coral);color:#fff;border-radius:50%;width:18px;height:18px;font-size:10.5px;display:grid;place-items:center}
.nav .dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--green)}
.side-foot{border-top:1px solid var(--side-line);display:grid;grid-template-columns:1fr 1fr;flex:none}
.side-foot span{padding:14px;text-align:center;font-size:11px;color:var(--side-head)}
.side-foot span+span{border-left:1px solid var(--side-line)}

/* ---- top bar ---- */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--top);color:var(--top-txt);height:68px;display:flex;align-items:stretch;position:sticky;top:0;z-index:20}
.topbar h1{margin:0;font-weight:400;font-size:17px;letter-spacing:.06em;display:flex;align-items:center;padding:0 28px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar h1 small{font-size:11px;color:#9aa3ab;margin-left:12px;letter-spacing:.12em}
.tb-btn{width:68px;display:grid;place-items:center;background:none;border:0;border-left:1px solid #454b52;color:#c9d0d5;cursor:pointer;position:relative}
.tb-btn:hover{color:#fff}
.tb-btn svg{width:20px;height:20px}
.tb-btn .bdg{position:absolute;top:16px;right:16px;background:var(--side);border:1px solid #6d767e;border-radius:50%;width:17px;height:17px;font-size:10px;display:grid;place-items:center;color:#fff}
.tb-btn.coral{background:var(--coral);border-left:0;color:#fff}
.tb-btn.coral:hover{background:var(--coral-d)}
.burger{display:none}

/* ---- content ---- */
.content{flex:1;display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.content.with-rail{grid-template-columns:minmax(0,1fr) 270px}
.page{padding:26px 28px 60px;min-width:0}
.rail{background:var(--panel);padding:22px 0 30px;border-left:1px solid var(--line);min-width:0}
.notice{font-size:12px;color:var(--muted);border:1px dashed var(--line);padding:7px 12px;margin-bottom:20px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.sec-h h2{margin:0;font-size:14px;font-weight:400;color:var(--ink-strong);letter-spacing:.08em}
.sec-h p{margin:0;font-size:12px;color:var(--muted)}
.block{margin-bottom:34px}
.pills{display:flex;gap:4px}
.pill{border:0;background:none;color:var(--muted);border-radius:999px;padding:3px 13px;font-size:12px;cursor:pointer}
.pill[aria-pressed="true"]{background:var(--coral);color:#fff}
.pill:hover:not([aria-pressed="true"]){color:var(--ink)}

/* chart */
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto}
.chart text{font-family:var(--f);font-size:11px;fill:var(--muted)}
.chart .cur text.lab{fill:var(--teal-d);font-weight:600}
.tip{position:absolute;background:#3b4148;color:#e9edf0;width:236px;font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.18);pointer-events:none;z-index:5}
.tip header{display:flex;justify-content:space-between;padding:9px 14px;border-bottom:1px solid #4c535a;letter-spacing:.06em}
.tip header b{font-weight:600}
.tip header span{color:var(--teal)}
.tip .body{padding:9px 14px}
.tip .body div{display:flex;justify-content:space-between;gap:8px;color:#c4cbd0;line-height:1.7}
.tip .body div span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tip footer{border-top:1px solid #4c535a;padding:7px 14px;color:var(--teal);font-size:11px;letter-spacing:.06em}

/* rings */
.rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:center}
.ring{display:flex;flex-direction:column;align-items:center;gap:10px}
.ring svg{width:150px;max-width:100%;height:auto}
.ring .big{font-family:"Open Sans",sans-serif;font-weight:300;font-size:40px;fill:var(--ink)}
.ring .den{font-family:"Open Sans",sans-serif;font-weight:300;font-size:17px;fill:var(--ink)}
.ring .cap{font-size:12px;fill:var(--muted)}
.ring .nm{font-size:12px;letter-spacing:.1em}

/* rail activity */
.rail h2{margin:0 0 16px;padding:0 22px;font-size:13px;font-weight:400;letter-spacing:.1em;color:var(--ink-strong)}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:30px;top:0;bottom:0;width:1px;background:#d5dadd}
.tl li{position:relative;padding:10px 18px 12px 48px;font-size:12px;color:var(--muted)}
.tl li::before{content:"";position:absolute;left:25px;top:14px;width:9px;height:9px;border-radius:50%;background:var(--panel);border:1px solid #c5ccd0}
.tl .when{font-size:10.5px;letter-spacing:.06em;color:#a8b0b6}
.tl .what{font-size:12px;color:var(--ink-strong);font-weight:600;letter-spacing:.03em;margin:1px 0}
.tl .lnk{background:none;border:0;padding:0;color:var(--teal-d);text-decoration:underline;cursor:pointer;font-size:12px}
.tl li.hi{background:var(--teal);color:#f6effc}
.tl li.hi::before{background:#fff;border:3px solid var(--teal-d);width:13px;height:13px;left:23px;top:13px;box-shadow:0 0 0 2px #fff}
.tl li.hi .when{color:#efe2fa}
.tl li.hi .what{color:#fff}
.tl li.hi .lnk{color:#fff}

/* tables */
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--line)}
table.list{width:100%;border-collapse:collapse;min-width:760px}
.list th{text-align:left;font-size:11.5px;font-weight:400;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;letter-spacing:.04em}
.list th[data-k]{cursor:pointer}
.list th[data-k]:hover{color:var(--ink)}
.list td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.list .r{text-align:right}
.list td.num{white-space:nowrap}
.list tbody tr.click{cursor:pointer}
.list tbody tr.click:hover td{background:var(--sunk)}
.cl b{display:block;font-weight:600;color:var(--ink-strong)}
.cl span{font-size:11.5px;color:var(--muted)}
.ex{font-size:10px;color:var(--muted);border:1px solid var(--line);padding:0 4px;margin-left:6px;font-weight:400;vertical-align:1px;border-radius:2px}
.type{display:inline-flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}
.type::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.type.hosting{color:var(--t-host)} .type.webmail{color:var(--t-mail)} .type.maint{color:var(--t-main)}
.st{display:inline-block;font-size:11.5px;white-space:nowrap;padding:2px 9px;border-radius:999px;border:1px solid currentColor}
.st.crit{color:var(--crit)} .st.warn{color:var(--warn)} .st.info{color:var(--teal-d)} .st.ok{color:var(--ok)} .st.idle{color:var(--muted)}
.dd{font-size:11px;color:var(--muted)}
.dd.hot{color:var(--crit)}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px;cursor:pointer;font-size:12px;display:inline-flex;gap:6px;align-items:center;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.chip .n{opacity:.7}
.search{margin-left:auto;border:1px solid var(--line);border-radius:3px;padding:6px 10px;width:220px;max-width:100%;min-width:0;background:#fff}
.btn{border:1px solid var(--line);background:#fff;border-radius:3px;padding:7px 14px;cursor:pointer;font-size:12.5px;white-space:nowrap;color:var(--ink)}
.btn:hover{border-color:var(--ink)}
.btn.teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.teal:hover{background:var(--teal-d);border-color:var(--teal-d)}
.btn.coral{background:var(--coral);border-color:var(--coral);color:#fff}
.btn.coral:hover{background:var(--coral-d)}
.btn.sm{padding:4px 10px;font-size:12px}

/* client cards */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.ccard{border:1px solid var(--line);background:#fff;padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:10px;text-align:left}
.ccard:hover{border-color:var(--teal)}
.ccard .t{display:flex;justify-content:space-between;gap:8px;align-items:start}
.ccard .t b{font-size:15px;font-weight:600;color:var(--ink-strong)}
.ccard .meta{font-size:12px;color:var(--muted);line-height:1.6}
.ccard .svc{display:flex;flex-wrap:wrap;gap:4px 12px}
.ccard .ft{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:9px;font-size:12px}
.ccard .ft b{font-weight:600;color:var(--ink-strong)}
.view-tg{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.view-tg button{border:0;background:#fff;padding:5px 10px;cursor:pointer;font-size:12px;color:var(--muted)}
.view-tg button[aria-pressed="true"]{background:var(--side);color:#fff}

/* client detail */
.dhead{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.dhead .who{display:flex;gap:14px;align-items:center;min-width:0}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:300;flex:none}
.dhead h2{margin:0;font-size:20px;font-weight:600;color:var(--ink-strong)}
.dhead p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.dhead .acts{display:flex;gap:8px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);margin-bottom:24px}
.kpis div{padding:14px 18px;display:flex;flex-direction:column;gap:2px}
.kpis div+div{border-left:1px solid var(--line)}
.kpis span{font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.kpis b{font-family:"Open Sans",sans-serif;font-weight:300;font-size:24px;color:var(--ink-strong)}
.kpis b small{font-size:12px;color:var(--muted);margin-left:3px}
.dtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.dtabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 14px;cursor:pointer;color:var(--muted);white-space:nowrap;letter-spacing:.03em}
.dtabs button[aria-selected="true"]{color:var(--ink-strong);border-bottom-color:var(--teal)}
.info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.info dl{margin:0}
.info .row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.info dt{color:var(--muted);font-size:12px}
.info dd{margin:0;color:var(--ink-strong);overflow-wrap:anywhere}
.info dd.none{color:#c0c6cb}
.memo textarea{width:100%;min-height:120px;border:1px solid var(--line);border-radius:3px;padding:10px;resize:vertical}
.memo-log{list-style:none;padding:0;margin:14px 0 0}
.memo-log li{border-left:2px solid var(--teal);padding:4px 12px;margin-bottom:10px;font-size:12.5px}
.memo-log li span{display:block;color:var(--muted);font-size:11px}

/* forms */
.form{max-width:860px}
.fs{border:0;padding:0;margin:0 0 26px}
.fs legend{font-size:13px;letter-spacing:.08em;color:var(--ink-strong);padding:0 0 10px;border-bottom:1px solid var(--line);width:100%;margin-bottom:14px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.fgrid .w2{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);min-width:0}
.f em{color:var(--coral);font-style:normal}
.f input,.f select,.f textarea{border:1px solid var(--line);border-radius:3px;padding:8px 10px;font-size:13.5px;color:var(--ink-strong);background:#fff;min-width:0}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--teal);outline:none}
.f .err{color:var(--crit);font-size:11.5px;min-height:0}
.f.bad input{border-color:var(--crit)}
.chk{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink);margin-bottom:12px;cursor:pointer}
.chk input{accent-color:var(--teal);width:16px;height:16px}
.factions{display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:16px}
.inline-form{background:var(--sunk);border:1px solid var(--line);padding:16px;margin-bottom:16px}

/* schedule */
.months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mon{border:1px solid var(--line);display:flex;flex-direction:column}
.mon header{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px;border-bottom:1px solid var(--line)}
.mon header b{font-weight:400;letter-spacing:.06em;color:var(--ink-strong)}
.mon header span{font-size:11.5px;color:var(--muted)}
.mon.now{border-top:3px solid var(--teal)}
.mon ul{list-style:none;margin:0;padding:6px 0}
.mon li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 14px;font-size:12.5px}
.mon li .d{color:var(--muted);font-size:11.5px}
.mon li .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mon .empty{padding:14px;color:var(--muted);font-size:12px}

/* invoice */
.inv-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:14px}
.inv-tools .acts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.steps{display:flex;flex-wrap:wrap;margin:0 0 14px;padding:0;list-style:none;font-size:12px;border:1px solid var(--line)}
.steps li{padding:7px 14px;color:var(--muted);flex:1;text-align:center;min-width:110px}
.steps li+li{border-left:1px solid var(--line)}
.steps li.done{color:var(--teal-d)}
.steps li.on{background:var(--teal);color:#fff}
.paper-wrap{overflow-x:auto;background:var(--panel);padding:20px;border:1px solid var(--line)}
.paper{background:#fff;color:#111;width:720px;margin:0 auto;padding:36px 40px;box-shadow:0 1px 4px rgba(0,0,0,.12);font-size:12.5px;line-height:1.5;font-family:"Noto Sans KR",sans-serif}
.paper h4{text-align:center;font-size:26px;letter-spacing:.6em;margin:0 0 22px;font-weight:700;padding-left:.6em}
.paper table{border-collapse:collapse;width:100%}
.paper td,.paper th{border:1px solid var(--paper-line);padding:5px 8px;color:#111}
.paper th{background:#f1f1f1;font-weight:500;white-space:nowrap}
.paper .hd{display:grid;grid-template-columns:1fr 1.15fr;gap:12px;margin-bottom:18px}
.paper .lbl{background:#f1f1f1;width:76px;text-align:center;white-space:nowrap}
.paper .vert{width:24px;text-align:center;background:#f1f1f1;line-height:1.3}
.paper .amt{font-weight:700}
.paper .sec{font-weight:700;margin:16px 0 6px;border-bottom:2px solid #111;padding-bottom:3px}
.paper .r{text-align:right}
.paper .c{text-align:center}
.paper .tot td,.paper .tot th{font-weight:700}
.paper .note{font-size:11px;color:#333;margin:0;padding:0;list-style:none}

/* plan */
.plan{max-width:900px}
.plan h2{font-size:15px;font-weight:600;color:var(--ink-strong);margin:30px 0 10px;letter-spacing:.02em}
.plan p,.plan li{max-width:74ch}
.plan ul,.plan ol{padding-left:20px}
.plan li{margin-bottom:4px}
.plan .lead{color:var(--muted);margin-top:0}
.callout{border-left:3px solid var(--coral);background:#fdf0ee;padding:10px 14px;margin:12px 0}
.callout.info{border-left-color:var(--teal);background:var(--teal-soft)}
.callout b{display:block;margin-bottom:2px;color:var(--ink-strong)}
.spec-wrap{overflow-x:auto}
.spec{width:100%;border-collapse:collapse;min-width:640px;font-size:13px}
.spec th,.spec td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.spec th{background:var(--sunk);font-size:12px;color:var(--muted);font-weight:400}
.spec td:first-child{white-space:nowrap;font-weight:600;color:var(--ink-strong)}
.plan code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--sunk);padding:1px 5px}
pre.code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--side);color:#d5dbe0;padding:14px 16px;overflow-x:auto;line-height:1.6}
.phase{display:grid;grid-template-columns:90px minmax(0,1fr);gap:4px 16px;border-top:1px solid var(--line);padding:10px 0}
.phase .w{color:var(--teal-d);font-weight:600}
.phase b{display:block;color:var(--ink-strong)}
.phase span{color:var(--muted);font-size:13px}
.diagram{border:1px solid var(--line);padding:12px;overflow-x:auto}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--side);color:#fff;padding:10px 18px;font-size:13px;max-width:calc(100% - 32px);z-index:50;border-left:3px solid var(--teal)}
.scrim{display:none}

@media (max-width:1100px){.content.with-rail{grid-template-columns:minmax(0,1fr)}.rail{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:240px;z-index:40;transform:translateX(-100%);transition:transform .2s}
  .app.open .side{transform:none}
  .app.open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:30}
  .burger{display:grid}
  .topbar h1{padding:0 14px}
  .topbar h1 small{display:none}
  .page{padding:20px 16px 50px}
  .rings{grid-template-columns:minmax(0,1fr)}
  .months{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis div:nth-child(3){border-left:0}
  .kpis div:nth-child(n+3){border-top:1px solid var(--line)}
  .info,.fgrid{grid-template-columns:minmax(0,1fr)}
  .tb-btn{width:56px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== v0.3 additions ===== */
:root{--t-domain:#3b8f5c; --t-ssl:#c59a12; --t-etc:#7d8790; --coral-soft:#fdecea; --gold-soft:#fbf3dc}
.type.ssl{color:var(--t-ssl)} .type.domain{color:var(--t-domain)} .type.etc{color:var(--t-etc)}
.st.term{color:#8b949b;background:#eef0f1;border-color:#d4d9dc}
tr.dim td{color:#a3abb1}
tr.dim .cl b{color:#a3abb1}

.alert-strip{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;background:var(--coral-soft);border-left:3px solid var(--coral);padding:10px 14px;margin-bottom:22px;cursor:pointer;border-top:0;border-right:0;border-bottom:0;width:100%;text-align:left;font-size:13px;color:var(--ink-strong)}
.alert-strip b{color:var(--coral-d)}
.alert-strip span.go{margin-left:auto;color:var(--coral-d);font-size:12px}

.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);margin-bottom:30px}
.kpi-row>div{padding:16px 20px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi-row>div+div{border-left:1px solid var(--line)}
.kpi-row .l{font-size:11.5px;color:var(--muted);letter-spacing:.06em}
.kpi-row .v{font-family:"Open Sans",sans-serif;font-weight:300;font-size:30px;color:var(--ink-strong);line-height:1.2}
.kpi-row .v small{font-size:13px;color:var(--muted);margin-left:3px}
.kpi-row .f{font-size:11.5px;color:var(--muted)}
.kpi-row .crit .v{color:var(--crit)}
.kpi-row .accent .v{color:var(--teal-d)}

.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.chart g[data-i]{cursor:pointer}
.chart .sel text.lab{fill:var(--teal-d);font-weight:700}
.month-pick{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.month-pick button{border:1px solid var(--line);background:#fff;width:26px;height:26px;cursor:pointer;border-radius:3px}

/* rail alerts */
.rail .alerts{padding:0 16px 18px;display:flex;flex-direction:column;gap:8px;margin-bottom:8px;border-bottom:1px solid #e1e5e7}
.al{background:#fff;border-left:3px solid var(--coral);padding:9px 12px;font-size:12px;cursor:pointer;border-top:0;border-right:0;border-bottom:0;text-align:left;width:100%}
.al.term{border-left-color:#9aa2a9}
.al.ssl{border-left-color:var(--t-ssl)}
.al.dom{border-left-color:var(--t-domain)} .al.dom .k{color:var(--t-domain)}
.al-sum div.dom{border-top-color:var(--t-domain)}
.al b{display:block;color:var(--ink-strong);font-weight:600}
.al span{color:var(--muted)}
.al .k{font-size:10.5px;letter-spacing:.06em;color:var(--coral-d);font-weight:600}
.al.term .k{color:#7d8790}
.al.ssl .k{color:#a07c08}

/* alerts page */
.al-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:26px}
.al-sum div{border:1px solid var(--line);border-top:3px solid var(--coral);padding:14px 18px}
.al-sum div.term{border-top-color:#9aa2a9}
.al-sum div.ssl{border-top-color:var(--t-ssl)}
.al-sum span{font-size:12px;color:var(--muted)}
.al-sum b{display:block;font-family:"Open Sans",sans-serif;font-weight:300;font-size:28px;color:var(--ink-strong)}
.step-tag{font-size:11px;padding:1px 7px;border-radius:2px;background:var(--coral-soft);color:var(--coral-d);white-space:nowrap}
.step-tag.grey{background:#eef0f1;color:#6d767e}

/* ssl */
.exp{display:flex;align-items:center;gap:8px;min-width:150px}
.exp .bar{flex:1;height:5px;background:#eceff1;position:relative;min-width:60px}
.exp .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--t-ssl)}
.exp .bar i.hot{background:var(--coral)}
.exp span{font-size:11.5px;white-space:nowrap;min-width:52px;text-align:right}

/* secrets */
.sec-cell{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sec-cell code{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--ink-strong);letter-spacing:.02em}
.ico{border:0;background:none;color:var(--muted);cursor:pointer;padding:2px;display:inline-grid;place-items:center}
.ico:hover{color:var(--teal-d)}
.ico svg{width:14px;height:14px}
.kind{display:inline-block;font-size:11px;padding:1px 7px;border:1px solid var(--line);border-radius:2px;margin:1px 3px 1px 0;white-space:nowrap}
.kind.home{color:#2a7fb5;border-color:#bfdcee}
.kind.app{color:#b5532a;border-color:#efcdbd}
.kind.web{color:#5a6bb0;border-color:#cfd5ef}
.secure-note{font-size:12px;color:var(--muted);background:var(--sunk);border:1px solid var(--line);padding:8px 12px;margin-bottom:14px}
.pwf{display:flex;gap:0}
.pwf input{flex:1;border-top-right-radius:0!important;border-bottom-right-radius:0!important}
.pwf button{border:1px solid var(--line);border-left:0;background:#fff;padding:0 10px;cursor:pointer;font-size:12px;color:var(--muted);border-radius:0 3px 3px 0}
.kinds{display:flex;gap:16px;flex-wrap:wrap;padding-top:4px}
.kinds label{display:flex;gap:6px;align-items:center;color:var(--ink);font-size:13px;cursor:pointer}
.kinds input{accent-color:var(--teal)}

/* items catalog */
.item-form{display:grid;grid-template-columns:130px minmax(0,1.6fr) 120px 90px minmax(0,1fr) auto;gap:10px;align-items:end;background:var(--sunk);border:1px solid var(--line);padding:14px;margin-bottom:16px}
.off td{color:#b4bbc0}
.sw{border:1px solid var(--line);background:#fff;border-radius:999px;width:38px;height:20px;position:relative;cursor:pointer;padding:0}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#c3c9cd;transition:left .15s}
.sw[aria-pressed="true"]{background:var(--teal);border-color:var(--teal)}
.sw[aria-pressed="true"]::after{left:20px;background:#fff}

/* invoice builder */
.builder{border:1px solid var(--line);margin-bottom:18px}
.builder .bh{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--sunk)}
.builder .bh h3{margin:0;font-size:13px;font-weight:600;color:var(--ink-strong)}
.builder table{min-width:760px}
.builder td input[type=number],.builder td input[type=text]{border:1px solid var(--line);border-radius:3px;padding:4px 6px;width:100%;min-width:0;background:#fff}
.builder td input.q{width:60px;text-align:right}
.builder td input.p{width:100px;text-align:right}
.builder .addrow{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-top:1px solid var(--line);align-items:center}
.builder .addrow select{border:1px solid var(--line);border-radius:3px;padding:6px 8px;min-width:0;max-width:100%;flex:1}
.builder tr.off td{opacity:.45}

/* colored invoice paper */
.paper.color{border-top:8px solid var(--teal);padding-top:30px}
.paper.color h4{color:var(--teal-d);letter-spacing:.7em;margin-bottom:6px}
.paper.color .h4sub{text-align:center;font-size:11px;letter-spacing:.3em;color:#8a949b;margin:0 0 20px}
.paper.color td,.paper.color th{border-color:#c7d3d6}
.paper.color .lbl{background:#f0e7f8;color:#5a2290;font-weight:500}
.paper.color .vert{background:var(--teal);color:#fff;font-weight:600}
.paper.color .hd th{background:#f0f4f5;color:#4a555c;font-weight:500}
.paper.color .amt{color:var(--teal-d);font-size:14px}
.paper.color .duec{color:var(--coral-d);font-weight:700}
.paper.color .sec{border-bottom:0;border-left:4px solid var(--teal);padding:2px 0 2px 9px;color:#3a1d55;background:linear-gradient(90deg,#f5eefb,transparent 70%)}
.paper.color .notice-box{border:1px solid #c7d3d6;background:#fafcfc;padding:10px 14px;margin:8px 0}
.paper.color .notice-box b{color:#3a1d55}
.paper.color .items thead th{background:#33393f;color:#fff;border-color:#33393f;font-weight:500}
.paper.color .items tbody tr:nth-child(even) td{background:#f7fafa}
.paper.color .items .cat{white-space:nowrap;font-weight:500}
.paper.color .items .cat i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:0}
.paper.color .items .sub th,.paper.color .items .sub td{background:#f3f6f7}
.paper.color .items .tot th,.paper.color .items .tot td{background:#fdecea;color:var(--coral-d);font-size:14px;border-color:#f3c5bf}
.paper.color .bank th{background:#f0e7f8;color:#5a2290}
.paper.color .bank td{font-weight:600}
.paper.color .note li{color:#555}
.paper.color .foot{margin-top:18px;padding-top:10px;border-top:1px solid #dfe5e7;display:flex;justify-content:space-between;font-size:11px;color:#8a949b}

.svc-term{background:#fff8f7}
.svc-term td{border-bottom:1px solid var(--line)}
.svc-term .tf{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.svc-term input{border:1px solid var(--line);border-radius:3px;padding:5px 8px;min-width:0}

@media (max-width:860px){
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-row>div:nth-child(3){border-left:0}
  .kpi-row>div:nth-child(n+3){border-top:1px solid var(--line)}
  .al-sum{grid-template-columns:minmax(0,1fr)}
  .item-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .item-form .wide{grid-column:1/-1}
}
.paper.color .hd table:last-child td,.paper.color .hd table:last-child th{white-space:nowrap;font-size:12px}
.paper .items td.c{white-space:nowrap}
.chart{overflow-x:auto}
.chart svg{min-width:560px}

/* ===== auth / account ===== */
#auth[hidden]{display:none}
#auth{position:fixed;inset:0;z-index:100;background:var(--side);display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow-y:auto}
.auth-card{background:#fff;width:380px;max-width:100%;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.auth-card .ah{background:var(--teal);color:#fff;padding:22px 28px;display:flex;align-items:baseline;gap:12px}
.auth-card .ah b{font-family:"Open Sans",sans-serif;font-weight:300;font-size:30px;letter-spacing:-1px}
.auth-card .ah span{font-size:12.5px;letter-spacing:.06em;opacity:.9}
.auth-card form,.auth-card .ab{padding:24px 28px 26px;display:flex;flex-direction:column;gap:14px}
.auth-card h2{margin:0;font-size:16px;font-weight:600;color:var(--ink-strong)}
.auth-card p{margin:0;font-size:12.5px;color:var(--muted)}
.auth-card .btn{padding:10px 14px;font-size:13.5px}
.auth-msg{font-size:12.5px;padding:8px 10px;background:var(--coral-soft);color:var(--coral-d);border-left:3px solid var(--coral)}
.auth-msg.ok{background:var(--teal-soft);color:var(--teal-d);border-left-color:var(--teal)}
.auth-links{display:flex;justify-content:space-between;font-size:12px}
.auth-links button{border:0;background:none;color:var(--teal-d);cursor:pointer;padding:0;text-decoration:underline}
.demo-hint{font-size:11.5px;color:#9aa2a9;text-align:center;padding:10px 16px 0;max-width:380px}
.demo-hint code{color:#d5dbe0;font-family:ui-monospace,Menlo,monospace}
.mail-prev{border:1px dashed var(--line);background:var(--sunk);padding:12px 14px;font-size:12.5px}
.mail-prev .mh{color:var(--muted);font-size:11.5px;margin-bottom:6px}
.mail-prev code{font-family:ui-monospace,Menlo,monospace;font-size:15px;color:var(--ink-strong);background:#fff;border:1px solid var(--line);padding:2px 8px;letter-spacing:.06em}
.rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;font-size:12px}
.rules li{color:var(--muted);display:flex;gap:6px;align-items:center}
.rules li::before{content:"○";font-size:11px}
.rules li.ok{color:var(--ok)}
.rules li.ok::before{content:"✓";font-weight:700}
.acc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.acc-card{border:1px solid var(--line)}
.acc-card>h3{margin:0;padding:12px 18px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-strong);background:var(--sunk)}
.acc-card .in{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.acc-card .info .row{grid-template-columns:120px minmax(0,1fr)}
.sec-set{list-style:none;margin:0;padding:0}
.sec-set li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.sec-set li:last-child{border-bottom:0}
.sec-set li span:last-child{color:var(--ink-strong);font-weight:600;white-space:nowrap}
.tb-btn.out{width:auto;padding:0 18px;font-size:12px;gap:6px;display:flex;align-items:center;letter-spacing:.04em}
@media (max-width:860px){.acc-grid{grid-template-columns:minmax(0,1fr)}.tb-btn.out span{display:none}.tb-btn.out{padding:0 14px}}
#dtab .cl{min-width:140px}
#dtab .cl b{white-space:nowrap}

/* ===== 실제 프로그램 보강 ===== */
.messages{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:6px}
.messages li{padding:9px 14px;font-size:13px;border-left:3px solid var(--teal);background:var(--teal-soft);color:var(--teal-d)}
.messages li.error{border-left-color:var(--coral);background:var(--coral-soft);color:var(--coral-d)}
.errorlist{list-style:none;margin:2px 0 0;padding:0;color:var(--crit);font-size:11.5px}
.f.bad input,.f.bad select{border-color:var(--crit)}
.inline{display:inline}
form.inline button{vertical-align:middle}
a.btn{text-decoration:none;display:inline-block}
a.chip{text-decoration:none}
a.lnk-name{color:inherit;text-decoration:none}
a.lnk-name:hover b{color:var(--teal-d)}
.tbl-wrap th a{color:inherit;text-decoration:none}
.paper .items td,.paper .items th{font-size:12px}
.fset-row{display:grid;grid-template-columns:140px minmax(0,1fr) 140px 70px;gap:10px;align-items:end;margin-bottom:8px}
.fset-row .del{font-size:12px;color:var(--muted);display:flex;gap:4px;align-items:center;padding-bottom:9px}
@media (max-width:860px){.fset-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:220px;border-bottom:1px solid var(--line);padding:0 4px}
.bars a{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;text-decoration:none;gap:4px;border-radius:2px}
.bars a.sel{background:#f7f1fc}
.bars .b{width:60%;max-width:28px;background:var(--bar);min-height:2px}
.bars .b.planned{background:var(--bar-future);outline:1px dashed #cfd6da}
.bars .b.current{background:#c9a8e6}
.bars a.sel .b{background:var(--teal)}
.bars .v{font-size:10.5px;color:var(--muted);white-space:nowrap}
.bars a.sel .v{color:var(--teal-d);font-weight:600}
.bar-labels{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;padding:6px 4px 0;font-size:11.5px;color:var(--muted);text-align:center}
.bar-labels .sel{color:var(--teal-d);font-weight:700}
.nav a{display:flex;align-items:center;gap:10px;width:100%;color:var(--side-txt);padding:7px 18px;font-size:12.5px;text-decoration:none;letter-spacing:.02em}
.nav a:hover{color:#fff;background:var(--side-hi)}
.nav a[aria-current="page"]{color:#fff;background:var(--side-hi)}
.nav a[aria-current="page"] svg{color:var(--teal)}
.nav a svg{width:15px;height:15px;flex:none}
.nav a .bdg{margin-left:auto;background:var(--coral);color:#fff;border-radius:50%;width:18px;height:18px;font-size:10.5px;display:grid;place-items:center}
.nav a .dot{margin-left:auto;width:6px;height:6px;border-radius:50%}
.tb-btn{text-decoration:none}
a.al{display:block;color:inherit}
.dtabs a.tabl{border-bottom:2px solid transparent;padding:9px 14px;color:var(--muted);white-space:nowrap;letter-spacing:.03em;text-decoration:none}
.dtabs a.tabl[aria-selected="true"]{color:var(--ink-strong);border-bottom-color:var(--teal)}
.svc-term form.tf{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inv-tools .f input:disabled{background:var(--sunk)}
.job-line{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:-14px 0 26px;padding:8px 12px;background:var(--sunk);border:1px solid var(--line)}

/* 견적서 */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tpl-card{border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:3px;cursor:pointer;position:relative}
.tpl-card input{position:absolute;top:12px;right:12px;accent-color:var(--teal)}
.tpl-card:has(input:checked){border-color:var(--teal);background:var(--teal-soft)}
.tpl-card .nm{font-weight:600;color:var(--ink-strong)}
.tpl-card .its{font-size:11.5px;color:var(--muted)}
.qrow{display:grid;grid-template-columns:150px minmax(0,1fr) 130px 130px 60px;gap:10px;align-items:start;padding:10px 0;border-bottom:1px dashed var(--line)}
.qrow textarea{border:1px solid var(--line);border-radius:3px;padding:7px 9px;font:inherit;min-width:0;resize:vertical}
.qrow .del{padding-top:24px;font-size:12px;color:var(--muted);display:flex;gap:4px;align-items:center}
@media (max-width:860px){.qrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.qrow label:nth-child(3){grid-column:1/-1}}
#lib{border:1px solid var(--line);border-radius:3px;padding:6px 8px;min-width:0;max-width:100%}

/* 문서 머리(로고) — 화면과 PDF 공통 */
.paper.color{border-top:0!important;padding-top:0!important}
.paper .brand-band{height:8px;background:linear-gradient(90deg,#4a1580 0%,#7b1a8a 35%,#c4197c 62%,#1f80c4 100%);margin:0 -40px 22px}
.paper .ptitle{display:grid;grid-template-columns:70px 1fr 70px;align-items:center;margin-bottom:18px}
.paper .plogo{width:48px;height:auto;display:block}
.paper .ptitle .tt{text-align:center}
.paper .ptitle h4{margin:0 0 2px!important}
.paper .ptitle .h4sub{margin:0!important}
.paper .pno{font-size:10.5px;color:#8a949b;text-align:right;white-space:nowrap}
.paper .items .details div{line-height:1.6}
.paper .items .period{padding:7px 10px;font-weight:700}
.dot-hosting{background:var(--t-host)} .dot-webmail{background:var(--t-mail)} .dot-maint{background:var(--t-main)} .dot-ssl{background:var(--t-ssl)} .dot-domain{background:var(--t-domain)} .dot-etc{background:var(--t-etc)}


/* ===== UTREE 로고 색상 테마 =====
   로고: 검정 바탕 + 보라(#4a1580·#7b1a8a) → 자주(#c4197c) → 파랑(#1f80c4) */
:root{
  --side:#141118; --side-hi:#221b2b; --side-txt:#ada6b8; --side-head:#6f667b; --side-line:#2a2331;
  --top:#1c1722; --top-txt:#eeeaf3;
  --teal:#6b2fa3; --teal-d:#55208a; --teal-soft:#f1eaf8;
  --coral:#c4197c; --coral-d:#a3105f; --coral-soft:#fbe8f2;
  --green:#1f80c4; --navy:#c4197c;
  --bar:#e4e0ea; --bar-future:#f2f0f5;
  --ink:#40394a; --ink-strong:#241f2b; --muted:#958da0; --line:#e6e2ec; --panel:#f5f3f8; --sunk:#f8f6fa;
  --t-host:#1f80c4;
}
.logo{background:#000;height:auto;padding:14px 0 10px;flex-direction:column;gap:2px}
.logo img{width:44px;height:auto;display:block}
.logo small{position:static;font-size:10px;color:#8d8598;letter-spacing:.1em}
.upd{background:linear-gradient(90deg,#4a1580,#7b1a8a 45%,#c4197c)}
.tb-btn.coral{background:linear-gradient(135deg,#7b1a8a,#c4197c)}
.tb-btn.coral:hover{background:linear-gradient(135deg,#6a167a,#a3105f)}
.tl li.hi{background:linear-gradient(120deg,#5a1a8c,#8a1a85 60%,#c4197c)}
.tl li.hi::before{border-color:#55208a}
.bars a.sel .b{background:linear-gradient(180deg,#c4197c,#6b2fa3)}
.bars .b.current{background:#c9a8e6}
.auth-card .ah{background:#000;justify-content:flex-start;align-items:center}
.auth-card .ah img{width:40px;height:auto}
#auth{background:radial-gradient(circle at 20% 10%,#2a1838 0,#141118 55%)}
.kpi-row .accent .v{color:var(--teal-d)}
.paper.color h4{color:#55208a}
.paper.color .vert{background:linear-gradient(180deg,#6b2fa3,#c4197c)}

/* ===== 시인성 개선: 글자 크게, 색 진하게 ===== */
:root{
  --ink:#231e2a; --ink-strong:#120e17; --muted:#575062; --line:#d9d4e0;
  --side-txt:#ddd8e5; --side-head:#a69db3; --top-txt:#ffffff;
}
html,body{margin:0;padding:0}
body{font-size:16px;line-height:1.6}
.app{grid-template-columns:260px minmax(0,1fr)}
.nav h6{font-size:13.5px;font-weight:600;margin-top:18px}
.nav a{font-size:15.5px;padding:9px 20px}
.nav a svg{width:17px;height:17px}
.upd{font-size:14px;padding:9px 16px}
.side-foot span{font-size:13px;color:#a69db3}
.topbar h1{font-size:22px;font-weight:600}
.topbar h1 small{font-size:13px;color:#bdb5c8}
.tb-btn.out{font-size:14.5px}
.notice,.secure-note{font-size:14.5px;color:var(--muted)}
.messages li{font-size:15.5px}
.sec-h h2{font-size:18px;font-weight:600;letter-spacing:.02em}
.sec-h p{font-size:14.5px}
.dd{font-size:14px;color:var(--muted)}
.kpi-row .l,.kpis span{font-size:14.5px;color:var(--muted);font-weight:500}
.kpi-row .v{font-size:37px;font-weight:400}
.kpi-row .f{font-size:14px}
.kpis b{font-size:28px;font-weight:400}
.list th{font-size:14.5px;color:var(--muted);font-weight:600;padding:12px 12px}
.list td{font-size:15.5px;padding:12px 12px}
.cl b{font-size:16px}
.cl span{font-size:14px;color:var(--muted)}
.chip{font-size:14.5px;padding:6px 14px}
.search{font-size:15.5px;padding:8px 12px}
.btn{font-size:15px;padding:8px 15px}
.btn.sm{font-size:14px;padding:5px 11px}
.st{font-size:14px;padding:3px 10px;font-weight:500}
.type{font-size:14.5px;font-weight:500}
.kind{font-size:13.5px}
.f{font-size:14.5px;color:#3d3647;font-weight:500}
.f input,.f select,.f textarea,.qrow textarea{font-size:16px;color:var(--ink-strong);padding:9px 11px}
.fs legend{font-size:16.5px;font-weight:600}
.chk{font-size:15.5px}
.info dt{font-size:14.5px;color:var(--muted)}
.info dd{font-size:16px}
.dtabs a.tabl{font-size:16px}
.dhead h2{font-size:25px}
.dhead p{font-size:15px;color:var(--muted)}
.ccard .t b{font-size:17.5px}
.ccard .meta,.ccard .ft{font-size:14.5px}
.rail h2{font-size:15.5px;font-weight:600}
.tl li{font-size:14.5px;color:var(--muted)}
.tl .when{font-size:13px;color:#7d7489}
.tl .what{font-size:15px}
.tl .lnk{font-size:14.5px}
.al{font-size:14.5px}
.al .k{font-size:13px}
.alert-strip{font-size:15.5px}
.job-line .dd{font-size:14px}
.bars .v{font-size:13.5px}
.bar-labels{font-size:14px;color:var(--muted)}
.mon header b{font-size:17px}
.mon li{font-size:15px}
.mon li .d{font-size:14px}
.steps{font-size:14.5px}
.rules{font-size:14.5px}
.sec-set li{font-size:15px}
.acc-card>h3,.builder .bh h3{font-size:16px}
.tpl-card .its{font-size:14px}
.step-tag{font-size:13.5px}
.al-sum span{font-size:14.5px}
.al-sum b{font-size:33px;font-weight:400}
.auth-card p,.auth-msg{font-size:14.5px}
.auth-links,.auth-links a{font-size:14px!important}
@media (max-width:860px){.app{grid-template-columns:minmax(0,1fr)}}

/* 여백 줄이기 */
.page{padding:18px 20px 50px}
.rail{padding-top:18px}
.topbar{height:72px}
.tb-btn{width:72px}
.paper-wrap{padding:12px}
@media (max-width:860px){.page{padding:14px 12px 40px}}
.builder td input[name^="desc_"]{min-width:340px}
.builder input[type=checkbox],.list input[type=checkbox],.chk input,.kinds input{width:20px;height:20px}
.logo img{width:54px}
.logo small{font-size:12px}
.nav a{font-size:15px}
/* 왼쪽 메뉴: 14.5px, 세로 스크롤 없이 한 화면에 */
.logo{flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 18px}
.logo img{width:38px}
.logo small{font-size:13px;color:#cfc8d9;letter-spacing:.04em}
.upd{padding:7px 18px;font-size:13.5px}
.nav{padding:2px 0 8px}
.nav h6{margin:10px 0 2px;font-size:12px}
.nav a{font-size:14.5px;padding:6px 20px;line-height:1.4}
.nav a svg{width:16px;height:16px}
.side-foot span{padding:9px;font-size:12px}
.nav a{padding:5px 20px}
.nav h6{margin:8px 0 1px}
.side-foot span{padding:7px}
@media (max-height:700px){.side-foot{display:none}}

/* ---- 프로젝트 · 간트 차트 ---- */
.gantt{border:1px solid var(--line);background:#fff;overflow-x:auto}
.gantt .g-in{min-width:980px}
.g-row{display:grid;grid-template-columns:300px 1fr;border-top:1px solid var(--line);min-height:52px}
.g-row:first-child{border-top:0}
.g-row.head{background:var(--sunk);min-height:0}
.g-name{padding:9px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.g-name a{color:var(--ink-strong);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-name a:hover{color:var(--teal)}
.g-name small{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-track{position:relative;background-image:linear-gradient(to right,transparent calc(100% - 1px),transparent 0)}
.g-heads{display:flex;height:100%}
.g-heads span{border-left:1px solid var(--line);font-size:13px;color:var(--ink);padding:8px 6px;white-space:nowrap;overflow:hidden}
.g-heads span:first-child{border-left:0}
.g-grid{position:absolute;inset:0;display:flex;pointer-events:none}
.g-grid span{border-left:1px dashed #eceef0}
.g-grid span:first-child{border-left:0}
.g-today{position:absolute;top:0;bottom:0;width:2px;background:var(--coral);z-index:2}
.g-today b{position:absolute;bottom:3px;right:5px;font-size:12px;color:var(--coral-d);font-weight:600;white-space:nowrap}
.g-row.head{min-height:46px}.g-heads span{padding-top:6px}
.g-bar{position:absolute;top:50%;transform:translateY(-50%);height:22px;overflow:visible;border-radius:4px;background:#e6dcf1;z-index:3;display:block;text-decoration:none}
.g-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--teal);border-radius:inherit}
.g-bar em{position:relative;font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink-strong);background:rgba(255,255,255,.88);border-radius:3px;margin:2px 0 0 4px;padding:0 6px;line-height:18px;display:inline-block;white-space:nowrap}
.g-bar.late{background:#f8d9d5}.g-bar.late i{background:var(--crit)}
.g-bar.done{background:#d5eedf}.g-bar.done i{background:var(--ok)}
.g-bar.hold{background:#eceef0}.g-bar.hold i{background:#a7afb6}
.g-bar.stage{height:16px;border-radius:3px;background:#d9cce8}
.g-bar.stage.done{background:var(--ok)}
.g-bar.stage.late{background:var(--crit)}
.g-bar.stage.now{background:var(--teal)}
.g-bar.cut-l{border-top-left-radius:0;border-bottom-left-radius:0}.g-bar.cut-r{border-top-right-radius:0;border-bottom-right-radius:0}
.g-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13.5px;color:var(--ink);margin:10px 0 0}
.g-legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--c)}
.pbar{display:inline-block;width:90px;height:8px;border-radius:4px;background:#ebe5f2;vertical-align:middle;overflow:hidden;margin-right:6px}
.pbar i{display:block;height:100%;background:var(--teal)}
.pbar.late i{background:var(--crit)}
.kind-tag{display:inline-block;font-size:12.5px;padding:1px 8px;border-radius:3px;background:var(--teal-soft);color:var(--teal-d);white-space:nowrap}
.dleft{font-size:13.5px;white-space:nowrap}.dleft.late{color:var(--crit);font-weight:600}.dleft.soon{color:var(--warn);font-weight:600}
.stage-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.stage-list li{display:grid;grid-template-columns:44px 1fr 210px 110px;gap:10px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--line)}
.stage-list li.done .nm{color:var(--muted);text-decoration:line-through}
.stage-list li.late .nm{color:var(--crit);font-weight:600}
.chkbtn{width:28px;height:28px;border:2px solid #c9bfd6;border-radius:6px;background:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.chkbtn.on{background:var(--ok);border-color:var(--ok);color:#fff}
.pay-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.pay-parts div{border:1px solid var(--line);padding:12px 14px;background:#fff}
.pay-parts b{display:block;font-size:18px;color:var(--ink-strong)}
.pay-parts span{font-size:13.5px;color:var(--muted)}
.preset-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.plogs{list-style:none;margin:0;padding:0}
.plogs li{border-bottom:1px solid var(--line);padding:10px 0;display:grid;grid-template-columns:100px 1fr auto;gap:12px;align-items:start}
.plogs .t{white-space:pre-line}
.proj-card{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 150px 90px;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.proj-card:hover{background:var(--sunk)}
@media (max-width:760px){.g-row{grid-template-columns:170px 1fr}.stage-list li{grid-template-columns:40px 1fr;}.stage-list li .dt,.stage-list li .dl{grid-column:2}.proj-card{grid-template-columns:1fr 110px}.plogs li{grid-template-columns:1fr}}