/* ══════════════════════════════════════════════════════════════
   플레이스랭크 (PlaceRank) — 디자인 시스템 v2 (2026-07-09 전면 개편)
   오너 지시: 밝은 톤 확정(다크모드 자동대응 제거), 톤앤매너 확립,
   마우스오버 마이크로인터랙션, UI/UX 리서치 반영.
   근거: knowledge/decisions/2026-07-09-place-rank-redesign-* (본 작업 기록 참조)

   톤앤매너 요약
   - 팔레트: 브랜드 남색 #0C1F3F(구조·헤딩·히어로/푸터 고정배경) +
     포인트 블루 #3D6BB3(CTA·링크·포커스, #4A7FC1 대비보정판, AA 4.5:1↑) +
     시그니처 골드 #C8860A(1~3위 순위배지 전용 — 기능적 신호, 장식 아님).
     허브(amazingstore-hub)의 골드 계열과 동일 값을 재사용해 계열 일관성 유지.
   - 배경은 화이트/오프화이트 고정. prefers-color-scheme 다크 자동대응 없음.
   - 히어로/푸터의 남색 배경은 "다크모드"가 아니라 브랜드 컬러 블록(라이트 페이지 내 고정 섹션)임.
   - 서체: Pretendard Variable self-host(로컬 woff2, 외부 CDN 0건 — CSP default-src 'self' 준수),
     wght 45–920 가변축. 라운드·그림자·간격은 CSS 변수 토큰화.
   - 인터랙션: 버튼 hover(translateY+shadow)·포커스 링·로딩 스피너·결과 등장 애니메이션,
     전부 200~380ms, prefers-reduced-motion 시 즉시 완료.
   - 시그니처 요소: 조회 결과의 원형 순위 배지(rank-badge) — "몇 위인가"가 이 제품의 핵심 산출물이므로
     결과를 숫자 배지로 극대화해 보여준다(장식이 아니라 정보 위계). 1~3위는 결과 카드 전체가
     골드 톤으로 물드는 :has() 강화(2026-07-09 폰트 연결+비주얼 업그레이드에서 추가).
   ══════════════════════════════════════════════════════════════ */

