/*
 * 오티티보라 공용 스타일 — 모든 페이지가 함께 쓰는 뼈대
 *
 * 불러오는 순서가 중요합니다. 각 페이지 <head> 에서:
 *   1. fonts/pretendard/...css   @font-face 등록
 *   2. seed/seed.css             SEED 토큰 + 컴포넌트
 *   3. seed-theme.css            SEED 토큰을 오티티보라 팔레트로 연결
 *   4. site.css                  ← 이 파일. 헤더·푸터·레이아웃
 *   5. (페이지별 CSS)              그 페이지에만 있는 규칙
 *
 * 이 파일 이전에는 헤더/푸터 마크업이 페이지마다 4가지로 갈라져 있었고
 * 래퍼 클래스도 .wrap 과 .w 가 섞여 있었습니다. 여기로 통일합니다.
 */

:root {
  --ink: #17202d;
  --muted: #657080;
  --paper: #f7f8fb;
  --line: #e2e6ed;
  --accent: #e52f49;
}

/*
 * 강조색(--accent) 쓰는 곳 — 이 네 가지만.
 *
 *   1. 로고
 *   2. 지금 어디에 있는지 (현재 페이지 메뉴, 선택된 탭·페이지 칩)
 *   3. 페이지마다 문장 하나 (h1 안의 em)
 *   4. 주 행동 버튼 (공식 홈페이지, 콘텐츠ZONE 둘러보기)
 *
 * 그 밖의 라벨·순번·구분선·보조 링크는 --ink 나 --muted 를 씁니다.
 * 강조색이 섹션마다 반복되면 어디를 봐야 하는지가 사라집니다.
 * 실제로 웹하드 페이지 한 장에 빨간 요소가 30개였습니다.
 */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  /* 본문/카드/버튼은 Pretendard로 고정합니다.
     헤더와 페이지 히어로는 아래에서 기존 SEED 스택을 다시 적용합니다. */
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  line-height: 1.65;
  word-break: keep-all;
}

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

img {
  max-width: 100%;
}

.wrap {
  width: min(1120px, calc(100% - 40px));
  margin: auto;
}

/* --- 건너뛰기 링크 · 포커스 --- */

.skip {
  position: absolute;
  left: 20px;
  top: -80px;
  background: #fff;
  padding: 12px;
  z-index: 100;
}

.skip:focus {
  top: 5px;
}

a:focus-visible,
summary:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ff8b9c;
  outline-offset: 4px;
}

/* --- 헤더 --- */

.site-header {
  /* 헤더는 사용자가 현재 보던 시스템/SEED 글꼴을 유지합니다. */
  font-family: var(--seed-font-family);
  background: #ffffffed;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .nav {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-header .logo {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -1px;
  white-space: nowrap;
}

.site-header .logo span {
  color: var(--accent);
}

.site-header .logo i {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 8px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-style: normal;
  margin-right: 8px;
}

/*
 * 메뉴는 SEED 컴포넌트를 그대로 쓰지 않습니다.
 * 데스크톱에서는 밑줄 탭, 모바일에서는 칩으로 모양이 바뀌는데
 * HTML 하나로 두 컴포넌트를 동시에 표현할 수 없기 때문입니다.
 * 대신 값은 SEED 토큰에서 가져와 컴포넌트들과 톤을 맞춥니다.
 */
.site-header .menu {
  display: flex;
  gap: 28px;
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-bold);
}

.site-header .menu .on {
  color: var(--accent);
  box-shadow: inset 0 -3px var(--accent);
}

/* 홈 히어로도 헤더/페이지 머리와 같은 기존 서체를 유지합니다. */
.hero {
  font-family: var(--seed-font-family);
}

/* 페이지별 CSS의 모바일 main padding이 머리 위치를 흔들지 않게 합니다. */
.site-header + main.wrap {
  padding-top: 0;
}

/* --- 페이지 머리 --- */

/*
 * 세 페이지가 같은 구조(작은 라벨 → 제목 → 설명)를 쓰는데 클래스가
 * .eyebrow / .ey / .sub 로 갈려 있었습니다. criteria 는 라벨에 .sub 를 써서
 * 설명문과 구분이 없었습니다. 그래서 페이지를 옮길 때마다 머리가 흔들립니다.
 *
 *   측정값        라벨            제목      설명
 *   webhard      13px / 800      54px      y 233
 *   content      11px / 900      32px      y 146
 *   criteria     13px / 400      31px      y 169
 *
 * 여기서 한 벌로 맞춥니다. 제목 크기만 페이지가 정합니다.
 */
.page-head {
  /* 페이지 머리(히어로)는 기존 SEED/system 글꼴을 유지합니다. */
  font-family: var(--seed-font-family);
  padding-top: 44px;
}

.page-head .label {
  display: block;
  color: var(--muted);
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: 1.6px;
  line-height: 1.4;
}

.page-head h1 {
  margin: 10px 0 0;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -1.4px;
}

.page-head .lead {
  margin: 14px 0 0;
  max-width: 640px;
  color: var(--muted);
  font-size: var(--seed-font-size-t4);
  line-height: 1.75;
}

.page-head .lead a {
  color: var(--ink);
  text-decoration: underline;
}

/* --- 카드 그리드 --- */

