/* 사이트 레이아웃·섹션 스타일 — 값은 tokens.css 변수와 design.json의 간격·타입 수치만 쓴다.
   인터랙션(버튼·입력·카드·아코디언)은 interactions.css에 있다. */

/* ===== 기본 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font: 400 17px/1.6 var(--font-body);
  letter-spacing: 0.005em;
}
:lang(ko) { word-break: keep-all; }
a { color: inherit; text-underline-offset: 3px; }
/* 포인트 컬러: 텍스트 링크 hover 시 밑줄 색만 바꾼다(글자는 잉크). 검사 결과 영역은 판정 색과 섞이지 않게 제외 */
a:not(.bs-btn):hover { text-decoration-color: var(--color-accent); }
#out a:not(.bs-btn):hover { text-decoration-color: currentColor; }
/* 포인트 컬러: 로고·워드마크의 "suda", 기능 소개 번호 */
.logo-accent { color: var(--color-accent); }
/* 번호는 15px 작은 글자라 크림 배경에서 명암비 4.5를 넘는 진한 포인트 색을 쓴다(6.03) */
.eyebrow__num { color: var(--color-accent-strong); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
p { margin: 0 0 16px; }
.bs-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { font-size: 15px; line-height: 1.5; }
.internal-badge { margin: 0; padding: 8px 12px; font-size: 13px; text-align: center; }

/* 패널이 화면 끝에 닿지 않도록 흰 여백(모바일 12px, 데스크톱 24px) 안에 띄운다 */
.site { display: flex; flex-direction: column; gap: var(--gutter); padding: 12px; }
@media (min-width: 768px) { .site { padding: var(--gutter); } }

.eyebrow { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.section-title { margin: 0 0 24px; font-size: 32px; font-weight: 700; line-height: 1.15; text-transform: lowercase; }
@media (min-width: 768px) { .section-title { font-size: 48px; } }

/* ===== 헤더 (크림 플로팅 패널, 로고 가운데) =====
   스크롤해도 화면 위에 붙어 있고, 조금 내려가면(header.js가 is-compact를 붙임) 높이·로고가 줄어든다.
   줄어든 만큼 아래 여백을 늘려서 본문 위치가 튀지 않게 한다. */
.site-header {
  --header-h: 72px; --header-h-compact: 56px; --logo-size: 28px; --logo-size-compact: 24px;
  position: sticky; top: 12px; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  min-height: var(--header-h); padding: 0 16px;
  background: var(--color-panel); border-radius: var(--radius-panel);
  transition: min-height var(--dur-control) var(--ease-control), margin-bottom var(--dur-control) var(--ease-control),
    box-shadow var(--dur-control) var(--ease-control);
}
/* 헤더 위 틈으로 본문이 비치지 않게 페이지 바탕색으로 덮는다 */
.site-header::before {
  content: ""; position: absolute; left: -12px; right: -12px; bottom: 100%; height: 12px;
  background: var(--color-page);
}
.site-header.is-compact {
  min-height: var(--header-h-compact);
  margin-bottom: calc(var(--header-h) - var(--header-h-compact));
  box-shadow: var(--shadow-float);
}
.site-header__side { display: flex; gap: 24px; }
.site-header__side--right { justify-content: flex-end; }
.site-header__link {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.site-header__link:hover, .site-header__link[aria-current="page"] { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
/* 현재 페이지 표시: 포인트 컬러 2px 밑줄 */
.site-header__link[aria-current="page"] { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.site-header__logo {
  font: 700 var(--logo-size)/1 var(--font-display); letter-spacing: -0.04em; text-transform: lowercase; text-decoration: none;
  transition: font-size var(--dur-control) var(--ease-control);
}
.site-header.is-compact .site-header__logo { font-size: var(--logo-size-compact); }
@media (max-width: 767px) {
  .site-header__link--wide, .site-header__more { display: none; }
}
@media (min-width: 768px) {
  .site-header {
    --header-h: 120px; --header-h-compact: 64px; --logo-size: 56px; --logo-size-compact: 32px;
    top: var(--gutter); padding: 0 56px; gap: 16px;
  }
  .site-header::before { left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); height: var(--gutter); }
  .site-header__side { gap: 72px; }
  .site-header__link { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__logo { transition: none; }
}
/* #check 같은 위치로 이동할 때 고정 헤더에 가려지지 않게 */
[id] { scroll-margin-top: 96px; }

/* ===== 공통 크림 패널 ===== */
.panel { background: var(--color-panel); border-radius: var(--radius-panel); padding: 48px 24px; }
@media (min-width: 768px) { .panel { padding: 64px 56px; } }
.panel__inner { max-width: 1100px; margin: 0 auto; }

/* 홈: 섹션 패널을 흰 여백 간격으로 세로로 쌓는다 */
.home { display: flex; flex-direction: column; gap: var(--gutter); }

/* ===== 1. 히어로 + 링크 입력 ===== */
.hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 768px) { .hero { min-height: 720px; display: flex; flex-direction: column; justify-content: center; padding-top: 96px; padding-bottom: 96px; } }
/* 배경 사진: 패널 전체를 덮고, 마우스가 히어로 위에 있으면 천천히 살짝 확대된다 */
/* 세로 정렬용 flex 안에서도 입력창·예시가 원래 폭(최대 720/960px)을 유지하게 */
.hero > :not(.hero__bg) { width: 100%; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform var(--dur-editorial) var(--ease-editorial);
}
/* 휴대폰: 세로로 긴 화면에서는 사진의 오른쪽 빈 바닥이 글자 뒤에 오도록 옮긴다 */
@media (max-width: 767px) { .hero__bg img { object-position: 70% center; } }
@media (hover: hover) { .hero:hover .hero__bg img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .hero__bg img { transition: none; } .hero:hover .hero__bg img { transform: none; } }
/* 사진 위 글자: 기본 잉크는 사진 가운데 바탕에서 명암비 4.37이라 진한 잉크(ink-strong)를 쓴다 */
.hero__sub, .hero-examples__title, .checkbar__note { color: var(--color-ink-strong); }
/* 사진 위 제목: 흰 글자 + 잉크색 그림자로 띄운다(design.json: 사진 위 글자는 흰색). 새 색 없이 토큰을 섞어 쓴다 */
.hero h1 {
  color: var(--color-page);
  text-shadow: 0 2px 6px color-mix(in srgb, var(--color-ink-strong) 45%, transparent),
    0 8px 40px color-mix(in srgb, var(--color-ink-strong) 55%, transparent);
}
/* 입력창·예시 카드도 같은 방식으로 사진 위에 살짝 떠 보이게(테두리 대신 그림자, box-shadow는 포커스·오류 링이 쓰므로 filter 사용) */
.hero .bs-linkbar { filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--color-ink-strong) 18%, transparent)); }
.hero .example-chip { filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--color-ink-strong) 12%, transparent)); }
/* 제목은 짧은 한 문장 — 릴스 캡처에서도 바로 읽히도록 크게(휴대폰 40px, 데스크톱 72px) */
/* "K-beauty"가 하이픈에서 줄바꿈되지 않게 */
.nowrap { white-space: nowrap; }
.hero h1 { margin: 0 auto 16px; max-width: 1100px; font-size: 40px; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
/* 데스크톱은 두 줄("Is your K-beauty / the real deal?")로 나눠 사진 가운데 빈 곳에만 놓이게 */
@media (min-width: 768px) { .hero h1 { font-size: 72px; max-width: 760px; } }
/* 소개 문장: 흰 제목 아래에서 묻히지 않게 조금 크고 굵게 */
.hero__sub { margin: 0 auto 32px; max-width: 720px; font-size: 18px; font-weight: 500; }
@media (min-width: 768px) { .hero__sub { font-size: 20px; } }
.checkbar { max-width: 720px; margin: 0 auto; text-align: left; }
.checkbar .bs-field { flex: 1; min-width: 0; width: 100%; }
.checkbar .bs-input { text-align: left; text-overflow: ellipsis; }
/* 잘못된 입력: 입력 바 전체에 벽돌색 링(I-02 오류 상태) */
.bs-linkbar:has(.bs-input[aria-invalid="true"]) { box-shadow: 0 0 0 2px var(--color-error); }
.checkbar .bs-linkbar .bs-btn { flex: none; }
.checkbar__note { margin: 12px 0 0; font-size: 15px; line-height: 1.5; text-align: center; }
/* 파트너가 아닌 브랜드 안내: 판정 색 없이 흰 상자에 잉크 글자 */
.checkbar__notice { margin-top: 12px; padding: 14px 18px; border-radius: var(--radius-media); background: var(--color-page); font-size: 15px; line-height: 1.5; }
.checkbar__notice p { margin: 0; }
.checkbar__notice-title { font-weight: 700; color: var(--color-ink-strong); margin-bottom: 4px !important; }

/* ===== 2. 원클릭 예시 상품 — 히어로 안, 입력창 바로 아래의 작은 카드 ===== */
.hero-examples { max-width: 960px; margin: 24px auto 0; }
.hero-examples__title { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.hero-examples__list { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 768px) { .hero-examples__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.example-card {
  appearance: none; display: block; width: 100%; margin: 0; padding: 0; border: 0;
  background: none; color: var(--color-ink); font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius-panel);
}
.example-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.example-brand { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.example-title { display: block; font-size: 15px; line-height: 1.5; }
.example-action { display: inline-block; margin-top: 8px; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.example-chip {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px;
  background: var(--color-page); border: 1px solid transparent; border-radius: var(--radius-media);
  transition: border-color var(--dur-control) var(--ease-control);
}
.example-chip:hover { border-color: var(--color-divider); }
.example-chip__media { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--color-card); overflow: hidden; }
.example-chip__media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.example-chip__text { min-width: 0; }
.example-chip .example-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .example-chip { transition: none; } }
/* 브랜드 페이지의 기존 예시 카드(사진 + 글) */
.example-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .example-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
/* 상품 사진의 흰 배경이 크림 패널에 자연스럽게 섞이도록 multiply로 겹친다 */
.example-card > img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 16px;
  border-radius: var(--radius-media); mix-blend-mode: multiply; }
.example-card > img + span { display: block; padding-top: 12px; }
.example-card .flag { display: block; margin-top: 4px; font-size: 13px; }

/* ===== 지원 브랜드 흐름 띠 (히어로 아래 흰 영역) =====
   같은 목록 두 벌을 나란히 두고 각각 자기 폭만큼 왼쪽으로 움직여 끊김 없이 이어진다.
   마우스를 올리면 멈추고, 움직임 줄이기 설정이면 멈춘 채 가로 스크롤로 본다. */
.brand-strip { padding: 24px 0 8px; text-align: center; }
.brand-strip__title { margin: 0 0 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.brand-strip__note { margin: 20px 0 0; font-size: 15px; line-height: 1.5; }
.bs-marquee { --marquee-speed: 45s; display: flex; overflow: hidden; }
.bs-marquee__track {
  display: flex; flex: none; align-items: center; gap: 40px; margin: 0; padding: 0 40px 0 0; list-style: none;
  animation: bs-marquee var(--marquee-speed) linear infinite;
}
.bs-marquee:hover .bs-marquee__track, .bs-marquee:focus-within .bs-marquee__track { animation-play-state: paused; }
.bs-marquee__link { display: block; color: inherit; text-decoration: none; }
.bs-marquee__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; border-radius: 4px; }
.bs-marquee__item {
  flex: none; font: 700 24px/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink-muted); white-space: nowrap;
}
/* 로고 이미지는 위아래 여백이 포함된 캔버스(높이 160) — 글자 부분이 약 24~30px로 보이도록 */
.bs-marquee__item img { display: block; height: 56px; width: auto; }
/* 평소에는 흑백(연하게), 띠 영역에 마우스를 올리면 모든 로고가 원래 브랜드 색으로 */
.bs-marquee__item img { filter: grayscale(1) opacity(0.6); transition: filter var(--dur-editorial) var(--ease-editorial); }
.brand-strip:hover .bs-marquee__item img, .brand-strip:focus-within .bs-marquee__item img { filter: none; }
@media (prefers-reduced-motion: reduce) { .bs-marquee__item img { transition: none; } }
@media (min-width: 768px) {
  .bs-marquee__track { gap: 80px; padding-right: 80px; }
  .bs-marquee__item { font-size: 36px; }
  .bs-marquee__item img { height: 72px; }
}
@keyframes bs-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .bs-marquee { overflow-x: auto; }
  .bs-marquee__track { animation: none; }
  .bs-marquee__track[aria-hidden="true"] { display: none; }
}

