/* =============================================================
   품목 등록·엑셀 올리기 전용. 색은 tokens 의 이름만 부른다.
   ============================================================= */

.itm { display: flex; flex-direction: column; min-height: 460px; }

.itm-bar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 8;
}
.itm-bar .spring { flex: 1; }
.itm-code { font-size: 11px; color: var(--faint); }

/* ---- 폼 ----
   높이 하나(34), 모서리 하나(8), 테두리 하나. 칸마다 다르면 줄이 어긋나 보인다.
   묶음은 제목이 아니라 줄과 여백으로 나눈다. */
.itm-form { padding: 20px 22px 30px; max-width: 1140px; }

/* 12열 격자. 줄마다 flex 로 나누면 줄이 바뀔 때 칸의 세로 경계가 어긋나 어수선해 보인다.
   모든 줄이 같은 격자를 쓰므로 아래위 칸의 모서리가 한 줄로 선다. */
.fld-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start; gap: 16px; margin-bottom: 16px;
}
.fld-row:last-of-type { margin-bottom: 0; }
.fld { grid-column: span var(--w, 12); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* 라벨 높이를 물음표에 맞춰 고정한다. 물음표 있는 칸만 라벨이 높아지면 입력칸 윗선이 어긋난다. */
.fld-l { min-height: 17px; }

.fld-l {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: -.1px;
}
.fld-req { color: var(--danger); font-weight: 700; }
.fld-opt { font-size: 10.5px; font-weight: 400; color: var(--faint); }
.fld-c { display: flex; flex-direction: column; gap: 5px; }

/* 칸의 넓이는 격자(--w)가 정한다. 여기서 max-width 로 또 자르면 줄마다 끝선이 어긋난다.

   칸의 바탕 모양. 안에 들어가는 특별한 칸(등급표·식별코드·구성품 수량)은 이보다
   특정도를 높여 적어야 한다 — 같으면 파일 차례에 따라 조용히 뒤집힌다. */
.fld-c input, .fld-c select, .fld-c textarea, .dd-btn {
  width: 100%; height: 34px; padding: 0 11px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--btn-bd); border-radius: 8px;
  background: var(--surface); color: var(--text); outline: 0;
  transition: border-color .1s;
}
/* 비고는 다른 입력칸과 같은 바탕·같은 테두리를 쓴다. 혼자 색이 다르면 꺼져 있는 칸처럼 보인다.
   두 줄 높이로 시작하고 필요하면 늘려 쓴다. */
/* 다른 칸과 같은 높이로 시작한다. 비고는 대개 비어 있거나 한 줄이라 미리 자리를 잡아 둘 이유가 없다.
   길게 쓸 일이 있으면 끌어서 늘린다. */
.fld-c textarea { height: 34px; min-height: 34px; padding: 7px 11px; resize: vertical; line-height: 1.5; }
.fld-c input:focus, .fld-c select:focus, .fld-c textarea:focus { border-color: var(--accent); }
.fld-c input::placeholder { color: var(--faint); }

/* 단위는 칸 안쪽 오른편에 앉힌다. 옆에 붙이면 칸마다 너비가 달라진다. */
.itm-unit { position: relative; }
.itm-unit input { padding-right: 32px; text-align: right; }
.itm-unit span {
  position: absolute; right: 11px; top: 0; line-height: 34px;
  font-size: 11.5px; color: var(--faint); pointer-events: none;
}

.itm-money { display: flex; flex-direction: column; gap: 5px; }
.itm-money input { text-align: right; }
.itm-split { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---- 품목 구분 ----
   세그먼트로 두었더니 고르지 않은 둘이 붙어 보여 경계가 없었다.
   셋을 저마다 상자로 세우고 동그라미를 붙인다. 무엇이 골라져 있는지 한눈에 보인다.
   셋의 차이는 라벨 옆 물음표에 적는다 — 상자 안에 설명을 넣으면 고르는 칸이 글밭이 된다. */
.pick3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick3-b {
  position: relative; display: flex; align-items: center; height: 40px;
  padding: 0 14px 0 36px; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--btn-bd); border-radius: 9px; background: var(--surface);
  transition: border-color .1s, background .1s;
}
.pick3-b:hover { border-color: var(--btn-bd-s); background: var(--hover); }
.pick3-b b { font-size: 13px; font-weight: 600; color: var(--text); }
.pick3-d {
  position: absolute; left: 14px; top: 50%; margin-top: -7px; width: 14px; height: 14px;
  border: 1.5px solid var(--btn-bd); border-radius: 50%; box-sizing: border-box;
}
.pick3-b.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.pick3-b.on .pick3-d { border-color: var(--accent); }
.pick3-b.on .pick3-d::after {
  content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--accent);
}
.pick3-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.itm-hint { font-size: 11px; color: var(--faint); line-height: 1.7; }
.itm-act {
  display: flex; align-items: center; gap: 8px;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line);
}
.itm-act .spring { flex: 1; }