/*
 * 같은 "카드를 여러 칸으로 늘어놓기" 를 페이지마다 따로 적고 있었습니다.
 *
 *   index   .content-grid  5칸 / .guide-grid  3칸
 *   content .grid          5칸
 *   webhard .criteria-grid 4칸
 *   criteria .grid         2칸
 *
 * 칸 수도 끊는 지점도 제각각이라, 같은 폭에서 페이지마다 다르게
 * 접혔습니다. 여기 하나로 모읍니다.
 *
 * 칸 수를 못 박지 않고 auto-fill 로 둡니다. 카드 한 장의 최소 폭만
 * 정하면 남는 폭에 맞춰 칸이 늘고 줄어, 끊는 지점을 따로 적지
 * 않아도 모든 폭에서 같은 규칙으로 접힙니다.
 */
.cards {
  display: grid;
  gap: var(--cards-gap, 16px);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min, 200px), 100%), 1fr));
}

/* --- 구역 머리 --- */

/*
 * 페이지 머리(.page-head)와 같은 문제가 구역 머리에도 있었습니다.
 * 같은 모양을 index.css 는 .head, webhard.css 는 .section-head 로
 * 따로 정의했고, 눈썹 글자도 한쪽은 빨강 11px/900, 다른 쪽은 회색
 * 13px/800 이었습니다. 화면을 옮길 때마다 같은 자리가 다르게 보입니다.
 *
 * 한 벌로 모읍니다. 어두운 구역만 색을 덮어 씁니다.
 */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 23px;
}

.section-head .eyebrow {
  display: block;
  color: var(--muted);
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: 1.6px;
  line-height: 1.4;
}

.section-head h2 {
  margin: 6px 0 0;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -1.2px;
}

/* 제목 아래 보조 설명. 머리 오른쪽에 오는 설명과 구분합니다. */
.section-head .head-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--seed-font-size-t4);
  line-height: 1.7;
}

/* 머리 오른쪽에 오는 것: 설명 한 줄 또는 버튼 하나. */
.section-head > p {
  margin: 0;
  max-width: 350px;
  color: var(--muted);
  font-size: var(--seed-font-size-t4);
}

.section-head > a,
.section-head > .head-action {
  flex-shrink: 0;
}

/* --- 푸터 --- */

footer {
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 30px 0;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

/* 포스터 출처 표기. TMDB 이용 약관이 요구하는 한 줄이라 지우지 않습니다. */
#poster-credit:not(:empty)::before {
  content: " · ";
}

.footer-row p {
  color: var(--muted);
  font-size: var(--seed-font-size-t1);
  line-height: 1.8;
  margin: 0;
}

.footer-row > a:last-child {
  font-size: var(--seed-font-size-t2);
}

/* 콘텐츠 데이터 출처는 저작권/데이터 고지라 푸터와 같은 작은 위계로 둡니다. */
.content-sources a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 2026-09-28: 공통 탐색 요소의 마감과 모바일 터치 영역 */
.site-header .menu a {
  padding: 24px 0;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.site-header .menu a:hover {
  color: var(--accent);
}

@media (max-width: 900px) {
  .section-head > p {
    max-width: 240px;
  }
}

@media (max-width: 650px) {
  .section-head > p {
    margin-top: 8px;
    max-width: none;
    font-size: var(--seed-font-size-t3);
  }

  /* 버튼은 제목 아래로 내려 세로로 쌓습니다. */
  .section-head > a,
  .section-head > .head-action {
    display: inline-flex;
    margin-top: 14px;
  }

  .footer-row p {
    flex-basis: 100%;
    order: 2;
  }

  .footer-row > a:last-child {
    margin-left: auto;
  }
  html {
    scroll-padding-top: 126px;
  }

  body {
    overflow-x: hidden;
  }

  .wrap {
    width: calc(100% - 24px);
  }

  .site-header .logo {
    margin-bottom: 0;
    font-size: 20px;
    line-height: 1;
  }

  .site-header .logo i {
    width: 29px;
    height: 29px;
    margin-right: 7px;
    font-size: 12px;
  }

  .page-head {
    padding-top: 26px;
  }

  .page-head .label {
    font-size: 11px;
    letter-spacing: 1.35px;
  }

  .page-head h1 {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -1px;
  }

  .page-head .lead {
    margin-top: 11px;
    font-size: 14px;
    line-height: 1.65;
  }

  .section-head {
    display: block;
    margin-bottom: 17px;
  }

  .section-head h2 {
    margin-top: 4px;
    font-size: 23px;
    line-height: 1.35;
    letter-spacing: -0.8px;
  }

  .section-head .eyebrow {
    font-size: 11px;
    letter-spacing: 1.3px;
  }

  .section-head .head-note {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
  }

  footer {
    padding: 24px 0;
  }

  .footer-row {
    flex-wrap: wrap;
    gap: 12px;
  }
  .site-header .nav {
    height: auto;
    flex-wrap: wrap;
    gap: 0;
    min-height: 0;
    padding-top: 12px;
  }

  .site-header .menu {
    width: 100%;
    gap: 7px;
    padding: 11px 0 12px;
  }

  .site-header .menu a {
    flex: 1;
    text-align: center;
    display: grid;
    place-items: center;
    padding: 6px 4px;
    line-height: 1.25;
    min-height: 44px;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    background: #f8f9fb;
    font-size: 12.5px;
    font-weight: 700;
  }

  .site-header .menu .on {
    box-shadow: none;
    border-color: #f3c9cf;
    background: #fff0f2;
  }
}

@media (max-width: 380px) {
  .wrap {
    width: calc(100% - 20px);
  }

  .site-header .logo {
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}