/* ===== 3. 기능 소개 (split editorial panel, 이미지–텍스트 교차) ===== */
.features { display: flex; flex-direction: column; gap: var(--gutter); }
.split { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--gutter); }
  .split--reverse .split__media { order: 2; }
}
@media (min-width: 1200px) { .split { gap: 48px; } }
.split__media {
  position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 9; padding: 24px;
  background: var(--color-card); border-radius: var(--radius-panel); overflow: hidden;
}
@media (min-width: 768px) { .split__media { aspect-ratio: auto; min-height: 520px; padding: 40px; } }
/* 사진이 들어오기 전 자리표시: 짧은 Sora 헤드워드만 둔다 */
.split__headword {
  margin: 0; font: 800 44px/0.9 var(--font-display); letter-spacing: -0.045em; text-transform: lowercase;
}
@media (min-width: 768px) { .split__headword { font-size: 64px; } }
.split__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 24px; background: var(--color-panel); border-radius: var(--radius-panel);
}
@media (min-width: 768px) { .split__text { padding: 56px; } }
.split__text h2 { margin: 0 0 16px; font-size: 32px; font-weight: 700; line-height: 1.15; text-transform: lowercase; }
@media (min-width: 1200px) { .split__text h2 { font-size: 48px; } }
.split__text p { max-width: 60ch; }
.split__text .bs-btn { align-self: flex-start; margin-top: 8px; }