/* ---- 거래처 등급별 판매가 ----
   낱개 칸 다섯이 아니라 값표 하나다. 윗줄에 파는 값, 아랫줄에 남는 값.
   테두리는 바깥에 한 번만 두고 안은 가는 선으로 나눈다. */
.grade {
  border-collapse: separate; border-spacing: 0; table-layout: fixed;
  width: 100%;
  border: 1px solid var(--btn-bd); border-radius: 8px; overflow: hidden;
  background: var(--surface);
}
.grade th {
  height: 25px; padding: 0 10px; text-align: right;
  background: var(--head); color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.grade td { padding: 0; border-right: 1px solid var(--line); }
.grade th:last-child, .grade td:last-child { border-right: 0; }

/* 줄 이름 — 무엇을 세로로 읽는지 밝힌다. 없으면 아랫줄이 무슨 숫자인지 알 수 없다. */
/* 폭은 가장 긴 이름('이익(세후)')에 맞춘다. 모자라면 조용히 두 줄로 접혀
   '이익(세'/'후)' 처럼 보인다 — nowrap 을 걸어 두면 접히는 대신 눈에 띄게 넘친다. */
.grade .hd {
  width: 84px; text-align: left; background: var(--head);
  border-right: 1px solid var(--border); font-weight: 600; white-space: nowrap;
}
.grade tbody .hd { height: 32px; border-bottom: 0; font-size: 11px; }
.grade tbody tr:first-child .hd { border-bottom: 1px solid var(--line); }

/* 기준가 칸 — 고칠 수 없는 값이라 바탕을 눕히고 오른쪽에 굵은 선을 둔다. */
.grade th.base, .grade td.base { background: var(--sunk); border-right: 1px solid var(--border); }
.grade td.base {
  height: 33px; padding: 0 10px; text-align: right;
  color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums;
}

/* 칸마다 테두리를 그리지 않는다. 표가 이미 나눠 놓았다.
   대신 커서가 든 칸만 안쪽 선으로 짚어 준다. */
.grade td input {
  width: 100%; height: 33px; padding: 0 10px;
  border: 0; border-radius: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 12.5px; text-align: right; outline: 0;
}
.grade td input:focus { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--surface); }

/* 값이 든 등급은 눈에 띄어야 한다. 다섯 중 어디에 값을 넣었는지가 한눈에 보이는 것이 이 표의 일이다. */
.grade td.set input { font-weight: 600; color: var(--text); }
.grade td.set { background: var(--bd-kind); }

/* 이익 줄 — 파는 값 바로 아래. 숫자를 만지면서 남는 돈이 어떻게 되는지 그 자리에서 본다. */
.grade tbody tr:first-child td { border-bottom: 1px solid var(--line); }
.grade td.prof {
  height: 32px; padding: 0 10px; text-align: right;
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.grade td.prof b { font-weight: 600; color: var(--text); }
.grade td.prof i { margin-left: 7px; font-style: normal; font-size: 10.5px; color: var(--faint); }
.grade td.prof.minus b, .grade td.prof.minus i { color: var(--fg-cancel); }

/* 줄 하나를 빼는 단추. 창고 줄에서 쓴다. */
.itm-x {
  flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--faint); font-size: 11px;
}
.itm-x:hover { background: var(--bd-cancel); color: var(--fg-cancel); }

/* ---- 구성품 ----
   담은 것이 위, 찾는 칸이 아래. 한 덩이 상자 안에 둔다 —
   찾는 칸을 늘 열어 두면 담을 때마다 단추를 눌러 목록을 여닫지 않아도 된다. */
.cmp {
  border: 1px solid var(--btn-bd); border-radius: 10px;
  background: var(--surface); overflow: hidden;
}
.cmp-l { display: flex; flex-direction: column; }
.cmp-none { padding: 13px; font-size: 11.5px; color: var(--faint); text-align: center; }

.cmp-h {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px; background: var(--head);
  border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; color: var(--muted);
}
.cmp-h-q { margin-left: auto; padding-right: 52px; }

