/* 공통 디자인: 런 재고 정리·지곡 재고 싱크의 보라색 왼쪽 메뉴와 같은 색·카드·표. 폰에서는 왼쪽 메뉴가 아래쪽 탭이 된다 */
:root{--side1:#14067a;--side2:#4c1d95;--bg:#f2f4f6;--card:#fff;--line:#e5e7eb;--line2:#eef0f3;--ink:#1f2328;--sub:#6b7280;--acc:#4f46e5;--acc2:#eef2ff;--accd:#3730a3;--field:#f2f4f6;--r:14px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{font:14px/1.55 Pretendard,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
.app{display:flex;min-height:100vh}
/* 왼쪽 메뉴 */
.side{flex:none;width:236px;background:linear-gradient(180deg,var(--side1) 0%,var(--side2) 100%);color:#fff;padding:26px 16px 20px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}
.side .brand{font-size:22px;font-weight:700;letter-spacing:-.5px;padding:0 10px}
.side .brand small{display:block;font-size:12px;font-weight:400;opacity:.65;letter-spacing:0;margin-top:2px}
.side nav{display:flex;flex-direction:column;gap:4px;margin-top:22px}
.side a.tab{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;color:rgba(255,255,255,.78);font-size:14.5px;text-decoration:none;transition:background .15s,color .15s}
.side a.tab .ic{display:inline-flex;flex:none;width:24px;height:24px;border-radius:7px;align-items:center;justify-content:center;background:rgba(255,255,255,.12);font-size:12px;font-weight:700}
.side a.tab:hover{background:rgba(255,255,255,.08);color:#fff}
.side a.tab.on{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
.side a.tab.on .ic{background:#fff;color:var(--side1)}
.side .foot{margin-top:auto;padding:0 10px}
.side .foot button{width:100%;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.side .foot button:hover{background:rgba(255,255,255,.1)}
/* 본문 */
.main{flex:1;min-width:0;padding:34px 40px 60px}
.ptitle{margin:0 0 22px}
.ptitle>b{display:block;font-size:34px;font-weight:800;color:#000;letter-spacing:-1.2px;line-height:1.25}
.ptitle p{margin:10px 0 0;color:var(--sub);font-size:13.5px;max-width:880px}
.step{background:var(--card);border-radius:var(--r);padding:20px 22px;margin:0 0 16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.step>b{display:block;font-size:16px;font-weight:700;letter-spacing:-.3px;margin-bottom:8px}
.step ul{margin:0;padding-left:18px}
.step li{margin:3px 0}
.tag{display:inline-block;background:var(--acc2);color:var(--accd);border-radius:999px;padding:2px 12px;font-size:12.5px;font-weight:600}
.warn{color:#b91c1c;margin:8px 0 0}
.sub{color:var(--sub);font-size:13px;margin:6px 0 0}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 0}
select{font:inherit;background:var(--field);border:1px solid transparent;border-radius:8px;padding:7px 10px;color:var(--ink)}
input[type=file]{font-size:13px;max-width:100%}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:10px}
.tiles div{background:#f8f9fb;border-radius:10px;padding:10px 12px}
.tiles small{display:block;color:var(--sub);font-size:12px}
.tiles b{font-size:20px;font-variant-numeric:tabular-nums}
details.step>summary{cursor:pointer}
details.step>summary b{display:inline;margin:0}
button.go.short{width:auto}
button:disabled{opacity:.5;cursor:default}
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.subnav button{border:0;background:var(--field);border-radius:999px;padding:7px 14px;color:#374151;font-weight:500}
.subnav button.on{background:var(--acc);color:#fff}
table.plan td{vertical-align:top}
table.plan textarea{font:13px/1.45 Consolas,"D2Coding",monospace;width:140px;background:var(--field);border:1px solid transparent;border-radius:8px;padding:4px 6px;resize:vertical;color:var(--ink)}
table.plan textarea:focus,table.plan input[type=number]:focus{background:#fff;border-color:var(--acc);outline:none}
table.plan input[type=number]{font:inherit;width:68px;background:var(--field);border:1px solid transparent;border-radius:8px;padding:4px 6px}
table.plan input[type=checkbox]{accent-color:var(--acc);width:15px;height:15px}
.tag{white-space:nowrap}
.tag.t-inc{background:#fee2e2;color:#b91c1c}.tag.t-dot{background:#fef3c7;color:#92400e}.tag.t-col{background:#e0e7ff;color:#3730a3}
.warnc{color:#b45309}.okc{color:#059669}
.sw{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid var(--line);vertical-align:-1px}
.applymsg{margin:0}
.notice{background:var(--acc2)}
.notice button{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:600}
.lbl{font-size:13px}
.scroll{overflow-x:auto;max-width:100%}
.linkcard{border-top:1px solid var(--line2);padding:12px 0 2px;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.linkcard .sub{margin:0}
.linkcard input{font:inherit;width:100%;max-width:100%;min-width:0;background:var(--field);border:1px solid transparent;border-radius:8px;padding:8px 10px;color:var(--ink)}
.linkcard input:focus{background:#fff;border-color:var(--acc);outline:none}
.cands{display:flex;flex-direction:column;gap:6px}
.cand{display:block;width:100%;text-align:left;padding:9px 12px;line-height:1.4}
.cand:hover{border-color:var(--acc);background:var(--acc2)}
.cand b{font-weight:600}
.cand small{display:block;color:var(--sub);font-size:12px}
.cand.top{border-color:var(--acc)}
.cand i{font-style:normal;background:var(--acc);color:#fff;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;margin-right:6px}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 표 */
table{border-collapse:separate;border-spacing:0;margin:12px 0 0;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{border-bottom:1px solid var(--line2);padding:7px 12px;text-align:left}
tr:last-child>td{border-bottom:0}
th{background:#f8f9fb;color:#4b5563;font-weight:600;font-size:12.5px;white-space:nowrap}
/* 입력 */
button{font:inherit;padding:7px 14px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;transition:background .12s,border-color .12s}
button.go{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:600;padding:9px 18px;width:100%}
button.go:hover{background:var(--accd);border-color:var(--accd)}
input[type=password]{font:inherit;width:100%;background:var(--field);border:1px solid transparent;border-radius:8px;padding:9px 12px;color:var(--ink);outline:none}
input[type=password]:focus{background:#fff;border-color:var(--acc);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
/* 접속 비밀번호 화면 */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(180deg,var(--side1) 0%,var(--side2) 100%)}
.gate form{background:var(--card);border-radius:var(--r);padding:28px 24px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px}
.gate b{font-size:20px;letter-spacing:-.4px}
.gate .err{color:#b91c1c;font-size:13px;min-height:1em;margin:0}
/* 폰: 왼쪽 메뉴 → 아래쪽 탭 6개 */
@media (max-width:767px){
  .app{display:block}
  .main{padding:20px 16px 92px}
  .ptitle>b{font-size:26px}
  .step{padding:16px}
  .side{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:10;width:auto;height:auto;padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:var(--side1)}
  .side .brand,.side .foot{display:none}
  .side nav{flex-direction:row;margin:0;gap:2px}
  .side a.tab{flex:1 1 0;min-width:0;flex-direction:column;gap:2px;padding:6px 0;font-size:11px;letter-spacing:-.3px;text-align:center}
  .side a.tab .ic{width:22px;height:22px}
}
/* 재고맞추기 표: 좁은 칸에 긴 글이 세로로 늘어나 줄이 높아지지 않게 칸 너비를 잡는다 */
table.plan td:nth-child(2){white-space:nowrap}
table.plan td{min-width:64px}
table.plan td:nth-child(3){min-width:190px}
table.plan td:last-child{min-width:280px}
table.plan th{white-space:nowrap}
/* 폰: 요약은 다섯 칸 한 줄 */
@media (max-width:767px){
  .tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .tiles div{padding:7px 2px;text-align:center}
  .tiles small{font-size:11px;white-space:nowrap}
  .tiles b{font-size:14px;letter-spacing:-.4px}
}
.ptitle p:empty{display:none}
.ptitle b.line{display:inline;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.pick{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* 결과·비교 표는 줄바꿈 없이 한 줄로, 좁으면 옆으로 밀어서 본다 (재고맞추기 입력 표는 제외) */
.scroll>table:not(.plan) td,.scroll>table:not(.plan) th{white-space:nowrap}
.picks{display:inline-flex;gap:10px;flex-wrap:nowrap;min-width:0;max-width:100%}
.pick select{min-width:0}
.vgrp{margin-top:14px}
.vgrp>summary{cursor:pointer}
@media (max-width:767px){
  .picks{display:flex;width:100%;gap:8px}
  .pick{flex:1 1 0;min-width:0;gap:4px}
  .pick select{flex:1 1 0;width:100%;padding:7px 6px}
  .lbl{font-size:12px}
  input[type=file]{width:100%}
}
.orderframe{width:100%;height:calc(100vh - 190px);min-height:520px;border:1px solid var(--line);border-radius:12px;background:#fff}
@media (max-width:767px){.orderframe{height:calc(100vh - 250px)}}