/* craftory.kr — 사이트 공용 스타일.
 *
 * 이 파일은 그대로 hosting/assets/site.css 로 복사된다 (템플릿 아님).
 *
 * 토큰은 DESIGN.md(Quartz 디자인 시스템)에서 가져온다. 웹이 자기 팔레트를 따로 갖지 않는
 * 이유는 두 가지다. 앱과 사이트가 다른 브랜드처럼 보이면 안 되고, DESIGN.md 는
 * `npx @google/design.md lint` 로 WCAG 검증을 받는 정본이라 값이 이미 증명돼 있다.
 *
 * 2026-08-07 시각 레이어 재작성: 이전 버전은 시안-온-블랙 글래스모피즘이었고, 그 팔레트는
 * 앱 어디에도 없는 값이었다 — 웹만의 발명이었다. impeccable 라이브 스캔이 23건을 잡았다
 * (ai-color-palette 7 · gradient-text 2 · low-contrast 5 · undersized-ui-text 8 · line-length 1).
 *
 * 정정: 그 findings 중 셰이더 자체를 지목한 규칙은 없었다. ai-color-palette 는 CSS
 * radial-gradient 를, gradient-text 는 로고의 background-clip 을 가리켰다. 셰이더가 관여한 것은
 * low-contrast 하나이고, 원인은 셰이더가 아니라 그 위에 반투명 카드 + backdrop-filter 를 얹은
 * 조합이었다. 그래서 셰이더는 지울 것이 아니라 이식할 것이었다 — 2026-08-08 에 되살렸다.
 * 카드가 불투명해진 지금은 텍스트가 움직이는 필드 위에 놓이지 않는다.
 */

/* ─────────────────────────────────────────────────────────── tokens
   DESIGN.md colors / spacing / rounded / typography 에서 옮긴 값. */

:root {
  /* colors — light("paper") */
  --paper: #FBFBF9;        /* background */
  --surface: #F9F8F5;      /* surface */
  --surface-sunk: #F3F1EC;
  --ink: #1C1A16;          /* on-surface */
  --ink-strong: #0C0A09;   /* primary */
  /* 보조 본문색. DESIGN.md 의 outline(#797165)을 쓰면 가장 어두운 표면(--surface-sunk)에서
     4.3:1 로 AA 에 못 미친다 — outline 은 선 색이지 본문색이 아니다.
     ink 74% + paper 26% 로 섞어 모든 표면에서 통과시킨다 (paper 7.0:1 · surface-sunk 6.5:1). */
  --muted: #565451;
  /* 2026-08-08 DESIGN.md 에서 sheen 토큰이 제거됐다 — 앱의 배경 sheen 이 폐기됐기 때문.
     웹은 그 hex 를 자체 강조색으로 계속 쓴다. 이제 DESIGN.md 토큰이 아니라 웹 소유 값이다.
     본문 대비 4.9:1 (paper 기준). */
  --sheen: #8A6A28;
  --sheen-soft: rgba(138, 106, 40, .1);
  --rule: rgba(28, 26, 22, .13);
  --rule-strong: rgba(28, 26, 22, .28);
  --shadow: 0 1px 2px rgba(28, 26, 22, .05), 0 10px 28px rgba(28, 26, 22, .07);
  --shadow-lift: 0 2px 4px rgba(28, 26, 22, .06), 0 18px 44px rgba(28, 26, 22, .11);
  --grain-opacity: .035;
  /* 엣지 글로우 전체 세기. site.js 가 읽어 iC0.a 로 넘긴다 —
     ScreenEdgeGlow 의 "the first one's alpha scales the whole effect" 와 같은 손잡이다.

     앱의 IrisSpectrum 은 알파 1.0 이다. 여기서 0.9 로만 낮춘다. 테마별로 값을 나누지
     않는다 — 처음엔 "어두운 배경에서 더 강하게 읽힌다"고 짐작해 나눴는데, 재보니 반대였다
     (같은 지점 대비 light 5.06:1 · dark 6.64:1). 짐작이 틀렸으므로 비대칭을 걷었다. */
  --edge-glow-alpha: .9;

  /* spacing — DESIGN.md spacing scale */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --touch: 48px;

  /* rounded — DESIGN.md */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;

  --measure: 60ch;
  --max: 1120px;
}

[data-theme="dark"] {
  --paper: #110F0E;        /* background-dark */
  --surface: #1C1A17;      /* surface-dark */
  --surface-sunk: #171512;
  --ink: #E9E8E5;          /* on-surface-dark */
  --ink-strong: #EDE9E3;   /* primary-dark */
  /* ink 76% + paper 24%. outline-dark 대신 파생값을 쓰는 이유는 light 와 같다. */
  --muted: #B4B2AF;
  --sheen: #D4A855;        /* 대비 8.7:1. 위와 같은 이유로 웹 소유 값. */
  --sheen-soft: rgba(212, 168, 85, .12);
  --rule: rgba(233, 232, 229, .14);
  --rule-strong: rgba(233, 232, 229, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .34);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 44px rgba(0, 0, 0, .42);
  --grain-opacity: .05;
}

