.dg {
  --dg-ink: var(--color-ink);
  --dg-muted: var(--color-muted);
  --dg-blue: var(--color-primary);
  --dg-navy: var(--color-navy);
  --dg-paper: var(--color-paper);
  --dg-sky: var(--color-sky);
  --dg-pale: var(--color-pale);
  --dg-line: var(--color-line);
  --dg-pvc: var(--diagram-pvc);
  --dg-metal: var(--diagram-steel);
  --dg-grease: var(--diagram-grease);
  --dg-stroke: var(--diagram-stroke);
  --dg-small-stroke: var(--diagram-smallStroke);
  --dg-body: var(--diagram-body);
  --dg-small: var(--diagram-small);
  --dg-title: var(--diagram-title);
  --dg-gap: var(--space-lg);
  --dg-small-gap: var(--space-md);
  --dg-draw-time: var(--diagram-drawDuration);
  --dg-water-time: var(--diagram-waterDuration);
  --dg-board-height: var(--diagram-flowBoardHeight);
  color: var(--dg-ink);
  margin: 0;
  min-width: 0;
  width: 100%;
  font-family: var(--type-family, sans-serif);
  font-size: var(--dg-body);
  line-height:var(--diagram-reading);
}
.dg *, .dg *::before, .dg *::after {box-sizing: border-box;}
.dg h3, .dg p {margin: 0;}
.dg h3 {font-size: var(--dg-title); line-height:var(--diagram-headingLeading); font-weight:var(--diagram-bold);}
.dg-svg {display: block; width: 100%; height: auto; overflow: visible;}
.dg-svg path,.dg-svg line,.dg-svg circle,.dg-svg rect {vector-effect: non-scaling-stroke; stroke-width: var(--dg-stroke); stroke-linecap: round; stroke-linejoin: round;}
.dg-pipe {fill: var(--dg-pvc); stroke: var(--dg-muted);}
.dg-metal {fill: var(--dg-metal); stroke: var(--dg-muted);}
.dg-detail,.dg-rib,.dg-cut {stroke: var(--dg-muted);}
.dg-wall {fill: var(--dg-sky); stroke: var(--dg-line);}
.dg-deposit {fill: var(--dg-grease); stroke: var(--dg-grease);}
.dg-cable,.dg-spring {stroke: var(--dg-navy);}
.dg-tool {fill: var(--dg-metal); stroke: var(--dg-navy);}
.dg-hose {fill: var(--dg-navy); stroke: var(--dg-navy);}
.dg-water-bed {stroke: var(--dg-pale);}
.dg-flow {stroke: var(--dg-blue); stroke-dasharray: 8 12; fill: none;}
.dg-arrow {stroke: var(--dg-blue);}
.dg-leader,.dg-link {stroke: var(--dg-line);}
.dg-hotspot {fill: var(--dg-paper); stroke: var(--dg-blue);}
.dg-hotspot-core {fill: var(--dg-blue); stroke: none;}
.dg-caption {font-size: var(--dg-small); color: var(--dg-muted); line-height:var(--diagram-reading); margin-top: var(--dg-small-gap) !important;}
.dg-sink-art {position: relative; max-width: var(--diagram-sinkMaxWidth); margin-inline: auto;}
.dg-label {position: absolute; font-size: var(--dg-small); font-weight:var(--diagram-strong); line-height:var(--diagram-labelLeading); background: var(--dg-paper); color: var(--dg-ink); padding-inline: var(--diagram-labelInset); white-space: nowrap;}
.dg-label-basin {top: 4%; left: 18%;}
.dg-label-filter {top: 34%; left: 4%;}
.dg-label-trap {top: 80%; left: 19%;}
.dg-label-hose {top: 33%; left: 42%;}
.dg-label-wall {top: 46%; left: 68%;}
.dg-label-shared {top: 4%; right: 0;}
.dg-sink-notes {list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--dg-small-gap); margin: 0; padding: 0; counter-reset: hotspot;}
.dg-sink-notes li {counter-increment: hotspot; font-size: var(--dg-small);}
.dg-sink-notes strong {color: var(--dg-blue); display: block; font-size: var(--dg-body);}
.dg-sink-notes span {display: block;}
.dg-method-grid {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--dg-gap);}
.dg-method-item {min-width: 0;}
.dg-method-item .dg-svg {background: var(--dg-sky); margin-block: var(--dg-small-gap);}
.dg-method-item p {font-size: var(--dg-body); line-height:var(--diagram-descriptionLeading);}
.dg-method-item p strong {font-weight:var(--diagram-strong);}
.dg-flow-headings {display: grid; grid-template-columns: 24% 22% 24%; justify-content: space-between; font-size: var(--dg-small); text-align: center; gap: 0;}
.dg-flow-board {height: var(--dg-board-height); position: relative; margin-block: var(--dg-small-gap);}
.dg-flow-lines {position: absolute; inset: 0; height: 100%; width: 100%;}
.dg-flow-lines {overflow: visible;}
.dg-flow-lines.dg-svg {aspect-ratio: auto;}
.dg-node {position: absolute; top: var(--dg-y); transform: translateY(-50%); padding: var(--dg-small-gap) var(--diagram-compactGap); text-align: center; font-size: var(--dg-body); line-height:var(--diagram-nodeLeading); word-break: keep-all; overflow-wrap: anywhere; background: var(--dg-sky);}
.dg-node-symptom {left: 0; width: 24%; color: var(--dg-ink);}
.dg-node-cause {left: 39%; width: 22%; background: var(--dg-pale); color: var(--dg-navy);}
.dg-node-equipment {left: 76%; width: 24%; background: var(--dg-blue); color: var(--dg-paper); font-weight:var(--diagram-strong);}
.dg-steps {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0; margin: 0; list-style: none; gap: var(--dg-gap);}
.dg-step {position: relative; min-width: 0;}
.dg-step-icon {position: relative; width: 100%; padding-bottom: var(--dg-small-gap); color: var(--dg-blue);}
.dg-step:not(:last-child) .dg-step-icon::after {content: ''; position: absolute; top: var(--diagram-processConnectorTop); left: var(--diagram-processConnectorStart); right: calc(-1 * var(--dg-small-gap)); height: var(--diagram-hairline); background: var(--dg-line);}
.dg-icon {width: var(--diagram-processIconSize); height: var(--diagram-processIconSize);}
.dg-icon-lines {stroke: currentColor; fill: none;}
.dg-icon-lines path,.dg-icon-lines circle,.dg-icon-lines rect {stroke-width: var(--dg-small-stroke);}
.dg-step p {font-size: var(--dg-body); margin-top: var(--dg-small-gap);}
.dg-step-number {color: var(--dg-blue);}
.dg-motion-ready .dg-step-icon {color: var(--dg-muted);}
.dg-motion-ready .dg-step.is-active .dg-step-icon,.dg-motion-ready .dg-step.is-active h3 {color: var(--dg-blue);}
.dg-region-grid {display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--dg-gap); align-items: center;}
.dg-map {position: relative; min-width: 0;}
.dg-district {stroke: var(--dg-paper); fill: var(--dg-pale);}
.dg-giheung {fill: var(--dg-line);}
.dg-cheoin {fill: var(--dg-sky);}
.dg-highlight-suji .dg-suji,.dg-highlight-giheung .dg-giheung,.dg-highlight-cheoin .dg-cheoin {fill: var(--dg-blue);}
.dg-map-label {position: absolute; font-size: var(--dg-title); font-weight:var(--diagram-bold); color: var(--dg-navy); transform: translate(-50%,-50%);}
.dg-map-label-suji {left: 22%; top: 27%;}
.dg-map-label-giheung {left: 42%; top: 54%;}
.dg-map-label-cheoin {left: 71%; top: 42%;}
.dg-highlight-suji .dg-map-label-suji,.dg-highlight-giheung .dg-map-label-giheung,.dg-highlight-cheoin .dg-map-label-cheoin {color: var(--dg-paper); background: var(--dg-blue);}
.dg-place-group + .dg-place-group {margin-top: var(--dg-gap);}
.dg-place-group h3 {margin-bottom: var(--dg-small-gap);}
.dg-place-selected h3 {color: var(--dg-blue);}
.dg-place-group ul {display: flex; flex-wrap: wrap; list-style: none; gap: var(--diagram-compactGap) var(--dg-small-gap); margin: 0; padding: 0;}
.dg-place-group a {display: inline-block; min-height: var(--diagram-touchTarget); padding-block: var(--diagram-linkPadding); text-decoration: underline; text-underline-offset: var(--diagram-compactGap); color: var(--dg-ink); font-size: var(--dg-body);}
.dg-place-group a:focus-visible {outline: var(--diagram-labelInset) solid var(--dg-blue); outline-offset: var(--diagram-labelInset);}
.dg-map-pin {position: absolute; left: 32%; top: 23%; display: flex; align-items: center; gap: var(--diagram-pinGap); color: var(--dg-navy); font-size: var(--dg-small);}
.dg-map-pin i {width: var(--diagram-pinSize); height: var(--diagram-pinSize); display: block; background: var(--dg-navy); border: var(--diagram-stroke) solid var(--dg-paper); border-radius: 50%;}
.dg-map-pin strong {background: var(--dg-paper); padding: var(--diagram-stroke) var(--diagram-pinGap);}
.dg-neighborhood .dg-map-label-suji {top: 35%; left: 21%;}
.dg-on-dark .dg,.dg.dg-on-dark {--dg-ink: var(--color-paper); --dg-muted: var(--color-pale); --dg-blue: var(--color-pale);}
.dg-on-dark .dg-label,.dg-on-dark .dg-method-item .dg-svg {--dg-ink: var(--color-ink); --dg-muted: var(--color-muted); --dg-blue: var(--color-primary);}
.dg-on-dark .dg-node-symptom {color: var(--color-ink);}
.dg-on-dark .dg-node-equipment {background: var(--color-primary);}
.dg-on-dark .dg-map {--dg-blue: var(--color-primary);}
.dg-on-dark .dg-map .dg-caption {color: var(--color-pale);}
.dg-motion-ready.is-visible .dg-flow {animation: dg-water var(--dg-water-time) linear infinite;}
.dg-motion-ready .dg-flow {animation-play-state: paused;}
.dg-motion-ready.is-visible .dg-flow {animation-play-state: running;}
.dg-draw {stroke-dasharray: 1; stroke-dashoffset: 1;}
.dg-has-entered .dg-draw {animation: dg-draw var(--dg-draw-time) ease-out forwards;}
@keyframes dg-water {to {stroke-dashoffset: -160;}}
@keyframes dg-draw {to {stroke-dashoffset: 0;}}
@media (max-width: 600px) {
  .dg {--dg-title: var(--diagram-mobileTitle); --dg-small: var(--diagram-mobileSmall); --dg-board-height: var(--diagram-mobileFlowBoardHeight);}
  .dg-method-grid,.dg-region-grid {grid-template-columns: minmax(0,1fr);}
  .dg-sink-notes {grid-template-columns: minmax(0,1fr); gap: var(--dg-small-gap);}
  .dg-sink-notes li {display: grid; grid-template-columns: var(--diagram-mobileNoteLabelWidth) minmax(0,1fr); column-gap: var(--diagram-linkPadding); align-items: baseline;}
  .dg-node {font-size: var(--dg-small); padding-block: var(--diagram-mobileNodePadding);}
  .dg-steps {grid-template-columns: minmax(0,1fr); gap: var(--dg-gap);}
  .dg-step {display: grid; grid-template-columns: var(--diagram-processIconSize) minmax(0,1fr); gap: var(--dg-small-gap);}
  .dg-step:not(:last-child) .dg-step-icon::after {left: var(--diagram-mobileConnectorLeft); right: auto; top: var(--diagram-mobileConnectorTop); bottom: calc(-1 * var(--dg-small-gap)); width: var(--diagram-hairline); height: auto;}
  .dg-step-icon {height: 100%;}
  .dg-step p {margin-top: var(--diagram-compactGap);}
}
@media (prefers-reduced-motion: reduce) {
  .dg *, .dg *::before, .dg *::after {animation: none !important; transition: none !important;}
  .dg-draw {stroke-dashoffset: 0;}
  .dg-motion-ready .dg-step-icon,.dg-motion-ready .dg-step h3 {color: var(--dg-blue);}
}