/* ===== 기능 소개 화면 조각(목업) — 실제 화면을 단순화한 장식용 카드. 마우스를 올리면 살짝 펼쳐진다 ===== */
.split__media { align-items: stretch; flex-direction: column; justify-content: space-between; gap: 24px; }
.split__media .split__headword { position: relative; z-index: 1; }
@media (max-width: 767px) { .split__media { aspect-ratio: auto; min-height: 380px; } }
.mock { position: relative; flex: none; width: 100%; max-width: 440px; height: 270px; margin: 8px auto 0; font-size: 13px; line-height: 1.3; }
.mock p { margin: 0; }
.mock__card {
  position: absolute; left: 0; right: 0; padding: 14px 16px;
  background: var(--color-page); border-radius: var(--radius-media); box-shadow: var(--shadow-float);
  transition: transform var(--dur-editorial) var(--ease-editorial);
}
.mock__muted { color: var(--color-ink-muted); font-size: 12px; }
.mock__name { font-weight: 700; color: var(--color-ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock__badge { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700;
  background: var(--color-panel); color: var(--color-ink); white-space: nowrap; }
.mock__badge--ok { background: var(--color-success-tint); color: var(--color-success); }
.mock__badge--warn { background: var(--color-warning-tint); color: var(--color-warning); }

/* 01 검사 결과: 입력 바 → 판정 → 판매자 행이 계단처럼 겹친다 */
.mock__bar { top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-radius: var(--radius-pill); }
.mock__url { color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock__btn { flex: none; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-page); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.mock__verdict { top: 64px; left: 18px; right: -6px; border-left: 3px solid var(--color-success); }
.mock__label { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; margin-bottom: 4px !important; }
.mock__label svg { width: 20px; height: 20px; flex: none; }
.mock__label--ok { color: var(--color-success); }
.mock__rows { top: 148px; left: 36px; right: -12px; display: grid; gap: 10px; }
.mock__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.mock__price { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.split:hover .mock__verdict { transform: translate(6px, 6px); }
.split:hover .mock__rows { transform: translate(12px, 14px); }

/* 02 공식 판매처: 판매자 카드 3장 부채꼴 */
.mock--fan .mock__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av name badge" "av id badge"; gap: 2px 12px; align-items: center; width: 92%; left: 4%; right: auto; transform-origin: 50% 120%; }
.mock__avatar { grid-area: av; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-panel); font: 700 15px/1 var(--font-body); }
.mock--fan .mock__name { grid-area: name; }
.mock__id { grid-area: id; color: var(--color-ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.mock--fan .mock__badge { grid-area: badge; }
/* 뒤 카드도 이름·배지 줄이 보이도록 위아래로 충분히 벌린다 */
.mock__seller--1 { top: 150px; }
.mock__seller--2 { top: 78px; transform: rotate(-3deg); }
.mock__seller--3 { top: 6px; transform: rotate(3deg); }
.split:hover .mock__seller--2 { transform: rotate(-5deg) translateX(-12px); }
.split:hover .mock__seller--3 { transform: rotate(5deg) translateX(12px); }

/* 03 저널: 영상 요약 카드 + 인용 말풍선 */
.mock__video { top: 0; width: 74%; right: auto; padding: 12px 12px 16px; }
.mock__thumb { position: relative; aspect-ratio: 16 / 8; margin-bottom: 12px; border-radius: 12px; background: var(--color-blush); overflow: hidden; }
.mock__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mock__play, .mock__time { z-index: 1; }
.mock__play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--color-page); }
.mock__play::after { content: ""; position: absolute; left: 17px; top: 13px; border-left: 14px solid var(--color-ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.mock__time { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 6px; background: var(--color-ink-strong); color: var(--color-page); font-size: 11px; }
.mock__chip { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-ink); font-size: 11px; font-weight: 600; }
.mock__title { font-size: 16px; font-weight: 700; color: var(--color-ink-strong); margin-bottom: 2px !important; }
/* 말풍선은 카드 오른쪽 아래 모서리에 걸쳐 제목을 가리지 않게 */
.mock__quote { top: 196px; left: 46%; right: -8px; border-radius: var(--radius-media) var(--radius-media) var(--radius-media) 4px; }
.mock__quote p:first-child { font-size: 14px; font-weight: 600; color: var(--color-ink-strong); margin-bottom: 6px; }
.split:hover .mock__video { transform: translate(-6px, -6px); }
.split:hover .mock__quote { transform: translate(8px, 8px); }

@media (min-width: 768px) {
  .mock { font-size: 14px; }
  .mock { height: 320px; }
  .mock__rows { top: 156px; }
  .mock__seller--1 { top: 176px; }
  .mock__seller--2 { top: 90px; }
  .mock__quote { top: 252px; }
}
/* 휴대폰: 좁은 폭에 맞게 배지를 이름 아래로 내리고, 말풍선은 한 줄 설명을 빼서 헤드워드와 겹치지 않게 */
@media (max-width: 767px) {
  .mock--fan .mock__card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av name" "av badge"; padding: 10px 14px; }
  .mock--fan .mock__id { display: none; }
  .mock--fan .mock__badge { justify-self: start; font-size: 10px; }
  .mock__seller--1 { top: 136px; }
  .mock__seller--2 { top: 68px; }
  .mock__quote { top: 200px; left: 42%; }
  .mock__quote .mock__muted { display: none; }
}
/* 데스크톱에서는 화면 조각을 통째로 키운다(요청: 너무 작음) — zoom은 글자를 흐리지 않고 간격까지 같이 키운다 */
@media (min-width: 1000px) { .mock { zoom: 1.2; } }
@media (min-width: 1300px) { .mock { zoom: 1.4; } .split__media { min-height: 600px; } }
@media (prefers-reduced-motion: reduce) { .mock__card { transition: none; } }

/* ===== 4. 후기 (문서에 없는 UI — Cards/Badges 규칙만으로 단순하게, hover 없음) ===== */
.reviews__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); } }
@media (min-width: 1200px) { .reviews__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.review { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 24px;
  background: var(--color-page); border-radius: var(--radius-panel); }
.review blockquote { margin: 0; flex: 1; }
.review blockquote p { margin: 0; }
.review figcaption { font-size: 15px; line-height: 1.5; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 16px;
  background: var(--color-ink); color: var(--color-page); border-radius: var(--radius-pill);
  font: 700 13px/1.2 var(--font-display); letter-spacing: -0.01em; text-transform: lowercase;
}

/* ===== 5. FAQ (I-04, data-single) ===== */
.faq-layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1000px) { .faq-layout { grid-template-columns: 1fr 2fr; gap: 64px; } }
.faq-layout .bs-acc__inner p { max-width: 65ch; }
/* 질문하기 — 아코디언 아래, 버튼을 누르면 입력 칸이 펼쳐진다 */
/* 닫혀 있을 때는 문구 + 버튼 한 줄, 버튼을 누르면 아래로 입력 칸이 펼쳐진다 */
.ask { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-divider); }
.ask__lead { margin: 0; font-size: 17px; font-weight: 700; }
.ask__form { display: grid; gap: 16px; flex-basis: 100%; margin-top: 8px; max-width: 640px; }
/* hidden 속성이 위 display: grid에 덮이지 않게(처음부터 펼쳐져 보이던 버그) */
.ask__form[hidden], .ask__done[hidden] { display: none; }
.ask__field { display: grid; gap: 8px; }
.ask__label { font-size: 15px; font-weight: 600; }
.ask__optional { font-weight: 400; }
.ask__form textarea.bs-input { min-height: 140px; }
.ask__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ask__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ask__note { margin: 0; font-size: 15px; }
.ask__done { flex-basis: 100%; margin: 0; font-weight: 600; }
.ask__form .bs-field__error { margin: 0; }