/* ─── 0. 웹폰트 — self-host, 외부 요청 없음 ─────────────────────── */
@font-face {
  font-family: 'Pretendard Variable';
  src: local('Pretendard Variable'),
       url("/static/fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* ─── 1. 토큰 (단일 라이트 팔레트) ───────────────────────────────── */
:root {
  --color-brand:          #0C1F3F;  /* 남색 — 헤딩/구조/히어로·푸터 고정 배경 */
  --color-brand-hover:    #0A1830;
  --color-brand-subtle:   #E8EEF6;

  --color-point:          #3D6BB3;  /* 포인트 블루(대비보정) — CTA/링크/포커스, 흰 배경 위 텍스트 AA 5.9:1 */
  --color-point-bright:   #4A7FC1;  /* 브랜드 원색 블루 — 큰 타이포/비텍스트 강조 전용(로고 계열과 통일) */
  --color-point-hover:    #2F5590;
  --color-point-subtle:   #EAF1FB;

  --color-gold:           #C8860A; /* 1~3위 순위배지 전용 시그니처 컬러(허브 accent와 동일 값) */
  --color-gold-subtle:    #FBF3E2;

  --color-bg:             #F6F7F9;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FBFCFD;

  --color-text-primary:   #14181F;
  --color-text-secondary: #4B5563;
  --color-text-tertiary:  #8A93A3;
  --color-text-inverse:   #FFFFFF;

  --color-border:         #E4E7EC;
  --color-border-strong:  #CBD2DC;

  --color-success:        #157A3D;
  --color-success-subtle: #EDFBF2;
  --color-danger:         #B91C1C;
  --color-danger-subtle:  #FEF2F2;
  --color-warn:           #A15C07;
  --color-warn-subtle:    #FFF7E6;

  --badge-beta:           #1D4ED8;
  --badge-beta-bg:        #DBEAFE;

  /* 서체 — self-host Pretendard Variable(0. 섹션 @font-face) 1순위, 폰트 로드 실패 시에만 시스템 스택 */
  --font-base: 'Pretendard Variable', 'Pretendard',
               -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Noto Sans KR', system-ui, sans-serif;
  --font-num:  'Pretendard Variable', 'Pretendard', ui-monospace, 'SF Mono', 'Menlo', monospace;

  --text-display-lg: 3rem;      /* 48px */
  --text-display-sm: 1.875rem;  /* 30px */
  --text-xl:   1.25rem;
  --text-lg:   1.125rem;
  --text-base: 1rem;
  --text-sm:   0.875rem;
  --text-xs:   0.75rem;
  --text-2xs:  0.6875rem;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* 한글 트래킹 — Pretendard 실제 로드 후 큰 글자일수록 더 좁힌다(가변폰트 wght 800↑에서 특히 유효) */
  --tracking-snug:  -0.01em;
  --tracking-tight: -0.02em;

  --leading-tight:   1.2;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;

  --shadow-sm: 0 1px 3px 0 rgba(12,31,63,0.06), 0 1px 2px -1px rgba(12,31,63,0.04);
  --shadow-md: 0 4px 10px -2px rgba(12,31,63,0.09), 0 2px 4px -2px rgba(12,31,63,0.05);
  --shadow-lg: 0 12px 28px -6px rgba(12,31,63,0.14), 0 4px 8px -2px rgba(12,31,63,0.06);

  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: ease-in-out;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 허브(amazingstore-hub) GNB/드로어/푸터 이식용 별칭·추가 토큰(2026-07-10) ──
     값은 허브 styles.css 원본과 동일(브랜드 계열 일관성). 기존 토큰과 값이 같은 것은
     별칭으로, 없는 것만 신규 추가 — place-rank 고유 토큰은 변경하지 않는다. */
  --color-accent:       var(--color-gold);      /* 허브 --color-accent(#C8860A)=place-rank --color-gold 동일값 */
  --color-brand-soft:   #1E3A5F;                /* 허브 로고 배지 그라디언트 중간색 */
  --color-surface-deep: var(--color-brand);     /* 허브 --color-surface-deep(#0C1F3F)=place-rank --color-brand 동일값 */
  --tracking-wider:     0.08em;
}

/* ─── 2. 리셋 + 본문 기본값 ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none; /* 가변폰트가 실제 굵기축(45–920)을 갖고 있으므로 브라우저 합성 볼드/이탤릭 금지 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3 { margin: 0; font-family: var(--font-base); color: var(--color-brand); letter-spacing: var(--tracking-snug); }
p { margin: 0; }
a { color: inherit; }
[id] { scroll-margin-top: 76px; }
:focus-visible { outline: 2px solid var(--color-point); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.pr-container { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 24px; }
.pr-container--narrow { max-width: 560px; }
@media (max-width: 480px) { .pr-container { padding: 0 16px; } }

/* 허브 GNB/푸터 이식용 넓은 컨테이너(920px .pr-container와 별개, 허브 1280px 그대로) */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 767px) { .container { padding: 0 24px; } }

.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ─── 3. GNB + 모바일 드로어 — 어메이징스토어 허브 이식(2026-07-10) ─────────────
   출처: knowledge/projects/amazingstore-hub/web/styles.css §10(GNB+Drawer) + festive 리뉴얼(§2~3, 드로어 터치부).
   변경: [data-theme="dark"] 규칙 전부 제외(오너 지시로 place-rank 다크모드 없음),
         #theme-toggle 관련 CSS 없음(마크업에서도 이식 안 함). 나머지는 시각적으로 동일. */
.gnb {
  position: sticky;
  top: 0;
  z-index: 200;
  height: 64px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
}
.gnb__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.gnb__logo {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  color: var(--color-brand);
  text-decoration: none;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  margin-right: 40px;
}
/* 서비스명 라벨 — 허브 카테고리 메뉴 제거 후 "로고 | 서비스명" 표기(2026-07-10 오너 지시).
   구분선(|)은 border-left. 현재 위치 표시용 비링크(로고만 허브 홈으로 이동). */
.gnb__service {
  display: inline-flex;
  align-items: center;
  padding-left: 14px;
  border-left: 1px solid var(--color-border);
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.gnb__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  position: relative;
}
.gnb__auth-wrap { position: relative; }
.gnb__username {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-base);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.gnb__username:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
}
.gnb__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  z-index: 210;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    visibility 0ms var(--duration-fast);
}
.gnb__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.gnb__dropdown-item {
  display: block;
  padding: 9px 16px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--duration-instant) var(--ease-out), color var(--duration-instant) var(--ease-out);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font-base);
}
.gnb__dropdown-item:hover { background: var(--color-bg); color: var(--color-text-primary); }
.gnb__dropdown-item--danger { color: var(--color-danger); }
.gnb__dropdown-item--danger:hover { background: var(--color-danger-subtle); color: var(--color-danger); }
.gnb__dropdown-divider { height: 1px; background: var(--color-border); margin: var(--space-2) 0; }

@media (max-width: 1023px) {
  .gnb__inner { padding: 0 24px; }
  .gnb__service { padding-left: 10px; font-size: var(--text-sm); }
}

