* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--unfade-wash);
  color: var(--unfade-ink);
  font: 16px/1.55 var(--unfade-font-kr);
}
a { color: inherit; }
.page-shell { max-width: var(--unfade-content-width); margin: 0 auto 72px; }
.cover-hero { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 540px; background: var(--unfade-paper); }
.cover-copy { display: flex; flex-direction: column; padding: 58px 60px 44px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--unfade-font-en); letter-spacing: .04em; }
.eyebrow::before { content: ""; width: 9px; height: 9px; background: var(--unfade-coral); }
.cover-title { max-width: 510px; margin: 24px 0 18px; font-size: clamp(42px, 5.3vw, 71px); line-height: 1.02; letter-spacing: -.065em; }
.cover-summary { max-width: 470px; margin: 0; color: var(--unfade-muted); font-size: 17px; }
.cover-meta { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-top: auto; font-size: 13px; }
.cover-meta__tag { padding: 6px 9px; background: var(--unfade-coral); font-weight: 700; }
.cover-meta__link { border-bottom: 1.5px solid currentColor; padding: 12px 0 2px; font: 800 12px/1 var(--unfade-font-en); letter-spacing: .07em; text-decoration: none; }
.cover-art { position: relative; overflow: hidden; min-height: 370px; background: linear-gradient(90deg, transparent 0 50%, rgb(255 255 255 / 55%) 50% 100%), linear-gradient(0deg, transparent 0 50%, rgb(255 255 255 / 55%) 50% 100%), var(--unfade-coral-wash); background-size: 118px 118px; }
.cover-art__disc { position: absolute; right: -56px; top: 54px; width: 410px; height: 410px; border-radius: 50%; background: var(--unfade-navy); }
.cover-art__ring { position: absolute; right: 48px; top: 112px; width: 290px; height: 290px; border: 58px solid var(--unfade-coral); border-radius: 50%; }
.cover-art__type { position: absolute; left: 48px; bottom: 40px; color: var(--unfade-navy); font: 800 70px/.84 var(--unfade-font-en); letter-spacing: -.09em; }
.section-intro { padding: 30px 24px 18px; background: var(--unfade-paper); border-top: 1px solid var(--unfade-line); }
.section-intro h2 { margin: 5px 0 0; font-size: 29px; letter-spacing: -.055em; }
.explainer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--unfade-paper); border-top: 1px solid var(--unfade-line); }
.explainer-card { display: flex; min-height: 238px; padding: 25px 23px; border-right: 1px solid var(--unfade-line); color: inherit; text-decoration: none; }
.explainer-card:nth-child(4n) { border-right: 0; }
.explainer-card__body { display: flex; width: 100%; flex-direction: column; }
.explainer-card__index { color: var(--unfade-muted); font: 600 12px/1 var(--unfade-font-en); }
.explainer-card h2 { margin: 18px 0 12px; font-size: 20px; line-height: 1.18; letter-spacing: -.05em; }
.explainer-card p { margin: 0; color: var(--unfade-muted); font-size: 14px; }
.explainer-card small { margin-top: auto; padding-top: 18px; font: 700 11px/1 var(--unfade-font-en); letter-spacing: .06em; }
.explainer-card:hover { background: var(--unfade-lime-wash); }
.explainer-card:focus-visible { outline: 3px solid var(--unfade-lime); outline-offset: -3px; }
.start-band { display: grid; grid-template-columns: .8fr 1.2fr; margin-top: 22px; background: var(--unfade-paper); }
.start-band__title { padding: 46px 42px; background: var(--unfade-lime-wash); }
.start-band__title h2 { margin: 8px 0 0; font-size: 37px; line-height: 1.04; letter-spacing: -.06em; }
.start-list { padding: 0 42px; }
.start-list a { display: grid; grid-template-columns: 82px 1fr auto; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--unfade-line); text-decoration: none; }
.start-list a:last-child { border-bottom: 0; }
.start-list small { font: 700 12px/1 var(--unfade-font-en); }
.start-list b { font-size: 18px; letter-spacing: -.035em; }
.start-list span { color: var(--unfade-muted); font: 13px/1 var(--unfade-font-en); }
.site-footer { max-width: var(--unfade-content-width); margin: 0 auto; padding: 0 0 28px; color: var(--unfade-muted); font-size: 13px; }
@media (max-width: 800px) { .page-shell { margin: 0 12px 48px; } .cover-hero, .start-band { grid-template-columns: 1fr; } .cover-copy { min-height: 390px; padding: 36px 28px; } .cover-art { min-height: 340px; } .cover-art__type { left: 30px; font-size: 56px; } .cover-art__disc { right: -100px; } .explainer-grid { grid-template-columns: 1fr; } .explainer-card, .explainer-card:nth-child(4n) { min-height: auto; border-right: 0; border-bottom: 1px solid var(--unfade-line); } .start-band__title { padding: 34px 28px; } .start-list { padding: 0 24px; } .start-list a { grid-template-columns: 58px 1fr; } .start-list span { display: none; } .site-footer { padding: 0 18px 24px; } }

/* ── 사이트 전체 통일 (2026-10-14 UI 검토) ── */
.cover-title, .section-intro h2, .start-band__title h2, .explainer-card h2 { word-break: keep-all; }
@media (max-width: 800px) {
  .cover-copy { min-height: auto; }
  .cover-meta { margin-top: 28px; }
  .cover-art { min-height: 200px; }
  .cover-art__disc { width: 240px; height: 240px; top: 20px; right: -70px; }
  .cover-art__ring { width: 170px; height: 170px; border-width: 34px; top: 55px; right: 10px; }
  .cover-art__type { z-index: 1; font-size: 44px; left: 24px; bottom: 22px; }
}