/* 레이아웃: 제목 줄 → 보기 전환 탭(재고 / 입항 일정) → (화면에 고정) 검색창·필터 → 묶기·정렬·모두 접기 → 요약 띠·주의 건수 → 묶음 카드 목록.
   묶음 카드 = 머리(브랜드·품명·창고 재고·남은 비율, 누르면 한 줄로 접힘) + 건 목록.
   건 목록은 창고 재고 / 입고 예정 / 소진 구역으로 나뉘고, 건을 누르면 상세가 펼쳐진다. */
/* 색은 '크림 & 에스프레소'(2026-10-13, 시안/전체디자인-기빙리-시안: givingli.com의 결): 크림 바탕에 에스프레소 글자, 카드·검색창·칩은 테두리 없는 흰 면, 켜진 것은 에스프레소 면이었다가 2026-10-31부터 와인(--press: 포인트 색, 파일 맨 끝 '포인트 색' 구역).
   토마토 빨강(--cta)은 그림을 만드는 단추에만 쓴다. --accent는 따로 튀는 색이 아니라 글자와 같은 에스프레소다(초점 테두리, 열린 상세의 테두리, 바뀐 단가 표시, 관리자 화면의 단추).
   그 전에는 '그라파이트 & 코발트'(흰 바탕, 먹색 글자, 코발트 포인트)였다. 어두운 테마는 없다(사용자: "다크모드 없이"): 기기가 어두운 모드여도 이 색 그대로다. 모양(알약, 굵기, 요약 카드)은 파일 맨 끝 구역에 있다. */
:root {
  --bg: #f0ebe2;         /* 크림 */
  --surface: #fffdf9;    /* 카드·검색창·칩의 흰 면 */
  --fg: #210c02;         /* 에스프레소 */
  --muted: #6f5d51;      /* 흐린 글자: 흰 면 6.1:1, 크림 바탕 5.3:1, --ctl 4.9:1 */
  /* 브랜드 색 8가지: 분홍·올리브·초록·청록·남색·파랑·보라·자주. 서로 구분되는지 계산으로 확인한 값이라 하나만 바꾸지 않는다. */
  --b0: #fe538c; --b1: #415f02; --b2: #30a100; --b3: #06a3a5; --b4: #195591; --b5: #4f82f5; --b6: #7935c6; --b7: #89195f;
  --b8: #5f6b67;   /* 브랜드가 8개를 넘을 때 색을 못 받은 브랜드의 회색 */
  /* 브랜드 꼬리표는 브랜드 색을 그대로 칠하지 않는다: 그 색을 옅게 깐 면(--brand-bg 비율)에, 그 색을 글자색(--brand-ink-base)과 진하게 섞은 글자(--brand-ink 비율).
     채도 높은 알약 여덟 개가 화면에서 가장 소란스러운 요소였다. (2026-10-13부터 카드의 브랜드 꼬리표는 회색 알약 + 색 점이다: 맨 끝 구역. 이 비율은 PC 표 보기의 브랜드 글자색 등에 남아 있다.) */
  --brand-bg: 16%; --brand-ink: 72%; --brand-ink-base: var(--fg);
  --line: #ece5d9;    /* 가는 가름선 */
  --line2: #ddd4c5;   /* 조금 더 진한 선: 요약 카드의 가름선, 단추 테두리 */
  --mark: #ece4d6; --mark-soft: #f3ede2;   /* 바뀐 단가 표시의 면: 바뀐 값의 알약·달라진 글자(--mark)와, 그보다 한 단계 옅은 '최근 바뀐 단가' 띠·옛 값의 달라진 글자(--mark-soft). 글자는 본문색 그대로 (파일 맨 끝 구역의 '바뀐 단가 표시') */
  --scrim: rgba(33, 12, 2, 0.34); --scrim-blur: blur(2px);   /* 팝업 뒤의 덮개: 옅은 갈색으로 덮고 살짝 흐리게 (2026-10-16, 사용자: "모든 팝업이 올라오는 화면에서는 뒷 배경을 뿌옇게 표현해서 집중력을 높이자." 단가표 '재고 보기'에서 처음 쓴 값). .sheet · .tsheet가 쓴다 */
  --edge: #d0c5b2;    /* 누르는 것·떠 있는 것의 연한 테두리: 필터 칩, 선택 단추, 붙어 있는 묶음 제목 (--line2보다 한 단계 짙다. 시안/필터칩-테두리-시안.png · 묶음제목-테두리-시안.png의 B) */
  --card-line: transparent;   /* 묶음 카드(.group, PC 표 보기의 .gridwrap·.ghbar)의 테두리: 크림 바탕 위의 흰 면이라 선 없이도 갈린다 (흰 바탕이던 때는 #d5dae0 선이 있었다) */
  --accent: #210c02;     /* 글자와 같은 에스프레소 (맨 위 주석) */
  --accent-soft: #ebe3d5;
  --warn: #c9781a;       /* 호박색: 주황이던 것을 빨강 단추(--cta)와 헷갈리지 않게 노란 쪽으로 옮겼다 */
  --warn-soft: #fbeed8;
  /* 글자에 쓰는 색: 면·선·점의 --warn은 밝은 호박색, 글자(--warn-t)는 한 단계 진하게 해 흰 면·옅은 면(--warn-soft) 위에서도 4.5:1을 넘긴다. --accent-t는 --accent와 같다. */
  --accent-t: #210c02;
  --warn-t: #8a5208;
  --ct: #5b493e;       /* 캐틀 꼬리표: 케팩(옅은 파랑, --info)과 구분되게 회갈색 */
  --ct-soft: #ece4d8;
  /* 건의 통관 상태 색 (구역 제목 앞의 점에 쓴다): 창고 재고(통관 완료)는 초록, 통관 전은 호박색 */
  --stock: #2f9461; --hold: #c98a00;
  --ok-t: #1f7348;     /* 초록 글자 (통관 진행의 '합격' · '수리'): 흰 면에서 5.6:1. --stock은 점 · 면에만 쓴다 */
  --ctl: #e9e2d6;      /* 조작부의 면: 흰 판 안의 칩, 브랜드 알약, 재고 막대의 바닥 */
  --ctl-fg: #4b382d;   /* 조작부의 글자 */
  --press: #7a2836;    /* 포인트 색 와인: 켜진 칩 · 알약, 고른 줄, '지금', 검색 (2026-10-31 시안/포인트컬러-시안2의 가, 사용자 "와인색으로 가자." — 에스프레소이던 것). 와인 면 위 크림 글자(--on-press) 8.1:1, 흰 면 위 와인 글자 9.5:1. 하는 일 단추는 --act(먹색) — 아래 '상태 색 이름' */
  --on-press: #f0ebe2;
  /* 상태 색 이름 (2026-10-31, 추천 9 'app.css 정리' — 색 · 꼴을 바꿀 때 한 곳만 고치게): 켜진 것 = --press, 그 위 글자 = --on-press,
     하는 일 단추(간략보고 · 판매보고 · 선택 막대의 주 단추 · 유니패스 · 관리자 단추) = --act, 고른 줄의 옅은 면 = --sel-bg,
     선택 모드에서 고른 건 = --pick(PC 줄) · --pick-lot(폰 건), '지금' · '이번 주' 둘레 = --now-ring, 검색 단추에 마우스 = --press-hover.
     쓰는 곳은 파일 맨 끝 '포인트 색' 구역에 모았다. 이 이름들은 여기(:root)에서 한 번 셈된다: 어느 요소가 --press · --surface · --fg를 따로 바꾸면 따라가지 않으니 그 요소에서 이름도 다시 정한다 */
  --act: var(--fg);
  --sel-bg: color-mix(in srgb, var(--press) 7%, var(--surface));
  --pick: color-mix(in srgb, var(--press) 12%, var(--surface));
  --pick-lot: color-mix(in srgb, var(--press) 9%, var(--surface));
  --now-ring: color-mix(in srgb, var(--press) 16%, transparent);
  --press-hover: color-mix(in srgb, var(--press) 84%, var(--surface));
  /* 건 목록의 바닥(.ground): 흰 카드보다 한 단 어두운 크림. 그 위에서 흰 창고 재고 카드만 떠 보인다. */
  --ground: #f7f3ec;
  --on-accent: #f6f1e8;
  --shadow: none;      /* 카드는 뜨지 않고 선으로만 나뉜다 */
  --lift: 0 6px 18px rgba(33, 12, 2, 0.07);   /* 창고 재고 카드(.rise)만 살짝 뜬다 */
  --font: "Wanted Sans Variable", "Wanted Sans", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;   /* 2026-10-13에 Pretendard에서 바꿨다 (lib.php page_head의 주석) */
  --cta: #c6221f; --cta-t: #b01d1a; --on-cta: #ffffff;   /* 토마토 빨강: 그림을 만드는 단추의 면(흰 글자 5.8:1)과, 흰 면 위의 링크 글자(--cta-t 6.8:1) */
  --track: #e3dbcd;      /* 오트색: 탭 칸의 바닥 */
  --sum: #eae3d8;        /* 요약 카드의 면: 바탕과 오트색의 가운데쯤. 처음에는 탭 칸과 같은 오트색이었는데 사용자가 "배경색이 너무 짙은것 같은데 조금만 밝게"라고 했다 (바탕과의 차 1.16 → 1.07:1, 흰 칩과는 1.25:1) */
  --info: #d6e3f6; --info-t: #1d3f73;   /* 옅은 파랑: 케팩 꼬리표 (화면에서 하나뿐인 찬 색) */
  --mono: "DM Mono", "Wanted Sans Variable", "Wanted Sans", "Apple SD Gothic Neo", "Malgun Gothic", ui-monospace, monospace;   /* 작은 부가 글자(환율 줄, B/L)의 고정폭 글꼴. 한글은 뒤의 화면 글꼴이 받는다 */
  color-scheme: only light;   /* 어두운 테마가 없다: 브라우저가 스스로 어둡게 뒤집지 않게 */
}
/* 고정폭 글꼴 DM Mono (--mono): 라틴 글자와 숫자만, 굵기 둘(파일 하나 15KB쯤). 화면 글꼴과 같은 CDN에서 버전을 고정해 받는다. 그 글자가 화면에 나올 때에만 내려받고, 닿지 못하면 --mono의 다음 글꼴(화면 글꼴)로 보인다 */
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/dm-mono@5.3.0/files/dm-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/dm-mono@5.3.0/files/dm-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.45; }
.wrap { max-width: 560px; margin: 0 auto; padding-inline: 16px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }

/* 제목 줄: 환율·기준 시각은 누르면 새로고침 */
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2px 12px; padding-block: 16px 8px; }   /* 아주 좁으면 환율이 제목 아래로 내려간다 */
h1 { margin: 0; font-size: 22px; white-space: nowrap; }
.rate { flex: none; margin-left: auto; line-height: 1.4; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
button.rate { border: 0; padding: 0; background: none; font-family: inherit; cursor: pointer; }
.rate span { display: block; }
.rate b { color: var(--fg); font-weight: 600; }
.rate .warn, .rate .warn b { color: var(--warn-t); }
.rate svg { width: 13px; height: 13px; margin-left: 4px; vertical-align: -2px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rate.busy svg { animation: spin 1s linear infinite; }
.rate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }


/* 고정 영역: 검색창 + 필터. 긴 묶음을 읽는 동안에는 그 묶음의 제목이 바로 아래에 붙는다 */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; margin-inline: -16px; padding: 8px 16px 10px; background: var(--bg); border-block: 0; display: flex; flex-direction: column; }
/* 도구 줄(#tools)이 없는 탭(입항 일정·단가표)은 머리띠 바로 밑에서 첫 블록(요약 카드, 묶음 카드, 오래된 자료 안내)이 시작해 머리띠의 가름선에 딱 붙어 보였다 (2026-10-11 사용자 캡처: PC 입항 일정 탭).
   재고 탭은 .tools의 위 여백(10px)이 그 틈을 만든다. 아래 여백은 머리띠가 붙어 내려오는 동안(스크롤)에는 영향이 없고 맨 위에서만 보인다. 단가표의 날짜 줄(.pdate)은 제 위 안쪽 여백이 4px 있어 8px만 더해 첫 블록이 12px 아래에서 시작하게 한다 */
body.plan .top { margin-bottom: 12px; }
body.price .top { margin-bottom: 8px; }
.srow { display: flex; align-items: stretch; gap: 8px; }   /* 검색창 + 오른쪽 '선택' 단추 (app.js의 renderModes가 만든다) */
.srow .search { flex: 1; min-width: 0; }
.search { position: relative; }
.search > svg { position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
#q { width: 100%; font: inherit; font-size: 16px; padding: 12px 44px 12px 42px; border: 1.5px solid transparent; color: var(--fg); --ring: transparent; box-shadow: 0 0 0 3px var(--ring); }   /* 회색 면 위에 글자. 테두리는 검색어가 있거나 초점이 올 때만 코발트. 그림자 크기는 여기서만 정하고 상태별로는 색(--ring 띠)만 바꾼다: 크기가 변하면 아이폰에서 빈 칸의 커서가 어긋나 보인다 */
#q::placeholder { color: var(--muted); opacity: 0.8; }
#q:not(:placeholder-shown) { border-color: var(--accent); }   /* 검색어가 들어 있는 동안에는 코발트 테두리: 목록이 걸러진 상태임을 알린다 */
#q:placeholder-shown { padding-right: 12px; text-overflow: ellipsis; }   /* 비어 있을 때는 오른쪽 X 자리(44px)가 필요 없다: 좁은 폰에서도 안내 글자가 잘리지 않게 그 자리를 쓰고, 그래도 모자라면 …로 줄인다 */
#q:focus-visible { outline: none; border-color: var(--accent); --ring: color-mix(in srgb, var(--accent) 22%, transparent); }
#q::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }   /* 브라우저가 붙이는 기본 X는 숨기고 아래 .qclear를 쓴다 */
/* 검색창 오른쪽의 X 단추: 글자가 있을 때만 보인다 (입력이 비어 있는 동안에는 placeholder가 보인다) */
.qclear { all: unset; box-sizing: border-box; position: absolute; right: 4px; top: 50%; width: 40px; height: 40px; margin-top: -20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--muted); cursor: pointer; }
.qclear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.qclear:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.qclear:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 최근 검색: 검색창 줄(.srow) 아래에 목록 위로 뜨는 작은 판. 어두운 테마는 그림자가 없어 테두리로 가른다 */
.srow { position: relative; }
.recent { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; padding: 10px 12px 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--surface); box-shadow: var(--lift); }
.recent[hidden] { display: none; }
.rhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.rhead button { all: unset; cursor: pointer; margin: -6px -8px; padding: 6px 8px; border-radius: 8px; font-size: 12px; color: var(--muted); }
.rhead button:hover { color: var(--fg); }
.rhead button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rchips { display: flex; flex-wrap: wrap; gap: 6px; }
.rchips .chip { max-width: 100%; padding: 8px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#q:placeholder-shown ~ .qclear { display: none; }

/* 칩: 누르면 켜지는 알약 모양 단추. .drop은 누르면 고르기 판(.fpanel)이 펼쳐지는 칩 */
.chip { flex: none; font: inherit; font-size: 13px; padding: 10px 12px; border-radius: 999px; border: 1px solid transparent; background: var(--ctl); color: var(--ctl-fg); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--press); border-color: var(--press); color: var(--on-press); font-weight: 600; }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip small { margin-left: 5px; font-size: 11px; font-weight: 500; opacity: 0.85; font-variant-numeric: tabular-nums; }
.chip.zero, .chip:disabled { opacity: 0.45; }
.chip:disabled { cursor: default; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--brand); }
.chip[aria-pressed="true"] .dot { box-shadow: 0 0 0 1.5px var(--on-press); }
.drop { display: inline-flex; align-items: center; gap: 3px; min-width: 0; padding-right: 8px; }
.drop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop.val { flex: 0 1 auto; min-width: 56px; }   /* 필터를 많이 켜서 줄이 모자라면 '고른 값'(긴 이름) 칩만 말줄임으로 줄어든다. '품명'·'상태 2' 같은 짧은 칩은 그대로 */
.chip.clear { position: sticky; right: 0; background: var(--bg); }       /* 그래도 모자라 줄이 옆으로 밀리면 '지우기'는 오른쪽 끝에 붙어 항상 보인다. 밑으로 지나가는 칩이 비쳐 글자가 겹쳐 보이지 않게 헤더와 같은 바탕을 준다 */
.drop svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.drop.on { background: var(--press); border-color: var(--press); color: var(--on-press); font-weight: 600; }
.drop[aria-expanded="true"] { border-color: var(--accent); }
.drop[aria-expanded="true"] svg { transform: rotate(180deg); }
.clear { padding-inline: 6px; border-color: transparent; background: none; color: var(--accent-t); font-weight: 600; }
.fbar, .tools { display: flex; align-items: center; gap: 6px; }
.fbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; max-height: var(--fbarH, none); }   /* --fbarH: 접고 펼 때 app.js(setCompact)가 이 줄의 높이를 적어 둔다. 'auto'는 전환할 수 없어서 px 값에서 0으로, 0에서 px 값으로 간다 */
.fbar::-webkit-scrollbar { display: none; }
/* 접힌 머리띠 (.top.compact, app.js compactTop): 폰에서 목록을 내려 보는 동안 필터 줄을 접고 검색창을 낮춘다 (182px → 115px). 열 제목 막대가 붙는 --topH는 PC 표 보기용이라 폰에서는 맞추지 않는다(app.js syncTopH).
   접고 펴는 것이 한 번에 툭 바뀌지 않고 부드럽게 줄고 늘도록(아래 '머리띠 접기·펴기' 전환) display: none 대신 높이 0 + 투명 + 숨김(visibility)으로 접는다: display는 전환할 수 없다.
   검색창 글자 크기(16px)는 줄이지 않는다: 전환 중에 입력칸이 16px 아래로 내려가 있는 순간 초점이 가면 iOS가 화면을 확대한다. */
.top.compact { gap: 0; padding-block: 6px; }
.top.compact .fbar { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; }
.top.compact .fpanel { display: none; }
.top.compact #q { padding-block: 8px; }
.top.compact .selbtn { font-size: 11px; }
.top.compact .selbtn svg { height: 0; margin-bottom: -2px; opacity: 0; }   /* 아이콘을 없앤 것과 같은 자리: 높이 0, 아이콘 아래 간격(2px)은 음수 여백으로 지운다 */
/* 필터 칩이 여섯 개라 폰 폭(519px 이하)에서는 한 줄에 안 들어간다: 맨 끝의 '상태'가 아무 표시 없이 옆으로 밀려 안 보이고, 값을 고른 칩은 '미..'처럼 말줄임이 된다. 화살표를 빼고 좌우 여백을 줄여 360px 폭까지 한 줄에 다 보이게 한다 */
@media (max-width: 519px) {
  .fbar .drop { padding-inline: 10px; justify-content: center; }
  .fbar .drop svg { display: none; }
}
.fpanel { display: flex; flex-wrap: wrap; gap: 6px; max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; padding: 10px; border: 1px solid var(--line2); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }   /* contain: 판을 끝까지 스크롤한 뒤에도 더 끌면 뒤의 목록이 같이 움직이던 것을 막는다 */
/* 고르기 판 아래의 '결과 보기': 판이 길어 스크롤돼도 맨 아래에 붙어 있는, 판 바닥까지 꽉 차는 띠. 누르면 판이 닫힌다.
   붙박이 위치는 스크롤 상자의 안쪽 여백만큼 안쪽에서 잡히므로, 판의 아래 여백을 없애고 띠가 그 자리를 채운다. */
#fpanel { padding-bottom: 0; }
/* EST 판의 구역 제목(EXCEL 공장 / 그 밖의 EST, app.js renderBar): 한 줄을 다 차지하고 오른쪽은 가는 선. EXCEL 공장 칩(.exl)은 EXCEL 브랜드색을 옅게 깐다 (누르면 다른 칩처럼 먹색) */
.fpanel .fsec { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; letter-spacing: 0.05em; font-weight: 500; color: var(--muted); }
.fpanel .fsec:first-child { margin-top: 0; }
.fpanel .fsec b { font-weight: 700; color: var(--fg); letter-spacing: 0.02em; }
.fpanel .fsec::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.fpanel .chip.exl:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--brand) 14%, var(--ctl)); }
.fdone { position: sticky; bottom: 0; flex: none; width: calc(100% + 20px); margin: 4px -10px 0; padding: 13px; border: 0; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fdone:focus-visible { outline: 2px solid var(--on-accent); outline-offset: -5px; }
.tools { padding-top: 10px; margin-bottom: 12px; }
.tools .chip { padding-inline: 4px; border-color: transparent; background: none; }
.tools .drop:first-child { flex: 0 1 auto; }
.tools .drop[aria-expanded="true"] { color: var(--accent-t); }
.tools .fold { margin-left: auto; }
#gpanel { margin: -4px 0 12px; }
.pnote { flex: 1 0 100%; padding: 2px 4px 4px; font-size: 12px; line-height: 1.5; color: var(--muted); }   /* 판 맨 위의 설명 한 줄 (표 그림 판) */
.tools .drop svg:first-child { width: 15px; height: 15px; margin-right: 1px; }   /* '표 그림' 칩의 표 아이콘 */
.pbreak { flex: 1 0 100%; height: 0; }   /* 표 그림 판: '통관된 재고만' 칩 뒤에서 줄을 바꿔 묶음 칩과 섞이지 않게 */
.pnote.pgo { padding-top: 6px; text-align: right; }   /* 표 그림 판: 켜 둔 묶음·건 수, 그 아래가 만들기 단추 */
.chip.go { font-weight: 600; }   /* 표를 만드는 단추: 켜고 끄는 묶음 칩(청록)과 다르게 보이도록 어둡게 */
.pnote.warn, .pnote b.warn { color: var(--warn-t); }   /* 표 그림 판: 한도(150건)를 넘었다는 안내 */
/* 표 그림 단추 (2026-10-10, 시안/표그림단추-E다듬기): 눈에 띄지 않던 글자 칩 대신, 폰은 화면 아래 가운데에 떠 있는 알약(.tfab, app.js renderTfab), PC는 보기 줄 맨 오른쪽 끝의 알약(.tbtn).
   목록이 150건 이하면 파랑('표 그림 · 100건'), 넘으면 회색에 주황 건수(.wait: 아직 못 만든다). '모두 접기'는 알약 앞(왼쪽 묶음)에 붙는다. */
.tools .fold.nr { margin-left: 0; }
.tools .tbtn { margin-left: auto; padding: 9px 13px 9px 11px; font-weight: 600; }
.tools .tbtn small { margin-left: 6px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.45); font-size: 12.5px; font-weight: 600; opacity: 1; }
.tools .tbtn small em { font-style: normal; }
.tools .tbtn.wait small { border-left-color: var(--line2); color: var(--warn-t); }
.tfab { all: unset; box-sizing: border-box; position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: inline-flex; align-items: center; height: 50px; padding: 0 18px 0 15px; overflow: hidden; border-radius: 999px; font-size: 15.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transform: translateX(-50%); box-shadow: 0 8px 24px rgba(10, 20, 40, 0.28); -webkit-tap-highlight-color: transparent; }
.tfab svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tfab .lb { display: inline-flex; align-items: center; flex: none; padding-left: 8px; }   /* 너비는 css가 아니라 app.js(fabMorph)가 이전 너비에서 새 너비로 잇는다 */
.tfab small { margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.45); font-size: 13px; font-variant-numeric: tabular-nums; }
.tfab small em { font-style: normal; }
.tfab.wait small { border-left-color: var(--line2); color: var(--warn-t); }
.tfab.mini { padding: 0 15px; }   /* 내려 읽는 동안: 아이콘만 남은 동그라미 (50px: 알약과 높이가 같아 너비만 변한다. 아이콘 크기와 왼쪽 자리는 두 모양에서 같아서, 미끄러지는 목표 너비를 바뀌는 순간 재도 어긋나지 않는다) */
.tfab.mini .lb { display: none; }
.tfab.off, body.selecting .tfab, body.plan .tfab:not(.plan-fab), body.price .tfab:not(.price-fab), body.price:has(#pfpanel:not([hidden])) .tfab, body:has(.pdcard) .tfab, body:has(.sheet) .tfab,
.bfab.off, body.selecting .bfab, body.plan .bfab, body.price .bfab, body:has(.pdcard) .bfab, body:has(.sheet) .bfab { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 14px); }   /* 입항 일정은 같은 중앙 알약을 쓰되 새 JS가 일정 버튼으로 전환한 경우만 표시한다. */
.tfab:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
@media (max-width: 379px) { .tfab small em { display: none; } }   /* 좁은 폰에서는 '맨 위로'와 겹치지 않게 한도 글자를 접는다 */
/* 표 그림 시트(폰, app.js renderTsheet): 아래에서 올라오는 판. 바탕을 누르면 닫히고(app.js의 판 밖 누르기), 바탕 위에서는 목록이 같이 밀리지 않는다. 칩은 스크롤되고 만들기 단추는 맨 아래에 붙는다 */
.tsheet { position: fixed; inset: 0; z-index: 8; display: flex; align-items: flex-end; background: var(--scrim); backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur); touch-action: none; }
.tsheet[data-closing] { pointer-events: none; }
.tsin { display: flex; flex-direction: column; width: 100%; max-height: min(80%, 640px); border-radius: 22px 22px 0 0; background: var(--surface); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.3); outline: none; touch-action: auto; }
.tsin .grab { flex: none; width: 38px; height: 4px; margin: 9px auto 2px; border-radius: 2px; background: var(--line2); }
.tshead { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 6px 18px; font-size: 17px; }
.tshead .selx { margin: -4px 0; }
.tsbody { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 4px 18px 12px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.tsbody .pnote { word-break: keep-all; }
.tsbody .pnote b { color: var(--accent-t); }
.tsbody .pnote b.warn { color: var(--warn-t); }
.tsfoot { flex: none; padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.tsfoot .pnote { padding: 0 2px 8px; }
.tbtns { display: flex; gap: 8px; }
.tbtns .chip.go { flex: 1; height: 46px; padding: 0 10px; border-radius: 14px; font-size: 14.5px; }
.tbtns .chip.go[data-table="cost"] { border-color: var(--ctl); background: var(--ctl); color: var(--fg); }   /* 원가가 든 표는 한 단계 덜 눈에 띄게: 거래처에 잘못 보내지 않게 */
@keyframes tsup { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: no-preference) {
  .tfab.off, body.selecting .tfab, body.plan .tfab:not(.plan-fab), body.price .tfab:not(.price-fab), body.price:has(#pfpanel:not([hidden])) .tfab, body:has(.pdcard) .tfab, body:has(.sheet) .tfab { transition: opacity 0.18s, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.22s; }   /* 사라진 뒤에 visibility를 꺼서 초점이 안 간다 */
  .tfab:not(.off):active { transform: translateX(-50%) scale(0.96); }
  .tsheet { animation: fadein 0.2s ease-out; }
  .tsin { animation: tsup 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
}

/* 오래된 자료 경고, 요약 카드(창고 재고 | 통관 전 | 입고 예정, 아래에 주의 칩들, 맨 아래 '어제 이후') */
.stale { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; word-break: keep-all; background: var(--warn-soft); color: var(--warn-t); }
.sumcard:has(.summary:empty), .alerts:empty { display: none; }
.sumcard { margin: 0 0 14px; }
/* 요약 숫자 (2026-10-12, 시안/요약카드-시안4의 B '창고 재고가 주인공'): 왼쪽에 창고 재고를 큰 숫자 하나로(kg · 건수는 그 밑), 오른쪽에 통관 전과 입고 예정을 작은 두 줄로(이름 왼쪽, 수 오른쪽; kg는 뺐다).
   지나온 길: 같은 크기 세 칸(10-09) → 입고 예정 → 통관 전 → 창고 재고 흐름의 색 면 세 칸과 화살표, '바로 판매' 꼬리표(10-11) → 사용자가 "적응 안되는데 고급스럽게", "공간을 너무 차지"라고 해서 이 꼴.
   색 면·화살표·꼬리표가 없고 카드는 흰 면에 가는 테두리다: 남색 머리 아래에서 색은 상태 점 셋뿐이다. 마크업 순서는 입고 예정 · 통관 전 · 창고 재고 그대로이고 자리는 grid-template-areas가 정한다.
   칸 규칙을 .summary > .stock처럼 자식으로 적는 까닭: 상태 점(em.dot.stock)도 같은 이름을 달고 있다. */
.summary { display: grid; grid-template-areas: "stock hold" "stock inc"; margin: 0; }
.summary div { min-width: 0; }
.summary > .stock { grid-area: stock; }
.summary > .hold, .summary > .inc { display: flex; align-items: baseline; justify-content: space-between; }
.summary > .hold { grid-area: hold; align-self: end; padding-bottom: 5px; }
.summary > .inc { grid-area: inc; align-self: start; padding-top: 5px; border-top: 1px solid var(--line); }
.summary > .hold span, .summary > .inc span, .summary .go { display: none; }   /* 오른쪽 두 줄은 kg를 빼고 수만. .go('바로 판매')는 예전 app.js가 아직 그릴 때를 위해 숨긴다 */
.summary dt { display: flex; align-items: center; gap: 5px; color: var(--muted); white-space: nowrap; }
.summary .dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: 0.6; }
.summary .dot.stock { background: var(--stock); opacity: 1; }
.summary .dot.hold { width: 5px; height: 5px; background: none; border: 1.5px solid var(--hold); opacity: 1; }
.summary dd { margin: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.25; white-space: nowrap; }
.summary .inc dd { color: var(--muted); }   /* 입고 예정(중요도 끝) */
.summary small { font-size: 11px; font-weight: 500; margin-left: 1px; }
.summary span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary i { font-style: normal; }
/* 'N kg · N건'은 두 덩어리로: 좁아서 한 줄에 안 들어가면 'N건'이 통째로 아래 줄로 가고, 가운뎃점은 두 덩어리 사이 틈에 그려서 줄이 바뀌면 왼쪽 밖으로 나가 잘린다 (첫 줄 끝이나 둘째 줄 앞에 점만 남지 않는다) */
.summary .pair { display: flex; flex-wrap: wrap; column-gap: 10px; overflow: hidden; white-space: normal; }
.summary .pair b { position: relative; font-weight: inherit; white-space: nowrap; }
.summary .pair b + b::before { content: "·"; position: absolute; left: -7px; }
/* 좁은 폰: 큰 숫자와 오른쪽 두 줄의 폭을 줄인다 */
@media (max-width: 374px) {  .summary > .hold, .summary > .inc { gap: 10px; }  }
@media (max-width: 339px) { .summary { column-gap: 12px; padding-inline: 12px; } .summary > .hold, .summary > .inc { gap: 8px; }  .summary dd { font-size: 15px; } }
/* 주의 칩 (2026-10-11, 시안 '알림-시안' A): 이름과 건수가 한 알약에 든다. 주황은 앞의 점 하나뿐이고, 켜면 앱의 다른 칩처럼 먹색 면(--press)이 된다.
   전에는 종류마다 한 줄(주황 삼각형, 왼쪽 끝 이름, 오른쪽 끝 주황 건수, 꺾쇠)이었는데, PC 오른쪽 칸(580px)에서 이름과 건수 사이가 400px 가까이 비고 주황이 카드에서 제일 튀었다.
   바탕은 --surface에 가는 테두리(--line2)다: 밝은 테마에서 --ctl(#f2f4f6)은 카드 면(--ground #f7f8fa)과 거의 같아 칩이 사라진다. 제목 줄은 아래 '어제 이후'의 제목(.since)과 같은 말씨.
   2026-10-16부터 이 알약은 PC 표 보기의 한 줄 띠에만 남았다 (제목 줄은 숨긴다: 아래 body.gridview 규칙). 폰 · PC 카드 보기는 크림 구역의 '같은 흰 막대'. */
.achips { display: flex; flex-wrap: wrap; gap: 8px; }
.achip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line2); border-radius: 999px; background: var(--surface); font-size: 13px; line-height: 1.3; color: var(--ctl-fg); cursor: pointer; white-space: nowrap; }
.achip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.achip b { color: var(--fg); font-variant-numeric: tabular-nums; }
.achip[aria-pressed="true"] { border-color: var(--press); background: var(--press); color: var(--on-press); font-weight: 600; }
.achip[aria-pressed="true"] b { color: inherit; }
.achip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 요약 카드의 '어제 이후' 줄(app.js의 renderChanges가 만든다): 기준 자료와 견줘 달라진 건의 종류별 수. 주의 칩과 같은 모양이되 경고색이 아니라 청록이다 (문제가 아니라 소식이므로) */
/* '어제 이후' 줄: 바뀐 종류마다 작은 통계 타일(이름 위, 수 아래)을 한 줄에 같은 너비로 (2026-10-16부터 아래 규칙은 PC 표 보기의 띠에만 쓰인다. 폰 · PC 카드 보기는 크림 구역의 '같은 흰 막대'). 위의 큰 숫자와 같은 꼴이라 카드 안에서 한 식구로 읽힌다.
   누르면 그 건만 보는 상태 필터가 켜지고, 그 타일은 밑줄과 파란 글자가 된다. 종류 수만큼 칸이 나뉘어 다섯이어도 한 줄이다. (알약 넷이 두 줄로 꺾이던 모양, 글줄 모양 다음의 세 번째 꼴) */
.changes { display: block; padding: 10px 16px 12px; border-top: 1px solid var(--line2); font-size: 12px; }
.changes .since { display: block; margin-bottom: 7px; font-size: 11px; letter-spacing: 0.05em; font-weight: 500; color: var(--muted); }
.changes .since b { font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }   /* 제목의 건수 (2026-10-16) */
.changes .none { color: var(--muted); }
.alert.chg { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px 0 6px; border-bottom: 2px solid transparent; white-space: nowrap; }
.alert.chg i { font-style: normal; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.alert.chg b { font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--fg); }
.alert.chg[aria-pressed="true"] { border-bottom-color: var(--accent); }
.alert.chg[aria-pressed="true"] b, .alert.chg[aria-pressed="true"] i { color: var(--accent-t); }
.alert.chg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* 묶음 카드: 사이 20px(접힌 카드끼리는 아래 -8px로 12px), 테두리는 --card-line. 2026-10-10 사용자가 "카드 테두리를 조금만 더 또렷하게, 카드 사이 간격을 살짝만 더 넓히면 구분이 잘 될 것 같다"고 해서 16px·--line에서 한 단계씩 키웠다. */
#list { display: flex; flex-direction: column; gap: 20px; list-style: none; margin: 0; padding: 0; }
.group { background: var(--surface); border: 1px solid var(--card-line); overflow: hidden; box-shadow: var(--shadow); }
.closed + .closed { margin-top: -8px; }
/* 접힌 묶음은 화면 밖에 있는 동안 배치·그리기를 건너뛴다: 처음 화면에 묶음이 백 개 넘게 있어서, 검색어를 칠 때마다 그 줄들을 다시 배치하고 그리는 시간이 입력을 막았다.
   화면 밖 줄의 높이는 접힌 줄의 두 가지(59px·77px)의 평균쯤으로 어림하고, 한 번 그려진 줄은 브라우저가 실제 높이를 기억한다(auto). 지원하지 않는 브라우저는 그냥 지나간다. */
.group.closed { content-visibility: auto; contain-intrinsic-size: auto 72px; }
.ghead { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 10px; align-items: start; width: 100%; padding: 14px 12px 10px 16px; cursor: pointer; }
.ghead:focus-visible, .gline:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gtitle { min-width: 0; overflow-wrap: anywhere; }
/* 머리 연결 효과의 옛 제목·박스 수: 글자 두 조각만 잠깐 겹친다. 고정 검색창보다 아래에 그리고 입력은 받지 않는다. */
.ghead-ghost { position: fixed; z-index: 4; box-sizing: border-box; pointer-events: none; overflow: hidden; }
.gname { line-height: 1.2; overflow-wrap: anywhere; }
.brand { display: inline-block; font-style: normal; font-size: 12px; line-height: 1; }
.brand:empty { display: none; }
/* 브랜드 꼬리표 묶음(.bl): 색 꼬리표와 그 옆의 원산지. 원산지는 꼬리표가 아니라 조용한 회색 글자 칩이라 색 꼬리표 옆에서 눈에 띄지 않는다 */
.bl { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.origin { display: inline-block; font-style: normal; line-height: 1; border-radius: 6px; color: var(--muted); }
.gname .bl { display: flex; }
.gname small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.gstock { text-align: right; font-variant-numeric: tabular-nums; }
.gstock b { display: block; line-height: 1.1; }
.gstock small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.gstock span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.chev { flex: none; width: 20px; height: 20px; margin-top: 6px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.closed .chev { transform: rotate(-90deg); }
.gbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gbar .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--ctl); }
.gbar .bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand, var(--accent)); min-width: 3px; }
.gbar .bar.low i { background: var(--warn); }
.gbar .low + span { color: var(--warn-t); }
/* 묶음 머리의 요약 줄과 복사·공유 단추 (2026-10-09): 요약 항목과 단추가 한 흐름으로 줄바꿈된다. 항목은 낱말 가운데서 꺾이지 않고(nowrap) 항목째 다음 줄로 가며,
   단추는 마지막 줄의 오른쪽 끝에 붙는다(margin-left: auto; 그 줄에 자리가 없으면 혼자 다음 줄 오른쪽). dl은 display: contents라 그 안의 항목들이 .ginfo의 flex 항목이 된다.
   처음에는 단추가 요약 줄 옆에 나란히(flex) 있어 요약 줄의 폭을 빼앗아 '통관/전'으로 꺾였고, 다음에는 단추를 요약 아래 제 줄에 두었더니 PC처럼 공유가 없는 화면에서 '복사' 하나가 빈 줄에 덩그러니 남았다(사용자 지적). */
.ginfo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 0 16px 14px; }
.gmeta { display: contents; font-size: 13px; }
.gmeta div { display: flex; gap: 5px; align-items: baseline; white-space: nowrap; font-size: 13px; }
.ginfo .actg { margin-left: auto; }
.ginfo .act { padding: 7px 11px 7px 9px; font-size: 12px; }
.ginfo .actg .act + .act { padding: 7px 11px 7px 10px; }
.gmeta dt { color: var(--muted); }
.gmeta dd { margin: 0; font-variant-numeric: tabular-nums; }
.gmeta .lo dd { font-weight: 500; color: var(--muted); }   /* 입고 예정·소진: 중요도가 낮은 합계는 값도 회색 보통 굵기로 물러난다 */
.gmeta .plink { all: unset; cursor: pointer; font-weight: 600; }   /* 판매가가 여럿인 묶음: 누르면 단가표 탭으로 */
.gmeta .plink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.act { all: unset; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 11px 12px 11px 10px; border: 1px solid var(--line2); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; }
.act svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.act[aria-busy="true"] { opacity: 0.45; pointer-events: none; }   /* 빠른표를 만드는 동안 (두 번 눌리지 않게) */
/* 복사 단추 묶음: 한 알약 안에 복사 | 공유가 나란히 들어간다 (공유가 없으면 예전 알약 하나) */
.actg { flex: none; display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; }   /* overflow: hidden이었으나 아래 눌리는 영역(::after)까지 잘려서, 안쪽 단추가 모서리를 직접 둥글린다 */
.actg .act { border: 0; border-radius: 0; }
.actg .act:first-child { border-radius: 999px 0 0 999px; }
.actg .act:last-child { border-radius: 0 999px 999px 0; }
.actg .act:only-child { border-radius: 999px; }
.actg .act + .act { padding: 11px 13px 11px 12px; border-left: 1px solid var(--line2); }
.actg .act:focus-visible { outline-offset: -2px; }
/* 눌리는 칸 (2026-10-09, 시안 '눌리는칸-시안'): 손가락으로 쓰는 화면(pointer: coarse)에서는 눈에 보이는 모양은 그대로 두고 눌리는 영역만 44px 이상으로 넓힌다.
   한 화면의 눌리는 요소 13개 중 9개가 44px에 못 미쳤다 (묶음의 공유 35×31, 복사 58×31, 판매가 링크 높이 19px 등). ::after는 그 단추의 일부라 눌러도 그 단추가 눌린다.
   겹치는 곳은 DOM에서 뒤에 오는 단추가 이긴다. 필터 칩 줄(.fbar)은 옆으로 스크롤되는 칸이라 ::after가 잘리므로 칩 자체의 높이를 44px로 키운다. */
@media (pointer: coarse) {
  .act, .gmeta .plink, .sect button, .tools .chip, .selx, .achip { position: relative; }
  .act::after, .gmeta .plink::after, .sect button::after, .tools .chip::after, .selx::after, .qclear::after, .achip::after { content: ""; position: absolute; }
  .act::after { inset: -3px 0; }                          /* 상세의 복사 단추 등(높이 39px) → 45px */
  .actg .act:last-child::after { inset: -3px -5px -3px 0; }   /* 공유(39px 폭)는 오른쪽 바깥으로 */
  .ginfo .act::after { inset: -2px 0 -11px; }             /* 묶음 머리의 복사·공유(높이 31px) → 44px. 위의 판매가 링크와 3px밖에 안 떨어져 있어 영역을 아래로 치우쳐 넓힌다 */
  .ginfo .actg .act:last-child::after { inset: -2px -9px -11px 0; }   /* 공유(35px 폭) → 44px */
  .gmeta .plink::after { inset: -22px -6px -3px; }        /* 판매가 링크(높이 19px) → 44px: 아래는 복사 단추가 바짝 붙어 있어서 영역을 위(빈 줄 쪽)로 치우쳐 넓힌다 */
  .sect button::after { inset: -2px 0; }                  /* '통관 전 · 보기' 줄(높이 40px) */
  .tools .chip::after { inset: -2px; }                    /* 묶기·정렬·표 그림 칩(높이 41px) */
  .selx::after, .qclear::after { inset: -2px; }           /* 닫기 X(40px) */
  .achip::after { inset: -6px -5px; }                     /* 주의 칩(높이 34.9px) → 44.9px. 기준이 테두리 안쪽(1px)이라 실제로는 위아래 5px·좌우 4px만 밖으로 나간다: 칩 사이 틈(가로 8px, 아래의 세로 10px)에 영역이 딱 맞닿는다 */
  .achips { row-gap: 10px; }
  .selacts .act::after { content: none; }                 /* 선택 막대의 단추는 44px라 따로 넓히지 않는다 */
  .fbar .chip { padding-block: 11.5px; }                  /* 필터 칩: 41px → 44px (줄이 스크롤되는 칸이라 ::after를 쓸 수 없다) */
  .top.compact #q { padding-block: 9.5px; }               /* 접힌 머리띠의 검색창: 41px → 44px */
}

/* 접힌 묶음: 한 줄(브랜드·품명 … 입고 예정 건수 · 박스) + 남은 비율을 보여 주는 가는 막대. 고정 영역 아래에 붙는 제목(.strip)도 같은 한 줄이다 */
.gline { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 12px 11px 16px; cursor: pointer; }
.gl-name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.gl-name small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.gl-name .brand, .gl-name .origin { white-space: nowrap; }   /* .gl-name의 overflow-wrap: anywhere가 꼬리표·뱃지 글자 한가운데를 꺾지 못하게 (좁은 폰에서 "EXC/EL"로 갈라졌다). 자리가 모자라면 뱃지가 꼬리표 아래로, 이름이 그 아래로 내려간다 */
.gl-name .bl { flex-wrap: wrap; }
.gl-in { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.gl-in svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-in.lo { font-weight: 500; }
.gl-in.lo svg { opacity: 0.55; }   /* 글자는 그대로 두고(투명하게 하면 대비 4.5:1이 깨진다) 아이콘만 옅게 */
.gl-stock { flex: none; font-size: 18px; font-variant-numeric: tabular-nums; }
.gl-stock small { margin-left: 2px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.gl-stock.none { color: var(--muted); }
.gline .chev { margin-top: 0; }
/* 접힌 줄의 오른쪽: 박스 수를 위에, 입고 예정·통관 전 수는 그 아래 작게 쌓는다. 나란히 두면 이름 칸이 110px쯤밖에 안 남아 꼬리표·뱃지·이름이 세 줄로 꺾였다 (2026-10-08 '안3') */
.gl-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.gl-ins { display: flex; gap: 8px; }
.gline:not(:last-child) { padding-bottom: 8px; }
.gthin { height: 3px; margin: 0 16px 9px; border-radius: 2px; background: var(--ctl); }
.gthin i { display: block; height: 100%; border-radius: 2px; background: var(--brand, var(--accent)); min-width: 3px; }
.gthin.low i { background: var(--warn); }
.strip { position: absolute; top: 100%; left: 16px; right: 16px; width: auto; padding-block: 9px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16); }
.strip .chev { transform: rotate(180deg); }

/* 건 목록 */
.lot { all: unset; cursor: pointer; font-size: 15px; font-variant-numeric: tabular-nums; }
.lotcols, .lot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 0.75fr) minmax(0, 1.4fr); gap: 0 8px; width: 100%; box-sizing: border-box; padding: 12px 16px; }
.lotcols { padding-block: 7px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.lotcols > :nth-child(n+2), .lot > :nth-child(n+2) { text-align: right; }
.lot > :nth-child(1), .lot > :nth-child(4) { font-variant-numeric: normal; }   /* 번호(첫 칸)와 날짜(넷째 칸)는 위아래로 자릿수를 맞출 일이 없다. 폭 맞춘 숫자는 1도 넓어서(Pretendard도, 지금의 Wanted Sans도), 이 칸들의 긴 날짜 범위와 번호가 좁은 화면에서 두 줄로 꺾인다 */
.lots { list-style: none; margin: 0; padding: 0; }
.lots > li { border-top: 1px solid var(--line); }
.lot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lot { position: relative; }   /* 선택 모드의 동그라미(.selecting .lot::before)가 줄 안에서 자리를 잡는 기준 */
.lot > div { min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }   /* 한글 단어 한가운데서 꺾이지 않게 */
.lot b { display: block; }
.lot > :first-child b { font-weight: 600; }
.lot > :nth-child(2) b { font-size: 17px; font-weight: 700; line-height: 1.3; }
.lot span { display: block; font-size: 13px; color: var(--muted); }
.lot .lbl { margin-top: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* 첫 칸의 B/L: 꼬리표 없이 작게, 끝 네 자리만 강조. 꺾지 않는다: 폰의 첫 칸(75px쯤)보다 길어도 옆 칸은 두 줄뿐이라 그 아래 빈 자리로 뻗는다 (꺾으면 건마다 두 줄이 늘었다) */
.lot .lbl em { font-style: normal; color: var(--accent-t); }
.lot .soon { color: var(--warn-t); font-weight: 600; }
.lot .lp { white-space: nowrap; font-weight: 600; color: var(--fg); }   /* 건의 판매가 (원가 아래 줄, 원가를 숨긴 화면에서는 그 칸 전체) */
body.pricelot .lotcols > :nth-child(3) { letter-spacing: 0; white-space: nowrap; }   /* '원가/판매가'가 좁은 칸에 한 줄로 */
.low .lot > :nth-child(2) b { color: var(--warn-t); }
/* 입고 예정 건: 옅은 바탕, 점선 단계 표시, kg가 주 숫자 */
.incoming .lot { background: color-mix(in srgb, var(--fg) 3%, var(--surface)); }
:where(.ground) > .incoming .lot { background: none; }   /* 바닥(.ground) 위에서는 바닥 색이 그 구실을 한다. :where로 무게를 윗줄과 같게 두어, 펼친 건·고른 건의 바탕(아래 규칙들)이 그대로 이긴다 */
.incoming .lot > :nth-child(2) b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.lot .brand { font-size: 11px; padding: 4px 6px; letter-spacing: 0.02em; vertical-align: 1px; }
.lot .bl { display: inline-flex; flex-wrap: wrap; vertical-align: 1px; }   /* .lot span의 display: block을 이긴다. 칸이 좁으면 뱃지가 꼬리표 아래로 내려간다 */
.lot .origin { font-size: 10px; padding: 3px 5px; }
.tag { display: inline-block; font-style: normal; font-size: 10px; line-height: 1.5; vertical-align: 1px; }   /* 재고가 들어 있는 칸을 알리는 꼬리표: 케팩 칸이면 청록(기본), 캐틀 칸이면 파랑(.ct) */
.tag.ct { background: var(--ct-soft); color: var(--ct); }
/* 박스 수 칸: 꼬리표는 칸의 왼쪽 끝, 숫자는 오른쪽 끝. 폭이 모자라면 꼬리표가 왼쪽으로 밀려날 뿐 숫자는 꺾이지 않는다. */
.lot b.wt { display: flex; justify-content: flex-end; align-items: center; gap: 4px; white-space: nowrap; }
.lot .tags { display: inline-flex; gap: 3px; margin-right: auto; }
/* 입고 예정 건 줄의 진행 칸 (2026-10-09): 전에는 점선 상자 안의 글(.stage)이 'T/T/쿼터초과'처럼 두세 줄로 꺾여 줄이 높았다. 이제 PC 표처럼 첫 토막은 그대로, 뒤 토막(.sn)은 흐리게, 두 줄까지만 두고 길면 말줄임(전체 글은 상세의 '진행'에) */
.lot b.st { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; font-size: 14px; line-height: 1.35; }   /* 두 줄까지: 한 줄이면 'T/T/쿼터초과'의 사유가 잘려 뜻을 잃는다. 빗금(gstage의 <wbr>)에서 꺾이고, 그래도 길면 둘째 줄 끝에 말줄임 */
.lot b.st .sn { display: inline; font-size: inherit; color: var(--muted); font-weight: 500; }   /* .lot span의 display: block·13px을 이긴다: 뒤 토막은 같은 줄에 이어진다 */
/* 중요도 순서 (2026-10-10, 사용자): 통관된 창고 재고 > 통관 전 > 입고 예정. 노출도 그 순서로 한 단씩 물러난다.
   통관 전 건(둘째): 입고되어 있어 바로 통관시켜 팔 수 있는 재고라 펼쳐 두고 읽히게 한다. 떠오른 카드(.rise)가 없고, 글자가 본문색보다 한 단 옅고 숫자가 한 치수 작고 가는 것(16px, 600)으로 창고 재고(17px, 700)와 갈린다.
   예전에는 접어 두는 구역이라 줄 전체를 66% 투명으로 많이 흐렸다. 그 흐림은 글자 대비(4.5:1)를 깨서 펼쳐 두는 구역에는 맞지 않는다. */
.hold .lot { color: color-mix(in srgb, var(--fg) 78%, var(--ground)); }
.hold .lot b { font-weight: 500; }
.hold .lot > :nth-child(2) b { font-size: 16px; font-weight: 600; }
/* 입고 예정 건(끝): 들어와 봐야 언제 팔지 알아서 가장 조용하게. 바닥(.ground) 위에서는 소진 건처럼 회색 글자·보통 굵기다 (크기는 위 .incoming 규칙과 좁은 폰의 줄임을 그대로 따른다).
   입항 일정 탭의 줄은 .ground 밖이라 그대로 또렷하고, 입고 지연·선적일 지남의 주황(.soon)도 경고라서 그대로 둔다. */
.ground > .incoming .lot { color: var(--muted); }
.ground > .incoming .lot b { font-weight: 500; }
.ground > .incoming .lot > :nth-child(2) b { font-weight: 500; }
.ground > .incoming .lot .lp { color: inherit; font-weight: 500; }
/* 소진 건: 흐리게 */
.done .lot { color: var(--muted); }
.done .lot b { font-weight: 500; }
.done .lot .soon { color: inherit; font-weight: 500; }
.lot[aria-expanded="true"] { background: var(--accent-soft); }
/* 구역 제목: 왼쪽에 상태 점 + 구역 이름, 오른쪽 끝에 합계 (한 줄에 안 들어가면 합계가 아래 줄 왼쪽으로 내려간다).
   점이 통관 상태다: 창고 재고(통관 완료)는 불 켜진 초록 점, 통관 전은 빈 호박색 고리, 입고 예정·소진은 회색 점. */
.sect { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 12px 16px 9px; font-size: 12px; font-weight: 700; }
.sect span { font-weight: 500; font-variant-numeric: tabular-nums; }
.sect .sl { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.sect .sl::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 30%, transparent); }
.sect.stock .sl::before { background: var(--stock); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stock) 22%, transparent); }
.sect.hold .sl::before { background: none; box-shadow: inset 0 0 0 2px var(--hold); }
.sect.hold { color: var(--muted); }
/* 창고 재고 구역(.rise): 다른 구역과 함께 있을 때, 팔 수 있는 창고 재고의 제목과 건 줄을 한 단 떠오른 카드에 담아 먼저 눈에 들어오게 한다.
   통관 전 건은 칸 없이 평평한 바닥에 흐린 글자로 둔다 (통관 전을 어두운 칸에 담았더니 오히려 그쪽이 도드라져 보여서 뒤집었다).
   어두운 테마에서는 바탕이 한 단 밝고(--rise), 밝은 테마에서는 가는 선과 옅은 그림자(--lift)로 뜬다. 카드가 좌우로 6px 들어가고 테두리가 1px이니 줄 안쪽 여백을 그만큼 줄여서 글자 열은 다른 구역과 같은 자리에 온다. */
.lots > .rise { margin: 8px 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--rise, var(--surface)); box-shadow: var(--lift); }
.rise .lots > li:first-child { border-top: 0; }
.rise .sect { padding: 11px 9px 9px; }
.rise .lot { padding-inline: 9px; }
.rise .lots > li:last-child .lot { border-radius: 0 0 13px 13px; }   /* 마지막 줄의 눌림·선택 바탕이 카드의 둥근 모서리 밖으로 나가지 않게 */
.rise .lots > li:has(> .detail) { margin-inline: 4px; }
.rise .lots > li:has(> .detail) .lot { border-radius: 0; }
.sect.done, .sect.fold { padding: 0; }   /* 단추로 된 제목 (소진, 접어 둔 통관 전): 여백은 안쪽 단추가 갖는다 */
.sect button { all: unset; position: relative; display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 10px 16px; cursor: pointer; color: var(--muted); }
.sect button em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--accent-t); }
.sect button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sect em svg { width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sect [aria-expanded="true"] em svg { transform: rotate(180deg); }
.sect button .sl, .sect button em { flex: none; white-space: nowrap; }   /* 합계가 길어 한 줄에 안 들어가면 구역 이름이나 '보기'가 아니라 합계 쪽이 꺾이게 */
/* 건 목록의 바닥(.ground): 창고 재고 말고 다른 구역이 있는 묶음은 목록 전체에 옅은 톤(--ground)을 깐다. 그 위에서 창고 재고 카드(.rise) 한 장만 떠 보이고,
   아직 팔 수 없는 구역(통관 전·입고 예정·소진)은 바닥에 조용히 놓인다: 제목은 회색이고 합계가 바로 뒤따르며, 끝까지 긋던 줄 대신 글자 열에 맞춰 들여 그은 줄로만 나눈다.
   카드 바로 아래와, 단추가 아닌 제목(입고 예정, 접지 않는 통관 전) 바로 아래에는 줄을 긋지 않는다 (제목이 아래 건들의 머리말로 읽히게). 좌우 여백은 여기서 정하지 않고
   .sect·.lot·.rise의 값을 그대로 따른다 (좁은 폰에서 줄어드는 값과 어긋나지 않게). 창고 재고뿐인 묶음은 바닥 없이 흰 바탕에 놓인다 (2026-10-28부터 새 app.js는 그 줄들을 제목 없는 .rise 상자에 담는다). */
.lots.ground { padding-block: 4px; background: var(--ground); }
.ground > li { position: relative; border-top: 0; }
.ground > li + li::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: 1px solid var(--line); }
.ground > .rise + li::before, .ground > .sect:not(.fold):not(.done) + li::before { content: none; }
.ground > li:has(> .detail)::before { content: none; }   /* 상세를 펼친 건은 제 테두리가 있는 카드다 */
.ground > .rise { margin-block: 4px 6px; }
.ground > .sect { justify-content: flex-start; gap: 4px 8px; color: var(--muted); }
.ground > .sect:not(.fold):not(.done) { padding-block: 10px 2px; }
.ground > li + .sect { margin-top: 4px; }
.ground > li + .sect:not(.fold):not(.done) { padding-top: 14px; }
.ground > .rise + .sect { margin-top: 0; }
.ground > .rise + .sect:not(.fold):not(.done) { padding-top: 10px; }
.ground > li > .lot { padding-block: 10px; }

/* 상세 */
/* 목록 안에서 펼쳐지는 상세(좁은 화면): 펼친 건만 테두리 있는 카드로 떠올라서, 어디서 시작해 어디서 끝나는지와 어느 건의 상세인지가 한눈에 보이게 한다.
   카드 맨 위 줄에 '상세 정보' 제목, 맨 아래에 '접기' 단추가 있다. 넓은 화면의 오른쪽 칸(.pane)은 .lots 밖이라 해당하지 않는다. */
.lots > li:has(> .detail) { margin: 10px 8px 12px; border: 1px solid var(--accent); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 10px 26px color-mix(in srgb, var(--fg) 10%, transparent); }
.lots .detail { border-top-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.lots .leaving { pointer-events: none; }   /* 내용이 140ms 흐려지며 올라간 뒤 제거될 때까지 카드 모양과 배치를 유지한다 (app.js lotMotion). */
/* 상세 카드는 최종 여백·모서리·그림자를 바로 적용한다. 폰에서 높이와 여백을 매 프레임 바꾸지 않고,
   화면 안의 제목·주요 정보·일정(최대 세 묶음)을 8px 이동·투명도만으로 순서대로 보여 준다 (app.js enterLot).
   화면 밖 내용과 동작 줄이기 설정에서는 바로 보인다. */
.lots .acts { margin: 0; }
.dtitle { margin-right: auto; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent-t); }
.dfoot { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px -14px -14px; padding: 13px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--accent-t); font-size: 13px; font-weight: 600; cursor: pointer; }
.dfoot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); }
.dfoot:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.detail { border-top: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin: -4px 0 -8px; }
/* 상세 맨 위의 단추 줄 (2026-10-09): '복사 | 공유'와 '상품정보 복사 (원가 포함) | 공유'가 제목 옆에서 두 줄로 쌓여 너비가 들쭉날쭉했다. 제목(상세 정보)은 제 줄에 두고, 두 묶음이 한 줄을 나눠 채운다. 좁아서 한 줄에 안 들어가면 묶음마다 한 줄을 가득 채운다 (같은 너비의 줄 둘) */
.detail > .acts { justify-content: stretch; }
.detail > .acts .dtitle { flex: 0 0 100%; margin: 0 0 -2px; }
.detail > .acts .actg { flex: 1 1 auto; }
.detail > .acts .actg .act:first-child { flex: 1; justify-content: center; }
.key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.key div { background: var(--ground); border-radius: 8px; padding: 10px 12px; }
.key span { display: block; font-size: 12px; color: var(--muted); }
.key b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; word-break: keep-all; }
.key .low b { color: var(--warn-t); }
.detail h2 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--accent-t); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps li { position: relative; padding-top: 16px; text-align: center; font-size: 12px; color: var(--muted); }
.steps li::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 2px; background: var(--line); }
.steps li:first-child::before { left: 50%; }
.steps li:last-child::before { right: 50%; }
.steps li::after { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; box-sizing: border-box; background: var(--surface); border: 2px solid var(--line); }
.steps li.done::before { background: var(--accent); }
.steps li.done::after { background: var(--accent); border-color: var(--accent); }
.steps b { display: block; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.steps li.done b { color: var(--fg); }
.steps li.late b { color: var(--warn-t); }   /* 입항했는데 입고가 없는 건 / 지난 선적 예정일 */
/* 항목은 이름 아래에 값을 두고 두 칸씩 채운다. 값이 한 칸에 안 들어가게 길면(B/L 번호, 구분 등) 그 항목만 줄 전체를 쓴다.
   줄바꿈 판단이 글자 길이에 따라 되도록 keep-all로 한글을 낱자에서 꺾지 않고, 칸보다 긴 한 덩어리만 break-word로 꺾는다 */
/* 상세의 구역은 한 줄 표다 (시안/상세-시안 A): 이름은 왼쪽 좁은 열, 값은 오른쪽. 값이 세로로 한 줄에 정렬되어 찾는 칸을 이름 열에서 훑어 내려가 바로 읽는다.
   값이 없는 칸은 app.js의 dl()이 줄을 만들지 않고 아래 .blank에 이름만 모은다 */
.rows { margin: 0; }
.rows div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); }
.rows div:first-child { border-top: 0; padding-top: 2px; }
.rows dt { font-size: 12.5px; color: var(--muted); }
.rows dd { margin: 0; font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums; word-break: keep-all; overflow-wrap: anywhere; }
.rows .strong dd { font-size: 17px; font-weight: 700; }
.rows dd small.pw { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 5px; }   /* 상세의 판매가 줄: 어느 EST 값인지와 단가표 날짜 */
.blank { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* 넓은 화면(PC): 목록은 왼쪽 그대로(560px)이고, 건을 누르면 상세가 오른쪽 칸에 뜬다. 오른쪽 칸은 스크롤해도 따라온다 */
.pane { display: none; }
/* 머리 덩어리(#hdr, app.js renderModes가 만든다): 제목 줄·탭·고정 영역·보기 줄을 묶은 상자. 상자가 없는 것과 같다(contents). 예전 PC 표 보기(2026-10-21에 껐고 지웠다)에서만 붙어 다니는 머리띠였다 */
.hdr { display: contents; }
/* 오른쪽 칸의 윗자리(#dock): PC 카드 보기에서 요약 카드가 앉는다 (app.js placeSum). 비어 있거나 상세가 열려 있으면 숨는다 */
.dock:empty, .pane.hasdetail .dock { display: none; }
.phead { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; }
.phead b { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.phead span { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.pclose { all: unset; flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; color: var(--muted); cursor: pointer; }
.pclose svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pclose:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.pclose:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pane-empty { padding: 90px 20px; border: 1px dashed var(--line); border-radius: 16px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.7; }
@media (min-width: 1040px) {
  .wrap { max-width: 1200px; }
  .cols { display: flex; align-items: flex-start; gap: 28px; }
  .main { flex: 0 0 560px; min-width: 0; }
  .pane { display: block; flex: 1 1 0; min-width: 0; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding-top: 16px; scrollbar-width: thin; }
  .pane .detail { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
  /* 카드 보기·입항 일정: 요약 카드는 비어 있던 오른쪽 칸 위에 앉는다(app.js placeSum). 칸 폭이 420~610px라 폰과 같은 한 단 모양이 그대로 들어간다. 안내 칸은 카드 아래에서 낮아진다 */
  .dock + #pbody .pane-empty { padding: 30px 20px; }
}

/* 불러오는 동안 보이는 빈 카드, 빈 결과, 하단 안내, 복사 알림 */
.skel { height: 190px; position: relative; }
.skel::before { content: ""; position: absolute; inset: 16px; border-radius: 6px; opacity: 0.6; animation: pulse 1.4s ease-in-out infinite;
  background: linear-gradient(var(--line), var(--line)) 0 0 / 88px 22px no-repeat, linear-gradient(var(--line), var(--line)) 0 32px / 120px 26px no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 0 / 70px 30px no-repeat, linear-gradient(var(--line), var(--line)) 0 78px / 100% 8px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 108px / 100% 1px no-repeat, linear-gradient(var(--line), var(--line)) 0 126px / 100% 30px no-repeat; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.hint { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-t); font-size: 13px; line-height: 1.5; word-break: keep-all; }
.hint span { flex: 1; min-width: 0; }
.hint b { font-weight: 700; }
.hint button { flex: none; font: inherit; font-size: 12px; font-weight: 600; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; background: transparent; color: var(--accent-t); cursor: pointer; }
.hint button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.empty .again { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.empty .chip { color: var(--fg); }
.note { margin-top: 20px; font-size: 12px; color: var(--muted); }
.note a:not(.adminbtn), .admin .rate a { display: inline-block; padding: 10px 6px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 10; transform: translate(-50%, 12px); padding: 10px 16px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
/* 긴 안내는 화면 폭 안에서 줄을 바꾼다 (2026-10-14). 한 줄로만 두었을 때(nowrap)는 폰에서 양옆이 잘려 가운데만 읽혔다: 입항 일정 표 그림의 한도 안내는 390px 화면에서 556px였고, 단가표 저장 안내 등 여섯 가지도 화면보다 넓었다.
   짧은 안내는 예전과 같은 한 줄이다 (width: max-content. left 50%에 걸린 상자는 그냥 두면 화면 절반에서 꺾인다). 낱말 중간에서는 꺾지 않고, 글 안의 줄바꿈(\n)은 그 자리에서 꺾는다(pre-line: 문장 사이에서 꺾이게).
   되돌리기 단추가 붙은 안내(.act)는 아래에 제 규칙이 있어 그대로다. */
.toast:not(.act) { box-sizing: border-box; width: max-content; max-width: calc(100vw - 24px); text-align: center; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* 표 그림 미리보기(app.js의 showSheet): 화면을 덮는 어두운 바탕 위의 판. 그림은 원래 크기(1배)로 보여 주고 판 안에서 좌우·상하로 밀어 본다 (폰 폭에 맞춰 줄이면 글자를 못 읽는다).
   안내(.toast, z 10)가 판 위에 보여야 하니 그보다 아래에 둔다. 그림 자리는 테마와 상관없이 흰색이다 (보내는 그림이 흰 바탕이라 그대로 보여 준다) */
.sheet { position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--scrim); backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur); }   /* 덮개는 모든 판이 같다(--scrim). 나타날 때 fadein 0.2초로 흐림까지 같이 짙어지고, 닫을 때 fadeSheet 0.16초로 걷힌다 */
.sheetin { display: flex; flex-direction: column; width: min(100%, 1000px); max-height: 100%; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.sheethead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 8px 16px; font-size: 14px; }
.sheethead b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheethead .selx { margin: -4px 0; }
#sheet { touch-action: none; }   /* 미리보기 위에서는 브라우저가 쪽을 끌거나 확대하지 않는다 (그림은 zoomView가 다룬다) */
.sheetimg { position: relative; height: 55vh; overflow: hidden; background: #fff; border-block: 1px solid var(--line); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; overscroll-behavior: contain; }   /* 높이는 app.js(zoomView)가 열릴 때 그림에 맞춘다 */
.sheetimg.grabbing { cursor: grabbing; }
.sheetimg img { position: absolute; left: 0; top: 0; display: block; max-width: none; transform-origin: 0 0; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
/* 확대·축소 단추(PC): 칸 오른쪽 아래. 폰은 손가락으로 하니 보이지 않는다 */
.zpad { position: absolute; right: 10px; bottom: 10px; display: none; flex-direction: column; gap: 6px; }
@media (hover: hover) and (pointer: fine) { .zpad { display: flex; } }
.zpad button { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line2); border-radius: 50%; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--fg); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.zpad button:hover { background: var(--surface); }
.zpad button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zpad svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.zhint { position: absolute; left: 50%; bottom: 12px; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px; background: rgba(25, 31, 40, 0.86); color: #fff; font-size: 13px; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }   /* 처음 몇 번만 */
@media (prefers-reduced-motion: no-preference) { .zhint { animation: fadein 0.25s ease-out; } }
.sheet .imgdoc { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; }   /* http에서 그림을 복사하려고 띄워 두는 그림 문서 (app.js의 copyImageDoc). 보이지 않지만 display:none은 아니어야 문서가 산다 */
.sheetacts { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.sheetacts .act { color: var(--fg); text-decoration: none; background: var(--surface); }
.sheetacts .act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 사진으로 찾기 결과 판(app.js의 visionSheet): 표 그림 판과 같은 덮개 위에, 왼쪽 작은 사진과 읽은 내용·맞는 건 목록 */
.vin { width: min(100%, 560px); }
.vbody { display: flex; gap: 14px; padding: 4px 16px 16px; overflow-y: auto; }
.vthumb { flex: none; width: 88px; height: 88px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line2); }
.vmain { flex: 1; min-width: 0; }
.vmain h3 { margin: 12px 0 6px; font-size: 14px; font-weight: 700; }
.vread { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; color: var(--muted); }
.vread .tag { font-size: 12px; padding: 2px 7px; }
.vnote { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); word-break: keep-all; }
.vnote.warn { color: var(--warn-t); }
.vhit { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--line2); border-radius: 12px; cursor: pointer; }
.vhit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vhit .vwho { display: block; font-size: 15px; }
.vhit .vsub { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vhit small { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--accent-t); }
.vacts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
@media (max-width: 419px) { .vthumb { width: 64px; height: 64px; } }
/* 당겨서 새로 읽기 표시(app.js가 만든다): 화면 위 가운데의 작은 동그라미. --pull(당겨 내려온 px, 단위 없는 수)만큼 내려오며 돌고, 충분히 당기면(.armed) 청록으로 찬다. 읽는 동안(.busy)은 제자리에서 돈다 */
.ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 6; width: 36px; height: 36px; margin-left: -18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); color: var(--muted); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), var(--shadow); opacity: 0; pointer-events: none; transform: translateY(calc(var(--pull, 0) * 1px - 44px)) rotate(calc(var(--pull, 0) * 4deg)); transition: opacity 0.15s; }
.ptr.on { opacity: 1; }
.ptr.armed { background: var(--accent); color: var(--on-accent); }
.ptr svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ptr.busy svg { animation: spin 1s linear infinite; }
html { overscroll-behavior-y: contain; }   /* 안드로이드 크롬이 맨 위에서 당기면 하는 '페이지 새로고침'을 막는다: 그건 화면만 다시 열 뿐 엑셀을 다시 읽지 않아서, 위의 당겨서 새로 읽기와 겹친다 */
/* '맨 위로' 단추 (app.js의 renderTop): 목록 칸 맨 끝의 높이 0짜리 띠가 화면 아래에 붙어 따라오고, 단추는 그 위로 떠오른다. 선택 막대가 있으면 그 위에 얹는다 */
.totopwrap { position: sticky; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 4; height: 0; display: flex; justify-content: flex-end; align-items: flex-end; pointer-events: none; }
.totop { all: unset; box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--accent-t); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
.totop.show { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.totop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.totop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.selecting .totopwrap { bottom: calc(var(--selh, 92px) + 16px); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.3; } }
/* 열림 효과: 방금 열린 것만 위에서 살짝 내려오며 나타난다. .enter는 app.js가 방금 연 묶음·상세에만 달아 준다 */
@keyframes reveal { from { opacity: 0; transform: translateY(-6px); } }
/* 선택 막대는 아래에서 올라오고(내려가는 것은 app.js의 leaveBar), '더 보기' 메뉴는 막대 위로 열리니 아래에서 살짝 올라온다. 표 그림·사진 결과 판은 바탕이 흐리게 나타나고 카드가 떠오른다(닫을 때는 app.js의 fadeSheet) */
@keyframes barup { from { transform: translateY(100%); } }
@keyframes revealup { from { opacity: 0; transform: translateY(6px); } }
@keyframes fadein { from { opacity: 0; } }
@keyframes sheetup { from { opacity: 0; transform: translateY(20px) scale(0.98); } }
.sheet[data-closing] { pointer-events: none; }
/* 카드를 접을 때 방금 있던 안쪽을 새 모양 위에 겹쳐 두는 막 (app.js의 rollUp). 겹쳐 둔 옛 머리의 꺾쇠는 '펼친' 모양 그대로 둔다 */
.ghost { position: absolute; top: 0; left: 0; right: 0; z-index: 1; overflow: hidden; background: var(--surface); pointer-events: none; }
.ghost .chev { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .fpanel:not([hidden]), .strip:not([hidden]), .detail.enter { animation: reveal 0.2s ease-out; }
  .selbar { animation: barup 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .selmenu:not([hidden]) { animation: revealup 0.16s ease-out; }
  .sheet { animation: fadein 0.2s ease-out; }
  .sheetin { animation: sheetup 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .totopwrap { transition: bottom 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }   /* 선택 막대가 오르내릴 때 '맨 위로' 단추도 같이 */
}
/* 옆으로 밀어 탭을 넘기는 동안(app.js의 swipe, body.pager): 내용이 손가락을 따라 화면 밖으로 나가므로 .wrap이 옆으로 넘치는 것을 잘라 낸다. clip은 스크롤 영역을 만들지 않아서 고정 머리띠(sticky)에 영향이 없다 */
body.pager .wrap { overflow-x: clip; }
@media (pointer: coarse) { .lot { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }   /* 길게 눌러 선택하는 동안 글자 선택 돋보기와 메뉴가 뜨지 않게 (손가락으로 쓰는 화면만) */
/* 누름 반응: 누르는 동안 줄 단위 단추는 옅게 물들고, 작은 단추는 살짝 줄어든다 (줄어드는 쪽은 효과 줄이기 설정이면 뺀다) */
.lot:active, .ghead:active, .gline:active, .sect button:active, .dfoot:active { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--fg) 6%, transparent); }
/* 건 줄과 상세의 '접기'는 브라우저의 탭 강조(안드로이드 크롬의 하늘색 덮개, 아이폰의 회색 덮개)를 끈다: 위의 누름 반응이 따로 있고,
   건을 누르면 상세가 펼쳐지는 동안 그 덮개가 0.2초쯤 카드 위에 남아 어수선했다 (2026-10-17) */
.lot, .dfoot, .group > .ghead, .group > .gline { -webkit-tap-highlight-color: transparent; }
/* 마우스를 올리면 눌러지는 것임을 알린다. PC(마우스가 있는 기기)에서만: 터치 기기에서는 누른 뒤에도 표시가 남아 있게 되기 때문이다.
   붙여 둔 제목(.strip)은 자기 그림자를 쓰니 뺀다. */
@media (hover: hover) {
  .lot:hover, .ghead:hover, .gline:not(.strip):hover, .sect button:hover, .dfoot:hover, button.phd:hover { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--fg) 4%, transparent); }
  .chip:not([aria-pressed="true"]):not(:disabled):hover, .achip:not([aria-pressed="true"]):hover { border-color: var(--accent); color: var(--fg); }
  .act:not(:disabled):hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
  .alert.chg:not([aria-pressed="true"]):hover { border-bottom-color: var(--line2); }   /* 눌렀을 때의 파란 밑줄을 흐릿하게 미리 보여 준다 */
  .alert.chg:not([aria-pressed="true"]):hover i { color: var(--fg); }
  .fdone:hover { filter: brightness(1.1); }
  .totop:hover { color: var(--fg); }
}
/* 빠르게 연달아 누르는 단추가 '두 번 탭 확대'로 오인되지 않게 한다 (두 손가락으로 벌려 확대하는 것은 그대로 된다).
   단추 규칙들이 all: unset을 써서 important가 필요하다. */
button, a, input { touch-action: manipulation !important; }
@media (prefers-reduced-motion: no-preference) {
  .group > .ghead, .group > .gline { transition: transform 0.15s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .group > .ghead:is(:active, .gpress), .group > .gline:is(:active, .gpress) { transform: translateY(1px); transition-duration: 0.07s; }
  .chip, .achip, .act, .alert, .qclear, .pclose, .hbtn, .hint button, .panel button[type="submit"] { transition: transform 0.12s ease-out; }
  #q { transition: border-color 0.2s, box-shadow 0.2s, padding-top 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), padding-bottom 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), border-radius 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
  /* 머리띠 접기·펴기: 필터 줄은 높이와 투명도, 위아래 여백·검색창·선택 단추의 아이콘은 같은 박자(0.22초)로. 칸 사이 간격(gap)과 여백이 같이 변해야 머리띠 높이가 매끄럽게 줄어든다 */
  .top { transition: gap 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), padding-top 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), padding-bottom 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .fbar { transition: max-height 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.16s ease-out; }
  .top.compact .fbar { transition: max-height 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.12s ease-in, visibility 0s 0.22s; }   /* 접히는 쪽: 다 접힌 뒤에 숨긴다(칩에 초점·터치가 가지 않게). 펴는 쪽은 바로 보인다 */
  .selbtn svg { transition: height 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), margin-bottom 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.14s ease-out; }
  .chip:active, .achip:active, .act:active, .alert:active, .hbtn:active, .hint button:active, .panel button[type="submit"]:active { transform: scale(0.95); }
  .alert:active { transform: scale(0.985); }   /* '어제 이후' 타일은 5%는 너무 크게 움직인다 */
}
@media (prefers-reduced-motion: reduce) { .rate svg, .skel::before, .toast, .totop { transition: none; animation: none; } }
/* 휴대폰 폭(420px 미만): 입고 예정 건의 kg(15px 굵게, 9글자 ≈ 72px)와 원가가 숫자 한가운데서 꺾이지 않고 한 줄에 들어가도록 칸 비율과 간격을 조정한다.
   유통기한 칸은 원래 폭(390px에서 102px)을 지켜서 날짜가 더 꺾이지 않게 한다. 420px 이상은 위의 원래 비율이다. */
@media (max-width: 419px) { .lotcols, .lot { grid-template-columns: minmax(0, 0.96fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.34fr); gap: 0 6px; } }
@media (max-width: 399px) { .lotcols { font-size: 11px; } }   /* '원가 / 단가'가 한 줄에 들어가도록 */
@media (max-width: 359px) { .lotcols { font-size: 10.5px; } }
@media (max-width: 374px) {
  .lotcols, .lot { grid-template-columns: minmax(0, 0.99fr) minmax(0, 0.98fr) minmax(0, 0.73fr) minmax(0, 1.3fr); padding-inline: 12px; }
  .lot { font-size: 14px; }
  .incoming .lot > :nth-child(2) b { font-size: 13px; }
  .steps b { font-size: 12px; }   /* 상세의 일정: 계약일·선적일(26.3.11 26.4.11)이 서로 붙어 보이지 않게 */
  .lot b.st { font-size: 13px; }
  .sect, .sect button { padding-inline: 12px; }
  .lots > .rise { margin-inline: 4px; }
  .ground > li + li::before { left: 12px; right: 12px; }
  .rise .sect, .rise .lot { padding-inline: 7px; }
}
@media (max-width: 339px) {   /* 가장 좁은 폰: 숫자가 칸에 한 줄로 들어가도록 글자를 한 단계 더 줄인다 */
  .lotcols, .lot { grid-template-columns: minmax(0, 0.97fr) minmax(0, 1fr) minmax(0, 0.77fr) minmax(0, 1.25fr); }
  .lotcols { font-size: 10px; }
  .lot { font-size: 13px; }
  .lot span { font-size: 12px; }
  .lot > :nth-child(2) b { font-size: 15px; }
  .hold .lot > :nth-child(2) b { font-size: 14px; }   /* 통관 전 숫자(16px)가 이 줄임을 이기지 않게: 창고 재고 15px보다 한 단 작게 */
  .incoming .lot > :nth-child(2) b { font-size: 12.5px; letter-spacing: -0.02em; }   /* 폭 맞춘 숫자는 11,000.00이 칸보다 1px 넓어 두 줄로 꺾인다 (Pretendard 때 잰 값. Wanted Sans도 폭이 거의 같다) */
  .steps b { font-size: 11px; }
  .sect em svg { display: none; }   /* 화살표 자리만큼 모자라서 통관 전 합계 줄이 두 줄로 꺾이지 않게 */
}

/* 직원에게 원가를 보내지 않는 설정이면(본문에 .nocost) 건 줄이 3칸이다. 폭마다 정해 둔 4칸 비율(미디어 질의)보다 이 규칙이 우선하도록 선택자를 더 구체적으로 쓴다. */
body.nocost:not(.pricelot) .lotcols, body.nocost:not(.pricelot) .lot { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.5fr); }   /* 건마다 판매가를 보일 때(.pricelot)는 원가 자리에 판매가가 들어가 다시 4칸이다 */
/* 건 줄 세 칸 (2026-10-18, '아쉬운 점 시안' 1번, 사용자: "1,4,5 진행해줘"): 칸이 넷인 줄(첫 칸 | 박스 · kg | 판매가 | 유통기한)을 세 칸으로 놓는다.
   셋째 칸(판매가, 원가가 보이는 화면에서는 원가 위 · 판매가 아래, 판매가를 안 보이면 원가와 $/lb)은 둘째 칸의 kg 밑에 온다. 넓어진 첫 칸에서 창고 · 등급 · EST · B/L이 덜 꺾인다.
   .l3은 app.js가 칸이 넷인 줄과 그 머리(lot · lotcols · cold-bl-cols)에만 붙인다. 무게(0,2,0)가 폭마다의 4칸 규칙(.lotcols, .lot, 미디어 질의 안)을 이긴다.
   첫 · 둘째 · 넷째 칸만 자리를 적으면 셋째 칸은 하나 남은 빈자리 c에 저절로 들어간다. DOM 차례는 그대로라 :nth-child(2)(박스 숫자 크기) 같은 칸 규칙이 예전 칸에 걸린다. 맨 아래 줄(.lst: 검색에 걸린 진행상황, 냉장 홀딩 · 계약)은 grid-column: 1 / -1로 그 아래 줄에 저절로 놓인다 */
.lot.l3, .lotcols.l3, .lots > .cold-bl-cols.l3 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 1.1fr); grid-template-areas: "a b d" "a c d"; align-items: start; }
.l3 > :nth-child(1) { grid-area: a; }
.l3 > :nth-child(2) { grid-area: b; }
.l3 > :nth-child(4) { grid-area: d; }
.lot.l3 > :nth-child(3) { line-height: 1.3; }   /* 줄 간격을 좁혀 판매가 한 줄이 들어와도 둘째 칸이 첫 칸(세 줄)보다 길어지지 않게 (1.5일 때 넓은 화면에서 줄이 2.6% 길어졌다) */
.lot.l3 > :nth-child(3) b { font-size: 13px; }   /* 원가(관리자 화면)가 위의 박스 숫자와 겨루지 않게 kg와 같은 크기로 */
.lot.l3 > :nth-child(3) .lp { font-size: 12.5px; }
@media (max-width: 374px) { .lot.l3 > :nth-child(2) > span { line-height: 1.35; } }   /* 좁은 폰은 첫 칸 글자가 한 단 작아(14px) 둘째 칸이 2px 길었다: kg 줄의 줄 간격을 그만큼 좁힌다 */

/* 입항 일정: 구역 카드와 그 머리. 건 줄은 목록의 .lot을 쓰고 칸 비율만 [상품 + 번호] [입항일] [kg]로 바꾼다 (원가 없음 3칸 규칙보다 뒤에 둔다). */
body .lot.prow { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.05fr); }
.phd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 16px; }
button.phd { all: unset; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; padding: 12px 16px; cursor: pointer; }
button.phd:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.phd b { font-size: 15px; font-weight: 700; }
.phd small, .phd span { font-size: 12px; color: var(--muted); }
.phd .actg, .phd em { margin-left: auto; }
.phd em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--accent-t); }

/* 로그인 화면과 관리자 화면 */
a { color: var(--accent-t); }
.note { display: flex; justify-content: center; align-items: center; gap: 10px; }
.costnote { margin-top: 8px; }

/* 보기 전환 탭(재고 / 입항 일정): 제목 바로 아래, 검색창 위에 화면 폭을 반씩 나눠 둔다. 검색과 필터는 두 보기에 다 걸리는 조건이라 그보다 위가 순서에 맞고,
   묶기·정렬 줄 위에 작은 알약으로 뒀을 때는 목록 조작처럼 보여 자리가 어색했다. 켜진 쪽만 청록 글자와 굵은 밑줄이라 채우지 않아도 눈에 띈다.
   양옆 여백까지 차지하고(.top과 같은 음수 여백) 고정 영역의 윗선이 탭의 바닥선이 된다. */
.seg { position: relative; display: flex; --n: 2; --i: 0; }
.seg button { all: unset; flex: 1; text-align: center; cursor: pointer; }
.seg button:focus-visible { outline: 2px solid var(--accent); }
/* 아래 바(.ink)는 탭마다 달린 밑줄이 아니라 하나가 탭 사이를 미끄러진다 (2026-10-09, "아래 바도 부드럽게"). 폭은 탭 한 칸(탭은 flex: 1이라 폭이 모두 같다), 자리는 --i번째 칸.
   app.js의 markTabs가 --n(탭 수)과 --i(몇 번째 탭)를 적는다. 옆으로 밀어 탭을 넘기는 동안(.seg.follow)에는 --i가 손가락을 따라 소수로 움직이므로 transition을 끈다. */
.seg .ink { position: absolute; background: var(--press); transform: translate3d(calc(var(--i) * 100%), 0, 0); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .seg .ink { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .seg.follow .ink { transition: none; }
  .seg button { transition: color 0.2s; }
}
/* 변경 기록 탭: 기간 칩 한 줄, 그 아래 날짜별 카드 안에 변경 줄(시각 | 건 이름 / 바뀐 칸) */
body.price .selbtn { display: none; }   /* 단가표에는 고를 건이 없다 */
/* 단가표 탭: 엑셀 단가표를 덩어리(냉동 우육·돈육…)마다 카드 하나로. 줄은 품목·브랜드·등급 왼쪽, 판매가 조건과 값 오른쪽 */
.pdate { padding: 2px 4px 10px; font-size: 12px; color: var(--muted); }
/* 단가표 그림 단추 (2026-10-10): 단가표 탭 맨 위 줄의 오른쪽. 표 그림의 떠 있는 알약과 같은 파랑 알약이고 그릴 줄 수가 붙는다 (검색으로 좁히면 그만큼만 그려진다). 좁은 폰에서는 왼쪽 글이 두 줄로 접힌다 */
.pdate { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.pdate > span { min-width: 0; }
.pdate .pimg { all: unset; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px 0 13px; border-radius: 999px; font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pdate .pimg svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pdate .pimg small { margin-left: 3px; padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, 0.45); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pdate .pimg:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .pdate .pimg { transition: transform 0.15s; } .pdate .pimg:active { transform: scale(0.96); } }
.prow { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 0 10px; padding: 10px 16px; align-items: start; }
.prow .pn b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.prow .pn .bl { display: inline-flex; margin-top: 4px; }
.prow .pn .brand { font-size: 11px; padding: 4px 6px; }
.prow .pn .origin { font-size: 10px; padding: 3px 5px; }
.prow .pn small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.prow .pn .pwh { color: var(--ctl-fg); word-break: keep-all; overflow-wrap: anywhere; }   /* 한글 낱말 가운데서 꺾이지 않게('/' 뒤에서만, brk가 <wbr>을 넣는다): '강동1/강동2/아주처인'이 360px 폰에서 '…/아주처'·'인'으로 꺾였다. 칸보다 긴 한 낱말만 어디서든 */   /* 창고 (2026-10-11): 등급 밑 한 줄. 이름은 등급보다 흐리지 않게, 앞의 '창고'는 작은 꼬리표로 */
.prow .pn .pwh i { margin-right: 6px; padding: 1px 5px; border-radius: 4px; font-style: normal; font-size: 10.5px; font-weight: 600; background: var(--ctl); color: var(--muted); }
.prow .pv { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.55; padding-top: 1px; }
.prow .pv.tbd { color: var(--muted); }
.prow .pe { display: inline-block; width: max-content; max-width: calc(100% + 8px); }   /* 칸보다 8px까지는 예전처럼 한 줄 (넘친 부분이 카드 안쪽 여백 16px 안에 들고, 줄 끝 알약이 내미는 7px을 더해도 15px: max-width만으로는 안 된다, inline-block은 칸 너비로 줄어든 뒤에야 max-width를 보므로 width: max-content를 함께), 그보다 길 때만 조건 글자 사이에서 줄을 바꾼다 (예전에는 nowrap이라 320~340px에서 '7 399 109 294 423 10,500'의 가격이 카드 밖으로 잘렸다) */
.prow .pe i { font-style: normal; font-size: 12px; color: var(--muted); margin-right: 3px; }
.prow .pe b { font-weight: 700; }
.prow .pe em { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 2px; white-space: nowrap; }
.prow .sep { color: var(--muted); padding: 0 3px; }
.prow .pv > .sep { display: none; }   /* 값마다 한 줄 (2026-10-18, '아쉬운 점 시안' 4번): .pv가 세로 flex라 값(.pe)이 한 줄에 하나씩 오른쪽 끝에 붙는다. 바뀐 값 줄(.pold) 안의 구분점은 그대로 둔다 */
/* 단가표: 최근 바뀐 값 (2026-10-11, "바뀐내용도 체크 할 수 있게 해줘. 바뀐부분은 눈에 띄게 색도 넣어주고"). 코발트는 이 앱에서 '정보'의 색이고 경고는 주황이라 둘을 갈라, 바뀐 곳은 코발트로 칠한다:
   줄 왼쪽의 굵은 선과 옅은 바탕, 바뀐 값만 채운 알약. 바뀌기 전 값은 가격 밑 작은 줄에 취소선으로 남겨 무엇에서 무엇으로 바뀌었는지 한눈에 보이게 한다. */
.pchg { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 12px; font-size: 13.5px; font-weight: 600; }
.pchg > span { min-width: 0; display: flex; align-items: center; gap: 8px; }
.pchg .pdot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.pchg b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pchg button { all: unset; box-sizing: border-box; position: relative; flex: none; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--surface); color: var(--accent-t); font-size: 13px; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pchg button[aria-pressed="true"] { color: var(--bg); box-shadow: none; }   /* 켜진 필터는 다른 칩처럼 채운다. 글자는 --bg: 밝은 테마에서 흰색(5.4:1), 어두운 테마에서 어두운 색(6.7:1) */
.pchg button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (pointer: coarse) { .pchg button::after { content: ""; position: absolute; } }
.group.plan .lots > li.chg { position: relative; }   /* 앞의 3px 막대(::before)는 2026-10-13에 없앴다 (파일 맨 끝 구역의 '바뀐 단가 표시'). position은 그대로 둔다: 빼면 줄 사이 가름선이 그려지는 순서가 달라진다 */
.prow .pe b.chg { padding: 1px 7px; border-radius: 7px; }   /* 채운 알약의 글자 대비: 밝은 테마 흰색 on #2869c7 5.4:1, 어두운 테마 어두운 색 on #5a9cf8 6.7:1 (흰 글자는 2.9:1) */
.prow .pv > .pe b.chg:last-child { margin-right: -7px; }   /* 줄 끝의 알약은 숫자의 오른쪽 끝이 바뀌지 않은 줄들과 같은 자리에 오도록 알약 여백만 바깥으로 내민다. 값마다 한 줄이 된 뒤로는(2026-10-18) 모든 값이 줄 끝이다. 뒤에 메모가 붙은 알약은 내밀지 않는다(메모와 겹치므로) */
.prow .pe b.chg + em { margin-left: 4px; }   /* 알약 바로 뒤의 메모('(11월)')가 알약에 닿지 않게 */
.prow .pold { margin-top: 3px; font-size: 11.5px; font-weight: 500; line-height: 1.5; color: var(--muted); }
.prow .pold .pe b { font-weight: 500; }
.prow .pold s { text-decoration: none; }   /* 취소선은 inline-block인 .pe 자신에게 건다: <s>의 취소선은 inline-block 안으로 이어지지 않는다 */
.prow .pold s .pe { text-decoration: line-through; }
.prow .pold .pt { white-space: nowrap; }   /* 날짜와 시각은 한 덩어리로 (줄이 바뀌어도 '10/11'과 '14:28'이 갈라지지 않게) */
/* 여러 건 선택: 검색창 옆 '선택' 단추, 선택 중 건 줄의 표시, 아래에 붙는 선택 막대 */
.selbtn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 52px; padding: 0 8px; font-size: 11px; line-height: 1.1; }   /* 검색창과 같은 높이로 늘어나는 네모 단추: 아이콘 위, 글자 아래 */
.selbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* 선택 모드의 동그라미 (2026-10-18, 시안 '선택동그라미-시안' A, 사용자: "좋아 추천안대로 가자"):
   예전에는 10px 동그라미(창고 재고 카드 안과 좁은 폰은 8px)가 줄 왼쪽 여백 안에 끼어 글자와 2~3px이었고(374px 이하에서는 글자와 겹쳤다), 구역마다 자리가 달랐다.
   이제 선택 모드가 되면 첫 칸의 글자만 오른쪽으로 28px(374px 이하 25px) 비켜 서고, 생긴 자리에 20px(18px) 동그라미가 선다. 어느 구역(흰 줄, 창고 재고 카드, 점선 카드)이든
   동그라미는 묶음 왼쪽 끝에서 14px(11px), 글자는 44px(37px)에서 시작해 동그라미와 10px(8px) 떨어진다. 고르면 먹색 동그라미에 흰 체크.
   비켜 서기는 첫 칸(과 칸을 가로지르는 .lst 줄)의 왼쪽 여백으로 한다: 칸(그리드 트랙)의 폭과 자리는 그대로라, 줄의 칸 모양(세 칸 · 네 칸, 입항 일정 줄)이 무엇이든
   박스 · kg · 판매가 · 유통기한은 선택 전과 같은 자리에 남고 첫 칸만 좁아진다(냉장 B/L 줄만 예외: 아래). 칸 머리(.lotcols, 냉장 B/L의 .cold-bl-cols)도 같이 비켜 선다.
   창고 재고 카드(.rise)와 점선 카드는 선택 모드 동안 옆 여백을 4px(2px)로 줄이고 그만큼 안쪽 여백을 늘린다: 글자 열은 그대로이고, 동그라미가 카드 테두리 안쪽 8px 넘게 들어온다.
   상세를 펼친 줄(떠오른 카드)은 선택 전처럼 카드 여백만큼 안으로 들어가 있다. */
.selecting .lot::before { content: ""; position: absolute; left: 14px; top: 50%; box-sizing: border-box; width: 20px; height: 20px; margin-top: -10px; border: 1.5px solid color-mix(in srgb, var(--muted) 55%, var(--surface)); border-radius: 50%; background: var(--surface); }
.selecting .lot[aria-pressed="true"] { background: var(--accent-soft); }
.selecting .lot[aria-pressed="true"]::before { background: var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l3.1 3.1 5.8-6.6' fill='none' stroke='%23fffdf9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat border-box; }   /* 체크 그림을 동그라미 바깥 테두리 상자에 맞춘다 (좁은 폰의 18px에도 저절로 맞는다) */
.selecting .lot > :first-child, .selecting .lot > .lst, .selecting .lotcols > :first-child, .selecting .lots > .cold-bl-cols > :first-child { margin-left: 28px; }
.selecting .lots > .rise, .selecting .lots > li:is(.hold, .incoming):has(> .lot) { margin-inline: 4px; }
.selecting .rise .sect, .selecting .rise .lot { padding-inline: 11px; }   /* 바깥 4 + 테두리 1 + 안쪽 11 = 원래 글자 열 16px */
.selecting .rise .lot::before { left: 9px; }
.selecting .lots > li:is(.hold, .incoming) > .lot { padding-inline: 10.5px; }   /* 바깥 4 + 테두리 1.5 + 안쪽 10.5 = 16px */
.selecting .lots > li:is(.hold, .incoming) > .lot::before { left: 8.5px; }
/* 냉장 B/L로 묶은 입고 예정 줄(.cold-bl-lot, 세 칸)과 그 칸 머리는 늘어난 왼쪽 여백을 세 칸이 나눠 갖는다(첫 칸 여백 대신 줄의 안쪽 여백): 첫 칸만 좁히면 'PR 49332 (우산)'이
   세 줄로 꺾여 375px 이하에서 67건 중 51건이 높아졌다. 이 줄의 kg · 판매가 칸은 여유가 있어 8px쯤 좁아져도 꺾이지 않는다(나눠 가지면 높아지는 줄 1건) */
.selecting .lot.cold-bl-lot > :first-child, .selecting .lot.cold-bl-lot > .lst, .selecting .lots > .cold-bl-cols.compact > :first-child { margin-left: 0; }
.selecting .lots > li:is(.hold, .incoming) > .lot.cold-bl-lot { padding-left: 38.5px; }
.selecting .lots > .cold-bl-cols.compact { padding-left: 44px; }
@media (max-width: 374px) {   /* 원래 글자 열이 12px인 좁은 폰 */
  .selecting .lots > li:is(.hold, .incoming) > .lot.cold-bl-lot { padding-left: 33.5px; }
  .selecting .lots > .cold-bl-cols.compact { padding-left: 37px; }
  .selecting .lot::before { left: 11px; width: 18px; height: 18px; margin-top: -9px; }
  .selecting .lot > :first-child, .selecting .lot > .lst, .selecting .lotcols > :first-child, .selecting .lots > .cold-bl-cols > :first-child { margin-left: 25px; }
  .selecting .lots > .rise, .selecting .lots > li:is(.hold, .incoming):has(> .lot) { margin-inline: 2px; }
  .selecting .rise .sect, .selecting .rise .lot { padding-inline: 9px; }   /* 2 + 1 + 9 = 12px */
  .selecting .rise .lot::before { left: 8px; }
  .selecting .lots > li:is(.hold, .incoming) > .lot { padding-inline: 8.5px; }   /* 2 + 1.5 + 8.5 = 12px */
  .selecting .lots > li:is(.hold, .incoming) > .lot::before { left: 7.5px; }
}
.selecting .wrap { padding-bottom: calc(var(--selh, 120px) + 32px); }
.selecting .toast { bottom: calc(var(--selh, 92px) + 24px); }
.gselrow { display: none; padding: 0 16px 12px; }   /* 묶음 머리 아래의 '묶음 선택': 선택 모드에서만 보인다 */
.selecting .gselrow { display: block; }
/* 선택 막대 (시안 '선택막대-시안' A, 2026-10-09): 윗줄은 '2건 선택' + 합계 + 전체 선택 + 닫기 한 줄, 아랫줄은 복사(진하게)·공유·표 그림·더 보기 한 줄. 원가가 든 변형은 '더 보기' 메뉴에 있다.
   합계는 구역(창고 재고·통관 전…)이 하나면 제목 옆에 붙고, 둘 이상이면(.multi) 구역마다 한 줄씩 아래에 온다. 윗줄의 높이는 32px로 맞춰서 전체 선택·닫기가 첫 줄과 나란하다. */
.selall { position: relative; padding-block: 6px; }
.selall::before { content: ""; position: absolute; inset: -4px -6px; }   /* 보이는 크기는 작게, 누를 수 있는 영역은 넉넉히 */
.selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1); }
.selbar[data-leaving] { pointer-events: none; }   /* 내려가는 동안에는 뒤의 화면이 눌린다 */
.selin { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 8px; max-width: 560px; margin: 0 auto; }
.selsum { grid-column: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.selsum b { font-size: 15px; font-weight: 700; line-height: 32px; }
.selall { margin-top: 1px; }
.selhid { grid-column: 1 / -1; display: flex; align-items: center; gap: 2px; margin-top: -2px; font-size: 13px; line-height: 1.55; color: var(--warn-t); }   /* 고른 것 중 지금 목록에 없는 건이 있다는 알림 + 빼기 */
.selhid button { all: unset; margin: -8px 0; padding: 8px 6px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.selhid button:focus-visible { outline: 2px solid var(--warn); outline-offset: -2px; }
.seltot { min-width: 0; font-size: 13px; line-height: 32px; font-variant-numeric: tabular-nums; }
.seltot:empty { display: none; }
.seltot span { display: flex; flex-wrap: wrap; column-gap: 6px; }
.seltot em { font-style: normal; color: var(--muted); }
.seltot i { font-style: normal; font-weight: 600; white-space: nowrap; }
.seltot i + i::before { content: "\00b7"; margin-right: 5px; font-weight: 400; color: var(--muted); }   /* 박스 · kg 사이의 가운뎃점 */
.multi .seltot { flex: 1 0 100%; margin-top: -6px; line-height: 1.6; }
.selacts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }   /* wrap: 단추 넷은 flex 1 1 0이라 줄을 안 바꾼다. 옛 app.js의 단추 줄(.actg 알약 셋)이 새 css와 잠깐 만났을 때만 줄이 바뀐다 */
.selacts .act { flex: 1 1 0; min-width: 0; box-sizing: border-box; justify-content: center; height: 44px; padding: 0 6px; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.selacts .act svg { width: 16px; height: 16px; }
.selacts .act.main { flex-grow: 1.25; border-color: var(--act); background: var(--act); color: var(--on-press); }
.selacts .act.more svg { fill: currentColor; stroke: none; }
.selacts .act.more[aria-expanded="true"] { background: var(--ctl); }
.selbar .act:disabled { opacity: 0.4; cursor: default; }
/* '더 보기' 메뉴: 막대 바로 위에 뜬다. 항목 오른쪽의 주황 '원가 포함'은 원가가 든 변형임을 알린다 (원가를 숨긴 화면에서는 이 표시가 없다) */
.selmenu { position: absolute; right: 0; bottom: calc(100% + 21px); width: min(268px, 100%); padding: 6px; border: 1px solid var(--line2); border-radius: 16px; background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); }
.mitem { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--fg); cursor: pointer; }
.mitem + .mitem { border-top: 1px solid var(--line); border-radius: 0; }
.mitem svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mitem small { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--warn-t); }
.mitem:active { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.mitem:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.selx { all: unset; position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -4px -8px -4px 0; border-radius: 50%; color: var(--muted); cursor: pointer; }
.selx svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.selx:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 519px) { .note { flex-wrap: wrap; padding-right: 68px; } }   /* 맨 아래 안내 글이 오른쪽 아래에 뜨는 '맨 위로' 단추(44px + 여백)와 겹치지 않게 그만큼 오른쪽을 비워 둔다 */
/* .panel = 로그인·처음 설정 카드. 위 여백은 화면 높이에 맞춰 눈높이보다 살짝 위에 오게 한다 */
.panel { width: calc(100% - 32px); max-width: 380px; margin: max(24px, 13vh) auto 24px; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.logo { align-self: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: 16px; }
.panel h1 { margin-bottom: 8px; text-align: center; font-size: 22px; }
.panel p { text-align: center; }
.panel p, .box p { margin: 0; font-size: 14px; color: var(--muted); }
.box p { word-break: keep-all; }
.panel .back { align-self: center; padding: 4px 8px; font-size: 13px; color: var(--muted); }
.pw { position: relative; }
.panel .pwtoggle, .box .pwtoggle { position: absolute; right: 4px; top: 50%; width: 40px; height: 40px; margin-top: -20px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: none; color: var(--muted); }
.pwtoggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pwtoggle .slash { display: none; }
.pwtoggle[aria-pressed="true"] { color: var(--accent-t); }
.pwtoggle[aria-pressed="true"] .slash { display: inline; }
.admin { padding-block: 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.box h2 { margin: 0; font-size: 16px; font-weight: 700; }
.box form { display: flex; flex-direction: column; gap: 8px; }
.box form + form { margin-top: 8px; }
.panel label, .box label { font-size: 13px; font-weight: 500; color: var(--muted); }
.panel input, .box input:not([type="hidden"]) { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--line2); border-radius: 12px; background: var(--surface); color: var(--fg); }
.panel .pw input, .box .pw input:not([type="hidden"]) { padding-right: 48px; }   /* 눈 단추 자리. 위의 일반 입력칸 규칙보다 뒤에 와야 이긴다 */
.pw input::-ms-reveal, .pw input::-ms-clear { display: none; }   /* Edge가 자체로 다는 눈 단추는 우리 단추와 겹치니 숨긴다 */
.panel input:focus-visible, .box input:focus-visible, .box textarea:focus-visible { outline: none; border-color: var(--accent); }
.panel input:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
.box textarea { width: 100%; min-height: 280px; font: inherit; font-size: 15px; line-height: 1.6; padding: 12px 14px; border: 1.5px solid var(--line2); border-radius: 12px; background: var(--surface); color: var(--fg); resize: vertical; }   /* 검색 별칭 칸: 입력칸과 같은 모양에 여러 줄 */
.panel button, .box button { font: inherit; font-weight: 600; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.panel button[type="submit"] { margin-top: 6px; padding-block: 14px; }
.panel button[type="submit"]:disabled { opacity: 0.65; cursor: progress; }
.box label.check { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--fg); cursor: pointer; }
.box input[type="checkbox"] { flex: none; width: 20px; height: 20px; padding: 0; accent-color: var(--accent); }
.box button.plain { background: none; color: var(--muted); font-weight: 500; text-decoration: underline; padding: 4px; }
.panel button:focus-visible, .box button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msg { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; word-break: keep-all; background: var(--accent-soft); color: var(--accent-t); }   /* keep-all: 한글 안내가 '15분'의 숫자와 단위 사이에서 꺾이지 않게 (로그인 잠금 안내가 좁은 폭에서 그랬다) */
.msg.error, .box p.msg.error { background: var(--warn-soft); color: var(--warn-t); }
/* 관리자 화면 정리 (2026-10-09, 시안 '관리자-시안'): 한 페이지가 폰 화면 4장 길이(3,576px)에 같은 파란 전체 폭 단추가 아홉 번 반복되던 것을, 맨 위의 '지금 상태'와 한 줄 설명이 달린 접이식 구역 여섯으로 줄였다.
   위에는 붙어 다니는 이동 칩, 처음에는 엑셀 자료만 펼쳐져 있고 방금 보낸 양식이 든 구역은 서버가 펼쳐서 보낸다. 안쪽 양식·설명은 그대로다. 넓은 화면에서도 폭은 640px까지만 쓴다. */
.wrap.admin { max-width: 640px; }
.jump { position: sticky; top: 0; z-index: 4; display: flex; gap: 8px; margin: 0 -16px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.jump::-webkit-scrollbar { display: none; }
.jump a { flex: none; padding: 10px 14px; border-radius: 999px; background: var(--ctl); color: var(--ctl-fg); font-size: 14px; font-weight: 500; text-decoration: none; }
.jump a[aria-current="true"] { background: var(--press); color: var(--on-press); font-weight: 600; }
.jump a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 672px) {   /* 칩이 아홉이 되자(연락처) 640px 줄에 다 들어가지 않아 마지막 '보안'이 가려졌다: 마우스로는 이 줄을 옆으로 밀 수 없다. 넓은 화면에서는 사이를 조금 좁혀 한 줄에 다 보이게 하고, 글꼴이 달라 그래도 넘치면 가리지 않고 다음 줄로 넘긴다 */
  .jump { flex-wrap: wrap; gap: 6px; }
  .jump a { padding: 10px 9px; }
}
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.state i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--stock); }
.state.warn i { background: var(--hold); }
.state.bad { color: var(--warn-t); }
.state.bad i { background: var(--warn); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--ground); }
.tile small { font-size: 12px; color: var(--muted); }
.tile b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.statacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.box .statacts button.dark { padding-block: 14px; background: var(--act); color: var(--on-press); }
/* 관리자 사용량 요약: C안. 오늘 동작 합계 아래에 기능별 횟수를 많은 순서의 막대로 보여 준다. */
.stat .usage-summary { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line2); }
.usage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.usage-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.usage-link { display: inline-flex; align-items: center; gap: 3px; min-height: 44px; color: var(--accent-t); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.usage-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.usage-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.usage-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; margin: 4px 0 12px; }
.usage-metrics > div { min-width: 0; }
.usage-metrics > div:last-child { padding-left: 16px; border-left: 1px solid var(--line2); }
.usage-metrics dt { font-size: 12px; color: var(--muted); }
.usage-metrics dd { display: flex; align-items: baseline; gap: 3px; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.usage-metrics dd b { font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -0.025em; }
.usage-metrics dd span { font-size: 13px; font-weight: 500; color: var(--muted); }
.usage-metrics .usage-total { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 12px 16px; border-radius: 12px; background: var(--accent-soft); }
.usage-total dt { color: var(--accent-t); font-weight: 600; }
.usage-total dd { margin: 0; }
.usage-total dd b { color: var(--accent-t); font-size: 38px; }
.usage-context { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-bottom: 12px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.usage-breakdown { display: flex; flex-direction: column; margin: 0 0 12px; }
.usage-breakdown > div { display: grid; grid-template-columns: 67px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 0; }
.usage-breakdown dt { font-size: 12px; color: var(--muted); }
.usage-breakdown dd { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 10px; margin: 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.usage-breakdown dd > span:last-child { min-width: 44px; text-align: right; white-space: nowrap; }
.usage-breakdown dd b { margin-right: 3px; color: var(--fg); font-size: 14px; font-weight: 600; }
.usage-track { display: block; height: 7px; border-radius: 999px; background: var(--ctl); overflow: hidden; }
.usage-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.usage-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 10px 12px; border-radius: 10px; background: var(--ground); color: var(--muted); font-size: 12px; }
.usage-foot b { margin-left: 5px; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.box p.usage-definition { margin-top: 8px; font-size: 11px; }
.box p.usage-empty { margin-top: 10px; font-size: 12px; }
/* 인기 검색어 (2026-10-15, admin.php의 #sec-search): 기간(오늘 · 7일 · 30일)은 숨긴 라디오 셋과 그 이름표로 고른다. 스크립트 없이 바뀌고 화살표 키로 옮겨 다닌다 */
.srank { position: relative; }   /* 숨긴 라디오가 칸 안에 자리 잡게: 없으면 화면 오른쪽 밖에 놓여 가로로 넘쳤다 */
.srank .srp { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; }
.srank-period { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: var(--track); }
.srank-period label { min-width: 46px; padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-align: center; color: var(--ctl-fg); cursor: pointer; }
#srp1:checked ~ .usage-head label[for="srp1"], #srp7:checked ~ .usage-head label[for="srp7"], #srp30:checked ~ .usage-head label[for="srp30"] { background: var(--press); color: var(--on-press); }
#srp1:focus-visible ~ .usage-head label[for="srp1"], #srp7:focus-visible ~ .usage-head label[for="srp7"], #srp30:focus-visible ~ .usage-head label[for="srp30"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.srank-body { display: none; }
#srp1:checked ~ .srank-body[data-p="1"], #srp7:checked ~ .srank-body[data-p="7"], #srp30:checked ~ .srank-body[data-p="30"] { display: block; }
.box p.srank-sum { margin: 6px 0 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.srank-sum b { color: var(--fg); font-weight: 600; }
.srank h4 { margin: 16px 0 4px; font-size: 13px; font-weight: 700; }
.srank-top, .srank-zero { margin: 0; padding: 0; list-style: none; }
/* 많이 찾은 검색어 한 줄: 위 [순위 | 검색어 | 횟수 · 기기], 아래 [ | 찾은 곳 | 막대]. 막대 칸은 폭이 정해져 있어 줄마다 같은 자리에서 시작한다 */
.srank-top li { display: grid; grid-template-columns: 20px minmax(0, 1fr) clamp(108px, 30%, 180px); align-items: center; column-gap: 10px; row-gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sr-no { grid-row: 1 / span 2; font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.sr-term { min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sr-w { min-width: 0; font-size: 11.5px; color: var(--muted); }
.sr-w em { font-style: normal; font-weight: 600; color: var(--warn-t); }
.srank-top .usage-track { height: 5px; }
.sr-c { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-c b { margin-right: 1px; color: var(--fg); font-size: 15px; font-weight: 700; }
.sr-c small { font-size: 11px; }
.srank-fold summary { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; color: var(--accent-t); font-size: 12.5px; font-weight: 600; list-style: none; cursor: pointer; }
.srank-fold summary::-webkit-details-marker { display: none; }
.srank-fold summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.6px solid; border-bottom: 1.6px solid; transform: rotate(45deg); }   /* 아래 꺾쇠: 펼치면 위로 */
.srank-fold[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.srank-fold summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.srank-fold[open] summary { color: var(--muted); }
/* 결과가 없던 검색어 한 줄: [검색어 · 찾은 곳 | 횟수 | 별칭에 넣기] */
.srank-zero .sr-t { min-width: 0; }
.srank-zero .sr-t b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.srank-zero .sr-t small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.srank-zero li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.srank-zero .sr-t { flex: 1 1 120px; }
.sr-add { flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); color: var(--fg); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sr-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sr-add:hover { box-shadow: inset 0 0 0 1px var(--fg); } }
.box p.srank-note, .box p.srank-empty, .box p.srank-more { margin: 6px 0 8px; font-size: 12px; }
.btn { display: flex; align-items: center; justify-content: center; padding: 14px; border: 1.5px solid var(--line2); border-radius: 12px; color: var(--fg); font-weight: 600; text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.box.acc { display: block; padding: 0; scroll-margin-top: 72px; }   /* <details>를 flex로 두면 접힘이 어긋나는 브라우저가 있어 block으로 두고 안쪽(.accbody)에서 줄을 쌓는다 */
.acc > summary { display: flex; align-items: center; gap: 12px; padding: 16px; list-style: none; cursor: pointer; border-radius: 16px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acc .at { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc .at b { font-size: 16px; font-weight: 700; }
.acc .at small { font-size: 13px; color: var(--muted); word-break: keep-all; }
.acc .ac { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.acc[open] > summary .ac { transform: rotate(180deg); }
.accbody { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.accbody section { display: flex; flex-direction: column; gap: 10px; }
.accbody section + section { padding-top: 16px; border-top: 1px solid var(--line); }
.accbody h3 { margin: 0; font-size: 15px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .acc .ac { transition: none; } }

/* 관리자 설정 A안: 긴 양식과 그래프는 선택한 분야에서만 보여 준다. */
body.admin-settings-page { background: var(--ground); }
.wrap.admin.settings { padding: 24px 20px; gap: 14px; }
.settings .admin-head { padding: 0 0 4px; }
.admin-eyebrow { font-size: 11px; font-weight: 600; color: var(--muted); }
.settings .admin-head h1 { margin-top: 3px; font-size: 24px; }
.admin-back { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line2); background: var(--surface); color: var(--fg); text-decoration: none; white-space: nowrap; }
.settings .state { font-size: 11px; font-weight: 500; }
.settings .state i { width: 6px; height: 6px; }
.admin-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.admin-tabs { position: sticky; top: 8px; z-index: 4; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 4px; border-radius: 12px; background: var(--ctl); }
.admin-tabs a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 3px; border-radius: 9px; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.admin-tabs a[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 5px rgba(0,0,0,0.04); }
.admin-tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.admin-panel { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 76px; min-width: 0; }
.admin-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.admin-panel-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.admin-panel-head > span { color: var(--muted); font-size: 11px; }
.admin-settings-list { background: var(--surface); border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; }
.admin-settings-list .box.acc { border: 0; border-radius: 0; box-shadow: none; }
.admin-settings-list .box.acc + .box.acc { border-top: 1px solid var(--line); }
.admin-settings-list .acc > summary { min-height: 66px; padding: 14px; border-radius: 0; }
.admin-settings-list .acc .at b { font-size: 13px; font-weight: 600; }
.admin-settings-list .acc .at small { font-size: 11px; line-height: 1.5; }
.admin-row-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--ground); color: var(--ctl-fg); }
.admin-row-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.admin-settings-list .acc .ac { width: 18px; height: 18px; transform: rotate(-90deg); }
.admin-settings-list .acc[open] > summary .ac { transform: rotate(0); }
.admin-actions .btn, .box .admin-actions button.dark { min-height: 44px; padding: 12px; font-size: 12px; border-radius: 10px; }
.admin-actions button.dark { width: 100%; padding: 12px; min-height: 44px; border: 0; border-radius: 10px; background: var(--act); color: var(--on-press); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.admin-actions button.dark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.admin-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line2); font-size: 11px; color: var(--muted); }
.admin-footer a { display: flex; align-items: center; min-height: 32px; color: var(--muted); text-decoration: none; }
.settings .usage-summary { margin: 0; }
.settings .usage-head h3 { font-size: 18px; }
@media (max-width: 359px) {
  .wrap.admin.settings { padding-inline: 14px; }
  .settings .admin-head h1 { font-size: 22px; }
}

/* 관리자: 단가표 이름 맞추기 (묶음마다 단가표 줄을 고르는 목록, Claude 제안, 이어 둔 연결) */
.box select { width: 100%; font: inherit; font-size: 15px; padding: 11px 12px; border: 1.5px solid var(--line2); border-radius: 12px; background: var(--surface); color: var(--fg); }
.box select:focus-visible { outline: none; border-color: var(--accent); }
.box button.dark { background: var(--act); color: var(--on-press); }
.box button:disabled { opacity: 0.55; cursor: progress; }
.aibox { display: flex; flex-direction: column; gap: 8px; }
.aimsg:empty { display: none; }
.box p.aimsg.err { background: var(--warn-soft); color: var(--warn-t); padding: 10px 12px; border-radius: 10px; }
.mrow { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.mrow input[type="hidden"] + .mh { margin-top: 0; }
form > .mrow:first-of-type { border-top: 0; padding-top: 0; }
.mh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 15px; }
.mh b { font-weight: 700; }
.mh small { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.box p.mw { font-size: 13px; line-height: 1.45; }
.mw i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--muted); vertical-align: 0.05em; }
.mw.high i { background: var(--stock); }
.mw.medium i { background: var(--hold); }
.box label.check.dl { align-items: flex-start; }
.box label.check.dl input { margin-top: 2px; }
.box label.check.dl span { display: flex; flex-direction: column; gap: 2px; min-width: 0; word-break: keep-all; font-size: 14px; font-weight: 500; }
.box label.check.dl small { font-size: 12.5px; font-weight: 400; color: var(--muted); }

/* 관리자: 단가표 지난 변경 (이전 단가표와 견준 결과) */
.pchange { display: flex; flex-direction: column; gap: 8px; }
.pchange h3 { margin: 0; }
.plist > summary { cursor: pointer; font-size: 14px; font-weight: 600; padding: 6px 0; }
.plist h4 { margin: 10px 0 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.plist ul { list-style: none; margin: 0; padding: 0; }
.plist li { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.plist li:first-child { border-top: 0; }
.plist li .pv { font-size: 13px; color: var(--fg); word-break: break-all; font-variant-numeric: tabular-nums; }
.plist li .pv s { color: var(--muted); }
.plist li .pv i { font-style: normal; font-weight: 700; color: var(--fg); }
.plist li.sus b { color: var(--warn-t); }
.plist li .why { font-size: 12.5px; font-weight: 600; color: var(--warn-t); }


/* 단가표 사진 갱신 (2026-10-11): 단가표 탭 맨 위의 '사진으로 갱신' 단추와 그 판(app.js의 openPriceEdit). 단추가 둘이 되면 날짜 글이 윗줄을 다 차지하고 단추 둘이 아랫줄에 나란히 선다.
   판은 사진으로 찾기 판과 같은 덮개(.sheet) 위의 카드이고, 안쪽(.pubody)만 스크롤되며 단추 줄(.pufoot)은 아래에 붙어 있다 */
.pdate.pu { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; }
.pdate.pu > span { flex: 1 1 100%; }
.pdate .pedit { all: unset; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px 0 13px; border-radius: 999px; background: var(--ctl); color: var(--ctl-fg); font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pdate .pedit svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pdate .pedit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .pdate .pedit { transition: transform 0.15s; } .pdate .pedit:active { transform: scale(0.96); } }
.pin { width: min(100%, 600px); }
.pubody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; }
.pufoot { display: flex; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.pufoot[hidden] { display: none; }
.pubtn { all: unset; box-sizing: border-box; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 14px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pubtn { word-break: keep-all; }   /* 두 줄이 되는 글('적용할 것을 체크하세요')이 낱말 가운데서 끊기지 않게 */
.pubtn.sub { background: var(--ctl); color: var(--ctl-fg); }
.pubtn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pubtn:disabled { opacity: 0.45; cursor: default; }
.pubtn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.pudesc { margin: 8px 0 0; font-size: 14px; line-height: 1.55; word-break: keep-all; }
.pufiles { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.pufiles li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--line2); border-radius: 10px; font-size: 13px; }
.pufiles li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purm { all: unset; flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); cursor: pointer; }
.purm svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.purm:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.puundo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--ground); font-size: 13px; }
.puundo .chip { flex: none; min-height: 40px; }
.puwait { display: flex; flex-direction: column; align-items: center; padding: 24px 0 8px; text-align: center; }
.puspin { width: 34px; height: 34px; border: 3px solid var(--line2); border-top-color: var(--accent); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .puspin { animation: puspin 0.9s linear infinite; } }
@keyframes puspin { to { transform: rotate(360deg); } }
.putime { font-variant-numeric: tabular-nums; }
.pucard { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.pucheck { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: 15px; cursor: pointer; }
.pucheck input { flex: none; width: 22px; height: 22px; accent-color: var(--accent); }
.pucard.sus .pucheck b { color: var(--warn-t); }
.puold { font-size: 14px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; word-break: break-all; }   /* 새 값은 본문 색 굵게, 옛 값(<s>)은 흐리게 취소선 */
.puold s { font-weight: 400; color: var(--muted); }
.puold i { font-style: normal; font-weight: 700; color: var(--fg); }
.puold i.big { color: var(--warn-t); }   /* 고친 값이 30% 넘게 다르면 */
/* 달라진 글자 (2026-10-11, "바뀐부분은 눈에 띄게 색도"): 새 값은 채운 알약, 옛 값은 옅은 바탕 — 단가표 탭의 바뀐 값과 같은 코발트 말투. 경고의 주황은 '의심스러운 이유'에만 쓴다 */
.pucard mark, .pv mark { padding: 0 3px; border-radius: 5px; font-weight: 800; }
.puval { box-sizing: border-box; width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--line2); border-radius: 10px; background: var(--surface); color: var(--fg); }   /* 16px: iOS가 입력칸을 확대하지 않는 최소 크기 */
.puval:focus-visible { outline: none; border-color: var(--accent); }
.puwhy { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--warn-t); }
/* 수정본 그대로 (2026-10-12): 달라진 줄 아래의 '단가표에서 빠지는 줄'·'새로 들어오는 줄' 구역. 카드는 달라진 줄과 같은 꼴이고, 사진에 안 찍힌 것으로 보이는 줄은 접힌 칸(.puhold) 안에 둔다 */
.puh { margin: 20px 0 0; font-size: 15px; font-weight: 700; }
.puh b { margin-left: 2px; color: var(--accent-t); font-variant-numeric: tabular-nums; }
.puh + .vnote { margin: 4px 0 10px; }
.puold small, .puwhere { font-size: 12.5px; font-weight: 400; color: var(--muted); word-break: keep-all; }
.puold small { margin-left: 6px; }
.puold.pux { font-size: 13.5px; }
.puhold { margin-top: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.puhold summary { padding: 12px 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.puhold .vnote { margin: 0 0 10px; }
.puhold .chip { margin-bottom: 10px; min-height: 40px; }
.puall { margin-top: 14px; font-size: 13px; }
.puall summary { padding: 6px 0; font-weight: 600; cursor: pointer; }
.puall ul { margin: 6px 0 0; padding: 0; list-style: none; }
.puall li { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-top: 1px solid var(--line); }
.puall li span { font-size: 12.5px; color: var(--muted); word-break: break-all; font-variant-numeric: tabular-nums; }
.puall li.sus b { color: var(--warn-t); }
.puall li span i { font-style: normal; font-weight: 700; color: var(--accent-t); }   /* 전체 내용 목록에서 '달라짐'도 바뀐 곳의 코발트로 */
/* 읽은 전체 내용의 '같음' 줄 고치기 (2026-10-15, 사용자: "텍스트가 다른게 있는데 수정할 수 있게 해줘"): 줄 끝의 '고치기' 칩을 누르면 그 줄이 값 칸이 있는 카드(.pucard.fix)로 펼쳐진다.
   카드는 위의 달라진 줄 카드와 같은 꼴이고, 목록의 줄 안에 들어가니 카드의 윗선은 뺀다. 아래 줄의 안내와 '그대로 두기'는 한 줄에 (좁으면 꺾인다) */
.puall li .pufixgo { align-self: flex-start; margin-top: 6px; }
.puall li.pufix { padding: 0; }
.puall li.pufix .pucard { border-top: 0; }
.pucard .pufixb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.pucard .pufixb .chip { flex: none; }
@media (pointer: coarse) { .puall li .pufixgo::after, .pucard .pufixb .chip::after { content: ""; position: absolute; inset: -4px; } .puall li .pufixgo, .pucard .pufixb .chip { position: relative; } }   /* 손가락 자리 44px쯤 */

/* 단가표 직접 고치기 (2026-10-11, 시안 '단가수정-시안' A안: 줄에서 바로 고치기): 단가표 탭 날짜 줄의 '고치기' 알약 → 켜면 단가가 회색 칸 → 누른 줄이 코발트 테두리 카드로 펼쳐진다 (app.js의 pd* 구역).
   카드는 재고 탭에서 건을 열면 뜨는 상세 카드와 같은 말투(테두리·그림자). 색은 앱의 변수만 써서 어두운 테마가 그대로 따라온다. 증감 알약의 주황(--warn)은 ±30% 같은 확인이 필요할 때만 쓴다. */
.pdate.pd > span { min-width: 0; }
.pdbr { flex: 0 0 100%; height: 0; }
.pdmode { all: unset; box-sizing: border-box; position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 11px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line2); background: var(--surface); color: var(--ctl-fg); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pdmode svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pdmode[aria-pressed="true"] { background: var(--press); box-shadow: none; color: var(--on-press); }
.pdmode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .pdmode::after { content: ""; position: absolute; inset: -5px -4px; } }   /* 눌리는 면 34px → 44px */
.pdbanner { flex: 0 0 100%; display: flex; align-items: center; gap: 9px; margin-top: 2px; padding: 11px 14px; border-radius: 12px; background: var(--ctl); color: var(--fg); font-size: 13.5px; font-weight: 600; }
.pdbanner svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pdbanner span { word-break: keep-all; }
.pdbanner small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); word-break: keep-all; }
@media (max-width: 379px) { .pdbanner small { display: none; } }   /* 좁은 폰에서는 덧붙인 글을 접는다 (한 줄에 안 들어가 낱말 가운데서 꺾였다) */

/* 고치기를 켠 동안: 고칠 수 있는 줄(.pded)의 단가는 한 줄에 하나씩 눌러 고치는 회색 칸, 창고도 눌러 고치는 칸 */
#list.pdon .pded .prow { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
#list.pdon .pded .pv { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 0; }
#list.pdon .pded .pv > .sep { display: none; }
#list.pdon .pded .pv > .pe { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 6px; width: auto; max-width: 100%; min-height: 36px; padding: 4px 12px; border-radius: 10px; background: var(--ctl); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#list.pdon .pded .pv > .pe i { margin: 0; }
#list.pdon .pded .pv > .pe em { margin-left: 0; }
#list.pdon .pded .pv > .pe b.chg { margin-right: 0; }   /* 줄 끝 알약을 바깥으로 내미는 규칙은 칸 안에서는 필요 없다 */
#list.pdon .pded .pv > .pe:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#list.pdon .pded .pold { align-self: flex-end; }
#list.pdon .prow .pn .pwh.pdw { display: inline-flex; align-items: center; margin-top: 6px; min-height: 32px; padding: 3px 10px; border-radius: 10px; background: var(--ctl); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#list.pdon .prow .pn .pwh.pdw em { font-style: normal; color: var(--muted); }
#list.pdon .prow .pn .pwh.pdw i { flex: none; margin-right: 6px; padding: 0; background: none; white-space: nowrap; }   /* 칸 안에서는 '창고' 꼬리표의 바탕을 지운다 (칸 자체가 회색). 좁은 칸에서 '창/고'로 꺾이지 않게 */
#list.pdon .prow .pn .pwh.pdw:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { #list.pdon .pded .pv > .pe { min-height: 44px; } #list.pdon .prow .pn .pwh.pdw { position: relative; min-height: 40px; } #list.pdon .prow .pn .pwh.pdw::after { content: ""; position: absolute; inset: -2px -4px; } }   /* 창고 칸은 줄이 길어지지 않게 40px로 두고, 눌림 면만 44px로 */
.pdlock { font-size: 11.5px; color: var(--muted); }
.pdundo { all: unset; position: relative; margin-left: 8px; color: var(--accent-t); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pdundo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (pointer: coarse) { .pdundo::after { content: ""; position: absolute; inset: -12px -8px; } }

/* 펼쳐진 카드: 2026-10-14 A안 '정돈된 카드' (시안/단가수정카드-시안.png; 사용자: "단가 수정 화면을 보다 깔끔하고 심플하게 그리고 균형있게" → "a로 가는데 이거는 빼줘"(±단추 줄)).
   전에는 카드의 먹선 테두리, 초점 칸의 먹선 + 회색 번짐(테가 둘), 칸 밑의 회색 ±칩 넷, 먹색을 흐린 꺼진 저장 단추(탁한 회갈색)가 함께 무거웠다.
   이제 앱의 다른 카드처럼 연한 --edge 선과 옅은 그림자의 흰 카드, 칸은 옅은 면(--ground)이고 누른 칸만 먹선 하나, 단추 둘은 같은 크기의 알약이다.
   ±단추는 뺐다: 키보드 ↑↓(±100, Shift ±500)는 그대로다 (app.js pdKey) */
.pdli { list-style: none; }
.pdcard { margin: 10px 6px 14px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--edge), 0 16px 30px -14px rgba(33, 12, 2, 0.22); overflow: hidden; }
.pdhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 16px 18px 2px; }
.pdhead b { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.pdhead .bl { display: inline-flex; }
.pdhead small { font-size: 12.5px; color: var(--muted); }
.pdhead .pwh i { margin-right: 4px; font-style: normal; font-weight: 500; }   /* '창고'는 꼬리표 없이 글로 */
.pdbody { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 16px; }
.pdent { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.pdent > label { font-size: 14px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.pdent > label small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.pdent:not(.chg) > label small.now { display: none; }
/* 입력칸의 기본 모양(.pdin)은 간략보고의 단가 칸(.brprice .pdin)도 쓴다: 그대로 두고, 이 카드 안에서만 옅은 면 + 누른 칸의 먹선 하나로 바꾼다 */
.pdin { display: flex; align-items: center; justify-content: flex-end; gap: 6px; height: 46px; padding: 0 14px; border: 1.5px solid var(--line2); border-radius: 11px; background: var(--surface); }
.pdin:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.pdin input { box-sizing: border-box; flex: 1 1 0; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--fg); font: inherit; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; caret-color: var(--accent); }
.pdin input::placeholder { font-size: 15px; font-weight: 400; color: var(--muted); }
.pdin i { flex: none; font-style: normal; font-size: 13px; color: var(--muted); }
.pdcard .pdin { height: 50px; border: 0; border-radius: 14px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.pdcard .pdent.chg .pdin { background: var(--mark-soft); box-shadow: inset 0 0 0 1px var(--edge); }   /* 바꾼 칸: 바뀐 단가 표시와 같은 옅은 면 */
.pdcard .pdin:focus-within, .pdcard .pdent.chg .pdin:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--fg); }
.pdcard .pdent.bigc .pdin, .pdcard .pdent.bigc .pdin:focus-within { background: var(--warn-soft); box-shadow: inset 0 0 0 1.5px var(--warn); }   /* ±30% 넘게 바뀌었거나 예정으로 비운 칸 */
.pdcard .pdin input { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.pdbadge { flex: none; margin-right: auto; padding: 3px 8px; border-radius: 999px; background: var(--mark); color: var(--fg); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pdbadge:empty { display: none; }
.pdbadge.big { background: var(--warn-soft); color: var(--warn-t); }
.pdent:not(.chg) .pdbadge:not(.big) { background: var(--ctl); color: var(--muted); font-weight: 600; }   /* 예정 표시 */
/* 좁은 폰(380px 미만): 증감 알약이 입력칸 안에서 숫자 자리를 빼앗아 7자리(1,234,567)가 잘리니, 이름표 밑으로 옮기고 이름표 칸과 카드의 옆 여백도 줄인다 */
.pdent > label .pdbadge { display: none; }
@media (max-width: 379px) {
  .pdent { grid-template-columns: 68px minmax(0, 1fr); gap: 8px 10px; }
  .pdin .pdbadge { display: none; }
  .pdent > label .pdbadge:not(:empty) { display: inline-block; margin-top: 4px; padding: 3px 7px; font-size: 12px; }
  .pdin { padding: 0 12px; }
  .pdhead, .pdbody, .pdfoot { padding-left: 14px; padding-right: 14px; }
}
.pdnote { margin: 0; padding: 10px 12px; border-radius: 11px; background: var(--ctl); font-size: 13px; line-height: 1.5; word-break: keep-all; }
.pdnote.warn { background: var(--warn-soft); color: var(--warn-t); font-weight: 600; }
.pdnote b { font-weight: 800; }
.pdnote small { font-size: 12px; font-weight: 500; opacity: 0.85; }
.pdnotebox:empty { display: none; }
.pdfoot { display: flex; gap: 8px; padding: 2px 18px 18px; }
.pdbtn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: 999px; background: var(--act); color: var(--on-press); font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pdfoot .pdbtn { flex: 1 1 auto; }   /* 글 길이가 같은 취소 · 저장은 같은 너비, '그래도 내 값으로 저장'처럼 긴 글은 그만큼 더 */
.pdbtn.sub { background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); color: var(--fg); }
.pdbtn:disabled { background: var(--ctl); box-shadow: none; color: color-mix(in srgb, var(--muted) 75%, transparent); cursor: default; }   /* 전에는 먹색을 0.45로 흐려 탁한 회갈색이었다 */
.pdbtn:focus-visible, .pdchip:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.pdlab { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pdchips { display: flex; flex-wrap: wrap; gap: 8px; }
.pdchip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--ctl); color: var(--ctl-fg); font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pdchip.on { background: var(--press); color: var(--on-press); }
.pdchip.dash { background: none; box-shadow: inset 0 0 0 1.5px var(--line2); color: var(--muted); font-weight: 500; }
.pdchip.dash.on { background: var(--press); color: var(--on-press); box-shadow: none; }   /* 켜진 '직접 쓰기': 배경까지 (앞의 .dash가 배경을 없애서 흰 글자만 남아 칩이 사라져 보였다) */
.pdchip:disabled { opacity: 0.45; cursor: default; }
.pdwhfree { display: flex; gap: 8px; }
.pdwhfree input { box-sizing: border-box; flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); font: inherit; font-size: 16px; outline: 0; }   /* 창고 '직접 쓰기' 칸: 단가 칸과 같은 모양 */
.pdwhfree input:focus { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--fg); }
.pdwhfree .pdbtn { flex: none; min-width: 84px; }
@media (min-width: 1040px) {   /* PC: 입력칸과 단추를 너무 넓게 늘이지 않는다 */
  .pdent { grid-template-columns: 96px 240px; }
  .pdfoot { justify-content: flex-start; }
  .pdfoot .pdbtn { flex: 0 0 auto; min-width: 140px; }
}

/* 되돌리기 단추가 붙은 안내 (app.js toastAct) */
:root { --toast-link: #ffd9a6; }   /* 짙은 안내 띠 위의 되돌리기 글자 */
.toast.act { box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 24px); padding: 7px 7px 7px 18px; white-space: normal; }
.toast.act span { text-wrap: balance; }   /* 세 줄로 꺾일 때 낱말 하나만 한 줄에 남지 않게 (지원하는 브라우저에서) */   /* width: max-content: left 50%에 걸린 상자는 보통 화면 너비의 절반까지만 펴져서 글이 세 줄로 꺾였다. 좁은 폰에서만 두 줄로 */
.toast.act b { font-weight: 800; }
.toast.act button { all: unset; position: relative; flex: none; padding: 8px 14px; border-radius: 999px; background: rgba(127, 127, 127, 0.22); color: var(--toast-link); font-weight: 700; cursor: pointer; pointer-events: auto; }
@media (pointer: coarse) { .toast.act button::after { content: ""; position: absolute; inset: -4px -2px; } }

/* 관리자 화면: 직접 고친 단가 기록 */
.plist li .emeta { font-size: 12.5px; color: var(--muted); }
.plist li form.inl { display: flex; justify-content: flex-start; margin: 0; }
.plist li form.inl button.plain { flex: none; width: auto; padding: 4px 0; text-align: left; }
.plist.echeck li label.check { font-size: 14.5px; font-weight: 600; }
.plist li .pv mark { padding: 0 3px; border-radius: 5px; font-weight: 800; }

/* 단가표 탭 맨 윗부분 정돈 (2026-10-12, 사용자: "이 부분을 조금만 정돈 해줄 수 있니"): 날짜 줄 오른쪽에 혼자 떠 있던 '고치기'(34px, 테두리 알약)를 아래 단추 줄의 오른쪽 끝으로 내려
   세 단추가 한 줄, 같은 높이(40px), 두 가지 모양(파랑 = 그림 만들기, 회색 = 나머지)이 되게 한다. 단추 줄과 '최근 바뀐 단가' 띠의 왼쪽·오른쪽 끝을 아래 카드와 맞추고(날짜 글만 4px 들여 쓴다), 둘 사이 틈을 줄였다.
   띠의 단추는 파란 테두리를 빼고 조용한 알약으로(켜지면 지금처럼 채운다). 마크업은 그대로라 CSS만 올리면 된다. 맨 끝에 두는 까닭: 위의 .pdate / .pdmode / .pchg 규칙과 구체성이 같아 뒤에 와야 이긴다 */
.pdate { padding-inline: 0; row-gap: 8px; }
.pdate > span { padding-left: 4px; }
.pdate.pd > span { flex: 1 1 100%; }
.pdate .pdbr { display: none; }
.pdate .pimg, .pdate .pedit { height: 40px; }
.pdate .pdmode { order: 3; margin-left: auto; height: 40px; padding: 0 16px 0 13px; gap: 7px; box-shadow: none; background: var(--ctl); font-size: 14.5px; }
.pdate .pdmode svg { width: 18px; height: 18px; }
.pdate .pdbanner { order: 4; }
.pdate:has(+ .pchg) { padding-bottom: 2px; margin-bottom: -6px; }
.pchg { padding: 5px 5px 5px 14px; }
.pchg button { height: 34px; box-shadow: inset 0 0 0 1px var(--line2); font-weight: 600; }
@media (pointer: coarse) { .pdate .pdmode::after { inset: -2px; } .pchg button::after { inset: -5px; } }
@media (max-width: 479px) {   /* 폰: 세 단추가 한 줄에 들도록 글자와 옆 여백을 줄인다 */
  .pdate.pd { column-gap: 6px; }
  .pdate.pd .pimg, .pdate.pd .pedit, .pdate.pd .pdmode { padding: 0 12px 0 10px; gap: 5px; font-size: 13.5px; }
  .pdate.pd .pimg small { margin-left: 1px; padding-left: 7px; font-size: 12px; }
  .pdate.pd svg { width: 17px; height: 17px; }
}
@media (max-width: 379px) { .pdate.pd .pedit svg, .pdate.pd .pdmode svg { display: none; } .pdate.pd .pedit, .pdate.pd .pdmode { padding: 0 12px; } }   /* 더 좁으면 회색 단추의 아이콘을 뺀다 */
@media (max-width: 339px) { .pdate.pd { column-gap: 5px; } .pdate.pd .pimg svg { display: none; } .pdate.pd .pimg, .pdate.pd .pedit, .pdate.pd .pdmode { padding: 0 10px; font-size: 13px; } .pdate.pd .pimg small { padding-left: 6px; } }   /* 320px: 파란 단추의 아이콘도 빼야 한 줄에 든다 */
/* '사진으로 갱신'과 '고치기'는 둘 다 단가를 고치는 길(방법만 다르다)이라 오른쪽 끝에 한 덩어리로 붙인다 (사용자, 2026-10-12): 사이 틈 2px, 맞닿는 쪽 모서리만 살짝 둥글게. 왼쪽의 파란 '단가표 그림'은 내보내는 단추라 떨어져 있다.
   사진 갱신이 꺼져 있으면(.pedit 없음) 고치기는 위 규칙대로 혼자 오른쪽 끝에 선다. --pg는 단추 사이 틈(폭마다 다르다)이고 고치기를 그만큼 당겨 2px만 남긴다 */
.pdate { --pg: 10px; }
.pdate .pedit { order: 2; }
.pdate.pd .pedit { margin-left: auto; border-radius: 999px 8px 8px 999px; }
.pdate:has(.pedit) .pdmode { margin-left: calc(2px - var(--pg)); border-radius: 8px 999px 999px 8px; }
@media (max-width: 479px) { .pdate.pd { --pg: 6px; } }
@media (max-width: 339px) { .pdate.pd { --pg: 5px; } }
/* 냉동 단가표의 '글로 갱신' (2026-10-14): 회색 덩어리의 맨 앞에 붙는다 → [단가표 그림]  [글로 갱신 | 사진으로 갱신 | 고치기]. 가운데 단추는 네 모서리를 살짝만 둥글게.
   .pfbr는 덩어리 앞의 빈 칸이다 (보통은 숨김). 세 단추가 파란 단추와 한 줄에 들지 않는 폭에서는 100% 폭이 되어 덩어리째 다음 줄로 넘기고, 덩어리는 그 줄의 오른쪽 끝에 선다 */
.pdate .pfbr { display: none; order: 2; flex: 0 0 100%; height: 0; }
.pdate.ft .pftext { margin-left: auto; border-radius: 999px 8px 8px 999px; }
.pdate.ft .pftext + .pedit { margin-left: calc(2px - var(--pg)); border-radius: 8px 999px 999px 8px; }
.pdate.ft.pd .pftext + .pedit { border-radius: 8px; }
/* 좁은 폭: 덩어리가 제 줄을 채우는 막대가 된다 (단추마다 같은 폭, 글이 긴 단추는 그만큼 넓게). 파란 단추가 없을 때(검색에 맞는 줄이 없음)도 같은 모양 */
@media (max-width: 479px) {   /* 고치기가 없으면 세 단추가 한 줄에 418px쯤 든다 */
  .pdate.ft .pimg + .pfbr { display: block; }
  .pdate.ft .pedit { flex: 1 1 0; justify-content: center; }
  .pdate.ft .pftext { margin-left: 0; }
}
@media (max-width: 599px) {   /* 고치기까지 네 단추는 511px쯤: 목록 폭이 528px이 되는 600px부터 한 줄 */
  .pdate.ft.pd .pimg + .pfbr { display: block; }
  .pdate.ft.pd .pedit, .pdate.ft.pd .pdmode { flex: 1 1 0; justify-content: center; }
  .pdate.ft.pd .pftext { margin-left: 0; }
}

/* 관리자 화면: 사용량 (2026-10-12). 기기별·날짜별 표는 폰에서 옆으로 밀어 본다. 시간대 막대는 0~23시 24칸 */
.uscroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.utab { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.utab th { padding: 6px 8px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line2); }
.utab td { padding: 8px; text-align: right; border-bottom: 1px solid var(--line); }
.utab th:first-child, .utab td:first-child { text-align: left; padding-left: 0; }
.utab td.un form { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; }   /* 관리자 화면의 양식은 기본이 세로 쌓기라 가로로 되돌린다 */
.utab td.un input { width: 132px; min-width: 0; margin: 0; padding: 6px 8px; font-size: 13.5px; }
.utab td.un button.plain { flex: none; width: auto; margin: 0; padding: 4px 2px; }
.utab td.un small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.uhours { display: flex; align-items: flex-end; gap: 3px; height: 96px; }
.uhours div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.uhours i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--accent); }
.uhours small { height: 12px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 관리자 화면: 직원 연락처 (2026-10-12). 줄마다 이름·직함 | 전화번호 | 위로·아래로·지우기.
   좁은 화면에서는 두 줄로 나눈다: 이름 칸과 지우기, 그 아래 전화번호 칸과 위로·아래로 (칸 둘과 단추 셋을 한 줄에 두면 전화번호가 잘린다. 320px에서도 번호가 다 보여야 한다).
   지우기를 누른 줄(.ctoff)은 저장할 때까지 그 자리에 흐리게 남는다 (줄을 바로 없애면 그 자리로 올라온 단추가 한 번 더 눌린다). */
.ctlist { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ctrow { display: flex; align-items: center; gap: 8px; }
.ctrow input[name="n[]"] { flex: 1.25 1 0; min-width: 0; }
.ctrow input[name="p[]"] { flex: 1 1 0; min-width: 0; font-variant-numeric: tabular-nums; }
.ctbtns { flex: none; display: flex; gap: 4px; }
.box button.ctb { width: 40px; height: 44px; padding: 0; background: var(--ctl); color: var(--ctl-fg); font-size: 15px; font-weight: 600; }
.box button.ctb.del { color: var(--warn-t); }
.box button.ctb[aria-disabled="true"] { opacity: 0.35; cursor: default; }   /* 맨 위 줄의 위로, 맨 아래 줄의 아래로 */
.ctrow.ctoff input { background: var(--ctl); color: var(--muted); text-decoration: line-through; }
.box .ctrow.ctoff button.ctb.del { color: var(--accent-t); }   /* 되살리기 */
.box p.cthint { padding: 9px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-t); font-size: 13.5px; }
.box p.ctfull { font-size: 13.5px; color: var(--muted); }
.ctacts { display: flex; gap: 8px; }
.ctacts button { flex: 1; }
.box .ctacts button:disabled { cursor: default; }
/* 검색어가 걸린 진행상황 (app.js stTag): 건 줄의 네 칸 아래, 줄 폭을 다 쓰는 작은 한 줄. 걸린 곳만 굵은 본문색. 긴 진행상황('미통관/쿼터초과/계약분100%/…')은 줄 안에서 꺾인다 */
.lot .lst { grid-column: 1 / -1; margin-top: 2px; font-size: 12px; text-align: left; font-variant-numeric: normal; word-break: keep-all; overflow-wrap: anywhere; }   /* text-align: 둘째 칸부터는 오른쪽 맞춤(.lot > :nth-child(n+2))인데 이 줄도 거기에 걸린다 */
.lot .lst em { font-style: normal; font-weight: 700; color: var(--fg); }
/* 관리자 화면: 유통기한 임박 기준 (2026-10-13). 개월 수 칸 하나와 그 뒤의 말('개월 미만이면 임박')을 한 줄에 */
.soonrow { display: flex; align-items: center; gap: 10px; }
.box .soonrow input[type="number"] { flex: none; width: 96px; font-variant-numeric: tabular-nums; }
.soonrow span { font-size: 15px; color: var(--fg); }
@media (max-width: 559px) {
  .ctrow { display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .ctrow:last-child { padding-bottom: 0; border-bottom: 0; }
  .ctbtns { display: contents; }   /* 단추 셋을 줄의 격자에 바로 놓는다 (스크립트가 꺼져 hidden인 채면 맨 위의 [hidden] 규칙이 숨긴다) */
  .ctrow input[name="n[]"] { grid-area: 1 / 1 / 2 / 3; }
  .ctrow .ctb.del { grid-area: 1 / 3; }
  .ctrow input[name="p[]"] { grid-area: 2 / 1; }
  .ctrow .ctb[data-ct="up"] { grid-area: 2 / 2; }
  .ctrow .ctb[data-ct="down"] { grid-area: 2 / 3; }
}

/* ==== 크림 & 에스프레소 (2026-10-13) ====
   사용자가 givingli.com을 보여 주며 "이 사이트를 참고해서 전체적인 디자인을 바꾸면 어떻게 될까"라고 했고, 시안(시안/전체디자인-기빙리-시안.png)을 본 뒤
   요약 카드는 짙은 면이 "너무 강렬"하다고 해 오트색 면(시안/전체디자인-기빙리-요약카드-약하게.png의 B)으로, 어두운 테마는 없이 가기로 했다.
   그 사이트의 결: 크림 바탕 + 에스프레소 글자, 채도 높은 색은 토마토 빨강 하나, 조작부는 모두 알약, 큰 글자는 굵기를 빼고 자간을 좁혀 크게, 작은 부가 글자는 고정폭, 면은 테두리 없이.
   색 자체는 맨 위 :root에 있다. 여기는 모양과 굵기, 그리고 빨강(--cta)을 쓰는 몇 곳이다.
   같은 날 저녁 "약간 뭔가 어수선한 느낌"이라고 해 다섯 군데를 가라앉혔다(시안/전체디자인-다듬기-시안.png): 재고 막대를 옅게, 묶음 제목은 품명 먼저, 흰 알약은 검색창 하나만, 주의 칩은 두 칸 격자, 고정폭 글꼴은 환율 줄과 B/L에만. 아래 규칙마다 적어 두었다.
   이 구역은 위의 규칙을 덮어쓴다(같은 선택자면 뒤에 온 것이 이긴다): 파일의 맨 끝에 둔다. 위쪽에 좁은 폰용 단계가 있는 값(요약 숫자, 묶음 제목)은 여기서 단계를 다시 적는다. */
body { letter-spacing: -0.012em; }
h1 { font-weight: 500; letter-spacing: -0.05em; }

/* 머리: 남색 면 없이 바탕 그대로. 제목은 굵기를 빼고 크게, 환율 줄은 고정폭 (고정폭은 이 줄과 건 줄의 B/L에만 쓴다: 한글이 섞인 줄에 쓰면 '창고 / EST'처럼 띄어쓰기가 벌어졌다) */
.cols .head { padding-block: 28px 16px; align-items: flex-end; }   /* 위 28px, 아래 16px (2026-10-13, 20 / 8px이던 것을 넓혔다: 제목이 탭에 12px로 바짝 붙어 답답해 보였다. 이제 제목–탭이 탭–검색창과 같은 20px이다) */
.cols .head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; align-self: center; }   /* 옆의 냉동 | 냉장 | 동결 · 아이콘과 세로 가운데 (2026-10-15, 사용자: "텍스트가 아래로 조금 쳐진것 같은데 옆에 버튼들과 높이가 정확하게 가운데로 맞춰줘": 머리 줄이 아래 끝 맞춤이라 제목 글자가 단추 가운데보다 4~6px 아래였다).
   30px · 굵기 700 · 자간 −0.03em (같은 날, 사용자: "재고조회 텍스트가 너무 힘이 없어보이지 않니??? 메인타이틀인데... 디자인적으로 최적화 해줘.": 크림 & 에스프레소 때 모든 h1을 굵기 500 · 자간 −0.05em으로 가볍게 해서
   메인 타이틀이 옆 냉동 단추(600)보다 약했다. 28/700 · 30/700 · 30/750 · 30/800 · 31/700 · 32/800 · 30/900을 그려 보고 골랐다: 800 이상은 좁은 자간에서 글자가 붙어 무겁고, 굵을수록 자간을 덜 좁힌다. 로그인 · 관리자 화면의 h1은 그대로) */
.rate { font-family: var(--mono); font-size: 10.5px; letter-spacing: -0.02em; }
/* 탭: 밑줄 대신 알약 칸. 하나뿐인 .ink가 켜진 탭 밑의 짙은 알약이 되어 미끄러진다 (폭은 탭 한 칸, 자리는 --i번째: 밀어 넘길 때 app.js가 --i를 소수로 적는 것도 그대로 통한다) */
.modes { margin: 4px 0 12px; }
.seg { padding: 4px; border-radius: 999px; background: var(--track); }
.seg .ink { left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / var(--n)); height: auto; border-radius: 999px; }
.seg button { position: relative; z-index: 1; padding: 9px 0; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ctl-fg); }
.seg button[aria-pressed="true"] { color: var(--on-press); }
.seg button:focus-visible { outline-offset: 2px; }
/* 검색창만 흰 알약이고, 선택·필터 칩은 테 없이 한 단계 가라앉은 면(--ctl)이다: 처음에는 셋 다 테 두른 흰 알약이었는데 머리에 흰 알약이 아홉 개라 어수선했다. 검색어가 있거나 초점이 오면 검색창에 테가 생긴다(위의 규칙) */
.top { box-shadow: none; }
#q { padding-left: 44px; border-width: 1px; border-radius: 999px; background: var(--surface); }
.search > svg { left: 16px; }
.top.compact #q { border-radius: 999px; }
.selbtn { border-radius: 999px; }
.top .selbtn, .fbar .chip { border-color: var(--edge); color: var(--fg); }   /* 연한 테두리 (시안/필터칩-테두리-시안.png의 B): 칩의 면(--ctl)이 바탕과 거의 같은 밝기라 테 없이는 경계가 흐렸다. --line2보다 한 단계 짙고, 흰 검색창보다는 앞서지 않는 색. 켜진 칩·'지우기'·마우스를 올린 칩은 아래와 위의 더 구체적인 규칙이 제 테두리 색을 준다 */
.top .selbtn[aria-pressed="true"], .fbar .drop.on { border-color: var(--press); background: var(--press); color: var(--on-press); }
.fbar .drop[aria-expanded="true"] { border-color: var(--fg); }
.fpanel, .recent { border-radius: 20px; }
.fdone { border-radius: 0 0 19px 19px; }
/* 붙여 둔 묶음 제목(#strip): 화면 폭에 관계없이 네 모서리가 둥근 떠 있는 카드 (넓은 화면도 모바일과 같은 마감, 2026-10-14). 필터 칩과 같은 연한 테두리를 두른다: 그림자만으로는 흰 건 줄 위에서 카드의 가장자리가 잘 안 보였다 */
.cols .strip { top: calc(100% + 2px); border: 1px solid var(--edge); border-radius: 16px; box-shadow: 0 6px 18px rgba(33, 12, 2, 0.12); }
/* 카드 위로 목록 글자가 잘린 채 비치던 것을 막는 가림막 (시안/묶음제목-위틈-시안.png의 A; 사용자: "위로 튀어나오는것 때문에 조금 지저분해보이는데"): 머리와 카드 사이의 2px 틈과 카드의 둥근 윗모서리 뒤로 글자가 지나갔다.
   카드 뒤에 바탕색 면을 머리의 아래 끝부터 카드의 가운데 높이까지 깐다. 그 아래로는 카드가 예전처럼 목록 위에 떠 있다 (카드 아래까지 다 가리는 B는 고르지 않았다: 떠 있는 느낌이 자연스럽다고 했다).
   z-index -1: 카드보다는 뒤, 붙어 있는 머리(.top, 제 쌓임 맥락)보다는 안쪽이라 목록보다는 앞이다. 좌우 -17px은 카드의 테 1px + 머리의 안쪽 여백 16px(머리의 양 끝까지), 위 -4px은 테 1px + 틈 2px + 머리와 1px 겹침(머리의 아래 끝이 소수 px 자리에 놓일 때 그 사이로 실금이 비치지 않게). 누르는 자리는 늘리지 않는다 */
.cols .strip::before { content: ""; position: absolute; z-index: -1; left: -17px; right: -17px; top: -4px; height: calc(50% + 4px); background: var(--bg); pointer-events: none; }

/* 요약 카드: 바탕보다 조금 짙은 면(--sum: 탭 칸의 오트색보다는 밝다) 위에 큰 숫자 하나. 주의 칩은 그 위의 흰 알약 */
.sumcard { --surface: #fffdf9; --line: rgba(33, 12, 2, 0.1); --line2: rgba(33, 12, 2, 0.11); --muted: #65534a; --stock: #2a8a59; --hold: #b47a00; margin-bottom: 18px; border: 0; border-radius: 26px; background: var(--sum); }
.summary { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: end; padding: 20px 20px 18px; }
.summary dt { font-size: 12px; letter-spacing: 0; }
.summary > .stock dd { margin-top: 5px; font-size: 39px; font-weight: 500; letter-spacing: -0.055em; line-height: 1; }
.summary small { opacity: 1; color: var(--muted); }   /* 단위(박스·건): 흐린 글자색 그대로 (예전에는 80%로 더 흐려 3.5:1이었다. 오트색 면 위에서 5.3:1) */
.summary > .stock dd small { margin-left: 3px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.summary > .stock .pair { margin-top: 8px; font-size: 11.5px; }
.summary > .hold, .summary > .inc { min-width: 124px; gap: 10px; }
.summary > .hold dd, .summary > .inc dd { font-size: 17px; font-weight: 500; letter-spacing: -0.04em; }
/* 입항 일정 탭의 요약 (2026-10-13, app.js planSummary): 세 숫자 밑에 전체 규모 한 줄. 왼쪽 '입고 예정 전체 N건 · kg', 오른쪽 '그 이후 · 입항일 미정' (좁으면 두 줄로 꺾인다) */
.summary .tot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 14px 0 0; padding-top: 11px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.summary .tot span { margin: 0; font-size: inherit; }
.summary .tot b { font-weight: 600; color: var(--fg); }
/* 입항 일정: B/L 건수와 품목 수를 구별하고, 입고 후 미통관을 오른쪽 가운데 줄에 표시한다. */
.summary.plan-summary { grid-template-areas: "stock hold" "stock received" "stock inc"; }
.summary.plan-summary > .stock { align-self: center; }
.summary > .received { grid-area: received; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 124px; padding-block: 5px; border-top: 1px solid var(--line); }
.summary > .received dd { font-size: 17px; font-weight: 500; letter-spacing: -0.04em; }
.summary .plan-count-items { display: block; margin-top: 2px; font-size: 10px; font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1.5; white-space: normal; color: var(--muted); }
.summary .plan-count-unknown { font-style: normal; }
.summary.plan-summary .tot > span { min-width: 0; white-space: normal; }
/* 이번 주 입고 (2026-10-15, app.js planSummary의 pin): 세 숫자와 전체 줄 사이의 한 칸. 제목 · 합계 한 줄, 그 밑에 날짜마다 한 줄 (테 두른 D-x 뱃지 · 날짜 · 건수).
   .summary span의 블록 · 작은 글자 · 흐린 색(위 칸들의 글)은 여기서는 풀어 준다 */
.summary .pin { grid-column: 1 / -1; margin: 14px 0 0; padding-top: 11px; border-top: 1px solid var(--line); }
.summary .pin + .tot { margin-top: 12px; }
.summary .pin span { display: inline; margin: 0; font-size: inherit; color: inherit; }
.summary .pin .pin-t { display: flex; align-items: center; gap: 5px; letter-spacing: 0; }   /* 제목은 위의 '이번 주 입항'과 같은 꼴(초록 점 + 흐린 글자): 이번 주에 일어나는 일 */
.summary .dday { flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 48px; height: 22px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--fg) 50%, transparent); border-radius: 7px; background: var(--surface); font-size: 11.5px; font-weight: 700; font-style: normal; letter-spacing: 0.01em; color: var(--fg); }
/* PC 표 보기의 한 줄 띠(body.gridview)에 남는 알약 · 글자 숫자: 흰 알약은 테두리 없이, 건수는 600, 어제 이후 숫자는 가늘게 (폰 · PC 카드 보기는 아래 '같은 흰 막대') */
.achip { padding: 8px 14px 8px 12px; border-color: transparent; }
.achip b { font-weight: 600; }
.alert.chg b { font-weight: 500; letter-spacing: -0.05em; }
/* 주의 · 어제 이후: 같은 흰 막대 (2026-10-16, 시안/요약카드-정리-시안.png의 A; 사용자: "이부분만 잘 정리하면 완벽할텐데. 시안 몇개좀 뽑아줘." → "a 진행.").
   전에는 가로선 둘로 나뉜 세 구역이 저마다 다른 꼴(큰 숫자 · 흰 알약 둘 · 맨 숫자 칸 넷)이었고, 어제 이후 숫자(24px)가 통관 전 · 입고 예정(17px)보다 커서 카드 아래가 무거웠다.
   이제 두 묶음이 같은 칸(이름 위 · 숫자 18px 아래)을 흰 막대 하나씩에 늘어놓는다. 칸 사이 선은 1px 틈으로 비치는 막대 바탕(--line)이고, 구역을 가르던 가로선 대신 간격으로 나눈다.
   누르면 그 칸이 먹색(다른 칩과 같다). 막대가 칸 크기라 손가락 자리(::after)를 따로 넓히지 않고, 누르는 동안은 줄어들지 않고 옅게 물든다(막대 안의 칸이 줄면 틈이 벌어져 보인다).
   칸 수(--c)는 막대 폭에 맞춘다: 폰과 좁은 오른쪽 칸은 주의 셋이면 두 칸씩(2 + 1), 어제 이후 다섯이면 세 칸씩(3 + 2), 359px 이하 폰은 어제 이후도 두 칸씩. 마지막 줄의 칸은 남는 폭을 나눠 가진다.
   칸 폭은 이름이 잘리지 않게 잰 값이다(11.5px에 '새로 들어옴' 52.5px, 점까지 '선적 예정일 지남' 86px; 390px 폰의 어제 이후 네 칸은 글자 자리 54.75px): 글꼴 · 이름 · 여백을 바꾸면 다시 잰다.
   :has()나 컨테이너 질의를 모르는 옛 브라우저는 주의 둘 · 어제 이후 넷 기준으로 그린다(셋째 · 다섯째 칸은 다음 줄로 꺾여 줄 끝까지 늘어난다) */
body:not(.gridview) .sumcard { container: sumcard / inline-size; }
body:not(.gridview) .sumcard .alerts, body:not(.gridview) .sumcard .changes { padding: 0 20px 14px; border-top: 0; }
body:not(.gridview) .sumcard .alerts:last-child, body:not(.gridview) .sumcard .changes { padding-bottom: 20px; }
body:not(.gridview) .sumcard .atitle, body:not(.gridview) .sumcard .changes .since { display: flex; align-items: baseline; gap: 6px; margin: 0 0 7px; padding: 0 2px; font-size: 12px; letter-spacing: 0; font-weight: 500; color: var(--muted); }
body:not(.gridview) .sumcard .atitle b { font-weight: 500; font-variant-numeric: tabular-nums; }
body:not(.gridview) .sumcard .changes.line { display: flex; align-items: baseline; gap: 10px; padding: 0 22px 18px; font-size: 12px; }   /* 바뀐 건이 없을 때: 제목과 '바뀐 건 없음'을 한 줄에 */
body:not(.gridview) .sumcard .changes.line .since { margin: 0; padding: 0; }
body:not(.gridview) .sumcard .achips, body:not(.gridview) .sumcard .changes .row { --c: 2; display: flex; flex-wrap: wrap; gap: 1px; padding: 0; border-radius: 16px; overflow: hidden; background: var(--line); }
body:not(.gridview) .sumcard .changes .row { --c: 4; }
body:not(.gridview) .sumcard .changes .row:has(> :nth-child(5)) { --c: 3; }
body:not(.gridview) .sumcard :is(.achip, .alert.chg) { all: unset; position: relative; box-sizing: border-box; flex: 1 0 calc(100% / var(--c) - 1px); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px 11px; background: var(--surface); cursor: pointer; }
body:not(.gridview) .sumcard .achip::before, body:not(.gridview) .sumcard .achip::after { content: none; }
body:not(.gridview) .sumcard :is(.achip > span, .alert.chg > i) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
body:not(.gridview) .sumcard .achip > span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--warn); vertical-align: 1px; }   /* 주황은 이 점 하나 (눌러도 그대로) */
body:not(.gridview) .sumcard :is(.achip, .alert.chg) b { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--fg); font-variant-numeric: tabular-nums; }
body:not(.gridview) .sumcard :is(.achip, .alert.chg)[aria-pressed="true"] { background: var(--press); }
body:not(.gridview) .sumcard :is(.achip, .alert.chg)[aria-pressed="true"] :is(span, i, b) { color: var(--on-press); }
body:not(.gridview) .sumcard :is(.achip, .alert.chg):not([aria-pressed="true"]):active { background: color-mix(in srgb, var(--fg) 7%, var(--surface)); }
body:not(.gridview) .sumcard :is(.achip, .alert.chg):focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }   /* 막대가 넘치는 것을 자르므로 테는 칸 안쪽에 */
@media (hover: hover) {
  body:not(.gridview) .sumcard :is(.achip, .alert.chg):not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); }
  body:not(.gridview) .sumcard :is(.achip, .alert.chg):not([aria-pressed="true"]):hover :is(span, i) { color: var(--fg); }
}
/* 넓은 막대(PC 오른쪽 칸 400px 이상): 주의 셋도 한 줄, 칸 안쪽 여백 14px. 480px 이상이면 어제 이후 다섯도 한 줄 */
@container sumcard (min-width: 400px) {
  body:not(.gridview) .sumcard .achips:has(> :nth-child(3)) { --c: 3; }
  body:not(.gridview) .sumcard :is(.achip, .alert.chg) { padding-inline: 14px; }
}
@container sumcard (min-width: 480px) { body:not(.gridview) .sumcard .changes .row:has(> :nth-child(5)) { --c: 5; } }
@media (max-width: 389px) { body:not(.gridview) .sumcard :is(.achip, .alert.chg) { padding-inline: 10px; } }
@media (max-width: 374px) { body:not(.gridview) .sumcard .alerts, body:not(.gridview) .sumcard .changes { padding-inline: 16px; } body:not(.gridview) .sumcard .changes.line { padding-inline: 18px; } }
@media (max-width: 359px) { body:not(.gridview) .sumcard .changes .row, body:not(.gridview) .sumcard .changes .row:has(> :nth-child(5)) { --c: 2; } }
/* 검색 중 폰의 한 줄 카드(.qmode)에서 눌러 둔 묶음이 남을 때: 숫자 줄과 같은 옆 여백 */
@media (max-width: 1039px) { body:not(.gridview) .sumcard.qmode .alerts, body:not(.gridview) .sumcard.qmode .changes { padding-inline: 16px; padding-bottom: 14px; } }
@media (max-width: 374px) { body:not(.gridview) .sumcard.qmode .alerts, body:not(.gridview) .sumcard.qmode .changes { padding-inline: 12px; } }
/* 큰 재고 숫자의 크기 단계: 숫자(단위 포함)의 오른쪽 끝과 오른쪽 두 줄 사이가 10px 넘게 남도록 폭마다 잰 값이다. 처음에는 40 / 34 / 28px 세 단계였는데 375~380px과 340px, 320px에서 숫자가 오른쪽 줄에 닿거나 겹쳤다 (같은 날 저녁에 재서 40 / 36 / 34 / 28 / 25로 고침).
   글꼴을 Wanted Sans로 바꾸면서 숫자가 1%쯤 넓어져 위 세 단계를 1px씩 내렸다(39 / 35 / 33): 글꼴이나 이 크기를 바꾸면 폭마다 다시 잰다 */
@media (max-width: 389px) { .summary > .stock dd { font-size: 35px; } }
@media (max-width: 374px) { .summary { padding-inline: 16px; column-gap: 12px; } .summary > .stock dd { font-size: 33px; } .summary > .hold, .summary > .inc { min-width: 116px; } }
@media (max-width: 359px) { .summary > .stock dd { font-size: 28px; } }
@media (max-width: 339px) { .summary > .stock dd { font-size: 25px; } .summary > .hold, .summary > .inc { min-width: 104px; } .summary > .hold dd, .summary > .inc dd { font-size: 15px; } }

/* 묶음 카드: 테두리 없는 흰 면(--card-line이 투명). 브랜드는 색 알약 대신 회색 알약 + 색 점(색은 점에만): 여덟 가지 브랜드 색이 이 바탕에서는 가장 소란스러웠다.
   재고 막대는 옅은 갈회색 한 가지(모자랄 때만 호박색): 에스프레소로 칠했더니 카드마다 길이가 다른 검은 줄이 화면에서 가장 센 요소가 됐다.
   묶음 제목은 품명이 먼저, 브랜드·원산지가 그 뒤다(접힌 줄, 펼친 머리, PC 표 보기의 제목 줄): 브랜드·원산지 꼬리표의 폭이 달라 품명이 줄마다 다른 자리에서 시작했다.
   글의 순서(HTML)는 브랜드 → 품명 그대로이고 보이는 순서만 order로 바꾼다. 원산지는 테 없는 흐린 글자 */
.group { border-radius: 24px; }
.brand { padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--ctl); color: var(--fg); font-weight: 600; letter-spacing: 0.02em; }
.brand::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--brand, var(--muted)); }
.origin { padding: 0; border: 0; background: none; font-size: 11.5px; font-weight: 500; letter-spacing: 0; }
.gl-name { gap: 3px 9px; font-weight: 600; letter-spacing: -0.035em; }
.gl-name .bl { order: 1; gap: 6px; }
.gl-name small { order: 2; }   /* 등급·EST 같은 덧붙은 기준은 맨 뒤 (품명, 브랜드·원산지, 나머지) */
.gl-stock { font-weight: 600; letter-spacing: -0.04em; }
.gname { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font-size: 27px; font-weight: 500; letter-spacing: -0.05em; }
.gname .bl { order: 1; margin-bottom: 0; }
.gname small { order: 2; margin-top: -3px; }
.gline > .chev, .ghead > .chev { opacity: 0.45; }
.gstock b { font-size: 32px; font-weight: 500; letter-spacing: -0.055em; }
.gthin i, .gbar .bar i { background: #b9ac9d; }
.gthin.low i, .gbar .bar.low i { background: var(--warn); }
.gmeta dd { font-weight: 500; }
.gmeta .plink { color: var(--cta-t); }
.rise { border-color: var(--line); border-radius: 18px; }
.sect .sl { font-weight: 600; letter-spacing: -0.02em; }
.lot b { font-weight: 500; }
.lot .wt { font-weight: 600; letter-spacing: -0.03em; }
.lot .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: -0.03em; }
.lot .lbl em { font-weight: 500; }
.tag { padding: 0 7px; border-radius: 999px; background: var(--info); color: var(--info-t); font-weight: 600; }
/* 캐틀 · 케팩 꼬리표와 브랜드 알약의 연한 테 (2026-10-14, 사용자: "캐틀, 캐팩, 브랜드 구분하는 벳지에 연한 테두리를 넣어주면 어떨까??"): 면이 흰 카드와 비슷한 밝기라 가장자리가 흐렸다.
   테의 색은 꼬리표마다 제 글자색을 22% 섞은 것이다(케팩은 옅은 파랑, 캐틀은 --edge쯤의 갈색, 브랜드는 그보다 조금 짙은 갈색). 14 · 22 · 32%를 실제 화면에 그려 보고 골랐다: 14%는 폰 크기에서 거의 안 보이고, 32%는 등급 뱃지(.gr)의 테만큼 짙어진다.
   border가 아니라 안쪽 그림자라 꼬리표의 크기가 그대로다(줄 높이 · 칸 폭 · 글자 자리가 바뀌지 않는다). currentColor 대신 변수를 섞는다: 등급 뱃지와 같은 꼴이라 이 앱이 이미 쓰는 브라우저에서 된다 */
.brand { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 22%, transparent); }
.tag { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info-t) 22%, transparent); }
.tag.ct { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct) 22%, transparent); }
.totop { border: 0; }
@media (max-width: 374px) { .gname { font-size: 24px; } .gstock b { font-size: 28px; } }
@media (max-width: 339px) { .gname { font-size: 22px; } .gstock b { font-size: 25px; } }

/* 빨강(--cta)은 누르면 그림이 만들어지는 단추에만: 떠 있는 표 그림 단추, PC의 표 그림 알약, 단가표 그림. 아직 못 만드는 때(.wait)는 흰 알약 */
.tfab { background: var(--cta); color: var(--on-cta); box-shadow: 0 8px 24px rgba(10, 20, 40, 0.28), inset 0 0 0 1px transparent; }   /* 투명한 안쪽 테두리: 흰 알약(.wait)과 오갈 때 그림자 목록의 꼴이 같아야 테두리가 부드럽게 나타난다 */
.tfab.wait { background: var(--surface); color: var(--fg); box-shadow: 0 8px 24px rgba(33, 12, 2, 0.14), inset 0 0 0 1px var(--edge); }   /* 연한 테두리 (2026-10-15, 사용자: "요 버튼도 테두리를 넣어주자. 흰색 배경에서는 잘 보이지 않는다"): 흰 목록 위에서 흰 알약의 가장자리가 그림자만으로는 묻혔다. 안쪽 1px라 크기 · 너비 움직임은 그대로 */
.tools .tbtn { border-color: var(--cta); background: var(--cta); color: var(--on-cta); }
.tools .tbtn.wait { border-color: var(--line2); background: var(--surface); color: var(--fg); }
.tools .tbtn[aria-expanded="true"] { color: var(--on-cta); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--cta); }
.tools .tbtn.wait[aria-expanded="true"] { color: var(--fg); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--line2); }
.pdate .pimg { background: var(--cta); color: var(--on-cta); }

/* 단가표 탭 */
.prow b { font-weight: 600; letter-spacing: -0.03em; }
.chip.go { border-color: var(--cta); background: var(--cta); color: var(--on-cta); }   /* 표 그림 판의 만들기 단추 */
.selacts .act { border-radius: 999px; }   /* 선택 막대의 단추도 알약 */
/* 마우스를 올렸을 때: 값을 고른 필터 칩(.drop.on)은 짙은 면이라 글자를 밝게 둔다 (위의 '칩에 올리면 글자 --fg' 규칙이 짙은 면 위에서 글자를 지웠다: 색을 바꾸기 전부터 그랬다). 만들기 단추는 빨강을 한 단계 짙게 */
@media (hover: hover) {
  .chip.drop.on:not(:disabled):hover { border-color: var(--press); color: var(--on-press); }
  #gpanel .chip.go:hover, #tsheet .chip.go:not([data-table="cost"]):hover { border-color: var(--cta); background: color-mix(in srgb, var(--cta) 88%, var(--fg)); color: var(--on-cta); }
}
/* 바뀐 단가 표시: 아주 연한 베이지 (시안/바뀐단가-연하게-시안.png의 A; 사용자: "단가 바뀐표시 색이 너무 짙은데 아주 연하게"). 코발트로 만든 표시(줄의 옅은 바탕 + 3px 막대 + 채운 알약)가 화면 색을 바꾸면서
   --accent를 따라 짙은 베이지 바탕에 에스프레소 막대·알약이 됐다. 줄의 바탕은 흰 면에 가까운 크림, 바뀐 값은 옅은 베이지 알약에 본문색 글자로 낮춘다.
   줄 앞의 3px 막대는 없앴다 (같은 날 사용자: "앞에 바도 없애둬 그냥 배경색으로만 표시되게"): 바뀐 줄은 바탕색으로만 알리고, 어느 값이 바뀌었는지는 알약이 알린다.
   사진 갱신의 검토 카드와 관리자 화면의 변경 목록에서 달라진 글자를 칠하는 <mark>도 같은 색을 따른다(굵기 800은 그대로라 달라진 숫자는 여전히 굵다). 옅은 파랑(B)과 줄 바탕을 뺀 안(C)은 고르지 않았다.
   켜진 '바뀐 것만 보기' 단추는 다른 켜진 칩처럼 짙게 채운 그대로다 */
.pchg { background: var(--mark-soft); color: var(--fg); }
.pchg .pdot { background: #b9ac9d; }
.group.plan .lots > li.chg { background: #fbf7f0; }
.prow .pe b.chg { background: var(--mark); color: var(--fg); }
.pucard mark, .pv mark { background: var(--mark); color: var(--fg); }
.pucard s mark, .pv s mark { background: var(--mark-soft); color: var(--fg); }
.plist li .pv mark { background: var(--mark); color: var(--fg); }


/* 냉동 | 냉장 전환 (2026-10-13, app.js renderKinds): 제목 옆의 알약 단추 둘. 냉장을 고르면 파란색(--info-t)이라 어느 쪽인지 바로 보인다. 좁은 화면에서는 단추 자리를 내느라 환율 줄이 제목 아래로 내려간다.
   냉장 자료가 아직 없어서 냉장을 고르면 아래를 모두 감추고 안내 글만 보인다 (body.chilled) */
.kseg { display: inline-flex; flex: none; margin-left: auto; padding: 3px; border-radius: 999px; background: var(--track); align-self: center; }
.kseg button { all: unset; box-sizing: border-box; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ctl-fg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kseg button[aria-pressed="true"] { background: var(--press); color: var(--on-press); }
.kseg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cols .head.haskind .rate { margin-left: 12px; }
@media (max-width: 1039px) { .cols .head.haskind .rate { order: 3; flex-basis: 100%; display: flex; gap: 8px; margin: 6px 0 0; text-align: left; } }
body.chilled #modes, body.chilled .top, body.chilled .sumcard, body.chilled #tools, body.chilled #gpanel, body.chilled #list, body.chilled #empty, body.chilled #strip, body.chilled #tfab, body.chilled #stale, body.chilled #colwarn, body.chilled .pane, body.chilled .totopwrap { display: none !important; }


/* 단가표 탭의 필터 칩 줄과 판 (2026-10-13, app.js renderPF): 재고 탭의 칩 줄(.fbar) · 판(.fpanel)과 같은 모양을 그대로 쓴다. 판은 칩 줄 바로 밑에 붙는다 */
#pfpanel { margin-top: 0; }

/* 냉동 | 냉장 | 동결 (2026-10-13): 단추가 셋이 되어 조금 좁게. 아주 좁은 폰에서는 제목과 한 줄에 들어가게 더 줄인다.
   눌린 단추는 셋 다 먹색이다 (2026-10-14, 사용자: "냉장, 급냉 버튼 냉동과 동일한 색으로 통일해주고": 처음에는 냉장 파랑, 급냉 청록이었다) */
.kseg button { padding: 7px 13px; }
@media (max-width: 374px) { .kseg button { padding: 7px 10px; font-size: 13px; } }
@media (max-width: 339px) { .cols .head h1 { font-size: 24px; } .kseg button { padding: 6px 8px; font-size: 12.5px; } }

/* 관리자 모드 · 로그아웃 (2026-10-15, 사용자: "관리자 모드 버튼이 제일 아래에 있어서 스크롤하기 힘들어 ㅎㅎ 로그아웃과 관리자 모드 아이콘만 최상단 적절한 곳에 배치해줄 수 있을까?"):
   목록 맨 아래의 알약 단추 둘이던 것을 아이콘만 있는 동그란 단추로 냉동 | 냉장 | 동결 바로 오른쪽에 같은 높이로 둔다 (처음에는 제목 위 오른쪽 끝의 따로 된 줄이었는데
   사용자가 "요기는 안어울린다. 냉동/냉장/동결 오른쪽에 넣는건 어때. 같은 사이즈로"라 했다). app.js(renderKinds)가 냉동 | 냉장 | 동결을 이 묶음(#hacts) 맨 앞에 넣는다.
   높이는 냉동 | 냉장 | 동결 단추의 줄 높이를 정해(--kl) 그 틀과 똑같이 맞춘다: 틀 위아래 3px + 단추 위아래 여백 + 줄 높이 */
.hacts { --kl: 20px; --kp: 7px; --kh: calc(6px + 2 * var(--kp) + var(--kl)); display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.hacts > .kseg { margin-left: 0; }
.hacts .kseg button { padding-block: var(--kp); line-height: var(--kl); }
.hbtn { order: 2; position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--kh); height: var(--kh); border-radius: 50%; background: var(--track); color: var(--fg); text-decoration: none; }   /* order 2: 표 보기의 '.kseg { order: 1 }'보다 뒤 */
.hbtn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .hbtn:hover { background: var(--line2); } }
@media (pointer: coarse) { .hbtn::after { content: ""; position: absolute; inset: -2px; } }   /* 손가락 닿는 자리를 2px씩 넓힌다 (단추 사이가 4px 이상이라 이웃과 겹치지 않는다) */
/* 폰: 넷이 제목 옆 한 줄에 들어가려면 원래 크기로는 390px 폰에서 자리가 4px밖에 안 남아서, 439px 이하에서는 단추를 36px로 줄인다 (제목이 '미착재고 조회'이던 때는 43px 모자라 제목도 22px로 줄였는데,
   '재고 조회'로 짧아져(2026-10-15) 제목은 28px 그대로다). 그래도 안 들어가는 아주 좁은 폰(320px쯤)에서는 묶음째 제목 아래 오른쪽 줄로 내려간다 */
@media (max-width: 439px) {
  .cols .head { column-gap: 8px; }
  .hacts { --kp: 5px; gap: 4px; }   /* 냉동 | 냉장 | 동결과 아이콘 모두 36px */
  .hacts .kseg button { padding-inline: 8px; font-size: 13px; }
}
@media (min-width: 340px) and (max-width: 359px) { .cols .head h1 { font-size: 28px; } }   /* 30px면 제목 옆 한 줄에 6px 모자란다 */
@media (max-width: 359px) { .cols .head { row-gap: 8px; } .cols .head.haskind .hacts ~ .rate { margin-top: 0; } .hacts { --kp: 5px; } }   /* 제목 아래 줄로 내려간 묶음: 제목 · 환율 줄과 8px씩 */

/* 유통기한 임박 뱃지 (냉장 2026-10-13, 냉동 2026-10-14. 급냉은 주황 글자 그대로; app.js soonCls · expCls): 짙은 빨강 바탕에 흰 글자의 'D-17' · '만료'. 건 줄(.lot span은 block이라 inline-block으로 되돌린다), 상세의 유통기한 칸에 쓴다 */
.dbad, .lot span.dbad, .key span.dbad { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #a01210; color: #fff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.55; white-space: nowrap; }
.lot span.dbad { margin-top: 2px; }
.key span.dbad { margin-top: 4px; }

/* 환율 · 기준 시각 줄은 어느 화면에서나 제목 '미착재고 조회' 바로 아래에 둔다 (2026-10-13, 사용자: "이건 항상 '미착재고 조회' 타이틀 아래에 배치하자").
   전에는 폰에서만(냉동 | 냉장 | 급냉 단추에 자리를 내주느라) 내려가 있었고 PC에서는 제목 줄의 오른쪽 끝에 있었다. 두 줄이던 글(환율 / 시각)은 한 줄로 잇는다. */
.cols .head .rate, .cols .head.haskind .rate { order: 3; flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 0 8px; margin: 6px 0 0; text-align: left; }

/* 등급 뱃지 (2026-10-13, app.js gradeTag): 건 줄과 입항 일정 줄의 등급. 흰 면에 먹색 테와 굵은 먹색 글자.
   치수는 '뱃지 때문에 줄이 두 줄로 꺾이는 건이 없게' 재서 정했다 (냉동 899줄: 옆 여백 3px · 11px이면 360~430px에서 예전보다 높아지는 줄이 0, 5px · 11.5px이면 18~27줄). 340px 아래는 한 단계씩 더 작게.
   줄 상자를 키우지 않게 위치는 baseline에 두고 1px만 올린다. 접어 두는 구역(묶음 안의 입고 예정 · 소진)에서는 그 줄들처럼 한 단계 흐리게 */
.gr { display: inline-block; position: relative; top: -1px; padding: 0 3px; border: 1px solid color-mix(in srgb, var(--fg) 50%, transparent); border-radius: 5px; background: var(--surface); color: var(--fg); font-size: 11px; font-weight: 700; font-style: normal; letter-spacing: 0; line-height: 1.25; max-width: 100%; box-sizing: border-box; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; vertical-align: baseline; }
.ground .incoming .gr, .done .gr { border-color: color-mix(in srgb, var(--muted) 55%, transparent); background: none; color: var(--muted); }
@media (max-width: 359px) { .gr { font-size: 10.5px; } }
@media (max-width: 339px) { .gr { padding: 0 2px; } }
/* 글로 갱신의 글 칸 (2026-10-13에 냉장 · 급냉 글로 갱신 판에 만들었고, 지금은 세 종류가 함께 쓰는 사진 · 글 갱신 판(app.js openPriceEdit)의 글 상자다).
   글자는 16px(아이폰이 16px보다 작은 입력칸을 누르면 화면을 확대한다). 냉장 · 동결 판의 검토 목록(.ptlist · .pttag · .ptgone)은 2026-10-15에 그 판과 함께 없앴다 */
.pttext { display: block; box-sizing: border-box; width: 100%; min-height: 200px; margin: 12px 0 0; padding: 12px; border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); color: var(--fg); font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }
.pttext::placeholder { color: var(--muted); opacity: 0.75; }
.pttext:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* 판매 대기 건: C 시안 (2026-10-13). 통관 전과 입고/입항 예정의
   건 줄 전체를 둥근 점선으로 감싼다. 구역 제목은 건 단추(.lot)가 없어 해당하지 않는다. */
.lots > li:is(.hold, .incoming):has(> .lot) {
  margin: 8px 8px 10px;
  border: 1.5px dashed #968373;
  border-radius: 13px;
  background: #fbf8f2;
}
.ground > li:is(.hold, .incoming):has(> .lot)::before { content: none; }
.lots > li:is(.hold, .incoming) > .lot {
  padding-inline: 6.5px; /* 바깥 여백 8 + 테두리 1.5 + 안쪽 6.5 = 기존 열 시작 16px */
  border-radius: 11.5px;
}
.lots > li:is(.hold, .incoming):has(> .detail) { background: var(--surface); }
.lots > li:is(.hold, .incoming):has(> .detail) > .lot { border-radius: 11.5px 11.5px 0 0; }
@media (max-width: 374px) {
  .lots > li:is(.hold, .incoming):has(> .lot) { margin-inline: 4px; }
  /* 좁은 폰의 기존 열 시작 12px에 맞춘다: 4 + 1.5 + 6.5 */
}

/* 냉장 입항 일정: B/L 한 건 아래 품목과 각 일정을 함께 보여 준다. */
.plan-bl-head { border-bottom: 1px solid var(--line); }
.plan-bl.bl-closed .plan-bl-head { border-bottom: 0; }
.plan-bl-toggle { display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; padding: 16px 16px 9px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.plan-bl-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 16px; }
.plan-bl-main { flex: 1; min-width: 0; }
.plan-bl-caret { display: inline-flex; flex: none; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--muted); }
.plan-bl-caret svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.plan-bl-toggle[aria-expanded="true"] .plan-bl-caret svg { transform: rotate(180deg); }
.plan-bl-id { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.plan-bl-id small { flex: none; font-size: 11px; color: var(--muted); }
.plan-bl-id b { min-width: 0; font-family: var(--mono); font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.plan-bl-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.plan-bl-meta span { color: var(--muted); }
.plan-bl-meta b { font-weight: 600; }
.plan-bl-meta .plan-bl-in { color: var(--fg); }   /* 머리 줄의 입고 예정일 (2026-10-15): 입항 날짜보다 한 단계 짙게, 펼치지 않아도 눈에 들어오게 */
.plan-bl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 0 16px 12px; }
.plan-bl-foot > span { font-size: 11px; color: var(--muted); }
.plan-bl-foot > span.soon { color: var(--warn-t); }
.plan-bl-foot .actg { margin-left: auto; }
.plan-image-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
body.plan #tools { flex-wrap: wrap; }
body.plan #tools .tbtn { margin-left: auto; }
@media (max-width: 389px) {  body.plan #tools .tbtn { padding-inline: 11px; font-size: 13px; } }
@media (max-width: 374px) { .plan-bl-toggle, .plan-bl-foot { padding-inline: 12px; } .plan-bl-id b { font-size: 14px; } }

/* 입항 일정 정보 A: 기존 B/L 머리 아래에 간결한 글줄을 더한다. 브랜드·등급은 작은 기존 뱃지를 쓴다. */
.plan-bl-summary { margin: 5px 16px 10px; padding: 12px 0 2px; border-top: 1px solid var(--line); color: var(--muted); overflow-wrap: anywhere; word-break: keep-all; }
.plan-bl-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; margin-bottom: 10px; font-size: 11px; }
.plan-bl-brand { min-width: 0; max-width: 100%; }
.plan-bl-brand .bl { flex-wrap: wrap; }
.plan-bl-brand .brand { max-width: 100%; padding: 4px 8px; font-size: 11px; }
.plan-bl-brand .origin { font-size: 11px; }
.plan-bl-sources .gr { top: 0; color: var(--muted); font-size: 10px; background: none; }
.plan-bl-label { margin-bottom: 4px; font-size: 10px; }
.plan-bl-items { color: var(--fg); font-size: 13px; font-weight: 500; line-height: 1.7; }
.plan-bl-extra { color: var(--muted); font-weight: 400; font-size: 11px; }
.plan-bl-info { margin-top: 6px; font-size: 11px; line-height: 1.7; }
.plan-bl-info + .plan-bl-info { margin-top: 2px; }
.plan-bl-booked { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 11px; line-height: 1.7; }
.plan-bl-booked > span { min-width: 0; }
.plan-bl-info b, .plan-bl-booked b { color: var(--fg); font-weight: 600; }
@media (max-width: 374px) { .plan-bl-summary { margin-inline: 12px; } }

/* 홀딩 원문은 계약과 별도 줄로 읽는다. 엑셀 메모의 줄바꿈도 유지한다. */
.lot .cold-hold { margin-top: 5px; }
.lot .cold-hold em, .detail .hold-note { white-space: pre-line; }

/* 냉장 입고 예정 B/L 제목: A 시안. 점선은 각 행에 두고 제목 밑의 가는 선으로 B/L 경계를 나눈다. */
.lots > .cold-bl-head { margin: 22px 14px 0; padding: 0 2px 11px; border: 0; border-bottom: 1px solid var(--edge); color: var(--muted); }
.lots > .sect + .cold-bl-head { margin-top: 14px; }
.ground > .cold-bl-head::before, .ground > .cold-bl-cols::before { content: none; }
.cold-bl-title, .cold-bl-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 12px; font-variant-numeric: tabular-nums; }
.cold-bl-title { font-size: 12px; font-weight: 600; }
.cold-bl-title > span, .cold-bl-meta > span:last-child { margin-left: auto; text-align: right; }
.cold-bl-id { display: flex; align-items: baseline; gap: 7px; min-width: 0; max-width: 100%; }
.cold-bl-id small { flex: none; font-size: 10px; font-weight: 600; }
.cold-bl-id .lbl { min-width: 0; overflow-wrap: anywhere; font-size: 13px; letter-spacing: -0.015em; }
.cold-bl-id em { font-weight: 700; font-style: normal; color: var(--fg); }
.cold-bl-id > b { font-size: 13px; font-weight: 600; }
.cold-bl-meta { margin-top: 7px; font-size: 11px; }
.cold-bl-warn { margin-top: 6px; font-size: 11px; }
.lots > .cold-bl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 0.75fr) minmax(0, 1.4fr); gap: 8px; padding: 8px 16px 0; border: 0; color: var(--muted); font-size: 10px; }
.cold-bl-cols > :nth-child(n+2) { text-align: right; }
.lot.cold-bl-lot, .lots > .cold-bl-cols.compact { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.08fr); }
@media (max-width: 374px) { .lots > .cold-bl-head { margin-inline: 10px; } .lots > .cold-bl-cols { padding-inline: 12px; } }

/* 간략보고 (2026-10-14, 시안 '간략보고-시안' A): 표 그림 만들기 판의 단추와, 판(#bsheet: 사진으로 갱신 판과 같은 틀 .sheet · .pubody · .pufoot) 안의 단가 확인 줄 · 결과의 '표 그림 | 글'.
   단가 입력칸은 단가표 직접 고치기의 칸(.pdin)을 그대로 쓴다. 판을 여는 단추는 칩(.chip.brief)과 떠 있는 간략보고 알약(.bfab)이다 (폰 시트의 줄 단추 .briefbtn 규칙은 쓰는 곳이 없어 2026-10-31 정리로 걷었다). */
.chip.brief svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip.brief:disabled { opacity: 0.45; cursor: default; }
.chip.brief { display: inline-flex; align-items: center; gap: 6px; border-color: var(--fg); background: none; color: var(--fg); font-weight: 600; }
.brlist { margin: 14px 0 0; padding: 0; list-style: none; }
.brrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.brname { flex: 1; min-width: 0; padding-top: 2px; }
.brname b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.brname span { display: block; margin-top: 1px; font-size: 13px; overflow-wrap: anywhere; }
.brname small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--muted); font-variant-numeric: tabular-nums; word-break: keep-all; }
.brname small + small { margin-top: 0; }
.brlots { flex: 1 0 100%; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }   /* 보고서에 들어갈 B/L 줄 미리 보기 (B/L · 박스 · 유통기한, 셋까지): 줄 전체 폭이라 B/L 번호가 꺾이지 않는다 */
.brprice { flex: none; width: 128px; }
.brprice .pdin { height: 44px; padding: 0 12px; }
.brprice .pdin input { font-size: 17px; font-weight: 700; }
.brrow.none .brprice .pdin { border-color: var(--warn); }   /* 단가가 빈 줄: 이대로면 '문의'로 나간다 */
.brrow.chg .brprice .pdin { border-color: var(--fg); }      /* 단가표의 값에서 고친 줄 */
.brhint { flex: 1 0 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 5px; margin-top: 7px; font-size: 11.5px; color: var(--muted); }   /* 줄 전체 폭의 아랫줄: 단가표의 후보 값들, '단가표 값으로' 되돌리기 */
.brhint:empty { display: none; }
.brhint.warn > span { color: var(--warn-t); }
.brhint button { all: unset; padding: 5px 9px; border-radius: 999px; background: var(--ctl); color: var(--fg); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brhint button[aria-pressed="true"] { background: var(--press); color: var(--on-press); }
.brhint button:focus-visible, .brtabs button:focus-visible, .brprev:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.brnote { margin-top: 12px; }
.brtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 12px; }
.brtabs { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--ctl); }
.brtabs button { all: unset; padding: 8px 18px; border-radius: 999px; color: var(--ctl-fg); font-size: 13.5px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brtabs button[aria-selected="true"] { background: var(--press); color: var(--on-press); }
/* 머리 왼쪽의 '‹ 이전' (결과 단계에만): 알약이라 단추로 읽히고, 제목은 그 바로 뒤에 붙는다 */
.brprev { all: unset; flex: none; display: inline-flex; align-items: center; gap: 1px; margin: -4px 0 -4px -6px; padding: 8px 13px 8px 7px; border-radius: 999px; background: var(--ctl); color: var(--fg); font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brprev svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.brprev:not([hidden]) + b { margin-right: auto; }
@media (hover: hover) { .brprev:hover { background: var(--line2); } }
.brshot { border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; background: #fff; }   /* 그림은 제 폭(440px)까지만: 폰에서는 판의 폭에 맞춰 줄고, PC에서는 가운데에 선다 */
.brshot img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.brtext { margin-top: 0; min-height: 260px; line-height: 1.55; }
#bsheet .pufoot .pubtn { padding: 0 6px; gap: 6px; white-space: nowrap; }   /* 결과의 단추 셋(공유 · 그림 복사 · 저장)이 폰 폭에서 한 줄에 들어가게: 이것이 없으면 '그림 복사'가 두 줄로 꺾인다. 320px에서도 글자를 줄이지 않고 들어간다(잰 값: 단추 셋의 최소 폭 232px, 자리 256px) */
#bsheet .pufoot .pubtn[data-br="ok"] { flex: 2; }   /* '확정 · 보고서 만들기'는 '닫기'의 두 배 폭 */
/* 통관 전 재고 넣기 (2026-10-14): 단가 확인 판 맨 위의 켜고 끄는 칩(표 그림 판의 '통관된 재고만' 칩과 같은 말씨: 켜면 먹색). 켜면 목록이 '창고 재고' · '통관 전' 구역 이름 줄로 갈린다.
   구역 이름의 점은 재고 카드의 구역 점과 같다: 창고 재고는 채운 초록 점, 통관 전은 호박색 고리 */
.chip.brhold { display: inline-flex; align-items: center; margin: 2px 0 12px; font-weight: 600; }
.chip.brhold small { font-weight: 500; }
.brsec { display: flex; align-items: center; gap: 7px; padding: 16px 0 8px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--fg); }
.brsec::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--stock); }
.brsec.hold::before { background: none; box-shadow: inset 0 0 0 2px var(--hold); }
.brsec.inc::before { background: none; box-shadow: inset 0 0 0 2px var(--muted); }   /* 입고 예정: 회색 고리 (그림의 제목 점과 같은 말씨) */
.brsec.un::before { background: none; box-shadow: inset 0 0 0 2px #6b3fa0; }         /* 미개설: 보라 고리 (표 그림의 미개설 알약과 같은 색) */
.brsec + .brrow { border-top: 0; padding-top: 4px; }
@media (pointer: coarse) { .brhint button { padding: 9px 11px; } .brtabs button { padding: 10px 20px; } .brprev { padding-block: 10px; } }
@media (max-width: 359px) { .brprice { width: 116px; } .brprice .pdin { padding: 0 10px; } .brprice .pdin input { font-size: 16px; }  }
/* 간략보고 수량 정정 (2026-10-15, app.js brQ · brView): '수량 고치기' 칩을 켜면 상품마다 B/L 줄이 모두 펼쳐지고 줄마다 박스 칸이 생긴다.
   고친 줄은 먹선 칸과 '엑셀 N박스로' 되돌리기, 0으로 고친 줄은 중량에 줄을 긋고 '보고서에서 빠짐'. 상품 이름 아래의 합은 고친 수로 세고 그 아래에 엑셀의 값을 그어 둔다 */
.brchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.brunit { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }   /* 글 탭의 무게 단위 (kg · 톤) */
.brunit .chip.brhold { margin: 0; }
.brchips.bruse { align-items: center; margin-bottom: 8px; }   /* '넣을 것' 칩 줄 (창고 재고 · 통관 전 · 입고 예정 · 미개설) */
.brchips.bruse > span { font-size: 12.5px; color: var(--muted); margin-right: 2px; }
.brchips .chip.brhold { margin: 0; flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; column-gap: 5px; text-align: left; }   /* 좁은 폰에서 긴 칩('입고 예정 · 미개설도 넣기 · 입고 예정 16건 · 미개설 6건')은 판 밖으로 나가지 않고 작은 글이 아래로 꺾인다 */
.brchips .chip.brhold small { margin-left: 0; }
.brchips .chip.brhold small:empty { display: none; }
.brname small.brsum.chg { color: var(--fg); font-weight: 600; }
.brname small.brold { margin-top: 0; text-decoration: line-through; }
.brrow.out .brname b, .brrow.out .brname span { color: var(--muted); }
.brlots:not(.q) .chg { color: var(--fg); font-weight: 600; }
.brlots.q { margin-top: 8px; color: var(--fg); }
.brq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.brq:first-child { border-top: 0; padding-top: 2px; }
.brql { flex: 1 0 100%; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.brql em { margin-left: 8px; font-style: normal; }
.brqin { flex: none; width: 112px; height: 40px; padding: 0 10px; }
.brqin input { font-size: 16px; font-weight: 700; }
.brq.chg .brqin { border-color: var(--fg); }
.brqkg { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.brq.zero .brqkg { color: var(--muted); text-decoration: line-through; }
.brqh { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 6px; font-size: 11.5px; color: var(--muted); }
.brqh:empty { display: none; }
.brqh em { font-style: normal; color: var(--warn-t); }
.brqh button { all: unset; padding: 5px 9px; border-radius: 999px; background: var(--ctl); color: var(--fg); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brqh button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (pointer: coarse) { .brqh button { padding: 9px 11px; } }

/* 머리 카드 제목: 지금 보는 화면 이름 (2026-10-17) ====
   글자 로고(img/logo-text-01-web.png, 2026-10-15)가 있던 자리다. 같은 날 화면 맨 위 가지 사이에 로고(CATTLE FARM CHALLENGE)를 넣어 이름이 두 번 보이게 되자,
   사용자: "이 로고를 지우고 뭘 넣는게 좋을까? 깔끔하고 안정적으로 보이게." → 시안(시안/머리제목-시안.png)의 B(지금 보는 화면 이름)를 골랐고,
   "폰트는 조금 가늘게 그리고 위치는 너무 좌측으로 치우치지 않게 해볼까? 가운데 정렬은 어떨까 궁금하네."
   글은 '냉동 재고' · '냉장 스케쥴' · '동결 단가표'처럼 종류와 탭을 따른다 (app.js renderTitle; index.php가 처음 글을 적고 종류는 그 바로 뒤 작은 스크립트가 맞춘다).
   카드 보기: 단추 묶음(냉동 · 냉장 · 동결, 설정 · 나가기)과 한 줄에 두고, 제목은 그 왼쪽에 남는 자리의 가운데에 (24px · 600, 389px 이하 22px).
   처음에는 제목만 한 줄로 떼어 화면(카드) 가운데에 두고 단추를 그 아래 가운데로 모았는데, 사용자: "으악 이건 아니야 한줄로 표현하는데 그 여백의 가운데를 말하는거지 화면의 가운데가 아니야."
   제목 칸은 남는 폭을 다 쓰고(flex 1 1 0) 글은 그 안 가운데. 제목이 길어 한 줄에 안 들어가는 아주 좁은 폰(320px의 '냉장 스케쥴' 등)만 단추 묶음이 아래 줄로 내려간다(제목은 줄어들지 않는다).
   PC 표 보기(body.gridview)는 머리띠 첫 줄 왼쪽에 작게(18px · 600). 옛 index.php(글자 로고)와 만나면 이 규칙들은 걸리지 않는다 */
body:not(.gridview) .cols .head h1.ptitle { flex: 1 1 0; text-align: center; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
@media (max-width: 389px) { body:not(.gridview) .cols .head h1.ptitle { font-size: 22px; } }
/* 모든 페이지 맨 아래: 작게(12px 높이), 조금 옅게(85%), 가운데. 처음에는 50%였는데 사용자가 "하단부에 들어간 로고는 색이 너무 연한것같은데???"라고 해서 (2026-10-15)
   85%로 올렸다: 크림 바탕에서 2.9:1이던 것이 8:1쯤으로, 바로 위의 흐린 안내 글(--muted)보다 짙고 머리의 로고(100%)보다는 한 단계 옅다 */
.brandfoot { display: flex; justify-content: center; padding: 32px 0 4px; }
.brandfoot img { display: block; width: auto; height: 12px; opacity: 0.85; }
@media (max-width: 1039px) { .cols + .brandfoot { padding-bottom: 64px; } }   /* 직원 화면(폰): 끝까지 내려도 가운데에 떠 있는 표 그림 단추(아래 16px · 높이 50px)에 가리지 않게 */
/* 로그인 · 처음 설정처럼 판 하나뿐인 짧은 페이지: 로고가 화면 맨 아래에 붙는다 (:has를 모르는 옛 브라우저는 판 바로 아래) */
body:has(> .panel) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body:has(> .panel) > .brandfoot { margin-top: auto; }

/* 단가표 탭 맨 윗줄의 생성 · 최근 업데이트 (2026-10-15, 사용자: "단가표, 단가표 그림에는 최근 업데이트한 날짜와 시간을 기록해줘. 생성시간과는 별도로."; app.js pstampHtml):
   두 줄로 세운다. 위 '최근 업데이트'는 본문색으로 조금 짙게, 아래 '생성 · 줄 수'는 예전 날짜 줄처럼 흐리게. 사이의 ' · '는 이 CSS가 없을 때(옛 CSS) 한 줄로 이어 읽히게 둔 것이라 숨긴다 */
.pdate .pst b { display: block; font-size: 12.5px; font-weight: 600; color: var(--fg); word-break: keep-all; }
.pdate .pst i { display: none; }
.pdate .pst small { display: block; margin-top: 1px; font-size: 12px; word-break: keep-all; }   /* keep-all: 꺾여도 '단가 | 표'처럼 낱말 가운데서 끊지 않게 */

/* 단가표 탭의 떠 있는 '단가표 그림' 알약 (2026-10-15, 사용자: "이 버튼도 다른 표그림 버튼 위치랑 동일하게 하단 가운데에 배치해줘. 스크롤 해도 둥둥떠다니게."; app.js renderTfab · renderPrices):
   폰(1039px 이하)에서는 새 app.js가 맨 윗줄 단추에 붙이는 .pfab를 숨기고 아래 가운데 알약(.tfab.price-fab)이 맡는다. 단가표 필터 판이 열려 있거나 단가 고치기 카드가 열려 있으면 알약은 숨는다(위 .tfab 숨김 규칙).
   옛 app.js와 만나면 .pfab도 price-fab도 없어 윗줄 단추가 그대로이고, 옛 app.css와 만나면 알약은 숨고(body.price .tfab) 윗줄 단추가 남는다: 어느 쪽이든 단추가 하나는 있다 */
@media (max-width: 1039px) {
  .pdate .pimg.pfab { display: none; }
  .pdate.ft .pimg.pfab + .pfbr, .pdate.ft.pd .pimg.pfab + .pfbr { display: none; }   /* 숨긴 단추 뒤의 줄바꿈 칸(.pfbr)도: 단추 없이 빈 줄 하나가 남아 회색 덩어리가 8px 더 아래로 밀렸다 (좁은 폭 규칙 '.pdate.ft.pd .pimg + .pfbr'보다 구체적이게) */
}

/* 단가표 탭의 글로 갱신 · 사진으로 갱신 · 고치기: 흰 알약 (2026-10-15, 시안/단가표도구단추-시안.png. 사용자: "a가 균형있긴한데 흰 알약이 이쁘긴하다. 흰알약으로 하는데 균형을 동일하게 맞춰줘.").
   모양은 B(따로 떨어진 흰 알약 + 가는 테두리 --edge, 주의 칩 · 고치기 카드의 취소 단추와 같은 말씨), 자리와 크기는 A(지금과 같다: 폰에서는 줄을 같은 폭으로 꽉 채우고, PC에서는 맨 윗줄 오른쪽 끝에 모인다, 높이 40px).
   세 단추를 2px 틈으로 붙이던 당김(margin-left: calc(2px - var(--pg)))과 안쪽 모서리 8px를 걷어, 사이는 줄의 틈(--pg: PC 10px, 479px 이하 6px, 339px 이하 5px)이 된다. 켜진 고치기(완료)는 먹색, 고치기를 켰을 때의 안내 띠도 같은 흰 판.
   위의 규칙들과 같은 선택자로 맨 끝에 둬서 이긴다 (구체성이 같으면 뒤에 오는 것이 이긴다) */
.pdate .pedit, .pdate .pdmode { background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
.pdate .pedit, .pdate .pdmode, .pdate.pd .pedit, .pdate:has(.pedit) .pdmode, .pdate.ft .pftext, .pdate.ft .pftext + .pedit, .pdate.ft.pd .pftext + .pedit { border-radius: 999px; }
.pdate:has(.pedit) .pdmode, .pdate.ft .pftext + .pedit { margin-left: 0; }
.pdate .pdmode[aria-pressed="true"] { background: var(--press); box-shadow: none; color: var(--on-press); }
.pdate .pdbanner { background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
@media (hover: hover) and (pointer: fine) { .pdate .pedit:hover, .pdate .pdmode:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--accent); } }   /* 필터 칩처럼 마우스를 올리면 테두리가 먹색 */

/* 단가표 → 재고 바로 보기 B (2026-10-15). 숫자는 판매 가능 수량, 미통관·예정·홀딩은 별도. */
.pslook { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 3px; width: max-content; max-width: 100%; margin: 8px 0 0 auto; padding: 0; color: var(--muted); font: 500 12.5px/1.2 var(--font); white-space: nowrap; cursor: pointer; position: relative; }   /* 2026-10-18 ('아쉬운 점 시안' 4번): 테두리 알약 대신 흐린 글자 링크 '재고 보기 ›'. 줄마다 알약이 있어 가격보다 눈에 띄었다 */
.pslook::after { content: ""; position: absolute; inset: -14px -12px; }   /* 누르는 자리는 44px: 위로는 바로 위 값 줄(누르는 곳이 아니다), 아래로는 다음 줄의 안쪽 여백까지만 */
.pslook svg:first-child { display: none; }   /* 상자 그림은 빼고 꺾쇠만 */
.pslook svg { width: 12px; height: 12px; }
.pslook svg, .psk-primary svg, .psk-close svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pslook:focus-visible, .psk-close:focus-visible, .psk-primary:focus-visible, .psk-retry:focus-visible, .psk-back:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.stockpeek-open { overflow: hidden; }
.stockpeek { z-index: 30; padding: 0; align-items: flex-end; justify-content: center; overscroll-behavior: contain; }   /* 덮개(색 · 흐림)는 .sheet의 것(--scrim) */
.stockpeek .sheetin { width: 100%; max-width: 560px; max-height: 86vh; max-height: 86dvh; border-radius: 26px 26px 0 0; background: var(--surface); box-shadow: 0 -8px 60px rgba(33,12,2,.1); outline: none; }
.psk-grab { flex-shrink: 0; width: 34px; height: 4px; margin: 10px auto 4px; border-radius: 8px; background: var(--edge); }
.psk-head { flex-shrink: 0; padding: 13px 22px 0; }
.psk-head > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.psk-head h2 { margin: 0; font-size: 19px; font-weight: 650; line-height: 1.3; letter-spacing: -.04em; overflow-wrap: anywhere; }
.psk-close { all: unset; display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--ctl); color: var(--fg); cursor: pointer; }
.psk-close svg { width: 16px; height: 16px; }
.psk-head > p { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.psk-price { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 14px; padding-bottom: 15px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.psk-price > span { flex-shrink: 0; }
.psk-price b { min-width: 0; font-size: 12px; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.psk-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px; }
.psk-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 22px 0 19px; border-bottom: 1px solid var(--line); }
.psk-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.psk-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--stock); }
.psk-total strong { display: block; margin-top: 3px; font-size: 40px; font-weight: 650; line-height: 1.16; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.psk-total strong small { font-size: 15px; font-weight: 500; letter-spacing: -.03em; margin-left: 5px; }
.psk-totalmeta { min-width: 0; align-self: flex-end; padding-bottom: 5px; text-align: right; font-size: 12px; line-height: 1.65; color: var(--muted); }
.psk-totalmeta b { display: block; font-size: 14px; font-weight: 500; color: var(--fg); }
.psk-totalmeta span { display: block; overflow-wrap: anywhere; }
.psk-lots { padding: 0; margin: 0; list-style: none; }
.psk-lots > li { padding: 15px 0; border-bottom: 1px solid var(--line); }
.psk-lottop { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.psk-lottop b { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.psk-lottop small { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.psk-lottop strong { margin-left: auto; font-size: 13px; font-weight: 650; white-space: nowrap; }
.psk-lotmeta { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.psk-lotmeta span { min-width: 0; overflow-wrap: anywhere; }
.psk-bl { margin: 5px 0 0; font-size: 10.5px; color: var(--muted); letter-spacing: .01em; overflow-wrap: anywhere; }
.psk-other { margin-top: 13px; padding: 12px 13px; border-radius: 12px; background: var(--bg); color: var(--muted); font-size: 12px; }
.psk-other summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.psk-other summary::-webkit-details-marker { display: none; }
.psk-other summary::after { content: "＋"; font-size: 15px; }
.psk-other[open] summary::after { content: "−"; }
.psk-other > div { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line2); }
.psk-other p { margin: 0 0 10px; line-height: 1.8; overflow-wrap: anywhere; }
.psk-other p:last-child { margin-bottom: 0; }
.psk-other b { font-weight: 600; color: var(--fg); }
.psk-other small { display: block; font-size: 11px; white-space: pre-line; }
.psk-foot { flex-shrink: 0; padding: 0 22px max(22px, env(safe-area-inset-bottom, 0px)); background: var(--surface); }
.psk-stamp { margin: 13px 0 14px; text-align: center; font-size: 10.5px; color: var(--muted); }
.psk-primary { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 46px; padding: 8px 12px; border-radius: 999px; background: var(--fg); color: var(--surface); font: 550 13.5px/1.4 var(--font); text-align: center; cursor: pointer; }
.psk-message { padding: 25px 0 22px; text-align: center; }
.psk-message > b { display: block; font-size: 16px; letter-spacing: -.03em; }
.psk-message p { max-width: 285px; margin: 8px auto 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.psk-retry { all: unset; display: inline-block; margin-top: 14px; padding: 9px 15px; border: 1px solid var(--edge); border-radius: 999px; font-size: 12px; cursor: pointer; }
.psk-notice { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn-t); font-size: 11.5px; line-height: 1.6; }
.psk-candidates { margin-bottom: 12px; padding: 12px; border-radius: 12px; background: var(--bg); font-size: 12px; }
.psk-candidates p { margin: 8px 0 0; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.psk-back { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 10px 0 16px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 14px; background: var(--surface); cursor: pointer; }
.psk-back > span { flex-shrink: 0; font-size: 12px; font-weight: 600; }
.psk-back > small { min-width: 0; text-align: right; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
@media (min-width: 1040px) {
  .stockpeek { align-items: stretch; justify-content: flex-end; }
  .stockpeek .sheetin { width: 440px; max-width: 100%; max-height: 100vh; max-height: 100dvh; border-radius: 24px 0 0 24px; }
  .psk-grab { display: none; }
  .psk-head { padding: 25px 26px 0; }
  .psk-scroll { flex-grow: 0; padding-inline: 26px; }
  .psk-foot { padding-inline: 26px; padding-bottom: 26px; }
}
@media (max-width: 359px) { .psk-head, .psk-scroll { padding-inline: 17px; } .psk-foot { padding-inline: 17px; } .psk-head h2 { font-size: 18px; } .psk-lotmeta { font-size: 11px; } }
@media (hover: hover) { .pslook:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .psk-primary:hover { opacity: .9; } }

/* 스마트 검색의 '알아들은 뜻' 줄 (2026-10-15, app.js renderQHint): 검색창 아래(머리띠 다음)에 검색어를 어떻게 알아들었는지(등급 CH · 품명 갈비 · N건),
   정확히 본 탓에 빠진 것('같이 보기'), 맞는 것이 없을 때 가까운 값(눌러서 바꾸기)을 보여 준다. 흰 판 + 가는 테두리, 뜻 알약은 --ctl (시안 '스마트검색-시안') */
.qhint { margin: 10px 0 12px; padding: 10px 14px; background: var(--surface); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--edge); font-size: 13px; line-height: 1.5; color: var(--fg); }
.qhint .qh1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qhint .qh1 > b { margin-right: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.qhint .qc { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--ctl); font-size: 12.5px; }
.qhint .qc i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.qhint .qc em { font-style: normal; font-weight: 700; }
.qhint .qor { font-size: 12px; color: var(--muted); }
.qhint .qn { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.qhint .qh2 { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.qhint .qzero { color: var(--fg); font-weight: 700; }
.qhint .qlit { font-size: 12.5px; color: var(--muted); }
.qhint button { all: unset; position: relative; cursor: pointer; }
.qhint .qlink { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.qhint .qh1 .qlink { margin-left: auto; }
.qhint .qsug { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.qhint .qsug button { padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--edge); color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.qhint .qh3 { display: flex; justify-content: flex-end; margin-top: 6px; }
.qhint .qraw { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.qhint button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) { .qhint .qsug button:hover { box-shadow: inset 0 0 0 1px var(--fg); } .qhint .qraw:hover { color: var(--fg); } }
@media (pointer: coarse) { .qhint button::after { content: ""; position: absolute; inset: -9px -2px; } }   /* 손가락 자리: 작은 글자 단추를 44px 가까이로 (옆 단추와 겹치지 않게 좌우는 틈의 절반) */

/* ==== 2026-10-15 전체 점검 반영: 검색 중 요약 한 줄 · 진행상황 안내 한 줄 · 건 줄 판매가 ==== */
/* 검색 · 필터 중(.qmode, app.js render)에는 폰의 요약 카드를 세 칸 한 줄로: 큰 숫자 칸과 kg 줄을 접고, 주의 칩 · '어제 이후'는 눌러 둔 것이 있을 때(.keep)만 남긴다.
   390px 폰에서 '갈비'를 치면 첫 결과가 813px에서 시작하던 것을 첫 화면 안으로 올린다. PC(오른쪽 판 · 표 보기 띠)는 그대로다 */
@media (max-width: 1039px) {
  .sumcard.qmode { margin-bottom: 12px; border-radius: 18px; }
  .sumcard.qmode .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "stock hold inc"; column-gap: 0; align-items: start; padding: 11px 16px 12px; }
  .sumcard.qmode .summary > .sg { display: block; align-self: start; min-width: 0; padding: 0; border: 0; }
  .sumcard.qmode .summary > .hold, .sumcard.qmode .summary > .inc { padding-left: 12px; border-left: 1px solid var(--line); }
  .sumcard.qmode .summary > .stock { padding-right: 12px; }
  .sumcard.qmode .summary dt { font-size: 11.5px; }
  .sumcard.qmode .summary dd, .sumcard.qmode .summary > .stock dd, .sumcard.qmode .summary > .hold dd, .sumcard.qmode .summary > .inc dd { margin-top: 3px; font-size: 17px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
  .sumcard.qmode .summary > .stock dd { font-weight: 700; }
  .sumcard.qmode .summary dd small, .sumcard.qmode .summary > .stock dd small { margin-left: 1px; font-size: 11.5px; font-weight: 500; }
  .sumcard.qmode .summary > .sg > span { display: none; }
  .sumcard.qmode .alerts:not(.keep), .sumcard.qmode .changes:not(.keep) { display: none; }
}
@media (max-width: 374px) { .sumcard.qmode .summary { padding-inline: 12px; } .sumcard.qmode .summary > .hold, .sumcard.qmode .summary > .inc { padding-left: 9px; } .sumcard.qmode .summary > .stock { padding-right: 9px; } .sumcard.qmode .summary dd, .sumcard.qmode .summary > .stock dd, .sumcard.qmode .summary > .hold dd, .sumcard.qmode .summary > .inc dd { font-size: 15.5px; } }
@media (max-width: 339px) { .sumcard.qmode .summary dd, .sumcard.qmode .summary > .stock dd, .sumcard.qmode .summary > .hold dd, .sumcard.qmode .summary > .inc dd { font-size: 14px; } .sumcard.qmode .summary dt { font-size: 10.5px; } }
/* 진행상황을 알아보지 못한 건 안내: 한 줄 + '자세히' (펼치면 원래 글이 아래에) */
.stale.swl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
/* 2026-10-18 ('아쉬운 점 시안' 5번): 호박색 띠 대신 점 하나와 흐린 글 한 줄, '자세히'와 닫기(×). 닫으면 같은 내용으로는 다시 뜨지 않는다 (app.js swHide).
   좁은 폰에서는 줄이지 않고 두 줄로 꺾는다: 줄임표로 자르면 따옴표 안의 글('결제예졍')이 먼저 잘린다 */
#stagewarn.swl { align-items: flex-start; gap: 0 8px; margin: 0 2px 12px; padding: 0; border-radius: 0; background: none; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
#stagewarn.swl::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--warn); }
#stagewarn.swl > span:first-of-type { flex: 1; min-width: 0; }
#stagewarn.swl .swmore { margin-left: 0; color: var(--fg); text-decoration: none; line-height: inherit; }
#stagewarn.swl .swx { all: unset; box-sizing: border-box; position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -3px -4px -3px 6px; border-radius: 50%; color: var(--muted); cursor: pointer; }
#stagewarn.swl .swx svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#stagewarn.swl .swx:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
@media (hover: hover) { #stagewarn.swl .swx:hover { background: var(--ctl); color: var(--fg); } }
@media (pointer: coarse) { #stagewarn.swl .swx::after { content: ""; position: absolute; inset: -10px -10px -10px -7px; } }   /* 44px 높이. 자세히(.stale.swl .swmore::after, 옆 8px)와는 사이 14px(gap 8 + margin 6)를 반쯤씩 나눈다: 겹치는 1px은 뒤에 오는 닫기가 받는다 */
#stagewarn.swl .swfull { flex: 1 1 100%; min-width: 0; box-sizing: border-box; margin: 4px 0 0; padding-left: 15px; overflow-wrap: anywhere; }   /* 펼친 글은 다음 줄 전체 폭에서 꺾이고, 점 다음 글자 줄과 같은 자리(점 7 + 틈 8 = 15px)에서 시작 (2026-10-22, 사용자: "텍스트가 칸을 넘어가는것 같은데??": 폭이 정해지지 않은 flex 칸이라 긴 글이 한 줄로 늘어나 칸 밖으로 나갔다) */
.stale.swl .swmore { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; position: relative; }
.stale.swl .swfull { flex: 1 0 100%; margin-top: 4px; }
.stale.swl .swmore:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (pointer: coarse) { .stale.swl .swmore::after { content: ""; position: absolute; inset: -12px -8px; } }
/* 건 줄의 판매가: 굵은 박스 수와 유통기한 사이에서 한 숫자로 붙어 읽혀서('330 22,000 27.12.8-28.2.16') 조금 작고 가볍게, 갈색으로 가른다.
   회색은 입고 예정 줄처럼 '흐린 것'으로 읽혀 쓰지 않는다. 입고 예정 줄의 판매가는 위의 규칙(.ground > .incoming)대로 회색 그대로 */
.lot b.lp { font-size: 14px; font-weight: 500; color: #7a5232; }
.lot span.lp { font-weight: 500; color: #7a5232; }
@media (max-width: 339px) { .lot b.lp { font-size: 13px; } }
/* 관리자 '자료 점검'(엑셀에서 칸끼리 맞지 않는 줄) · '백업' 칸 (2026-10-15). 직원 화면의 .note는 가운데 정렬 flex라 쓰지 않는다 */
.dchk-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); word-break: keep-all; }
.dchk-ok { margin: 0; color: var(--stock); font-weight: 600; }
.accbody h3.dchk-h { margin-top: 4px; }
.dchk-h small { margin-left: 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.dchk { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.dchk li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
.dchk li b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dchk li span { min-width: 0; overflow-wrap: anywhere; }
.dchk li em { grid-column: 1 / -1; margin-top: 2px; font-style: normal; font-size: 12.5px; color: var(--warn-t); overflow-wrap: anywhere; }
/* 엑셀 고칠 것 (2026-10-23, 시안/엑셀고칠것-시안.png, 사용자: "좋아 진행해줘."; admin.php 자료 점검): 위의 알약 줄, 직원이 알린 것(빨간 왼쪽 띠),
   같은 문제끼리 접는 묶음(.fxg: 제목 · 줄 수 · 호박색 '고치는 법')과 줄마다 '고쳤음' 단추(점선 = 아직, 초록 = 고쳤다고 표시함, 호박색 = 다시 읽었는데 아직 그대로) */
.fxpills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fxpills span { padding: 4px 11px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); font-size: 12.5px; font-weight: 600; color: var(--fg); }
.fxpills span.s { box-shadow: inset 0 0 0 1px var(--cta); color: var(--cta-t); }
.fxreps { display: grid; gap: 8px; }
.fxr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--cta) 22%, var(--line)); border-left: 3px solid var(--cta); border-radius: 10px; background: color-mix(in srgb, var(--cta) 3%, var(--surface)); font-size: 13.5px; line-height: 1.45; }
.fxr > div:not(.fxr-a) { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.fxr-h b { font-weight: 700; font-variant-numeric: tabular-nums; }
.fxr-h span { font-weight: 600; }
.fxr-h small, .fxr-by { font-size: 12px; color: var(--muted); }
.fxr-d { font-size: 13px; }
.fxr-d q { color: var(--muted); }
.fxr-a { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 5px; align-self: center; }
.box button.fxok { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 11px; border-radius: 999px; border: 1px dashed var(--edge); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer; }
.box button.fxok:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.box button.fxok.on { border: 1px solid var(--stock); color: color-mix(in srgb, var(--stock) 78%, #000); }
.box button.fxok.still { border: 1px solid var(--warn); color: var(--warn-t); }
@media (hover: hover) { .box button.fxok:hover { border-style: solid; color: var(--fg); } .box button.fxok.on:hover { color: color-mix(in srgb, var(--stock) 78%, #000); } .box button.fxok.still:hover { color: var(--warn-t); } }
.box .fxr-a form, .box .fxl li form { display: block; margin: 0; }   /* .box form의 세로 줄 · 위 여백을 이 작은 양식에는 쓰지 않는다 */
.fxg { border-top: 1px solid var(--line); }
.fxg > summary { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; list-style: none; cursor: pointer; font-size: 14px; }
.fxg > summary::-webkit-details-marker { display: none; }
.fxg > summary::before { content: "›"; flex: none; width: 10px; color: var(--muted); transition: transform 0.15s; }
.fxg[open] > summary::before { transform: rotate(90deg); }
.fxg > summary b { font-weight: 700; }
.fxg > summary span { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.fxhow { margin: -4px 0 8px 18px; font-size: 12.5px; color: var(--warn-t); }
.fxl { margin-bottom: 10px; }
.fxl li { grid-template-columns: auto minmax(0, 1fr) auto; }
.fxl li em { grid-column: 1 / 3; color: var(--muted); }
.box .fxl li form { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
/* 상품정보 복사 확인 판 (#isheet, 2026-10-16, app.js openInfo): 복사한 글을 그대로 보여 준다. 틀은 간략보고 판과 같다(.sheetin.pin · .pubody · .pufoot).
   제목은 길면 두 줄로 꺾는다(판 머리의 기본은 한 줄 줄임표라 '입고 예정 글(수입대행건)을 복사했습니다'가 320px에서 잘린다) */
.isin { width: min(100%, 460px); }
.isin .sheethead { align-items: flex-start; padding: 14px 12px 10px 16px; }
.ishd { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding-top: 5px; }   /* 체크 | 제목: 제목이 길면 체크 옆에서 두 줄로 꺾인다 */
.ishd b { flex: 1; min-width: 0; overflow: visible; white-space: normal; text-overflow: clip; word-break: keep-all; font-size: 16px; font-weight: 700; line-height: 1.35; }
.ishd.fail b { color: var(--warn-t); }
.ishd .isok { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--stock); color: #fff; }
.ishd .isok svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ishd .istag { display: inline-block; margin-left: 2px; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn-t) 40%, transparent); color: var(--warn-t); font-size: 11.5px; font-style: normal; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: 2px; }
.isin .vnote { margin: 0 0 10px; }
.itext { margin: 2px 0 4px; padding: 14px 16px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); font-size: 15px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
@media (max-width: 359px) { .itext { padding: 12px; font-size: 14.5px; } }

/* ==== 연결 상태 (2026-10-16, 사용자가 시안/연결상태-시안.png의 B를 골랐다: "좋아 추천대로 가자"; app.js의 '연결 상태' 구역)
   머리의 연결 상태 글(.cnpill: 초록 연결 정상 · 호박색 자동 받기 꺼짐 · 빨강 연결 끊김 · 회색 자료 없음)과,
   누르면 뜨는 '연결 상태' 판(#csheet .cnin: 상태 칸 · 엑셀 · 서버 · 이 폰 세 칸 · 못 받은 까닭 · 자료별 줄). 글자를 얹는 면은 4.5:1을 넘게 한 단계 진한 색을 쓴다 (점은 밝은 색).
   머리 카드 (같은 날, 시안/연결줄-시안2.png의 F: "오케이 f 로 가자"): 로고 줄과 환율 · 연결 줄을 흰 카드 하나(.cols .head)로 묶고, 환율 · 연결 줄(#rate)은
   그 카드의 아랫단(옅은 베이지, 위에 가는 선)으로 둔다: 환율 왼쪽, 연결 상태 오른쪽, 끊기면 아랫단이 붉어진다. 연결 상태는 상자 없는 글이다
   (처음의 흰 알약은 머리에서 혼자 흰 바탕 + 테두리라 겉돌았다). PC 표 보기(body.gridview)는 카드를 씌우면 머리띠가 68px 높아져 표가 그만큼 내려가므로
   카드 없이 예전 자리에 같은 글만 둔다 */
.rate .cnpill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 12px; font-weight: 650; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; }
.rate .cnpill i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--stock); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stock) 20%, transparent); }
.rate .cnpill em { font-style: normal; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.rate .cnpill .cnchev { width: 12px; height: 12px; margin: 0 0 0 -1px; vertical-align: 0; stroke: currentColor; stroke-width: 2.2; opacity: 0.55; animation: none; }
.rate .cnpill.warn { color: var(--warn-t); }
.rate .cnpill.warn i { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.rate .cnpill.bad, .rate .cnpill.bad em { color: #a3161a; }
.rate .cnpill.bad i { background: #c6221f; box-shadow: 0 0 0 3px #f6cdc8; }
.rate .cnpill.none i { background: var(--line2); box-shadow: none; }
.rate.busy .cnpill i { animation: pulse 1s ease-in-out infinite; }   /* 받는 동안: 점이 깜박인다 (예전에는 새로고침 그림이 돌았다) */
@media (prefers-reduced-motion: reduce) { .rate.busy .cnpill i { animation: none; } }
/* 머리 카드 (표 보기는 빼고: 위 설명). 카드는 글 칸 밖으로 6px(389px 이하 8px) 넓혀 안쪽 폭을 예전과 거의 같게 둔다: 넓히지 않으면 360px 폰에서 로고 · 단추 줄이 두 줄로 갈라졌다.
   카드의 위 12px + 안쪽 16px = 예전 머리의 위 28px. 아랫단은 음수 여백으로 카드 끝까지 닿고 모서리를 카드와 같게 둥글린다(그래서 카드에 overflow를 걸지 않는다).
   #rate로 거는 것은 옛 규칙들(.cols .head.haskind .hacts ~ .rate 같은 클래스 다섯 겹)보다 확실히 앞서려고 */
body:not(.gridview) .cols .head { margin: 12px -6px 14px; border-radius: 22px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(33, 12, 2, 0.05), 0 8px 22px rgba(33, 12, 2, 0.05); }
body:not(.gridview) .cols .head > #rate { position: relative; flex: 1 0 100%; min-width: 0; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 8px; height: 36px; margin: 14px -10px 0;
  border-radius: 0 0 22px 22px; background: var(--ground); box-shadow: inset 0 1px 0 var(--line); font-family: var(--font); letter-spacing: 0; }
body:not(.gridview) .cols .head > #rate > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 아주 좁은 폰에 긴 상태 글이 오면 환율 쪽이 줄임표로 물러난다 */
body:not(.gridview) .cols .head > #rate:has(.cnpill.bad) { background: #fbe9e7; box-shadow: inset 0 1px 0 #f3cdc8; }
body:not(.gridview) .cols .head > #rate:focus-visible { outline-offset: -2px; }
@media (hover: hover) { body:not(.gridview) .cols .head > #rate:hover { background: #f1ebe1; } body:not(.gridview) .cols .head > #rate:has(.cnpill.bad):hover { background: #f8dfdb; } }
@media (max-width: 389px) { body:not(.gridview) .cols .head { margin-inline: -8px; padding-inline: 8px; } body:not(.gridview) .cols .head > #rate { margin-inline: -8px; padding-inline: 12px; } }
@media (pointer: coarse) { .cols .head .rate { position: relative; } .cols .head .rate::after { content: ""; position: absolute; inset: -5px 0 -10px; } body:not(.gridview) .cols .head > #rate::after { inset: -4px 0; } }   /* 손가락 자리: 표 보기의 한 줄은 냉동 | 냉장 | 동결과의 틈까지, 카드 아랫단(36px)은 위아래 4px씩 넓혀 44px */
@media (max-width: 359px) { .rate .cnpill .cnchev { display: none; } .rate .cnpill { font-size: 11.5px; } body:not(.gridview) .cols .head > #rate { padding-inline: 10px; font-size: 11px; } }   /* 좁은 폰: 환율과 상태가 아랫단 한 줄에 들게 꺾쇠를 빼고 글과 안쪽 여백을 한 단계 줄인다 (320px 아랫단 안쪽 280px에 환율 174 + 끊김 글 101 + 틈이 안 들었다) */
@media (max-width: 339px) { .rate .cnpill.warn em { display: none; } }   /* 320px 폰: 가장 긴 호박색(자동 받기 꺼짐)은 시각도 뺀다. 그 시각은 판에 있다 */

.cnin { width: min(100%, 460px); }
.cnin .sheethead b { font-size: 16px; }
.cnbody { display: grid; gap: 14px; align-content: start; }
.cnhero { display: grid; gap: 3px; padding: 14px 16px; border-radius: 16px; background: #e6f1ea; }
.cnhero .cnbadge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; padding: 3px 10px 3px 8px; border-radius: 999px; background: #237a4f; color: #fff; font-size: 12px; font-weight: 700; }
.cnhero .cnbadge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.cnhero b { font-size: 17px; font-weight: 750; letter-spacing: -0.02em; word-break: keep-all; }
.cnhero small { font-size: 12.5px; line-height: 1.45; color: var(--muted); word-break: keep-all; }
.cnhero.warn { background: var(--warn-soft); } .cnhero.warn .cnbadge { background: var(--warn-t); } .cnhero.warn b { color: var(--warn-t); }
.cnhero.bad { background: #fbe9e7; } .cnhero.bad .cnbadge { background: #c6221f; } .cnhero.bad b { color: #8f1512; }
.cnhero.none { background: var(--ground); } .cnhero.none .cnbadge { background: var(--muted); }
.cnflow { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.cnflow li { position: relative; display: grid; justify-items: center; align-content: start; gap: 1px; min-width: 0; text-align: center; }
.cnflow .cnnode { width: 42px; height: 42px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--stock); color: var(--stock); }
.cnflow .cnnode svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cnflow li + li::before { content: ""; position: absolute; top: 20px; left: calc(-50% + 25px); right: calc(50% + 25px); height: 2px; border-radius: 2px; background: var(--stock); }
.cnflow li + li::after { content: "✓"; position: absolute; top: 12px; left: -9px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--stock); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.cnflow .cnname { font-size: 12px; font-weight: 700; color: var(--fg); }
.cnflow b { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cnflow small { font-size: 11.5px; color: var(--muted); word-break: keep-all; }
.cnflow li.dim .cnnode { box-shadow: inset 0 0 0 1.5px var(--line2); color: var(--muted); } .cnflow li.dim b { color: var(--muted); }
.cnflow li.bad .cnnode { box-shadow: inset 0 0 0 1.5px #c6221f; color: #c6221f; } .cnflow li.bad b { color: #b01d1a; }
.cnflow li.cut::before { background: repeating-linear-gradient(90deg, #c6221f 0 5px, transparent 5px 9px); }
.cnflow li.cut::after { content: "✕"; background: #c6221f; }
.cnflow li.off::before { background: repeating-linear-gradient(90deg, var(--line2) 0 5px, transparent 5px 9px); }
.cnflow li.off::after { content: none; }
.cnh { margin: 4px 2px -6px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.cnlist { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cnlist li { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
.cnlist li + li { border-top: 1px solid var(--line); }
.cnlist li > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--stock); }
.cnlist .cnt { flex: 1; min-width: 0; }
.cnlist .cnt b { display: block; font-size: 14px; font-weight: 700; }
.cnlist .cnt span { display: block; margin-top: 1px; font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.cnlist .cnr { flex: none; max-width: 42%; text-align: right; }
.cnlist .cnr b { display: block; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cnlist .cnr span { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cnlist li.warn > i { background: var(--warn); } .cnlist li.warn .cnt span { color: var(--warn-t); }
.cnlist li.bad > i { background: #c6221f; } .cnlist li.bad .cnt span, .cnlist li.bad .cnr b { color: #b01d1a; }
.cnlist li.none > i, .cnlist li.wait > i { background: var(--line2); }
.cnwhy { margin: -4px 0 0; padding: 11px 14px; border-radius: 12px; background: #fbe9e7; color: #7d1311; font-size: 12.5px; line-height: 1.5; word-break: keep-all; }
.cnwhy > b { display: block; margin-bottom: 2px; color: #8f1512; }
.cnraw { margin-top: 8px; }
.cnraw summary { cursor: pointer; font-weight: 700; color: #8f1512; }
.cnraw p { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--surface); color: var(--fg); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; word-break: normal; }
.cnnote { margin: 0 2px; font-size: 12px; line-height: 1.5; color: var(--muted); word-break: keep-all; }
.cnin .pubtn[aria-disabled="true"] { opacity: 0.6; cursor: default; }
@media (max-width: 359px) { .cnhero { padding: 12px 14px; } .cnflow .cnnode { width: 38px; height: 38px; } .cnflow li + li::before { top: 18px; left: calc(-50% + 23px); right: calc(50% + 23px); } .cnflow li + li::after { top: 10px; } .cnlist li { padding: 10px 12px; gap: 9px; } }

/* ---- 화물 진행 (유니패스, 2026-10-16, 시안 A '상세 안의 통관 진행 칸'): app.js cgHtml이 그린다. 시안의 꾸밈(시안/화물진행-시안.css)을 그대로 옮기고,
   시안에 없던 상태(찾지 못함 · 화물이 여럿 · 오류 · 다른 해로 찾기)를 같은 말씨로 더했다. 단계 막대는 같은 날 다섯 단계로 바꿨다 (이 파일 맨 끝의 '다섯 단계') */
.detail section.cg h2 { display: flex; align-items: baseline; gap: 8px; outline: none; }
.detail section.cg h2 small { font-size: 11.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.cgask { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.cgbl { min-width: 0; display: grid; gap: 1px; }
.cgbl span { font-size: 11px; color: var(--muted); }
.cgbl b { font: 600 13.5px var(--mono); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cgbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 15px 0 13px; border: 0; border-radius: 999px; background: var(--act); color: var(--on-press); font: 650 13.5px var(--font); cursor: pointer; }
.cgbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cgbtn[disabled] { opacity: 0.62; cursor: progress; }
.cgbtn:focus-visible, .cgagain:focus-visible, .cgmore:focus-visible, .cgalt button:focus-visible, .cgpick button:focus-visible, .cglog summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cgnow { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 14px; }
.cgnow > i { flex: none; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--hold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hold) 24%, transparent); }
.cgnow > i.ok { background: var(--stock); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stock) 22%, transparent); }
.cgnow > i.no { background: var(--line2); box-shadow: none; }   /* 유니패스에 아직 없음 */
.cgnow > i.bad { background: var(--cta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta) 22%, transparent); }   /* 검역 불합격 */
.cgnow b { display: block; font-size: 17px; font-weight: 750; letter-spacing: -0.02em; overflow-wrap: anywhere; }   /* 유니패스의 처리 단계 글 그대로라 길 수 있다 */
.cgnow span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.cg .rows { margin-top: 12px; }
/* 유니패스 처리 단계 (글 그대로, 최근 것부터; 2026-10-16 사용자 "처리 단계 내용을 그대로 표현해주면"): 최근 넷은 늘 보이고 그 앞은 접는다(details.cglog).
   카드 띠를 펼친 곳의 .cgrecent도 같은 줄이다. 맨 위 줄(지금 단계를 만든 기록)은 호박색. .cglog를 함께 적은 것은 예전 app.js(모두 접은 '처리 기록 N건')가 잠깐 이 CSS와 만날 때를 위해서 */
.cgproc { margin-top: 14px; }
.cgproc h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.cgproc h3 small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.cgproc ol, .cglog ol, .cgrecent { list-style: none; margin: 0; padding: 0; }
.cgproc li, .cglog li, .cgrecent li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.cgproc li time, .cglog li time, .cgrecent li time { font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.cgproc li small, .cglog li small, .cgrecent li small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
.cgproc li.new, .cglog li.new, .cgrecent li.new { color: var(--warn-t); }
.cglog summary { display: flex; align-items: center; gap: 6px; padding: 9px 0 4px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 650; cursor: pointer; list-style: none; }
.cglog summary::-webkit-details-marker { display: none; }
.cglog summary::after { content: "›"; font-size: 15px; color: var(--muted); transform: rotate(90deg); }
.cglog[open] summary::after { transform: rotate(-90deg); }
.cgerr { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn-t); font-size: 12.5px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.cgalt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cgalt button { position: relative; height: 36px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); color: var(--fg); font: 600 12.5px var(--font); cursor: pointer; }
.cgalt button[disabled] { opacity: 0.6; cursor: progress; }
.cgpick { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cgpick button { width: 100%; display: grid; gap: 2px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); text-align: left; font: inherit; cursor: pointer; }
.cgpick button b { font: 600 13.5px var(--mono); overflow-wrap: anywhere; }
.cgpick button span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.cgpick button[aria-current="true"] { background: var(--surface); }
.cgpick button[disabled] { opacity: 0.6; cursor: progress; }
.cg .cgnow + .cgpick { margin-top: -4px; }
.cgfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line2); font-size: 12px; color: var(--muted); }
.cgfoot > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.cgagain { position: relative; flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--ctl); color: var(--muted); font: 600 12.5px var(--font); }
.cgagain:not([disabled]) { color: var(--fg); cursor: pointer; }
.cgagain[disabled] { cursor: default; }
.cgmore { position: relative; padding: 4px 0; border: 0; background: none; color: var(--fg); font: 600 12px var(--font); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cgfin { flex: none; font-size: 12px; color: var(--muted); }
@media (pointer: coarse) {   /* 손가락 자리 44px (보이는 크기는 그대로) */
  .cgagain::after { content: ""; position: absolute; inset: -6px -4px; }
  .cgalt button::after { content: ""; position: absolute; inset: -4px -2px; }
  .cgmore::after { content: ""; position: absolute; inset: -10px -6px; }
  .cglog summary { padding: 13px 0 9px; }
}

/* ---- 화물 진행: 다섯 단계 · 검역 칸 · 냉장 B/L 카드의 바닥 띠 (2026-10-16 둘째 시안 '화물진행-카드' B, 사용자: "추천대로 가자"). 시안의 꾸밈(시안/화물진행-카드-시안.css의 공통 · B)을 옮겼다.
   다섯 단계는 입항 · 반입 · 검역 · 통관 · 반출(app.js CG_STAGES): 끝난 단계는 먹색, 지금 단계는 호박색 고리(앱의 통관 전 색), 검역은 관문이라 점이 조금 크고
   합격 전에는 통관 쪽 선이 점선 · 합격하면 초록 점에 흰 체크, 통관(수리) · 반출은 초록(앱의 창고 재고 색). 엑셀만 보고 그린 막대(카드 띠의 조회 전 · 유니패스에 없음)는 끝난 단계를 한 단계 옅게 */
.cgrail { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cgrail li { position: relative; padding-top: 21px; text-align: center; color: var(--muted); }
.cgrail li::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--line2); }
.cgrail li:first-child::before { left: 50%; }
.cgrail li:last-child::before { right: 50%; }
.cgrail li::after { content: ""; position: absolute; top: 2px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; box-sizing: border-box; background: var(--surface); border: 2px solid var(--line2); }
.cgrail b { display: block; font-size: 12.5px; font-weight: 650; color: var(--muted); letter-spacing: -0.01em; }
.cgrail span { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.35; color: var(--muted); font-variant-numeric: tabular-nums; word-break: keep-all; }   /* 좁은 폰에서 '합격 10/14'가 옆 칸과 겹치지 않게 빈칸에서 두 줄로 꺾인다 (320px) */
.cgrail li.d::before { background: var(--fg); }
.cgrail li.d::after { background: var(--fg); border-color: var(--fg); }
.cgrail li.d b, .cgrail li.d span { color: var(--fg); }
.cgrail li.d + li:not(.d)::before { background: linear-gradient(to right, var(--fg) 50%, var(--line2) 50%); }   /* 끝난 단계 다음 칸: 왼쪽 반도 먹색 */
.cgrail li.now::after { border-color: var(--hold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hold) 22%, transparent); }
.cgrail li.now b { color: var(--warn-t); font-weight: 750; }
.cgrail li.now span { color: var(--warn-t); font-weight: 600; }
.cgrail li.q::after { top: 0; width: 16px; height: 16px; margin-left: -8px; }   /* 검역: 관문 칸 */
.cgrail li.q:not(.d)::before { background: linear-gradient(to right, var(--line2) 50%, transparent 50%), repeating-linear-gradient(to right, var(--line2) 0 3px, transparent 3px 6px); }
.cgrail li.d + li.q:not(.d)::before { background: linear-gradient(to right, var(--fg) 50%, transparent 50%), repeating-linear-gradient(to right, var(--line2) 0 3px, transparent 3px 6px); }
.cgrail li.q:not(.d) + li::before { background: linear-gradient(to right, transparent 50%, var(--line2) 50%), repeating-linear-gradient(to right, var(--line2) 0 3px, transparent 3px 6px); }
.cgrail li.q.d::after { border-color: var(--stock); background: var(--stock) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.5 2.4 5-5.2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cgrail li.q.d b, .cgrail li.q.d span { color: var(--ok-t); }
.cgrail li.q.now::after { background: color-mix(in srgb, var(--hold) 14%, var(--surface)); }
.cgrail li.q.unk::after { border-style: dashed; }   /* 유니패스에 검역 기록이 없음: 빈 고리 (짐작으로 '지금'이라 칠하지 않는다) */
.cgrail li.q.bad::after { border-color: var(--cta); background: color-mix(in srgb, var(--cta) 12%, var(--surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cta) 18%, transparent); }
.cgrail li.q.bad b, .cgrail li.q.bad span { color: #a3161a; }   /* 검역 불합격 (연결 끊김 글자와 같은 빨강) */
.cgrail li.ok::after { background: var(--stock); border-color: var(--stock); }
.cgrail li.ok::before { background: var(--stock); }
.cgrail li.d + li.ok::before { background: linear-gradient(to right, var(--fg) 50%, var(--stock) 50%); }
.cgrail li.ok b, .cgrail li.ok span { color: var(--ok-t); }
.cgrail.xl li.d::before, .cgrail.xl li.d::after { opacity: 0.45; }
.cgrail.xl li.d + li:not(.d)::before { opacity: 1; background: linear-gradient(to right, color-mix(in srgb, var(--fg) 45%, var(--surface)) 50%, transparent 50%), repeating-linear-gradient(to right, var(--line2) 0 3px, transparent 3px 6px); }
/* 지금 상태 한 줄 (카드 띠): 점 + 굵은 이름 + 흐린 덧말. 칸 밑의 한 줄(cgnote)은 서류와 다음에 기다리는 것 */
.cgstat { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cgstat > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hold) 24%, transparent); }
.cgstat > i.ok { background: var(--stock); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stock) 22%, transparent); }
.cgstat > i.no { background: var(--line2); box-shadow: none; }
.cgstat > i.bad { background: var(--cta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta) 22%, transparent); }
.cgstat b { flex: 0 1 auto; min-width: 0; font-size: 14.5px; font-weight: 750; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 유니패스 글 그대로라 길면 줄임표 */
.cgstat small { flex: 0 1000 auto; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 자리가 모자라면 덧말부터 줄어든다 */
.cgnote { margin: 12px 0 0; padding-top: 8px; border-top: 1px dashed var(--line2); font-size: 11.5px; line-height: 1.55; color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; }
.cgnote b { color: var(--fg); font-weight: 650; }
/* 상세의 검역 칸: 서류 · 검역 · 다음 (통관 수리 전까지) */
.cg .cgq { margin: 14px 0 0; padding: 4px 12px; border-radius: 14px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.cg .cgq > div { grid-template-columns: 58px minmax(0, 1fr); }
.cgq dt { font-weight: 650; }
.cgq dd small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.cgq dd b { font-weight: 650; color: var(--warn-t); }
.cgq dd b.ok { color: var(--ok-t); }
.cgq dd b.bad { color: #a3161a; }
/* 냉장 스케쥴 B/L 카드의 바닥 띠: 카드 맨 아래 한 줄(48px), 누르면 펼친다. 머리 카드의 아랫단(환율 · 연결 줄)과 같은 꼴 */
.cgband { border-top: 1px solid var(--line); background: var(--ground); }
.cgband-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; box-sizing: border-box; margin: 0; padding: 0 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.cgband-row .cgstat { flex: 1; }
.cgband-tog { cursor: pointer; }
.cgband-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 10px; }
.cgbars { flex: none; display: flex; gap: 3px; }
.cgbars i { width: 13px; height: 5px; border-radius: 3px; background: var(--track); }
.cgbars i.d { background: var(--fg); }
.cgbars i.now { background: var(--hold); }
.cgbars i.q { width: 17px; }
.cgbars i.q.d, .cgbars i.ok { background: var(--stock); }
.cgbars i.q.unk { background: repeating-linear-gradient(90deg, var(--line2) 0 2px, transparent 2px 4px); }   /* 검역 기록 없음: 빗금 */
.cgbars i.bad { background: var(--cta); }
.cgbars.xl i.d { background: color-mix(in srgb, var(--fg) 40%, var(--track)); }
.cgband-src { flex: none; display: inline-flex; align-items: center; font-size: 11px; color: var(--muted); white-space: nowrap; }
.cgband-src::after { content: "›"; font-size: 15px; line-height: 1; margin-left: 4px; transform: rotate(90deg); }
.cgband-tog[aria-expanded="true"] .cgband-src::after { transform: rotate(-90deg); }
.cgband-go { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: var(--act); color: var(--on-press); font: 650 12px var(--font); white-space: nowrap; cursor: pointer; }
.cgband-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.cgband-go[aria-disabled="true"] { opacity: 0.62; cursor: progress; }
.cgband-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cgband-more { padding: 6px 16px 14px; }
.cgband-more > .cgnote:first-child { margin-top: 2px; padding-top: 0; border-top: 0; }   /* 화물이 여럿일 때: 막대 없이 글부터 */
.cgband .cgrecent { margin-top: 10px; }
.cgband .cgrecent li { padding: 6px 0; font-size: 13px; }
.cgband .cgrecent li.more { display: block; padding-top: 7px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.cgband .cgpick { margin-top: 10px; }
.cgband .cgpick button { background: var(--surface); }
.cgband-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.cgband-foot .cgagain { background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
.cgband > .cgerr { margin: 0 16px 12px; }
.plan-bl-foot:has(+ .cgband) { padding-bottom: 14px; }
@media (pointer: coarse) { .cgband-go::after { content: ""; position: absolute; inset: -7px -4px; } }   /* 30px 단추의 손가락 자리 44px */
@media (max-width: 374px) {   /* 좁은 폰: 카드의 다른 줄처럼 안쪽 12px, 막대를 조금 좁게 */
  .cgband-row, .cgband-more { padding-inline: 12px; }
  .cgband > .cgerr { margin-inline: 12px; }
  .cgband-row { gap: 8px; }
  .cgbars i { width: 11px; }
  .cgbars i.q { width: 15px; }
}

/* 관리자 화면 재고연결(냉동) · 재고연결(냉장·동결) 구역의 '지금 보여 주는 자료' 칸 (2026-10-16): 파일 이름 · 읽은 때 · 건수와 '지금 새로 읽기'.
   두 구역이 같은 칸을 쓴다 (admin.php $connBody). 읽기만 하는 값이라 입력칸과 같은 테두리에 배경만 옅게 (전에 냉동 구역의 '동기화 중인 엑셀 파일' 칸이 쓰던 모양) */
.connstate { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--fg) 5%, var(--surface)); }
.connstate small { font-size: 12px; color: var(--muted); }
.connstate b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.connstate span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.box .connstate form { margin-top: 10px; }

/* ==== 배경 그림: 맨 위 참나무 가지 · 맨 끝 목장 (2026-10-17) ====
   사용자가 img 폴더에 수채 그림 둘(위쪽용 · 아래쪽용)을 올리고 시안(시안/배경그림-시안.png)을 본 뒤 A(페이지 맨 위 · 맨 끝)를 골랐다:
   "추천해준 a 안으로 가는데 배경을 살짝 연하게 해주고. 연필스케치 그림을 빼주자." 그래서 같은 날 넣은 머리 바탕 그라데이션(app.js의 tintMeasure · tintSync)과
   머리 카드 속 연필 그림(img/farm-sketch*.svg)은 걷었다 (백업/2026-10-17 배경 그림 전/).
   그림 파일: 원본(03de42aa-….png · 고요한 목장과 네 마리 소.png, 2026-10-27부터 site 밖 시안/배경그림-원본/: 화면에 쓰지 않는 큰 파일이 서버에 올라가지 않게)은 종이색이 앱 바탕(--bg)보다 밝아 그대로 깔면 네모난 경계가 보인다. 그래서 종이색을 투명으로 바꾸고
   (종이보다 어두워진 만큼만 그림으로 남긴다: 종이보다 밝은 점은 종이의 결이라 버린다) 그림이 있는 자리만 잘라 WebP로 만든 셋을 쓴다 (시안/배경그림-파일만들기.py):
   bg-leaves-l(왼쪽 가지 덩이, 원본 가로의 40.7%) · bg-leaves-r(오른쪽 덩이, 30%) · bg-ranch(목장, 비어 있는 하늘을 뗀 아래쪽, 1800px).
   가지: 두 덩이를 화면 왼쪽 위 · 오른쪽 위 끝에 따로 붙인다. 크기는 원본 한 장을 --lw 폭으로 놓았을 때의 크기다.
   폰은 화면 폭의 143%(두 덩이의 끝이 화면 가로 57.7% 언저리에서 겹치지 않고 만나는 크기, 900px까지), PC는 화면 폭(1280~1600px).
   그만큼 쪽 위에 자리를 내어(body 위 여백: 폰 80px · PC 122px; 처음에는 56 · 84px였고, 같은 날 가지 사이에 로고를 넣으며 늘렸다: 아래 '가지 사이 로고' 묶음) 머리 카드가 가지 밑으로 내려앉는다. 가지의 아랫부분은 카드 뒤로 숨는다.
   목장: 쪽의 맨 끝 바닥에 화면 폭(520px보다 좁으면 520px로 놓고 가운데를 보인다)으로 깔고, 바닥 로고가 그 하늘(언덕 위)에 뜨게 로고 아래를 비운다(18vw + 8px, 적어도 160px).
   짧은 쪽(검색 결과가 적을 때 · 로그인)도 목장이 화면 바닥에 오도록 body를 화면 높이 이상으로 둔다.
   '살짝 연하게': 두 그림 모두 불투명도 0.8로 바탕에 조금 녹인다.
   둘 다 body의 ::before · ::after(z-index −1)라 내용 뒤에 깔리고 눌리지 않는다. body가 그 기준이 되도록 position: relative를 준다 (body에 바로 붙는 앱의 요소는 모두 position: fixed라 영향이 없다).
   쪽: 직원 화면(재고 카드 보기 · 스케쥴 · 단가표)과 판 하나뿐인 짧은 쪽(직원 · 관리자 로그인, 처음 설정, 설정 파일 확인). PC 표 보기(body.gridview, 빽빽한 표 화면)와 관리자 화면은 뺐다.
   :has()를 모르는 옛 브라우저는 그림 없이 예전 모양이다. 그림을 바꾸면 아래 주소들의 ?v= 숫자를 올린다 (그림 파일에는 app.css의 ?v=filemtime 같은 자동 표시가 없다). */
body:not(.gridview):has(> .wrap > .cols), body:has(> .panel) { position: relative; --lw: min(143vw, 900px); }
body:not(.gridview):has(> .wrap > .cols) { min-height: 100vh; min-height: 100svh; padding-top: 80px; }
body:not(.gridview):has(> .wrap > .cols)::before, body:has(> .panel)::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(var(--lw) * 0.19); pointer-events: none; opacity: 0.8;
  background: url("img/bg-leaves-l.webp?v=1") left top / calc(var(--lw) * 0.4067) auto no-repeat, url("img/bg-leaves-r.webp?v=1") right top / calc(var(--lw) * 0.2999) auto no-repeat; }
body:not(.gridview):has(> .wrap > .cols)::after, body:has(> .panel)::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: calc(max(100vw, 520px) * 0.19); pointer-events: none; opacity: 0.8;
  background: url("img/bg-ranch.webp?v=1") center bottom / max(100%, 520px) auto no-repeat; }
/* 하단 로고를 카드와 목장 그림의 한가운데로 (2026-10-17, 사용자가 목록 맨 끝을 갈무리해 보내며: "하단부 로고가 가운데 있었으면 좋겠어 너무 위로 붙어있네."):
   로고는 마지막 카드 32px 아래에 붙어 있고 그림까지는 100px 넘게 떨어져 있었다 (그림은 문서 맨 끝에 화면 폭에 비례해 깔리는데 위 틈은 늘 32px였다).
   이제 위 틈 = 아래 틈이다. 아래 틈은 로고에서 그림의 '시각적 윗선'까지로 잰다: 그림 칸(높이의 100%)에는 투명한 하늘이 있고 나무 · 헛간 · 언덕이 칸의 1/3쯤 아래부터 보이므로
   (bg-ranch.webp를 읽어 보니 열마다 처음 보이는 줄의 중앙이 327줄 중 124번째) 그림 높이(폭의 0.1817배)의 65% 아래 지점 = 문서 끝에서 폭 × 0.1178 위를 윗선으로 본다.
   쪽의 길이와 그림 자리는 그대로 두고 로고만 내린다: 푸터 위 · 아래 여백의 합은 예전 그대로(32px + max(160px, 18vw + 8px))이고 둘로 나누는 몫만 바뀐다.
     --pt(위 여백) = (합 + 푸터 아래 끝에서 문서 끝까지 − 윗선 높이) / 2,  아래 여백 = 합 − --pt
   푸터 아래 끝에서 문서 끝까지는 .wrap의 아래 여백(40px + 아이폰 아래 안전 영역)이다. 위 틈은 폭에 따라 69 ~ 94px (예전 32px) */
body:not(.gridview) .cols + .brandfoot {
  --sum: calc(32px + max(160px, calc(18vw + 8px)));
  --pt: calc((var(--sum) + 40px + env(safe-area-inset-bottom, 0px) - max(100vw, 520px) * 0.1178) / 2);
  padding-top: var(--pt); padding-bottom: calc(var(--sum) - var(--pt)); }
/* 짧은 쪽(검색 결과가 한두 건이거나 없을 때)은 body가 화면 높이만큼 늘어나(위 min-height) 남는 자리가 로고 아래로 몰려, 로고는 내용에 붙고 그림은 화면 바닥에 있었다.
   .wrap을 세로 flex로 하고 푸터의 위 · 아래 바깥 여백을 auto로 해 남는 자리를 똑같이 나눈다: 로그인 쪽(body:has(> .panel) > .brandfoot)이 이미 쓰는 방식이다.
   긴 쪽은 남는 자리가 0이라 위 값 그대로. min-height는 body의 min-height(100svh)에서 body 위 여백(80px, 1040px부터 122px)을 뺀 만큼이다 (body가 border-box라 합이 화면 높이와 같다).
   .wrap::before(가지 사이 로고)는 position: absolute라 flex 항목이 아니고, 기준도 body라 그대로다 */
body:not(.gridview):has(> .wrap > .cols) > .wrap { display: flex; flex-direction: column; min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); }
body:not(.gridview) .cols + .brandfoot { margin-block: auto; }
@media (min-width: 1040px) { body:not(.gridview):has(> .wrap > .cols) > .wrap { min-height: calc(100vh - 122px); min-height: calc(100svh - 122px); } }
body:has(> .panel) > .brandfoot { padding-bottom: calc(max(150px, calc(18vw + 8px)) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1040px) {
  body:not(.gridview):has(> .wrap > .cols), body:has(> .panel) { --lw: clamp(1280px, 100vw, 1600px); }
  body:not(.gridview):has(> .wrap > .cols) { padding-top: 122px; }
}

/* ==== 가지 사이 로고 (2026-10-17) ====
   사용자가 img/Logo.png(CATTLE FARM CHALLENGE)와 맨 위 가지 띠를 갈무리해 보내며 "이 그림 로고를 나뭇가지 사이 가운데에 배치해 보는건 어떨까???",
   시안(시안/로고가운데-시안.png)의 A를 골랐다 ("좋아 추천대로 가자"): 머리 카드와 그 안의 글자 로고는 그대로 두고, 화면 맨 위 가지 사이 가운데에 로고를 둔다.
   그림은 img/logo-crest.webp: Logo.png를 440px 폭으로 줄이고 흰 바탕을 투명으로 바꾼 것이다 (시안/로고가운데-파일만들기.py). 흰 글씨(CHALLENGE)에는 바탕색이 비친다.
   자리: body 기준 가로 가운데(PC에서는 왼쪽 머리 카드와 오른쪽 요약 사이 위), 위 10px · 높이 72px (1040px부터 위 14px · 높이 108px).
   직원 화면은 .wrap, 판 하나뿐인 쪽(로그인 등)은 .panel의 ::before로 그린다: 둘 다 position이 없어 body(위 '배경 그림' 묶음의 position: relative)가 기준이 된다.
   로고와 머리 카드 사이는 10 · 12px이다 (위 '배경 그림' 묶음의 위 여백 80 · 122px). 로그인 판은 로고 밑에서 시작하도록 위 여백을 적어도 96 · 136px로 둔다(13vh가 더 크면 그대로).
   가지(body::before)에는 로고 자리를 가운데로 한 타원 구멍을 걸어 로고 둘레의 가지 끝을 걷는다: 폰에서는 두 가지 덩이가 화면 가운데에서 만나므로 구멍이 없으면 로고가 잎에 묻힌다.
   PC 표 보기와 관리자 화면에는 없다 (가지 · 목장과 같다). 그림을 바꾸면 ?v= 숫자를 올린다. */
body:not(.gridview):has(> .wrap > .cols) > .wrap::before, body:has(> .panel) > .panel::before {
  content: ""; position: absolute; left: 50%; top: 10px; width: 96px; height: 72px; transform: translateX(-50%); pointer-events: none;
  background: url("img/logo-crest.webp?v=1") center / contain no-repeat; }
body:not(.gridview):has(> .wrap > .cols)::before, body:has(> .panel)::before {
  -webkit-mask-image: radial-gradient(75px 59px at 50% 46px, transparent 55%, #000 100%); mask-image: radial-gradient(75px 59px at 50% 46px, transparent 55%, #000 100%); }
body:has(> .panel) > .panel { margin-top: max(96px, 13vh); }
@media (min-width: 1040px) {
  body:not(.gridview):has(> .wrap > .cols) > .wrap::before, body:has(> .panel) > .panel::before { top: 14px; width: 144px; height: 108px; }
  body:not(.gridview):has(> .wrap > .cols)::before, body:has(> .panel)::before {
    -webkit-mask-image: radial-gradient(112px 89px at 50% 68px, transparent 55%, #000 100%); mask-image: radial-gradient(112px 89px at 50% 68px, transparent 55%, #000 100%); }
  body:has(> .panel) > .panel { margin-top: max(136px, 13vh); }
}

/* ==== 검색창: 오른쪽 검색 단추 (2026-10-17, 사용자: "검색창이 살짝 약해보이는데 바로 눈에 띄게 하려면" → 시안/검색창-시안.png의 C, "좋아 추천안 대로 가자.") ====
   흰 알약이 테 없이 크림 바탕과 흰 머리 카드 사이에 묻혔다. 오른쪽 끝에 먹색 동그라미 돋보기 단추(‘재고’ 탭 알약과 같은 먹색)를 두고 옅은 테와 그림자로 띄운다. 왼쪽 돋보기는 단추가 대신한다.
   단추는 app.js(renderModes)가 넣고, 이 규칙이 있을 때만(.qgo가 absolute) .search에 go를 붙인다: 옛 app.css와 만나면 단추를 숨기고, 옛 app.js와 만나면 go가 없어 둘 다 예전 모양 그대로다.
   검색어가 있거나 초점이 오면 테가 먹색이 되는 것(목록이 걸러진 표시)은 그대로: .search.go #q가 더 구체적이라 그 두 상태의 테 색을 여기서 다시 적는다 */
.qgo { all: unset; box-sizing: border-box; position: absolute; right: 5px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: var(--fg); color: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.qgo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.qgo:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.search.go > svg { display: none; }
.search.go #q::placeholder { color: var(--muted); opacity: 1; }
.search.go #q, .search.go #q:placeholder-shown { padding-left: 20px; padding-right: 54px; }
.search.go #q:not(:placeholder-shown) { padding-right: 92px; }
.search.go #q:not(:placeholder-shown), .search.go #q:focus-visible { border-color: var(--accent); }
.search.go .qclear { right: 48px; }
/* 내려 읽을 때 접힌 머리띠: 검색창이 41~44px로 낮아 단추도 32px */
.top.compact .search.go .qgo { width: 32px; height: 32px; margin-top: -16px; }
.top.compact .search.go .qgo svg { width: 15px; height: 15px; }
@media (pointer: coarse) {
  .qgo::after { content: ""; position: absolute; inset: -2px; }                 /* 40px → 44px */
  .top.compact .search.go .qgo::after { inset: -6px; }                         /* 접혔을 때 32px → 44px */
}
@media (prefers-reduced-motion: no-preference) {
  .qgo { transition: width 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), margin-top 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.15s, transform 0.12s ease-out; }
  .qgo:active { transform: scale(0.94); }
}

/* ==== 냉동 · 냉장 · 동결을 윗단계로 (2026-10-17, 사용자: "냉동/냉장/동결 이 재고/스케쥴/단가표 보다 상위개념이거든? 그런데 냉동/냉장/동결이 부수적인걸로 보인다."
   → 시안 여섯 판 뒤 시안/종류위계-시안6.png의 ㄷ '알약 셋 + 안쪽 띠', "좋아 추천안으로 진행해줘.") ====
   폰과 PC 카드 보기(body:not(.gridview))만. 머리 카드 맨 윗줄은 냉동 · 냉장 · 동결 글자 알약 셋(고른 것만 먹색, 나머지 오트)과 오른쪽 설정 · 나가기,
   그 아래 카드 안의 연한 띠(환율 줄과 같은 --ground) 위에 재고 · 스케쥴 · 단가표(고른 칸은 흰 알약). 먹색은 화면에서 종류 하나뿐이고, 띠가 '종류 카드 안의 보기'를 모양으로 보인다.
   제목('냉동 재고')은 고른 알약이 대신하므로 화면에서 감추되 화면 낭독기에는 남긴다. 재고 · 스케쥴 · 단가표를 카드 안으로 옮기는 것은 app.js(placeModes)이고, --modes-in이 그 신호다.
   PC 표 보기의 두 줄 머리띠는 그대로다 */
body:not(.gridview) .cols .head { --modes-in: 1; padding-top: 12px; row-gap: 2px; }   /* 줄 사이 2px: 359px 이하의 8px(제목 아래로 내려가던 묶음 때문)를 쓰면 띠와 환율 줄 사이에 흰 틈이 생긴다 */
body:not(.gridview) .cols .head h1.ptitle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body:not(.gridview) .cols .head .hacts { flex: 1 1 auto; justify-content: flex-start; margin-left: 0; --kp: 5px; }
body:not(.gridview) .cols .head .hacts > .kseg { margin-right: auto; padding: 0; background: none; }
body:not(.gridview) .cols .head .hacts .kseg button { position: relative; }
body:not(.gridview) .cols .head .hacts .kseg button[aria-pressed="true"] { font-weight: 700; }
body:not(.gridview) .cols .head > #modes { order: 2; flex: 1 0 100%; background: var(--ground); box-shadow: inset 0 1px 0 var(--line); }
body:not(.gridview) .cols .head > #modes .seg { padding: 0; background: none; }
body:not(.gridview) .cols .head > #modes .seg .ink { left: 0; top: 0; bottom: 0; background: var(--surface); }   /* 흰 알약 하나가 칸 사이를 미끄러진다 (밀어 넘기기를 따라오는 것도 그대로) */
body:not(.gridview) .cols .head > #modes .seg button { font-weight: 500; color: var(--muted); }
body:not(.gridview) .cols .head > #modes .seg button[aria-pressed="true"] { color: var(--fg); font-weight: 700; }
body:not(.gridview) .cols .head > #rate { margin-top: 0; }
@media (max-width: 389px) { body:not(.gridview) .cols .head > #modes { margin-inline: -8px; padding-inline: 8px; } }   /* 이 폭에서는 카드 안쪽 여백이 8px라 띠도 그만큼만 내민다 (10px면 카드 밖으로 2px 나온다) */
@media (pointer: coarse) {
  body:not(.gridview) .cols .head .hacts .kseg button::after { content: ""; position: absolute; inset: -4px -3px; }   /* 36px → 44px (알약 사이 6px를 반씩) */
  body:not(.gridview) .cols .head > #modes .seg button::after { content: ""; position: absolute; inset: -6px -3px; }   /* 띠 안쪽 여백(8px) 안에서 44px 남짓 */
}

/* ==== 머리 부분 손질 (2026-10-17, 사용자가 머리 카드 · 검색 줄을 갈무리해 보내며: "디자인 전문가가 표현했으면 어떻게 표현했을까??? 시안을 하나 보여줄래???" → 시안/머리손질-시안.png, "그래 이거로 가자") ====
   짜임 · 색 · 글꼴은 그대로, 마감만: 기준선 하나(카드 안쪽 16px), 8pt 간격, 테두리 색 하나(--edge: 고르지 않은 종류 알약 · 설정 · 나가기 · 검색창 · 필터 칩이 모두 흰 면 + 연한 선),
   먹색은 두 곳(고른 종류 · 검색 단추: 검색창에 초점이 와도 옅은 띠만), 굵기 두 단계(고른 것 700, 나머지 600 · 500), 높이 36px(종류 · 단추 · 탭 · 환율 줄) · 38px(필터 칩).
   환율 줄만 폰(479px 이하)에서 14px: 16px이면 390px에서 통관환율이 '1,478…'로 잘린다 (시안에서 보였다) */
body:not(.gridview) .cols .head { padding: 16px 16px 0; }
body:not(.gridview) .cols .head .hacts { gap: 8px; }
body:not(.gridview) .cols .head .hacts > .kseg { gap: 8px; }
body:not(.gridview) .cols .head .hacts .kseg button { height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 36px; color: var(--fg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
body:not(.gridview) .cols .head .hacts .kseg button[aria-pressed="true"] { background: var(--press); color: var(--on-press); box-shadow: none; }
body:not(.gridview) .cols .head .hbtn { background: none; box-shadow: inset 0 0 0 1px var(--edge); }
body:not(.gridview) .cols .head .hbtn svg { width: 17px; height: 17px; stroke-width: 1.7; }
@media (hover: hover) { body:not(.gridview) .cols .head .hbtn:hover { background: var(--ground); } }
body:not(.gridview) .cols .head > #modes { margin: 16px -16px 0; padding: 8px 16px; }
body:not(.gridview) .cols .head > #modes .seg { gap: 8px; }
body:not(.gridview) .cols .head > #modes .seg .ink { width: calc((100% - 8px * (var(--n) - 1)) / var(--n)); transform: translate3d(calc(var(--i) * (100% + 8px)), 0, 0); box-shadow: 0 1px 2px rgba(33, 12, 2, 0.05), 0 0 0 1px var(--edge); }
body:not(.gridview) .cols .head > #modes .seg button { padding: 8px 0; font-size: 14px; letter-spacing: -0.01em; }
body:not(.gridview) .cols .head > #rate { margin-inline: -16px; padding: 0 16px; font-size: 12px; }
@media (max-width: 479px) { body:not(.gridview) .cols .head > #rate { padding: 0 14px; } }
@media (max-width: 389px) { body:not(.gridview) .cols .head > #rate { padding: 0 8px; } }   /* 340 · 360px에서는 14px이면 9~10px, 10px이면 1~2px 모자란다 */
.search.go #q { border-color: var(--edge); box-shadow: 0 0 0 3px var(--ring); }
.search.go #q:focus-visible { border-color: var(--edge); --ring: color-mix(in srgb, var(--fg) 8%, transparent); }
.search.go #q:not(:placeholder-shown) { border-color: var(--fg); }
.top .selbtn, .fbar .chip { background: var(--surface); }
.top { gap: 12px; }
.fbar { gap: 8px; }
.fbar .chip { height: 38px; padding-block: 0; display: inline-flex; align-items: center; font-size: 14px; }

/* 간략보고 '단가 빼기' (2026-10-17): 켜면 단가 확인 판의 단가 칸과 그 아래 단가표 후보 줄을 감춘다 (적어 둔 값은 그대로 남는다) */
.brlist.noprice .brprice, .brlist.noprice .brhint { display: none; }

/* 단가표 ↔ 선택 상품의 재고: 내용만 이동한다. 머리띠는 최종 높이로 먼저 놓아, 짧은 목록에서도 저장한 스크롤 위치로 바로 돌아가게 한다. */
body.stock-context .top, body.stock-context .fbar, body.stock-context #q, body.stock-context .selbtn svg { transition: none !important; }

/* ==== 간략보고의 제 단추 (2026-10-18) ==== */
/* 폰: 떠 있는 둘째 알약. 표 생성 알약(가운데)의 왼쪽 틈에 선다: 오른쪽 끝 = 화면 가운데 − 표 생성 알약 너비의 반 − 8px. 먹색(표 생성의 빨강과 다른 일). 틈이 좁거나 내려 읽는 중(.mini)에는 서류 아이콘만 든 50px 동그라미 */
.bfab { all: unset; box-sizing: border-box; position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: inline-flex; align-items: center; height: 50px; padding: 0 16px 0 14px; border-radius: 999px; background: var(--act); color: var(--on-press); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 24px rgba(33, 12, 2, 0.22); }
.bfab svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bfab .lb { padding-left: 7px; }
.bfab.mini { padding: 0 15px; }
.bfab.mini .lb { display: none; }
.bfab.off, body.selecting .bfab, body.plan .bfab, body.price .bfab, body:has(.pdcard) .bfab, body:has(.sheet) .bfab { opacity: 0; visibility: hidden; pointer-events: none; }
.bfab:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {  .bfab:not(.off):active { transform: scale(0.96); } }
/* 간략보고 판: 접힌 '판매가 · 수량 확인' 단추 (펼치면 상품 줄 목록) */
.brfix { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; margin: 4px 0 2px; padding: 12px 14px; border-radius: 14px; background: var(--ctl); color: var(--fg); font-size: 14px; cursor: pointer; }
.brfix b { font-weight: 700; }
.brfix small { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.brfix svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.brfix[aria-expanded="true"] svg { transform: rotate(180deg); }
/* 간략보고의 '상품 고르기' (2026-10-21): 검색된 상품마다 칩 하나 (눌림 = 넣음). 상품이 많으면 칸 안에서 스크롤 */
.brpick { margin: 6px 0 4px; }
.brpick .brchips { max-height: 248px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.brprod { display: inline-flex; align-items: baseline; gap: 6px; text-align: left; }
.brprod b { font-weight: 650; }
.brprod span { font-weight: 500; opacity: 0.75; }
.brprod[aria-pressed="false"] span { text-decoration-line: line-through; text-decoration-thickness: 1px; }   /* 뺀 상품: 브랜드 · 등급에 줄, 품명은 흐리게 (굵은 한글 품명에 그은 줄은 획에 묻혀 안 보였다) */
.brprod[aria-pressed="false"] b { opacity: 0.55; }
.brpick > .brchips:last-child { margin-top: 8px; max-height: none; }
.brfix:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.brfixbody { padding-top: 10px; }
.brfixbody .brchips { margin-top: 0; }
/* 필터 줄이 넘칠 때(.ovf, app.js fbarOvf)만: 오른쪽에 붙은 '지우기'의 왼쪽을 바탕색으로 덮어 옆 칩이 흰 칩 테두리에 걸쳐 잘려 보이지 않게. 가림막은 칩 높이 안에만 둔다: 위아래로 5px 나가게 했더니 그만큼 칩 줄이 세로로 굴러가 손가락을 따라 떠다녔다 (2026-10-18, 사용자: "필터를 선택하면 이렇게 둥둥 떠다녀"). 칩 줄(.fbar)도 overflow-y: hidden으로 세로로는 굴러가지 않게 묶었다 */
.fbar.ovf .chip.clear { box-shadow: -14px 0 0 4px var(--bg), 0 0 0 10px var(--bg); }   /* 둘째 그림자: '지우기'의 둥근 오른쪽 끝 바깥 모서리로 밑의 칩('상태')이 비쳐 보이던 것을 덮는다 (그림자는 칩 바깥에만 그려진다) */
.fbar.ovf .chip.clear::before { content: ""; position: absolute; top: 0; bottom: 0; right: calc(100% + 6px); width: 22px; background: linear-gradient(to right, transparent, var(--bg) 55%); pointer-events: none; }

/* 열린 채로 쓰던 화면에 새 파일이 올라온 경우: 오류·주의의 호박색과 구분해 본문색으로 조용히 알린다. 작업 중에는 app.js가 다음 확인까지 표시를 미룬다. */
#newver { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; background: var(--ground); color: var(--fg); border: 1px solid var(--edge); }
#newver .nvtext { flex: 1 1 220px; min-width: 0; }
#newver button { position: relative; flex: none; margin: 0; padding: 2px 0; border: 0; background: none; color: var(--fg); font: inherit; line-height: 20px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#newver .nvactions { display: flex; flex: none; align-items: center; gap: 16px; margin-left: auto; }   /* 좁으면 단추 둘이 함께 다음 줄로 내려가게 해 ×만 왼쪽에 떨어지지 않게 한다. */
#newver .nvclose { width: 24px; height: 24px; font-size: 18px; }
#newver button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 3px; }
@media (pointer: coarse) {
  #newver button::after { content: ""; position: absolute; inset: -10px -4px; }
  #newver .nvclose::after { inset: -10px; }   /* ×는 24px 사방에서 44px로. 옆 단추와의 16px 틈 안에서 넓혀 두 영역이 겹치지 않게 한다. */
}

/* PC 도구 줄의 표 생성 · 간략보고 알약 (2026-10-19, 사용자 갈무리: "pc 전체화면에서 보면 이렇게 버튼이 하나 가려져"): 카드 보기의 도구 줄은 왼쪽 칸 폭(560px)인데
   보기 전환 · 묶기 · 정렬 · 모두 접기 · 두 알약이 611px(한도를 넘어 '· 150건까지'가 붙으면 677px)이라 간략보고가 오른쪽 칸 밑으로 밀려 가려졌다.
   두 알약을 한 덩어리(.tacts, app.js가 PC에서만 만든다)로 묶어 오른쪽 끝에 두고, 줄이 모자라면 덩어리째 다음 줄 오른쪽 끝으로 내린다. 폰의 도구 줄에는 .tacts가 없어 그대로 한 줄이다 */
.tools:has(> .tacts) { flex-wrap: wrap; row-gap: 8px; }
.tools .tacts { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.tools .tacts .tbtn { margin-left: 0; }

/* PC에서도 떠 있는 표 생성 · 간략보고 알약 (2026-10-19, 사용자: "pc 화면에서도 모바일과 같이 둥둥 떠다녔으면 좋겠어."). 바로 위 '.tacts' 묶음은 이것으로 쓰이지 않게 되었다(옛 app.js와 만날 때만).
   가운데는 --fabc(app.js fabPlace: PC는 목록 칸의 가운데, 폰은 없어서 화면 가운데). 간략보고 알약은 그 왼쪽 틈에 선다 */
.tfab { left: var(--fabc, 50%); }
.bfab { right: calc(100% - var(--fabc, 50%) + var(--tfabw, 0px) / 2 + 8px); }
/* 알약 접고 펴기 (2026-10-19): 양끝·가운데·글자를 미리 그린 뒤 transform·opacity만 움직인다.
   둥근 끝과 글자는 가로로 늘리지 않고, 그림자는 세 면을 합친 뒤 한 번만 붙인다. 움직임이 끝나면 원래 단추로 돌아간다. */
.tfab, .bfab { contain: layout style; }
.tfab { --fab-fill: var(--cta); --fab-stroke: transparent; --fab-shadow: rgba(10, 20, 40, 0.28); }
.tfab.wait { --fab-fill: var(--surface); --fab-stroke: var(--edge); --fab-shadow: rgba(33, 12, 2, 0.14); }
.bfab { --fab-fill: var(--act); --fab-stroke: transparent; --fab-shadow: rgba(33, 12, 2, 0.22); }
.bfab { overflow: hidden; }
.bfab .lb { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .tfab { transition: opacity 0.18s, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }   /* 복제 면을 걷을 때 원래 바탕·그림자가 투명에서 다시 서서히 나타나지 않게 */
  .bfab { transition: opacity 0.18s; }
}
.tfab.fab-morph, .bfab.fab-morph { overflow: visible; background: none; box-shadow: none; pointer-events: none; transition: opacity 0.18s, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fab-morph > svg, .fab-morph > .lb { visibility: hidden; }
.fab-surface, .fab-copy { position: absolute; inset: 0; pointer-events: none; }
.fab-surface { z-index: 0; filter: drop-shadow(0 8px 12px var(--fab-shadow)); }
.fab-cap, .fab-middle { position: absolute; top: 0; left: 0; height: 50px; box-sizing: border-box; background: var(--fab-fill); pointer-events: auto; will-change: transform; }
.fab-cap { border-radius: 999px; box-shadow: inset 0 0 0 1px var(--fab-stroke); }
.fab-middle { width: 1px; border-block: 1px solid var(--fab-stroke); transform-origin: 0 50%; }
.fab-copy { z-index: 1; will-change: transform; }
.fab-copy > svg { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.fab-label { position: absolute; top: 0; height: 50px; display: flex; align-items: center; overflow: hidden; will-change: transform; }
.fab-label > .lb { flex: none; will-change: transform, opacity; }
/* 검색창에 초점이 있으면 숨기는 것은 폰만: 화면 자판이 올라와 알약이 자판 위에 떠 버리기 때문이다. PC는 검색창에 늘 초점이 있어(처음 열 때도) 숨기면 알약이 거의 보이지 않는다 */
@media (max-width: 1039px) {
  body:has(#q:focus) .tfab, body:has(#q:focus) .bfab { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 14px); }
  @media (prefers-reduced-motion: no-preference) { body:has(#q:focus) .tfab { transition: opacity 0.18s, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.22s; } }
}
/* 단가표 맨 윗줄의 '단가표 생성' 단추는 PC에서도 숨기고 떠 있는 알약이 맡는다 (body.fabs: 새 app.js가 붙인다) */
body.fabs .pdate .pimg.pfab { display: none; }
body.fabs .pdate.ft .pimg.pfab + .pfbr, body.fabs .pdate.ft.pd .pimg.pfab + .pfbr { display: none; }
/* 표 생성 판: PC는 화면 가운데의 판 (폰은 그대로 아래에서 올라오는 시트) */
@media (min-width: 1040px) {
  .tsheet { align-items: center; justify-content: center; padding: 24px; }
  .tsin { width: min(560px, 100%); max-height: min(84vh, 720px); border-radius: 22px; box-shadow: 0 18px 50px rgba(33, 12, 2, 0.28); }
  .tsin .grab { visibility: hidden; height: 0; margin: 6px auto 0; }
}
/* 관리자 사용량 '기능별 자세히' (2026-10-19): 묶음 제목 줄과, 복사 · 공유 칸 아래의 공유 몫 */
.utab tr.ugrp th { padding: 16px 0 6px; text-align: left; font-size: 12.5px; font-weight: 700; color: var(--fg); }
.usub td small { display: block; margin-top: 1px; font-size: 11px; color: var(--muted); }
/* 관리자 '오늘 사용량'의 새로 고침 단추 (2026-10-19): 기기별 내역 링크 옆, 같은 크기의 글 단추 */
.usage-acts { display: inline-flex; flex: none; align-items: center; gap: 12px; }
/* 좁은 폰에서 '불러오지 못했습니다'처럼 글이 길어지면 제목을 두 줄로 꺾지 않고 단추 묶음을 다음 줄로 */
.usage-summary .usage-head { flex-wrap: wrap; }
.usage-summary .usage-head h3 { white-space: nowrap; }
.box button.usage-refresh { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.box button.usage-refresh[hidden] { display: none; }
.usage-refresh svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.usage-refresh[aria-busy="true"] svg { animation: usage-spin .8s linear infinite; }
.box button.usage-refresh:disabled { cursor: default; opacity: .7; }
.usage-refresh:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@keyframes usage-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .usage-refresh[aria-busy="true"] svg { animation: none; } }
/* 관리자 지금 상태 카드 (2026-10-20, 시안 '관리자머리' A2 + D1): 크림 카드(직원 화면 요약 카드와 같은 --sum) 하나에 상태 줄 · 숫자 셋 · 짙은 자료 점검 띠.
   '재고 화면'은 알약으로 (시안과 같게) */
.settings .admin-head { align-items: flex-end; }
.admin-back { min-height: 36px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.admin-top { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 12px; border-radius: 20px; background: var(--sum); }
.admin-top-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 11.5px; color: var(--muted); }
.admin-top .state { font-size: 11.5px; font-weight: 600; color: var(--fg); }
.admin-top .state i { width: 7px; height: 7px; }
.admin-top .state.bad { color: var(--warn-t); }
.admin-nums { display: grid; grid-template-columns: 1.15fr 1fr 1.15fr; }
.admin-nums a { min-width: 0; padding: 0 12px; color: var(--fg); text-decoration: none; }
.admin-nums a:first-child { padding-left: 0; }
.admin-nums a + a { border-left: 1px solid rgba(33, 12, 2, 0.1); }
.admin-nums small { display: block; font-size: 11px; color: var(--muted); }
.admin-nums b { display: block; margin-top: 3px; font-size: 25px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-nums b span { margin: 0 2px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.admin-nums a:focus-visible, .admin-alert:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.admin-alert { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--act); color: var(--on-press); font-size: 12px; text-decoration: none; }
.admin-alert b { margin-right: 4px; font-weight: 700; color: #f3c879; }
.admin-alert span:last-child { display: inline-flex; flex: none; align-items: center; gap: 2px; font-weight: 700; color: #f3c879; }
.admin-alert svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-top .msg { margin: 0; }
@media (max-width: 359px) {
  .admin-nums a { padding: 0 8px; }
  .admin-nums b { font-size: 21px; }
}
/* 관리자 자료 점검의 'AI 점검' (2026-10-20): 규칙 점검 목록(.dchk) 아래, 찾은 것마다 '오류 의심' · '확인 필요' 꼬리표와 근거 한 줄 */
.aichk { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line2); }
.aichk h3 { margin: 0 0 6px; }
.aichk .aibox { margin: 10px 0; }
.aichk-meta { margin: 12px 0 4px; font-size: 12.5px; color: var(--muted); }
.aichk-meta b { color: var(--fg); }
.aichk-sum { margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--sum); font-size: 13px; line-height: 1.6; }
.aichk-lv { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--ctl); color: var(--ctl-fg); font-size: 11px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.aichk-lv.bad { background: var(--act); color: var(--on-press); }
.aichk-list small { grid-column: 1 / -1; display: block; margin-top: 3px; font-size: 12px; line-height: 1.55; color: var(--muted); }
/* AI 점검의 '보내는 칸' · '보내지 않는 칸' (2026-10-20): 두 칸을 나란히(좁으면 위아래로). 보내는 칸은 크림 바탕에 짙은 글, 보내지 않는 칸은 흰 바탕에 흐린 줄 그은 글 */
.aicols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 10px 0; }
.aicols > div { padding: 12px 14px; border-radius: 12px; }
.aicols h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; }
.aicols p { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 8px; }
.aicols p small { flex-basis: 100%; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.aicols span { padding: 3px 8px; border-radius: 999px; font-size: 12px; line-height: 1.4; }
.aicols-send { background: var(--sum); }
.aicols-send h4::before { content: "✓ "; color: var(--stock); }
.aicols-send span { background: var(--surface); color: var(--fg); }
.aicols-keep { border: 1px solid var(--line2); background: var(--surface); }
.aicols-keep h4::before { content: "✕ "; color: var(--warn-t); }
.aicols-keep span { background: var(--ground); color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(33, 12, 2, 0.35); }
.aicols p.aicols-note { display: block; margin: 4px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
/* AI 점검 암호 칸과 단추를 한 줄에 (좁으면 위아래로). 꺼진 단추는 흐리게 */
.aichk-run { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-top: 4px; }
.aichk-run input { flex: 1 1 180px; min-width: 0; }
.aichk .aibox button.dark:disabled { opacity: 0.45; cursor: not-allowed; }

/* ==== PC 두 판 (2026-10-20, 사용자: "추천대로 우선 진행해보자.") ====
   시안/PC판-시안/높이맞춤.html의 B안(위 두 카드의 높이를 맞춘 네 칸 카드) + 정보더.html의 가안(묶음 카드: 사실 띠 · 두 줄 표 · 건 상세), 말씨는 C-clean.html
   (사용자: "뭔가 산만한데 고급스럽지 못하고 깔끔해야하는데": 색 점 · 알약 꼬리표 · 테두리 칩을 걷고 가는 선과 글자 위계로, 눈에 띄는 단추는 에스프레소 면 하나).
   넓은 화면의 카드 보기(body.duo, app.js의 DUO)만이다: 폰과 PC 표 보기(body.gridview)는 그대로다. --duo: 1은 app.js에게 이 css가 있다는 신호다
   (옛 app.css와 만나면 신호가 없어 app.js가 예전 카드 보기를 그린다).
   짜임: 맨 위에 고정된 머리 줄(로고 · 제목 · 냉동 | 냉장 | 동결 · 재고 | 스케쥴 | 단가표 · 환율 · 연결 · 설정 · 나가기), 그 아래 화면 높이에 맞춘 두 기둥.
   왼쪽은 검색 카드와 목록 카드(목록만 스크롤), 오른쪽은 요약 카드와 묶음 카드(카드만 스크롤). 위 두 카드의 높이는 app.js(duoSync)가 --duoTop으로 맞춘다.
   스케쥴 · 단가표 탭은 같은 틀에 예전 목록 · 상세를 그대로 담는다 (아직 시안이 없다) */
@media (min-width: 1040px) {
  :root { --duo: 1; }
  /* :has()가 없는 옛 브라우저(파이어폭스 121 전 등)에서도 판이 화면 높이에 맞게 아래 세 줄을 먼저 그냥 body.duo로 둔다. :has()를 아는 브라우저에서는 앞쪽의 body:not(.gridview):has(…) 규칙(위 여백 122px 등)이 더 세므로 바로 밑의 :has() 판이 이긴다 (독립 검토 2026-10-20) */
  body.duo { --hair: #e4dccf; --hair2: #cfc5b3; --dred: #a01210; }
  body.duo { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; padding: 0; }
  body.duo::before { opacity: 0.35; -webkit-mask-image: none; mask-image: none; }   /* 위의 참나무 가지는 옅게 남기고 */
  body.duo::after, body.duo > .wrap::before, body.duo .brandfoot, body.duo .totopwrap, body.duo #costnote, body.duo #strip { display: none !important; }   /* 아래 목장 그림 · 가지 사이 로고(머리 줄로 옮긴다) · 바닥 로고는 뺀다: 화면 높이에 맞춘 판이라 바닥이 없다 */
  body.duo:has(> .wrap > .cols) { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; padding: 0; }
  body.duo:has(> .wrap > .cols)::before { opacity: 0.35; -webkit-mask-image: none; mask-image: none; }   /* 위의 참나무 가지는 옅게 남기고 */
  body.duo:has(> .wrap > .cols)::after, body.duo:has(> .wrap > .cols) > .wrap::before, body.duo .brandfoot, body.duo .totopwrap, body.duo #costnote, body.duo #strip { display: none !important; }   /* 아래 목장 그림 · 가지 사이 로고(머리 줄로 옮긴다) · 바닥 로고는 뺀다: 화면 높이에 맞춘 판이라 바닥이 없다 */
  body.duo > .wrap { box-sizing: border-box; height: 100%; min-height: 0; padding: 66px 20px 16px; }
  body.duo .cols { display: flex; align-items: stretch; gap: 16px; height: 100%; }

  /* 머리 줄: 화면 맨 위에 고정. 머리 카드(.head)를 그대로 쓰되 상자를 걷고 한 줄로 */
  body.duo .cols .head { position: fixed; z-index: 40; top: 0; box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0; padding: 0 20px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  body.duo .cols .head::before { content: ""; flex: none; background: url("img/logo-crest.webp?v=1") center / contain no-repeat; }
  body.duo .cols .head h1.ptitle { position: static; flex: none; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
  body.duo .cols .head .hacts { display: contents; }
  body.duo .cols .head .hacts > .kseg { order: 1; flex: none; margin: 0; gap: 6px; }
  body.duo .cols .head .hacts .kseg button { height: 32px; line-height: 32px; padding: 0 14px; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--hair2); }
  body.duo .cols .head .hacts .kseg button[aria-pressed="true"] { box-shadow: none; }
  body.duo .cols .head > #modes { order: 2; flex: none; margin: 0 0 0 16px; padding: 0; background: none; box-shadow: none; }
  body.duo .cols .head > #modes .seg { display: flex; width: auto; }
  body.duo .cols .head > #modes .seg button { flex: none; border-bottom: 2px solid transparent; }
  body.duo .cols .head > #modes .seg button[aria-pressed="true"] { border-bottom-color: var(--fg); }
  body.duo .cols .head > #rate { order: 3; flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; margin: 0 4px 0 auto; padding: 0; border: 0; background: none; box-shadow: none; font-size: 11.5px; white-space: nowrap; }
  body.duo .cols .head > #rate > span:first-child { overflow: hidden; text-overflow: ellipsis; }
  body.duo .cols .head .hbtn { order: 4; box-shadow: none; }

  /* 왼쪽 기둥: 검색 카드 + 목록 카드. 목록 카드의 흰 면은 .main::before가 깔고(검색 카드 아래 14px부터 끝까지), 그 위에 보기 줄 · 안내 · 목록이 선다 */
  body.duo .cols > .main { position: relative; z-index: 2; flex: 0 0 380px; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
  body.duo .cols > .main::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: calc(var(--duoTop, 124px) + 14px); border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); pointer-events: none; }
  body.duo .top { position: relative; top: auto; z-index: 3; flex: none; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; min-height: var(--duoTop, 0px); margin: 0 0 14px; padding: 15px; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); box-shadow: none; }
  body.duo .top .srow { gap: 8px; }
  body.duo .top #q { padding-block: 0; }
  body.duo .top .search.go #q:not(:placeholder-shown) { border-color: var(--fg); }
  body.duo .top .selbtn { min-height: 40px; }
  body.duo .top .selbtn:not([aria-pressed="true"]) { border: 1px solid var(--hair2); background: var(--surface); }
  body.duo .top .fbar { flex-wrap: wrap; max-height: none; overflow: visible; padding: 0 0 0 16px; }
  body.duo .top .fbar .chip { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; line-height: 15px; font-weight: 600; color: var(--muted); }
  body.duo .top .fbar .chip svg { width: 11px; height: 11px; opacity: 0.55; }
  body.duo .top .fbar .drop.on, body.duo .top .fbar .drop[aria-expanded="true"] { border: 0; background: none; color: var(--fg); }
  body.duo .top .fbar .chip.clear { position: static; text-underline-offset: 3px; }
  body.duo .top > .fpanel { position: absolute; z-index: 30; left: -1px; top: calc(100% + 8px); box-sizing: border-box; width: min(640px, calc(100vw - 40px)); margin: 0; padding: 14px 16px; border: 1px solid var(--hair2); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 40px -18px rgba(33, 12, 2, 0.35); }   /* 고르기 판은 검색 카드를 늘이지 않고 그 아래에 떠 있다: 위 두 카드의 높이를 지킨다 */
  body.duo #tools { flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 10px; margin: 0; padding: 11px 16px; border-bottom: 1px solid var(--hair); background: none; }
  body.duo.plan #tools, body.duo.price #tools { border-bottom: 0; padding-inline: 0; }
  body.duo #tools .dcount { flex: none; margin-right: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
  body.duo #tools .dcount b { margin-right: 2px; font-size: 13px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
  body.duo #tools .dcount i { margin: 0 5px; font-style: normal; }
  body.duo #tools > .chip { display: inline-flex; align-items: center; gap: 3px; min-width: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; font-size: 12px; font-weight: 600; color: var(--muted); }
  body.duo #tools > .chip[data-panel="group"] { flex: 0 1 auto; }
  body.duo #tools > .chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 묶는 기준이 길면 이름만 줄인다 (한 줄 지키기) */
  body.duo #tools > .chip[aria-expanded="true"] { color: var(--fg); }
  body.duo #tools > .chip svg { width: 11px; height: 11px; }
  body.duo #gpanel { flex: none; margin: 0; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: none; }
  body.duo .cols > .main > :is(#qhint, #stale, #colwarn, #stagewarn, #newver, #hint) { flex: none; margin: 10px 12px 12px; }   /* 아래 12px (2026-10-21, 사용자: '알아들은 뜻' 상자와 첫 묶음 줄 "너무 딱 붙어 있는것 같아.") */
  body.duo #list { flex: 1 1 auto; min-height: 0; display: block; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0 0 84px; scrollbar-width: thin; }   /* 아래 84px: 떠 있는 간략보고 · 표 생성 알약에 마지막 줄이 가리지 않게 */
  body.duo.plan #list, body.duo.price #list { display: flex; padding-top: 4px; }
  body.duo #list > * { flex-shrink: 0; }   /* 목록이 스크롤 상자라서, 카드가 상자 높이에 맞춰 눌리지 않게 */
  body.duo #list:empty { display: none; }
  body.duo #empty:not([hidden]) { flex: 1 1 auto; margin: 0; padding: 48px 20px; }

  /* 목록의 묶음 한 줄 (app.js duoRow): 품명 · 브랜드 | 창고 재고 박스 / 둘째 줄 | kg / 남은 비율 막대 */
  body.duo #list > .group.duo { margin: 0; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: none; box-shadow: none; overflow: visible; contain-intrinsic-size: auto 66px; }
  body.duo #list > .group.duo.dsel { background: #f7f2e9; }
  body.duo .dline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; row-gap: 2px; padding: 12px 16px 9px; }
  body.duo .dline .dn { display: flex; align-items: baseline; gap: 7px; min-width: 0; overflow: hidden; white-space: nowrap; }
  body.duo .dline .dn b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
  body.duo .dline .dn em, body.duo .dline .dn small { flex: none; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
  body.duo .dline .dn small { font-weight: 500; }
  body.duo .dline .dq { text-align: right; white-space: nowrap; font-size: 15px; font-weight: 750; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  body.duo .dline .dq small { margin-left: 3px; font-size: 11px; font-weight: 600; color: var(--muted); }
  body.duo .dline .ds { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
  body.duo .dline .ds .soon { color: var(--dred); font-weight: 700; }
  body.duo .dline .dk { text-align: right; white-space: nowrap; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  body.duo #list > .group.duo > .gthin { height: 2px; margin: 0 16px 10px; background: #eee8dd; }
  body.duo #list > .group.duo > .gthin i { background: var(--fg); opacity: 0.8; }
  body.duo #list > .group.duo > .gthin.low i { background: var(--warn); opacity: 1; }
  body.duo .dline:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  /* 오른쪽 기둥: 요약 카드(#dock) + 묶음 카드(#pbody만 스크롤) */
  body.duo .pane { position: relative; top: auto; flex: 1 1 0; min-width: 0; height: 100%; max-height: none; overflow: hidden; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  body.duo #dock { flex: none; }
  body.duo #pbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

  /* 요약 카드: 숫자 넷(창고 재고 · 통관 전 · 입고 예정 · 어제 이후)을 같은 크기로 늘어놓고 오른쪽에 주의 셋. 칸마다 이름 / 숫자 / 설명 세 줄을 카드 높이에 편다 */
  body.duo .sumcard { box-sizing: border-box; margin: 0; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); box-shadow: none; }
  body.duo:not(.plan) .sumcard { display: flex; align-items: stretch; min-height: var(--duoTop, 0px); }
  body.duo:not(.plan) .sumcard .summary { order: 1; flex-wrap: wrap; align-items: stretch; gap: 0 32px; margin: 0; padding: 0; }
  body.duo:not(.plan) .sumcard .summary > .sg { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; align-self: stretch; padding: 0; border: 0; }
  body.duo:not(.plan) .sumcard .summary > .sg::before, body.duo:not(.plan) .sumcard .summary > .sg::after { content: none; }
  body.duo:not(.plan) .sumcard .summary > .stock { order: 1; } body.duo:not(.plan) .sumcard .summary > .hold { order: 2; } body.duo:not(.plan) .sumcard .summary > .received { order: 3; } body.duo:not(.plan) .sumcard .summary > .inc { order: 4; }
  body.duo:not(.plan) .sumcard .summary dt { line-height: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
  body.duo:not(.plan) .sumcard .summary dd, body.duo:not(.plan) .sumcard .summary > .stock dd, body.duo:not(.plan) .sumcard .summary > :is(.hold, .inc, .received) dd { margin: 0; font-size: 26px; line-height: 30px; font-weight: 750; letter-spacing: -0.03em; color: var(--fg); }
  body.duo:not(.plan) .sumcard .summary dd small, body.duo:not(.plan) .sumcard .summary > .stock dd small { margin-left: 3px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
  body.duo:not(.plan) .sumcard .summary > .sg > span { display: block; margin: 0; font-size: 12px; line-height: 15px; color: var(--muted); white-space: nowrap; }
  body.duo:not(.plan) .sumcard .summary > .stock .pair { display: flex; column-gap: 10px; }
  body.duo:not(.plan) .sumcard .summary .pair b { font-weight: 500; }
  body.duo:not(.plan) .sumcard .summary :is(.pin, .tot) { order: 9; flex: 1 0 100%; }
  body.duo:not(.plan) .sumcard .changes { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; max-width: 260px; margin: 0 0 0 32px; padding: 0; border: 0; }
  body.duo:not(.plan) .sumcard .changes { font-size: 12px; line-height: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
  body.duo:not(.plan) .sumcard .changes .since b { font-weight: 750; letter-spacing: -0.03em; color: var(--fg); }
  body.duo:not(.plan) .sumcard .changes.line { flex-direction: column; align-items: flex-start; padding: 0; }
  body.duo:not(.plan) .sumcard .changes .none { font-size: 12px; line-height: 15px; }
  body.duo:not(.plan) .sumcard .changes .row { --c: 1; display: flex; flex-wrap: wrap; gap: 2px 10px; overflow: visible; background: none; }
  body.duo:not(.plan) .sumcard :is(.achip, .alert.chg) { flex: none; display: inline-flex; flex-direction: row; align-items: baseline; gap: 4px; padding: 0; border-radius: 4px; background: none; cursor: pointer; }
  body.duo:not(.plan) .sumcard .changes .row > :is(.achip, .alert.chg) > i { font-size: 12px; line-height: 15px; color: var(--muted); }
  body.duo:not(.plan) .sumcard .changes .row > :is(.achip, .alert.chg) b { font-size: 12px; line-height: 15px; font-weight: 700; letter-spacing: 0; }
  body.duo:not(.plan) .sumcard .alerts { display: flex; flex-direction: column; gap: 4px; min-width: 180px; margin: 0 0 0 auto; border: 0; border-left: 1px solid var(--hair); }
  body.duo:not(.plan) .sumcard .atitle { padding: 0; line-height: 15px; color: var(--muted); }
  body.duo:not(.plan) .sumcard .atitle b { font-weight: 600; }
  body.duo:not(.plan) .sumcard .alerts .achips { display: flex; padding: 0; border-radius: 0; overflow: visible; background: none; }
  body.duo:not(.plan) .sumcard .achips > :is(.achip, .alert.chg) { justify-content: space-between; gap: 18px; margin: 0 -6px; padding: 1px 6px; }
  body.duo:not(.plan) .sumcard .achips > :is(.achip, .alert.chg) > span { font-size: 12.5px; line-height: 17px; color: var(--ctl-fg); }
  body.duo:not(.plan) .sumcard .achips > :is(.achip, .alert.chg) b { font-size: 12.5px; line-height: 17px; font-weight: 750; letter-spacing: 0; }
  body.duo:not(.plan) .sumcard :is(.achip, .alert.chg)[aria-pressed="true"] { background: var(--press); }
  body.duo:not(.plan) .sumcard :is(.achip, .alert.chg)[aria-pressed="true"] :is(span, i, b) { color: var(--on-press); }
  body.duo:not(.plan) .sumcard .alert.chg[aria-pressed="true"] { padding-inline: 4px; }

  /* 묶음 카드 (app.js duoHead · duoFacts · duoTable · duoLot) */
  body.duo .dcard { border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); }
  body.duo .dhead { display: flex; align-items: center; gap: 16px; padding: 18px 22px 0; }
  body.duo .dttl { display: flex; min-width: 0; }
  body.duo .dttl h2 { margin: 0; white-space: nowrap; }
  body.duo .dmeta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
  body.duo .dacts { flex: none; display: flex; align-items: center; gap: 16px; margin-left: auto; }
  body.duo .dacts .act { gap: 5px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 13px; font-weight: 650; color: var(--fg); }
  body.duo .dacts .act.pri { height: 32px; padding: 0 14px; border-radius: 8px; background: var(--press); color: var(--on-press); }
  body.duo .dacts .act.gsel[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }
  /* 사실 띠 (2026-10-21, 시안 '파'): 요약이 본문(흰 표)과 같은 결이라 묻혔다 → 카드 폭 가득한 옅은 면(요약 카드색 --sum을 흰 면 --surface에 25% 섞은 색)에
     큰 숫자 셋(창고 재고 · 통관 전 · 입고 예정, 세로줄 없이 같은 너비) + 가는 선 밑 작은 글 한 줄. 짙은 띠는 "너무 강력", 사선은 "아닌것 같다"고 했다 */
  body.duo .dfacts { margin: 16px 0 0; padding: 18px 22px 16px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: #faf7f1; }
  body.duo .ftop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  body.duo .df { min-width: 0; }
  body.duo .df .lb { display: block; font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  body.duo .df .v { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
  body.duo .df .v small { margin-left: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
  body.duo .df .s { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 16px; color: var(--muted); }
  body.duo .df .s b { font-weight: 650; color: var(--fg); }
  body.duo .df.none :is(.lb, .v) { opacity: 0.45; }   /* 통관 전 · 입고 예정이 없으면 '없음'을 흐리게 */
  @media (max-width: 1179px) { body.duo .ftop { column-gap: 16px; } body.duo .df .s { font-size: 12px; letter-spacing: -0.01em; } }   /* 1040px에서 '22,680 kg · 다음 26.10.1 선적예정'이 말줄임됐다 */
  /* 아랫줄: 사실 사이의 짧은 세로줄은 각 사실의 왼쪽에 긋고, 줄이 꺾여 맨 앞에 온 사실의 세로줄은 .fl의 음수 여백 + overflow로 가린다 (좁은 폭에서 둘째 줄이 세로줄로 시작하지 않게) */
  body.duo .fline { overflow: hidden; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--hair2); font-size: 13px; line-height: 20px; color: var(--muted); }
  body.duo .fline .fl { display: flex; flex-wrap: wrap; row-gap: 4px; margin-left: -29px; }
  body.duo .fline .kv { position: relative; display: inline-flex; align-items: baseline; gap: 6px; margin-left: 14px; padding-left: 15px; white-space: nowrap; }
  body.duo .fline .kv::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--hair2); }
  body.duo .fline .kv > b { font-weight: 650; color: var(--fg); font-variant-numeric: tabular-nums; }
  body.duo .fline .kv > b small { margin-left: 1px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
  body.duo .fline .kv .soon { color: var(--dred); font-weight: 700; }
  body.duo .dbody { border-top: 1px solid var(--hair); }   /* 표가 카드 폭을 다 쓴다: 건 상세는 오른쪽에서 밀려 나오는 서랍 (아래 .dlot) */
  body.duo .dtab { min-width: 0; overflow-x: auto; padding-bottom: 8px; }
  body.duo .dt { width: 100%; }
  body.duo .dt :is(td, th) { padding: 8px 6px 9px; text-align: left; vertical-align: top; white-space: nowrap; }
  body.duo .dt th { padding: 5px 6px 6px; vertical-align: bottom; border-bottom: 1px solid var(--hair2); font-weight: 600; }
  body.duo .dt :is(td, th):first-child { padding-left: 22px; }
  body.duo .dt :is(td, th):last-child { padding-right: 22px; }
  body.duo .dt .r { text-align: right; }
  body.duo .dt .l1 { display: block; line-height: 18px; }
  body.duo .dt .l2 { display: block; margin-top: 1px; font-size: 11.5px; line-height: 15px; color: var(--muted); }
  body.duo .dt th .l1 { font-size: 11px; line-height: 14px; color: var(--muted); }
  body.duo .dt th .l2 { font-size: 10.5px; line-height: 13px; font-weight: 500; color: #a39689; }
  body.duo .dt td { border-bottom: 1px solid var(--hair); }
  body.duo .dt td.num { font-variant-numeric: tabular-nums; }
  body.duo .dt .bl { font-family: var(--mono); font-size: 11.5px; letter-spacing: -0.02em; }   /* B/L은 앱의 다른 곳처럼 고정폭 (긴 번호 'HDMUSAOA03429000'도 한 줄에) */
  /* 칸 폭은 비율로 고정한다 (table-layout: fixed): 실제 자료의 긴 글이 표를 카드 밖으로 밀지 않게. 글 칸은 칸 안에서 꺾고, 숫자 · B/L은 한 줄(넘치면 …) */
  body.duo .dt { table-layout: fixed; }
  body.duo .dt col.c-a { width: 12.5%; } body.duo .dt col.c-ty { width: 15.5%; } body.duo .dt col.c-bl { width: 18%; } body.duo .dt col.c-box { width: 8%; }
  body.duo .dt col.c-kg { width: 11.5%; } body.duo .dt col.c-pr { width: 9.5%; } body.duo .dt col.c-dt { width: 11%; } body.duo .dt col.c-end { width: 14%; }
  body.duo .dt:not(.pc) col.c-a { width: 14%; } body.duo .dt:not(.pc) col.c-ty { width: 17%; } body.duo .dt:not(.pc) col.c-bl { width: 19%; } body.duo .dt:not(.pc) col.c-box { width: 9%; }
  body.duo .dt:not(.pc) col.c-kg { width: 13%; } body.duo .dt:not(.pc) col.c-dt { width: 12%; } body.duo .dt:not(.pc) col.c-end { width: 16%; }
  body.duo .dt td :is(.l1, .l2) { overflow: hidden; text-overflow: ellipsis; }
  body.duo .dt td:not(.r) :is(.l1, .l2) { white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
  body.duo .dt td.st :is(.l1, .l2) { overflow-wrap: anywhere; }   /* 진행 메모는 띄어쓰기 없이 길 때가 있어('10/6통관예정/10/6샘미트일부') 어디서든 꺾는다 */
  body.duo .dt td:is(.ty, .blc) .l2, body.duo .dt td.blc .l1 { white-space: nowrap; }   /* 구분 · 계약번호 · B/L은 한 줄 (넘치면 …, 마우스를 올리면 전체) */
  body.duo .dt td.cc b, body.duo .dt td.cc span { display: block; }
  body.duo .dt td.cc b { line-height: 18px; }
  body.duo .dt td.cc span { margin-top: 1px; font-size: 11.5px; line-height: 15px; color: var(--muted); }
  body.duo .dt .soon { color: var(--warn-t); font-weight: 600; }
  body.duo .dt .dbad { padding: 0 6px; line-height: 15px; }
  body.duo .dt tr.dsec td { padding: 16px 22px 6px; border-bottom: 0; font-size: 13px; }
  body.duo .dt tr.dsec b { font-weight: 700; }
  body.duo .dt .dfold { all: unset; float: right; cursor: pointer; }
  body.duo .dt .dfold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  body.duo .dt tr.drow { cursor: pointer; }
  body.duo .dt tr.drow.hasnote td { border-bottom: 0; padding-bottom: 3px; }
  body.duo .dt tr.dnote { cursor: pointer; }
  body.duo .dt tr.dnote td { padding: 0 6px 9px; white-space: normal; font-size: 11.5px; line-height: 15px; color: var(--muted); }
  body.duo .dt tr.dnote b { font-weight: 600; color: var(--fg); }
  body.duo .dt tr.dnote i { margin: 0 8px; font-style: normal; }
  body.duo .dt tr.on td { background: #f7f2e9; }
  body.duo .dt tr.done td { color: var(--muted); }
  body.duo .dt tr.drow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  body.duo.selecting .dt tr.drow td:first-child { box-shadow: inset 3px 0 0 transparent; }
  body.duo.selecting .dt tr.drow[aria-pressed="true"] td, body.duo.selecting .dt tr.drow[aria-pressed="true"] + tr.dnote td { background: color-mix(in srgb, var(--fg) 12%, var(--surface)); }
  body.duo.selecting .dt tr.drow[aria-pressed="true"] td:first-child .l1::before { content: "✓ "; font-weight: 800; color: var(--fg); }   /* 고른 건: 첫 글 칸 앞에 ✓ */
  @media (hover: hover) { body.duo .dt tr.drow:not(.on):hover td, body.duo .dt tr.drow:not(.on):hover + tr.dnote td { background: color-mix(in srgb, var(--fg) 3%, var(--surface)); } }

  /* 건 상세: 회색 타일 없이 큰 수 · 막대 · 한 줄 설명, 일정 점들은 가로 (사용자: "저 카드 부분이 마음에 안들어", "일정과 유니패스는 가로로") */
  /* 건 상세 서랍 (2026-10-20 사용자: "너무 묻히는것 같아. 오른쪽에서 스르륵 나오는걸로"): 표 보기의 서랍처럼 화면 오른쪽에 붙어 덮개 없이 뜬다. 밀려 나오고 들어가는 움직임은 app.js(renderDuo · closeDuoLot) */
  body.duo .dlot { position: fixed; z-index: 45; top: 0; bottom: 0; box-sizing: border-box; width: 420px; max-width: calc(100vw - 40px); min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; background: var(--surface); border-left: 1px solid var(--hair); box-shadow: -18px 0 48px rgba(33, 12, 2, 0.16); }
  body.duo .dlh { position: sticky; top: 0; z-index: 1; background: var(--surface); }
  body.duo .dnav .dclose { margin-left: 6px; }
  body.duo .dnav .dclose svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  body.duo .dlh { display: flex; align-items: baseline; gap: 10px; padding: 18px 22px 8px; }
  body.duo .dlh > b { flex: none; font-size: 18px; font-weight: 700; }
  body.duo .dlh > span:not(.dnav) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
  body.duo .dnav { flex: none; display: flex; gap: 2px; margin-left: auto; }
  body.duo .dnav button { all: unset; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--muted); }
  body.duo .dnav button:focus-visible { outline: 2px solid var(--accent); }
  @media (hover: hover) { body.duo .dnav button:hover { background: var(--ctl); color: var(--fg); } }
  body.duo .dkey { padding: 2px 22px 16px; border-bottom: 1px solid var(--hair); }
  body.duo .dkey .big { display: flex; align-items: baseline; gap: 6px; }
  body.duo .dkey .big b { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
  body.duo .dkey .big span { font-size: 12.5px; color: var(--muted); }
  body.duo .dbar { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 2px; background: #eee8dd; }
  body.duo .dbar i { display: block; height: 100%; background: var(--fg); }
  body.duo .dbar.low i { background: var(--warn); }
  body.duo .dkey .sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 7px; font-size: 12px; color: var(--muted); }
  body.duo .dkey .sub b { font-weight: 650; color: var(--fg); }
  body.duo .dkey .sub .soon { color: var(--warn-t); font-weight: 600; }
  body.duo .dlot > section { margin: 0; padding: 14px 22px; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: none; }
  body.duo .dlot > section > :is(h4, h2) { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
  body.duo .dlot .steps li.done::before, body.duo .dlot .steps li.done::after { background: var(--fg); border-color: var(--fg); }
  body.duo .dlot .rows div { grid-template-columns: 84px minmax(0, 1fr); padding: 6px 0; }
  body.duo .dlot .rows dd { font-size: 13px; }
  body.duo .dlot .rows .strong dd { font-size: 14.5px; }
  body.duo .dlacts { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px 16px; }

  @media (max-width: 1179px) {   /* 가장 좁은 PC 폭: 요약 카드의 주의를 숫자 줄 아래 한 줄로 (숫자 넷이 두 줄로 꺾이지 않게) */
    body.duo:not(.plan) .sumcard { flex-wrap: wrap; row-gap: 10px; }
    body.duo:not(.plan) .sumcard .summary { flex-wrap: nowrap; gap: 0 20px; }
    body.duo:not(.plan) .sumcard .changes { margin-left: 20px; }
    body.duo:not(.plan) .sumcard .alerts { flex: 1 0 100%; flex-direction: row; align-items: baseline; gap: 16px; min-width: 0; margin: 0; padding: 9px 0 0; border-left: 0; border-top: 1px solid var(--hair); }
    body.duo:not(.plan) .sumcard .alerts .achips { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
    body.duo:not(.plan) .sumcard .achips > :is(.achip, .alert.chg) { gap: 6px; }
  }
  @media (max-width: 1179px) { body.duo .dt .bl { font-size: 10.5px; } body.duo .dt col.c-a { width: 12%; } body.duo .dt col.c-ty { width: 14.5%; } body.duo .dt col.c-box { width: 9%; } body.duo .dt col.c-pr { width: 10.5%; } body.duo .dt col.c-end { width: 13.5%; } body.duo .dt :is(td, th) { padding-inline: 5px; }  body.duo .dt :is(td, th):last-child { padding-right: 18px; } body.duo .dt { font-size: 12.5px; } body.duo .dt td.ty .l2 { max-width: 96px; } }   
  @media (max-width: 1379px) {
    body.duo .sumcard .summary { gap: 0 24px; }
    body.duo .sumcard .changes { margin-left: 24px; }
  }
}

/* ==== PC 두 판: 통관 전 · 입고 예정 구역 상자 (2026-10-20, 시안/PC판-시안/점선구분.cjs의 나안) ====
   사용자: "통관전과 입고 예정이 깔끔하게 구분됐으면 좋겠어. 점선을 잘 이용해서 … 모바일 버전에서도 통관되지 않았거나 미개설 등등 그런 것들은 점선으로 표현 잘 해줬거든" → "구역상자가 깔끔해 보인다".
   뜻: 창고 재고 = 실선(그대로), 통관 전 = 둥근 점선 상자 + 옅은 크림 바탕, 입고 예정 = 둥근 점선 상자만, 미개설 = 상자 안의 점점이 선 아래. 선 색 · 굵기 · 바탕은 모바일의 판매 대기 건 카드(.lots > li:is(.hold, .incoming))와 같다.
   상자는 칸 테두리로 그린다(border-collapse: separate): 한 표라 열이 구역을 넘어 그대로 맞는다. 줄의 표시(bx · bxT · bxB · bhold · binc · dsub · dgap)는 app.js duoTable이 단다.
   표를 카드 안쪽으로 14px 들여 상자가 카드 가장자리에 붙지 않게 하고, 칸 안쪽 여백을 8px로 줄여 글자 시작은 예전과 같은 22px(14 + 테두리 1.5 + 6.5)이다. */
@media (min-width: 1040px) {
  body.duo { --dash: #968373; --dashbg: #fbf8f2; }
  body.duo .dtab { padding: 0 14px 10px; }
  body.duo .dt { border-collapse: separate; border-spacing: 0; }
  body.duo .dt :is(td, th):first-child, body.duo .dt tr.dsec td { padding-left: 8px; }
  body.duo .dt :is(td, th):last-child, body.duo .dt tr.dsec td { padding-right: 8px; }
  body.duo .dt tr.dgap td { padding: 0; border: 0; background: none; }
  body.duo .dt tr.bx.dsec td { padding-top: 14px; }
  body.duo .dt tr.bhold > :is(td, th) { background: var(--dashbg); }
  /* 상자의 네 변: 위는 첫 줄, 아래는 끝 줄, 옆은 줄마다 맨 앞 · 맨 끝 칸 */
  body.duo .dt tr.bxT > :is(td, th) { border-top: 1.5px dashed var(--dash); }
  body.duo .dt tr.bxB > :is(td, th) { border-bottom: 1.5px dashed var(--dash); }
  body.duo .dt tr.bx > :first-child { border-left: 1.5px dashed var(--dash); }
  body.duo .dt tr.bx > :last-child { border-right: 1.5px dashed var(--dash); }
  body.duo .dt tr.bxT > :first-child { border-top-left-radius: 12px; }
  body.duo .dt tr.bxT > :last-child { border-top-right-radius: 12px; }
  body.duo .dt tr.bxB > :first-child { border-bottom-left-radius: 12px; }
  body.duo .dt tr.bxB > :last-child { border-bottom-right-radius: 12px; }
  @media (max-width: 1179px) {
    body.duo .dtab { padding-inline: 10px; }
    body.duo .dt :is(td, th):first-child, body.duo .dt tr.dsec td { padding-left: 8px; }
    body.duo .dt :is(td, th):last-child, body.duo .dt tr.dsec td { padding-right: 8px; }
    /* 표를 들인 20px만큼 B/L 칸이 좁아져 긴 번호(HDMUSAOA03429000)가 11px 잘렸다: 여백이 줄어 넉넉해진 첫 글 칸 · 끝 칸에서 B/L · kg 칸으로 옮긴다 */
    body.duo .dt.pc col.c-a { width: 11%; } 
    body.duo .dt:not(.pc) col.c-a { width: 13%; } body.duo .dt:not(.pc) col.c-bl { width: 21%; } body.duo .dt:not(.pc) col.c-end { width: 15%; }
  }
}

/* ==== PC 두 판: 모바일 통일 (2026-10-20, 시안/PC판-시안/모바일통일.cjs의 나안) ====
   사용자: "모바일 버전의 벳지, 아이콘, 폰트 등등 적극 활용해서 최대한 모바일과 통일 시켜줘." → 시안 가(건 줄만) · 나(묶음 머리까지) 중 "나 로 가자!!"
   모바일의 건 줄 · 구역 제목 · 묶음 머리가 쓰는 요소를 그대로 쓴다: 등급 알약(.gr) · 캐틀/케팩 꼬리표(.tag) · B/L 끝 네 자리 강조(.lbl) · 갈색 판매가(.lp) · 구역 제목의 색 점과 접기 화살표 ·
   브랜드 색 알약 + 원산지(.brand · .origin) · 복사 | 공유 | 빠른표 캡슐(.actg) · 통관 전 / 입고 예정 아이콘. 글자 크기는 모바일 실제 값(창고 15px/600 · 보조 13px · 박스 17px/700 · 유통기한 15px/500).
   앞선 'C-clean(점 · 알약 걷기)'과 부딪히는 곳은 이 지시가 이긴다. 칸이 좁아지는 1400px · 1180px 아래에서는 글자를 한 단계씩 줄인다(15px로 두면 1280px에서 진행 · 일정 칸 글이 두세 줄로 꺾였다). */
@media (min-width: 1040px) {
  body.duo .dt { font-size: 14px; }
  body.duo .dt td .l1 { font-size: 15px; line-height: 21px; letter-spacing: -0.012em; }
  body.duo .dt td .l2 { font-size: 13px; line-height: 19px; }
  body.duo .dt td.wh .l1, body.duo .dt td.st .l1 { font-weight: 600; }
  body.duo .dt td.wh .l2 { margin-top: 4px; line-height: 15px; }
  body.duo .dt .tags { display: inline-flex; gap: 4px; }
  body.duo .dt td.ty .l1 { font-weight: 500; }
  body.duo .dt td.ty .gr { margin-right: 3px; }
  body.duo .dt td.blc .lbl { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: -0.03em; color: var(--muted); }
  body.duo .dt td.blc .lbl em { font-style: normal; font-weight: 500; color: var(--fg); }
  body.duo .dt td.r .l1 b { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
  body.duo .dt td.cc b { font-size: 15px; font-weight: 500; letter-spacing: -0.012em; }
  body.duo .dt td.cc .lp { font-size: 14px; font-weight: 500; color: #7a5232; }
  body.duo .dt td.cc b.lp { font-size: 15px; }
  body.duo .dt .dbad { font-size: 11.5px; }

  /* 구역 제목: 색 점(창고 재고 초록 + 고리 · 통관 전 호박색 고리 · 입고 예정 회색 점 · 소진 회색 고리) + 접기 · 보기 화살표 (모바일 .sect .sl) */
  body.duo .dt tr.dsec b.sl { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
  body.duo .dt tr.dsec b.sl::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 30%, transparent); }
  body.duo .dt tr.dsec.stock b.sl::before { background: var(--stock); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stock) 22%, transparent); }
  body.duo .dt tr.dsec.hold b.sl::before { background: none; box-shadow: inset 0 0 0 2px var(--hold); }
  body.duo .dt tr.dsec.unopened b.sl::before { background: none; box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--fg) 40%, transparent); box-sizing: border-box; }   /* 미개설: 점선 고리 (2026-10-21 따로 상자) */
  body.duo .dt tr.dsec.done b.sl::before { background: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg) 30%, transparent); }
  body.duo .dt tr.dsec span { margin-left: 10px; font-size: 12.5px; font-weight: 500; color: var(--fg); }
  body.duo .dt .dfold { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--fg); }
  body.duo .dt .dfold svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
  body.duo .dt .dfold[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* 묶음 머리: 가벼운 큰 제목 + 브랜드 색 알약 · 원산지, 복사 | 공유 | 빠른표 캡슐, 사실 띠의 통관 전 · 입고 예정 아이콘 */
  body.duo .dttl { align-items: center; gap: 12px; }
  body.duo .dttl h2 { font-size: 30px; font-weight: 500; letter-spacing: -0.055em; }
  body.duo .dpill { flex: none; display: inline-flex; }
  body.duo .dacts .actg { border: 1px solid var(--line2); border-radius: 999px; background: var(--surface); }
  body.duo .dacts .actg .act { gap: 6px; padding: 10px 16px 10px 14px; border: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 500; color: var(--fg); }
  body.duo .dacts .actg .act + .act { padding: 10px 15px 10px 14px; border-left: 1px solid var(--line2); }
  body.duo .dacts .actg .act:first-child { border-radius: 999px 0 0 999px; }
  body.duo .dacts .actg .act:last-child { border-radius: 0 999px 999px 0; }
  body.duo .dacts .actg .act svg { width: 16px; height: 16px; }
  body.duo .dfacts .df .lb svg { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  @media (max-width: 1399px) {
    body.duo .dt td .l1 { font-size: 14px; line-height: 20px; }
    body.duo .dt td .l2 { font-size: 12.5px; line-height: 18px; }
    body.duo .dt td.blc .lbl { font-size: 11.5px; }
    body.duo .dt td.r .l1 b { font-size: 16px; }
    body.duo .dt td.cc b, body.duo .dt td.cc b.lp { font-size: 14px; }
    body.duo .dt td.cc .lp { font-size: 13px; }
    body.duo .dttl h2 { font-size: 27px; }
  }
  @media (max-width: 1179px) {
    body.duo .dt td .l1 { font-size: 13px; line-height: 19px; }
    body.duo .dt td .l2 { font-size: 12px; line-height: 17px; }
    body.duo .dt td.blc .lbl { font-size: 10.5px; }
    body.duo .dt td.r .l1 b { font-size: 15px; }
    body.duo .dt td.cc b, body.duo .dt td.cc b.lp { font-size: 13px; }
    body.duo .dt td.cc .lp { font-size: 12px; }
    body.duo .dt tr.dsec b.sl { font-size: 14px; }
    body.duo .dacts .actg .act { padding: 9px 13px 9px 11px; font-size: 13px; }
    body.duo .dacts .actg .act + .act { padding: 9px 12px 9px 11px; }
    /* 글자를 키운 만큼 kg 칸(22,911.64)이 모자라 B/L · 입고 칸에서 옮긴다 */
    body.duo .dt.pc col.c-bl { width: 19%; } body.duo .dt.pc col.c-kg { width: 13.5%; } body.duo .dt.pc col.c-dt { width: 10%; } body.duo .dt.pc col.c-ty { width: 13.5%; } body.duo .dt.pc col.c-end { width: 13.5%; }
  }
  /* 마지막 칸(진행 · 일정 · 유통기한)의 글이 두 줄로 꺾일 때 '입고 전'의 '전' 한 글자가 홀로 떨어지지 않게 (지원하지 않는 브라우저는 그대로 꺾인다) */
  body.duo .dt td:last-child :is(.l1, .l2) { text-wrap: balance; }
}


/* ==== PC 두 판: 단가($/lb) 열 (2026-10-20, 사용자: "단가 넣어줘.") ====
   kg 다음 · 원가/판매가 앞(엑셀에서 $/lb가 kg 다음에 있는 순서). 원가를 볼 수 있는 화면에서만 생긴다(app.js duoTable의 up). 열이 하나 늘어난 만큼 칸 비율을 다시 나눈다. */
@media (min-width: 1180px) {
  body.duo .dt.up col.c-a { width: 11%; } body.duo .dt.up col.c-ty { width: 12.5%; } body.duo .dt.up col.c-bl { width: 17%; } body.duo .dt.up col.c-box { width: 8%; }
  body.duo .dt.up col.c-kg { width: 11%; } body.duo .dt.up col.c-up { width: 8.5%; } body.duo .dt.up col.c-pr { width: 9%; } body.duo .dt.up col.c-dt { width: 10.5%; } body.duo .dt.up col.c-end { width: 12.5%; }
  body.duo .dt td.up .l1 { font-weight: 500; }
}
@media (min-width: 1500px) {
  body.duo .dt.up col.c-a { width: 12%; } body.duo .dt.up col.c-ty { width: 14%; } body.duo .dt.up col.c-bl { width: 16%; } body.duo .dt.up col.c-box { width: 7.5%; }
  body.duo .dt.up col.c-kg { width: 11%; } body.duo .dt.up col.c-up { width: 7.5%; } body.duo .dt.up col.c-pr { width: 9%; } body.duo .dt.up col.c-dt { width: 10.5%; } body.duo .dt.up col.c-end { width: 12.5%; }
}
@media (min-width: 1040px) and (max-width: 1179px) {   /* 가장 좁은 PC 폭(카드 600px대)에서는 단가 열을 감춘다: 두면 B/L 번호와 kg가 잘린다. 상세 서랍의 금액 구역에는 그대로 있다 */
  body.duo .dt.up col.c-up, body.duo .dt td.up, body.duo .dt th.up { display: none; }
}

/* ==== PC 두 판: 화면 검토 반영 (2026-10-20) ====
   사용자: "뭔가 아쉬운데 뭘까? 뭐가 부족한걸까??? ui/디자인 한번 검토해줘." → 검토(빈 자리가 생기는 곳: 묶음 카드 바닥 · 넓은 화면의 표 열 사이 · 요약 카드 오른쪽 절반 / 어제 이후 단위 크기 · 묶기 칩 잘림 · 고른 묶음 표시 · 사실 띠 칸 간격 · 주의 칸 두 줄) → "오케이 전부 개선해줘". */
.changes .since b small { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; }   /* 폰은 예전처럼 '9건'이 한 크기 (단위를 작게 하는 것은 PC 두 판만) */
@media (min-width: 1040px) {
  /* 폭 제한: 넓은 화면(1680 · 1920px)에서 표 열 사이가 성기게 벌어지지 않게 판 전체를 1600px 안에 가운데로. 고정된 머리 막대와 건 상세 서랍도 같은 가장자리에 맞춘다 */
  body.duo > .wrap { max-width: 1600px; margin: 0 auto; }
  body.duo .cols .head { left: max(0px, calc((100vw - 1600px) / 2)); right: max(0px, calc((100vw - 1600px) / 2)); }
  body.duo .dlot { right: max(0px, calc((100vw - 1600px) / 2)); }
  /* 묶음 카드가 오른쪽 기둥 바닥까지 (건이 적은 묶음에서 카드가 중간에 끝나 왼쪽 목록 카드와 아랫선이 어긋났다) */
  body.duo .dcard { box-sizing: border-box; min-height: 100%; }
  /* 요약 카드: 숫자 넷(창고 재고 · 통관 전 · 입고 예정 · 어제 이후)을 카드 폭에 같은 너비로 편다 (왼쪽에 몰려 오른쪽 절반이 비었다) */
  body.duo:not(.plan) .sumcard .summary { display: contents; }
  body.duo:not(.plan) .sumcard .summary > .sg, body.duo:not(.plan) .sumcard .changes { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; }
  body.duo:not(.plan) .sumcard .changes { order: 5; }
  /* 숫자 줄 맞춤: 칸마다 이름 · 숫자 · 설명을 위에서부터 같은 간격으로 쌓는다. 칸 높이에 펴면(space-between) '어제 이후'의 설명이 두 줄일 때 그 칸의 숫자만 위로 떴다 (사용자 화면의 '49건') */
  body.duo:not(.plan) .sumcard .summary > .sg, body.duo:not(.plan) .sumcard .changes { justify-content: flex-start; }
  body.duo:not(.plan) .sumcard .changes .since b small { margin-left: 3px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--muted); }   /* '49건'의 건을 다른 칸의 박스 · 건처럼 작게 */
  body.duo .sumcard .achip.zero { opacity: 0.4; cursor: default; }   /* 0건인 주의: 흐리게 (누를 것이 없다) */
  /* 고른 묶음: 왼쪽 가장자리에 에스프레소 막대 (바탕색만으로는 크림 바탕과 구분이 약했다) */
  body.duo #list > .group.duo.dsel { background: #f3ede3; }
  /* 가장 좁은 PC 폭에서는 같은 너비로 펴면 '어제 이후'의 아랫줄(새로 들어옴 · 수량 바뀜)이 두 줄로 꺾여 카드가 높아진다: 칸 폭을 글 길이대로 */
  @media (max-width: 1179px) { body.duo:not(.plan) .sumcard .summary > .sg, body.duo:not(.plan) .sumcard .changes { flex: 1 1 auto; } }
  /* PC 단가표 탭의 오른쪽 (2026-10-21, app.js 'PC 단가표 탭의 오른쪽' 주석): 기본은 단가표 그림 미리보기, 줄을 누르면 그 상품. 재고 탭의 묶음 카드(.dcard · .dhead · .actg · .dfacts)와 같은 틀 */
  body.duo.price .pvcard { display: flex; flex-direction: column; }
  body.duo.price .pvcard .dhead { padding-bottom: 0; }
  body.duo.price .dacts .actg .act[disabled] { opacity: 0.4; cursor: default; }
  body.duo.price .dacts a.act { text-decoration: none; }
  body.duo.price .pvnote { margin: 8px 22px 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
  /* 미리보기: 사실 띠와 같은 옅은 면 위에 그림을 종이처럼, 카드 폭에 맞춰 줄여 보인다 (세로는 오른쪽 판이 스크롤) */
  body.duo.price .pvstage { flex: 1; margin: 16px 0 0; padding: 28px 22px 40px; border-top: 1px solid var(--hair); border-radius: 0 0 16px 16px; background: #faf7f1; text-align: center; }
  body.duo.price .pvstage img { width: min(100%, var(--w)); height: auto; border-radius: 4px; box-shadow: 0 1px 2px rgba(33, 12, 2, .06), 0 8px 28px rgba(33, 12, 2, .10); transition: opacity .15s; }
  body.duo.price .pvstage img.stale { opacity: 0.45; }   /* 검색어가 바뀌어 새 그림을 그리는 중 */
  body.duo.price .pvstage .pane-empty { border: 0; padding: 60px 20px; }
  body.duo.price .pvwait { padding: 60px 20px; font-size: 14px; color: var(--muted); }
  /* 왼쪽 줄: 누를 수 있고, 고른 줄은 재고 탭의 고른 묶음처럼 왼쪽 막대 */
  body.duo.price #list .lots > li:not(.pdcard) { cursor: pointer; }
  body.duo.price #list .lots > li.pvsel { background: #f3ede3; box-shadow: inset 3px 0 0 var(--fg); }
  /* 고른 줄 */
  body.duo.price .pvback { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: -2px; padding: 0; border: 1px solid var(--line2); border-radius: 50%; background: var(--surface); color: var(--fg); cursor: pointer; }
  body.duo.price .pvback svg { width: 17px; height: 17px; transform: rotate(90deg); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  body.duo.price .pvh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 15px; font-weight: 650; letter-spacing: -0.02em; }
  body.duo.price .pvh span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
  body.duo.price .pvprice { margin: 18px 22px 0; }
  body.duo.price .pvprice ul { display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 0; padding: 0; list-style: none; }
  body.duo.price .pvprice li { display: flex; align-items: baseline; gap: 10px; }
  body.duo.price .pvprice .pvc { font-size: 14px; font-weight: 600; color: var(--muted); }
  body.duo.price .pvprice li b { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.04em; color: #7a5232; font-variant-numeric: tabular-nums; }   /* 판매가는 모바일의 .lp 갈색 */
  body.duo.price .pvprice li.chg b { padding: 0 6px; border-radius: 6px; background: var(--mark); }   /* 최근 바뀐 값: 단가표 목록의 바뀐 값과 같은 베이지 */
  body.duo.price .pvprice li b small { margin-left: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
  body.duo.price .pvprice em { font-style: normal; font-size: 13px; color: var(--muted); }
  body.duo.price .pvold { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
  body.duo.price .pvold i, body.duo.price .pvold em { font-style: normal; }
  body.duo.price .pvgo { padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  body.duo.price .pvcard > .pvh { margin: 22px 22px 6px; }
  body.duo.price .pvother { margin: 0 22px 24px; padding: 0; list-style: none; }
  body.duo.price .pvother li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
  body.duo.price .pvob { display: flex; align-items: center; gap: 8px; min-width: 0; }
  body.duo.price .pvob small { font-size: 12.5px; color: var(--muted); }
  body.duo.price .pvop { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 6px; font-size: 13px; color: var(--muted); }
  body.duo.price .pvop i, body.duo.price .pvop em { font-style: normal; }
  body.duo.price .pvop b { font-size: 15px; font-weight: 600; color: #7a5232; font-variant-numeric: tabular-nums; }
  body.duo.price .pvop .pvsep { width: 1px; height: 11px; margin: 0 8px; background: var(--hair2); align-self: center; }
  /* 단가표 탭의 높이 맞춤 (2026-10-21, 사용자: 검색 카드와 미리보기 카드 갈무리 "높이 맞춰주고."): 오른쪽 위 요약 자리(#dock)는 단가표 탭에서 비어 높이 0인데 사이 간격 14px만 남아 카드가 14px 아래에서 시작했다 → 없앤다.
     미리보기의 머리(제목 · 안내)는 왼쪽 검색 카드와 같은 높이(--duoTop, duoSync)로 두어, 그림 면이 시작하는 선이 검색 카드의 아랫선과 맞는다 (재고 탭의 요약 카드 · 검색 카드처럼) */
  body.duo.price #dock { display: none; }
  body.duo.price .pvtop { padding-bottom: 14px; }   /* 머리는 글 높이만 (전체 점검: 검색 카드 높이에 맞춰 늘이니 제목 밑이 비었다). 카드 윗선은 검색 카드와 그대로 같다 */   /* 머리 글(제목 · 안내)이 검색 카드보다 길어지지 않게 아래 여백은 10px */
  body.duo.price .pvtop + .pvstage { margin-top: 0; }
  /* PC 스케쥴 탭의 건 상세 (2026-10-21, app.js 'PC 스케쥴 탭의 건 상세' 주석, 시안 '마'): 카드 폭 가득한 큰 가로 시간축이 주인공. 옅은 면은 사실 띠 · 단가표 미리보기와 같은 #faf7f1 */
  body.duo.plan #pbody .sxcard { box-sizing: border-box; min-height: 100%; padding-bottom: 24px; }
  body.duo.plan .sxcard .dhead { padding-bottom: 16px; }
  body.duo.plan .sxcard .dacts { gap: 8px; }
  body.duo.plan .sxclose { position: static; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; padding: 0; border: 1px solid var(--line2); border-radius: 50%; background: var(--surface); color: var(--fg); }
  body.duo.plan .sxclose svg { width: 16px; height: 16px; }
  body.duo.plan .sxhero { padding: 24px 40px 26px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: #faf7f1; }
  body.duo.plan .sxhl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
  body.duo.plan .sxcap { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: #9a7b4f; }
  body.duo.plan .sxhl p { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 18px; color: var(--muted); }
  body.duo.plan .sxhl p b { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--fg); }
  body.duo.plan .sxhl p span { padding: 2px 10px; border-radius: 999px; background: var(--fg); color: var(--on-press); font-size: 13px; font-weight: 650; }
  body.duo.plan .sxhl p b.late { color: var(--warn); } body.duo.plan .sxhl p span.late { background: var(--warn); color: #fff; }
  body.duo.plan .sxup { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
  /* 시간축: 점은 같은 간격(--x), 사이 선(.seg)에 걸린 날수, 지난 구간은 굵은 선(유니패스는 초록), 앞날은 점선 */
  body.duo.plan .sxaxis { position: relative; margin: 30px 34px 0; height: 128px; }
  body.duo.plan .sxtrack { position: absolute; left: 0; right: 0; top: 52px; height: 0; }
  body.duo.plan .sxtrack .seg { position: absolute; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); top: -2px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--hair2) 0 8px, transparent 8px 14px); }
  body.duo.plan .sxtrack .seg.done { background: var(--fg); }
  body.duo.plan .sxtrack .seg.done.up { background: var(--stock); }
  body.duo.plan .sxtrack .seg em { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  body.duo.plan .sxaxis ol { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
  body.duo.plan .sxaxis li { position: absolute; left: calc(var(--x) * 100%); top: 0; width: 140px; margin-left: -70px; display: flex; flex-direction: column; align-items: center; text-align: center; }
  body.duo.plan .sxaxis .lab { height: 20px; font-size: 13.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }
  body.duo.plan .sxaxis .dot { margin-top: 22px; width: 18px; height: 18px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 4px #faf7f1; }
  body.duo.plan .sxaxis li.up .dot { background: var(--stock); }
  body.duo.plan .sxaxis li.fut .dot, body.duo.plan .sxaxis li.none .dot { background: #faf7f1; box-shadow: inset 0 0 0 2.5px var(--hair2), 0 0 0 4px #faf7f1; }
  body.duo.plan .sxaxis li.late .dot { background: #faf7f1; box-shadow: inset 0 0 0 3px var(--warn), 0 0 0 4px #faf7f1; }
  body.duo.plan .sxaxis li.bad .dot { background: var(--dred); }
  body.duo.plan .sxaxis li.cur .dot { width: 26px; height: 26px; margin-top: 18px; box-shadow: 0 0 0 4px #faf7f1, 0 0 0 7px color-mix(in srgb, var(--fg) 18%, transparent); }
  body.duo.plan .sxaxis li.up.cur .dot { box-shadow: 0 0 0 4px #faf7f1, 0 0 0 7px color-mix(in srgb, var(--stock) 28%, transparent); }
  body.duo.plan .sxaxis .dt { margin-top: 14px; font-size: 30px; line-height: 34px; font-weight: 750; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  body.duo.plan .sxaxis li.fut .dt { color: #7a5232; } body.duo.plan .sxaxis li.late .dt { color: var(--warn); } body.duo.plan .sxaxis li.none .dt { color: var(--hair2); }
  body.duo.plan .sxaxis .rel { margin-top: 4px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
  body.duo.plan .sxaxis li.late .rel { color: var(--warn); font-weight: 650; }
  /* 오늘: 선 위의 빨간 점과 그 위 알약 (그 구간의 날수 자리를 쓴다: 단계 이름 · 날짜와 겹치지 않게) */
  body.duo.plan .sxtoday { position: absolute; left: calc(var(--x) * 100%); top: 52px; width: 0; height: 0; z-index: 1; }
  body.duo.plan .sxtoday::before { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 3px #faf7f1; }
  body.duo.plan .sxtoday em { position: absolute; left: 0; top: -30px; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: var(--cta); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
  /* 단계가 많으면(유니패스까지 일곱 · 여덟) · 좁은 판: 날짜를 줄인다 */
  body.duo.plan .sxaxis.many .dt { font-size: 24px; line-height: 30px; }
  body.duo.plan .sxaxis.many li { width: 112px; margin-left: -56px; }
  body.duo.plan .sxaxis.many .lab, body.duo.plan .sxaxis.many .rel { font-size: 12px; }
  @media (max-width: 1379px) { body.duo.plan .sxhero { padding-inline: 24px; } body.duo.plan .sxaxis { margin-inline: 30px; } body.duo.plan .sxaxis .dt { font-size: 24px; line-height: 30px; } body.duo.plan .sxaxis.many .dt { font-size: 19px; } body.duo.plan .sxaxis.many .rel { font-size: 11px; } body.duo.plan .sxaxis.many li { width: 92px; margin-left: -46px; } }
  @media (max-width: 1179px) { body.duo.plan .sxaxis { margin-inline: 24px; } body.duo.plan .sxaxis .dt { font-size: 21px !important; line-height: 28px; } body.duo.plan .sxaxis li { width: 96px; margin-left: -48px; } body.duo.plan .sxaxis .rel { font-size: 11.5px; } body.duo.plan .sxhl p b { font-size: 22px; }
    body.duo.plan .sxaxis.many { margin-inline: 30px; } body.duo.plan .sxaxis.many .dt { font-size: 16px !important; line-height: 24px; } body.duo.plan .sxaxis.many li { width: 66px; margin-left: -33px; } body.duo.plan .sxaxis.many .rel { white-space: normal; font-size: 10.5px; line-height: 13px; } body.duo.plan .sxaxis.many .lab { font-size: 11.5px; } }   /* 1040px에 유니패스까지 여덟 단계: 칸이 66px쯤이라 날짜를 줄이고 설명은 두 줄로 */
  /* 사실 한 줄 · 아래 정보 (예전 상세의 구역을 그대로 두고 자리만: 유니패스 구역 → 재고 · 계약 · 금액 세 단 → 이력) */
  body.duo.plan .sxfacts { margin: 14px 22px 0; padding: 0; border: 0; }
  body.duo.plan .sxd { margin: 16px 22px 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: none; box-shadow: none; }
  body.duo.plan .sxcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 28px; }
  body.duo.plan .sxcols > section { min-width: 0; }
  /* 스케쥴 시간축의 등장 (2026-10-21, 사용자: "애니메이션도 들어가면 좋을것 같은데....?"): 건을 열 때만(.sxin, app.js renderPane), 단계마다 130ms씩 늦게 —
     점이 톡 튀어나오고(sxPop) 이름 · 날짜가 떠오르고(sxUp) 다음 점까지 선이 뻗는다(sxDraw), 걸린 날수는 선이 다 그려진 뒤, 끝에 오늘 빨간 점이 세 번 퍼진다(sxPulse). 동작 줄이기면 붙이지 않는다 */
  @keyframes sxPop { 0% { transform: scale(0); } 65% { transform: scale(1.25); } 100% { transform: none; } }
  @keyframes sxUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes sxDraw { from { clip-path: inset(-30px 100% -30px 0); } to { clip-path: inset(-30px 0 -30px 0); } }   /* 늘이지(scaleX) 않고 걷어 낸다: 앞날의 점선 무늬가 눌려 보였다. 위아래 30px은 걸린 날수 글자 자리 */
  @keyframes sxFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sxPulse { 0% { box-shadow: 0 0 0 3px #faf7f1, 0 0 0 0 color-mix(in srgb, var(--cta) 45%, transparent); } 100% { box-shadow: 0 0 0 3px #faf7f1, 0 0 0 14px color-mix(in srgb, var(--cta) 0%, transparent); } }
  body.duo.plan .sxin .sxhl { animation: sxUp .4s ease-out both; }
  body.duo.plan .sxin .sxaxis li .dot { animation: sxPop .4s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 130ms + 120ms); }
  body.duo.plan .sxin .sxaxis li :is(.lab, .dt, .rel) { animation: sxUp .4s ease-out both; animation-delay: calc(var(--i) * 130ms + 160ms); }
  body.duo.plan .sxin .sxtrack .seg { animation: sxDraw .4s cubic-bezier(.4, 0, .2, 1) both; animation-delay: calc(var(--i) * 130ms + 220ms); }
  body.duo.plan .sxin .sxtrack .seg em { animation: sxFade .3s ease-out both; animation-delay: calc(var(--i) * 130ms + 520ms); }
  body.duo.plan .sxin .sxtoday { animation: sxFade .3s ease-out both; animation-delay: calc(var(--i) * 130ms + 200ms); }
  body.duo.plan .sxin .sxtoday::before { animation: sxPulse 1.4s ease-out 3; animation-delay: calc(var(--i) * 130ms + 400ms); }
  body.duo .dcard > .dhead:has(+ .dbody) { padding-bottom: 18px; }
  /* 목록 줄의 브랜드 알약 (2026-10-21, "브랜드 뱃지로 표시해줘. 눈에 잘 안들어와."): 폰 · 묶음 카드 머리와 같은 색 점 알약, 줄 높이를 늘리지 않게 한 단 작게 */
  body.duo .dline .dn .dpill { flex: none; display: inline-flex; align-self: center; }
  body.duo .dline .dn .dpill .brand { padding: 3px 8px 3px 7px; font-size: 11px; }
  /* 재고 · 스케쥴 · 단가표 탭을 트랙으로 (2026-10-21, 시안/PC판-시안/탭.cjs의 '가'): 사용자 "이부분도 조금 약한것 같은데 나름 제일 상위 버튼인데..." → "가가 최고다. 진행..".
     폰 머리의 탭 띠와 같은 꼴: 오트색 트랙 안에서 고른 탭만 흰 알약(.ink, 폰처럼 --i로 미끄러져 옮겨 간다). 밑줄은 없앤다 */
  body.duo .cols .head > #modes .seg { position: relative; gap: 0; padding: 4px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent); --tw: 84px; }
  body.duo .cols .head > #modes .seg .ink { display: block; left: 4px; top: 4px; bottom: 4px; width: var(--tw); height: auto; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(33, 12, 2, .08), 0 0 0 1px var(--edge); transform: translate3d(calc(var(--i) * 100%), 0, 0); }
  body.duo .cols .head > #modes .seg button { position: relative; z-index: 1; width: var(--tw); height: 34px; padding: 0; border: 0; border-radius: 999px; text-align: center; font-size: 15px; line-height: 34px; font-weight: 600; color: var(--muted); }
  body.duo .cols .head > #modes .seg button[aria-pressed="true"] { border: 0; color: var(--fg); font-weight: 750; }
  @media (hover: hover) { body.duo .cols .head > #modes .seg button:not([aria-pressed="true"]):hover { color: var(--fg); } }
  @media (max-width: 1279px) { body.duo .cols .head > #modes { margin-left: 8px; } body.duo .cols .head > #modes .seg { --tw: 70px; } body.duo .cols .head > #modes .seg button { font-size: 14px; } }   /* 좁은 PC: 환율 줄이 잘리지 않게 */
  @media (max-width: 1179px) { body.duo .cols .head { gap: 8px; } body.duo .cols .head > #modes .seg { --tw: 58px; } body.duo .cols .head > #modes .seg button { font-size: 13.5px; } body.duo .cols .head .hacts .kseg button { padding: 0 11px; font-size: 13px; } }   /* 가장 좁은 PC(1040px): 탭 · 제목 · 냉동 알약을 조금씩 줄여 환율 줄('USD … · 통관환율 …')이 다 보이게 */
  /* 머리 막대의 제목 (2026-10-21, 사용자: '냉동 재고' 갈무리 "타이틀이 너무 약해. 확실하게 해줘."): 18px/700 → 26px/800, 뒤 참나무 가지 그림에 묻히지 않게 바탕색 번짐(text-shadow),
     제목과 냉동 | 냉장 | 동결 알약 사이에 가는 세로줄 */
  body.duo .cols .head h1.ptitle { margin: 0 4px 0 2px; padding-right: 20px; border-right: 1px solid var(--line2); color: var(--fg); text-shadow: 0 0 2px var(--bg), 0 0 10px var(--bg), 0 0 18px var(--bg); }
  /* 제목 칸 폭 고정 (2026-10-21, 사용자: "텍스트 길이에 따라 버튼이 좌우로 왔다갔다 하는데 버튼은 고정됐으면 좋겠어. 눈아퍼."): '냉동 재고'(92px)와 '냉장 스케쥴'(113px)의 차이만큼
     뒤의 냉동 | 냉장 | 동결 · 탭이 밀렸다 → 가장 긴 제목(○○ 스케쥴 · ○○ 단가표)에 맞춘 너비로 고정 */
  body.duo .cols .head h1.ptitle { box-sizing: content-box; }
  @media (max-width: 1179px) { body.duo .cols .head h1.ptitle { width: 97px; padding-right: 14px; font-size: 22px; } }   /* 좁은 PC: 22px 제목의 가장 긴 너비 */
  /* PC 검색 카드의 필터를 알약 칩으로 (2026-10-21, 사용자: 글자뿐인 '축종 ⌄ 브랜드 ⌄ …' 갈무리 "이 부분도 뱃지 처럼 해보는건 어때?? 너무 단순해보여."): 폰의 필터 칩과 같은 꼴(크림 면 · --edge 테두리 · 999px)을
     검색 카드 폭(380px)에 맞게 낮게(30px · 12.5px). 고른 값이 있는 칩(.on)은 에스프레소 면, 펼친 칩은 진한 테두리. 2026-10-20 C-clean에서 글자로 걷었던 것을 사용자가 되돌림 */
  body.duo .top .fbar { gap: 6px; padding-left: 0; }
  body.duo .top .fbar .chip:not(.clear) { gap: 4px; height: 30px; padding: 0 10px 0 12px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); font-size: 12.5px; line-height: 1; font-weight: 600; color: var(--fg); }
  body.duo .top .fbar .chip:not(.clear) svg { width: 11px; height: 11px; opacity: 0.5; }
  body.duo .top .fbar .drop[aria-expanded="true"] { border-color: var(--fg); background: var(--surface); }
  body.duo .top .fbar .drop.on { border-color: var(--press); background: var(--press); color: var(--on-press); font-weight: 650; }
  body.duo .top .fbar .drop.on svg { opacity: 0.8; }
  @media (hover: hover) { body.duo .top .fbar .drop:not(.on):hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); } }   /* 사실 띠를 뺀 뒤(2026-10-21) 복사 | 빠른표 단추가 표의 윗선에 붙었다 (사용자: "이거 너무 딱 붙어있어."): 위와 같은 18px */
  /* 요약 카드 두 층 (2026-10-21, 시안/PC판-시안/요약카드.cjs의 '다'): 사용자(요약 카드 갈무리) "이부분도 조금 개선해보자 나름 타이틀의 위치인데. 뭔가 아쉽다." → "다. 로 우선 진행해볼까?"
     위층: 창고 재고 · 통관 전 · 입고 예정 · 어제 이후 숫자 넷을 같은 너비로(이름 앞 모바일 색 점, 칸 사이 가는 세로줄). 아래층: 카드 바닥의 옅은 띠 한 줄에 '주의' 알약(호박 점) | '어제 이후' 알약.
     마크업은 그대로(app.js renderSummary · renderAlerts · renderChanges): #changes를 display: contents로 풀어 건수(.since)는 위층 칸, 알약 줄(.row)은 띠로 보낸다. ::after가 두 층 사이의 줄바꿈 */
  body.duo:not(.plan) .sumcard { flex-wrap: wrap; align-content: space-between; column-gap: 0; row-gap: 0; padding: 0; }
  body.duo:not(.plan) .sumcard::after { content: ""; order: 6; flex: 0 0 100%; height: 0; }
  body.duo:not(.plan) .sumcard .summary > .sg, body.duo:not(.plan) .sumcard .changes.line, body.duo:not(.plan) .sumcard .changes .since { flex: 1 1 0; min-width: 0; margin: 0; padding: 18px 24px 16px; border-left: 1px solid var(--hair); }
  body.duo:not(.plan) .sumcard .summary > .stock { border-left: 0; }
  body.duo:not(.plan) .sumcard .summary .dot { display: inline-block; width: 7px; height: 7px; margin: 0 7px 0 1px; border-radius: 50%; vertical-align: 1px; background: color-mix(in srgb, var(--fg) 35%, transparent); }
  body.duo:not(.plan) .sumcard .summary .dot.stock { background: var(--stock); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stock) 20%, transparent); }
  body.duo:not(.plan) .sumcard .summary .dot.hold { background: none; box-shadow: inset 0 0 0 2px var(--hold); }
  body.duo:not(.plan) .sumcard .summary dt { font-size: 12.5px; }
  body.duo:not(.plan) .sumcard .summary dd { font-size: 28px; line-height: 32px; white-space: nowrap; }
  body.duo:not(.plan) .sumcard .changes:not(.line) { display: contents; }
  body.duo:not(.plan) .sumcard .changes .since { order: 5; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; font-size: 12.5px; line-height: 15px; font-weight: 600; color: var(--muted); }
  body.duo:not(.plan) .sumcard .changes .since b { font-size: 28px; line-height: 32px; white-space: nowrap; }
  body.duo:not(.plan) .sumcard .changes .since::after { content: "바뀐 건"; font-size: 12px; font-weight: 400; color: var(--muted); }
  body.duo:not(.plan) .sumcard .changes.line { order: 5; justify-content: flex-start; gap: 6px; }
  /* 아래층 띠 */
  body.duo:not(.plan) .sumcard .alerts, body.duo:not(.plan) .sumcard .changes .row { box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; border: 0; border-top: 1px solid var(--hair); background: #faf7f1; }
  body.duo:not(.plan) .sumcard .alerts { order: 7; flex: 0 1 auto; justify-content: flex-start; padding: 10px 0 10px 24px; border-radius: 0 0 0 15px; }
  body.duo:not(.plan) .sumcard .alerts:is(:last-child, :has(+ .changes.line)) { flex: 1 1 auto; padding-right: 24px; border-radius: 0 0 15px 15px; }   /* 어제 이후 알약이 없으면(첫날 · 바뀐 건 없음) 띠는 주의뿐 */
  body.duo:not(.plan) .sumcard .changes .row { order: 8; flex: 1 1 0; padding: 10px 24px 10px 0; border-radius: 0 0 15px 0; }
  body.duo:not(.plan) .sumcard .changes .row::before { content: "어제 이후"; margin: 0 4px 0 10px; padding-left: 16px; border-left: 1px solid var(--hair2); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  body.duo:not(.plan) .sumcard .atitle { margin: 0 4px 0 0; font-size: 12px; font-weight: 700; white-space: nowrap; }
  body.duo:not(.plan) .sumcard .atitle b { display: none; }   /* 건수는 알약마다 있다 */
  body.duo:not(.plan) .sumcard .alerts .achips { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  body.duo:not(.plan) .sumcard :is(.achips > .achip, .row > .alert.chg) { box-sizing: border-box; display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px; height: 28px; margin: 0; padding: 0 11px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); white-space: nowrap; cursor: pointer; }
  body.duo:not(.plan) .sumcard :is(.achips > .achip > span, .row > .alert.chg > i) { font-style: normal; font-size: 12.5px; line-height: 1; color: var(--fg); }
  body.duo:not(.plan) .sumcard :is(.achips > .achip, .row > .alert.chg) b { font-size: 12.5px; line-height: 1; font-weight: 700; color: var(--fg); }
  body.duo:not(.plan) .sumcard .achips > :is(.achip, .alert.chg) > span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 5px 0 0; border-radius: 50%; background: var(--warn); vertical-align: 1px; }
  body.duo:not(.plan) .sumcard :is(.achips > .achip, .row > .alert.chg)[aria-pressed="true"] { border-color: var(--press); background: var(--press); }
  body.duo:not(.plan) .sumcard :is(.achips > .achip, .row > .alert.chg)[aria-pressed="true"] :is(span, i, b) { color: var(--on-press); }
  @media (hover: hover) { body.duo:not(.plan) .sumcard :is(.achips > .achip, .row > .alert.chg):not([aria-pressed="true"]):not(.zero):hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); } }
  body.duo:not(.plan) .sumcard { background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 7%, var(--surface)) 0%, var(--surface) 80%); }   /* 위층 그라데이션 (2026-10-21, 시안/PC판-시안/요약그라데이션.cjs의 '라' 에스프레소 안개: "여기에 그라데이션을 위에서 아래로 살짝" → "라. 로 가자."). 아래 띠는 제 바탕(#faf7f1) */
  @media (max-width: 1379px) { body.duo:not(.plan) .sumcard .summary > .sg, body.duo:not(.plan) .sumcard .changes.line, body.duo:not(.plan) .sumcard .changes .since { padding-inline: 16px; } body.duo:not(.plan) .sumcard .summary dd, body.duo:not(.plan) .sumcard .changes .since b { font-size: 24px; line-height: 28px; } body.duo:not(.plan) .sumcard .alerts { padding-left: 16px; } body.duo:not(.plan) .sumcard .changes .row { padding-right: 16px; } }
  @media (max-width: 1179px) { body.duo:not(.plan) .sumcard .summary > .sg, body.duo:not(.plan) .sumcard .changes.line, body.duo:not(.plan) .sumcard .changes .since { flex: 1 1 auto; padding-inline: 12px; } body.duo:not(.plan) .sumcard .summary dd, body.duo:not(.plan) .sumcard .changes .since b { font-size: 21px; line-height: 26px; } body.duo:not(.plan) .sumcard .alerts { padding-left: 12px; } body.duo:not(.plan) .sumcard .changes .row { padding-inline: 12px; } }   /* 가장 좁은 PC */
  @media (max-width: 1439px) { body.duo:not(.plan) .sumcard .alerts { flex: 1 0 100%; padding-right: 16px; border-radius: 0; } body.duo:not(.plan) .sumcard .changes .row { flex: 1 0 100%; padding-left: 16px; border-radius: 0 0 15px 15px; } body.duo:not(.plan) .sumcard .changes .row::before { margin-left: 0; padding-left: 0; border-left: 0; } }   /* 1440px보다 좁으면 띠를 두 줄(주의 / 어제 이후)로: 한 줄에 두면 1280px에서 어제 이후 알약이 어중간하게 꺾였다 */
  /* 목록 줄의 마우스 올림 · 초점 표시를 줄 전체(칸 막대까지)로 (2026-10-21, 사용자: "마우스를 위로 올렸을 때 배경색 변경이 일부만 되는데 … 한 칸이 전부 칠해지면 좋을것 같은데"):
     예전에는 누르는 단추(.dline)에만 칠해져 밑의 칸 막대 자리는 그대로였다. 고른 줄(.dsel)의 왼쪽 막대(box-shadow)는 그대로 두고 바탕색만 바꾼다 */
  body.duo #list > .group.duo > .dline:hover { box-shadow: none; }
  body.duo #list > .group.duo > .dline:focus-visible { outline: none; }
  @media (hover: hover) { body.duo #list > .group.duo:not(.dsel):hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); } body.duo #list > .group.duo.dsel:hover { background: #efe8dc; } }
  body.duo #list > .group.duo:has(> .dline:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
  /* 스케쥴 탭 요약 카드 두 층 · 다가오는 일정 (2026-10-21, 시안/PC판-시안/스케쥴첫화면.cjs의 '라', app.js planSummary · planAgenda): 재고 탭 요약 카드와 같은 결.
     위층 = 이번 주 입항 · 입항 후 입고 전 · 입고 후 통관 전 · 다음 주(.sg, .summary를 풀어 같은 너비), 아래 띠 = 이번 주 입고 D-n 알약(.pinb) · 주의 · 어제 이후. 합계 줄(.tot)은 다가오는 일정 카드 바닥으로 옮겼다 */
  body.duo.plan .sumcard { display: flex; flex-wrap: wrap; overflow: hidden; padding: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 7%, var(--surface)) 0%, var(--surface) 80%); }
  body.duo.plan .sumcard { box-sizing: border-box; min-height: var(--duoTop, 0px); align-content: space-between; }
  body.duo.plan .sumcard::after { content: ""; order: 6; flex: 0 0 100%; height: 0; }
  body.duo.plan .sumcard .summary { display: contents; }
  body.duo.plan .sumcard .summary > .sg { order: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; margin: 0; padding: 18px 24px 16px; border: 0; border-left: 1px solid var(--hair); grid-area: auto; align-self: stretch; }
  body.duo.plan .sumcard .summary > .sg.stock { border-left: 0; }
  body.duo.plan .sumcard .summary > .sg::before, body.duo.plan .sumcard .summary > .sg::after { content: none; }
  body.duo.plan .sumcard .summary dt { font-size: 12.5px; line-height: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
  body.duo.plan .sumcard .summary .dot { display: inline-block; width: 7px; height: 7px; margin: 0 7px 0 1px; border-radius: 50%; vertical-align: 1px; background: color-mix(in srgb, var(--fg) 35%, transparent); }
  body.duo.plan .sumcard .summary .dot.stock { background: var(--stock); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stock) 20%, transparent); }
  body.duo.plan .sumcard .summary .dot.hold { background: none; box-shadow: inset 0 0 0 2px var(--hold); }
  body.duo.plan .sumcard .summary dd, body.duo.plan .sumcard .summary > .stock dd, body.duo.plan .sumcard .summary > :is(.hold, .inc, .received) dd { margin: 0; font-size: 28px; line-height: 32px; font-weight: 750; letter-spacing: -0.035em; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg); }
  body.duo.plan .sumcard .summary dd small { margin-left: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
  body.duo.plan .sumcard .summary > .sg > span, body.duo.plan .sumcard .summary .pair { display: flex; flex-wrap: wrap; column-gap: 8px; margin: 0; font-size: 12.5px; line-height: 16px; font-weight: 400; color: var(--muted); white-space: nowrap; }
  body.duo.plan .sumcard .summary .pair b { font-weight: 400; }
  body.duo.plan .sumcard .summary .tot { display: none; }
  body.duo.plan .sumcard :is(.summary > .pinb, .alerts, .changes) { order: 7; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 10px 0 10px 24px; border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: #faf7f1; }
  body.duo.plan .sumcard .summary > .pinb { order: 7; flex: 0 1 auto; width: auto; } body.duo.plan .sumcard .alerts { order: 8; flex: 0 1 auto; } body.duo.plan .sumcard .changes { order: 9; flex: 1 1 0; padding-right: 24px; }
  body.duo.plan .sumcard .alerts:last-child { flex: 1 1 auto; padding-right: 24px; }
  body.duo.plan .sumcard :is(.alerts, .changes)::before { content: ""; width: 1px; height: 16px; margin: 0 10px 0 0; background: var(--hair2); }
  body.duo.plan .sumcard .summary:not(:has(.pinb)) + .alerts::before { content: none; }
  body.duo.plan .sumcard :is(.pin-t, .atitle, .changes .since) { margin: 0 4px 0 0; padding: 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
  body.duo.plan .sumcard .atitle b, body.duo.plan .sumcard .changes .since b { display: none; }
  body.duo.plan #dock .sumcard .changes .since { margin: 0 4px 0 0; }   /* 폰의 '어제 이후' 칩 묶음 규칙(파일 끝, margin-bottom 10px)이 이겨 글자가 처졌다 */
  body.duo.plan .sumcard :is(.alerts .achips, .changes .row) { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border-radius: 0; overflow: visible; background: none; }
  body.duo.plan .sumcard :is(.pinp, .achips > .achip, .changes .row > .alert.chg) { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); font-size: 12.5px; color: var(--fg); white-space: nowrap; cursor: pointer; }
  body.duo.plan .sumcard .pinp { cursor: default; }
  body.duo.plan .sumcard :is(.pinp, .achips > .achip, .changes .row > .alert.chg) :is(span, i) { display: inline; font-style: normal; font-size: 12.5px; line-height: 1; color: var(--fg); }
  body.duo.plan .sumcard :is(.pinp, .achips > .achip, .changes .row > .alert.chg) b { margin: 0; font-size: 12.5px; line-height: 1; font-weight: 700; letter-spacing: 0; color: var(--fg); }
  body.duo.plan .sumcard .pinp .dday { margin-right: 2px; padding: 0 6px; border: 1px solid var(--fg); border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 16px; }
  body.duo.plan .sumcard .achips > :is(.achip, .alert.chg) > span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 5px 0 0; border-radius: 50%; background: var(--warn); vertical-align: 1px; }
  body.duo.plan .sumcard :is(.achips > .achip, .changes .row > .alert.chg)[aria-pressed="true"] { border-color: var(--press); background: var(--press); }
  body.duo.plan .sumcard :is(.achips > .achip, .changes .row > .alert.chg)[aria-pressed="true"] :is(span, i, b) { color: var(--on-press); }
  body.duo.plan .sumcard .changes.line { font-size: 12px; color: var(--muted); }
  @media (max-width: 1379px) { body.duo.plan .sumcard .summary > .sg { padding-inline: 16px; } body.duo.plan .sumcard .summary dd { font-size: 24px; line-height: 28px; } body.duo.plan .sumcard :is(.summary > .pinb, .alerts, .changes) { padding-left: 16px; } body.duo.plan .sumcard .changes { padding-right: 16px; } }
  @media (max-width: 1179px) { body.duo.plan .sumcard .summary > .sg { flex: 1 1 auto; padding-inline: 12px; } body.duo.plan .sumcard .summary dd { font-size: 21px; line-height: 26px; } body.duo.plan .sumcard :is(.summary > .pinb, .alerts, .changes) { flex: 1 0 100%; padding-inline: 12px; } body.duo.plan .sumcard :is(.alerts, .changes)::before { content: none; } }
  /* 다가오는 일정 */
  body.duo.plan #pbody .agcard { box-sizing: border-box; min-height: 100%; padding-bottom: 8px; }
  body.duo.plan .agcard .dhead { padding-bottom: 6px; }
  /* 일정판 제목은 다른 판 제목(body.duo .dttl h2: 30 · 27px · 500 · −0.055em)과 같은 꼴 (2026-10-22, 시안/제목꼴-시안.png 2: 전에는 24px · 700 · −0.03em이라 혼자 굵었다) */
  body.duo.plan .agbar { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); margin: 0 22px; padding: 10px 0 0; border-bottom: 1px solid var(--hair); }
  body.duo.plan .agc { all: unset; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; cursor: pointer; border-radius: 8px; }
  body.duo.plan .agc[disabled] { cursor: default; }
  @media (hover: hover) { body.duo.plan .agc:not([disabled]):hover { background: color-mix(in srgb, var(--fg) 4%, transparent); } }
  body.duo.plan .agc:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  body.duo.plan .agn { height: 14px; line-height: 14px; font-size: 10.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
  body.duo.plan .agb { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 46px; margin-top: 4px; }
  body.duo.plan .agb i { display: block; width: 6px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 78%, transparent); }
  body.duo.plan .agc.past .agb i { background: color-mix(in srgb, var(--fg) 22%, transparent); }
  body.duo.plan .agc.today .agb i { background: var(--cta); }
  body.duo.plan .agd { margin: 6px 0; padding: 0 5px; border-radius: 999px; font-size: 11px; line-height: 17px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  body.duo.plan .agc.today .agd { background: var(--cta); color: #fff; font-weight: 700; }
  body.duo.plan .agc.mon::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 30px; border-left: 1px dashed var(--hair2); }
  body.duo.plan .aglist { margin: 0; padding: 0 22px; list-style: none; }
  body.duo.plan .aglist > li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--hair); scroll-margin-top: 8px; }
  body.duo.plan .aglist > li.flash { animation: agFlash 1.2s ease-out; }
  @keyframes agFlash { from { background: color-mix(in srgb, var(--warn) 16%, transparent); } to { background: transparent; } }
  body.duo.plan .agday b { display: block; font-size: 26px; line-height: 30px; font-weight: 750; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
  body.duo.plan .agday span { font-size: 12.5px; color: var(--muted); }
  body.duo.plan .agday em { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--fg); border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 17px; }
  body.duo.plan .aglist > li.today .agday em { border-color: var(--cta); background: var(--cta); color: #fff; }
  body.duo.plan .agh { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 8px; font-size: 13.5px; }
  body.duo.plan .agh span { margin-left: auto; font-size: 12.5px; color: var(--muted); }
  body.duo.plan .agps { display: flex; flex-wrap: wrap; gap: 6px; }
  body.duo.plan .agp { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); font-size: 12.5px; color: var(--fg); white-space: nowrap; cursor: pointer; }
  body.duo.plan .agp.in { border-style: dashed; }
  body.duo.plan .agp i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand, var(--fg)); }
  body.duo.plan .agp em { font-style: normal; font-size: 11.5px; color: var(--muted); }
  body.duo.plan .agp small { margin-left: 4px; font-size: 11px; color: var(--muted); }
  @media (hover: hover) { body.duo.plan .agp:hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); } }
  body.duo.plan .agp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  body.duo.plan .agtail { margin: 12px 22px 6px; font-size: 12.5px; color: var(--muted); }
  body.duo.plan .agcard .pane-empty { margin: 20px 22px; }
}
/* 건 줄 셋째 칸의 $/lb 단가 (2026-10-21, 시안 '가'): 원가 · 판매가 밑에 작은 회색 고정폭 (B/L과 같은 글꼴) */
.lot .upr { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: -0.03em; color: var(--muted); white-space: nowrap; }
.lot .upr i { margin-left: 1px; font-style: normal; font-size: 10.5px; }
@media (max-width: 359px) { .lot .upr { font-size: 10.5px; letter-spacing: -0.05em; } .lot .upr i { font-size: 9.5px; } }   /* 320px 폰: 셋째 칸이 좁아 "$12.50/lb"가 칸을 넘었다 */
/* '어제 이후'를 알약 칩으로 (2026-10-21, 사용자: 흰 칸 3 + 2 갈무리 "이 부분 아무리 봐도 적응안되" → 시안 → 검색창 밑 축종 · 브랜드 · 원산지 칩 갈무리 "이런 스타일의 알약칩이 좋을것 같은데?"):
   필터 칩(.chip)과 같은 꼴 — 높이 38px · 크림 면 · --edge 테두리 · 14px, 고르면 에스프레소. 폰과 PC 스케쥴 탭의 요약 카드만 (PC 재고 탭의 요약 카드는 '어제 이후'가 숫자 칸이라 그대로) */
body:is(:not(.duo), .plan):not(.gridview) .sumcard .changes .since { margin-bottom: 10px; }
body:is(:not(.duo), .plan):not(.gridview) .sumcard .changes .row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border-radius: 0; overflow: visible; background: none; }
body:is(:not(.duo), .plan):not(.gridview) .sumcard .changes .alert.chg { all: unset; box-sizing: border-box; flex: none; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); color: var(--fg); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body:is(:not(.duo), .plan):not(.gridview) .sumcard .changes .alert.chg > i { display: inline; overflow: visible; font-style: normal; font-size: 14px; line-height: 1; color: var(--fg); }
body:is(:not(.duo), .plan):not(.gridview) .sumcard .changes .alert.chg b { font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
body:is(:not(.duo), .plan):not(.gridview) .sumcard .changes .alert.chg[aria-pressed="true"] { border-color: var(--press); background: var(--press); }
body:is(:not(.duo), .plan):not(.gridview) .sumcard .changes .alert.chg[aria-pressed="true"] :is(i, b) { color: var(--on-press); }
body:is(:not(.duo), .plan):not(.gridview) .sumcard .changes .alert.chg[aria-pressed="true"] > i { font-weight: 600; }
body:is(:not(.duo), .plan):not(.gridview) .sumcard .changes .alert.chg:not([aria-pressed="true"]):active { background: color-mix(in srgb, var(--fg) 6%, var(--surface)); }
body:is(:not(.duo), .plan):not(.gridview) .sumcard .changes .alert.chg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { body:is(:not(.duo), .plan):not(.gridview) .sumcard .changes .alert.chg:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); } }
/* 폰 스케쥴 요약 카드 (2026-10-21, 시안/모바일스케쥴-시안.cjs의 '나', app.js planSummary · planTot): 위는 예전 그대로(큰 '이번 주 입항' + 세 줄),
   그 밑 2주 얇은 막대 띠(흰 작은 카드), 이번 주 입고는 옆으로 넘기는 D-n 알약, 주의 · 어제 이후는 옅은 띠 안의 작은 알약 두 줄, 합계는 카드 맨 아래 작은 글 */
body:not(.duo):not(.gridview):not(.price) .sumcard { overflow: hidden; }   /* 알약 띠가 카드 아래 모서리까지 (재고 탭도) */
body.plan:not(.duo):not(.gridview) .summary .mbarw { grid-column: 1 / -1; margin: 14px 0 0; padding: 12px 12px 6px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
body.plan:not(.duo):not(.gridview) .summary .mbt { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--fg); }
body.plan:not(.duo):not(.gridview) .summary .mbt span { display: inline; margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--muted); }
body.plan:not(.duo):not(.gridview) .summary .mbars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); }
body.plan:not(.duo):not(.gridview) .summary .mbc { display: flex; flex-direction: column; align-items: center; min-width: 0; }
body.plan:not(.duo):not(.gridview) .summary .mbc > span { display: block; margin: 0; }
body.plan:not(.duo):not(.gridview) .summary .mbn { height: 13px; font-size: 10px; line-height: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
body.plan:not(.duo):not(.gridview) .summary .mbb { display: flex !important; align-items: flex-end; justify-content: center; width: 100%; height: 40px; margin-top: 2px !important; }
body.plan:not(.duo):not(.gridview) .summary .mbb i { display: block; width: 5px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 78%, transparent); }
body.plan:not(.duo):not(.gridview) .summary .mbc.past .mbb i { background: color-mix(in srgb, var(--fg) 22%, transparent); }
body.plan:not(.duo):not(.gridview) .summary .mbc.today .mbb i { background: var(--cta); }
body.plan:not(.duo):not(.gridview) .summary .mbd { margin-top: 4px !important; padding: 0 4px; border-radius: 999px; font-size: 10.5px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
body.plan:not(.duo):not(.gridview) .summary .mbc.today .mbd { background: var(--cta); color: #fff; font-weight: 700; }
body.plan:not(.duo):not(.gridview) .summary .mind { width: 5px; height: 5px; margin: 2px 0; border-radius: 50%; background: var(--stock); }
body.plan:not(.duo):not(.gridview) .summary .mind.off { background: none; }
body.plan:not(.duo):not(.gridview) .summary .pinm { width: auto; margin: 14px 0 0; padding: 0; border-top: 0; }
body.plan:not(.duo):not(.gridview) .summary .pinm .pin-t { display: inline-flex; align-items: center; gap: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
body.plan:not(.duo):not(.gridview) .summary .pinm .pinnone { margin-left: 8px; font-size: 12px; color: var(--muted); }
body.plan:not(.duo):not(.gridview) .summary .pinsc { display: flex; gap: 8px; margin: 8px -20px 0; padding: 0 20px 4px; overflow-x: auto; scrollbar-width: none; }
body.plan:not(.duo):not(.gridview) .summary .pinsc::-webkit-scrollbar { display: none; }
body.plan:not(.duo):not(.gridview) .summary .pinp { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); font-size: 13px; color: var(--fg); white-space: nowrap; }
body.plan:not(.duo):not(.gridview) .summary .pinp .dday { padding: 0 8px; border: 0; border-radius: 999px; background: var(--fg); color: var(--on-press); font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 22px; }
body.plan:not(.duo):not(.gridview) .summary .pinp b { font-weight: 700; }
body.plan:not(.duo):not(.gridview) .summary .pinp small { font-size: 11px; color: var(--muted); }
/* 주의 · 어제 이후: 옅은 띠 안의 작은 알약 두 줄 (폰 재고 탭도 같게: 2026-10-21 전체 점검, 재고 탭 주의만 예전 흰 칸이었다) */
body:not(.duo):not(.gridview):not(.price) .sumcard :is(.alerts, .changes) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 8px 20px; border-top: 0; background: color-mix(in srgb, var(--surface) 55%, transparent); }
body:not(.duo):not(.gridview):not(.price) .sumcard .alerts { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line2); }
body:not(.duo):not(.gridview):not(.price) .sumcard .changes { padding-bottom: 12px; }
body:not(.duo):not(.gridview):not(.price) .sumcard :is(.atitle, .changes .since) { display: inline; margin: 0 4px 0 0 !important; padding: 0; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
body:not(.duo):not(.gridview):not(.price) .sumcard :is(.atitle b, .changes .since b) { display: none; }
body:not(.duo):not(.gridview):not(.price) .sumcard :is(.achips, .changes .row) { display: contents; }
body:not(.duo):not(.gridview):not(.price) .sumcard :is(.achips > .achip, .changes .row > .alert.chg) { all: unset; box-sizing: border-box; display: inline-flex; flex-direction: row; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); color: var(--fg); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body:not(.duo):not(.gridview):not(.price) .sumcard :is(.achips > .achip > span, .changes .row > .alert.chg > i) { display: inline; overflow: visible; font-style: normal; font-size: 13px; line-height: 1; color: var(--fg); }
body:not(.duo):not(.gridview):not(.price) .sumcard .achips > .achip > span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 5px 0 0; border-radius: 50%; background: var(--warn); vertical-align: 1px; }
body:not(.duo):not(.gridview):not(.price) .sumcard :is(.achips > .achip, .changes .row > .alert.chg) b { margin: 0; font-size: 13px; line-height: 1; font-weight: 700; color: var(--fg); }
body:not(.duo):not(.gridview):not(.price) .sumcard :is(.achips > .achip, .changes .row > .alert.chg)[aria-pressed="true"] { border-color: var(--press); background: var(--press); }
body:not(.duo):not(.gridview):not(.price) .sumcard :is(.achips > .achip, .changes .row > .alert.chg)[aria-pressed="true"] :is(span, i, b) { color: var(--on-press); }
body:not(.duo):not(.gridview):not(.price) .sumcard .changes.line { font-size: 12px; color: var(--muted); }
/* 합계: 카드 맨 아래 */
body.plan:not(.duo):not(.gridview) .sumcard .plantot .tot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin: 0; padding: 10px 20px 14px; border-top: 0; font-size: 11.5px; color: var(--muted); }
body.plan:not(.duo):not(.gridview) .sumcard .plantot .tot b { font-weight: 600; color: var(--fg); }
body:not(.plan) .plantot, body.duo .plantot { display: none; }
/* 공장번호(EST) 뱃지 (2026-10-21, app.js estTag): 등급 알약(.gr)과 같은 크기 · 테두리 굵기 · 모서리, 옅은 색 면 + 색 테두리 + 짙은 색 글자 (색은 EST마다 --ec) */
.estb { display: inline-block; position: relative; top: -1px; padding: 0 3px; border: 1px solid var(--ec, var(--muted)); border-radius: 5px; background: color-mix(in srgb, var(--ec, var(--muted)) 13%, var(--surface)); color: color-mix(in srgb, var(--ec, var(--muted)) 80%, #000); font-size: 11px; font-weight: 700; font-style: normal; letter-spacing: 0; line-height: 1.25; max-width: 100%; box-sizing: border-box; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; vertical-align: baseline; }
@media (max-width: 359px) { .estb { font-size: 10.5px; } }
@media (max-width: 339px) { .estb { padding: 0 2px; } }
.done .estb { opacity: 0.6; }
/* 폰 머리 카드의 바탕을 걷는다 (2026-10-21, 시안/머리배경-시안.cjs의 '나': "이부분 배경을 없애면 어떤 모습일까??" → "나가 좋은데??? 진행시켜!!"):
   흰 카드 · 그림자 · 탭 띠와 환율 줄의 베이지 면을 걷어 머리 전체가 크림 바탕(참나무 그림) 위에 놓인다. 탭은 PC 머리 막대처럼 오트색 트랙 안의 흰 알약, 환율 줄은 탭 밑 글자 한 줄 */
body:not(.duo):not(.gridview) .cols .head { background: none; box-shadow: none; padding-inline: 4px; }
body:not(.duo):not(.gridview) .cols .head > #modes { margin: 14px 0 0; padding: 0; background: none; box-shadow: none; }
body:not(.duo):not(.gridview) .cols .head > #modes .seg { gap: 0; padding: 4px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent); }
body:not(.duo):not(.gridview) .cols .head > #modes .seg .ink { left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 999px; transform: translate3d(calc(var(--i) * 100%), 0, 0); }
body:not(.duo):not(.gridview) .cols .head > #modes .seg button { padding: 9px 0; font-size: 14px; }
body:not(.duo):not(.gridview) .cols .head > #modes .seg button::after { inset: -4px 0; }
body:not(.duo):not(.gridview) .cols .head > #rate { margin: 8px 0 0; padding: 0 6px; border-radius: 0; background: none; box-shadow: none; }
body:not(.duo):not(.gridview) .cols .head > #rate:has(.cnpill.bad) { background: none; box-shadow: none; }
@media (hover: hover) { body:not(.duo):not(.gridview) .cols .head > #rate:hover, body:not(.duo):not(.gridview) .cols .head > #rate:has(.cnpill.bad):hover { background: none; } }
@media (max-width: 389px) { body:not(.duo):not(.gridview) .cols .head { margin-inline: -6px; padding-inline: 2px; } body:not(.duo):not(.gridview) .cols .head > #rate { margin-inline: 0; padding-inline: 6px; } }
@media (max-width: 389px) { body:not(.duo):not(.gridview) .cols .head > #rate { font-size: 11px; letter-spacing: -0.01em; } }   /* 360px: 바탕을 걷으며 줄이 좁아져 통관환율 끝이 줄임표로 잘렸다 */
/* 가지 사이 회사 로고를 살짝 아래로 (2026-10-21, 사용자: "회사 로고를 살짝만 아래로 내려도 좋겠다."): 10px → 18px, 가지 그림의 로고 자리(가림 구멍)도 같이 8px 내린다. 폰 · 태블릿만 (PC 두 판은 머리 막대의 로고).
   2026-10-22 "로고를 조금만 더 내려줘.": 18px → 24px (구멍도 54 → 60px). 로고 밑과 냉동 · 냉장 · 동결 알약 사이가 18px → 12px.
   같은 날 다시 "로고 조금 더 내려줘.": 24px → 30px (구멍 60 → 66px). 알약과 붙지 않게 쪽 위 여백도 80 → 86px로 6px 늘려 그 사이 12px를 지킨다 (목록도 6px 내려간다) */
@media (max-width: 1039px) {
  body:not(.gridview):has(> .wrap > .cols) { padding-top: 86px; }
  body:not(.gridview):has(> .wrap > .cols) > .wrap::before { top: 30px; }
  body:not(.gridview):has(> .wrap > .cols)::before { -webkit-mask-image: radial-gradient(75px 59px at 50% 66px, transparent 55%, #000 100%); mask-image: radial-gradient(75px 59px at 50% 66px, transparent 55%, #000 100%); }
}
/* 등급 위계 색 (2026-10-21, app.js gradeColor): EST 뱃지(.estb)와 같은 옅은 면 + 색 테두리 + 짙은 색 글자. 소진 · 들어오지 않은 줄에서는 조금 흐리게 */
.gr.gr.gr[style*="--gc"] { border-color: var(--gc); background: color-mix(in srgb, var(--gc) 13%, var(--surface)); color: color-mix(in srgb, var(--gc) 80%, #000); }
.ground .incoming .gr[style*="--gc"], .done .gr[style*="--gc"] { opacity: 0.7; }
/* 2026-10-21 전체 점검 */
.plan-bl-sources .gr.gr.gr.gr[style*="--gc"] { border-color: color-mix(in srgb, var(--muted) 55%, transparent); background: none; color: var(--muted); }   /* 폰 스케쥴 B/L 머리의 등급은 예전처럼 흐리게 (위계 색 규칙이 덮었다) */
.brpick .brpq { box-sizing: border-box; width: 100%; height: 38px; margin: 0 0 8px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); font: inherit; font-size: 14px; color: var(--fg); }
.brpick .brprod[hidden] { display: none !important; }
body.duo.price .pvmore { margin: -12px 22px 24px; }
body.duo.price .pvmore > summary { cursor: pointer; padding: 6px 0; font-size: 12.5px; font-weight: 650; color: var(--fg); list-style: none; }
body.duo.price .pvmore > summary::-webkit-details-marker { display: none; }
body.duo.price .pvmore > summary::after { content: " ›"; color: var(--muted); }
body.duo.price .pvmore[open] > summary::after { content: " ⌃"; }
body.duo.price .pvmore .pvother { margin: 0; }
/* PC 스케쥴 · 단가표 탭의 왼쪽 목록도 재고 탭처럼 흰 목록 카드 안에 (2026-10-21 전체 점검: 크림 바탕 위의 예전 카드 목록이라 재고 탭과 결이 달랐다). 묶음 카드의 테 · 그림자를 걷고 가는 줄로 가른다 */
@media (min-width: 1040px) {
  body.duo:is(.plan, .price) #list { padding: 4px 12px 12px; }
  body.duo:is(.plan, .price) #list > .group { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  body.duo:is(.plan, .price) #list > .group + .group { border-top: 1px solid var(--hair); }
  body.duo:is(.plan, .price) #tools { padding-inline: 14px; }
}

/* 폰 단가표 '목록 | 미리보기' (2026-10-21, 시안/모바일단가미리보기-시안.cjs의 '나', app.js pmInner · pmPaint): 날짜 줄 밑 두 칸 전환 알약(재고 탭 트랙과 같은 결),
   미리보기면 목록 자리에 화면 폭에 맞춘 두 단 그림 전체 + 바닥에 붙는 복사 · 저장 · 크게 보기 캡슐(sticky: 그림 끝에 닿으면 그 밑에 선다). 떠 있는 '단가표 생성' 알약은 이때 숨는다(done(0)) */
.mpseg { list-style: none; margin: 4px 0 12px; }
.mpseg .seg2 { display: flex; padding: 4px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent); }
.mpseg .seg2 button { all: unset; flex: 1; text-align: center; padding: 9px 0; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mpseg .seg2 button[aria-pressed="true"] { background: var(--surface); color: var(--fg); font-weight: 750; box-shadow: 0 1px 2px rgba(33, 12, 2, .08), 0 0 0 1px var(--edge); }
.mpseg .seg2 button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mpfull { list-style: none; margin: 0 -4px 24px; padding: 10px 10px 0; border-radius: 18px; background: #faf7f1; box-shadow: 0 0 0 1px var(--line); }
.mpfull .mpimg img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 2px rgba(33, 12, 2, .06), 0 6px 20px rgba(33, 12, 2, .1); transition: opacity .2s; }
.mpfull .mpimg img.mpold { opacity: 0.45; }   /* 검색어가 바뀌어 새 그림을 그리는 중 */
.mpfull .mpnone { margin: 0; padding: 48px 12px; text-align: center; font-size: 14px; color: var(--muted); word-break: keep-all; }
.mpfull .mpbar { position: sticky; bottom: 0; display: flex; justify-content: center; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); }
.mpfull .mpbar .actg { background: var(--surface); border-color: var(--edge); box-shadow: 0 6px 20px rgba(33, 12, 2, .16); }
.mpfull .mpbar .act { display: inline-flex; align-items: center; gap: 5px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.mpfull .mpbar .act svg { width: 15px; height: 15px; }
.mpfull .mpbar .act[disabled] { opacity: .45; }
@media (max-width: 359px) { .mpfull .mpbar .act, .mpfull .mpbar .actg .act + .act { padding: 9px 10px; gap: 4px; font-size: 12.5px; } }

/* ===== 전체 검토 반영 (2026-10-21, 시안/전체검토-시안.cjs · 보기.html, 사용자 "추천대로 진행해줘") ===== */
/* 1 폰 재고 탭 요약 카드: 숫자 셋을 같은 칸 한 줄에(검색 중 .qmode와 같은 꼴, 숫자는 조금 크게, kg 줄 남김) + 주의 · 어제 이후 알약은 한 띠(.pillrow, app.js pillRow)에서 옆으로 민다.
   첫 묶음이 390px 폰에서 777px → 620px쯤에서 시작한다 */
@media (max-width: 1039px) {
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stock hold inc"; column-gap: 0; align-items: start; padding: 16px 16px 14px; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .sg { display: block; align-self: start; min-width: 0; margin: 0; padding: 0; border: 0; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .hold, body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .inc { padding-left: 12px; border-left: 1px solid var(--line); }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .stock { padding-right: 12px; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary dt { font-size: 12.5px; white-space: nowrap; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .sg dd { margin-top: 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .stock dd { font-size: 18px; font-weight: 700; }   /* 창고 재고도 다른 두 칸과 같은 크기 · 굵기 (2026-10-22, 사용자: "폰트 사이즈를 동일하게 맞춰줘." 그전에는 22px · 750) */
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .sg dd small { margin-left: 2px; font-size: 11.5px; font-weight: 500; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .sg > span { display: block; margin-top: 3px; font-size: 11.5px; white-space: nowrap; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .stock .pair b + b { display: none; }   /* 건수는 줄여서 kg 한 줄만 (칸 셋이 같은 꼴) */
}
@media (max-width: 374px) {
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary { padding-inline: 12px; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .hold, body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .inc { padding-left: 9px; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .stock { padding-right: 9px; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .sg dd { font-size: 15px; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .stock dd { font-size: 15px; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .sg dd small { font-size: 10px; margin-left: 1px; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary dt { font-size: 11.5px; }
  body:not(.duo):not(.gridview):not(.plan):not(.price) .sumcard:not(.qmode) .summary > .sg > span { font-size: 10.5px; }
}
body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 12px 16px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 55%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow::-webkit-scrollbar { display: none; }
body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow[hidden] { display: none; }
body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow > .alerts, body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow > .changes, body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow .achips, body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow .changes .row { display: contents; }
body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow .atitle, body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow .changes .since b, body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow .changes.line { display: none; }
body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow .achip, body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow .alert.chg { flex: none; margin: 0; }
body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow .changes .since { flex: none; margin: 0 0 0 4px; padding: 0 0 0 10px; border-left: 1px solid var(--edge); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }   /* '어제 이후' (주말 뒤에는 '10/17(금) 이후'): 기간을 알려 주는 말이라 남긴다 */
body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow .alerts:empty + .changes .since { margin-left: 0; padding-left: 0; border-left: 0; }
body:not(.duo):not(.gridview):not(.price) .sumcard.qmode .pillrow > :is(.alerts, .changes):not(.keep) { display: none; }   /* 검색 중에는 눌러 둔 쪽만 (위 .qmode 규칙을 이 띠 안에서도) */
@media (max-width: 374px) { body:not(.duo):not(.gridview):not(.price) .sumcard .pillrow { padding-inline: 12px; } }

/* 2 폰 목록 줄: 늘 두 줄(품명 / 브랜드 · 원산지, 목록에서만: 위에 붙는 묶음 제목 #strip은 한 줄 그대로)이라 줄 높이가 고르다. 오른쪽 보조 숫자는 아이콘 대신 말('통관 전 837 · 입고 예정 4건'), 창고 재고가 없으면 '재고 없음' */
body:not(.duo) #list .gline .gl-name { flex-direction: column; align-items: flex-start; gap: 5px; }
body:not(.duo) .gline .gl-in svg { display: none; }
body:not(.duo) .gline .gl-in { gap: 0; }
body:not(.duo) .gline .gl-in .w { font-weight: 500; }
body:not(.duo) .gline .gl-in .w:not(.u) { margin-right: 3px; }   /* 칸 안(inline-flex)에서는 글 끝의 빈칸이 지워진다 */
body:not(.duo) .gline .gl-stock.none { font-size: 13px; font-weight: 500; letter-spacing: 0; }

/* 3 등급 · EST는 어디서나 재고 줄과 같은 알약: 스케쥴 카드(.pnm · .ptg), 단가표 줄(.pbg), PC 묶음 · 스케쥴 상세 머리(.dtags) */
.prow .pnm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.prow .pnm .gtitle { font-size: 15px; font-weight: 700; color: var(--fg); line-height: 1.3; }
.prow .ptg .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; }
.prow .ptg .pct { display: block; margin-top: 3px; }
.prow .pn .pbg { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; }
.prow .pn .pbg .bl { margin-top: 0; }
.dhead .dtags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dhead .dtags small { margin-left: 2px; font-size: 12px; color: var(--muted); }

/* 4 PC 표 생성 · 간략보고: 목록 위에 떠서 줄을 가리던 알약을 목록 카드 바닥 띠 안에 앉힌다. 알약의 가운데 · 간략보고 자리 계산(fabPlace)은 그대로, 높이와 바닥만 띠에 맞춘다.
   띠(.main::after)는 알약이 하나라도 보일 때만 그린다 (:has를 모르는 옛 브라우저는 띠 없이 알약만 낮아진다). z-index 1: 검색 카드(.top, 3) 밑에 떠 있는 필터 판을 가리지 않게 */
@media (min-width: 1040px) {
  body.duo:has(#tfab:not(.off)) .cols > .main::after, body.duo:has(#bfab:not(.off)) .cols > .main::after { content: ""; position: absolute; z-index: 1; left: 1px; right: 1px; bottom: 1px; height: 61px; border-top: 1px solid var(--line); border-radius: 0 0 15px 15px; background: var(--surface); pointer-events: none; }
  body.duo .tfab, body.duo .bfab { height: 42px; bottom: 26px; }
  body.duo .tfab { --fab-shadow: transparent; box-shadow: inset 0 0 0 1px transparent; }
  body.duo .tfab.wait { --fab-shadow: transparent; box-shadow: inset 0 0 0 1px var(--edge); }
  body.duo .bfab { --fab-shadow: transparent; box-shadow: none; }
  body.duo .bfab.mini { padding: 0 11.5px; }
  body.duo:has(#tfab:not(.off)):is(.plan, .price) #list { padding-bottom: 74px; }
}

/* 5 로그인 · 관리자 카드: 처음 만든 때의 파란 상자 아이콘을 걷는다 (위에 회사 로고가 있고, 크림 · 에스프레소 화면에서 혼자 튀었다). 홈 화면 아이콘(icon-192.png)은 그대로 */
.panel > img.logo { display: none; }
.panel .lsub { margin: -10px 0 8px; font-size: 13.5px; }

/* 6 표 생성 판: '설정' · '표에 넣을 상품' 제목(.tsh)과, 흰 면 · 진한 테 · ✓의 묶음 칩 (모두 검은 면이라 판이 무거웠다). 끈 묶음은 점선 · 옅은 글 */
.tsh { flex: 1 0 100%; display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; font-size: 13px; font-weight: 750; color: var(--fg); }
.tsh small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.tsh button { all: unset; margin-left: auto; padding: 4px 2px; font-size: 12.5px; font-weight: 600; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tsh button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#tsheet .chip[data-tg], #gpanel .chip[data-tg] { background: var(--surface); color: var(--fg); border: 1px solid var(--edge); box-shadow: none; font-weight: 600; }
#tsheet .chip[data-tg][aria-pressed="false"], #gpanel .chip[data-tg][aria-pressed="false"] { border-style: dashed; color: var(--muted); }
#tsheet .chip[data-tg] small, #gpanel .chip[data-tg] small { color: var(--muted); }

/* 판매보고 (2026-10-22, 시안 판매보고-시안 판 가: 한 판에 구매자 조건 · 우리 조건 · 추천).
   떠 있는 알약 #sfab는 클래스 bfab를 같이 달아 간략보고의 모양 · 숨는 조건을 함께 쓰고, 자리만 표 생성 알약의 오른쪽으로 (간략보고와 마주 본다). --sfab: app.js가 새 css인지 알아보는 표시 */
.bfab.sfab { --sfab: 1; right: auto; left: calc(50% + var(--tfabw, 0px) / 2 + 8px); }
@media (min-width: 1040px) { body.duo .bfab.sfab { right: auto; left: calc(var(--fabc, 50%) + var(--tfabw, 0px) / 2 + 8px); } }
#ssheet .sheetin { width: min(100%, 560px); }
#ssheet .sheethead b small { margin-left: 8px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
#ssheet .sx-h { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
#ssheet .sx-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#ssheet .sx-f { display: grid; grid-template-columns: 78px 1fr; align-items: start; gap: 8px; margin: 9px 0; }
#ssheet .sx-f > span { padding-top: 8px; font-size: 13px; font-weight: 600; }
#ssheet .sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#ssheet .sx-chips .chip { height: 32px; padding: 0 12px; font-size: 13px; }
#ssheet .sx-chips .chip small { margin-left: 4px; font-size: 11px; color: var(--muted); }
#ssheet .sx-ton { display: flex; align-items: center; gap: 8px; }
#ssheet .sx-ton input { width: 100px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--edge); background: var(--surface); font: 700 17px/1 inherit; text-align: right; color: var(--fg); }
#ssheet .sx-ton input:focus { outline: 2px solid var(--fg); outline-offset: 1px; }
#ssheet .sx-ton em { font-style: normal; font-size: 13px; color: var(--muted); }
#ssheet .sx-note, #ssheet .sx-more { padding: 10px 2px 2px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
#ssheet .sx-sum { margin: 4px 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--sum); }
#ssheet .sx-sum .t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#ssheet .sx-sum .t b { font-size: 20px; font-weight: 800; }
#ssheet .sx-sum .t b small { margin-left: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
#ssheet .sx-sum .t span { font-size: 12.5px; color: var(--muted); text-align: right; }
#ssheet .sx-bar { position: relative; height: 8px; margin: 9px 0 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
#ssheet .sx-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--fg); }
#ssheet .sx-sum .d { font-size: 12.5px; }
#ssheet .sx-sum .d b { font-weight: 700; }
#ssheet .sx-short { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--warn); }
#ssheet .sx-lot { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; width: 100%; padding: 10px 2px; border-top: 1px solid var(--line); cursor: pointer; }
#ssheet .sx-lot:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; border-radius: 6px; }
#ssheet .sx-lot .ck { grid-row: 1 / span 2; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--edge); display: grid; place-items: center; }
#ssheet .sx-lot .ck svg { width: 13px; height: 13px; fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#ssheet .sx-lot.on .ck svg { stroke: #fff; }
#ssheet .sx-lot .m1 { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 13px; min-width: 0; }
#ssheet .sx-lot .m1 .no { font-size: 12px; font-weight: 800; color: var(--muted); }
#ssheet .sx-lot .m2 { grid-column: 2; display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 12px; color: var(--muted); }
#ssheet .sx-lot .r { grid-row: 1 / span 2; grid-column: 3; text-align: right; font-size: 14px; font-weight: 750; white-space: nowrap; }
#ssheet .sx-lot .r small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
#ssheet .sx-lot.on .r small { color: var(--fg); }
#ssheet .sx-lot:not(.on) { opacity: 0.6; }
#ssheet .sx-own, #ssheet .sx-man { display: inline-block; padding: 1px 7px; border-radius: 99px; background: #fff1bf; color: #7a5200; font-size: 11px; font-weight: 700; }
#ssheet .sx-man { background: var(--track); color: var(--fg); }
#ssheet .pufoot .pubtn { flex: 1; gap: 6px; }
#ssheet .pufoot .pubtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ssheet .pufoot .srgo { flex: 2; background: var(--cta); border-color: var(--cta); color: #fff; }
#ssheet .pufoot .srgo:disabled { opacity: 0.45; }
/* 판매보고 판매가 칸: 상품마다 이름 · 원가 범위 · 단가표 후보 단추 | 입력칸 (손익 보기의 '고치기'로 펼친다) */
#ssheet .sx-prices { margin: 2px 0 6px 86px; }
#ssheet .sx-pnote { margin-bottom: 4px; font-size: 12px; color: var(--muted); line-height: 1.45; }
#ssheet .sx-prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
#ssheet .sx-prow .pn { min-width: 0; font-size: 13px; font-weight: 600; }
#ssheet .sx-prow .pn small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
#ssheet .sx-prow .pn button { all: unset; color: var(--fg); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#ssheet .sx-prow .pn button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 3px; }
#ssheet .sx-prow .sx-ton { flex: none; }
#ssheet .sx-prow .sx-ton input { width: 96px; height: 34px; font-size: 15px; }
@media (max-width: 480px) { #ssheet .sx-prices { margin-left: 0; } }

/* 켜고 끄는 칩 모양 통일 (2026-10-22, 사용자가 표 생성 판 '표에 넣을 상품' 칩을 보내며 "이런 버튼은 전부 이 스타일로 바꾸는건 어때?" → 시안/칩스타일-시안-체크없음.png의 가, "체크 없는 점선.. .가 가좋은것 같아."):
   켠 칩은 흰 면 · 진한 테, 끈 칩은 흰 면 · 점선 테 · 옅은 글. ✓는 없다 (표에 넣을 상품 칩의 ✓도 같이 걷었다). 필터 판 · 묶기/정렬 판 · 표 생성 판 · 간략보고 · 판매보고 · 단가표 필터의 칩이 모두 이 꼴이다.
   하는 일이 있는 단추(검색 옆 '선택', 선택 막대 '전체 선택', '묶음 선택', 표 보기의 입고 예정 · 소진 보기)는 aria-pressed를 달고 있어도 뺀다. 필터 줄의 드롭다운 칩(.drop) · 주의 알약(.achip) · 탭은 칩 규칙이 아니라 그대로.
   필터 판 EST의 'EXCEL 공장' 칩(.exl)은 끈 상태의 옅은 브랜드색 바탕을 남긴다(그쪽 규칙이 더 구체적이다) */
.chip[aria-pressed]:not(.gsel, .selall, .selbtn, [data-ginc], [data-gdone]) { background: var(--surface); color: var(--fg); border: 1px solid var(--edge); box-shadow: none; font-weight: 600; }
.chip[aria-pressed="false"]:not(.gsel, .selall, .selbtn, [data-ginc], [data-gdone]) { border-style: dashed; color: var(--muted); }
.chip[aria-pressed]:not(.gsel, .selall, .selbtn, [data-ginc], [data-gdone]) small { color: var(--muted); opacity: 1; }
.chip[aria-pressed="true"]:not(.gsel, .selall, .selbtn, [data-ginc], [data-gdone]) .dot { box-shadow: none; }
/* 건 줄 박스 · kg 칸의 아주 작은 단위: 숫자마다 바로 밑에 (2026-10-22, app.js lu: "아주작게" → "한줄 내려야겠다" → 숫자마다 바로 밑에) */
.lot .lu { display: block; margin: -1px 0 1px; font-size: 9px; font-weight: 500; line-height: 1.1; letter-spacing: 0; color: var(--muted); }

/* PC 묶음 카드 표 머리 줄 '먹선' (2026-10-22, 사용자: "이 부분이 디자인은 좋은데 조금 약해보여. 더 나은 디자인으로 시안 몇개 보여줄래???" → 시안/표머리-시안.png의 나, "먹선으로 한번 가볼까?"):
   바탕 없이 위에 굵은 먹선(2px) · 아래 가는 먹선(1px), 칸 이름 12.5px 진하게, 아랫줄(구분 · 최초 · 평중 · $/lb …)은 11px 옅게. 창고 재고 · 통관 전 · 입고 예정 · 미개설 · 소진 구역의 머리 줄(tr.dch) 모두 */
body.duo .dt tr.dch > th { border-top: 2px solid var(--fg); border-bottom: 1px solid var(--fg); padding-top: 9px; padding-bottom: 8px; }
body.duo .dt tr.dch > th .l1 { font-size: 12.5px; line-height: 16px; font-weight: 750; color: var(--fg); letter-spacing: -0.01em; }
body.duo .dt tr.dch > th .l2 { font-size: 11px; color: var(--muted); }

/* PC 머리 줄 제목을 가볍게 (2026-10-22, 사용자: 로고 + '냉동 단가표'를 보내며 "이부분도 폰트 굵기와 크기가 안어울리는데 조절좀해줘봐." → 시안/머리제목-시안.png의 B, "응 추천대로 가자."):
   26px · 800 · 자간 −0.045em → 22px · 650 · −0.02em으로 했던 규칙은, 그 뒤 같은 선택자 규칙들(굵기 500 · 자간 −0.055em, 31px · 칸 132px)이 다시 정해 2026-10-31 정리로 걷었다 */

/* PC 머리 줄 냉동 · 냉장 · 동결을 탭과 같은 트랙으로 (2026-10-22, 사용자: "냉동 냉장 동결 버튼 을 재고 스케쥴... 만큼 키워볼까??? … 이부분을 보다 고급스럽게 고쳐보고 싶어."
   → 시안/머리알약-시안.png의 나 '같은 트랙 둘', "나 로 진행해보자."): 귀리색 트랙(4px 안쪽) 안에 흰 알약이 고른 것, 높이 42 · 글자 15px로 재고 · 스케쥴 · 단가표 탭과 같은 꼴.
   예전에는 검게 채운 작은 알약(32px · 13.5px)이라 탭과 말씨가 달랐다. 폰 머리는 그대로. #hacts로 무게를 올려 위의 여러 kseg 규칙(검은 채움 · 그림자)을 이긴다 */
@media (min-width: 1040px) {
  body.duo #hacts .kseg { padding: 4px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent); }   /* 트랙 · 고른 알약의 테두리는 탭(#modes .seg · .ink)과 같은 값 (2026-10-24, 사용자: 두 칸을 나란히 보내며 "냉동, 냉장, 동결도 테두리 있어야 할 것 같아.") */
  body.duo #hacts .kseg button { height: 34px; padding: 0 20px; border: 0; border-radius: 999px; background: none; box-shadow: none; font-size: 15px; font-weight: 600; line-height: 34px; color: var(--muted); }
  body.duo #hacts .kseg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); font-weight: 750; box-shadow: 0 1px 2px rgba(33, 12, 2, .08), 0 0 0 1px var(--edge); }
  @media (hover: hover) { body.duo #hacts .kseg button:not([aria-pressed="true"]):hover { color: var(--fg); } }
}
@media (min-width: 1040px) and (max-width: 1179px) { body.duo #hacts .kseg button { padding: 0 13px; font-size: 14px; } }   /* 좁은 PC: 종류 칸이 넓어진 만큼 탭이 눌리지 않게 */

/* 큰 제목을 '단가표 미리보기' 꼴(Wanted Sans · 굵기 500 · 좁은 자간)로 (2026-10-22, 사용자: '단가표 미리보기' 제목을 보내며 "나는 개인적으로 이 폰트와 자간이 너무 마음에 든다. 아주 깔끔해..."
   → 시안/제목꼴-시안.png, "좋아 셋다 바꿔줘."): 1 PC 머리 줄 제목 22px · 650 → 24px · 500 · −0.055em, 칸 폭은 가장 긴 제목(잰 값 101.7px)에 맞춰 102px, 좁은 PC는 22px · 94px(93.3px).
   2 PC 스케쥴 일정판 제목은 위 agcard 규칙에서 크기 · 굵기를 걷어 다른 판 제목과 같게. 3 판 제목(표 생성 · 판매보고 · 간략보고) 17 · 14px · 700 → 20px · 500 · −0.05em */
@media (min-width: 1040px) {
  body.duo .cols .head h1.ptitle { font-weight: 500; letter-spacing: -0.055em; }
}
#tsheet .tshead b, #ssheet .sheethead > b, #bsheet .sheethead > b { font-size: 20px; font-weight: 500; letter-spacing: -0.05em; }
#ssheet .sheethead b small { letter-spacing: 0; }

/* PC 검색 카드의 '초기화'도 단추로 (2026-10-22, 사용자: 밑줄 글자 '초기화'를 보내며 "초기화도 버튼으로 만들어줘."): 옆 필터 칩(높이 30 · 흰 면 · 연한 테 · 12.5px)과 같은 알약, 밑줄 없음.
   폰은 2026-10-18부터 이미 테 두른 칩이다. 재고 탭 · 단가표 탭 필터 줄 모두 */
@media (min-width: 1040px) {
  body.duo .top .fbar .chip.clear { display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--edge); border-radius: 999px; font-size: 12.5px; line-height: 1; text-decoration: none; }
  @media (hover: hover) { body.duo .top .fbar .chip.clear:hover { border-color: var(--fg); } }
}

/* 폰 스케쥴 탭의 '일정' (2026-10-23, 시안/폰일정-시안.png의 나; app.js psSeg · planAgenda(true)): '일정 | 목록' 전환은 단가표 탭의 .mpseg 그대로, 일정 카드는 PC '다가오는 일정'을 폰 폭에 맞춘 것.
   막대 띠는 요약 카드에 이미 있어(.mbarw: 누르면 일정의 그날로) 여기서는 숨긴다. 날짜 칸 62px, 알약은 한 줄에 하나(품명 · 브랜드 · kg) */
#list > li.psseg { margin-top: 4px; }
#list > li.mag { list-style: none; margin: 0 0 14px; padding: 14px 0 6px; border: 1px solid var(--card-line); border-radius: 20px; background: var(--surface); overflow: hidden; }
.mag .dhead { padding: 0 16px 4px; }
.mag .dttl { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mag .dttl h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.05em; }
.mag .dmeta { font-size: 12px; color: var(--muted); }
.mag .agbar { display: none; }
.mag .aglist { margin: 0; padding: 0 16px; list-style: none; }
.mag .aglist > li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 140px; }
.mag .aglist > li:last-child { border-bottom: 0; }
.mag .aglist > li.flash { animation: agFlash 1.2s ease-out; }
@keyframes agFlash { from { background: color-mix(in srgb, var(--warn) 16%, transparent); } to { background: transparent; } }
.mag .agday b { display: block; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.mag .agday span { display: block; font-size: 11.5px; color: var(--muted); }
.mag .agday em { display: inline-block; margin-top: 3px; padding: 0 6px; border: 1px solid var(--fg); border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 16px; }
.mag .aglist > li.today .agday em { border-color: var(--cta); background: var(--cta); color: #fff; }
.mag .agh { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 7px; font-size: 13px; }
.mag .agh span { margin-left: auto; font-size: 12px; color: var(--muted); }
.mag .agps { display: flex; flex-direction: column; gap: 5px; }
.mag .agp { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); font-size: 12.5px; color: var(--fg); white-space: nowrap; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mag .agp:active { background: color-mix(in srgb, var(--fg) 6%, var(--surface)); }
.mag .agp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mag .agp.in { border-style: dashed; }
.mag .agp i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand, var(--fg)); }
.mag .agp em { font-style: normal; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.mag .agp small { margin-left: auto; padding-left: 6px; font-size: 11px; color: var(--muted); }
.mag .agtail { margin: 10px 16px 6px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.mag .pane-empty { margin: 14px 16px; color: var(--muted); font-size: 13px; }
.mbarw [data-agday] { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* PC 묶음 카드의 창고 재고 상자 (2026-10-23, 시안/창고재고강조-시안3.png '마+1'; app.js duoTable의 boxed("bstk")): 통관 전 · 입고 예정 · 미개설의 점선 상자와 달리
   옅은 실선(먹색 14%) · 흰 면 · 살짝 뜬 그림자(폰의 창고 재고 카드 .rise와 같은 말씨). 표의 줄에는 그림자가 그려지지 않고, 칸마다 box-shadow를 주면 옆 칸 경계에 흐린 세로줄이 비쳐서
   끝 줄 칸 밑에 붙인 그러데이션 띠(::after)로 그린다(칸이 이어 붙어 한 장처럼). 흰 면은 :where로 무게를 낮춰 고른 건(.on) · 마우스 올림 · 선택 표시가 그대로 이긴다.
   테두리 2px · 먹색 20% (2026-10-27, 사용자: "통관된 재고는 조금 더 강조해줄 수 있니???" → 회색 면 + 왼쪽 먹색 줄 → "세로줄 넣는건 별로야.. 테두리를 강화해볼까???? 너무 짙게는 말고..." →
   "색은 넣지 말고 테두리만 강화해보자 두껍게하던가..." → 시안/창고재고굵은테-시안 나 "좋아 나로 진행하자."; 전에는 1px · 14%) */
@media (min-width: 1040px) {
  :where(body.duo .dt tr.bstk) > :is(td, th) { background: #fff; }
  body.duo .dt tr.bx.bstk.bxT > :is(td, th) { border-top: 2px solid color-mix(in srgb, var(--fg) 20%, transparent); }
  body.duo .dt tr.bx.bstk.bxB > :is(td, th) { position: relative; border-bottom: 2px solid color-mix(in srgb, var(--fg) 20%, transparent); }
  body.duo .dt tr.bx.bstk > :first-child { border-left: 2px solid color-mix(in srgb, var(--fg) 20%, transparent); }
  body.duo .dt tr.bx.bstk > :last-child { border-right: 2px solid color-mix(in srgb, var(--fg) 20%, transparent); }
  body.duo .dt tr.bx.bstk.bxB > :is(td, th)::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 2px); pointer-events: none; }
  /* 양 끝은 직각으로 끊기면 잘린 그림자처럼 보여서(2026-10-23, 사용자: "그림자가 잘린것 같은데....?") 둥근 모서리 밑에서 시작해 56px에 걸쳐 흐려지며 사라지게 */
  body.duo .dt tr.bx.bstk.bxB > :first-child::after { left: 6px; -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
  body.duo .dt tr.bx.bstk.bxB > :last-child::after { right: 6px; -webkit-mask-image: linear-gradient(to left, transparent, #000 56px); mask-image: linear-gradient(to left, transparent, #000 56px); }
}

/* PC 묶음 카드 표: 등급 · EST 알약의 윗 테두리가 잘리던 것 (2026-10-23, 사용자: 'PREMIUM BLACK ANGUS'가 두 줄로 꺾인 칸을 보내며 "윗부분이 살짝 짤리는데 해결해 줄 수 있니??").
   칸 첫 줄(.l1)은 넘치는 글을 자르려고 overflow: hidden인데, 알약(.gr · .estb)은 기준선을 맞추려고 1px 위로(top: -1px) 올라가 있어 그 1px이 잘렸다. 첫 줄 위로 1px 여유를 두고 같은 만큼 끌어올려 자리는 그대로 */
@media (min-width: 1040px) {
  body.duo .dt td.ty .l1 { padding-top: 1px; margin-top: -1px; }
}

/* PC 아쉬운 점 1 · 2 · 4 (2026-10-23, 시안/PC아쉬운점-시안.png, 사용자: "1,2,4 가자.") */
@media (min-width: 1040px) {
  /* 1 재고 탭 목록 카드 바닥 띠의 단추 셋 (app.js renderDuoBar): 떠 있는 알약 셋은 숨기고 띠 안에 같은 줄로. 띠(.main::after)는 #tfab의 off 표시로 그대로 그려진다 */
  body.duo.duobar #tfab, body.duo.duobar #bfab, body.duo.duobar #sfab { display: none !important; }
  body.duo .duobar { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 9px; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 6px; }
  body.duo .duobar[hidden], body.duo.selecting .duobar { display: none; }
  body.duo .duobar button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; height: 46px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); font-size: 13px; font-weight: 650; color: var(--fg); cursor: pointer; }
  body.duo .duobar button .t { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  body.duo .duobar button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  body.duo .duobar button small { font-size: 10.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
  body.duo .duobar button.go { background: var(--cta); box-shadow: none; color: #fff; }
  body.duo .duobar button.go small { color: rgba(255, 255, 255, 0.82); }
  body.duo .duobar button:disabled { opacity: 0.45; cursor: default; }
  body.duo .duobar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (hover: hover) { body.duo .duobar button:not(.go):not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--fg); } body.duo .duobar button.go:not(:disabled):hover { filter: brightness(1.06); } }
  /* 2 묶음 카드 구역 바로가기 (app.js duoJump) */
  body.duo .djump { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px 14px; }
  body.duo .djump button { all: unset; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); font-size: 12.5px; font-weight: 600; color: var(--fg); cursor: pointer; }
  body.duo .djump button b { font-weight: 750; }
  body.duo .djump button i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
  body.duo .djump .stock i { background: var(--stock); }
  body.duo .djump .hold i { box-shadow: inset 0 0 0 1.5px var(--hold); }
  body.duo .djump :is(.incoming, .done) i { background: color-mix(in srgb, var(--fg) 30%, transparent); }
  body.duo .djump .unopened i { box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--fg) 40%, transparent); }
  body.duo .djump button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (hover: hover) { body.duo .djump button:hover { box-shadow: inset 0 0 0 1px var(--fg); } }
  /* 4 단가표 미리보기 돋보기 (app.js pvLens) */
  .pvlens { position: fixed; z-index: 30; width: 230px; height: 230px; border-radius: 50%; background-color: #fbf8f3; background-repeat: no-repeat; box-shadow: 0 8px 24px rgba(33, 12, 2, 0.28), 0 0 0 3px #fff, 0 0 0 4px var(--edge); pointer-events: none; }
  .pvlens[hidden] { display: none; }
  body.duo.price #pbody img[alt="단가표 미리보기"] { cursor: zoom-in; }
}

/* 음성 검색 (2026-10-23, 시안/아이콘음성-시안.png 4; app.js voiceMic · openVoice): 검색 단추 왼쪽의 마이크, 검색어는 그만큼 왼쪽에서 멈추고 X는 마이크 왼쪽으로 */
.vmic { all: unset; box-sizing: border-box; position: absolute; right: 48px; top: 50%; width: 38px; height: 38px; margin-top: -19px; display: grid; place-items: center; border-radius: 50%; color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vmic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vmic:active { background: var(--ctl); }
.vmic:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.search.go.vok #q, .search.go.vok #q:placeholder-shown { padding-right: 92px; }
.search.go.vok .qclear { right: 86px; }
.top.compact .search.go.vok .vmic { right: 40px; width: 32px; height: 32px; margin-top: -16px; }
#voicesheet.vsh { align-items: flex-end; padding: 0; }
#voicesheet .vin { width: 100%; max-width: 560px; padding: 26px 20px calc(30px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; text-align: center; align-items: center; }
#voicesheet .vring { width: 84px; height: 84px; margin: 6px auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--cta); color: #fff; box-shadow: 0 0 0 10px color-mix(in srgb, var(--cta) 16%, transparent), 0 0 0 22px color-mix(in srgb, var(--cta) 8%, transparent); }
#voicesheet .vring.off { background: var(--muted); box-shadow: none; }
#voicesheet .vring svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { #voicesheet .vring:not(.off) { animation: vpulse 1.4s ease-in-out infinite; } }
@keyframes vpulse { 50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--cta) 12%, transparent), 0 0 0 28px color-mix(in srgb, var(--cta) 5%, transparent); } }
#voicesheet b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -0.04em; }
#voicesheet p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
#voicesheet .vheard { min-height: 28px; margin-top: 14px; font-size: 20px; font-weight: 650; }
#voicesheet .vheard.err { font-size: 14px; font-weight: 500; color: var(--warn-t); }
#voicesheet .vx { all: unset; margin-top: 16px; padding: 10px 24px; border-radius: 999px; background: var(--ctl); font-size: 14px; font-weight: 600; cursor: pointer; }

/* 엑셀 고칠 곳 알리기 (2026-10-23, 시안/엑셀고칠것-시안.png 오른쪽, 사용자: "좋아 진행해줘."; app.js fxBtn · openFix): 건 상세 맨 아래의 흰 알약 단추와,
   폰에서는 아래에서 올라오는 판(넓은 화면은 가운데 카드). 칸 칩은 다른 토글 칩과 같은 꼴(.chip[aria-pressed]: 흰 면, 고른 것은 짙은 테두리, 안 고른 것은 점선) */
.fxbtn { all: unset; box-sizing: border-box; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); font-size: 13px; font-weight: 600; color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fxbtn svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fxbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fxbtn:active { background: var(--ctl); }
@media (hover: hover) { .fxbtn:hover { box-shadow: inset 0 0 0 1px var(--fg); } }
.dlot > .fxbtn { margin: 0 22px 14px; }   /* PC 서랍: 복사 · 공유 줄 밑 (서랍의 구역과 같은 왼쪽 여백) */
#fxsheet.fxsh { z-index: 60; align-items: flex-end; padding: 0; }   /* PC 서랍(.dlot, z 45) 위에서도 열린다 */
body:has(#fxsheet) #toast { z-index: 61; }   /* 보내지 못한 안내('맞는 값은 80자까지' …)가 판에 가리지 않게 */
#fxsheet .fxbox { width: 100%; max-width: 560px; max-height: calc(100% - 24px); border-radius: 22px 22px 0 0; }
@media (min-width: 700px) { #fxsheet.fxsh { align-items: center; padding: 16px; } #fxsheet .fxbox { border-radius: 16px; } }
#fxsheet .sheethead { align-items: flex-start; padding: 16px 12px 4px 18px; }
#fxsheet .fxhd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#fxsheet .fxhd b { overflow: visible; white-space: normal; font-size: 20px; font-weight: 500; letter-spacing: -0.04em; }
#fxsheet .fxhd small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
#fxsheet .pubody { padding: 4px 18px 16px; }
#fxsheet .fxlb { display: block; margin: 14px 0 6px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
#fxsheet .fxchips { display: flex; flex-wrap: wrap; gap: 6px; }
#fxsheet .fxchips .chip { height: 34px; padding: 0 13px; font-size: 13.5px; }
#fxsheet .fxnow { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--ground); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
#fxsheet .fxnow[hidden] { display: none; }
#fxsheet .fxnow b { color: var(--fg); font-weight: 650; }
#fxsheet .fxinp { box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); color: var(--fg); font: inherit; font-size: 16px; }   /* 16px: 아이폰이 입력칸을 누를 때 화면을 키우지 않게 */
#fxsheet .fxinp::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
#fxsheet .fxinp:focus { outline: 2px solid var(--fg); outline-offset: 1px; }
#fxsheet .fxnote { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* 인기 검색어 띠 (2026-10-23, 시안/인기검색어-시안.png 나 · 순위 없이, app.js renderHot): 폰 머리 줄의 냉동 | 냉장 | 동결과 ⚙ 사이 빈자리.
   위에 작은 '인기 검색', 아래 한 줄 낱말이 3초마다 바뀐다: 옛 말은 살짝 위로 옅어지고 새 말이 아래에서 떠오른다(시안/인기검색어부드럽게-시안.png 나, 사용자: "박스가 잘린것 처럼표현하지 말고 부드럽게" → "나로 진행해줘").
   그래서 .hw는 잘라 보이는 칸이 아니고 두 낱말이 같은 자리에 겹쳐 놓인다(span absolute). --hot: app.js가 이 꾸밈이 있는지 보고 띠를 낸다.
   order 1: ⚙ · 나가기(.hbtn order 2) 앞. PC 두 판(머리가 한 줄 막대)과 제목 아래로 내려가는 아주 좁은 폰에는 없다 */
/* 누르는 자리는 글자만큼 (2026-10-23, 사용자: 선택 테두리가 띠 칸 전체에 그려진 것을 보내며 "선택 영역이 너무 넓은데??? 딱 텍스트만 선택되게 해줘."):
   .hot은 자리만 차지하는 껍데기(flex 1), 단추 .hb는 '인기 검색'과 낱말 중 긴 쪽만큼만 (너무 길면 껍데기 폭에서 말줄임). 넘김 중 새 말(span + span)은 옛 말 자리에 겹쳐 놓는다.
   --hot: 2: app.js가 이 짜임의 꾸밈인지 본다 (껍데기 짜임 전의 app.css는 1).
   자리는 ⚙ 쪽으로 오른쪽 맞춤 (시안/인기검색어자리-시안.png 나, 사용자: "인기검색어 위치가 너무 가운데라 애매한데... 최적의 위치를 찾아줘." → "좋아 나로 진행하자."): 머리 줄이 왼쪽 종류 알약 | 오른쪽 정보 · 설정 두 덩어리가 된다 */
.hot { --hot: 2; order: 1; display: flex; align-items: center; justify-content: flex-end; flex: 1 1 0; min-width: 0; margin: 0 6px 0 2px; }
.hot .hb { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; max-width: 100%; padding: 0 3px; border-radius: 7px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hot small { display: block; font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: 0.02em; color: var(--muted); }
.hot .hw { position: relative; display: block; min-width: 0; height: 24px; }
.hot .hw span { display: block; height: 24px; font-size: 14px; font-weight: 650; line-height: 24px; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot .hw span + span { position: absolute; right: 0; top: 0; width: max-content; }
.hot .hb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.duo .hot { display: none; }
@media (max-width: 359px) { .hot { display: none; } }

/* PC 묶음 카드 표 다시 (2026-10-23, 사용자: 묶음 카드 갈무리와 함께 "이 부분 디자인을 다시해서 시안으로 보여줄래?" → 가 → 가+3 → "가+3을 정돈해줘봐. 뭔가 산만해." → 정돈 2 → "2+3 으로진행",
   시안/묶음카드정돈2발전-시안-3-합침.png; app.js duoTable). 열 머리(먹선)는 표 맨 위 한 번, 날짜는 두 칸을 합친 한 칸(td.dd)에 '이름 · 날짜 · 남은 날'.
   줄 맞춤: 건 줄의 칸마다 첫 줄 글자 바닥선이 한 줄에 서고(vertical-align: baseline), 둘째 줄은 모두 같은 크기 · 같은 틈. 날짜 이름 칸은 폭을 고정해 날짜가 세로로 줄을 서고, 남은 날은 칸 오른쪽 끝에.
   알약(.dpl)은 신경 쓸 것에만: 입항 3주 안은 먹 테두리, 지난 것은 호박색. 입고 예정 · 미개설의 진행 옆에 단계 점 다섯(.dsp). 미개설은 한 줄(tr.u1), 글자 한 치수 작게 */
@media (min-width: 1040px) {
  body.duo .dt tr.dgap td { height: 10px; }
  body.duo .dt tr.drow > td { vertical-align: baseline; }
  body.duo .dt tr.drow td .l2, body.duo .dt tr.drow td.cc span { margin-top: 3px; font-size: 12.5px; line-height: 18px; }
  body.duo .dt tr.drow td.wh .l2 { margin-top: 4px; line-height: 15px; }
  body.duo .dt td.dd .l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }   /* 좁은 PC(1040~1179px)에서 다 안 들어가면 남은 날이 밑으로 내려간다 (넘쳐 잘리지 않게) */
  body.duo .dt td.dd .l1 > i { flex: none; width: 56px; font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
  body.duo .dt td.dd .dv { flex: 1 1 auto; min-width: 0; }
  body.duo .dt td.dd .dv b { font-weight: 600; }
  body.duo .dt td.dd .l1 > em { flex: none; margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  body.duo .dt td.dd .l2 { padding-left: 64px; }
  body.duo .dt td.dd.d2 .l1 > i { width: 28px; }
  body.duo .dt td.dd.d2 .l2 { padding-left: 36px; }
  body.duo .dt .dpl { display: inline-block; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1.25px var(--fg); color: var(--fg); font-size: 11.5px; font-weight: 600; line-height: 18px; white-space: nowrap; }
  body.duo .dt .dpl.late { background: var(--warn-soft); color: var(--warn-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
  body.duo .dt .dsp { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: 2px; }
  body.duo .dt td .l2 .dsp { margin: 0 6px 0 0; vertical-align: 1px; }
  body.duo .dt tr.drow td.st .l2 { white-space: nowrap; }
  body.duo .dt .dsp i { width: 6px; height: 6px; border-radius: 50%; background: #d8cfc2; }
  body.duo .dt .dsp i.on { background: var(--fg); }
  body.duo .dt .dsp i.nx { background: var(--surface); box-shadow: inset 0 0 0 1.25px var(--fg); }
  body.duo .dt .dsp i.lt { background: var(--warn); }
  body.duo .dt tr.dsec td { vertical-align: baseline; }
  body.duo .dt tr.dsec td.dtot { font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  body.duo .dt tr.dsec td.dtot small { margin-left: 2px; font-size: 11.5px; }
  body.duo .dt tr.dsec td.dtot { padding-inline: 6px; }   /* 건 줄의 숫자 칸과 같은 여백 (구역 제목 줄의 8px은 예전 한 칸짜리 줄의 것: 합계가 2px 왼쪽에 섰다) */
  body.duo .dt tr.u1 > td { padding-top: 7px; padding-bottom: 7px; }
  body.duo .dt tr.u1 td .l1 { font-size: 14px; }
  body.duo .dt tr.u1 td.st .l1 { font-weight: 500; color: var(--muted); }
  body.duo .dt tr.u1 td.r .l1 b { font-size: 15px; font-weight: 600; }
  body.duo .dt tr.u1 td.cc b { font-size: 14px; }
  body.duo .dt tr.u1 td .ot { font-size: 13px; color: var(--muted); }
  body.duo .dt tr.u1 td.ty .l1, body.duo .dt tr.u1 td.blc .l1 { white-space: nowrap; }
  @media (max-width: 1299px) { body.duo .dt tr.drow td.st .l2 { white-space: normal; } }   /* 첫 칸이 70~90px대라 점과 단계 이름이 한 줄에 안 들어가면 꺾는다 (1180~1219px에서 '입고'가 잘렸다: 독립 검토) */
  @media (max-width: 1399px) {
    body.duo .dt tr.drow td .l2, body.duo .dt tr.drow td.cc span { font-size: 12px; line-height: 17px; }
    body.duo .dt td.dd .l1 > i { width: 50px; }
    body.duo .dt td.dd .l2 { padding-left: 58px; }
    body.duo .dt td.dd.d2 .l1 > i { width: 28px; }
    body.duo .dt td.dd.d2 .l2 { padding-left: 36px; }
    body.duo .dt tr.dsec td.dtot small { display: none; }   /* 큰 합계(187,929.93)가 kg 칸을 넘쳐 단위는 뺀다: 열 머리에 박스 · kg가 있다 */
    body.duo .dt tr.dsec td.dtot { font-size: 12.5px; }
  }
  @media (max-width: 1179px) {
    body.duo .dt td.dd .l1 { gap: 0 6px; }
    body.duo .dt tr.dsec td.dtot { padding-inline: 5px; }
    body.duo .dt td.dd .l1 > i { width: 46px; font-size: 11.5px; }
    body.duo .dt td.dd .l2 { padding-left: 52px; }
    /* 가장 좁은 PC 폭: 날짜 칸이 140px 남짓이라 두 글자 이름(유통 · 진행)은 감추고(열 머리가 '날짜') 둘째 줄을 들이지 않는다. 입고 예정 · 미개설의 이름(입항 · 선적예정)은 뜻이 달라 남긴다 */
    body.duo .dt td.dd.d2 .l1 > i { display: none; }
    body.duo .dt td.dd .l2, body.duo .dt td.dd.d2 .l2 { padding-left: 0; }
  }
}
/* 열 머리가 표 맨 위로 올라오며 묶음 카드 본문의 가는 윗선(.dbody, 위 PC 두 판 묶음) 바로 밑에 머리의 굵은 먹선이 붙어 두 줄로 겹쳐 보였다 (2026-10-23, 사용자: "선 두줄이 겹친것 같은데?").
   먹선이 머리와 본문을 가르므로 가는 윗선은 뺀다 */
@media (min-width: 1040px) { body.duo .dcard > .dbody { border-top: 0; } }

/* PC 재고 탭 요약 카드 '깃발 시간줄' (2026-10-24, 시안/PC요약카드-시안7-거-깃발시간줄.png; 사용자 "시안 7 거 로 한번 해볼까?"; app.js horizonSummary).
   이름표는 막대 이름표(시안/PC요약카드-시안8-A-막대이름표.png, "좋아 추천대로 a 가자.")이고, 같은 날 "위아래로 조금만 더 압축시킬 수 있니? 세로로 너무 많은 면적을 차지하고 있거든..."에
   258~292px → 200px 남짓으로 줄였다: 위 줄은 왼쪽에 숫자 두 줄 · 오른쪽에 주의 알약과 그 밑 어제 이후, 합계는 따로 줄 없이 달 알약 오른쪽에 두 줄(위 입항 · 아래 유통기한), 이름표 14px.
   --hz: 1은 app.js에 주는 신호(이 css가 있을 때만 새 마크업). #summary는 display: contents로 풀어 숫자(.hzn)와 시간줄(.hzl)이 카드의 칸에 바로 앉는다 */
:root { --hz: 1; }
@media (min-width: 1040px) {
  body.duo:not(.plan) .sumcard.hz { display: grid; align-items: center; column-gap: 18px; row-gap: 0; padding: 11px 16px 8px 18px; }
  body.duo:not(.plan) .sumcard.hz::after { content: none; }
  body.duo:not(.plan) .sumcard.hz #summary { display: contents; }
  body.duo .sumcard.hz .hzn { grid-area: n; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  body.duo .sumcard.hz .hk { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
  body.duo .sumcard.hz .hk .dot { display: inline-block; align-self: center; flex: none; width: 8px; height: 8px; border-radius: 50%; }
  body.duo .sumcard.hz .hk .dot.stock { background: var(--stock); box-shadow: none; border: 0; }
  body.duo .sumcard.hz .hk .dot.hold { background: var(--hold); box-shadow: none; border: 0; }   /* 두 점을 같은 맨 점으로 (2026-10-24, 사용자: 위 줄 점 갈무리와 "요 부분 깔끔하지 못한데???" — 창고 재고에만 옅은 초록 테가 둘려 크기가 달라 보였다) */
  body.duo .sumcard.hz .hk b { font-size: 17px; font-weight: 500; letter-spacing: -0.04em; line-height: 21px; }
  body.duo .sumcard.hz .hk small { font-size: 11px; font-weight: 500; color: var(--muted); }
  /* 주의: 제목은 숨기고 알약 셋을 한 줄로 (0건은 흐리게, 누르면 그 상태만). 옛 두 층 카드의 띠 규칙(베이지 면 · 여백 · 모서리)은 끈다 */
  body.duo:not(.plan) .sumcard.hz :is(.alerts, .alerts:is(:last-child, :has(+ .changes.line))) { grid-area: a; justify-self: end; display: flex; flex: none; flex-direction: row; align-items: center; gap: 6px; order: 0; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  body.duo:not(.plan) .sumcard.hz .atitle { display: none; }
  body.duo:not(.plan) .sumcard.hz .alerts .achips { flex-direction: row; flex-wrap: nowrap; gap: 5px; }
  body.duo:not(.plan) .sumcard.hz .achips > .achip { display: inline-flex; align-items: center; gap: 5px; height: 24px; margin: 0; padding: 0 9px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); white-space: nowrap; }
  body.duo:not(.plan) .sumcard.hz .achips > .achip[data-status="soon"] > span::before { background: var(--dred, #9e1b17); }   /* 점은 위 묶음의 span::before 하나(호박색); 유통기한 임박만 짙은 빨강 (시안) */
  body.duo:not(.plan) .sumcard.hz .achips > .achip.zero { opacity: 0.55; }
  body.duo:not(.plan) .sumcard.hz .achips > .achip > span, body.duo:not(.plan) .sumcard.hz .achips > .achip b { font-size: 11.5px; line-height: 15px; }
  body.duo:not(.plan) .sumcard.hz .achips > .achip[aria-pressed="true"] { border-color: var(--press); }
  body.duo:not(.plan) .sumcard.hz .achips > .achip[aria-pressed="true"] > span::before { background: var(--on-press); }
  /* 어제 이후: 주의 밑에 오른쪽 맞춤 한 줄(바뀐 건 없음은 글, 있으면 작은 알약). 옛 두 층 카드의 규칙(#changes display: contents · 위층 칸 · 띠)은 끈다 */
  body.duo:not(.plan) .sumcard.hz :is(.changes, .changes:not(.line), .changes.line) { grid-area: c; justify-self: end; display: flex; flex: none; flex-direction: row; align-items: center; gap: 6px; order: 0; max-width: none; margin: 3px 0 0; padding: 0; border: 0; font-size: 11px; }
  body.duo:not(.plan) .sumcard.hz .changes .since { order: 0; display: inline-flex; flex: none; flex-direction: row; align-items: baseline; gap: 4px; padding: 0; border: 0; font-size: 11px; line-height: 14px; color: var(--muted); white-space: nowrap; }
  body.duo:not(.plan) .sumcard.hz .changes .since::after { content: none; }
  body.duo:not(.plan) .sumcard.hz .changes .since b { font-size: 12px; line-height: 15px; font-weight: 700; }
  body.duo:not(.plan) .sumcard.hz .changes .since b small { font-size: 10.5px; }
  body.duo:not(.plan) .sumcard.hz .changes .none { font-size: 11.5px; font-weight: 500; }
  body.duo:not(.plan) .sumcard.hz .changes .row { order: 0; flex: none; flex-wrap: nowrap; gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; }
  body.duo:not(.plan) .sumcard.hz .changes .row::before { content: none; }
  body.duo:not(.plan) .sumcard.hz .changes .row > .alert.chg { height: 20px; padding: 0 7px; }
  body.duo:not(.plan) .sumcard.hz .changes .row > .alert.chg :is(i, b) { font-size: 11px; }
  /* 시간줄: 칸마다 위 50px(입항 이름표 14px × 3) · 가운데 28px(달 알약 + 합계 두 줄) · 아래 50px(유통기한 이름표), 가운데 먹색 줄(64px)이 칸을 가로지른다.
     같은 날 "폰트는 조금 작아도 돼. 압축시키면서도 보기 좋은 비율로 표현해줘.": 이름표 10.5px · 합계 11px · 위 숫자 17px로 한 단계씩 낮춤 */
  body.duo .sumcard.hz .hzl { grid-area: l; position: relative; display: grid; margin-top: 7px; }
  body.duo .sumcard.hz .hzl::before { content: ""; position: absolute; right: 0; top: 64px; border-top: 1.5px solid var(--fg); }
  body.duo .sumcard.hz .hzc { display: grid; min-width: 0; }
  body.duo .sumcard.hz :is(.hzu, .hzd) { display: flex; align-items: stretch; gap: 2px; min-width: 0; margin-left: 12px; padding-left: 8px; padding-right: 8px; border-left: 1.5px solid var(--edge); overflow: hidden; }
  body.duo .sumcard.hz .hzu { flex-direction: column-reverse; }
  body.duo .sumcard.hz .hzd { flex-direction: column; }
  body.duo .sumcard.hz .hzt { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 5px; flex: none; height: 14px; padding: 0 6px; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, #8f8275 34%, var(--surface)) var(--w, 0%), color-mix(in srgb, #8f8275 9%, var(--surface)) var(--w, 0%)); font-size: 10.5px; font-weight: 600; line-height: 14px; white-space: nowrap; cursor: pointer; }
  body.duo .sumcard.hz .hzt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.duo .sumcard.hz .hzt small { flex: none; font-size: 9.5px; font-weight: 600; color: color-mix(in srgb, var(--fg) 62%, transparent); }
  body.duo .sumcard.hz .hzd .hzt { background: linear-gradient(90deg, color-mix(in srgb, var(--warn) 38%, var(--surface)) var(--w, 0%), color-mix(in srgb, var(--warn) 10%, var(--surface)) var(--w, 0%)); }
  body.duo .sumcard.hz .hzd.red .hzt { background: color-mix(in srgb, var(--dred, #9e1b17) 13%, var(--surface)); color: var(--dred, #9e1b17); }
  body.duo .sumcard.hz .hzt.dim, body.duo .sumcard.hz .hzd .hzt.dim { background: transparent; box-shadow: inset 0 0 0 1px var(--line2); color: var(--muted); }
  body.duo .sumcard.hz .hzt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  @media (hover: hover) { body.duo .sumcard.hz button.hzt:not(:disabled):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 35%, transparent); } }
  body.duo .sumcard.hz .hza { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
  body.duo .sumcard.hz .hzm { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--fg); font-size: 11px; font-weight: 700; line-height: 15px; white-space: nowrap; }
  body.duo .sumcard.hz .hzc.now .hzm { background: var(--fg); color: var(--surface); }
  body.duo .sumcard.hz .hzc.end .hzm { box-shadow: inset 0 0 0 1.5px var(--edge); color: var(--muted); }
  /* 1179px 아래(카드 600~740px): 이름표 · 여백을 줄여 줄임표로, 1099px 아래는 위 줄을 숫자 · 주의 · 어제 이후 한 줄씩 */
  @media (max-width: 1179px) {
    body.duo .sumcard.hz :is(.hzu, .hzd) { margin-left: 8px; padding-left: 5px; padding-right: 3px; }
    body.duo .sumcard.hz .hzt { padding: 0 4px; font-size: 10px; }
    body.duo .sumcard.hz .hzm { padding: 1px 6px; font-size: 10.5px; }
    body.duo .sumcard.hz .hza { gap: 4px; }
  }
  @media (max-width: 1099px) {
    body.duo:not(.plan) .sumcard.hz :is(.alerts, .alerts:is(:last-child, :has(+ .changes.line)), .changes, .changes:not(.line), .changes.line) { justify-self: start; }
    body.duo:not(.plan) .sumcard.hz :is(.alerts, .alerts:is(:last-child, :has(+ .changes.line))) { margin-top: 6px; }
  }
}
/* 깃발 시간줄: 합계를 칸 안 첫 줄로 · 초기화 칩 (2026-10-24, 시안/PC요약카드-시안12-다-칸안첫줄.png "다.로 진행.", 같은 날 "초기화 버튼을 만들어줘야할것 같아.").
   합계(.hzs)는 이름표 무리의 첫 줄(위 칸은 달 줄 바로 위, 아래 칸은 바로 아래)에 12.5px 굵게, 달 줄에는 알약만. 이름표는 칸마다 둘. 칸 52 · 24 · 52px(먹색 줄 64px 그대로) */
@media (min-width: 1040px) {
  body.duo .sumcard.hz .hzc { grid-template-rows: 52px 24px 52px; }
  body.duo .sumcard.hz .hzs { flex: none; display: block; height: 16px; font-size: 12.5px; font-weight: 700; line-height: 16px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.duo .sumcard.hz .hzs small { margin-left: 2px; font-size: 10px; font-weight: 500; color: var(--muted); }
  body.duo .sumcard.hz .hzd .hzs { color: var(--warn-t); }
  body.duo .sumcard.hz .hzs.red { color: var(--dred, #9e1b17); }
  body.duo .sumcard.hz .hzc.end .hzs { color: var(--muted); }
  body.duo .sumcard.hz .hzu { padding-bottom: 4px; }
  body.duo .sumcard.hz .hzd { padding-top: 4px; }
  /* 초기화 칩: 먹색 알약에 검색어, 오른쪽 끝 안쪽 칸이 '✕ 초기화' */
  body.duo .sumcard.hz .hzr { all: unset; grid-area: r; justify-self: start; margin-top: 6px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 280px; padding: 0 3px 0 10px; border-radius: 999px; background: var(--fg); color: var(--surface); font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
  body.duo .sumcard.hz .hzr q { quotes: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 750; }
  body.duo .sumcard.hz .hzr span { flex: none; margin: 0; color: var(--surface); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 8px 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 18%, transparent); }
  body.duo .sumcard.hz .hzr svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  body.duo .sumcard.hz .hzr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (hover: hover) { body.duo .sumcard.hz .hzr:hover span { background: color-mix(in srgb, var(--surface) 30%, transparent); } }
}
/* 깃발 시간줄 펼침 (2026-10-24, 사용자: "유통기한 임박 품목이 2품목밖에 없는건가? 더 있지 않아??? 아래로 확장 할 수 있게 해주면 좋을것 같은데???"):
   합계 옆 '외 n' = 그 칸에 숨은 품목 수, 위 줄의 '품목 모두 보기 n' 단추(.hzv)를 누르면 칸마다 여덟 품목까지. 펼친 칸 높이는 app.js가 --hu · --hd로 준다(모든 칸 같은 높이라 달 줄이 이어진다) */
@media (min-width: 1040px) {
  body.duo .sumcard.hz .hzo { margin-left: 5px; font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--muted); }
  body.duo .sumcard.hz .hzv { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; margin-top: 3px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; }
  body.duo .sumcard.hz .hzv svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
  body.duo .sumcard.hz .hzv[aria-expanded="true"] svg { transform: rotate(180deg); }
  body.duo .sumcard.hz .hzv:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (hover: hover) { body.duo .sumcard.hz .hzv:hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); } }
  body.duo .sumcard.hz .hzl.open .hzc { grid-template-rows: var(--hu, 52px) 24px var(--hd, 52px); }
  body.duo .sumcard.hz .hzl.open::before { top: calc(var(--hu, 52px) + 12px); }
  body.duo .sumcard.hz .hzc.end .hzd .hzt.dim { background: transparent; }
  @media (max-width: 1179px) { body.duo .sumcard.hz .hzo { display: none; } }
}
/* 깃발 시간줄 왼쪽 칸 이름 (2026-10-24, 사용자: 위 칸을 보내며 "윗부분은 뭘 의미하는거야???" → "응 붙여줘."): 시간줄 맨 앞 60px 칸에 위 '들어올 것 · 입항 ↑', 아래 '먼저 팔 것 · 유통기한 ↓'.
   칸 높이는 이웃 칸과 같은 줄 틀(52 · 24 · 52, 펼치면 --hu · --hd)이라 글이 달 줄 바로 위 · 아래에 붙는다. 먹색 줄은 이 칸 다음부터 */
@media (min-width: 1040px) {
  body.duo .sumcard.hz .hzl { grid-template-columns: 60px repeat(6, minmax(0, 1fr)) minmax(0, 1.2fr); }
  body.duo .sumcard.hz .hzl::before { left: 60px; }
  body.duo .sumcard.hz .hzg { display: grid; grid-template-rows: 52px 24px 52px; min-width: 0; }
  body.duo .sumcard.hz .hzl.open .hzg { grid-template-rows: var(--hu, 52px) 24px var(--hd, 52px); }
  body.duo .sumcard.hz .hzg span { display: flex; flex-direction: column; gap: 1px; font-size: 11px; font-weight: 700; line-height: 13px; color: var(--fg); word-break: keep-all; }
  body.duo .sumcard.hz .hzg i { font-style: normal; font-size: 10px; font-weight: 500; color: var(--muted); }
  body.duo .sumcard.hz .hzg .gu { justify-content: flex-end; padding-bottom: 4px; }
  body.duo .sumcard.hz .hzg .gd { justify-content: flex-start; padding-top: 4px; color: var(--warn-t); }
  @media (max-width: 1179px) {
    body.duo .sumcard.hz .hzl { grid-template-columns: 46px repeat(6, minmax(0, 1fr)) minmax(0, 1.2fr); }
    body.duo .sumcard.hz .hzl::before { left: 46px; }
    body.duo .sumcard.hz .hzg span { font-size: 10px; line-height: 12px; }
    body.duo .sumcard.hz .hzg i { font-size: 9px; }
  }
}
/* 펼치기 단추를 작은 둥근 아이콘으로 (2026-10-24, "확장 버튼을 아이콘으로 작게 만들어주는게 깔끔할 것 같은데..?"): 위 줄에서 빼 달 줄 오른쪽 끝(그 뒤 칸의 줄 칸)에 22px 동그라미 ⌄, 펼치면 ⌃ */
@media (min-width: 1040px) {
  body.duo .sumcard.hz .hzv { grid-area: auto; justify-self: auto; width: 22px; height: 22px; padding: 0; justify-content: center; gap: 0; border: 1.5px solid var(--fg); background: var(--surface); }
  body.duo .sumcard.hz .hzv svg { width: 14px; height: 14px; stroke-width: 2.2; }
  body.duo .sumcard.hz .hzv[aria-expanded="true"] { background: var(--fg); color: var(--surface); }
}
/* 펼치기 단추를 카드 아래 가장자리 한가운데로 ("가운데에 버튼으로 만들어주면 좋을것 같아."): 반쯤 카드 밖에 걸친 22px 동그라미, 아래 묶음 카드와의 틈에 앉는다 */
@media (min-width: 1040px) {
  body.duo:not(.plan) .sumcard.hz { position: relative; overflow: visible; }
  body.duo .sumcard.hz .hzv { position: absolute; left: 50%; bottom: -11px; z-index: 3; margin: 0; transform: translateX(-50%); box-shadow: 0 2px 6px rgba(33, 12, 2, 0.12); }
}

/* 폰 재고 탭 '한 달씩 넘기기' (2026-10-24, 시안/폰시간줄-시안.png 나, "추천대로 나로 가자."): 요약 카드 맨 아래(주의 알약 띠 밑)에 달 줄 + 옆으로 미는 한 달 한 장 판.
   판은 들어올 것(입항) | 먼저 팔 것(유통기한) 두 쪽, 이름표는 PC 깃발 시간줄의 막대 이름표(--w = 그 쪽 최대 대비 양)를 폰 크기로. --mz: 1은 app.js에 주는 신호(이 css가 있을 때만 그린다) */
:root { --mz: 1; }
body:not(.duo) .sumcard .mz { padding: 11px 0 12px; border-top: 1px solid var(--line); }
/* 달 줄: 가운데 먹색 줄 위에 알약, 고른 달은 먹색 면 + 밑 꺾쇠. 넘치면(좁은 폰 · 냉장 주) 옆으로 밀리고 고른 알약을 가운데로 (mzMark) */
body:not(.duo) .mz .mzr { margin: 0 13px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
body:not(.duo) .mz .mzr::-webkit-scrollbar { display: none; }
body:not(.duo) .mz .mzri { position: relative; display: flex; justify-content: space-between; gap: 4px; box-sizing: border-box; width: max-content; min-width: 100%; padding: 3px 3px 9px; }
body:not(.duo) .mz .mzri::before { content: ""; position: absolute; left: 3px; right: 3px; top: 13px; border-top: 1.5px solid var(--fg); }
body:not(.duo) .mz .mzm { all: unset; position: relative; box-sizing: border-box; flex: none; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--fg); color: var(--fg); font-size: 12px; font-weight: 700; line-height: 22px; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body:not(.duo) .mz .mzm.late:not(.sel) { box-shadow: inset 0 0 0 1.5px var(--dred, #a01210); color: var(--dred, #a01210); }   /* 지금: 유통기한이 이미 지난 건이 있을 때만 */
body:not(.duo) .mz .mzm.end:not(.sel) { box-shadow: inset 0 0 0 1.5px var(--edge); color: var(--muted); }
body:not(.duo) .mz .mzm.sel { color: var(--surface); }
body:not(.duo) .mz .mzm.sel::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -4px; border: 4px solid transparent; border-top: 5px solid var(--fg); }
body:not(.duo) .mz .mzm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 판: 한 장이 카드 폭 그대로, 한 번에 한 장씩 (scroll-snap-stop). 좌우로만 (같은 날 사용자: "핸드폰에서 너무 둥둥 떠다니는데 좌우로만 움직이게해줘" — '외 n품목' 단추의 음수 아래 여백이 판을 4px 위아래로도 넘치게 해
   폰이 판을 위아래로도 끌고 튕겼다. 여백을 고치고 overflow-y: hidden으로 위아래 스크롤을 아예 없앤다) */
body:not(.duo) .mz .mzp { display: flex; align-items: flex-start; margin-top: 3px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
body:not(.duo) .mz .mzp::-webkit-scrollbar { display: none; }
body:not(.duo) .mz .mzg { flex: 0 0 100%; box-sizing: border-box; min-width: 0; padding: 0 16px; scroll-snap-align: start; scroll-snap-stop: always; }
/* 품목을 모두 보이므로("8개 넘어도 펼쳐져있게 하자.") 판 묶음의 높이는 고른 달 판의 길이(app.js mzMark: height · --mzh)를 따라 부드럽게 늘고 준다. 다른 판은 그 높이에서 잘려 위아래로 넘치지 않는다 */
body:not(.duo) .mz .mzp { transition: height 0.22s ease; }
body:not(.duo) .mz .mzg { align-self: flex-start; max-height: var(--mzh, none); overflow: hidden; transition: max-height 0.22s ease; }
@media (prefers-reduced-motion: reduce) { body:not(.duo) .mz :is(.mzp, .mzg) { transition: none; } }
body:not(.duo) .mz .mzp.still, body:not(.duo) .mz .mzp.still .mzg { transition: none; }   /* 손가락이 판에 닿아 있는 동안(app.js): 늘고 주는 중이던 높이를 끝값으로 끊는다 (미는 동안 판 묶음의 크기가 바뀌면 아이폰이 두 판 사이에 선다) */
/* 펼치기 ("10개 까지는 표시해주고 10개 이상이면 펼침 아이콘으로 펼쳐지게 하자."): 판 아래 가운데 26px 동그라미 ⌄, 펼치면 먹색 면 ⌃ (PC 깃발 시간줄의 .hzv와 같은 꼴). 누르는 자리는 ::after로 넓힌다 */
body:not(.duo) .mz .mzv { all: unset; position: relative; box-sizing: border-box; display: grid; place-items: center; width: 26px; height: 26px; margin: 10px auto 4px; border: 1.5px solid var(--fg); border-radius: 50%; background: var(--surface); color: var(--fg); box-shadow: 0 2px 6px rgba(33, 12, 2, 0.12); cursor: pointer; -webkit-tap-highlight-color: transparent; }
body:not(.duo) .mz .mzv::after { content: ""; position: absolute; inset: -4px -12px; }
body:not(.duo) .mz .mzv svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body:not(.duo) .mz .mzv[aria-expanded="true"] { background: var(--fg); color: var(--surface); }
body:not(.duo) .mz .mzv[aria-expanded="true"] svg { transform: rotate(180deg); }
body:not(.duo) .mz .mzv:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body:not(.duo) .mz .mzk { display: flex; align-items: baseline; gap: 6px; min-width: 0; margin-bottom: 7px; font-size: 13px; font-weight: 700; white-space: nowrap; }
body:not(.duo) .mz .mzk span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 500; color: var(--muted); }
body:not(.duo) .mz .mz2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
body:not(.duo) .mz .mzs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body:not(.duo) .mz .mzs + .mzs { padding-left: 12px; border-left: 1px solid var(--line2); }
body:not(.duo) .mz .mzh { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
body:not(.duo) .mz .mzh > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body:not(.duo) .mz .mzh i { margin-left: 3px; font-style: normal; font-size: 10px; font-weight: 500; color: var(--muted); }
body:not(.duo) .mz .mzh b { flex: none; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
body:not(.duo) .mz .mzh b small { margin-left: 1px; font-size: 10.5px; font-weight: 500; color: var(--muted); }
body:not(.duo) .mz .mzs.dn .mzh > span, body:not(.duo) .mz .mzs.dn .mzh b { color: var(--warn-t); }
body:not(.duo) .mz .mzs.red .mzh > span, body:not(.duo) .mz .mzs.red .mzh b { color: var(--dred, #a01210); }
/* 막대 이름표: 진한 부분(--w)이 그 쪽 최대 대비 양, 이름 왼쪽 · 톤 오른쪽. 그 뒤 판은 막대 없이 테만(PC와 같다) */
body:not(.duo) .mz .mzb { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 26px; padding: 0 6px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, #8f8275 34%, var(--surface)) var(--w, 0%), color-mix(in srgb, #8f8275 9%, var(--surface)) var(--w, 0%)); color: var(--fg); font-size: 12px; font-weight: 600; line-height: 26px; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body:not(.duo) .mz .mzb span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body:not(.duo) .mz .mzb small { flex: none; font-size: 10.5px; font-weight: 600; color: color-mix(in srgb, var(--fg) 62%, transparent); }
body:not(.duo) .mz .dn .mzb { background: linear-gradient(90deg, color-mix(in srgb, var(--warn) 38%, var(--surface)) var(--w, 0%), color-mix(in srgb, var(--warn) 10%, var(--surface)) var(--w, 0%)); }
body:not(.duo) .mz .red .mzb { background: color-mix(in srgb, var(--dred, #a01210) 13%, var(--surface)); color: var(--dred, #a01210); }
body:not(.duo) .mz .mzb.dim, body:not(.duo) .mz .dn .mzb.dim { background: transparent; box-shadow: inset 0 0 0 1px var(--line2); color: var(--muted); }
body:not(.duo) .mz .mzb:disabled { cursor: default; }
body:not(.duo) .mz .mzb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
body:not(.duo) .mz .mzb:active:not(:disabled) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 35%, transparent); }
body:not(.duo) .mz .mz0 { padding: 4px 0; color: var(--muted); font-size: 11.5px; }
/* 좁은 카드(320px 폰 등): 쪽 이름 옆 '입항 · 유통기한'을 숨겨 합계 톤이 잘리지 않게 */
@container sumcard (max-width: 340px) {
  body:not(.duo) .mz .mzh i { display: none; }
  body:not(.duo) .mz .mzm { padding: 0 6px; font-size: 11px; }
  body:not(.duo) .mz .mzg { padding: 0 12px; }
  body:not(.duo) .mz .mzr { margin: 0 9px; }
}

/* 낱박스 알약 (2026-10-24, "낱박스 필터링도 필요해 … 버튼하나를 만들고"): 경고가 아니라 팔 것을 찾는 단추라 점을 창고 재고의 초록으로 (다른 주의 알약은 호박색 · PC의 유통기한 임박은 짙은 빨강). 눌렀을 때의 점 색은 각 판의 규칙 그대로 */
#alerts .achip[data-status="loose"]:not([aria-pressed="true"]) > span::before { background: var(--stock); }   /* #alerts: 폰 · PC의 점 규칙(클래스 여섯 개)보다 무겁게 */

/* PC 깃발 시간줄을 펼치면 묶음 카드 위로 겹쳐 띄운다 (2026-10-24, 시안/PC펼침공간-시안.png 다, "가 처럼 딱 붙이고 다를 적용하자."): #dock은 접힌 높이(app.js duoSync가 적는 height)만 차지하고,
   요약 카드는 그 안에서 떠서 아래로 펼쳐진다. 왼쪽 검색 카드는 제 높이(--duoTop = 검색 카드)라 목록 카드가 바로 밑에서 시작한다 */
@media (min-width: 1040px) {
  body.duo:not(.plan) #dock.float { position: relative; z-index: 30; }
  body.duo:not(.plan) #dock.float > .sumcard.hz { position: absolute; left: 0; right: 0; top: 0; min-height: 0; box-shadow: 0 22px 48px rgba(33, 12, 2, 0.22), 0 2px 8px rgba(33, 12, 2, 0.08); }
}

/* PC 스케쥴 탭 요약 카드 '노선도' (2026-10-24, 시안/스케쥴요약-시안2.png 라, "노선도 이쁘다. 추천해준대로 진행하자."; app.js planSummary): 위 줄 왼쪽 '입항 · 통관 대기 n건 · t톤', 오른쪽 주의 · 어제 이후 알약,
   그 밑 가로 먹색 줄에 역 일곱(입항일 미정 → 그 이후 → 다음 주 → 이번 주 → 입항 · 입고 전 → 입고 · 통관 전 → 재고). 줄은 앞 단계 옅게 · 이번 주부터 먹색 · 기다림 구간 호박색 · 재고 초록, 이번 주 역은 먹색 면.
   이번 주 입고(.pinb)가 있으면 맨 아래 띠. --route: 1은 app.js에 주는 신호(이 css가 있을 때만 노선도를 그린다) */
:root { --route: 1; }
@media (min-width: 1040px) {
  body.duo.plan .sumcard.route .summary > .rh { order: 1; flex: 1 1 auto; min-width: 0; padding: 15px 0 0 20px; font-size: 13px; font-weight: 700; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.duo.plan .sumcard.route .summary > .rh small { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
  body.duo.plan .sumcard.route :is(.alerts, .changes) { order: 2; flex: none; padding: 15px 0 0 8px; border-top: 0; background: none; }
  body.duo.plan .sumcard.route .changes { order: 3; flex: none; padding-right: 20px; }
  body.duo.plan .sumcard.route .alerts:last-child { flex: none; padding-right: 20px; }
  body.duo.plan .sumcard.route :is(.alerts, .changes)::before { content: none; }
  body.duo.plan .sumcard.route .atitle { display: none; }
  body.duo.plan .sumcard.route :is(.achips > .achip, .changes .row > .alert.chg) { height: 24px; padding: 0 9px; }
  body.duo.plan .sumcard.route :is(.achips > .achip, .changes .row > .alert.chg) :is(span, i, b), body.duo.plan .sumcard.route .changes :is(.since, .none), body.duo.plan .sumcard.route .changes.line { font-size: 11.5px; }
  body.duo.plan .sumcard.route .summary > .rt { order: 4; flex: 0 0 100%; box-sizing: border-box; padding: 8px 20px 14px; }
  body.duo.plan .sumcard.route .rti { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
  body.duo.plan .sumcard.route .rti::before { content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 24px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--fg) 28%, transparent) 0 50%, var(--fg) 50% calc(100% * 4 / 6), var(--hold) calc(100% * 4 / 6) calc(100% * 5.5 / 6), var(--stock) calc(100% * 5.5 / 6)); }
  body.duo.plan .sumcard.route .rst { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 4px 2px; border-radius: 10px; color: var(--fg); }
  body.duo.plan .sumcard.route button.rst { cursor: pointer; }
  @media (hover: hover) { body.duo.plan .sumcard.route button.rst:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); } }
  body.duo.plan .sumcard.route .rst:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  /* 맨 위 묶음의 .summary span(줄 단위 · 흐린 글자 · 위 여백 2px)과 .summary .dot(흐림 0.6)이 역의 span에도 걸려서 여기서 되돌린다 */
  body.duo.plan .sumcard.route .rst :is(.k, .n, .w) { margin: 0; }
  body.duo.plan .sumcard.route .rst .x .md { display: inline; margin: 0; font-size: inherit; color: inherit; }
  body.duo.plan .sumcard.route .rst .k { display: block; max-width: 100%; height: 16px; font-size: 11.5px; font-weight: 700; line-height: 16px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.duo.plan .sumcard.route .rst .k em { margin-left: 4px; font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--muted); }
  body.duo.plan .sumcard.route .rst .dot { position: relative; z-index: 1; display: block; flex: none; width: 14px; height: 14px; margin: 3px 0 7px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--fg) 45%, transparent); vertical-align: 0; opacity: 1; }
  body.duo.plan .sumcard.route .rst.now .dot { width: 18px; height: 18px; margin: 1px 0 5px; background: var(--fg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 14%, transparent); }
  body.duo.plan .sumcard.route .rst.wait .dot { box-shadow: inset 0 0 0 3px var(--hold); }
  body.duo.plan .sumcard.route .rst.wait .k { color: var(--warn-t); }
  body.duo.plan .sumcard.route .rst.end .dot { background: var(--stock); box-shadow: 0 0 0 4px color-mix(in srgb, var(--stock) 18%, transparent); }
  body.duo.plan .sumcard.route .rst.end :is(.k, .w) { color: var(--ok-t); }
  body.duo.plan .sumcard.route .rst .n { display: block; color: var(--fg); font-size: 21px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; }
  body.duo.plan .sumcard.route .rst .n small { margin-left: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
  body.duo.plan .sumcard.route .rst .w { font-size: 11.5px; line-height: 16px; color: var(--muted); white-space: nowrap; }
  body.duo.plan .sumcard.route .rst .x { display: block; max-width: 100%; margin-top: 2px; font-size: 11px; line-height: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.duo.plan .sumcard.route .rst .x b { font-weight: 700; color: var(--dred, #a01210); }
  body.duo.plan .sumcard.route .summary > .pinb { order: 5; flex: 0 0 100%; padding: 9px 20px; }
  @media (max-width: 1279px) { body.duo.plan .sumcard.route .rst .x .md { display: none; } }   /* 좁은 PC: 기다림 역은 최장만 */
  @media (max-width: 1179px) {
    body.duo.plan .sumcard.route .summary > .rt { padding-inline: 12px; }
    body.duo.plan .sumcard.route .summary > .rh { padding-left: 14px; }
    body.duo.plan .sumcard.route .rst .k { font-size: 11px; } body.duo.plan .sumcard.route .rst .k em { display: none; }
    body.duo.plan .sumcard.route .rst .n { font-size: 18px; }
  }
}

/* PC 머리 줄을 높이고 로고 · 제목을 키움 (2026-10-24, 사용자: 머리 줄 갈무리 "pc 버전에서 이부분 높이를 조금 더 높이고 로고를 키우자. 그리고 타이틀 폰트도 더 키우고. 시안 먼저 보여줄래?"
   → 시안/PC머리크기-시안.png의 나, "추천대로 진행하자."): 높이 60 → 80px(아래 판 시작 66 → 86px), 로고 58×44 → 86×65, 제목 24 → 31px(칸 폭도 비례해 102 → 132px).
   좁은 PC(1179px 이하)는 제목 29px · 124px. 1040px에서는 오른쪽 환율 줄 끝이 줄임표로 줄어든다(시안에서 확인) */
@media (min-width: 1040px) {
  body.duo .cols .head { height: 80px; }
  body.duo > .wrap { padding-top: 86px; }
  body.duo .cols .head::before { width: 86px; height: 65px; }
  body.duo .cols .head h1.ptitle { font-size: 31px; width: 132px; line-height: 1.2; }
}
@media (min-width: 1040px) and (max-width: 1179px) {
  body.duo .cols .head h1.ptitle { font-size: 29px; width: 124px; }
}

/* PC 재고 탭 주의 알약을 트랙으로 (2026-10-24, 사용자: 24px 알약 넷을 보내며 "이부분 버튼들이 너무 눈에 안띄는데 나름 중요한 버튼들이야" → 시안/PC주의알약-시안.png(가 숫자 타일) "가 좋은데 너무 안어울려"
   → 시안/PC주의알약-시안2.png 바 '트랙' "바가 좋아보이긴한데. 너무 크지않나 싶어 살짝만 조정해줘봐." → 시안/PC주의알약-시안3.png 36px "오케이 추천대로 진행해줘."):
   머리 줄 탭과 같은 귀리색 트랙(한 단계 작게: 36px, 안쪽 3px) 안에 넷, 이름 12.5px · 숫자 14px 굵게, 누른 것은 흰 알약(탭과 같음), 점 색은 그대로(유통기한 임박 짙은 빨강 · 낱박스 초록 · 나머지 호박색), 0건은 숫자를 흐리게 */
@media (min-width: 1040px) {
  body.duo:not(.plan) .sumcard.hz #alerts .achips { display: inline-flex; gap: 0; padding: 3px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent); }
  body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip { height: 30px; gap: 5px; padding: 0 12px; border: 0; border-radius: 999px; background: none; box-shadow: none; opacity: 1; cursor: pointer; }
  body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip:disabled { cursor: default; }
  body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip > span { font-size: 12.5px; font-weight: 600; line-height: 16px; color: var(--muted); }
  body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip b { font-size: 14px; font-weight: 750; letter-spacing: -0.02em; line-height: 16px; color: var(--fg); }
  body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip.zero b { font-weight: 500; color: var(--muted); }
  @media (hover: hover) { body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip:not(:disabled):not([aria-pressed="true"]):hover > span { color: var(--fg); } }
  body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(33, 12, 2, 0.08), 0 0 0 1px var(--edge); }
  body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip[aria-pressed="true"] > span { color: var(--fg); }
  body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip[aria-pressed="true"] > span::before { background: var(--warn); }   /* 눌러도 점 색은 그대로 (예전 규칙은 누르면 바탕색 점) */
  body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip[data-status="soon"] > span::before { background: var(--dred, #a01210); }
  body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip[data-status="loose"] > span::before { background: var(--stock); }
  body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
}

/* 일부 만료 (2026-10-24, "일부 만료로 진행하자. 늦은날짜까지 완전히 지나면 만료."; app.js expiryPart · partCls · partNote): 유통기한 범위의 앞 날짜만 지난 건은
   빨간 면의 '만료'(.dbad)와 구분되게 빨간 테두리 + 옅은 빨강 면, 상세에는 끝 날짜까지 남은 날(.pend)을 흐린 글자로 */
:is(.dbad, .lot span.dbad, .key span.dbad).part { background: color-mix(in srgb, #a01210 8%, transparent); color: #a01210; box-shadow: inset 0 0 0 1.5px #a01210; }
.pend { margin-left: 4px; font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }

/* 시간줄 '이미 지남'의 일부 만료 이름표 (2026-10-24, "이미 지남에 두고 '일부' 표시"; app.js hzCols items의 셋째 값): 품목 이름 바로 뒤에 목록의 '일부 만료' 뱃지와 같은 빨간 테두리 꼬리표 */
:is(body.duo .sumcard.hz .hzt, body:not(.duo) .mz .mzb) > .hzp { flex: none; margin-right: auto; padding: 0 4px; border-radius: 3px; box-shadow: inset 0 0 0 1px currentColor; font-size: 0.82em; font-style: normal; font-weight: 700; line-height: 1.35; }

/* 필터 줄 '초기화'를 눈에 띄게 (2026-10-24, 사용자: "초기화 버튼을 눈에 띄게표현해줄래 시안 몇개만 만들어줘." → 시안/초기화버튼-시안.png → "아이콘은 가를 쓰고 다로 진행해줘."):
   표 생성과 같은 빨강(--cta)으로 채운 알약 + 흰 글자 + ↺ (app.js ICON.reset). 켜진 필터 칩은 먹색 채움이라 빨강이어야 '필터 하나'로 안 보인다. 재고 · 단가표 탭, 폰 · PC 모두 */
.fbar .chip.clear { display: inline-flex; align-items: center; gap: 4px; border-color: var(--cta); background: var(--cta); color: #fff; font-weight: 700; box-shadow: 0 2px 6px color-mix(in srgb, var(--cta) 30%, transparent); }
.fbar .chip.clear svg { flex: none; width: 14px; height: 14px; opacity: 1; }
.fbar.ovf .chip.clear { box-shadow: 0 2px 6px color-mix(in srgb, var(--cta) 30%, transparent), -14px 0 0 4px var(--bg), 0 0 0 10px var(--bg); }   /* 오른쪽 끝에 붙을 때 밑으로 지나가는 칩을 가리는 바탕 그림자는 그대로 */
.fbar .chip.clear:active { background: color-mix(in srgb, var(--cta) 86%, #000); }
@media (min-width: 1040px) {
  body.duo .top .fbar .chip.clear { gap: 4px; padding: 0 12px 0 10px; border-color: var(--cta); background: var(--cta); color: #fff; font-weight: 700; }
  body.duo .top .fbar .chip.clear svg { width: 13px; height: 13px; opacity: 1; }
  @media (hover: hover) { body.duo .top .fbar .chip.clear:hover { border-color: color-mix(in srgb, var(--cta) 86%, #000); background: color-mix(in srgb, var(--cta) 86%, #000); } }
}

/* 폰 재고 탭 요약 숫자 '그림 역' (2026-10-24, 시안/폰요약도식-시안.png 바, "바로 가자. 바가 좋다."; app.js flowSummary · flowOn): 배 → 세관 → 창고 아이콘을 선으로 잇고(바다 구간은 점선)
   밑에 이름 · 톤 · 박스. 창고 재고만 초록 면 · 큰 숫자. 검색 · 필터 중에는 app.js가 예전 한 줄 세 칸을 그린다. --flow: 1은 app.js에 주는 신호(이 css가 있을 때만 그린다).
   예전 세 칸의 규칙(.summary dd · span …)과 섞이지 않게 #summary로 묶는다 */
:root { --flow: 1; }
body:not(.duo) .sumcard.flow:not(.qmode) #summary { display: block; padding: 14px 12px 12px; --inc: #8f8275; font-variant-numeric: tabular-nums; color: var(--fg); }
body:not(.duo) .sumcard.flow #summary .fh { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
body:not(.duo) .sumcard.flow #summary .fh b { font-weight: 600; } body:not(.duo) .sumcard.flow #summary .fh em { font-style: normal; font-weight: 650; color: var(--fg); }
body:not(.duo) .sumcard.flow #summary .fl { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
body:not(.duo) .sumcard.flow #summary .fl::before { content: ""; position: absolute; left: 16.67%; width: 33.33%; top: 21px; border-top: 2px dashed color-mix(in srgb, var(--fg) 45%, transparent); }   /* 바다: 아직 들어오는 길 */
body:not(.duo) .sumcard.flow #summary .fl::after { content: ""; position: absolute; left: 50%; width: 33.33%; top: 21px; border-top: 2px solid var(--fg); }
body:not(.duo) .sumcard.flow #summary .fs { position: relative; z-index: 1; min-width: 0; }
body:not(.duo) .sumcard.flow #summary .fs.i { --c: var(--inc); } body:not(.duo) .sumcard.flow #summary .fs.h { --c: var(--hold); } body:not(.duo) .sumcard.flow #summary .fs.s { --c: var(--stock); }
body:not(.duo) .sumcard.flow #summary .fi { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--c); color: var(--c); }
body:not(.duo) .sumcard.flow #summary .fi svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body:not(.duo) .sumcard.flow #summary .fs.s .fi { background: var(--stock); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--stock) 20%, transparent); }
body:not(.duo) .sumcard.flow #summary .fn { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
body:not(.duo) .sumcard.flow #summary .fv { font-size: 22px; line-height: 26px; font-weight: 500; letter-spacing: -0.05em; white-space: nowrap; }
body:not(.duo) .sumcard.flow #summary .fs.s .fv { font-size: 26px; line-height: 30px; }
body:not(.duo) .sumcard.flow #summary .fv small { margin-left: 2px; font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: 1; color: var(--muted); }
body:not(.duo) .sumcard.flow #summary .fk { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:not(.duo) .sumcard.flow #summary .fk b { font-weight: inherit; white-space: nowrap; }   /* 좁으면 '박스' · '건' 사이에서만 줄을 바꾼다 */
@media (max-width: 359px) { body:not(.duo) .sumcard.flow #summary .fv { font-size: 19px; } body:not(.duo) .sumcard.flow #summary .fs.s .fv { font-size: 22px; } body:not(.duo) .sumcard.flow #summary .fk { font-size: 10.5px; white-space: normal; } }   /* 320px: '168,814박스 · 364건'이 잘리지 않고 두 줄로 */

/* 폰 스케쥴 탭 요약 숫자 '그림 역' (2026-10-24, 시안/폰스케쥴도식-시안.png 가, "좋아 가 로 가자."; app.js planSummary의 pflow): 재고 탭 그림 역과 같은 아이콘 역.
   다음 주 ⇢ 이번 주(먹색 면) ⇢ 입고 전 → 통관 전 → 재고(누르면 재고 탭). 다섯 칸 같은 너비라 역 가운데는 10% · 30% · 50% · 70% · 90%
   (같은 날 사용자: "재고 아이콘도 동일한 사이즈로 표현해줘." — 처음에는 재고만 30px 작은 끝 역 · 칸 0.72였다) */
body.plan:not(.duo) #summary > .pf { grid-column: 1 / -1; --inc: #8f8275; font-variant-numeric: tabular-nums; color: var(--fg); padding: 0 0 4px; }
body.plan:not(.duo) #summary > .pf .fh { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
body.plan:not(.duo) #summary > .pf .fh b { font-weight: 600; } body.plan:not(.duo) #summary > .pf .fh em { font-style: normal; font-weight: 650; color: var(--fg); }
body.plan:not(.duo) #summary > .pf .pfl { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: center; }
body.plan:not(.duo) #summary > .pf .pfl::before { content: ""; position: absolute; left: 10%; width: 40%; top: 19px; border-top: 2px dashed color-mix(in srgb, var(--fg) 45%, transparent); }   /* 바다: 입항까지 */
body.plan:not(.duo) #summary > .pf .pfl::after { content: ""; position: absolute; left: 50%; width: 40%; top: 19px; border-top: 2px solid var(--fg); }
body.plan:not(.duo) #summary > .pf .pfs { position: relative; z-index: 1; min-width: 0; display: block; }
body.plan:not(.duo) #summary > .pf .pfs.i { --c: var(--inc); } body.plan:not(.duo) #summary > .pf .pfs.a { --c: var(--hold); } body.plan:not(.duo) #summary > .pf .pfs.s { --c: var(--stock); } body.plan:not(.duo) #summary > .pf .pfs.now { --c: var(--fg); }
body.plan:not(.duo) #summary > .pf .fi { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--c); color: var(--c); }
body.plan:not(.duo) #summary > .pf .fi svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.plan:not(.duo) #summary > .pf .now .fi { color: #fff; }
body.plan:not(.duo) #summary > .pf .fn { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
body.plan:not(.duo) #summary > .pf .now .fn { color: var(--fg); }
body.plan:not(.duo) #summary > .pf .fd { display: block; margin-top: -1px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
body.plan:not(.duo) #summary > .pf .fv { font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: -0.05em; white-space: nowrap; }
body.plan:not(.duo) #summary > .pf .now .fv { font-size: 24px; line-height: 28px; }
body.plan:not(.duo) #summary > .pf .fv small { margin-left: 1px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; opacity: 1; color: var(--muted); }
body.plan:not(.duo) #summary > .pf .fv .plan-count-unknown { font-style: normal; font-size: 15px; color: var(--muted); }   /* 냉장: B/L이 비어 건수를 모르면 '미정' */
body.plan:not(.duo) #summary > .pf .fk { font-size: 11px; color: var(--muted); white-space: nowrap; }
body.plan:not(.duo) #summary > .pf button.pfs { all: unset; position: relative; z-index: 1; display: block; align-self: start; min-width: 0; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }   /* align-self: start — 같은 날 사용자(아이폰): 재고 아이콘만 선 아래로 처진 갈무리와 "동일한 선상에 놔줘." 사파리는 칸 높이로 늘어난 단추의 내용을 세로 가운데로 내린다 */
body.plan:not(.duo) #summary > .pf button.pfs:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
body.plan:not(.duo) #summary > .pf button.pfs:active .fi { background: color-mix(in srgb, var(--stock) 12%, var(--surface)); }
@media (max-width: 359px) { body.plan:not(.duo) #summary > .pf .fv { font-size: 17px; } body.plan:not(.duo) #summary > .pf .now .fv { font-size: 20px; } body.plan:not(.duo) #summary > .pf .fn { font-size: 11px; } body.plan:not(.duo) #summary > .pf .fi { width: 36px; height: 36px; } body.plan:not(.duo) #summary > .pf .pfl::before, body.plan:not(.duo) #summary > .pf .pfl::after { top: 17px; } }

/* 마우스 풍선 도움말 (2026-10-24, "마우스 올렸을때 나오는 팝업메시지 올리면 1초안에 뜨게 해줬으면 좋겠어."; app.js tipShow): 기본 title 풍선 대신 0.3초 만에 뜨는 먹색 풍선.
   --tip: 1은 app.js에 주는 신호(이 css가 있을 때만 title을 가로챈다) */
:root { --tip: 1; }
#tip { position: fixed; z-index: 1000; box-sizing: border-box; max-width: min(360px, calc(100vw - 16px)); padding: 6px 10px; border-radius: 8px; background: rgba(33, 12, 2, 0.92); color: #fffdf9; font-size: 12.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0; white-space: pre-line; overflow-wrap: anywhere; pointer-events: none; box-shadow: 0 4px 14px rgba(33, 12, 2, 0.18); }
#tip[hidden] { display: none; }

/* 검색 · 필터 중 폰 요약 세 칸도 그림 역과 같은 단위 (2026-10-24 점검; app.js flowCells): 큰 숫자 톤, 밑 줄에 박스 · 건 */
body:not(.duo) .sumcard.flow.qmode .summary > .sg > span { display: block; margin-top: 1px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 재고 탭 요약 카드: 넓은 PC(1500px 이상)에서는 '검색 중 ✕ 초기화' 칩을 첫 줄(숫자와 주의 사이)에 (2026-10-25). 위 두 카드의 높이를 스케쥴 탭처럼 맞춘 뒤(app.js duoSync),
   검색하면 칩 줄 때문에 요약 카드가 203 → 233px로 늘고 검색 카드도 같이 늘어 아래가 비어 보였다. 1500px 아래는 첫 줄에 자리가 없어(1280px에서 숫자 줄이 잘렸다) 둘째 줄 그대로 */
@media (min-width: 1500px) {
  body.duo .sumcard.hz .hzr { justify-self: end; margin-top: 0; }   /* 칸 배치는 파일 끝 '요약 카드의 칸 배치' */
}

/* 회의 모드 (2026-10-25, 사용자: "회의모드를 만들어보고싶어. 회의모드는 회의 때 한눈에 보기 좋게 엑셀과 거의 흡사한 형태로 보여주면 좋아. 화면을 최대한 넓게 써야할 것 같아."
   → 시안/회의모드-시안2.png의 사 "사 의 디자인이 마음에 들긴한다." → 시안3(원가 칸 · 열 숨기기와 되돌리기 · 키보드로 칸 고르기 · 고른 칸의 합계 · 평균) → 시안4(엑셀 열 순서) → "만들어보자." 냉동만).
   app.js(회의 모드 주석)가 PC 두 판 · 냉동 · 재고 탭의 머리 줄에 '회의 모드' 단추를 두고, 누르면 화면 전체를 덮는 #meet를 연다. --meet: 1이 그 신호다(옛 app.css와 만나면 단추를 만들지 않는다).
   색은 앱의 크림 · 에스프레소, 한 칸에 한 값(눈금선), 품명 · 브랜드마다 띠.
   글자 크기 (같은 날 "폰트 크기 화면 확대는 우리가 평소보는 화면과 동일하면 되. 특별히 확대하거나 할 필요는 없어." — 글자 크기 단추를 걷고 묶음 카드 표의 15px로 맞췄다가,
   "폰트가 너무 큰데???" → 엑셀처럼 촘촘하게): 칸 13px · 줄 26px, 열 이름 11.5px, 합계 숫자 14px, 등급 · EST 알약 11px(앱 그대로).
   열 폭은 내용에 맞춘다(같은 날 B/L이 'HDMUSAOA0342...'로 잘린 갈무리와 "이렇게 텍스트가 잘리는 현상 없게 해주고."): table-layout: auto · width: max-content, 긴 글 열은 .mt-w 안에서 줄을 바꾼다.
   표가 판보다 좁으면 app.js(mtFit)가 min-width로 넓혀 채우고, 넓으면 .mt-t.fz로 진행상황 ~ 브랜드를 고정한다 */
:root { --meet: 1; }
@media (min-width: 1040px) {
  body.duo .cols .head .mtbtn { order: 4; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 0; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair2); color: var(--fg); font: inherit; font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; cursor: pointer; }
  body.duo .cols .head .mtbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  @media (hover: hover) { body.duo .cols .head .mtbtn:hover { background: var(--fg); color: var(--on-press); box-shadow: none; } }
  body.duo .cols .head .mtbtn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
}
@media (min-width: 1040px) and (max-width: 1365px) {   /* 1366px보다 좁으면 아이콘만 (이름은 마우스를 올리면): 이름까지 두면 1280px에서 환율 줄이 71px 잘렸다. 아이콘만이어도 1100 · 1200 · 1280px에서는 환율 줄 끝이 조금(9~39px) 줄임표가 된다 */
  body.duo .cols .head .mtbtn { width: 34px; padding: 0; justify-content: center; }
  body.duo .cols .head .mtbtn span { display: none; }
}
body.meeting { overflow: hidden; }
#meet { --m-sf: var(--surface); --m-hd: #eae3d8; --m-gl: #dcd2c1; --m-gl2: #b9ab94; --m-tx: var(--fg); --m-mu: var(--muted); --m-band: #f1eadf; --m-sel: rgba(33, 12, 2, 0.1);
  --m-g: #e2f0e6; --m-gt: #1f6b44; --m-y: #fbefd5; --m-yt: #8a5a00; --m-r: #f8dedb; --m-rt: #a01210;
  position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--m-tx);
  font-family: var(--font); font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; letter-spacing: -0.012em; }
#meet button:where(:not(.mt-dw *)) { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }   /* 상세 서랍(.mt-dw) 안은 앱의 단추 꼴 그대로 */
#meet svg:where(:not(.mt-dw *)) { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#meet kbd { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 1px solid var(--m-gl2); border-radius: 5px; background: var(--m-sf); color: var(--m-tx); font: 600 10.5px/1 var(--font); }

/* 맨 위 줄: 로고 · 제목 · 찾기 · 필터 알약 · 원가 칸 스위치(관리자) · 열 고르기 · 전체 화면 · 나가기 */
#meet .mt-tb { flex: none; display: flex; align-items: flex-start; gap: 10px; min-height: 50px; padding: 8px 16px; }
#meet .mt-tl { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }   /* 모자라면 이 묶음만 줄을 바꾼다 (나가기는 늘 오른쪽 위, 독립 검토: 필터 알약이 생기면 나가기가 화면 밖으로 밀렸다) */
#meet .mt-tr { flex: none; display: flex; align-items: center; gap: 10px; }
#meet .mt-crest { flex: none; width: 40px; height: 30px; background: url("img/logo-crest.webp?v=1") center / contain no-repeat; }
#meet .mt-h1 { flex: none; margin: 0 6px 0 0; font-size: 19px; font-weight: 500; letter-spacing: -0.05em; line-height: 1.2; white-space: nowrap; }
#meet .mt-h1 small { margin-left: 9px; padding: 3px 9px; border-radius: 999px; background: var(--m-tx); color: var(--on-press); font-size: 11px; font-weight: 600; letter-spacing: 0; vertical-align: 2px; }
#meet .mt-q { flex: 1 1 190px; max-width: 360px; min-width: 190px; display: flex; align-items: center; height: 34px; border: 1px solid var(--m-gl2); border-radius: 999px; background: var(--m-sf); overflow: hidden; cursor: text; }
#meet .mt-q:focus-within { border-color: var(--m-tx); box-shadow: inset 0 0 0 1px var(--m-tx); }
#meet .mt-q > span { flex: none; display: grid; place-items: center; align-self: stretch; width: 46px; border-right: 1px solid var(--m-gl); color: var(--m-mu); font-size: 12px; font-weight: 600; }
#meet .mt-q input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 12px; border: 0; outline: 0; background: none; color: var(--m-tx); font: inherit; font-size: 13px; font-weight: 600; }
#meet .mt-q input::placeholder { color: #a6978a; font-weight: 400; }
#meet .mt-q input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
#meet .mt-qx { flex: none; display: grid; place-items: center; width: 36px; height: 100%; color: var(--m-mu); }
#meet .mt-q input:placeholder-shown + .mt-qx { visibility: hidden; }
#meet .mt-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--m-gl2); border-radius: 999px; background: var(--m-sf); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
#meet .mt-chip svg { width: 12px; height: 12px; opacity: 0.65; }
#meet .mt-chip em { font-style: normal; font-weight: 500; color: var(--m-mu); }
#meet .mt-chip[aria-expanded="true"] { border-color: var(--m-tx); box-shadow: inset 0 0 0 1px var(--m-tx); }
#meet .mt-fl { border-color: var(--m-tx); background: var(--m-tx); color: var(--on-press); }
#meet .mt-fl svg { opacity: 0.85; }
#meet .mt-flx { display: inline-flex; align-items: center; gap: 3px; margin-left: 3px; padding-left: 9px; border-left: 1px solid rgba(240, 235, 226, 0.3); color: rgba(240, 235, 226, 0.85); font-weight: 500; }
#meet .mt-flx svg { width: 11px; height: 11px; opacity: 1; }
#meet .mt-sw { position: relative; flex: none; width: 30px; height: 18px; margin-left: 2px; border-radius: 999px; background: #cbbfae; transition: background 0.15s; }
#meet .mt-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(33, 12, 2, 0.25); transition: transform 0.15s; }
#meet .mt-cost[aria-pressed="true"] .mt-sw { background: var(--m-tx); }
#meet .mt-cost[aria-pressed="true"] .mt-sw::after { transform: translateX(12px); }
#meet .mt-sep { flex: none; width: 1px; height: 22px; background: var(--m-gl2); }
#meet .mt-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: 1px solid var(--m-gl2); border-radius: 999px; background: var(--m-sf); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
#meet .mt-x { border-color: var(--m-tx); background: var(--m-tx); color: var(--on-press); }
#meet .mt-x kbd { border-color: rgba(240, 235, 226, 0.35); background: none; color: rgba(240, 235, 226, 0.85); }
@media (hover: hover) {
  #meet :is(.mt-chip, .mt-btn):not(.mt-fl):not(.mt-x):hover { border-color: var(--m-tx); }
  #meet .mt-qx:hover { color: var(--m-tx); }
}
#meet :is(.mt-chip, .mt-btn, .mt-qx, .mt-toast button):focus-visible { outline: 2px solid var(--m-tx); outline-offset: 2px; }
@media (max-width: 1799px) { #meet .mt-btn[data-mt="full"] span { display: none; } #meet .mt-btn[data-mt="full"] { width: 32px; padding: 0; justify-content: center; } #meet .mt-h1 { display: none; } }   /* 좁은 화면: 전체 화면은 아이콘만, 제목은 뺀다(로고는 남는다) */
@media (max-width: 1279px) { #meet :is(.mt-fl, .mt-cost) .mt-w1, #meet button.mt-cost > span:not(.mt-sw) { display: none; } #meet .mt-flx { margin-left: 0; padding-left: 6px; } }   /* 필터 알약은 숫자와 ✕만, 원가 칸은 자물쇠와 스위치만 */
@media (max-width: 1199px) { #meet .mt-pk > em { display: none; } }   /* 아주 좁으면 고르기 단추는 아이콘만 (지금 값은 마우스를 올리면) */
@media (max-width: 1199px) { #meet .mt-h1 small { display: none; } #meet .mt-x kbd { display: none; } }

/* 합계 칸: 한 줄 (같은 날 "이부분을 너무 많이 차지하는데...?" — 큰 제목 30px · 숫자 세 줄이던 80px 남짓을 40px로). 왼쪽은 검색어 · 묶음 · 건 · 엑셀 시각, 오른쪽에 창고 재고 · 통관 전 · 입고 예정 · 유통기한 임박 */
#meet .mt-kp { flex: none; display: flex; align-items: stretch; margin: 2px 16px 8px; border: 1px solid var(--m-gl2); background: var(--m-sf); }
#meet .mt-kp > div { flex: none; display: flex; align-items: baseline; gap: 7px; padding: 6px 14px; border-left: 1px solid var(--m-gl); white-space: nowrap; }
#meet .mt-kp > div:first-child { flex: 1 1 auto; min-width: 0; border-left: 0; white-space: normal; }   /* 자리가 모자라면 이 칸만 줄을 바꾼다 (자르지 않는다) */
#meet .mt-ttl b { min-width: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }   /* 띄어쓰기 없는 긴 검색어도 옆 칸으로 넘치지 않게 (독립 검토) */
#meet .mt-ttl small { min-width: 0; color: var(--m-mu); font-size: 12px; }
#meet .mt-k > span { display: inline-flex; align-items: center; gap: 6px; color: var(--m-mu); font-size: 12px; font-weight: 700; }
#meet .mt-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--m-mu); }
#meet .mt-k.s .mt-dot { background: var(--stock); }
#meet .mt-k.h .mt-dot { background: none; box-shadow: inset 0 0 0 2px var(--hold); }
#meet .mt-k.i .mt-dot { background: none; box-shadow: inset 0 0 0 2px var(--m-mu); }
#meet .mt-k.r .mt-dot { background: var(--m-rt); }
#meet .mt-v { font-size: 14px; font-weight: 600; letter-spacing: -0.03em; }
#meet .mt-v small { margin-left: 2px; color: var(--m-mu); font-size: 11.5px; font-weight: 500; letter-spacing: 0; }
#meet .mt-k.r .mt-v { color: var(--m-rt); }
#meet .mt-k em { color: var(--m-mu); font-size: 12px; font-style: normal; }
@media (max-width: 1279px) { #meet .mt-k em { display: none; } }   /* 좁은 PC(1040px 남짓)는 박스 · 건 수를 빼고 톤만: 한 줄에 다 들어가게 */

/* 표: 머리 두 줄(열 글자 · 열 이름)과 행 번호는 늘 보인다 */
#meet .mt-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 12px; margin: 0 16px; }   /* 표 판 + (열면) 건 상세: 상세는 표 옆에 나란히 (위에 덮으면 오른쪽 열을 가렸다, 독립 검토) */
#meet .mt-grid { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; margin: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; contain: content; border: 1px solid var(--m-gl2); background: var(--m-sf); outline: 0; }
#meet .mt-grid:focus-visible { border-color: var(--m-tx); }
#meet .mt-grid::-webkit-scrollbar { width: 14px; height: 14px; }
#meet .mt-grid::-webkit-scrollbar-track, #meet .mt-grid::-webkit-scrollbar-corner { background: #f1ebe1; }
#meet .mt-grid::-webkit-scrollbar-thumb { border: 3px solid #f1ebe1; border-radius: 7px; background: #c9bba3; }
#meet .mt-t { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; table-layout: auto; user-select: none; -webkit-user-select: none; }
#meet .mt-t col.mt-crn { width: 38px; }
#meet .mt-t :is(th, td) { border-right: 1px solid var(--m-gl); border-bottom: 1px solid var(--m-gl); white-space: nowrap; }
#meet .mt-t thead th { position: sticky; z-index: 3; background: var(--m-hd); text-align: left; vertical-align: middle; cursor: default; }
#meet .mt-t .mt-lr th { top: 0; height: 18px; padding: 0 6px; background: #f4efe6; color: var(--m-mu); font-size: 10px; font-weight: 600; letter-spacing: 0.03em; line-height: 1; text-align: center; }
#meet .mt-t .mt-nr th { top: var(--mth1, 19px); height: 28px; padding: 0 4px 0 5px; font-size: 11.5px; font-weight: 750; letter-spacing: -0.01em; }
#meet .mt-t thead th.mt-app { background: #efe6d7; }
#meet .mt-t .mt-lr th.mt-app span { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #e8d7bd; color: #7a4e22; font-size: 9.5px; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
#meet .mt-hw { display: flex; align-items: center; gap: 5px; }
#meet .mt-hn { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
#meet th.mt-n .mt-hn { justify-content: flex-end; }
#meet .mt-hn small { color: var(--m-mu); font-size: 10px; font-weight: 600; }
#meet .mt-hn .mt-lk { width: 10px; height: 10px; opacity: 0.5; }
#meet .mt-so { display: inline-flex; color: var(--m-tx); }
#meet .mt-so svg { width: 11px; height: 11px; stroke-width: 2.4; }
#meet .mt-dd { flex: none; display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid var(--m-gl2); border-radius: 4px; background: var(--m-sf); color: var(--m-mu); font-size: 8.5px; line-height: 1; }
#meet .mt-dd.on { border-color: var(--m-tx); background: var(--m-tx); color: var(--on-press); }
#meet .mt-dd svg { width: 9px; height: 9px; }
@media (hover: hover) { #meet .mt-dd:not(.on):hover { border-color: var(--m-tx); color: var(--m-tx); } }
#meet .mt-t .mt-rn { padding: 0 5px; background: var(--m-hd); color: var(--m-mu); font-size: 11px; font-weight: 400; text-align: center; }
#meet .mt-t thead th.mt-rn { z-index: 6; cursor: pointer; }
#meet .mt-t.hs thead th.mt-rn, #meet .mt-t.hs tr.v td.mt-rn { position: sticky; left: 0; }   /* 옆으로 밀 때만(.hs), 화면 근처 줄(.v)의 행 번호만 붙인다 (app.js mtFit · mtStick) */
#meet .mt-t.hs tr.v td.mt-rn { z-index: 2; }
#meet .mt-t .mt-lr th.mt-rn { background: #f4efe6; }
#meet .mt-t td { height: 26px; padding: 0 5px; font-size: 13px; }
#meet .mt-t td.mt-n { text-align: right; }
#meet .mt-t td.mt-c { text-align: center; }
#meet .mt-t td:is(.mt-b, .mt-big) { font-weight: 700; }
#meet .mt-t td.mt-mu { color: var(--m-mu); }
#meet .mt-t td.mt-cst { background: #fcf8f1; }
#meet .mt-t td.mt-ap { background: #fbf6ee; }
#meet .mt-t td.mt-lp { color: #8b5a2b; font-weight: 600; }
#meet .mt-t td.mt-mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -0.02em; }
#meet .mt-t td.mt-g { background: var(--m-g); font-weight: 600; }
#meet .mt-t td.mt-y { background: var(--m-y); font-weight: 600; }
#meet .mt-t td.mt-red { background: var(--m-r); color: var(--m-rt); font-weight: 700; }
#meet .mt-t :is(.gr, .estb) { top: 0; max-width: none; vertical-align: middle; }   /* 앱의 알약 그대로(11px). EST는 한 줄, 등급은 긴 것('NATURAL BLACK ANGUS')만 앱처럼 알약 안에서 줄을 바꾼다(.mt-w.s) */
#meet .mt-t .estb { white-space: nowrap; }
#meet .mt-t .mt-w { max-width: 10em; padding: 3px 0; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.35; }   /* 긴 글(진행상황 메모 · 계약번호 · 통관/검역): 이 폭을 넘으면 칸 안에서 줄을 바꾼다 (app.js MT_COLS의 wrap) */
#meet .mt-t .mt-w.l { max-width: 14em; }   /* 구분 · 판매처 · 비고 · LC */
#meet .mt-t .mt-w.s { max-width: 7em; padding: 2px 0; line-height: 1.2; }   /* 등급 알약 */
/* 품명 · 브랜드 띠: 이름 · 구성(창고 재고 n · 통관 전 n · 입고 예정 n), 숫자 칸은 창고 재고 + 통관 전의 합계 · kg 가중 평균 · 가장 이른 유통기한 */
#meet .mt-t tr.mt-band td { height: 30px; font-weight: 700; }
#meet .mt-t tr.mt-band td.mt-red { color: var(--m-rt); }
#meet .mt-t td.mt-bn { font-size: 13.5px; letter-spacing: -0.01em; }
#meet .mt-t td.mt-bn small { margin-left: 7px; color: var(--m-mu); font-size: 11.5px; font-weight: 500; letter-spacing: 0; }
#meet .mt-t td.mt-bn em { margin-left: 12px; color: var(--m-mu); font-size: 11.5px; font-style: normal; font-weight: 600; letter-spacing: 0; }
#meet .mt-t td.mt-bn em b { color: var(--m-tx); }
#meet .mt-avg { margin-right: 5px; color: var(--m-mu); font-size: 10px; font-weight: 500; }
#meet .mt-t tr.mt-none td { height: 140px; padding-left: 40px; color: var(--m-mu); font-size: 13px; text-align: left; }
/* 숨긴 열의 자리: 엑셀처럼 머리에만, 숨긴 열 바로 뒤 열의 머리 왼쪽(맨 끝에 숨긴 것은 마지막 열의 오른쪽)에 두 줄 표시. 누르면 다시 보인다 (본문의 빈 칸 열은 같은 날 "무거운 느낌"으로 걷었다) */
#meet .mt-t thead th.mt-hb { padding-left: 13px; }
#meet .mt-t thead th.mt-ha { padding-right: 12px; }
#meet .mt-hm { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 8px; background: #dccfb9; box-shadow: inset -1px 0 0 var(--m-gl2); cursor: pointer; }
#meet .mt-hm.r { left: auto; right: 0; box-shadow: inset 1px 0 0 var(--m-gl2); }
#meet .mt-nr .mt-hm::after { content: ""; position: absolute; left: 2px; top: 30%; bottom: 30%; width: 4px; border-left: 1.5px solid var(--m-tx); border-right: 1.5px solid var(--m-tx); }
@media (hover: hover) { #meet .mt-hm:hover { background: var(--m-tx); } #meet .mt-nr .mt-hm:hover::after { border-color: var(--on-press); } }
/* 틀 고정: 표가 판보다 넓을 때만(.fz, app.js mtFit이 .mt-f0 … 의 left를 적는다). 경계는 다른 칸과 같은 가는 선 (같은 날 굵은 먹선 · 그림자 갈무리에 "이건 불필요할 것 같은데...?") */
#meet .mt-t.fz tr.v td.mt-fz { position: sticky; z-index: 1; }   /* 머리 칸과 나눠 둔다: :is(thead th, tr.v td)로 묶으면 세기가 tr.v td 쪽을 따라가 머리의 z-index 5를 덮었다 (독립 검토) */
#meet :where(.mt-t.fz) tbody td:where(.mt-fz) { background-color: var(--m-sf); }   /* 세기를 낮춰(#meet + td) 진행상황 초록 · 노랑, 원가 칸, 띠의 바탕이 이긴다 (독립 검토) */
#meet .mt-t.fz thead th.mt-fz { z-index: 5; }
/* 고른 칸: 엑셀처럼 칸에 옅은 덮개, 지금 칸은 굵은 테, 고른 줄 · 열의 머리는 한 단계 짙게 */
#meet .mt-t td.mt-sl { background-image: linear-gradient(var(--m-sel), var(--m-sel)); }
#meet .mt-t td.mt-ac { outline: 2px solid var(--m-tx); outline-offset: -2px; }
#meet .mt-t th.mt-sl, #meet .mt-t td.mt-rn.mt-sl { background: #d6c8b0; color: var(--m-tx); }

/* 아래 줄: 키 안내 · 고른 칸의 합계 · 평균(없으면 보이는 건의 합계). 길면 줄을 바꾼다(자르지 않는다) */
#meet .mt-ft { flex: none; display: flex; align-items: center; color: var(--m-mu); font-size: 12px; }
#meet .mt-keys { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; white-space: nowrap; }
#meet .mt-keys > span { display: inline-flex; align-items: center; gap: 3px; }
#meet .mt-keys kbd { margin-right: 2px; }
#meet .mt-sum { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 16px; margin-left: auto; font-size: 12.5px; }
#meet .mt-sum > span { white-space: nowrap; }
#meet .mt-sum b { color: var(--m-tx); font-weight: 700; }
#meet .mt-sum.on { color: var(--m-tx); }
#meet .mt-sum.on > span:first-child { padding: 2px 10px; border-radius: 999px; background: var(--m-tx); color: var(--on-press); font-weight: 600; }
#meet .mt-sum.on > span:first-child em { font-weight: 700; }
#meet .mt-sum i, #meet .mt-sum em { font-style: normal; }
#meet .mt-sum.on > span > i { font-weight: 700; }
#meet .mt-sum.on > span > em { color: var(--m-mu); }
@media (max-width: 1599px) { #meet .mt-ft:has(.mt-sum.on) .mt-keys { display: none; } }   /* 고른 칸이 있으면 키 안내보다 합계 · 평균 */
@media (max-width: 1199px) { #meet .mt-keys > span:nth-child(n+4) { display: none; } }   /* 좁은 화면: 키 안내는 셋만 */

/* 알림 (열을 숨기면 '되돌리기') */
#meet .mt-toast { position: absolute; z-index: 30; left: 50%; bottom: 56px; display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 16px; border-radius: 12px; background: var(--m-tx); color: var(--on-press); font-size: 13.5px; white-space: nowrap; box-shadow: 0 10px 30px rgba(33, 12, 2, 0.3); transform: translateX(-50%); }
#meet .mt-toast button { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 8px; background: rgba(240, 235, 226, 0.14); color: var(--toast-link); font-weight: 700; }
#meet .mt-toast kbd { border-color: rgba(240, 235, 226, 0.3); background: none; color: rgba(240, 235, 226, 0.75); }

/* 머리 칸 메뉴 · 필터 · 열 고르기 판 */
#meet .mt-pop { position: absolute; z-index: 40; border: 1px solid var(--m-gl2); border-radius: 12px; background: var(--m-sf); font-size: 13px; box-shadow: 0 18px 44px rgba(33, 12, 2, 0.26); }
#meet .mt-mt { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px 8px; font-size: 13.5px; font-weight: 700; }
#meet .mt-mt small { color: var(--m-mu); font-size: 12px; font-weight: 500; }
#meet .mt-menu { width: 244px; padding: 6px; }
#meet .mt-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: left; }
#meet .mt-menu button:is(:hover, :focus-visible) { background: var(--m-hd); outline: 0; }
#meet .mt-menu button :is(small, kbd) { margin-left: auto; }
#meet .mt-menu button small { color: var(--m-mu); font-size: 12px; font-weight: 500; }
#meet .mt-menu hr { margin: 5px 6px; border: 0; border-top: 1px solid var(--m-gl); }
#meet .mt-flt { width: 320px; padding: 10px; }
#meet .mt-fs { display: block; width: 100%; height: 34px; margin: 0 0 6px; padding: 0 12px; border: 1px solid var(--m-gl2); border-radius: 8px; outline: 0; background: var(--m-sf); color: var(--m-tx); font: inherit; font-size: 13.5px; }
#meet .mt-fs:focus { border-color: var(--m-tx); }
#meet .mt-flt label { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 3px 8px; border-radius: 6px; cursor: pointer; }
#meet .mt-flt label span { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.35; }   /* 긴 값도 자르지 않고 줄을 바꾼다 */
#meet .mt-flt label em { color: var(--m-mu); font-size: 12px; font-style: normal; }
#meet .mt-fa { margin-bottom: 2px; border-bottom: 1px solid var(--m-gl); border-radius: 6px 6px 0 0 !important; font-weight: 700; }
#meet .mt-fv { max-height: min(46vh, 360px); overflow: auto; padding: 2px 0 4px; }
#meet :is(.mt-flt, .mt-pl) input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--m-tx); }
#meet .mt-fb, #meet .mt-pb { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--m-gl); }
#meet :is(.mt-fb, .mt-pb) button { flex: none; height: 32px; padding: 0 14px; border: 1px solid var(--m-gl2); border-radius: 999px; background: var(--m-sf); font-size: 13px; font-weight: 600; white-space: nowrap; }
#meet :is(.mt-fb, .mt-pb) button.on { border-color: var(--m-tx); background: var(--m-tx); color: var(--on-press); }
#meet .mt-fb button:disabled { opacity: 0.45; cursor: default; }
#meet .mt-fb [data-mtf="clear"] { margin-left: auto; }
#meet .mt-colsp { width: 720px; max-width: calc(100vw - 32px); padding: 16px 18px 14px; }
#meet .mt-pt { display: block; margin: 0 0 10px; font-size: 17px; font-weight: 500; letter-spacing: -0.04em; }
#meet .mt-pt small { margin-left: 10px; color: var(--m-mu); font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
#meet .mt-pl { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows), 26px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; margin-bottom: 12px; }
#meet .mt-pl label { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 6px; border-radius: 6px; font-size: 13px; white-space: nowrap; cursor: pointer; }
#meet .mt-pl label.off { color: var(--m-mu); }
#meet .mt-lt { flex: none; width: 22px; color: var(--m-mu); font: 500 11px/1 var(--mono); text-align: right; }
#meet .mt-pl label.app .mt-lt { color: #7a4e22; font: 700 10.5px/1 var(--font); }
#meet .mt-ln small { margin-left: 3px; color: var(--m-mu); font-size: 11px; }
#meet .mt-pl .mt-lk { width: 11px; height: 11px; opacity: 0.5; }
#meet .mt-pb span { margin-left: 8px; color: var(--m-mu); font-size: 12px; line-height: 1.4; white-space: normal; }
@media (hover: hover) { #meet :is(.mt-flt, .mt-pl) label:hover { background: #f5efe5; } }

/* 회의 모드 보강 (2026-10-25, 사용자: "평소 회의 할 때 엑셀 파일을 열어서 많이 하기 때문에 … 회의용으로 부족한건 무엇인지. 보강할게 있으면 추천해줘." → "추천순서대로 진행하고. 보기저장, 묶는기준바꾸기, 틀린칸 바로 알리기. 진행해줘."):
   ① 합계 칸 · 주의 알약 누르기, 줄 번호의 점 ② 복사 ③ 띠 접기 · 총계 줄 ④ 바뀐 칸 ⑤ 건 자세히 ⑥ 보기 ⑦ 묶는 기준 ⑧ 엑셀 고칠 곳 알리기. app.js의 회의 모드 주석 */
#meet { --m-cg: #2f6fae; }   /* 바뀐 칸 · 새 건의 파랑 (주의의 빨강 · 호박 · 초록과 겹치지 않게) */
/* ① 합계 칸은 단추: 누르면 그것만, 다시 누르면 모두 */
#meet .mt-kp > * { flex: none; display: flex; align-items: baseline; gap: 7px; margin: 0; padding: 6px 14px; border: 0; border-left: 1px solid var(--m-gl); border-radius: 0; background: none; text-align: left; white-space: nowrap; }
#meet .mt-kp > :first-child { flex: 1 1 auto; min-width: 0; border-left: 0; white-space: normal; }
#meet .mt-kp > .mt-k { cursor: pointer; }
@media (hover: hover) { #meet .mt-kp > .mt-k:not([aria-pressed="true"]):hover { background: #f5efe5; } }
#meet .mt-kp > .mt-k[aria-pressed="true"] { background: var(--m-tx); color: var(--on-press); }
#meet .mt-kp > .mt-k[aria-pressed="true"] :is(span, em, .mt-v small) { color: rgba(240, 235, 226, 0.78); }
#meet .mt-kp > .mt-k[aria-pressed="true"] .mt-v { color: var(--on-press); }
#meet .mt-kp > .mt-k:focus-visible { outline: 2px solid var(--m-tx); outline-offset: -2px; }
#meet .mt-kp > .mt-als { align-items: center; gap: 6px; padding: 0 10px; }
#meet .mt-al { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid var(--m-gl2); border-radius: 999px; background: var(--m-sf); font-size: 12px; font-weight: 600; white-space: nowrap; }
#meet .mt-al b { font-weight: 750; }
#meet .mt-al .mt-dot { width: 6px; height: 6px; }
#meet .mt-al:is(.late, .past) .mt-dot { background: var(--warn); }
#meet .mt-al.loose .mt-dot { background: var(--stock); }
#meet .mt-al[aria-pressed="true"] { border-color: var(--m-tx); background: var(--m-tx); color: var(--on-press); }
#meet .mt-al:disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) { #meet .mt-al:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--m-tx); } }
#meet .mt-al:focus-visible { outline: 2px solid var(--m-tx); outline-offset: 2px; }
/* 줄 번호 칸의 점: 빨강 유통기한 임박 · 호박 입고 지연 / 선적 예정일 지남 · 초록 낱박스 · 파랑 새로 들어온 건 · 파랑 테 바뀐 칸이 있는 건 (마우스를 올리면 풀이) */
#meet .mt-t .mt-fd { display: inline-flex; gap: 2px; margin-left: 3px; vertical-align: 1px; }
#meet .mt-t .mt-fd i { width: 6px; height: 6px; border-radius: 50%; }
#meet .mt-t .mt-fd .r { background: var(--m-rt); }
#meet .mt-t .mt-fd .a { background: var(--warn); }
#meet .mt-t .mt-fd .g { background: var(--stock); }
#meet .mt-t .mt-fd .n { background: var(--m-cg); }
#meet .mt-t .mt-fd .c { box-shadow: inset 0 0 0 1.5px var(--m-cg); }
/* ④ 바뀐 칸: 엑셀의 메모 표시처럼 오른쪽 위 모서리 (title에 언제 · 전 값 → 새 값) */
#meet .mt-t td.mt-chg { position: relative; }
#meet .mt-t td.mt-chg::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent var(--m-cg) transparent transparent; pointer-events: none; }
/* ③ 띠 이름 칸 전체가 접기 · 펴기 단추, 맨 아래 총계 줄은 늘 보인다 */
#meet .mt-t .mt-tg { display: inline-flex; align-items: baseline; max-width: 100%; padding: 0; color: inherit; text-align: left; cursor: pointer; }
#meet .mt-t .mt-tg svg { align-self: center; width: 12px; height: 12px; margin-right: 6px; stroke-width: 2.4; transition: transform 0.15s; }
#meet .mt-t tr.shut .mt-tg svg { transform: rotate(-90deg); }
#meet .mt-t .mt-tg:focus-visible { outline: 2px solid var(--m-tx); outline-offset: 2px; border-radius: 3px; }
@media (hover: hover) { #meet .mt-t .mt-tg:hover > span { text-decoration: underline; text-underline-offset: 3px; } }
#meet .mt-t tr.mt-band.shut + tr.mt-band td { border-top-width: 1px; }   /* 접은 띠가 이어지면 굵은 선 대신 가는 선 */
#meet .mt-t tr.mt-tot td { position: sticky; bottom: 0; z-index: 3; height: 30px; border-top: 2px solid var(--m-tx); border-bottom: 0; background: #e7dfd1; font-weight: 700; }
#meet .mt-t tr.mt-tot td.mt-bn > span { font-size: 13.5px; }
#meet .mt-t tr.mt-tot td.mt-bn small { margin-left: 8px; color: var(--m-mu); font-size: 11.5px; font-weight: 500; }
#meet .mt-t tr.mt-tot td.mt-red { color: var(--m-rt); }
#meet .mt-t.fz tr.mt-tot td.mt-fz { z-index: 5; }
#meet .mt-t.hs tr.mt-tot td.mt-rn { left: 0; z-index: 6; }
/* ⑤ 건 자세히: 앱의 PC 서랍(.dlot)을 표 판 오른쪽에, 표와 같은 높이로 (top · height는 app.js mtDwPlace) */
#meet .mt-dw { flex: none; width: 420px; max-width: 42%; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--m-gl2); background: var(--m-sf); }
#meet .mt-dw .dlot { position: static; flex: 1 1 auto; width: auto; max-width: none; min-height: 0; border: 0; box-shadow: none; }
#meet .mt-dw [data-share] { display: none; }   /* 공유는 회의 화면에서 쓰지 않는다 */
/* 맨 위 줄의 새 단추 · 판 */
#meet .mt-chgb.on { border-color: var(--m-cg); color: var(--m-cg); }
#meet .mt-chgb.on em { color: var(--m-cg); }
#meet .mt-foldb:disabled { opacity: 0.45; cursor: default; }
#meet .mt-menu [role="menuitemradio"] svg { visibility: hidden; }
#meet .mt-menu [role="menuitemradio"][aria-checked="true"] svg { visibility: visible; }
#meet .mt-menu [role="menuitemradio"] > span { flex: 1 1 auto; min-width: 0; }
#meet .mt-menu [role="menuitemradio"] > small { margin-left: 8px; }
#meet :is(.mt-viewp, .mt-grpp, .mt-chgp) { width: 290px; }
#meet .mt-vi { display: flex; align-items: center; gap: 2px; }
#meet .mt-vi > button:first-child { flex: 1 1 auto; min-width: 0; }
#meet .mt-menu .mt-vi .mt-vx { flex: none; justify-content: center; width: 30px; height: 30px; padding: 0; color: var(--m-mu); }
#meet .mt-vs { display: flex; gap: 6px; padding: 4px 4px 2px; }
#meet .mt-vs input { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--m-gl2); border-radius: 8px; outline: 0; background: var(--m-sf); color: var(--m-tx); font: inherit; font-size: 13px; }
#meet .mt-vs input:focus { border-color: var(--m-tx); }
#meet .mt-menu .mt-vs button { flex: none; width: auto; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--m-tx); color: var(--on-press); font-size: 13px; }
#meet .mt-cd { display: flex; align-items: center; gap: 6px; padding: 6px 4px 6px 10px; }
#meet .mt-cd label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
#meet .mt-cd input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--m-gl2); border-radius: 8px; background: var(--m-sf); color: var(--m-tx); font: inherit; font-size: 13px; }
#meet .mt-menu .mt-cd button { flex: none; width: auto; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--m-tx); color: var(--on-press); font-size: 12.5px; }
#meet .mt-co { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
#meet .mt-co input { width: 16px; height: 16px; margin: 0; accent-color: var(--m-tx); }
#meet .mt-co input:disabled + span { color: var(--m-mu); }
/* ⑧ 앱의 판 · 알림이 회의 판(z 500) 위에 (엑셀 고칠 곳 알리기 · 상품정보 복사 확인) */
body.meeting #fxsheet.fxsh, body.meeting #isheet { z-index: 600; }
body.meeting #toast { z-index: 700; }
body.meeting:has(#fxsheet) #toast { z-index: 700; }   /* 따로 둔다: :has()를 모르는 브라우저가 한 규칙 전체를 버리지 않게 (독립 검토) */
/* 좁은 화면: 맨 위 줄이 한 줄에 들어가게 (글자 → 아이콘) */
@media (max-width: 1799px) { #meet .mt-foldb span { display: none; } #meet .mt-foldb { width: 32px; padding: 0; justify-content: center; } }
@media (max-width: 1599px) { #meet .mt-k em { display: none; } }   /* 합계 칸은 톤만 (박스는 표 맨 아래 총계 줄): 주의 알약까지 한 줄에 */
#meet .mt-pk > em:not(:empty)::before { content: "· "; }
@media (max-width: 1439px) { #meet .mt-pk > span { display: none; } #meet .mt-pk > em:not(:empty)::before { content: none; } }
@media (max-width: 1199px) { #meet .mt-at { display: none; } }   /* 아주 좁은 PC: 합계 줄이 한 줄에 들도록 '엑셀 몇 시 기준'은 뺀다 */

/* 회의 표 정돈 (2026-10-25, 사용자: 표 갈무리와 "많이 좋아지긴했는데 아직 눈에 깔끔하게 들어오질 않는다. 왜그런걸까??? 개선된 시안을 몇객 보여줄래?"
   → 시안/회의모드정돈-가-덜어내기 · 나-상태색줄 → "좋아 추천대로 진행하자" = 가 + 나):
   가 — 색은 상태에만(EST · 등급 알약은 글자로, 진행상황 칸의 초록 · 노랑 바탕을 걷고 글자색만), 본문의 세로선 걷기, ▾는 마우스를 올린 열 이름에만(걸린 필터는 늘),
        품명 · 브랜드로 묶으면 줄의 품명 · 브랜드는 옅게(띠에 이미 있다), 최초재고 · 계약재고 칸(L · M · N · P)은 옅게 · 지금 재고(케팩 · 캐틀재고)만 진하게, B/L 끝 넷자리 굵기 걷기.
   나 — 줄 번호 왼쪽 색줄로 상태(초록 창고 재고 · 호박 통관 전 · 옅은 회색 입고 예정), 묶음 안을 상태 차례로 모으고 둘 이상 섞이면 작은 머리 줄(app.js mtKindSplit), 입고 예정 줄은 흐리게 */
#meet .mt-t tbody td, #meet .mt-t tfoot td { border-right-color: transparent; }
#meet .mt-t thead .mt-nr th { border-right-color: #e3d9c8; }
#meet .mt-t thead .mt-lr th { border-right-color: #ece4d6; }
#meet .mt-t tbody td { border-bottom-color: #efe8dc; }
@media (hover: hover) {
  #meet .mt-t thead th:not(:hover) .mt-dd:not(.on) { visibility: hidden; }
  #meet .mt-t tr.mt-r:hover td:not(.mt-red):not(.mt-sl) { background-color: #faf6ef; }   /* 임박의 빨간 바탕 · 고른 행 번호는 그대로 (독립 검토) */
}
#meet .mt-t td:is(.mt-g, .mt-y, .mt-i) { background-color: transparent; font-weight: 600; }   /* background-color만: 고른 칸의 덮개(background-image)는 남게 (독립 검토) */
#meet .mt-t.fz tbody td.mt-fz:is(.mt-g, .mt-y, .mt-i) { background-color: var(--m-sf); }   /* 틀 고정 칸은 바탕이 있어야 옆으로 민 칸이 비쳐 보이지 않는다 (독립 검토) */
#meet .mt-t td.mt-g { color: var(--m-gt); }
#meet .mt-t td.mt-y { color: var(--m-yt); }
#meet .mt-t td.mt-i { color: #8f8073; font-weight: 500; }
#meet .mt-t :is(.gr, .estb) { padding: 0; border: 0; background: none; box-shadow: none; color: #5b4d42; font-size: 12.5px; font-weight: 500; }
#meet .mt-t td.mt-mono { color: #5b4d42; }
#meet .mt-t td.mt-mono b { font-weight: inherit; }
#meet .mt-t.ib tr.mt-r td.mt-ib { color: #a4968a; }
#meet .mt-t td.mt-dim { color: #9a8b7d; }
#meet .mt-t tr.mt-band td { border-top: 1px solid #d6cab6; background: #f6f1e8; }
#meet .mt-t tr.mt-band td.mt-rn { background: #efe7da; }
#meet .mt-t tr.mt-band td.mt-dim { color: #8f8073; }
/* 나: 상태 색줄 · 작은 머리 줄 */
#meet .mt-t tr.mt-r td.mt-rn { box-shadow: inset 3px 0 0 transparent; }
#meet .mt-t tr.mt-r.ks td.mt-rn { box-shadow: inset 3px 0 0 var(--m-gt); }
#meet .mt-t tr.mt-r.kh td.mt-rn { box-shadow: inset 3px 0 0 #d9a441; }
#meet .mt-t tr.mt-r.ki td.mt-rn { box-shadow: inset 3px 0 0 #d6cab6; }
#meet .mt-t tr.mt-r.ki td:not(.mt-rn):not(.mt-red) { color: #a4968a; }
#meet .mt-t tr.mt-r.ki td :is(.gr, .estb, b) { color: inherit; }
#meet .mt-t tr.mt-sub td { height: 22px; padding: 0 6px; border-bottom: 0; background: var(--m-sf); color: #7d6f62; font-size: 11.5px; font-weight: 600; }
#meet .mt-t tr.mt-sub td.mt-rn { background: var(--m-hd); }
#meet .mt-t tr.mt-sub td b { color: var(--m-tx); }
#meet .mt-t tr.mt-sub td.mt-sb i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }
#meet .mt-t tr.mt-sub.ks td.mt-sb i { background: var(--m-gt); }
#meet .mt-t tr.mt-sub.kh td.mt-sb i { box-shadow: inset 0 0 0 2px #d9a441; }
#meet .mt-t tr.mt-sub.ki td.mt-sb i { box-shadow: inset 0 0 0 1.5px #a4968a; }

/* 폰 회의 모드 (2026-10-25, 사용자: "모바일용 회의 모드도 있었으면해. … 가로모드로 보여주는거지. 화면은 반쯤 축소된 상태로 보여주고 손가락으로 확대해서 볼 수 있게."
   → ⚙ 메뉴에서 연다, 세로이면 '가로로 돌려 주세요'): #meet.ph. 표만 zoom(--mz, 처음 0.5)으로 줄이고, 맨 위 줄은 아이콘 한 줄 · 합계 줄은 옆으로 밀기, 아래 키 안내는 뺀다.
   열 글자 줄(A · B · C)은 뺀다(자리가 좁고, zoom 안에서 둘째 머리 줄의 top을 재지 않아도 되게). app.js mtZoom · mtPinch · mtLand · mtGearMenu */
:root { --mph: 1; }   /* app.js가 이것을 보고 폰의 ⚙를 메뉴로 바꾼다 (옛 app.css면 ⚙는 예전처럼 관리자 링크) */
.gmenu { position: fixed; z-index: 60; width: 248px; padding: 6px; border: 1px solid var(--line2); border-radius: 16px; background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); }
@media (prefers-reduced-motion: no-preference) { .gmenu { animation: reveal 0.16s ease-out; } }
.gmenu > * { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--fg); font: inherit; font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.gmenu > * > svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gmenu > * > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gmenu small { color: var(--muted); font-size: 12px; font-weight: 500; }
.gmenu > :disabled { color: var(--muted); cursor: default; }
.gmenu > :not(:disabled):active { background: var(--track); }
@media (hover: hover) { .gmenu > :not(:disabled):hover { background: var(--track); } }
#meet.ph { padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
#meet.ph .mt-tb { min-height: 0; align-items: center; gap: 6px; padding: 6px 10px; }
#meet.ph .mt-tl { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#meet.ph .mt-tl::-webkit-scrollbar { display: none; }
#meet.ph :is(.mt-crest, .mt-h1, .mt-sep) { display: none; }
#meet.ph .mt-q { flex: 1 1 150px; min-width: 120px; max-width: 280px; height: 32px; }
#meet.ph .mt-q > span { display: none; }
#meet.ph .mt-q input { font-size: 16px; }   /* 16px보다 작으면 아이폰이 글자를 칠 때 화면을 확대한다 */
#meet.ph .mt-chip { height: 32px; padding: 0 10px; }
#meet.ph .mt-pk > :is(span, em), #meet.ph button.mt-cost > span:not(.mt-sw), #meet.ph .mt-fl .mt-w1 { display: none; }
#meet.ph .mt-btn { width: 32px; padding: 0; justify-content: center; }
#meet.ph .mt-btn span, #meet.ph .mt-x kbd { display: none; }
#meet.ph .mt-x { width: auto; padding: 0 12px; }
#meet.ph .mt-x span { display: inline; }
#meet.ph .mt-zm { width: auto; min-width: 52px; padding: 0 10px; font-variant-numeric: tabular-nums; }
#meet.ph .mt-kp { margin: 0 10px 6px; overflow-x: auto; scrollbar-width: none; }
#meet.ph .mt-kp::-webkit-scrollbar { display: none; }
#meet.ph .mt-kp > * { padding: 4px 10px; }
#meet.ph .mt-kp > :first-child { flex: none; white-space: nowrap; }
#meet.ph :is(.mt-k em, .mt-at) { display: none; }
#meet.ph .mt-body { gap: 8px; margin: 0 10px; }
#meet.ph .mt-grid { touch-action: pan-x pan-y; }   /* 한 손가락은 스크롤, 두 손가락 확대는 app.js(mtPinch)가 한다 (브라우저가 쪽 전체를 키우지 않게) */
#meet.ph .mt-t { zoom: var(--mz, 0.5); }
#meet.ph .mt-t .mt-lr { display: none; }
#meet.ph .mt-t .mt-nr th { top: 0; }
#meet.ph .mt-ft { min-height: 0; font-size: 12px; }
#meet.ph .mt-keys, #meet.ph .mt-menu kbd { display: none; }
#meet.ph .mt-dw { width: min(420px, 58%); max-width: none; }
#meet .mt-rot { display: none; position: absolute; inset: 0; z-index: 20; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: var(--bg); text-align: center; }
@media (orientation: portrait) { #meet.ph:not(.port) .mt-rot { display: flex; } }
#meet .mt-rot svg { width: 56px; height: 56px; margin-bottom: 6px; stroke-width: 1.5; }
#meet .mt-rot b { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; }
#meet .mt-rot > span:not(.mt-rotb) { color: var(--m-mu); font-size: 14px; }
#meet .mt-rotb { display: flex; gap: 8px; margin-top: 14px; }
#meet .mt-rot button { height: 42px; padding: 0 18px; border: 1px solid var(--m-gl2); border-radius: 999px; background: var(--m-sf); font-size: 14.5px; font-weight: 600; }
#meet .mt-rot button[data-mt="close"] { border-color: var(--m-tx); background: var(--m-tx); color: var(--on-press); }

/* 회의 표: 처음 열은 모두 · 정렬 · 세로선 (2026-10-25, 사용자: 유통기한 열 갈무리(띠는 가운데, 줄은 왼쪽)와 "열은 기본적으로 보는건 모두 보이기 로 전체 다 볼 수 있게 해주고.
   이런거 정렬이 중요할 것 같아. 그리고 세로선도 볼수 있게 하는 옵션을 넣어줘."): 띠 · 총계 칸은 그 열의 줄과 같은 정렬(app.js al), 가운데 정렬 열은 머리도 가운데(.mt-hc),
   맨 위 줄 '세로선' 스위치(#meet.vl, mj-meet에 기억, 처음은 꺼짐) */
#meet th.mt-hc .mt-hn { justify-content: center; }
#meet.vl .mt-t tbody td, #meet.vl .mt-t tfoot td { border-right-color: var(--m-gl); }
#meet .mt-vlb[aria-pressed="true"] { border-color: var(--m-tx); box-shadow: inset 0 0 0 1px var(--m-tx); }
#meet .mt-vlb[aria-pressed="false"] { color: var(--m-mu); }
@media (max-width: 1439px) { #meet .mt-vlb > span { display: none; } }
#meet.ph .mt-vlb > span { display: none; }

/* 원가 칸의 다른 바탕을 걷는다 (2026-10-25, 사용자: 자물쇠 열 머리 갈무리와 "잠금장치 되어있는 컬럼은 다른 색을 사용중인데 이것도 없애줘."): 머리 · 열 글자 줄 · 본문 모두 다른 열과 같은 색, 자물쇠 표시만 남긴다.
   본문은 background-color만 (고른 칸의 덮개 background-image는 남게) */
#meet .mt-t thead th.mt-cost { background: var(--m-hd); }
#meet .mt-t .mt-lr th.mt-cost { background: #f4efe6; }
#meet .mt-t td.mt-cst { background-color: transparent; }

/* 관리자 화면 · 유니패스 자동 대조 칸 (2026-10-25, 시안/유니패스대조-시안-2-관리자화면.png): 자료 점검 맨 위의 흰 칸 — 오늘 몇 개 확인 · 막대 · 다름/못 찾음/건너뜀/끝남 */
.cga { margin: 4px 0 16px; padding: 14px 16px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
.cga-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cga-h > b { font-size: 15px; }
.cga-h > span { font-size: 13px; color: var(--muted); }
.cga-h > span b { color: var(--fg); }
.cga-h > small { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.cga-bar { height: 6px; margin: 10px 0 4px; border-radius: 99px; background: var(--sum); overflow: hidden; }
.cga-bar i { display: block; height: 100%; background: var(--fg); }
.cga p { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.cga p b.r { color: var(--cta); }
.cga .cga-stop { color: var(--warn); font-weight: 600; }
.cga .cga-note { font-size: 12px; }
/* 유니패스 자동 대조 칸의 '오늘 자동 조회 기록' (2026-10-25, 실제 서버의 15초 시간 초과 뒤): 접어 두는 작은 표, 오류 줄은 호박색 */
.cga-log { margin-top: 10px; font-size: 12.5px; }
.cga-log > summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.cga-log table { width: 100%; margin-top: 6px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cga-log th, .cga-log td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.cga-log th { color: var(--muted); font-weight: 600; }
.cga-log td:last-child, .cga-log th:last-child { text-align: right; }
.cga-log tr.e td { color: var(--warn); font-weight: 600; }
.cga .cga-retry { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; margin: 8px 0 0; }
.cga-retry button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--fg); color: var(--on-press); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cga-retry span { font-size: 12.5px; color: var(--muted); }
/* 폰에서 기록 표가 칸 밖으로 튀어나오던 것 (2026-10-25, 사용자: 폰 갈무리와 "핸드폰에서 보면 이렇게 튀어나와있어."): 표는 칸 폭 안에 두고(넘치면 옆으로 밀림), 좁으면 연도 · 방법 열을 빼고 촘촘하게 */
.cga { min-width: 0; overflow: hidden; }
.cga-log table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) {
  .cga-log { font-size: 12px; }
  .cga-log th, .cga-log td { padding: 4px 4px; }
  .cga-log th:is(:nth-child(3), :nth-child(4)), .cga-log td:is(:nth-child(3), :nth-child(4)) { display: none; }   /* 폰은 연도 · 방법(M/H) 열을 빼고 걸린 시간까지 한 화면에 */
}
/* 자동 대조 칸의 단추 글이 두 줄로 꺾이던 것 (2026-10-25, 폰 갈무리 '남은 3개 지금 모 / 두 대조'): 단추는 한 줄 그대로, 설명 글은 자리가 모자라면 단추 아래로 */
.cga .cga-retry { flex-wrap: wrap; }
.cga .cga-retry button { flex: none; white-space: nowrap; }
.cga .cga-retry span { flex: 1 1 200px; min-width: 0; }

/* 시장 흐름 (관세청 수입 통계, 2026-10-25, 시안/시장흐름-시안-* → "좋아 추천대로 진행하자." = 다 + 나): app.js의 '시장 흐름' 주석. --mkt: 1이 신호다 (옛 app.css면 한 줄도 판도 없다).
   다 — PC 묶음 카드 머리 밑 한 줄 .mkt (원산지 · 축종 · 냉동/냉장의 한국 전체 수입량과 평균 수입단가, 작은 막대 · 선, '시장 흐름 ›'). 나 — 화면 전체 판 #mkt (나라마다 카드). 막대와 선은 따로 그린다(축 하나씩) */
:root { --mkt: 1; }
.dcard .mkt { display: flex; align-items: center; gap: 14px; margin: 14px 22px 10px; padding: 10px 14px; border-radius: 14px; background: #f5f0e7; box-shadow: inset 0 0 0 1px #e6dccb; font-size: 13px; font-variant-numeric: tabular-nums; }
.dcard .mkt[hidden] { display: none; }
.mkt-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mkt-t small, .mkt-g small { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.mkt-t span { white-space: nowrap; }
.mkt b { font-weight: 650; }
.mkchg { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.mkt-g { display: flex; flex-direction: column; gap: 2px; }
.mkt-g small { font-size: 10.5px; }
.mkt-more { margin: 0 0 0 auto; padding: 6px 10px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 650; white-space: nowrap; cursor: pointer; }
@media (hover: hover) { .mkt-more:hover { background: var(--surface); color: var(--fg); } }
.mkt-more:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (max-width: 1279px) { .dcard .mkt .mkt-g:nth-of-type(3) { display: none; } }   /* 좁은 PC: 단가 흐름 선은 빼고 */
.mkbars path { fill: #d8cdbb; }
.mkbars path.on { fill: var(--fg); }
.mkbars line { stroke: #d6cab6; stroke-width: 1; }
.mkline path { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mkline circle { fill: var(--fg); stroke: var(--surface); stroke-width: 2; }
.mkline line { stroke: #ebe3d6; stroke-width: 1; }
.mkline text { fill: var(--muted); font-size: 10.5px; font-family: var(--font); }
#mkt { position: fixed; inset: 0; z-index: 520; overflow: auto; overscroll-behavior: contain; padding: 18px 24px 28px; background: var(--bg); color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.012em; }
#mkt .mk-tb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; max-width: 1600px; margin: 0 auto 14px; }
#mkt .mk-tb h1 { margin: 0 6px 0 0; font-size: 24px; font-weight: 500; letter-spacing: -0.05em; }
#mkt .mk-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; background: var(--track); }
#mkt .mk-seg button { margin: 0; padding: 7px 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
#mkt .mk-seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(33, 12, 2, 0.12); }
#mkt .mk-src { color: var(--muted); font-size: 12.5px; }
#mkt :is(.mk-seg button, .mk-x):focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
#mkt .mk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; max-width: 1600px; margin: 0 auto 14px; padding: 12px 16px; border-radius: 14px; background: var(--sum); font-size: 14px; }
#mkt .mk-head > b { font-size: 15px; }
#mkt .mk-head .mk-src { margin-left: auto; }
#mkt .mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; max-width: 1600px; margin: 0 auto; }
#mkt .mk-card { padding: 18px 18px 14px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px #ebe3d6; }
#mkt .mk-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.03em; }
#mkt .mk-card h3 small { margin-left: 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
#mkt .mk-kp { display: flex; gap: 22px; margin-bottom: 10px; }
#mkt .mk-kp > div { display: flex; flex-direction: column; gap: 2px; }
#mkt .mk-kp small { color: var(--muted); font-size: 12px; font-weight: 600; }
#mkt .mk-kp b { font-size: 24px; font-weight: 600; letter-spacing: -0.04em; }
#mkt .mk-kp b em { margin-left: 2px; color: var(--muted); font-size: 13px; font-style: normal; font-weight: 500; }
#mkt .mk-kp .mkchg { margin-left: 0; }
#mkt .mk-lbl { display: flex; justify-content: space-between; margin: 10px 0 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
#mkt .mk-card svg { display: block; width: 100%; height: auto; }
#mkt .mk-ticks { display: flex; justify-content: space-between; margin-top: 3px; color: var(--muted); font-size: 10.5px; }
#mkt .mk-our { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #ebe3d6; color: var(--muted); font-size: 12.5px; }
#mkt .mk-our b { color: var(--fg); }
#mkt .mk-our span { margin-left: auto; }
#mkt .mk-wait { max-width: 1600px; margin: 40px auto; color: var(--muted); font-size: 14px; text-align: center; }

/* 폰 '시장 상황' (2026-10-25, 시안/시장흐름-폰첫화면-시안3 · 폰검색후-시안4 → "오케이 진행하자."): app.js mxPhone. 필터 줄 밑에 원산지 × 품목 카드를 좌우로 넘긴다.
   첫 화면은 큰 카드(단가 크게 · 중간 굵기, 전월 알약, 옅은 면을 깐 단가 선 + 얇은 수입량 막대), 검색 · 필터 중에는 작은 카드(.mxs). 검색어가 있으면 요약 카드를 숨긴다(body.mkq) */
:root { --mkx: 1; }
body.mkq .sumcard { display: none !important; }
#mkx .mx-h { display: flex; align-items: baseline; gap: 8px; }
#mkx .mx-h b { font-weight: 500; letter-spacing: -0.055em; }
#mkx .mx-h small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11.5px; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
#mkx .mx-n { margin-left: auto; flex: none; color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
#mkx .mx-pg { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px 20px 10px; scrollbar-width: none; }
#mkx .mx-pg::-webkit-scrollbar { display: none; }
#mkx .mx-c { flex: none; display: block; width: calc(100% - 46px); margin: 0; padding: 0; border: 0; border-radius: 24px; background: var(--surface); color: var(--fg); font: inherit; font-variant-numeric: tabular-nums; text-align: left; scroll-snap-align: start; cursor: pointer; }
#mkx .mx-c > span { display: flex; }
#mkx .mx-c:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
#mkx .mx-top { align-items: center; gap: 8px; padding: 16px 18px 0; }
#mkx .mx-org { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 650; letter-spacing: -0.03em; white-space: nowrap; }
#mkx .mx-org i { width: 8px; height: 8px; border-radius: 50%; background: var(--fg); }
#mkx .mx-kind { min-width: 0; overflow: hidden; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
#mkx .mx-our { flex: none; margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #f1ebe1; color: #5b4d42; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
#mkx .mx-our b { color: var(--fg); font-weight: 700; }
#mkx .mxd { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; background: #f1ebe1; color: #5b4d42; font-size: 11.5px; font-weight: 650; letter-spacing: 0; white-space: nowrap; }
#mkx :is(.mx-big, .mx-side) small { color: var(--muted); font-weight: 600; letter-spacing: -0.01em; }
#mkx :is(.mx-big, .mx-side, .mxs-v) b em { margin-left: 3px; color: var(--muted); font-size: 12.5px; font-style: normal; font-weight: 500; letter-spacing: -0.02em; }
#mkx .mx-ch { flex-direction: column; padding: 10px 0 0; }
#mkx svg { display: block; width: 100%; height: auto; }
#mkx .mxl .ln { fill: none; stroke: var(--fg); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
#mkx .mxl circle { fill: var(--fg); stroke: var(--surface); stroke-width: 2.5; }
#mkx .mxl text { fill: var(--fg); font: 650 11px var(--font); letter-spacing: -0.02em; }
#mkx .mxb rect { fill: #e3d9c8; }
#mkx .mxb rect.on { fill: var(--fg); }
#mkx .mx-tk { justify-content: space-between; color: var(--muted); font-size: 10.5px; font-weight: 500; }
#mkx .mx-dots { display: flex; justify-content: center; gap: 5px; padding-top: 2px; }
#mkx .mx-dots i { width: 5px; height: 5px; border-radius: 3px; background: #d8cdbb; transition: width 0.2s; }
#mkx .mx-dots i.on { width: 16px; }
/* 검색 · 필터 중: 작은 카드 */
#mkx.mxs .mx-c { width: calc(100% - 60px); border-radius: 22px; }
#mkx.mxs .mx-top { padding: 14px 16px 0; }
#mkx.mxs .mx-org { font-size: 14px; }
#mkx.mxs .mx-kind { font-size: 12px; }
#mkx.mxs .mx-our { padding: 3px 9px; font-size: 11px; }
#mkx .mxs-b { align-items: flex-end; gap: 10px; padding: 8px 16px 0; }
#mkx .mxs-v { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
#mkx .mxs-v b { font-size: 27px; font-weight: 500; letter-spacing: -0.06em; line-height: 1; white-space: nowrap; }
#mkx .mxs-g { flex: 0 1 130px; min-width: 0; margin-left: auto; padding-bottom: 2px; }
#mkx .mxs-g .ln { stroke-width: 2; }
#mkx .mxs-f { align-items: center; gap: 6px; margin: 10px 16px 13px; padding-top: 9px; border-top: 1px solid #efe8dc; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
#mkx .mxs-f b { color: var(--fg); font-weight: 650; }
#mkx .mxs-f .mxd { margin-left: 4px; padding: 1px 6px; font-size: 10.5px; }
#mkx .mxs-f span:last-child { margin-left: auto; }
@media (max-width: 359px) {  #mkx .mx-kind { display: none; } }
/* 폰의 시장 흐름 판 (카드 한 줄씩) */
body:not(.duo) #mkt { padding: calc(env(safe-area-inset-top, 0px) + 14px) calc(env(safe-area-inset-right, 0px) + 14px) calc(env(safe-area-inset-bottom, 0px) + 28px) calc(env(safe-area-inset-left, 0px) + 14px); }
body:not(.duo) #mkt .mk-tb h1 { flex: 1 1 auto; font-size: 22px; }
body:not(.duo) #mkt .mk-seg { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body:not(.duo) #mkt .mk-seg::-webkit-scrollbar { display: none; }
body:not(.duo) #mkt .mk-seg button { flex: none; padding: 7px 14px; font-size: 13.5px; }
body:not(.duo) #mkt .mk-tb .mk-src { order: 4; flex: 1 1 100%; font-size: 12px; }
body:not(.duo) #mkt .mk-head { flex-direction: column; gap: 4px; padding: 11px 14px; font-size: 13.5px; }
body:not(.duo) #mkt .mk-head .mk-src { margin-left: 0; font-size: 11.5px; }
body:not(.duo) #mkt .mk-grid { grid-template-columns: 1fr; gap: 12px; }
body:not(.duo) #mkt .mk-card { padding: 16px 14px 12px; }
body:not(.duo) #mkt .mk-kp b { font-size: 22px; }
body:not(.duo) #mkt .mk-our span { flex: 1 1 100%; margin-left: 0; }

/* 미국 현지 부위 시세 (USDA, 2026-10-25): PC 묶음 카드의 시장 한 줄 밑 · 폰 검색 후 작은 카드 밑. app.js usdaLine */
.dcard .mkt { flex-wrap: wrap; }
.usda { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; padding-top: 8px; border-top: 1px dashed #e0d5c3; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.usda small { color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.usda > span { white-space: nowrap; }
.usda b { font-weight: 650; }
.usda em { margin-left: 6px; color: var(--muted); font-size: 11.5px; font-style: normal; }
.usda svg { flex: none; }
.usda .usda-our { margin-left: auto; color: var(--muted); font-size: 12px; }
.usda .usda-our b { color: var(--fg); }
#mkx .mxs-u { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: -4px 16px 12px; padding-top: 8px; border-top: 1px dashed #e8dfd0; font-size: 12px; }
#mkx .mxs-u small { flex: 1 1 100%; }
#mkx .mxs-u svg { width: 64px; height: auto; margin-left: auto; }
#mkx .mxs-u .mkchg { margin-left: 4px; }
/* 관리자 · 시장 흐름 받기 상태 (2026-10-25) */
.tdst { margin: 4px 0 10px; padding-left: 18px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.tdst b { color: var(--fg); font-weight: 650; }
.tdst .tderr { color: var(--warn); font-weight: 600; }
.tdfiles { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.tdfiles .tderr { color: var(--warn); font-weight: 600; }
/* 폰 '시장 상황' 균형 (2026-10-25, "뭔가 배치 벨런스가 안맞는것 같지 않니???" → "좋아 진행해보자."): 요약 카드 위로 자리를 옮기고(app.js), 첫 화면 카드를 257 → 210px 남짓으로 줄여
   우리 재고 요약보다 크게 보이지 않게 (큰 숫자 34 → 28px, 그래프 낮게, 여백 줄임), 점 줄은 뺐다 */
#mkx { margin: 2px -16px 12px; }
#mkx .mx-h { padding: 0 22px 7px; }
#mkx .mx-h b { font-size: 17px; }
#mkx:not(.mxs) .mx-top { padding: 13px 16px 0; }
#mkx :is(.mx-big, .mx-side) small { font-size: 11px; }
#mkx .mx-ch { padding-top: 6px; }
#mkx .mx-tk { padding: 3px 16px 11px; }

/* 엑셀 모드를 엑셀 짜임으로 (2026-10-26, 사용자: "엑셀과 보다 더 흡사하게 만든다면 어떤 변화가 있을까??" → 시안 가(엑셀 색) · 나(앱 색 + 엑셀 짜임) → "나로 진행해볼까??"
   시안/엑셀모드흡사-나-앱색엑셀짜임.png). 색은 크림 · 에스프레소 그대로, 짜임만: 합계 칸 밑 수식 줄(.mt-fx: 지금 칸 주소 · fx · 값), 맨 아래 시트 탭(.mt-tabs) +
   에스프레소 상태 표시줄(.mt-st: 준비 · 키 안내 · 평균 · 개수 · 합계 · 확대 막대), 고른 열 머리 밑줄 · 행 번호 오른쪽 줄. 폰(#meet.ph)은 수식 줄 · 시트 탭 · 확대 막대 없이 예전 아래 줄 꼴 */
:root { --xl: 1; }   /* app.js가 이것을 보고 엑셀 짜임을 만든다 (옛 app.css면 예전 아래 줄) */
#meet:not(.ph) .mt-t { zoom: var(--pz, 1); }   /* PC 표 크기 (app.js mtDz) */
#meet:not(.ph) .mt-toast { bottom: 70px; }   /* 시트 탭 + 상태 표시줄(60px) 위로 (독립 검토: 겹쳤다) */
#meet .mt-fx { flex: none; display: flex; align-items: stretch; height: 28px; margin: -2px 16px 6px; border: 1px solid var(--m-gl2); background: var(--m-sf); font-size: 13px; }
#meet .mt-nm { flex: none; min-width: 84px; display: flex; align-items: center; padding: 0 9px; border-right: 1px solid var(--m-gl); font-weight: 600; white-space: nowrap; }
#meet .mt-fxi { flex: none; display: flex; align-items: center; padding: 0 11px; border-right: 1px solid var(--m-gl); color: var(--m-mu); font: italic 13px/1 Georgia, "Times New Roman", serif; }
#meet .mt-fxv { flex: 1 1 auto; min-width: 0; padding: 0 10px; line-height: 26px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; user-select: text; -webkit-user-select: text; }
#meet .mt-ft { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0; }
#meet.ph .mt-ft { padding: 0; }
#meet .mt-tabs { flex: none; display: flex; align-items: stretch; height: 30px; margin-top: 4px; padding: 0 16px; border-top: 1px solid var(--m-gl2); background: #efe8dc; font-size: 12.5px; }
#meet .mt-tabs > * { display: flex; align-items: center; padding: 0 18px; color: var(--m-mu); font-weight: 500; cursor: default; }
#meet .mt-tabs > span { opacity: 0.6; }
#meet .mt-tabs > b { margin-top: -1px; border: 1px solid var(--m-gl2); border-top: 0; background: var(--m-sf); color: var(--m-tx); font-weight: 700; box-shadow: inset 0 -2px 0 var(--m-tx); }
#meet .mt-st { display: flex; align-items: center; gap: 16px; min-height: 38px; padding: 5px 16px; }   /* 폰은 예전 아래 줄 그대로 */
#meet.ph .mt-st { min-height: 0; padding: 4px 12px; }
#meet.ph .mt-rdy { display: none; }
#meet:not(.ph) .mt-st { gap: 22px; min-height: 26px; padding: 2px 16px; background: var(--m-tx); color: rgba(240, 235, 226, 0.7); }
#meet .mt-rdy { flex: none; }
#meet:not(.ph) .mt-rdy { color: var(--bg); }
#meet:not(.ph) .mt-st kbd { height: 16px; border-color: rgba(240, 235, 226, 0.3); background: none; color: var(--bg); }
#meet:not(.ph) .mt-sum { gap: 4px 22px; }
#meet:not(.ph) .mt-sum.on > span:first-child { padding: 0; border-radius: 0; background: none; color: inherit; font-weight: inherit; }   /* 예전 '고른 칸 n' 알약을 걷는다 */
#meet:not(.ph) .mt-sum i { font-weight: 700; }
#meet:not(.ph) .mt-sum.on { color: rgba(240, 235, 226, 0.8); }
#meet:not(.ph) .mt-sum b { color: var(--bg); font-weight: 600; }
#meet .mt-zc { flex: none; display: flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--bg); }
#meet .mt-st:not(:has(.mt-sum.on)) .mt-zc { margin-left: auto; }
#meet .mt-zc button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; }
#meet .mt-zc button:disabled { opacity: 0.35; cursor: default; }
#meet .mt-zc svg { width: 12px; height: 12px; }
#meet .mt-zc .mt-zp { width: auto; min-width: 42px; padding: 0 4px; font-size: 12px; font-weight: 600; text-align: right; }
#meet .mt-zr { width: 104px; height: 14px; margin: 0 2px; accent-color: var(--bg); cursor: pointer; }
@media (hover: hover) { #meet .mt-zc button:not(:disabled):hover { background: rgba(240, 235, 226, 0.14); } }
#meet .mt-zc :is(button, input):focus-visible { outline: 2px solid var(--bg); outline-offset: 1px; }
@media (max-width: 1199px) { #meet .mt-zr { width: 72px; } }
/* 고른 칸 (PC): 엑셀처럼 열 이름 칸 밑 · 행 번호 오른쪽에 먹선, 지금 칸은 덮개 없이 흰 칸 + 굵은 테. 폰은 예전 그대로 */
#meet:not(.ph) .mt-t th.mt-sl, #meet:not(.ph) .mt-t td.mt-rn.mt-sl { background: #e2d6c2; }
#meet:not(.ph) .mt-t .mt-nr th.mt-sl { box-shadow: inset 0 -2px 0 var(--m-tx); }
#meet:not(.ph) .mt-t tr.mt-r td.mt-rn.mt-sl { box-shadow: inset -2px 0 0 var(--m-tx); }   /* 상태 색줄(왼쪽 3px)은 그대로 두고 오른쪽에 먹선 */
#meet:not(.ph) .mt-t tr.mt-r.ks td.mt-rn.mt-sl { box-shadow: inset -2px 0 0 var(--m-tx), inset 3px 0 0 var(--m-gt); }
#meet:not(.ph) .mt-t tr.mt-r.kh td.mt-rn.mt-sl { box-shadow: inset -2px 0 0 var(--m-tx), inset 3px 0 0 #d9a441; }
#meet:not(.ph) .mt-t tr.mt-r.ki td.mt-rn.mt-sl { box-shadow: inset -2px 0 0 var(--m-tx), inset 3px 0 0 #d6cab6; }
#meet:not(.ph) .mt-t td.mt-ac { background-image: none; }

/* 폰 시장 카드의 그림자 자리 (2026-10-26, 사용자: 카드 갈무리와 "그림자가 어색한데 한번 봐줄래?" → 시안/폰시장카드그림자-나 → "오케이 나로 가자."): 카드 그림자는 아래로 28px쯤 퍼지는데
   좌우 넘김 칸(overflow-x)이 아래 8px에서 잘라 평평한 띠로 끊겼다. 칸 안쪽 아래를 넓히고 같은 만큼 바깥 여백을 당겨 다음 카드(요약 카드 · 결과)의 자리는 그대로 (처음 22px · −14px, 지금 값은 뒤의 같은 선택자 규칙 24px · −16px) */
/* 마우스로 끌어 넘기기 (같은 날, app.js의 #mkx pointerdown): 마우스 화면은 잡는 손 모양 · 글자 긁기 없음, 끄는 동안은 카드 맞춤을 끈다 */
@media (hover: hover) and (pointer: fine) { #mkx .mx-pg { cursor: grab; user-select: none; -webkit-user-select: none; } }
#mkx .mx-pg.drag { cursor: grabbing; scroll-snap-type: none; }
#mkx .mx-pg.drag .mx-c { pointer-events: none; }

/* 폰 큰 시장 카드: 세 칸 한 줄 (2026-10-26, 시안/폰시장카드줄이기-나-세칸한줄.png "좋아. 추천대로 가자."): 수입단가 | 한국 수입 | 우리 재고, 알약은 칸 이름 옆.
   셋째 칸은 글 폭만큼(auto), 앞 두 칸이 남은 폭을 나눈다 (긴 숫자 '$12.35' · '103,554톤' · '2,705톤'도 390px · 360px에서 한 줄) */
#mkx .mx-3 .mx-top { padding-top: 15px; }
#mkx .mx-n3 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) auto; padding: 11px 18px 0; }
#mkx .mx-n3 > span { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 9px 0 10px; border-left: 1px solid #ece4d7; }
#mkx .mx-n3 > span:first-child { padding-left: 0; border-left: 0; }
#mkx .mx-n3 > span:last-child { padding-right: 0; }
#mkx .mx-nl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 4px; min-height: 19px; }   /* 자리가 모자라면(좁은 폰 · 긴 숫자) 알약이 이름 밑으로 */
#mkx .mx-nl small { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
#mkx .mx-nl .mxd { padding: 1px 6px; font-size: 10.5px; }
#mkx .mx-n3 b { font-size: 17px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; white-space: nowrap; }
#mkx .mx-n3 > span:first-child b { font-size: 28px; font-weight: 500; letter-spacing: -0.06em; }
#mkx .mx-n3 b em { margin-left: 2px; color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 500; letter-spacing: -0.02em; }
@media (max-width: 374px) { #mkx .mx-n3 > span:first-child b { font-size: 23px; } #mkx .mx-n3 b { font-size: 15px; } #mkx .mx-n3 > span { padding: 0 6px 0 7px; } #mkx .mx-nl small { font-size: 10.5px; } }

/* 환율 흐름 (2026-10-26, 사용자: 추천 24번 → 시안/환율흐름-시안-가 "가로 진행하자."): app.js '환율 흐름'. 머리 줄의 USD 글(.fxtap)을 누르면 뜨는 판(#rtsheet .rtin).
   머리 줄의 모양은 그대로이고 USD 글에 점선 밑줄만 둔다. 오름 빨강 · 내림 파랑(국내 시세 관례), 엑셀 USD환율 · 통관환율은 금색 점선. --rth: 1이 신호다 */
:root { --rth: 1; }
#rate .fxtap { text-decoration: underline dotted color-mix(in srgb, var(--muted) 70%, transparent); text-underline-offset: 3px; position: relative; z-index: 1; display: inline; }   /* inline: 옛 규칙 .rate span { display: block }이 이 글을 줄로 떼어 환율 줄이 두 줄이 됐다 (독립 검토 2026-10-26) */
#rate .fxtap::before { content: ""; position: absolute; inset: -10px -6px; }
@media (pointer: coarse) { #rate > span:first-child:has(> .fxtap) { padding-block: 10px; margin-block: -10px; } }   /* 위 손가락 자리가 첫 칸(overflow: hidden)에 잘리지 않게 칸을 위아래로 늘리되 자리는 그대로 */
.cnfx { margin-left: 6px; padding: 1px 8px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); color: var(--fg); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; vertical-align: 1px; }   /* 손가락 자리: 줄의 넓힌 자리(#rate::after, 터치 화면)보다 위에 두고 위아래를 넓힌다. 그 바깥은 예전처럼 연결 상태 */
@media (hover: hover) { #rate .fxtap:hover { color: var(--fg); text-decoration-style: solid; } }
.rtin { width: min(100%, 480px); --rup: #c6221f; --rdn: #1f5fbf; --rref: #a8801c; }
.rtin .sheethead { align-items: flex-start; padding: 14px 12px 4px 18px; }
.rthd b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.rthd small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.rtin .rtbody { padding: 2px 18px 16px; }
.rtnow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.rtnow b { font-size: 32px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.rtnow span { font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.rtin .up { color: var(--rup); }
.rtin .dn { color: var(--rdn); }
.rtseg { display: flex; margin: 12px 0 6px; padding: 3px; border-radius: 999px; background: var(--track); }
.rtseg button { flex: 1; height: 32px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rtseg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(33, 12, 2, 0.12); }
.rtseg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rtch { min-height: 170px; }
.rtch svg { display: block; overflow: visible; font-family: var(--font); }
.rtch text { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.rtch .g { stroke: var(--track); }
.rtch .a { fill: var(--fg); opacity: 0.06; }
.rtch .l { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; }
.rtch line.rf { stroke: var(--rref); stroke-width: 1.2; }
.rtch text.rf { fill: #8a6a14; font-weight: 600; }
.rtch .up { fill: var(--rup); font-weight: 650; }
.rtch .dn { fill: var(--rdn); font-weight: 650; }
.rtch .nw { fill: var(--fg); stroke: var(--surface); stroke-width: 2; }
.rtcells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.rtcells small { display: block; font-size: 11.5px; color: var(--muted); }
.rtcells b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rtcells em { margin-left: 4px; font-size: 11.5px; font-style: normal; color: var(--muted); }
.rtsrc { margin: 12px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.rtmsg { margin: 28px 0; color: var(--muted); text-align: center; }
.rtch text.rf, .rtch text.up, .rtch text.dn { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }   /* 선 위에 얹힌 이름표가 선과 겹쳐도 읽히게 (6개월에서 엑셀 USD환율 글이 선에 걸렸다) */

/* 자료 점검: 저절로 닫힌 직원 알림 · AI 점검에서 그 뒤 바뀐 줄 (2026-10-26, 관리자 화면 .fxauto): 접어 두는 칸. 펼치면 자료 점검의 줄(.dchk)과 같은 꼴 */
.fxauto { margin: 12px 0; padding: 10px 14px; border: 1px dashed var(--edge); border-radius: 12px; background: var(--surface); }
.fxauto > summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.fxauto > summary b { color: var(--fg); font-weight: 650; }
.fxauto > summary small { margin-left: 4px; font-size: 12px; }
.fxauto[open] > summary { margin-bottom: 8px; }
.fxauto .dchk { margin: 0; }

/* PC 묶음 카드 표의 짧은 세로선 (2026-10-26, 사용자: 표 갈무리와 "요상하게 눈에 쏙 안들어오는데 컬럼별 세로 라인이 없어서 그런가?? 세로라인을 사용하는데 처음부터 끝까지 다 긋지 말고
   텍스트 높이 만큼만 | 을 썼을 때" → 시안/PC표세로선-시안-* (가 칸마다 · 나 첫 줄만 · 다 묶음 사이만) → "일단 가로 먼저 진행해보자."):
   건 줄과 머리 줄의 칸 사이마다, 칸의 위아래 여백을 뺀 높이(= 글줄 높이)만큼 가는 선. 섹션 줄(창고 재고 · 통관 전 …)과 상자 바깥 선에는 긋지 않는다.
   선 바로 뒤의 왼쪽 맞춤 글(등급 · B/L · 날짜)은 선에 붙지 않게 10px 띄운다 (전에는 6px, 1180px 아래는 6px 그대로). ::after는 창고 재고 상자의 그림자 띠가 쓰고 있어 ::before를 쓴다 */
body.duo .dt tr:is(.drow, .dch) > :is(td, th) + :is(td, th) { position: relative; }
body.duo .dt tr:is(.drow, .dch) > :is(td, th) + :is(td, th):not(.r) { padding-left: 10px; }
@media (max-width: 1179px) { body.duo .dt tr:is(.drow, .dch) > :is(td, th) + :is(td, th):not(.r) { padding-left: 6px; } }   /* 좁은 PC는 예전 여백 그대로: 칸이 좁아 B/L · 구분이 더 잘렸다 (1040px 직원 화면에서 12px이면 잘린 글 8 → 19, 8px이면 16 → 20) */
body.duo .dt tr:is(.drow, .dch) > :is(td, th) + :is(td, th)::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 9px; width: 1px; background: color-mix(in srgb, var(--fg) 20%, transparent); pointer-events: none; }
body.duo .dt tr.drow.u1 > td + td::before { top: 7px; bottom: 7px; }
body.duo .dt tr.dch > th + th::before { top: 9px; bottom: 8px; }
/* (2026-10-26) 위 .dcard .mkt의 위 여백 2 → 14px: 사용자 "이 부분이 너무 딱 붙어있는것 같지 않니?? 상품 타이틀이 있는데. 너무 붙은것 같아." (머리 줄은 아래 여백이 0이라 시장 줄이 제목 · 알약에 2px로 붙어 있었다) */

/* 시장 흐름 줄의 숫자 칸 꼴 (2026-10-26, 사용자: "이 부분을 조금 더 깔끔하게 정리 해볼까?? 시안 보여줘." → 시안/시장줄정돈-시안-가 · 나 · 다 → "그래 가로 진행해보자."):
   app.js mkPaint의 .mkt.mk2. 색 칠한 상자 대신 가는 테, 칸(.mkc)마다 이름 → 큰 숫자 → 작은 그래프, 칸 사이는 묶음 표와 같은 짧은 세로선.
   미국 현지 도매(USDA) · 돼지 도체 시세(EU)는 둘째 줄이 아니라 넷째 칸 (usdaLine · euLine이 내는 small · span · svg · 우리 평균을 그리드로 앉힌다). --mk2: 1이 신호다 */
:root { --mk2: 1; }
.dcard .mkt.mk2 { flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; background: none; box-shadow: none; border: 1px solid var(--edge); border-radius: 14px; }
.mk2 .mkc { position: relative; display: grid; grid-template-columns: auto auto; justify-content: start; align-content: center; align-items: center; column-gap: 12px; row-gap: 3px; min-width: 0; padding: 10px 18px; }
.mk2 .mkc + .mkc::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: color-mix(in srgb, var(--fg) 14%, transparent); }
.mk2 .mkc > small { grid-column: 1 / -1; min-width: 0; overflow: hidden; color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.mk2 .mkc > span { white-space: nowrap; }
.mk2 .mkc > span:not(.usda-our) b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.mk2 .mkc > span em { margin-left: 6px; color: var(--muted); font-size: 11.5px; font-style: normal; }
.mk2 .mkcl > b { grid-column: 1 / -1; font-size: 14px; font-weight: 650; white-space: nowrap; }
.mk2 .mkc > .usda-our { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; }
.mk2 .mkc > .usda-our b { color: var(--fg); }   /* 예전 .usda .usda-our b와 같게 (원가를 보는 화면의 우리 평균 $/lb) */
.mk2 > .mkt-more { flex: none; align-self: center; margin: 0 8px 0 auto; }
/* 좁은 PC: 줄의 폭(container)에 맞춰 덜어 낸다 — 먼저 칸의 작은 그래프, 더 좁으면 '한국 전체 수입' 칸(나라 · 품목은 카드 제목에 있다), 그래도 넘치면 칸 안에서 자른다(겹치지 않게) */
.dcard .mkt.mk2 { container-type: inline-size; }
.mk2 .mkc { overflow: hidden; }
/* 기준 폭은 칸 수마다 (넷째 칸 = 미국 · EU 시세가 있을 때 더 일찍): 1280px 화면의 세 칸 줄(798px)은 그래프를 둔다 */
@container (max-width: 660px) { .mk2 .mkc > svg { display: none; } .mk2 .mkc { padding: 10px 14px; } }
@container (max-width: 540px) { .mk2 .mkcl { display: none; } .mk2 .mkcl + .mkc::before { content: none; } }
@container (max-width: 900px) { .mk2:has(> .mkc:nth-child(4)) .mkc > svg { display: none; } .mk2:has(> .mkc:nth-child(4)) .mkc { padding: 10px 14px; } }
@container (max-width: 680px) { .mk2:has(> .mkc:nth-child(4)) .mkcl { display: none; } .mk2:has(> .mkc:nth-child(4)) .mkcl + .mkc::before { content: none; } }

/* 폰 묶음 카드의 숫자 칸 (2026-10-26, 사용자: "모바일 화면도 정리 해줘." → 시안/폰묶음요약-시안3-가 "응 진행해줘."): app.js group의 .gq.
   캐틀 | 케팩 | 통관 전 | 입고 예정 | 소진을 칸마다 작은 이름 위 숫자로 한 줄, 칸 사이는 짧은 세로선(PC 표 · 시장 줄과 같은 꼴). 판매가(.gmeta)는 그 밑, 복사 단추 줄의 왼쪽. --gq: 1이 신호다 */
:root { --gq: 1; }
.ginfo .gq { display: flex; flex: 1 1 100%; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.gq > div { position: relative; flex: 1 1 0; min-width: 0; padding: 0 10px; }
.gq > div:first-child { padding-left: 0; }
.gq > div + div::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px; background: color-mix(in srgb, var(--fg) 14%, transparent); }
.gq small { display: block; overflow: hidden; color: var(--muted); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.gq b { display: block; margin-top: 1px; overflow: hidden; font-size: 15px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.gq i { margin-left: 1px; color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 500; }
.gq .lo b { color: var(--muted); font-size: 14px; font-weight: 500; }
.ginfo:has(> .gq) { column-gap: 8px; }   /* 판매가와 복사 단추가 390px에서 한 줄에 들어가게 (16px이면 2px 넘쳐 판매가가 혼자 줄을 차지했다) */
@media (max-width: 389px) { .gq i.u { display: none; } }   /* 360 · 320px: '4,448박스'가 칸에서 잘렸다. 박스는 머리의 큰 숫자에 있다 */
@media (max-width: 359px) { .gq > div { padding: 0 7px; } .gq b { font-size: 14px; } .gq i { font-size: 10.5px; } }

/* 관리자 사용량 · 날짜별 표의 운영체제 나눔 (2026-10-26, admin.php $uOsDay): '5대' 밑에 'iOS 3 · 안드로이드 2' */
.utab small.uos { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; white-space: nowrap; }

/* 상품 영문명 (2026-10-26, 사용자: "상품명 바로 아래에 작게 영문명으로 써줘." → 시안/영문명-시안 다 "다. 로 가자."): app.js enLine. 대문자 · 괄호 줄임말 뺌 · 자간 넓게 · 놋쇠색
   (단가표 그림의 'PRICE LIST'와 같은 꼴). 폰은 묶음 카드 제목 바로 밑(브랜드 알약 위), PC는 제목 · 알약 줄 밑 한 줄. --gen: 1이 신호다 */
:root { --gen: 1; }
.gen { display: block; color: #8a6a14; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.gname .gen { margin-top: 1px; }
body.duo .dttl.hasen { flex-wrap: wrap; row-gap: 0; }
body.duo .dttl > .gen { flex: 1 1 100%; margin-top: -2px; }

/* PC 묶음 표 날짜 칸 정돈 (2026-10-26, 사용자: 통관 전 · 입고 예정 상자의 날짜 칸 갈무리와 "이 부분 조금더 깔끔하게 정돈해줄 수 있니??" → 시안/날짜칸정돈-시안 나 "좋아 나로 진행하자."):
   이름 칸 폭(28 · 50 · 56px)을 없애고 '진행 미통관' · '입항 10/23'처럼 이름을 값 바로 앞에, 둘째 줄은 칸 왼쪽부터. 상자마다 값이 서는 자리가 달라 보이던 것과 이름 뒤 빈틈이 사라지고,
   좁은 날짜 칸(원가 · 단가가 있는 화면)에서 둘째 줄이 한 줄에 든다. 1180px 아래에서 두 글자 이름(유통 · 진행)을 감추는 위 규칙은 그대로 */
body.duo .dt td.dd .l1 > i, body.duo .dt td.dd.d2 .l1 > i { width: auto; margin-right: -2px; }
body.duo .dt td.dd .l2, body.duo .dt td.dd.d2 .l2 { padding-left: 0; }

/* PC 머리 줄 ⚙ · 나가기를 '엑셀 모드' 단추와 같은 꼴로 (2026-10-26, 사용자: "이 버튼들도 엑셀모드와 동일하게 표현해줘." → 시안/머리단추-시안 가 "좋아 가로 가자."):
   흰 바탕 · 가는 테두리 · 34px 동그라미, 마우스를 올리면 먹색. 이름은 넣지 않는다(넣으면 1440px에서 환율 줄이 잘렸다; 이름은 마우스를 올리면 뜬다) */
@media (min-width: 1040px) {
  body.duo .cols .head .hbtn { width: 34px; height: 34px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair2); color: var(--fg); }
  body.duo .cols .head .hbtn svg { width: 16px; height: 16px; stroke-width: 1.8; }
  @media (hover: hover) { body.duo .cols .head .hbtn:hover { background: var(--fg); color: var(--on-press); box-shadow: none; } }
  body.duo .cols .head .hbtn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
}

/* PC 머리 줄 환율 · 연결 상태를 흰 알약 둘로 (2026-10-26, 사용자: "요기 버튼도 조금 이상하지 않니??" → 시안/환율줄단추-시안 → "1. 나"):
   누를 수 있는 두 곳(환율 → 환율 흐름 판, 연결 상태 → 연결 상태 판)을 엑셀 모드 · ⚙ · 나가기와 같은 흰 알약으로. 환율 알약은 전체를 누르면 환율 흐름(app.js #rate 클릭).
   환율 알약은 자리가 모자라면 줄임표로 줄어든다(예전처럼) */
@media (min-width: 1040px) {
  body.duo .cols .head > #rate { gap: 6px; }
  body.duo .cols .head > #rate > span:first-child { display: block; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair2); line-height: 34px; }
  body.duo .cols .head > #rate .cnpill { height: 34px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair2); }
  body.duo .cols .head > #rate .fxtap { text-decoration: none; }
  @media (hover: hover) { body.duo .cols .head > #rate > span:first-child:hover, body.duo .cols .head > #rate .cnpill:hover { background: var(--ground); } }
}
/* PC 검색창을 굵게 (2026-10-26, 사용자: "검색창 부분이 중요한 부분인데 뭔가 임팩트가 없어." → 시안/검색창-시안 → "2. 가"):
   높이 40 → 50px · 먹색 2px 테두리 · 글자 16px, 돋보기는 먹색 원(폰과 같은 꼴), 밑의 필터 알약은 한 단계 작게 — 검색창이 카드의 주인공이 되게 */
@media (min-width: 1040px) {
  body.duo .top #q { height: 50px; border: 2px solid var(--fg); box-shadow: 0 2px 8px rgba(33, 12, 2, 0.08); font-size: 16px; font-weight: 500; }
  body.duo .top #q::placeholder { color: color-mix(in srgb, var(--fg) 55%, transparent); }
  body.duo .top .search.go #q, body.duo .top .search.go #q:placeholder-shown { padding-left: 18px; }
  body.duo .top .qgo { background: var(--fg); color: var(--surface); }
  @media (hover: hover) { body.duo .top .qgo:hover { background: color-mix(in srgb, var(--fg) 84%, var(--surface)); } }
  body.duo .top .fbar .chip { height: 30px; font-size: 12.5px; }
}
/* 폰 검색창도 굵게 (2026-10-26, 사용자: "모바일 버전도 검색창 강조해줘." — 같은 날 PC 검색창 가와 같은 꼴): 옅은 1px 테두리 → 먹색 2px · 옅은 그림자 · 글자 500,
   자리표시 글을 조금 진하게. 높이(49px) · 먹색 돋보기는 원래 그대로. 두 판(PC)은 위 규칙이 맡는다 */
body:not(.duo) .search.go #q, body:not(.duo) .search.go #q:focus-visible, body:not(.duo) .search.go #q:not(:placeholder-shown) { border: 2px solid var(--fg); box-shadow: 0 2px 8px rgba(33, 12, 2, 0.08); font-weight: 500; }
body:not(.duo) .search.go #q::placeholder { color: color-mix(in srgb, var(--fg) 55%, transparent); }

/* 판매보고 손익 색 (지금 팔면 손해 · 이익) */
#ssheet .mi { color: #a01210; } #ssheet .pl { color: #1f6b44; }

/* 그래프 효과 (2026-10-26, 사용자: 효과 추천 "1번 좋다. 2번도 좋다. 3번도 좋다. 진행."): 폰 시장 카드(.mxl) · 시장 흐름 판(.mkline 큰 그래프) · 환율 판(.rtch)
   1 선이 왼쪽에서 그려지고(pathLength 1 + dashoffset), 그 뒤 그라데이션 면과 끝 점이 스며든다 / 3 끝 점(지금 값)이 은은하게 세 번 퍼진다(.pz).
   동작 줄이기를 켠 화면에는 없다(.pz도 감춘다). 숫자가 올라가는 효과(2)는 app.js roll */
.pz { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mxl .ln, .mkline .ln, .rtch .l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mjdraw 0.7s cubic-bezier(0.3, 0.6, 0.3, 1) forwards; }
  .mxl .ar, .mkline .ar, .rtch .a, .mxl circle:not(.pz), .mkline .ln ~ circle:not(.pz), .rtch circle:not(.pz) { animation: mjfade 0.45s 0.5s ease-out both; }
  .mxl .pz, .mkline .pz, .rtch .pz { display: inline; fill: var(--fg); stroke: none; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: mjpulse 1.5s ease-out 0.9s 3 both; }
}
@keyframes mjdraw { to { stroke-dashoffset: 0; } }
@keyframes mjfade { from { opacity: 0; } }
@keyframes mjpulse { 0% { transform: scale(1); opacity: 0.35; } 100% { transform: scale(3.2); opacity: 0; } }

/* PC 묶음 표: 열 차례 B/L → EST · 등급 → 품명 (2026-10-26, 사용자: "공장번호, 등급 순서로 표현해주고 상품명 컬럼도 추가해서" → 시안/품명열-시안 가 → "bl, est/등급, 품명 순서로"):
   품명 열(c-it, 품명 위 · 브랜드 아래)은 10%: table-layout: fixed라 다른 열이 비율대로 줄어든다. 단가 열까지 있는 1180~1279px(관리자)은 원래 빠듯해 품명 열 40px만으로 B/L · kg가 잘려서
   그 폭에서는 품명 열을 접는다(폭 0, 내용 감춤: 열을 빼면 구역 제목 줄의 칸 수가 어긋난다). 품명은 카드 제목에 크게 있다 */
body.duo .dt col.c-it { width: 10%; }
body.duo .dt td.it .l1 { font-weight: 600; }
body.duo .dt td.it :is(.l1, .l2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1279px) {
  body.duo .dt.up col.c-it { width: 0; }
  body.duo .dt.up :is(td, th).it { padding: 0 !important; overflow: hidden; }
  body.duo .dt.up :is(td, th).it > *, body.duo .dt.up :is(td, th).it::before { display: none; }
}

/* 폰 건 줄 첫 칸의 품명 줄 (2026-10-26, app.js lot의 itLine, 시안/폰품명-시안 가): 공장번호 · 등급 알약 밑, B/L 위. 품명이 카드 제목과 같아도 늘 보인다(사용자가 고름) */
.lot .lit { display: block; margin-top: 2px; color: var(--fg); font-size: 12px; font-weight: 600; line-height: 1.3; }

/* PC 목록 줄의 남은 재고 (2026-10-26, app.js duoLeftText · duoLeftLine, 시안/PC남은재고막대-시안 가): 칸 막대(.dseg) 대신
   줄 맨 밑 경계선 위에 남은 만큼만 진한 2px 선, 둘째 줄 끝에 'n% 남음'. 둘째 줄이 길면 앞 글이 줄임표로 줄고 '% 남음'은 남는다 */
body.duo #list > .group.duo { position: relative; }
body.duo #list > .group.duo > .dll { position: absolute; left: 0; bottom: -1px; z-index: 1; height: 2px; border-radius: 0 2px 2px 0; background: color-mix(in srgb, var(--fg) 45%, transparent); pointer-events: none; }
body.duo #list > .group.duo > .dll.low { background: var(--warn); }
body.duo .dline .ds { display: flex; min-width: 0; }
body.duo .dline .ds > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.duo .dline .ds .dlp { flex: none; font-weight: 600; color: var(--fg); }
body.duo .dline .ds > span + .dlp::before { content: "·"; margin: 0 4px; font-weight: 400; color: var(--muted); }
body.duo .dline .ds .dlp.low { color: var(--warn); }

/* 판매보고 재구성 (2026-10-26, app.js srRender · srPriceBlock · srRes · srPL, 시안/판매보고재구성-시안 가): 번호 붙은 세 칸(구매자 조건 · 먼저 팔 순서 · 손익 보기),
   늘 같은 순서를 알약으로 적은 상자, 판매가 접기 단추, 손해 건 세 갈래(탭처럼 귀리색 길 + 흰 알약), 줄마다 임박 · 손해 표시와 '지금 팔면' 한 줄 */
#ssheet .sx-step { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--fg); }
#ssheet .srcond .sx-step:first-child { margin-top: 4px; }
#ssheet .sx-step i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); color: var(--surface); font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; }
#ssheet .sx-step small { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--muted); }
#ssheet .sx-order { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 11px 12px; border-radius: 12px; background: var(--sum); font-size: 13.5px; font-weight: 650; }
#ssheet .sx-order b { padding: 3px 10px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); font-weight: 700; }
#ssheet .sx-order em { font-style: normal; color: var(--muted); }
#ssheet .sx-order small { flex-basis: 100%; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--muted); }
#ssheet .sx-fold { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--edge); background: var(--surface); font-size: 13px; cursor: pointer; }
#ssheet .sx-fold:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
#ssheet .sx-fold b { flex: none; font-weight: 700; }
#ssheet .sx-fold span { min-width: 0; color: var(--muted); }
#ssheet .sx-fold i { flex: none; margin-left: auto; font-style: normal; font-weight: 600; color: var(--fg); }
#ssheet .sx-fold + .sx-prices { margin: 4px 0 0; }
#ssheet .sx-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--track); }
#ssheet .sx-seg button { all: unset; box-sizing: border-box; padding: 7px 4px; border-radius: 9px; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--muted); cursor: pointer; }
#ssheet .sx-seg button small { display: block; font-size: 11px; font-weight: 500; }
#ssheet .sx-seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(33, 12, 2, 0.12); }
#ssheet .sx-seg button:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
#ssheet .sx-hint { margin: 6px 2px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
#ssheet .sx-lot .sx-lpl { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12px; color: var(--muted); }
#ssheet .sx-lpl b { font-size: 12.5px; font-weight: 700; }
#ssheet .sx-soonb { display: inline-block; padding: 1px 7px; border-radius: 99px; background: #7d1f17; color: #fff; font-size: 11px; font-weight: 700; }
#ssheet .sx-lossb { display: inline-block; padding: 1px 7px; border-radius: 99px; box-shadow: inset 0 0 0 1px #d9a19b; color: #a01210; font-size: 11px; font-weight: 700; }
#ssheet .sx-money { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(33, 12, 2, 0.1); font-size: 12.5px; }

/* 폰 시장 카드의 좌우 자리 (2026-10-27, 사용자: "표시할 카드가 1개밖에 없어 좌우로 스와이프 할 일이 없는경우. 화면 폭에 맞게 가득 채우자. 물론 좌우여백을 다른 요소들과 맞춰야겠지???"
   → 시안/폰시장카드한장-시안 나 "굿굿 좋아. 진행하자."): 카드 줄은 목록 · 요약 카드 · 검색 칸과 같은 16px에서 시작한다 (전에는 20px라 4px 어긋났다).
   한 장뿐이면(.one, app.js mxPhone) 16px ~ 화면 폭 -16px를 채우고 '1 / 1'은 숨긴다. 작은 카드의 단가 그래프는 남는 폭을 채운다 (app.js가 그 폭으로 다시 그려 높이는 그대로) */
#mkx .mx-pg { padding-inline: 16px; scroll-padding: 0 16px; }
#mkx.one .mx-n { display: none; }
#mkx.one .mx-c { width: 100%; }
#mkx.one .mxs-g { flex: 1 1 0; margin-left: 14px; }

/* 선택한 표시만 작게 눌렸다 돌아온다. 표의 ✓도 같은 반응이며, 숫자·칸의 배치는 움직이지 않는다. */
@keyframes selectionCheck { 0% { transform: scale(0.78); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .selecting .lot.sel-pop[aria-pressed="true"]::before,
  body.duo.selecting .dt tr.drow.sel-pop[aria-pressed="true"] td:first-child .l1::before { animation: selectionCheck 0.16s ease-out; }
}
body.duo.selecting .dt tr.drow.sel-pop td:first-child .l1::before { display: inline-block; }
/* SVG 전체 좌표의 바닥에서 자라게 한다. 각 막대의 중심을 쓰면 위아래로 벌어져 기준선이 흔들린다. */
svg[data-market-bars] > :is(path, rect) { transform-box: view-box; transform-origin: 0 100%; }

/* 유니패스 결과: 현재 단계의 점에서 옅은 고리가 한 번만 퍼진다. 고정 고리는 남겨 끝에서 모양이 튀지 않게 한다. */
@keyframes cargoDotRing {
  from { box-shadow: var(--cg-dot-shadow), 0 0 0 0 color-mix(in srgb, var(--cg-dot-color) 26%, transparent); }
  to { box-shadow: var(--cg-dot-shadow), 0 0 0 11px color-mix(in srgb, var(--cg-dot-color) 0%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .cgrail li.cg-dot-pulse::after, :is(.cgnow, .cgstat) > i.cg-dot-pulse { animation: cargoDotRing 0.4s ease-out; }
}

/* 미국 소 공급 띠 (2026-10-27, 시안/미국도축-시안 나 "1. 나로 진행하자. 2. 오케이"): app.js slBand. 시장 흐름 판(#mkt)의 소고기 탭 맨 위, 미국 카드가 있을 때만.
   왼쪽 숫자 셋(지난 주 · 올해 누계 · 암소 · 황소 비중), 오른쪽 52주 선(올해 실선 · 작년 같은 주 점선). 폰(두 판이 아닐 때)은 숫자 셋을 한 줄 세 칸, 그래프는 그 밑. --sl: 1이 신호다 */
:root { --sl: 1; }
#mkt .sl-band { max-width: 1600px; margin: 0 auto 14px; padding: 16px 18px 12px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px #ebe3d6; }
#mkt .sl-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
#mkt .sl-hd h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.03em; }
#mkt .sl-hd h3 small { margin-left: 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em; }
#mkt .sl-hd .mk-src { margin-left: auto; color: var(--muted); font-size: 12px; }
#mkt .sl-in { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: center; }
#mkt .sl-kp { display: grid; gap: 12px; }
#mkt .sl-kp > div { display: grid; gap: 3px; min-width: 0; padding-left: 12px; border-left: 2px solid #ebe3d6; }
#mkt .sl-kp small { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
#mkt .sl-kp b { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#mkt .sl-kp b em { margin-left: 3px; color: var(--muted); font-size: 12.5px; font-style: normal; font-weight: 500; }
#mkt .sl-kp span { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
#mkt .sl-ch svg { display: block; width: 100%; height: auto; overflow: visible; }
#mkt .sl-ch .g { stroke: #ece4d7; }
#mkt .sl-ch .ly { fill: none; stroke: #b9a993; stroke-width: 1.6; stroke-dasharray: 4 3; }
#mkt .sl-ch .ty { fill: none; stroke: var(--fg); stroke-width: 2.2; stroke-linejoin: round; }
#mkt .sl-ch circle { fill: var(--fg); stroke: var(--surface); stroke-width: 2.5; }
#mkt .sl-ch text { fill: var(--muted); font: 500 11px var(--font); font-variant-numeric: tabular-nums; }
#mkt .sl-ch text.k { font-weight: 650; }
#mkt .sl-ch text.ty2 { fill: var(--fg); }
body:not(.duo) #mkt .sl-band { margin-bottom: 12px; padding: 14px 14px 10px; }
body:not(.duo) #mkt .sl-in { grid-template-columns: 1fr; gap: 10px; }
body:not(.duo) #mkt .sl-kp { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body:not(.duo) #mkt .sl-kp > div { padding-left: 8px; }
body:not(.duo) #mkt .sl-kp small { white-space: normal; }
body:not(.duo) #mkt .sl-kp b { font-size: 17px; }
body:not(.duo) #mkt .sl-kp span { font-size: 11px; }
body:not(.duo) #mkt .sl-hd .mk-src { margin-left: 0; flex-basis: 100%; font-size: 11px; }

/* 미국 부산물 시세 띠 (2026-10-27, "좋아 부산물 시세 진행하자." → 시장 흐름 판에 띠): app.js bpBand. 소 공급 띠(.sl-band)의 겉모양에 품목 줄(.bp-r)만 더한다.
   PC: 이름 | 지금 $/kg | 3개월 전보다 | 1년 전보다 | 1년 선 | 그대로 알림. 폰(두 판이 아닐 때): 이름 · 값 한 줄, 그 밑에 견줌 둘과 선. --bp: 1이 신호다 */
:root { --bp: 1; }
#mkt .bp-l { display: grid; }
#mkt .bp-r { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(110px, 1fr) minmax(90px, 0.8fr) minmax(90px, 0.8fr) 150px minmax(110px, 1fr); align-items: center; gap: 4px 14px; padding: 9px 0; border-top: 1px solid #f0e9de; }
#mkt .bp-r:first-child { border-top: 0; padding-top: 2px; }
#mkt .bp-n { display: grid; gap: 1px; min-width: 0; }
#mkt .bp-n b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
#mkt .bp-n small, #mkt .bp-c small { overflow: hidden; color: var(--muted); font-size: 11.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
#mkt .bp-v { white-space: nowrap; }
#mkt .bp-v b { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#mkt .bp-v em { margin-left: 2px; color: var(--muted); font-size: 12px; font-style: normal; }
#mkt .bp-c { display: grid; gap: 1px; }
#mkt .bp-c .mkchg { margin-left: 0; font-size: 13px; }
#mkt .bp-g svg { display: block; width: 150px; height: 32px; }
#mkt .bp-s { color: var(--muted); font-size: 12px; white-space: nowrap; }
body:not(.duo) #mkt .bp-r { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n v v" "c1 c2 g"; gap: 4px 12px; padding: 10px 0; }
body:not(.duo) #mkt .bp-n { grid-area: n; }
body:not(.duo) #mkt .bp-v { grid-area: v; justify-self: end; }
body:not(.duo) #mkt .bp-c:nth-of-type(3) { grid-area: c1; }
body:not(.duo) #mkt .bp-c:nth-of-type(4) { grid-area: c2; }
body:not(.duo) #mkt .bp-g { grid-area: g; justify-self: end; }
body:not(.duo) #mkt .bp-g svg { width: 110px; height: 28px; }
body:not(.duo) #mkt .bp-s { grid-column: 1 / -1; font-size: 11.5px; }
body:not(.duo) #mkt .bp-s:empty { display: none; }

/* 띠 아래 출처 (2026-10-27, 사용자: "반드시 자료 출처를 밝혀줘야해."): app.js slBand · bpBand의 p.sl-from. 기관 · 보고서 이름 · 원문 링크 */
#mkt .sl-from { margin: 12px 0 0; padding-top: 9px; border-top: 1px solid #f0e9de; color: var(--muted); font-size: 12px; line-height: 1.55; }
#mkt .sl-from b { margin-right: 4px; color: var(--fg); font-weight: 650; }
#mkt .sl-from a { margin-left: 4px; color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
body:not(.duo) #mkt .sl-from { font-size: 11.5px; }

/* '시장 흐름' 탭 (2026-10-27, 사용자: "여기에 '시장' 탭을 하나 더 만들어서 연결 해줘야 할 것 같아." → 시장 흐름 판을 연다): app.js syncMarketTab, 탭 줄 넷째 단추.
   폰은 탭 띠가 넓어 '시장 흐름' 그대로. PC 머리 막대는 빠듯해(탭 한 칸 84px만큼 환율 줄이 가려졌다) 탭이 넷이면 칸을 좁히고 넷째는 '시장'만 (전체 폭은 셋일 때보다 12~18px만 는다) */
body.duo .cols .head > #modes .seg:has([data-view="market"]) { --tw: 66px; }
body.duo .cols .head > #modes .seg [data-view="market"] .mkx-t { display: none; }
@media (max-width: 1279px) { body.duo .cols .head > #modes .seg:has([data-view="market"]) { --tw: 56px; } }
@media (max-width: 1179px) { body.duo .cols .head > #modes .seg:has([data-view="market"]) { --tw: 48px; } }

/* 시장 흐름 화면 (2026-10-27, 사용자: "시장흐름도 다른 내용과 마찬가지로 필터 아래에 표현해줘." · "도축 내용이 제일 먼저 나와야해." → 시안/시장화면-시안 "이대로 진행"): app.js renderMarket.
   예전 덮개 판(#mkt)의 꾸밈을 그대로 쓰되 목록(폰) · 오른쪽 판(PC) 안에 그리므로 덮개 꼴(fixed · 바탕 · 여백)만 걷는다. body.market일 때만이라 옛 app.js의 덮개 판은 그대로 덮개다.
   PC는 왼쪽 목록 카드의 품목 줄(.mkrow)이 고르기를 맡아 알약 줄을 숨긴다. --mkv: 1이 신호다 (없으면 app.js가 탭을 내지 않는다) */
:root { --mkv: 1; }
body.market #mkt, body.market:not(.duo) #mkt { position: static; inset: auto; z-index: auto; overflow: visible; overscroll-behavior: auto; padding: 0; background: none; }
body.market #mkt .mk-tb { margin: 0 0 10px; }
body.market.duo #mkt .mk-seg { display: none; }
body.market.duo #mkt .mk-tb .mk-src { margin-left: 0; }
body.market.duo #pbody > #mkt { padding: 0 0 28px; }
body.market #list > li.mkli { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; list-style: none; }
body.market:not(.duo) #list > li.mkli { margin-top: 4px; }
body.market #list .mk-wait { margin: 18px 4px; color: var(--muted); font-size: 14px; }
body.market .mkrow { display: grid; gap: 3px; width: 100%; margin: 0; padding: 13px 18px; border: 0; border-bottom: 1px solid var(--line2, #eee6da); background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
body.market .mkrow b { font-size: 16px; font-weight: 650; letter-spacing: -0.03em; }
body.market .mkrow small { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
body.market .mkrow small em { font-style: normal; opacity: 0.75; }
body.market .mkrow[aria-pressed="true"] { background: color-mix(in srgb, var(--fg) 6%, var(--surface)); box-shadow: inset 3px 0 0 var(--fg); }
@media (hover: hover) { body.market .mkrow:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--fg) 3%, transparent); } }
body.market .mkrow:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
/* PC 오른쪽 판 안에서는 판이 덮개 때보다 좁아(1440에서 1004px, 1100에서 680px 남짓) 도축 그래프가 작아졌다: 숫자 셋을 한 줄에 두고 그래프를 그 밑에 판 폭으로.
   좁은 PC(1280 미만)에서는 부산물 줄도 폰처럼 두 줄로 (여섯 칸의 최소 폭 합이 판보다 넓어진다) */
body.market.duo #mkt .sl-in { grid-template-columns: 1fr; gap: 12px; }
body.market.duo #mkt .sl-kp { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1279px) {
  body.market.duo #mkt .bp-r { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n v v" "c1 c2 g"; gap: 4px 12px; padding: 10px 0; }
  body.market.duo #mkt .bp-n { grid-area: n; }
  body.market.duo #mkt .bp-v { grid-area: v; justify-self: end; }
  body.market.duo #mkt .bp-c:nth-of-type(3) { grid-area: c1; }
  body.market.duo #mkt .bp-c:nth-of-type(4) { grid-area: c2; }
  body.market.duo #mkt .bp-g { grid-area: g; justify-self: end; }
  body.market.duo #mkt .bp-s { grid-column: 1 / -1; }
  body.market.duo #mkt .bp-s:empty { display: none; }
}
body.market .selbtn, body.market #gonenote { display: none; }   /* 시장 흐름 화면에는 고를 건이 없다 (단가표와 같게), 냉장의 '목록에서 뺀 건' 알림도 재고 이야기 (독립 검토) */

/* 뉴스 화면 (2026-10-27, 사용자: "해외 소식은 시장 흐름 오른쪽에 버튼을 하나 더 만들어서 따로 빼자. 뉴스로 … 중요한 소식한개는 클릭하지 않아도 볼 수 있게하자." → "본문도 나와야지..."):
   app.js renderNews · renderNewsPane · renderNewsTop. 폰: 목록, 누르면 요점이 그 자리에서 펼쳐짐. PC: 왼쪽 목록 · 오른쪽 요점. 탭 줄 밑 주요 뉴스 한 줄(#nwtop): 폰은 검색 카드 위,
   PC는 머리 막대 밑에 고정하고 두 판을 그만큼(44px) 내린다. PC 탭 다섯이면 칸을 더 좁힌다. --nwv: 1이 신호다 (없으면 app.js가 뉴스 탭을 내지 않는다) */
:root { --nwv: 1; }
.nwtop { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 9px 12px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); color: var(--fg); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.nwtop .tg { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--fg); color: var(--surface); font-size: 11.5px; font-weight: 700; }
.nwtop b { min-width: 0; overflow: hidden; font-weight: 600; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
.nwtop small { flex: none; color: var(--muted); font-size: 12px; }
.nwtop i { flex: none; margin-left: auto; color: var(--muted); font-style: normal; }
.nwtop:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
body:not(.duo) .nwtop { margin: 6px 0 12px; align-items: flex-start; flex-wrap: wrap; }   /* 폰: 재고 탭 첫 화면의 '시장 상황' 바로 위 */
body:not(.duo) .nwtop b { flex: 1 1 calc(100% - 90px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.4; }   /* 폰은 두 줄까지 */
body:not(.duo) .nwtop small { flex-basis: 100%; padding-left: 2px; }
body:not(.duo) .nwtop i { display: none; }
body.duo .nwtop { position: fixed; z-index: 5; top: 84px; left: max(20px, calc((100vw - 1600px) / 2 + 20px)); right: max(20px, calc((100vw - 1600px) / 2 + 20px)); width: auto; height: 36px; padding: 0 14px; }
body.duo.nwon > .wrap, body.duo.nwtop > .wrap { padding-top: 130px; }   /* body.nwon (2026-10-27): 띠와 같은 이름(nwtop)이던 때 띠의 규칙이 화면 전체에 걸렸다. nwtop은 옛 app.js가 남은 동안만 */
body.duo .cols .head > #modes .seg:has([data-view="news"]) { --tw: 56px; }
@media (max-width: 1279px) { body.duo .cols .head > #modes .seg:has([data-view="news"]) { --tw: 50px; } }
@media (max-width: 1179px) { body.duo .cols .head > #modes .seg:has([data-view="news"]) { --tw: 44px; } body.duo .cols .head > #modes .seg:has([data-view="news"]) button { font-size: 13px; } }
@media (max-width: 380px) { #modes .seg:has([data-view="news"]) .mkx-t { display: none; } }   /* 좁은 폰: 탭 다섯이면 '시장'만 */
body.news .selbtn, body.news #gonenote { display: none; }
body.news #list > li.nwli { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; list-style: none; }
body.news #list .mk-wait { margin: 18px 4px; color: var(--muted); font-size: 14px; }
.nwl { margin: 0; padding: 0; list-style: none; }
.nwli2 { list-style: none; }
.nwr { display: grid; gap: 4px; width: 100%; margin: 0; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--line2, #eee6da); background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.nwr b { font-size: 14.5px; font-weight: 600; line-height: 1.45; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.nwr small { color: var(--muted); font-size: 12px; }
.nwr .cc, .nwd .cc { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--edge); color: var(--fg); font-size: 11px; font-weight: 650; }
.nwr:is(.nwhot, .top) b::before { content: "주요"; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--fg); color: var(--surface); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.nwr[aria-pressed="true"] { background: color-mix(in srgb, var(--fg) 6%, var(--surface)); box-shadow: inset 3px 0 0 var(--fg); }
@media (hover: hover) { .nwr:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--fg) 3%, transparent); } }
.nwr:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
body:not(.duo) .nwl { margin-top: 4px; padding: 0 14px; border-radius: 18px; background: var(--surface); }
body:not(.duo) .nwr { padding: 13px 2px; }
body:not(.duo) .nwli2.open .nwr { border-bottom: 0; padding-bottom: 6px; }
body:not(.duo) .nw-body { padding: 0 2px 14px; border-bottom: 1px solid var(--line2, #eee6da); }
.nw-pts { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.nw-pts li { margin: 2px 0; }
.nw-none { margin: 6px 0 8px; color: var(--muted); font-size: 13px; }
.nw-en { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.nw-go { display: inline-block; padding: 8px 15px; border-radius: 999px; background: var(--fg); color: var(--surface); font-size: 13px; font-weight: 650; text-decoration: none; }
.nw-from { margin: 12px 4px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.nw-from b { margin-right: 4px; color: var(--fg); }
.nwd { padding: 22px 26px 18px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px #ebe3d6; }
.nwd .cc { margin: 0; padding: 2px 9px; background: var(--fg); box-shadow: none; color: var(--surface); font-size: 12px; font-weight: 700; }
.nwd h2 { margin: 12px 0 8px; font-size: 24px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.35; }
.nwd .nw-pts { font-size: 15.5px; line-height: 1.7; }
.nwd .nw-from { margin: 16px 0 0; padding-top: 10px; border-top: 1px solid #f0e9de; }
/* 주요 뉴스 줄의 층: 시트(.tsheet 8 · .sheet 9) 아래, 두 판(.main 2) 위 — 30이면 표 생성 · 간략보고 · 연결 상태 판의 덮개 위로 떠서 눌렸다 (독립 검토) */

/* 폰 묶음 카드의 통관 전 · 입고 예정 흐림 (2026-10-27, 시안/대기물량흐림-시안 나 "나 로 진행하자."): app.js group의 li.gpk. 창고 재고 밑에서 두 구역을 한 덩어리로 첫 건 남짓만 보이며
   아래로 흐려지고, 흐림 위 가운데에 '통관 전 n건 · 입고 예정 m건 펼치기' 단추. 펼친 뒤에는 끝에 작은 '… 접기' (li.gpkfold) */
#list li.gpk { position: relative; margin: 0; padding: 0; list-style: none; }
#list li.gpk > ul.lots { max-height: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 22%, transparent 92%); mask-image: linear-gradient(#000 22%, transparent 92%); }
#list .gpkbtn { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 10px 16px; border: 0; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 650; white-space: nowrap; cursor: pointer; }
#list .gpkbtn svg { flex: none; width: 14px; height: 14px; }
#list .gpkbtn:focus-visible, #list .gpkfold button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
#list li.gpkfold { display: flex; justify-content: center; list-style: none; }
#list li.gpkfold button { display: inline-flex; align-items: center; border: 0; border-radius: 999px; font: inherit; cursor: pointer; }
#list li.gpkfold svg { transform: rotate(180deg); }
/* 창고 재고가 없는 묶음의 머리 (같은 날, "이런 경우는 재고 없음 이라고 조금 크게 써주고 … · 이런경우."): 큰 '-'와 작은 '창고 재고 없음' 대신 '재고 없음' 한 줄을 숫자보다 작고 글보다 크게 */
.gstock.none b { margin-top: 4px; color: var(--fg); font-size: 22px; font-weight: 600; letter-spacing: -0.04em; white-space: nowrap; }
@media (max-width: 374px) { .gstock.none b { font-size: 20px; } }

/* PC 묶음 표의 통관 전 · 입고 예정 · 미개설 흐림 (2026-10-27, "pc 버전도 마찬가지로 모바일처럼 … 서서히 흐려지게 처리하고 펼치기 버튼 만들어줘."): app.js duoTable의 div.dpk.
   창고 재고 표 밑에 같은 열 폭의 둘째 표를 위 240px만 아래로 흐리게, 그 위 가운데에 '… 펼치기' 단추 (폰 .gpkbtn과 같은 꼴). 펼친 뒤에는 상자들 끝에 작은 '… 접기' 줄 */
body.duo .dpk { position: relative; }
body.duo .dpkm { max-height: 240px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 25%, transparent 92%); mask-image: linear-gradient(#000 25%, transparent 92%); }
body.duo .dpkbtn { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 10px 18px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 650; white-space: nowrap; cursor: pointer; }
body.duo .dpkbtn svg { flex: none; width: 14px; height: 14px; }
body.duo .dpkbtn:focus-visible, body.duo tr.dpkfold button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
body.duo tr.dpkfold td { border: 0; text-align: center; }
body.duo tr.dpkfold button { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; font: inherit; cursor: pointer; }
body.duo tr.dpkfold svg { width: 13px; height: 13px; transform: rotate(180deg); }

/* PC 큰 덩어리 구분 (2026-10-27, 사용자: PC 갈무리와 "3 섹션 구분이 잘 안되지 않니??? 좋은 방법 없을까???" → 시안 다(어두운 뉴스 띠 + 오트 요약 카드 + 뜬 흰 묶음 카드) →
   "색을 완전히 넣어버리지 말고 그라데이션 처리" → "위에서 아래로 가는데 더 옅게" → "가장 옅게 회색으로 가볼까?? 4군데 전부 적용해줘봐" → 시안 가(시안/세덩어리회색-시안-가.png) → "가로 가는데 더 옅게 해줘봐.").
   네 군데 = 주요 뉴스 띠 · 왼쪽 카드(검색 카드 + 목록 카드) · 요약 카드 · 묶음 카드. 카드는 위에서 120px 동안 아주 옅은 회색 → 흰 면(카드 높이가 달라도 같은 길이),
   뉴스 띠는 띠 높이 전체. 요약 카드의 에스프레소 안개(2026-10-21 '라')를 이것으로 바꾼다. 묶음 카드(가장 중요한 덩어리)는 그림자로 띄우고, 카드 사이 틈은 양쪽 기둥 모두 14 → 20px
   (한쪽만 넓히면 위 두 카드의 높이가 같은 탭에서 아래 카드 윗선이 6px 어긋난다) */
body.duo .nwtop { background: linear-gradient(180deg, #f4f3f0 0%, var(--surface) 100%); box-shadow: inset 0 0 0 1px var(--hair); }
body.duo .top, body.duo .cols > .main::before, body.duo .dcard, body.duo:not(.plan) .sumcard, body.duo.plan .sumcard { background: linear-gradient(180deg, #f7f6f3 0, var(--surface) 120px); }
body.duo .dcard { border-color: var(--hair); box-shadow: 0 10px 28px -14px rgba(33, 12, 2, 0.28), 0 1px 0 rgba(33, 12, 2, 0.04); }
body.duo .pane { gap: 20px; }
body.duo .top { margin-bottom: 20px; }
body.duo .cols > .main::before { top: calc(var(--duoTop, 124px) + 20px); }

/* 뉴스 · 시장 탭의 높이 맞춤 (2026-10-27, 사용자: PC 뉴스 탭의 검색 카드와 기사 카드 갈무리와 "이거 높이 맞춰주고."): 위 요약 자리(#dock)가 비어 높이 0인데 카드 사이 틈만 남아
   오른쪽 카드가 그만큼 아래에서 시작했다(14px, 틈을 20px로 넓히며 더 보였다) → 단가표 탭처럼 없앤다 */
body.duo:is(.news, .market) #dock { display: none; }

/* PC 재고 탭 요약 카드: 시간줄은 접어 두고 '시간줄 보기'로 (2026-10-27, 사용자: "이 영역이 상당히 중요한 영역인것 같아. 저부분이 빠지고.밑애 재고 덩어리가 위로 올라가면 시원해보이지 않을까"
   → 시안/요약줄이기-시안 나 "흠... 나로 진행해보자."). app.js가 tl을 단 카드만: 평소에는 위 줄만(검색 카드 높이에 맞추지 않음), 카드 아래 가운데 알약 단추(.hztl).
   누르면 시간줄(.hzl.open, 품목 여덟까지)이 묶음 카드 위로 떠서 펼쳐진다(#dock.float). 아래 여백 16px: 단추 위 반쪽(13px)이 위 줄 알약을 덮지 않게. --hztl: 1은 app.js에 주는 신호 */
:root { --hztl: 1; }
@media (min-width: 1040px) {
  body.duo:not(.plan) .sumcard.hz.tl { position: relative; min-height: 0; padding-bottom: 16px; }
  body.duo .sumcard.hz.tl .hzl:not(.open) { display: none; }   /* duoSync가 접힌 높이를 잴 때 .open을 잠깐 뺀다 */
  body.duo .sumcard.hz .hztl { all: unset; position: absolute; z-index: 2; left: 50%; bottom: -13px; transform: translateX(-50%); box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 11px 0 13px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); box-shadow: 0 2px 8px rgba(33, 12, 2, 0.1); color: var(--fg); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
  body.duo .sumcard.hz .hztl svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
  body.duo .sumcard.hz .hztl[aria-expanded="true"] svg { transform: rotate(180deg); }
  @media (hover: hover) { body.duo .sumcard.hz .hztl:hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); } }
  body.duo .sumcard.hz .hztl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* 밀려 올라가는 요약 카드 (2026-10-27, 사용자: "스크롤해서 올리면 이부분도 올라가서 버튼만 남을때 까지 올라가게 하는건 어때??" + "시간줄 보기 버튼.."; app.js duoSync · dkSlide가 body.dkslide와 --dkh · --dk · --pin을 준다).
   요약 카드는 오른쪽 판 맨 위에 겹쳐 두고 묶음 카드(#pbody)는 판 꼭대기부터 스크롤하되 요약 카드 높이 + 20px 아래에서 시작한다. 판(.pane)의 overflow: hidden이 올라간 카드를 자른다.
   scroll-padding: 맨 위에 남는 단추 밑으로 건 줄을 보이게(↑↓ 건 넘기기의 scrollIntoView) */
@media (min-width: 1040px) {
  body.duo.dkslide:not(.plan) #dock, body.duo.dkslide:not(.plan) #dock.float { position: absolute; z-index: 1; top: 0; left: 0; right: var(--sbw, 0px); transform: translateY(calc(-1 * var(--dk, 0px))); }
  /* z 1: 왼쪽 기둥(.main, z 2) 밑 — 3이면 1040~1099px에서 그 기둥의 640px 필터 판(.fpanel)이 오른쪽 판으로 넘어온 위쪽 71px를 요약 카드가 덮었다 (CSS 검토 2026-10-27; #pbody 안에는 z가 1 이상인 것이 없어 묶음 카드 위에는 그대로 뜬다).
     right --sbw: Windows처럼 자리를 차지하는 스크롤 막대(app.js duoSync가 잰 #pbody 막대 폭)만큼 비운다 — 카드가 막대 위쪽 108px를 덮어 잡을 수 없었고 묶음 카드와 오른쪽 끝이 어긋났다 */
  body.duo.dkslide #pbody { scrollbar-gutter: stable; }   /* 막대 자리를 늘 비워 둔다: 막대가 생기고 없어질 때마다 --sbw를 다시 잴 필요가 없고 묶음 카드 폭도 뛰지 않는다 (Mac의 떠 있는 막대는 0) */
  body.duo.dkslide:not(.plan) #dock.float { z-index: 30; }   /* 펼친 시간줄만 위로 (평소 z 1: 30이면 표 생성 창(.tsheet 8) · 창(.sheet 9)과 그 덮개 위로 요약 카드가 올라왔다, 2026-10-27 사용자 갈무리) */
  body.duo.dkslide #pbody { padding-top: calc(var(--dkh, 0px) + 20px); scroll-padding-top: 44px; }
  body.duo.dkslide .sumcard.hz .hztl { transform: translateY(var(--pin, 0px)); translate: -50% 0; transition: left 0.22s ease, translate 0.22s ease; }   /* 가로(left · translate)만 움직임을 주고 세로(--pin)는 스크롤을 그대로 따른다 */
  body.duo.dkslide #dock.dkpin .sumcard.hz .hztl { left: calc(100% - 14px); translate: -100% 0; }   /* 단추만 남으면 오른쪽 위 구석 (app.js dkSlide의 dkpin; 가운데면 표 가운데 줄 글자를 가렸다) */
  @media (prefers-reduced-motion: reduce) { body.duo.dkslide .sumcard.hz .hztl { transition: none; } }
}

/* PC 재고 탭 요약 카드의 주의 · 어제 이후를 같은 알약 두 줄로 (2026-10-27, 사용자: 오트 띠 안의 주의 넷 + 그 밑 작은 테두리 알약 갈무리와 "너무 좋은데 이부분이 너무 못생겼는데...?"
   → 시안/주의알약-시안 가 "가로 가자."). 시간줄을 접어 두는 카드(.tl, app.js)에서만: 두 줄 다 흰 테두리 알약(30px), 줄 앞 이름(주의 · 어제 이후 n건)은 같은 너비 칸에 오른쪽 맞춤,
   누르면 먹색 알약 · 흰 점. 1500px 이상의 'n r a / n c c'에서 어제 이후가 두 칸에 걸쳐 있던 것을 주의와 같은 칸으로(이름 칸이 맞게), 검색 중 칩(r)은 두 줄 가운데 */
@media (min-width: 1040px) {
  body.duo:not(.plan) .sumcard.hz.tl :is(.alerts, .alerts:is(:last-child, :has(+ .changes.line))) { justify-self: stretch; display: grid; grid-template-columns: minmax(var(--hzlw, 108px), max-content) auto; align-items: center; justify-items: start; column-gap: 10px; margin: 0; padding: 0; border: 0; background: none; }
  /* 어제 이후 줄은 따로: 한 규칙에 묶었더니 :is()의 무게가 가장 무거운 쪽(.alerts:is(… :has(…)))을 따라 뒤의 margin-top이 지고 두 줄이 붙었다 (2026-10-27, 사용자: "너무 붙지 않았니??") */
  body.duo:not(.plan) .sumcard.hz.tl :is(.changes, .changes:not(.line), .changes.line) { justify-self: stretch; display: grid; grid-template-columns: minmax(var(--hzlw, 108px), max-content) auto; align-items: center; justify-items: start; column-gap: 10px; margin: 8px 0 0; padding: 0; border: 0; background: none; }
  /* 두 줄의 이름 칸은 같은 너비: --hzlw = '… 이후 n건'의 너비(app.js duoSync, 108px 이상). 기준일이 어제가 아니면 '10/24(토) 이후 150건'이 108px를 넘어 둘째 줄 알약만 7px 밀렸다 (CSS 검토 2026-10-27) */
  body.duo:not(.plan) .sumcard.hz.tl .atitle { display: block; justify-self: end; margin: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
  body.duo:not(.plan) .sumcard.hz.tl .atitle b { display: none; }   /* 주의 합계(건)는 알약 넷에 있다 (시안) */
  body.duo:not(.plan) .sumcard.hz.tl .changes .since { justify-self: end; gap: 3px; font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--muted); }
  body.duo:not(.plan) .sumcard.hz.tl .changes .since b { font-size: 12.5px; line-height: 16px; font-weight: 700; color: var(--fg); }
  body.duo:not(.plan) .sumcard.hz.tl .changes .since b small { margin-left: 1px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  body.duo:not(.plan) .sumcard.hz.tl .changes .none { font-size: 12.5px; color: var(--muted); }
  body.duo:not(.plan) .sumcard.hz.tl :is(#alerts .achips, #changes .row) { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  body.duo:not(.plan) .sumcard.hz.tl :is(#alerts .achips > .achip, #changes .row > .alert.chg) { box-sizing: border-box; display: inline-flex; flex: none; align-items: center; gap: 6px; height: 30px; margin: 0; padding: 0 12px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); box-shadow: none; opacity: 1; white-space: nowrap; cursor: pointer; }
  body.duo:not(.plan) .sumcard.hz.tl :is(#alerts .achips > .achip > span, #changes .row > .alert.chg > i) { font-size: 13px; font-style: normal; font-weight: 500; line-height: 16px; color: var(--fg); }
  body.duo:not(.plan) .sumcard.hz.tl :is(#alerts .achips > .achip, #changes .row > .alert.chg) b { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; line-height: 16px; color: var(--fg); }
  body.duo:not(.plan) .sumcard.hz.tl #alerts .achips > .achip.zero :is(span, b) { color: var(--muted); }
  body.duo:not(.plan) .sumcard.hz.tl #alerts .achips > .achip.zero b { font-weight: 500; }
  body.duo:not(.plan) .sumcard.hz.tl #alerts .achips > .achip:disabled { cursor: default; }
  @media (hover: hover) { body.duo:not(.plan) .sumcard.hz.tl :is(#alerts .achips > .achip, #changes .row > .alert.chg):not(:disabled):not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); } }
  body.duo:not(.plan) .sumcard.hz.tl :is(#alerts .achips > .achip, #changes .row > .alert.chg)[aria-pressed="true"] { border-color: var(--fg); background: var(--fg); }
  body.duo:not(.plan) .sumcard.hz.tl :is(#alerts .achips > .achip, #changes .row > .alert.chg)[aria-pressed="true"] :is(span, i, b) { color: var(--surface); }
  body.duo:not(.plan) .sumcard.hz.tl #alerts .achips > .achip[aria-pressed="true"] > span::before { background: var(--surface); }
  body.duo:not(.plan) .sumcard.hz.tl :is(#alerts .achips > .achip, #changes .row > .alert.chg):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
/* 시간줄(.hzl, 모든 칸에 걸침)은 칸 너비 셈에서 빼야 한다: 숫자 칸을 max-content로 잡았더니 펼친 시간줄의 너비가 숫자 칸으로 몰려 숫자 칸 1,072px · 알약 칸 20px이 되고
   알약이 사라졌다 (2026-10-27, 사용자 갈무리: 펼치면 위가 텅 빔). auto(최소 = 내용 최소) + 시간줄 min-width 0이면 시간줄은 아무 칸도 늘리지 않는다 */
@media (min-width: 1040px) { body.duo:not(.plan) .sumcard.hz.tl .hzl { min-width: 0; } }
/* 1440px 이상은 숫자 칸(.hzn)이 내용보다 줄지 않게: 옛 규칙의 .hzn min-width 0이 칸 배치 minmax(auto, 1fr)의 auto를 0으로 만들어, 1500px에서 긴 검색어 칩(280px까지)이
   '창고 재고 653 톤 · …' 위에 얹혔다 (CSS 검토 2026-10-27). 이제 자리가 모자라면 알약 줄이 꺾인다 */
@media (min-width: 1440px) { body.duo:not(.plan) .sumcard.hz.tl .hzn { min-width: auto; } }
@media (min-width: 1440px) and (max-width: 1499px) {   /* 숫자가 두 줄 칸에 걸치는 폭(칸 배치는 파일 끝): 검색 중 칩은 그 밑 줄 왼쪽에 */
  body.duo:not(.plan) .sumcard.hz.tl .hzr { justify-self: start; margin-top: 8px; }
}
@media (min-width: 1040px) and (max-width: 1439px) {   /* 좁은 PC: 숫자 옆에 알약 넷이 들어가지 않아(1100px에서 '주의'가 숫자 줄을 덮고, 1280~1366px에서는 알약 하나만 꺾여 어수선) 두 줄을 숫자 밑으로 내려 왼쪽부터 (칸 배치는 파일 끝) */
  body.duo:not(.plan) .sumcard.hz.tl :is(.alerts, .alerts:is(:last-child, :has(+ .changes.line))) { justify-self: start; margin-top: 10px; }
  body.duo:not(.plan) .sumcard.hz.tl :is(.changes, .changes:not(.line), .changes.line) { justify-self: start; }
  body.duo:not(.plan) .sumcard.hz.tl .hzr { align-self: start; justify-self: end; margin-top: 0; }
}

/* PC 왼쪽 목록의 고른 묶음 줄: 왼쪽 먹색 세로줄 없이 마우스를 올렸을 때와 같은 회색 그대로 (2026-10-27, 사용자: 고른 줄 '사골 EXCEL' 갈무리와
   "이것도 세로줄 없애주고 클릭하면 색을 바꾸지 말고 그 회색 그대로 유지 하게끔 해줘." — 마우스를 올리면 회색(--fg 4%), 누르면 베이지(#f3ede3) + 먹색 막대로 바뀌었다) */
@media (min-width: 1040px) {
  body.duo #list > .group.duo.dsel { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); box-shadow: none; }
  @media (hover: hover) { body.duo #list > .group.duo.dsel:hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); } }
}

/* 시장 흐름 · 뉴스 화면에는 검색 카드(검색창 · 필터 칩)를 두지 않는다 (2026-10-27, 사용자: 검색 카드 갈무리와 "시장흐름과 뉴스에는 검색창과 필터가 필요 없을것 같아.").
   app.js mkModel · nwItems도 검색어 · 필터로 거르지 않는다(재고 탭에서 걸어 둔 것이 보이지 않게 걸리지 않도록). PC는 왼쪽 목록 카드가 맨 위부터(--duoTop은 숨긴 검색 카드의 0) */
body:is(.market, .news) .top { display: none; }
@media (min-width: 1040px) { body.duo:is(.market, .news) .cols > .main::before { top: 0; } }

/* 표 생성 판의 진행 단계 칩 (2026-10-27, 시안/표단계칩-시안 나; app.js tstageChips): '설정' 안의 작은 제목(진행 단계 · 나누기)과 칩 앞의 단계 점 */
.tsh2 { flex: 1 0 100%; display: flex; align-items: baseline; gap: 8px; margin: 4px 0 -2px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.tsh2 small { font-size: 12px; font-weight: 500; }
.tsh2 button { all: unset; margin-left: auto; padding: 2px; font-size: 12.5px; font-weight: 600; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tsh2 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.chip.tst > span.sdt { all: unset; display: inline-block; flex: none; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #b9ad9c; vertical-align: 1px; }
.chip.tst > span.sdt.clear { background: var(--stock); }
.chip.tst > span.sdt.in { background: var(--hold); }
.chip.tst > span.sdt.port, .chip.tst > span.sdt.sea { background: #9a8a78; }
.chip.tst > span.sdt.un { background: #cfc5b3; }

/* PC 묶음 표의 '… 접기'를 단추로 (2026-10-27, 사용자: 펼친 뒤 상자 끝의 '통관 전 2건 · 입고 예정 23건 · 미개설 9건 접기' 갈무리와 "이거 눈에 잘 안띄어 버튼으로 만들어줘."):
   흐린 글자뿐이던 것을 펼치기 단추(.dpkbtn)와 같은 흰 알약 · 테 · 그림자로 */
body.duo tr.dpkfold td { padding: 12px 0 6px; }
body.duo tr.dpkfold button { padding: 9px 16px; background: var(--surface); box-shadow: 0 2px 10px rgba(33, 12, 2, 0.12), inset 0 0 0 1px var(--edge); color: var(--fg); font-size: 13.5px; font-weight: 650; }
@media (hover: hover) { body.duo tr.dpkfold button:hover { box-shadow: 0 3px 14px rgba(33, 12, 2, 0.18), inset 0 0 0 1px var(--fg); } }

/* PC 묶음 표 흐림의 '… 펼치기' 단추를 먹색으로 (2026-10-27, 사용자: "이것도 눈에 확 띄가 빨간색이 좋을까?" → 시안/펼치기색-시안(0 흰 알약 | 가 빨강 | 나 먹색) → "나로 진행하자.";
   빨강(--cta)은 표 생성 · 단가표 생성 같은 만드는 단추의 색이라 같은 화면의 빨간 표 생성과 겹친다). 화살표는 글자색(크림) */
body.duo .dpkbtn { background: var(--fg); color: var(--surface); box-shadow: 0 4px 14px rgba(33, 12, 2, 0.28); }
body.duo .dpkbtn svg { fill: currentColor; stroke: currentColor; }
@media (hover: hover) { body.duo .dpkbtn:hover { background: color-mix(in srgb, var(--fg) 86%, #fff); box-shadow: 0 5px 16px rgba(33, 12, 2, 0.32); } }

/* PC 단가표 탭 목록 머리의 시각을 한 줄로 (2026-10-27, 사용자: '최근 업데이트 10/27 11:17 / 생성 10/15 8:51 · 단가표 71줄' 두 줄 갈무리와 "이거 한줄료 표시하면 좋을것 같아."):
   위 두 줄 규칙(.pdate .pst b · small block, 사이 ' · ' 숨김)을 PC에서만 풀어 '최근 업데이트 … · 생성 … · 단가표 n줄'로 잇는다. 좁으면 덩이(nb) 사이에서 꺾인다. 폰은 그대로 */
body.duo .pdate .pst b, body.duo .pdate .pst small { display: inline; margin: 0; }
body.duo .pdate .pst i { display: inline; font-style: normal; font-size: 12px; color: var(--muted); }

/* 폰: 환율 줄과 검색창 사이를 탭 줄과 환율 줄 사이만큼 (2026-10-27, 사용자: 환율 줄 · 검색창 갈무리와 "여기 유난히 많이 떨어져있어. 비율 맞춰줘."):
   환율 줄 상자는 36px(연결 알약을 누를 자리)라 글자 위아래가 10px씩 비고, 그 밑에 머리 여백 14px + 검색 카드 안쪽 8px이 더해져 글자 아래가 32px(위는 탭 줄에서 20px)이었다.
   머리 여백을 2px로 → 아래도 20px. 검색 카드가 없는 시장 흐름 · 뉴스 화면은 그대로 */
body:not(.duo):not(.gridview):not(.market):not(.news) .cols .head { margin-bottom: 2px; }

/* 주요 뉴스 띠가 돌아가며 보이기 (2026-10-27, 사용자: "뉴스는 위로 스크롤되면서 다른 소식도 돌아가면서 보여주면 좋을것 같다."; app.js renderNewsTop · nwTick):
   이름표 · 제목 · 출처를 한 덩이(.nwu)로 묶어 .nwv 한 칸에 겹쳐 놓고(넘기는 동안 옛 것과 새 것이 같은 자리), ›만 밖에. 폰은 제목을 늘 두 줄 높이로 잡아 넘길 때 띠 높이가 뛰지 않게.
   --nwr: 1은 app.js에 주는 신호 */
:root { --nwr: 1; }
.nwtop .nwv { flex: 1 1 auto; min-width: 0; display: grid; }
.nwtop .nwv > .nwu { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
body:not(.duo) .nwtop .nwv { flex-basis: 100%; }
body:not(.duo) .nwtop .nwv > .nwu { flex-wrap: wrap; align-items: flex-start; }
body:not(.duo) .nwtop .nwu b { min-height: 2.8em; }

/* 켜진 채 잠긴 칩 (표 생성 판 '브랜드별로 나누기'처럼 화면 묶기에 이미 든 나누기, 2026-10-27): 눌리지 않는 칩의 0.45는 꺼진 칩처럼 읽혀서 켜짐 꼴이 보이게 0.7 */
.chip[aria-pressed="true"]:disabled { opacity: 0.7; }

/* PC 재고 탭 요약 카드(.sumcard.hz)의 칸 배치(grid)는 여기 한 곳에 (2026-10-27 정리, Claude 추천 3 — 사용자: "1,2,3,4,5,6 전부 추천하는대로 진행하자."):
   날짜마다 덧붙인 grid 규칙이 열두 겹이었고 같은 날 버그 둘이 여기서 나왔다(펼친 시간줄이 알약 칸을 0px로 누름 · 두 알약 줄이 붙음). 덮여서 효과가 없던 규칙 22개를 지우고
   (정리 전 · 후 645가지 상태 — 폭 12가지 · 새 / 옛 app.js · 검색 · 누른 알약 여덟 · 시간줄 열고 닫음 · 어제 이후 있음 / 바뀐 것 없음 / 없음 · 밀려 올라감 · 냉장 · 동결 — 에서 화면 값이 같음),
   남은 배치 여덟을 결과 그대로 여기로 옮겼다. 정렬 · 여백 같은 다른 꾸밈은 각 날짜 블록에 그대로 있다. 이 카드의 칸 배치를 바꿀 때는 여기만 고친다.
   칸: n 숫자 · r 검색 중 칩 · a 주의 · c 어제 이후 · l 시간줄 (옛 펼치기 단추 .hzv는 grid-area auto). tl = 시간줄을 접어 두는 카드(새 app.js가 단다; 옛 app.js면 tl이 없다).
   - tl 아님: 1040~1099 한 칸 세로 / 1100~1499 숫자 | 주의, 칩 | 어제 이후 (2026-10-24: 첫 줄 옆의 칩이 1280px에서 숫자 줄을 덮었다) / 1500~ 숫자 | 칩 | 주의, 숫자 | 어제 이후 (2026-10-25: 검색하면 카드가 233px로 늘었다)
   - tl: 1040~1439 숫자 | 칩, 그 밑에 주의 · 어제 이후 (2026-10-27: 1100px에서 '주의'가 숫자를 덮음) / 1440~1499 숫자가 두 줄에 걸치고 칩은 그 밑 (숫자가 첫 줄에만 있으면 두 알약 줄 사이가 17px)
     / 1500~ 숫자 | 칩 | 두 알약 줄. 1440~의 숫자 칸 minmax(auto, 1fr)은 내용보다 줄지 않아 숫자가 길어도 '주의'에 닿지 않는다 (max-content로 잡으면 펼친 시간줄이 숫자 칸을 부풀렸다; .hzl min-width 0, .hzn min-width auto와 짝) */
@media (min-width: 1040px) {
  body.duo:not(.plan) .sumcard.hz { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n a" "r c" "l l"; }
}
@media (min-width: 1040px) and (max-width: 1099px) { body.duo:not(.plan) .sumcard.hz { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "r" "a" "c" "l"; } }
@media (min-width: 1500px) { body.duo:not(.plan) .sumcard.hz { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n r a" "n c c" "l l l"; } }
@media (min-width: 1040px) and (max-width: 1439px) { body.duo:not(.plan) .sumcard.hz.tl { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n r" "a a" "c c" "l l"; } }
@media (min-width: 1440px) and (max-width: 1499px) { body.duo:not(.plan) .sumcard.hz.tl { grid-template-columns: minmax(auto, 1fr) auto; grid-template-areas: "n a" "n c" "r r" "l l"; } }
@media (min-width: 1500px) { body.duo:not(.plan) .sumcard.hz.tl { grid-template-columns: minmax(auto, 1fr) auto auto; grid-template-areas: "n r a" "n r c" "l l l"; } }

/* 독립 검토 뒤 (2026-10-27): 통관 전 · 입고 예정 흐림(폰 li.gpk · PC .dpk)의 신호 — app.js peekCss가 이 값이 있을 때만 흐린다 (옛 app.css와 새 app.js가 만나면 흐린 줄이 꾸밈 없이 inert로 남았다).
   시장 흐름 · 뉴스 화면에는 검색 카드가 없어 인기 검색어 띠(#hot, 폰 머리 줄)도 숨긴다: 눌러도 보이지 않는 재고 탭 검색어만 바뀌었다 (자리는 그대로 두어 ⚙가 움직이지 않게) */
:root { --peek: 1; }
body:is(.market, .news) .hot { visibility: hidden; }

/* 낮은 화면(1366×768 노트북은 작업 표시줄 · 탭 줄을 빼면 620~650px)에서 필터 판이 화면 밑 12px 안에서 끝나게 (CSS 검토 2026-10-27: 주요 뉴스 띠 44px만큼 내려온 판의
   맨 아래 'n건 보기'(판 안에서 밑에 붙는 단추)가 1366×650에서 화면 밖이었다). 판의 위 = 머리 86px (+ 띠 44px) + 검색 카드(--duoTop) + 8px */
@media (min-width: 1040px) {
  body.duo .top > .fpanel { max-height: min(60vh, 520px, calc(100vh - var(--duoTop, 124px) - 106px)); }
  body.duo.nwon .top > .fpanel { max-height: min(60vh, 520px, calc(100vh - var(--duoTop, 124px) - 150px)); }
}

/* 수입 통계 탭 (view "iq"): 부위별 수입(식약처) · 검역 실적(검역본부)의 추세 (2026-10-28, 사용자: "부위별 수입 과 검역실적은 별도로 분류하고 추세를 보고싶은데"
   → 시안/수입추세-시안 "좋아 추천 가+나 로가자." — 전날에는 시장 흐름 안의 두 덩이였다). app.js renderImports · iqRender. body에는 iq와 market이 함께 붙어 시장 흐름 화면의 꾸밈
   (검색 카드 없음 · 목록 줄 .mkrow · #mkt)을 그대로 쓴다. --iqv: 1은 app.js에 주는 신호 (옛 app.css면 탭을 내지 않는다) */
:root { --iqv: 1; }
/* 탭 여섯: PC는 '시장' · '수입'만(제목에 '수입 통계'), 좁은 폰은 ' 흐름' · ' 통계'를 뗀다 */
body.duo .cols .head > #modes .seg [data-view="iq"] .iqx-t { display: none; }
/* 탭이 여섯이면 좁힌다: 오른쪽 환율 알약이 눌리지 않게 (독립 검토: 1280px 아래에서 환율 글자가 잘렸다) */
@media (max-width: 1279px) {  body.duo .cols .head > #modes .seg:has([data-view="iq"]) button { font-size: 13px; } }
@media (max-width: 1179px) {  body.duo .cols .head > #modes .seg:has([data-view="iq"]) button { font-size: 12px; letter-spacing: -0.04em; } }
body:not(.duo) .cols .head > #modes .seg:has([data-view="iq"]) button { font-size: 13px; letter-spacing: -0.04em; }
@media (max-width: 430px) { #modes .seg:has([data-view="iq"]) :is(.mkx-t, .iqx-t) { display: none; } }
/* 왼쪽 목록: 갈래 이름(.mksec)과 줄마다 작은 추세선 */
body.market .mksec { list-style: none; display: flex; align-items: baseline; gap: 8px; padding: 18px 18px 8px; border-bottom: 1px solid var(--line2, #eee6da); font-size: 12.5px; font-weight: 700; color: var(--fg); }
body.market .mksec em { font-style: normal; font-weight: 500; color: var(--muted); }
body.iq .mkrow.iq-row { display: flex; align-items: center; gap: 12px; }
body.iq .iq-row .iq-rt { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
body.iq .iq-row .iq-lm { flex: none; display: block; }   /* 목록 줄의 올해 vs 작년 작은 그래프 (선 꾸밈은 .iq-mini) */
/* 판: 카드 · 올해 vs 작년 · 나라별 몫 · 열흘 흐름 */
#mkt .im-card { max-width: 1600px; margin: 0 auto 14px; padding: 14px 16px 10px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px #ebe3d6; }
#mkt .im-tw { overflow-x: auto; }
#mkt .im-back { all: unset; display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 7px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); font-size: 13.5px; font-weight: 650; cursor: pointer; }
#mkt .im-back:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (hover: hover) { #mkt .im-back:hover { box-shadow: inset 0 0 0 1px var(--fg); } }
#mkt .iq-big { margin-bottom: 14px; }
#mkt .iq-sub { margin: 4px 2px 8px; }
.iq-yoy, .iq-pair, .iq-dek { display: block; width: 100%; height: auto; }
.iq-pair .ml { fill: var(--muted); font-size: 11px; font-weight: 600; }   /* 나라별 몫 · 작년 vs 올해 짝 막대 (app.js iqPair) */
.iq-yoy .gd { stroke: #efe7da; stroke-width: 1; }
.iq-yoy :is(.gl, .ml) { fill: var(--muted); font-size: 11px; font-weight: 600; }
.iq-yoy .ly { fill: none; stroke: #b8a68f; stroke-width: 2; stroke-dasharray: 5 4; }
.iq-yoy .ty { fill: none; stroke: var(--fg); stroke-width: 2.6; stroke-linejoin: round; }
.iq-yoy .tp { fill: none; stroke: var(--fg); stroke-width: 2; stroke-dasharray: 3 3; opacity: 0.6; }
.iq-yoy .dt { fill: var(--fg); }
.iq-yoy .po { fill: var(--surface); stroke: var(--fg); stroke-width: 2; }
.iq-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 2px 0; color: var(--muted); font-size: 12px; }
.iq-leg i { display: inline-block; width: 16px; height: 0; margin-right: 5px; vertical-align: 3px; border-top: 2.6px solid var(--fg); }
.iq-leg i.d { border-top: 2px dashed #b8a68f; }
.iq-leg i.p { width: 7px; height: 7px; border: 2px solid var(--fg); border-radius: 50%; vertical-align: -1px; }
.iq-leg i.b { width: 9px; height: 9px; border: 0; border-radius: 3px; vertical-align: -1px; }
.iq-dek rect { fill: #cdbda6; }
.iq-dek rect.k1 { fill: #b9a68c; }
.iq-dek rect.pt { fill: #e6dccd; }
.iq-dek text { fill: var(--fg); font-size: 11px; font-weight: 650; }
.iq-dek text.ml { fill: var(--muted); font-weight: 600; }
.iq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.iq-card { all: unset; box-sizing: border-box; display: grid; gap: 6px; width: 100%; padding: 14px 16px 12px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px #ebe3d6; }
button.iq-card { cursor: pointer; }
button.iq-card:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (hover: hover) { button.iq-card:hover { box-shadow: inset 0 0 0 1px var(--fg); } }
.iq-card .iq-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.iq-card .iq-ch > b { font-size: 16px; font-weight: 650; letter-spacing: -0.03em; }
.iq-card .iq-ch span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.iq-card .iq-ch span b { color: var(--fg); font-size: 16px; font-weight: 650; }
.iq-card .iq-ch .mkchg { margin-left: 4px; }
.iq-card .iq-mini { display: block; width: 100%; height: auto; }   /* 부위 · 나라 카드의 올해 vs 작년 (2026-10-28, 사용자: "각 부위별도 작년과 비교해서") */
.iq-mini .ly { fill: none; stroke: #b8a68f; stroke-width: 1.6; stroke-dasharray: 4 3; }
.iq-mini .ty { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; }
.iq-mini .tp { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-dasharray: 2 2; opacity: 0.6; }
.iq-mini .dt { fill: var(--fg); }
.iq-mini .po { fill: var(--surface); stroke: var(--fg); stroke-width: 1.6; }
.iq-mini .ml { fill: var(--muted); font-size: 9.5px; font-weight: 600; }
.iq-card .iq-cf { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.iq-card .iq-cf b { color: var(--fg); }
.iq-two { display: grid; grid-template-columns: 1.45fr 1fr; gap: 14px; margin-bottom: 14px; }
#mkt .iq-two .im-card { margin: 0; }
.iq-two.one { grid-template-columns: 1fr; }   /* 판이 900px보다 좁으면 한 줄씩 (app.js iqRender가 붙인다) */
table.iq-tb { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.iq-tb :is(th, td) { padding: 8px 9px; border-bottom: 1px solid #f0e9de; text-align: right; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.iq-tb thead th { padding-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.iq-tb :is(thead th, tbody th):first-child { text-align: left; }
.iq-tb tbody th { font-weight: 650; }
.iq-tb td.iq-sum { font-weight: 700; }
.iq-tb td.iq-our { color: #6b4a2e; font-weight: 650; }
.iq-tb .mkchg { margin: 0; }
/* 폰: 위에 두 갈래와 칩, 카드는 한 줄씩 */
.iq-top { display: grid; gap: 10px; margin-bottom: 12px; }
.iq-mode { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px; border-radius: 999px; background: var(--track); }
.iq-mode button { padding: 7px 0; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.iq-mode button small { margin-left: 5px; font-size: 11.5px; font-weight: 500; }
.iq-mode button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(33, 12, 2, 0.12); }
.iq-mode button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.iq-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.iq-chips::-webkit-scrollbar { display: none; }
.iq-chips .chip { flex: none; }
body:not(.duo) .iq-grid { grid-template-columns: 1fr; gap: 10px; }
body:not(.duo) .iq-two { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 1179px) { .iq-tb :is(th, td) { padding: 7px 6px; font-size: 12.5px; } }
/* 수입 통계 표 · 그래프 만들기 (2026-10-28, 사용자: "검역실적을 실제 데이터표로도 볼 수 있게 해줄래? 표만들기 처럼." · "물론 부위별 수입도." → 시안/수입표-시안
   "가를 기본으로 하고 나나 다를 '모양' 칩으로 함께 넣자." · "해당 그래프도 생성할 수 있게 해줘."). app.js QT: PC 오른쪽 판(qtPaneHTML) · 폰 표 생성 시트(qtSheetHTML).
   --iqt: 1은 app.js에 주는 신호 (옛 app.css면 알약을 켜지 않는다) */
:root { --iqt: 1; }
body.duo.iq:has(#tfab:not(.off)) #list { padding-bottom: 74px; }   /* 목록 끝이 바닥 띠의 알약에 가리지 않게 (스케쥴 · 단가표와 같다) */
#mkt .iqt-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#mkt .iqt-card .dhead { padding-bottom: 0; }
.iqt-set { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 8px 14px; padding: 14px 22px 18px; }
.iqt-seg { grid-column: 1 / -1; justify-self: start; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px; border-radius: 999px; background: var(--track); }
.iqt-seg button { padding: 7px 18px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.iqt-seg button small { margin-left: 4px; font-size: 11.5px; font-weight: 500; }
.iqt-seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(33, 12, 2, 0.12); }
.iqt-seg button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.iqt-h { font-size: 13px; font-weight: 750; line-height: 1.25; color: var(--fg); }
.iqt-h small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.iqt-cs { display: flex; flex-wrap: wrap; gap: 6px; }
.iqt-stage { flex: 1; padding: 28px 22px 40px; border-top: 1px solid var(--hair); background: #faf7f1; text-align: center; }
.iqt-stage img { width: min(100%, var(--w)); height: auto; border-radius: 4px; box-shadow: 0 1px 2px rgba(33, 12, 2, 0.06), 0 8px 28px rgba(33, 12, 2, 0.1); transition: opacity 0.15s; }
.iqt-stage img.stale { opacity: 0.45; }   /* 설정을 바꿔 새 그림을 만드는 중 */
.iqt-stage .pane-empty { border: 0; padding: 60px 20px; }
.iqt-stage .pvwait { padding: 60px 20px; font-size: 14px; color: var(--muted); }
/* 폰 시트: 이름은 한 줄 전체, 칩은 그 밑에 흐르게 */
#tsheet .iqt-set { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
#tsheet .iqt-seg { flex: 1 0 100%; display: grid; }
#tsheet .iqt-seg button { padding: 8px 0; }
#tsheet .iqt-h { flex: 1 0 100%; margin-top: 8px; }
#tsheet .iqt-h small { display: inline; margin-left: 6px; }
#tsheet .iqt-cs { flex: 1 0 100%; }
/* 수입 통계: 판 맨 위 부위 · 나라 고르기 (2026-10-28, 사용자: "국가 선택할 수 있게 해주고" · "부위도 선택 가능했으면 좋겠어." → 시안/수입비교-시안 가). app.js iqPick.
   PC는 줄을 바꿔 다 보이고, 폰은 한 줄을 옆으로 민다 (고른 칩이 보이게 app.js가 민다) */
.iq-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.iq-pick + .iq-pick { margin-top: -2px; }
.iq-pick .iq-pl { flex: none; min-width: 30px; margin-right: 2px; font-size: 13px; font-weight: 750; color: var(--fg); }
#mkt .iq-pick + :is(.im-card, .iq-two) { margin-top: 4px; }
body:not(.duo) .iq-pick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body:not(.duo) .iq-pick::-webkit-scrollbar { display: none; }
body:not(.duo) .iq-pick .chip { flex: none; }
.iq-tb tr.on :is(th, td) { background: #faf7f1; font-weight: 700; }   /* 나라 표에서 고른 나라 */

/* 수입 통계 '추세 비교' (2026-10-28, 사용자가 다른 서비스의 그래프 갈무리를 보내며 "기능을 만들어보고싶어" → 시안/추세비교-시안 "좋아 가로 진행하자."). app.js tcHTML · tcWire.
   판 위 칩 줄 + 1~12월 큰 그래프(색 = 국가 · 부위, 선 모양 = 해). --tcv: 1은 app.js에 주는 신호 (옛 app.css면 갈래를 내지 않는다) */
:root { --tcv: 1; }
.iq-mode.three button small { display: none; }   /* 폰 위 고르기가 셋이면 작은 글을 뺀다 */
#mkt .tc-set { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 8px 14px; max-width: 1600px; margin: 0 auto 14px; padding: 14px 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px #ebe3d6; }
.tc-set .tc-h { font-size: 13px; font-weight: 750; color: var(--fg); }
.tc-set .tc-cs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tc-seg { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 4px; border-radius: 999px; background: var(--track); }
.tc-seg button { padding: 6px 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.tc-seg button small { font-size: 11.5px; font-weight: 500; }
.tc-seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(33, 12, 2, 0.12); }
.tc-seg button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.tc-step { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--edge); font-size: 13px; font-weight: 650; white-space: nowrap; }
.tc-step button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--fg); font: 600 16px/1 system-ui, sans-serif; cursor: pointer; }
.tc-step button:disabled { opacity: 0.3; cursor: default; }
.tc-step b { min-width: 22px; text-align: center; }
.tc-sep { flex: none; width: 1px; height: 22px; margin: 0 4px; background: var(--line); }
#mkt .tc-card { position: relative; }
.tc-plot { position: relative; }
.tc-svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.tc-svg .gd { stroke: #efe7da; }
.tc-svg :is(.gl, .ml) { fill: var(--muted); font-size: 11px; font-weight: 600; }
.tc-svg .avg { stroke: #9a8b7c; stroke-width: 1.2; stroke-dasharray: 6 5; }
.tc-svg .vl { font-size: 10.5px; font-weight: 700; }
.tc-svg .hv { stroke: var(--fg); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.45; }
.tc-tip { position: absolute; top: 10px; z-index: 2; min-width: 190px; padding: 10px 12px; border-radius: 12px; background: var(--surface); color: var(--fg); font-size: 12px; line-height: 1.7; box-shadow: 0 0 0 1px var(--edge), 0 8px 24px rgba(33, 12, 2, 0.16); pointer-events: none; }
.tc-tip b { display: block; margin-bottom: 2px; font-size: 12.5px; }
.tc-tip span { float: right; margin-left: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tc-tip i, .tc-leg i, .tc-yk i { display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: 3px; border-top: 2.6px solid; }
.tc-tip i.y1, .tc-yk i.y1 { border-top: 2px dashed; } .tc-tip i.y2, .tc-yk i.y2 { border-top: 2px dotted; } .tc-tip i.y3, .tc-yk i.y3 { border-top: 1.6px dotted; }
.tc-yk i { border-color: var(--fg); }
.tc-yk i.p { width: 7px; height: 7px; border: 2px solid var(--fg); border-radius: 50%; vertical-align: -1px; }
.tc-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; }
.tc-leg button { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: #f6f1e8; color: var(--fg); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tc-leg button[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }
.tc-leg button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.tc-yk { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; color: var(--muted); font-size: 12px; }
.tc-note { margin: 8px 2px 0; color: var(--warn-t, #8a5a00); font-size: 12.5px; }
body:not(.duo) #mkt .tc-set { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
body:not(.duo) .tc-set .tc-cs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
body:not(.duo) .tc-set .tc-cs::-webkit-scrollbar { display: none; }
body:not(.duo) .tc-set .tc-h { margin-top: 4px; }
body:not(.duo) .tc-set .chip { flex: none; }
body:not(.duo) .tc-yk { margin-left: 0; }

/* 손익 계산 판 (2026-10-28, 시안/손익계산-시안-가: 선택 막대 '더 보기' → 손익 계산). 판 틀(.sheet · .pubody · .pufoot)은 판매보고와 같고, 이익은 초록 · 손해는 붉은 글자 (판매보고의 .mi · .pl과 같은 색) */
#plsheet .sheetin { width: min(100%, 560px); }
#plsheet .sheethead b small { margin-left: 8px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
#plsheet .mi { color: #a01210; } #plsheet .pl { color: #1f6b44; }
#plsheet .pl-empty { padding: 28px 4px; text-align: center; font-size: 14px; color: var(--muted); }
#plsheet .pl-sum { margin: 4px 0 6px; padding: 14px 14px 12px; border-radius: 12px; background: var(--sum); }
#plsheet .pl-sum .t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#plsheet .pl-sum .t > span { font-size: 13px; font-weight: 600; }
#plsheet .pl-sum .t b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#plsheet .pl-sum .t b small { margin-left: 2px; font-size: 13px; font-weight: 600; }
#plsheet .pl-sum .d { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
#plsheet .pl-sum .d b { color: var(--fg); font-weight: 700; }
#plsheet .pl-sum .d b.mi { color: #a01210; } #plsheet .pl-sum .d b.pl { color: #1f6b44; }
#plsheet .pl-sum .w { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(33, 12, 2, .1); font-size: 12px; color: var(--muted); line-height: 1.5; }
#plsheet .pl-h { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
#plsheet .pl-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#plsheet .pl-prod { padding: 12px 0 6px; border-top: 1px solid var(--line); }
#plsheet .pl-prod .ph { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
#plsheet .pl-prod .pn { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14.5px; font-weight: 700; }
#plsheet .pl-prod .pn small { font-size: 12px; font-weight: 500; color: var(--muted); }
#plsheet .pl-prod .ps { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.55; }
#plsheet .pl-prod .ps button { all: unset; color: var(--fg); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#plsheet .pl-prod .ps button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 3px; }
#plsheet .pl-in { display: flex; align-items: center; gap: 6px; }
#plsheet .pl-in input { width: 108px; height: 40px; box-sizing: border-box; padding: 0 12px; border-radius: 10px; border: 1px solid var(--edge); background: var(--surface); font: 700 17px/1 var(--font); text-align: right; color: var(--fg); }
#plsheet .pl-in input::placeholder { font-size: 13px; font-weight: 500; color: var(--muted); opacity: .7; }
#plsheet .pl-in input:focus { outline: 2px solid var(--fg); outline-offset: 1px; }
#plsheet .pl-in em { font-style: normal; font-size: 13px; color: var(--muted); }
#plsheet .pl-lots { margin: 6px 0 2px; }
#plsheet .pl-lot { display: grid; gap: 1px 10px; margin-left: 2px; padding: 7px 2px 7px 10px; border-left: 2px solid var(--track); font-size: 12.5px; font-variant-numeric: tabular-nums; }
#plsheet .pl-lot + .pl-lot { margin-top: 2px; }
#plsheet .pl-lot .a { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; }
#plsheet .pl-lot .a > span { color: var(--muted); }
#plsheet .pl-lot .a i.st { padding: 0 6px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--edge); font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); }
#plsheet .pl-lot .b { text-align: right; font-size: 13px; font-weight: 700; white-space: nowrap; }
#plsheet .pl-lot .c { font-size: 11.5px; color: var(--muted); }
#plsheet .pl-lot .c i { margin-left: 3px; padding: 0 5px; border-radius: 4px; background: var(--track); font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--fg); }
#plsheet .pl-lot .c i.e { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); color: var(--muted); }
#plsheet .pl-lot .d { text-align: right; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
#plsheet .pufoot .plline { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--edge); }
#plsheet .pufoot .pubtn:disabled { opacity: .4; cursor: default; }
#plsheet .pl-in input[aria-invalid="true"] { border-color: var(--warn); }
/* 손익 계산의 폐기 (2026-10-28, 시안/폐기손익-시안 다): 건 줄 오른쪽 '폐기' 단추(누르면 짙은 붉은 바탕), 폐기한 건은 왼쪽 줄이 붉게, 유통기한이 지난 건은 'n일 지남' 꼬리표, 판매가 아래 폐기 비용 칸 */
#plsheet .pl-fee { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 2px 10px; font-size: 13px; font-weight: 600; }
#plsheet .pl-fee .pl-in input { width: 84px; height: 34px; border-radius: 8px; font-size: 15px; }
#plsheet .pl-fee small { flex-basis: 100%; font-size: 11.5px; font-weight: 500; color: var(--muted); line-height: 1.45; }
#plsheet .pl-fee input[aria-invalid="true"] { border-color: var(--warn); }
#plsheet .pl-lot { grid-template-columns: minmax(0, 1fr) auto auto; }
#plsheet .pl-lot .z { all: unset; box-sizing: border-box; grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; padding: 5px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--edge); font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#plsheet .pl-lot .z:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
#plsheet .pl-lot .z[aria-pressed="true"] { background: #7d1f17; box-shadow: none; color: #fff; }
#plsheet .pl-lot.dz { border-left-color: #c9837b; }
#plsheet .pl-lot .a i.gone { padding: 0 6px; border-radius: 99px; background: #7d1f17; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; }
#plsheet .pl-lot .c i, #plsheet .pl-lot .a i { white-space: nowrap; }
#plsheet .pl-fee small.bad { font-weight: 600; color: var(--warn-t); }
#plsheet .pl-fee small[hidden] { display: none; }
/* 폰 묶음 카드 흐림의 '… 접기'도 단추로 (2026-10-28, 사용자: 폰 갈무리 '통관 전 9건 · 입고 예정 6건 접기'와 "이거는 버튼으로 안만들어졌어. 예전에 버튼으로 만들어달라고 했던것 같은데."):
   10-27에 PC(tr.dpkfold)만 흰 알약으로 바꿨다. 폰도 펼치기(.gpkbtn)와 같은 흰 알약 · 테 · 그림자 */
#list li.gpkfold { margin: 10px 0 12px; }
#list li.gpkfold button { gap: 6px; padding: 10px 16px; background: var(--surface); box-shadow: 0 2px 10px rgba(33, 12, 2, 0.16), inset 0 0 0 1px var(--edge); color: var(--fg); font-size: 13.5px; font-weight: 650; }
#list li.gpkfold svg { width: 14px; height: 14px; }

/* 뉴스 '1면' 꼴 (2026-10-28, 사용자: 폰 뉴스 갈무리와 "뉴스쪽 디자인이 살짝 약한것 같은데 새로운 시안도 보여줘." → 시안/뉴스디자인-시안 → "추천안 대로 가자.가로가자."):
   폰은 주요 뉴스 머리기사 카드(.nwa-hero) + 날짜 묶음 목록(.nwa-list: 먹선 날짜 머리 · 줄마다 첫 요점 미리보기), PC는 목록 맨 위 '주요 뉴스' 칸 + 날짜 묶음, 오른쪽은 읽기 꼴(.nwa-art).
   읽기 꼴: 머리 줄(주요 뉴스 · 나라 · 매체 · 날짜) · 큰 제목 500 · 첫 요점 리드 · 가는 선으로 가른 요점 · 숫자만 굵게(b.n) · 원문 제목 상자. --nwa: 1은 app.js에 주는 신호 */
:root { --nwa: 1; }
.nwa-list { margin: 0; padding: 0; list-style: none; }
.nwa-day { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 0; padding-bottom: 8px; border-bottom: 1.5px solid var(--fg); font-size: 13.5px; letter-spacing: -0.02em; list-style: none; }
.nwa-day:first-child { margin-top: 8px; }
.nwa-day b { font-weight: 700; }
.nwa-day small { color: var(--muted); font-size: 12px; font-weight: 500; }
.nwa-li { list-style: none; border-bottom: 1px solid #efe8dc; }
.nwa-li:last-child { border-bottom: 0; }
.nwa-li:has(+ .nwa-day) { border-bottom: 0; }   /* :has를 모르는 브라우저가 위 규칙까지 버리지 않게 따로 (독립 검토) */
.nwa-row { display: grid; gap: 5px; box-sizing: border-box; width: 100%; margin: 0; padding: 13px 0; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.nwa-row > b { font-size: 15px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.42; word-break: keep-all; overflow-wrap: anywhere; }
.nwa-row:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; border-radius: 10px; }
.nwa-pv { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.nwa-pv b.n { color: #6f6258; font-weight: 650; }
.nwa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.nwa-cc { display: inline-block; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--edge); color: var(--fg); font-size: 11.5px; font-weight: 650; line-height: 20px; }
.nwa-imp { display: inline-block; padding: 0 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--fg); color: var(--fg); font-size: 11px; font-weight: 700; line-height: 18px; }
.nwa-hot { display: inline-block; padding: 0 9px; border-radius: 999px; background: var(--fg); color: var(--surface); font-size: 11.5px; font-weight: 700; line-height: 21px; }
/* 읽기 꼴 */
.nwa-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.nwa-h { margin: 12px 0 14px; font-size: 24px; font-weight: 500; letter-spacing: -0.055em; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
.nwa-lead { margin: 0 0 6px; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: -0.02em; word-break: keep-all; overflow-wrap: anywhere; }
.nwa-pts { margin: 0; padding: 0; list-style: none; }
.nwa-pts li { padding: 10px 0; border-top: 1px solid #efe8dc; color: #3b2a20; font-size: 14.5px; line-height: 1.58; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; }
.nwa-lead b.n, .nwa-pts b.n { color: var(--fg); font-weight: 700; }
.nwa-en { margin: 12px 0 0; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 4%, var(--surface)); color: var(--muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.nwa-en i { display: block; margin-bottom: 2px; color: var(--fg); font-size: 11px; font-style: normal; font-weight: 700; }
.nwa-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.nwa-foot small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.nw-go.nwa-go { flex: none; padding: 10px 17px; font-size: 13.5px; }
/* 폰: 머리기사 카드 + 목록 카드 */
body:not(.duo) .nwa-hero { margin-top: 4px; padding: 20px 18px 18px; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px rgba(33, 12, 2, 0.04), 0 10px 26px -14px rgba(33, 12, 2, 0.22); }
body:not(.duo) .nwa-list { margin-top: 14px; padding: 2px 16px 6px; border-radius: 20px; background: var(--surface); }
body:not(.duo) .nwa-list:first-child { margin-top: 4px; }
body:not(.duo) .nwa-li.open .nwa-row { padding-bottom: 6px; }
.nwa-body { padding: 2px 0 16px; }
.nwa-body .nwa-lead { font-size: 15px; }
/* PC: 목록 카드 안 · 고른 줄은 재고 목록과 같은 회색(막대 없음) · 오른쪽 읽기 판 */
body.duo .nwa-list { padding: 0 20px 12px; }
body.duo .nwa-row { width: calc(100% + 20px); margin: 0 -10px; padding: 13px 10px; border-radius: 12px; }
body.duo .nwa-row[aria-pressed="true"] { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); }
@media (hover: hover) { body.duo .nwa-row:hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); } }
body.duo .nwa-li:has(> [aria-pressed="true"]) { border-bottom-color: transparent; }
.nwd.nwa-art { padding: 26px 30px 22px; }
.nwd.nwa-art .nwa-h { margin: 14px 0 18px; font-size: 30px; font-weight: 500; letter-spacing: -0.055em; line-height: 1.3; }   /* 예전 .nwd h2(600 · −0.04em)가 이기던 것 (독립 검토) */
.nwd.nwa-art .nwa-lead { font-size: 17.5px; }
.nwd.nwa-art .nwa-pts li { padding: 11px 0; font-size: 15.5px; }

/* PC 머리 막대 탭의 여유 (2026-10-28, 사용자: 탭 여섯 갈무리 "여기 메뉴가 너무 빡빡한데?? 여유를 좀 두자."): 탭이 모두 같은 폭(47px)이라 스케쥴 · 단가표 글자 사이는 9px,
   두 글자 탭 사이는 21px였다. 세 글자 탭만 한 글자(0.8em)만큼 넓혀 탭 글자 사이를 모두 같게(--tw − 두 글자) 하고, 탭이 여섯이면 47 → 50px (사이 24px).
   폭이 탭마다 달라 흰 알약은 app.js tabInk가 눌린 탭에서 잰 --ix · --iw로 놓는다 (.fit은 새 app.js가 붙인다: 옛 app.js면 예전처럼 같은 폭).
   늘어난 폭은 냉동 · 냉장 · 동결 칸의 안쪽 여백(20 → 13px, 1179px 아래 13 → 9px)에서 가져와 환율 줄이 지금보다 더 잘리지 않게 한다 */
body.duo .cols .head > #modes .seg.fit :is([data-view="plan"], [data-view="price"]) { width: calc(var(--tw) + .8em); }
body.duo .cols .head > #modes .seg.fit .ink { left: 0; width: var(--iw); transform: translate3d(var(--ix), 0, 0); }
@media (prefers-reduced-motion: no-preference) { body.duo .cols .head > #modes .seg.fit .ink { transition: transform .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1); } }
body.duo .cols .head > #modes .seg:has([data-view="iq"]) { --tw: 50px; }
@media (max-width: 1279px) { body.duo .cols .head > #modes .seg:has([data-view="iq"]) { --tw: 42px; } }
@media (max-width: 1179px) { body.duo .cols .head > #modes .seg:has([data-view="iq"]) { --tw: 37px; } }
body.duo #hacts .kseg button { padding: 0 13px; }
@media (max-width: 1179px) { body.duo #hacts .kseg button { padding: 0 9px; } }

/* 초기화 칩은 창고 재고 숫자 줄 끝에 (2026-10-28, 사용자: "초기화 버튼 위치가 애매하지 않니?" → 시안/초기화칩-시안 가 "추천대로 진행하자."): app.js horizonSummary가
   --hzr: 1을 보면 칩을 첫 .hk 안에 넣는다(격자의 r 칸은 비고, 칸 배치는 옛 app.js를 위해 그대로). 칩은 숫자 칸의 최소 폭에 들지 않는다(width 0에서 제 폭까지 늘어남):
   들었더니 1440~1459px에서 숫자가 클 때(돼지 필터 · 전체에 가까운 검색) 주의 알약 줄이 꺾였다(카드 129 → 169px). 자리가 모자라면 글(<i>, 200px까지)이 '…'로 줄고 '✕ 초기화'는 늘 보인다(칩은 96px 아래로 줄지 않음).
   위아래 −1.5px: 칩(24px)이 숫자 줄(21px)보다 높아 카드가 3px 늘던 것 */
:root { --hzr: 1; }
@media (min-width: 1040px) {
  body.duo:not(.plan) .sumcard.hz .hzn > .hk > .hzr { flex: 1 1 0; width: 0; min-width: 96px; max-width: max-content; align-self: center; margin: -1.5px 0 -1.5px 8px; }
  body.duo:not(.plan) .sumcard.hz .hzn > .hk > .hzr > i { flex: 0 1 auto; min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
}

/* 창고 재고 상자의 그림자를 짙게 (2026-10-28, 사용자: "통관되서 판매 가능한 재고를 눈에 확 띄게 하려면 어떻게 해야할까 색은 지금 그대로가 너무 좋아." → 시안/창고재고강조-시안4
   (먹색 머리 띠 · 크게 띄우기 · 맨 위 판) → "영역을 너무 많이 쓰면 안되 … 색은 너~무 튀지 않으면서도 부각되게... 그림자를 더 짙게 해볼까???" → 시안/창고재고그림자-시안 나 "오케이 추천대로 진행!"):
   끝 줄 밑 띠 9px · 7.5% → 16px · 22%(5px에서 8%: 진한 밑동 + 긴 꼬리). 자리 · 테 · 색은 그대로. z-index는 주지 않는다: #pbody 안에 z 1 이상이 생기면 밀려 올라간 요약 카드(#dock, z 1)를
   묶음 카드가 덮는다. 그래서 흐린 둘째 표(.dpk)가 밑에 있으면 꼬리는 그 상자의 점선 테(11px 아래, 그 자리 짙기 3%쯤)에서 가려진다 */
@media (min-width: 1040px) {
  body.duo .dt tr.bx.bstk.bxB > :is(td, th)::after { height: 16px; background: var(--sink); }
}

/* PC 묶음 카드 '나누기' (2026-10-28, 사용자: "이 화면에서도 창고, 공장번호, 등급, 브랜드 등 별로 구분하게 하면 신박할것 같은데" → 시안/묶음카드나누기-시안2 "그렇지 이거지";
   app.js DSPLIT · dsplitChips · duoTable의 section): 바로가기 칩 줄 오른쪽 끝에 '나누기 [창고] [EST] [등급] [브랜드]' (토글 칩 말씨: 켜짐 먹 테 · 꺼짐 점선 · 잠김 흐리게).
   켜면 구역 제목 줄(dspl)은 상자 밖에 두고 값마다 상자: 머리 줄(dval)에 값 알약 · 건수 · 소계, 창고 재고 상자는 상자마다 끝 줄 밑 그림자(bstk 그대로). --dspl: 1은 app.js에 주는 신호 */
:root { --dspl: 1; }
@media (min-width: 1040px) {
  body.duo .djump { align-items: center; }
  body.duo .djump .dsplit { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
  body.duo .djump .dsplit small { margin-right: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
  /* border-box: 위 .djump button의 all: unset이 content-box로 돌려 테 1px만큼 바로가기 칩(30px)보다 2px 컸다. 켜짐은 테 굵기 · 글 굵기를 바꾸지 않고(폭이 1px씩 바뀌어 왼쪽 칩이 움직였다) 안쪽 그림자로 굵게 (독립 검토) */
  body.duo .djump .dsplit button { box-sizing: border-box; box-shadow: none; border: 1px dashed var(--edge); color: var(--muted); }
  body.duo .djump .dsplit button[aria-pressed="true"] { border: 1px solid var(--fg); box-shadow: inset 0 0 0 0.5px var(--fg); color: var(--fg); }
  body.duo .djump .dsplit button:disabled { opacity: 0.55; border-style: solid; cursor: default; }
  @media (hover: hover) { body.duo .djump .dsplit button:not(:disabled):not([aria-pressed="true"]):hover { box-shadow: none; border-color: color-mix(in srgb, var(--fg) 45%, transparent); color: var(--fg); } body.duo .djump .dsplit button:disabled:hover { box-shadow: none; } }
  body.duo .dt tr.dsec.dspl > td { padding-bottom: 8px; }
  body.duo .dt tr.dsec.dval b.sl { font-size: 14px; }
  body.duo .dt tr.dsec.dval b.sl::before { display: none; }
  body.duo .dt tr.dsec.dval b.sl :is(.estb, .gr) { font-size: 13px; }
  /* 브랜드 알약(brandTag의 span.bl): 예전 B/L 규칙(.dt .bl 고정폭 글꼴)과 구역 제목 줄의 'tr.dsec span' 여백(10px씩 두 번)이 걸렸다 (독립 검토) */
  body.duo .dt tr.dsec.dval b.sl :is(.dpill, .bl) { margin-left: 0; font-family: inherit; letter-spacing: inherit; }
}

/* 폰 묶음 카드: 창고 재고 상자(.rise)를 PC 묶음 카드의 창고 재고 상자(bstk)와 같게 + 나누기 (2026-10-28, 사용자: "모바일 버전도 똑같이 만들어줘 그림자도 동일하게 하고 테두리 역시 동일하게.";
   app.js group의 나누기 주석). 테 2px · 먹색 20%, 흰 면, 그림자는 상자 밑 16px 띠(먹색 22% → 5px에서 8% → 0, 양 끝 56px에 걸쳐 흐려짐) — 예전 --lift(사방 옅은 그림자)를 대신한다.
   테가 1px 굵어진 만큼 안쪽 여백을 1px 줄여 글자 열은 그대로. 창고 재고뿐인 묶음도 상자에 담긴다(app.js). 칩 줄 .gsplit은 복사 · 공유 줄 밑 오른쪽 */
body:not(.duo) .lots > .rise { position: relative; border: 2px solid color-mix(in srgb, var(--fg) 20%, transparent); background: #fff; box-shadow: none; }
body:not(.duo) .lots > .rise::after { content: ""; position: absolute; left: 6px; right: 6px; top: calc(100% + 2px); height: 16px; background: var(--sink); -webkit-mask-image: var(--sinkm); mask-image: var(--sinkm); pointer-events: none; }
body:not(.duo) .rise .lots > li:last-child .lot { border-radius: 0 0 16px 16px; }
body:not(.duo) .rise .sect, body:not(.duo) .rise .lot { padding-inline: 8px; }
body.selecting:not(.duo) .rise .sect, body.selecting:not(.duo) .rise .lot { padding-inline: 10px; }
@media (max-width: 374px) { body:not(.duo) .rise .sect, body:not(.duo) .rise .lot { padding-inline: 6px; } body.selecting:not(.duo) .rise .sect, body.selecting:not(.duo) .rise .lot { padding-inline: 8px; } }
/* 독립 검토: 선택 동그라미도 테가 굵어진 1px만큼 안으로 (카드 안쪽에서 14px, 좁은 폰 11px 그대로), 제목 없는 상자(창고 재고뿐인 묶음)의 첫 건은 눌림 · 선택 바탕이 위 둥근 모서리를 덮지 않게 */
body.selecting:not(.duo) .rise .lot::before { left: 8px; }
@media (max-width: 374px) { body.selecting:not(.duo) .rise .lot::before { left: 7px; } }
body:not(.duo) .rise .lots > li:first-child .lot { border-top-left-radius: 16px; border-top-right-radius: 16px; }
body:not(.duo) .sect.dval .sl::before { display: none; }
body:not(.duo) .sect.dval .sl :is(.estb, .gr) { font-size: 13px; }
body:not(.duo) .sect.dval .sl :is(.dpill, .bl) { margin-left: 0; font-family: inherit; letter-spacing: inherit; }
body:not(.duo) .gsplit { display: flex; justify-content: flex-end; padding: 0 16px 12px; }
body:not(.duo) .gsplit .dsplit { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
body:not(.duo) .gsplit small { margin-right: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
body:not(.duo) .gsplit button { all: unset; box-sizing: border-box; position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px dashed var(--edge); border-radius: 999px; background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
body:not(.duo) .gsplit button::after { content: ""; position: absolute; inset: -7px -3px; }   /* 30px → 44px (칩 사이 6px를 반씩) */
body:not(.duo) .gsplit button[aria-pressed="true"] { border: 1px solid var(--fg); box-shadow: inset 0 0 0 0.5px var(--fg); color: var(--fg); }
body:not(.duo) .gsplit button:disabled { opacity: 0.55; border-style: solid; cursor: default; }
body:not(.duo) .gsplit button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 나눈 창고 재고의 제목 줄(dspl)과 값 머리 줄(dval)은 바닥(.ground) 위에서도 상자 안 제목 줄처럼 합계를 오른쪽 끝에 (바닥의 구역 제목은 왼쪽으로 모으는 꼴이라 '창고 재고 11건 · …'이 붙어 보였다) */
body:not(.duo) .lots > .sect:is(.dspl, .dval) { justify-content: space-between; }
body:not(.duo) .ground > .sect.dspl { padding-block: 12px 4px; color: var(--fg); }

/* 폰 묶음 카드 머리의 모서리 빛 (2026-10-28, 사용자: 카드 머리 갈무리와 "요 부분에 사선으로 그라데이션 살짝 들어가면 어떨까?? 노란색 또는 주황색?? 연하게..." → 시안/폰카드머리그라데이션-시안 ~ 시안5:
   "노란색은 아닌것 같다" → "카라멜이 괜찮아 보이는데 각도가 너무 45도다 그리고 경계보이는거 없애주고" → "좋아 다 로 가자" · "너무 갈색갈색 한데??" → 피치 16% (a411a68) →
   "은색으로 표현해볼까???? 색이 너무 핑크핑크 한데..." → 시안/폰카드머리은색-시안(은회색 · 은빛 광택 · 진주 은색) → "그래 다 좋다. 진행!!!"):
   펼친 카드의 왼쪽 위 모서리에서 타원(340 × 230px)으로 퍼지는 진주 은색(푸른 기가 도는 은색) 빛, 시작 짙기 24%. 짙기는 1 − smoothstep 곡선을 점 열하나로(곧은 토막이면 꺾인 자리에 줄이 비쳤다).
   border-box: 카드의 투명한 1px 테 자리까지 칠한다(padding-box면 테 자리에 흰 바탕만 깔려 위 · 왼쪽 가장자리에 흰 줄이 보였다). 판(420px)이 빛보다 커서 판 끝 경계도 없다.
   재고 탭의 묶음 카드만 (같은 날 사용자: 단가표 카드 갈무리와 "단가표에 그라데이션은 빼자." — 처음 규칙이 스케쥴만 빼서 단가표 카드에도 들었다) */
body:not(.duo):not(.plan):not(.price):not(.market):not(.news) #list > .group:not(.closed) { background: radial-gradient(ellipse 340px 230px at 0 0, rgba(168, 178, 198, 0.2400) 0%, rgba(168, 178, 198, 0.2333) 10%, rgba(168, 178, 198, 0.2150) 20%, rgba(168, 178, 198, 0.1882) 30%, rgba(168, 178, 198, 0.1555) 40%, rgba(168, 178, 198, 0.1200) 50%, rgba(168, 178, 198, 0.0845) 60%, rgba(168, 178, 198, 0.0518) 70%, rgba(168, 178, 198, 0.0250) 80%, rgba(168, 178, 198, 0.0067) 90%, rgba(168, 178, 198, 0) 100%) top left / 100% 420px no-repeat border-box, var(--surface); }

/* 그림자 통일 (2026-10-28, 사용자: 폰 창고 재고 상자 밑 그림자 갈무리와 "모든 그림자는 요 그림자로 통일해줘." → 물음 '카드 · 상자만 (추천)', 이어서 "요거 빼고."(폰 묶음 머리 붙박이) · "검색창은 빼고."):
   카드 · 상자의 바깥 그림자(box-shadow)를 창고 재고 상자의 밑 띠 하나로 — 상자 밑 16px, 먹색 22% → 5px에서 8% → 0, 양 끝 56px에 걸쳐 흐려짐(--sink · --sinkm, 창고 재고 상자 둘도 이 값을 쓴다).
   대상: 재고 탭의 PC 묶음 카드(.dcard) · 폰 시장 카드(#mkx .mx-c). 그대로 두는 것: 단추 · 알약 · 떠오르는 창(판 · 메뉴 · 말풍선 · 펼친 시간줄 · 서랍) · 붙박이 머리 · 검색창 · 그림 미리보기, 그리고 다른 탭
   (같은 날 사용자: "수입통계, 뉴스 에 그림자도 그대로 두고." · "시장 흐름도 그냥두고." · "단가표 섹션 그림자도 그대로 두고." · "스케줄도 그대로 두고." — 뉴스 머리기사 · 단가 고치기 카드는 예전 그림자) */
:root { --sink: linear-gradient(rgba(33, 12, 2, 0.22), rgba(33, 12, 2, 0.08) 5px, rgba(33, 12, 2, 0)); --sinkm: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
body.duo:not(.plan):not(.price):not(.market):not(.news) #pbody > .dcard::after { content: ""; position: absolute; left: 6px; right: 6px; top: 100%; height: 16px; background: var(--sink); -webkit-mask-image: var(--sinkm); mask-image: var(--sinkm); pointer-events: none; }
/* 폰 재고 탭 첫 화면의 시장 카드도 (같은 날 사용자: 시장 카드 갈무리와 "여기 그림자 안바꼈어..." — "수입통계, 뉴스 …그대로"를 이 카드까지로 넓게 읽어 되돌렸던 것) */
#mkx .mx-c { position: relative; box-shadow: none; overflow: visible; }   /* 카드 안을 자르면(overflow: hidden) 띠도 잘린다: 큰 · 작은 카드 모두 안의 것이 카드 밖으로 넘지 않아(시험에서 0) 풀고, 그래프 칸만 자른다 */
#mkx .mx-c > .mx-ch { overflow: hidden; }
#mkx .mx-c::after { content: ""; position: absolute; left: 6px; right: 6px; top: 100%; height: 16px; background: var(--sink); -webkit-mask-image: var(--sinkm); mask-image: var(--sinkm); pointer-events: none; }
#mkx .mx-pg { padding-bottom: 24px; margin-bottom: -16px; }   /* 띠가 옆으로 미는 판(overflow-x: auto)에 잘리지 않게 아래를 2px 더 비우고 그만큼 당긴다 (앞의 22px · −14px와 자리는 같다) */
@media (min-width: 1040px) {
  body.duo:not(.plan):not(.price):not(.market):not(.news) #pbody > .dcard { position: relative; box-shadow: none; margin-bottom: 18px; }   /* 18px: 맨 끝까지 내렸을 때 띠가 판(#pbody, overflow: auto)에 잘리지 않게. 스케쥴(sxcard · agcard) · 단가표(pvcard) · 수입 통계(iqt-card) 판도 .dcard라 탭으로 가른다 */
}

/* 손익 계산 다시 짬 (2026-10-28, 시안/손익계산재구성-시안 나 · "손익분기도 나오면 좋을것 같아. 추천대로 나로 진행하자."; app.js plRender · plRes): 상품마다 판매가 | 판매량(kg · 박스 · 전량) 두 칸,
   맨 위 카드 안의 폐기 비용 칸은 폐기가 있을 때만, 폐기는 판 맨 아래 접힌 덩어리 */
#plsheet .pl-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#plsheet .pl-f .pl-in { position: relative; }
#plsheet .pl-f .pl-in input { flex: 1; width: 0; min-width: 0; height: 46px; border-radius: 12px; font-size: 18px; }
#plsheet .pl-f .pl-in em { position: absolute; right: 12px; pointer-events: none; font-size: 12px; font-weight: 600; }
#plsheet .pl-f .pl-in:not(.pl-q) input { padding-right: 52px; }
#plsheet .pl-q input { padding-right: 44px; }
#plsheet .pl-unit { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--track); }   /* 단위는 이름 줄에 (칸 안에 두면 좁은 폰에서 숫자가 잘렸다) */
#plsheet .pl-unit button { all: unset; box-sizing: border-box; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
#plsheet .pl-unit button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(33, 12, 2, .1), 0 0 0 1px var(--edge); }
#plsheet .pl-unit button:disabled { opacity: .4; cursor: default; }
#plsheet .pl-unit button:focus-visible, #plsheet .pl-all:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
#plsheet .pl-all { all: unset; box-sizing: border-box; padding: 3px 10px; border: 1px dashed var(--edge); border-radius: 999px; background: var(--surface); font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
#plsheet .pl-all[aria-pressed="true"] { border: 1px solid var(--fg); color: var(--fg); box-shadow: inset 0 0 0 .5px var(--fg); }
#plsheet .pl-sum .pl-fee { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--fg) 22%, transparent); font-size: 13px; font-weight: 600; color: var(--muted); }
#plsheet .pl-sum .pl-fee > span small { margin-left: 4px; font-size: 11.5px; font-weight: 500; }
#plsheet .pl-sum .pl-fee .pl-in input { width: 92px; height: 34px; padding-right: 46px; border-radius: 9px; font-size: 15px; }
#plsheet .pl-sum .pl-fee .pl-in { position: relative; }
#plsheet .pl-sum .pl-fee .pl-in em { position: absolute; right: 9px; font-size: 11.5px; }
#plsheet .pl-sum .pl-fee small.bad { flex-basis: 100%; text-align: right; }
#plsheet .pl-sum .pl-fee[hidden], #plsheet .pl-sum .w[hidden], #plsheet .pl-dlots[hidden] { display: none; }
#plsheet .pl-disp { border-top: 1px solid var(--line); }
#plsheet .pl-dh { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; cursor: pointer; }
#plsheet .pl-dh > span small { font-weight: 500; color: var(--muted); }
#plsheet .pl-dh i { flex: none; display: inline-flex; align-items: center; font-style: normal; color: var(--fg); text-underline-offset: 3px; }
#plsheet .pl-dh i svg { transition: transform .2s; }
#plsheet .pl-dh[aria-expanded="true"] i svg { transform: rotate(180deg); }
#plsheet .pl-dh:focus-visible { outline: 2px solid var(--fg); }
#plsheet .pl-dlots .b.mi { color: #a01210; }
#plsheet .pl-lot .estb { white-space: nowrap; }
/* 건별 판매가 (2026-10-28, 사용자: "건별로 판매가 입력할 수 있게도 해줘."; app.js plRender · plRes): 상품 결과 밑 '건별 판매가 ▾', 펴면 팔리는 차례대로 건마다 판매가 칸 (비우면 상품의 판매가) */
#plsheet .pl-lb { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 12.5px; font-weight: 650; color: var(--fg); cursor: pointer; }
#plsheet .pl-lb small { font-size: 12px; font-weight: 500; color: var(--muted); }
#plsheet .pl-lb i { display: inline-flex; }
#plsheet .pl-lb i svg { transition: transform .2s; }
#plsheet .pl-lb[aria-expanded="true"] i svg { transform: rotate(180deg); }
#plsheet .pl-lb:focus-visible { outline: 2px solid var(--fg); }
#plsheet .pl-plots[hidden] { display: none; }
#plsheet .pl-lot.pl-pr { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
#plsheet .pl-lot.pl-pr .pl-lpin { grid-column: 2; grid-row: 1; justify-self: end; position: relative; }
#plsheet .pl-lot.pl-pr .pl-lpin input { width: 104px; height: 34px; padding: 0 26px 0 8px; border-radius: 9px; font-size: 15px; }
#plsheet .pl-lot.pl-pr .pl-lpin input::placeholder { font-size: 14px; font-weight: 600; opacity: .55; }
#plsheet .pl-lot.pl-pr .pl-lpin input:disabled { opacity: .5; }
#plsheet .pl-lot.pl-pr .pl-lpin em { position: absolute; right: 8px; font-size: 11.5px; }
#plsheet .pl-lot.pl-pr .c { grid-column: 1; }
#plsheet .pl-lot.pl-pr .d { grid-column: 2; text-align: right; }
#plsheet .pl-lot.pl-pr .d b { font-size: 12.5px; }
#plsheet .pl-lot.pl-pr .bad { color: var(--warn-t); font-weight: 600; }
/* 손익 계산 건 줄의 B/L (2026-10-28, 사용자: 건 줄 갈무리와 "BL 표시해주면 좋을것 같고"): 둘째 줄 맨 앞, 끝 네 자리 진하게(앱의 .lbl) */
#plsheet .pl-lot .c .plbl { display: block; margin-bottom: 1px; color: var(--muted); }
#plsheet .pl-lot .c .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: -0.03em; white-space: nowrap; }
#plsheet .pl-lot .c .lbl em { font-style: normal; font-weight: 700; color: var(--fg); }
/* 손익표 그림 판의 '상품정보 생성 · 복사' (app.js plImage): 공유 · 복사 · 저장 위에 한 줄로 (넷을 한 줄에 두면 폰에서 앞 단추가 잘렸다) */
#sheet .sheetacts:has(.plinfo) { flex-wrap: wrap; }
#sheet .sheetacts .plinfo { flex: 1 1 100%; justify-content: center; }
/* '건별 판매가'를 단추로 보이게 (2026-10-28, 사용자: 그 줄 갈무리와 "이게 버튼인지 잘 모르겠어. 버튼으로 인식할 수 있게 표현해줘."): 흰 바탕 · 테 · 둥근 모서리의 한 줄 상자, 오른쪽에 '펼치기 ▾' / '접기 ▴' */
#plsheet .pl-lb { min-height: 42px; margin-top: 8px; padding: 0 12px 0 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(33, 12, 2, .06); }
#plsheet .pl-lb > span { font-size: 13px; font-weight: 700; }
#plsheet .pl-lb i { gap: 4px; padding: 4px 4px 4px 10px; font-style: normal; font-size: 12.5px; font-weight: 650; color: var(--fg); }
#plsheet .pl-lb i svg { width: 13px; height: 13px; }
#plsheet .pl-lb[aria-expanded="true"] { border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
@media (hover: hover) { #plsheet .pl-lb:hover { border-color: var(--fg); } }
#plsheet .pl-lb:active { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); }
#plsheet .pl-lb:focus-visible { outline-offset: 2px; border-radius: 12px; }
/* 폐기 덩어리의 머리도 '건별 판매가'와 같은 단추 꼴로 (2026-10-28, 사용자: "디자인 통일해줘 방식은 동일한데 디자인이 완전히 다르잖아."): 둘 다 눌러서 건 목록을 펴는 단추라
   흰 바탕 · 1px 테 · 12px 둥근 모서리 · 옅은 그림자 · 오른쪽 '펼치기 ▾ / 접기 ▴'(밑줄 글이던 것) */
#plsheet .pl-disp { margin-top: 14px; padding-top: 12px; }
#plsheet .pl-dh { min-height: 42px; padding: 0 12px 0 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(33, 12, 2, .06); }
#plsheet .pl-dh > span { font-size: 13px; font-weight: 700; }
#plsheet .pl-dh > span small { margin-left: 4px; font-size: 12px; }
#plsheet .pl-dh i { gap: 4px; padding: 4px 4px 4px 10px; font-size: 12.5px; font-weight: 650; text-decoration: none; }
#plsheet .pl-dh i svg { width: 13px; height: 13px; }
#plsheet .pl-dh[aria-expanded="true"] { border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
@media (hover: hover) { #plsheet .pl-dh:hover { border-color: var(--fg); } }
#plsheet .pl-dh:active { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); }
#plsheet .pl-dh:focus-visible { outline-offset: 2px; border-radius: 12px; }
#plsheet .pl-dh + .pl-dlots { margin-top: 6px; }

/* 손익 계산 표 꼴 (2026-10-28, 시안/손익계산짜임-시안 다 "다로 가자"; app.js plRender · plRes): 맨 위 합계 카드는 판을 내려도 위에 붙어 있고, 상품은 판매가 | 판매량 | 손익 세 칸 한 줄 + 두 줄 */
#plsheet .pl-sum { position: sticky; z-index: 3; }
#plsheet .pl-info { margin: -2px 2px 8px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#plsheet .pl-th, #plsheet .pl-cells { display: grid; gap: 6px; align-items: center; }
#plsheet .pl-th { padding: 6px 2px 6px; border-bottom: 1.5px solid var(--fg); font-size: 11.5px; font-weight: 700; color: var(--muted); }
#plsheet .pl-th span:last-child { text-align: right; }
#plsheet .pl-row { padding: 12px 2px 10px; border-top: 0; border-bottom: 1px solid var(--line); }
#plsheet .pl-row .ph { margin-bottom: 6px; }
#plsheet .pl-row .pn { font-size: 14.5px; }
#plsheet .pl-cells .pl-in { position: relative; }
#plsheet .pl-cells .pl-in input { flex: 1; width: 0; min-width: 0; height: 40px; padding: 0 30px 0 8px; border-radius: 10px; font-size: 16px; }
#plsheet .pl-cells .pl-in em { position: absolute; right: 9px; pointer-events: none; font-size: 11.5px; font-weight: 600; }
#plsheet .pl-pl { text-align: right; white-space: nowrap; }
#plsheet .pl-pl b { font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#plsheet .pl-pl b.na { color: var(--muted); font-weight: 600; }
#plsheet .pl-pl small { display: block; font-size: 11px; color: #a01210; font-weight: 600; }
#plsheet .pl-l2 { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
#plsheet .pl-l2 .pl-unit button { padding: 2px 8px; font-size: 11.5px; white-space: nowrap; }
#plsheet .pl-l2 .pl-all { padding: 2px 9px; white-space: nowrap; }
#plsheet .pl-l2 .pq { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
#plsheet .pl-l3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
#plsheet .pl-l3 .ps { font-size: 11.5px; }
#plsheet .pl-l3 .pk { margin-left: auto; text-align: right; }
#plsheet .pl-warn { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; font-size: 12px; }
#plsheet .pl-warn .bad { color: var(--warn-t); font-weight: 600; }
#plsheet .pl-warn[hidden] { display: none; }
#plsheet .pl-row .pl-lb { min-height: 36px; margin-top: 8px; border-radius: 10px; }
#plsheet .pl-row .pl-lb > span { font-size: 12.5px; }
#plsheet .pl-row .pl-in input[aria-invalid="true"] { border-color: var(--warn); }
@media (max-width: 359px) {   /* 가장 좁은 폰: 판매가 | 판매량 두 칸, 손익은 그 밑 오른쪽 (세 칸이면 '30,000'이 잘렸다) */
  #plsheet .pl-th { display: none; }
  #plsheet .pl-pl { grid-column: 1 / -1; }
}
@media (max-width: 359px) {   /* 가장 좁은 폰: 맨 위 합계 숫자가 '−1,785 / 만원'으로 꺾이지 않게 */
  #plsheet .pl-sum .t { flex-wrap: wrap; }
  #plsheet .pl-sum .t b { font-size: 21px; white-space: nowrap; margin-left: auto; }
}
#plsheet .pl-dh > span { word-break: keep-all; }   /* 폐기 머리 글이 '있으 / 면'처럼 낱말 가운데서 꺾이지 않게 */
@media (max-width: 359px) {   /* 재고 글이 말줄임으로 잘리지 않게: 자리가 모자라면 다음 줄 오른쪽으로 */
  #plsheet .pl-l2 { flex-wrap: wrap; row-gap: 4px; }
  #plsheet .pl-l2 .pq { white-space: normal; overflow: visible; text-align: right; }
}
#plsheet .pl-row .pk { word-break: keep-all; }   /* 한글은 글자 사이에서도 꺾여 '남는 재 / 고'가 됐다: 줄은 ' · '에서만 */
/* 판매량 칸이 판매가보다 한 글자 길다('100,452' kg vs '30,000'원): 몫을 바꿔 준다. 360~389px 폰은 손익 칸을 줄이고 안쪽 여백을 덜어 6자리 kg까지 잘리지 않게 */
#plsheet .pl-th, #plsheet .pl-cells { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 100px; }
@media (min-width: 360px) and (max-width: 389px) {
  #plsheet .pl-th, #plsheet .pl-cells { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 86px; }
  #plsheet .pl-cells .pl-in input { padding: 0 26px 0 7px; }
  #plsheet .pl-cells .pl-in em { right: 7px; }
  #plsheet .pl-pl b { font-size: 15px; }
}
@media (max-width: 359px) {   /* 위 몫 바꾸기가 가장 좁은 폰의 두 칸을 덮지 않게 (나중 규칙이 이긴다) */
  #plsheet .pl-cells { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
#plsheet .pl-cells .pl-q[data-u="box"] input { padding-right: 38px; }   /* '박스'는 'kg'보다 넓다: 숫자가 단위에 붙지 않게 */
@media (min-width: 360px) and (max-width: 389px) { #plsheet .pl-cells .pl-q[data-u="box"] input { padding-right: 35px; } }

/* 폰 묶음 카드 머리에 마우스를 올렸을 때 (2026-10-29, 사용자: 카드 머리 갈무리와 "마우스 올라갔을 때 색이 확 구분 되는데 이것좀 해결해주고" → 시안/폰카드마우스-시안-비교.png ㄴ, "전부 추천대로 진행해줘."):
   머리(.ghead) 전체에 깔던 먹색 4% 덮개(box-shadow)가 남음 막대 밑에서 칼로 자른 듯 끊겼다. 같은 덮개를 위 절반은 그대로, 아래 절반에서 0으로 흐려 끝선을 없앤다. 누를 때도 같은 꼴로 조금 짙게.
   마우스가 있는 좁은 창에서만이다 (터치 폰의 누름 반응 · PC 두 판은 그대로) */
@media (hover: hover) {
  body:not(.duo) .group > .ghead:hover { box-shadow: none; background: linear-gradient(color-mix(in srgb, var(--fg) 4.5%, transparent) 50%, transparent); }
  body:not(.duo) .group > .ghead:active { background: linear-gradient(color-mix(in srgb, var(--fg) 7%, transparent) 50%, transparent); }
}

/* 폰 묶음 카드의 칸 이름을 창고 재고 제목 줄로 (2026-10-29, 사용자: 칸 머리 갈무리와 "헤더의 위치를 다시 잡아줘야할 것 같아. 혼자 갈곳을 못찾고 있는것 같아." → 시안/폰칸머리-시안-비교.png 다):
   제목 줄(.sect.lch) 안의 .lotcols는 건 줄(.lot)과 같은 칸 규칙(폭마다 · 원가 숨김 3칸 · .l3)을 그대로 받고, 상자 안 제목 줄과 건 줄의 안쪽 여백이 같아(.rise .sect, .rise .lot) 칸 이름이 숫자 칸 위에 선다.
   나눈 때 바닥 위 제목 줄(dspl)도 바닥 여백 = 상자 바깥 + 테 + 안쪽이라 맞는다. 고르기 중 첫 칸을 미는 규칙은 건 줄에만 (제목은 제자리). --lch: 1은 app.js에 주는 신호다 */
:root { --lch: 1; }
.sect.lch { display: block; }
.sect.lch > .lotcols { padding: 0; border: 0; align-items: center; }
.sect.lch .lcn { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--fg); }
.sect.lch .lcn span { font-weight: 500; color: var(--muted); }
.sect.lch > .lotcols > :nth-child(n+2) { white-space: nowrap; }
.selecting .sect.lch > .lotcols > :first-child { margin-left: 0; }
/* 창고 재고가 없는 묶음: 예전 머리 줄을 바닥 색으로 칠하고 밑줄을 빼서 목록(바닥)의 첫 줄로 붙인다 */
.group > .lotcols.lgr { padding-block: 12px 2px; border-bottom: 0; background: var(--ground); }
.group > .lotcols.lgr + .ground > .gpk:first-child > .lots > li:first-child { border-top: 0; }   /* 흐린 덩어리 첫 줄의 윗선이 머리 줄 밑줄처럼 보였다 */
@media (max-width: 374px) { body:not(.nocost) .sect.lch .lcn span { display: none; } }   /* 원가 4칸: 320px에서 '창고 재고 11건'이 '박스 / kg'에 10px 겹쳤다 (원가 숨김 3칸 · .l3은 첫 칸이 넓어 그대로) */
/* 폰 '… 펼치기' 단추도 먹색 알약 (2026-10-29, 사용자: 단추 갈무리와 "이 버튼도 검정색 배경으로 강조하자. 눈에 잘 안띄어."): PC .dpkbtn(10-27 시안/펼치기색-시안 나)과 같은
   먹색 면 · 크림 글 · 그림자, 화살표도 글 색(먹색 화살표가 면에 묻힌다). 펼친 뒤의 '… 접기'(li.gpkfold)는 PC처럼 흰 알약 그대로 */
#list .gpkbtn { background: var(--fg); color: var(--surface); box-shadow: 0 4px 14px rgba(33, 12, 2, 0.28); }
#list .gpkbtn svg { fill: currentColor; stroke: currentColor; }
@media (hover: hover) { #list .gpkbtn:hover { background: color-mix(in srgb, var(--fg) 86%, #fff); box-shadow: 0 5px 16px rgba(33, 12, 2, 0.32); } }

/* 폰 재고 탭 경고 칸 (2026-10-29, 사용자: 주의 알약 띠 갈무리와 "위치가 애매한데 추천좀해줘 디자인과 잘 어울리게 시안을 뽑아줘." → 시안/폰주의알약자리-시안 '다'(흐름 역마다) →
   "추천 좋은데 알약이 안어울리지 않니??? 다른 표현법 없을까??" → 시안/폰주의표현-시안 → "ㄴ 으로 가자."): 옆으로 밀던 알약 띠(.pillrow)를 풀고(app.js pillRow가 카드에 wc),
   주의(#alerts)는 흐름 밑 가는 선 아래 역마다 한 칸 — 입고 예정 칸: 입고 지연 · 선적 지남, 통관 전 칸: —, 창고 재고 칸: 임박 · 낱박스 — 에 이름 왼쪽 · 수 오른쪽 줄로,
   어제 이후(#changes)는 그 밑 글 한 줄로. 칸은 요약(#summary)과 같은 삼등분 · 같은 옆 여백이다: 12px · 입고 예정이 왼쪽(검색 · 필터 중에도 흐름 그림을 그대로 두어 차례가 같다, 아래 --fq).
   줄은 글 폭만큼 역 밑 가운데에(이름 · 10px · 수; 같은 날 "가운데 정렬 해줬으면 좋겠어."로 왼쪽 → 가운데; 같은 날 사용자: "사이 간격이 너무 벌어져있어 조금 좁혀야 할 것 같아." — 처음에는 칸 폭 양 끝으로 벌려 500px 창에서 53px 벌어졌다). 누르면 그 줄이 먹색. 검색 · 필터 중에는 예전처럼 눌러 둔 쪽(.keep)만. --wc: 1은 app.js에 주는 신호다 */
:root { --wc: 1; }
body:not(.duo) .sumcard.wc #alerts { display: block; margin: 0; padding: 10px 12px 12px; border: 0; border-top: 1px solid var(--line); background: none; }
body:not(.duo) .sumcard.wc #alerts:empty, body:not(.duo) .sumcard.wc.qmode > :is(#alerts, #changes):not(.keep), body:not(.duo) .sumcard.wc #changes.line, body:not(.duo) .sumcard.wc #alerts .atitle, body:not(.duo) .sumcard.wc #changes .since b { display: none; }
body:not(.duo) .sumcard.wc #alerts .achips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 2px 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(var(--line), var(--line)) calc(100% / 3) 0 / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) calc(200% / 3) 0 / 1px 100% no-repeat; }   /* 칸 가름선: 요약 세 칸의 가름선 자리 */
body:not(.duo) .sumcard.wc #alerts .achips::before { content: "—"; grid-column: 2; grid-row: 1; justify-self: center; padding: 3px 0; font-size: 12px; line-height: 20px; color: color-mix(in srgb, var(--muted) 55%, transparent); }   /* 통관 전 칸: 주의가 없는 단계 */
body:not(.duo) .sumcard.wc #alerts .achips > .achip { all: unset; box-sizing: border-box; position: relative; display: flex; justify-self: center; justify-content: flex-start; align-items: baseline; gap: 10px; min-width: 0; margin: 0 6px; padding: 3px 6px; border-radius: 8px; font-size: 12px; line-height: 20px; color: var(--muted); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body:not(.duo) .sumcard.wc #alerts .achips > .achip[data-status="late"], body:not(.duo) .sumcard.wc #alerts .achips > .achip[data-status="past"] { grid-column: 1; }
body:not(.duo) .sumcard.wc #alerts .achips > .achip[data-status="soon"], body:not(.duo) .sumcard.wc #alerts .achips > .achip[data-status="loose"] { grid-column: 3; }
body:not(.duo) .sumcard.wc #alerts .achips > .achip > span { min-width: 3em; overflow: hidden; text-overflow: ellipsis; font: inherit; color: inherit; }   /* 한 칸 안 두 줄의 수가 같은 자리에서 시작하게 (임박 · 낱박스) */
body:not(.duo) .sumcard.wc #alerts .achips > .achip > span::before { content: none; }
body:not(.duo) .sumcard.wc #alerts .achips > .achip b { flex: none; font-size: 14px; font-weight: 750; letter-spacing: -0.01em; color: var(--warn-t); }
body:not(.duo) .sumcard.wc #alerts .achips > .achip[data-status="loose"] b { color: var(--fg); }   /* 낱박스는 경고가 아니라 팔 것을 찾는 단추 */
body:not(.duo) .sumcard.wc #alerts .achips > .achip.zero b { font-weight: 500; color: var(--muted); }
body:not(.duo) .sumcard.wc #alerts .achips > .achip:disabled { cursor: default; }
body:not(.duo) .sumcard.wc #alerts .achips > .achip[aria-pressed="true"], body:not(.duo) .sumcard.wc #alerts .achips > .achip[aria-pressed="true"] b { background: var(--fg); color: var(--surface); }
body:not(.duo) .sumcard.wc #alerts .achips > .achip[aria-pressed="true"] b { background: none; }
body:not(.duo) .sumcard.wc #alerts .achips > .achip:focus-visible, body:not(.duo) .sumcard.wc #changes .row > .alert.chg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
body:not(.duo) .sumcard.wc #changes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; margin: 0; padding: 9px 11px 11px; border: 0; border-top: 1px solid var(--line); background: none; font-size: 12.5px; }
body:not(.duo) .sumcard.wc #changes .row { display: contents; }
body:not(.duo) .sumcard.wc #changes .since { display: inline; margin: 0 4px 0 5px; padding: 0; border: 0; font-size: 12.5px; font-weight: 650; letter-spacing: 0; color: var(--fg); white-space: nowrap; }
body:not(.duo) .sumcard.wc #changes .row > .alert.chg { all: unset; box-sizing: border-box; position: relative; display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 5px; border-radius: 6px; font-size: 12.5px; line-height: 18px; color: var(--muted); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body:not(.duo) .sumcard.wc #changes .row > .alert.chg i { font-style: normal; font-size: inherit; font-weight: 400; color: inherit; }
body:not(.duo) .sumcard.wc #changes .row > .alert.chg b { font-size: inherit; font-weight: 700; color: var(--fg); }
body:not(.duo) .sumcard.wc #changes .row > .alert.chg[aria-pressed="true"] { background: var(--fg); color: var(--surface); }
body:not(.duo) .sumcard.wc #changes .row > .alert.chg[aria-pressed="true"] b { color: var(--surface); }
@media (hover: hover) {
  body:not(.duo) .sumcard.wc #alerts .achips > .achip:not(:disabled):not([aria-pressed="true"]):hover, body:not(.duo) .sumcard.wc #changes .row > .alert.chg:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
}
@media (max-width: 359px) {   /* 320px 폰: 역 한 칸 88px에 '입고 지연 134' · '선적 지남 127'이 말줄임 없이 들어가게 */
  body:not(.duo) .sumcard.wc #alerts .achips > .achip { gap: 6px; margin-inline: 2px; padding-inline: 4px; font-size: 11.5px; letter-spacing: -0.02em; }
  body:not(.duo) .sumcard.wc #alerts .achips > .achip b { font-size: 13px; }
}
/* 검색 · 필터 중에도 흐름 그림 (2026-10-29, 사용자: "버튼 눌러도 이 이미지는 유지하고 숫자만 바꾸는건 어때?"): app.js가 그림을 그린 카드에 fpic. 아래는 평소 그림 카드의 틀(.flow:not(.qmode) #summary)과
   같은 값으로, 거를 때(qmode)의 세 칸 규칙(.sumcard.qmode .summary의 칸 나눔 · 여백)을 덮는다. --fq: 1은 app.js에 주는 신호다 (옛 css면 예전처럼 세 칸) */
:root { --fq: 1; }
body:not(.duo) .sumcard.flow.fpic.qmode #summary { display: block; padding: 14px 12px 12px; --inc: #8f8275; font-variant-numeric: tabular-nums; color: var(--fg); }

/* 전체 품목 보기 (2026-10-29, 사용자: "전체품목 보기 버튼이 필요해. 특히 동결같은경우는 … 어떤품목이 동결되어있는지 파악하기 어려워." → 시안/폰전체품목-시안-비교.png 가):
   폰 재고 탭 첫 화면, 요약 카드 밑 가운데 알약(#allv, app.js allBtn). 접혀 있으면 '… 펼치기'(#list .gpkbtn)와 같은 먹색 알약, 펼치면 '… 접기'(li.gpkfold)와 같은 흰 알약 · 화살표 위로.
   --allv: 1은 app.js에 주는 신호다 */
:root { --allv: 1; }
#allv { display: flex; justify-content: center; margin: 2px 0 16px; }
#allv .allbtn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 10px 16px; border-radius: 999px; background: var(--fg); color: var(--surface); box-shadow: 0 4px 14px rgba(33, 12, 2, 0.28); font-size: 13.5px; font-weight: 650; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#allv .allbtn small { font-size: 12.5px; font-weight: 500; opacity: 0.75; }
#allv .allbtn svg { flex: none; width: 14px; height: 14px; fill: currentColor; stroke: currentColor; }
#allv .allbtn[aria-expanded="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 2px 10px rgba(33, 12, 2, 0.16), inset 0 0 0 1px var(--edge); }
#allv .allbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
#allv .allbtn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (hover: hover) {
  #allv .allbtn:hover { background: color-mix(in srgb, var(--fg) 86%, #fff); box-shadow: 0 5px 16px rgba(33, 12, 2, 0.32); }
  #allv .allbtn[aria-expanded="true"]:hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); box-shadow: 0 2px 10px rgba(33, 12, 2, 0.16), inset 0 0 0 1px var(--fg); }
}
@media (prefers-reduced-motion: no-preference) { #allv .allbtn { transition: transform 0.12s ease-out; } #allv .allbtn:active { transform: scale(0.97); } }
/* 경고 칸 누름 자리 (독립 검토 2026-10-29: 줄 26px · 사이 2px라 손가락으로 옆 줄(입고 지연 ↔ 선적 지남, 임박 ↔ 낱박스)을 잘못 눌러 필터가 켜지기 쉬웠다):
   줄 사이를 6px로 벌리고 보이지 않는 누름 자리를 위아래 3px · 옆 6px 넓혀 줄마다 32px, 이웃 줄과 딱 맞닿게. 어제 이후 글 줄도 같은 식(줄 사이 8px, 누름 자리 30px) */
body:not(.duo) .sumcard.wc #alerts .achips { row-gap: 6px; overflow: visible; }   /* 예전 칩 줄의 overflow: hidden이 첫 줄 위 누름 자리를 잘랐다 */
body:not(.duo) .sumcard.wc #alerts .achips > .achip::after { content: ""; position: absolute; inset: -3px -6px; }
body:not(.duo) .sumcard.wc #changes { row-gap: 8px; }
body:not(.duo) .sumcard.wc #changes .row > .alert.chg::after { content: ""; position: absolute; inset: -4px -2px; }
body:not(.duo) .sumcard.wc #changes .row > .alert.chg :is(i, b) { line-height: 18px; }   /* 예전 알약 규칙의 line-height: 1 때문에 줄이 16.5px로 납작했다 → 22px */
/* 폰 머리 '인기 검색' 띠: 긴 말(급냉등심(2.2-3.1))이 '동결' 알약 위로 넘쳤다 (2026-10-29, 390px에서 9px · 360px에서 23px 겹침; 사용자: "둘다 고쳐줘야지.").
   .hb가 세로 flex(오른쪽 맞춤)라 그 안의 .hw가 말 길이만큼 넓어져 왼쪽으로 삐져나갔다 — 원래 뜻(껍데기 폭에서 말줄임)대로 .hw를 단추 폭까지로 */
.hot .hw { max-width: 100%; }
.hot { margin-left: -4px; }   /* 그 대신 껍데기를 왼쪽으로 6px 넓혀 예전에 알약과 9px 떨어져 다 보이던 말(냉장카우보이립)은 그대로 다 보이게; 더 긴 말은 알약에서 4px 앞에서 말줄임 */
/* 2026-10-29 전체 점검 (사용자: "해봐 완벽하게 만들어보자."): 시장 흐름 · 수입 통계 */
.tc-yk i.avg { height: 1.2px; border-top: 0; background: repeating-linear-gradient(90deg, #9a8b7c 0 6px, transparent 6px 11px); }   /* 추세 비교의 평균 점선 (이름 · 값은 그래프 안에서 범례로 옮겼다: 마지막 달 값과 겹쳤다) */
@media (max-width: 359px) {   /* 세 칸 시장 카드: 우리 재고가 셋째 칸으로 간 뒤에는 품목 이름을 숨길 까닭이 없다 (320px에서 카드 넷이 '● 미국'만으로 갈리지 않았다) */
  #mkx .mx-3 .mx-kind { display: block; }
  #mkx .mx-3 .mx-n3 { padding-inline: 16px; }
  #mkx .mx-3 .mx-n3 > span:first-child b { font-size: 21px; }   /* '$10.74/kg'이 칸 선을 4px 넘었다 */
  #mkx .mx-3 .mx-n3 b { font-size: 14px; }
  #mkx .mx-3 .mx-n3 b em { font-size: 10.5px; }
}
#mkt :is(.mk-head span, .sl-kp small, .iq-leg), .iq-leg span { word-break: keep-all; }   /* '최근 3개|월' · '미국 달|러' · '집|계 중'처럼 낱말 가운데서 꺾였다 */
body:is(.market, .news) #list .mk-wait { margin: 18px; }   /* PC 목록의 '받는 중 · 받지 못함' 글이 카드 끝에 붙어 있었다 (줄 글과 같은 들여쓰기로) */
/* 폰에서 옆으로 넘치는 수입 통계 표: 오른쪽(왼쪽)에 더 있는 칸이 있으면 그 끝에 옅은 그늘 (390px에서 '우리 재고' 칸이 칸 경계에서 딱 잘려 있는 줄 몰랐다) */
#mkt .im-tw {
  background:
    linear-gradient(to right, var(--surface) 40%, rgba(255, 253, 249, 0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 40%, rgba(255, 253, 249, 0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(33, 12, 2, 0.14), rgba(33, 12, 2, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(33, 12, 2, 0.14), rgba(33, 12, 2, 0)) right center / 12px 100% no-repeat scroll;
}
/* 2026-10-29 전체 점검: 원가 화면 · 손익 계산 · 판매보고 */
.selacts .act svg { flex-shrink: 0; }   /* 320px에서 '표 생성' · '더 보기' 그림이 5px 폭으로 눌렸다 */
#plsheet .pl-sum { top: -4px; box-shadow: 0 -4px 0 4px var(--surface), 0 6px 14px rgba(33, 12, 2, .08); }   /* 붙어 있는 합계 카드 위 4px 틈과 둥근 모서리 사이로 밑의 줄이 비쳤다: 판 바탕색으로 덮는다 */
@media (max-height: 640px) { #plsheet .pl-sum { position: static; box-shadow: none; } }   /* 키 작은 폰(568px)에서는 폐기 하나만 넣어도 붙은 카드가 판의 절반을 가렸다 */
#ssheet, #plsheet { word-break: keep-all; overflow-wrap: break-word; }   /* '옵/니다' · '원/가' · '뺐습니/다'처럼 낱말 가운데서 꺾였다 */
body.price #gonenote { display: none; }   /* 냉장 '재고와 홀딩이 모두 없는 n건은 목록에서 뺐습니다'는 재고 이야기: 단가표 탭에도 떴다 (시장 흐름 · 뉴스처럼) */
/* 2026-10-29 전체 점검: PC 묶음 표의 박스 · kg · B/L 번호가 직원 화면에서 '1,1…' · '20,898.…' · 'HDMUDALA115867…'로 잘렸다 (1040~1079px, 1180~1279px; 묶음 124개 전부를 재서
   잘리는 칸 0이 되는 비율로). 1100px 아래는 관리자 화면(1279px 아래)처럼 품명 열을 접는다 — 단 카드의 건이 모두 한 품명일 때만(it1: 품명은 카드 제목에 크게 있다).
   브랜드로만 묶어 품명이 섞인 카드(PAMPLONA: 삼겹 · 항정 …)는 품명 열을 둔다 (독립 검토: 어느 줄이 무슨 품명인지 사라졌다) */
@media (min-width: 1180px) and (max-width: 1279px) {
  body.duo .dt.pc:not(.up) col.c-box { width: 9%; } body.duo .dt.pc:not(.up) col.c-kg { width: 12.5%; } body.duo .dt.pc:not(.up) col.c-bl { width: 18.5%; }
  body.duo .dt.pc:not(.up) col.c-end { width: 12.5%; } body.duo .dt.pc:not(.up) col.c-dt { width: 10.5%; } body.duo .dt.pc:not(.up) col.c-ty { width: 15%; }
}
@media (max-width: 1099px) {
  body.duo .dt.it1:not(.up) col.c-it { width: 0; }
  body.duo .dt.it1:not(.up) :is(td, th).it { padding: 0 !important; overflow: hidden; }
  body.duo .dt.it1:not(.up) :is(td, th).it > *, body.duo .dt.it1:not(.up) :is(td, th).it::before { display: none; }
  body.duo .dt.pc:not(.up) col.c-box { width: 10%; } body.duo .dt.pc:not(.up) col.c-kg { width: 14%; } body.duo .dt.pc:not(.up) col.c-ty { width: 13.5%; } body.duo .dt.pc:not(.up) col.c-bl { width: 19.5%; }
}
/* 2026-10-29 전체 점검: 폰 재고 · 단가표 · 스케쥴 */
.prow :is(.pn, .pnm) .bl { flex-wrap: wrap; row-gap: 4px; }   /* 단가표 줄: 브랜드 알약 · 원산지가 칸 안에서 눌려 '오스트리/아'(320px은 한 글자씩 세로로), 알약의 점만 윗줄에 남았다. 모자라면 원산지가 알약 밑으로 */
.prow :is(.pn, .pnm) :is(.brand, .origin) { white-space: nowrap; }
.prow .ptg .pct { word-break: keep-all; }   /* PC 스케쥴 목록: '200487(379733) (우산' 뒤에서 ')'만 다음 줄로 떨어졌다 */
@media (max-width: 374px) { body:not(.duo) .sumcard.flow #summary .fk { white-space: normal; } }   /* 360px(흔한 안드로이드 폭)에서도 '168,814박스 · 364건'이 '· 36…'으로 잘렸다: 359px 아래 규칙처럼 두 줄로 */
body:not(.duo) .mz .mzr.wk .mzm { padding: 0 7px; }   /* 냉장 주 알약 일곱 개(이번 주 · 11/5 …)가 390px에서 7px 넘쳐 끝 '그 뒤'가 잘렸다: 알약 안쪽 여백만 줄여 한 줄에 */
@media (max-width: 374px) { body:not(.duo) .mz .mzk { white-space: normal; } body:not(.duo) .mz .mzk span { overflow: visible; word-break: keep-all; } }   /* 320px: '(일부 = 앞 날짜만 지남)' 풀이가 '앞 날…'로 잘렸다 */
@container sumcard (max-width: 340px) { body:not(.duo) .mz .mzr.wk .mzm { padding: 0 4px; } }   /* 320px(글씨 11px): 주 알약은 더 좁게 (위 규칙이 좁은 카드의 6px을 덮지 않게) */
@media (max-width: 1099px) {   /* 품명이 섞인 카드(브랜드로만 묶기)는 품명 열을 두는 대신 칸 여백을 줄여 숫자 · B/L이 잘리지 않게 (1040px에서 B/L 2칸만 남음) */
  body.duo .dt.pc:not(.up):not(.it1) col.c-it { width: 8%; }
  body.duo .dt:not(.up):not(.it1) :is(td, th):not(:first-child):not(:last-child) { padding-inline: 3px; }
  body.duo .dt:not(.up):not(.it1) td.blc .l1 { letter-spacing: -0.02em; }
}
/* 폰 시장 카드 커버 플로우 (2026-10-30, 시안/폰시장커버플로우-시안 나 · 사용자: "좋아 일단 나로 진행해볼까?"): 첫 화면 큰 카드가 두 장 이상이고 동작 줄이기가 아닐 때 app.js가 #mkx에 cf를 붙이고
   넘긴 자리에 따라 카드마다 크기 · 기울기 · 흐림을 준다(mxFlow). 카드는 가운데 맞춤, 폭은 지금과 같다(지금: 판 안쪽 16px씩 − 46px = 화면 − 78px → 양옆 39px씩).
   카드의 z-index가 판 밖(붙박이 머리 등)과 섞이지 않게 판을 따로 쌓는다. --mxcf: 1은 app.js에 주는 신호다 */
:root { --mxcf: 1; }
#mkx.cf .mx-pg { padding-inline: 39px; scroll-padding: 0; isolation: isolate; }
#mkx.cf .mx-sl { flex: none; display: flex; width: 100%; scroll-snap-align: center; }   /* 멈출 자리는 이 칸 (같은 날: 사파리는 기울인 카드 모양으로 자리를 재 가운데에서 31px 어긋났다) */
#mkx.cf .mx-sl > .mx-c { width: 100%; scroll-snap-align: none; }   /* 카드에 맞춤이 남으면 그것도 맞춤 자리로 셈한다 */

/* ---- 판매 흐름 탭 (2026-10-31, 재고 변화 장부의 첫 화면: 시안/판매흐름-시안의 가 + 나의 주의 알약('판매 속도 느림'), 사용자 "1. 추천대로가고. 2. 보여주고. 3. 응. 좋아.")
   PC 두 판에서 (폰은 아래 --sfp, 2026-10-31; 알약 sfPill은 PC만). 이 변수가 없으면(옛 css) app.js가 탭 · 알약을 내지 않는다. 검색 카드 자리에 기간 · 묶음(#sfctl), 위 요약 자리는 숨기고 오른쪽 판에 큰 숫자 */
:root { --sfv: 1; }
body:not(.sflow) #sfctl { display: none; }
body.sflow .top > :not(#sfctl) { display: none; }
body.duo.sflow #dock { display: none; }
#sfctl { padding: 4px 6px 2px; }
.sf-ctl .sf-ttl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sf-ctl .sf-ttl b { font-size: 22px; font-weight: 600; letter-spacing: -0.045em; }
.sf-ctl .sf-ttl small { font-size: 12px; color: var(--muted); }
.sf-f { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.sf-f > span { flex: none; width: 30px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sf-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--track); }
.sf-seg button { padding: 6px 15px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.sf-seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); font-weight: 650; box-shadow: 0 1px 2px rgba(33, 12, 2, 0.12); }
.sf-seg button:focus-visible, .sf-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-chips .chip { height: 32px; padding: 0 13px; font-size: 13px; }
/* 왼쪽 목록: 톤 많은 차례의 묶음 줄 (8주 막대 · 몇 주치 · 속도 느린 건) */
#list > .sf-li { list-style: none; }
#list > .sf-lh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 10px; font-size: 13px; color: var(--muted); }
#list > .sf-lh b { margin-right: 2px; font-weight: 700; color: var(--fg); }
#list > .sf-lh i { margin: 0 5px; font-style: normal; }
#list > .sf-lh small { font-size: 12.5px; }
#list > .sf-wait p { margin: 0; padding: 24px 18px; font-size: 14px; color: var(--muted); }
.sf-row { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 84px auto; align-items: center; gap: 10px; width: 100%; padding: 12px 18px 15px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sf-row:hover { background: color-mix(in srgb, var(--fg) 3%, var(--surface)); }
.sf-row[aria-pressed="true"] { background: color-mix(in srgb, var(--fg) 6%, var(--surface)); }
.sf-row .rk { font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }
.sf-row .nm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.sf-row .nm > b { font-size: 16px; font-weight: 650; letter-spacing: -0.03em; }
.sf-row .nm small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.sf-row .nm small em { font-style: normal; font-weight: 650; color: var(--warn-t); }
.sf-row .v { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 74px; }
.sf-row .v b { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.sf-row .v b small, .sf-br > b small { margin-left: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.sf-row .v em { font-style: normal; font-size: 12px; color: var(--muted); }
.sf-row > .sf-sh { position: absolute; left: 50px; right: 18px; bottom: 6px; height: 3px; background: transparent; }
.sf-row > .sf-sh > i { background: color-mix(in srgb, var(--fg) 28%, transparent); }
/* 막대 · 몫 띠 */
.sf-bars { display: flex; align-items: flex-end; gap: 4px; height: var(--h); }
.sf-bars > span { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; min-width: 0; height: 100%; }
.sf-bars i { display: block; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--fg) 22%, var(--track)); }
.sf-bars.lab { height: calc(var(--h) + 18px); }
.sf-bars.lab > span { padding-bottom: 18px; }
.sf-bars small { position: absolute; right: 0; bottom: 0; left: 0; font-size: 10.5px; color: var(--muted); text-align: center; white-space: nowrap; }
.sf-bars .now small { font-weight: 650; color: var(--fg); }
.sf-sh { display: block; height: 6px; overflow: hidden; border-radius: 99px; background: var(--track); }
.sf-sh > i { display: block; height: 100%; border-radius: 99px; background: color-mix(in srgb, var(--fg) 70%, transparent); }
/* 오른쪽 판: 큰 숫자 카드 + 고른 줄의 카드 */
#pbody > .sf-pane { display: flex; flex-direction: column; gap: 20px; padding-bottom: 28px; }
body.duo #pbody > .sf-pane > .dcard { min-height: 0; }
body.duo #pbody > .sf-pane > .sf-card { flex: 1 0 auto; }
.sf-sumc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); align-items: center; gap: 26px; padding: 20px 24px; }
.sf-kpi { display: grid; grid-template-columns: 1.3fr 1fr 1fr; }
.sf-kpi > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 18px; border-left: 1px solid var(--line); }
.sf-kpi > div:first-child { padding-left: 2px; border-left: 0; }
.sf-kpi small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sf-kpi span { font-size: 12px; color: var(--muted); word-break: keep-all; }   /* 설명은 칸 안에서 줄을 바꾼다 ('지금 속도면 유통기한에 n박스 남음'이 주마다 막대에 닿았다) */
.sf-kpi b { font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.04em; }
.sf-kpi .k1 b { font-size: 34px; letter-spacing: -0.05em; }
.sf-kpi b em { margin-left: 2px; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.sf-kpi b.up { color: var(--ok-t); }
.sf-kpi b.dn { color: var(--warn-t); }
.sf-kpi b.up em, .sf-kpi b.dn em { color: inherit; }
.sf-wk > small { display: block; margin-bottom: 6px; font-size: 12px; color: var(--muted); }
@media (max-width: 1279px) { .sf-sumc { grid-template-columns: minmax(0, 1fr); gap: 18px; } }   /* 좁은 PC: 주마다 막대를 큰 숫자 밑으로 */
.sf-card .dhead { padding-bottom: 4px; }
.sf-card .dttl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.sf-card .sf-sub { font-size: 13.5px; color: var(--muted); }
.sf-body { padding: 0 26px 26px; }
.sf-h { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 10px; font-size: 15px; font-weight: 650; letter-spacing: -0.02em; }
.sf-h small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.sf-h b { font-weight: 700; color: var(--warn-t); }
.sf-br { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 78px 84px; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.sf-br > b { font-size: 15px; font-weight: 700; text-align: right; }
.sf-br > b.nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; text-align: left; }
.sf-br > span:last-child { color: var(--muted); text-align: right; white-space: nowrap; }
.sf-rr { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 2px; border-top: 1px solid var(--line); }
.sf-rr .m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-rr .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.sf-rr .nm b { font-weight: 650; }
.sf-rr .sub { font-size: 12.5px; color: var(--muted); }
.sf-rr .r { text-align: right; white-space: nowrap; color: var(--warn-t); }
.sf-rr .r b { font-size: 17px; font-weight: 700; }
.sf-rr .r small { display: block; font-size: 11.5px; font-weight: 600; }
.sf-nil, .sf-more { margin: 0; font-size: 13px; color: var(--muted); }
.sf-more { padding: 10px 2px 0; border-top: 1px solid var(--line); }
/* 재고 탭 주의 알약 '판매 속도 느림': 다른 주의 알약처럼 호박색 점 (빨강 --cta는 만들기 단추에만; 판정이 아니라 챙겨 볼 표시라서, 사용자 2026-10-31 "못판다고 표현하면 안되는게…") */
body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip[data-status="unsold"] > span::before { background: var(--warn); }
/* 판매 탭이 들면 탭 너비를 한 단계씩 낮춘다 (탭 수에 따른 84 · 66 · 56 · 50px 단계, 좁은 폭은 그 아래): 환율 알약이 눌리지 않게
   (독립 검토: 1040px 재고 탭에서 넷째 탭이 늘며 환율 글이 'U…'까지 줄었다) */
body.duo .cols .head > #modes .seg:has([data-view="sflow"]) { --tw: 66px; }
@media (max-width: 1279px) { body.duo .cols .head > #modes .seg:has([data-view="sflow"]) { --tw: 56px; } }
@media (max-width: 1179px) { body.duo .cols .head > #modes .seg:has([data-view="sflow"]) { --tw: 48px; } }
body.duo .cols .head > #modes .seg:has([data-view="sflow"]):has([data-view="market"]) { --tw: 56px; }
@media (max-width: 1279px) { body.duo .cols .head > #modes .seg:has([data-view="sflow"]):has([data-view="market"]) { --tw: 50px; } }
@media (max-width: 1179px) { body.duo .cols .head > #modes .seg:has([data-view="sflow"]):has([data-view="market"]) { --tw: 44px; } }
body.duo .cols .head > #modes .seg:has([data-view="sflow"]):has([data-view="news"]) { --tw: 50px; }
@media (max-width: 1279px) { body.duo .cols .head > #modes .seg:has([data-view="sflow"]):has([data-view="news"]) { --tw: 42px; } }
@media (max-width: 1179px) { body.duo .cols .head > #modes .seg:has([data-view="sflow"]):has([data-view="news"]) { --tw: 37px; } }
body.duo .cols .head > #modes .seg:has([data-view="sflow"]):has([data-view="iq"]) { --tw: 44px; }
@media (max-width: 1279px) { body.duo .cols .head > #modes .seg:has([data-view="sflow"]):has([data-view="iq"]) { --tw: 38px; } }
@media (max-width: 1179px) { body.duo .cols .head > #modes .seg:has([data-view="sflow"]):has([data-view="iq"]) { --tw: 33px; } }

/* 판매 탭 카드의 재고 추이 · 들어옴/나감 그림 (2026-10-31, 사용자 "가 로가자"; 시안/창고추이-시안.cjs의 .sw-svg): 폭은 app.js가 칸에 맞춰 그리고(sfW), 창이 바뀌면 칸을 따라 늘고 준다 */
.sf-svg { display: block; width: 100%; height: auto; }
.sf-svg .ax { font-size: 10.5px; fill: var(--muted); }
.sf-svg .ax.now { font-weight: 650; }
.sf-tl, .sf-io { margin-top: 2px; }

/* 월마다 재고 수지 카드 (2026-10-31, 시안 가): 판매 탭 요약 카드 밑. 표는 수입 통계의 표처럼 오른쪽 맞춤 숫자, 첫 칸만 왼쪽 */
body.duo #pbody > .sf-pane > .sf-mo { flex: none; }
.sf-mo .dhead { padding-bottom: 2px; }
.sf-mo .dttl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.sf-mo .dttl h2 { font-size: 22px; }
.sf-mo .sf-sub { font-size: 13.5px; color: var(--muted); }
.sf-mtw { overflow-x: auto; }
.sf-mo .sf-body { padding-top: 6px; }
.sf-mt { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
.sf-mt th { padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; }
.sf-mt td { padding: 10px 8px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.sf-mt th:first-child, .sf-mt td:first-child { text-align: left; }
.sf-mt td b { font-weight: 700; }
.sf-mt td small { font-size: 11.5px; color: var(--muted); }
.sf-mt td small.est { padding: 1px 6px; border: 1px dashed var(--edge); border-radius: 999px; }
.sf-mt td.up { color: var(--ok-t); }
.sf-mt td.dn { color: var(--warn-t); }
.sf-mt td.mu { color: var(--muted); }
.sf-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* 판매 탭 목록의 '판매 없음' · '소진' 갈래 (2026-10-31, 사용자 "한번이라도 팔린 기록이 남아있다면 보여줘야지."): 갈래 제목은 가름선으로 나누고, 소진의 0톤은 흐리게 */
#list > .sf-lh2 { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line2); }
.sf-row .v b.nil { color: var(--muted); }

/* 그래프 단위 (2026-10-31, 시안 가 · 사용자 "오케이 추천대로 진행하자."): 단위째 쓰는 마지막 값은 굵게, 요약 카드 주마다 막대 위 숫자, 달 끝 재고 그림의 이름 */
:root { --sfu: 1; }   /* app.js가 이 값이 있을 때만 요약 카드 막대 위 숫자를 낸다 (옛 css와 짝이 맞지 않을 때 겹치지 않게) */
.sf-svg .ax.val { font-size: 12.5px; font-weight: 700; fill: var(--fg); }
.sf-bars.lab.cap { height: calc(var(--h) + 36px); }
.sf-bars.cap > span { justify-content: flex-end; }
.sf-bars.cap em { display: block; height: 15px; margin-bottom: 3px; font-style: normal; font-size: 11px; color: var(--muted); text-align: center; white-space: nowrap; }
.sf-bars.cap .now em { font-weight: 700; color: var(--fg); }
.sf-cap { margin: 16px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); }

/* 폰 판매 탭 (2026-10-31, 시안/폰판매-시안-비교.png 가 · 사용자 "좋아 추천대로 가로 진행해보자."): app.js는 이 값이 있을 때만 폰에 '판매' 탭을 낸다.
   #list 안에 요약 카드(.sf-pk, 베이지) · 월마다 재고 수지(.sf-pm, 표는 접음) · 목록 카드(.sf-pl, 펼친 줄 .sf-pop) */
:root { --sfp: 1; }
body.sflow:not(.duo) #list { gap: 14px; }
body.sflow:not(.duo) .top { position: static; }   /* 기간 · 묶음은 내려가며 바꿀 일이 드물다: 붙여 두면 폰 화면의 6분의 1을 가렸다 (재고 탭의 검색 카드는 그대로 붙는다) */
#list > .sf-pk .sf-sumc { gap: 16px; padding: 18px 18px 16px; border-radius: 26px; background: var(--sum); }
#list > .sf-pk .sf-kpi { grid-template-columns: 1fr 1fr; row-gap: 14px; }
#list > .sf-pk .sf-kpi > div { padding: 0 14px; }
#list > .sf-pk .sf-kpi > .k1 { grid-column: 1 / -1; padding-left: 2px; border-left: 0; }
#list > .sf-pk .sf-kpi > div:nth-child(2) { padding-left: 2px; border-left: 0; }
#list > .sf-pk .sf-kpi small { white-space: normal; }
#list > .sf-pm .sf-mo, #list > .sf-pl { overflow: hidden; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--edge); }
#list > .sf-pm .dhead { padding: 18px 16px 2px; }
#list > .sf-pm .dttl h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.04em; }
#list > .sf-pm .sf-sub { font-size: 12.5px; color: var(--muted); }
#list > .sf-pm .sf-body { padding: 4px 16px 14px; }
.sf-mtd > summary { margin-top: 8px; padding: 10px 0 2px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; list-style: none; cursor: pointer; }
.sf-mtd > summary::-webkit-details-marker { display: none; }
.sf-mtd[open] > summary { color: var(--fg); }
.sf-pul { margin: 0; padding: 0; list-style: none; }
.sf-pul > li { list-style: none; }
.sf-pul > .sf-lh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 10px; font-size: 12.5px; color: var(--muted); }
.sf-pul > .sf-lh b { margin-right: 2px; font-weight: 700; color: var(--fg); }
.sf-pul > .sf-lh i { margin: 0 4px; font-style: normal; }
.sf-pul > .sf-lh small { font-size: 12px; }
.sf-pul > .sf-lh2 { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line2); }
.sf-pul > .sf-wait p { margin: 0; padding: 18px 14px; font-size: 14px; color: var(--muted); }
.sf-pul .sf-row { grid-template-columns: 18px minmax(0, 1fr) 56px auto; gap: 8px; padding: 11px 14px 14px; }
.sf-pul .sf-row .nm > b { font-size: 15px; }
.sf-pul .sf-row .v { min-width: 62px; }
.sf-pul .sf-row .v b { font-size: 16px; }
.sf-pul .sf-row > .sf-sh { left: 40px; right: 14px; }
.sf-pul .sf-row .sf-bars { gap: 2px; }
.sf-pul > .sf-pop { padding: 0 16px 16px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 3%, var(--surface)); }
.sf-pop .sf-card { background: none; box-shadow: none; }
.sf-pop .dhead { padding: 10px 0 0; }
.sf-pop .dttl h2 { display: none; }
.sf-pop .sf-sub { font-size: 12.5px; color: var(--muted); }
.sf-pop .sf-body { padding: 0; }
.sf-pop .sf-h { flex-wrap: wrap; margin: 16px 0 8px; font-size: 14px; }
.sf-pop .sf-br { grid-template-columns: minmax(0, 36%) minmax(0, 1fr) 56px; gap: 10px; }   /* 첫 칸은 55%까지: 긴 품명이 톤 값을 밀어냈다 (독립 검토) */
.sf-pop .sf-br > span:last-child { display: none; }
.sf-pop .sf-br .dpill { white-space: nowrap; }
.sf-pop .sf-rr .r small { font-size: 10.5px; }
@media (pointer: coarse) {   /* 폰 판매 탭의 기간 · 묶음: 보이는 모양은 그대로, 눌리는 자리만 44px쯤 (위 '눌리는 칸'과 같은 꼴) */
  body.sflow:not(.duo) .sf-seg button, body.sflow:not(.duo) .sf-chips .chip { position: relative; }
  body.sflow:not(.duo) .sf-seg button::after { content: ""; position: absolute; inset: -9px 0; }
  body.sflow:not(.duo) .sf-chips .chip::after { content: ""; position: absolute; inset: -6px -3px; }
}

/* 판매 탭의 'BETA' (2026-10-31, 사용자 "판매 버튼 아래에 작게 beta 라고 적어줘. 아직 한참 개발중이니깐." · "beta 대문자로."): 단추 높이는 그대로, 글을 조금 올리고 밑에 작게.
   app.js는 이 값이 있을 때만 beta를 넣는다 */
:root { --sfb: 1; --sfd: 1; }
#modes .seg button.bt > .bt-l { display: inline-block; transform: translateY(-4px); }
#modes .seg button.bt > .beta { position: absolute; right: 0; bottom: 3px; left: 0; font-size: 8px; font-weight: 650; line-height: 1; letter-spacing: 0.08em; color: var(--muted); text-align: center; pointer-events: none; }
#modes .seg button.bt[aria-pressed="true"] > .beta { color: var(--warn-t); }

/* 일별 판매 달력 카드 (2026-10-31, 하루 판매 실적 시안 다 · 사용자 "다 좋아. 매일보다는 일별 판매가 낫지 않나??"): app.js는 --sfd가 있을 때만 카드를 낸다.
   칸의 진하기 = 그날 판매(평일 가장 많은 날 기준, 한 빛깔),
   진한 칸은 밝은 글자, 오늘 호박색 테두리, 고른 날 짙은 테두리, 어림(옮겨 담은 이력의 날)은 점선. PC는 달력 | 그날 목록, 좁은 PC · 폰은 위아래 */
.sf-dc .dhead { padding-bottom: 2px; }
.sf-dc .dttl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.sf-dc .dttl h2 { font-size: 22px; }
.sf-dc .sf-sub { font-size: 13.5px; color: var(--muted); }
.sf-dcb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 28px; padding-top: 10px; }
@media (max-width: 1279px) { .sf-dcb { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.sf-dch, .sf-dcg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sf-dch span { padding-bottom: 4px; font-size: 11.5px; color: var(--muted); text-align: center; }
.sf-dcc { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; height: 54px; padding: 6px 7px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--fg) calc(var(--a, 0) * 100%), var(--surface)); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); font: inherit; text-align: left; }
button.sf-dcc { cursor: pointer; }
.sf-dcc i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.sf-dcc b { overflow: hidden; font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-dcc.dk i { color: color-mix(in srgb, var(--surface) 78%, transparent); }
.sf-dcc.dk b { color: var(--surface); }
.sf-dcc.we { background: var(--bg); box-shadow: none; }
.sf-dcc.we b { font-size: 11px; font-weight: 600; color: var(--muted); }
.sf-dcc.nil { background: none; }
.sf-dcc.nil b { font-weight: 500; color: var(--muted); }
.sf-dcc.pad, .sf-dcc.fut { background: none; box-shadow: none; }
.sf-dcc.est { box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--fg) 40%, transparent); outline-offset: -2px; }
.sf-dcc.today { box-shadow: inset 0 0 0 2px var(--warn-t); }
.sf-dcc.on { outline: 2.5px solid var(--fg); outline-offset: 1px; }
.sf-dcc.est.dk { outline-color: color-mix(in srgb, var(--surface) 70%, transparent); }
.sf-dcc:focus-visible { outline: 2px dashed var(--fg); outline-offset: 3px; }   /* 고른 날(곧은 테두리)과 다르게 (독립 검토: 두 날이 고른 것처럼 보였다) */
.sf-dc .sf-note { margin: 10px 0 0; }
.sf-dd > small { font-size: 12.5px; color: var(--muted); }
.sf-dd .big { display: block; font-size: 34px; font-weight: 600; line-height: 1.15; letter-spacing: -0.05em; }
.sf-dd .big em { margin-left: 2px; font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.sf-dd > span { display: block; font-size: 12.5px; color: var(--muted); }
.sf-dd > span em { font-style: normal; font-weight: 650; }
.sf-dd .up { color: var(--ok-t); }
.sf-dd .dn { color: var(--warn-t); }
.sf-dd .sf-h { margin-top: 18px; }
.sf-dd .sf-br { grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) 60px 70px; gap: 10px; }   /* 오른쪽 칸이 좁아 막대가 짧았다 */
#list > .sf-pd .sf-dc { overflow: hidden; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--edge); }
#list > .sf-pd .dhead { padding: 18px 16px 2px; }
#list > .sf-pd .dttl h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.04em; }
#list > .sf-pd .sf-sub { font-size: 12.5px; }
#list > .sf-pd .sf-body { padding: 4px 16px 16px; }
#list > .sf-pd .sf-dch, #list > .sf-pd .sf-dcg { gap: 3px; }
#list > .sf-pd .sf-dcc { height: 46px; padding: 5px; border-radius: 8px; }
#list > .sf-pd .sf-dcc b { font-size: 12.5px; }
#list > .sf-pd .sf-br { grid-template-columns: minmax(0, 34%) minmax(0, 1fr) 52px 58px; gap: 8px; }   /* 이름 칸 폭을 줄마다 같게: 막대 시작 · 길이를 견줄 수 있게 (fit-content는 줄마다 달랐다, 독립 검토) */
#list > .sf-pd .sf-br .dpill, .sf-pop .sf-br .dpill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* 폰 카드 입체감 (2026-10-31, 시안/폰카드그림자-시안 가3; 사용자 "가3 으로 진행하고 스케쥴, 단가표, 판매 에도 통일된 느낌으로 적용해주자."):
   펼친 내용 카드(흰 카드)는 1px 먹색 16% 테두리 + 바탕에서 옅게 뜬 그림자. 요약 카드(베이지) · 재고 탭의 접힌 묶음 카드는 납작한 그대로.
   카드의 그림자는 카드 전체가 뜨는 말씨라, 카드 안 창고 재고 상자의 밑 띠(판매 가능의 상징)와 겹치지 않는다. PC(body.duo)는 그대로.
   테두리 색 #dbd6d1 = 흰 카드(--surface) 위 먹색 16%를 불투명하게: 바깥 고리로 그리는 카드도 같은 색으로 보이게(반투명 고리는 크림 바탕 · 그림자 위에 겹쳐 2.5배 짙었다, 독립 검토),
   color-mix를 쓰지 않는 것은 그것을 모르는 옛 iOS에서 var()가 무효가 되면 테두리가 글자색(짙은 먹색)으로 떨어지기 때문 */
body:not(.duo) { --cardedge: #dbd6d1; --cardlift: 0 2px 6px rgba(33, 12, 2, 0.05), 0 18px 36px -14px rgba(33, 12, 2, 0.32); }
body:not(.duo) #list > li.group:not(.closed):not(.skel), body:not(.duo) #list > li.mag { border-color: var(--cardedge); box-shadow: var(--cardlift); }   /* 재고 · 스케쥴 목록 · 단가표 묶음 카드, 스케쥴 일정 카드: 원래 1px 투명 테두리라 자리 그대로. 불러오는 동안의 빈 카드(skel)는 뺀다: body.duo가 첫 render()에서 붙어 PC도 그 전에는 여기에 걸렸다(독립 검토) */
body:not(.duo) #list > .sf-pd .sf-dc, body:not(.duo) #list > .sf-pm .sf-mo, body:not(.duo) #list > .sf-pl, body:not(.duo) #list > li.mpfull, body:not(.duo) #list > .sf-pk .sf-sumc { box-shadow: 0 0 0 1px var(--cardedge), var(--cardlift); }   /* 판매 요약 · 일별 · 월별 · 목록 카드, 단가표 미리보기: 테두리가 없어 바깥 1px 고리로(안쪽 폭 · 그림 폭 그대로) */
body:not(.duo) #list > .sf-pk .sf-sumc { background: var(--surface); }   /* 판매 요약 카드도 흰 면 (같은 날, 사용자 "이 부분 배경색 때문에 그런지 눈에 잘 안들어와" → 시안/판매요약카드-시안 "가 로 진행하자."): 크림 바탕 위 베이지는 경계가 거의 없었고, 아래 카드들이 떠오르며 혼자 가라앉아 보였다. 재고 · 스케쥴 요약 카드는 베이지 그대로 */
body:not(.duo) #list > li.group.plan:has(> .phd[aria-expanded="false"]) { border-color: var(--card-line); box-shadow: var(--shadow); }   /* 스케쥴 목록에서 '보기'로 접어 둔 구역(머리 줄만): 재고 탭의 접힌 카드처럼 납작. 냉장 B/L 카드는 접혀도 요약 · 단추가 있는 카드라 뜬다 */

/* 재고 분석 네 카드 (2026-10-31, 시안/재고분석-시안 가 · 사용자 "1. 가 2. 좋아. 3. 응 좋아."): 판매 탭 요약 카드 밑 ① 다음 입고 전 바닥 가능 ② 재고 나이 ③ 주문 모양 ④ 찾는데 없는 품목.
   PC는 판에 두 칸, 폰은 목록에 카드 넷(다른 판매 카드와 같은 흰 면 + 고리 + 뜬 그림자). 브랜드는 알약 대신 화면 글꼴 800 · 대문자 한 줄(사용자: "영문텍스트로 깔끔하고 큼직하게"), 밑에 품명 · 원산지.
   --sfi: 이 묶음이 있는 app.css에서만 app.js가 카드를 그린다 */
:root { --sfi: 1; }
#pbody > .sf-pane > .sf-ins { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; align-items: start; }
.sf-ic { padding: 18px 20px 14px; }
#list > .sf-pi .sf-ic { overflow: hidden; padding: 18px 16px 14px; border-radius: 22px; background: var(--surface); }
body:not(.duo) #list > .sf-pi .sf-ic { box-shadow: 0 0 0 1px var(--cardedge), var(--cardlift); }
.sf-ih h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.04em; }
.sf-ih p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); word-break: keep-all; }
.sf-irs { margin: 8px 0 0; padding: 0; list-style: none; }
.sf-ir { padding: 12px 0; border-top: 1px solid var(--line); }
.sf-ir:first-child { border-top: 0; }
.sf-it { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-inm { display: flex; flex-direction: column; min-width: 0; }
.sf-ib { font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg); overflow-wrap: anywhere; }
.sf-iq { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--fg); overflow-wrap: anywhere; }
.sf-ii { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--fg); word-break: keep-all; overflow-wrap: anywhere; }   /* 긴 품명(냉장카우보이립)은 좁은 폰에서 꺾인다: 숫자 칸을 덮었다 (독립 검토) */
.sf-ii i { margin-left: 2px; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--muted); }
@media (max-width: 360px) { .sf-ib { font-size: 18px; } }   /* 320px에서 CREEKSTONE이 글자 중간에서 꺾였다 */
.sf-iv { display: flex; flex: none; flex-direction: column; align-items: flex-end; text-align: right; }
.sf-iv b { font-size: 21px; font-weight: 650; line-height: 1.15; letter-spacing: -0.03em; }
.sf-iv b small { margin-left: 1px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.sf-iv b.warn { font-size: 17px; color: var(--warn-t); }
.sf-iv > small { font-size: 12px; color: var(--muted); }
.sf-ig { position: relative; height: 8px; margin-top: 10px; border-radius: 4px; background: var(--track); }
.sf-ig i { position: absolute; top: 0; bottom: 0; }
.sf-ig .have { left: 0; border-radius: 4px 0 0 4px; background: color-mix(in srgb, var(--fg) 70%, var(--surface)); }
.sf-ig .miss { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, color-mix(in srgb, var(--warn) 30%, var(--surface)) 3px 6px); }
.sf-ig .miss.open { -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.sf-ig .tick { top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--fg); }
.sf-in { margin: 7px 0 0; font-size: 12px; color: var(--muted); }
.sf-im { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.sf-if { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
.sf-if .k { display: inline-block; width: 14px; height: 6px; margin-right: 4px; border-radius: 2px; vertical-align: 1px; }
.sf-if .k.have { background: color-mix(in srgb, var(--fg) 70%, var(--surface)); }
.sf-if .k.miss { background: var(--warn); }
.sf-if .k.tick { width: 2px; height: 11px; background: var(--fg); }
.sf-ie { margin: 12px 0 2px; font-size: 13px; color: var(--muted); }
.sf-ia { display: flex; gap: 2px; height: 14px; margin-top: 14px; overflow: hidden; border-radius: 7px; background: var(--track); }
.sf-ia i { display: block; min-width: 2px; }
.sf-ia .a0, .sf-il .a0 { background: color-mix(in srgb, var(--fg) 14%, var(--track)); }
.sf-ia .a1, .sf-il .a1 { background: color-mix(in srgb, var(--fg) 32%, var(--track)); }
.sf-ia .a2, .sf-il .a2 { background: color-mix(in srgb, var(--fg) 50%, var(--track)); }
.sf-ia .a3, .sf-il .a3 { background: color-mix(in srgb, var(--fg) 70%, var(--track)); }
.sf-ia .a4, .sf-il .a4 { background: var(--fg); }
.sf-il { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.sf-il span { display: block; min-width: 0; }
.sf-il i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.sf-il b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; color: var(--fg); }
.sf-il b small { margin-left: 1px; font-size: 11px; font-weight: 600; color: var(--muted); }
.sf-ih3 { margin: 18px 0 0; font-size: 14px; font-weight: 650; }

/* 재고 탭 검색 결과의 브랜드: 알약(둥근 면 · 테두리 · 색 점) 대신 굵은 대문자 영문 글자 (2026-10-31, 사용자 "재고탭 검색 결과도 뱃지를 텍스트로 바꿔줘 동일하게." + 폰 묶음 카드의 '● EXCEL 미국' 갈무리 —
   판매 탭 재고 분석 카드(시안 가: 화면 글꼴 800 · 대문자)와 같은 글자). 재고 탭의 묶음 카드(폰 펼친 머리 20px · 접힌 줄 · 붙는 제목 줄 17px · 건 줄 · 나누기 구역 제목), PC 목록 줄 14px · 묶음 카드 머리 20px.
   마크업(brandTag)은 그대로라 옛 app.js와도 맞다. 단가표 · 스케쥴 · 판매 탭의 알약은 그대로 (스케쥴 · 단가표의 묶음 카드는 li.group.plan) */
#list > li.group:not(.plan) .bl .brand, #strip .bl .brand { padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 17px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg); }
#list > li.group:not(.plan) .bl .brand::before, #strip .bl .brand::before { content: none; }
#list > li.group:not(.plan) .ghead .bl .brand { font-size: 20px; }
#list > li.group:not(.plan) .lot .bl .brand { font-size: 13px; }
#list > li.group:not(.plan) :is(.sect, .dsec) .bl .brand { font-size: inherit; }
body.duo #list > li.group:not(.plan) .dline .bl .brand { font-size: 14px; }
body.duo:not(.plan):not(.price):not(.sflow):not(.market):not(.news):not(.iq) #pbody .bl .brand { padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: inherit; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg); }
body.duo:not(.plan):not(.price):not(.sflow):not(.market):not(.news):not(.iq) #pbody .bl .brand::before { content: none; }
body.duo:not(.plan):not(.price):not(.sflow):not(.market):not(.news):not(.iq) #pbody .dhead .bl .brand { font-size: 20px; }

/* 폰 판매 탭 접어 두기 (2026-10-31, 시안/판매구역-시안 나 · 사용자 "'판매' 이부분 스크롤이 너무 긴데 섹션을 나누는게 맞지 않나싶어." → "나로 진행하자."):
   요약 카드 밑 구역(재고 분석 넷 · 일별 · 월별 · 품목별)을 제목 · 핵심 숫자 한 줄(흰 면 + 고리 + 뜬 그림자)로 접어 두고, 누르면 그 줄 바로 밑에 그 카드. 품목 목록은 많이 판 10개 + 나머지 단추(.sf-lmore: 예전 '이 밖에 n건' p.sf-more와 다른 이름).
   --sff: 이 묶음이 있는 app.css에서만 app.js가 접는다 (옛 css면 예전처럼 다 펼친 꼴) */
:root { --sff: 1; }
#list > .sf-fo { list-style: none; }
.sf-fob { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; width: 100%; padding: 15px 16px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--cardedge), var(--cardlift); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-fob:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sf-fob .t { min-width: 0; }
.sf-fob .t b { display: block; font-size: 16px; font-weight: 650; letter-spacing: -0.03em; color: var(--fg); }
.sf-fob .t small { display: block; margin-top: 3px; overflow: hidden; font-size: 12.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.sf-fob .v { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; color: var(--fg); }
.sf-fob svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.sf-fo.on .sf-fob { background: #f6f3ef; background: color-mix(in srgb, var(--fg) 4%, var(--surface)); }   /* 앞의 것: color-mix를 모르는 옛 iOS(16.2 전) */
.sf-fo.on .sf-fob svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .sf-fob svg { transition: none; } }
#list > .sf-fo.on + li { margin-top: -6px; }   /* 펼친 카드는 제 줄에 붙여 (목록 사이 14px보다 가깝게) */
.sf-pul > li.sf-lmore { display: flex; justify-content: center; padding: 14px 0 18px; list-style: none; }
.sf-lmore button { all: unset; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: var(--surface); box-shadow: 0 2px 10px rgba(33, 12, 2, .16), inset 0 0 0 1px var(--edge); font-size: 13.5px; font-weight: 650; color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-lmore button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sf-lmore svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* 폰 판매 탭 '품목별 판매 · 재고' 두 칸 (2026-10-31, 시안/판매한눈-시안 나 · 사용자 "미착 중요하긴한데 더 중요한건 들어와 있는재고와 오늘 작업의 핵심은 어떤품목을 얼마만큼 일정기간 동안 팔았는가야.
   그걸 가장 한눈에 보기 쉽게 표현하는거지." → "추천대로 진행해줘."): 요약 카드 바로 밑 흰 카드(고리 + 뜬 그림자), 품목 한 줄 = 이름 | 기간 판매 막대 · 값 | 지금 창고 재고 막대 · 값.
   --sfbd: 이 묶음이 있는 app.css에서만 app.js가 판을 그린다 (없으면 접어 두기의 '품명별 판매' 줄) */
:root { --sfbd: 1; }
#list > .sf-pb { padding: 18px 16px 4px; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px var(--cardedge), var(--cardlift); list-style: none; }
.sf-bdt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.sf-bdt h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.035em; color: var(--fg); }
.sf-bdt p { margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.sf-bdr { all: unset; box-sizing: border-box; width: 100%; min-height: 40px; padding: 7px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-bdh, .sf-bdr { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 10px; }
.sf-bdh { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sf-bdl { margin: 0; padding: 0; list-style: none; }
.sf-bdl > li { list-style: none; }
.sf-bdl > li:not(:first-child) > .sf-bdr { border-top: 1px solid var(--line); }
.sf-bdr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.sf-bdr[aria-pressed="true"] .nm { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sf-bdr .nm { min-width: 0; font-size: 15px; font-weight: 650; line-height: 1.2; letter-spacing: -0.03em; color: var(--fg); overflow-wrap: anywhere; }
.sf-bdr .nm > b { font-weight: inherit; }   /* 품명 · 창고 이름은 예전 목록(.sf-row .nm > b)과 같은 650: 굵은 칸 안의 <b>에 '더 굵게'가 붙어 900으로 보였다 (사용자 "폰트가 뭐니??? 너무 안어울리는데???") */
.sf-bdr .nm > .sf-bdb { font-weight: 800; letter-spacing: -0.01em; }   /* 브랜드는 고른 꼴(굵은 대문자) 그대로 */
.sf-bdb { font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.sf-bdr .s, .sf-bdr .k { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; min-width: 0; }
.sf-bdr .bar { display: block; height: 10px; }
.sf-bdr .bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--fg); }
.sf-bdr .k .bar i { background: #cfc2b0; }
.sf-bdr .k.low .bar i { background: var(--warn); }
.sf-bdr .s > b, .sf-bdr .k > b { min-width: 44px; font-size: 14px; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap; color: var(--fg); }   /* 칸의 숫자만 (이름 칸의 굵은 글자에 걸렸다) */
.sf-bdr .s > b small, .sf-bdr .k > b small { margin-left: 1px; font-size: 11.5px; font-weight: 650; }
.sf-bdr .k > b { font-weight: 600; color: var(--muted); }
.sf-bdr .k.low > b { font-weight: 700; color: var(--warn-t); }   /* 글자는 진한 호박색 (--warn은 흰 면에서 3.3:1, 독립 검토) */
.sf-bdr .s > b.nil, .sf-bdr .k > b.nil { font-weight: 500; color: var(--muted); }
.sf-bdr .k em { grid-column: 1 / -1; font-size: 12.5px; font-style: normal; line-height: 1.3; color: var(--muted); }
.sf-bdr .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-bdl > li.sf-bdx { padding: 16px 0 6px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.sf-bdx b { color: var(--fg); }
.sf-bdx i { margin: 0 5px; font-style: normal; }
.sf-bdx + li > .sf-bdr { border-top: 0 !important; }
.sf-bdl > li.sf-lmore { display: flex; justify-content: center; padding: 12px 0 6px; }
.sf-bdl > .sf-wait p { margin: 0; padding: 14px 0; font-size: 14px; color: var(--muted); }
.sf-bdl > .sf-pop { margin: 0 -16px; padding: 0 16px 16px; border-top: 1px solid var(--line); background: #f8f6f2; background: color-mix(in srgb, var(--fg) 3%, var(--surface)); }   /* 앞의 것: color-mix를 모르는 옛 iOS */
.sf-bdn { margin: 6px 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
@media (max-width: 360px) {
  .sf-bdh, .sf-bdr { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; }
  .sf-bdr .nm { font-size: 14px; }
  .sf-bdb { font-size: 11.5px; }   /* CREEKSTONE · WOODWARD가 한 줄에 (12.5px · 78px에서 낱말 가운데가 끊겼다, 독립 검토) */
  .sf-bdr .s > b, .sf-bdr .k > b { min-width: 38px; font-size: 13px; }
}

/* 일별 판매: 묶음을 바꿔 새 자료를 받는 동안(.sf-dd.stale) 묶음에 딸린 목록은 자리만 지키며 숨긴다 — 카드가 빠졌다 다시 끼어들어 밑의 판이 오르내리지 않게 (2026-10-31, 일별 판매 기본 펼침) */
.sf-dd.stale .sf-h, .sf-dd.stale .sf-br, .sf-dd.stale > .sf-nil { visibility: hidden; }

/* ==== 포인트 색: 와인 (2026-10-31) ====
   사용자: "전체적으로 봤을 때 포인트 컬러가 없는것 같아. 흑백처럼 보이는데... 추천좀해줄래??? 시안 보여주고." → 시안/포인트컬러-시안(초록 · 남색 · 구리) →
   "다른 고급스러운 색 추천해줘." → 시안/포인트컬러-시안2(와인 · 레이싱 그린 · 페트롤 · 자두) → "와인색으로 가자.".
   흑백으로 보였던 까닭은 켜진 것(--press)이 글자와 같은 에스프레소였기 때문이다. 이제 --press(맨 위 :root)가 와인이고, 이 구역은 --press 대신 먹색을 직접 적어 둔
   '켜진 것 · 지금 · 검색' 규칙을 와인으로 맞춘다(같은 꼴의 칩 · 알약 · 고른 줄은 모두 같은 색).
   그대로 둔 것: 숫자 · 글자 · 표 먹선(먹색), 표 생성 · 단가표 생성의 빨강(--cta), 경고 호박, 임박 짙은 빨강, 창고 재고 상자의 그림자, 진행 단계 점(.dsp), 엑셀 모드(#meet).
   켜진 것의 색은 이 구역에 모은다: 색 이름은 맨 위 :root의 '상태 색 이름'(--press · --sel-bg · --pick · --pick-lot · --now-ring · --press-hover). 새 켜짐 꼴도 여기에 --press로 쓴다.
   하는 일 단추(떠 있는 간략보고 · 판매보고(.bfab), 선택 막대의 주 단추, 유니패스 · 단가 고치기 · 관리자 단추, AI 점검 '나쁨')는 켜진 것이 아니라 --act(먹색)를 제자리 규칙에 쓴다
   (2026-10-31 추천 9로, 이 단추들의 --press를 먹색으로 덮어쓰던 줄을 걷었다). --press를 쓰지 않는 '… 펼치기'(#list .gpkbtn) · 전체 품목 보기(#allv) 알약도 먹색 그대로. */

/* 종류(냉동 · 냉장 · 동결): PC도 폰처럼 켜진 알약을 와인 면으로 (폰은 --press 그대로). 10-22에 탭과 같은 귀리색 트랙 + 흰 알약으로 했던 것을 시안대로 바꿈 */
body.duo #hacts .kseg button[aria-pressed="true"] { background: var(--press); color: var(--on-press); box-shadow: none; }

/* 탭(재고 · 스케쥴 · 단가표 · 판매)과 구간 단추(목록 | 미리보기, 일정 | 목록, 기간, kg | 박스 …): 흰 알약은 그대로, 켜진 글자만 와인 */
body:not(.gridview) .cols .head > #modes .seg button[aria-pressed="true"], body.duo .cols .head > #modes .seg button[aria-pressed="true"], #modes .seg button.bt[aria-pressed="true"] > .beta,
.mpseg .seg2 button[aria-pressed="true"], .sf-seg button[aria-pressed="true"], #mkt .mk-seg button[aria-pressed="true"], .rtseg button[aria-pressed="true"], #ssheet .sx-seg button[aria-pressed="true"],
.iq-mode button[aria-pressed="true"], .iqt-seg button[aria-pressed="true"], .tc-seg button[aria-pressed="true"], #plsheet .pl-unit button[aria-pressed="true"], .admin-tabs a[aria-selected="true"] { color: var(--press); }

/* 검색: 단추 면과 검색창 테두리 (먹색 2px이던 것). PC 검색창은 열자마자 초점이 있어 .search.go #q:focus-visible(옅은 --edge)이 2px 테를 덮고 있었다:
   폰(초점에도 진한 테)처럼 초점에도 와인 테로 — 시안의 PC 첫 화면 그대로 */
.qgo, body.duo .top .qgo { background: var(--press); }
.qgo:hover { background: var(--press-hover); }
@media (hover: hover) { body.duo .top .qgo:hover { background: var(--press-hover); } }
body.duo .top #q, body.duo .top .search.go #q:not(:placeholder-shown), body.duo .top .search.go #q:focus-visible,
body:not(.duo) .search.go #q, body:not(.duo) .search.go #q:focus-visible, body:not(.duo) .search.go #q:not(:placeholder-shown) { border-color: var(--press); }

/* '지금': 폰 달 넘기기의 알약, PC 시간줄의 '지금' 칸 머리(.hzm의 먹색 안쪽 테는 와인 면 위에 드러나니 뺀다) */
body:not(.duo) .mz .mzm.sel { background: var(--press); box-shadow: 0 0 0 3px var(--now-ring); }
body:not(.duo) .mz .mzm.sel::after { border-top-color: var(--press); }
body.duo .sumcard.hz .hzc.now .hzm { background: var(--press); box-shadow: none; }

/* 켜고 끄는 칩(흰 면 · 진한 테): 켠 칩의 테와 글자를 와인으로 — 필터 판 · 묶기/정렬 판 · 표 생성 판 · 판매 탭 묶음 · 나누기 · 손익 '전량' · 유니패스 화물 고르기 */
.chip[aria-pressed="true"]:not(.gsel, .selall, .selbtn, [data-ginc], [data-gdone]) { border-color: var(--press); color: var(--press); }
#tsheet .chip[data-tg][aria-pressed="true"], #gpanel .chip[data-tg][aria-pressed="true"] { border-color: var(--press); color: var(--press); }
.pchg button[aria-pressed="true"] { background: var(--press); }   /* 단가표 '바뀐 것만 보기': 켜지면 채우는 칩 */
.fbar .drop.on[aria-expanded="true"] { border-color: var(--press); }   /* 폰: 고른 것이 있는 드롭다운의 판이 열려 있을 때 와인 면에 먹색 테가 비치지 않게 */
body.duo .djump .dsplit button[aria-pressed="true"], body:not(.duo) .gsplit button[aria-pressed="true"], #plsheet .pl-all[aria-pressed="true"] { border-color: var(--press); box-shadow: inset 0 0 0 0.5px var(--press); color: var(--press); }
.cgpick button[aria-current="true"] { box-shadow: inset 0 0 0 1.5px var(--press); }

/* 고른 줄: 옅은 와인 면 (PC 목록 · 묶음 카드의 상세를 연 건 · 판매 · 뉴스 1면 · 수입 통계 나라 표), 왼쪽 막대가 있는 줄(단가표 · 시장 흐름 · 뉴스)은 막대도 와인,
   판매 판의 고른 줄은 품명 밑줄을 와인으로 */
body.duo #list > .group.duo.dsel, .sf-row[aria-pressed="true"], body.duo .nwa-row[aria-pressed="true"], body.duo .dt tr.on td, .iq-tb tr.on :is(th, td) { background: var(--sel-bg); }
@media (hover: hover) { body.duo #list > .group.duo.dsel:hover { background: var(--sel-bg); } }
body.market .mkrow[aria-pressed="true"], .nwr[aria-pressed="true"], body.duo.price #list .lots > li.pvsel { background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--press); }
.sf-bdr[aria-pressed="true"] .nm { text-decoration-color: var(--press); }

/* 선택 모드에서 고른 건 · 판매보고에서 고른 건: 옅은 와인 면 + 와인 동그라미 · ✓ (판매보고 건의 박스 수는 숫자라 먹색 그대로) */
.selecting .lot[aria-pressed="true"] { background: var(--pick-lot); }
.selecting .lot[aria-pressed="true"]::before { border-color: var(--press); background-color: var(--press); }
body.duo.selecting .dt tr.drow[aria-pressed="true"] td, body.duo.selecting .dt tr.drow[aria-pressed="true"] + tr.dnote td { background: var(--pick); }
body.duo.selecting .dt tr.drow[aria-pressed="true"] td:first-child .l1::before { color: var(--press); }
#ssheet .sx-lot.on .ck { background: var(--press); border-color: var(--press); }

/* 눌린 주의 · 어제 이후 알약(거르는 중): 와인 면 */
body.duo:not(.plan) .sumcard.hz.tl :is(#alerts .achips > .achip, #changes .row > .alert.chg)[aria-pressed="true"] { border-color: var(--press); background: var(--press); }
body:not(.duo) .sumcard.wc #alerts .achips > .achip[aria-pressed="true"], body:not(.duo) .sumcard.wc #changes .row > .alert.chg[aria-pressed="true"] { background: var(--press); }

/* 지금 · 이번 주 · 고른 것: 판매 탭 이번 주 막대 · 그래프 축의 '지금', 시장 흐름 막대의 마지막 달 · 폰 시장 카드 넘김 점, 스케쥴 '이번 주' 역, 판매 달력의 고른 날, 수입 통계의 고른 나라 카드 */
.sf-bars .now i { background: var(--press); }
.sf-bars .now small, .sf-bars.cap .now em { color: var(--press); }
.sf-svg .ax.now { fill: var(--press); }
.mkbars path.on, #mkx .mxb rect.on { fill: var(--press); }
#mkx .mx-dots i.on { background: var(--press); }
body.duo.plan .sumcard.route .rst.now .dot { background: var(--press); box-shadow: 0 0 0 4px var(--now-ring); }
body.plan:not(.duo) #summary > .pf .now .fi { background: var(--press); box-shadow: 0 0 0 4px var(--now-ring); }
.sf-dcc.on { outline-color: var(--press); }
button.iq-card.on { box-shadow: inset 0 0 0 2px var(--press); }

/* ==== 관리자 사용량 탭 '화면 오류' (2026-11-01, 추천 3, admin.php #sec-errs · lib.php err_*): 오류마다 문구 · 자리 · 횟수 · 기기를 한 덩어리로, 스택은 접어 둔다.
   문구 · 스택은 직원 화면이 보낸 글이라 admin.php가 h()로 글자 그대로 넣는다. '확인함 · 목록 비우기'는 하는 일 단추라 먹색(--act) 테 */
.uerrs .usage-head form { margin: 0; }
.uerrs .uerr-clear { min-height: 32px; padding: 0 12px; border: 1px solid var(--act); border-radius: 999px; background: var(--surface); color: var(--act); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.uerrs .uerr-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.uerrs .uerr-note { margin: 8px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.uerrs .uerr-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.uerrs .uerr-list > li { min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--ctl); }
.uerrs .uerr-m b { font-weight: 650; overflow-wrap: anywhere; }
.uerrs .uerr-u { color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }   /* 보낸 쪽이 적은 글 · 확인 안 됨 (2026-11-01 독립 검토) */
.uerrs .uerr-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.uerrs .uerr-st summary { margin-top: 6px; color: var(--muted); font-size: 12px; cursor: pointer; }
.uerrs .uerr-st pre { margin: 6px 0 0; padding: 8px 10px; overflow-x: auto; border-radius: 8px; background: var(--surface); font: 11px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ==== 경고 정리 · 빨강 정리 · 이번에 바뀐 것 (2026-11-01, 시안/경고-시안 나 · 빨강정리-시안 다 · 새기능알림-시안 나 — 사용자 "추천대로") ==== */
:root { --tidy: 1; --wn: 1; }   /* app.js가 읽는 스위치: --tidy 선적 예정 달 규칙 + '엑셀 정리 필요' 줄 (tidyOn), --wn 이번에 바뀐 것 카드 (wnOn). 옛 app.css면 둘 다 예전 그대로 */

/* 엑셀 정리 필요: 주의 칸 밑 조용한 한 줄 (app.js renderAlerts의 .atidy). 경고가 아니라 엑셀을 고칠 거리라 호박색 · 알약이 아닌 흐린 글자, 누르면 그 건만 거른다 */
#alerts .atidy { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: baseline; gap: 7px; min-width: 0; color: #8a7a6a; font-size: 12.5px; line-height: 1.4; letter-spacing: -0.01em; cursor: pointer; }
#alerts .atidy b { flex: none; font-weight: 650; color: var(--muted); }
#alerts .atidy span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#alerts .atidy i { flex: none; margin-left: auto; font-style: normal; font-size: 15px; }
#alerts .atidy[aria-pressed="true"], #alerts .atidy[aria-pressed="true"] b { color: var(--press); }
#alerts .atidy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* 폰 경고 칸: 칸 밑에 점선 하나를 긋고 (#alerts의 아래 여백 12px을 이 줄이 대신 갖는다). 단추는 블록이어도 글 폭으로 줄어들어 너비를 준다 */
body:not(.duo) .sumcard.wc #alerts .atidy { width: calc(100% - 4px); margin: 12px 2px -12px; padding: 10px 2px 11px; border-top: 1px dashed color-mix(in srgb, var(--fg) 16%, transparent); }
/* PC 요약 카드: 주의 알약 줄 바로 밑, 알약과 같은 칸에서 시작 */
body.duo .sumcard #alerts .atidy { grid-column: 2; margin: 7px 0 0 2px; }
body.duo .sumcard #alerts .atidy i { margin-left: 2px; }
body.duo .sumcard #alerts .atidy::after { content: ""; position: absolute; inset: -6px -4px; }   /* 누를 자리를 위아래로 넓힌다 (글줄 18px → 30px) */

/* 만드는 단추(표 생성 · 단가표 생성 · 표 판의 만들기 · 판매보고 만들기)와 필터 줄 '초기화'는 하는 일 단추의 먹색(--act)으로: 빨강은 유통기한 임박(.dbad)에만 남는다.
   그 단추들의 규칙이 --cta를 면 · 테 · 그림자에 함께 쓰므로 그 자리에서 --cta를 먹색으로 바꿔 끼운다 (.tfab의 --fab-fill도 제 자리의 --cta를 읽는다).
   판매가 링크(묶음 카드의 '판매가 22,000~26,500원 ›')는 건 줄의 판매가와 같은 갈색. 스케쥴 '오늘' · 음성 녹음 · 검역 불합격 · 엑셀 고칠 곳 표시의 빨강은 그대로 */
.tfab, body.duo .duobar button.go, .pdate .pimg, .chip.go, #ssheet .pufoot .srgo, .tools .tbtn, .fbar .chip.clear { --cta: var(--act); }
.gmeta .plink { color: #7a5232; }
/* 올리거나 누르면 한 단계 밝게: 빨강일 때의 '검정 섞기 · 밝기 1.06'은 먹색 위에서 티가 나지 않는다 (2026-11-01 독립 검토) */
@media (hover: hover) {
  #gpanel .chip.go:hover, #tsheet .chip.go:not([data-table="cost"]):hover { border-color: color-mix(in srgb, var(--act) 84%, var(--surface)); background: color-mix(in srgb, var(--act) 84%, var(--surface)); }
  body.duo .duobar button.go:not(:disabled):hover { filter: none; background: color-mix(in srgb, var(--act) 84%, var(--surface)); }
  body.duo .top .fbar .chip.clear:hover { border-color: color-mix(in srgb, var(--act) 84%, var(--surface)); background: color-mix(in srgb, var(--act) 84%, var(--surface)); }
}
.fbar .chip.clear:active { background: color-mix(in srgb, var(--act) 84%, var(--surface)); }
#meet .mt-al.tidy .mt-dot { background: #8a7a6a; }   /* 엑셀 모드 주의 줄의 '엑셀 정리 필요' (mtKpi): 경고가 아니라 흐린 점 */

/* 이번에 바뀐 것: 새 판을 올린 뒤 첫 화면 맨 위의 작은 흰 카드 (app.js renderWhatsNew, 판마다 한 번) · '모두 보기'의 날짜별 목록 판 (#wnsheet) */
.wnc { position: relative; margin: 0 0 14px; padding: 14px 16px 12px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent), 0 6px 18px rgba(33, 12, 2, 0.07); }
.wnc .wnh { display: flex; align-items: baseline; gap: 8px; margin: 0 26px 8px 0; }
.wnc .wnh b { font-size: 15px; font-weight: 650; letter-spacing: -0.03em; }
.wnc .wnh b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 2px 0; border-radius: 50%; background: var(--press); vertical-align: middle; }
.wnc .wnh small { font-size: 12px; color: var(--muted); }
.wnc .wnx { all: unset; position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); font-size: 20px; cursor: pointer; }
.wnc .wnx::after { content: ""; position: absolute; inset: -7px; }   /* 누를 자리 44px */
.wnc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.wnc li { font-size: 13.5px; line-height: 1.45; letter-spacing: -0.01em; word-break: keep-all; }
.wnc li b { font-weight: 650; }
.wnc li span { display: block; font-size: 12px; color: var(--muted); }
.wnc .wngo { all: unset; position: relative; display: inline-flex; margin-top: 10px; font-size: 12.5px; font-weight: 650; color: var(--press); cursor: pointer; }
.wnc .wngo::after { content: ""; position: absolute; inset: -13px -6px; }
.wnc :is(.wnx, .wngo):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
body.duo .wnc { margin: 12px 16px 4px; }
#wnsheet .sheetin { width: min(100%, 520px); }   /* 짧은 줄의 목록이라 연결 상태 판처럼 좁게 */
#wnsheet .pubody { padding: 4px 18px 8px; }
#wnsheet h3 { margin: 14px 0 8px; font-size: 12.5px; font-weight: 650; color: var(--muted); letter-spacing: 0; }
#wnsheet h3:first-child { margin-top: 6px; }
#wnsheet h3 i { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--press); color: var(--on-press); font-size: 11px; font-style: normal; font-weight: 650; }
#wnsheet ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
#wnsheet li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.45; word-break: keep-all; }
#wnsheet li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--press); }
#wnsheet li b { font-weight: 650; }
#wnsheet li span { display: block; font-size: 12.5px; color: var(--muted); }

/* ==== 최근 90일 산 거래처 (2026-11-01, 시안/거래처판매-시안 가 — 사용자 "추천 시안대로 진행."): app.js custHTML.
   폰은 펼친 묶음 카드의 창고 재고 상자 바로 밑(li.cust), PC는 오른쪽 판 카드의 본문 맨 위(section.cust). 흰 면 + 가는 테, 많이 산 순 다섯 줄, 나머지는 '더 보기'.
   --cust: 1이 app.js의 신호다 (옛 app.css면 받지도 그리지도 않는다) */
:root { --cust: 1; }
.cust { list-style: none; margin: 12px 0; padding: 12px 14px 6px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line2); }
/* 폰: 옆 간격을 위 창고 재고 상자(.lots > .rise)와 같게 (2026-11-01, 사용자 "여기가 딱 붙었는데 위와 같은 간격으로 띄워줄 수 있니?") */
.lots > .cust { margin-inline: 6px; }
.selecting .lots > .cust { margin-inline: 4px; }
@media (max-width: 374px) { .lots > .cust { margin-inline: 4px; } .selecting .lots > .cust { margin-inline: 2px; } }
body.duo .dbody > .cust { margin: 0 22px 14px; }
.cust-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 4px; font-size: 13.5px; font-weight: 650; color: var(--fg); letter-spacing: -0.01em; }
.cust-h small { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.cust-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cust-row b { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.cust-row .m { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cust-row .q { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cust-row .q small { margin-left: 2px; font-size: 11px; font-weight: 500; color: var(--muted); }
.cust-more { display: block; width: 100%; margin: 0; padding: 8px 0 6px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--press); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.cust-more:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (max-width: 359px) { .cust { padding-inline: 12px; } .cust-row { gap: 0 8px; font-size: 13.5px; } .cust-row .m { font-size: 11.5px; } }

/* ==== 일별 판매: 그날 많이 팔린 묶음 줄을 누르면 그 묶음을 산 거래처 (2026-11-01, 사용자 "달력의 날짜를 누르면 구매자 와 구매수량, 중량이 나오게도 할 수 있니?" →
   "그날 많이 팔린품명을 눌렀을 때 나오면 되겠다."): app.js sfDayCard (카톡 달력만). 줄은 단추(button.sf-br[data-sfbv]), 펼친 줄은 고른 줄 색, 밑에 .sf-buys.
   --sfbuy: 1이 app.js의 신호다 (옛 app.css면 줄이 예전처럼 글) */
:root { --sfbuy: 1; }
button.sf-br { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--line); padding-inline: 8px; background: none; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
button.sf-br:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
button.sf-br[aria-expanded="true"] { background: var(--sel-bg); }
button.sf-br:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
/* 산 거래처는 흰 안쪽 카드 (시안/일별거래처-시안 가): 제목 · 이름 | t | box, 막대 없음 */
.sf-buys { padding: 2px 10px 12px; background: var(--sel-bg); }
.sf-bc { padding: 2px 14px 4px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line2), 0 1px 2px rgba(33, 12, 2, 0.05); }
.sf-bch { padding: 10px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sf-bcr { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.sf-bcr > b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sf-bcr > em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sf-bcr > em small { margin-left: 2px; font-size: 11px; font-weight: 600; color: var(--muted); }
.sf-bcr > span { color: var(--muted); font-size: 12.5px; text-align: right; white-space: nowrap; }
.sf-bc .sf-nil { margin: 0; padding: 8px 0 6px; border-top: 1px solid var(--line); font-size: 12px; }
.sf-bc .cust-more { padding-top: 8px; }

/* ==== 테두리 없던 카드에 테두리 (2026-11-01, 사용자 "모든 카드에는 테두리를 그려넣어줘 어떤 테두린지 알지???" · "테두리 없이 표현된 곳이 있을거야 그런것들만 테두리 그려주면 되.")
   폰 카드의 1px 테두리 색(--cardedge, 10-31 가3)으로, 그림자 없이 · 자리 그대로: 폰 재고 · 스케쥴 요약 카드(베이지), 폰 접힌 묶음 카드(원래 1px 투명 테두리), 일별 판매 달력의 주말 칸 */
body:not(.duo) .sumcard { box-shadow: inset 0 0 0 1px var(--cardedge); }
body:not(.duo) #list > li.group.closed:not(.skel) { border-color: var(--cardedge); }
.sf-dcc.we:not(.today):not(.est) { box-shadow: inset 0 0 0 1px var(--line); }

/* ==== 일별 판매 회사 칸 '전체 | 캐틀팜 | 케이팩토리' (2026-11-01, 사용자 "케이팩토리는 따로 있는데 … 따로 나눠서 보여줄 수 있으면 좋고."): app.js sfDayCard (카톡 달력 · 두 방의 줄이 다 있을 때만).
   판매 탭 기간 칸(.sf-seg)과 같은 꼴, 제목 줄 오른쪽 끝(좁으면 다음 줄) */
.sf-dc .dttl .sf-co { order: 3; margin-left: auto; }
.sf-dc .dttl .sf-co button { padding: 5px 12px; font-size: 12.5px; }

/* ==== 일별 판매(카톡 달력) 안내 띠 (2026-11-01, 사용자 "냉동만 집계되었고, 평균중량으로 계산한 값으로 실제와는 차이가 있을 수 있다고 표해줘. 눈에띄는 색으로" →
   호박색(어림 · 주의 색; 와인은 켜진 것에만): app.js sfDayCard .sf-kkn */
.sf-kkn { margin: 10px 22px 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 13%, var(--surface)); color: var(--warn-t); font-size: 13px; font-weight: 600; line-height: 1.45; }
#list > .sf-pd .sf-kkn { margin-inline: 14px; font-size: 12.5px; }

/* ==== 관리자 '업데이트' 탭 (2026-11-01, 사용자 "'이번에 바뀐것' 관리자 페이지에도 업데이트 내용들을 기록해두자."): admin.php #sec-updates — 날마다 직원 화면 · 관리자 두 목록 */
.upd > p { margin: 0 0 6px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.upd-day { padding: 14px 0 6px; border-top: 1px solid var(--line); }
.upd-day h3 { margin: 0 0 6px; font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }
.upd-day h4 { margin: 10px 0 4px; font-size: 12px; font-weight: 650; color: var(--muted); }
.upd-day ul { margin: 0; padding-left: 18px; }
.upd-day li { margin: 3px 0; font-size: 13.5px; line-height: 1.55; }
.upd-day li b { font-weight: 650; }
.upd-tag { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--edge); color: var(--muted); font-size: 11px; line-height: 18px; vertical-align: 1px; }


/* 주간 시장 보고서 (#12): 시안 #10 가3의 활자·선·여백. 맨 끝에만 추가한다. */
:root { --wr: 1; }
/* 신문 시황면: 선·활자·여백. 카드 표면, 그림자, 장식 아이콘은 쓰지 않는다. */
.wr-report {
  box-sizing:border-box;
  --wr-ink:var(--fg); --wr-muted:var(--muted); --wr-rule:#cfc6b8; --wr-grid:#e3ddd3;
  --wr-compare:#b4b4b4; --wr-paper:var(--surface);
  width:100%; min-width:0; max-width:1100px; margin:0 auto; padding:26px 32px 40px;
  color:var(--wr-ink); background:var(--wr-paper); font:16px/1.85 "Wanted Sans Variable","Wanted Sans","Apple SD Gothic Neo",sans-serif;
  overflow-wrap:anywhere; font-variant-numeric:tabular-nums;
}
.wr-report *, .wr-report *::before, .wr-report *::after { box-sizing:border-box; }
.wr-report :is(h2,h3,h4,p,figure) { margin:0; white-space:normal; }
.wr-report :is(h2,h3,h4) { color:var(--wr-ink); letter-spacing:-.04em; }
.wr-report :is(button,a,summary) { color:inherit; font:inherit; }
.wr-report :is(button,a,summary):focus-visible { outline:2px solid var(--wr-ink); outline-offset:3px; }
.wr-masthead { padding-bottom:18px; border-bottom:1px solid var(--wr-ink); margin-bottom:20px; }
.wr-edition { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; font-size:12px; line-height:1.5; color:var(--wr-muted); }
.wr-masthead h2 { font-size:32px; line-height:1.25; font-weight:750; }
.wr-headline { font-size:22px; line-height:1.5; font-weight:550; letter-spacing:-.035em; margin-top:8px !important; }
.wr-date { font-size:12px; line-height:1.65; color:var(--wr-muted); margin-top:10px !important; }
.wr-byline { font-size:12px; line-height:1.65; color:var(--wr-muted); margin-top:3px !important; }
.wr-tools { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.wr-tools button, .wr-tools a { padding:0; margin:0; border:0; border-radius:0; background:none; box-shadow:none; font-size:12px; line-height:1.7; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wr-overview-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; }
.wr-overview-head h3 { font-size:15px; font-weight:650; letter-spacing:-.025em; }
.wr-overview-head > span { color:var(--wr-muted); font-size:12px; }
.wr-overview-copy { margin-top:18px !important; }
.wr-prose { max-width:43em; font-size:16px; line-height:1.95; margin:16px 0 !important; word-break:keep-all; overflow-wrap:anywhere; }
.wr-prose > p + p { margin-top:12px; }
.wr-prose b { font-weight:700; }
.wr-overview-source, .wr-figure-source, .wr-sources, .wr-note { font-size:12px; line-height:1.7; color:var(--wr-muted); }
.wr-overview-source { margin-top:10px !important; }
.wr-section { margin-top:36px; padding-top:0; border-top:1px solid var(--wr-rule); }
.wr-section-head { position:relative; padding-top:14px; margin-bottom:16px; }
.wr-section-head > p { position:relative; display:table; background:var(--wr-paper); padding:0 10px 0 0; transform:translateY(-24px); margin-bottom:-15px; font-size:12px; line-height:1.6; color:var(--wr-muted); }
.wr-section-head h3 { font-size:27px; line-height:1.45; font-weight:700; max-width:28em; }
.wr-subheading { font-size:19px; font-weight:650; margin-top:28px !important; }
.wr-standfirst { font-size:17px; }
.wr-note { margin-block:10px !important; }
.wr-sources { margin-top:18px; }
.wr-sources p + p { margin-top:6px; }
.wr-figure { min-width:0; margin:20px 0 22px !important; padding:0; border:0; border-radius:0; box-shadow:none; background:none; }
.wr-figure figcaption { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 5px; color:var(--wr-ink); font-size:13px; line-height:1.6; }
.wr-figure figcaption > span { color:var(--wr-muted); font-weight:450; }
.wr-figure figcaption > strong { font-weight:600; }
.wr-figure figcaption > small { color:var(--wr-muted); font-size:12px; margin-left:auto; }
.wr-plot { width:100%; min-width:0; }
.wr-plot svg { display:block; width:100%; height:auto; overflow:visible; font:12px "Wanted Sans Variable","Wanted Sans",sans-serif; }
.wr-gridline { stroke:var(--wr-grid); stroke-width:.7; }
.wr-series { fill:none; stroke:var(--wr-ink); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.wr-series.wr-old { stroke:var(--wr-compare); stroke-width:1.5; }
.wr-axis { fill:var(--wr-muted); font-size:12px; }
.wr-end-label { fill:var(--wr-ink); font-size:12px; font-weight:650; }
.wr-old-label { fill:#747474; font-weight:450; }
.wr-label-leader { stroke:var(--wr-ink); stroke-width:.7; fill:none; }
.wr-label-leader.wr-old { stroke:var(--wr-compare); }
.wr-note-leader { fill:none; stroke:#847d76; stroke-width:.7; }
.wr-note-text { fill:var(--wr-ink); font-size:12px; font-weight:550; paint-order:stroke; stroke:var(--wr-paper); stroke-width:3px; stroke-linejoin:round; }
.wr-note-point { fill:var(--wr-ink); }
.wr-figure-source { margin-top:4px !important; }
.wr-change { font-size:12px; line-height:1.6; margin:4px 0 0 !important; }
.wr-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:14px; line-height:1.6; margin:20px 0; }
.wr-table caption { color:var(--wr-ink); text-align:left; font-size:13px; font-weight:650; margin-bottom:8px; }
.wr-table :is(th,td) { padding:10px 6px; border:0; border-bottom:1px solid var(--wr-rule); vertical-align:middle; text-align:left; overflow-wrap:anywhere; word-break:keep-all; }
.wr-table thead th { padding-top:0; color:var(--wr-muted); font-size:12px; font-weight:450; }
.wr-table th:first-child, .wr-table td:first-child { padding-left:0; }
.wr-table th:last-child, .wr-table td:last-child { padding-right:0; }
.wr-table tbody th { font-weight:600; }
.wr-table small { display:block; font-size:12px; line-height:1.65; font-weight:450; color:var(--wr-muted); }
.wr-table .wr-num { text-align:right; }
.wr-secondary-figure { max-width:740px; margin-top:26px; }
.wr-composition { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:32px; align-items:start; margin-top:20px; }
.wr-composition .wr-figure { margin-top:0 !important; }
.wr-brief { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; align-items:start; }
.wr-brief .wr-figure { margin-top:16px !important; }
.wr-news-list { list-style:none; padding:0; margin:0; max-width:43em; }
.wr-news-list > li { padding:16px 0; border-bottom:1px solid var(--wr-rule); }
.wr-news-list > li:first-child { padding-top:0; }
.wr-news-list .wr-news-meta { color:var(--wr-muted); font-size:12px; line-height:1.7; }
.wr-news-list h4 { font-size:18px; line-height:1.65; font-weight:650; margin:4px 0 5px; }
.wr-news-list li > p:last-child { font-size:14px; line-height:1.85; }
.wr-watch-table td { text-align:left !important; }
.wr-watch-table th:first-child { width:75px; }
.wr-company-notes { list-style:none; margin:16px 0; padding:0; max-width:43em; font-size:14px; line-height:1.9; }
.wr-company-notes li + li { margin-top:6px; }
.wr-inventory { font-size:13px; }
.wr-history { border-top:1px solid var(--wr-rule); padding-top:16px; margin-top:30px; font-size:13px; }
.wr-history summary { cursor:pointer; font-size:13px; }
.wr-history ol { list-style:none; margin:14px 0 0; padding:0; }
.wr-history li { display:flex; gap:18px; border-top:1px solid var(--wr-rule); padding:10px 0; font-size:13px; }
.wr-history time { flex:none; color:var(--wr-muted); font-size:12px; }
.wr-disclaimer { margin-top:20px !important; color:var(--wr-muted); font-size:12px; line-height:1.7; }

/* #10: 결론과 충분한 글. 문장 폭과 단락의 호흡은 숫자 판과 분리한다. */
.wr-opening { margin:0 0 24px; }
.wr-opening .wr-opening-lead { max-width:43em; font-size:17px; line-height:1.9; margin:0 0 20px !important; }
.wr-weekly-conclusions { max-width:43em; margin:0 0 24px; }
.wr-weekly-conclusions h3 { font-size:18px; font-weight:700; line-height:1.5; margin-bottom:10px; }
.wr-weekly-conclusions ol { list-style:decimal; padding:0 0 0 22px; margin:0; }
.wr-weekly-conclusions li { padding:0; margin:0 0 14px; }
.wr-weekly-conclusions li::marker { font-size:14px; font-weight:600; }
.wr-weekly-conclusions h4 { font-size:16px; line-height:1.7; font-weight:650; margin-bottom:3px; }
.wr-weekly-conclusions p { font-size:14px; line-height:1.85; }
.wr-weekly-conclusions b { font-size:12px; font-weight:600; }
.wr-chapter-lead { font-size:18px; line-height:1.85; margin:14px 0 20px !important; }
.wr-chapter-lead strong { font-weight:650; }
.wr-prose { max-width:43em; margin:18px 0 !important; }
.wr-prose > p + p { margin-top:16px; }
.wr-chapter-conclusion { font-size:16px; line-height:1.9; margin-top:24px !important; }
.wr-chapter-conclusion strong { font-weight:700; }
.wr-for-us { margin-top:16px !important; }
.wr-for-us h4 { font-size:14px; font-weight:650; margin:0 0 6px; }
.wr-news-copy { max-width:43em; font-size:15px; line-height:1.95; }
.wr-news-copy p + p { margin-top:12px; }
.wr-news-interpretation b { font-size:13px; font-weight:650; }
.wr-watch-list { list-style:decimal; max-width:43em; padding:0 0 0 22px; margin:16px 0 22px; }
.wr-watch-list li { padding:0; margin-bottom:18px; }
.wr-watch-list h4 { font-size:16px; line-height:1.7; font-weight:650; margin-bottom:3px; }
.wr-watch-list li > p { font-size:15px; line-height:1.9; }
.wr-watch-list .wr-watch-time { font-size:12px; color:var(--wr-muted); }
.wr-sources { margin-top:20px; }

@media (max-width:767px) {
  .wr-opening .wr-opening-lead { font-size:15px; line-height:1.85; margin-bottom:18px !important; }
  .wr-weekly-conclusions { margin-bottom:22px; }
  .wr-weekly-conclusions h3 { font-size:17px; margin-bottom:8px; }
  .wr-weekly-conclusions h4 { font-size:14px; line-height:1.75; }
  .wr-weekly-conclusions p { font-size:13px; line-height:1.8; }
  .wr-weekly-conclusions li { margin-bottom:12px; }
  .wr-chapter-lead { font-size:16px; line-height:1.9; }
  .wr-chapter-conclusion { font-size:15px; }
  .wr-for-us h4 { font-size:14px; }
  .wr-news-copy { font-size:15px; }
}

.wr-front-page { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:28px; align-items:start; }
.wr-front-page .wr-figure { margin:0 !important; }
.wr-front-facts { padding-top:2px; }
.wr-front-facts .wr-table { margin:0; font-size:13px; }
.wr-front-facts .wr-table caption { margin-bottom:12px; }
.wr-front-facts .wr-table th:first-child { width:29%; }
.wr-front-facts .wr-table small { font-size:12px; }
@media (max-width:767px) {
  .wr-front-page { display:block; }
  .wr-front-facts { margin-top:16px; }
  .wr-front-facts .wr-table { font-size:13px; }
  .wr-front-facts .wr-table caption { margin-bottom:8px; }
  .wr-front-facts .wr-table :is(th,td) { padding-block:8px; }
}

/* 보고서의 실제 앱 자리. 숫자 상자나 카드 격자 없이 한 장의 지면으로 읽는다. */
.wr-pane { min-width:0; container-type:inline-size; }
.wr-report { font-family:var(--font); }
.wr-report :is(p,li,th,td,button,summary) { white-space:normal; }
.wr-report .wr-tools button { min-height:32px; color:var(--fg); font-size:12px; }
.wr-history button { display:flex; align-items:baseline; gap:16px; width:100%; padding:10px 0; border:0; border-radius:0; background:none; box-shadow:none; color:inherit; text-align:left; cursor:pointer; font:inherit; }
.wr-history button[aria-current="true"] { color:var(--press); }
.wr-history li { padding:0; }
.wr-history span { min-width:0; overflow-wrap:anywhere; }
.wr-bar { fill:var(--wr-ink); }
.wr-bar.wr-old { fill:var(--wr-compare); }
.wr-report svg text { font-family:var(--font); font-size:12px; }
.wr-report .wr-plot svg { overflow:visible; max-width:100%; }
.wr-report .wr-table :is(th,td) { white-space:normal; }
.wr-report .wr-table .wr-num { text-align:right; }
.wr-facts th:first-child { width:40%; }
.wr-report .wr-news-copy p { font-size:15px; line-height:1.95; }
.wr-report .wr-news-copy b { font-size:13px; }
.wr-wait, .wr-review { padding:24px; font:15px/1.85 var(--font); overflow-wrap:anywhere; }
.wr-review h2 { font-size:24px; margin:0 0 12px; }
.wr-review .wr-history { margin-top:24px; }
body.market #list > .wr-entry { min-width:0; }
body.market .wr-row { min-width:0; }
body.market .wr-row > span { color:var(--fg); font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
body.market .wr-row[aria-pressed="true"] > b { color:var(--press); }
body.market .wr-row[aria-expanded="true"] { border-bottom-color:var(--edge); }
body.market .wr-row[aria-expanded="true"] > b { color:var(--press); }
#wr-mobile { min-width:0; }
#wr-print { display:none; }
@container (max-width:700px) {
  .wr-front-page { display:block; }
  .wr-front-facts { margin-top:18px; }
}
@media (max-width:1039px) {
  body.market #list > .wr-entry { margin-bottom:18px; border-bottom:1px solid var(--edge); }
  body.market .wr-row { padding:14px 0; }
  .wr-report { padding:16px 0 30px; background:transparent; --wr-paper:var(--bg); }
  .wr-masthead { margin-bottom:16px; padding-bottom:14px; }
  .wr-masthead h2 { font-size:27px; }
  .wr-headline { font-size:17px; line-height:1.5; }
  .wr-prose { font-size:15px; line-height:1.95; }
  .wr-section { margin-top:32px; }
  .wr-section-head h3 { font-size:23px; line-height:1.5; }
  .wr-figure { margin-block:18px !important; }
  .wr-figure figcaption { font-size:12px; }
  .wr-front-page { display:block; }
  .wr-front-facts { margin-top:16px; }
  .wr-table { font-size:13px; }
  .wr-table :is(th,td) { padding:9px 3px; }
  .wr-news-list h4 { font-size:17px; }
  .wr-inventory { font-size:12px; }
  .wr-wait, .wr-review { padding:18px 0; }
}
@page wrweekly { size:A4; margin:14mm; }
@media print {
  body.wr-printing { display:block !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important; background:white !important; }
  body.wr-printing::before, body.wr-printing::after,
  body.wr-printing > :not(#wr-print) { display:none !important; }
  body.wr-printing > #wr-print { display:block !important; page:wrweekly; width:100%; margin:0; padding:0; }
  #wr-print .wr-report { width:100%; max-width:none; margin:0; padding:0; background:white; --wr-paper:white; color:#210c02; }
  #wr-print :is(.wr-tools,.wr-history) { display:none !important; }
  #wr-print .wr-front-page { display:block; }
  #wr-print .wr-front-facts { margin-top:16px; }
  #wr-print .wr-prose { max-width:none; font-size:14px; line-height:1.8; }
  #wr-print .wr-section-head, #wr-print :is(h2,h3,h4,figcaption) { break-after:avoid; }
  #wr-print .wr-figure { break-inside:avoid; }
  #wr-print p { orphans:3; widows:3; }
  #wr-print tr { break-inside:avoid; }
  #wr-print svg { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}

/* #13: 관리자 검사 내역과 실제 보고서 인쇄. 긴 장 전체를 묶지 않고 읽는 단위만 지킨다. */
.wr-issues { border-top:1px solid var(--edge); margin-top:24px; padding-top:16px; font-size:13px; line-height:1.8; }
.wr-issues summary { cursor:pointer; min-height:32px; font-size:13px; }
.wr-issues ol { margin:12px 0 0; padding-left:22px; }
.wr-issues li { margin-bottom:12px; }
.wr-issues p { margin:0; }
.wr-issues small { display:block; color:var(--muted); font-size:12px; }
@media print {
  body.wr-printing { page:wrweekly; }
  body.wr-printing > #wr-print { width:182mm; max-width:100%; height:auto; min-height:0; max-height:none; position:static; overflow:visible; break-after:auto; }
  #wr-print .wr-report { display:flow-root; height:auto; min-height:0; max-height:none; overflow:visible; break-after:auto; padding-bottom:0; margin-bottom:0; }
  #wr-print :is(.wr-tools,.wr-history,.wr-issues) { display:none !important; }
  #wr-print :is(.wr-table,.wr-figure,.wr-weekly-conclusions li,.wr-watch-list li,.wr-news-list > li) { break-inside:avoid; page-break-inside:avoid; }
  #wr-print :is(.wr-section-head,h2,h3,h4,figcaption,caption) { break-after:avoid; page-break-after:avoid; }
  #wr-print .wr-section { break-inside:auto; margin-top:22px; }
  #wr-print .wr-section-head { margin-bottom:12px; }
  #wr-print .wr-figure { margin-block:12px !important; }
  #wr-print .wr-weekly-conclusions li { margin-bottom:10px; }
  #wr-print .wr-front-page { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:18px; break-inside:avoid; }
  #wr-print .wr-front-facts { margin-top:0; }
  #wr-print .wr-sources { margin-bottom:0; padding-bottom:0; }
  #wr-print .wr-sources > p:last-child { margin-bottom:0; padding-bottom:0; }
}

/* #14: 뉴스 예고 카드의 짜임 — 작은 칩, 큰 제목, 짧은 글 사이의 여백. 앱의 크림·에스프레소 색을 쓴다. */
.wr-report {
  --wr-compare:#cfc6ba;
  --wr-text:color-mix(in srgb,var(--fg) 88%,var(--surface));
  max-width:800px; margin-inline:auto; padding:48px 40px 56px;
  background:var(--surface); color:var(--wr-text); font-size:17px; line-height:1.8;
}
.wr-report .wr-prose { max-width:720px; margin:24px 0 !important; font-size:17px; line-height:1.8; }
.wr-report .wr-prose > p + p { margin-top:1.2em; }
.wr-report :is(h2,h3,h4,strong) { color:var(--fg); }
.wr-report .wr-masthead { border:0; padding:0; margin-bottom:32px; }
.wr-report .wr-edition { align-items:center; flex-wrap:wrap; gap:10px 16px; margin-bottom:20px; font-size:12px; }
.wr-report .wr-edition > span,
.wr-report .wr-section-head > p { display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px; background:var(--fg); color:var(--bg); font-size:12px; line-height:1.5; font-weight:650; letter-spacing:0; }
.wr-report .wr-edition > time { color:var(--muted); font-size:12px; }
.wr-report .wr-masthead h2 { font-size:34px; line-height:1.25; font-weight:800; letter-spacing:-.045em; }
.wr-report .wr-headline { margin-top:14px !important; font-size:20px; line-height:1.55; font-weight:650; }
.wr-report .wr-date { margin-top:18px !important; font-size:12px; line-height:1.8; }
.wr-report .wr-byline { margin-top:6px !important; font-size:12px; line-height:1.8; }
.wr-report .wr-tools { gap:8px; margin-top:20px; }
.wr-report .wr-tools button { padding:6px 12px; min-height:32px; border:1px solid var(--edge); border-radius:999px; background:transparent; color:var(--fg); font-size:12px; line-height:1.5; text-decoration:none; }
.wr-report .wr-opening { margin-bottom:40px; }
.wr-report .wr-opening .wr-opening-lead { margin:0 0 32px !important; font-size:18px; line-height:1.9; }
.wr-report .wr-weekly-conclusions { max-width:none; margin:0; padding:24px; border:0; border-radius:14px; background:var(--bg); box-shadow:none; }
.wr-report .wr-weekly-conclusions h3 { margin-bottom:20px; font-size:20px; line-height:1.5; font-weight:750; }
.wr-report .wr-weekly-conclusions ol { margin:0; padding-left:22px; }
.wr-report .wr-weekly-conclusions li { margin:0; }
.wr-report .wr-weekly-conclusions li + li { margin-top:24px; }
.wr-report .wr-weekly-conclusions li::marker { color:var(--fg); font-size:17px; font-weight:750; }
.wr-report .wr-weekly-conclusions h4 { margin-bottom:12px; font-size:17px; line-height:1.6; font-weight:750; }
.wr-report .wr-conclusion-row { display:flex; align-items:baseline; gap:12px; margin-top:12px; }
.wr-report .wr-conclusion-row > b { flex:0 0 70px; font-size:12px; line-height:1.8; color:var(--muted); font-weight:600; }
.wr-report .wr-conclusion-row > span { min-width:0; font-size:16px; line-height:1.8; }
.wr-report .wr-overview-head { display:block; margin-bottom:24px; }
.wr-report .wr-overview-head h3 { font-size:20px; line-height:1.5; font-weight:750; }
.wr-report .wr-overview-head > span { display:block; margin-top:8px; font-size:12px; line-height:1.7; }
.wr-report .wr-front-page { display:block; }
.wr-report .wr-front-facts { margin-top:32px; }
.wr-report .wr-section { margin-top:56px; border:0; padding:0; }
.wr-report .wr-section-head { padding:0; margin:0 0 24px; }
.wr-report .wr-section-head > p { position:static; transform:none; margin:0 0 14px; }
.wr-report .wr-section-head h3 { font-size:24px; line-height:1.4; font-weight:800; }
.wr-report .wr-chapter-lead { font-size:17px; line-height:1.8; }
.wr-report .wr-chapter-conclusion { margin-top:28px !important; font-size:17px; line-height:1.8; }
.wr-report .wr-for-us { max-width:none; padding:20px 24px; border:0; border-radius:12px; background:color-mix(in srgb,var(--bg) 55%,var(--surface)); box-shadow:none; }
.wr-report .wr-for-us h4 { margin-bottom:12px; font-size:14px; line-height:1.5; font-weight:700; }
.wr-report .wr-for-us p { font-size:16px; line-height:1.8; }
.wr-report .wr-figure { margin:28px 0 32px !important; }
.wr-report .wr-figure figcaption { gap:8px 10px; margin-bottom:16px; font-size:15px; line-height:1.6; }
.wr-report .wr-figure figcaption > span { font-size:12px; line-height:1.8; }
.wr-report .wr-figure figcaption > strong { font-size:15px; line-height:1.6; font-weight:700; }
.wr-report .wr-figure figcaption > small { margin-left:auto; color:var(--muted); font-size:12px; }
.wr-report .wr-legend { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 20px; list-style:none; margin:0 0 14px; padding:0; font-size:13px; line-height:1.7; font-variant-numeric:tabular-nums; }
.wr-report .wr-legend-item { display:flex; align-items:center; gap:7px; margin:0; padding:0; font-size:13px; line-height:1.7; white-space:nowrap; }
.wr-report .wr-legend-item :is(span,strong) { font-size:13px; line-height:1.7; }
.wr-report .wr-legend-item > strong { font-weight:650; }
.wr-legend-dot { display:inline-block; flex:0 0 8px; width:8px; height:8px; border:1px solid var(--fg); border-radius:50%; background:var(--fg); }
.wr-legend-dot.wr-old { border:2px solid var(--wr-compare); background:transparent; }
.wr-report .wr-annotation { display:table; max-width:100%; margin:0 0 12px !important; padding:6px 11px; border-radius:999px; background:var(--bg); color:var(--fg); font-size:12px; line-height:1.6; font-weight:600; }
.wr-report .wr-gridline { stroke:color-mix(in srgb,var(--fg) 8%,var(--surface)); stroke-width:.7; }
.wr-report .wr-series { stroke-width:2.2; }
.wr-report .wr-series.wr-old { stroke:var(--wr-compare); stroke-width:1.8; }
.wr-report .wr-axis { fill:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.wr-report .wr-figure-source { margin-top:14px !important; font-size:12px; line-height:1.8; }
.wr-report .wr-table { margin:28px 0; font-size:15px; line-height:1.8; }
.wr-report .wr-table caption { margin-bottom:16px; font-size:15px; line-height:1.6; font-weight:700; }
.wr-report .wr-table :is(th,td) { padding:14px 8px; border-bottom:1px solid color-mix(in srgb,var(--fg) 10%,var(--surface)); line-height:1.8; }
.wr-report .wr-table thead th { padding-top:0; padding-bottom:14px; font-size:12px; }
.wr-report .wr-table small { margin-top:4px; font-size:12px; line-height:1.7; }
.wr-report .wr-facts .wr-fact-period { white-space:nowrap; }
.wr-report .wr-table .wr-num { font-variant-numeric:tabular-nums; }
.wr-report .wr-change { display:inline-flex; justify-content:flex-end; align-items:baseline; flex-wrap:wrap; gap:3px 5px; }
.wr-report .wr-change-arrow { font-size:12px; color:var(--muted); }
.wr-report .wr-news-list { max-width:none; }
.wr-report .wr-news-list > li { padding:28px 0; border-bottom:1px solid color-mix(in srgb,var(--fg) 10%,var(--surface)); }
.wr-report .wr-news-list > li:first-child { padding-top:0; }
.wr-report .wr-news-list h4 { margin:12px 0 18px; font-size:17px; line-height:1.6; font-weight:750; }
.wr-report .wr-news-copy { margin:0 !important; }
.wr-report .wr-news-copy p { font-size:17px; line-height:1.8; }
.wr-report .wr-news-meaning { margin-top:20px; }
.wr-report .wr-news-meaning > b { display:block; margin-bottom:8px; color:var(--muted); font-size:12px; line-height:1.6; font-weight:650; }
.wr-report .wr-watch-list { max-width:none; padding-left:22px; margin-top:24px; }
.wr-report .wr-watch-list li { margin-bottom:28px; }
.wr-report .wr-watch-list h4 { margin-bottom:14px; font-size:17px; line-height:1.6; font-weight:750; }
.wr-report .wr-watch-list li > p { font-size:17px; line-height:1.8; }
.wr-report .wr-watch-list p + p { margin-top:1.1em; }
.wr-report .wr-sources { margin-top:48px; padding-top:24px; border-top:1px solid color-mix(in srgb,var(--fg) 10%,var(--surface)); font-size:12px; line-height:1.85; }
.wr-report .wr-sources p + p { margin-top:12px; }
@media (max-width:1039px) {
  .wr-report { padding:24px 20px 40px; background:var(--surface); --wr-paper:var(--surface); font-size:16px; line-height:1.8; }
  .wr-report .wr-prose { font-size:16px; line-height:1.8; }
  .wr-report .wr-masthead h2 { font-size:30px; }
  .wr-report .wr-headline { font-size:19px; }
  .wr-report .wr-opening .wr-opening-lead { font-size:18px; }
  .wr-report .wr-weekly-conclusions { padding:20px; border-radius:14px; }
  .wr-report .wr-weekly-conclusions h3 { font-size:19px; }
  .wr-report .wr-conclusion-row { display:block; }
  .wr-report .wr-conclusion-row > b { display:block; margin-bottom:4px; }
  .wr-report .wr-conclusion-row > span { display:block; font-size:16px; }
  .wr-report .wr-section { margin-top:44px; }
  .wr-report .wr-section-head h3 { font-size:23px; }
  .wr-report .wr-for-us { padding:20px; }
  .wr-report .wr-table { font-size:14px; }
  .wr-report .wr-table :is(th,td) { padding:14px 4px; }
  .wr-report .wr-inventory { font-size:12px; }
  .wr-report .wr-news-copy p, .wr-report .wr-watch-list li > p { font-size:16px; line-height:1.8; }
}
@media print {
  #wr-print .wr-report { padding:0; max-width:none; font-size:11.5pt; line-height:1.8; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  #wr-print .wr-prose, #wr-print .wr-news-copy p, #wr-print .wr-watch-list li > p { font-size:11.5pt; line-height:1.8; }
  #wr-print .wr-report .wr-opening-lead { font-size:12pt; line-height:1.85; }
  #wr-print .wr-report .wr-masthead h2 { font-size:24pt; }
  #wr-print .wr-headline { font-size:15pt; }
  #wr-print .wr-report .wr-section { margin-top:32px; }
  #wr-print .wr-section-head h3 { font-size:18pt; }
  #wr-print .wr-weekly-conclusions { padding:18px 20px; border-radius:12px; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  #wr-print .wr-conclusion-row { display:flex; margin-top:10px; }
  #wr-print .wr-conclusion-row > span, #wr-print .wr-for-us p { font-size:11pt; line-height:1.8; }
  #wr-print .wr-for-us { padding:16px 20px; break-inside:avoid; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  #wr-print .wr-report .wr-front-page { display:block; break-inside:auto; }
  #wr-print .wr-front-facts { margin-top:24px; }
  #wr-print .wr-report .wr-table :is(th,td) { padding-block:14px; }
  #wr-print .wr-report .wr-news-list > li { padding-block:24px; }
  #wr-print .wr-report .wr-figure { margin-block:24px !important; }
  #wr-print .wr-sources { margin-top:32px; padding-top:20px; }
}

/* #16: 앱 카드와 같은 보고서 면, 폰에서 펼치고 접을 수 있음을 알리는 누르는 줄. */
@media screen {
  body.market:not(.duo) #list > .wr-entry { border-bottom:0; }
  body.market:not(.duo) .wr-row {
    box-sizing:border-box; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px;
    padding:16px 18px; border:1px solid var(--cardedge); border-radius:24px;
    background:var(--surface); color:var(--fg); box-shadow:none;
    -webkit-tap-highlight-color:transparent;
  }
  body.market:not(.duo) .wr-row > :is(b,small,span:not(.wr-row-action)) { grid-column:1; }
  body.market:not(.duo) .wr-row > b { color:var(--fg); }
  body.market:not(.duo) .wr-row > .wr-row-action {
    grid-column:2; grid-row:1 / 4; align-self:center; display:flex; align-items:center; justify-content:flex-end;
    gap:6px; min-width:100px; color:var(--fg); font-size:12px; line-height:1.5; white-space:nowrap;
  }
  body.market:not(.duo) .wr-row-arrow { display:inline-block; flex:0 0 14px; width:14px; font-size:24px; line-height:1; font-style:normal; text-align:center; transform:rotate(0deg); }
  body.market:not(.duo) .wr-row[aria-expanded="true"] { border-color:var(--press); }
  body.market:not(.duo) .wr-row[aria-expanded="true"] > :is(b,.wr-row-action) { color:var(--press); }
  body.market:not(.duo) .wr-row[aria-expanded="true"] .wr-row-arrow { transform:rotate(90deg); }
  body.market:not(.duo) .wr-row:active { background:color-mix(in srgb,var(--fg) 4%,var(--surface)); }
  body:not(.duo) #wr-mobile { margin-top:14px; }
  body:not(.duo) #wr-mobile .wr-report { border:1px solid var(--cardedge); border-radius:24px; background:var(--surface); box-shadow:var(--cardlift); overflow:hidden; }
  body.duo .wr-pane .wr-report { border:1px solid var(--hair); border-radius:16px; background:linear-gradient(180deg,#f7f6f3 0,var(--surface) 120px); box-shadow:0 10px 28px -14px rgba(33,12,2,.28), 0 1px 0 rgba(33,12,2,.04); overflow:hidden; }
}
@media screen and (prefers-reduced-motion:no-preference) {
  body.market:not(.duo) .wr-row-arrow { transition:transform .18s ease; }
}

/* #15: 뉴스 읽기(nwRead)의 PC/폰 글 크기 단계. 화면 활자만 맞추고 지면 여백과 인쇄는 유지한다. */
@media screen {
  .wr-report { font-size:15.5px; line-height:1.58; }
  .wr-report .wr-prose,
  .wr-report .wr-chapter-conclusion,
  .wr-report .wr-weekly-conclusions p,
  .wr-report .wr-conclusion-row > span,
  .wr-report .wr-for-us p,
  .wr-report .wr-news-copy p,
  .wr-report .wr-watch-list li > p { font-size:15.5px; line-height:1.58; }
  .wr-report .wr-masthead h2 { font-size:30px; line-height:1.3; font-weight:500; letter-spacing:-.055em; }
  .wr-report .wr-headline,
  .wr-report .wr-opening .wr-opening-lead { font-size:17.5px; line-height:1.6; }
  .wr-report .wr-section-head h3 { font-size:20px; line-height:1.4; }
  .wr-report .wr-weekly-conclusions h3,
  .wr-report .wr-overview-head h3 { font-size:18px; line-height:1.5; }
  .wr-report .wr-weekly-conclusions h4,
  .wr-report .wr-chapter-lead,
  .wr-report .wr-news-list h4,
  .wr-report .wr-watch-list h4 { font-size:16px; line-height:1.6; }
  .wr-report .wr-weekly-conclusions li::marker { font-size:16px; }
  .wr-report .wr-for-us h4 { font-size:13px; }
  .wr-report .wr-figure figcaption,
  .wr-report .wr-figure figcaption > strong,
  .wr-report .wr-table caption { font-size:14px; line-height:1.6; }
  .wr-report .wr-legend,
  .wr-report .wr-legend-item,
  .wr-report .wr-legend-item :is(span,strong) { font-size:12px; line-height:1.6; }
  .wr-report .wr-table { font-size:14px; line-height:1.6; }
  .wr-report .wr-table :is(th,td) { line-height:1.6; }
  .wr-report .wr-inventory { font-size:13px; }
  .wr-report .wr-date,
  .wr-report .wr-byline,
  .wr-report .wr-conclusion-row > b,
  .wr-report .wr-figure-source { line-height:1.6; }
  .wr-report .wr-sources { line-height:1.65; }
  @media (min-width:1040px) and (max-width:1399px) {
    .wr-report .wr-masthead h2 { font-size:27px; }
  }
  @media (max-width:1039px) {
    .wr-report,
    .wr-report .wr-prose,
    .wr-report .wr-chapter-conclusion,
    .wr-report .wr-weekly-conclusions p,
    .wr-report .wr-conclusion-row > span,
    .wr-report .wr-for-us p,
    .wr-report .wr-news-copy p,
    .wr-report .wr-watch-list li > p { font-size:14.5px; line-height:1.58; }
    .wr-report .wr-masthead h2 { font-size:24px; }
    .wr-report .wr-headline,
    .wr-report .wr-opening .wr-opening-lead { font-size:16px; }
    .wr-report .wr-section-head h3 { font-size:18px; }
    .wr-report .wr-weekly-conclusions h3,
    .wr-report .wr-overview-head h3 { font-size:17px; }
    .wr-report .wr-weekly-conclusions h4,
    .wr-report .wr-chapter-lead,
    .wr-report .wr-news-list h4,
    .wr-report .wr-watch-list h4 { font-size:15px; line-height:1.6; }
    .wr-report .wr-weekly-conclusions li::marker { font-size:15px; }
    .wr-report .wr-figure figcaption,
    .wr-report .wr-figure figcaption > strong,
    .wr-report .wr-table,
    .wr-report .wr-table caption { font-size:13.5px; }
    .wr-report .wr-inventory { font-size:12px; }
  }
}

/* 모션 (2026-11-01): 직접 누른 다섯 곳만 app.js의 tapMove가 재생한다.
   위치·높이는 최종 배치 그대로, 화살표는 Web Animations와 CSS 전환이 겹치지 않게 한다. */
:root { --tap-motion: 1; }
.tap-motion[data-tap-motion$="-out"] { pointer-events: none; }
.wr-row-arrow.tap-motion { transition: none !important; }

/* ==== 거래처 이름 검색 카드 (2026-11-01, 시안/거래처검색-시안 가 + 나의 13주 막대 — 사용자 "추천대로 가로 진행하고. 13주 막대 넣어줘."): app.js csHTML · csPlace.
   재고 탭 검색 결과 맨 위 li#cs. 흰 면 · 둥근 모서리 · 카드 테두리, 막대는 에스프레소(이번 주만 와인 아님 — 진하게), 와인은 고른 칩에만. --cs: 1이 app.js의 신호 */
:root { --cs: 1; }
#list > li.cs { list-style: none; margin: 0 0 14px; padding: 18px 18px 12px; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px var(--cardedge, var(--line2)); }
.cs-pick { margin: 0 0 12px; }
.cs-pick > small { display: block; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-ask { margin: 4px 0 6px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.cs-head > small { display: block; font-size: 12px; color: var(--muted); }
.cs-name { display: block; margin: 4px 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.cs-sum { font-size: 14px; color: var(--muted); }
.cs-sum b { font-size: 26px; font-weight: 700; color: var(--fg); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cs-head > small:last-child { margin-top: 4px; }
.cs-weeks { margin: 16px 0 4px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.cs-wh, .cs-ih { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.cs-wh b, .cs-ih b { font-size: 14px; font-weight: 650; }
.cs-wh small, .cs-ih small { font-size: 12px; color: var(--muted); }
.cs-wbars { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); align-items: end; gap: 5px; height: 64px; border-bottom: 1px solid var(--line); }
.cs-wb { display: flex; align-items: end; height: 100%; }
.cs-wb i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--fg) 45%, var(--surface)); }
.cs-wb.now i { background: var(--fg); }
.cs-wx { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.cs-ih { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cs-it { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cs-it:first-child { border-top: 0; }
.cs-it:active { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.cs-rk { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-nm { min-width: 0; }
.cs-nm b { display: block; overflow: hidden; font-size: 14.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.cs-nm small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.cs-q { display: grid; justify-items: end; gap: 2px; min-width: 112px; font-size: 12px; color: var(--muted); }
.cs-q > b { font-size: 15px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.cs-q small { font-size: 12px; white-space: nowrap; }
.cs-bar { display: block; width: 100%; height: 3px; margin-top: 3px; border-radius: 2px; background: var(--track); }
.cs-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--fg); }
.cs-more { display: block; width: 100%; margin: 4px 0 0; padding: 10px 0 4px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--fg); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.cs-note { margin: 10px 0 2px; font-size: 12px; color: var(--muted); line-height: 1.5; }
body.duo #list > li.cs { margin: 10px 12px 14px; }

/* ==== 버전 표시 (2026-11-01, 사용자 "프로그램 버전을 표시해줄 수 있니??? 어디가 좋을까 거길 누르면 업데이트 내역을 볼 수 있게" → 로고 옆 작은 글씨 · 날짜형): app.js renderVer.
   폰: 가지 사이 로고(.wrap::before, 위 10px · 96×72, body 기준) 오른쪽 아래. PC(duo): 머리 줄(고정, 80px) 제목 밑 — 제목을 6px 올려 자리를 낸다.
   새 판을 아직 안 봤으면 와인 점(켜진 것: 아직 안 본 새것). 글자는 흐린 에스프레소, 누르는 곳이 보이게 둥근 테두리 없는 알약. */
:root { --ver: 1; }
#ver { position: absolute; z-index: 5; top: 60px; left: calc(50% + 50px); display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--muted); font: inherit; font-family: "DM Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: -0.01em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#ver:hover { color: var(--fg); }
#ver:focus-visible { outline: 2px solid var(--press); outline-offset: 1px; }
#ver .verdot { width: 6px; height: 6px; border-radius: 50%; background: var(--press); }
body.gridview #ver, body.meeting #ver { display: none; }
@media (min-width: 1040px) {
  body.duo #ver { position: fixed; z-index: 41; top: 52px; left: calc(max(0px, (100vw - 1600px) / 2) + 112px); height: 20px; padding: 0 6px; background: none; font-size: 11px; }
  body.duo .cols .head h1.ptitle { transform: translateY(-7px); }
  body.duo #ver { left: calc(max(0px, (100vw - 1600px) / 2) + 115px); }   /* 글자 시작을 제목 글자(로고 86 + 틈 12 + 여백 20 + 2)에 맞춘다 */
}
@media (min-width: 1040px) and (max-width: 1179px) { body.duo #ver { left: calc(max(0px, (100vw - 1600px) / 2) + 111px); } }   /* 좁은 PC는 틈이 8px */

/* ==== 폰 경고 흰 칸 (2026-11-02, 사용자: 경고 칸 갈무리와 "이 부분이 눈에 너무 안들어오는데 개선해줄 수 있니? 시안을 우선 보여줘." → 시안/주의칸-시안(가 · 나 · 다) → "다른 디자인" (라 · 마 · 바)
   → "라 를 조금 더 개선해보자." (라1 · 라2 · 라3) → "라2 가 눈에 확 띄는데??"): app.js renderAlerts가 --wt: 1일 때 .achips.wt · .achip.wt 꼴로 그린다.
   흐름 밑 가로 한 줄, 경고마다 흰 둥근 칸(1px 테두리) — 그림(호박 동그라미, 낱박스는 먹색) · 큰 숫자 + 건 · 이름. 누르면 와인 2px 테두리 + 와인 그림 · 글자 (포인트 색 규칙).
   폰 재고 탭(.sumcard.wc)에서만, PC · 스케쥴 탭은 예전 그대로. */
:root { --wt: 1; }
body:not(.duo) .sumcard.wc #alerts:has(> .achips.wt) { padding: 12px 12px 12px; }
body:not(.duo) .sumcard.wc #alerts .achips.wt { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; background: none; overflow: visible; }
body:not(.duo) .sumcard.wc #alerts .achips.wt::before { content: none; }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt { grid-column: auto; justify-self: stretch; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; margin: 0; padding: 12px 4px 10px;
  border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--cardedge, var(--edge)); color: var(--fg); font-size: 12px; line-height: 1.3; white-space: normal; text-align: center; }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt::after { content: none; }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt > .awi { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn-t); }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt > .awi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt > .awv { display: flex; align-items: baseline; gap: 2px; min-width: 0; overflow: visible; }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt > .awv b { font-size: 22px; font-weight: 750; line-height: 26px; letter-spacing: -0.01em; color: var(--warn-t); background: none; }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt > .awv small { font-size: 12px; font-weight: 500; color: var(--muted); }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt > .awn { box-sizing: border-box; max-width: 100%; min-width: 0; padding: 0 2px; overflow: visible; white-space: normal; font-size: 12px; color: var(--fg); word-break: keep-all; }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt.calm > .awi { background: color-mix(in srgb, var(--fg) 7%, var(--surface)); color: var(--fg); }   /* 낱박스는 경고가 아니라 팔 것을 찾는 단추: 먹색 */
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt.calm > .awv b { color: var(--fg); }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt.zero > .awv b { font-weight: 500; color: var(--muted); }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt[aria-pressed="true"] { background: var(--surface); box-shadow: 0 0 0 2px var(--press); color: var(--fg); }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt[aria-pressed="true"] > .awi { background: var(--press); color: #fff; }
body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt[aria-pressed="true"] > .awv b, body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt[aria-pressed="true"] > .awn { color: var(--press); }
@media (hover: hover) { body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt:not(:disabled):not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); } }
@media (max-width: 359px) {   /* 좁은 폰: 넷이면 칸이 70px 안팎 — 글자 · 그림을 조금 줄이고 이름은 두 줄까지 */
  body:not(.duo) .sumcard.wc #alerts .achips.wt { gap: 6px; }
  body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt { padding: 10px 2px 9px; font-size: 11.5px; }
  body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt > .awi { width: 32px; height: 32px; }
  body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt > .awv b { font-size: 20px; }
  body:not(.duo) .sumcard.wc #alerts .achips.wt > .achip.wt > .awn { font-size: 11.5px; }
}

/* ==== 일별 판매: 월별 달력 · 냉동/냉장 두 색 (2026-11-02, 사용자 "냉동/냉장 판매량을 분류해서 보여주면 좋을것 같아." → 시안/냉동냉장일별-시안 나 "좋아 나로 진행하자. 그리고 달력도 월별로 볼 수 있게 하자."):
   app.js sfDayCard · sfMonthOf · sfKkDays(SFX). 칸 숫자는 냉동 + 냉장(칸 밑 띠는 같은 날 뺌: 사용자 "아래 막대는 오히려 디자인과 안어울리는것 같아."). 날 상세에 냉동(먹색) · 냉장(--chill 파랑) 나눔 막대. 달은 ‹ › 로 넘긴다 */
:root { --sfmon: 1; --sfkc: 1; --chill: #4f7396; }
.sf-mon { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.sf-mon b { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.sf-mon button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--cardedge, var(--edge)); color: var(--fg); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-mon button:disabled { opacity: 0.3; cursor: default; }
.sf-mon button:focus-visible { outline: 2px solid var(--press); outline-offset: 2px; }
.sf-dcc.fut i { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.sf-ksl i { display: inline-block; width: 10px; height: 6px; margin-right: 5px; border-radius: 2px; vertical-align: 1px; }
.sf-ksl i.f { background: var(--fg); }
.sf-ksl i.c { background: var(--chill); }
.sf-ks { max-width: 360px; margin: 10px 0 4px; }
.sf-ksb { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--chill); }
.sf-ksb s { display: block; height: 100%; background: var(--fg); }
.sf-ksl { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.sf-ksl b { font-size: 15px; font-weight: 700; color: var(--fg); }

/* 일별 판매 그날 목록을 냉동 · 냉장 둘로 (2026-11-02, 사용자 "냉장은 어떤 품목이 팔렸는지도 알 수 있었으면 좋겠는데????" → '두 목록으로'): 제목 앞 작은 색 칸(범례와 같은 색) */
.sf-hk .sf-kd { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; vertical-align: -1px; }
.sf-hk .sf-kd.f { background: var(--fg); }
.sf-hk .sf-kd.c { background: var(--chill); }
.sf-hk2 { margin-top: 22px; }
.sf-dd .sf-hk2 ~ .sf-br .sf-sh > i, .sf-daylist-c .sf-sh > i { background: var(--chill); }   /* 냉장 목록의 막대는 냉장 색 */

/* ==== PC 머리 막대 탭 간격 (2026-11-02, 사용자: 탭 일곱(재고 · 스케쥴 · 단가표 · 판매 · 시장 · 수입 · 뉴스) 갈무리와 "버튼 하나하나가 너무 붙어있는것 같은데 간격을 조금 줘볼까?"):
   판매 · 수입 탭이 생겨 일곱이 되자 탭 폭이 44px(두 글자 사이 14px · 세 글자 11px)로 줄었다 → 50px(사이 20 · 17px), 좁은 PC 38 → 42 · 33 → 36px.
   늘어난 폭은 10-28과 같이 냉동 · 냉장 · 동결 칸의 안쪽 여백(13 → 9px, 1179px 아래 9 → 7px)과 머리 막대 칸 사이(12 → 10px, 1179px 아래 8 → 7px)에서 가져온다:
   1440px에서 환율 줄이 다 보이고(363px 그대로), 1280px는 원래 잘리던 환율 줄이 10px 더 줄어든다 */
body.duo .cols .head > #modes .seg:has([data-view="sflow"]):has([data-view="iq"]) { --tw: 50px; }
@media (max-width: 1279px) { body.duo .cols .head > #modes .seg:has([data-view="sflow"]):has([data-view="iq"]) { --tw: 42px; } }
@media (max-width: 1179px) { body.duo .cols .head > #modes .seg:has([data-view="sflow"]):has([data-view="iq"]) { --tw: 36px; } }
body.duo #hacts .kseg button { padding: 0 9px; }
body.duo .cols .head { gap: 10px; }
@media (max-width: 1179px) { body.duo .cols .head { gap: 7px; } body.duo #hacts .kseg button { padding: 0 7px; } }

/* ==== 산 거래처 펼친 칸 배경을 위 → 아래 그라데이션으로 (2026-11-02, 사용자: 펼친 줄 · 흰 안쪽 카드 갈무리와 "배경에 색을 칠하지 말고 그라데이션을 위에서 아래로 줘볼까??? 그럼 조금 고급스러울것 같은데...")
   펼친 줄(위)은 먹색(회색) 8% → 5%, 그 밑 .sf-buys는 5% → 투명으로 이어져 한 덩어리로 아래에서 사라진다 (예전: 둘 다 고른 줄 색 --sel-bg 한 색) */
button.sf-br[aria-expanded="true"] { background: linear-gradient(to bottom, color-mix(in srgb, var(--fg) 8%, transparent), color-mix(in srgb, var(--fg) 5%, transparent)); }
.sf-buys { background: linear-gradient(to bottom, color-mix(in srgb, var(--fg) 5%, transparent), transparent); }   /* 회색 (같은 날 사용자 "이거 붉은색이니??? 이거 색을 회색으로 바꿔보자.": 와인 → 먹색 옅게) */

/* ==== 2026-11-02 전체 점검의 화면 손질 (사용자 "한번 쭉 훑어보고 문제점 있는지 찾아봐줘."): 일별 판매 중간 진하기 칸의 날짜 · 좁은 폰의 줄바꿈 · 관리자 탭 여섯 */
.sf-dcc.md i { color: color-mix(in srgb, var(--surface) 80%, transparent); }   /* app.js가 a 0.45~0.8 칸에 md */
.sf-dd .sf-h, .sf-dd .sf-h small { word-break: keep-all; }   /* 320px에서 '품/명' · '거래/처'로 끊겼다 */
@media (max-width: 374px) { body:not(.duo) .mz .mzk { display: grid; grid-template-columns: auto minmax(0, 1fr); } }   /* '지금'이 '지 / 금'으로 세로로 섰다: 이름 칸은 제 폭 */
.admin-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* 탭 여섯(업데이트 탭, 11-01)인데 다섯 칸이라 '업데이트'만 둘째 줄에 */
@media (max-width: 479px) { .admin-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==== 2026-11-02 전체 점검 반영 2 (사용자 "당연히 고쳐줘야지."): 폰 떠 있는 단추 밑 여백 · PC 검색 칩 · 0건 주의 알약 · '더 보기' 색 */
body:not(.duo):not(.selecting) .wrap:not(.admin) { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }   /* 떠 있는 단추(간략보고 · 판매보고 · ↑)가 마지막 줄 숫자를 가렸다 */
@media (min-width: 1440px) { body.duo:not(.plan) .sumcard.hz .hzn > .hk > .hzr { flex: 0 1 auto; width: auto; } }   /* 1440~1599px에서 칩이 96px로 줄어 '갈...'만 보였다 */
body.duo:not(.plan) .sumcard.hz #alerts .achips > .achip.zero:disabled { opacity: 0.5; }   /* 누를 것이 없는 0건 알약이 켜진 듯 보였다 */
.cust-more { color: var(--act); }   /* 'n곳 더 보기'는 하는 일 단추: 와인은 켜진 것에만 (포인트 색 규칙) */

/* 일별 판매 그날 상세: 엑셀에서 행을 못 찾은 카톡 판매 n box 포함 (2026-11-02, app.js sfDayCard .sf-um) — 어림이라 호박색 글 */
.sf-um { margin: 6px 0 0; font-size: 12.5px; color: var(--warn-t); }

/* 일별 판매 전체 품목: 10개 뒤로 흐린 미리보기 + 떠 있는 펼치기 (2026-11-02 승인 시안). */
:root { --sfdaymore: 1; }
.sf-daylist + .sf-daylist { margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--line); }
.sf-daylist > .sf-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.sf-daylist > .sf-h > small { flex: none; font-size: 12px; font-weight: 500; color: var(--muted); }
.sf-daymeta { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.sf-dayfold { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; min-height: 32px; padding: 4px 0 4px 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sf-dayfold > span { margin-left: 6px; }
.sf-dayreveal { position: relative; height: 132px; }
.sf-daypreview { height: 125px; overflow: hidden; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.35) 30%, rgba(0,0,0,.09) 64%, transparent 90%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.35) 30%, rgba(0,0,0,.09) 64%, transparent 90%); }
.sf-daypreview > .sf-br { padding-inline: 8px; }
.sf-daymore { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 12px; width: max-content; max-width: calc(100% - 16px); min-height: 46px; padding: 11px 24px; margin: 0; border: 0; border-radius: 999px; background: var(--act); color: var(--surface); box-shadow: 0 8px 19px rgba(33,12,2,.18); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sf-daymore > span { font-size: 14px; font-weight: 500; }
.sf-daymore:focus-visible, .sf-dayfold:focus-visible { outline: 2px solid var(--press); outline-offset: 4px; }
.sf-dayreveal.open { height: auto; padding: 14px 0 4px; }
.sf-dayreveal.open > .sf-daymore { position: static; transform: none; margin: 0 auto; min-height: 40px; font-size: 13px; font-weight: 600; background: var(--sum); color: var(--fg); box-shadow: none; }
.sf-dd.stale .sf-daylist { visibility: hidden; }
@media (max-width: 359px) { .sf-daymore { padding-inline: 18px; font-size: 13px; } }

/* 판매 요약 시각화 가안 (2026-11-03): 합계 · 주별 추이 · 느린 재고. */
:root { --sfsumvisual: 1; }
.sf-sumc.sf-sumvisual { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px; align-items: start; }
#list > .sf-pk .sf-sumc.sf-sumvisual { padding: 23px 20px 0; gap: 0; }
.sv-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sv-heading small { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.sv-heading h2 { margin: 4px 0 0; font-size: 23px; font-weight: 550; letter-spacing: -.06em; }
.sv-heading > span { padding: 3px 9px; border: 1px solid var(--edge); border-radius: 6px; color: var(--muted); font-size: 12px; }
.sv-period { display: flex; flex-wrap: wrap; gap: 5px 9px; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.sv-period small { font-size: 12px; }
.sv-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; }
.sv-total > b { font-size: 58px; line-height: 1.15; font-weight: 650; letter-spacing: -.065em; }
.sv-total > b > em { font-size: 22px; font-style: normal; font-weight: 450; color: var(--muted); margin-left: 4px; }
.sv-total > div { display: flex; flex-direction: column; text-align: right; gap: 4px; }
.sv-total strong { font-size: 17px; font-weight: 550; letter-spacing: -.04em; }
.sv-total small { font-size: 12px; color: var(--muted); font-weight: 400; }
.sv-total div > span { font-size: 12px; color: var(--muted); }
.sv-total div > span b { font-weight: 600; }
.sv-correction { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.sv-visual { min-width: 0; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sv-visual > header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sv-visual h3 { margin: 0; font-size: 15px; font-weight: 650; }
.sv-visual header small { font-size: 12px; color: var(--muted); }
.sv-chart { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.sv-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.sv-zero { stroke-dasharray: none; stroke: var(--edge); }
.sv-axis { fill: var(--muted); font: 12px var(--font); }
.sv-line { fill: none; stroke: #927b67; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-dot { fill: var(--surface); stroke: #927b67; stroke-width: 2; }
.sv-value { fill: var(--fg); font: 650 14px var(--font); letter-spacing: -.04em; }
.sv-date { fill: var(--muted); font: 12px var(--font); }
.sv-halo { fill: var(--press); opacity: .08; }
.sv-chart [role=button] { cursor: pointer; }
.sv-chart [aria-pressed=true] .sv-dot { fill: var(--press); stroke: var(--press); }
.sv-chart [aria-pressed=true] .sv-date { fill: var(--press); font-weight: 700; }
.sv-chart [role=button]:focus-visible .sv-dot { stroke-width: 4; }
.sv-chart [role=button]:focus-visible { outline: none; }
.sv-week { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.sv-week > div { display: flex; flex-direction: column; gap: 3px; }
.sv-week > div:last-child { text-align: right; }
.sv-week small { font-size: 12px; color: var(--muted); }
.sv-week strong { font-size: 14px; font-weight: 550; }
.sv-week b { font-size: 25px; line-height: 1.3; font-weight: 600; letter-spacing: -.05em; }
.sv-week em { font-size: 13px; font-weight: 450; font-style: normal; color: var(--muted); margin-left: 3px; }
.sv-partial, .sv-empty { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 8px 0 0; }
.sv-empty { padding: 40px 0; }
.sv-coverage { background: color-mix(in srgb, var(--sum) 45%, var(--surface)); border-radius: 9px; padding: 12px 14px; margin-top: 18px; }
.sv-coverage strong { font-size: 12px; font-weight: 550; color: var(--muted); }
.sv-coverage p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.sv-risk { padding: 17px 0; margin-top: 20px; border-top: 1px solid var(--line); }
.sv-risk > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sv-risk > div > div { display: flex; flex-direction: column; gap: 4px; }
.sv-risk small { font-size: 13px; color: var(--muted); }
.sv-risk b { font-size: 34px; line-height: 1.3; font-weight: 650; letter-spacing: -.05em; }
.sv-risk b.warn { color: var(--warn-t); }
.sv-risk em { margin-left: 4px; font-size: 15px; font-style: normal; font-weight: 500; }
.sv-risk button { border: 1px solid var(--edge); border-radius: 8px; background: var(--surface); padding: 9px 12px; min-height: 40px; color: var(--act); font: inherit; font-size: 12px; cursor: pointer; }
.sv-risk button > span { margin-left: 10px; }
.sv-risk button:disabled { opacity: .5; cursor: default; }
.sv-risk button:focus-visible { outline: 2px solid var(--press); outline-offset: 3px; }
.sv-risk p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.sv-risk p strong { font-weight: 650; color: var(--warn-t); }
.sf-sumvisual > .sf-basis { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 14px 0; margin: 0; }
@media (min-width: 1280px) {
  .sf-sumc.sf-sumvisual { grid-template-columns: minmax(280px, .95fr) minmax(0, 1.2fr); column-gap: 30px; }
  .sv-main, .sv-coverage, .sv-risk { grid-column: 1; }
  .sv-visual { grid-column: 2; grid-row: 1 / 4; border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 28px; margin: 0; }
  .sv-chart { margin-top: 20px; }
  .sf-sumvisual > .sf-basis { margin-top: 12px; padding-bottom: 0; }
}
@media (max-width: 359px) { #list > .sf-pk .sf-sumc.sf-sumvisual { padding-inline: 16px; } .sv-total > b { font-size: 48px; } .sv-total strong { font-size: 15px; } }

/* 판매 영역별 묶음 (2026-11-03): 선택줄과 바뀌는 목록을 붙이고, 일별/기간별을 분리한다. */
:root { --sflayout: 1; }
.sf-jump { position: sticky; top: 0; z-index: 8; display: none; gap: 24px; min-height: 46px; padding: 0 4px; background: var(--bg); border-bottom: 1px solid var(--line); }
.sf-jump button { padding: 11px 0 9px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.sf-jump [aria-current] { color: var(--press); border-bottom-color: var(--press); font-weight: 650; }
.sf-jump button:focus-visible, .sf-localchips button:focus-visible, .sf-periodpicker button:focus-visible { outline: 2px solid var(--press); outline-offset: 3px; }
#list > .sf-nav { display: none; }
.sf-summarycontrols { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.sf-summarycontrols > span { font-size: 12px; color: var(--muted); }
.sf-periodpicker { display: flex; gap: 2px; padding: 3px; border-radius: 24px; background: var(--sum); }
.sf-periodpicker button { border: 0; padding: 6px 14px; border-radius: 20px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.sf-periodpicker [aria-pressed=true] { background: var(--surface); box-shadow: 0 2px 4px #210c0218; color: var(--press); font-weight: 650; }
.sf-periodcontrols { padding: 16px 0; }
.sf-periodcontrols > div:first-child, .sf-daycontrols > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.sf-periodcontrols strong, .sf-daycontrols strong { font-size: 16px; font-weight: 650; }
.sf-periodcontrols > div > span, .sf-daycontrols > div > span { font-size: 11px; color: var(--muted); }
.sf-localchips { display: flex; gap: 6px; }
.sf-localchips button { flex: 1; min-width: 0; padding: 7px 6px; border: 1px solid var(--edge); border-radius: 8px; background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.sf-localchips [aria-pressed=true] { color: var(--press); border-color: var(--press); background: var(--sel-bg); box-shadow: inset 0 0 0 .5px var(--press); font-weight: 650; }
body.sflow.sf-layout #list > .sf-periodhead { position: sticky; top: 0; z-index: 5; background: var(--surface); padding: 0 16px; border-bottom: 1px solid var(--line); }
body.sflow.sf-layout #list > .sf-pb > .sf-periodcontrols { padding: 18px 0 14px; }
body.sflow.sf-layout .sf-dc, body.sflow.sf-layout #list > .sf-pd .sf-dc { overflow: visible; }
body.sflow.sf-layout .sf-dcb { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); align-items: stretch; gap: 28px; }
.sf-dayoverview { min-width: 0; padding-right: 24px; border-right: 1px solid var(--line); }
.sf-daydetail { min-width: 0; }
.sf-daytotal { margin-top: 22px; }
.sf-daytotal > small { display: block; font-size: 12.5px; color: var(--muted); }
.sf-daytotal .big { margin: 8px 0 5px; }
.sf-daytotal > span { display: block; font-size: 12.5px; color: var(--muted); }
.sf-daycontrols { position: sticky; top: 0; z-index: 6; padding: 8px 0 15px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 7px 12px -12px #210c0240; }
.sf-daynote { color: var(--muted); font-size: 11px; margin-top: 12px; }
.sf-daynote summary { cursor: pointer; }
.sf-daynote .sf-note { line-height: 1.7; }
.sf-dayresults { min-height: 80px; }
body.sflow.sf-layout .sf-dd.stale .sf-dayresults { visibility: hidden; }
body.sflow.sf-layout .sf-dc, body.sflow.sf-layout .sf-sumc, body.sflow.sf-layout .sf-periodcontrols { scroll-margin-top: 12px; }
@media (min-width: 1280px) {
  body.sflow.sf-layout .sf-sumvisual .sv-main { grid-row: 2; }
  body.sflow.sf-layout .sf-sumvisual .sv-visual { grid-row: 2 / 5; }
}
@media (max-width: 1279px) {
  body.sflow.sf-layout .sf-dcb { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sf-dayoverview { border-right: 0; padding-right: 0; }
  .sf-daycontrols { border-top: 1px solid var(--line); padding-top: 13px; }
}
@media (max-width: 767px) {
  body.sflow.sf-layout #sfctl { padding-bottom: 0; }
  .sf-summarycontrols > span { font-size: 11px; }
  .sf-periodpicker button { padding: 6px 11px; }
  .sf-daycontrols > div > span { font-size: 10px; }
  .sf-daycontrols strong { font-size: 15px; }
  body.sflow.sf-layout .sf-dayresults .sf-br { grid-template-columns: minmax(80px, 1fr) minmax(22px, .55fr) 53px 57px; gap: 7px; }
  body.sflow.sf-layout .sf-dayresults .sf-br .dpill { max-width: 100%; }
  body.sflow.sf-layout .sf-dayresults .sf-hk { align-items: start; }
}
@media (max-width: 359px) { .sf-jump { gap: 20px; } .sf-localchips button { font-size: 11px; } .sf-daycontrols > div > span { font-size: 9px; } }
.sf-periodwait { padding: 16px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.sf-daytotal .big { font-size: 44px; }

/* 일별 달력과 판매 내역을 각각의 카드로 (2026-11-03). */
:root { --sfdaycards: 1; }
body.sflow.sf-layout .sf-dc.sf-daycards,
body.sflow.sf-layout #list > .sf-pd .sf-dc.sf-daycards {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
  align-items: start; gap: 20px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
body.sflow.sf-layout .sf-daycards > .dcard {
  min-width: 0; min-height: 0; overflow: visible; border-radius: 22px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--cardedge), var(--cardlift);
}
.sf-daycards .sf-calendarcard .sf-body { padding-top: 10px; }
.sf-daycards .sf-daytotal { margin: 0 0 22px; padding-top: 22px; }
.sf-daycards .sf-daycontrols { border-top: 1px solid var(--line); padding-top: 13px; }
.sf-dd .sf-br > :is(.gr, .estb) { justify-self: start; width: fit-content; max-width: 100%; }
.sf-dd .sf-br > .sf-daybrand { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
@media (max-width: 1279px) {
  body.sflow.sf-layout .sf-dc.sf-daycards,
  body.sflow.sf-layout #list > .sf-pd .sf-dc.sf-daycards { grid-template-columns: minmax(0, 1fr); }
}

/* PC 판매 판 정리 (2026-11-03, 시안/판매PC정리-시안 가 · 사용자 "오케이 추천대로 진행하자."): app.js sfPcOn · sfSumPc · sfDayCard의 .sf-pcday.
   요약은 머리 한 줄(제목 · 출처 · 기간) + 합계 | 주별 판매 | 판매 속도 느림 세 칸(630 → 400px 밑), 일별은 한 카드(위 달력 | 그날 합계, 밑 냉동 | 냉장 두 칸 — 달력 카드 밑 900px 빈자리 없앰),
   판의 카드 제목은 28px · 500 · −0.055em 한 꼴, 카드 안 소제목은 17px · 650. --sfpc가 없으면(옛 css) app.js가 지금 꼴을 그린다 */
:root { --sfpc: 1; }
body.duo.sflow .sf-sumc.sf-sumpc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr); grid-template-areas: "head head head" "main vis risk" "basis basis basis"; column-gap: 0; padding: 26px 30px 0; }
body.duo.sflow .sf-sumc.sf-sumpc > .sv-heading { grid-area: head; align-items: flex-start; margin: 0 0 18px; }
body.duo.sflow .sf-sumc.sf-sumpc .sv-period { margin: 7px 0 0; font-size: 13px; }
body.duo.sflow .sf-sumc.sf-sumpc > .sv-main { grid-area: main; min-width: 0; padding-right: 26px; }
body.duo.sflow .sf-sumc.sf-sumpc > .sv-visual { grid-area: vis; margin: 0; padding: 0 26px; border-top: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
body.duo.sflow .sf-sumc.sf-sumpc > .sv-risk { grid-area: risk; margin: 0; padding: 0 0 0 26px; border-top: 0; }
body.duo.sflow .sf-sumc.sf-sumpc > .sf-basis { grid-area: basis; margin-top: 16px; padding: 14px 0; }
.sf-sumpc .sv-total { margin: 0; }
.sf-sumpc .sv-total > b { font-size: 62px; line-height: 1; }
.sf-sumpc .sv-sub { margin: 12px 0 0; font-size: 14px; }
.sf-sumpc .sv-sub b { font-weight: 650; }
.sf-sumpc .sv-coverage { margin: 16px 0 0; padding: 0; border-radius: 0; background: none; }
.sf-sumpc .sv-coverage strong { font-size: 14px; font-weight: 500; color: var(--fg); }
.sf-sumpc .sv-coverage strong b { font-weight: 700; }
.sf-sumpc .sv-coverage strong small { margin-left: 7px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.sf-sumpc .sv-coverage p { margin: 5px 0 0; line-height: 1.6; }
.sf-sumpc .sv-correction { margin: 12px 0 0; }
.sf-sumpc .sv-visual h3, .sf-sumpc .sv-risk h3, .sf-pcday .sf-daycontrols strong { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.03em; }
.sf-sumpc .sv-chart { margin-top: 4px; }
.sf-sumpc .sv-week { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; justify-content: flex-start; margin-top: 4px; padding-top: 10px; }
.sf-sumpc .sv-week strong { font-size: 13px; }
.sf-sumpc .sv-week b { font-size: 20px; line-height: 1.2; }
.sf-sumpc .sv-risk > b { display: block; margin: 14px 0 8px; font-size: 46px; line-height: 1; }
.sf-sumpc .sv-risk p { margin: 0; font-size: 13px; line-height: 1.65; }
.sf-sumpc .sv-risk button { margin-top: 16px; font-size: 13px; }
/* 일별: 한 카드 */
body.duo.sflow .sf-dc.sf-pcday { padding: 26px 30px 28px; }
body.duo.sflow .sf-dc.sf-pcday > .dhead { padding: 0; margin: 0 0 6px; border: 0; }
body.duo.sflow .sf-dc.sf-pcday > .dhead > .dttl { flex: 1 1 auto; min-width: 0; }
body.duo.sflow .sf-dc.sf-pcday .dttl { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 7px; align-items: start; }
body.duo.sflow .sf-dc.sf-pcday .dttl > h2 { grid-column: 1; grid-row: 1; margin: 0; }
body.duo.sflow .sf-dc.sf-pcday .dttl > .sf-co { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; }
body.duo.sflow .sf-dc.sf-pcday .dttl > .sf-sub { grid-column: 1; grid-row: 2; margin: 0; font-size: 13px; color: var(--muted); }
body.duo.sflow .sf-dc.sf-pcday > .sf-basis { margin: 4px 0 0; }
body.duo.sflow .sf-dc.sf-pcday > .sf-body { display: block; padding: 0; }
.sf-pcday .sf-pctop { display: grid; grid-template-columns: minmax(330px, 400px) minmax(0, 1fr); gap: 40px; align-items: start; padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
.sf-pcday .sf-pctop > .sf-daytotal { margin: 0; padding: 4px 0 0; }
.sf-pcday .sf-daytotal .big { font-size: 56px; }
.sf-pcday .sf-dcg .sf-dcc { height: 46px; }
/* 그날 많이 팔린 다섯 (시안/일별빈자리-시안 나): 합계 밑, 줄 = 순위 · 이름 · 막대 · t · box */
.sf-pcday .sf-day5 { max-width: 640px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.sf-pcday .sf-day5 h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; font-size: 14px; font-weight: 650; }
.sf-pcday .sf-day5 h4 small { font-size: 12px; font-weight: 400; color: var(--muted); }
.sf-pcday .sf-d5r { display: grid; grid-template-columns: 20px minmax(90px, 1fr) minmax(40px, 1.2fr) 58px 72px; gap: 10px; align-items: center; min-height: 34px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sf-pcday .sf-d5r:last-child { border-bottom: 0; }
.sf-pcday .sf-d5r > .rk { font-size: 12px; color: var(--muted); text-align: center; }
.sf-pcday .sf-d5r > .nmw { display: flex; align-items: center; min-width: 0; }
.sf-pcday .sf-d5r > .nmw .nm { overflow: hidden; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.sf-pcday .sf-d5r .sf-kd { flex: none; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 2px; background: var(--fg); }
.sf-pcday .sf-d5r .sf-kd.c, .sf-pcday .sf-d5r .sf-sh.c > i { background: var(--chill); }
.sf-pcday .sf-d5r > b { text-align: right; font-weight: 700; }
.sf-pcday .sf-d5r > b small { margin-left: 1px; font-size: 11px; font-weight: 500; color: var(--muted); }
.sf-pcday .sf-d5r > span:last-child { text-align: right; font-size: 12px; color: var(--muted); }
.sf-dd.stale .sf-day5 { visibility: hidden; }
.sf-pcday .sf-daycontrols { border-top: 0; padding-top: 16px; }
body.duo.sflow .sf-dc.sf-pcday > .sf-kkn { margin: 12px 0 0; }
/* 냉동 | 냉장 두 칸은 판이 넉넉할 때만(1380px 넘음 = 카드 안쪽 880px 넘음). 좁으면 예전처럼 냉동 밑에 냉장. 두 칸의 제목은 같은 높이에서 (냉동 제목의 .sf-dd .sf-h 위 여백 18px가 칸 안에서 접히지 않아 냉장보다 18px 낮았다, 독립 검토) */
@media (min-width: 1380px) {
  .sf-pcday .sf-dayresults.sf-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; padding-top: 18px; }
  .sf-pcday .sf-dayresults.sf-two > .sf-daylist { min-width: 0; margin-top: 0; padding-top: 0; border-top: 0; }
  .sf-pcday .sf-dayresults.sf-two > .sf-daylist > .sf-h { margin-top: 0; }
}
/* 좁은 PC(1040 ~ 1379px): 요약은 합계 | 주별 판매 두 칸, 판매 속도 느림은 밑 한 줄 · 일별 윗줄은 1180px 밑에서 달력 밑에 그날 합계 (세 칸이면 합계 칸이 130px 남짓이라 '1,328t'가 넘쳤다, 독립 검토) */
@media (max-width: 1379px) {
  body.duo.sflow .sf-sumc.sf-sumpc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "head head" "main vis" "risk risk" "basis basis"; }
  body.duo.sflow .sf-sumc.sf-sumpc > .sv-visual { padding-right: 0; border-right: 0; }
  body.duo.sflow .sf-sumc.sf-sumpc > .sv-risk { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 18px; margin-top: 20px; padding: 16px 0 0; border-top: 1px solid var(--line); }
  .sf-sumpc .sv-risk > b { margin: 0; font-size: 34px; }
  .sf-sumpc .sv-risk button { margin: 0; }
}
@media (max-width: 1179px) {
  .sf-pcday .sf-pctop { grid-template-columns: minmax(0, 400px); gap: 22px; }
}
/* 판의 카드 제목 한 꼴 */
body.duo.sflow #pbody .sf-sumpc .sv-heading h2, body.duo.sflow #pbody .sf-pcday .dttl > h2 { font-size: 28px; font-weight: 500; letter-spacing: -.055em; line-height: 1.15; }
body.duo.sflow #pbody .dcard > .dhead .dttl > h2, body.duo.sflow #pbody .sf-ic .sf-ih > h2 { font-size: 28px; font-weight: 500; letter-spacing: -.055em; line-height: 1.15; }
body.duo.sflow #pbody .sf-card .sf-body > h3.sf-h { font-size: 17px; font-weight: 650; letter-spacing: -.03em; }

/* 공통 재고 검색 (2026-11-03, 시안 A): 검색창만 추가하고 각 페이지 본문은 유지한다.
   새 JS가 붙인 클래스에서만 보이게 하여 옛 JS + 새 CSS에서도 숨겨진 검색창이 갑자기 나오지 않게 한다. */
:root { --stock-search: 1; }
body.stock-search-source .top { display: flex; }
body.stock-search-source .top > :not(.srow):not(#stock-search-help):not(#sfctl) { display: none; }
body.stock-search-source #top > .srow { display: flex; }
body.stock-search-source .top .selbtn { display: none; }
body.stock-search-source #top > .stock-search-help { display: block; }
.stock-search-help { margin: 0 4px; font-size: 11px; line-height: 1.5; color: var(--muted); }
/* 돌아가기 버튼 제거 (2026-11-03): 옛 app.js가 캐시에 남아 있어도 버튼과 자리 여백을 숨긴다. */
#stock-search-back { display: none; }
body.stock-search-source:not(.duo) .top { position: static; }
/* 검색창이 없던 시장·수입·뉴스에 남은 머리 줄 아래 14px 여백을 다른 탭과 같은 2px로 맞춘다. */
body.stock-search-source:not(.duo):not(.gridview) .cols .head { margin-bottom: 2px; }
@media (min-width: 1040px) {
  body.duo.stock-search-source .cols > .main::before { top: calc(var(--duoTop, 124px) + 14px); }
}

/* 뉴스 요약 띠 A안 (2026-11-03): 폰은 제목 한 줄 + 배경/출처 한 줄, PC는 기존 36px 높이.
   새 마크업에서만 덮어 쓴다. 옛 JS + 새 CSS와 새 JS + 옛 CSS는 기존 뉴스 단추를 유지한다. */
:root { --nwt-compact: 1; }
.nwtop.nwcompact { display: block; padding: 0; border-radius: 11px; background: var(--surface); cursor: default; }
.nwtop.nwcompact > .nwt-toggle { position: relative; display: block; padding: 11px 12px; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nwt-toggle::-webkit-details-marker { display: none; }
.nwt-toggle:focus-visible { outline: 2px solid var(--press); outline-offset: -2px; border-radius: 11px; }
.nwtop.nwcompact .nwv { display: grid; min-width: 0; }
.nwtop.nwcompact .nwv > .nwu { display: block; min-width: 0; }
.nwt-first { display: flex; align-items: center; min-width: 0; gap: 7px; padding-right: 20px; height: 20px; }
.nwcompact .tg { padding: 2px 7px; font-size: 10px; line-height: 16px; }
.nwt-headline { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; letter-spacing: -.025em; line-height: 20px; }
.nwt-second { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; line-height: 14px; }
.nwt-context { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }
.nwt-source { flex: none; font-size: 10px; color: var(--muted); white-space: nowrap; max-width: 48%; overflow: hidden; text-overflow: ellipsis; }
.nwt-chevron { position: absolute; right: 12px; top: 12px; font-size: 18px; line-height: 16px; color: var(--muted); }
.nwcompact[open] .nwt-chevron { transform: rotate(180deg); }
.nwt-detail { border-top: 1px solid var(--line); margin: 0 12px; padding: 14px 0; }
.nwt-full { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.65; letter-spacing: -.025em; overflow-wrap: anywhere; }
.nwt-points { margin: 14px 0 0; padding-left: 17px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.nwt-points li + li { margin-top: 7px; }
.nwt-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; font-size: 11px; color: var(--muted); }
.nwt-foot > span { min-width: 0; overflow-wrap: anywhere; }
.nwt-foot button { flex: none; min-height: 36px; padding: 6px 10px; border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; }
body.duo .nwtop.nwcompact { height: auto; max-height: calc(100vh - 104px); overflow-y: auto; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
body.duo .nwcompact > .nwt-toggle { padding: 8px 14px; height: 36px; }
body.duo .nwtop.nwcompact .nwv > .nwu { display: flex; align-items: center; gap: 24px; padding-right: 22px; }
body.duo .nwt-first { flex: 1 1 45%; padding-right: 0; }
body.duo .nwt-second { flex: 0 1 auto; min-width: 0; max-width: 55%; margin: 0; gap: 24px; }
body.duo .nwt-source { font-size: 11px; }
body.duo .nwt-chevron { top: 10px; right: 14px; }
body.duo .nwt-detail { margin-inline: 14px; padding: 16px 0; }
body.duo .nwt-full, body.duo .nwt-points { max-width: 760px; }

/* 시간줄 달·주 선택 단추를 조금 더 크게 (2026-11-03). 가로 간격은 유지해 좁은 화면에도 맞춘다. */
body:not(.duo) .mz .mzm { height: 32px; line-height: 32px; }
body:not(.duo) .mz .mzri::before { top: 19px; transform: translateY(-50%); }
/* 최근 90일 산 거래처를 접어 두기 (2026-11-04, 사용자: "구매 거래처는 접어놓고 펼쳐서 볼 수 있게 하자. 재고가 더 중요한데 화면 가운데에 크게 자리잡고 있어.").
   --custf: 1은 app.js custHTML에 주는 신호: 머리 줄이 단추(.cust-tg, ⌄)가 되고, 접힌 칸(.shut)은 그 한 줄만. 폰 · PC 같이 */
:root { --custf: 1; }
.cust .cust-tg { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; cursor: pointer; font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--fg); }
.cust .cust-tg small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.cust .cust-tg::after { content: ""; flex: none; width: 14px; height: 14px; background: var(--muted); transition: transform .15s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.cust .cust-tg[aria-expanded="true"] { margin-bottom: 4px; }
.cust .cust-tg[aria-expanded="true"]::after { transform: rotate(180deg); }
.cust .cust-tg:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 6px; }
.cust.shut { padding-block: 6px; }
@media (prefers-reduced-motion: reduce) { .cust .cust-tg::after { transition: none; } }
/* ── shadcn 꼴 PC (2026-11-04, 사용자: "pc 버전만 이 시안으로 지금 방식으로 진행해보자." → 시안/shadcn-2026-11-04 '다': 크림 · 에스프레소 · 와인 + shadcn 부품) ──
   PC(body.duo, 1040px 이상)에만 걸린다. 폰은 그대로. 짜임 · 높이 · 자리는 건드리지 않고 모서리 · 테두리 · 그림자 · 칩 꼴만 바꾼다.
   되돌리기: 이 블록(여기부터 '── shadcn 꼴 PC 끝 ──'까지)을 통째로 지운다. */
/* 숫자 · 영문만 Geist, 고정폭(B/L 등)은 Geist Mono (2026-11-04, 사용자: 글꼴 시험 가 · 나 중 "나 로 진행하자."). 한글은 Wanted Sans 그대로: unicode-range가 라틴 글자만 */
@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.1.0/files/geist-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027; }
@font-face { font-family: "Geist"; font-weight: 500; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.1.0/files/geist-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027; }
@font-face { font-family: "Geist"; font-weight: 600; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.1.0/files/geist-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027; }
@font-face { font-family: "Geist"; font-weight: 700; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.1.0/files/geist-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027; }
@font-face { font-family: "Geist Mono"; font-weight: 400 500; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5.1.0/files/geist-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF; }
:root { --shk: 1; }   /* app.js 신호: 이 블록이 있을 때만 최근 검색 판 밑에 ⌘K 안내 줄을 붙인다 */
@media (min-width: 1040px) {
  body.duo { --sh-line: #e3dbcd; --sh-line2: #d0c5b2; --sh-sm: 0 1px 2px rgba(33, 12, 2, .05); --sh-r: 8px; --sh-card: 12px; --sh-tint: color-mix(in srgb, var(--press) 7%, var(--surface)); }

  /* 1. 맨 위 줄: 단색 띠 + 밑줄 한 줄 (나뭇잎 그림 위를 덮는다) */
  body.duo .cols .head { background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: 0 1px 0 var(--sh-line); }
  /* 냉동 · 냉장 · 동결과 탭: 옅은 트랙 + 고른 칸은 흰 칸(모서리 7px) + 와인 글자 */
  body.duo #hacts .kseg, body.duo .cols .head > #modes .seg { padding: 3px; border-radius: 10px; background: #f3ede3; box-shadow: inset 0 0 0 1px var(--sh-line); }
  body.duo #hacts .kseg button { height: 32px; line-height: 32px; border-radius: 7px; }
  /* 고른 종류는 와인 채움 그대로 (10-31 포인트 색 규칙, 시험/t-point) */
  body.duo .cols .head > #modes .seg .ink { left: 3px; top: 3px; bottom: 3px; border-radius: 7px; box-shadow: 0 1px 3px rgba(33, 12, 2, .12), 0 1px 2px rgba(33, 12, 2, .06); }
  /* 오른쪽 단추들(환율 · 연결 · 엑셀 모드 · 설정 · 나가기): 알약 → 모서리 8px, 테두리 한 줄 + 옅은 그림자 */
  body.duo .cols .head :is(.hbtn, .mtbtn, #rate > span:first-child, #rate .cnpill) { border-radius: var(--sh-r); box-shadow: inset 0 0 0 1px var(--sh-line), var(--sh-sm); }

  /* 2. 카드: 모서리 12px · 흰 바탕 · 테두리 한 줄 + 옅은 그림자 (위에서 내려오던 회색 물결은 뺀다) */
  body.duo :is(.top, .dcard, .sumcard, .wr-pane .wr-report), body.duo .cols > .main::before { border-radius: var(--sh-card); background: var(--surface); }   /* 주간 보고서 면은 묶음 카드와 같은 꼴 (시험/t-report-ui) */   /* ::before는 :is() 안에 못 쓴다 (독립 검토) */
  body.duo :is(.top, .sumcard), body.duo .cols > .main::before { box-shadow: 0 0 0 1px var(--sh-line), var(--sh-sm); }
  body.duo :is(.dcard, .wr-pane .wr-report) { border-color: var(--sh-line); box-shadow: 0 0 0 1px var(--sh-line), 0 1px 3px rgba(33, 12, 2, .06), 0 10px 24px -16px rgba(33, 12, 2, .22); }

  /* 3. 검색창: 모서리 8px · 높이 그대로, 검색 단추는 작은 네모 */
  body.duo .top .search { border-radius: var(--sh-r); }
  body.duo .top .search #q { border-radius: var(--sh-r); }
  body.duo .top .search .qgo { border-radius: 7px; }
  body.duo .top .chip.selbtn { border-radius: var(--sh-r); }

  /* 4. 필터 칩: shadcn 점선 ⊕ 단추 (아래 화살표 대신 ⊕, 켜진 칩은 와인 테두리 그대로) */
  body.duo .top .fbar .chip { height: 30px; border-radius: 7px; }
  body.duo .top .fbar .chip.drop:not(.on):not([aria-expanded="true"]) { border: 1px dashed var(--sh-line2); box-shadow: none; background: var(--surface); }
  body.duo .top .fbar .chip.drop { gap: 0; padding: 0 10px 0 8px; }   /* ⊕가 화살표 자리를 대신하므로 폭은 그대로: '내 업무'까지 두 줄에 든다 */
  body.duo .top .fbar .chip.drop > svg { display: none; }
  body.duo .top .fbar :is(.chip.drop.on, .chip.drop[aria-expanded="true"], .chip.clear) { border-radius: 7px; }
  body.duo .top .fbar .chip.drop.on::before { display: none; }   /* 켜진 칩은 값이 보이므로 ⊕를 뺀다 */
  body.duo .top .fbar .chip.drop.on { gap: 4px; padding: 0 10px; }
  body.duo .top .fbar .chip.drop.on > svg { display: inline-block; }   /* 켜진 칩: 값 + 원래의 ⌄ (빈 오른쪽이 남지 않게) */
  body.duo .top .fbar .chip.drop::before { content: ""; flex: none; width: 12px; height: 12px; margin-right: 4px; background: currentColor; opacity: .7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8M12 8v8'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8M12 8v8'/%3E%3C/svg%3E") center / contain no-repeat; }

  /* 5. 목록: 줄을 카드 안쪽으로 띄우고 모서리 8px, 고른 줄은 와인 7% + 옅은 와인 테두리 */
  body.duo #list > li.group.duo { margin: 0 6px; border-radius: var(--sh-r); }   /* 고른 줄의 와인 7% 바탕(--sel-bg)은 li 그대로: 모서리만 둥글게 (시험/t-point) */
  body.duo #list > li.group.duo > .gline { border-radius: var(--sh-r); }
  body.duo #list > li.group.duo.dsel { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--press) 20%, transparent); }
  body.duo #stale { border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sh-line); color: var(--fg); }
  body.duo #duobar > button { border-radius: var(--sh-r); }

  /* 6. 요약 카드: 창고 재고 · 통관 전 숫자를 크게 (shadcn 숫자 카드처럼), 칩들은 알약 → 모서리 7px */
  /* 6-0. 재고 탭 요약 = 숫자 카드 셋(창고 재고 · 통관 전 · 어제 이후) + 그 밑 주의 줄 (시안 '다'의 숫자 카드). app.js는 그대로: 이미 있는 조각을 격자로 다시 놓는다.
     시간줄을 펼치면(.hzl.open, 그룹 카드 위에 뜬다) 바깥 카드 바탕을 되살려 그 안에서 보이게 한다 */
  body.duo:not(.plan) .sumcard.hz.tl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); grid-template-areas: "s h c" "a a a" "l l l"; gap: 12px; }
  /* 어제 이후가 없으면(냉장 · 동결, 기준 자료가 없는 날) 숫자 카드 둘만: 오른쪽 빈칸을 남기지 않는다 */
  body.duo:not(.plan) .sumcard.hz.tl:not(:has(> #changes:not([hidden]))) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "s h" "a a" "l l"; }
  body.duo:not(.plan) .sumcard.hz.tl:not(:has(.hzl.open)) { padding: 0; border: 0; background: none; box-shadow: none; }   /* 숫자 · 시간줄 조각은 #summary(display: contents) 안에 있다 */
  body.duo:not(.plan) .sumcard.hz.tl:has(.hzl.open) { margin: -12px; padding: 12px; }   /* 바탕만 12px 바깥으로: 펼치고 접을 때 숫자 카드가 움직이지 않는다 */
  body.duo:not(.plan) .sumcard.hz.tl .hzn { display: contents; }
  body.duo:not(.plan) .sumcard.hz.tl .hzn > .hk:first-child { grid-area: s; }
  body.duo:not(.plan) .sumcard.hz.tl .hzn > .hk:nth-child(2) { grid-area: h; }
  body.duo:not(.plan) .sumcard.hz.tl > #changes { grid-area: c; }
  body.duo:not(.plan) .sumcard.hz.tl > #alerts { grid-area: a; }
  body.duo:not(.plan) .sumcard.hz.tl .hzl { grid-area: l; }
  body.duo:not(.plan) .sumcard.hz.tl .hzn > .hk, body.duo:not(.plan) .sumcard.hz.tl > #changes, body.duo:not(.plan) .sumcard.hz.tl > #alerts { box-sizing: border-box; min-width: 0; margin: 0; border-radius: var(--sh-card); background: linear-gradient(to top, #f8f3eb, var(--surface)); box-shadow: 0 0 0 1px var(--sh-line), var(--sh-sm); }
  /* 숫자 카드: 윗줄 점 + 이름, 아랫줄 큰 숫자 + 톤 · 박스 · 건 (::before가 줄을 끊는다) */
  body.duo:not(.plan) .sumcard.hz.tl .hzn > .hk { align-self: stretch; justify-self: stretch; height: auto; display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; column-gap: 7px; row-gap: 6px; padding: 15px 18px 16px; font-size: 13.5px; font-weight: 500; line-height: 18px; color: var(--muted); }
  body.duo:not(.plan) .sumcard.hz.tl .hzn > .hk::before { content: ""; order: 1; flex-basis: 100%; height: 0; }
  body.duo:not(.plan) .sumcard.hz.tl .hzn > .hk > :is(b, small) { order: 2; }
  body.duo:not(.plan) .sumcard.hz.tl .hzn > .hk > b { font-size: 30px; font-weight: 600; letter-spacing: -0.035em; line-height: 34px; color: var(--fg); }
  body.duo:not(.plan) .sumcard.hz.tl .hzn > .hk > small { min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: normal; }
  body.duo:not(.plan) .sumcard.hz.tl .hzn > .hk > .hzr { margin: -3px 0 -3px auto; }   /* 검색 중 ✕ 초기화 칩: 창고 재고 카드 윗줄 오른쪽 */
  /* 어제 이후 카드: 윗줄 'n/n(요) 이후', 아랫줄 큰 건수, 그 밑 칩 넷 */
  body.duo:not(.plan) .sumcard.hz.tl > #changes { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 15px 18px 16px; }
  body.duo:not(.plan) .sumcard.hz.tl > #changes .since { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px; font-size: 13.5px; line-height: 18px; }
  body.duo:not(.plan) .sumcard.hz.tl > #changes .since::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  body.duo:not(.plan) .sumcard.hz.tl > #changes .since > b { order: 2; font-size: 30px; font-weight: 600; letter-spacing: -0.035em; line-height: 34px; }
  body.duo:not(.plan) .sumcard.hz.tl > #changes .since > b small { margin-left: 2px; font-size: 15px; letter-spacing: 0; }
  /* 주의 줄: 카드 하나 안에 '주의' + 칩 다섯, 엑셀 정리 필요 줄은 그 밑 */
  body.duo:not(.plan) .sumcard.hz.tl > #alerts { grid-template-columns: auto minmax(0, 1fr); padding: 10px 14px 18px; row-gap: 6px; }   /* 밑 18px: 카드 아래 가장자리의 '시간줄 보기' 알약(-13px)이 칩을 덮지 않게 */
  body.duo:not(.plan) .sumcard.hz.tl > #alerts .atitle { justify-self: start; }
  body.duo:not(.plan) .sumcard.hz.tl > #alerts .atidy { grid-column: 2; }
  body.duo:not(.plan) .sumcard.hz.tl :is(#alerts .achips > .achip, #changes .row > .alert.chg) { border-radius: 7px; }
  body.duo .sumcard.hz .hztl { border-radius: 7px; }

  /* 6-1. 그 밖의 PC 칩 · 알약 단추 (스케쥴 요약의 주의 칩, 판매 탭 기간 고르기, 떠 있는 표 생성 단추): 모서리 7~10px */
  body.duo :is(.chip, .sumcard .alert, .sf-periodpicker, .sf-seg) { border-radius: 7px; }
  body.duo :is(.sf-periodpicker, .sf-seg) { border-radius: 10px; }
  body.duo :is(.sf-periodpicker, .sf-seg) > button { border-radius: 7px; }
  body.duo :is(#tfab, #bfab, #sfab) { border-radius: 10px !important; }   /* 내려 읽을 때 동그라미로 줄었다 커지는 단추(fabMorph)라 높은 무게가 필요하다 */

  /* 7. 묶음 카드: 단추 묶음 · 나누기 칩 · 상자 모서리 */
  body.duo .dcard .actg { border-radius: var(--sh-r); }
  body.duo .dcard .actg > .act:first-child { border-radius: var(--sh-r) 0 0 var(--sh-r); }
  body.duo .dcard .actg > .act:last-child { border-radius: 0 var(--sh-r) var(--sh-r) 0; }
  body.duo .dcard .dsplit button { border-radius: 7px; }
  /* 구역 바로가기(창고 재고 · 통관 전 · 입고 예정 …): 칩 → shadcn 밑줄 탭 띠. 누르면 그 구역으로 내려간다(고른 상태는 없다) */
  body.duo .dcard .djump:has(> button) { gap: 22px; align-items: stretch; margin: 0 0 12px; padding: 0 22px; box-shadow: inset 0 -1px 0 var(--sh-line); }
  body.duo .dcard .djump > button { position: relative; height: 40px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted); font-weight: 600; }
  body.duo .dcard .djump > button b { padding: 0 6px; border-radius: 5px; background: #f3ede3; font-size: 11.5px; line-height: 18px; color: var(--fg); }
  @media (hover: hover) { body.duo .dcard .djump > button:hover { box-shadow: none; color: var(--fg); } body.duo .dcard .djump > button:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--fg); } }
  body.duo .dcard .djump:has(> button) > .dsplit { align-self: center; }
  /* 8. 최근 검색 판 = shadcn 명령 메뉴 꼴: 시계 아이콘 달린 목록 + 밑에 ⌘K 안내 (app.js showRecent의 .rfoot) */
  body.duo .recent { padding: 4px; border: 1px solid var(--sh-line); border-radius: 10px; box-shadow: 0 18px 40px -12px rgba(33, 12, 2, .30), 0 2px 6px rgba(33, 12, 2, .06); }
  body.duo .recent .rhead { padding: 6px 8px 4px; font-size: 12px; }
  body.duo .recent .rchips { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; }
  body.duo #recent.recent .rchips > button.chip { display: flex; align-items: center; text-align: left; justify-content: flex-start; gap: 9px; width: 100%; height: 34px; padding: 0 8px; border: 0; border-radius: 6px; background: none; box-shadow: none; font-size: 14px; font-weight: 500; color: var(--fg); }
  body.duo #recent.recent .rchips > button.chip::before { content: ""; flex: none; width: 15px; height: 15px; background: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l4 2'/%3E%3C/svg%3E") center / contain no-repeat; }
  body.duo #recent.recent .rchips > button.chip:is(:hover, :focus-visible) { background: #f3ede3; outline: none; }
  body.duo .recent .rfoot { margin-top: 4px; padding: 8px 8px 4px; border-top: 1px solid var(--sh-line); font-size: 11.5px; color: var(--muted); }
  body.duo .recent .rfoot kbd { display: inline-block; margin: 0 2px; padding: 0 5px; border: 1px solid var(--sh-line); border-radius: 4px; background: #f3ede3; font: 500 10.5px/16px "DM Mono", ui-monospace, monospace; color: var(--fg); }
  /* 9. 글자: 굵기 · 자간을 시안처럼 (큰 제목 · 큰 숫자는 10-22 사용자 취향대로 좁은 자간 유지) + 숫자 · 영문 Geist */
  body.duo .cols :is(span, small, b, i, em, button, td, th, p, a, label, div) { letter-spacing: -0.005em; }
  body.duo .cols :is(.dttl h2, .dttl h2 *, .hk > b, .since > b, .ptitle) { letter-spacing: -0.04em; }
  body.duo .cols :is(.chip, .achip, .alert, .act, .djump > button, .dsplit button, #duobar > button, .hbtn) { font-weight: 500; }
  body.duo .cols :is(.chip, .achip, .alert) b { font-weight: 600; }
  body.duo .dt th, body.duo .dt th * { font-weight: 500; }
  body.duo .dt td b, body.duo .dt td strong { font-weight: 600; }
  body.duo #list > li.group.duo .dn > b { font-weight: 600; }
  body.duo #list > li.group.duo .dq, body.duo #list > li.group.duo .dq b { font-weight: 600; }
  body.duo :is(#list .bl .brand, .dhead .bl .brand) { font-weight: 700; }
  body.duo .cols .head #modes .seg button, body.duo #hacts .kseg button { font-weight: 500; }
  body.duo .cols .head #modes .seg button[aria-pressed="true"], body.duo #hacts .kseg button[aria-pressed="true"] { font-weight: 600; }
  body.duo { --font: "Geist", "Wanted Sans Variable", "Wanted Sans", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; --mono: "Geist Mono", "Wanted Sans Variable", "Wanted Sans", ui-monospace, monospace; font-family: var(--font); }
}
/* ── shadcn 꼴 PC 끝 ── */

/* ── 유니패스 처리 기록의 수량 (2026-11-05, 시안/유니패스수량-시안 다6; 사용자: "그 수량도 표시해 주면 좋을것 같아." → "다 6으로 가자.") ──
   --cgq: 1이 app.js의 신호다 (옛 app.css면 cgQty가 수량을 그리지 않는다).
   다섯 단계 밑 수량 .cgrq, 나눠 반출한 띠 .cgout, 전체와 다른 처리 단계 줄(li.pq)의 오른쪽 점선 수량 .cgpq + '부분'.
   글과 수량이 붙어 보이지 않게(사용자: "반출신고 내용이랑 너무 붙어있다 보니까 보기 복잡해 보일것 같아서") 수량 칸 앞을 조금 띄운다 */
:root { --cgq: 1; }
.cgrail li .cgrq { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cg .cgout { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; }
.cg .cgout b { font-variant-numeric: tabular-nums; }
.cg .cgout small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.cg .cgout .bar { display: flex; gap: 2px; height: 8px; margin-top: 8px; border-radius: 99px; overflow: hidden; background: var(--track); }
.cg .cgout .bar i { background: var(--fg); }
.cg .cgout .bar i:nth-child(even) { opacity: .55; }
.cg .cgout .bar i.rest { background: none; }
.cgproc li.pq, .cglog li.pq, .cgrecent li.pq { grid-template-columns: 78px minmax(0, 1fr) auto; }
.cgpq { margin-left: 8px; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg); }
.cgpq b { display: inline-block; padding: 2px 8px; border: 1.5px dashed color-mix(in srgb, var(--fg) 50%, transparent); border-radius: 8px; font-size: 13.5px; font-weight: 700; }
li.pq .cgpq small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--muted); }
.cgpq u { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px var(--edge); }