/* ── 로고 리디자인(festive) — 허브와 동일 ── */
.gnb__logo--festive {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  position: relative;
  margin-right: 12px;
}
.gnb__logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-soft) 55%, var(--color-accent) 130%);
  background-size: 220% 220%;
  box-shadow: 0 0 0 1px rgba(200,134,10,0.25), 0 2px 6px -1px rgba(12,31,63,0.35);
  animation: logo-mark-drift 6s ease-in-out infinite;
  flex-shrink: 0;
}
.gnb__logo-mark--img {
  width: 32px;
  height: 32px;
  background: none;
  box-shadow: none;
  animation: none;
}
.gnb__logo-mark--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@keyframes logo-mark-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.gnb__logo-text {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.01em;
  display: inline-flex;
}
.gnb__logo .gnb__logo-word { color: #4A7FC1; display: inline-block; transition: transform 0.3s var(--ease-spring); }
.gnb__logo .gnb__logo-word--accent { color: var(--color-accent); }

.gnb__logo--festive::after {
  content: '';
  position: absolute;
  inset: -4px -8px;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 150% 0;
  pointer-events: none;
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.15s;
}
.gnb__logo--festive:hover::after {
  opacity: 1;
  animation: logo-shimmer-sweep 0.7s ease-out;
}
@keyframes logo-shimmer-sweep {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}
.gnb__logo--festive:hover .gnb__logo-mark {
  animation: logo-mark-drift 6s ease-in-out infinite, logo-mark-glow-pulse 0.6s ease-out;
  transform: scale(1.08);
  transition: transform 0.25s var(--ease-spring);
}
@keyframes logo-mark-glow-pulse {
  0%   { box-shadow: 0 0 0 1px rgba(200,134,10,0.25), 0 2px 6px -1px rgba(12,31,63,0.35); }
  50%  { box-shadow: 0 0 0 4px rgba(200,134,10,0.35), 0 0 18px 2px rgba(200,134,10,0.55), 0 2px 10px -1px rgba(12,31,63,0.4); }
  100% { box-shadow: 0 0 0 1px rgba(200,134,10,0.25), 0 2px 6px -1px rgba(12,31,63,0.35); }
}
.gnb__logo--festive:hover .gnb__logo-mark--img {
  animation: none;
  transform: scale(1.08);
}
.gnb__logo--festive:hover .gnb__logo-word { animation: logo-word-bounce 0.5s var(--ease-spring); }
.gnb__logo--festive:hover .gnb__logo-word:first-child { animation-delay: 0s; }
.gnb__logo--festive:hover .gnb__logo-word--accent { animation-delay: 0.08s; }
@keyframes logo-word-bounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* ── 상단 네비게이션(festive) — 허브와 동일 ── */
.gnb--festive {
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(200,134,10,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -12px rgba(12,31,63,0.18);
  transition: background var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              height var(--duration-base) var(--ease-out);
}
body.is-scrolled .gnb--festive {
  height: 60px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 12px 28px -14px rgba(12,31,63,0.28);
  border-bottom-color: rgba(200,134,10,0.28);
}

/* ─── 4. 배지 ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  line-height: 1.6;
  vertical-align: middle;
}
.badge--beta { background: var(--badge-beta-bg); color: var(--badge-beta); }

/* ─── 5. 히어로 — 남색 고정 브랜드 블록 ────────────────────────── */
.pr-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background: #0C1F3F;
  background-image: radial-gradient(60% 90% at 85% 0%, rgba(74,127,193,0.20), transparent 60%);
  color: #FFFFFF;
  overflow: hidden;
}
.pr-hero__overline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--space-5);
}
.pr-hero__title {
  font-size: var(--text-display-sm);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin-bottom: var(--space-4);
}
.pr-hero__title-accent { color: #7FACE8; }
@media (min-width: 560px) { .pr-hero__title { font-size: var(--text-display-lg); letter-spacing: var(--tracking-tight); } }
.pr-hero__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255,255,255,0.80);
  max-width: 440px;
  margin-bottom: var(--space-8);
}
.pr-hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-bottom: var(--space-8); }
.pr-hero__engine {
  font-family: var(--font-num);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.50);
}
.pr-hero__engine code {
  font-family: var(--font-num);
  background: rgba(255,255,255,0.10);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.pr-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  list-style: none;
  margin: 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.pr-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
}
.pr-hero__trust .icon { color: #7FACE8; }

/* ─── 6. 섹션 리듬 ───────────────────────────────────────────── */
.pr-section { padding: var(--space-16) 0; background: var(--color-surface); }
.pr-section--gray { background: var(--color-bg); }
.pr-section__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-point);
  text-align: center;
  margin-bottom: var(--space-2);
}
.pr-section__title--center {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  text-align: center;
  margin-bottom: var(--space-8);
  color: var(--color-text-primary);
}

/* ─── 7. 3단계 안내 ──────────────────────────────────────────── */
.pr-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  text-align: center;
}
@media (max-width: 640px) { .pr-steps { grid-template-columns: 1fr; gap: var(--space-5); } }
.pr-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  font-weight: var(--weight-bold);
  font-family: var(--font-num);
  font-size: var(--text-sm);
}
.pr-step__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}
.pr-step__title .icon { color: var(--color-point); }
.pr-step__desc { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }

/* ─── 8. 카드 ────────────────────────────────────────────────── */
.pr-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.pr-card--elevated { box-shadow: var(--shadow-md); }
.pr-card--elevated:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}
.pr-card h2 { font-size: var(--text-lg); font-weight: var(--weight-bold); margin-bottom: var(--space-5); }
.pr-card > .pr-section__eyebrow + h2 { margin-top: 0; }

/* 잔액 위젯 */
.pr-wallet-empty { text-align: center; padding: var(--space-2) 0; }
.pr-wallet-empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-brand-subtle); color: var(--color-brand);
}
.pr-wallet-empty p { margin-bottom: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-sm); }
.pr-wallet { animation: pr-fade-up 320ms var(--ease-out); }
.pr-wallet__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.pr-wallet__user { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.pr-wallet__balance-chip {
  display: inline-flex; align-items: baseline; gap: 3px;
  background: var(--color-point-subtle);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.pr-wallet__balance-chip strong {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-point);
}
.pr-wallet__loading { padding: var(--space-1) 0; }
.muted { color: var(--color-text-tertiary); font-size: var(--text-sm); }
#anonNote { white-space: pre-line; } /* app.js가 \n 포함 문구로 갱신 — 문장 단위 내려쓰기 유지 */

/* 스켈레톤 로딩 */
.skeleton {
  display: block;
  height: 15px;
  width: 70%;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  background: linear-gradient(90deg, var(--color-border) 25%, #EFF1F4 37%, var(--color-border) 63%);
  background-size: 400% 100%;
  animation: pr-shimmer 1.4s ease infinite;
}
.skeleton--sm { width: 40%; height: 11px; margin-bottom: 0; }
@keyframes pr-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ─── 9. 폼 ─────────────────────────────────────────────────── */
.pr-form__group { margin-bottom: var(--space-4); }
.pr-form__group label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.pr-form__optional { font-weight: var(--weight-medium); color: var(--color-text-tertiary); }
.pr-form input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-size: var(--text-base);
  font-family: var(--font-base);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.pr-form input:hover { border-color: var(--color-border-strong); }
.pr-form input:focus {
  border-color: var(--color-point);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-point-subtle);
}
.pr-form input::placeholder { color: var(--color-text-tertiary); }
.pr-form input:invalid:not(:focus):not(:placeholder-shown) { border-color: var(--color-danger); }

/* ─── 10. 버튼 ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  position: relative;
  font-family: var(--font-base);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  height: 44px;
  padding: 0 22px;
  font-size: var(--text-base);
  transition: background-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.btn--lg { height: 52px; padding: 0 28px; font-size: var(--text-lg); }
.btn--full { width: 100%; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--color-brand); color: #FFFFFF; border-color: var(--color-brand); }
.btn--primary:hover { background: var(--color-brand-hover); box-shadow: 0 8px 18px -6px rgba(12,31,63,0.45); }

.btn--point { background: var(--color-point); color: #FFFFFF; border-color: var(--color-point); box-shadow: 0 2px 0 rgba(255,255,255,0.08) inset, 0 8px 20px -6px rgba(12,31,63,0.55); }
.btn--point:hover { background: var(--color-point-hover); box-shadow: 0 2px 0 rgba(255,255,255,0.08) inset, 0 10px 24px -6px rgba(12,31,63,0.6); }
.btn__arrow { transition: transform var(--duration-base) var(--ease-out); }
.btn--point:hover .btn__arrow { transform: translateX(3px); }

.btn--outline { background: transparent; color: var(--color-brand); border-color: var(--color-border-strong); }
.btn--outline:hover { background: var(--color-brand-subtle); border-color: var(--color-brand); box-shadow: 0 4px 12px -4px rgba(12,31,63,0.15); }

/* 위계: primary(면 채움, 폼 확정 액션) → point(강조 CTA) → outline(보조 액션) → ghost(최소 강조, 부차 액션) */
.btn--ghost { background: transparent; color: var(--color-text-secondary); border-color: transparent; }
.btn--ghost:hover { background: var(--color-bg); color: var(--color-text-primary); }

@media (max-width: 480px) { .btn { min-height: 44px; } }

/* 버튼 로딩 스피너 */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: pr-spin 700ms linear infinite;
}
.btn--outline.is-loading::after { border-color: rgba(12,31,63,0.2); border-top-color: var(--color-brand); }
@keyframes pr-spin { to { transform: rotate(360deg); } }

/* ─── 11. 조회 결과 — 시그니처 요소: 원형 순위 배지 ─────────────── */
.result {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  animation: pr-fade-up 320ms var(--ease-out);
}
/* 결과 강화: 1~3위(top)면 카드 테두리가 골드로 반응해 배지와 함께 등급을 강조.
   배경은 흰색 유지(골드 배지가 옅은 배경에 묻히지 않도록 대비 확보).
   :has() 미지원 브라우저는 기본 .result 스타일로 조용히 폴백(기능 손실 없음). */