/* ──────────────────────────────────────────────────────────── base */

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

/* clip, not hidden — hidden 은 position: sticky 를 조용히 깨뜨린다. */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  overflow-x: clip;
  /* 서체는 앱과 같은 Pretendard 한 벌. 디스플레이용 두 번째 서체를 두지 않는다 —
     이전 버전의 Space Grotesk 는 앱에 없는 값이었고 AI 생성 UI 가 수렴하는 서체다. */
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}

/* 엣지 글로우. 앱의 ScreenEdgeGlow(cocolog FetchBorder) 이식이고 GLSL 은 site.js 에 있다.
 *
 * 콘텐츠 **위** 다 — 앱 주석의 "Over, not behind: the ring frames whatever is on screen
 * rather than sitting under it" 와 같다. 헤더(z-index 100)보다도 위에 놓아 화면 테두리를
 * 온전히 두른다.
 *
 * 비상호작용이고 레이아웃에 관여하지 않으므로 CLS 가 없다. 3.4초 뒤 site.js 가 DOM 에서
 * 제거하므로 합성 레이어도 남지 않는다.
 */
#edge-glow {
  position: fixed;
  inset: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 종이 결. 정적이고 셰이더가 아니다 — 폐기된 앰비언트 레이어는 "움직이는 광원 + 그레인"
   이었고, 여기 남은 것은 그레인뿐이다. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  color: var(--ink-strong);
  letter-spacing: -0.01em;
  line-height: 1.35;
  /* 긴 한글 복합어·URL 이 좁은 화면에서 컨테이너를 밀지 않게 한다. */
  overflow-wrap: anywhere;
  min-width: 0;
  font-style: normal;
}

h1 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 700; }
h2 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }

p { overflow-wrap: anywhere; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--sheen);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

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

.skip-link {
  position: absolute;
  left: var(--sp-md);
  top: -64px;
  z-index: 400;
  padding: var(--sp-md) var(--sp-xl);
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  text-decoration: none;
  font-weight: 600;
  transition: top .18s;
}
.skip-link:focus { top: var(--sp-md); }

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--sp-2xl);
}

/* ────────────────────────────────────────────────────────── header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-sm) var(--sp-2xl);
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
}

/* 로고는 단색 잉크. gradient + background-clip: text 는 대비를 1.1:1 로 떨어뜨렸고
   그 자체가 흔한 AI 표식이다. 브론즈는 이름 앞의 작은 표식 하나로만 쓴다. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  min-height: var(--touch);
  padding-right: var(--sp-sm);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  text-decoration: none;
  flex-shrink: 0;
}
.logo::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--sheen);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: var(--sp-xs); flex-wrap: wrap; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-md);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.site-nav a:hover { color: var(--ink); background: var(--surface-sunk); }
.site-nav a[aria-current="page"] { color: var(--ink-strong); }

#theme-toggle {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
#theme-toggle:hover { color: var(--ink); border-color: var(--rule-strong); background: var(--surface-sunk); }
#theme-toggle svg {
  position: absolute;
  width: 18px; height: 18px;
  transition: opacity .18s;
}
.icon-moon { opacity: 1; }
.icon-sun { opacity: 0; }
[data-theme="dark"] .icon-moon { opacity: 0; }
[data-theme="dark"] .icon-sun { opacity: 1; }

/* ────────────────────────────────────────────────────── breadcrumb */

.breadcrumb { padding-top: var(--sp-xl); }
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 13px;
  color: var(--muted);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-sm); }
.breadcrumb li + li::before { content: "/"; color: var(--rule-strong); }
/* "앱" 처럼 한 글자짜리 항목이 있다. 폭 24px 을 확보하지 않으면
   WCAG 2.2 SC 2.5.8(24×24px)에 걸린다 — 높이만 보면 놓치는 축이다. */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.breadcrumb a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }

/* ──────────────────────────────────────────────────────────── hero */

.hero { padding: 64px 0 var(--sp-3xl); }
.hero-home { padding: 96px 0 56px; }
.hero .lead {
  margin-top: var(--sp-lg);
  max-width: var(--measure);
  font-size: 17px;
  color: var(--muted);
}
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sheen);
  margin-bottom: var(--sp-md);
}
.hero-head { display: flex; gap: var(--sp-xl); align-items: center; flex-wrap: wrap; }
.hero-flavor h1 { font-size: clamp(26px, 3.8vw, 38px); }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin-top: var(--sp-2xl); }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-xl);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--ink-strong); color: var(--paper); }
.btn-primary:hover { background: var(--sheen); }
.btn-ghost { border-color: var(--rule-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-sunk); }

