/* 실검 — 2안(TOP3형) 네이버 톤. 토큰은 목업(mockups/gen2.mjs)과 같다.
   간격 4·8·12·16·24·32·48 / 글자 12·13·15·17·20·28 + 디스플레이(큰 숫자·헤드라인)
   화면: ~767 모바일 · 768~1023 태블릿(위를 세로로 쌓음) · 1024~ PC(위 2단) · 1280~ 하단 표 2단 */

:root {
  color-scheme: light dark;   /* 스크롤바·기본 위젯도 OS 테마를 따르게 */
  --bg: #f5f6f7;
  --surf: #fff;
  --ink: #222;
  --mut: #6b6b6d;
  --line: #e3e5e8;
  --acc: #00a84f;      /* 큰 글자(로고 자리·큰 숫자) — 흰 바탕 3:1 이상 */
  --acc-s: #007f39;    /* 작은 글자·배지 — 흰 바탕 4.5:1 이상 */
  --up: #d63a2f;
  --dn: #2e6bd6;
  --up-d: #ff6b5e;     /* 어두운 전광판 위 */
  --dn-d: #6fb0ff;
  --tile: #1d2024;
  --tile-rank: #03c75a;
  --tile-ink: #f4f4f2;  /* 전광판·강조 타일 안 글자. 그 판은 라이트에서도 어두워 다크에서 안 바뀐다 */
  --tile-mut: #9a9ca1;  /* 같은 판의 보조 글자·변동없음 */
  --onfill: #fff;       /* 색을 채운 바탕 위에 얹는 글자 */
  --acc-bg: #e6f4ec;    /* 분야 태그(.cat) 연녹 바탕 */
  --r-s: 4px;          /* 배지·전광판 칸 */
  --r-m: 6px;          /* 전광판 판 */
  --r-l: 8px;          /* 카드 */
  --mono: "Space Mono", ui-monospace, Consolas, monospace;
  --gutter: 48px;
  --pad: 32px;

  /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리킨다(G:\workspace\DESIGN.md '토큰').
     실측(2026-10-16, WCAG): 라이트 --ink 흰 면 15.91 · --mut 흰 면 5.32(--bg 위 4.91) ·
     흰 글자 on --acc-s #007f39 5.13. 다크 --ink on --surf 13.88 · --mut 6.69 · #121417 글자 on --acc-s #3ad57f 9.67.
     주 버튼은 --acc(#00a84f, 흰 글자 3:1 미만)가 아니라 작은 글자용 --acc-s 를 쓴다. */
  --fb-bg: var(--bg);
  --fb-surface: var(--surf);
  --fb-ink: var(--ink);
  --fb-muted: var(--mut);
  --fb-line: var(--line);
  --fb-accent: var(--acc-s);
  --fb-on-accent: var(--onfill);
  --fb-display: inherit;
  --fb-max: 1280px;  /* .wrap 과 같은 폭 */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
/* 키보드 포커스 — 컴포넌트마다 hover 색만 바뀌던 것을 전역 링으로 바꾼다(a.kw 선례와 같은 색).
   --acc 는 흰 바탕 3:1 이상이고 어두운 전광판 위에서도 쓰이는 값이다. */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
img { max-width: 100%; }
p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }

/* 상단 */
.notice { padding: 8px 16px; text-align: center; font-size: 12px; color: var(--mut); border-bottom: 1px solid var(--line); }
/* 머리 틀은 fb.css 의 .fb-nav(떠 있는 유리 막대). 링크 칸 없이 로고 + 갱신 시각·새로고침만 얹는다. */
.mark { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--acc); }  /* 큰 글자라 3:1 기준(--acc 주석) */
.fb-foot .mark { color: var(--acc); }
.fb-nav .refresh { border-radius: 999px; }  /* 알약 막대 안이라 모서리를 맞춘다 */
.top__meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--up); }
.live--dark { color: var(--up-d); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.tick { width: 120px; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
/* 수집 주기(5분)만큼 차오른다. 채움은 --line 트랙 위라 --acc(2.48)로는 3:1 이 안 나온다 → --acc-s(4.06) */
.tick > span { display: block; height: 100%; background: var(--acc-s); animation: tick 300s linear infinite; }
/* 수동 새로고침. 자동(meta refresh 300s)을 기다리지 않을 때 */
/* 탭 대상 44px — 폰에서는 글자가 빠져 아이콘만 남으므로 가로도 같이 잡는다(계산 31px 이었다). */
.refresh { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; min-width: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 12px; font-weight: 700; color: var(--ink); }
.refresh:hover, .refresh:focus-visible { border-color: var(--acc); color: var(--acc-s); }
.refresh svg { display: block; }
.empty { padding: 48px 0; text-align: center; color: var(--mut); }

/* 카드 */
.page { padding-block: 32px 48px; display: flex; flex-direction: column; gap: 32px; }
.card { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--pad); display: flex; flex-direction: column; gap: 24px; }
.sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 3px double var(--ink); }
.sec__t { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.sec__r { font-size: 13px; color: var(--mut); white-space: nowrap; }

/* 분야 필터(?c=)와 분야 태그 */
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
/* 분야 필터는 탭이다 — 계산 높이 33px 이라 44px 을 따로 준다. */
.cats a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surf); }
.cats a:hover, .cats a:focus-visible { border-color: var(--acc); color: var(--acc-s); }
.cats a[aria-current] { background: var(--acc-s); border-color: var(--acc-s); color: var(--onfill); }
.cat { flex: none; display: inline-block; font-size: 12px; font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: var(--r-s); color: var(--acc-s); background: var(--acc-bg); white-space: nowrap; }
a.cat:hover, a.cat:focus-visible { text-decoration: underline; }