/* ===== 6. Journal 미리보기 (I-05 media card) ===== */
.journal__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.journal__head .section-title { margin: 0; }
/* 제목 바로 아래 칩: 제목과의 간격은 좁게, 카드와는 넓게 */
.journal__head:has(+ .journal__filter) { margin-bottom: 20px; }
.journal__filter { margin-bottom: 40px; }
/* 휴대폰: 칩을 한 줄로 두고 옆으로 밀어서 본다(여러 줄로 쌓이면 카드가 너무 밀려남) */
@media (max-width: 767px) {
  .journal__filter .bs-filter__list { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
  .journal__filter .bs-filter__list::-webkit-scrollbar { display: none; }
  .journal__filter .bs-btn--chip { min-height: 40px; padding: 0 18px; white-space: nowrap; }
}
.journal .bs-mgrid { gap: 48px; }
@media (min-width: 1200px) { .journal .bs-mgrid { grid-template-columns: repeat(3, 1fr); gap: 48px 32px; } }
.journal .bs-mcard__title { font-size: 17px; line-height: 1.35; }
@media (min-width: 768px) { .journal .bs-mcard__title { font-size: 22px; } }
.bs-mcard__source { color: var(--color-ink); }
.bs-mcard__media--empty { display: flex; align-items: flex-end; padding: 24px; }
.journal__more { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-divider); }
.journal__more ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px 32px; }
@media (min-width: 768px) { .journal__more ul { grid-template-columns: 1fr 1fr; } }
.journal__more a { text-decoration: none; }
.journal__more a:hover { text-decoration-line: underline; }
.journal__actions { margin-top: 40px; text-align: center; }

/* ===== 7. 푸터 (크림 패널) ===== */
.site-footer { padding: 48px 24px 24px; background: var(--color-panel); border-radius: var(--radius-panel); overflow: hidden; }
@media (min-width: 768px) { .site-footer { padding: 64px 56px 32px; } }
.site-footer__cols { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
.site-footer__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.site-footer ul a { text-decoration: none; }
.site-footer ul a:hover { text-decoration-line: underline; }
.site-footer__disclosure { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-ink); font-size: 13px; line-height: 1.5; }
.site-footer__disclosure p { margin: 0 0 8px; max-width: 90ch; }
.site-footer__wordmark {
  margin: 32px 0 0; font: 800 clamp(48px, 15vw, 280px)/0.85 var(--font-display);
  letter-spacing: -0.05em; text-transform: lowercase; text-align: center; white-space: nowrap;
}

/* ===== 글·목록 페이지 프레임 (본문 + 오른쪽 읽을거리) ===== */
.page { width: 100%; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter); }
.page > main { width: 100%; min-width: 0; padding: 32px 0; }
@media (min-width: 768px) { .page > main { padding: 48px 0; } }
@media (min-width: 1000px) {
  .page { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .page > aside { position: sticky; top: var(--gutter); max-height: calc(100vh - 48px); overflow-y: auto; }
}
.crumbs { margin: 0 0 24px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration-line: underline; }

.reading { padding: 32px 24px; background: var(--color-panel); border-radius: var(--radius-panel); font-size: 15px; line-height: 1.5; }
.reading h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.reading .home-link { margin: 0 0 16px; }
.reading .home-link a { font-weight: 700; text-decoration: none; }
.reading ul { list-style: none; margin: 0 0 16px; padding: 0; }
.reading li { padding: 12px 0; border-top: 1px solid var(--color-divider); }
.reading li a { font-weight: 600; text-decoration: none; }
.reading li a:hover, .reading li a:focus-visible, .reading li a[aria-current="page"] { text-decoration-line: underline; }
.reading p.desc { margin: 4px 0 0; }
.reading .muted { margin: 4px 0 0; font-size: 13px; }

/* 글 본문 */
article { max-width: 720px; }
article h1, .page-title { margin: 0 0 16px; font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
@media (min-width: 768px) { article h1, .page-title { font-size: 48px; } }
article h2 { margin: 48px 0 12px; font-size: 26px; font-weight: 700; line-height: 1.2; }
article h3 { margin: 32px 0 8px; font-size: 17px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
article img { display: block; max-width: 100%; height: auto; margin: 24px 0; border-radius: var(--radius-media); }
article figure { margin: 0; }
article .byline { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
/* 소제목 옆 영상 구간(타임스탬프): 제목보다 작고 흐리게 */
article h2 .ts { font-size: 15px; font-weight: 500; color: var(--color-ink-muted); white-space: nowrap; }
/* 글 속 막대 비교 도표(글자로 그려서 모바일에서도 읽히고 검색엔진도 읽는다) */
.bar-chart { margin: 24px 0; padding: 24px; background: var(--color-panel); border-radius: var(--radius-media); }
.bar-chart__title { margin: 0 0 12px; font-weight: 700; color: var(--color-ink-strong); }
.bar-chart__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; padding: 10px 0; }
.bar-chart__label { font-weight: 600; }
.bar-chart__value { font-weight: 700; color: var(--color-ink-strong); text-align: right; }
.bar-chart__track { grid-column: 1 / -1; height: 14px; background: var(--color-page); border-radius: var(--radius-pill); overflow: hidden; }
.bar-chart__bar { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--color-ink); }
.bar-chart__bar--accent { background: var(--color-accent); }
.bar-chart__bar--strong { background: var(--color-ink-strong); }
.bar-chart__w6 { width: 6%; } .bar-chart__w55 { width: 55%; } .bar-chart__w100 { width: 100%; }
.bar-chart__note { margin: 8px 0 0; font-size: 13px; color: var(--color-ink-muted); }
/* 글 맨 위 핵심 요약 / 글 끝 자주 묻는 질문 */
.key-points { margin: 24px 0 32px; padding: 24px; background: var(--color-card); border-radius: var(--radius-media); }
.key-points h2 { margin: 0 0 12px; font-size: 20px; }
.key-points ul { margin: 0; padding-left: 20px; }
.key-points li + li { margin-top: 8px; }
.keep-reading { margin-top: 48px; }
.keep-reading h2 { margin-top: 0; }
.keep-reading ul { list-style: none; margin: 0; padding: 0; }
.keep-reading li { padding: 16px 0; border-top: 1px solid var(--color-divider); }
.keep-reading li a { font-weight: 700; }
.keep-reading .muted { display: block; margin-top: 4px; }
.post-faq { margin-top: 48px; }
.post-faq h2 { margin-top: 0; }
.post-faq h3 { margin: 24px 0 8px; font-size: 17px; letter-spacing: 0; text-transform: none; }
.post-faq p { margin: 0; max-width: 65ch; }
.body { overflow-wrap: anywhere; }
.body ul, .body ol { padding-left: 24px; }
.body blockquote { margin: 24px 0; padding: 16px 24px; background: var(--color-panel); border-radius: var(--radius-media); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; }
.table-wrap table { border-collapse: collapse; font-size: 13px; min-width: 900px; line-height: 1.4; }
.table-wrap th, .table-wrap td { border-bottom: 1px solid var(--color-divider); padding: 8px; vertical-align: top; text-align: left; overflow-wrap: normal; }
.table-wrap tbody th { min-width: 110px; }
.table-wrap thead th { background: var(--color-panel); font-weight: 700; }
.cta { margin: 48px 0 0; padding: 32px 24px; background: var(--color-panel); border-radius: var(--radius-panel); }
.cta p { margin: 0 0 16px; }

/* 블로그 목록 (I-05) */
.blog-intro { max-width: 720px; margin-bottom: 48px; }

/* ===== 판매자 체크 결과 (design.md Result states) ===== */
#out:empty { display: none; }
/* 결과 페이지(/check): 위에 작은 입력 바, 아래 결과. 홈 히어로보다 낮게 해서 결과가 바로 보이게 */
.check-page { display: flex; flex-direction: column; gap: var(--gutter); }
.check-page__bar { padding-top: 32px; padding-bottom: 32px; }
@media (min-width: 768px) { .check-page__bar { padding-top: 40px; padding-bottom: 40px; } }
.check-page__title { margin: 0 0 16px; font-size: 24px; font-weight: 700; line-height: 1.2; text-align: center; text-transform: lowercase; }
.result {
  max-width: 1100px; margin: 0 auto; width: 100%; padding: 32px 24px;
  background: var(--color-panel); border-radius: var(--radius-panel);
}
@media (min-width: 768px) { .result { padding: 48px 56px; } }
.result h2, .result h3 { margin: 0; }
.result__title { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* 1) 판정 줄: 아이콘 + 판정 라벨(trust 색) + 한 문장 */
.verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center;
  padding: 0 0 24px 16px; border-left: 3px solid var(--color-ink); }
.verdict__icon { width: 28px; height: 28px; }
.verdict__label { font-size: 28px; font-weight: 700; line-height: 1.2; }
.verdict__text { grid-column: 2; margin: 0; }
.verdict--verified { border-left-color: var(--color-success); }
.verdict--verified .verdict__icon, .verdict--verified .verdict__label { color: var(--color-success); }
.verdict--caution { border-left-color: var(--color-warning); }
.verdict--caution .verdict__icon, .verdict--caution .verdict__label { color: var(--color-warning); }
.verdict--counterfeit { border-left-color: var(--color-error); }
.verdict--counterfeit .verdict__icon, .verdict--counterfeit .verdict__label { color: var(--color-error); }

/* 2) 상품 정보 · 근거 행: 촘촘한 Linear식 행 */
.facts { margin: 24px 0 0; padding: 0; border-top: 1px solid var(--color-divider); font-size: 15px; line-height: 1.5; }
.rows { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); margin: 0; }
.rows dt, .rows dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--color-divider); }
.rows dt { padding-right: 16px; font-weight: 700; }
.rows dd + dd { grid-column: 2; border-top: 0; }
.rows dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .rows { grid-template-columns: 1fr; }
  .rows dt { padding-bottom: 0; border-bottom: 0; }
  .rows dd + dd { grid-column: 1; }
}

