@font-face { font-family: "Noto Sans KR Sets"; src: url("assets/card-design-sets/NotoSansKR-sets.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --sets-width: 1200px; --card-preview: 80px; }
body { font-family: "Noto Sans KR Sets", system-ui, sans-serif; }
.sets-header, .sets-main, .sets-footer { width: min(var(--sets-width),calc(100% - var(--space-12))); margin-inline: auto; }
.sets-header { padding-block: var(--space-12) var(--space-8); }
.sets-header h1 { max-width: none; font-size: 44px; line-height: 1.15; margin: var(--space-4) 0; }
.sets-header h1 span { white-space: nowrap; }
.sets-lead { font-size: 18px; margin-block: var(--space-4); }
.sets-scope { color: var(--gold); font-size: 14px; font-weight: 700; }
.sets-main { color: var(--ink); background: var(--paper); border-radius: var(--radius-panel); padding: var(--space-8); box-shadow: 0 2px 6px var(--shadow-low); }
.deck-nav { display: flex; gap: var(--space-2); }
.deck-nav button { flex: 1; min-height: 48px; border: 2px solid var(--pitch-deep); border-radius: var(--radius-badge); color: var(--pitch-deep); background: var(--paper); font: inherit; font-weight: 700; cursor: pointer; padding: var(--space-2) var(--space-3); }
.deck-nav button[aria-pressed="true"] { color: var(--ink-inverse); background: var(--pitch-deep); }
.deck-nav button:hover { border-color: var(--flower-dark); }
.deck-nav button:focus-visible, .deck-card a:focus-visible, .zip-link:focus-visible { outline: 4px solid var(--flower-dark); outline-offset: 4px; }
.usage-note { font-size: 14px; margin-block: var(--space-4) var(--space-8); }
.deck-heading { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; padding-bottom: var(--space-6); border-bottom: 1px solid var(--pitch-line); }
.deck-heading .section-kicker { font-size: 12px; font-weight: 700; color: var(--flower-dark); margin: 0 0 var(--space-2); }
.deck-heading h2 { font-size: 24px; margin: 0; }
.deck-heading p { font-size: 14px; margin: var(--space-2) 0 0; }
.zip-link { display: inline-flex; min-height: 48px; align-items: center; font-size: 14px; font-weight: 700; color: var(--pitch-deep); text-underline-offset: 4px; }
.month-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-8) var(--space-6); margin-top: var(--space-6); }
.month-group { min-width: 0; }
.month-group h3 { font-size: 16px; margin: 0 0 var(--space-3); }
.month-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-2); }
.deck-card { margin: 0; min-width: 0; }
.deck-card a { display: flex; min-height: 48px; justify-content: center; align-items: center; border-radius: var(--space-1); }
.deck-card img { display: block; width: min(100%,var(--card-preview)); height: auto; aspect-ratio: 2/3; object-fit: contain; box-shadow: 0 2px 6px var(--shadow-low); }
.deck-card a:hover img { outline: 2px solid var(--flower-dark); outline-offset: 2px; }
.deck-card figcaption { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-2); color: var(--ink); font-size: 12px; line-height: 1.3; }
.deck-card figcaption strong { font-weight: 700; }
.deck-card figcaption span { color: var(--pitch-deep); margin-top: var(--space-1); }
.sets-footer { padding-block: var(--space-6) var(--space-12); font-size: 14px; }
.sets-footer p { margin: var(--space-2) 0; }
.sets-footer a { display: inline-flex; min-height: 48px; align-items: center; color: var(--ink-inverse); text-underline-offset: 4px; }
.sets-footer a:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
@media (max-width: 900px) { .month-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .sets-header, .sets-main, .sets-footer { width: calc(100% - var(--space-8)); } .sets-header { padding-top: var(--space-8); } .sets-header h1 { font-size: 32px; } .sets-main { padding: var(--space-4); } .deck-heading { display: block; } .month-grid { grid-template-columns: minmax(0,1fr); } .deck-nav button { font-size: 14px; padding-inline: var(--space-2); } }
@media print { body { color: var(--ink); background: var(--paper); } body::before, .skip-link, .deck-nav, .usage-note, .zip-link { display: none; } .sets-header, .sets-main, .sets-footer { width: 100%; padding: 0; box-shadow: none; } .sets-header h1 { font-size: 32px; } .sets-scope { color: var(--ink); } .month-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .month-group { break-inside: avoid; } .deck-card a:hover img { outline: none; } .sets-footer a { color: var(--ink); } }