/* ============================================================
   base.css — 리셋 + 공통 레이아웃 + 이미지 슬롯 (Wave 0 동결본)
   READ ONLY. tokens.css 다음, style.css 이전에 로드한다.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-snug);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: keep-all; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ★v1.3 — 포커스 링에 --accent 를 쓰지 않는다.
   --accent 는 CTA "배경"으로 고르는 색이라 지면과 대비될 이유가 없다.
   실제로 Y2K 작품이 시안(#4DE1FF)을 accent 로 잡자 밝은 지면에서 포커스 링이 1.3:1 이 됐다.
   --ink 는 정의상 --surface 와 대비되므로(다크 무드는 밝게 재정의됨) 항상 보인다. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── 레이아웃 ─────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--wide   { max-width: calc(var(--container-wide)   + var(--gutter) * 2); }
.container--full   { max-width: none; padding-inline: 0; }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface-alt); }

/* ── 이미지 슬롯 ─ SPEC.md 5절 ★ ──────────────────────────── */
/*
   이미지 파일이 아직 없는 상태에서도 레이아웃이 무너지지 않고,
   해당 자리에 들어갈 이미지의 생성 프롬프트를 그대로 보여준다.
   assets/img/ 에 파일을 저장하는 순간 코드 수정 없이 자동 전환된다.
*/

.img-slot {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  aspect-ratio: var(--slot-ratio, 16 / 9);
  background: var(--surface-alt);
  border-radius: var(--r);
  isolation: isolate;
}

.img-slot > img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--slot-pos, center);
}

/* ── 빈 슬롯 = 브랜드 컬러 추상 비주얼 ─────────────────────
   실제 사진이 아직 없어도 "미완성"이 아니라 "의도된 디자인"으로 읽혀야 한다.
   점선 와이어프레임 대신 브랜드 컬러 기반 그라디언트 메쉬 + 필름 그레인.
   --slot-x1/y1/x2/y2/x3/y3 으로 슬롯마다 구도를 다르게 준다.
*/
.img-slot.is-empty {
  /* 부드럽게 번지는 그라디언트는 "초점 안 맞은 사진"처럼 보인다.
     색면의 경계를 좁혀 대비를 세우고, 어두운 베이스 위에 얹어
     추상 아트프린트에 가깝게 만든다. */
  background-color: color-mix(in oklab, var(--accent) 82%, var(--brand));
  background-image:
    radial-gradient(ellipse 62% 48% at var(--slot-x1, 18%) var(--slot-y1, 20%),
      color-mix(in oklab, var(--brand) 92%, white), transparent 46%),
    radial-gradient(ellipse 52% 58% at var(--slot-x2, 84%) var(--slot-y2, 34%),
      color-mix(in oklab, var(--brand) 60%, black), transparent 48%),
    radial-gradient(ellipse 78% 54% at var(--slot-x3, 46%) var(--slot-y3, 102%),
      color-mix(in oklab, var(--surface) 70%, var(--brand)), transparent 52%),
    linear-gradient(var(--slot-angle, 142deg),
      color-mix(in oklab, var(--accent) 96%, black) 8%,
      transparent 46%),
    radial-gradient(ellipse 120% 90% at 50% 50%,
      transparent 42%, rgba(0,0,0,.42) 100%);
}

/* 필름 그레인 — 그라디언트만 있으면 CSS 티가 난다 */
.img-slot.is-empty::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.img-slot.is-empty > img { display: none; }

/* 프롬프트는 기본 숨김 — 클라이언트에게 보여줄 때 방해되지 않게.
   개발자가 확인할 땐 슬롯에 마우스를 올리거나 <html class="show-prompts"> 를 켠다. */
/* ★v1.8 — z-index 를 3 에서 2 로 낮췄다.
   슬롯을 히어로 배경으로 쓸 때 작품이 얹는 오버레이(스크림·캡션 바)와 경합해,
   스택 컨텍스트를 따로 만들어야 했다는 보고가 있었다.
   이 힌트는 `.is-empty` 일 때만 보이고 그때 `<img>` 는 display:none 이므로
   같은 z-index 2 라도 DOM 순서상 힌트가 위에 온다. 동작에는 영향이 없다. */
.img-slot__hint {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: linear-gradient(to top, rgba(10,11,14,.94), rgba(10,11,14,.72) 62%, transparent);
  color: rgba(255,255,255,.86);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  opacity: 0;
  transform: translateY(8%);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.img-slot:not(.is-empty) .img-slot__hint { display: none; }

.img-slot.is-empty:hover .img-slot__hint,
.img-slot.is-empty:focus-within .img-slot__hint,
html.show-prompts .img-slot.is-empty .img-slot__hint {
  opacity: 1;
  transform: none;
}

.img-slot__hint b { font-size: var(--fs-sm); color: #fff; }

.img-slot__hint span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255,255,255,.6);
}

/* ── 유틸 ─────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ★v1.6 — 스킵 링크에 --brand 를 쓰지 않는다.
   --brand 는 "면"으로 고른 색이라 그 위 글자 대비가 보장되지 않는다.
   한 배치에서 7작품 중 5개가 3.0~4.1:1 이었다.
   --ink 와 --surface 는 정의상 서로 대비되므로(다크 무드는 둘 다 반전) 항상 안전하다.
   v1.3 에서 :focus-visible 을 --accent → --ink 로 고친 것과 같은 이유다. */
.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--r);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* 스크롤 등장 애니메이션 — img-slot.js 의 IntersectionObserver 와 짝.
   ★ 기본값은 "보임"이다. JS가 없거나 실패해도 페이지는 정상적으로 읽혀야 한다.
     숨김은 <html class="js"> 일 때만 적용되고, 그 클래스는 head 인라인 스크립트가 붙인다.
     (이게 없으면 JS 한 줄만 깨져도 사이트 전체가 백지가 된다.) */
.reveal { opacity: 1; transform: none; }

html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
}