/* ─────────────────────────────────────────────────────── sections */

.section { padding: 56px 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--rule); }
.section-notice { background: var(--surface-sunk); border-block: 1px solid var(--rule); }
.section-notice p { font-size: 14px; }
.section-note { margin-top: var(--sp-md); color: var(--muted); max-width: var(--measure); }

.prose { max-width: var(--measure); }
.prose p { margin-top: var(--sp-lg); color: var(--muted); }
.prose h3 { margin-top: var(--sp-3xl); }
.prose section { margin-top: 44px; }
.prose section:first-of-type { margin-top: var(--sp-2xl); }
.prose .lead { color: var(--ink); font-size: 17px; margin-top: var(--sp-lg); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .22em; }
.prose a:hover { color: var(--sheen); text-decoration-color: currentColor; }

.definition { color: var(--ink) !important; font-size: 17px; }
.meta-line { font-size: 13px; color: var(--muted); margin-top: var(--sp-md); }
.muted { color: var(--muted); }

.checks { list-style: none; margin-top: var(--sp-xl); display: grid; gap: var(--sp-md); max-width: var(--measure); }
.checks li { position: relative; padding-left: var(--sp-2xl); color: var(--muted); }
.checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .78em;
  width: 10px;
  height: 1px;
  background: var(--sheen);
}

.doc { padding: var(--sp-3xl) 0 var(--sp-2xl); }

/* ─────────────────────────────────────────────────────────── cards */

.card-grid {
  margin-top: var(--sp-3xl);
  display: grid;
  /* minmax(0, ...) — 이미지가 든 트랙에서 bare 1fr 은 좁은 화면에서 넘친다. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-xl);
}

/* 유리 카드·3D 틸트·포인터 추적 광택을 걷어냈다. 종이 위의 카드는 종이처럼 굴게 둔다. */
.flavor-card {
  position: relative;
  display: flex;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.flavor-card:hover,
.flavor-card:focus-within {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
/* 브랜드 색은 카드 왼쪽 모서리의 얇은 선 하나로만 등장한다. */
.flavor-card::before {
  content: "";
  position: absolute;
  left: 0; top: var(--sp-xl); bottom: var(--sp-xl);
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--sheen);
  opacity: 0;
  transition: opacity .18s;
}
.flavor-card:hover::before,
.flavor-card:focus-within::before { opacity: 1; }

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  width: 100%;
  padding: var(--sp-2xl);
}

.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); }

.app-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  flex-shrink: 0;
  object-fit: cover;
}
.app-icon-lg { width: 76px; height: 76px; border-radius: var(--r-lg); }

.platform-tags { list-style: none; display: flex; gap: var(--sp-xs); flex-wrap: wrap; justify-content: flex-end; }
/* 12px = DESIGN.md label-md. 이전 값 .68rem(10.88px)은 앱의 타입 스케일에도 없었다. */
.tag {
  padding: 3px var(--sp-sm);
  border-radius: var(--r-xs);
  border: 1px solid var(--rule);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.app-name { font-size: 20px; font-weight: 700; }
.app-name a { text-decoration: none; }
.app-name a::after { content: ""; position: absolute; inset: 0; }
.app-name a:hover { color: var(--sheen); }
.app-summary { font-size: 14px; color: var(--muted); flex-grow: 1; }

.card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  margin-top: var(--sp-xs);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--rule);
}
.detail-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  align-self: flex-start;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.detail-link::after { content: "→"; color: var(--sheen); }
.detail-link:hover { color: var(--sheen); }

/* ───────────────────────────────────────────────────── store links */

