/* ============================================================
   OIMU 자동 발주 — 공통 스타일 (app.css)  · 단위: rem + 뷰포트(vw/vh) 유동형
   · 1rem = html 기본 글자크기(--root-size). 이 값을 뷰포트(vw/vh)로 두어
     브라우저 창 크기에 맞춰 화면 전체가 유동적으로 커지고 줄어듭니다.
     (기준식: calc(0.48vw + 0.64vh) → 약 1920×1080 에서 16px, 과도한 확대/축소는 clamp 로 방지)
   · 모든 크기 값은 rem 기준이라 --root-size 하나로 전체 배율이 함께 움직입니다.
   · 본문 폭(--maxw)도 vw 라서 창 폭에 맞춰 늘어납니다.
   · 네모 요소(버튼·박스·입력·모달 등)의 모서리는 --radius 하나로 통일했습니다.
   · 리스트(표)는 모서리 0, 가로 구분선은 서브컬러(--sub), 세로선 없음.
   · class 이름은 화면 코드가 참조하므로 "값"만 바꾸세요.
   ============================================================ */

/* 한글 폰트: 오늘단조 — woff 파일을 public/fonts/ 폴더에 넣어주세요 */
@font-face{font-family:OnulDanjo;font-style:normal;font-display:swap;src:url(/fonts/OnulDanjo-Regular.woff) format('woff');}

/* ───────────── [테마 변수] 여기만 바꿔도 전체 톤이 바뀝니다 ───────────── */
:root{
  /* 색상 (오이뮤 브랜드) */
  --bg:#f3eedd;          /* 메인컬러 — 화면 배경 */
  --panel:#fff;          /* 카드(패널) 배경 */
  --ink:black;         /* 기본 글자색 */
  --sub:#b4b4b5;         /* 서브컬러 — 보조 글자·리스트 구분선 */
  --line:black;        /* 옅은 테두리(카드·입력 등) */
  --accent:#ffc0da;      /* 키컬러(핑크) — 주요 버튼·활성 탭·강조 */
  --accent-ink:black;  /* 핑크 위/옆에 올리는 진한 글자색(가독성용) */
  --accent2:#8a6d3b;     /* 보조 강조색(금색 계열 — 위탁 칩·일부 버튼) */
  --warn:#b5482f;        /* 경고·삭제(빨강) */
  --chip:#efeade;        /* 기본 칩 배경 */
  --free:#3a6ea5;        /* 면세 표시색 */
  --tax:#8a6d3b;         /* 과세 표시색 */
  --soft:#faf8f2;        /* 옅은 배경(표 헤더·힌트·요약바) */
  --soft2:#fbf9f3;       /* 하단 요약바 배경 */
  --header-bg:black;   /* 상단 바 배경 */
  --header-ink:#f4f2ec;  /* 상단 바 글자 */
  /* 타이포 */
  --root-size:clamp(13px, calc(0.48vw + 0.64vh), 20px);  /* 1rem 기준값 = 브라우저 크기에 반응(과대·과소는 clamp 로 제한) */
  --font:"english-grotesque","OnulDanjo",sans-serif;  /* 전체 글꼴 */
  --font-doc:"english-grotesque","OnulDanjo","Malgun Gothic",serif;   /* 출력 문서(거래내역서 등) 글꼴 */
  --font-size:0.875rem; /* 기본 본문 글자 크기(1rem 대비 비율) */
  /* 모양 */
  --radius:0.1875rem;    /* 모든 네모 요소 공통 둥글기(버튼·박스·입력·모달·딱지) ≈ 3px */
  --maxw:100vw;           /* 본문 폭 — 브라우저 창 폭에 맞춰 유동적으로 늘어남 */
}

/* ───────────── 기본 · 레이아웃 ───────────── */
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:var(--root-size);-webkit-text-size-adjust:100%}   /* 모바일에서 글자 임의 확대 방지 */
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);font-size:var(--font-size);line-height:1.5}
a{color:var(--accent-ink);font-family:var(--font);}
/* 제품명 → 자사몰 상세페이지 링크. 링크처럼 보이지 않게 색·밑줄을 모두 없애고,
   마우스를 올렸을 때 손가락 커서(버튼과 동일)로만 눌러진다는 것을 알린다. */
