/* ===========================================================
     공통 리셋 / 베이스
     =========================================================== */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* variant 표시 — 기본은 모두 숨기고 active theme만 보여준다. */
  [data-variant] { display: none; }

  /* ===========================================================
     EDITORIAL 테마
     =========================================================== */
  [data-theme="editorial"] {
    --ink: #111111;
    --paper: #FAFAF7;
    --rule: #1f1f1f;
    --muted: #6b6b6b;
    --accent: #b4351c;
    --measure: 64ch;
    --serif: "Fraunces", "Source Serif Pro", "Newsreader", "Apple SD Gothic Neo", "Noto Serif KR", Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  }
  [data-theme="editorial"] body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    font-feature-settings: "kern", "liga", "ss01";
  }
  [data-theme="editorial"] [data-variant="editorial"] { display: revert; }

  [data-theme="editorial"] a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 120ms ease, border-color 120ms ease;
  }
  [data-theme="editorial"] a:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  [data-theme="editorial"] .wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* 헤더 */
  [data-theme="editorial"] header.site {
    border-bottom: 1px solid var(--rule);
    padding: 22px 0;
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 50;
  }
  [data-theme="editorial"] header.site .row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
  }
  [data-theme="editorial"] .wordmark {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.01em;
    border-bottom: none;
  }
  [data-theme="editorial"] .wordmark .slash {
    color: var(--muted);
    margin: 0 0.5ch;
    font-style: italic;
  }
  [data-theme="editorial"] .wordmark .dot { display: none; }
  [data-theme="editorial"] nav.primary {
    display: flex;
    gap: 28px;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  [data-theme="editorial"] nav.primary a {
    border-bottom: none;
    color: var(--ink);
  }
  [data-theme="editorial"] nav.primary a:hover { color: var(--accent); }

  /* 헤더 우측 클러스터 */
  [data-theme="editorial"] .header-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  /* 섹션 공통 */
  [data-theme="editorial"] section {
    padding: 96px 0;
    border-bottom: 1px solid var(--rule);
  }
  [data-theme="editorial"] section:last-of-type { border-bottom: none; }

  [data-theme="editorial"] .eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 28px 0;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  [data-theme="editorial"] .eyebrow::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--ink);
  }

  /* Hero */
  [data-theme="editorial"] .hero {
    padding: 140px 0 120px;
  }
  [data-theme="editorial"] .hero .lockup {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  [data-theme="editorial"] .hero h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(56px, 9vw, 132px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    margin: 0;
  }
  [data-theme="editorial"] .hero h1 em {
    font-style: italic;
    font-weight: 300;
  }
  [data-theme="editorial"] .hero .sub {
    font-family: var(--serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.6;
    color: var(--ink);
    max-width: 56ch;
    margin: 0;
  }
  [data-theme="editorial"] .hero .meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 64px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  [data-theme="editorial"] .hero .meta .index {
    font-variant-numeric: tabular-nums;
  }

  [data-theme="editorial"] h2.section-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 56px 0;
    max-width: 22ch;
  }
  [data-theme="editorial"] h2.section-title em {
    font-style: italic;
    font-weight: 300;
    color: var(--muted);
  }

  /* Work — editorial variant */
  [data-theme="editorial"] .work-list {
    display: grid;
    grid-template-columns: 1fr;
  }
  [data-theme="editorial"] .work-item {
    display: grid;
    grid-template-columns: 120px 1fr 220px;
    gap: 32px;
    padding: 32px 0;
    border-top: 1px solid var(--rule);
    align-items: baseline;
  }
  [data-theme="editorial"] .work-item:last-child { border-bottom: 1px solid var(--rule); }
  [data-theme="editorial"] .work-num {
    font-family: var(--sans);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.06em;
  }
  [data-theme="editorial"] .work-body h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 12px 0;
  }
  [data-theme="editorial"] .work-body h3 a { border-bottom: none; }
  [data-theme="editorial"] .work-body h3 a:hover { color: var(--accent); }
  [data-theme="editorial"] .work-body p {
    margin: 0;
    max-width: 52ch;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.65;
  }
  [data-theme="editorial"] .work-meta-ed {
    text-align: right;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--muted);
    line-height: 1.6;
  }
  [data-theme="editorial"] .work-meta-ed .stage {
    display: inline-block;
    border: 1px solid var(--ink);
    color: var(--ink);
    padding: 3px 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    margin-bottom: 10px;
  }
  [data-theme="editorial"] .work-meta-ed .stage.live { background: var(--ink); color: var(--paper); }
  [data-theme="editorial"] .work-meta-ed .stage.concept {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
  }
  [data-theme="editorial"] .work-meta-ed .org {
    display: block;
    font-style: italic;
    font-family: var(--serif);
    color: var(--ink);
  }

  /* Writing — editorial */
  [data-theme="editorial"] .writing-card-ed {
    display: grid;
    grid-template-columns: 120px 1fr 220px;
    gap: 32px;
    padding: 32px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
  }
  [data-theme="editorial"] .writing-card-ed .date {
    font-family: var(--sans);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.06em;
  }
  [data-theme="editorial"] .writing-card-ed h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.012em;
    margin: 0 0 12px 0;
  }
  [data-theme="editorial"] .writing-card-ed p {
    margin: 0 0 18px 0;
    max-width: 56ch;
    color: var(--ink);
  }
  [data-theme="editorial"] .writing-card-ed .more {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
  }
  [data-theme="editorial"] .writing-card-ed .kicker {
    text-align: right;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  [data-theme="editorial"] .writing-card-ed .kicker .label {
    display: inline-block;
    border: 1px solid var(--ink);
    padding: 3px 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
  }

  /* About — editorial */
  [data-theme="editorial"] .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  [data-theme="editorial"] .about-grid .about-body p {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 19px;
    line-height: 1.65;
    max-width: var(--measure);
    margin: 0 0 18px 0;
  }
  [data-theme="editorial"] .about-grid .about-body em {
    font-style: italic;
    background: transparent;
    padding: 0;
  }
  [data-theme="editorial"] .about-contact-ed {
    border-top: 1px solid var(--rule);
    padding-top: 18px;
    font-size: 14px;
    color: var(--muted);
  }
  [data-theme="editorial"] .about-contact-ed dl {
    margin: 0;
    display: grid;
    grid-template-columns: 110px 1fr;
    row-gap: 10px;
  }
  [data-theme="editorial"] .about-contact-ed dt {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    padding-top: 3px;
  }
  [data-theme="editorial"] .about-contact-ed dd {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
  }

  /* Footer — editorial */
  [data-theme="editorial"] footer.site {
    padding: 48px 0 64px;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.04em;
    border-top: 1px solid var(--rule);
    background: var(--paper);
  }
  [data-theme="editorial"] footer.site .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
  }
  [data-theme="editorial"] footer.site .mark { color: var(--muted); font-weight: 400; font-size: 13px; }

  /* Toggle — editorial */
  [data-theme="editorial"] .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--rule);
    background: transparent;
    border-radius: 0;
    padding: 4px;
  }
  [data-theme="editorial"] .theme-toggle button {
    background: transparent;
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    font-family: var(--serif);
    transition: color 120ms ease, background 120ms ease;
    border-bottom: none;
  }
  [data-theme="editorial"] .theme-toggle button:hover { color: var(--accent); }
  [data-theme="editorial"] .theme-toggle button[aria-pressed="true"] {
    color: var(--paper);
    background: var(--ink);
  }

  /* 모바일 — editorial */
  @media (max-width: 720px) {
    [data-theme="editorial"] .wrap { padding: 0 20px; }
    [data-theme="editorial"] section { padding: 64px 0; }
    [data-theme="editorial"] .hero { padding: 88px 0 72px; }
    [data-theme="editorial"] nav.primary { gap: 16px; font-size: 12px; }
    [data-theme="editorial"] .header-right { gap: 16px; }
    [data-theme="editorial"] .work-item,
    [data-theme="editorial"] .writing-card-ed {
      grid-template-columns: 1fr;
      gap: 14px;
    }
    [data-theme="editorial"] .work-meta-ed,
    [data-theme="editorial"] .writing-card-ed .kicker {
      text-align: left;
    }
    [data-theme="editorial"] .about-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    [data-theme="editorial"] .hero .meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
  }

  /* ===========================================================
     STUDIO 테마
     =========================================================== */
  [data-theme="studio"] {
    --ink: #0c0c0d;
    --paper: #f4f1ea;
    --rule: #1a1a1c;
    --muted: #6c6a64;
    --accent: #ff5b1f;

    --p1-bg: #ffd84d;
    --p1-fg: #0c0c0d;
    --p1-mark: #1f2bff;

    --p2-bg: #1f2bff;
    --p2-fg: #f4f1ea;
    --p2-mark: #ff5b1f;

    --p3-bg: #ff7ab6;
    --p3-fg: #0c0c0d;
    --p3-mark: #06351c;

    --w-bg: #06351c;
    --w-fg: #f4f1ea;
    --w-mark: #ffd84d;

    --sans-studio: "Space Grotesk", system-ui, -apple-system, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
  }
  [data-theme="studio"] body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans-studio);
    font-weight: 500;
    line-height: 1.35;
  }
  [data-theme="studio"] [data-variant="studio"] { display: revert; }

  [data-theme="studio"] a { color: inherit; text-decoration: none; }
  [data-theme="studio"] a:hover { color: var(--accent); }

  [data-theme="studio"] .wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* Header — studio */
  [data-theme="studio"] header.site {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0;
  }
  [data-theme="studio"] header.site .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    gap: 24px;
  }
  [data-theme="studio"] .wordmark {
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 22px;
    font-family: var(--sans-studio);
  }
  [data-theme="studio"] .wordmark .slash,
  [data-theme="studio"] .wordmark em { display: none; }
  [data-theme="studio"] .wordmark .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: 1px;
  }
  [data-theme="studio"] nav.primary {
    display: flex;
    gap: 28px;
    font-weight: 600;
    font-size: 15px;
    text-transform: none;
    letter-spacing: normal;
  }
  [data-theme="studio"] nav.primary a {
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: border-color .15s ease, color .15s ease;
  }
  [data-theme="studio"] nav.primary a:hover { border-bottom-color: var(--ink); color: var(--ink); }
  [data-theme="studio"] .header-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  /* Hero — studio */
  [data-theme="studio"] .hero {
    padding: 88px 0 64px;
    border-bottom: 1px solid var(--rule);
  }
  [data-theme="studio"] .hero .wrap > .lockup,
  [data-theme="studio"] .hero .lockup { display: contents; }
  [data-theme="studio"] .hero .wrap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: end;
  }
  [data-theme="studio"] .hero .eyebrow {
    grid-column: 1 / span 12;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 24px 0;
    display: flex;
    gap: 18px;
    align-items: center;
  }
  [data-theme="studio"] .hero .eyebrow::before {
    content: "";
    display: inline-block;
    width: 56px;
    height: 2px;
    background: var(--ink);
  }
  [data-theme="studio"] .hero h1 {
    grid-column: 1 / span 12;
    font-family: var(--sans-studio);
    font-weight: 700;
    font-size: clamp(64px, 11vw, 168px);
    line-height: 0.92;
    letter-spacing: -0.04em;
    margin: 0;
  }
  [data-theme="studio"] .hero h1 em {
    font-style: normal;
    font-weight: 700;
    color: var(--accent);
  }
  [data-theme="studio"] .hero .sub {
    grid-column: 1 / span 8;
    margin: 36px 0 0 0;
    font-family: var(--sans-studio);
    font-weight: 500;
    font-style: normal;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.5;
    color: var(--ink);
    max-width: 720px;
  }
  [data-theme="studio"] .hero .meta {
    grid-column: 9 / span 4;
    margin-top: 36px;
    font-size: 14px;
    color: var(--muted);
    align-self: end;
    text-align: right;
    border: none;
    padding: 0;
    display: block;
    letter-spacing: normal;
  }
  [data-theme="studio"] .hero .meta .index { display: block; color: var(--ink); font-weight: 600; }
  [data-theme="studio"] .hero .meta .meta-row { display: block; }

  /* Section — studio */
  [data-theme="studio"] section {
    padding: 80px 0;
    border-bottom: 1px solid var(--rule);
  }
  [data-theme="studio"] section:last-of-type { border-bottom: none; }
  [data-theme="studio"] .eyebrow.section-eyebrow { display: none; }

  [data-theme="studio"] h2.section-title {
    font-family: var(--sans-studio);
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0;
    max-width: none;
  }
  [data-theme="studio"] h2.section-title em {
    font-style: normal;
    font-weight: 700;
    color: var(--ink);
  }

  [data-theme="studio"] .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 24px;
    flex-wrap: wrap;
  }
  [data-theme="studio"] .section-head .label {
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }

  /* Work — studio cards */
  [data-theme="studio"] .work-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
  [data-theme="studio"] .card {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
    background: var(--paper);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
  }
  [data-theme="studio"] .card:hover {
    transform: translateY(-4px) rotate(-0.4deg);
    box-shadow: 8px 8px 0 0 var(--ink);
  }
  [data-theme="studio"] .card .thumb {
    aspect-ratio: 4 / 3;
    width: 100%;
    display: block;
    border-bottom: 1px solid var(--rule);
  }
  [data-theme="studio"] .thumb-svg { width: 100%; height: 100%; display: block; }
  [data-theme="studio"] .card .meta {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  [data-theme="studio"] .stage-s {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  [data-theme="studio"] .stage-s .dot-s {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
  }
  [data-theme="studio"] .stage-s.live .dot-s { background: #1bbf6a; }
  [data-theme="studio"] .stage-s.concept .dot-s { background: #b9b3a4; }
  [data-theme="studio"] .card h3 {
    margin: 0;
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  [data-theme="studio"] .card p {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
    max-width: 38ch;
  }

  /* Writing — studio */
  [data-theme="studio"] .writing-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
  [data-theme="studio"] .writing-card-st {
    grid-column: span 8;
    background: var(--w-bg);
    color: var(--w-fg);
    border: 1px solid var(--rule);
    padding: 48px 44px 40px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  [data-theme="studio"] .writing-card-st:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 0 var(--ink);
  }
  [data-theme="studio"] .writing-card-st .date {
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--w-mark);
    font-weight: 600;
  }
  [data-theme="studio"] .writing-card-st h3 {
    margin: 0;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }
  [data-theme="studio"] .writing-card-st p {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    max-width: 56ch;
    color: var(--w-fg);
    opacity: 0.92;
  }
  [data-theme="studio"] .writing-side {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--rule);
    padding: 28px 28px 24px;
    background: var(--paper);
  }
  [data-theme="studio"] .writing-side .big {
    font-size: clamp(40px, 6vw, 88px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.04em;
  }
  [data-theme="studio"] .writing-side .small {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }

  /* About — studio */
  [data-theme="studio"] .about-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
  [data-theme="studio"] .about-grid .about-body {
    grid-column: 1 / span 7;
    font-size: clamp(18px, 1.7vw, 24px);
    line-height: 1.55;
    letter-spacing: -0.005em;
  }
  [data-theme="studio"] .about-grid .about-body p {
    margin: 0;
    font-family: var(--sans-studio);
    font-weight: 500;
    max-width: none;
  }
  [data-theme="studio"] .about-grid .about-body p + p { margin-top: 1.1em; }
  [data-theme="studio"] .about-grid .about-body em {
    font-style: normal;
    background: var(--p1-bg);
    padding: 0 4px;
  }
  [data-theme="studio"] .about-contact-st {
    grid-column: 9 / span 4;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: end;
  }
  [data-theme="studio"] .contact-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--rule);
    padding: 14px 0;
    font-size: 15px;
    font-weight: 600;
  }
  [data-theme="studio"] .contact-row:last-child { border-bottom: 1px solid var(--rule); }
  [data-theme="studio"] .contact-row .k {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }

  /* Footer — studio */
  [data-theme="studio"] footer.site {
    padding: 40px 0 56px;
    font-size: 14px;
    color: var(--muted);
    border-top: 0;
    background: var(--paper);
  }
  [data-theme="studio"] footer.site .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  [data-theme="studio"] footer.site .mark {
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-size: 18px;
  }

  /* Toggle — studio */
  [data-theme="studio"] .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--paper);
    border: 2px solid var(--ink);
    padding: 3px;
    border-radius: 999px;
  }
  [data-theme="studio"] .theme-toggle button {
    background: transparent;
    border: 0;
    padding: 4px 10px;
    cursor: pointer;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    font-family: var(--sans-studio);
    font-weight: 700;
    border-radius: 999px;
    transition: color 120ms ease, background 120ms ease, transform 120ms ease;
  }
  [data-theme="studio"] .theme-toggle button:hover {
    color: var(--ink);
    transform: translateY(-1px);
  }
  [data-theme="studio"] .theme-toggle button[aria-pressed="true"] {
    color: var(--paper);
    background: var(--accent);
  }

  /* 모바일 — studio */
  @media (max-width: 960px) {
    [data-theme="studio"] .wrap { padding: 0 22px; }
    [data-theme="studio"] .hero { padding: 56px 0 40px; }
    [data-theme="studio"] .hero .sub { grid-column: 1 / span 12; }
    [data-theme="studio"] .hero .meta { grid-column: 1 / span 12; text-align: left; }
    [data-theme="studio"] .card { grid-column: span 6; }
    [data-theme="studio"] .writing-card-st { grid-column: span 12; padding: 32px 28px; }
    [data-theme="studio"] .writing-side { grid-column: span 12; }
    [data-theme="studio"] .about-grid .about-body { grid-column: 1 / span 12; }
    [data-theme="studio"] .about-contact-st { grid-column: 1 / span 12; }
  }
  @media (max-width: 640px) {
    [data-theme="studio"] .wrap { padding: 0 18px; }
    [data-theme="studio"] header.site .row { padding: 14px 0; }
    [data-theme="studio"] nav.primary { gap: 16px; font-size: 14px; }
    [data-theme="studio"] section { padding: 56px 0; }
    [data-theme="studio"] .card { grid-column: span 12; }
    [data-theme="studio"] .hero h1 { font-size: 64px; }
    [data-theme="studio"] .section-head { margin-bottom: 28px; }
  }

  /* prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition: none !important;
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
    }
    [data-theme="studio"] .card:hover,
    [data-theme="studio"] .writing-card-st:hover,
    [data-theme="studio"] .theme-toggle button:hover {
      transform: none !important;
      box-shadow: none !important;
    }
  }

  /* ===========================================================
     List / Single 페이지 — posts, work, about 공용
     두 테마 모두 동일 마크업, CSS 변수로 톤만 따라간다.
     =========================================================== */

  .page-section {
    padding: 96px 0 128px;
    color: var(--ink, #111);
    background: var(--paper, #fafaf7);
    min-height: 60vh;
  }

  [data-theme="studio"] .page-section {
    padding: 80px 0 120px;
  }

  .list-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rule, rgba(0,0,0,0.12));
  }

  .list-rows .list-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--rule, rgba(0,0,0,0.12));
    color: var(--ink, #111);
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .list-rows .list-row:hover {
    opacity: 0.6;
  }

  .list-title {
    font-size: 1.05rem;
    font-weight: 500;
  }

  [data-theme="editorial"] .list-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: 1.2rem;
  }

  [data-theme="studio"] .list-title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
  }

  .list-date {
    font-size: 0.85rem;
    opacity: 0.6;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }

  /* Single 본문 (post / work / about) */
  .single header h1.section-title,
  .single header .section-title {
    margin-bottom: 1rem;
  }

  .prose {
    color: var(--ink, #111);
    line-height: 1.75;
  }

  .prose p {
    margin: 0 0 1.25rem;
  }

  .prose h2 {
    margin: 2.5rem 0 1rem;
    font-size: 1.5rem;
  }

  .prose h3 {
    margin: 2rem 0 0.75rem;
    font-size: 1.2rem;
  }

  [data-theme="editorial"] .prose h2,
  [data-theme="editorial"] .prose h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
  }

  [data-theme="studio"] .prose h2,
  [data-theme="studio"] .prose h3 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
  }

  .prose img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem 0;
  }

  .prose blockquote {
    margin: 1.5rem 0;
    padding: 0 0 0 1.25rem;
    border-left: 2px solid var(--rule, rgba(0,0,0,0.2));
    opacity: 0.85;
  }

  .prose pre {
    background: rgba(0,0,0,0.04);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 1.5rem 0;
  }

  [data-theme="studio"] .prose pre {
    background: rgba(0,0,0,0.06);
    border-radius: 0;
  }

  .prose code {
    font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.9em;
  }

  .prose p code,
  .prose li code {
    background: rgba(0,0,0,0.06);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
  }

  .prose ul, .prose ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
  }

  .prose li {
    margin: 0.25rem 0;
  }

  .prose table {
    width: min(920px, calc(100vw - 40px));
    margin: 1.5rem 0 2rem 50%;
    transform: translateX(-50%);
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.55;
    background: var(--paper, #fafaf7);
    border: 1px solid var(--rule, #111);
  }

  .prose th,
  .prose td {
    border: 1px solid var(--rule, #111);
    padding: 0.75rem 0.85rem;
    vertical-align: top;
  }

  .prose th {
    text-align: left;
    background: var(--ink, #111);
    color: var(--paper, #fafaf7);
    font-size: 0.78rem;
    text-transform: uppercase;
  }

  [data-theme="studio"] .prose table {
    border-width: 2px;
    box-shadow: 8px 8px 0 0 var(--ink);
  }

  .prose a {
    color: var(--accent, var(--ink));
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  .prose a:hover {
    opacity: 0.7;
  }

  /* Article diagrams */
  .prose .intent-visual {
    width: min(920px, calc(100vw - 40px));
    margin: 2rem 0 2.25rem 50%;
    transform: translateX(-50%);
    border: 1px solid var(--rule, #111);
    background: var(--paper, #fafaf7);
    color: var(--ink, #111);
    overflow: hidden;
  }

  .intent-visual * {
    box-sizing: border-box;
  }

  .intent-visual strong,
  .intent-visual span,
  .intent-visual em {
    display: block;
  }

  .intent-visual strong {
    font-size: 1rem;
    line-height: 1.25;
  }

  .intent-visual span,
  .intent-visual em,
  .intent-label {
    font-size: 0.72rem;
    line-height: 1.35;
    text-transform: uppercase;
    font-style: normal;
  }

  .intent-visual em {
    margin-top: 0.6rem;
    opacity: 0.82;
  }

  .intent-chain {
    display: grid;
    grid-template-columns: repeat(7, minmax(118px, 1fr));
    overflow-x: auto;
  }

  .intent-step {
    min-height: 150px;
    padding: 1rem;
    border-right: 1px solid var(--rule, #111);
    background: #ffd84d;
    color: #0c0c0d;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .intent-step:last-child {
    border-right: 0;
  }

  .intent-step span {
    font-variant-numeric: tabular-nums;
    opacity: 0.68;
  }

  .intent-step.hot {
    background: #ff5b1f;
    color: #fff8ef;
  }

  .intent-step.blue {
    background: #1f2bff;
    color: #f4f1ea;
  }

  .intent-step.green {
    background: #06351c;
    color: #f4f1ea;
  }

  .intent-translate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1.35fr);
    min-height: 210px;
  }

  .intent-translate > div {
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--rule, #111);
  }

  .intent-translate > div:last-child {
    border-right: 0;
  }

  .intent-translate p {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 700;
  }

  .intent-label {
    color: var(--muted, #666);
    font-weight: 700;
  }

  .intent-pivot {
    align-items: center;
    text-align: center;
    background: #0c0c0d;
    color: #f4f1ea;
    font-size: 0.9rem;
    line-height: 1.45;
    font-weight: 700;
  }

  .intent-trace {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    overflow-x: auto;
  }

  .intent-trace > div {
    min-height: 116px;
    padding: 1rem;
    border-right: 1px solid var(--rule, #111);
    position: relative;
    background: rgba(0, 0, 0, 0.025);
  }

  .intent-trace > div:nth-child(even) {
    background: rgba(0, 0, 0, 0.065);
  }

  .intent-trace > div:last-child {
    border-right: 0;
  }

  .intent-trace > div:not(:last-child)::after {
    content: "↔";
    position: absolute;
    right: -0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid var(--rule, #111);
    background: var(--paper, #fafaf7);
    color: var(--accent, #b4351c);
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    z-index: 1;
  }

  .intent-trace span {
    color: var(--muted, #666);
    margin-bottom: 1.6rem;
    font-weight: 700;
  }

  .intent-matrix {
    display: grid;
    grid-template-columns: minmax(170px, 1.45fr) repeat(4, minmax(104px, 1fr));
    overflow-x: auto;
  }

  .matrix-corner,
  .matrix-head,
  .matrix-rule,
  .matrix-cell {
    min-height: 62px;
    padding: 0.85rem;
    border-right: 1px solid var(--rule, #111);
    border-bottom: 1px solid var(--rule, #111);
    display: flex;
    align-items: center;
  }

  .matrix-corner,
  .matrix-head {
    min-height: 48px;
    background: #0c0c0d;
    color: #f4f1ea;
    font-size: 0.74rem;
    text-transform: uppercase;
    font-weight: 700;
  }

  .matrix-head {
    justify-content: center;
  }

  .matrix-rule {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.035);
  }

  .matrix-cell {
    justify-content: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 700;
  }

  .matrix-cell.hot {
    background: #ff5b1f;
    color: #fff8ef;
  }

  .matrix-cell.blue {
    background: #1f2bff;
    color: #f4f1ea;
  }

  .matrix-cell.green {
    background: #06351c;
    color: #f4f1ea;
  }

  .intent-gates {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    overflow-x: auto;
  }

  .intent-gates > div {
    min-height: 138px;
    padding: 1.1rem;
    border-right: 1px solid var(--rule, #111);
    background: #f4f1ea;
    color: #0c0c0d;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .intent-gates > div:nth-child(2) {
    background: #ffd84d;
  }

  .intent-gates > div:nth-child(3) {
    background: #1f2bff;
    color: #f4f1ea;
  }

  .intent-gates > div:nth-child(4) {
    background: #06351c;
    color: #f4f1ea;
    border-right: 0;
  }

  .intent-gates span {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
    font-weight: 700;
  }

  .alignment-map,
  .aspect-verdict,
  .release-verdict {
    padding: 1rem;
    display: grid;
    gap: 1rem;
  }

  .map-title {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    border-bottom: 1px solid var(--rule, #111);
    padding-bottom: 0.85rem;
  }

  .map-title span,
  .map-kicker {
    color: var(--muted, #666);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
  }

  .map-title strong {
    font-size: 1.1rem;
    text-align: right;
  }

  .longi-box {
    border: 1px solid var(--rule, #111);
    background: rgba(0, 0, 0, 0.025);
    padding: 0.85rem;
  }

  .map-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    gap: 0.65rem;
    margin-top: 0.7rem;
  }

  .map-node {
    min-height: 122px;
    border: 1px solid var(--rule, #111);
    background: var(--paper, #fafaf7);
    padding: 0.85rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .map-row .map-node:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -0.62rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--paper, #fafaf7);
    border: 1px solid var(--rule, #111);
    color: var(--accent, #b4351c);
    width: 1.15rem;
    height: 1.15rem;
    display: grid;
    place-items: center;
    z-index: 2;
    font-size: 0.72rem;
  }

  .map-node span {
    color: var(--muted, #666);
    font-weight: 700;
  }

  .map-node.human {
    background: #ffd84d;
    color: #0c0c0d;
  }

  .map-node.blue {
    background: #1f2bff;
    color: #f4f1ea;
  }

  .map-node.green,
  .map-node.release {
    background: #06351c;
    color: #f4f1ea;
  }

  .map-node.aspect {
    background: #e2d6f3;
    color: #0c0c0d;
  }

  .map-node.eval {
    background: #d1ecf1;
    color: #0c0c0d;
  }

  .map-node.gate {
    background: #f8d7da;
    color: #0c0c0d;
  }

  .map-node.blue span,
  .map-node.green span,
  .map-node.release span {
    color: rgba(244, 241, 234, 0.78);
  }

  .aspect-box {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.6fr);
    gap: 0.8rem;
    align-items: stretch;
  }

  .weave-targets {
    border: 1px dashed var(--rule, #111);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    position: relative;
  }

  .weave-targets::before {
    content: "woven into";
    position: absolute;
    top: -0.72rem;
    left: 1rem;
    background: var(--paper, #fafaf7);
    color: var(--accent, #b4351c);
    padding: 0 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
  }

  .weave-targets span {
    display: grid;
    place-items: center;
    min-height: 96px;
    border-right: 1px dashed var(--rule, #111);
    font-weight: 700;
  }

  .weave-targets span:last-child {
    border-right: 0;
  }

  .authority-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
  }

  .aspect-verdict {
    grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr) repeat(2, minmax(150px, 1fr));
    align-items: stretch;
  }

  .aspect-source,
  .aspect-sites,
  .aspect-check,
  .aspect-and,
  .aspect-met {
    border: 1px solid var(--rule, #111);
    padding: 0.95rem;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }

  .aspect-source {
    background: #e2d6f3;
  }

  .aspect-sites {
    background: rgba(0, 0, 0, 0.035);
  }

  .aspect-check.alpha {
    background: #d1ecf1;
  }

  .aspect-check.beta {
    background: #ffd84d;
  }

  .aspect-and,
  .aspect-met {
    grid-column: span 2;
    min-height: 86px;
    background: #06351c;
    color: #f4f1ea;
  }

  .aspect-met {
    background: #d4edda;
    color: #0c0c0d;
  }

  .aspect-source::after,
  .aspect-sites::after,
  .aspect-and::after {
    content: "→";
    position: absolute;
    right: -0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--rule, #111);
    background: var(--paper, #fafaf7);
    color: var(--accent, #b4351c);
    display: grid;
    place-items: center;
    z-index: 1;
    font-size: 0.78rem;
  }

  .release-verdict {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
  }

  .release-axis,
  .release-question,
  .release-outcome {
    border: 1px solid var(--rule, #111);
    padding: 0.95rem;
    min-height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .release-axis.longi {
    grid-column: span 2;
    background: rgba(0, 0, 0, 0.035);
  }

  .release-axis.cross {
    background: #e2d6f3;
  }

  .release-question {
    background: #0c0c0d;
    color: #f4f1ea;
  }

  .release-dims {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.8rem;
  }

  .release-dims em {
    border: 1px solid currentColor;
    padding: 0.25rem 0.45rem;
    margin: 0;
    opacity: 1;
  }

  .release-outcome.ok {
    background: #d4edda;
    color: #0c0c0d;
  }

  .release-outcome.no {
    background: #f8d7da;
    color: #0c0c0d;
  }

  .release-outcome.debt {
    background: #fff3cd;
    color: #0c0c0d;
  }

  [data-theme="editorial"] .intent-visual strong,
  [data-theme="editorial"] .intent-translate p {
    font-family: var(--serif);
    font-weight: 500;
  }

  [data-theme="studio"] .prose .intent-visual {
    border-width: 2px;
    box-shadow: 8px 8px 0 0 var(--ink);
  }

  [data-theme="studio"] .intent-visual strong,
  [data-theme="studio"] .intent-translate p {
    font-family: var(--sans-studio);
    font-weight: 700;
  }

  /* 모바일 */
  @media (max-width: 720px) {
    .page-section { padding: 64px 0 96px; }
    .list-rows .list-row { flex-direction: column; gap: 0.4rem; align-items: flex-start; }
    .prose .intent-visual {
      width: 100%;
      margin-left: 0;
      transform: none;
    }
    .intent-chain,
    .intent-trace,
    .intent-gates {
      grid-template-columns: 1fr;
      overflow-x: visible;
    }
    .intent-step,
    .intent-trace > div,
    .intent-gates > div {
      min-height: auto;
      border-right: 0;
      border-bottom: 1px solid var(--rule, #111);
    }
    .intent-step:last-child,
    .intent-trace > div:last-child,
    .intent-gates > div:last-child {
      border-bottom: 0;
    }
    .intent-trace > div:not(:last-child)::after {
      content: "↕";
      right: 1rem;
      top: auto;
      bottom: -0.7rem;
      transform: none;
    }
    .intent-translate {
      grid-template-columns: 1fr;
    }
    .intent-translate > div {
      border-right: 0;
      border-bottom: 1px solid var(--rule, #111);
    }
    .intent-translate > div:last-child {
      border-bottom: 0;
    }
    .intent-translate p {
      margin-top: 1.2rem;
      font-size: 1.1rem;
    }
    .intent-matrix {
      width: 100%;
      grid-template-columns: minmax(140px, 1.4fr) repeat(4, minmax(88px, 1fr));
    }
    .map-title,
    .aspect-box,
    .authority-row,
    .aspect-verdict,
    .release-verdict {
      grid-template-columns: 1fr;
      display: grid;
    }
    .map-title strong {
      text-align: left;
    }
    .map-row {
      grid-template-columns: 1fr;
    }
    .map-row .map-node:not(:last-child)::after,
    .aspect-source::after,
    .aspect-sites::after,
    .aspect-and::after {
      content: "↓";
      right: 1rem;
      top: auto;
      bottom: -0.72rem;
      transform: none;
    }
    .weave-targets {
      grid-template-columns: 1fr;
    }
    .weave-targets span {
      border-right: 0;
      border-bottom: 1px dashed var(--rule, #111);
      min-height: 58px;
    }
    .weave-targets span:last-child {
      border-bottom: 0;
    }
    .aspect-and,
    .aspect-met,
    .release-axis.longi {
      grid-column: auto;
    }
    .prose table {
      display: block;
      width: 100%;
      margin-left: 0;
      transform: none;
      overflow-x: auto;
    }
  }

  /* ── see-more link under intent visuals ── */
  .prose .see-more {
    margin: -1rem 0 2rem;
    padding-top: 0;
  }

  .prose .see-more a {
    display: inline-block;
    border: 1px solid var(--rule, #111);
    padding: 0.5rem 0.85rem;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--paper, #fafaf7);
    color: var(--ink, #111);
    transition: background 0.12s, color 0.12s;
  }

  .prose .see-more a:hover {
    background: var(--ink, #111);
    color: var(--paper, #fafaf7);
    opacity: 1;
  }

  /* ── intent visual: weave-chain (종단 × 횡단 한 그림) ── */
  .weave-chain {
    display: grid;
    grid-template-columns: minmax(96px, 0.7fr) repeat(4, minmax(0, 1fr));
    background: var(--paper, #fafaf7);
  }

  .wc-corner,
  .wc-col-head,
  .wc-step-head,
  .wc-cell {
    border-right: 1px solid var(--rule, #111);
    border-bottom: 1px solid var(--rule, #111);
    padding: 0.65rem 0.7rem;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .weave-chain > div:nth-of-type(5n+1).wc-cell,
  .weave-chain .wc-row-end {
    border-right: 0;
  }

  .wc-corner {
    background: #0c0c0d;
    color: #f4f1ea;
    grid-column: 1;
    grid-row: 1;
  }

  .wc-corner span,
  .wc-col-head span,
  .wc-step-head span {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    color: rgba(12, 12, 13, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.15rem;
  }

  .wc-corner span {
    color: rgba(244, 241, 234, 0.6);
  }

  .wc-corner strong {
    font-size: 0.85rem;
    line-height: 1.2;
  }

  .wc-col-head {
    background: rgba(0, 0, 0, 0.05);
  }

  .wc-col-head strong {
    font-size: 0.92rem;
  }

  .wc-step-head {
    background: #ffd84d;
    color: #0c0c0d;
    text-align: left;
    grid-column: 1;
  }

  .wc-step-head strong {
    font-size: 0.85rem;
    line-height: 1.2;
  }

  .wc-cell {
    background: #fff5b8;
    color: #0c0c0d;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .wc-cell strong {
    font-size: 0.78rem !important;
    line-height: 1.2;
    font-weight: 700;
  }

  .wc-cell em {
    margin-top: 0.1rem !important;
    font-style: normal !important;
    font-size: 0.62rem !important;
    color: rgba(12, 12, 13, 0.55) !important;
    text-transform: none !important;
    opacity: 1 !important;
    font-variant-numeric: tabular-nums;
  }

  .wc-cell.s-promise  { background: #ffd84d; }
  .wc-cell.s-cond     { background: #ffe98a; }
  .wc-cell.s-spec     { background: #fff5b8; }
  .wc-cell.s-test     { background: #fff9d8; }
  .wc-cell.s-code     { background: #06351c; color: #f4f1ea; }
  .wc-cell.s-code em  { color: rgba(244, 241, 234, 0.7) !important; }

  .wc-arrow {
    position: absolute;
    top: -0.62rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1rem;
    height: 1rem;
    background: var(--paper, #fafaf7);
    border: 1px solid var(--rule, #111);
    color: var(--accent, #b4351c);
    display: grid;
    place-items: center;
    z-index: 2;
    font-size: 0.7rem;
  }

  .wc-cross {
    grid-column: 1 / -1;
    background: #4f2a8a;
    color: #f4f1ea;
    padding: 0.55rem 0.8rem;
    display: grid;
    grid-template-columns: minmax(96px, 0.7fr) 1fr auto;
    gap: 0.7rem;
    align-items: center;
    border-bottom: 1px solid var(--rule, #111);
    position: relative;
  }

  .wc-cross::before,
  .wc-cross::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 8px, transparent 8px 16px);
    pointer-events: none;
  }

  .wc-cross::before { top: 0; }
  .wc-cross::after  { bottom: 0; }

  .wc-cross-label {
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.7) !important;
  }

  .wc-cross-name {
    font-size: 0.92rem;
    font-weight: 700;
  }

  .wc-cross-tag {
    display: inline-block;
    border: 1px solid rgba(244, 241, 234, 0.5);
    padding: 0.18rem 0.5rem;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .wc-legend {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.4rem;
    padding: 0.85rem 1rem;
    background: #0c0c0d;
    color: #f4f1ea;
    border-bottom: 0;
  }

  .wc-legend span {
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem !important;
    color: rgba(244, 241, 234, 0.85) !important;
    margin: 0 !important;
    font-weight: 600;
    text-transform: none !important;
  }

  .wc-legend i {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 1px solid #f4f1ea;
    font-style: normal;
  }

  .wc-legend i.longi { background: #ffd84d; }
  .wc-legend i.cross { background: #4f2a8a; }

  /* ── intent visual: advice-fanout (단일 advice가 N개 사이트에 weave) ── */
  .advice-fanout {
    display: grid;
    grid-template-columns: minmax(180px, 1fr);
    gap: 0;
    background: var(--paper, #fafaf7);
  }

  .fan-source {
    background: #4f2a8a;
    color: #f4f1ea;
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--rule, #111);
  }

  .fan-source span {
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    color: rgba(244, 241, 234, 0.7) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .fan-source strong {
    display: block;
    font-size: 1.1rem;
    line-height: 1.3;
    margin-top: 0.2rem;
  }

  .fan-source em {
    display: block !important;
    font-size: 0.78rem !important;
    margin-top: 0.4rem !important;
    color: rgba(244, 241, 234, 0.7) !important;
    font-style: normal !important;
    text-transform: none !important;
    opacity: 1 !important;
  }

  .fan-arms {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .fan-arm {
    border-right: 1px solid var(--rule, #111);
    padding: 0.85rem 0.7rem;
    background: #f3ecfb;
    color: #0c0c0d;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
    min-height: 130px;
  }

  .fan-arm:last-child {
    border-right: 0;
  }

  .fan-arm::before {
    content: "↓";
    position: absolute;
    top: -0.65rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.1rem;
    height: 1.1rem;
    background: var(--paper, #fafaf7);
    border: 1px solid var(--rule, #111);
    color: #4f2a8a;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    z-index: 2;
  }

  .fan-arm span {
    font-size: 0.66rem !important;
    color: rgba(12, 12, 13, 0.6) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .fan-arm strong {
    font-size: 0.9rem;
    line-height: 1.25;
  }

  .fan-arm em {
    font-size: 0.7rem !important;
    color: rgba(12, 12, 13, 0.6) !important;
    font-style: normal !important;
    text-transform: none !important;
    margin-top: 0.2rem !important;
    opacity: 1 !important;
    border-top: 1px dashed rgba(12, 12, 13, 0.25);
    padding-top: 0.35rem;
    width: 100%;
  }

  .fan-arm.miss {
    background: repeating-linear-gradient(135deg, #f3ecfb 0 6px, #e2d6f3 6px 12px);
  }

  /* ── intent visual: verification-shield (4 검증 장치 — 각자 다른 실패면) ── */
  .verification-shield {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .vs-cell {
    border-right: 1px solid var(--rule, #111);
    padding: 1rem 0.85rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 220px;
    position: relative;
  }

  .vs-cell:last-child {
    border-right: 0;
  }

  .vs-cell.judge      { background: #d1ecf1; color: #0c0c0d; }
  .vs-cell.validator  { background: #ffd84d; color: #0c0c0d; }
  .vs-cell.contract   { background: #1f2bff; color: #f4f1ea; }
  .vs-cell.gate       { background: #06351c; color: #f4f1ea; }

  .vs-no {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    color: rgba(12, 12, 13, 0.55) !important;
    font-variant-numeric: tabular-nums;
  }

  .vs-cell.contract .vs-no,
  .vs-cell.gate .vs-no {
    color: rgba(244, 241, 234, 0.65) !important;
  }

  .vs-cell strong {
    font-size: 1.02rem;
    line-height: 1.25;
  }

  .vs-cell .vs-asks {
    font-size: 0.78rem !important;
    line-height: 1.4;
    margin-top: 0 !important;
    opacity: 0.85;
    text-transform: none !important;
    font-style: normal !important;
  }

  .vs-cell .vs-fail {
    margin-top: auto;
    border-top: 1px dashed currentColor;
    padding-top: 0.55rem;
    font-size: 0.72rem !important;
    text-transform: none !important;
    font-style: normal !important;
    opacity: 0.95;
  }

  .vs-cell .vs-fail b {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.18rem;
    opacity: 0.7;
  }

  /* ── intent visual: evolution-stack ── */
  .intent-visual.evolution-stack {
    background: #0c0c0d;
    color: #f4f1ea;
  }

  .evolution-stack {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .evo-col {
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-right: 1px solid rgba(244, 241, 234, 0.18);
    padding: 0.95rem 0.85rem 1rem;
    min-height: 360px;
    position: relative;
  }

  .evo-col:last-child {
    border-right: 0;
  }

  .evo-phase {
    display: block !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    color: rgba(244, 241, 234, 0.55) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
  }

  .evo-title {
    display: block !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    color: #f4f1ea !important;
    font-weight: 700;
  }

  .evo-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.45rem;
    margin-top: 1rem;
    align-self: end;
  }

  .evo-layer {
    border: 1px solid rgba(244, 241, 234, 0.22);
    padding: 0.5rem 0.6rem;
    background: rgba(244, 241, 234, 0.05);
    color: rgba(244, 241, 234, 0.4);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem;
    transition: none;
  }

  .evo-layer span {
    font-size: 0.6rem !important;
    color: rgba(244, 241, 234, 0.6) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
  }

  .evo-layer strong {
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
    color: rgba(244, 241, 234, 0.78) !important;
    font-weight: 700;
  }

  .evo-layer.fresh {
    color: #0c0c0d;
  }

  .evo-layer.fresh span {
    color: rgba(12, 12, 13, 0.65) !important;
  }

  .evo-layer.fresh strong {
    color: #0c0c0d !important;
  }

  .evo-layer.l-spec.fresh    { background: #ff5b1f; border-color: #ff5b1f; }
  .evo-layer.l-us.fresh      { background: #ffd84d; border-color: #ffd84d; }
  .evo-layer.l-aop.fresh     { background: #e2d6f3; border-color: #e2d6f3; }
  .evo-layer.l-gate.fresh    { background: #d4edda; border-color: #d4edda; }

  .evo-layer.l-aop {
    border-style: dashed;
  }

  .evo-arrow {
    position: absolute;
    top: 1.05rem;
    right: -0.6rem;
    width: 1.15rem;
    height: 1.15rem;
    background: #0c0c0d;
    border: 1px solid rgba(244, 241, 234, 0.4);
    color: #ffd84d;
    display: grid;
    place-items: center;
    z-index: 2;
    font-size: 0.78rem;
    font-style: normal;
  }

  .evo-col:last-child .evo-arrow {
    display: none;
  }

  .evo-note {
    margin-top: 0.85rem;
    border-top: 1px dashed rgba(244, 241, 234, 0.25);
    padding-top: 0.55rem;
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    color: rgba(244, 241, 234, 0.7) !important;
    text-transform: none !important;
    font-style: normal !important;
    opacity: 1 !important;
    margin-bottom: 0;
  }

  /* ── see-more link under intent visuals ── */
  .gap-fill {
    display: grid;
    grid-template-columns: minmax(180px, 1.05fr) minmax(220px, 1.4fr) minmax(180px, 1.05fr);
    align-items: stretch;
  }

  .gap-source,
  .gap-blanks,
  .gap-result {
    padding: 1.2rem 1.1rem;
    border-right: 1px solid var(--rule, #111);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .gap-result {
    border-right: 0;
  }

  .gap-source {
    background: #ffd84d;
    color: #0c0c0d;
  }

  .gap-blanks {
    background: #0c0c0d;
    color: #f4f1ea;
  }

  .gap-result {
    background: #b4351c;
    color: #fff8ef;
  }

  .gap-tag {
    color: rgba(12, 12, 13, 0.7);
    font-weight: 700;
  }

  .gap-blanks .gap-tag {
    color: rgba(244, 241, 234, 0.7);
  }

  .gap-result .gap-tag {
    color: rgba(255, 248, 239, 0.78);
  }

  .gap-source strong {
    font-size: 1.18rem;
    line-height: 1.35;
  }

  .gap-result strong {
    font-size: 1.05rem;
    line-height: 1.35;
  }

  .gap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .gap-list li {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: 0.6rem;
    align-items: center;
    border: 1px dashed rgba(244, 241, 234, 0.4);
    padding: 0.5rem 0.6rem;
    background: rgba(244, 241, 234, 0.04);
  }

  .gap-list li b {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    background: #ffd84d;
    color: #0c0c0d;
    font-weight: 800;
    font-size: 0.95rem;
  }

  .gap-list li span {
    display: block;
    font-size: 0.78rem;
    line-height: 1.35;
    text-transform: none;
    color: #f4f1ea;
    font-weight: 600;
  }

  .gap-arrow {
    color: #ffd84d !important;
    margin-top: 0.2rem !important;
    font-weight: 700;
    opacity: 1 !important;
  }

  /* ── intent visual: method-stack ── */
  .method-stack {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: stretch;
  }

  .stack-axis {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    justify-items: center;
    padding: 1.1rem 0.4rem;
    border-right: 1px solid var(--rule, #111);
    background: #0c0c0d;
    color: #f4f1ea;
    text-align: center;
    gap: 0.6rem;
  }

  .stack-axis-top,
  .stack-axis-bot {
    display: block;
    font-size: 0.7rem;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  .stack-axis-bar {
    display: block;
    width: 4px;
    min-height: 240px;
    background: linear-gradient(180deg, #ffd84d 0%, #ff5b1f 35%, #b4351c 60%, #1f2bff 80%, #06351c 100%);
  }

  .stack-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .stack-step {
    position: relative;
    padding: 1rem 1.2rem 1rem 4.2rem;
    border-bottom: 1px solid var(--rule, #111);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0.4rem 1.2rem;
    align-items: start;
  }

  .stack-step:last-child {
    border-bottom: 0;
  }

  .stack-no {
    position: absolute;
    left: 0.9rem;
    top: 0.95rem;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    color: rgba(12, 12, 13, 0.55) !important;
    font-variant-numeric: tabular-nums;
  }

  .stack-step strong {
    grid-column: 1;
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }

  .stack-step em {
    grid-column: 1;
    margin-top: 0.1rem !important;
    opacity: 1 !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    font-weight: 500 !important;
  }

  .stack-step b {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(12, 12, 13, 0.6);
    font-weight: 800;
  }

  .stack-step i {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-style: normal;
    font-size: 0.8rem;
    line-height: 1.35;
    font-weight: 600;
    border-left: 3px solid #b4351c;
    padding-left: 0.55rem;
  }

  .stack-step.s1 { background: #ffd84d; color: #0c0c0d; }
  .stack-step.s2 { background: #ffe98a; color: #0c0c0d; }
  .stack-step.s3 { background: #ff5b1f; color: #fff8ef; }
  .stack-step.s4 { background: #b4351c; color: #fff8ef; }
  .stack-step.s5 { background: #e2d6f3; color: #0c0c0d; }
  .stack-step.s6 { background: #1f2bff; color: #f4f1ea; }
  .stack-step.s7 { background: #06351c; color: #f4f1ea; }

  .stack-step.s3 .stack-no,
  .stack-step.s4 .stack-no,
  .stack-step.s6 .stack-no,
  .stack-step.s7 .stack-no { color: rgba(244, 241, 234, 0.65) !important; }

  .stack-step.s3 b,
  .stack-step.s4 b,
  .stack-step.s6 b,
  .stack-step.s7 b { color: rgba(244, 241, 234, 0.7); }

  .stack-step.s3 i,
  .stack-step.s4 i { border-left-color: #ffd84d; }
  .stack-step.s6 i,
  .stack-step.s7 i { border-left-color: #ffd84d; }

  /* ── intent visual: cross-grid ── */
  .cross-grid {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) repeat(4, minmax(96px, 1fr));
    background: var(--paper, #fafaf7);
  }

  .grid-corner,
  .grid-col-head,
  .grid-row-head,
  .grid-cell {
    border-right: 1px solid var(--rule, #111);
    border-bottom: 1px solid var(--rule, #111);
    padding: 0.7rem 0.75rem;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .cross-grid > div:nth-child(5n) {
    border-right: 0;
  }

  .grid-corner {
    background: #0c0c0d;
    color: #f4f1ea;
  }

  .grid-corner span,
  .grid-col-head span,
  .grid-row-head span {
    color: rgba(12, 12, 13, 0.55);
    font-weight: 700;
    margin-bottom: 0.2rem;
  }

  .grid-corner span {
    color: rgba(244, 241, 234, 0.65);
  }

  .grid-col-head {
    background: rgba(0, 0, 0, 0.05);
    text-align: left;
  }

  .grid-row-head {
    text-align: left;
  }

  .grid-row-head.longi {
    background: #ffd84d;
    color: #0c0c0d;
  }

  .grid-row-head.cross {
    background: #e2d6f3;
    color: #0c0c0d;
  }

  .grid-cell {
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(12, 12, 13, 0.45);
  }

  .grid-cell b {
    display: block;
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 800;
  }

  .grid-cell span {
    display: block !important;
    font-size: 0.66rem !important;
    color: rgba(12, 12, 13, 0.6) !important;
    margin-top: 0.25rem;
    font-weight: 700;
  }

  .grid-cell.longi.has {
    background: #fff5b8;
    color: #0c0c0d;
  }

  .grid-cell.longi.has b { color: #06351c; }

  .grid-cell.longi.miss,
  .grid-cell.cross.miss {
    background: repeating-linear-gradient(135deg, #b4351c 0 6px, #8a280f 6px 12px);
    color: #fff8ef;
  }

  .grid-cell.longi.miss b,
  .grid-cell.cross.miss b,
  .grid-cell.longi.miss span,
  .grid-cell.cross.miss span {
    color: #fff8ef !important;
  }

  .grid-cell.cross {
    background: #f3ecfb;
    color: #0c0c0d;
  }

  .grid-cell.cross b {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4f2a8a;
  }

  .grid-legend {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.4rem;
    padding: 0.85rem 1rem;
    background: #0c0c0d;
    color: #f4f1ea;
    border-right: 0 !important;
    border-bottom: 0 !important;
    min-height: 0;
  }

  .grid-legend span {
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem !important;
    color: rgba(244, 241, 234, 0.85) !important;
    margin: 0 !important;
    font-weight: 600;
    text-transform: none !important;
  }

  .grid-legend i {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 1px solid #f4f1ea;
    font-style: normal;
  }

  .grid-legend i.longi { background: #fff5b8; }
  .grid-legend i.cross { background: #f3ecfb; }
  .grid-legend i.miss {
    background: repeating-linear-gradient(135deg, #b4351c 0 4px, #8a280f 4px 8px);
  }

  /* ── intent visual: authority-split ── */
  .authority-split {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .auth-col {
    padding: 1.1rem 1rem;
    border-right: 1px solid var(--rule, #111);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }

  .auth-col:nth-child(4) {
    border-right: 0;
  }

  .auth-col.human   { background: #ffd84d; color: #0c0c0d; }
  .auth-col.agent   { background: #1f2bff; color: #f4f1ea; }
  .auth-col.eval    { background: #d1ecf1; color: #0c0c0d; }
  .auth-col.system  { background: #06351c; color: #f4f1ea; }

  .auth-role {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    opacity: 0.78;
  }

  .auth-col strong {
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .auth-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .auth-can li {
    padding-left: 1rem;
    position: relative;
    font-weight: 600;
  }

  .auth-can li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
  }

  .auth-cannot {
    border-top: 1px dashed currentColor;
    padding-top: 0.55rem !important;
    opacity: 0.85;
  }

  .auth-cannot li {
    padding-left: 1rem;
    position: relative;
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
  }

  .auth-cannot li::before {
    content: "−";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
    text-decoration: none;
  }

  .auth-warning {
    grid-column: 1 / -1;
    background: #b4351c;
    color: #fff8ef;
    padding: 0.95rem 1.1rem;
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: 0.4rem 1.1rem;
    align-items: center;
    border-top: 1px solid var(--rule, #111);
  }

  .auth-warning span {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    color: #ffd84d !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .auth-warning strong {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  /* ── intent visual: signal-lights ── */
  .signal-lights {
    padding: 1rem;
    display: grid;
    gap: 0.85rem;
  }

  .lights-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    border-bottom: 1px solid var(--rule, #111);
    padding-bottom: 0.7rem;
  }

  .lights-header span {
    color: var(--muted, #666);
    font-weight: 700;
  }

  .lights-header strong {
    font-size: 1.08rem;
  }

  .lights-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .lights-row.dim {
    margin-top: 0.2rem;
  }

  .lamp {
    border: 1px solid var(--rule, #111);
    padding: 0.85rem 0.85rem 0.7rem;
    min-height: 142px;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 0.3rem;
    position: relative;
    background: #f4f1ea;
  }

  .lamp::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #06351c;
    box-shadow: 0 0 0 3px rgba(6, 53, 28, 0.18), 0 0 12px rgba(6, 53, 28, 0.55);
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
  }

  .lamp.off::before {
    background: #b4351c;
    box-shadow: 0 0 0 3px rgba(180, 53, 28, 0.18);
  }

  .lights-row.dim .lamp {
    min-height: 76px;
    grid-template-rows: auto auto auto;
    padding: 0.7rem 0.85rem;
  }

  .lamp-no {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    color: rgba(12, 12, 13, 0.55) !important;
    font-variant-numeric: tabular-nums;
  }

  .lamp-axis {
    width: fit-content;
    font-size: 0.62rem !important;
    padding: 0.18rem 0.42rem;
    background: #0c0c0d;
    color: #f4f1ea !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em;
  }

  .lamp-axis.cross {
    background: #4f2a8a;
  }

  .lamp strong {
    font-size: 1.05rem !important;
    line-height: 1.25;
  }

  .lamp em {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    font-weight: 500 !important;
    opacity: 0.85 !important;
    margin-top: 0 !important;
  }

  .lamp-state {
    align-self: end;
    font-style: normal;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #06351c;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 0.45rem;
    margin-top: 0.3rem;
  }

  .lamp.off .lamp-state {
    color: #b4351c;
  }

  .lights-result {
    padding: 0.7rem 1rem;
    display: flex;
    gap: 0.9rem;
    align-items: baseline;
    border: 1px solid var(--rule, #111);
  }

  .lights-result span {
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .lights-result strong {
    font-size: 1rem;
  }

  .lights-result.ok {
    background: #d4edda;
    color: #06351c;
  }

  .lights-result.blocked {
    background: #f8d7da;
    color: #b4351c;
  }

  /* ── mobile fallbacks for new intent visuals ── */
  @media (max-width: 720px) {
    .gap-fill,
    .authority-split {
      grid-template-columns: 1fr;
    }
    .gap-source,
    .gap-blanks,
    .gap-result,
    .auth-col {
      border-right: 0;
      border-bottom: 1px solid var(--rule, #111);
    }
    .gap-result,
    .auth-col:nth-child(4) {
      border-bottom: 0;
    }
    .method-stack {
      grid-template-columns: 1fr;
    }
    .stack-axis {
      flex-direction: row;
      border-right: 0;
      border-bottom: 1px solid var(--rule, #111);
      padding: 0.7rem 1rem;
      grid-template-rows: auto;
      grid-template-columns: auto 1fr auto;
    }
    .stack-axis-bar {
      min-height: 4px;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #ffd84d 0%, #ff5b1f 35%, #b4351c 60%, #1f2bff 80%, #06351c 100%);
    }
    .stack-step {
      grid-template-columns: 1fr;
      padding-left: 3.5rem;
    }
    .stack-step b,
    .stack-step i {
      grid-column: 1;
      grid-row: auto;
    }
    .cross-grid {
      grid-template-columns: minmax(120px, 1.2fr) repeat(4, minmax(70px, 1fr));
      font-size: 0.78rem;
    }
    .grid-corner,
    .grid-col-head,
    .grid-row-head,
    .grid-cell {
      padding: 0.55rem 0.45rem;
      min-height: 56px;
    }
    .lights-row,
    .lights-row.dim {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .auth-warning {
      grid-template-columns: 1fr;
    }
    .evolution-stack {
      grid-template-columns: 1fr;
    }
    .evo-col {
      border-right: 0;
      border-bottom: 1px solid rgba(244, 241, 234, 0.18);
      min-height: 0;
    }
    .evo-col:last-child {
      border-bottom: 0;
    }
    .evo-arrow {
      top: auto;
      bottom: -0.6rem;
      right: 1rem;
      transform: rotate(90deg);
    }
    .weave-chain {
      grid-template-columns: minmax(80px, 0.9fr) repeat(4, minmax(60px, 1fr));
      font-size: 0.7rem;
    }
    .wc-corner,
    .wc-col-head,
    .wc-step-head,
    .wc-cell {
      padding: 0.45rem 0.4rem;
      min-height: 48px;
    }
    .wc-cross {
      grid-template-columns: 1fr;
      gap: 0.3rem;
    }
    .fan-arms,
    .verification-shield {
      grid-template-columns: repeat(2, 1fr);
    }
    .fan-arm,
    .vs-cell {
      border-right: 1px solid var(--rule, #111);
      border-bottom: 1px solid var(--rule, #111);
      min-height: 0;
    }
    .fan-arm:nth-child(2n),
    .vs-cell:nth-child(2n) {
      border-right: 0;
    }
    .fan-arm:nth-last-child(-n+2),
    .vs-cell:nth-last-child(-n+2) {
      border-bottom: 0;
    }
  }