/* C: 1~3위 */
.top-grid { display: grid; gap: 24px; }
.hero { display: flex; flex-direction: column; gap: 24px; }
.hero__one { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.hero__label { font-size: 13px; font-weight: 700; color: var(--acc-s); }
.hero__num { font-size: 120px; font-weight: 800; line-height: .9; letter-spacing: -.04em; color: var(--acc); }
.hero__kw { font-size: 52px; font-weight: 800; line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mut); }
.hero__row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.hero__rn { flex: none; font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--acc); }
.hero__rb { display: flex; flex-direction: column; gap: 4px; }
.hero__rkw { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }

/* B: 전광판 */
.board { background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), var(--tile); border-radius: var(--r-m); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.board__head { display: flex; align-items: center; justify-content: space-between; }
.board__label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--tile-mut); }
.board__list { display: grid; gap: 8px; }
.board__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 96px; gap: 8px; perspective: 700px; }
.flap {
  position: relative; height: 48px; display: flex; align-items: center; border-radius: var(--r-s);
  background: linear-gradient(rgba(255, 255, 255, .07) 0 50%, rgba(0, 0, 0, .14) 50% 100%), var(--tile);
}
/* 가운데 틈은 글자 뒤로 — 앞에 두면 글자가 반으로 갈라져 보인다 */
.flap::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .45); }
.flap > * { position: relative; z-index: 1; }
.flap--rank { justify-content: center; font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--tile-rank); }
.flap--kw { padding: 0 24px; font-size: 20px; font-weight: 700; color: var(--tile-ink); white-space: nowrap; }
/* 탭 대상 44px. 48px 칸 안에서 겉모습이 그대로이려면 display 를 바꿀 수 없다 —
   inline-flex/grid 로 만들면 말줄임(text-overflow)이 죽는다. line-height + 세로 패딩으로 잡는다. */
.flap--kw > a { overflow: hidden; text-overflow: ellipsis; line-height: 28px; padding-block: 8px; }
/* 키워드 → 네이버 검색 (새 창). 모양은 그대로 두고 누를 수 있다는 것만 알린다 */
a.kw { cursor: pointer; }
a.kw:hover, a.kw:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
a.kw:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.flap--chg { justify-content: center; }
.is-flip { animation: flip 7s ease-in-out infinite; }