.cmp-r {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 9px; border-bottom: 1px solid var(--line);
}
.cmp-r:last-child { border-bottom: 0; }
.cmp-r:hover { background: var(--hover); }
.cmp-r b {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp .cmp-q {
  flex: none; width: 62px; height: 28px; padding: 0 8px;
  border: 1px solid var(--btn-bd); border-radius: 7px; background: var(--bg);
  color: var(--text); font: inherit; font-size: 12px; text-align: right; outline: 0;
}
.cmp .cmp-q:focus { border-color: var(--accent); background: var(--surface); }
.cmp-u { flex: none; font-size: 11px; color: var(--faint); }
.cmp-x {
  flex: none; width: 22px; height: 22px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--faint); font-size: 10px;
}
.cmp-x:hover { background: var(--bd-cancel); color: var(--fg-cancel); }

/* 찾는 칸은 상자 발치에 붙는다. 제 테두리를 지우고 위쪽 선만 남긴다. */
.cmp-add { border-top: 1px solid var(--line); }
.cmp .dd-head > .dd-q {
  height: 36px; border: 0; border-radius: 0; background: transparent;
}
.cmp .dd-head > .dd-q:focus { background: var(--hover); }

/* 엑셀 올리기 스타일은 styles/stock_excel.css 로 옮겼다(2026-07-29). */

@media (max-width: 720px) {
  .itm-find { max-width: none; flex-basis: 100%; order: 9; }
}

/* ---- 품목 × 창고 ----
   줄마다 카드 하나. 창고가 곧 출고처라 다른 칸들과 무게가 다르다 — 여기만 테두리를 준다. */
.wh { display: flex; flex-direction: column; gap: 9px; }
.wh-list { display: flex; flex-direction: column; gap: 9px; }
.wh-r {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); padding: 11px 13px 13px;
}
.wh-r.home { background: var(--head); }

.wh-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.wh-h b { font-size: 12.5px; font-weight: 700; color: var(--text); }
.wh-h .spring { flex: 1; }
.wh-kind { font-size: 10.5px; color: var(--faint); }

.wh-f { margin-bottom: 10px; }
.wh-n-l { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }

/* 별명은 칩으로 쌓인다. 몇 개든 늘 수 있고 지우는 것이 한 번에 보여야 한다. */
.wh-alias {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  padding: 5px 6px; min-height: 34px;
  border: 1px solid var(--btn-bd); border-radius: 8px; background: var(--bg);
}
.wh-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 4px 3px 9px; border-radius: 100px;
  background: var(--bd-kind); color: var(--fg-kind); font-size: 11.5px; font-weight: 600;
}
.wh-chip-x {
  width: 15px; height: 15px; border: 0; border-radius: 100px; cursor: pointer;
  background: transparent; color: inherit; font-size: 9px; opacity: .55;
}
.wh-chip-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); }
/* 상자 안에 들어가는 칸이라 제 테두리가 없어야 한다.
   `.fld-c input` 이 특정도가 더 높아 테두리를 다시 씌우므로 여기서도 상자를 함께 적는다 —
   안 그러면 상자 안에 상자가 하나 더 그려진다. */
.wh-alias .wh-add {
  flex: 1; min-width: 130px; height: 22px; padding: 0 4px;
  border: 0; border-radius: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 12px; outline: 0;
}
.wh-alias .wh-add::placeholder { color: var(--faint); }
.wh-alias .wh-add.bad { color: var(--fg-cancel); }
/* 커서는 상자 테두리가 받는다. 안쪽 칸이 따로 빛나면 두 겹으로 보인다. */
.wh-alias:focus-within { border-color: var(--accent); }
.wh-warn { flex-basis: 100%; font-size: 10.5px; color: var(--fg-cancel); padding: 0 4px; }
.wh-warn:empty { display: none; }

.wh-nums { display: flex; gap: 12px; flex-wrap: wrap; }
.wh-n { flex: 1; min-width: 132px; }
.wh-n .itm-unit input { height: 32px; }
/* 택배비 선택 — 값 칸이 아니라 펼침 목록이다(운영정보 택배 탭의 요금 줄을 고른다). */
.wh-dlv { min-width: 210px; }
.wh-dd .dd-q { height: 32px; }

/* 줄을 더하는 단추. 위의 카드와 같은 폭으로 세워 왼쪽 끝이 한 줄로 떨어지게 한다.
   점선으로 두면 "여기 아래로 하나 더 붙는다"가 보인다. */
.dd-add .dd-btn {
  height: 36px; text-align: center; color: var(--muted);
  border-style: dashed; background: transparent;
}
.dd-add .dd-btn:hover { border-color: var(--accent); color: var(--text); background: var(--hover); }
.dd-add .dd-btn.empty { color: var(--muted); }