@font-face {
  font-family: "Noto Sans KR Concepts";
  src: url("assets/card-concepts/NotoSansKR-concepts.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root { --concept-width: 1200px; --art-width: 200px; --art-stage: 320px; }
body { font-family: "Noto Sans KR Concepts", system-ui, sans-serif; }
.concept-header, .concept-main, .concept-footer { width: min(var(--concept-width), calc(100% - var(--space-12))); margin-inline: auto; }
.concept-header { padding-block: var(--space-12) var(--space-8); }
.concept-header h1 { max-width: none; font-size: 44px; line-height: 1.15; margin: var(--space-4) 0; }
.concept-header h1 span { white-space: nowrap; }
.lead { font-size: 18px; line-height: 1.5; margin: var(--space-4) 0; }
.scope { display: inline-block; color: var(--pitch-deep); background: var(--gold); border-radius: var(--radius-badge); padding: var(--space-2) var(--space-3); margin: var(--space-2) 0 0; font-size: 14px; font-weight: 700; }
.concept-main { color: var(--ink); background: var(--paper); padding: var(--space-8); border-radius: var(--radius-panel); box-shadow: 0 2px 6px var(--shadow-low), inset 0 1px 0 var(--ink-inverse); }
.comparison-intro { display: flex; gap: var(--space-6); align-items: end; justify-content: space-between; margin-bottom: var(--space-8); }
.comparison-intro p { margin: 0; font-size: 14px; }
.comparison-intro .section-kicker { margin-bottom: var(--space-2); color: var(--flower-dark); font-size: 12px; font-weight: 700; }
.comparison-intro h2, .design-note h2 { margin: 0; font-size: 24px; }
.concept-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-6); }
.concept { min-width: 0; }
.version { font-size: 12px; font-weight: 700; color: var(--pitch-deep); margin: 0 0 var(--space-2); }
.concept h3 { font-size: 18px; margin: 0; }
.art-link { display: flex; height: var(--art-stage); align-items: center; justify-content: center; border-radius: var(--radius-badge); margin-top: var(--space-3); }
.art-link img { display: block; width: var(--art-width); height: 300px; object-fit: contain; max-width: 100%; box-shadow: 0 2px 6px var(--shadow-low); }
.art-link:focus-visible, .concept-footer a:focus-visible { outline: 4px solid var(--flower-dark); outline-offset: 4px; }
.art-link:hover { background: var(--pitch-line); }
.description { font-size: 14px; line-height: 1.5; min-height: 64px; margin: var(--space-4) 0; }
.small-preview { display: flex; gap: var(--space-4); align-items: center; margin: 0; padding: var(--space-4); color: var(--ink-inverse); background: var(--pitch-deep); border-radius: var(--radius-badge); }
.small-preview img { display: block; width: 48px; height: auto; flex-shrink: 0; }
.small-preview figcaption { color: var(--ink-inverse); font-size: 14px; font-weight: 700; }
.small-preview span { font-size: 12px; font-weight: 500; }
.design-note { border-top: 1px solid var(--pitch-line); padding-top: var(--space-8); margin-top: var(--space-8); }
.design-note h2 { font-size: 18px; }
.design-note p { font-size: 14px; max-width: 72ch; margin: var(--space-3) 0 0; }
.concept-footer { padding-block: var(--space-6) var(--space-12); font-size: 14px; }
.concept-footer p { margin: 0 0 var(--space-2); }
.concept-footer a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink-inverse); text-underline-offset: 4px; }
.concept-footer a:focus-visible { outline-color: var(--focus); }
@media (max-width: 1100px) { .concept-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 900px) { .concept-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-8); } .comparison-intro { display: block; } .comparison-intro > p { margin-top: var(--space-4); } }
@media (max-width: 560px) { .concept-header, .concept-main, .concept-footer { width: calc(100% - var(--space-8)); } .concept-header { padding-top: var(--space-8); } .concept-header h1 { font-size: 32px; } .concept-main { padding: var(--space-6); } .concept-grid { grid-template-columns: minmax(0,1fr); } .description { min-height: 0; } }
@media print { .art-link:hover { background: var(--transparent); } .art-link:focus-visible { outline: none; } body { background: var(--paper); color: var(--ink); } body::before, .skip-link { display: none; } .concept-header, .concept-main, .concept-footer { width: 100%; } .concept-main { padding: 0; box-shadow: none; } .concept-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .concept { break-inside: avoid; } .concept-header { padding: 0 0 var(--space-6); } .concept-footer a { color: var(--ink); } .design-note { break-inside: avoid; } }