/* 한국아이비금거래소 — v3
 *
 * 룩 도너: 케이골드(kgold.co.kr) 단일. 오너가 직접 선택(2026-08-03).
 *   계승: 흰 바탕 우세 / 히어로 안쪽 좌측 다크 시세 패널 / 회색 밴드 품목 행 /
 *         상승 적·하락 청 / 금색은 로고·버튼 선에만(면 금지) / 하단 상담 블록
 *
 * v2에서 지운 것과 이유:
 *   · Playfair Display  — impeccable KNOWN_SERIF_FONTS 등재. 오너 "AI 폰트" 판정과 기계 기준이 일치했다.
 *   · .roll / digit-roll — overflow:hidden + opacity:0 안에 시세 8개를 넣어 값이 소실됐다. 장식이 정보를 먹었다.
 *   · 갈색·금색 면        — Degussa 녹화 20프레임이 전부 쿠키 모달 dim 스크림 뒤였고, 그 오염된 회색을 톤으로 읽었다.
 */

:root {
  /* 지면 — 백지 우세. #F2F3F4 는 r242 g243 b244 로 r<g 라 isCreamColor 불성립(L1 크림/베이지 금지 준수) */
  --paper: #FFFFFF;
  --paper-2: #F2F3F4;
  --line: #E2E4E7;
  --line-2: #CFD3D8;

  /* 잉크 */
  --ink: #14171C;
  --ink-2: #3D444E;
  --ink-3: #6B7280;

  /* 구조색 — 면·규칙선·CTA 전용. 숫자에는 절대 쓰지 않는다(하락 청과 혼동) */
  --brand: #1B3A5C;
  --brand-2: #24507E;

  /* 금박 — 헤어라인·마크에만. 면으로 칠하지 않는다.
   *
   * 2026-08-04 재설계. 오너 판정: "골드색이 ㅈㄴ AI가 쓰는 골드 느낌". 맞다 — 재보니 근거가 나왔다.
   *   구 --gold #B7912F  = H43.2  **S0.743**  V0.718
   *   우리 히어로 사진의 실제 금속 픽셀(3,847개 평균) = H39.0  **S0.511**  V0.748
   *   룩 도너 케이골드의 실제 금색(reference.png 헤딩 룰 영역 1,698px) = H44~49  **S0.45~0.50**
   * 즉 **UI 금색이 우리 사진 속 진짜 금보다 채도가 45% 높았다.** 그게 AI 금색의 정체다 —
   * 히어로 이미지에는 색조·채도 게이트를 걸어놓고(image-tone.mjs) CSS 는 눈대중으로 골랐다.
   *
   * 새 값은 지어낸 게 아니라 **H40 / S0.50 한 축**에 세 단계 명도만 둔 것이다.
   *   --gold      V0.60  선·헤어라인·마크 (밝은 지면)
   *   --gold-ink  V0.42  글자 (밝은 지면, >=4.5:1)
   *   --gold-lite V0.765 글자·선 (다크 지면)
   * --gold-2(#D9B75C)는 지웠다 — 그 토큰의 유일한 일이 --gold 와 짝을 이룬 **버튼 그라디언트**였다. */
  --gold: #99804D;
  --gold-ink: #6B5936;
  --gold-lite: #C3A467;

  /* 등락 — 색 비의존 단서로 ▲▼ 글리프를 병기한다(L1 §3 · WCAG 1.4.1) */
  --up: #D1352B;
  --down: #1F5FD0;

  /* 스티키 헤더 높이 한 곳. `.hd__in` 과 `scroll-padding-top` 이 이 값을 같이 읽는다 —
     따로 적어두면 앵커 점프가 헤더 밑으로 들어가는 걸 아무도 못 잡는다. */
  --hd-h: 76px;
  --wrap: 1320px;
  /* 지면 거터 한쪽. `.wrap` 은 좌우 합계(44px)를 쓰고, 가로 레일은 이 값만큼 밖으로 흘러나간다. */
  --gut: 22px;
  --r: 3px;
}

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

/* 앵커 점프는 스티키 헤더만큼 위를 비워야 한다. 이게 없으면 `#rate` 가 y=0 에 붙어
   헤더(62~76px)가 섹션 제목을 덮는다 — "전체 시세표 보기" 를 누른 사람이 표 중간부터 본다
   (2026-08-11 실측 390: 제목 top 46px → 보정 후 122px). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd-h) + 14px); }

body {
  font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
  /* 국문 자간 하한 -0.02em. v2 의 -0.04em 은 390 폭에서 어절을 뭉갰다(오너 "띄어쓰기도 엉망") */
  letter-spacing: -0.015em;
  word-break: keep-all;
  overflow-wrap: break-word;
  /* 하단 고정 통화바가 본문 마지막 줄을 덮지 않게 — stickyBarClearsText.
     `viewport-fit=cover` 라 홈 인디케이터 높이도 같이 비운다(아이폰 34px). */
  padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

/* 좌우 여백 — 1440 에서 1120 지면은 양쪽 160px 를 버렸다(오너: "여백이 왜 이렇게 커").
   1320 으로 넓혀 60px 로 줄인다. 줄길이는 지면이 아니라 각 블록의 max-width: Nch 가 잡는다 —
   지면을 좁혀 줄길이를 맞추면 표·사진 같은 넓어야 할 것까지 같이 좁아진다. */
.wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; }