/* 3) 근거 목록: I-04 아코디언(여러 개 열림) */
.evidence { margin-top: 32px; }
.evidence .bs-acc__item:first-child { border-top: 1px solid var(--color-divider); }
.evidence .bs-acc__trigger { padding: 12px 0; font-size: 15px; letter-spacing: 0; text-transform: none; }
.notice__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.evidence__mark { display: inline-flex; align-items: center; gap: 8px; }
.evidence .bs-acc__inner > *:first-child { margin-top: 0; }
.seller-note { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.seller-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.seller-list { margin: 0; padding: 0; list-style: none; }
.seller-list > li { padding: 12px 0; border-top: 1px solid var(--color-divider); font-size: 15px; line-height: 1.5; }
.seller-list > li:first-child { border-top: 0; }
.seller-list b { font-weight: 700; }

/* 상태 표시(배지): 신뢰 배지는 옅은 바탕 + 아이콘 + 글자, 중립 배지는 잉크 테두리 */
/* inline-flex로 두면 읽기 순서상 줄바꿈이 생겨서 일반 inline으로 둔다 */
.status { display: inline; padding: 2px 12px; border-radius: var(--radius-pill);
  font: 600 13px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--color-divider); }
.status svg { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.status--verified { background: var(--color-success-tint); color: var(--color-success); box-shadow: none; }
.status--caution { background: var(--color-warning-tint); color: var(--color-warning); box-shadow: none; }
.status--counterfeit { background: var(--color-error-tint); color: var(--color-error); box-shadow: none; }

/* 경고 문구: 판정이 아닌 안내는 중립 잉크 */
.notice { margin: 16px 0 0; padding: 12px 16px; background: var(--color-page); border-radius: var(--radius-media); font-size: 15px; line-height: 1.5; }

/* 4) 다음 행동: primary 1개 + outline */
.result__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.result__actions .bs-btn { min-height: 48px; padding: 0 28px; font-size: 15px; }
@media (max-width: 767px) { .result__actions .bs-btn { width: 100%; } }
.result__disclaimer { margin: 24px 0 0; font-size: 13px; line-height: 1.5; }

/* 오류(판정 아님): 중립 잉크 + 다시 시도 */
.result--error .verdict { border-left-color: var(--color-ink); }

/* 판매자 체크 박스(브랜드 페이지) */
.check-box { margin: 32px 0; padding: 32px 24px; background: var(--color-panel); border-radius: var(--radius-panel); }
@media (min-width: 768px) { .check-box { padding: 40px; } }
.check-box h2 { margin-top: 0; }
.check-box .example-grid { margin-top: 16px; }
@media (min-width: 768px) { .check-box .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.check-box .result { padding: 24px 0 0; background: none; }

/* ===== 모바일 다듬기 (767px 이하) =====
   1) 기능 소개: 화면 조각 + 설명을 한 장의 카드로 붙인다
   2) 후기·저널 카드: 세로로 길게 쌓지 않고 옆으로 밀어서 넘긴다(다음 카드가 살짝 보이게) */
@media (max-width: 767px) {
  .split { gap: 0; }
  .split__media { min-height: 330px; padding: 20px 20px 16px; border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
  .split__text { padding: 28px 24px 32px; border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
  .split__headword { font-size: 34px; }
  .split__text h2 { font-size: 28px; }

  .reviews__grid {
    display: flex; gap: 12px; margin: 0 -24px; padding: 4px 24px 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .reviews__grid::-webkit-scrollbar { display: none; }
  .reviews__grid > .review { flex: 0 0 82%; scroll-snap-align: start; }

  /* 저널: 큰 사진 위, 그 아래 큼직한 제목의 한 열 카드(사진과 제목이 잘 보이게) */
  .journal .bs-mgrid { display: grid; grid-template-columns: 1fr; gap: 36px; }
  .journal .bs-mcard { display: block; }
  .journal .bs-mcard__media { aspect-ratio: 16 / 10; margin: 0; border-radius: var(--radius-media); }
  .journal .bs-mcard__title { margin: 16px 0 6px; font-size: 22px; line-height: 1.25; text-transform: none; }
  .journal .bs-mcard__source { margin: 0; font-size: 15px; }
  .journal .bs-mcard__desc { display: none; }

  /* 히어로: 더 크고 또렷한 제목 + 입력창 안 작은 버튼 + 한 줄짜리 예시 타일 */
  .hero { padding-top: 56px; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(46px, 13vw, 60px); line-height: 1.02; letter-spacing: -0.035em; max-width: 360px; }
  .hero__sub { font-size: 17px; margin-bottom: 24px; max-width: 300px; }
  .hero .bs-linkbar, .check-page .bs-linkbar { flex-direction: row; border-radius: var(--radius-pill); padding: 6px 6px 6px 4px; }
  .hero .bs-linkbar .bs-input, .check-page .bs-linkbar .bs-input { min-height: 48px; padding: 0 14px; font-size: 16px; }
  .hero .bs-linkbar .bs-btn, .check-page .bs-linkbar .bs-btn { width: auto; min-height: 44px; padding: 0 18px; font-size: 14px; }
  .hero-examples { margin-top: 22px; }
  .hero-examples__title { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 10px; }
  .hero-examples__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .example-chip { flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 12px; text-align: center; }
  .example-chip__media { width: 52px; height: 52px; }
  .example-chip__text { width: 100%; }
  .example-chip .example-brand { font-size: 10px; letter-spacing: 0.06em; }
  .example-chip .example-title { font-size: 12px; line-height: 1.25; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ===== 결과 페이지 리포트 (셀러 체크 · 제품 체크 · 유사 제품 · 자세한 분석) ===== */
.report.result { display: flex; flex-direction: column; gap: 12px; padding: 0; background: none; border-radius: 0; }
@media (min-width: 768px) { .report.result { gap: var(--gutter); } }
.report-card { padding: 28px 22px; background: var(--color-panel); border-radius: var(--radius-panel); scroll-margin-top: 140px; }
@media (min-width: 768px) { .report-card { padding: 40px 48px; } }
.report-card__eyebrow { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.report-card .verdict { padding-bottom: 20px; }

/* 위에 붙는 탭(사이트 헤더 바로 아래) */
.report-tabs { position: sticky; top: 76px; z-index: 5; }
@media (min-width: 768px) { .report-tabs { top: 96px; } }
.report-tabs ul { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto; padding: 4px; list-style: none;
  overflow-x: auto; scrollbar-width: none; background: var(--color-page); border-radius: var(--radius-pill); box-shadow: var(--shadow-float); }
.report-tabs ul::-webkit-scrollbar { display: none; }
.report-tabs a { display: block; padding: 8px 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-control) var(--ease-control), color var(--dur-control) var(--ease-control); }
.report-tabs a[aria-current="true"] { background: var(--color-ink); color: var(--color-page); }

/* 셀러 체크: 판매자 한 줄 + 비교 + 점수 */
.seller-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--color-divider); }
.seller-line__label { flex-basis: 100%; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink); }
.seller-line__name { font-size: 18px; font-weight: 700; color: var(--color-ink-strong); }
.seller-line__price { margin-left: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-ink-strong); }
.seller-compare { margin: 0; padding: 0 0 16px; font-size: 15px; }
.seller-compare b { color: var(--color-success); }

.score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: center; margin-top: 8px; padding: 18px; background: var(--color-page); border-radius: var(--radius-media); }
.score__ring { --tone: var(--color-ink); display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: conic-gradient(var(--tone) calc(var(--score, 0) * 1%), var(--color-card) 0); }
.score__ring span { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--color-page);
  font: 800 28px/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink-strong); }
