/* 마진율 계산기 전용 CSS (2026-10-22). 판매가 장부(mgn-led)·결과 + 판매가 기둥(mgn-res)·가격별 마진 곡선(mgn-curve)·판매가 후보(mgn-cands). 공용 부품은 assets/v2.css
   색: 원가 > 부대 비용 > 수수료는 잉크 농도 3단, 부가세는 빗금, 이익만 accent(한 화면 한 곳), 할인·쿠폰은 점선 빈칸, 손실은 잉크 빗금 */
.mgn-work{container:mgnw / inline-size;
  --mg-cost:color-mix(in srgb,var(--ink) 74%,var(--card));--mg-ex:color-mix(in srgb,var(--ink) 48%,var(--card));--mg-fix:repeating-linear-gradient(0deg,color-mix(in srgb,var(--ink) 58%,var(--card)) 0 3px,color-mix(in srgb,var(--ink) 34%,var(--card)) 3px 6px);--mg-fee:color-mix(in srgb,var(--ink) 27%,var(--card));
  --mg-vat:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 42%,var(--card)) 0 2px,color-mix(in srgb,var(--ink) 10%,var(--card)) 2px 5px);
  --mg-loss:repeating-linear-gradient(135deg,var(--ink) 0 1.5px,transparent 1.5px 5px);--mg-ease:cubic-bezier(.2,.7,.2,1)}
.mgn-top{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--soft)}
.mgn-res{display:flex;flex-direction:column;min-width:0;padding:16px 18px;border-bottom:1px solid var(--soft)}
.mgn-res>.v2-label{display:block;margin-bottom:6px}
.mgn-res .v2-big{font-size:44px;overflow-wrap:anywhere}
.mgn-res .v2-big.is-empty{font-size:22px}
.mgn-res .v2-sub:empty{display:none}
.mgn-rows{margin-top:12px}
.mgn-rows:empty{display:none}
.mgn-led{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px 18px 16px}
@container mgnw (min-width:640px){
  .mgn-top{grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);grid-template-areas:"led res"}
  .mgn-led{grid-area:led}
  .mgn-res{grid-area:res;border-bottom:0;border-left:1px solid var(--soft)}
}

/* 모드 */
.mgn-mode{display:grid;grid-template-columns:1fr 1fr}
.mgn-mode button{height:34px;padding:0 8px;white-space:normal;line-height:1.2}