/* left:-9999px 는 문서 폭을 넘겨 가로 오버플로 감사에 잡힌다 — clip 패턴을 쓴다. */
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip:focus { left: 12px; top: 12px; width: auto; height: auto; clip: auto; clip-path: none; z-index: 99; background: var(--brand); color: #fff; padding: 10px 14px; }

:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* 법정표기·주석 레이어 — 본문과 미세하게 다른 질감으로 고지를 분리한다.
   패밀리 2개로 L1 §2(≤3) 충족. */
.ft__legal, .rate__note, .warn__p, .hero__panel-x {
  font-family: "Noto Sans KR", Pretendard, sans-serif;
}

/* ---------- 헤더 ---------- */
.hd { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.hd__in { display: flex; align-items: center; justify-content: space-between; height: var(--hd-h); }
/* 상호는 단일 노드다 — v2 는 .brand{display:flex;gap:9px} 로 상호와 부제 사이에 9px 를 넣었고
   그것이 "띄어쓰기가 엉망"으로 읽혔다. */
.hd__brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -0.02em; }
/* 마크는 정사각이 아니라 방패다(33:37) — 높이를 기준으로 잡고 폭은 비율이 정한다. */
.hd__mk { flex: none; width: 36px; height: 40px; color: var(--gold); }
/* 엠블럼 안 KIVY 는 방패·왕관보다 한 단 어둡다. 흰 헤더에서 --gold 는 3.8:1 이라
   7px 레터링이 흐려지고 impeccable low-contrast 가 실제로 발화했다(회피가 아니라 해결이다).
   금색 축(H40/S0.50)의 명도 3단계 중 잉크 단계로 내리면 5.1:1 이고 판독도 또렷해진다.
   **CSS 로 지정하는 이유**: SVG presentation attribute(`fill="var(--x)"`)는 브라우저가
   var() 를 해석하지 않는다 — 속성이 아니라 스타일이어야 토큰이 산다. */
.hd__mk text { color: var(--gold-ink); fill: currentColor; }
/* `fill` 만 내리면 상속된 `color` 는 --gold 로 남아 대비 검사기가 3.8:1 을 읽는다
   (SVG 텍스트는 color 가 아니라 fill 로 그려지는데 검사기는 color 를 본다).
   currentColor 로 묶어 **두 값이 갈라질 수 없게** 한다 — 검사기를 속이는 게 아니라 실제로 일치시킨다. */
/* 워드마크는 2행이다 — 국문 상호가 이름, 영문이 업의 설명. 행간을 1.05 로 조여 한 덩어리로 읽힌다. */
.hd__wm { display: grid; line-height: 1.05; }
.hd__name { font-size: 19px; }
/* 9.5px + 0.17em 였다. 둘 다 근거가 없었다 — 도너 시트의 letter-spacing 은 전량 음수(-.5px·-1px)로
   양수 트래킹이 0건이고, 최소 폰트도 10px 이다. "럭셔리 워드마크"를 흉내 낸 관용구였고
   impeccable 라이브 스캔이 undersized-ui-text(11px 바닥)+wide-tracking(0.05em 상한) 둘 다로 잡았다.
   대문자 약자라 약간의 트래킹은 가독에 쓸모가 있어 0.04em 만 남긴다. */
/* 로고 원본의 영문은 세리프 small-caps 다. 산세리프로 두면 마크와 워드마크가 서로 다른
   회사처럼 읽힌다 — 마크 안 KIVY 와 같은 세리프 축으로 맞춘다. Georgia/Times 는 웹 안전
   서체라 로드 비용이 0 이고 L1 §2(패밀리 ≤3)도 지킨다. */
.hd__en { font-family: Georgia, "Times New Roman", Times, serif; font-size: 11.5px;
  font-weight: 700; letter-spacing: 0.04em; color: var(--ink-3); margin-top: 2px; }
.hd__nav { display: flex; gap: 30px; font-size: 16px; color: var(--ink-2); }
.hd__nav a { padding: 6px 0; border-bottom: 2px solid transparent; }
.hd__nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); font-weight: 600; }

/* ---------- 히어로 — 오너 촬영 매장 영상 한 편이 첫 화면을 통째로 쓴다 ----------
   2026-08-11 오너 지시로 영상 섹션과 사진 히어로를 하나로 합쳤다. 그전엔 둘이 위아래로 따로 서서
   첫 화면이 반씩 잘린 매장 사진 두 장이었다 — 같은 곳이 두 번 나오고 어느 쪽도 안 차 있었다.
   `.hero__bg` 는 이제 <img> 가 아니라 <video> 다. 두 태그가 같은 규칙을 쓴다(둘 다 대체요소다).

   같은 날 2차 지시로 **카피·시세 패널이 아래 밴드로 내려갔다.** 그래서 여기 있던 것 둘이 같이 나갔다:
   ① 가로 스크림(.hero::after) — 우측 글자를 읽히게 하려고 영상의 우측 3/4 을 덮던 층이다.
      글자가 없는 지금은 오너가 찍은 화면만 어둡게 만든다. 대비는 이제 밴드의 다크 지면이 낸다.
   ② 2열 그리드(.hero__in) — 얹을 것이 없어졌다. 히어로는 영상 한 장이다. */
