/* Editorial visual system. Scoped to new diagrams and redesigned media only. */
body .iyu-viz-section {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto 88px;
  padding: 0;
  color: #202722;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body .iyu-viz {
  margin: 0;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid #dddcd5;
  border-top: 3px solid #a8480b;
  border-radius: 4px;
  background: #f5f4f0;
  text-align: left;
  overflow: hidden;
}
body .iyu-viz-heading { margin-bottom: 32px; }
body .iyu-viz .iyu-viz-eyebrow {
  display: block; color: #93420f; font-size: 11px; letter-spacing: .16em;
  font-weight: 750; margin-bottom: 12px; line-height: 1.5;
}
body .iyu-viz h2 {
  color: #202722 !important; font-size: clamp(22px, 2.6vw, 32px) !important;
  line-height: 1.4 !important; letter-spacing: -.035em; margin: 0 !important;
  font-weight: 720; word-break: keep-all; overflow-wrap: anywhere;
}
body .iyu-viz .iyu-viz-nodes {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  list-style: none; padding: 0; margin: 0; gap: 24px;
}
body .iyu-viz .iyu-viz-node {
  position: relative; min-width: 0; margin: 0; padding: 24px 20px;
  background: #fff; border: 1px solid #d7dad4; border-radius: 3px;
}
body .iyu-viz .iyu-viz-node::before { display: none; }
body .iyu-viz-number {
  display: block; margin: 0 0 22px; color: #a8480b;
  font: 500 27px/1 ui-monospace, Consolas, monospace; letter-spacing: -.06em;
}
body .iyu-viz h3 {
  color: #202722 !important; font-size: 17px !important; line-height: 1.5 !important;
  font-weight: 750; margin: 0 0 10px !important; word-break: keep-all; overflow-wrap: anywhere;
}
body .iyu-viz p {
  color: #545e57 !important; font-size: 14px !important; line-height: 1.75 !important;
  margin: 0 !important; word-break: keep-all; overflow-wrap: anywhere;
}
body .iyu-viz--flow .iyu-viz-node:not(:last-child)::after,
body .iyu-viz--cycle .iyu-viz-node:not(:last-child)::after {
  content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%);
  color: #8a4b24; font: 20px/1 sans-serif;
}
body .iyu-viz--formula .iyu-viz-node:not(:last-child)::after,
body .iyu-viz--ratio .iyu-viz-node:not(:last-child)::after {
  content: "×"; position: absolute; right: -21px; top: 50%; color: #8a4b24; font: 22px/1 sans-serif;
}
body .iyu-viz--ratio .iyu-viz-node:not(:last-child)::after { content: "÷"; }
body .iyu-viz-result {
  margin-top: 24px; padding: 22px 24px; background: #273b32; color: #fff;
  font-size: clamp(17px, 2.1vw, 25px); line-height: 1.6; font-weight: 650; overflow-wrap: anywhere;
}
body .iyu-viz--stack .iyu-viz-nodes,
body .iyu-viz--tree .iyu-viz-nodes { grid-auto-flow: row; gap: 14px; }
body .iyu-viz--stack .iyu-viz-node,
body .iyu-viz--tree .iyu-viz-node { display: flex; align-items: center; gap: 24px; padding: 20px 24px; }
body .iyu-viz--stack .iyu-viz-number,
body .iyu-viz--tree .iyu-viz-number { margin: 0; }
body .iyu-viz--stack .iyu-viz-node:nth-child(2) { border-left: 4px solid #a8480b; }
body .iyu-viz--tree .iyu-viz-node:nth-child(2) { margin-left: 6%; }
body .iyu-viz--tree .iyu-viz-node:nth-child(3) { margin-left: 12%; }
body .iyu-viz--hub .iyu-viz-nodes { border-top: 2px solid #97a49a; padding-top: 22px; }
body .iyu-viz--hub .iyu-viz-node::after {
  content: ""; height: 22px; width: 1px; background: #97a49a; position: absolute; top: -23px; left: 28px;
}
body .iyu-viz--boundary .iyu-viz-nodes { padding: 20px; border: 1px dashed #6a7e70; }
body .iyu-viz--bus .iyu-viz-nodes { padding-bottom: 20px; border-bottom: 3px solid #a8480b; }
body .iyu-viz-return { margin-top: 22px; padding-top: 16px; border-top: 1px solid #9caaa0; color: #405a49; font-size: 14px; }
body .iyu-viz figcaption { display: block; border-top: 1px solid #dddcd5; margin-top: 28px; padding-top: 16px; color: #626960; font-size: 12px; line-height: 1.8; }
body .iyu-viz-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body .iyu-viz-option { background: #fff; border: 1px solid #d7dad4; min-width: 0; }
body .iyu-viz .iyu-viz-option h3 { padding: 20px 24px; border-bottom: 2px solid #a8480b; margin: 0 !important; }
body .iyu-viz-option:nth-child(2) h3 { border-bottom-color: #405a49; }
body .iyu-viz-option dl { margin: 0; padding: 0 24px; }
body .iyu-viz-option dl > div { padding: 18px 0; border-bottom: 1px solid #e5e6e0; }
body .iyu-viz-option dl > div:last-child { border: 0; }
body .iyu-viz-option dt { margin-bottom: 6px; color: #6b7067; font-size: 12px; }
body .iyu-viz-option dd { color: #273b32; margin: 0; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; word-break: keep-all; }
body img[data-redesigned] { background: #e6e5df; }
body img[data-product-capture] { border: 1px solid #d5d9d4; border-top: 9px solid #e4e8e3; border-radius: 5px; box-shadow: 0 12px 30px #1b33200b; }
body .iyu-photo-note { max-width: 1200px; margin: 0 auto 28px; padding: 0 24px; color: #646c68; font-size: 11px; line-height: 1.8; }
@media(max-width: 800px) {
  body .iyu-viz-section { margin-bottom: 56px; }
  body .iyu-viz .iyu-viz-nodes { grid-auto-flow: row; grid-template-columns: 1fr; gap: 18px; }
  body .iyu-viz .iyu-viz-node { display: flex; align-items: flex-start; gap: 18px; padding: 20px; }
  body .iyu-viz-number { flex: 0 0 30px; margin: 2px 0 0; font-size: 23px; }
  body .iyu-viz--flow .iyu-viz-node:not(:last-child)::after,
  body .iyu-viz--cycle .iyu-viz-node:not(:last-child)::after { content: "↓"; right: auto; left: 33px; top: auto; bottom: -19px; transform: none; font-size: 18px; }
  body .iyu-viz--formula .iyu-viz-node:not(:last-child)::after,
  body .iyu-viz--ratio .iyu-viz-node:not(:last-child)::after { top: auto; bottom: -19px; left: 33px; right: auto; font-size: 18px; }
  body .iyu-viz--hub .iyu-viz-nodes { border-top: 0; border-left: 2px solid #97a49a; padding: 0 0 0 18px; }
  body .iyu-viz--hub .iyu-viz-node::after { top: 34px; left: -20px; width: 19px; height: 1px; }
  body .iyu-viz-matrix { gap: 16px; }
}
@media(max-width: 540px) {
  body .iyu-viz-section { width: calc(100% - 32px); }
  body .iyu-viz { padding: 24px 18px; }
  body .iyu-viz-heading { margin-bottom: 24px; }
  body .iyu-viz-matrix { grid-template-columns: 1fr; }
  body .iyu-viz--boundary .iyu-viz-nodes { padding: 12px; }
  body .iyu-viz h3 { font-size: 16px !important; }
  body .iyu-viz-result { padding: 18px; }
}
@media print {
  body .iyu-viz { break-inside: avoid; background: white; box-shadow: none; }
  body .iyu-viz-result { color: #202722; background: white; border: 1px solid #273b32; }
}