/* ═══ 작목반 유통지원센터 · 공통 디자인 시스템 (사이트맵 v4.0 톤 계승) ═══ */
:root{
  --forest:#1F4A36; --forest2:#2C6749; --sage:#6F9079; --leaf:#E6EFE1; --leaf2:#DFE9D8;
  --clay:#BD6336; --clayL:#F7E9E2; --gold:#B8923F; --goldL:#FAF3E2;
  --paper:#F3EFE4; --card:#FFFEFA; --ink:#1B2016; --ink2:#4A5443; --line:#E6EFE1;
  --info:#2C5578; --infoL:#E3EDF6; --side:#16271D; --danger:#A93B2C; --dangerL:#F7E3DF;
  --r-card:18px; --r-ctrl:12px; --r-pill:999px;
  --sh:0 6px 20px rgba(27,32,22,.06); --sh2:0 14px 34px rgba(27,32,22,.14);
  --line2:#DFE9D8; --divider:#C5CABD; --ink3:#767D70; --ink4:#9AA393;
  --sh-primary:0 8px 22px rgba(31,74,54,.28);
  --sans:'Pretendard',system-ui,-apple-system,'Malgun Gothic',sans-serif;
  --serif:'Gowun Batang',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);line-height:1.55;background:var(--paper);
  background-image:radial-gradient(circle at 12% 6%,rgba(111,144,121,.10),transparent 45%),
                   radial-gradient(circle at 92% 96%,rgba(189,99,54,.07),transparent 45%);
  background-attachment:fixed;font-size:14.5px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.serif{font-family:var(--serif)}
.muted{color:var(--ink2);font-size:13px}
.hide{display:none!important}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  font:700 13.5px var(--sans);padding:9px 18px;border-radius:var(--r-ctrl);border:1px solid var(--line);
  background:var(--card);color:var(--forest);transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--sage);box-shadow:var(--sh)}