.result:has(.rank-badge--top) { border-color: var(--color-gold); border-width: 1.5px; background: var(--color-surface); box-shadow: 0 0 0 1px rgba(200,134,10,0.12), var(--shadow-md); }
.result__top { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-3); }
.result__info { min-width: 0; }
.result__status { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--weight-medium); }

.rank-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px; height: 84px;
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background: var(--color-point-subtle);
  animation: pr-pop 320ms var(--ease-out);
}
.rank-badge__num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: var(--weight-extrabold);
  line-height: 1;
  color: var(--color-point);
}
.rank-badge__unit { font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); margin-top: 2px; }
.rank-badge--top { background: var(--color-gold-subtle); border-color: var(--color-gold); }
.rank-badge--top .rank-badge__num { color: var(--color-gold); font-size: 2rem; }
.rank-badge--in { background: var(--color-point-subtle); border-color: var(--color-point); }
.rank-badge--out { background: #F1F2F5; border-color: var(--color-border-strong); }
.rank-badge--out .rank-badge__num { color: var(--color-text-secondary); font-size: 1.25rem; }
.rank-badge--out .rank-badge__unit { color: var(--color-text-tertiary); }

@keyframes pr-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes pr-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rank-line { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: 2px; color: var(--color-text-primary); }
.result .err { color: var(--color-danger); font-weight: var(--weight-semibold); }
.disclaimer { color: var(--color-text-tertiary); font-size: var(--text-xs); margin-top: var(--space-3); line-height: var(--leading-relaxed); }
.hint { color: var(--color-text-secondary); font-size: var(--text-sm); margin-top: var(--space-3); line-height: var(--leading-relaxed); }

/* ─── 12. 이용 안내(가격) — 3카드 그리드 ───────────────────────── */
.pr-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 720px) { .pr-pricing-grid { grid-template-columns: 1fr; } }
.pr-price-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.pr-price-card--featured { border-color: var(--color-point); box-shadow: var(--shadow-md); }
.pr-price-card__tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--color-point); color: #fff;
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  padding: 3px 12px; border-radius: var(--radius-full);
  white-space: nowrap;
}
.pr-price-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 auto var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-brand-subtle); color: var(--color-brand);
}
.pr-price-card--featured .pr-price-card__icon { background: var(--color-point-subtle); color: var(--color-point); }
.pr-price-card__label { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.pr-price-card__value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}
.pr-price-card__value span { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); margin-left: 2px; }
.pr-price-card__desc { font-size: var(--text-xs); color: var(--color-text-tertiary); line-height: var(--leading-relaxed); }


