/* ============================================================
   PET-APP-142 · 고요담 · LUX 럭셔리 (다크)
   반려동물 장례 — 추모 기록 대시보드 2화면.
   SPEC 8절 v1.3 — APP 은 히어로 대신 첫 화면에 실제로 동작하는 데이터 UI 를 둔다.
   사이드바 / 지표 카드 / SVG 차트 / 정렬·필터되는 테이블 / 검색 / 상세 패널

   ★톤 원칙 — 이 소재는 과장하면 즉시 무례해진다.
     · 성장 지표(↑12%)·강조 색면·큰 감탄 카피를 쓰지 않는다
     · 모션은 등장 페이드 하나로 제한하고 지속시간을 늘리지 않는다
     · 숫자는 성과가 아니라 '남은 일'과 '기한'으로만 표시한다
   ============================================================ */

/* ★SPEC v1.7 그리드 안전장치 */
* { grid-auto-columns: minmax(0, 1fr); }
:where([style*="grid"], .grid, [class*="__grid"], [class*="__inner"], .app, .app__body,
       .kpis, .panels, .card, .stack, .row, .steps, .mem) > * { min-width: 0; }

:root {
  --brand:       #36b5a8;   /* H 173.9° */
  --brand-ink:   #06211f;   /* 브랜드 면 위 글자 6.69:1 */
  --accent:      #8fd9d0;   /* 밝은 세이지 — 다크 지면에서 포커스링·CTA 가 살아있게 */
  --accent-ink:  #08221f;   /* 10.33:1 */
  --surface:     #0f1615;   /* HSL L 7.3% — 다크 지면 */
  --surface-alt: #18211f;
  --ink:         #e7efed;   /* 15.68:1 */
  --ink-2:       #afc0bd;   /*  9.68:1 */
  --ink-3:       #8fa29f;   /*  6.84:1 on --surface */
  --line:        #232f2d;
  --line-strong: #384744;
  --font-display: var(--font-serif);
  --r: var(--r-sm);
}

body { background: var(--surface); color: var(--ink); }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); }

/* ── 앱 셸 ─────────────────────────────────────────────────── */

.app {
  --sidebar-w: 236px;
  --topbar-h: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100svh;
}
.app__main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }

/* ── 사이드바 ──────────────────────────────────────────────── */

.side {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  display: grid; gap: var(--sp-4);
}
.side__brand { display: grid; gap: 2px; }
.side__brand b { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
.side__brand span { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-3); }

.side__nav { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.side__nav::-webkit-scrollbar { display: none; }
.side__nav a {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r);
  font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.side__nav a:hover { background: color-mix(in oklab, var(--brand) 12%, transparent); color: var(--ink); }
.side__nav a[aria-current="page"] {
  background: color-mix(in oklab, var(--brand) 18%, transparent);
  border-color: color-mix(in oklab, var(--brand) 40%, transparent);
  color: var(--ink);
}
.side__nav i { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--line-strong); flex: none; }
.side__nav a[aria-current="page"] i { background: var(--brand); }

.side__foot { display: none; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.8; }

@media (min-width: 1024px) {
  .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .side {
    border-bottom: 0; border-right: 1px solid var(--line);
    padding: var(--sp-6) var(--sp-5);
    align-content: start; gap: var(--sp-6);
    position: sticky; top: 0; height: 100svh;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .side__nav { flex-direction: column; overflow: visible; gap: var(--sp-1); align-content: start; }
  .side__foot { display: block; }
}

/* ── 상단바 ────────────────────────────────────────────────── */

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--gutter);
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.topbar h1 { font-size: var(--fs-lg); letter-spacing: var(--ls-tight); margin-right: auto; }
.search {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: var(--surface-alt); min-width: 0;
}
.search input { background: none; border: 0; outline: none; font-size: var(--fs-sm); color: var(--ink); width: 100%; min-width: 0; }
.search input::placeholder { color: var(--ink-3); }
.search:focus-within { border-color: var(--accent); }
.search svg { flex: none; color: var(--ink-3); }

/* ── 본문 ──────────────────────────────────────────────────── */

