/* 잔상 AFTERIMAGE — Ferrari editorial design system
 * 근(近)-black 캔버스 · Rosso Corsa 단 하나의 액센트 · 0px 코너 · 그림자 없음
 * 폰트는 Pretendard(프로젝트 표준). FerrariSans 대체로 weight 500 디스플레이 규칙만 지킨다.
 */

@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.1/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root{
  /* ── color ── */
  --canvas:#181818;
  --canvas-elevated:#303030;
  --canvas-light:#ffffff;
  --surface-soft-light:#f7f7f7;
  --surface-strong-light:#ebebeb;

  --primary:#da291c;
  --primary-active:#b01e0a;

  --hairline:#303030;
  --hairline-on-light:#d2d2d2;
  --hairline-soft:#ebebeb;

  --ink:#ffffff;
  --body:#969696;
  --muted:#666666;
  --muted-soft:#8f8f8f;
  --on-light:#181818;
  --on-primary:#ffffff;

  --info:#4c98b9;
  --success:#03904a;
  --warning:#f13a2c;

  /* ── spacing ladder ── */
  --xxxs:4px;  --xxs:8px;  --xs:16px;  --sm:24px;
  --md:32px;   --lg:48px;  --xl:64px;  --xxl:96px; --super:128px;

  --maxw:1280px;
  --font:"Wanted Sans Variable","Wanted Sans","Pretendard",-apple-system,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--body);
  font-family:var(--font); font-weight:400; font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

/* ── type ── */
h1,h2,h3,h4{margin:0; color:var(--ink); font-weight:500; text-wrap:balance}
.d-mega{font-size:clamp(40px,8vw,80px); line-height:1.05; letter-spacing:-1.6px}
.d-xl  {font-size:clamp(32px,5.4vw,56px); line-height:1.1; letter-spacing:-1.12px}
.d-lg  {font-size:clamp(26px,3.6vw,36px); line-height:1.2; letter-spacing:-.36px}
.d-md  {font-size:26px; line-height:1.5; letter-spacing:.195px}
.t-md  {font-size:18px; font-weight:700; line-height:1.2}
.t-sm  {font-size:16px; font-weight:500; line-height:1.4; letter-spacing:.08px}
.b-md  {font-size:14px; line-height:1.5}
.b-sm  {font-size:13px; line-height:1.5}
.cap   {font-size:12px; line-height:1.4}
.cap-u {font-size:11px; font-weight:600; line-height:1.4; letter-spacing:1.1px; text-transform:uppercase}
.num   {font-size:clamp(44px,7vw,80px); font-weight:700; line-height:1; letter-spacing:-1.6px; font-variant-numeric:tabular-nums}

.on-light{color:var(--on-light)}
.on-light h1,.on-light h2,.on-light h3,.on-light h4{color:var(--on-light)}
.dim{color:var(--muted)}
.red{color:var(--primary)}
.wht{color:var(--ink)}

/* ── layout ── */
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--md); padding-right:var(--md)}
.band{padding-top:var(--xxl); padding-bottom:var(--xxl)}
.band-light{background:var(--canvas-light); color:var(--on-light)}
.band-soft{background:var(--surface-soft-light); color:var(--on-light)}
.rule{height:1px; background:var(--hairline); border:0; margin:0}
.on-light .rule,.band-light .rule{background:var(--hairline-on-light)}

/* ── nav ── */
.nav{
  position:sticky; top:0; z-index:60; height:64px; background:var(--canvas);
  border-bottom:1px solid var(--hairline); display:flex; align-items:center;
}
.nav .wrap{display:flex; align-items:center; gap:var(--md); width:100%}
.brand{display:flex; align-items:baseline; gap:var(--xxs); text-decoration:none; flex:0 0 auto}
.brand .mk{font-size:15px; font-weight:600; letter-spacing:3.4px; color:var(--ink); text-transform:uppercase}
.brand .ko{font-size:12px; color:var(--muted); letter-spacing:2px}
.nav-links{display:flex; gap:var(--sm); margin-left:auto; flex-wrap:wrap}
.nav-links a{
  font-size:13px; font-weight:600; letter-spacing:.65px; text-transform:uppercase;
  color:var(--body); text-decoration:none; padding:var(--xxs) 0; white-space:nowrap;
}
.nav-links a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--primary)}

/* ── buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--xxs);
  height:48px; padding:14px var(--md); border-radius:0; border:0; cursor:pointer;
  font-family:var(--font); font-size:14px; font-weight:700; line-height:1;
  letter-spacing:1.4px; text-transform:uppercase; text-decoration:none;
}
.btn-primary{background:var(--primary); color:var(--on-primary)}
.btn-primary:active{background:var(--primary-active)}
.btn-outline{background:transparent; color:var(--ink); border:1px solid var(--ink)}
.on-light .btn-outline,.band-light .btn-outline{color:var(--on-light); border-color:var(--on-light)}
.btn[disabled]{opacity:.4; cursor:not-allowed}
.btn-sm{height:36px; padding:0 var(--xs); font-size:12px; letter-spacing:1.1px}

/* ── hero ── */
.hero{
  position:relative; min-height:78vh; display:flex; align-items:flex-end;
  background:var(--canvas); border-bottom:1px solid var(--hairline); overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 78% 18%, rgba(218,41,28,.20), transparent 58%),
    linear-gradient(180deg,#3c3c3c 0%,#030303 64%);
}
.hero-in{position:relative; width:100%; padding-top:var(--super); padding-bottom:var(--xxl)}
.hero .eyebrow{color:var(--body); margin-bottom:var(--sm)}
.hero .lede{color:var(--body); max-width:56ch; margin:var(--sm) 0 var(--lg); font-size:16px; line-height:1.65}
.hero-cta{display:flex; gap:var(--xs); flex-wrap:wrap}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:var(--xxs) var(--md);
  margin-top:var(--xl); padding-top:var(--sm); border-top:1px solid rgba(255,255,255,.14);
  color:var(--muted); font-size:12px;
}

/* ── section head ── */
.sec-head{display:flex; align-items:flex-end; gap:var(--md); flex-wrap:wrap; margin-bottom:var(--lg)}
.sec-head .lab{color:var(--muted); display:block; margin-bottom:var(--xs)}
.sec-head p{margin:var(--xs) 0 0; max-width:66ch}
.sec-head .grow{flex:1 1 320px}

/* ── week grid ── */
.weeks{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:1px; background:transparent}
/* 컨테이너 배경 대신 셀 outline — 남는 칸이 «빈 카드»로 보이지 않게 */
.wk{
  background:var(--canvas); padding:var(--sm); border:0; text-align:left; cursor:pointer;
  font-family:var(--font); color:var(--body); display:flex; flex-direction:column; gap:var(--xxs);
  min-height:184px; outline:1px solid var(--hairline);
}
.wk:hover{background:var(--canvas-elevated)}
.wk-top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--xxs)}
.wk-n{font-size:32px; font-weight:700; line-height:1; color:var(--ink); letter-spacing:-.8px; font-variant-numeric:tabular-nums}
.wk.is-now .wk-n{color:var(--primary)}
.wk-t{color:var(--ink); font-size:15px; font-weight:500; line-height:1.35; margin-top:var(--xxs)}
.wk-solo{font-size:11px; color:var(--primary); font-weight:600; letter-spacing:.4px; margin-top:6px}
.wk-d{font-size:12px; color:var(--muted); margin-top:auto}
.wk-due{font-size:12px; color:var(--body); border-top:1px solid var(--hairline); padding-top:var(--xxs); margin-top:var(--xxs)}

.pill{
  display:inline-flex; align-items:center; border-radius:9999px; padding:4px 12px;
  background:var(--canvas-elevated); color:var(--ink);
  font-size:11px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; white-space:nowrap;
}
.pill-red{background:var(--primary); color:var(--on-primary)}
.pill-line{background:transparent; border:1px solid var(--hairline); color:var(--body)}
.on-light .pill-line,.band-light .pill-line{border-color:var(--hairline-on-light); color:var(--muted)}
.pill-light{background:var(--surface-strong-light); color:var(--on-light)}

/* ── week detail ── */
.wk-detail{background:var(--canvas-elevated); padding:var(--lg); margin-top:1px}
.wk-detail h3{margin-bottom:var(--xs)}
.wk-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--lg); margin-top:var(--md)}
@media(min-width:1100px){ .wk-grid{grid-template-columns:.85fr 1.7fr .85fr} }

