:root{color-scheme:light;--bg:#F3F5F2;--surface:#FFFFFF;--ink:#17211B;--muted:#56625B;--line:#E1E6E2;--soft:#EEF2EF;--warn:#A9471A;--warn-soft:#FBEDE4;--ok:#1E6B45;--ok-soft:#E4F0E8;--info:#2045A8;--info-soft:#E5EBF8;--acc:#1E6B45;--acc-ink:#FFFFFF;--acc-soft:#E4F0E8;--acc-text:#1E6B45;--dark:#16201A;--dark-ink:#FFFFFF;--dark-muted:#C3CEC7;--dark-line:#33413A;--shadow:0 1px 2px rgba(20,30,25,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#0E1310;--surface:#171F1A;--ink:#E6ECE8;--muted:#A2AEA7;--line:#2A342E;--soft:#1F2822;--warn:#F0A07A;--warn-soft:#3A2419;--ok:#7FD1A3;--ok-soft:#1D3327;--info:#9DB4F2;--info-soft:#1E2740;--acc-soft:#1F2C24;--acc-text:#7FD1A3}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0E1310;--surface:#171F1A;--ink:#E6ECE8;--muted:#A2AEA7;--line:#2A342E;--soft:#1F2822;--warn:#F0A07A;--warn-soft:#3A2419;--ok:#7FD1A3;--ok-soft:#1D3327;--info:#9DB4F2;--info-soft:#1E2740;--acc-soft:#1F2C24;--acc-text:#7FD1A3}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans KR','Noto Sans KR','Noto Sans CJK KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--acc-text)}
:focus-visible{outline:3px solid #6AA8FF;outline-offset:2px}
img{max-width:100%}
h1,h2,h3{margin:0;line-height:1.3}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* phone column */
.phone{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;position:relative}
.bar{position:sticky;top:0;z-index:10;height:56px;display:flex;align-items:center;gap:4px;padding:0 8px;background:var(--surface);border-bottom:1px solid var(--line)}
.bar h1{font-size:17px}
.ib{width:44px;height:44px;border:0;background:transparent;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.ib svg{stroke:currentColor}
.scroll{flex:1;display:flex;flex-direction:column;gap:8px;padding-bottom:110px}
.sec{background:var(--surface);padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.sec h2{font-size:16px;margin-bottom:6px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px}
.kv span:first-child{color:var(--muted);flex-shrink:0}.kv span:last-child{font-weight:500;text-align:right}
.foot{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;background:var(--surface);border-top:1px solid var(--line);padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;z-index:12}
.btn{min-height:52px;border-radius:14px;border:0;font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;text-decoration:none}
.btn.pri{background:var(--acc);color:var(--acc-ink)}
.btn.sec2{background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn.dng{background:var(--surface);color:var(--warn);border:1px solid var(--warn);font-weight:500}
.btn.sm{min-height:38px;font-size:13px;border-radius:10px;padding:0 12px}
.btn.blk{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;font-size:12px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap}
.c-ok{background:var(--ok-soft);color:var(--ok)}.c-warn{background:var(--warn-soft);color:var(--warn)}.c-info{background:var(--info-soft);color:var(--info)}.c-mute{background:var(--soft);color:var(--muted)}.c-solid{background:var(--ok);color:var(--surface)}
.track{height:8px;border-radius:4px;background:var(--line);overflow:hidden}.track i{display:block;height:100%;border-radius:4px;background:var(--acc)}
.pic{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:14px}
.pic img{width:100%;height:100%;object-fit:contain}
.pic svg{width:72%;height:auto;max-height:100%}
.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price .r{font-weight:700;color:var(--warn)}.price .p{font-weight:700}.price .o{color:var(--muted);text-decoration:line-through;font-size:13px}
.unit{margin-left:auto;font-size:12px;color:var(--muted);background:var(--soft);border-radius:6px;padding:2px 8px}
.small{font-size:12px;color:var(--muted)}
.notice{display:flex;gap:8px;align-items:center;font-size:12.5px;padding:9px 12px;border-radius:10px}
.stepper{display:flex;align-items:center;gap:4px}.stepper button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:20px}.stepper b{width:40px;text-align:center;font-size:16px}
.radio{min-height:52px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;gap:12px;padding:0 14px;text-align:left;width:100%}
.radio[aria-checked="true"]{border:2px solid var(--acc);background:var(--acc-soft);font-weight:700}
.radio .dot{width:20px;height:20px;border-radius:10px;border:2px solid var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.radio[aria-checked="true"] .dot{border-color:var(--acc)}.radio[aria-checked="true"] .dot::after{content:"";width:10px;height:10px;border-radius:5px;background:var(--acc)}
.chk{display:flex;align-items:flex-start;gap:10px;border:0;background:transparent;padding:7px 0;text-align:left;font-size:13.5px;line-height:1.45;width:100%}
.chk .box{width:22px;height:22px;border-radius:11px;background:var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chk[aria-checked="true"] .box{background:var(--acc)}
.chk .box svg{stroke:var(--acc-ink)}
.sheetbg{position:fixed;inset:0;background:rgba(8,12,10,.55);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:480px;background:var(--surface);border-radius:22px 22px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow:auto}
.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;z-index:60;max-width:90vw}
.dots{display:flex;justify-content:center;gap:6px}.dots span{height:6px;width:6px;border-radius:3px;background:var(--dark-line);transition:width .3s}.dots span.on{width:20px;background:var(--dark-ink)}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--soft);border-radius:12px;padding:4px;gap:4px}
.tabs button{border:0;background:transparent;border-radius:9px;min-height:40px;font-size:14px}
.tabs button[aria-selected="true"]{background:var(--surface);font-weight:700;box-shadow:var(--shadow)}
.ocard{background:var(--surface);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center;border:0;text-align:left;width:100%}
.timeline{display:flex;flex-direction:column}
.tl{display:flex;gap:12px}.tl .col{display:flex;flex-direction:column;align-items:center;width:22px}
.tl .d{width:22px;height:22px;border-radius:11px;border:2px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center}
.tl.done .d{background:var(--acc);border-color:var(--acc)}.tl.cur .d{border-color:var(--acc)}
.tl .ln{flex:1;width:2px;min-height:18px;background:var(--line)}.tl.done .ln{background:var(--acc)}
.tl .tx{flex:1;padding-bottom:14px;display:flex;flex-direction:column}
.tl .tx b{font-size:14px}.tl:not(.done):not(.cur) .tx b{color:var(--muted);font-weight:500}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---------- type 1 : dark card ---------- */
.t1home{background:var(--dark);color:var(--dark-ink);flex:1;display:flex;flex-direction:column;gap:10px;padding:10px 16px 20px;min-height:100vh}
.t1home .ib{color:var(--dark-ink)}
.t1home .card{flex:1;background:#FFFFFF;color:#17211B;border-radius:22px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-height:560px}
.t1home .card .small{color:#56625B}.t1home .card .unit{background:#EEF2EF;color:#56625B}.t1home .card .price .r{color:#A9471A}.t1home .card .price .o{color:#56625B}
.cell{background:#F3F5F2;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;font-size:13px}.cell small{font-size:11px;color:#56625B}
/* ---------- type 2 : notice board grid ---------- */
.t2head{background:#F2B705;color:#1C1A12;padding:18px 18px 22px;display:flex;flex-direction:column;gap:6px}
.t2head h1{font-size:24px;letter-spacing:-.5px}
.t2grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
.t2card{background:var(--surface);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;border:0;padding:0;text-align:left}
.t2card .pic{border-radius:0;aspect-ratio:1/1}
.t2card .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px}
.t2card .nm{font-size:13.5px;font-weight:500;line-height:1.35;min-height:36px}
.t2tag{position:absolute;left:8px;top:8px}
/* ---------- type 3 : pickup calendar ---------- */
.t3hero{margin:12px;border-radius:20px;background:#2045A8;color:#FFFFFF;padding:18px;display:flex;gap:12px;align-items:center;min-height:168px;border:0;text-align:left;width:calc(100% - 24px)}
.t3hero .pic{width:120px;height:120px;flex-shrink:0;background:rgba(255,255,255,.14)}
.t3day{padding:6px 16px 4px;font-size:13px;font-weight:700;color:var(--muted)}
.t3row{display:flex;gap:12px;align-items:center;background:var(--surface);padding:12px 16px;border:0;border-bottom:1px solid var(--line);text-align:left;width:100%}
.t3row .pic{width:72px;height:72px;flex-shrink:0}
/* ---------- admin ---------- */
.adm{display:flex;flex-direction:column;min-height:100vh}
.side{position:sticky;top:0;z-index:9;flex-direction:row;overflow-x:auto;border-bottom:1px solid var(--line);background:var(--surface);padding:6px;display:flex;gap:2px}
.side .brand{padding:6px 10px 14px;display:none;flex-direction:column}
.side .brand b{font-size:15px}.side .brand span{font-size:12px;color:var(--muted)}
.side a,.side button{border:0;background:transparent;text-align:left;border-radius:10px;min-height:44px;white-space:nowrap;flex-shrink:0;text-decoration:none;gap:8px;padding:0 12px;font-size:14px;display:flex;align-items:center;justify-content:space-between;color:var(--ink)}
.side a[aria-current="page"],.side button[aria-current="page"]{background:var(--acc-soft);font-weight:700;color:var(--acc-text)}
.side .badge{font-size:11px;font-weight:700;background:var(--warn);color:var(--surface);border-radius:9px;padding:1px 7px}
.amain{flex:1;min-width:0;padding:16px;display:flex;flex-direction:column;gap:18px;max-width:1280px}
.ahead{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ahead h1{font-size:22px}.ahead .sub{font-size:13px;color:var(--muted)}.ahead .r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:var(--surface);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line)}
.kpi span{font-size:13px;color:var(--muted)}.kpi b{font-size:24px;letter-spacing:-.5px}.kpi small{font-size:12px;color:var(--muted)}
.panel{background:var(--surface);border-radius:14px;padding:18px;border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-width:0}
.panel h2{font-size:16px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
th{text-align:left;font-weight:500;color:var(--muted);padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inp{min-height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--surface);min-width:0}
textarea.inp{padding:10px 12px;min-height:80px}
.fl{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.pill{border:1px solid var(--line);background:var(--surface);border-radius:18px;min-height:34px;padding:0 12px;font-size:13px}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.thumb{width:44px;height:44px;border-radius:10px;flex-shrink:0}
.empty{padding:28px;text-align:center;color:var(--muted);font-size:14px}
.modal{width:100%;max-width:640px;background:var(--surface);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;max-height:90vh;overflow:auto;margin:auto}
.mbg{position:fixed;inset:0;background:rgba(8,12,10,.55);z-index:40;display:flex;padding:16px}
.chart svg{width:100%;max-width:860px;height:auto;display:block}

[data-type="2"]{--acc:#F2B705;--acc-ink:#1C1A12;--acc-soft:#FDF3D0;--acc-text:#8A5A00}
[data-type="3"]{--acc:#2045A8;--acc-ink:#FFFFFF;--acc-soft:#E5EBF8;--acc-text:#2045A8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-type="2"]{--acc-soft:#3A3010;--acc-text:#F2C94C}:root:not([data-theme="light"]) [data-type="3"]{--acc-soft:#1E2740;--acc-text:#9DB4F2}}

/* 넓은 화면(861px~): 왼쪽 메뉴 */
@media (min-width:861px){
  .adm{flex-direction:row}
  .side{width:220px;flex-shrink:0;flex-direction:column;overflow-y:auto;overflow-x:visible;height:100vh;border-bottom:0;border-right:1px solid var(--line);padding:14px 10px}
  .side .brand{display:flex}
  .amain{padding:24px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 실제 서비스용 추가(시안에 없던 것) ── */
a.btn{text-decoration:none}
.btn.pri,.btn.sec2,.btn.dng{min-width:44px}
.msg-page{max-width:480px;margin:0 auto;padding:72px 24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.msg-page h1{font-size:22px}.msg-page p{color:var(--muted);margin:0;line-height:1.6}
.flash{margin:12px 16px 0;padding:12px 14px;border-radius:12px;font-size:14px;background:var(--ok-soft);color:var(--ok)}
.flash.bad{background:var(--warn-soft);color:var(--warn)}
.amain .flash{margin:0}
.side .sp{flex:1}
.side form{margin:0}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login>form,.login>.box{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px}
.login h1{font-size:20px}.login p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.login .qr{align-self:center;background:#fff;padding:8px;border-radius:12px}
.inp{font-size:16px;min-height:44px}
select.inp{padding-right:28px}
.fl .hint{font-weight:400;color:var(--muted);font-size:12px}
.fl.full{grid-column:1/-1}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.right{margin-left:auto}
.help{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0}
.ib{text-decoration:none}
.pill{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);min-height:44px}
.pill[aria-current="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.info{background:var(--info-soft);color:var(--info)}.chip.mute{background:var(--soft);color:var(--muted)}
.chip.bad{background:var(--warn);color:var(--surface)}
.kv span:last-child{min-width:0;overflow-wrap:anywhere}
.nowrap{white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}
.pickup-result{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;background:var(--soft)}
.pickup-result.ok{background:var(--ok-soft)}.pickup-result.bad{background:var(--warn-soft)}
.pickup-result b{font-size:18px}
/* 표: 좁은 화면에서는 행마다 카드(라벨 · 값), 768px 부터 표 */
.tw{overflow-x:visible}
.tbl{min-width:0;width:100%}
.tbl thead{display:none}
.tbl tbody{display:flex;flex-direction:column;gap:10px}
.tbl tr{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.tbl td{display:flex;justify-content:space-between;gap:12px;border:0;padding:5px 0;min-width:0;overflow-wrap:anywhere;text-align:right}
.tbl td::before{content:attr(data-label);color:var(--muted);font-size:12.5px;text-align:left;flex-shrink:0}
.tbl td.key{font-weight:700;text-align:left;justify-content:flex-start}
.tbl td.key::before{display:none}
.tbl td.act{justify-content:flex-end;flex-wrap:wrap}
.tbl td.act::before{display:none}
.tbl .cell-prod{display:flex;gap:10px;align-items:center;min-width:0;text-align:left}
@media (min-width:768px){
  .tbl thead{display:table-header-group}
  .tbl tbody{display:table-row-group}
  .tbl tr{display:table-row;border:0;padding:0}
  .tbl td{display:table-cell;border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}
  .tbl td::before{display:none}
  .tbl td.num{text-align:right}
  .tbl td.act{text-align:right}
}
/* 웹뷰 폼 요소(시안의 aria-checked 모양을 실제 입력과 연결) */
.radio:has(input:checked){border:2px solid var(--acc);background:var(--acc-soft);font-weight:700}
.radio:has(input:checked) .dot{border-color:var(--acc)}
.radio:has(input:checked) .dot::after{content:"";width:10px;height:10px;border-radius:5px;background:var(--acc)}
.radio:has(input:focus-visible),.chk:has(input:focus-visible){outline:3px solid #6AA8FF;outline-offset:2px}
.chk{cursor:pointer}
.chk:has(input:checked) .box{background:var(--acc)}
.chk .box svg{width:14px;height:14px}
.tabs a{border:0;background:transparent;border-radius:9px;min-height:44px;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none}
.tabs a[aria-selected="true"]{background:var(--surface);font-weight:700;box-shadow:var(--shadow)}
.ocard{text-decoration:none}
[hidden]{display:none!important}
.stepper input{display:none}
.foot{z-index:20}
.t1home .ib{text-decoration:none}
.toast[hidden]{display:none}

.login .box form{margin:0}
.login .box .panel{border:0;padding:0}
.login .box .row h1{margin-right:auto}
/* ── 반응형 검사 반영(2026-11-02) ── */
/* 선택 입력은 1px 로 숨기지 않고 줄 전체에 투명하게 겹친다(누를 곳 = 줄 전체) */
.radio,.chk{position:relative}
.radio input,.chk input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chk{min-height:44px;align-items:center}
/* 작은 버튼 · 아이콘 · 글 속 링크도 44px */
.btn.sm{min-height:44px}
.ib{flex-shrink:0}
.login p a,.help a,.empty a{display:inline-flex;align-items:center;min-height:44px}
.cell small{font-size:12px}
/* 수량: 긴 글자에서도 잘리지 않게 */
.stepper{flex-wrap:wrap;justify-content:flex-end}
.stepper button{width:auto;min-width:44px;padding:0 10px}
/* 좁은 화면에서 2열 칸이 화면보다 넓어지지 않게 */
.grid2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.chart{min-width:0}
/* 휴대폰 · 태블릿: 메뉴를 가로로 밀지 않고 줄바꿈 */
.side{flex-wrap:wrap;overflow-x:visible;position:static}
.side a,.side button{white-space:normal}
.side form{flex:1 1 auto}
@media (min-width:861px){ .side{flex-wrap:nowrap;position:sticky} }
@media (min-width:1024px){ .btn.sm{min-height:38px} }
.side .badge{font-size:12px}
.tbl th{white-space:normal;overflow-wrap:anywhere}
.tbl td{overflow-wrap:anywhere}
.row .inp{min-width:min(160px,100%)}
.tbl td .inp{min-width:min(88px,100%)}
.stack{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
.demo-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:6px 16px;background:#FFF4D6;color:#6B4E00;font-size:13px}
.demo-bar a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:#6B4E00}