/* 재고 손실 계산기 전용 CSS (2026-10-16). 2패널 계산형 il-* + 품목 줄(이름·유형 / 원가·장부·실사 / 결과 한 줄) + 목표 막대·품목별 손실 막대·유형별 쌓은 막대(R45). 공용 부품은 assets/v2.css.
   품목 줄은 줄마다 같은 격자라 넓은 폭에서는 첫 줄의 칸 이름표가 머리글 노릇을 하고(나머지 줄은 숨김), 좁은 폭(v2in 430px 미만)에서는 칸을 접고 줄마다 이름표를 보인다.
   움직임: transitions.dev --ease-smooth-out(cubic-bezier(.22,1,.36,1)) 500ms, reduced-motion이면 끔. 두 열 ↔ 한 열 전환은 화면 폭이 아니라 툴 폭(container il). */
.il-work{container:il / inline-size}
.il-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)} /* 품목 줄이 넓은 배치(입력 폭 430px 이상)로 들어가게 입력 열을 넓힘 */
.il-in{padding:16px 18px 18px;min-width:0}
.il-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px}
.il-fields .v2-f{min-width:0}
.il-fields .v2-f.full{grid-column:1 / -1}
.il-fields .v2-f[hidden]{display:none}
.il-fields .v2-f>.v2-label{display:block}
/* 품목 줄: 번호 | 이름·단위 | 이름·단위 | 유형 | 지우기 / · | 원가 | 장부 | 실사 | · / · | 결과 한 줄 */
.il-rows{list-style:none;margin:6px 0 0;padding:0}
.il-row{display:grid;grid-template-columns:20px minmax(0,1.05fr) minmax(0,.9fr) minmax(0,1.3fr) 34px;grid-template-areas:"i nm nm ty x" ". cost book phys ." ". ro ro ro .";column-gap:6px;row-gap:6px;align-items:end;padding:10px 0;box-shadow:inset 0 1px 0 var(--soft)} /* 구분선은 테두리 대신 그림자(align-check가 테두리 상자 안 입력을 상자째 잼) */
.il-row:first-child{padding-top:2px;box-shadow:none}
.il-i{grid-area:i;align-self:center;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.il-nmw{grid-area:nm;display:flex;gap:6px;min-width:0}
.il-nm{flex:1 1 auto;min-width:0}
.il-unit{flex:0 0 auto;box-sizing:border-box;width:74px;height:var(--v2-ctl,42px);padding:0 2px 0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:600}
.il-unit:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.il-nm input{text-align:left;font-weight:600}
.il-type{grid-area:ty;box-sizing:border-box;display:block;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 4px 0 9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:600}
.il-type:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.il-x{grid-area:x;box-sizing:border-box;width:34px;height:var(--v2-ctl,42px);padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-family:var(--sans);font-size:18px;line-height:1;cursor:pointer}
.il-x:hover{color:var(--ink);border-color:var(--ink)}
.il-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.il-c{min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.il-c-cost{grid-area:cost}.il-c-book{grid-area:book}.il-c-phys{grid-area:phys}
.il-cl{display:block;margin-bottom:4px;font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.3;color:var(--muted)}
.il-row:not(:first-child) .il-cl{display:none}
.il-row .v2-input{min-width:0}
.il-row .v2-input input{padding:0 7px;font-size:14.5px}
.il-row .v2-input b{min-width:26px;padding:0 6px}
.il-row .v2-input:has(input[aria-invalid="true"]){border-color:var(--accent)}
.il-ro{grid-area:ro;margin:0;min-height:1em;font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.il-ro:empty{display:none}
.il-ro.is-short{color:var(--ink);font-weight:600}
.il-add{display:flex;align-items:flex-start;gap:6px 10px;flex-wrap:wrap;margin-top:8px}
.il-add .v2-btn{flex:0 0 auto}
.il-add .il-hint{flex:1 1 200px;margin-top:2px}
.il-seg{display:flex;flex-wrap:nowrap;width:100%;margin-top:5px}
.il-seg button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 6px;font-family:var(--sans);font-size:13.5px;font-weight:700;line-height:1.15;white-space:normal;overflow-wrap:anywhere}
.il-hint{display:block;margin-top:4px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.il-fields .v2-f.full>.il-hint:first-child{margin-top:-6px}
.il-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
/* 결과 */
.il-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column}
.il-out .v2-label{display:block;margin-bottom:6px}
.il-out .v2-big{flex-wrap:wrap;row-gap:6px;font-size:40px}
.il-out .v2-big>span{min-width:0;overflow-wrap:anywhere}
.il-out .v2-big small{flex-basis:100%;display:block;margin:0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted)}
.il-out .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.il-gauge{margin-top:14px}
.il-gauge[hidden]{display:none}
.il-gt{position:relative;height:10px;border-radius:5px;background:var(--wash)}
.il-gf{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:5px;background:var(--ink);transition:width 500ms cubic-bezier(.22,1,.36,1)}
.il-gf.is-over{background:var(--accent)}
.il-gm{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink);box-shadow:0 0 0 2px var(--paper)}
.il-gm[hidden]{display:none}
.il-res{margin-top:14px;flex:1}
.il-res li span{min-width:0;flex:1 1 auto}
.il-res li span em{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);opacity:1;max-width:100%;overflow-wrap:anywhere}
.il-res li b{flex:0 0 auto}
.il-res li.is-key span{color:var(--ink);font-weight:600}
.il-res li.is-over b{color:var(--accent)}
.il-out .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.il-caveat{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.il-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.il-foot .v2-status{margin-left:auto}
.il-box{padding:14px 18px 18px;border-top:1px solid var(--soft)}
.il-box[hidden]{display:none}
.il-box>.v2-label{display:block;margin-bottom:10px}
.il-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
/* 막대 색: 유형마다 잉크 농도(다크 모드는 paper 와 섞여 자동 반전), 범례와 같은 색 */
.il-bars li,.il-stack i,.il-legend li{--c:color-mix(in srgb,var(--ink) 40%,var(--paper))}
.il-work [data-t="0"]{--c:color-mix(in srgb,var(--ink) 40%,var(--paper))}
.il-work [data-t="1"]{--c:color-mix(in srgb,var(--ink) 62%,var(--paper))}
.il-work [data-t="2"]{--c:color-mix(in srgb,var(--ink) 88%,var(--paper))}
.il-work [data-t="3"]{--c:color-mix(in srgb,var(--ink) 75%,var(--accent))}
.il-work [data-t="4"]{--c:color-mix(in srgb,var(--ink) 22%,var(--paper))}
.il-bars{display:grid;grid-template-columns:minmax(0,max-content) minmax(60px,1fr) max-content max-content;gap:8px 10px;max-width:720px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.il-bars li{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center}
.il-bl{max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:600}
.il-bt{position:relative;height:14px;border-radius:4px;background:var(--wash);overflow:hidden}
.il-bt i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:var(--c);transition:width 500ms cubic-bezier(.22,1,.36,1)}
.il-bars b{font-weight:700;color:var(--ink);white-space:nowrap;text-align:right}
.il-bars small{font-size:11.5px;color:var(--muted);white-space:nowrap;text-align:right}
.il-stack{display:flex;gap:0;height:16px;max-width:720px;border-radius:4px;overflow:hidden;background:var(--wash)}
.il-stack i{flex:0 0 auto;width:0;height:100%;background:var(--c);box-shadow:inset -2px 0 0 var(--paper);transition:width 500ms cubic-bezier(.22,1,.36,1)}
.il-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:12.5px;font-variant-numeric:tabular-nums}
.il-legend li{display:flex;align-items:center;gap:6px}
.il-legend li[hidden]{display:none}
.il-legend i{width:10px;height:10px;border-radius:2px;background:var(--c)}
.il-legend span{color:var(--muted)}
.il-legend b{font-weight:700;color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .il-gf,.il-bt i,.il-stack i{transition:none} }
@container il (max-width:719px){
  .il-grid{grid-template-columns:minmax(0,1fr)}
  .il-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@container il (max-width:440px){
  .il-in,.il-out,.il-box{padding-left:12px;padding-right:12px}
  .il-out .v2-big{font-size:34px}
  .il-bars{grid-template-columns:minmax(0,1fr) max-content;gap:4px 8px;font-size:12.5px}
  .il-bars li{grid-template-areas:"bl b" "bt sm";row-gap:4px;margin-bottom:6px}
  .il-bl{grid-area:bl;max-width:none}.il-bt{grid-area:bt}.il-bars b{grid-area:b}.il-bars small{grid-area:sm}
}
/* 좁은 입력 폭: 이름·단위 | 지우기 / 유형 / 원가 / 장부 | 실사 / 결과, 이름표는 줄마다(유형 선택지가 긴 언어도 안 잘리게 한 줄) */
@container v2in (max-width:429px){
  .il-row{grid-template-columns:20px minmax(0,1fr) minmax(0,1fr) 34px;grid-template-areas:"i nm nm x" ". ty ty ." ". cost cost ." ". book phys ." ". ro ro ."}
  .il-row:not(:first-child) .il-cl{display:block}
}
@container v2in (max-width:330px){ .il-fields{grid-template-columns:minmax(0,1fr)} }