.store-links { display: flex; gap: var(--sp-sm); flex-wrap: wrap; position: relative; z-index: 1; }
.store-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  min-height: 44px;
  padding: 0 var(--sp-lg);
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.store-link:hover { background: var(--surface-sunk); border-color: var(--ink); }
.store-badge { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.hero .store-links { margin-top: var(--sp-2xl); }

/* ──────────────────────────────────────────────────── entity facts */

.entity-facts {
  margin-top: var(--sp-3xl);
  border-top: 1px solid var(--rule);
}
.fact-row {
  display: grid;
  grid-template-columns: minmax(112px, 168px) 1fr;
  gap: var(--sp-lg);
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.fact-row dt { color: var(--muted); font-weight: 500; }
.fact-row dd { color: var(--ink); }

/* ──────────────────────────────────────────────────────── subjects */

.subject-grid { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-xl); }
.subject-chip {
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────── features */

.feature-list { list-style: none; margin-top: var(--sp-2xl); display: grid; gap: 0; }
.feature-list li { padding: var(--sp-xl) 0; border-bottom: 1px solid var(--rule); }
.feature-list li:first-child { border-top: 1px solid var(--rule); }
.feature-list h3 { margin: 0; font-size: 16px; }
.feature-list p { margin-top: var(--sp-xs); font-size: 14px; color: var(--muted); }

/* ───────────────────────────────────────────────────────────── faq */

.faq-list { margin-top: var(--sp-2xl); border-top: 1px solid var(--rule); }
.faq-item { padding: var(--sp-xl) 0; border-bottom: 1px solid var(--rule); }
.faq-item dt { font-weight: 600; font-size: 16px; color: var(--ink-strong); }
.faq-item dd { margin-top: var(--sp-sm); color: var(--muted); font-size: 15px; }

/* ─────────────────────────────────────────────────── related apps */

.related-apps { list-style: none; margin-top: var(--sp-xl); display: grid; gap: var(--sp-sm); }
.related-apps a {
  display: grid;
  gap: 2px;
  padding: var(--sp-lg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.related-apps a:hover { border-color: var(--rule-strong); }
.related-apps strong { font-size: 15px; color: var(--ink-strong); }
.related-apps span { font-size: 14px; color: var(--muted); }

.legal-links { list-style: none; margin-top: var(--sp-2xl); display: grid; gap: var(--sp-xs); }
.legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--ink);
}

/* ─────────────────────────────────────────────────────────── table */

.table-scroll { margin-top: var(--sp-2xl); overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 600px;
  border-top: 1px solid var(--rule-strong);
}
.compare-table th:last-child, .compare-table td:last-child { padding-right: 0; }
.compare-table th, .compare-table td {
  padding: var(--sp-md) var(--sp-lg) var(--sp-md) 0;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.compare-table thead th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom-color: var(--rule-strong); }
.compare-table tbody th { font-weight: 600; white-space: nowrap; }
.compare-table td { color: var(--muted); }
/* 셀 안의 링크도 독립 타겟이다. 인라인 상태의 17px 은 WCAG 2.2 SC 2.5.8(24×24px)에 못 미쳤다. */
.compare-table a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: .2em;
}
.compare-table a:hover { color: var(--sheen); text-decoration-color: currentColor; }

/* ────────────────────────────────────────────────────────── footer */

.site-footer {
  margin-top: 64px;
  border-top: 1px solid var(--rule);
  padding: 56px 0 var(--sp-3xl);
  background: var(--surface);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-3xl);
}
.footer-logo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  margin-bottom: var(--sp-md);
}
.footer-tagline { font-size: 14px; color: var(--muted); max-width: 44ch; }
.footer-brand p { font-size: 14px; color: var(--muted); margin-top: var(--sp-sm); }
.footer-brand a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .2em; }
.footer-nav h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-sm);
}
.footer-nav ul { list-style: none; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--sheen); }
.footer-notice {
  margin-top: var(--sp-3xl);
  padding-top: var(--sp-2xl);
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--muted);
  max-width: 62ch;
}
.footer-notice a { color: var(--ink); }
.footer-bottom { margin-top: var(--sp-lg); font-size: 13px; color: var(--muted); }

/* ────────────────────────────────────────────────────── responsive
   320 / 375 / 414 / 768 에서 가로 스크롤이 없어야 한다. */

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .wrap, .header-inner { padding-left: var(--sp-xl); padding-right: var(--sp-xl); }
  .hero { padding: 40px 0 var(--sp-2xl); }
  .hero-home { padding: 56px 0 var(--sp-3xl); }
  .section { padding: 40px 0; }
  .header-inner { flex-wrap: wrap; row-gap: 0; }
  .site-nav { margin-left: 0; order: 3; width: 100%; border-top: 1px solid var(--rule); }
  .site-nav ul { gap: 0; }
  .site-nav a { padding-left: 0; padding-right: var(--sp-lg); }
  #theme-toggle { margin-left: auto; }
  .fact-row { grid-template-columns: 1fr; gap: 2px; padding: var(--sp-md) 0; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  .card-body { padding: var(--sp-xl); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .flavor-card:hover { transform: none; }
  /* 엣지 글로우는 CSS 로 숨기지 않는다 — site.js 가 아예 그리지 않고 캔버스를 제거한다.
     앱은 여기서 정지한 링을 full strength 로 남기지만, 그건 링이 정보를 나를 때의 처리다.
     웹의 링은 장식이라 남길 것이 없다. 근거는 site.js 의 해당 분기 주석. */
}