/* 장부 줄: 부호 | 라벨(+ 계산된 금액) | 입력칸 */
.mgn-book{display:flex;flex-direction:column}
.mgn-r{display:grid;grid-template-columns:14px minmax(0,1fr) minmax(176px,204px);align-items:center;gap:0 8px;padding:4px 0;border-top:1px dashed var(--soft)}
.mgn-r:first-child{border-top:0;padding-top:0}
.mgn-r[hidden]{display:none}
.mgn-op{font-family:var(--mono);font-size:15px;font-weight:700;line-height:1;color:var(--muted);text-align:center}
.mgn-lab{display:flex;flex-wrap:wrap;align-items:center;gap:1px 6px;min-width:0;margin:0;font-family:var(--sans);font-size:13.5px;font-weight:650;line-height:1.3;color:var(--ink)}
.mgn-lab>span{flex:1 1 0;min-width:0;overflow-wrap:anywhere} /* 긴 라벨은 견본 옆에서 줄바꿈(견본만 윗줄에 남지 않게) */
.mgn-lab small{flex-basis:100%;padding-left:16px;font-size:11.5px;font-weight:400;line-height:1.35;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mgn-sw{flex:none;width:10px;height:10px;border-radius:2px;background:var(--soft)}
.mgn-r[data-k="cost"] .mgn-sw{background:var(--mg-cost)}
.mgn-r[data-k="ex"] .mgn-sw{background:var(--mg-ex)}
.mgn-r[data-k="fix"] .mgn-sw{background:var(--mg-fix)}
/* 비용 줄: [견본 · 이름(두 줄까지 보이는 textarea, 눌러서 고침) · 지우기 ×] | 금액 — 지우기는 이름 칸 끝에 두어 다른 줄의 입력칸 폭은 그대로 */
.mgn-items{display:flex;flex-direction:column}
.mgn-items > .mgn-r:first-child{border-top:1px dashed var(--soft);padding-top:4px}
.mgn-r--item .mgn-lab{flex-wrap:nowrap;gap:0 4px}
.mgn-name{flex:1 1 0;display:block;min-width:0;height:var(--v2-ctl,42px);margin:0 0 0 -6px;padding:11px 6px 0;border:1px dashed transparent;border-radius:var(--radius);background:transparent;resize:none;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere;font-family:var(--sans);font-size:13.5px;font-weight:650;line-height:1.3;color:var(--ink);transition:border-color var(--ease),background var(--ease)}
.mgn-name.is-2{padding:3px 6px;font-size:12.5px}
.mgn-name::placeholder{font-weight:500;color:var(--muted);opacity:.8}
.mgn-name:hover{border-color:var(--line)}
.mgn-name:focus{outline:0;border-color:var(--ink);border-style:solid;background:var(--paper)}
.v2-input b.mgn-um{line-height:1.05;text-align:center}
.mgn-um small{display:block;font-size:10px;font-weight:600}
.mgn-del{flex:0 0 24px;width:24px;height:30px;padding:0;border:1px solid transparent;border-radius:var(--radius);background:var(--paper);font-size:16px;line-height:1;color:var(--muted);cursor:pointer}
.mgn-del:hover{background:var(--btn);border-color:var(--soft);color:var(--ink)}
.mgn-del:focus-visible,.mgn-add:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mgn-r--add{border-top:0;padding-top:0}
.mgn-adds{grid-column:2 / -1;padding-top:2px;display:flex;flex-wrap:wrap;gap:6px}
.mgn-add{height:30px;padding:0 10px;border:1px dashed var(--line);border-radius:var(--radius);background:transparent;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);cursor:pointer}
.mgn-add:hover:not(:disabled){background:var(--btn);border-style:solid}
.mgn-add:disabled{opacity:.45;cursor:not-allowed}
.mgn-r[data-k="fee"] .mgn-sw{background:var(--mg-fee)}
.mgn-r[data-k="profit"] .mgn-sw{background:var(--accent)}
.mgn-r[data-k="disc"] .mgn-sw,.mgn-r[data-k="coupon"] .mgn-sw{background:none;outline:1px dashed var(--line);outline-offset:-1px}
.mgn-r[data-k="goal"] .mgn-sw,.mgn-r[data-k="price"] .mgn-sw,.mgn-r[data-k="qty"] .mgn-sw{display:none}
.mgn-r.is-invalid .v2-input{border-color:var(--accent)}
.mgn-r--vat .mgn-lab{gap:3px 6px}
.mgn-r--vat .v2-switch{font-size:13.5px;font-weight:650}
.mgn-r--vat .mgn-lab small{padding-left:40px}
.mgn-r--vat:not(.is-on) .v2-input{opacity:.5}
.mgn-r--vat .v2-input input:disabled{cursor:not-allowed}
.mgn-r--sum{border-top:1.5px solid var(--ink);margin-top:2px;padding-top:6px}
.mgn-r--sum + .mgn-r{border-top:0}
.mgn-out{display:flex;align-items:center;justify-content:flex-end;min-width:0;height:var(--v2-ctl,42px);padding:0 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--wash);font-family:var(--sans);font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;overflow:hidden}
.mgn-out--sum{font-size:17px}
.mgn-out.neg{color:var(--accent)}
/* 목표 모드: 판매가 줄은 계산 결과, 끝자리 올림 줄이 나타남 */
.mgn-out--price,.mgn-r--unit{display:none}
.mgn-work[data-md="target"] .mgn-r--price .v2-input{display:none}
.mgn-work[data-md="target"] .mgn-out--price{display:flex}
.mgn-work[data-md="target"] .mgn-r--unit{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px} /* 단추가 라벨을 덮지 않게: 자리가 모자라면 단추 묶음이 다음 줄로 */
.mgn-r--unit .mgn-op{flex:0 0 14px}
.mgn-r--unit .mgn-lab{flex:1 1 auto;width:auto}
.mgn-r--unit .v2-seg{flex:0 0 auto;margin-left:auto;justify-content:flex-end;flex-wrap:nowrap;gap:3px}
.mgn-r--unit .v2-seg button{padding:0 8px;white-space:nowrap}
.mgn-btns{display:flex;flex-wrap:wrap;gap:6px}
.mgn-led .v2-status:empty{display:none}