/* 변동 표시 */
.chg { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chg svg { display: block; }
.chg--up { color: var(--up); }
.chg--down { color: var(--dn); }
.chg--same { color: var(--mut); }   /* 옛 #b3b6bb 는 흰 바탕에서 2.03 이었다 */
.board .chg { font-family: var(--mono); font-size: 15px; }
.board .chg--up { color: var(--up-d); }
.board .chg--down { color: var(--dn-d); }
.board .chg--same { color: var(--tile-mut); }   /* 옛 #6b6e73 은 전광판 칸 위에서 2.59 였다 */
.new { font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1; color: var(--onfill); background: var(--acc-s); border-radius: var(--r-s); padding: 4px 8px; }

/* D: 검색 추이 — 768~1023 은 좁은 한 표 */
.trend { display: grid; }
/* height 40 → 44: 줄 전체가 탭 대상이라 44px 을 채운다(UIUX.md Fitts).
   전광판(.flap 48px)·비율 목록(.ratio__row)은 각자 다른 섹션이라 이 값과 무관하다 — 확인했다. */
.trow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 64px 120px 64px; gap: 12px; align-items: center; height: 44px; border-bottom: 1px solid var(--line); position: relative; }
.trow--head { font-size: 12px; font-weight: 700; color: var(--mut); }
.trend__half + .trend__half .trow--head { display: none; }
.trend__half:last-child .trow:last-child { border-bottom: 0; }
.trow__rank { font-variant-numeric: tabular-nums; }
.trow__rank.is-top { font-weight: 700; color: var(--acc-s); }
.trow__kw { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.trow__kw a { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 줄 전체가 링크다(UIUX.md Fitts). HTML 을 바꾸지 않고 키워드 앵커를 줄 위에 겹쳐 펼친다 —
   앵커 박스를 키우지 않으므로 height 고정 칸이 넘치지 않고 말줄임(text-overflow)도 살아 있다.
   덮이는 변동·추이·첫 진입은 링크가 아니다. 줄 안에 링크가 생기면 position: relative 로 위에 올린다. */
.trow__kw a::after { content: ""; position: absolute; inset: 0; }
.trow__line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trow__line a { min-width: 0; }
.trow__kw small { display: none; font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.trow__chg { justify-self: start; }
.trow__spark { width: 100%; height: 24px; display: block; }
.spark { fill: none; stroke: var(--up); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark--down { stroke: var(--dn); }
.spark--same { stroke: var(--mut); }   /* 옛 #a3a9b2 는 2.37 로 그래픽 3:1 도 미달이었다 */
.trow__first { text-align: right; font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; }
.trow--head .trow__first { font-size: 12px; }
/* 분야 필터(?c=) 아래 하루 네이버 검색 비율 — 목록 1위 = 100 */
.ratio__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(64px, 35%) 32px; gap: 12px; align-items: center; min-height: 40px; border-bottom: 1px solid var(--line); }
.ratio__row:last-child { border-bottom: 0; }
/* 줄 링크 탭 대상 44px — 말줄임을 살리려고 display 는 그대로 두고 세로 패딩만 준다. */
.ratio__row a { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block: 12px; }
.ratio__v { text-align: right; font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; }

/* 키워드 상세 — A안 지표형 (mockups/detail.html) */
.crumb { font-size: 13px; color: var(--mut); display: flex; gap: 8px; align-items: center; }
.crumb a:hover { color: var(--acc-s); text-decoration: underline; }
.note { font-size: 12px; color: var(--mut); }
.a-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.a-hero__rank { font-size: 13px; font-weight: 700; color: var(--acc-s); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.a-hero__kw { margin: 8px 0 0; font-size: 52px; font-weight: 800; line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.a-hero__meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--mut); }
/* 네이버 초록(#03c75a)은 브랜드색이라 그대로 두고 흰 글자만 뒤집었다: #fff 2.25 → --tile 7.26 */
.naver { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-m); background: var(--tile-rank); color: var(--tile); font-size: 15px; font-weight: 800; white-space: nowrap; }
.naver:hover, .naver:focus-visible { background: var(--acc-s); color: var(--onfill); }
.naver svg { display: block; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tile__l { font-size: 12px; font-weight: 700; color: var(--mut); letter-spacing: .04em; }
/* 큰 숫자는 화면당 하나다(UIUX.md Von Restorff — 6칸을 같은 크기로 늘어놓으면 0칸과 같다).
   주인공은 "현재 순위"(.tile--mine) — 사람이 이 페이지에 온 이유이자 옆의 네이버 검색 버튼으로
   손이 가는 값이다. 최고 순위·체류·등장일·조회는 그 하나를 설명하는 누계라 크기만 내렸다(값은 그대로). */
.tile__v { font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tile__v small { font-size: 13px; font-weight: 700; color: var(--mut); letter-spacing: 0; margin-left: 2px; }
.tile__s { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.tile--mine { background: var(--tile); border-color: var(--tile); color: var(--tile-ink); }
.tile--mine .tile__l, .tile--mine .tile__s { color: var(--tile-mut); }
.tile--mine .tile__v { color: var(--tile-rank); font-family: var(--mono); font-size: 36px; }
.a-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.chart { width: 100%; height: auto; display: block; }
.chart text { font-size: 11px; fill: var(--mut); font-family: var(--mono); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--up); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: rgba(214, 58, 47, .08); }
.chart .end { fill: var(--up); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--mut); }
.news { display: flex; flex-direction: column; }
.news li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); position: relative; }
.news li:first-child { border-top: 0; padding-top: 0; }
.news a { font-weight: 700; }
.news a:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--acc-s); }
/* 줄 전체가 링크다(UIUX.md Fitts). 기사 제목 앵커를 줄 위에 겹쳐 펼친다 —
   앵커 박스를 키우지 않으므로 baseline 정렬이 그대로다. 덮이는 .src 는 링크가 아니다. */