.score--good .score__ring { --tone: var(--color-success); }
.score--mid .score__ring { --tone: var(--color-warning); }
.score--low .score__ring { --tone: var(--color-error); }
.score--soon .score__ring { background: var(--color-card); }
.score--soon .score__ring span { color: var(--color-ink-muted); }
.score__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.score__soon { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: var(--radius-pill); background: var(--color-panel); font-size: 12px; font-weight: 600; }
.score__hint { margin: 0; font-size: 14px; line-height: 1.5; }
.score__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.score__list li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 28px; align-items: center; gap: 10px; }
.score__list b { text-align: right; font-variant-numeric: tabular-nums; }
.score__bar { height: 6px; background: var(--color-card); border-radius: var(--radius-pill); overflow: hidden; }
.score__bar i { display: block; height: 100%; background: var(--color-ink); border-radius: inherit; }

/* 제품 체크 */
.product { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
@media (min-width: 768px) { .product { grid-template-columns: 160px minmax(0, 1fr); gap: 28px; } }
.product__media { aspect-ratio: 1; padding: 10px; background: var(--color-page); border-radius: var(--radius-media); }
.product__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product__brand { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.product__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--color-ink-strong); }
@media (min-width: 768px) { .product__title { font-size: 22px; } }
.product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; font-size: 15px; }
.product__price { font-weight: 700; color: var(--color-ink-strong); }
.product__asin { margin: 6px 0 0; font-size: 13px; color: var(--color-ink-muted); }
.stars { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.stars__bar::before { content: "★"; color: var(--color-ink-strong); }
.stars__count { color: var(--color-ink-muted); }
.customers-say { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-divider); }
.customers-say__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.customers-say p { margin: 0; line-height: 1.6; }
.customers-say__source { margin-top: 12px !important; font-size: 13px; color: var(--color-ink-muted); }
.aspects { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.aspect { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--color-page); font-size: 14px; }
.aspect__icon { font-weight: 700; }
.aspect--positive .aspect__icon { color: var(--color-success); }
.aspect--mixed .aspect__icon { color: var(--color-warning); }
.aspect--negative .aspect__icon { color: var(--color-error); }
.aspect__count { color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }

/* 유사 제품 */
.recs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 767px) {
  .report-tabs ul { max-width: calc(100vw - 24px); }
  .report-tabs a { padding: 8px 12px; font-size: 13px; }
  .check-page__bar { padding: 24px 16px; }
  .recs { display: flex; gap: 12px; margin: 0 -22px; padding: 0 22px 4px; scroll-padding: 0 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .recs::-webkit-scrollbar { display: none; }
  .rec { flex: 0 0 62%; scroll-snap-align: start; }
}
.rec { display: flex; flex-direction: column; gap: 8px; }
.rec__link { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.rec__media { aspect-ratio: 1; padding: 14px; background: var(--color-page); border-radius: var(--radius-media); }
.rec__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rec__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.4; color: var(--color-ink-strong); }
.rec__link:hover .rec__title { text-decoration: underline; text-decoration-color: var(--color-accent); }
.rec__price { font-size: 15px; font-weight: 700; }
.rec__check { align-self: flex-start; padding: 0; border: 0; background: none; font: 600 13px/1.4 var(--font-body); color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 자세한 분석(나중에 로그인 뒤로) */
.report-card--details { padding-top: 8px; padding-bottom: 8px; }
.report-card--details > .bs-accordion > .bs-acc__item > .bs-acc__heading .bs-acc__trigger { padding: 18px 0; font-size: 15px; text-transform: none; letter-spacing: 0; }
.result__actions--end { justify-content: center; margin-top: 8px; }

/* 수다챗: 데스크톱은 리포트 아래 입력 카드, 모바일은 화면 하단에 떠 있는 입력창 */
.sudachat { max-width: 1100px; width: 100%; margin: 0 auto; padding: 24px; background: var(--color-panel); border-radius: var(--radius-panel); }
.sudachat__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.sudachat__form { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; background: var(--color-page); border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px var(--color-divider); transition: box-shadow var(--dur-control) var(--ease-control); }
.sudachat__form:focus-within { box-shadow: 0 0 0 2px var(--color-ink); }
.sudachat__input { flex: 1; min-width: 0; min-height: 40px; border: 0; background: transparent; font: 400 16px/1.4 var(--font-body); color: var(--color-ink); outline: none; }
.sudachat__send { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--color-ink); color: var(--color-page); cursor: pointer; }
.sudachat__send svg { width: 18px; height: 18px; }
.sudachat__send:disabled { opacity: 0.5; }
.sudachat__reply { margin: 12px 0 0; padding: 10px 14px; background: var(--color-page); border-radius: var(--radius-media); font-size: 14px; line-height: 1.5; }
@media (max-width: 767px) {
  .sudachat { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; width: auto; padding: 0; background: none; }
  .sudachat__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sudachat__form { box-shadow: var(--shadow-float), 0 0 0 1px var(--color-divider); }
  .sudachat__reply { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); margin: 0; box-shadow: var(--shadow-float); }
  body.has-sudachat .site { padding-bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) { .report-tabs a, .sudachat__form { transition: none; } }
.product__soon { margin: 16px 0 0; padding: 12px 16px; background: var(--color-page); border-radius: var(--radius-media); font-size: 14px; line-height: 1.5; }
.product-json h3 { margin: 0 0 14px; font-size: 18px; }
.product-json pre { max-height: 320px; overflow: auto; margin: 0; padding: 16px; border-radius: 12px; background: var(--color-page); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.product-json details { margin-top: 16px; }
.product-json summary { cursor: pointer; font-weight: 700; }
.product-json details pre { margin-top: 12px; max-height: 560px; }
.product:not(:has(.product__media)) { grid-template-columns: 1fr; }

/* 리포트 탭(Seller · Product): 더 크게 + 선택된 탭은 포인트 컬러(사용자 요청) */
.report-tabs ul { padding: 5px; gap: 6px; }
.report-tabs a { min-width: 120px; padding: 12px 28px; font-size: 16px; font-weight: 700; text-align: center; color: var(--color-ink); }
.report-tabs a:hover { color: var(--color-accent-strong); }
.report-tabs a[aria-current="true"] { background: var(--color-accent); color: var(--color-page); }
@media (max-width: 767px) {
  .report-tabs a { min-width: 0; flex: 1; padding: 11px 24px; font-size: 15px; }
}

/* ===== 리포트 2차: 진짜 탭 + 점수 원 + 판매자/제품 2열 ===== */
.report-tabs { display: flex; gap: 6px; width: max-content; margin: 0 auto; padding: 5px;
  background: var(--color-page); border-radius: var(--radius-pill); box-shadow: var(--shadow-float); isolation: isolate; }
.report-tabs::before { content: ""; position: absolute; z-index: 0; pointer-events: none; top: 5px; bottom: 5px; left: 5px;
  width: calc(50% - 8px); border-radius: var(--radius-pill); background: var(--color-accent);
  transform: translateX(0); transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1); }
.report-tabs[data-active="product"]::before { transform: translateX(calc(100% + 6px)); }
.report-tabs [role="tab"] { position: relative; z-index: 1; flex: 1; min-width: 132px; padding: 12px 28px; border: 0;
  border-radius: var(--radius-pill); background: transparent;
  font: 700 16px/1.2 var(--font-body); color: var(--color-ink); cursor: pointer;
  transition: color 180ms ease; }
.report-tabs [role="tab"]:hover { color: var(--color-accent-strong); }
.report-tabs [role="tab"][aria-selected="true"] { background: transparent; color: var(--color-page); }
.report-tabs [role="tab"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 767px) {
  .report-tabs { width: 100%; max-width: 360px; }
  .report-tabs [role="tab"] { flex: 1; min-width: 0; padding: 11px 16px; font-size: 15px; }
}
.report-panel { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 768px) { .report-panel { gap: var(--gutter); } }
.report-panel[hidden] { display: none; }
.report-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-ink); }

/* 판매자(크게) + 점수 원 나란히 */
.who { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 20px; align-items: center;
  margin-top: 8px; padding: 22px; background: var(--color-page); border-radius: var(--radius-media); }
@media (min-width: 768px) { .who { padding: 28px 32px; gap: 24px 40px; } }
.who__label { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.who__name { margin: 0 0 10px; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-ink-strong); overflow-wrap: anywhere; }
@media (min-width: 768px) { .who__name { font-size: 34px; } }
.who__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.who__price { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-ink-strong); }
.who__alt { margin: 12px 0 0; font-size: 14px; }
.who__others { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 12px;
  font-size: 12px; line-height: 1.5; color: var(--color-ink-muted); }
.who__other-seller { max-width: 100%; overflow-wrap: anywhere; }
.who__other-status { font-weight: 700; color: var(--color-warning); }
.who__criteria { margin: 10px 0 0; font-size: 13px; color: var(--color-ink); text-align: right; }
.who__criteria b { color: var(--color-ink-strong); }
/* 제품: 왼쪽 이미지 + 오른쪽 점수 원 */
.who--product { grid-template-columns: minmax(0, 1fr) auto; }
.who__media { aspect-ratio: 1; max-width: 220px; width: 100%; padding: 10px; display: grid; place-items: center; }
.who__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.who__media-empty { font-size: 13px; color: var(--color-ink-muted); }
#product-check .product__info { margin-top: 18px; }

/* 점수 원: 테두리 게이지가 값까지 차오른다(result.js가 재생) */
.ring { position: relative; display: grid; place-items: center; width: 132px; height: 132px; flex: none; }
@media (min-width: 768px) { .ring { width: 156px; height: 156px; } }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--color-card); stroke-width: 10; }
.ring__gauge { fill: none; stroke: var(--color-ink); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.ring--good .ring__gauge { stroke: var(--color-success); }
.ring--mid .ring__gauge { stroke: var(--color-warning); }
.ring--low .ring__gauge { stroke: var(--color-error); }
.ring__value { position: relative; margin-top: -14px; font: 800 38px/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink-strong); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .ring__value { font-size: 44px; } }
.ring--good .ring__value { color: var(--color-success); }
.ring--mid .ring__value { color: var(--color-warning); }
.ring--low .ring__value { color: var(--color-error); }
.ring__label { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
@media (min-width: 768px) { .ring__label { bottom: 36px; } }
.ring__caption, .ring__soon { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--color-ink-muted); }
.ring--empty .ring__value { color: var(--color-ink-muted); }
.ring__soon { padding: 1px 10px; border-radius: var(--radius-pill); background: var(--color-panel); font-weight: 600; color: var(--color-ink); }
.ring--empty { margin-bottom: 24px; }
@media (prefers-reduced-motion: reduce) { .ring__gauge, .report-tabs [role="tab"], .report-tabs::before { transition: none; } }
@media (max-width: 420px) {
  .who { grid-template-columns: minmax(0, 1fr) auto; padding: 18px; gap: 14px; }
  .ring { width: 112px; height: 112px; }
  .ring__value { font-size: 32px; margin-top: -12px; }
  .ring__label { bottom: 24px; font-size: 10px; }
  .who__name { font-size: 22px; }
}
/* 원 이름표는 원 아래로(좁은 화면에서 원 안 글자가 잘리던 문제) */
.ring { margin-bottom: 26px; }
.ring__value { margin-top: 0; }
.ring__label { top: calc(100% + 8px); bottom: auto; white-space: nowrap; font-size: 11px; }
.ring__caption, .ring__soon { top: calc(100% + 28px); }
.ring--empty, .ring:has(.ring__caption) { margin-bottom: 50px; }
@media (max-width: 420px) { .ring__value { margin-top: 0; } .ring__label { bottom: auto; } }