a.plink,a.plink:link,a.plink:visited,a.plink:hover,a.plink:active{color:inherit;text-decoration:none;cursor:pointer}
.wrap{max-width:var(--maxw);margin:0 auto;padding:1.125rem}

/* 상단 바(로고 + 우측 버튼) */
header.top{display:flex;align-items:center;gap:1rem;padding:0.625rem 1.125rem;background:var(--header-bg);color:var(--header-ink);position:sticky;top:0;z-index:50}
header.top .brand{letter-spacing:.03em;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
/* 오이뮤 로고 — 원본 비율 261.96 : 63.78 (약 4.1:1). 어두운 바탕에는 흰색 파일을 쓴다. */
.logo{height:1.05rem;width:auto;display:block;flex:none}
.logo.lg{height:1.6rem;margin-bottom:0.5rem}
header.top .brand small{font-weight:400;opacity:.6;margin-left:0.5rem;letter-spacing:0}
/* 상단 버전 표기 — 'v1.0.0 · 26-08-24' (마우스를 올리면 상세) */
.ver{font-size:0.68rem;opacity:.45;letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
header.top .who{margin-left:auto;display:flex;gap:0.75rem;align-items:center;font-size:0.8125rem;opacity:.85}
header.top .who button{background:#3b382f;color:#e9e4d7;border:0.0625rem solid #4b473c;padding:0.375rem 0.75rem;border-radius:var(--radius);cursor:pointer;font-size:0.78rem}

/* ───────────── 탭 ───────────── */
.tabs{display:flex;gap:0.25rem;border-bottom:0.0625rem solid var(--line);margin-bottom:1rem;flex-wrap:wrap}
.tabs button{background:none;border:none;padding:0.625rem 1rem;cursor:pointer;font-size:0.875rem;color:var(--sub);border-bottom:0.125rem solid transparent;margin-bottom:-0.125rem;white-space:nowrap}
.tabs button.active{color:var(--accent-ink);border-bottom-color:var(--accent);}

/* ───────────── 패널(카드) · 제목 ───────────── */
.panel{background:var(--panel);border:0.0625rem solid var(--line);border-radius:var(--radius);padding:1rem;margin-bottom:1rem}
h1{font-weight:normal;}
h2{font-size:1.0625rem;margin:0 0 0.25rem;font-weight:normal;}
h3{font-size:0.875rem;margin:1.125rem 0 0.5rem;color:var(--accent2);font-weight:normal;}
.muted{color:var(--sub);font-size:0.78rem}

/* ───────────── 리스트(표) ─────────────
   모서리 0 · 가로 구분선은 서브컬러 · 세로선 없음(기능상 불필요) */
table{width:100%;border-collapse:collapse;font-size:0.8125rem}
th,td{padding:0.4375rem 0.5rem;border-bottom:0.0625rem solid var(--sub);text-align:left;vertical-align:middle}
th{color:var(--sub);font-size:0.75rem;font-weight:normal;background:var(--soft);position:sticky;top:0;z-index:1}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--ink)}
.arr{font-size:0.8rem;opacity:.85;margin-left:0.1875rem}    /* 정렬 화살표(▲▼) */
.arr.n{opacity:.55}                                          /* 비활성 화살표(↕) — 대기 상태도 잘 보이게 */
tr.inactive td{color:#b3ada0}                                /* 비활성 행(회색 처리) */
.tblscroll{max-height:35rem;overflow:auto;border-radius:0}   /* 스크롤 표 영역(모서리 0, 테두리 없음) */
td.cellcode{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:0.75rem;}  /* 표 안 바코드 */
/* 업체 거래조건 접기/펼치기(매매) — 평소엔 닫힘, 링크형 '펼치기/접기' 텍스트 */
.cond summary{cursor:pointer;color:var(--accent-ink);text-decoration:underline;white-space:nowrap;list-style:none;width:fit-content;margin:0 auto}
.cond summary::-webkit-details-marker{display:none}
.cond summary .c-c{display:none}                 /* 닫힘일 때 '접기' 숨김 */
.cond[open] summary .c-o{display:none}           /* 열림일 때 '펼치기' 숨김 */
.cond[open] summary .c-c{display:inline}         /* 열림일 때 '접기' 표시 */
.cond>div{margin-top:0.35rem;line-height:1.6}
.cond .tiers{margin-top:0.15rem}
/* 업체 발주 화면의 '내 거래 조건' 박스는 좌측 정렬(운영자 표 안의 '펼치기'만 가운데 정렬) */
.condbox summary{margin:0}
/* 정렬/숫자 유틸 */
.right{text-align:right}.center{text-align:center}
/* 모든 표의 항목명(헤더)은 해당 열에서 가운데 정렬(셀 데이터 정렬과 무관) */
th,th.right,th.left,th.num{text-align:center}
/* 제품 관리 옵션 수동 정렬 ▲▼ (기본 분류 정렬에서만 노출) — 수량 스텝퍼(qtystep)와 동일 디자인, 단 가로 구분선 없음 */
.optcell{display:flex;align-items:center;justify-content:space-between;gap:0.4rem}   /* 옵션명 좌측 · 화살표 우측 정렬 */
.optord{display:inline-flex;flex-direction:column;vertical-align:middle}
.ordbtn{position:relative;border:none;background:transparent;cursor:pointer;padding:0;width:1rem;height:0.7rem;display:flex;align-items:center;justify-content:center;opacity:0.8}
/* 클릭 영역만 위·아래(행 여백까지)로 확장 — 화살표 크기·위치는 그대로 유지 */
.ordbtn::after{content:'';position:absolute;left:-0.15rem;right:-0.15rem;border-radius:0.15rem}
.ordbtn.up::after{top:-0.85rem;bottom:0}
.ordbtn.dn::after{top:0;bottom:-0.85rem}
.ordbtn:hover::after{background:rgba(0,0,0,0.05)}
.ordbtn::before{content:'';display:block;width:0.4rem;height:0.4rem;position:relative;z-index:1}
.ordbtn.up::before{border-top:1.4px solid #000;border-left:1.4px solid #000;transform:translateY(15%) rotate(45deg)}
.ordbtn.dn::before{border-bottom:1.4px solid #000;border-right:1.4px solid #000;transform:translateY(-15%) rotate(45deg)}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ───────────── 세그먼트 토글(매매|위탁 등) ───────────── */
.seg{display:inline-flex;border:0.0625rem solid var(--line);border-radius:var(--radius);overflow:hidden;vertical-align:middle}
.seg button{background:#fff;border:none;padding:0.4375rem 1.25rem;cursor:pointer;font-size:0.8125rem;color:var(--sub);white-space:nowrap}
.seg button.active{background:var(--accent);color:var(--accent-ink);font-weight:600}
.seg button+button{border-left:0.0625rem solid var(--line)}

/* ───────────── 폼 · 입력 ───────────── */
/* 특수 태그(입력·드롭다운 등)도 본문과 같은 글꼴·같은 크기로 — 브라우저 기본 크기를 쓰지 않는다.
   ※ 모바일에서 '직접 타이핑하는 칸'만 예외로 16px(iOS 자동 확대 방지). 가이드 문구(placeholder)는 본문 크기 유지. */
input,select,button,textarea,option,optgroup{font-family:var(--font);font-size:var(--font-size)}
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{border:0.0625rem solid var(--line);border-radius:var(--radius);padding:0.3125rem 0.5625rem;font-size:var(--font-size);background:#fff}
::placeholder{font-size:var(--font-size);color:var(--sub);opacity:1}
input[type=number]{width:4.5rem;text-align:right}
input[type=checkbox]{accent-color:var(--accent);}
.qtyinput{width:4.75rem}
/* 발주 입력 제품 썸네일(외곽선 없이 칸 높이 가득, 제품명 왼쪽) */
.pcell{padding:0.15rem 0.3rem !important}
.pimg{height:2.9rem;width:2.9rem;object-fit:cover;display:block;margin:0 auto;border-radius:3px}
/* 수량 입력 커스텀 스텝퍼(속 빈 검정 꺽쇠 ∧/∨, 상하 반분할). 네이티브 스피너는 숨김 */
.qtyinput::-webkit-inner-spin-button,.qtyinput::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qtyinput{-moz-appearance:textfield;appearance:textfield}
.qtywrap{position:relative;display:inline-block;vertical-align:middle}
.qtywrap>input{padding-right:1.5rem}
.qtystep{position:absolute;top:1px;bottom:1px;right:1px;width:1rem;display:flex;flex-direction:column}
.qtystep button{flex:1;border:none;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;opacity:0.8}
.qtystep .qup{border-bottom:0.0625rem solid var(--line)}
.qtystep button:hover{background:rgba(0,0,0,0.05)}
.qtystep button::before{content:'';display:block;width:0.4rem;height:0.4rem}
.qtystep .qup::before{border-top:1.4px solid #000;border-left:1.4px solid #000;transform:translateY(15%) rotate(45deg)}
.qtystep .qdn::before{border-bottom:1.4px solid #000;border-right:1.4px solid #000;transform:translateY(-15%) rotate(45deg)}
/* 발주 메모 */
.memobox{max-height:9rem;overflow:auto;border:0.0625rem solid var(--line);border-radius:var(--radius);padding:0.4rem 0.6rem;background:#fbfaf6;margin:0.3rem 0}
.memo-line{padding:0.2rem 0;font-size:0.8rem;line-height:1.45}
.memo-line+.memo-line{border-top:0.0625rem solid var(--soft)}
.memo-del{border:none;background:transparent;color:#c0392b;cursor:pointer;font-size:0.9rem;line-height:1;padding:0 0.25rem;opacity:0.55}
.memo-del:hover{opacity:1}
.toolbar{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;margin-bottom:0.75rem}  /* 버튼·필터 줄 */
.toolbar .grow{flex:1;min-width:10rem}
.row{display:flex;gap:0.75rem;flex-wrap:wrap}         /* 폼 한 줄 */
.col{flex:1;min-width:11.25rem}
.field{margin-bottom:0.625rem}
.field label{display:block;font-size:0.75rem;color:var(--sub);margin-bottom:0.1875rem}
.field input,.field select,.field textarea{width:100%}
/* 검색창 지우기(X) 버튼 */
.searchbox{position:relative;display:inline-flex;align-items:center}
.searchbox>input{width:100%;padding-right:1.75rem}
/* 툴바 내 검색창·드롭다운 높이 통일 */
.toolbar select,.toolbar .searchbox,.toolbar>input[type=text]{height:2.1rem;box-sizing:border-box}
.toolbar .searchbox>input{height:100%;box-sizing:border-box}
.searchbox .clearx{position:absolute;right:0.4rem;top:50%;transform:translateY(-50%);border:none;background:transparent;cursor:pointer;font-size:1.15rem;line-height:1;color:var(--sub);padding:0 0.15rem}
.searchbox .clearx:hover{color:var(--ink)}
.searchbox>input:placeholder-shown+.clearx{display:none}

/* ───────────── 버튼(모서리 --radius 통일) ───────────── */
.btn{background:var(--accent);color:var(--accent-ink);border:0.0625rem solid var(--line);border-radius:var(--radius);padding:0.5rem 0.875rem;cursor:pointer;font-size:var(--font-size);white-space:nowrap}
.btn.sec{background:#fff;color:var(--ink);}
.btn.warn{background:var(--warn);color:#fff}
.btn.gold{background:var(--accent2);color:#fff}
.btn.sm{padding:0.3125rem 0.5625rem;font-size:0.8125rem}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ───────────── 칩(알약형) · 뱃지 · 상태색 ───────────── */
.chip{display:inline-block;padding:0.125rem 0.5rem;border-radius:var(--radius);font-size:0.72rem;background:var(--chip);color:#5f5a4e;white-space:nowrap}
.chip.free{background:#e6eef6;color:var(--free)}
.chip.tax{background:#f3ecdd;color:var(--tax)}
.chip.mae{background:#ffe6ef;color:var(--accent-ink)}
.chip.wt{background:#f3ecdd;color:var(--accent2)}
label.chip{display:inline-flex;align-items:center;gap:0.25rem;vertical-align:middle}
/* 일시품절 재입고 안내 메모 — 상태 칸 '일시품절' 딱지 아래 표기 */
.snote-txt{font-size:0.68rem;line-height:1.25;margin-top:0.2rem;white-space:normal;word-break:break-word;max-width:8rem;margin-left:auto;margin-right:auto}
.badge{display:inline-block;padding:0.125rem 0.5625rem;border-radius:var(--radius);font-size:0.75rem;white-space:nowrap}
/* 발주관리·발주리스트 상태 칸: 배지는 '카드'·프린터 표시와 무관하게 정중앙,
   부가표시(카드·🖨n)는 배지 바로 오른쪽에 여백 거의 없이 붙어 우측으로 삐져나옴 */
td.stcell{position:relative;text-align:center}
td.stcell .stwrap{position:relative;display:inline-block;vertical-align:middle}
td.stcell .stnote{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0.1rem;font-size:0.7rem;white-space:nowrap}
/* 업체 관리 링크 칸: 코드 + 링크복사 + 열기 를 한 줄 세로 가운데 정렬 */
.lnkcell{display:inline-flex;align-items:center;gap:0.3rem;white-space:nowrap}
/* 제품 관리 재고 칸: 드롭박스는 메모 버튼 유무와 무관하게 정중앙(행끼리 정렬),
   메모 버튼은 드롭박스 바로 오른쪽에 붙어 우측으로 삐져나옴 — 발주관리 상태 칸과 동일 방식 */
.stockcell{position:relative;display:inline-block;vertical-align:middle;white-space:nowrap}
.stockcell .notebtn{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0.2rem}
/* 재입고·출시일 메모 버튼 — 테두리 없는 이모지 하나, 메모가 있으면 메모 텍스트 자체가 버튼 */
.notebtn{border:none;background:transparent;padding:0;margin:0;cursor:pointer;font-size:0.85rem;line-height:1.2;color:inherit;flex:none}
.notebtn.has{font-size:0.68rem;color:var(--sub);max-width:7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;text-decoration:underline;text-underline-offset:0.12rem}
.notebtn:hover{opacity:0.7}
/* 발주 상태별 색(입금대기→미확인→결제확인→출고준비중→출고완료→배송완료→입고완료) */
.s-WAIT_PAY,.s-입금대기{background:#f6e2cf;color:#9a5a22}
.s-NEW,.s-미확인{background:#efeade;color:#6f6a5f}
.s-PAID,.s-결제확인{background:#e8f0e8;color:#2f6f4f}
.s-SHIPPING,.s-출고준비중{background:#fff2d9;color:#8a6d3b}
.s-DONE,.s-출고완료{background:#e6eef6;color:#3a6ea5}
.s-DELIVERED,.s-배송완료{background:#dce9f5;color:#2c5f8f}
.s-RECEIVED,.s-입고완료{background:#2f6f4f;color:#fff}
.star{cursor:pointer;font-size:1rem;color:#d9d2c2;user-select:none}
.star.on{color:var(--accent)}
.statcard{opacity:.4;transition:opacity .15s}   /* 평소: 희미 */
.statcard.on{opacity:1}                          /* 선택된 상태만 정상 */

/* ───────────── 하단 요약바(금액 지표) ───────────── */
.stickyfoot{position:sticky;bottom:0;background:var(--soft2);border-top:0.125rem solid var(--line);padding:0.75rem 0.875rem;border-radius:0 0 var(--radius) var(--radius);display:flex;gap:1.125rem;align-items:center;flex-wrap:wrap;margin:0.75rem -1rem -1rem}
.stickyfoot .metric,.venfoot .metric,.sumbar .metric{font-size:0.78rem;color:var(--sub)}
.stickyfoot .metric b,.venfoot .metric b,.sumbar .metric b{display:block;font-size:1rem;color:var(--ink);margin-top:0.125rem}
b{font-weight:normal}
.stickyfoot .sp,.venfoot .sp{margin-left:auto;display:flex;gap:0.5rem;align-items:center}
.venfoot{position:fixed;left:0;right:0;bottom:0;background:var(--soft2);border-top:0.125rem solid var(--line);padding:0.6875rem 1.125rem;display:flex;gap:1.125rem;align-items:center;flex-wrap:wrap;z-index:60;box-shadow:0 -0.25rem 0.875rem rgba(0,0,0,.07)}
.venscroll{max-height:calc(100vh - 25rem);min-height:11.25rem;overflow:auto;border-radius:0}
.sumbar{display:flex;gap:1.375rem;align-items:center;flex-wrap:wrap;background:var(--soft);border:0.0625rem solid var(--line);border-radius:var(--radius);padding:0.75rem 1rem;margin:0.625rem 0}

/* ───────────── 모달(팝업) ───────────── */
.overlay{position:fixed;inset:0;background:rgba(20,18,14,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:1.25rem}
.overlay.show{display:flex}
.modal{background:#fff;border-radius:var(--radius);max-width:56.25rem;width:100%;max-height:92vh;overflow:auto;padding:1.25rem}
.modal.sm{max-width:30rem}
.modal h2{margin-bottom:0.75rem}
.modal .close{float:right;cursor:pointer;font-size:1.25rem;color:var(--sub);border:none;background:none}

/* ───────────── 안내(알림/힌트) · 작은 요소 ───────────── */
.kv{display:flex;gap:0.5rem;font-size:0.8125rem;padding:0.1875rem 0}
.kv span:first-child{color:var(--sub);min-width:6.5rem}
.notice{background:#fbeee7;border:0.0625rem solid #e6c3b3;color:var(--warn);padding:0.625rem 0.75rem;border-radius:var(--radius);font-size:0.8125rem;margin:0.5rem 0}
.ok{background:#e9f2ec;border:0.0625rem solid #bcd9c6;color:#2f6f4f;padding:0.3rem 0.75rem;border-radius:var(--radius);font-size:0.8125rem;margin:0.5rem 0}
.hint{font-size:0.78rem;color:var(--ink);background:var(--soft);border-left:0.1875rem solid var(--accent);padding:0.625rem 0.75rem;border-radius:0 var(--radius) var(--radius) 0;margin:0.625rem 0}
.hint p{margin:0 0 0.25rem}.hint p:last-child{margin:0}
.subnote{font-size:0.72rem;color:var(--sub);margin:0.125rem 0 0 0.375rem}
.codebox{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--bg);border:0.0625rem solid var(--line);border-radius:var(--radius);padding:0.375rem 0.5625rem;font-size:0.78rem;word-break:break-all}

/* ───────────── 로그인 화면 ───────────── */
.login-wrap{max-width:22.5rem;margin:8vh auto;background:#fff;border:0.0625rem solid var(--line);border-radius:var(--radius);padding:1.75rem}
.login-wrap h1{font-size:1.1875rem;margin:0 0 0.25rem}
.login-wrap .field{margin-bottom:0.875rem}

/* ───────────── 토스트 ───────────── */
.toast{position:fixed;left:50%;bottom:1.75rem;transform:translateX(-50%);background:var(--header-bg);color:#fff;padding:0.6875rem 1.125rem;border-radius:var(--radius);font-size:0.84rem;z-index:200;opacity:0;transition:opacity .2s;pointer-events:none;max-width:88vw}
.toast.show{opacity:.96}
.toast.err{background:#8a2f22}

/* ───────────── 출력 문서(거래내역서·발주서·입고리스트) ───────────── */
.doc{font-family:var(--font-doc);color:#000;background:#fff}
.doc h1{font-size:1.25rem;text-align:center;margin:0 0 0.875rem}
.doc table{font-size:0.75rem}
.doc th,.doc td{border:1px solid #999;padding:0.25rem 0.375rem}
#printArea{display:none}
@media print{body{margin:0;background:#fff}body>*:not(#printArea){display:none!important}#printArea{display:block!important}}

/* ───────────── 반응형(모바일 · 좁은 화면) ─────────────
   · 데스크톱: 창 스크롤을 잠그고 표 안쪽만 스크롤(기존 방식 유지)
   · 모바일  : 페이지 자체가 위아래로 스크롤되고, 표는 좌우로만 스크롤
   전체 배율은 --root-size 가 조절합니다. */
@media (min-width:761px){ html,body{overflow:hidden} }

@media (max-width:760px){
  :root{ --root-size:15px; }                 /* 모바일 기준 배율(본문 약 13px) */
  body{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .wrap{padding:0.75rem}
  header.top{gap:0.5rem;padding:0.5625rem 0.75rem;flex-wrap:wrap}
  .logo{height:0.95rem}
  .logo.lg{height:1.4rem}
  header.top .who{gap:0.5rem}
  .panel{padding:0.75rem}
  .modal{padding:0.875rem;max-height:94vh}
  .overlay{padding:0.5rem}
  th,td{padding:0.375rem 0.375rem;word-break:keep-all}   /* 한글 단어가 중간에서 잘리지 않게 */
  /* 표: 세로는 페이지가 스크롤하므로 높이 제한을 풀고, 가로만 스크롤 */
  .tblscroll,.venscroll{max-height:none;min-height:0;overflow-x:auto;overflow-y:visible}
  .tblscroll table,.venscroll table{min-width:34rem}
  /* 모바일에서 '직접 타이핑하는 칸'만 16px — iOS 확대 방지(가이드 문구는 본문 크기) */
  input[type=text],input[type=number],input[type=password],textarea{font-size:16px}   /* 직접 타이핑 칸만 예외 */
  input[type=date]{font-size:var(--font-size)}                                        /* 달력에서 고르는 칸은 본문 크기 */
  input::placeholder,textarea::placeholder{font-size:var(--font-size)}
  select{font-size:var(--font-size)}
  input[type=number],.qtyinput{width:4.25rem}
  /* 상태 카드: 4칸 격자로 압축(7개 → 4+3) */
  .statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:0.4rem}
  .statcard{min-width:0!important;padding:0.45rem 0.25rem!important}
  .statcard .muted{font-size:0.7rem}
  .statcard>div:last-child{font-size:1rem!important}
  /* 기간 입력 등 툴바 요소가 줄을 넘겨도 찌그러지지 않게 */
  .toolbar>label{display:inline-flex;align-items:center;gap:0.25rem;flex-wrap:wrap}
  .toolbar input[type=date]{flex:1 1 8rem;min-width:0}
  .toolbar .grow{flex:1 1 100%}
  /* 업체 발주 화면: 고정 하단바에 내용이 가리지 않도록 여백 */
  .venfoot{padding:0.5rem 0.75rem;gap:0.625rem}
  .venfoot .metric b{font-size:0.9rem}
  #venApp{padding-bottom:7.5rem}          /* 고정 하단바(발주하기)에 내용이 가리지 않도록 */
  /* 출력 문서 미리보기는 좌우 스크롤 */
  #docArea{overflow-x:auto}
  #docArea .doc{min-width:30rem}
}
@media (max-width:560px){
  /* 좁은 화면에서는 부가 열을 숨겨 제품명·판매가·수량이 한 화면에 들어오게 한다.
     (바코드·이미지·분류는 위쪽 검색·분류 필터로 대신할 수 있는 정보) */
  .bccol,.imgcol,.catcol,.typecol,.xcol{display:none}
  /* 팝업 안의 여러 칸 배치는 한 줄에 하나씩(이름이 잘리지 않게) */
  .modal .row{flex-direction:column;gap:0.5rem}
  .modal .col,.modal .field{width:100%;min-width:0}
  .modal .field input,.modal .field select{width:100%}
  /* 표를 좌우로 밀어도 맨 오른쪽 칸(수량 입력·상세 버튼)은 항상 보이게 고정 */
  .tblscroll td:last-child,.venscroll td:last-child{position:sticky;right:0;background:var(--panel);box-shadow:-0.35rem 0 0.35rem -0.35rem rgba(0,0,0,0.12)}
  .tblscroll th:last-child,.venscroll th:last-child{position:sticky;right:0;z-index:3;background:var(--soft)}
  tr.inactive td:last-child{background:var(--panel)}
  .tblscroll table,.venscroll table{min-width:0}
  .pimg{height:2.2rem;width:2.2rem}
}
@media (max-width:460px){
  .toolbar{gap:0.375rem}
  .kv{flex-wrap:wrap}
  .kv span:first-child{min-width:5.25rem}
  .tabs button{padding:0.5rem 0.625rem}
}
/* 제품 분류 설정 창(제품 관리 > ⚙ 분류 설정) — 대분류/소분류 목록 */
.catlist{border:0.0625rem solid var(--line);border-radius:var(--radius);max-height:17.5rem;overflow:auto;background:var(--panel)}
.catlist>.muted{padding:0.5rem 0.6rem}
.catrow{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.3rem 0.5rem;border-bottom:0.0625rem solid var(--sub)}
.catrow:last-child{border-bottom:none}
.catrow[data-pick]{cursor:pointer}
.catrow[data-pick]:hover{background:rgba(0,0,0,0.03)}
.catrow[data-pick].on{background:var(--accent);font-weight:600}
.catrow .ctname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catrow input.ctname{font:inherit;padding:0.15rem 0.35rem}
.catbtns{display:inline-flex;align-items:center;gap:0.25rem;white-space:nowrap}
.ordbtn[disabled]{opacity:0.2;cursor:default}
.ordbtn[disabled]:hover::after{background:transparent}

/* ───────────── 입지 검토 지도 (업체 관리 > 지도) ───────────── */
/* 지도 창은 일반 모달보다 넓게 — 전국이 한눈에 들어와야 합니다. */
.modal.map{max-width:min(78rem, 96vw)}
.mapbar{display:flex;flex-wrap:wrap;gap:0.5rem 0.875rem;align-items:center;margin-bottom:0.625rem}
.mapbar .grp{display:flex;align-items:center;gap:0.375rem}
.mapbar .grp>label{color:var(--sub);font-size:0.8125rem;white-space:nowrap}
#vmap{height:min(62vh, 34rem);width:100%;border:0.0625rem solid var(--line);border-radius:var(--radius);background:var(--chip)}
.mapnote{margin-top:0.5rem;color:var(--sub);font-size:0.8125rem;display:flex;flex-wrap:wrap;gap:0.25rem 0.875rem;align-items:center}
.mapnote b{color:var(--ink)}
/* 핀 — 매매/위탁을 색으로, 비활성은 흐리게. 지도 위 글자는 항상 본문 서체. */
.vpin{border-radius:50%;border:0.125rem solid #fff;box-shadow:0 0.0625rem 0.1875rem rgba(0,0,0,.4);pointer-events:none}
.vpin.mae{background:var(--accent)}
.vpin.wt{background:var(--accent2)}
.vpin.off{opacity:.45}
.leaflet-container{font-family:inherit;font-size:0.8125rem}
.leaflet-popup-content{margin:0.625rem 0.75rem;line-height:1.5}
.leaflet-popup-content .pin-name{font-weight:600;font-size:0.875rem}
.leaflet-popup-content .pin-row{color:var(--sub);margin-top:0.125rem}
.leaflet-popup-content .pin-row b{color:var(--ink);font-weight:400}
/* 좌표를 못 받은 업체 목록 */
.nogeo{margin-top:0.5rem;max-height:9rem;overflow:auto;border:0.0625rem solid var(--sub);border-radius:var(--radius);padding:0.5rem 0.625rem;font-size:0.8125rem}
.nogeo .row{padding:0.125rem 0;color:var(--sub)}
.nogeo .row b{color:var(--ink);font-weight:400}

/* 업체 편집 — 지점 목록 표 */
.destTbl input{width:100%}
.destTbl td{vertical-align:middle}
.destTbl .lbl{width:22%}
.destTbl .tel{width:20%}
.destTbl .del{width:3.5rem;text-align:center}

/* 업체 화면 — 내 매장 정보(보기 전용) */
.shopinfo{margin-top:0.375rem;font-size:0.8125rem;line-height:1.6}
.shopinfo .r{display:flex;gap:0.5rem}
.shopinfo .r .k{color:var(--sub);min-width:3.5rem;flex:none}

/* 드롭다운 + 검색창을 한 상자로 묶어 보이게 (발주 관리 툴바)
   바깥 테두리는 .fbox 하나가 그리고, 안에 든 요소는 테두리를 지운 뒤 사이에 구분선만 둔다. */
.fbox{display:inline-flex;align-items:stretch;border:0.0625rem solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;height:2.1rem;box-sizing:border-box}
/* 안쪽 요소는 테두리를 지우고, 두 번째 칸부터 왼쪽에만 구분선을 둔다.
   두 규칙의 우선순위를 같게(.fbox>*) 맞춰야 뒤에 온 구분선이 살아남는다. */
.fbox>*{border:none;border-radius:0;height:100%;box-sizing:border-box;background:transparent}
.fbox>*+*{border-left:0.0625rem solid var(--sub)}   /* 칸 사이 구분선 */
.fbox>select{padding-left:0.625rem;padding-right:0.5rem}
.fbox>.searchbox>input{border:none;border-radius:0;height:100%;background:transparent}
.fbox>select:focus,.fbox>.searchbox>input:focus{outline:none}
.fbox:focus-within{box-shadow:0 0 0 0.125rem var(--accent)}   /* 입력 중임을 상자 전체로 표시 */