/* Application case diagrams adapted directly from the IR full-deck originals.
 * Original paths, operational relationships and the packing candidate animation
 * are retained. Only type, surface colors, spacing and viewport behavior change.
 * Source selectors and hashes are recorded outside the public output.
 */
.application-case-diagram {
  --case-ink:var(--ink,#1b2420);
  --case-muted:var(--muted,#5f6962);
  --case-line:var(--line,#cbd0c7);
  --case-paper:#fbfcf8;
  --case-soft:#eef1e9;
  --case-lavender:#eee9f5;
  --case-lavender-ink:var(--lavender-ink,#7e699b);
  --case-sage:#e6eee6;
  --case-sage-ink:var(--sage-ink,#536f5f);
  position:relative;
  width:100%;
  min-width:0;
  margin:32px 0 0;
  color:var(--case-ink);
  font-family:var(--font-sans,Pretendard,sans-serif);
}
.application-case-diagram *, .application-case-diagram *::before, .application-case-diagram *::after { box-sizing:border-box; }
.case-diagram-viewport {
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-color:var(--case-line) transparent;
  scrollbar-width:thin;
  border-block:1px solid var(--case-line);
  padding:24px 0;
}
.case-diagram-viewport:focus-visible, .case-motion-toggle:focus-visible + .case-motion-label {
  outline:2px solid var(--case-lavender-ink);
  outline-offset:4px;
}
.case-diagram-canvas { width:100%; min-width:1000px; }
.application-case-diagram svg { display:block; max-width:100%; font-family:inherit; }
.application-case-diagram > figcaption {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  margin:0;
  padding:14px 0 0;
  color:var(--case-muted);
  font-size:var(--type-caption,12px);
  line-height:1.65;
}
.case-diagram-scroll-hint { white-space:nowrap; }
.application-case-diagram :is(h3,p,figure,dl) { margin:0; }
.application-case-diagram h3 { font-family:inherit; font-size:18px; font-weight:600; line-height:1.3; letter-spacing:-.025em; }
.application-case-diagram p { color:var(--case-muted); font-size:14px; line-height:1.55; }

/* Decision structure: the original depot / zones / vehicle x trip x visit-order geometry. */
.application-case-diagram--sequence .case-diagram-canvas { min-width:880px; }
.application-case-diagram--sequence svg { width:100%; height:auto; }
.application-case-diagram--sequence svg text { font-family:inherit; fill:var(--case-ink); }
.application-case-diagram--sequence svg .h { font-size:22px; font-weight:600; }
.application-case-diagram--sequence svg .small { font-size:17px; fill:var(--case-muted); }
.application-case-diagram--sequence svg .label { font-size:18px; font-weight:600; }
.application-case-diagram--sequence svg .n { font-size:13px; font-weight:600; fill:white; text-anchor:middle; dominant-baseline:central; }

/* Decision structure: source before/after timelines and all three deadline dispatch policies. */
.application-case-diagram--scheduling .case-diagram-canvas { min-width:1060px; }
.application-case-diagram .dispatch-external-decision { display:grid; grid-template-columns:53% minmax(0,1fr); gap:24px; }
.application-case-diagram .dispatch-stacked-time { display:flex; flex-direction:column; gap:14px; }
.application-case-diagram .dispatch-shipping-card { border:1px solid var(--case-line); background:var(--case-paper); padding:16px 18px 8px; }
.application-case-diagram .dispatch-shipping-head { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.application-case-diagram .dispatch-shipping-head > span { color:var(--case-muted); font-size:var(--type-label,11px); line-height:1.5; letter-spacing:.04em; text-transform:uppercase; }
.application-case-diagram .dispatch-shipping-after .dispatch-shipping-head h3 { color:var(--case-sage-ink); }
.application-case-diagram .dispatch-time-svg { width:100%; height:auto; margin-top:18px; }
.application-case-diagram .dispatch-time-legend { display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--case-muted); font-size:var(--type-caption,12px); line-height:1.6; }
.application-case-diagram .dispatch-dispatch-guide > h3 { margin:0 0 15px; }
.application-case-diagram .dispatch-policies { display:flex; flex-direction:column; gap:12px; }
.application-case-diagram .dispatch-policy-external { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:center; padding:12px 16px 12px 6px; border:1px solid var(--case-line); background:var(--case-paper); }
.application-case-diagram .dispatch-policy-external h3 { font-size:16px; margin-bottom:7px; }
.application-case-diagram .dispatch-policy-external p { font-size:14px; }
.application-case-diagram .dispatch-policy-drawing svg { width:100%; height:auto; }
.application-case-diagram .dispatch-shipping-after .dispatch-time-svg > text:last-child { font-size:17px; }
.application-case-diagram .dispatch-policy-drawing svg text[fill="#536f5f"] { font-size:14px; }
.application-case-diagram .dispatch-policy-external:nth-child(3) { background:var(--case-soft); }

/* Decision structure: original two-level packing check / box-size search loop. */
.application-case-diagram--spatial .case-diagram-canvas { min-width:1060px; }
.application-case-diagram .packing-order-flow { display:flex; flex-direction:column; background:transparent; }
.application-case-diagram .packing-order-flow-main { display:grid; grid-template-columns:22% 5% 39% 6% 28%; align-items:stretch; }
.application-case-diagram .packing-flow-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--case-line); background:var(--case-paper); }
.application-case-diagram .packing-flow-head { padding:18px; min-height:106px; background:var(--case-lavender); }
.application-case-diagram .packing-flow-head span { display:block; color:var(--case-lavender-ink); font-size:var(--type-label,11px); font-weight:400; line-height:1.5; letter-spacing:.04em; text-transform:uppercase; }
.application-case-diagram .packing-flow-head h3 { margin-top:8px; }
.application-case-diagram .packing-flow-input .packing-flow-head { background:var(--case-soft); }
.application-case-diagram .packing-flow-input .packing-flow-head span { color:var(--case-muted); }
.application-case-diagram .packing-flow-card > p { margin:16px 18px; }
.application-case-diagram .packing-input-visuals { display:grid; grid-template-rows:1fr 1fr; gap:12px; margin:0 16px 18px; }
.application-case-diagram .packing-input-visuals figure { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:118px; padding:8px; border-left:2px solid var(--case-line); background:var(--case-soft); }
.application-case-diagram .packing-input-visuals svg { width:100%; height:74px; }
.application-case-diagram .packing-input-visuals figcaption { padding-top:6px; color:var(--case-muted); font-size:12px; line-height:1.45; text-align:center; }
.application-case-diagram .packing-input-visuals svg path { fill:none; stroke:var(--case-muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.application-case-diagram .packing-input-visuals svg circle { fill:var(--case-muted); }
.application-case-diagram .packing-input-paper { fill:var(--case-paper); stroke:var(--case-line); stroke-width:2; }
.application-case-diagram .packing-input-item-a { fill:var(--sage,var(--sage)); }
.application-case-diagram .packing-input-item-b { fill:var(--lavender,var(--lavender)); }
.application-case-diagram .packing-input-item-c { fill:#aeb5ac; }
.application-case-diagram .packing-input-visuals .packing-input-dimension-box { fill:var(--case-sage); }
.application-case-diagram .packing-input-visuals svg text { fill:var(--case-muted); font-size:14px; }
.application-case-diagram .packing-flow-link { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--case-muted); }
.application-case-diagram .packing-flow-link strong { font-size:36px; font-weight:400; line-height:1; }
.application-case-diagram .packing-flow-link span { color:var(--case-muted); font-size:12px; text-align:center; line-height:1.5; }
.application-case-diagram .packing-flow-steps { display:flex; flex:1; flex-direction:column; gap:12px; padding:18px; }
.application-case-diagram .packing-flow-steps > div { display:flex; flex-direction:row; align-items:center; flex:1; gap:14px; min-height:90px; padding:12px; border-left:2px solid var(--lavender,var(--lavender)); background:var(--case-lavender); }
.application-case-diagram .packing-flow-steps svg { flex:0 0 66px; width:66px; height:52px; }
.application-case-diagram .packing-flow-steps svg path { fill:none; stroke:var(--case-lavender-ink); stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.application-case-diagram .packing-flow-steps svg rect { fill:#ded5ec; stroke:var(--case-lavender-ink); stroke-width:1.8; }
.application-case-diagram .packing-flow-steps > div > span { display:flex; flex-direction:column; gap:6px; min-width:0; }
.application-case-diagram .packing-flow-steps b { font-size:16px; font-weight:600; line-height:1.35; }
.application-case-diagram .packing-flow-steps small { color:var(--case-muted); font-size:14px; line-height:1.5; }
.application-case-diagram .packing-flow-high .packing-flow-head { background:var(--case-sage); }
.application-case-diagram .packing-flow-high .packing-flow-head span { color:var(--case-sage-ink); }
.application-case-diagram .packing-flow-candidate { display:flex; flex-direction:column; gap:8px; margin:18px; padding:14px; border-left:2px solid var(--sage,var(--sage)); background:var(--case-sage); }
.application-case-diagram .packing-flow-candidate b { font-size:16px; font-weight:600; line-height:1.35; }
.application-case-diagram .packing-flow-candidate > span { color:var(--case-muted); font-size:14px; line-height:1.5; }
.application-case-diagram .packing-box-candidates { width:100%; height:105px; overflow:visible; }
.application-case-diagram .packing-box-candidates .packing-cube { transform-box:fill-box; transform-origin:center bottom; }
.application-case-diagram .packing-box-candidates :is(.packing-cube-top,.packing-cube-side,.packing-cube-front) { stroke-width:2; stroke-linejoin:round; }
.application-case-diagram .packing-cube--a { animation:case-packing-cube-a 6s steps(1,end) infinite; }
.application-case-diagram .packing-cube--b { animation:case-packing-cube-b 6s steps(1,end) infinite; }
.application-case-diagram .packing-cube--c { animation:case-packing-cube-c 6s steps(1,end) infinite; }
.application-case-diagram .packing-cube--a .packing-cube-front { fill:var(--case-soft); stroke:var(--case-muted); }
.application-case-diagram .packing-cube--a .packing-cube-top { fill:var(--case-paper); stroke:var(--case-muted); }
.application-case-diagram .packing-cube--a .packing-cube-side { fill:#b7bfb5; stroke:var(--case-muted); }
.application-case-diagram .packing-cube--b .packing-cube-front { fill:var(--case-lavender); stroke:var(--case-lavender-ink); }
.application-case-diagram .packing-cube--b .packing-cube-top { fill:var(--case-paper); stroke:var(--case-lavender-ink); }
.application-case-diagram .packing-cube--b .packing-cube-side { fill:#c7bee3; stroke:var(--case-lavender-ink); }
.application-case-diagram .packing-cube--c .packing-cube-front { fill:var(--case-sage); stroke:var(--case-sage-ink); }
.application-case-diagram .packing-cube--c .packing-cube-top { fill:var(--case-paper); stroke:var(--case-sage-ink); }
.application-case-diagram .packing-cube--c .packing-cube-side { fill:var(--sage,var(--sage)); stroke:var(--case-sage-ink); }
.application-case-diagram .packing-box-candidates text { fill:var(--case-muted); font-size:26px; }
.application-case-diagram .packing-flow-high > p { margin-top:auto; }
.application-case-diagram .packing-flow-feedback { position:relative; height:66px; color:var(--case-sage-ink); }
.application-case-diagram .packing-flow-feedback svg { width:100%; height:100%; overflow:visible; }
.application-case-diagram .packing-flow-feedback svg > path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.application-case-diagram .packing-flow-feedback marker path { fill:currentColor; }
.application-case-diagram .packing-flow-feedback span { position:absolute; left:64%; bottom:0; transform:translateX(-50%); background:var(--paper,#f2f1eb); color:var(--case-muted); padding:3px 12px; font-size:12px; line-height:1.5; white-space:nowrap; }
@keyframes case-packing-cube-a { 0%,100%{transform:scale(.72,.76)} 25%{transform:scale(.80,.84)} 50%{transform:scale(.76,.78)} 75%{transform:scale(.84,.86)} }
@keyframes case-packing-cube-b { 0%,100%{transform:scale(1,.98)} 25%{transform:scale(1.04,1.06)} 50%{transform:scale(1.08,1)} 75%{transform:scale(1.02,1.08)} }
@keyframes case-packing-cube-c { 0%,100%{transform:scale(1.20,1.18)} 25%{transform:scale(1.26,1.30)} 50%{transform:scale(1.32,1.22)} 75%{transform:scale(1.24,1.28)} }
.case-motion-toggle { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.case-motion-label { display:inline-flex; align-items:center; min-height:44px; gap:10px; margin:0 0 8px; padding:8px 0; color:var(--case-muted); font-size:13px; cursor:pointer; }
.case-motion-label::before { content:""; width:16px; height:16px; border:1px solid var(--case-muted); background:var(--case-paper); }
.case-motion-toggle:checked + .case-motion-label::before { background:var(--case-lavender-ink); box-shadow:inset 0 0 0 3px var(--case-paper); }
.case-motion-toggle:checked ~ .case-diagram-viewport .packing-cube { animation-play-state:paused; }

/* Decision structure: original demand distribution / digital twin / frontier / objective chain. */
.application-case-diagram--inventory .case-diagram-canvas { min-width:1120px; }
.application-case-diagram .replenishment-flow { display:flex; align-items:stretch; gap:0; width:100%; height:auto; min-height:450px; margin:0; border:0; background:transparent; }
.application-case-diagram .replenishmentf-col { flex:0 0 22%; display:flex; flex-direction:column; gap:12px; }
.application-case-diagram .replenishmentf-card { display:flex; flex-direction:column; min-width:0; padding:16px; border:1px solid var(--case-line); background:var(--case-paper); }
.application-case-diagram .replenishmentf-col .replenishmentf-card { flex:1; }
.application-case-diagram .replenishment-flow h3 { margin:0 0 12px; }
.application-case-diagram .replenishmentf-arrow { flex:0 0 32px; align-self:center; width:32px; height:16px; padding-inline:3px; }
.application-case-diagram .replenishmentf-arrow line { stroke:var(--case-muted); stroke-width:2; }
.application-case-diagram .replenishmentf-arrow polygon { fill:var(--case-muted); }
.application-case-diagram .replenishmentf-fan { width:100%; height:84px; margin:0 0 12px; }
.application-case-diagram .replenishmentf-fan .hist { fill:none; stroke:var(--case-ink); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.application-case-diagram .replenishmentf-fan .fan line { stroke:var(--case-sage-ink); stroke-width:1.6; }
.application-case-diagram .replenishmentf-fan circle { fill:var(--case-sage-ink); }
.application-case-diagram .replenishmentf-twin { flex:0 0 25%; }
.application-case-diagram .replenishmentf-twin dl { display:flex; flex:1; flex-direction:column; gap:10px; }
.application-case-diagram .replenishmentf-twin dl div { padding:12px; background:var(--case-lavender); }
.application-case-diagram .replenishmentf-twin dt { color:var(--case-lavender-ink); font-size:14px; font-weight:600; line-height:1.4; }
.application-case-diagram .replenishmentf-twin dd { margin:5px 0 0; color:var(--case-muted); font-size:14px; line-height:1.5; }
.application-case-diagram .replenishmentf-twin .replenishmentf-out { margin-top:12px; padding:12px; background:var(--case-sage); color:var(--case-sage-ink); font-size:14px; }
.application-case-diagram .replenishmentf-front { flex:1 1 auto; }
.application-case-diagram .replenishmentf-chart { width:100%; flex:1; min-height:220px; }
.application-case-diagram .replenishmentf-chart .ax { stroke:var(--case-muted); stroke-width:1.4; }
.application-case-diagram .replenishmentf-chart .ah { fill:var(--case-muted); }
.application-case-diagram .replenishmentf-chart .axl { fill:var(--case-muted); font-family:inherit; font-size:15px; }
.application-case-diagram .replenishmentf-chart .crv { fill:none; stroke:var(--case-ink); stroke-width:3; stroke-linecap:round; }
.application-case-diagram .replenishmentf-chart .pt { fill:var(--c); stroke:var(--case-paper); stroke-width:2.5; }
.application-case-diagram .replenishmentf-chart .ptn { fill:white; font-family:inherit; font-size:13px; font-weight:600; }
.application-case-diagram .replenishment-flow .w { --c:var(--case-sage-ink); }
.application-case-diagram .replenishment-flow .p { --c:var(--case-lavender-ink); }
.application-case-diagram .replenishment-flow .s { --c:var(--case-muted); }
.application-case-diagram .replenishmentf-front .replenishmentf-note { margin-top:10px; font-size:12px; }
.application-case-diagram .replenishmentf-pick { flex:0 0 20%; }
.application-case-diagram .replenishmentf-pick ul { display:flex; flex:1; flex-direction:column; gap:24px; list-style:none; margin:4px 0 0; padding:0; }
.application-case-diagram .replenishmentf-pick li { position:relative; display:flex; flex-direction:column; padding-left:31px; }
.application-case-diagram .replenishmentf-pick i { position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; width:21px; height:21px; border-radius:50%; background:var(--c); color:white; font-size:13px; font-style:normal; }
.application-case-diagram .replenishmentf-pick b { color:var(--c); font-size:14px; font-weight:600; line-height:1.4; }
.application-case-diagram .replenishmentf-pick span { margin-top:5px; color:var(--case-muted); font-size:14px; line-height:1.5; }
.application-case-diagram .replenishmentf-pick .replenishmentf-final { margin-top:18px; padding:12px; background:var(--case-sage); color:var(--case-sage-ink); font-size:16px; font-weight:600; text-align:center; }
@media(max-width:760px) {
  .application-case-diagram { margin-top:24px; }
  .case-diagram-viewport { padding-block:18px; }
  .application-case-diagram > figcaption { flex-direction:column; gap:6px; }
}
@media(prefers-reduced-motion:reduce) {
  .application-case-diagram .packing-cube { animation:none; }
  .case-motion-toggle, .case-motion-label { display:none; }
}

/* External animation controls share the action scale; original diagram geometry is preserved. */
body.comparison-site.readable-layout .case-motion-label { font:400 var(--type-action)/1.5 var(--font-sans); }
body.comparison-site.readable-layout .case-motion-toggle:focus-visible + .case-motion-label { outline:2px solid var(--sage-ink); outline-offset:4px; }