.app__body { padding: var(--sp-5) var(--gutter) var(--sp-8); display: grid; gap: var(--sp-5); align-content: start; }

.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-3);
}
.note { font-size: var(--fs-sm); color: var(--ink-2); }

/* ── 지표 카드 ─────────────────────────────────────────────── */

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.kpi {
  padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-alt); display: grid; gap: var(--sp-3);
}
.kpi dt { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--ink-3); }
.kpi dd { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; letter-spacing: var(--ls-tight); }
.kpi dd span { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--ink-3); margin-left: 4px; }
.kpi small { font-size: var(--fs-xs); color: var(--ink-2); }

@media (min-width: 768px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── 패널 ──────────────────────────────────────────────────── */

.panels { display: grid; gap: var(--sp-5); }
.panel {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-alt); overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}
.panel__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.panel__head h2 { font-size: var(--fs-md); letter-spacing: var(--ls-tight); margin-right: auto; }
.panel__head p { font-size: var(--fs-xs); color: var(--ink-2); }
.panel__body { padding: var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; }

@media (min-width: 1280px) { .panels { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }

/* ── 필터 칩 ───────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: transparent;
  font-size: var(--fs-xs); color: var(--ink-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* ── 테이블 ────────────────────────────────────────────────── */

.tbl-wrap { overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th, .tbl td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); }
.tbl thead th {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--ink-2); font-weight: var(--fw-semibold); white-space: nowrap;
}
.tbl thead th button {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.tbl thead th button::after {
  content: "↕"; font-size: 10px; color: var(--ink-3); transition: color var(--dur) var(--ease);
}
.tbl thead th[aria-sort="ascending"] button::after { content: "↑"; color: var(--brand); }
.tbl thead th[aria-sort="descending"] button::after { content: "↓"; color: var(--brand); }
.tbl tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.tbl tbody tr:hover { background: color-mix(in oklab, var(--brand) 8%, transparent); }
.tbl tbody tr[aria-selected="true"] { background: color-mix(in oklab, var(--brand) 14%, transparent); }
.tbl td.num { font-family: var(--font-mono); white-space: nowrap; color: var(--ink-2); }
.tbl td b { font-weight: var(--fw-semibold); }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 3px var(--sp-3); border-radius: var(--r-full);
  font-size: var(--fs-xs); white-space: nowrap;
  border: 1px solid var(--line-strong); color: var(--ink-2);
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: var(--r-full); background: currentColor; }
.badge--now { color: var(--brand); border-color: color-mix(in oklab, var(--brand) 46%, transparent); }
.badge--wait { color: #d9c08a; border-color: #6b5a34; }
.badge--done { color: var(--ink-3); }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-top: var(--sp-2); }
.pager__info { font-size: var(--fs-xs); color: var(--ink-2); margin-right: auto; }
.pager button {
  padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line-strong);
  border-radius: var(--r); font-size: var(--fs-xs); color: var(--ink-2);
}
.pager button:hover:not(:disabled) { color: var(--ink); border-color: var(--accent); }
.pager button:disabled { opacity: .4; cursor: default; }
.pager b { font-size: var(--fs-xs); color: var(--ink); }

/* ── 차트 (SVG 직접 그림) ──────────────────────────────────── */

.chart { width: 100%; height: auto; display: block; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .bar { fill: color-mix(in oklab, var(--brand) 56%, var(--surface)); }
.chart .bar--now { fill: var(--brand); }
.chart .axis { fill: var(--ink-3); font-family: var(--font-mono); }
.chart .val { fill: var(--ink-2); font-family: var(--font-mono); }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* ── 절차 타임라인 (상세 패널) ─────────────────────────────── */

.steps { display: grid; gap: 0; }
.stepr {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--sp-4);
  padding-bottom: var(--sp-5); position: relative;
}
.stepr::before {
  content: ""; position: absolute; left: 6px; top: 16px; bottom: 0;
  width: 1px; background: var(--line);
}
.stepr:last-child { padding-bottom: 0; }
.stepr:last-child::before { display: none; }
.stepr__dot {
  width: 13px; height: 13px; border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: var(--surface-alt);
  margin-top: 4px; z-index: 1;
}
.stepr--done .stepr__dot { background: var(--ink-3); border-color: var(--ink-3); }
.stepr--now .stepr__dot { background: var(--brand); border-color: var(--brand); }
.stepr__body { display: grid; gap: var(--sp-1); }
.stepr__body b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.stepr__body span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.stepr__body p { font-size: var(--fs-sm); color: var(--ink-2); }