.hero { position: relative; background: #0E1319; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
/* 영상은 사진보다 위쪽 정보가 중요하다 — 간판이 프레임 상단에 있어 가운데 크롭이면 잘린다. */
video.hero__bg { object-position: center 38%; }
/* 첫 화면을 통째로 준다(오너 지시 "화면 전체 꽉차게" — 그전은 66vh 와 사진 히어로로 쪼개져 있었다).
   `svh` 다: 폰 주소창이 펼쳐진 상태의 실제 보이는 높이다. `vh` 로 두면 첫 화면에서 CTA 가
   주소창 밑에 깔린다. `vh` 를 먼저 써서 svh 를 모르는 브라우저가 그 값을 갖게 한다.
   상한도 하한도 두지 않는다 — 잘라내면 다시 "1/2 크기"가 된다. */
.hero--full { min-height: 100vh; min-height: 100svh; display: grid; }
/* 카피 블록은 히어로가 아니라 밴드 안에 선다(.band__in--split 의 2열). 이름은 그대로 둔다 —
   같은 블록이 자리만 옮겼고, 클래스를 갈면 시트 절반(.hero__copy·__panel·__h1…)이 같이 흔들린다. */
.hero__side { grid-column: 2; display: grid; gap: 26px; }
.hero__panel { background: rgba(10, 14, 19, 0.86); border: 1px solid rgba(195, 164, 103, 0.34); padding: 20px 22px 18px; }
.hero__panel-t {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  color: #F3F5F7; font-size: 15px; font-weight: 700; margin-bottom: 12px;
}
.hero__panel-t .rate__at { font-size: 12px; font-weight: 500; color: #98A1AC; margin-left: auto; }
/* 상자를 벗겼다 — 정적 라벨에 버튼/알약 껍데기를 씌우는 건 L1 §3 하드룰 위반이고
   ("static elements never get button/pill styling") 오너가 지목한 "네모박스" 그 자체다.
   고지는 활자로 푼다: 다른 글꼴 레이어 + 앞머리 ※. */
.hero__panel-x { font-size: 12.5px; font-weight: 500; color: var(--gold-lite); letter-spacing: 0; }
.hero__panel-x::before { content: "\203B\00a0"; }
.hero__panel-more {
  display: inline-block; margin-top: 12px; font-size: 13.5px; color: var(--gold-lite);
  border-bottom: 1px solid rgba(195, 164, 103, 0.5); padding-bottom: 1px;
}
.hero__copy { color: #F3F5F7; }
.hero__h1 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.24; letter-spacing: -0.03em; font-weight: 800; }
.hero__sub { margin-top: 13px; font-size: 18px; color: #C6CBD2; }
.hero__cta { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; font-size: 16px; font-weight: 600; border-radius: var(--r); }
/* 금색 면 + 세로 그라디언트를 지웠다. 두 가지가 동시에 틀렸다.
   ① 이 시트 머리글에 우리가 직접 적어놓은 도너 규칙이 "금색은 로고·버튼 **선**에만(면 금지)"이다.
      버튼을 금색 면으로 칠한 순간 자기 계약 위반이었고, 그게 4차 반려 A절 사유였다.
   ② 같은 색상의 명도 두 단계를 세로로 흘리는 것(#D9B75C -> #B7912F)은 실물 금속의 반사가 아니라
      **버튼을 입체로 보이게 하려는 관용구**다. 오너 판정 "같은 색에 그라디언트 있는 것도 AI 같다".
   대신 면은 잉크/백지 둘 중 지면 반대쪽을 쓴다 — 금은 선으로 돌아간다. */
.btn--ink { background: var(--ink); color: #FFFFFF; }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--line { border: 1px solid rgba(243,245,247,.5); color: #F3F5F7; }

/* 히어로 안 시세표 (compact) */
.hero__panel .rate__tbl { border-top: none; }
/* ⚠ `.rate__tbl thead th`(밝은 지면용 var(--ink-2))가 같은 특이도로 뒤에 와서 이긴다 —
   다크 패널에서 실측 2.0:1 로 사실상 안 보였다(tools/text-contrast.mjs). 특이도를 한 칸 올려 이긴다. */
.hero__panel .rate__tbl thead th { color: #B4BCC6; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 12px; padding: 0 0 7px; }
.hero__panel .rate__h { border-bottom: 1px solid rgba(255,255,255,.08); }
.hero__panel .rate__nm { color: #F3F5F7; font-size: 15.5px; }
.hero__panel .rate__en { color: #8B95A1; }
.hero__panel .rate__c { border-bottom: 1px solid rgba(255,255,255,.08); }
.hero__panel .rate__val { color: #FFFFFF; font-size: 19px; }
.hero__panel .rate__val--txt { font-size: 13px; color: #B9C0C9; font-weight: 500; }
/* 밝은 지면용 lead 강조(#FBFBFC)가 다크 패널에 그대로 오면 흰 글씨를 흰 배경이 먹는다.
   2026-08-03 실렌더에서 순금 행이 통째로 사라진 채 잡혔다. */
.hero__panel .is-lead .rate__c { background: rgba(255, 255, 255, 0.055); }

/* ---------- 신뢰 스트립 ---------- */
.strip { background: var(--paper-2); border-block: 1px solid var(--line); }
.strip__in { display: flex; flex-wrap: wrap; gap: 12px 38px; padding: 20px 0; }
.strip__i { position: relative; padding-left: 15px; font-size: 15.5px; color: var(--ink-2); }
/* 5px 금색 원 불릿을 7x1px 눈금으로 바꿨다. 원은 채워진 도형이고 눈금은 선이다 —
   "금색은 선에만"을 글머리표까지 밀어붙인다. 항목 4개가 나란한 행이라 눈금이 더 맞기도 한다. */
.strip__i::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 1px; margin-top: -0.5px; background: var(--gold); }

/* ---------- 섹션 헤딩 — 좌측 세로 액센트 바 ---------- */
.sh { display: flex; align-items: center; gap: 12px; font-size: clamp(23px, 2.9vw, 31px); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 28px; }
.sh__bar { width: 4px; height: 26px; background: var(--brand); border-radius: 2px; transform: scaleY(1); transform-origin: top; }

/* ---------- 시세 섹션 ---------- */
.rate { padding: 80px 0 86px; }
.rate__tbl { border-top: 2px solid var(--ink); }
.rate__cap { caption-side: top; text-align: left; font-size: 14px; color: var(--ink-3); padding-bottom: 10px; }
.rate__at { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rate__tbl thead th { border-bottom: 1px solid var(--line); padding: 11px 14px; font-size: 14px; font-weight: 700; color: var(--ink-2); text-align: right; }
.rate__tbl thead th:first-child { text-align: left; }
.rate__h { text-align: left; padding: 18px 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
.rate__nm { display: block; font-size: 17px; color: var(--ink); }
.rate__en { display: block; font-size: 13px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }
.rate__c { text-align: right; padding: 18px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* 숫자 위계는 무게·크기·tabular 로만 만든다. 디스플레이 세리프를 쓰지 않는다 —
   시세표 완성형 도너(케이골드·田中) 어디에도 세리프가 없다. */
.rate__val {
  display: block; font-size: clamp(20px, 2.6vw, 27px); font-weight: 700;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em; line-height: 1.2; color: var(--ink);
}
.rate__val--txt { font-size: 14px; font-weight: 500; color: var(--ink-2); letter-spacing: -0.02em; }
.rate__delta { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rate__delta.is-up { color: var(--up); }
.rate__delta.is-down { color: var(--down); }
.rate__na { color: var(--ink-3); }
.is-lead .rate__c { background: #FBFBFC; }
.rate__note { margin-top: 10px; font-size: 14.5px; color: #4A525E; max-width: 62ch; line-height: 1.6; }
.rate__note:first-of-type { margin-top: 16px; }

/* 시세 섹션 2열의 두 열. 모바일에서는 공지가 표 아래로 그냥 떨어진다(그리드 선언이 없다). */
.rate__main { min-width: 0; }
.rate__aside { min-width: 0; margin-top: 56px; }
.rate__note b { color: var(--ink-2); }

/* ---------- 풀블리드 밴드 ---------- */
.band { position: relative; background: #10151B; overflow: hidden; min-height: 62vh; display: grid; align-items: center; }
.band__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92;
  clip-path: inset(0);
}
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,21,27,.90) 0%, rgba(16,21,27,.58) 34%, rgba(16,21,27,.10) 62%, rgba(16,21,27,.04) 100%);
}
.band__in { position: relative; z-index: 1; padding: 104px 0 108px; color: #F3F5F7; }
/* about 히어로 — index 에 있던 같은 배너를 페이지 머리로 쓴다(2026-08-04 배너 이관).
   머리이므로 첫 화면을 다 먹지 않게 높이를 줄인다. index 에는 .band 가 더 이상 없다. */
.band--ph { min-height: 46vh; }
.band--ph .band__in { padding: 78px 0 82px; }
.band__h { font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.03em; max-width: 23ch; }
/* 줄바꿈 자리를 브라우저에 맡기면 3줄로 갈라진다(2026-08-06 오너: "3줄이 되면 지저분").
   줄 덩어리를 inline-block 으로 묶어 접히는 자리를 고정한다 — 설득코어 §1 '줄바꿈도 문구다'. */
.band__h > span { display: inline-block; }
.band__p { margin-top: 14px; font-size: 18px; color: #D8DDE3; max-width: 36ch; }

/* index 밴드 2열 — 좌: 정적 골드바 컷 / 우: 히어로에서 내려온 카피·시세(2026-08-11(2) 오너 캔버스 지시).
   좌열 폭을 히어로가 쓰던 값(460)과 같은 축으로 잡아 우열이 그전 카피 폭(약 790)을 그대로 받는다 —
   같은 블록이 자리만 옮긴 것이라 줄바꿈이 달라지면 안 된다.
   `minmax(0, …)` 인 이유는 L1 §8: 이미지가 든 트랙에 맨 `1fr` 을 주면 모바일에서 넘친다. */
.band__in--split {
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 52px; align-items: center;
}
/* 사진은 **정적**이다 — clip-open 은 `.band__bg` 에만 걸린다(오너 지시 "정적으로").
   금색은 면이 아니라 선으로만 쓴다(시트 머리글 도너 규칙) — 시세 패널 테두리와 같은 값이다. */
.band__shot { align-self: stretch; margin: 0; border: 1px solid rgba(195, 164, 103, 0.34); }
.band__shot img { display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; }

/* ---------- 취급 품목 — 케이골드: 회색 밴드에 아이콘 행 ---------- */
.goods { background: var(--paper-2); border-block: 1px solid var(--line); padding: 74px 0 80px; }
/* 칸 수는 품목 수를 따라간다 — 2026-08-12 고객 요청으로 '치금(치아금)' 이 붙어 6칸이다.
   5칸에 6개를 넣으면 둘째 줄에 한 칸이 외따로 서고, 그 줄만 세로선이 끊긴다. */
.goods__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; list-style: none; }
.goods__i { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; }
/* 원형 타일을 없앴다 — L1 §3 anti-slop 목록에 "둥근-사각 아이콘 타일 스택"이 명시돼 있고,
   무엇보다 **도너에 그런 게 없다.** 2026-08-04(2) 재실측: kgold 의 품목 행은 `.mblock_style_08` 이고
   `li { width:19%; float:left }` + `li:after { width:1px; height:50px; background:rgba(0,0,0,.2) }`,
   아이콘은 `<figure><img>` 하나다. `border-radius: 50%` 는 시트 전체에 캐러셀 점(13x13px) 한 곳뿐이었다.
   즉 우리가 박아둔 원형 니들은 유령이었다 — 로고 이니셜 타일과 같은 사고다.
   대신 도너의 실제 구현인 **칸 사이 1px 세로선**으로 행을 만든다. */
.goods__ic { display: grid; place-items: center; color: var(--gold); }
.goods__svg { display: block; width: 46px; height: 46px; }
.goods__i + .goods__i { border-left: 1px solid var(--line); }
.goods__nm { font-size: 16px; font-weight: 600; color: var(--ink-2); }

/* ---------- 매장 영상(틱톡) ---------- */
.reels { padding: 74px 0 80px; }
/* `grid-auto-columns: minmax(0, 200px)` 였다. **min 이 0 이면 스크롤 레일이 아니다** —
   그리드가 5칸을 컨테이너 폭에 맞춰 압축해버린다(390 실측: 칸 58px, scrollWidth==clientWidth
   라 가로 스크롤이 아예 안 생겼다). 9:16 썸네일이 58x103 으로 찌그러져 오너가 "다섯개가
   그냥 쭉 한줄로 있다"고 한 그 화면이다. 칸 폭은 **하한을 가진 고정값**이어야 한다. */
.reels__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 14px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding-bottom: 6px; scrollbar-width: thin;
}
.reels__i { min-width: 0; scroll-snap-align: start; }
.reels__a { display: block; position: relative; }
.reels__a img { aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r); }
/* 커버가 슬롯보다 작은 카드(2026-08-10 실측: 4건 중 1건이 340x332).
   `cover` 로 두면 혼자만 2배로 늘어나 뭉개지고 상하가 잘린다 — 자르지 않고(`contain`)
   뒤에 같은 그림을 흐리게 깔아 빈 띠를 없앤다.
   배경은 `<img>` 로 깐다. 인라인 `--thumb` 에 `url()` 을 담아 여기서 `var()` 로 펴면
   그 상대경로가 **이 CSS 파일 기준**으로 풀려 `assets/css/assets/…` 로 404 가 났다
   (2026-08-10 실측). 같은 URL 이라 브라우저가 재요청하지 않는다. */
.reels__a--fit { position: relative; border-radius: var(--r); overflow: hidden; }
.reels__bg {
  position: absolute; inset: 0; z-index: 0;
  /* `.reels__a img` 의 9/16 을 반드시 끈다 — absolute 로 깔린 배경에 비율이 걸리면
     높이가 카드 밖으로 자라 카드 자체를 늘린다(2026-08-10 실측: 315px 칸이 1175px 로). */
  aspect-ratio: auto; width: 100%; height: 100%; object-fit: cover; border-radius: 0;
  filter: blur(18px) saturate(.85) brightness(.7); transform: scale(1.25);
}
.reels__a--fit img:not(.reels__bg) { position: relative; z-index: 1; object-fit: contain; border-radius: 0; }
.reels__a--fit .reels__play { z-index: 2; }
.reels__play {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: rgba(14,19,25,.62); border: 1.5px solid rgba(255,255,255,.8);
}
.reels__play::after { content: ""; position: absolute; left: 17px; top: 13px; border-left: 13px solid #fff; border-block: 8px solid transparent; }
.reels__t { font-size: 15px; min-height: 45px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: 10px; line-height: 1.5; color: var(--ink-2);
}

/* ---------- 거래 절차 (about 전용) — 카드 금지, 번호 헤어라인 리스트 ----------
   2026-08-04 재작성. 이전엔 12.5px 번호 + 16.5px 제목 + 13.5px 한 줄이라 4칸이 통째로
   각주처럼 보였다(오너: "세션들이 작아"). 번호를 표제 크기로 키워 리듬을 만들고,
   칸마다 상단 룰 위에 금색 눈금을 찍어 "단계"라는 것이 형태로 읽히게 했다. */
.flow { padding: 84px 0 90px; background: var(--paper-2); }
.flow__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; list-style: none; }
.flow__i {
  position: relative; display: grid; align-content: start; gap: 4px;
  padding: 28px 30px 34px 0; border-top: 2px solid var(--ink);
}
.flow__i + .flow__i { border-left: 1px solid var(--line); padding-left: 30px; }
/* 상단 룰 위의 금색 눈금 — 면이 아니라 3px 짜리 선분이다(도너 규칙: 금색은 선에만). */
.flow__i::before {
  content: ""; position: absolute; top: -2px; left: 0; width: 34px; height: 2px; background: var(--gold);
}
.flow__i + .flow__i::before { left: 30px; }
.flow__n {
  font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
  /* 헤어라인색(--line-2)으로 뒀더니 실측 1.4:1 이었다 — 큰 글자라도 내용이면 읽혀야 한다.
     장식으로 죽이려면 크기가 아니라 무게로 죽인다. */
  color: #626A76; font-variant-numeric: tabular-nums;
}
.flow__h { font-size: 19px; font-weight: 700; letter-spacing: -0.025em; margin-top: 8px; }
.flow__p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); max-width: 34ch; }

/* 장비 섹션 규칙 일습은 2026-08-12 고객 요청으로 섹션째 폐기했다(다크 지면·금색 헤어라인
   액자·번호 스택). 사유는 build.mjs pageAbout 위 주석에 있다 — 되살아남 검사가 이 파일에서
   그 섹션 이름을 금지해서 여기엔 모양만 적는다. */

/* ---------- 매장 안내 ---------- */
.store { padding: 80px 0 86px; }
.store__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.store__info { min-width: 0; }
.info { display: grid; grid-template-columns: 74px 1fr; gap: 9px 14px; border-top: 1px solid var(--line); padding-top: 16px; }
.info__k { font-size: 15px; color: var(--ink-3); }
.info__v { font-size: 16.5px; color: var(--ink); max-width: 40ch; }
.store__id { margin: 18px 0 22px; font-size: 15px; color: var(--ink-2); padding-left: 13px; position: relative; }
.store__id::before { content: "※"; position: absolute; left: 0; color: var(--gold); }
.store__shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }

/* ---------- 공지 — hairline 리스트(카드 금지) ---------- */
.ph { padding: 40px 0 28px; border-bottom: 1px solid var(--line); }
.ph__h { font-size: clamp(26px, 3.2vw, 35px); font-weight: 800; letter-spacing: -0.03em; }
.ph__s { margin-top: 8px; color: var(--ink-3); font-size: 15px; }
.notice { padding: 40px 0 56px; }
.nlist { list-style: none; border-top: 2px solid var(--ink); }
.nlist__i { display: flex; justify-content: space-between; gap: 18px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.nlist__t { font-size: 17px; }
/* 날짜는 --ink-3(#6B7280)에서 14px 안티에일리어싱 실측 4.2:1 로 하한을 못 넘겼다.
   작은 글자는 공칭 대비보다 낮게 찍힌다 — 토큰을 그대로 믿지 말고 재서 내린다. */
.nlist__d { font-size: 14px; color: #5A6270; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nlist__empty { padding: 32px 0; color: var(--ink-3); font-size: 16.5px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
/* 분류 라벨 — 상자를 벗겼다.
   헤어라인 상자라 해도 상자는 상자다. "이벤트"는 누를 수 있는 것도, 상태 배지도 아닌 **분류어**인데
   테두리를 두르면 화면이 그것을 UI 컨트롤로 읽는다(L1 §3: static elements never get button/pill styling).
   오너가 "네모박스로 쓴 것도 존나 AI 같다"고 지목한 것이 정확히 이 층이다.
   대신 활자로 판다 — 금색 잉크 + 굵기 + 가운뎃점으로 날짜와 한 줄에 잇는다. */
.nlist__meta { display: flex; align-items: baseline; gap: 7px; }
.nlist__tag { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--gold-ink); white-space: nowrap; }
.nlist__tag::after { content: "·"; margin-left: 7px; color: var(--line-2); font-weight: 400; }

/* 본문까지 펼치는 목록(notice.html) — 항목이 가로 한 줄이 아니라 블록이다. */
.nlist--full .nlist__i { display: block; padding: 24px 4px 26px; scroll-margin-top: calc(var(--hd-h) + 16px); }
.nlist--full .nlist__hd { display: grid; gap: 4px; }
.nlist--full .nlist__meta { color: var(--ink-3); }
.nlist--full .nlist__t { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; }

/* 한글은 ch 기준이 영문과 달라 68ch 가 렌더 87자/줄이 된다(D13 line-length, 2026-08-06 FAQ 신설 때 실측).
   읽기 편한 줄길이는 글자수로 재야 한다 — 44ch 로 낮춰 렌더 80자 밑으로 둔다. */
.nlist__p { margin-top: 9px; font-size: 16px; line-height: 1.75; color: var(--ink-2); max-width: 44ch; }
/* 공지에 붙은 사진. 팝업과 같은 파일을 쓴다 — 팝업을 닫은 손님이 다시 찾아오는 자리가 여기다.
   본문(44ch)보다 좀 넓게 허용하되 지면 절반을 넘기지는 않는다 — 이벤트 이미지지 히어로가 아니다. */
.nlist__img { display: block; width: 100%; max-width: 520px; height: auto; margin-top: 14px; border-radius: var(--r); border: 1px solid var(--line); }
.nlist--full .nlist__i:target { background: #FBFAF4; box-shadow: inset 3px 0 0 var(--gold); padding-left: 18px; }

/* 메인 우측 공지 레일 — 링크 전체가 과녁이다(제목만 누르게 하면 모바일에서 못 맞춘다). */
.nlist--card { border-top: 2px solid var(--ink); }
.nlist--card .nlist__i { display: block; padding: 0; }
.nlist__a { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 15px 4px 17px; }
.nlist__a:hover .nlist__t { text-decoration: underline; text-underline-offset: 3px; }
.nlist__a { grid-template-columns: 1fr; }
.nlist--card .nlist__t { font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -0.025em; }
.rate__aside-more {
  display: inline-block; margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--ink-2);
  border-bottom: 1px solid var(--gold); padding-bottom: 2px;
}

/* ---------- 경고 ---------- */
.warn { background: var(--paper-2); border-top: 1px solid var(--line); }
.warn__in { padding: 30px 0; }
.warn__p { font-size: 14.5px; color: var(--ink-2); max-width: 64ch; padding-left: 14px; position: relative; }
.warn__p::before { content: "※"; position: absolute; left: 0; color: var(--gold); }

/* ---------- 푸터 ---------- */
.ft { background: #0F1318; color: #B9C0C9; padding: 54px 0 62px; }
.ft__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.ft__col { min-width: 0; }
/* 오너 지급 로고 실물. 다크 배경 전제로 만들어진 파일이라 푸터에서만 원본 그대로 쓴다
   (밝은 헤더에는 SVG 재작도본이 간다). 배경은 채도 게이트로 도려냈다 — `logo-cutout.png`. */
.ft__logo { display: block; width: 174px; height: auto; margin-bottom: 14px; }
/* 상호 텍스트를 지웠다 — 바로 위 로고 이미지가 같은 글자를 이미 담고 있어서 두 번 읽혔고,
   로고 조판("한국 아이비 금거래소")과 우리 표기(붙임)가 나란히 놓여 어긋나 보였다.
   이름은 `.ft__logo` 의 alt 가 제공한다 — 이미지가 죽으면 alt 가 그 자리에 나온다. */
.ft__addr { font-size: 15px; }
/* 영업시간·전화 — 주소보다 한 급 위로 세운다. 푸터에서 제일 자주 찾는 두 값이다.
   ⚠ 여기서 `--ink` 를 쓰면 안 된다. 푸터는 `background:#0F1318` 다크라 밝은 배경용 먹색을 얹으면
   대비가 1.0:1 로 죽는다(D13 이 잡았다). 푸터 기본 전경 #B9C0C9 보다 한 단 밝게 올려 위계를 준다. */
.ft__hours { margin-top: 8px; font-size: 15.5px; font-weight: 600; color: #E8EBEF; }
/* 전화 링크는 세로 패딩으로 손가락 영역을 44px 까지 밀어올린다. `display:inline` 을 유지하는 게 핵심 —
   inline-block 으로 바꾸면 세로 패딩이 라인박스를 밀어 푸터 줄간격이 벌어진다(실측 26.3px 유지).
   밑줄은 border 대신 text-decoration 이다. border 는 패딩 바깥에 그려져 글자에서 13px 떨어진다. */
.ft__tel, .info__tel {
  color: inherit; padding: 13px 4px;
  text-decoration: underline; text-underline-offset: 4px;
}
/* 밑줄 색은 두 곳의 배경이 정반대라 같이 못 쓴다 — 푸터는 다크, 매장 안내는 백지다. */
.ft__tel { text-decoration-color: rgba(255, 255, 255, 0.32); }
.info__tel { text-decoration-color: var(--line); }
.ft__tel:hover, .info__tel:hover { text-decoration-color: currentColor; }
.ft__legal { margin-top: 12px; font-size: 13.5px; color: #7E8895; max-width: 60ch; }
.ft__note { font-size: 14.5px; max-width: 56ch; }
.ft__note + .ft__note { margin-top: 7px; }
/* 관리페이지 — 원장 전용 문이다. 법정표기와 같은 급(#7E8895)으로 낮춰 손님 동선에서 비킨다.
   밑줄을 남기는 이유: 링크임을 색으로만 말하면 이 명도에서는 그냥 문장으로 읽힌다. */
.ft__admin { margin-top: 18px; font-size: 13.5px; }
.ft__adminlink { color: #7E8895; padding: 12px 4px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.22); }
.ft__adminlink:hover { color: #B9C0C9; text-decoration-color: currentColor; }

/* ---------- 공지 팝업 ----------
   `hidden` 이 기본이고 스크립트가 켠다. 팝업 안의 글은 전부 본문에도 있으므로 정보 손실이 0이다.
   z-index 는 통화바(50)보다 위 — 팝업이 열린 채로 통화바만 튀어나오면 층이 뒤집힌 것처럼 보인다. */
/* 폰 주소창이 접히면 100vh 는 실제 보이는 높이보다 커진다 — 팝업은 dvh 로 잰다.
   좌우/하단 인셋은 `viewport-fit=cover` 상태에서 노치·홈 인디케이터를 피한다. */
.pop {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 20px calc(20px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
}
.pop[hidden] { display: none; }
.pop__bd { position: absolute; inset: 0; background: rgba(10, 14, 19, .62); }
/* 상자는 안 움직이고 안의 내용만 굴러간다 — 닫는 길(`.pop__foot`)을 항상 보이는 자리에 고정하려면
   스크롤 주체가 상자가 아니라 그 안의 `.pop__scroll` 이어야 한다. */
.pop__box {
  position: relative; width: min(100%, 560px); max-height: min(86dvh, 760px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border-radius: var(--r); padding: 34px 34px 26px;
  /* 상단 3px 금색 띠를 뺐다 — 한쪽 변만 색으로 두껍게 긋는 side-tab 보더는 L1 §3 anti-slop 목록의
     첫 항목이다. 그림자만으로 층을 세운다(헤어라인 보더 + 넓은 그림자 동시 = ghost card 텔). */
  box-shadow: 0 18px 44px rgba(10, 14, 19, .30);
}
/* `min-height:0` 이 없으면 flex 자식은 내용 높이 밑으로 안 줄어들어 overflow 가 안 걸린다. */
.pop__scroll { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
/* 스크롤이 걱리면 내용이 밑으로 이어진다는 걸 선 한 줄로 말한다 — 그림자를 깔면 사진과 섮인다. */
.pop__foot { flex: 0 0 auto; padding-top: 16px; border-top: 1px solid var(--line); }
.pop__h { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 20px; }
.pop__list { list-style: none; display: grid; gap: 22px; }
.pop__i { border-top: 1px solid var(--line); padding-top: 16px; }
.pop__tag { display: block; font-size: 13.5px; font-weight: 700; color: var(--gold-ink); margin-bottom: 4px; }
.pop__t { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.4; }
.pop__p { margin-top: 8px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
/* 이벤트 사진. `aspect-ratio` 를 CSS 로 강제하지 않는다 — 원장이 올리는 건 가로·세로·정사각
   뭐든 올 수 있고, 고정 비율을 씩우면 그 중 하나는 반드시 잘린다. `<img width height>` 가
   자리를 러닝 전에 잡아 주므로 밀림은 어차피 없다. 높이만 막아 긴 사진이 팝업을 삼키지 않게 한다. */
.pop__img {
  display: block; width: 100%; height: auto; max-height: 46dvh; object-fit: contain;
  margin-top: 14px; border-radius: var(--r); background: var(--paper-2);
}
.pop__note { margin-top: 22px; font-size: 14px; color: var(--ink-3); padding-left: 14px; position: relative; }
.pop__note::before { content: "\203B"; position: absolute; left: 0; color: var(--gold); }
.pop__act { display: flex; gap: 10px; }
.pop__more { flex: 1; }
/* 닫기는 주행동이 아니다 — 금색 면을 주지 않고 선으로 둔다. 그래도 44px 과녁은 지킨다. */
.pop__x {
  flex: 1; min-height: 46px; font-size: 16px; font-weight: 600; font-family: inherit;
  color: var(--ink-2); background: none; border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer;
}
.pop__mute { min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  
  display: block; width: 100%; margin-top: 14px; padding: 6px 0; font-family: inherit;
  font-size: 14.5px; color: var(--ink-3); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 560px) {
  .pop__box { padding: 26px 20px 20px; }
  .pop__act { flex-direction: column; }
}

/* ---------- 하단 고정 통화바 (L1 §8 hard 룰) ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(15,19,24,.97); border-top: 1px solid rgba(255,255,255,.1);
  /* `viewport-fit=cover` 로 화면 끝까지 깔리므로 홈 인디케이터·노치 인셋만큼 안쪽으로 민다.
     이게 없으면 아이폰에서 전화/길찾기 버튼 하단 34px 이 인디케이터에 물린다. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.callbar__in { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; max-width: var(--wrap); margin-inline: auto; }
.callbar__btn { display: flex; align-items: center; justify-content: center; min-height: 58px; font-weight: 700; font-size: 16.5px; }
/* 다크 바 위의 주행동이다. 금색 그라디언트를 백지 면으로 바꿨다 — 어두운 바에서 가장 강한 대비이고
   "금색은 선에만"을 안 깨며, 무엇보다 버튼처럼 보이려고 명암을 흘리지 않는다. */
.callbar__btn--call { background: var(--paper); color: var(--ink); }
.callbar__btn--map { color: #F3F5F7; }
.callbar__label { letter-spacing: -0.02em; }

/* ================= Layer 2 모션 =================
 * 절대조건: 콘텐츠를 가리지 않는다. 정보 노드에 초기 opacity:0 / overflow:hidden 을 걸지 않는다.
 * 2차 사고(digit-roll)가 정확히 그것을 어겨 시세 8개를 소실시켰다.
 */

/* ① band-clip-open — 대면적 체감 축.
 *    사진에만 건다. 위에 얹힌 텍스트는 처음부터 불투명하다. */
@keyframes bandClipOpen {
  from { clip-path: inset(42% 0); transform: scale(1.12); }
  to   { clip-path: inset(0);     transform: scale(1); }
}
/* 히어로에는 clip-open 을 걸지 않는다. 이제 히어로 배경이 **영상**이라 움직임은 영상이 낸다 —
   그 위에 1.3초짜리 확대·클립까지 얹으면 첫 화면에서 두 동작이 겹쳐 화면이 흔들린다.
   `.hero__bg` 는 index 전용이고(about 은 `.band__bg` 다) 그 하나가 영상이므로 규칙째 지웠다. */
/* about 히어로는 첫 화면이라 로드 즉시가 맞다 — 스크롤 진입을 기다릴 위치가 아니다. */
.band--ph .band__bg { animation: bandClipOpen 1.3s cubic-bezier(.16,1,.3,1) both; }
/* 밴드는 스크롤 진입 시. 기본 상태를 정상(clip 0)으로 두어 애니메이션이 안 돌아도 화면이 멀쩡하다. */
.band__bg { clip-path: inset(0); }
[data-anim][data-seen] .band__bg { animation: bandClipOpen 1.15s cubic-bezier(.16,1,.3,1) both; }

/* ② sticky-rate-condense 는 v3 에서 채택하지 않았다.
 *    CSS 만 남기고 마크업을 방출하지 않으면 카탈로그 등재가 실체 없는 유령이 된다
 *    (2026-08-03 리뷰 지적). 규칙을 지우고 카탈로그에서도 내렸다.
 *    Layer2 는 band-clip-open · rule-draw 2종이다. L1 §7 "2–3 custom effects, >=1 novel" 중
 *    개수는 2종으로, novel 조항은 band-clip-open 이 충족한다(카탈로그 gallery·photo 패밀리에
 *    clip-reveal 계열 부재 — 등재 근거를 모션-카탈로그에 기록했다).
 *    3번째를 할당량 채우려고 넣지 않는다 — 이 건은 수치용 모션이 정보를 가려 두 번 반려됐다. */

/* ③ rule-draw — 섹션 헤딩의 세로 액센트 바가 진입 시 자란다.
 *    ::after 가 아니라 전용 장식 노드(.sh__bar)에만 건다. 텍스트는 건드리지 않는다. */
@keyframes ruleDraw { from { transform: scaleY(0.12); } to { transform: scaleY(1); } }
[data-seen] .sh__bar, .sh__bar { animation: ruleDraw .5s cubic-bezier(.16,1,.3,1) both; }

/* Layer 1 리빌 — 3중 안전망.
 * ① 정보 블록은 선택자 화이트리스트에서 제외한다(생성기 C-4 가 강제)
 * ② 스크립트가 없는 환경에서는 처음부터 보인다
 * ③ 1,200ms 타이머 폴백이 IO 와 무관하게 data-seen 을 찍는다 (reveal.js) */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); }
[data-reveal][data-seen] { opacity: 1; transform: none; }
@media (scripting: none) { [data-reveal] { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .band__bg { clip-path: inset(0); transform: none; }
  [data-anim][data-seen] .band__bg { animation: none; }
  .sh__bar { transform: scaleY(1); }
}

/* ---------- 히어로 영상이 섹션 하나를 통째로 쓰던 시절의 규칙(.hw)은 없다 ----------

   2026-08-11 오너가 두 번 지시했다. 먼저 스크럽을 폐기했고(엔진의 fixed 층을 z-index 0 에
   가두던 우회 CSS도 그때 같이 사라졌다), 이어서 **"영상 하나만 · 화면 꽉차게"** 로 정리됐다.
   그래서 영상은 이제 제 섹션을 갖지 않는다 — `.hero__bg` 로 히어로 배경에 들어간다.
   높이를 min(66vh,600px) 로 자르던 규칙이 오너가 본 "1/2 크기"의 정체였다. */
/* 자기 배경이 없는 섹션이 아래 것을 비쳐 보이지 않게 하는 바닥값. **특이도를 일부러 바닥에 둔다**
   (요소 선택자 2개) — .strip·.goods 처럼 자기 배경을 가진 섹션이 그대로 이겨야 한다.
   :not() 으로 예외를 열거하면 특이도가 id 급으로 뛰어 그 회색 밴드들을 흰색으로 덮는다
   (2026-08-04 D10 실측으로 잡혔다). */
main > section { background: var(--paper); }

/* 부제급 섹션 헤딩 — 본 헤딩(.sh) 옆에 나란히 서는 보조 블록용. */
.sh--sm { font-size: clamp(19px, 2.1vw, 23px); margin-bottom: 18px; }
.sh--sm .sh__bar { height: 20px; }

/* ---------- PC 골격 (>=1024) ----------
   이 시트에는 2026-08-04 까지 min-width 쿼리가 **한 개도 없었다.** 전부 max-width 로 좁히기만 하는
   모바일 우선 시트였고 데스크톱은 "기본 규칙이 늘어난 결과"였다 — 오너 지적("PC 관점도 신경 써라")의
   기계적 실체가 그것이다. 1440·1920 실렌더에서 잡힌 빈 면 5곳을 여기서 닫는다. */
@media (min-width: 1024px) {
  /* ① 히어로 높이는 이제 `.hero--full`(100svh)이 정한다 — 여기서 min(74vh,680px) 로 잡던 값은
        오너가 "1/2 크기"라고 지적한 그 절반의 한쪽이었다. 남은 건 세로 여백의 하한뿐이다. */

  /* ② 신뢰 스트립 4항목이 좌측에 뭉치고 우측 6할이 비었다 — 지면에 고르게 편다.
        repeat(4) 로 박지 않는 이유: 항목 수는 데이터가 정한다. */
  .strip__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 26px; align-items: center; }

  /* ③ 시세 = 표 | 공지 2열. 표 폭이 1320 -> 약 790 으로 줄어 라벨과 첫 숫자 사이 공백이 절반이 된다.
        빈 축을 무엇으로 채울지는 도너가 답을 줬다(케이골드 PC 는 같은 자리가 리스트 | 위젯 2열). */
  /* align-items: start 를 쓰면 안 된다 — aside 의 그리드 영역이 제 콘텐츠 높이로 줄어들어
     sticky 가 움직일 여지를 잃는다(실측: 붙박이처럼 같이 흘러내렸다). 기본 stretch 로 둔다. */
  .rate__grid { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 58px; }
  /* 공지 3건은 시세표 8행보다 훨씬 짧다 — 붙박이로 두면 표의 아래 2/3 옆이 통째로 빈다.
     헤더(76px)를 피해 92px 에 물린다. */
  /* align-self: start 가 핵심이다. 기본 stretch 면 aside 가 행 높이(1017px)만큼 늘어나
     sticky 가 움직일 여지가 0 이 된다(실측: asideH 1017 == gridH 1017, 그대로 흘러내렸다).
     start 로 콘텐츠 높이까지 줄이면 그리드 영역 안에서 sticky 가 이동한다. */
  .rate__aside { margin-top: 0; align-self: start; position: sticky; top: 92px; }
  /* auto 레이아웃은 가장 긴 라벨에 맞춰 1열을 부풀리고 값 두 개를 오른쪽 끝으로 몰아낸다. */
  .rate__tbl { table-layout: fixed; }
  .rate__tbl thead th:first-child { width: 44%; }

  /* ④ 릴 5칸이 200px 고정폭이라 지면 우측 264px 가 남았다 — 칸을 지면에 맞춰 늘린다. */
  .reels__row { grid-auto-columns: minmax(0, 1fr); gap: 20px; overflow-x: visible; }

  /* ⑤ 매장 안내: 글 열은 40ch 에서 끝나는데 열폭이 절반(640)이라 가운데가 200px 넘게 비었다.
        폭을 사진 쪽으로 옮기고 사진을 3:2 -> 4:3 으로 세워 두 열의 키를 맞춘다. */
  .store__in { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: 64px; }
  .store__shot img { aspect-ratio: 4 / 3; }

  .ft__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 60px; }

  /* ⑥ 취급 품목 5칸이 1320 지면에서 한 칸 264px 인데 그림은 88px 뿐이라, 원 다섯 개가
     흰 면에 떠 있는 것처럼 성겼다. 그림을 키우고 칸 사이에 헤어라인을 세워 "행"으로 묶는다
     (도너 케이골드의 품목 행도 회색 밴드 안에 구획된 행이다). */
  .goods__svg { width: 54px; height: 54px; }
  .goods__nm { font-size: 17px; }
  .goods__row { gap: 0; }
}

/* 1600 이상에서 지면을 한 칸 넓힌다. 무한정 늘리지는 않는다 — 줄길이는 블록별 max-width 가 잡지만
   표와 사진은 지면을 그대로 따라가므로, 계속 늘리면 시세표 한 행이 화면을 가로지른다. */
@media (min-width: 1600px) { :root { --wrap: 1440px; } }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  /* 밴드 2열은 한 줄로 접는다 — 사진이 먼저(마크업 순서), 카피가 그 아래.
     `grid-column: 1` 이 없으면 히어로 시절의 `2` 가 남아 1열 그리드에 빈 칸을 하나 만든다. */
  .band__in--split { grid-template-columns: 1fr; gap: 24px; }
  .band__shot img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .hero__side { grid-column: 1; }
  /* 모바일 클립은 원본에서 세로로 잘라낸 별도 인코딩(608:1080 → 720×1280)이라
     가로판을 억지로 자른 그림이 아니다. 위아래 어느 쪽도 버릴 게 없어 가운데로 둔다. */
  video.hero__bg { object-position: center; }
  .store__in, .ft__in { grid-template-columns: 1fr; gap: 26px; }
  /* 3열로 접히면 세로선이 격자를 어긋나게 자른다. 도너도 768 미만에서는 선을 끈다. */
  .goods__row { grid-template-columns: repeat(3, 1fr); gap: 26px 12px; }
  .goods__i + .goods__i { border-left: 0; }
  .flow__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__i:nth-child(odd) { border-left: 0; padding-left: 0; }
  .flow__i:nth-child(odd)::before { left: 0; }
  /* 섹션 세로 패딩이 데스크톱 값(74~90px) 그대로 모바일에 내려와 있었다. 섹션 여섯이면
     빈 면만 화면 하나를 넘는다 — 데스크톱은 가로가 넓어 그 여백이 리듬이 되지만
     세로만 있는 화면에서는 "다음 섹션까지 계속 스크롤"이 된다. 리듬을 화면 비율에 맞춘다. */
  .rate, .goods, .reels, .flow, .store { padding-top: 58px; padding-bottom: 62px; }
  .sh { margin-bottom: 22px; }
  /* 레일은 지면 거터를 넘어 **화면 오른쪽 끝까지 흐른다.** 칸이 거터에서 딱 끊기면
     "여기가 끝"으로 읽히지만, 다음 칸이 화면 가장자리에 걸쳐 보이면(peek) 그 자체가
     "옆으로 밀 수 있다"는 유일한 신호가 된다 — 모바일엔 스크롤바가 안 보이기 때문이다. */
  .reels__row {
    margin-right: calc(var(--gut) * -1); padding-right: var(--gut);
    scroll-padding-left: 0; scroll-snap-type: x mandatory;
  }
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  :root { --hd-h: 62px; }
  /* 영문 라인은 국문 상호보다 넓다 — 390 에서 이게 남은 폭을 먹어 메뉴 "매장 소개"가 2줄로 접혔다.
     좁은 화면에서는 마크 + 국문 상호만 남긴다(브랜드 식별에 필요한 최소 단위). */
  .hd__en { display: none; }
  .hd__nav { gap: 16px; font-size: 15px; white-space: nowrap; }
  .hd__mk { width: 29px; height: 32px; }
  .hd__brand { gap: 8px; }
  .hd__name { font-size: 16.5px; }
  .goods__row { grid-template-columns: repeat(3, 1fr); }
  .goods__svg { width: 38px; height: 38px; }
  .rate__h, .rate__c { padding: 12px 7px; }
  .rate__val { font-size: 19px; }
  .rate__nm { font-size: 15.5px; }
  .rate__en { font-size: 12.5px; }
  .rate__h { font-size: 13px; }
  .rate__delta { font-size: 13px; }
  .hero__panel { padding: 16px 15px 14px; }
  /* 346px(390 - 거터) 안에서 2칸 + 32px peek: 150*2 + 14 = 314. 화면이 커지면 같이 큰다. */
  .rate, .goods, .reels, .flow, .store { padding-top: 46px; padding-bottom: 50px; }
  .ft { padding: 40px 0 46px; }
  .reels__row { grid-auto-columns: clamp(132px, 43vw, 176px); gap: 12px; }
  .reels__t { font-size: 14.5px; min-height: 42px; }
}

/* 헤더 전용 — 320~430 구간. 실측(tools 로 .hd__brand↔.hd__nav 간격을 잰 값)에서 320·360 의
   간격이 **0px** 였다: 상호와 메뉴가 맞붙어 한 덩어리로 읽혔다. 여기서만 더 조인다.
   글자를 전반적으로 키운 것(오너 지시)과 충돌하지 않는다 — 헤더는 본문이 아니라 라벨이다. */
@media (max-width: 430px) {
  .hd__mk { width: 26px; height: 29px; }
  .hd__name { font-size: 14.5px; }
  .hd__nav { gap: 13px; font-size: 14px; }
}

/* 320(구형 SE 급)까지 간격을 확보한다 — 위 430 구간만으로는 320 에서 여전히 0px 였다. */
@media (max-width: 360px) {
  /* 320 에서 상호 우측과 메뉴 좌측이 정확히 0px 로 맞닿았다(문서 폭 320, 넘침 0 — 딱 채운 것).
     글자를 더 줄이는 대신 **헤더만** 거터를 좁혀 간격을 만든다. 본문 지면은 그대로 44px 다. */
  .hd .wrap { width: min(100% - 22px, var(--wrap)); }
  .hd__mk { width: 23px; height: 26px; }
  .hd__brand { gap: 6px; }
  .hd__name { font-size: 13.5px; }
  .hd__nav { gap: 11px; font-size: 13.5px; }
}

/* 가로로 누운 폰 — **브레이크포인트가 폭만 보면 여기서 깨진다.**
   844x390 은 폭이 900 이하라 모바일 규칙을 받는데, 그 규칙은 세로 화면을 전제로 여백을 잡는다.
   높이가 390 뿐인 화면에서 그 여백이 화면을 통째로 먹는다. 높이로 한 번 더 가른다.
   히어로는 이제 영상 한 장이라 높이에 걸릴 것이 없다 — 조이는 대상은 그 아래 지면들이다. */
@media (max-width: 900px) and (max-height: 520px) {
  .band--ph .band__in { padding: 46px 0 50px; }
  video.hero__bg { object-position: center; }
  .rate, .goods, .reels, .flow, .store { padding-top: 40px; padding-bottom: 44px; }
  .sh { margin-bottom: 18px; }
  /* 통화바가 59px 를 먹는 상태에서 팝업이 뷰포트 대부분을 덮으면 빠져나갈 길이 안 보인다. */
  .pop__box { max-height: calc(100dvh - 54px); }
}

/* 터치 타겟 — **폭이 아니라 입력 방식으로 가른다.**
   처음엔 `max-width: 560px` 안에 뒀는데, 그러면 태블릿 세로(768)와 폰 가로(844)가 빠진다.
   둘 다 손가락으로 누르는 화면인데 실측에서 6종이 44px 미만으로 남아 있었다.
   손가락 굵기는 뷰포트 폭과 무관하다 — `pointer: coarse` 가 정확한 조건이다.
   실측(390) 미달분: 네비 링크 38px · "전체 시세 보기" 25px · "공지사항 전체 보기" 29px ·
   브랜드 25px · "오늘 하루 열지 않기" 33px. 글자는 그대로 두고 **누를 상자만** 키운다.
   조건을 폭과 **OR** 로 묶은 이유 둘: ① `pointer` 미지원 브라우저에서도 폭으로 걸린다
   ② CDP 가 `pointer` 에뮬레이션을 지원하지 않아 pointer 단독이면 **실측으로 검증할 방법이 없다** —
   검증 못 하는 규칙은 있는지 없는지 알 수 없으므로 잴 수 있는 축을 하나 붙였다. */
@media (pointer: coarse), (max-width: 900px) {
  /* 세로 49px 은 이미 되는데 폭이 안 됐다 — "시세" 는 두 글자라 24~26px 이었다(실측 320~430).
     글자 크기는 그대로 두고 과녁만 44px 로 세운다. 나머지 두 링크는 이미 47~55px 이라
     min-width 가 레이아웃을 건드리지 않는다(브랜드↔메뉴 여유 43px @320). */
  .hd__nav a { padding: 12px 0; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .hd__brand { min-height: 44px; align-items: center; }
  .hero__panel-more, .rate__aside-more, .nlist__a, .pop__mute, .ft__adminlink {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .reels__a { -webkit-tap-highlight-color: rgba(153,128,77,.18); }
}