/* 검사 중에는 헤더 아래 화면 전체에 진행 화면을 표시한다. */
.loading { max-width: 560px; width: 100%; margin: 0 auto; padding: 40px 24px 36px; text-align: center;
  background: var(--color-panel); border-radius: var(--radius-panel); }
@media (min-width: 768px) { .loading { padding: 56px 48px 44px; } }
.loading__ring { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 24px; }
.loading__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: loading-spin 1.1s linear infinite; }
.loading__track { fill: none; stroke: var(--color-card); stroke-width: 9; }
.loading__arc { fill: none; stroke: var(--color-accent); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 90 237; }
.loading__logo { font: 800 22px/1 var(--font-display); letter-spacing: -0.04em; color: var(--color-accent); animation: loading-pulse 1.6s ease-in-out infinite; }
.loading__title { margin: 0 0 20px; font-size: 22px; font-weight: 800; color: var(--color-ink-strong); }
.loading__steps { display: grid; gap: 12px; width: max-content; max-width: 100%; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.loading__step { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--color-ink-muted);
  transition: color var(--dur-control) var(--ease-control); }
.loading__dot { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--color-divider); }
.loading__step.is-active { color: var(--color-ink-strong); font-weight: 700; }
.loading__step.is-active .loading__dot { box-shadow: inset 0 0 0 2px var(--color-accent); }
.loading__step.is-active .loading__dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--color-accent); animation: loading-pulse 1s ease-in-out infinite; }
.loading__step.is-done { color: var(--color-ink); }
.loading__step.is-done .loading__dot { background: var(--color-success); box-shadow: none; }
.loading__step.is-done .loading__dot::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px;
  border: solid var(--color-page); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes loading-pulse { 50% { opacity: 0.45; } }
.loading--full { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center;
  max-width: none; margin: 0; padding: 120px 24px 48px; border-radius: 0; background: var(--color-panel);
  animation: loading-in var(--dur-control) var(--ease-control) both; }
.loading--full .loading__ring { width: 136px; height: 136px; }
.loading--full .loading__logo { font-size: 28px; }
.loading--full .loading__title { font-size: 26px; }
body.is-loading { overflow: hidden; }
body.is-loading .check-page__bar, body.is-loading .sudachat { visibility: hidden; }
.report { animation: report-in 0.5s var(--ease-control) both; }
@keyframes loading-in { from { opacity: 0; } }
@keyframes report-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .loading__ring svg, .loading__logo, .loading__step.is-active .loading__dot::after,
  .loading--full, .report { animation: none; }
}

/* 영상 데모 전용: 링크에 지정된 가짜(비공식) 바이박스 판매자. 색은 error 토큰만 쓴다. */
.who--fake { border-left: 3px solid var(--color-error); border-radius: 0 var(--radius-media) var(--radius-media) 0; }
.who--fake .who__name { color: var(--color-ink-muted); text-decoration: line-through; text-decoration-color: var(--color-error); text-decoration-thickness: 2px; }
.who__biz { font-size: 14px; }
.switch-note { display: flex; align-items: center; gap: 10px; margin: 16px 4px 0; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.switch-note svg { width: 22px; height: 22px; color: var(--color-success); }
.ring--fake .ring__gauge { stroke: var(--color-error); }
.ring--fake .ring__value { color: var(--color-error); }


/* ===== 저널 전용 홈 (시안 A4) ===== */
/* 히어로: 사진이 밝아서 흰 글자 대신 진한 잉크를 쓴다. 기본 .hero h1의 흰 글자·그림자를 되돌린다 */
.hero--journal { min-height: 640px; }
@media (min-width: 768px) { .hero--journal { min-height: 760px; } }
.hero--journal .eyebrow { color: var(--color-ink-strong); }
.hero--journal h1 { color: var(--color-ink-strong); text-shadow: none; }
@media (min-width: 768px) { .hero--journal h1 { font-size: 88px; max-width: 880px; } }
.hero--journal .hero__sub { margin-bottom: 32px; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: auto !important; }

/* 최신 글: 크림 패널 없이 흰 바탕에 놓는다 */
.journal--open { padding: 24px 8px 8px; }
@media (min-width: 768px) { .journal--open { padding: 32px 8px 8px; } }
.journal--open .journal__head .eyebrow { margin-bottom: 10px; }
.bs-tag {
  position: absolute; z-index: 1; display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.bs-tag--frost {
  left: 12px; top: 12px; color: var(--color-ink-strong); background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* 카드 안 재생 버튼은 96px가 너무 커서 56px로 줄인다(홈 카드 한정) */
.journal--open .bs-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.journal--open .bs-play::before { width: 14px; height: 16px; margin: -8px 0 0 -5px; background: var(--color-ink-strong); }

/* 번역 원칙: 와이드 사진 패널 위 유리 카드 */
.hwt { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-panel); padding: 24px; min-height: 480px; display: flex; align-items: center; }
@media (min-width: 768px) { .hwt { padding: 56px; min-height: 560px; } }
.hwt__bg { position: absolute; inset: 0; z-index: -1; }
.hwt__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* 휴대폰: 세로로 길어져도 오른쪽의 제품이 보이게 */
@media (max-width: 767px) { .hwt__bg img { object-position: 88% 50%; } }
.hwt__card {
  width: 100%; max-width: 520px; padding: 28px 24px; border-radius: var(--radius-panel);
  background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}
@media (min-width: 768px) { .hwt__card { padding: 40px; } }
.hwt__card h2 { margin: 0 0 16px; font-size: 32px; font-weight: 700; line-height: 1.15; text-transform: lowercase; color: var(--color-ink-strong); }
@media (min-width: 768px) { .hwt__card h2 { font-size: 40px; } }
.hwt__list { margin: 28px 0; padding: 0; list-style: none; border-top: 1px solid var(--color-divider); }
.hwt__list li { border-bottom: 1px solid var(--color-divider); }
.hwt__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0;
  font-size: 17px; line-height: 1.35; color: var(--color-ink); text-decoration: none;
}
.hwt__list strong { margin-right: 8px; font-size: 20px; font-weight: 700; text-transform: lowercase; color: var(--color-ink-strong); }
.hwt__list a:hover strong { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hwt__arrow { flex: none; font-size: 18px; color: var(--color-accent-strong); }