/* ── 정의 목록 ─────────────────────────────────────────────── */

.dl { display: grid; gap: var(--sp-3); }
.dl > div { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr); gap: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.dl dt { font-size: var(--fs-xs); color: var(--ink-3); padding-top: 2px; }
.dl dd { font-size: var(--fs-sm); }

/* ── 버튼 ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--solid { background: var(--brand); color: var(--brand-ink); }
.btn--solid:hover { background: var(--accent); color: var(--accent-ink); }
.btn--line { border: 1px solid var(--line-strong); color: var(--ink); }
.btn--line:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }

/* ── 추모 페이지 (memorial.html) ───────────────────────────── */

.mem { display: grid; gap: var(--sp-6); }
.mem__hero {
  position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line);
}
.mem__hero .img-slot { border-radius: 0; aspect-ratio: 21 / 9; }
.mem__hero-cap {
  position: absolute; inset: auto 0 0 0; z-index: 4;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  /* 원본 사진이 순백이어도 본문 대비가 유지되도록 지면색 스크림을 짙게 깐다 */
  background: linear-gradient(to top,
    color-mix(in oklab, var(--surface) 96%, transparent) 0%,
    color-mix(in oklab, var(--surface) 88%, transparent) 58%,
    transparent 100%);
}
.mem__hero-cap h2 { font-size: var(--fs-xl); letter-spacing: var(--ls-tight); }
.mem__hero-cap p { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--sp-2); }

.mem__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 1024px) { .mem__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; } }

/* 유골함 선택 카드 */
.urns { display: grid; gap: var(--sp-4); }
.urn {
  display: grid; gap: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-alt); overflow: hidden;
  padding-bottom: var(--sp-4);
  transition: border-color var(--dur) var(--ease);
}
.urn:has(input:checked) { border-color: var(--brand); }
.urn .img-slot { border-radius: 0; }
.urn__body { display: grid; gap: var(--sp-2); padding-inline: var(--sp-4); }
.urn__body h3 { font-size: var(--fs-md); letter-spacing: var(--ls-tight); }
.urn__body p { font-size: var(--fs-sm); color: var(--ink-2); }
.urn__pick { display: flex; align-items: center; gap: var(--sp-3); padding-inline: var(--sp-4); font-size: var(--fs-sm); cursor: pointer; }
.urn__pick input { accent-color: var(--brand); width: 16px; height: 16px; }
.urn__spec { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: 0 var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }

@media (min-width: 768px) { .urns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 푸터 ──────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--line); padding: var(--sp-6) var(--gutter);
  display: grid; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--ink-2);
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.foot nav a { color: var(--ink-2); }
.foot nav a:hover { color: var(--accent); }

/* 등장 모션은 페이드 하나로 제한한다 */
html.js .reveal { transform: none; }

/* PET-INTERACTION-PACK */
/* ============================================================
   브랜드 마크 · 아이콘 · 인터랙션 보강  (SPEC 4-C)

   ★이 작품만 예외로 절제한다.
     소재가 반려동물 장례다. 파일 상단의 톤 원칙("모션은 등장 페이드
     하나로 제한한다")을 깨지 않는 선에서 반응만 올린다.
     · @keyframes 는 딱 하나 — '진행 중' 단계를 알리는 점의 느린 호흡.
       장식이 아니라 상태 표시라서 남겼다.
     · 등장 모션은 여전히 페이드뿐이다(transform 없음). 지연만 계단식으로 준다.
     · 카드가 떠오르거나 사진이 확대되는 연출은 쓰지 않는다.
   ============================================================ */