.news a::after { content: ""; position: absolute; inset: 0; }
.src { font-size: 12px; color: var(--mut); white-space: nowrap; }
.hist { display: grid; grid-template-columns: minmax(0, 1fr); }
.hrow { display: grid; grid-template-columns: 64px 48px 64px minmax(0, 1fr); gap: 12px; align-items: center; height: 36px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; font-size: 13px; }
.hrow--head { font-size: 12px; font-weight: 700; color: var(--mut); }
.hrow__t { font-family: var(--mono); color: var(--mut); }
.hrow__r { font-weight: 800; font-size: 15px; }
.hrow__r.is-top { color: var(--acc-s); }
.hbar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.hbar > span { display: block; height: 100%; background: var(--acc-s); }   /* .tick 과 같은 이유 */
.ai { font-size: 12px; font-weight: 700; color: var(--acc-s); letter-spacing: .04em; white-space: nowrap; }
.summary { font-size: 15px; line-height: 1.7; max-width: 62ch; }
.sec--sub { border-bottom-width: 1px; border-bottom-style: solid; margin-top: 8px; }
.sec--sub .sec__t { font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { font-size: 13px; font-weight: 700; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.chips a:hover, .chips a:focus-visible { border-color: var(--acc); color: var(--acc-s); }
.chips small { font-size: 12px; color: var(--mut); font-weight: 400; }

/* 소개·방침·약관 */
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 16px; line-height: 1.7; }
.prose h2 { margin: 16px 0 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.prose ul { padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 6px; }
.prose a { color: var(--acc-s); text-decoration: underline; text-underline-offset: 3px; }
/* 꼬리 틀은 fb.css 의 .fb-foot */
.fb-hero { padding-top: 24px; padding-bottom: 16px; }  /* 히어로 아래 바로 순위가 오도록 공용 값보다 조금 붙인다 */

/* PC: 위 2단 + 넓은 한 표 */
@media (min-width: 1024px) {
  .top-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 48px; }
  .trow { grid-template-columns: 64px minmax(0, 1fr) 96px 240px 96px; gap: 16px; }
  .a-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
/* 넓은 PC: 하단 표 2단 */
@media (min-width: 1280px) {
  .trend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
  .trow { grid-template-columns: 40px minmax(0, 1fr) 64px 120px 48px; gap: 12px; }
  .trend__half + .trend__half .trow--head { display: grid; }
  .trend__half .trow:last-child { border-bottom: 0; }
}
/* 모바일: 전광판을 1~3위 아래로, 하단은 한 줄 목록(첫 진입은 키워드 아래) */
@media (max-width: 767px) {
  :root { --gutter: 16px; --pad: 16px; }
  .top__date, .tick, .wide-only, .refresh__t { display: none; }
  .refresh { padding: 6px; }
  .page { padding-block: 16px 32px; gap: 16px; }
  .hero__num { font-size: 88px; }
  .hero__kw { font-size: 36px; }
  .hero__rn { font-size: 36px; }
  .hero__rkw { font-size: 20px; }
  .board { padding: 12px; }
  .board__list { gap: 4px; }
  .board__row { grid-template-columns: 40px minmax(0, 1fr) 56px; gap: 4px; }
  .flap--rank, .flap--kw { font-size: 17px; }
  .flap--kw { padding: 0 12px; }
  .trow { grid-template-columns: 28px minmax(0, 1fr) 64px 48px; gap: 8px; height: auto; min-height: 52px; }
  .trow--head, .trow__first { display: none; }
  .trow__kw small { display: block; }
  .trow > * { grid-row: 1; }
  .trow__spark { grid-column: 3; }
  .trow__chg { grid-column: 4; justify-self: end; }
  .a-hero { grid-template-columns: minmax(0, 1fr); }
  .a-hero__kw { font-size: 36px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { padding: 12px; }
  .tile__v { font-size: 22px; }
  .hrow { grid-template-columns: 56px 40px 56px minmax(0, 1fr); gap: 8px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@keyframes pulse { 50% { opacity: .25; } }
@keyframes tick { from { width: 0; } to { width: 100%; } }
@keyframes flip { 0%, 88% { transform: none; } 92% { transform: rotateX(90deg); } 96%, 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dot, .tick > span, .is-flip { animation: none; }
}

/* 다크 — OS 설정만 따른다(수동 토글은 쿠키·JS 가 필요해 넣지 않았다).
   초록 브랜드는 색상(H 147~148°) 고정, 채도만 내리고 명도를 올려 대비를 맞췄다.
   전광판(.board .flap .tile--mine)은 라이트에서도 어두운 판이라 글자 토큰은 그대로 두고 판만 더 낮춘다. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121417; --surf: #1b1e22; --ink: #e8eaed; --mut: #a0a4ab; --line: #2c3035;
    --acc: #0ac25e; --acc-s: #3ad57f; --acc-bg: #14301f;
    --up: #ff6b5e; --dn: #6fb0ff;   /* 전광판용으로 이미 있던 --up-d/--dn-d 와 같은 값 */
    --tile: #0b0d0f;                /* 카드(--surf)보다 더 낮춰 전광판이 계속 '판'으로 읽히게 */
    --onfill: #121417;              /* 라이트와 정반대 — 밝아진 초록 위에는 어두운 글자가 읽힌다 */
  }
  .chart .area { fill: rgba(255, 107, 94, .1); }   /* 채움도 밝아진 --up 을 따라간다 */
}

/* 쿠팡 파트너스 칸(ranking/coupang.py) — 이 사이트 토큰만 쓴다. 새 색은 사진 바탕 #fff 하나. */
.cpn { margin: 24px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surf); }
.page > .cpn { margin: 0; }   /* .page 의 gap 이 칸 사이를 띄운다 */
.cpn__h { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.cpn__d { margin: 4px 0 8px; font-size: 12px; color: var(--mut); }
.cpn__l { list-style: none; margin: 0; padding: 0; }
.cpn__l li + li { border-top: 1px solid var(--line); }
.cpn__i { position: relative; display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 12px 0; }
.cpn__img { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; }
.cpn__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpn__a { color: var(--ink); font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.cpn__a::after { content: ""; position: absolute; inset: 0; }
.cpn__a:focus-visible { outline: none; }
.cpn__a:focus-visible::after { outline: 2px solid var(--acc-s); outline-offset: 2px; border-radius: 8px; }
.cpn__i:hover .cpn__a { text-decoration: underline; }
.cpn__n { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.5; }
.cpn__go { color: var(--acc-s); font-size: 14px; font-weight: 700; }
.cpn--top { padding: 8px 12px; }
.cpn--top .cpn__h { font-size: 14px; }
.cpn--top .cpn__i { padding: 4px 0; }
.cpn--top .cpn__img { width: 48px; height: 48px; }
.cpn--top .cpn__n { display: none; }