/* 발제 프레임 — 관찰 / 판정 / 전이 / 반론 */
.why-line{margin:0 0 var(--xs); font-size:13px; color:var(--body); border-left:1px solid var(--hairline); padding-left:var(--xxs)}
ol.frame{list-style:none; margin:0; padding:0; counter-reset:fr}
ol.frame li{
  display:grid; grid-template-columns:58px 1fr; gap:var(--xs);
  padding:var(--xxs) 0; border-top:1px solid rgba(255,255,255,.08); align-items:baseline;
}
ol.frame li:first-child{border-top:0}
ol.frame .fk{
  font-size:10.5px; font-weight:700; letter-spacing:1.1px; color:var(--primary);
  text-transform:uppercase; white-space:nowrap;
}
ol.frame .ft{font-size:13.5px; color:var(--ink); line-height:1.55}
.deliver{margin:var(--xs) 0 0; padding-top:var(--xxs); border-top:1px solid rgba(255,255,255,.14); font-size:12.5px; color:var(--body)}
.deliver .cap-u{margin-right:var(--xxs)}
.wk-detail ul{margin:0; padding-left:18px}
.wk-detail li{margin:var(--xxs) 0}
.mission-box{border-left:2px solid var(--primary); padding-left:var(--xs)}
.mission-box h4{font-size:16px; font-weight:500; margin-bottom:var(--xxs)}
.warn-box{border:1px solid var(--warning); padding:var(--xs); color:var(--body); font-size:13px; margin-top:var(--md)}

/* ── route (전시) ── */
.route{border-top:1px solid var(--hairline-on-light); padding-top:var(--md); margin-bottom:var(--xl)}
.route-hd{display:flex; gap:var(--md); flex-wrap:wrap; align-items:baseline; margin-bottom:var(--xs)}
.route-move{color:var(--muted); max-width:74ch; margin:0 0 var(--md)}
.ex{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--md);
  padding:var(--md) 0; border-top:1px solid var(--hairline-soft);
}
.ex-t{font-size:18px; font-weight:500; line-height:1.3; color:var(--on-light)}
.ex-v{font-size:13px; color:var(--muted); margin-top:var(--xxxs)}
.ex-meta{display:flex; flex-wrap:wrap; gap:var(--xxxs) var(--xs); margin:var(--xs) 0}
.ex-why{font-size:14px; line-height:1.6; color:#3c3c3c}
.ex-m{background:var(--surface-soft-light); padding:var(--xs); font-size:13px; line-height:1.55; color:var(--on-light); align-self:start}
.ex-m .lab{display:block; margin-bottom:var(--xxxs)}
.ex-link{font-size:12px; letter-spacing:.65px; text-transform:uppercase; font-weight:600; color:var(--primary); text-decoration:none; display:inline-block; margin-top:var(--xxs)}

/* ── refs ── */
.ref-group{border-top:1px solid var(--hairline); padding:var(--md) 0}
.ref-group > h3{margin-bottom:var(--sm)}
.ref{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:var(--md); padding:var(--sm) 0; border-top:1px solid var(--hairline)}
.ref:first-of-type{border-top:0}
.ref-t{color:var(--ink); font-size:16px; font-weight:500; line-height:1.35}
.ref-t a{text-decoration:none}
.ref-t a:hover{color:var(--primary)}
.ref-k{font-size:11px; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted); margin-top:var(--xxxs); font-weight:600}
.ref-how{border-left:2px solid var(--hairline); padding-left:var(--xs); margin-top:var(--xs); color:var(--muted); font-size:13px}
.ref.star .ref-t{color:var(--primary)}

/* ── notice ── */
.notice{border-top:1px solid var(--hairline); padding:var(--sm) 0; display:grid; grid-template-columns:120px 1fr; gap:var(--md)}
.notice-d{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.notice h4{font-size:17px; font-weight:500; margin-bottom:var(--xxs)}
.notice p{margin:0; max-width:74ch}

/* ── archive / submit ── */
.arch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--xs)}
.arch-card{background:var(--canvas-elevated); border-radius:0}
.arch-card .thumb{aspect-ratio:4/3; background:#242424; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; overflow:hidden}
.arch-card .thumb img,.arch-card .thumb video{width:100%; height:100%; object-fit:cover}
.arch-body{padding:var(--xs)}
.arch-body .who{font-size:12px; color:var(--muted); margin-top:var(--xxxs)}
.empty{border:1px dashed var(--hairline); padding:var(--xl); text-align:center; color:var(--muted)}

.field{margin-bottom:var(--xs)}
.field label{display:block; font-size:11px; letter-spacing:1.1px; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:var(--xxs)}
.field input,.field select,.field textarea{
  width:100%; background:var(--canvas); color:var(--ink); border:1px solid var(--hairline);
  border-radius:4px; padding:14px var(--xs); font-family:var(--font); font-size:14px; min-height:48px;
}
.field textarea{min-height:120px; resize:vertical; line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--primary); outline-offset:1px}
.form-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--xs)}