/* ── 브랜드 마크 ─ 고요한 원 하나와 그 아래 수면 한 줄 ─────── */

.side__brand {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sp-3);
}
.side__brand .nav__mark { grid-row: 1 / span 2; }
.nav__mark {
  flex: none;
  color: var(--brand);
  transition: color var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.side__brand:hover .nav__mark { color: var(--accent); }

.foot__brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-size: var(--fs-md);
  letter-spacing: var(--ls-tight); color: var(--ink);
}
.foot__brand .nav__mark { color: var(--brand); }
.foot__brand:hover .nav__mark { color: var(--accent); }

/* ── 아이콘 ────────────────────────────────────────────────── */

.ico { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

.search .ico { font-size: var(--fs-sm); color: var(--ink-3); transition: color var(--dur) var(--ease); }
.search:hover .ico, .search:focus-within .ico { color: var(--ink-2); }
.search { transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.search:hover { border-color: var(--ink-3); }

.panel__head h2 { display: inline-flex; align-items: center; gap: var(--sp-3); }
.panel__head h2 .ico { color: var(--ink-3); font-size: var(--fs-base); transition: color var(--dur) var(--ease); }
.panel:hover .panel__head h2 .ico { color: var(--brand); }

.tbl td.num .ico { color: var(--ink-3); margin-right: var(--sp-2); transition: color var(--dur) var(--ease); }
.tbl tbody tr:hover td.num .ico { color: var(--brand); }

/* 완료 배지 — 아이콘이 들어간 자리에는 점을 지운다 */
.badge--done::before { display: none; }
.badge--done .ico { font-size: var(--fs-sm); }

/* 사이드 연락처 — .side__foot 의 display 는 건드리지 않는다 (모바일에서 none) */
.side__foot b { display: block; color: var(--ink-2); font-weight: var(--fw-semibold); }
.side__foot span {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-2);
  transition: color var(--dur) var(--ease);
}
.side__foot .ico { color: var(--ink-3); font-size: var(--fs-sm); margin-top: .16em; transition: color var(--dur) var(--ease); }
.side__foot span:hover { color: var(--ink-2); }
.side__foot span:hover .ico { color: var(--brand); }

/* ── CTA 화살표 ────────────────────────────────────────────── */

.btn__arrow { font-size: 1.25em; transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn .ico:not(.btn__arrow) { font-size: 1.15em; }

/* ── 사이드 내비 ───────────────────────────────────────────── */

.side__nav i { transition: background var(--dur) var(--ease); }
.side__nav a:hover i { background: var(--brand); }

/* ── 지표 카드 ─ 뜨지 않는다. 선과 색만 바뀐다 ─────────────── */

.kpi { transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.kpi:hover { border-color: var(--line-strong); background: color-mix(in oklab, var(--brand) 5%, var(--surface-alt)); }
.kpi dd { transition: color var(--dur) var(--ease); }
.kpi:hover dd { color: var(--brand); }
.kpi small { transition: color var(--dur) var(--ease); }
.kpi:hover small { color: var(--ink); }

/* ── 패널 ──────────────────────────────────────────────────── */

.panel { transition: border-color var(--dur) var(--ease); }
.panel:hover { border-color: var(--line-strong); }

/* ── 테이블 ────────────────────────────────────────────────── */

.tbl thead th button { transition: color var(--dur) var(--ease); }
.tbl thead th button:hover { color: var(--ink); }
.tbl thead th button:hover::after { color: var(--brand); }
.tbl tbody tr td b { transition: color var(--dur) var(--ease); }
.tbl tbody tr:hover td b { color: var(--brand); }
.badge { transition: border-color var(--dur) var(--ease); }
.tbl tbody tr:hover .badge { border-color: var(--line-strong); }

/* ── 절차 타임라인 ─────────────────────────────────────────── */

.stepr__dot { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.stepr:hover .stepr__dot { border-color: var(--brand); }
.stepr__body b { transition: color var(--dur) var(--ease); }
.stepr:hover .stepr__body b { color: var(--brand); }
.stepr__body p { transition: color var(--dur) var(--ease); }
.stepr:hover .stepr__body p { color: var(--ink); }

/* ── 정의 목록 ─────────────────────────────────────────────── */

.dl > div { transition: border-color var(--dur) var(--ease); }
.dl > div:hover { border-top-color: var(--line-strong); }
.dl dt { transition: color var(--dur) var(--ease); }
.dl > div:hover dt { color: var(--ink-2); }

/* ── 차트 ──────────────────────────────────────────────────── */

.chart .bar { transition: fill var(--dur) var(--ease); }
.chart .bar:hover { fill: var(--brand); }
.legend span { transition: color var(--dur) var(--ease); }
.legend span:hover { color: var(--ink); }

/* ── 유골함 카드 ─ 사진을 당기지 않는다. 테두리만 든다 ─────── */

.urn { transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.urn:hover { border-color: var(--line-strong); }
.urn__pick { transition: color var(--dur) var(--ease); }
.urn__pick:hover { color: var(--brand); }
.urn__body h3 { transition: color var(--dur) var(--ease); }
.urn:hover .urn__body h3 { color: var(--brand); }

/* ── 페이저 · 칩 ───────────────────────────────────────────── */

.pager button { transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.pager button:hover:not(:disabled) { background: color-mix(in oklab, var(--brand) 8%, transparent); }
.chip { cursor: pointer; }
.chip:hover { background: color-mix(in oklab, var(--brand) 8%, transparent); }

/* ── 푸터 링크 ─────────────────────────────────────────────── */

.foot nav a { position: relative; transition: color var(--dur) var(--ease); }
.foot nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.foot nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── @keyframes ─ 이 작품에는 하나만 둔다 ──────────────────── */
/* '진행 중'인 단계의 점만 아주 느리게 호흡한다. 장식이 아니라 상태 표시다. */

@keyframes gd-now { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.stepr--now .stepr__dot { animation: gd-now 4.4s var(--ease) infinite; }

/* ── 형제 계단식 지연 ─ 페이드에만 준다 (transform 없음) ───── */

html.js .kpis .reveal:nth-child(2) { transition-delay: 60ms; }
html.js .kpis .reveal:nth-child(3) { transition-delay: 120ms; }
html.js .kpis .reveal:nth-child(4) { transition-delay: 180ms; }
html.js .panels .reveal:nth-child(2) { transition-delay: 90ms; }
html.js .urns .reveal:nth-child(2) { transition-delay: 80ms; }
html.js .urns .reveal:nth-child(3) { transition-delay: 160ms; }
html.js .mem__grid .reveal:nth-child(2) { transition-delay: 90ms; }
html.js .mem__grid .reveal:nth-child(3) { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { transition-delay: 0s !important; }
  .stepr--now .stepr__dot { animation: none; }
  .btn:hover .btn__arrow { transform: none; }
}


/* ===== 획일성 제거 — LUX 무드 어휘 =====================================
   160작품이 레퍼런스의 밑줄 draw·카드 리프트·대문자 킥커를 그대로 복사해
   같은 사이트 리스킨으로 보였다. 반응 방식을 무드에 맞게 갈아끼운다.
   ==================================================================== */
/* 세로 카덴스를 작품마다 다르게 — 전부 같은 --section-y 를 쓰는 게 구조적 tell 이었다 */
:root { --section-y: clamp(4.67rem, 2.9054rem + 7.5793vw, 9.35rem); }

/* 럭셔리 — 헤어라인이 느리게 떠오른다. 급한 움직임을 쓰지 않는다. */
.foot nav a::after { display: none !important; }
.foot nav a { position: relative; }
.foot nav a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: currentColor; opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.foot nav a:hover::before { opacity: .55; }

.card:hover { transform: scale(1.012); }

/* webit-touch */
@media (max-width: 767px) {
  .nav__inner { flex-wrap: wrap; overflow: visible; }
  .hero__actions, .hero__acts { flex-wrap: wrap; }
}
html.tier-premium .btn--solid { letter-spacing: .12em; }
html.tier-premium .nav { letter-spacing: .06em; }