:root{
  --green:#2fa443; --green-d:#1f7f31; --green-l:#e9f6ec;
  --sky:#1cb2eb; --sky-d:#0b7fae; --sky-l:#e6f6fd;
  --ink:#1b2328; --ink2:#3d474e; --muted:#76818a; --line:#dde2e6; --line2:#eef1f3;
  --bg:#f4f6f7; --panel:#fff; --red:#d23f31; --red-l:#fdecea; --amber:#b7791f; --amber-l:#fdf3e1;
  --r:4px;
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:#fff;color:var(--ink);font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%}
a{color:var(--sky-d);text-decoration:none}
a:hover{text-decoration:underline}
input,select,textarea,button{font:inherit;color:inherit}
h2{font-size:16px;margin:0 0 10px;font-weight:700}
h3{font-size:14px;margin:0 0 8px;font-weight:700}
.muted{color:var(--muted)}
.num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.nowrap{white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}

/* 틀 */
.top{height:60px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 24px 0 0;position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;width:292px;flex:none;padding-left:26px;font-weight:800;font-size:21px;letter-spacing:.3px;text-decoration:none!important;line-height:1}
.brand .b1{color:var(--green)} .brand .b2{color:var(--sky)}
.brand.big{font-size:30px;padding:0;width:auto}
.top-search{flex:0 1 420px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:22px;padding:0 14px;height:40px;color:var(--muted);background:#fff}
.top-search:focus-within{border-color:var(--green)}
.top-search input{border:0!important;outline:0!important;flex:1;padding:0;background:transparent;font-size:14px;min-width:0}
.top-r{margin-left:auto;display:flex;align-items:center;gap:18px;white-space:nowrap}
.bell{position:relative;color:var(--ink2);display:flex}
.bell b{position:absolute;top:-7px;left:12px;background:var(--red);color:#fff;font-size:10px;border-radius:9px;padding:0 5px;line-height:16px;font-weight:700}
.who{display:flex;align-items:center;gap:8px;color:var(--ink)!important;text-decoration:none!important}
.who i{font-style:normal;width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.out{color:var(--muted);font-size:13px}
.menu-btn{display:none;background:none;border:0;padding:6px;cursor:pointer;margin-left:10px}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}
.shell{display:flex;min-height:calc(100vh - 60px)}
.rail{width:72px;flex:none;background:#fff;border-right:1px solid var(--line);position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;padding:10px 0;scrollbar-width:none}
.rail a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0 9px;color:#4a545b;font-size:12px;text-decoration:none!important;position:relative}
.rail a svg{padding:5px;width:34px;height:34px;border-radius:9px}
.rail a:hover svg{background:var(--line2)}
.rail a.on{color:var(--green-d);font-weight:700}
.rail a.on svg{background:var(--green);color:#fff}
.rail a em{position:absolute;top:6px;right:9px;font-style:normal;font-size:10px;background:var(--red);color:#fff;border-radius:9px;padding:0 5px;line-height:16px;font-weight:700}
.side{width:220px;flex:none;background:#fff;border-right:1px solid var(--line);position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;padding:22px 18px 30px}
.lnb{display:none}
.lnb.on{display:block}
.lnb h2{font-size:21px;font-weight:700;margin:0 0 16px 4px}
.lnb-act{display:flex;align-items:center;justify-content:center;height:44px;border:1px solid #2b3237;border-radius:6px;color:var(--ink)!important;font-size:14px;margin-bottom:18px;text-decoration:none!important;background:#fff}
.lnb-act:hover{background:var(--green-l);border-color:var(--green-d)}
.lnb ul{list-style:none;margin:0;padding:0}
.lnb li a{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:6px;color:var(--ink2);text-decoration:none!important;font-size:14px}
.lnb li a:hover{background:var(--line2)}
.lnb li a.on{background:var(--green-l);color:var(--green-d);font-weight:700}
.lnb li a em{font-style:normal;font-size:11px;background:var(--green);color:#fff;border-radius:9px;padding:0 6px;line-height:17px}
.main{flex:1;min-width:0;padding:22px 32px 70px;max-width:1720px}
.page-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;min-height:34px}
.page-h h1{font-size:22px;font-weight:700;margin:0;letter-spacing:-.2px}
.page-h .r{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.scrim{display:none}
.side-foot{display:none}

/* 공통 블록 */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px;margin-bottom:16px}
.panel.flush{padding:0}
.panel{max-width:100%;overflow-x:auto}
.cols>*,.grid2>*,.grid3>*{min-width:0}
.panel.narrow{max-width:760px}
fieldset.bare{border:0;padding:0;margin:0;min-width:0}
.panel-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line)}
.panel-h h2{margin:0}
.panel-h .r{margin-left:auto;display:flex;gap:6px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:16px;align-items:start}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar .r{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.toolbar select{max-width:200px}
.flash{padding:9px 12px;border-radius:var(--r);margin-bottom:14px;border:1px solid}
.flash.ok{background:var(--green-l);border-color:#bfe4c6;color:var(--green-d)}
.flash.err{background:var(--red-l);border-color:#f3c1bb;color:var(--red)}
.hint{font-size:12px;color:var(--muted)}

/* 버튼, 입력 */
.btn{display:inline-flex;align-items:center;gap:4px;border:1px solid #cfd5da;background:#fff;border-radius:5px;padding:6px 13px;cursor:pointer;white-space:nowrap;color:var(--ink);text-decoration:none!important;line-height:1.4}
.btn:hover{border-color:#c4cbd0;background:#fafbfb}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-d)}
.btn.sky{background:var(--sky-d);border-color:var(--sky-d);color:#fff}
.btn.danger{color:var(--red);border-color:#f0c4bf}
.btn.sm{padding:3px 8px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:default}
button.link{background:none;border:0;padding:0;color:var(--sky-d);cursor:pointer}
button.link.danger{color:var(--red)}
input[type=text],input[type=search],input[type=number],input[type=date],input[type=password],input[type=email],input[type=time],input:not([type]),select,textarea{
  border:1px solid #d3d9de;border-radius:5px;padding:7px 9px;background:#fff;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-l);border-color:var(--green)}
textarea{width:100%;min-height:80px;resize:vertical}
.form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.form label input,.form label select,.form label textarea{font-size:14px;color:var(--ink);width:100%}
.form label input[type=checkbox],.form label input[type=radio]{width:auto}
.pad{padding:16px 18px}
.form .w2{grid-column:span 2}.form .w3{grid-column:span 3}.form .w4{grid-column:1/-1}
.form .chk{flex-direction:row;align-items:center;gap:6px;color:var(--ink);font-size:14px}
.form-foot{display:flex;gap:8px;margin-top:16px;align-items:center}
.inline-in{width:96px;text-align:right;padding:3px 6px;font-variant-numeric:tabular-nums}
.inline-in.changed{background:#fff8dc;border-color:var(--amber)}

/* 표 */
.tbl-wrap{overflow:auto;max-width:100%}
.tbl-wrap.tall{max-height:calc(100vh - 210px)}
table.tbl{width:100%;border-collapse:collapse;background:#fff}
.tbl th,.tbl td{padding:9px 12px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:middle}
.tbl thead th{background:#f7f8fa;font-size:13px;color:var(--ink2);font-weight:600;border-bottom:1px solid #d5dade;position:sticky;top:0;z-index:2;white-space:nowrap}
.tbl tbody tr:hover{background:#f7fbf8}
.tbl td.wrap{white-space:normal;min-width:160px}
.tbl td.clip{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl .sub{font-size:12px;color:var(--muted)}
.tbl tr.cat td{background:#f2f5f6;font-weight:700;color:var(--ink2);font-size:12px;letter-spacing:.3px}
.tbl tr.dim td{color:var(--muted)}
.tbl.compact th,.tbl.compact td{padding:7px 10px;font-size:13px}
.tbl th.grp{text-align:center;border-left:1px solid var(--line)}
.tbl td.gl,.tbl th.gl{border-left:1px solid var(--line)}
.tbl a.rowlink{color:var(--ink);font-weight:600}
.empty{padding:30px;text-align:center;color:var(--muted)}
.neg{color:var(--red)}
.pos{color:var(--green-d)}
.warn{color:var(--amber)}
.price-ex{color:var(--sky-d);font-weight:700}
.up{color:var(--red)} .down{color:var(--sky-d)}

/* 꼬리표 */
.tag{display:inline-block;font-size:12px;line-height:20px;padding:0 8px;border-radius:4px;background:var(--line2);color:var(--ink2);white-space:nowrap;font-weight:600}
.tag.done{background:#8b959c;color:#fff}
.tag.go{background:var(--green);color:#fff}
.tag.new{background:var(--sky);color:#fff}
.tag.wait{background:#f39c32;color:#fff}
.tag.off{background:#f3f3f3;color:#9aa1a6;text-decoration:line-through}
.tag.urgent{background:var(--red);color:#fff}
.tag.brand{background:#fff;border:1px solid var(--line)}
.step{display:inline-block;font-size:12px;line-height:20px;padding:0 7px;border-radius:4px;border:1px solid var(--line);color:var(--ink2);background:#fff;white-space:nowrap;margin:1px 0}
.step.go{border-color:var(--green);color:var(--green-d);background:var(--green-l);font-weight:600}
.step.done{border-color:#e3e6e9;color:#a3abb1;background:#f5f6f7;text-decoration:line-through}
.step.wait{border-color:#f3c98a;color:var(--amber);background:var(--amber-l)}
.step.urgent{border-color:var(--red);color:var(--red);background:var(--red-l);font-weight:600}

/* 탭 */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tabs a{padding:8px 14px;color:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.tabs a.on{border-bottom-color:var(--green);color:var(--ink);font-weight:700}
.tabs a span{color:var(--muted);font-size:12px;margin-left:3px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg a,.seg label{white-space:nowrap;flex:none;padding:5px 11px;color:var(--ink2);border-right:1px solid var(--line);text-decoration:none;cursor:pointer;background:#fff}
.seg a:last-child,.seg label:last-child{border-right:0}
.seg a.on{background:var(--ink);color:#fff}

/* 홈 */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);background:#fff;border-radius:8px;margin-bottom:16px}
.kpi{padding:16px 20px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi b{display:block;font-size:22px;font-variant-numeric:tabular-nums;line-height:1.3}
.kpi span{font-size:12px;color:var(--muted)}
.kpi a{color:inherit;text-decoration:none}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line2)}
.checklist li:last-child{border-bottom:0}
.checklist li.done .t{color:var(--muted);text-decoration:line-through}
.checklist input[type=checkbox]{margin-top:3px;width:16px;height:16px;accent-color:var(--green)}
.checklist .t{flex:1}
.checklist .meta{font-size:12px;color:var(--muted)}
.feed{list-style:none;margin:0;padding:0}
.feed li{padding:7px 0;border-bottom:1px solid var(--line2);font-size:13px}
.feed li:last-child{border-bottom:0}

/* 보드 */
.board{display:grid;grid-template-columns:repeat(6,minmax(200px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px}
.lane{background:#eef1f2;border-radius:var(--r);padding:8px;min-height:120px}
.lane h3{font-size:12px;color:var(--ink2);display:flex;justify-content:space-between;margin:2px 4px 8px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;margin-bottom:6px;font-size:13px;display:block;color:var(--ink);text-decoration:none!important}
.card:hover{border-color:#b9c2c7}
.card .t{font-weight:600;display:block;margin-bottom:3px}
.card .m{font-size:12px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.card.urgent{border-left:3px solid var(--red)}

/* 쇼핑몰 체크 매트릭스 */
.mx td.c{text-align:center;cursor:pointer;min-width:58px;font-size:12px;user-select:none}
.mx td.c.s-완료{background:var(--green-l);color:var(--green-d);font-weight:700}
.mx td.c.s-제외{background:#f4f4f4;color:#a0a6aa}
.mx td.c:hover{outline:1px solid var(--sky);outline-offset:-1px}
.mx td.c-none{background:#f6f7f8}
.mx th.v{writing-mode:vertical-rl;text-orientation:mixed;height:96px;vertical-align:bottom;font-size:12px;padding:6px 4px}

/* 달력 */
.cal{width:100%;border-collapse:collapse;table-layout:fixed;background:#fff}
.cal th{font-size:12px;color:var(--muted);padding:6px;border-bottom:1px solid var(--line);text-align:left}
.cal td{vertical-align:top;height:112px;border:1px solid var(--line2);padding:4px 5px;font-size:12px}
.cal td.out{background:#fafbfb;color:#b7bec3}
.cal td.today{background:#f4fbf5}
.cal .d{display:inline-block;font-weight:700;font-size:12px;margin-bottom:3px;color:var(--ink);text-decoration:none!important;min-width:22px;border-radius:4px;padding:0 4px}
.cal .d.neg{color:var(--red)}
.cal .d:hover{background:var(--green-l)}
.cal td.today .d{background:var(--green);color:#fff}
.cal .ev{display:block;padding:1px 5px;margin-bottom:2px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);text-decoration:none!important}
.cal .ev.k-promo{background:var(--sky-l)}
.cal .ev.k-sns{background:#f3ecfb}
.cal .ev.k-task{background:var(--amber-l)}
.cal .ev.k-step{background:var(--green-l)}
.cal .ev.k-sched{background:#eef0f2}
.cal .ev.more{display:none}
.cal td.open .ev.more{display:block}
.cal td.open .more-btn{display:none}
.more-btn{font-size:11px;color:var(--muted)!important}
.cal .ev.k-sched.c-0{background:#e2f1e5}.cal .ev.k-sched.c-1{background:#fde8e6}.cal .ev.k-sched.c-2{background:#e2f2fb}.cal .ev.k-sched.c-3{background:#efeaf7}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:2px}
.sw.k-sched{background:#cfd6db}.sw.k-promo{background:#bfe6f7}.sw.k-sns{background:#e3d3f5}.sw.k-task{background:#f6dfb3}.sw.k-step{background:#c6e9cd}

/* 간트 */
.gantt{border-collapse:collapse;font-size:12px}
.gantt td,.gantt th{border:1px solid var(--line2);padding:3px 4px;white-space:nowrap}
.gantt td.bar{background:var(--green);}
.gantt td.bar.wait{background:#cfd8dc}
.gantt td.bar.go{background:var(--sky)}
.gantt th.wk{font-weight:500;color:var(--muted);min-width:24px;text-align:center}
.gantt td.todaycol{box-shadow:inset 2px 0 0 var(--red)}

/* 차트 */
.chart{width:100%;height:auto;display:block}
.chart .ax{stroke:var(--line);stroke-width:1}
.chart .ln{fill:none;stroke:var(--green);stroke-width:2}
.chart .ln2{fill:none;stroke:var(--sky);stroke-width:2}
.chart .dot{fill:#fff;stroke:var(--green);stroke-width:2}
.chart text{font-size:11px;fill:var(--muted)}
.spark{vertical-align:middle}

/* 옮겨 온 본문 */
.rich{line-height:1.65;overflow-x:auto;white-space:normal}
.rich p{margin:0 0 4px}
.rich table{border-collapse:collapse;margin:6px 0;font-size:13px;max-width:100%}
.rich td,.rich th{border:1px solid var(--line);padding:4px 8px;vertical-align:top}
.rich img{max-width:100%;height:auto;display:block;margin:6px 0;border:1px solid var(--line2)}
.timeline .b.rich{white-space:normal}
.comment-form{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.empty-line{border-left:0!important;padding-left:0!important}
.empty-line:before{display:none}

/* 기타 */
.files{list-style:none;padding:0;margin:8px 0}
.files li{padding:3px 0;font-size:13px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{border-left:2px solid var(--line);padding:0 0 12px 14px;position:relative}
.timeline li:before{content:"";position:absolute;left:-5px;top:5px;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid var(--green)}
.timeline .h{font-size:12px;color:var(--muted)}
.timeline .b{white-space:pre-wrap}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:13px}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.breakdown{font-size:12px;color:var(--muted);line-height:1.7}
.paste-box{width:100%;min-height:120px;font-family:Consolas,monospace;font-size:12px}
dialog{border:1px solid var(--line);border-radius:6px;padding:0;max-width:640px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(20,30,35,.35)}
dialog .dh{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700;display:flex}
dialog .dh button{margin-left:auto}
dialog .db{padding:16px}
.copy-ok{color:var(--green-d);font-size:12px;margin-left:6px}
.pager{display:flex;gap:4px;justify-content:center;margin:14px 0}
.pager a,.pager b{padding:3px 9px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink2);text-decoration:none}
.pager b{background:var(--ink);color:#fff;border-color:var(--ink)}
.secret{font-family:Consolas,monospace;background:var(--line2);padding:1px 6px;border-radius:3px}

/* 로그인 */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(180deg,#fff 0,#f1f6f4 100%)}
.login{width:320px;max-width:calc(100% - 32px);background:#fff;border:1px solid var(--line);border-radius:6px;padding:30px 26px;display:flex;flex-direction:column;gap:12px}
.login p{margin:-6px 0 6px}
.login label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.login input{padding:9px 10px;font-size:15px;color:var(--ink)}
.login .btn{justify-content:center;padding:10px;font-size:15px;margin-top:6px}

/* 인쇄 */
@media print{
  .side,.rail,.top,.toolbar,.no-print,.btn,.comment-form,.page-h .r{display:none!important}
  .print-only{display:block!important}
  .main{padding:0}
  .panel{border:0;padding:0}
  body{background:#fff;font-size:12px}
  .tbl th,.tbl td{padding:4px 6px}
  .tbl-wrap.tall{max-height:none;overflow:visible}
}

@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpi:nth-child(3){border-right:0}
  .kpi:nth-child(n+4){border-top:1px solid var(--line)}
  .cols{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1280px){
  .brand{width:auto;padding-left:20px}
}
@media (max-width:900px){
  .rail,.side{position:fixed;top:60px;z-index:50;height:calc(100vh - 60px);transition:transform .2s}
  .rail{left:0;transform:translateX(-310px)}
  .side{left:72px;transform:translateX(-310px);width:228px}
  .lnb{display:block;margin-bottom:22px}
  .lnb h2{font-size:15px;margin-bottom:8px}
  .lnb-act{display:none}
  .side-foot{display:flex;gap:16px;border-top:1px solid var(--line);padding:14px 10px 0;font-size:14px}
  .side-foot a{color:var(--ink2)}
  body.side-open .rail,body.side-open .side{transform:none}
  body.side-open .scrim{display:block;position:fixed;inset:60px 0 0 0;z-index:40;background:rgba(0,0,0,.25)}
  .menu-btn{display:block}
}
@media (max-width:760px){
  .top{padding:0 14px 0 0;gap:10px}
  .brand{padding-left:4px;font-size:18px}
  .top-search{display:none}
  .who span,.out{display:none}
  .main{padding:16px 16px 50px}
  .page-h h1{font-size:19px}
  .grid2,.grid3{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{border-right:0!important;border-top:1px solid var(--line)}
  .kpi:nth-child(-n+2){border-top:0}
  .kpi:nth-child(odd){border-right:1px solid var(--line)!important}
  .form{grid-template-columns:1fr}
  .form .w2,.form .w3{grid-column:auto}
  .board{grid-template-columns:repeat(6,82vw)}
  .cal td{height:74px;font-size:11px}
  .cal .ev{padding:0 3px}
  .toolbar .r{margin-left:0}
  .panel-h .r{margin-left:0}
  .kpi b{font-size:19px}
  .tbl th,.tbl td{padding:6px 8px}
}