/* ── cta band ── */
.cta-band{background:var(--primary); color:var(--on-primary); padding:var(--xxl) 0}
.cta-band h2{color:var(--on-primary)}
.cta-band p{color:rgba(255,255,255,.86); max-width:62ch}

/* ── footer ── */
footer{background:var(--canvas); border-top:1px solid var(--hairline); padding:var(--xl) 0 var(--lg)}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--md)}
.foot-grid h5{color:var(--ink); font-size:11px; letter-spacing:1.1px; text-transform:uppercase; font-weight:600; margin:0 0 var(--xs)}
.foot-grid a,.foot-grid p{display:block; color:var(--body); font-size:13px; text-decoration:none; margin:var(--xxxs) 0}
.foot-btm{margin-top:var(--xl); padding-top:var(--sm); border-top:1px solid var(--hairline); color:var(--muted); font-size:12px}

/* ── util ── */
.hide{display:none !important}
.stack-sm > * + *{margin-top:var(--xs)}
.stack-md > * + *{margin-top:var(--md)}
.scroll-x{overflow-x:auto}
:focus-visible{outline:2px solid #f6e500; outline-offset:2px}

@media (max-width:820px){
  .ex,.ref,.notice{grid-template-columns:1fr; gap:var(--xs)}
  .band{padding-top:var(--xl); padding-bottom:var(--xl)}
  .wrap{padding-left:var(--xs); padding-right:var(--xs)}
  .nav-links{gap:var(--xs)}
  .nav-links a{font-size:11px}
  .hero-in{padding-top:var(--xl)}
  .wk-detail{padding:var(--sm)}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ══ 인쇄 · PDF · 출판 ══════════════════════════════════
 * 화면은 검정, 종이는 흰색. 잉크를 아끼는 게 아니라 «책»이 되게 한다.
 */
@media print{
  @page{size:A4; margin:18mm 16mm}
  :root{--canvas:#fff; --canvas-elevated:#fff; --ink:#111; --body:#333; --muted:#666; --hairline:#ccc}
  body{background:#fff; color:#222; font-size:10.5pt; line-height:1.55}
  .nav,.hero-cta,.btn,.no-print,form,.nav-links{display:none !important}
  .hero{min-height:auto; border-bottom:2px solid #111; page-break-after:avoid}
  .hero::before{display:none}
  .hero-in{padding:0 0 12mm}
  h1,h2,h3,h4{color:#111; page-break-after:avoid}
  .d-mega{font-size:32pt; letter-spacing:-1px}
  .d-lg{font-size:17pt}
  .band{padding:8mm 0; page-break-inside:auto}
  .band-light,.band-soft{background:#fff !important}
  .wrap{max-width:none; padding:0}
  .weeks{display:block; background:none}
  .wk{min-height:0; padding:4mm 0; border-bottom:1px solid #ddd; page-break-inside:avoid; display:block}
  .wk-detail{background:#fff; border-left:2px solid #da291c; padding:3mm 0 3mm 5mm; page-break-inside:avoid}
  ol.frame li{border-top:1px solid #ddd; page-break-inside:avoid}
  ol.frame .ft{color:#222}
  .deliver{border-top:1px solid #bbb; color:#444}
  .ex,.ref,.notice{page-break-inside:avoid; grid-template-columns:1fr}
  .ex-m,.ref-how{background:#f4f4f4; color:#222}
  .cta-band{background:#fff; color:#111; border-top:2px solid #da291c; border-bottom:2px solid #da291c}
  .cta-band h2,.cta-band p{color:#111}
  a{text-decoration:none; color:#111}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:8pt; color:#888; word-break:break-all}
  .arch-card{border:1px solid #ddd; page-break-inside:avoid}
  footer{border-top:1px solid #111}
}