/* 판매가 기둥 + 범례(위에서부터 같은 순서) */
.mgn-anat{display:flex;flex-direction:column;flex:1 1 auto;margin-top:16px;min-height:0}
.mgn-anat[hidden]{display:none}
.mgn-colwrap{display:grid;grid-template-columns:54px minmax(0,1fr);gap:0 14px;flex:1 1 auto;min-height:230px;margin-top:8px}
.mgn-col{position:relative;display:flex;flex-direction:column-reverse;min-height:230px;border-radius:3px;overflow:hidden;background:var(--card)}
.mgn-seg{flex:0 1 0;min-width:0;min-height:0;padding-top:2px;background-clip:content-box;transition:flex-grow .45s var(--mg-ease)}
.mgn-seg.is-zero{padding:0}
.mgn-seg.s-cost{background-color:var(--mg-cost)}
.mgn-seg.s-ex{background-color:var(--mg-ex)}
.mgn-seg.s-fix{background-image:var(--mg-fix)}
.mgn-seg.s-fee{background-color:var(--mg-fee)}
.mgn-seg.s-vat{background-image:var(--mg-vat)}
.mgn-seg.s-profit{background-color:var(--accent)}
.mgn-seg.s-off{background-clip:content-box;box-shadow:inset 0 0 0 1px var(--line);background-color:transparent;border-radius:2px}
.mgn-seg.s-off.is-zero{box-shadow:none}
.mgn-loss{position:absolute;left:0;right:0;bottom:calc(var(--f,0) * 100%);height:calc(var(--l,0) * 100%);background-image:var(--mg-loss);pointer-events:none;transition:bottom .45s var(--mg-ease),height .45s var(--mg-ease)}
.mgn-fl{position:absolute;left:0;right:0;bottom:calc(var(--f,0) * 100%);border-top:2px solid var(--ink);pointer-events:none;transition:bottom .45s var(--mg-ease)}
.mgn-loss[hidden],.mgn-fl[hidden]{display:none}
.mgn-leg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.mgn-leg li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:baseline;column-gap:8px;padding:5px 0;border-top:1px solid var(--soft);font-family:var(--sans);font-size:13px;line-height:1.35}
.mgn-leg li:first-child{border-top:0}
.mgn-leg li i{align-self:center;width:10px;height:10px;border-radius:2px}
.mgn-leg li span{min-width:0;color:var(--ink);font-weight:650;overflow-wrap:anywhere}
.mgn-leg li b{font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.mgn-leg li em{grid-column:2/4;font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.mgn-leg .l-cost i{background:var(--mg-cost)}.mgn-leg .l-ex i{background:var(--mg-ex)}.mgn-leg .l-fix i{background:var(--mg-fix)}.mgn-leg .l-fee i{background:var(--mg-fee)}.mgn-leg .l-vat i{background:var(--mg-vat)}
.mgn-leg .l-profit i{background:var(--accent)}.mgn-leg .l-loss i{background:var(--mg-loss);box-shadow:inset 0 0 0 1px var(--ink)}.mgn-leg .l-off i{box-shadow:inset 0 0 0 1px var(--line)}
.mgn-leg .l-profit b{color:var(--accent)}
.mgn-leg.is-pin{position:relative;display:block} /* 세로 기둥 옆: 항목을 칸 높이에 붙임(JS pinLeg) */
.mgn-leg.is-pin li{position:absolute;left:0;right:0;border-top:0;padding:0;transition:top .45s var(--mg-ease)}
@container mgnw (max-width:639px){
  .mgn-colwrap{grid-template-columns:minmax(0,1fr);gap:10px;min-height:0}
  .mgn-col{flex-direction:row;min-height:0;height:30px}
  .mgn-seg{padding:0 0 0 2px}
  .mgn-loss{top:0;bottom:0;left:calc(var(--f,0) * 100%);width:calc(var(--l,0) * 100%);height:auto;transition:left .45s var(--mg-ease),width .45s var(--mg-ease)}
  .mgn-fl{top:0;bottom:0;left:calc(var(--f,0) * 100%);border-top:0;border-left:2px solid var(--ink);transition:left .45s var(--mg-ease)}
  .mgn-leg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px} /* 항목 2~6개 → 끝 줄에 한 칸만 남지 않게 2열 */
  .mgn-leg li:nth-child(2){border-top:0}
}

/* 가격별 마진 곡선 */
.mgn-curve{padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.mgn-curve-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:6px}
.mgn-curve-h .v2-label{flex:0 0 auto}
.mgn-read{flex:1 1 240px;margin:0;font-family:var(--sans);font-size:13.5px;font-weight:650;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums}
.mgn-curve-h .v2-btn[hidden]{display:none}
.mgn-svg{display:block;width:100%;height:220px;overflow:visible;touch-action:pan-y;cursor:crosshair;user-select:none}
.mgn-svg.is-empty{opacity:.35}
.mgn-svg .gl{stroke:var(--soft);stroke-width:1}
.mgn-svg .gl.z{stroke:var(--line);stroke-width:1.5}
.mgn-svg .gx{stroke:var(--line)}
.mgn-svg .ty,.mgn-svg .tx{font-family:var(--sans);font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.mgn-svg .ty{text-anchor:end}
.mgn-svg .tx{text-anchor:middle}
.mgn-svg .g-lossbg{fill:color-mix(in srgb,var(--ink) 5%,transparent)}
.mgn-svg .g-cv{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mgn-svg .g-goal line{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 4}
.mgn-svg .g-goal text{font-family:var(--sans);font-size:11px;font-weight:650;fill:var(--muted);text-anchor:end}
.mgn-svg .mk{transition:transform .45s var(--mg-ease)}
.mgn-svg .mk circle{fill:var(--card);stroke:var(--ink);stroke-width:2}
.mgn-svg .mk-now circle{fill:var(--ink);stroke:var(--card)}
.mgn-svg .mk text{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.mgn-svg .mk-c1 text,.mgn-svg .mk-c2 text,.mgn-svg .mk-c3 text{font-size:9.5px;font-weight:800;stroke-width:0}
.mgn-svg .g-xh line{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3}
.mgn-svg .g-xh circle{fill:var(--accent);stroke:var(--card);stroke-width:2}
.mgn-range{display:block;height:22px;margin:2px 0 0;accent-color:var(--ink)}
.mgn-note{margin:4px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
@container mgnw (max-width:560px){ .mgn-svg{height:200px} }

/* 판매가 후보 */
.mgn-cands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;padding:14px 18px 16px}
.mgn-cands-h{grid-column:1/-1}
.mgn-cr{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.mgn-cr:empty{display:none}
.mgn-cr.is-ok{color:var(--ink)}
.mgn-cr.is-bad{color:var(--accent)}
@container mgnw (max-width:640px){
  .mgn-cands{grid-template-columns:minmax(0,1fr);gap:8px}
  .mgn-cand{display:grid;grid-template-columns:minmax(52px,auto) minmax(0,1fr);align-items:center;column-gap:10px}
  .mgn-cand > .v2-label{margin:0}
  .mgn-cand .mgn-cr{grid-column:2;margin-top:4px}
}
/* 장부 입력칸 폭: 나란히 놓인 좁은 구간(작업면 640~819px, 1280px 화면 = 646px)은 168px, 결과가 위로 쌓이는 중간 폭은 라벨과 반씩(라벨과 칸 사이가 비지 않게), 휴대폰은 160px */
@container mgnw (min-width:640px) and (max-width:819px){ .mgn-r{grid-template-columns:14px minmax(0,1fr) 168px} }
@container mgnw (min-width:481px) and (max-width:639px){ .mgn-r{grid-template-columns:14px minmax(0,1fr) minmax(176px,1fr)} }
@container mgnw (max-width:480px){ .mgn-r{grid-template-columns:14px minmax(0,1fr) minmax(150px,160px)} }

@media (prefers-reduced-motion:reduce){ .mgn-seg,.mgn-loss,.mgn-fl,.mgn-svg .mk,.mgn-leg.is-pin li{transition:none} }