.btn.primary{background:var(--forest);border-color:var(--forest);color:#fff}
.btn.primary:hover{background:var(--forest2)}
.btn.clay{background:var(--clay);border-color:var(--clay);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.info{background:var(--info);border-color:var(--info);color:#fff}
.btn.ghost{background:transparent}
.btn.danger{background:var(--dangerL);border-color:rgba(169,59,44,.35);color:var(--danger)}
.btn.sm{padding:5px 12px;font-size:12px;border-radius:9px}
.btn.lg{padding:13px 28px;font-size:15px}
.btn.block{width:100%}

/* ── 배지·칩 ── */
.badge{display:inline-block;font-size:11px;font-weight:800;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--leaf);color:var(--forest2);border:1px solid var(--leaf2);vertical-align:middle}
.badge.clay{background:var(--clayL);color:var(--clay);border-color:rgba(189,99,54,.25)}
.badge.gold{background:var(--goldL);color:#8a6c25;border-color:rgba(184,146,63,.3)}
.badge.info{background:var(--infoL);color:var(--info);border-color:rgba(44,85,120,.25)}
.badge.danger{background:var(--dangerL);color:var(--danger);border-color:rgba(169,59,44,.25)}
.badge.dark{background:var(--side);color:#fff;border-color:var(--side)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink2);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;cursor:pointer;transition:.15s}
.chip:hover,.chip.on{background:var(--forest);color:#fff;border-color:var(--forest)}

/* ── 카드 ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);padding:20px 22px;margin-bottom:16px}
.card>h2{font-size:16.5px;font-weight:800;color:var(--forest);margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card>h2 .badge{margin-left:2px}
.card .cardmeta{margin-left:auto;font-size:12px;color:var(--ink2);font-weight:400}
.grid{display:grid;gap:16px}
@media(min-width:860px){.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:1fr 1fr 1fr}.grid.c4{grid-template-columns:repeat(4,1fr)}}

/* ── KPI ── */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);padding:16px 18px}
.kpi .k{font-size:12px;font-weight:700;color:var(--ink2)}
.kpi .v{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--forest);margin-top:4px}
.kpi .d{font-size:12px;font-weight:700;margin-top:2px}
.kpi .d.up{color:var(--clay)} .kpi .d.down{color:var(--info)} .kpi .d.flat{color:var(--ink2)}

/* ── 테이블 ── */
/* 표가 가로로 잘렸다는 것을 **보여 준다** — 스크롤 신호가 없으면 그 숫자가 있는 줄도 모른다.
   흰 덮개(local) + 그림자(scroll) 조합이라 스크롤 끝에 닿으면 그림자가 사라진다.
   ※ 처음엔 좁은 화면 전용이었는데, grid item 이 줄어들게 된 뒤로는 **데스크톱에서도** 표가 카드 안에서 잘린다. */
/* ★ min-width:0 — 래퍼의 기본 최소 크기는 **내용의 min-content** 라 표가 넓으면 래퍼도 같이 넓어지고,
   그러면 부모(grid item)가 못 줄어들어 **페이지 전체가 가로로 넘친다**
   (/mypage 가 900·1024·1200px 에서 68~244px 넘치고 있었다 — 태블릿 폭을 훑다 발견).
   ★ background 는 한 선언에 몰아 쓴다 — 규칙을 둘로 나누면 뒤 규칙이 앞 배경을 덮는다. */
.tblwrap{
  overflow:auto;min-width:0;
  border:1px solid var(--line);border-radius:var(--r-ctrl);
  background:
    linear-gradient(to right, var(--card) 40%, rgba(255,254,250,0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--card) 40%, rgba(255,254,250,0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(27,32,22,.20), rgba(27,32,22,0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(27,32,22,.20), rgba(27,32,22,0)) right center / 12px 100% no-repeat scroll,
    var(--card);
}
/* min-width 는 좁은 화면에서 셀이 뭉개지지 말라고 둔 것이다(모바일 규칙에서 560px 로 따로 준다).
   데스크톱에도 640px 를 고정으로 걸었더니 **2열 그리드 안의 좁은 카드**에서 표가 늘 잘렸다
   (작목반 홈 연락처가 그랬다). 열 머리글은 이미 nowrap 이라 뭉개지지 않는다. */
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:0}
.tbl th{background:var(--leaf);color:var(--forest);font-weight:800;font-size:12px;text-align:left;
  padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid #EEF2EC;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--paper)}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .rowact{display:flex;gap:6px;justify-content:flex-end}

/* ── 폼 ── */
.form{display:grid;gap:16px}
@media(min-width:820px){.form.c2{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.field label{display:block;font-size:12.5px;font-weight:800;color:var(--forest);margin-bottom:6px}
.field label .req{color:var(--clay)}
.field .help{font-size:11.5px;color:var(--ink2);margin-top:5px}
.inp,.sel,.txa{width:100%;font:400 14px var(--sans);color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-ctrl);padding:10px 13px;transition:.15s}
.inp:focus,.sel:focus,.txa:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(111,144,121,.15)}
.txa{min-height:110px;resize:vertical}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios label{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;cursor:pointer;background:#fff}
.radios input:checked+span{color:var(--forest);font-weight:800}
.formact{display:flex;gap:10px;justify-content:flex-end;padding-top:8px;border-top:1px dashed var(--line);grid-column:1/-1}
.check{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink2)}

/* ── 탭 ── */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tab{cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink2);
  font-size:13px;font-weight:700;padding:8px 16px;border-radius:var(--r-pill);transition:.15s}
.tab:hover{border-color:var(--sage)}
.tab.on{background:var(--forest);color:#fff;border-color:var(--forest)}
.tabpane{display:none}.tabpane.on{display:block}

/* ── 필터바 ── */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);padding:14px 16px;margin-bottom:16px}
.filterbar .field{min-width:150px;flex:1}
.filterbar .btn{margin-bottom:1px}

/* ── 브레드크럼·페이지헤드 ── */
.crumb{font-size:12px;color:var(--ink2);margin:18px 0 8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.crumb a:hover{color:var(--forest);text-decoration:underline}
.pagehead{margin-bottom:18px}
.pagehead h1{font-family:var(--serif);font-size:26px;color:var(--forest);line-height:1.25;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pagehead p{color:var(--ink2);font-size:13.5px;margin-top:6px;max-width:820px}
.pagehead .headact{float:right;display:flex;gap:8px}

/* ── 알림·안내 ── */
.note{border-radius:var(--r-ctrl);padding:12px 16px;font-size:13px;margin-bottom:16px;border:1px solid}
.note.green{background:var(--leaf);border-color:var(--leaf2);color:var(--forest)}
.note.gold{background:var(--goldL);border-color:rgba(184,146,63,.3);color:#7a5f20}
.note.info{background:var(--infoL);border-color:rgba(44,85,120,.2);color:var(--info)}
.note.clay{background:var(--clayL);border-color:rgba(189,99,54,.25);color:var(--clay)}
.note b{font-weight:800}

/* ── 리스트형 카드 ── */
.cardlist{display:grid;gap:12px}
@media(min-width:780px){.cardlist.c2{grid-template-columns:1fr 1fr}.cardlist.c3{grid-template-columns:1fr 1fr 1fr}.cardlist.c4{grid-template-columns:repeat(4,1fr)}}
.item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:16px 18px;display:flex;flex-direction:column;gap:6px;transition:.15s}
a.item:hover{box-shadow:var(--sh2);border-color:var(--sage);transform:translateY(-2px)}
.item .t{font-weight:800;font-size:14.5px;color:var(--forest);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.item .d{font-size:12.5px;color:var(--ink2)}
.item .meta{font-size:11.5px;color:var(--ink2);display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.item .price{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--clay)}

/* ── 스텝 ── */
.steps{display:flex;flex-wrap:wrap;gap:0;counter-reset:st;margin-bottom:18px}
.steps .st{flex:1;min-width:120px;text-align:center;position:relative;padding:10px 6px;color:var(--ink2);font-size:12.5px;font-weight:700}
.steps .st::before{counter-increment:st;content:counter(st);display:block;width:30px;height:30px;line-height:28px;
  margin:0 auto 6px;border-radius:50%;background:var(--card);border:2px solid var(--line);font-size:13px;color:var(--ink2)}
.steps .st.on{color:var(--forest)}
.steps .st.on::before{background:var(--forest);border-color:var(--forest);color:#fff}
.steps .st::after{content:'';position:absolute;top:24px;left:calc(50% + 20px);width:calc(100% - 40px);height:2px;background:var(--line)}
.steps .st:last-child::after{display:none}

/* ── 상세 정의 리스트 ── */
.dl{display:grid;grid-template-columns:130px 1fr;font-size:13.5px;border-top:2px solid var(--forest)}
.dl dt{padding:10px 12px;background:var(--leaf);color:var(--forest);font-weight:800;font-size:12.5px;border-bottom:1px solid var(--line)}
.dl dd{padding:10px 14px;border-bottom:1px solid #EEF2EC}

/* ── 타임라인 ── */
.tl{list-style:none;position:relative;padding-left:22px}
.tl::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--leaf2)}
.tl li{position:relative;padding:0 0 16px 10px;font-size:13px}
.tl li::before{content:'';position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--sage);border:2px solid #fff;box-shadow:0 0 0 2px var(--leaf2)}
.tl li.on::before{background:var(--clay)}
.tl li b{display:block;color:var(--forest);font-size:13.5px}
.tl li span{color:var(--ink2);font-size:12px}

/* ── 채팅(AI 상담) ── */
.chatbox{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;min-height:320px;margin-bottom:14px}
.msg{max-width:78%;padding:11px 15px;border-radius:16px;font-size:13.5px;line-height:1.6}
.msg.ai{background:var(--leaf);border:1px solid var(--leaf2);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--forest);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg .who{font-size:10.5px;font-weight:800;opacity:.65;display:block;margin-bottom:3px}

/* ── 캘린더 ── */
/* ★ table-layout:fixed — 일정 제목(.ev)이 nowrap 이라 자동 레이아웃에서는 칸을 밀어낸다.
   390px 화면에서 표가 541px 이 되어 페이지가 가로로 넘쳤다(2026-08-12 J3 검수).
   달력은 옆으로 스크롤할 물건이 아니다 — 칸을 7등분으로 고정하고 제목은 … 로 줄인다. */
.cal{width:100%;table-layout:fixed;border-collapse:collapse;background:var(--card);font-size:12.5px}
.cal th{background:var(--leaf);color:var(--forest);padding:8px;font-size:11.5px;border:1px solid var(--line)}
.cal td{border:1px solid #EDE8DA;vertical-align:top;height:76px;padding:5px 6px;width:14.28%}
.cal td .dnum{font-weight:800;font-size:11.5px;color:var(--ink2)}
.cal td.today{background:var(--leaf)}
.cal .ev{display:block;font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 6px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .ev.g{background:var(--leaf2);color:var(--forest)}
.cal .ev.c{background:var(--clayL);color:var(--clay)}
.cal .ev.b{background:var(--infoL);color:var(--info)}

/* ── 차트 플레이스홀더 ── */
.chart{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);padding:16px 18px;margin-bottom:16px}
.chart .ct{font-size:13px;font-weight:800;color:var(--forest);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.chart .bars{display:flex;align-items:flex-end;gap:6px;height:150px;border-bottom:2px solid var(--line);padding:0 4px}
.chart .bars i{flex:1;background:linear-gradient(180deg,var(--sage),var(--forest));border-radius:6px 6px 0 0;min-width:10px;opacity:.9}
.chart .bars i.hl{background:linear-gradient(180deg,#D98A5B,var(--clay))}
.chart .xlab{display:flex;gap:6px;padding:6px 4px 0;font-size:10.5px;color:var(--ink2)}
.chart .xlab span{flex:1;text-align:center;min-width:10px}

/* ── 페이지네이션 ── */
.paging{display:flex;gap:6px;justify-content:center;margin:18px 0}
.paging a{min-width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:9px;background:var(--card);font-size:12.5px;font-weight:700;color:var(--ink2)}
.paging a.on{background:var(--forest);color:#fff;border-color:var(--forest)}
.paging a:hover{border-color:var(--sage)}

/* ── 모달 ── */
.modal-back{position:fixed;inset:0;background:rgba(27,32,22,.45);display:none;place-items:center;z-index:90;padding:20px}
.modal-back.on{display:grid}
.modal{background:var(--card);border-radius:var(--r-card);box-shadow:var(--sh2);max-width:420px;width:100%;padding:24px}
.modal h3{font-size:16px;color:var(--forest);margin-bottom:8px}
.modal p{font-size:13px;color:var(--ink2);margin-bottom:18px}
.modal .modalact{display:flex;gap:8px;justify-content:flex-end}

/* ── 빈 상태·상태점 ── */
.empty{text-align:center;padding:44px 20px;color:var(--ink2);font-size:13px}
.empty .ico{font-size:34px;margin-bottom:8px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.dot.g{background:var(--forest2)}.dot.y{background:var(--gold)}.dot.r{background:var(--danger)}.dot.b{background:var(--info)}.dot.gr{background:#9aa08e}

/* ── 목업 공통 ── */
/* .mock-tip — 목업 워터마크. 2026-08-08 앱에서 제거(목업 원본에는 남아 있어 스타일만 보존).
   실제 서비스가 스스로를 "기획 목업"이라고 말하면 안 된다. */
.thumb{border-radius:var(--r-ctrl);background:linear-gradient(135deg,var(--leaf),var(--leaf2));border:1px solid var(--leaf2);
  aspect-ratio:4/3;display:grid;place-items:center;font-size:34px;color:var(--sage);margin-bottom:8px}
.thumb.sm{aspect-ratio:auto;height:64px;width:64px;font-size:24px;margin:0}

/* ═══ 모바일 대응 (2026-08-08 실측 후 추가) ═══
   375px 로 31화면을 훑었더니 30화면에 **가로 스크롤**이 났다. 원인은 셋뿐이었다:
     ① grid/flex 자식의 기본값이 `min-width:auto` 라 넓은 내용(표·차트)이 컨테이너를 밀어낸다
        → 스크롤 래퍼가 있어도 소용이 없다. 줄어들 수 있게 min-width:0 을 준다
        (관리자 사이드바에서 min-height:0 이 없어 스크롤이 안 생긴 것과 같은 원리)
     ② GNB 유틸바 4개(알림·그린페이·장바구니·마이)가 한 줄에 안 들어간다
     ③ 차트 막대가 최소 너비 때문에 컨테이너보다 넓어진다
   ★ body{overflow-x:hidden} 으로 덮지 않는다 — 증상만 가리고 내용은 여전히 잘린다. */

/* ★ min-width:0 은 **모바일에서만** 준다.
   전역으로 주면 데스크톱 grid 열 계산이 바뀌어 카드 배치가 무너진다
   (실제로 작목반 홈·마이 홈이 6% 어긋나 레이아웃 게이트가 잡았다). */
@media (max-width: 760px) {
  /* ① 넓은 내용은 컨테이너를 밀어내지 말고 **자기 안에서** 스크롤한다 */
  .layout, .layout > *, main, .adminlayout > *, .admain,
  .grid > *, .adgrid > *, .cardlist > * { min-width: 0 }
  .tblwrap { max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch }

  /* 상단 유틸바 — 좁으면 글자가 한 글자씩 쪼개진다("로/그/인"). 줄바꿈을 막고 가로로 넘긴다 */
  .utilbar { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch }
  .utilbar a, .utilbar span { white-space: nowrap }

  /* ② GNB 유틸바 — 좁으면 줄이고, 그래도 모자라면 가로로 넘겨 보이게 한다 */
  .gnbuser { gap: 8px; font-size: 11px; margin-left: 0; flex-wrap: wrap; justify-content: flex-end }
  .gnbuser a { flex-direction: row; gap: 4px; white-space: nowrap }
  .gnbuser a .ico { font-size: 15px }
  /* 라벨(텍스트 노드)까지 다 보이면 헤더가 화면 절반을 먹는다.
     텍스트 노드는 선택자로 못 잡으므로 글자 크기를 0으로 접고 아이콘만 되살린다. */
  .gnbuser a { font-size: 0 }
  .gnbuser a .ico { font-size: 20px }
  .gnbuser a .cartn em, .gnbuser .cartn em { font-size: 9.5px }
  /* 헤더 한 줄에 로고+검색+유틸이 다 들어가지 않는다.
     부모에 줄바꿈을 허용하고 검색창을 아래 줄로 내린다(모바일에서 검색은 크게 쓰는 게 낫다). */
  /* ★ 선택자가 빗나가 있었다 — 실제 flex 행은 .gnb .wrap 이 아니라 .gnbtop 이다(2026-08-08).
     그래서 좁은 화면에서 로고·검색·아이콘이 한 줄에 겹쳐 있었다. */
  .gnbtop { flex-wrap: wrap; row-gap: 10px; gap: 10px; padding: 12px 14px }
  .gnbsearch { max-width: 100%; flex: 1 0 100%; order: 10 }
  .gnbuser { margin-left: auto }
  .logo b { font-size: 15px }

  /* ③ 차트 — 막대가 좁아지면 읽을 수 없으니 최소폭을 지키되 카드 안에서 스크롤 */
  .chart { overflow-x: auto }
  .chart .bars, .chart .xlab { min-width: 320px }

  /* 표는 스크롤 래퍼가 받는다. 셀이 뭉개지지 않게 최소폭만 유지.
     ★ 선택자를 `table.tbl` 로 쓴다 — 위 기본 규칙이 `table.tbl{min-width:0}` 이라
     `.tbl` 로 쓰면 **미디어쿼리 안이라도 특이도에서 져서 통째로 무효**가 된다
     (2026-08-11 J1: 그 상태에서 관리자 심사 표가 390px 에 눌려 신청자 이름이 한 글자씩 끊겼다) */
  table.tbl { min-width: 560px }
  /* 열이 많은 표(출금 승인은 7열)는 560px 로도 모자라 한 열이 55px 까지 눌린다 —
     "춘천 사과 작목반" 이 세 줄로 끊긴다. 열마다 최소폭을 주고 넘치는 만큼 래퍼가 스크롤한다.
     표를 넓히는 대신 **각 칸을 읽을 수 있게** 하는 쪽을 골랐다(액션 열은 오른쪽 고정이라 늘 보인다). */
  table.tbl th, table.tbl td { min-width: 88px }
  .tblwrap { overflow-x: auto }


  /* 표 안에 인라인으로 펼쳐지는 폼(공동구매 발주 등).
     표는 가로로 스크롤되는데 폼은 표의 **왼쪽 끝**에 그려진다 —
     오른쪽으로 스크롤한 상태에서 폼을 열면 화면에는 빈 칸만 보인다(발주 버튼이 오른쪽에 있으니 늘 그 상태다).
     폼 내용을 화면 왼쪽에 붙여 둔다. */
  .tbl td.inlineform > * {
    position: sticky;
    left: 0;
    max-width: calc(100vw - 56px);
  }

  /* ★ 액션 열을 오른쪽에 고정한다.
     좁은 화면에서 표가 가로로 잘리면 **승인·수정 버튼이 화면 밖에 있고**, 표가 스크롤된다는
     사실 자체가 안 보인다 — 운영자는 할 수 있는 일이 있는 줄도 모른다
     (출금 승인 화면에서 액션 버튼 4개가 전부 x=544, 화면 폭 390 이었다).
     `:has()` 로 **액션 버튼이 실제로 있는 표에만** 적용한다. 그냥 마지막 열을 고정하면
     액션이 없는 표에서 잔액 같은 데이터 열이 본문 위에 떠 버린다. */
  .tbl:has(td .btn) th:last-child,
  .tbl:has(td .btn) td:last-child {
    position: sticky;
    right: 0;
    box-shadow: -8px 0 8px -8px rgba(27, 32, 22, .28);
  }
  .tbl:has(td .btn) td:last-child { background: var(--card) }
  .tbl:has(td .btn) th:last-child { background: var(--leaf) }

  /* 페이지네이션 — 페이지가 많으면 한 줄에 안 들어간다. 줄바꿈시켜 문서를 밀지 않게 */
  .paging { flex-wrap: wrap }

  /* 스텝바(주문서·가입 위저드) — 3단계가 한 줄에 안 들어가 문서를 밀어냈다.
     세로로 쌓는다. 좁은 화면에서 가로 스텝바는 어차피 글자가 뭉개진다. */
  .steps { flex-direction: column; gap: 6px }
  .steps .st { width: 100%; min-width: 0 }
  /* 단계 사이 연결선은 가로 배치를 전제로 좌표를 계산한다(left: 50%+20px, width: 100%-40px).
     세로로 쌓으면 그대로 화면 밖으로 뻗어 문서를 밀어낸다 — 세로에서는 선 자체가 의미도 없다. */
  .steps .st::after { display: none }

  /* 여백·글자 크기 — 좁은 화면에서 본문이 벽에 붙지 않게 */
  .wrap { padding: 0 14px }
  .kpi .v { font-size: 22px }
  .filterbar { flex-wrap: wrap; gap: 8px }
  .formact { flex-wrap: wrap }
}

/* 입력 아래 한 줄 안내 — 지금 이 입력이 무엇을 바꾸는지 알려 줄 때만 쓴다 */
.hint{margin:6px 0 0;font-size:13px;color:var(--ink3)}
.hint.warn{color:var(--clay)}

/* ── 레이어(모달) ─────────────────────────────────────────────────────
   가운데 띄운다. 화면 맨 위 알림은 아래쪽을 보고 있는 사람에게 안 보인다. */
.modalback{position:fixed;inset:0;background:rgba(27,32,22,.45);display:flex;align-items:center;
  justify-content:center;padding:20px;z-index:1000}
.modalbox{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh2);
  width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column}
.modalbox.danger{border-color:rgba(169,59,44,.35)}
.modalhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.modalhead h3{margin:0;font-size:17px;color:var(--forest)}
.modalbox.danger .modalhead h3{color:var(--danger)}
.modalx{border:0;background:transparent;font-size:18px;line-height:1;cursor:pointer;color:var(--ink3);padding:4px 6px}
.modalx:hover{color:var(--ink)}
.modalbody{padding:18px;overflow-y:auto;color:var(--ink2);font-size:14px}
.modalfoot{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}

/* 입력 + 버튼 한 줄 (주소 검색 등) */
.inprow{display:flex;gap:8px;align-items:center}
.inprow .inp{flex:1;min-width:0}

/* 링크처럼 보이는 버튼 — 페이지를 떠나지 않고 레이어를 여는 자리 */
.linkbtn{border:0;background:transparent;padding:0;color:var(--forest2);text-decoration:underline;
  cursor:pointer;font:inherit}
.hint.err{color:var(--danger)}
.hint.full{grid-column:1/-1}

/* 체크박스 줄의 라벨은 인라인이어야 한다 — .field label 의 display:block 을 그대로 두면
   "전문 보기" 같은 옆자리 요소가 다음 줄로 밀린다 */
.field.check label{display:inline;font-size:inherit;font-weight:inherit;color:inherit;margin:0}

@media (max-width: 760px) {
  /* GNB 하위 메뉴 — 손가락에는 hover 가 없다. 눌러도 안 닫히는 레이어가 본문·푸터를 덮었다.
     상위 항목마다 실제 링크가 있으므로 모바일에서는 드롭다운을 접고 **누르면 그 화면으로 간다**. */
  .gnb .dd { display: none !important }
  /* 이 두 줄은 특이도가 낮아 줄곧 무효였다 — nav.gnb 로 올린다 */
  .gnbwrap nav.gnb ul.main > li > a { padding: 8px 10px; font-size: 13.5px }
}

@media (max-width: 760px) {
  /* ── 좁은 화면에서 "첫 화면에 내용이 없다"를 고친다 ──────────────────────
     종전에는 유틸바 + 로고 + 아이콘/검색 + GNB 3줄 + 서브내브 9항목이 차례로 쌓여
     정작 본문은 스크롤을 한참 내려야 나왔다(2026-08-10 눈검수). */

  /* ① 상단 유틸바 — 마이 3종·관리자·전체 페이지는 데스크톱 편의 링크다. 좁은 화면에서는 감춘다.
     ★ 단 **로그인·회원가입은 남긴다** — 통째로 감췄더니 /store·/subsidy 에서
       가입으로 가는 길이 0개가 됐다(2026-08-10 가입 실검수에서 발견). */
  .utilbar a:not(.keep) { display: none }
  .utilbar .sep { display: none }
  .utilbar .wrap { gap: 14px; padding: 7px 14px; justify-content: center }
  .utilbar a.keep { font-size: 12.5px; padding: 2px 4px }

  /* ② GNB — 3줄로 쌓이던 것을 한 줄 가로 스크롤로 */
  /* ★ common.css 가 front.css 보다 **먼저** 로드된다 — 같은 특이도면 front.css 가 이긴다.
     그래서 여기서는 한 단계 더 구체적으로 쓴다(.gnbwrap 을 앞에 둔다). 2026-08-10 발견 */
  .gnbwrap nav.gnb ul.main { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none }
  .gnbwrap nav.gnb ul.main::-webkit-scrollbar { display: none }
  .gnbwrap nav.gnb ul.main > li { flex: none }
  .gnbwrap nav.gnb ul.main > li > a { white-space: nowrap }

  /* ③ 서브내브 — 세로 목록이 화면 하나를 통째로 먹었다. 가로 탭 줄로 바꾼다 */
  aside.subnav { position: static; margin-bottom: 12px }
  .subnav .snhead { display: none }              /* 제목은 본문 h1 이 이미 말한다 */
  .subnav .sndiv { display: none }               /* 구분 캡션은 한 줄에서 의미가 없다 */
  .subnav ul { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; scrollbar-width: none }
  .subnav ul::-webkit-scrollbar { display: none }
  .subnav li { flex: none }
  .subnav li a { white-space: nowrap; border: 1px solid var(--line); background: var(--card);
    padding: 7px 12px; font-size: 13px }
}

@media (max-width: 760px) {
  /* ── 탭 대상 크기 ────────────────────────────────────────────────────────
     손가락은 마우스 포인터가 아니다. 표 안 액션 버튼이 26px, GNB 검색이 30px,
     체크박스가 13px 이었다(2026-08-10 측정) — 누르려면 조준을 해야 하는 크기다.
     넓은 화면은 그대로 두고 좁은 화면에서만 키운다. */
  .btn.sm { min-height: 40px; padding: 8px 14px; font-size: 13px }
  .tbl .rowact { gap: 8px }
  /* ★ front.css 가 나중에 로드된다 — 같은 특이도(.gnbsearch button)로는 진다.
     이 함정을 이 세션에서만 세 번째 밟았다: 선택자 오조준 → 특이도 → 로드 순서. */
  form.gnbsearch button { width: 40px; height: 40px }
  .subnav li a { min-height: 40px }
  /* 체크·라디오는 라벨과 함께 눌리지만, 상자 자체도 조준 없이 눌릴 만해야 한다 */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px }
  .field.check { display: flex; align-items: center; gap: 8px }
  /* 관리자 서랍의 대분류 — 폭은 넓지만 높이가 35px 였다 */
  .grpbtn { min-height: 44px }
}

@media (max-width: 760px) {
  /* 레이어 닫기 버튼도 탭 대상이다 — 27×26 이었다(2026-08-10 가입 실검수) */
  .modalx { width: 40px; height: 40px; font-size: 20px }
}

@media (max-width: 760px) {
  /* 인라인 링크 버튼("전문 보기")도 손가락으로 누른다 — 글자 크기 그대로 두고 여백만 준다 */
  .linkbtn { display: inline-block; padding: 8px 4px; min-height: 36px }
}

@media (max-width: 760px) {
  /* 스텝바 — 세로로 쌓으면 4단계가 화면 하나를 통째로 먹어 주문 내용이 안 보인다(2026-08-10 주문 실검수).
     ★ 종전 규칙(.steps{flex-direction:column})이 원인이었다. 가로 한 줄로 압축한다. */
  .steps { flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none }
  .steps::-webkit-scrollbar { display: none }
  .steps .st { width: auto; flex: none; min-width: 76px; font-size: 11.5px; padding: 8px 6px }

  /* 주문서 요약 카드 — 2열을 유지하면 오른쪽이 좁아 금액이 줄바꿈으로 깨진다 */
  .grid.c2 { grid-template-columns: 1fr !important }
}

/* 본문 바로가기 — 키보드 사용자가 헤더를 다 지나지 않아도 되게(P1 검수).
   평소엔 화면 밖에 있고 탭으로 잡히는 순간 나타난다. display:none 은 초점을 못 받으므로 쓰지 않는다. */
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;background:var(--forest);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.skiplink:focus{left:0}

/* 관리자 배너 — 노출 위치별 자리(라운드 2). 이미지가 없으면 이름만 띠로 보여 준다 */
.bannerslot{display:flex;flex-direction:column;gap:10px;margin:0 0 18px}
.bannerslot .bannerit{display:block;border-radius:12px;overflow:hidden;background:var(--leaf);border:1px solid var(--line)}
.bannerslot .bannerit img{display:block;width:100%;height:auto}
.bannerslot .bannerit span{display:block;padding:14px 16px;font-weight:700;color:var(--forest)}
a.bannerit:hover{box-shadow:var(--sh)}