/* ─── 13. 법무 고지 블록 ─────────────────────────────────────── */
.pr-legal { color: var(--color-text-secondary); }
.pr-legal__title {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-base); font-weight: var(--weight-bold);
  margin-bottom: var(--space-4); color: var(--color-text-primary);
}
.pr-legal__title .icon { color: var(--color-text-tertiary); }
.pr-legal p { font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); }
.pr-legal__muted { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.pr-legal__hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }
.pr-legal__biz, .biz { font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* ─── 13b. 광고 배너 슬롯(B, 어드민 관리) — 직접 이미지 배너 + '광고' 라벨 ─── */
.pr-adslot { padding: var(--space-6) 0; background: var(--color-bg); }
.pr-adslot__label {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-tertiary); margin-bottom: var(--space-2);
}
.pr-adslot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pr-adslot__item { margin: 0; }
.pr-adslot__link {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.pr-adslot__link:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pr-adslot__badge {
  position: absolute; top: var(--space-2); left: var(--space-2); z-index: 1;
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  color: #FFFFFF; background: rgba(20,24,31,0.72);
  padding: 2px 7px; border-radius: var(--radius-sm); letter-spacing: 0.02em;
}
.pr-adslot__img { display: block; width: 100%; height: auto; }

/* ─── 13c. 자사 서비스 홍보 배너(A, house) — config 관리, '광고' 라벨 불요 ─── */
.pr-house { background: var(--color-brand); color: var(--color-text-inverse); }
.pr-house__inner {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center;
}
@media (max-width: 720px) { .pr-house__inner { grid-template-columns: 1fr; gap: var(--space-6); } }
.pr-house__eyebrow {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-2);
}
.pr-house__title { color: #FFFFFF; font-size: var(--text-xl); font-weight: var(--weight-extrabold); margin-bottom: var(--space-3); }
.pr-house__subtitle { font-size: var(--text-sm); color: rgba(255,255,255,0.75); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); }
.pr-house__cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pr-house .btn--outline { color: #FFFFFF; border-color: rgba(255,255,255,0.4); background: transparent; }
.pr-house .btn--outline:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.7); }
.pr-house__services { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pr-house__service { margin: 0; }
.pr-house__service-link {
  display: block; text-decoration: none; padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-md); transition: background var(--duration-base) var(--ease-out);
}
.pr-house__service-link:hover { background: rgba(255,255,255,0.12); }
.pr-house__service-name { display: block; font-weight: var(--weight-bold); color: #FFFFFF; font-size: var(--text-sm); }
.pr-house__service-desc { display: block; font-size: var(--text-xs); color: rgba(255,255,255,0.65); margin-top: 2px; line-height: var(--leading-snug); }

/* ─── 13d. 하우스 크리에이티브(H1/H2) — 항상 노출되는 컴팩트 리더보드 배너 2종 ───
   2026-07-10 오너 지시(리디자인): 세로로 길던 카드형 배너 → 가로형 리더보드로 축소
   (데스크톱 실측 목표 약 150~195px, 계산 근거는 아래 폰트/여백 참조). 사이드 이미지
   패널(self-host /static/ads/*.jpg, Unsplash License) + 텍스트 패널 구성으로 변경하고
   기존 SVG 시그니처(위치핀 클러스터·펄스선)는 이미지 코너의 작은 아이콘 칩으로 최소화.
   공유 골격(.pr-housead__*)은 레이아웃/모션만 담당하고, 팔레트·타이포는
   --ams/--mbx 변형 클래스에서 분리해 두 광고주가 다른 룩으로 읽히게 한다.
   접근성: "광고" 배지는 자체 불투명 배경 칩(13b 공용, rgba(20,24,31,.72)+흰 텍스트)이라
   사진 위에 얹혀도 대비 유지. 본문 텍스트는 사진 위에 얹지 않고 별도 단색 패널에 배치해
   AA(4.5:1) 검산 없이도 항상 보장(사진/스크림에 의존하지 않는 설계).
   포커스 링은 전역 :focus-visible(2. 리셋) 그대로 사용. ─────────────────────────────── */
.pr-housead { padding: var(--space-6) 0; background: var(--color-bg); }
.pr-housead__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 260px;
  align-items: stretch;
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.pr-housead__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pr-housead__badge.pr-housead__badge { top: var(--space-3); left: var(--space-3); z-index: 2; } /* 위치만 조정, 칩 스타일은 13b 재사용 */
/* AMS는 텍스트 패널이 좌측이라 좌상단 배지가 로고와 겹침 → 우상단(이미지 위)으로 이동 */
.pr-housead--ams .pr-housead__badge.pr-housead__badge { left: auto; right: var(--space-3); }
@media (max-width: 720px) { .pr-housead--ams .pr-housead__badge.pr-housead__badge { right: auto; left: var(--space-3); } }
.pr-housead__body {
  padding: 18px var(--space-6);
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
}
/* 이미지 패널 — object-fit:cover로 카드 높이에 맞춰 꽉 채움(레터박스 없음), 텍스트는 얹지 않음 */
.pr-housead__graphic { position: relative; overflow: hidden; background: var(--color-brand); }
.pr-housead__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-housead__logo { font-size: var(--text-sm); font-weight: var(--weight-extrabold); letter-spacing: -0.01em; margin-bottom: var(--space-1); }
.pr-housead__title { font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-snug); margin-bottom: var(--space-2); }
.pr-housead__desc { font-size: var(--text-sm); line-height: var(--leading-normal); max-width: 400px; margin-bottom: var(--space-3); }
.pr-housead__cta {
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content; font-weight: var(--weight-semibold); font-size: var(--text-xs);
  padding: 9px 16px; border-radius: var(--radius-md);
  transition: background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.pr-housead__cta .icon { width: 14px; height: 14px; transition: transform var(--duration-base) var(--ease-out); }
.pr-housead__card:hover .pr-housead__cta .icon { transform: translateX(3px); }
/* 이미지 코너의 최소 시그니처 칩 — 기존 위치핀/펄스 그래픽의 축약형(브랜드 단서만 남김) */
.pr-housead__imgmark {
  position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

@media (max-width: 720px) {
  .pr-housead__card { grid-template-columns: 1fr; }
  .pr-housead__graphic { order: 2; height: 110px; }
  .pr-housead__body { padding: var(--space-4) var(--space-5); }
}

/* ── (ams) 어메이징스토어 — 사이트 자체 브랜드 남색+블루+골드(GNB/히어로와 동일 계열), 텍스트 좌·이미지 우 ── */
.pr-housead--ams .pr-housead__card {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(200,134,10,0.20), transparent 55%),
    radial-gradient(100% 130% at 0% 100%, rgba(74,127,193,0.28), transparent 60%),
    linear-gradient(135deg, #0C1F3F 0%, #102B57 55%, #0C1F3F 100%);
  color: #FFFFFF;
}
.pr-housead__logo-a { color: #4A7FC1; }
.pr-housead__logo-b { color: var(--color-gold); }
.pr-housead--ams .pr-housead__title { color: #FFFFFF; }
.pr-housead--ams .pr-housead__desc { color: rgba(255,255,255,0.78); }
.pr-housead__cta--ams { background: var(--color-gold); color: #0C1F3F; }
.pr-housead__cta--ams:hover { background: #DDA02A; box-shadow: 0 8px 18px -6px rgba(0,0,0,0.35); }
.pr-housead__graphic--ams { border-left: 1px solid rgba(200,134,10,0.24); }
.pr-housead__graphic--ams .pr-housead__img { object-position: center; }
@media (max-width: 720px) { .pr-housead__graphic--ams { border-left: none; border-top: 1px solid rgba(200,134,10,0.24); } }
/* 시그니처(최소화): 코너의 위치핀 칩 1개 — 골드 원형 배지, hover 시 미세 부양 */
.pr-housead__imgmark--ams { background: rgba(12,31,63,0.55); color: var(--color-gold); transition: transform 300ms var(--ease-out); }
.pr-housead__card:hover .pr-housead__imgmark--ams { transform: translateY(-2px); }

/* ── (mbx) 메디브릭스 — 임상 틸/민트 + 화이트 페이퍼(어메이징스토어와 의도적 팔레트 분리) ──
   좌: 의사 사진 이미지 패널 / 우: 페이퍼 텍스트존 — ams(우측 이미지)와 좌우 반전. */
.pr-housead--mbx .pr-housead__card { background: #F4FAF9; grid-template-columns: 260px 1fr; }
.pr-housead__graphic--mbx {
  border-right: 1px solid rgba(95,234,209,0.20);
}
.pr-housead__graphic--mbx .pr-housead__img { object-position: center 62%; } /* 원본 사진 핵심(스마트폰 쥔 손) 이 상하 62% 지점 — 모바일 초와이드 크롭에서도 유지 */
.pr-housead__graphic--mbx::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(11,59,57,0.32) 0%, transparent 40%);
} /* 상단(광고 배지) 아래 은은한 스크림 — 배지 자체 배경과 별개의 여유 대비층. z-index:0으로 imgmark(1) 아래 유지 */
@media (max-width: 720px) {
  .pr-housead--mbx .pr-housead__card { grid-template-columns: 1fr; }
  .pr-housead__graphic--mbx { border-right: none; border-bottom: 1px solid rgba(95,234,209,0.20); }
}
.pr-housead__imgmark--mbx { background: rgba(11,59,57,0.60); }
.pr-housead__logo--mbx { color: #0B3B39; }
.pr-housead__title--mbx { color: #0B2A28; }
.pr-housead__desc--mbx { color: #2B4E4A; } /* 페이퍼 위 본문 — ink보다 한 톤 밝지만 AA 충족(별도 검산) */
.pr-housead__cta--mbx { background: #5FEAD1; color: #0B2A28; }
.pr-housead__cta--mbx:hover { background: #45DABE; box-shadow: 0 8px 18px -6px rgba(11,59,57,0.3); }
.pr-housead__badge--mbx { background: rgba(11,59,57,0.78); }

/* ─── 14. 푸터 — 어메이징스토어 허브 footer.footer 이식(2026-07-10) ───────────
   출처: knowledge/projects/amazingstore-hub/web/styles.css §30(Footer). 시각적으로 동일.
   구 .pr-footer(1단 중앙정렬 축약형)는 4단 그리드 풀 푸터로 교체. */
.footer { background: var(--color-surface-deep); color: rgba(255,255,255,0.65); padding: var(--space-16) 0 var(--space-8); margin-top: auto; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-10); margin-bottom: var(--space-12); }
@media (max-width: 767px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
@media (max-width: 479px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand-logo { font-size: var(--text-lg); font-weight: var(--weight-extrabold); color: #FFFFFF; text-decoration: none; display: flex; align-items: center; gap: 6px; margin-bottom: var(--space-3); }
.footer__brand-logo-text { color: #FFFFFF; }
.footer__brand-logo-text span { color: var(--color-accent); }
.footer__brand-logo-img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.footer__slogan { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: rgba(255,255,255,0.55); margin-bottom: var(--space-5); }
.footer__col-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(255,255,255,0.90); margin-bottom: var(--space-4); }
.footer__link {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  margin-bottom: var(--space-3);
  transition: color var(--duration-fast) var(--ease-out);
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-base);
  width: auto;
}
.footer__link:hover { color: rgba(255,255,255,0.90); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer__copy { font-size: var(--text-2xs); color: rgba(255,255,255,0.40); }
.footer__legal { display: flex; gap: var(--space-4); align-items: center; }
.footer__legal a, .footer__legal button {
  font-size: var(--text-2xs);
  color: rgba(255,255,255,0.40);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: var(--font-base);
  transition: color var(--duration-fast);
}
.footer__legal a:hover, .footer__legal button:hover { color: rgba(255,255,255,0.70); }
.footer__admin-link {
  font-size: var(--text-2xs);
  color: rgba(255,255,255,0.25);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: var(--font-base);
  transition: color var(--duration-fast);
}
.footer__admin-link:hover { color: rgba(255,255,255,0.55); }
.footer__biz-info { font-size: var(--text-2xs); color: rgba(255,255,255,0.35); line-height: var(--leading-relaxed); margin-top: var(--space-4); }

/* ────────────────────────────────────────────────────────────────────
   키워드 검색량 · 추천(연관) 키워드 섹션 — 네이버 검색광고 API 기반.
   순위조회(블루)와 시각적 구분을 위해 민트/틸 계열 강조 바를 쓴다.
   ──────────────────────────────────────────────────────────────────── */
:root { --color-kw: #0E7C6B; --color-kw-subtle: #E6F5F1; --color-kw-hover: #0A6153; }

.pr-section--kw { background: var(--color-bg); }
.pr-kw-card { border-top: 4px solid var(--color-kw); }
.pr-section__eyebrow--kw { color: var(--color-kw); }

.pr-kw-result { margin-top: var(--space-6); }
.pr-kw-result__head {
  font-size: var(--text-lg); color: var(--color-text-primary);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pr-kw-result__comp { font-size: var(--text-sm); color: var(--color-text-secondary); }
.pr-kw-result__comp b { color: var(--color-kw); }

.pr-kw-vols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.pr-kw-vol {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3); text-align: center;
}
.pr-kw-vol--total { background: var(--color-kw-subtle); border-color: var(--color-kw); }
.pr-kw-vol__label { display: block; font-size: var(--text-xs); color: var(--color-text-tertiary); margin-bottom: var(--space-1); }
.pr-kw-vol__num { display: block; font-family: var(--font-num); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text-primary); }
.pr-kw-vol--total .pr-kw-vol__num { color: var(--color-kw-hover); }

#kwToRank { margin-top: var(--space-4); }
.btn--sm { padding: 6px 14px; font-size: var(--text-sm); }

.pr-kw-related__title { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-lg); }
.pr-kw-related__title .muted { font-weight: var(--weight-regular); font-size: var(--text-sm); }
.pr-kw-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.pr-kw-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pr-kw-table thead th {
  text-align: left; background: var(--color-brand-subtle); color: var(--color-text-secondary);
  font-weight: var(--weight-semibold); padding: var(--space-3); white-space: nowrap;
}
.pr-kw-table th.num, .pr-kw-table td.num { text-align: right; font-family: var(--font-num); white-space: nowrap; }
.pr-kw-table tbody td { padding: var(--space-3); border-top: 1px solid var(--color-border); vertical-align: middle; }
.pr-kw-table tbody tr:hover { background: var(--color-kw-subtle); }
.pr-kw-table td.kw { font-weight: var(--weight-medium); color: var(--color-text-primary); }
.pr-kw-pick {
  background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-kw-hover);
  border-radius: var(--radius-full); padding: 3px 10px; font-size: var(--text-xs); cursor: pointer;
  white-space: nowrap; transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.pr-kw-pick:hover { background: var(--color-kw-subtle); border-color: var(--color-kw); }

@media (max-width: 520px) {
  .pr-kw-vols { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────────
   순위결과 하단 인라인 검색량(동일 키워드) — 키워드 리서치와 같은 민트 토큰 재사용.
   순위결과(블루) 카드 안에서 시각적으로 구분되는 옅은 민트 박스로 표기.
   ──────────────────────────────────────────────────────────────────── */
.pr-rank-vol {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-kw-subtle);
  border: 1px solid var(--color-kw);
  border-radius: var(--radius-lg);
}
.pr-rank-vol--loading, .pr-rank-vol--err {
  background: var(--color-surface); border-color: var(--color-border);
}
.pr-rank-vol__head {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-kw-hover); text-transform: none; margin-bottom: var(--space-2);
}
.pr-rank-vol__nums { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: baseline; }
.pr-rank-vol__item { font-size: var(--text-sm); color: var(--color-text-secondary); }
.pr-rank-vol__item b {
  font-family: var(--font-num); font-size: var(--text-lg); font-weight: var(--weight-bold);
  color: var(--color-text-primary); margin-left: 4px;
}
.pr-rank-vol__item--total b { color: var(--color-kw-hover); }
.pr-rank-vol__link {
  display: inline-block; margin-top: var(--space-3);
  font-size: var(--text-sm); color: var(--color-kw-hover); font-weight: var(--weight-medium);
  text-decoration: none;
}
.pr-rank-vol__link:hover { text-decoration: underline; }