/* ==========================================================================
   CLLESS 홈페이지 — 스타일
   레이아웃 원칙
   1. 화면은 넓게 쓰되, 글줄은 짧게 유지한다 (--measure)
   2. 섹션마다 골격과 바탕을 바꿔 스크롤에 리듬을 만든다
   3. 어두운 면은 근거에만 쓴다 — 그래서 그 면에 무게가 실린다
   ========================================================================== */

/* --- 폰트 ---------------------------------------------------------------
   에스코어 드림은 라이선스상 "배포되는 파일 형태 그대로" 써야 하므로
   WOFF2 변환·서브셋 없이 OTF 원본을 그대로 올립니다. 용량이 커서 한글은
   헤드라인에만 얹고 본문은 시스템 폰트를 씁니다.                            */
/* Outfit은 OFL이라 변환·자체호스팅에 제약이 없습니다.
   외부 CDN을 쓰지 않는 이유 — 첫 화면에서 외부 요청을 없애고,
   방문자 IP가 밖으로 나가지 않게 하기 위해서입니다. */
@font-face {
  font-family: 'Outfit';
  src: url('/assets/fonts/Outfit.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'S-Core Dream';
  src: url('/assets/fonts/SCDream6.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'S-Core Dream';
  src: url('/assets/fonts/SCDream4.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* 색 — 라벨·제품 사진에서 추출 */
  --red: #d92b27;
  --red-deep: #b81f1c;
  --orange: #e8853a;
  --amber: #2b1210;
  --amber-soft: #3d1d19;
  --amber-line: #56302a;

  --bg: #ffffff;
  --tint: #f6f3f1;
  --tint-deep: #efe9e6;
  --ink: #171413;
  --ink-mid: #5c5350;
  --ink-soft: #6f6663;      /* 주의사항·조건이 이 색이라 대비를 확보해 둡니다 */
  --line: #e6dfdc;

  /* 백틱 자리 — 본문보다 한 단계 죽인 톤. 아래 `.term` 주석 참고 */
  --term: #7a6f6b;
  --term-dark: #c0aaa4;

  /* 타이포 */
  --sans: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard',
          'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --head: 'S-Core Dream', var(--sans);
  --latin: 'Outfit', var(--sans);

  --fs-display: clamp(2.125rem, 5.2vw, 4.25rem);
  --fs-h2:      clamp(1.625rem, 3.1vw, 2.875rem);
  --fs-h3:      clamp(1.1875rem, 1.7vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 1.35vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;

  /* 치수 */
  --maxw: 1180px;
  --measure: 33em;          /* 한글 40~48자 — 읽기 좋은 줄 길이 */
  --pad-x: clamp(20px, 5vw, 56px);
  --sec-y: clamp(72px, 9vw, 132px);
  --radius: 16px;
}

/* --- 리셋 --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 지난번 히어로가 3902px로 렌더된 원인입니다. 이 줄을 빼지 마십시오 */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
blockquote { margin: 0; }

/* 한글은 어절 단위로 끊습니다 */
h1, h2, h3, .lead, .measure { word-break: keep-all; overflow-wrap: break-word; }

/* --- 원고 안의 두 가지 표시 ---------------------------------------------
   **강조** → <strong>
   `낱말`   → <span class="term">

   백틱은 코드가 아니라 "이 낱말을 가리켜 말하는 중"이라는 표시입니다.
   (`CL`은 염소 / `불검출`은 없다는 증명이 아니라 / 라벨 정면에는 `HAIR · FACE · BODY`)
   고정폭 글꼴로 받으면 개발자 문서처럼 보이므로, 색만 한 단계 죽입니다.
   어떤 바탕에서도 본문 대비가 유지되도록 전용 색을 씁니다.              */
strong { font-weight: 700; color: inherit; }
.term { color: var(--term); }
.section--dark .term, .ev-item__fig .term, .footer .term { color: var(--term-dark); }
.conds .term { color: inherit; }

/* 스크린리더 전용 */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 밑줄 링크 */
.ul { text-decoration: underline; text-underline-offset: 3px; }
.ul:hover { color: var(--red); }

/* --- 공통 골격 ----------------------------------------------------------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.section { padding-block: var(--sec-y); }
.section--tint { background: var(--tint); }
.section--dark { background: var(--amber); color: #f2e9e6; }

.measure { max-width: var(--measure); }

.eyebrow {
  font-family: var(--latin);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--red);
  margin-bottom: 14px;
}
.section--dark .eyebrow { color: var(--orange); }

.h2 { font-size: var(--fs-h2); line-height: 1.28; }
.h3 { font-size: var(--fs-h3); line-height: 1.4; }
.section--dark .h2 { color: #fff; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--ink-mid);
  margin-top: 18px;
  max-width: var(--measure);
}
.lead + .lead { margin-top: 14px; }
.section--dark .lead { color: #c4b0aa; }

.note { margin-top: 18px; font-size: var(--fs-caption); line-height: 1.75; color: var(--ink-soft); }
.section--dark .note { color: #b49b95; }

/* 팁 뱃지 — 권장 노트 앞에 작게 붙습니다. 담백하게 작게 유지하되 브랜드 레드로
   눈에 걸리게. content의 bridge.tip이 있을 때만 나옵니다(현재 홈 4 in 1 아래 수영복 팁). */
.tip__badge {
  display: inline-block;
  font-family: var(--latin);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; line-height: 1;
  color: #fff; background: var(--red);
  padding: 3px 8px; border-radius: 999px;
  margin-right: 8px; vertical-align: middle;
  position: relative; top: -1px;
}

/* 상세로 들어가는 링크 */
.more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px;
  font-size: var(--fs-small); font-weight: 600;
  color: var(--red);
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.more:hover { border-bottom-color: var(--red); }
.more__arrow { font-family: var(--latin); }
.section--dark .more { color: var(--orange); }

/* 시험 조건 — 어두운 면에서만 씁니다 */
.conds { margin-top: auto; padding-top: 20px; }
.conds li {
  font-size: var(--fs-caption); line-height: 1.6; color: #b49b95;
  padding-left: 13px; position: relative;
}
.conds li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 1px; background: var(--amber-line);
}

/* 정의 목록 — 회사·스펙·표시사항이 함께 씁니다 */
.rows { margin-top: 6px; border-top: 1px solid var(--line); }
.rows > div {
  display: grid; gap: 4px 20px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) { .rows > div { grid-template-columns: 190px 1fr; } }
.rows dt { font-size: var(--fs-caption); color: var(--ink-soft); letter-spacing: .02em; }
.rows dd { font-size: var(--fs-small); line-height: 1.6; }
.rows__sub { display: block; font-size: var(--fs-caption); color: var(--ink-soft); }

/* 2단 골격 — 왼쪽은 제목이 머무르고, 오른쪽이 흐른다 */
.split { display: grid; gap: clamp(28px, 4vw, 72px); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(260px, 5fr) 7fr; align-items: start; }
  .split__side { position: sticky; top: 92px; }
}

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 30px; padding: 16px 34px;
  background: var(--red); color: #fff;
  border-radius: 999px;
  font-size: var(--fs-body); font-weight: 700;
  transition: background .15s, transform .15s;
}
.btn:hover { background: var(--red-deep); transform: translateY(-1px); }
.btn__arrow { font-family: var(--latin); }
.btn--ghost {
  margin-top: 0;
  background: transparent; color: var(--red);
  border: 1.5px solid var(--red);
}
.btn--ghost:hover { background: var(--red); color: #fff; }

.cta { padding-block: clamp(48px, 6vw, 84px); border-top: 1px solid var(--line); }

/* ==========================================================================
   헤더 — 데스크톱은 가로 메뉴, 모바일은 햄버거
   햄버거는 details/summary라 자바스크립트 없이 열립니다.
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad-x);
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
/* 브랜드 워드마크 이미지(assets/clless.webp). 글자가 캔버스에 꽉 차 있어
   height가 곧 글자 높이입니다. padding-block으로 탭 영역만 키웁니다(레이아웃 불변). */
.logo { display: inline-flex; align-items: center; padding-block: 8px; }
.logo img { height: 18px; width: auto; }

.nav { display: none; gap: 28px; font-size: var(--fs-small); color: var(--ink-mid); }
.nav a { padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .15s, color .15s; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--red); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
@media (min-width: 760px) { .nav { display: flex; } }

/* 햄버거 */
.menu { position: relative; }
@media (min-width: 760px) { .menu { display: none; } }
/* summary의 display를 바꾸지 않습니다. flex·grid·block으로 바꾸면 WebKit이
   summary를 일반 요소로 취급해 **자바스크립트 없이 여닫는 동작이 사라집니다.**
   막대는 안쪽 여백으로 가운데 맞춥니다 (44 = 21 + 2 + 21) */
.menu__btn {
  list-style: none; cursor: pointer;
  width: 44px; height: 44px; padding: 21px 12px;
  margin-right: -10px;
}
.menu__btn::-webkit-details-marker { display: none; }
.menu__btn::marker { content: ""; }
.menu__bars, .menu__bars::before, .menu__bars::after {
  display: block; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .18s, background .18s, top .18s;
}
.menu__bars { position: relative; }
.menu__bars::before, .menu__bars::after { content: ""; position: absolute; left: 0; }
.menu__bars::before { top: -6px; }
.menu__bars::after { top: 6px; }
.menu[open] .menu__bars { background: transparent; }
.menu[open] .menu__bars::before { top: 0; transform: rotate(45deg); }
.menu[open] .menu__bars::after { top: 0; transform: rotate(-45deg); }

.menu__panel {
  position: absolute; right: -10px; top: calc(100% + 12px);
  min-width: 208px;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(43,18,16,0.13);
  padding: 8px;
}
.menu__panel a {
  padding: 11px 14px; border-radius: 9px;
  font-size: var(--fs-small); color: var(--ink-mid);
}
.menu__panel a:hover { background: var(--tint); color: var(--ink); }
.menu__panel a[aria-current="page"] { color: var(--red); font-weight: 600; }

/* ==========================================================================
   히어로 — 홈에만
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--tint);            /* 이미지 로드 전 폴백 */
}
/* 배경 물 이미지 — 아주 느리게 숨쉬듯 움직입니다 (30초 왕복).
   inset을 음수로 둬 확대·이동해도 가장자리가 드러나지 않습니다.
   톤 규칙: 화려하면 신뢰를 깎으므로 움직임은 눈에 겨우 걸릴 만큼만. */
.hero::before {
  content: "";
  position: absolute; inset: -4%;
  background: url('/assets/hero-bg.webp') center/cover no-repeat;
  animation: hero-drift 20s ease-in-out infinite alternate;
  will-change: transform;
  z-index: 0;
}
/* 텍스트 대비 — 밝은 물 위에서 본문이 읽혀야 합니다.
   모바일은 텍스트가 위·병이 아래라 세로로 덮고(상단 진하게),
   데스크톱은 텍스트가 왼쪽·병이 오른쪽이라 가로로 덮습니다(왼쪽 진하게).
   병 쪽은 옅게 둬 물 배경이 비치게 합니다. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(252,250,249,0.93) 0%,
    rgba(252,250,249,0.84) 46%,
    rgba(252,250,249,0.46) 100%);
  z-index: 0;
}
@media (min-width: 900px) {
  .hero::after {
    background: linear-gradient(100deg,
      rgba(252,250,249,0.95) 0%,
      rgba(252,250,249,0.86) 40%,
      rgba(252,250,249,0.50) 72%,
      rgba(252,250,249,0.26) 100%);
  }
}
.hero__in { position: relative; z-index: 1; }
.hero__in {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(44px, 6vw, 80px) var(--pad-x) 0;
  display: grid; gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__in {
    grid-template-columns: 1fr 0.82fr;
    min-height: min(78vh, 720px);
    padding-bottom: clamp(40px, 5vw, 72px);
  }
}
.hero__eyebrow {
  font-family: var(--latin);
  font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: 0.24em; color: var(--ink-soft);
}
.hero__quote { font-size: var(--fs-display); line-height: 1.24; margin-top: 20px; }
.hero__quote .q { display: block; color: var(--ink-mid); font-weight: 400; }
.hero__quote .a { display: block; margin-top: .18em; }
.hero__meta {
  margin-top: clamp(26px, 3vw, 40px);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
/* 제품 로고타입 이미지(assets/clless-01.webp). meta 줄은 align-items:baseline이라
   로고 밑변이 설명 텍스트 기준선에 맞습니다 — 한 줄에 얹힌 것처럼 보입니다. */
.hero__logo { height: clamp(20px, 2.4vw, 26px); width: auto; }
.hero__desc { font-size: var(--fs-small); color: var(--ink-mid); }
.hero__figure { position: relative; width: 100%; }
.hero__figure img {
  width: min(78%, 300px);
  margin: 0 auto;
  filter: drop-shadow(0 26px 44px rgba(43,18,16,0.18));
  animation: hero-float 6.5s ease-in-out infinite;
}
@media (min-width: 900px) {
  .hero__figure img { width: min(100%, 430px); margin-right: 0; }
}

/* 배경은 천천히 확대·이동, 병은 물 위에 뜬 듯 오르내립니다.
   둘 다 아주 얕은 진폭이라 스크롤 중에 겨우 느껴지는 정도입니다. */
@keyframes hero-drift {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(1.4%, -1.2%); }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* 페이지가 열릴 때 히어로 글자·병이 아래에서 떠오르며 순차로 나타납니다.
   요소에 opacity:0을 직접 주지 않고 keyframe 안에서만 0으로 시작하므로,
   reduced-motion으로 animation이 꺼지면 곧바로 제자리에 보입니다 (깜빡임 없음). */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__eyebrow { animation: rise .6s .06s both; }
.hero__quote   { animation: rise .7s .20s both; }
.hero__meta    { animation: rise .7s .40s both; }
/* 병은 등장(figure)과 부유(img)를 나눠 맡깁니다 — 둘 다 transform이라
   같은 요소에 겹치면 충돌하므로 레이어를 분리합니다. */
.hero__figure  { animation: rise .8s .30s both; }

/* ==========================================================================
   스크롤 등장 — 작은 스크립트(IntersectionObserver)가 섹션이 뷰포트에 들어올 때
   `.is-in`을 붙입니다. IntersectionObserver는 사파리·파이어폭스·크롬 모두 지원합니다.
   · 스크립트가 없거나 미지원이면 <html>에 `.js`가 안 붙어 섹션은 기본 opacity 1 →
     그냥 다 보입니다 (자바스크립트 없이도 읽힌다는 원칙 유지)
   · reduced-motion에선 전환 없이 즉시 보입니다
   · opacity만 다뤄 .split__side의 sticky에 영향을 주지 않습니다
   ========================================================================== */
.js .section, .js .chapter, .js .ev-item { opacity: 0; transition: opacity 1.1s ease-out .15s; }
.js .section.is-in, .js .chapter.is-in, .js .ev-item.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .section, .js .chapter, .js .ev-item { opacity: 1; transition: none; }
}

/* 상세 페이지 머리 — 히어로와 골격을 다르게 씁니다 */
.pagehead {
  padding-block: clamp(56px, 7vw, 104px) clamp(36px, 4vw, 56px);
  background: var(--tint);
  border-bottom: 1px solid var(--line);
}
.pagehead__h1 {
  font-size: clamp(1.875rem, 4.4vw, 3.5rem);
  line-height: 1.24;
  max-width: 22em;
}
.pagehead__lead { margin-top: 22px; }
.pagehead__lead p { font-size: var(--fs-lead); line-height: 1.7; color: var(--ink-mid); }
.pagehead__lead p + p { margin-top: 8px; }

/* 제품 로고타입(assets/clless-01.webp) — /product는 PRODUCT 아이브로 대신,
   /en은 HAIR·FACE·BODY 아이브로 위에 얹어 "이 제품은 CLLESS 01"을 먼저 세웁니다.
   h1(최대 56px)보다 작게 둬 위계를 지킵니다. 여백은 .eyebrow(14px)와 맞춥니다. */
.pagehead__logo { height: clamp(24px, 3.4vw, 34px); width: auto; margin-bottom: 16px; }

/* 상세 페이지도 열릴 때 제목이 순서대로 떠오릅니다 — 홈 히어로와 같은 rise.
   .eyebrow는 공용 클래스라 .pagehead 안으로 한정합니다 (섹션 머리엔 안 걸리게).
   reduced-motion에선 하단 규칙이 animation을 꺼 곧바로 제자리에 보입니다. */
.pagehead__logo       { animation: rise .6s .04s both; }
.pagehead .eyebrow    { animation: rise .6s .06s both; }
.pagehead__h1         { animation: rise .7s .18s both; }
.pagehead__lead       { animation: rise .7s .34s both; }
.pagehead .langswitch { animation: rise .7s .46s both; }

/* ==========================================================================
   홈 — 섹션별 골격
   ========================================================================== */
.claim { border-left: 3px solid var(--red); padding-left: clamp(18px, 2vw, 28px); }
.claim p { font-family: var(--head); font-size: var(--fs-h3); font-weight: 700; line-height: 1.55; }
.claim p + p { margin-top: 6px; }

.uses {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
  padding: 18px 22px;
  background: var(--tint); border-radius: var(--radius);
}
.section--tint .uses { background: #fff; }
.uses__latin { font-family: var(--latin); font-weight: 600; letter-spacing: 0.1em; }
.uses__ko { font-size: var(--fs-small); color: var(--ink-mid); }

.spec {
  margin-top: clamp(30px, 4vw, 46px);
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 720px) { .spec { grid-template-columns: repeat(3, 1fr); } }
.spec__cell { background: #fff; padding: clamp(20px, 2.2vw, 30px); }
.spec__k { font-size: var(--fs-caption); color: var(--ink-soft); letter-spacing: .04em; }
.spec__v {
  margin-top: 8px;
  font-family: var(--head); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.4;
}

.stat {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--latin); font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1; letter-spacing: -0.02em;
}
.stat .unit { font-family: var(--sans); font-size: .34em; font-weight: 600; color: var(--ink-mid); }
.stat .arrow { color: var(--red); }

.story { margin-top: 22px; font-size: var(--fs-lead); line-height: 1.95; color: var(--ink); }
.story p + p { margin-top: 16px; }

.steps {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: grid; gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--bg); padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 26px); }
.section--tint .step { background: var(--tint); }
.step__n { font-family: var(--latin); font-weight: 700; font-size: var(--fs-caption); letter-spacing: .1em; color: var(--red); }
.step__k { margin-top: 10px; font-family: var(--head); font-weight: 700; font-size: var(--fs-body); }
.step__t { margin-top: 6px; font-size: var(--fs-small); line-height: 1.7; color: var(--ink-mid); }

.picked {
  margin-top: clamp(24px, 3vw, 36px);
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 560px) { .picked { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .picked { grid-template-columns: repeat(4, 1fr); } }
.picked li {
  background: var(--tint); padding: 22px clamp(16px, 2vw, 24px);
  font-family: var(--head); font-weight: 700; font-size: var(--fs-small);
}

/* 근거 카드 — 홈과 /en이 함께 씁니다 */
.ev { margin-top: clamp(30px, 4vw, 48px); display: grid; gap: 14px; }
@media (min-width: 700px) { .ev { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ev { grid-template-columns: repeat(4, 1fr); } }
.ev__card {
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  border-radius: var(--radius);
  padding: clamp(24px, 2.6vw, 32px);
  display: flex; flex-direction: column;
}
.ev__num {
  font-family: var(--latin); font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15;
  color: #fff; letter-spacing: -0.02em;
}
.ev__label { margin-top: 10px; font-size: var(--fs-small); font-weight: 600; color: #f0dcd6; }
.ev__note { margin-top: 26px; font-size: var(--fs-caption); line-height: 1.75; color: #b49b95; }

/* 어디서 사나 */
.store { text-align: center; }
.store .h2 { max-width: 20em; margin-inline: auto; }
.store .lead { margin-inline: auto; }
.store__ig { margin-top: 20px; font-size: var(--fs-small); color: var(--ink-mid); }

/* 전체 목록 — 홈 맨 아래 */
.siteindex__list { margin-top: 20px; border-top: 1px solid var(--line); }
.siteindex__list a {
  display: grid; gap: 2px 24px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .15s;
}
@media (min-width: 700px) {
  .siteindex__list a { grid-template-columns: 200px 1fr auto; }
}
.siteindex__list a:hover { padding-left: 8px; color: var(--red); }
.siteindex__label { font-family: var(--head); font-weight: 700; font-size: var(--fs-h3); }
.siteindex__desc { font-size: var(--fs-small); color: var(--ink-mid); }
.siteindex__arrow { font-family: var(--latin); color: var(--ink-soft); }

/* ==========================================================================
   /product
   ========================================================================== */
.formula {
  font-family: var(--latin); font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--red);
}
.pairs { border-top: 1px solid var(--line); }
.pairs > div {
  display: grid; gap: 2px 24px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) { .pairs > div { grid-template-columns: 160px 1fr; align-items: baseline; } }
.pairs dt { font-family: var(--head); font-weight: 700; font-size: var(--fs-body); }
.pairs dd { font-size: var(--fs-small); color: var(--ink-mid); }
.pairs--tight { margin-top: 24px; }

.bridge { margin-top: 30px; padding: 22px 24px; background: var(--tint); border-radius: var(--radius); }
.bridge__formula {
  font-family: var(--latin); font-weight: 600;
  font-size: var(--fs-small); letter-spacing: .08em; color: var(--red);
  margin-bottom: 10px;
}
.bridge p:last-child { font-size: var(--fs-small); line-height: 1.75; color: var(--ink-mid); }

.before, .amount {
  margin-top: 20px; font-size: var(--fs-small); line-height: 1.7; color: var(--ink-mid);
}
.amount { margin-top: 22px; }
.before__k, .amount__k {
  display: inline-block; margin-right: 10px;
  font-family: var(--head); font-weight: 700; color: var(--ink);
}
.notes { margin-top: 26px; }
.notes p { font-size: var(--fs-small); line-height: 1.8; color: var(--ink-mid); }
.notes p + p { margin-top: 10px; }

.tips { margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 14px; }
@media (min-width: 800px) { .tips { grid-template-columns: repeat(3, 1fr); } }
.tip { padding: clamp(22px, 2.4vw, 30px); background: var(--tint); border-radius: var(--radius); }
.tip__k { font-family: var(--head); font-weight: 700; font-size: var(--fs-body); }
.tip__v { margin-top: 8px; font-size: var(--fs-small); line-height: 1.7; color: var(--ink-mid); }

.lineup { margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 14px; }
@media (min-width: 800px) { .lineup { grid-template-columns: repeat(3, 1fr); } }
.lineup__card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 2.6vw, 32px);
  display: flex; flex-direction: column;
}
.lineup__name { font-family: var(--head); font-weight: 700; font-size: var(--fs-h3); }
.lineup__vol { margin-top: 4px; font-family: var(--latin); font-weight: 600; color: var(--red); }
.lineup__body { margin-top: 14px; font-size: var(--fs-small); line-height: 1.75; color: var(--ink-mid); }
.lineup__specs { margin-top: auto; padding-top: 20px; }
.lineup__specs > div {
  display: flex; gap: 12px; justify-content: space-between;
  padding: 8px 0; border-top: 1px solid var(--line);
  font-size: var(--fs-caption);
}
.lineup__specs dt { color: var(--ink-soft); }
.lineup__note { margin-top: 26px; font-size: var(--fs-small); line-height: 1.8; color: var(--ink-mid); }

.scent { margin-top: 30px; padding: 24px; background: var(--tint); border-radius: var(--radius); }
.scent__k { font-size: var(--fs-caption); color: var(--ink-soft); letter-spacing: .04em; }
.scent__v { margin-top: 4px; font-family: var(--head); font-weight: 700; font-size: var(--fs-h3); }
.scent__body { margin-top: 10px; font-size: var(--fs-small); line-height: 1.75; color: var(--ink-mid); }

.ing__head { margin-top: clamp(44px, 5vw, 68px); }
.ing { margin-top: 20px; columns: 2; column-gap: clamp(24px, 3vw, 48px); }
@media (min-width: 700px) { .ing { columns: 3; } }
@media (min-width: 1000px) { .ing { columns: 4; } }
.ing li {
  break-inside: avoid;
  font-size: var(--fs-small); line-height: 1.5;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  color: var(--ink-mid);
}

.caution { margin-top: clamp(32px, 4vw, 52px); display: grid; gap: clamp(28px, 3vw, 48px); }
@media (min-width: 800px) { .caution { grid-template-columns: 1.3fr 1fr; } }
.caution__list { margin-top: 16px; }
.caution__list li {
  position: relative; padding-left: 18px;
  font-size: var(--fs-small); line-height: 1.75; color: var(--ink-mid);
}
.caution__list li + li { margin-top: 10px; }
.caution__list li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 6px; height: 1px; background: var(--red);
}
.caution__shake {
  margin-top: 16px; padding: 14px 16px;
  background: #fff; border-radius: 10px;
  font-size: var(--fs-caption); color: var(--ink);
}

/* ==========================================================================
   /evidence — 어두운 면을 여기서 다시 씁니다. 근거의 표식입니다
   ========================================================================== */
.ev-items { padding-block: 0; }
.ev-item { padding-block: clamp(48px, 6vw, 84px); border-bottom: 1px solid var(--line); }
.ev-item__in { display: grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 900px) {
  .ev-item__in { grid-template-columns: minmax(280px, 5fr) 7fr; align-items: start; }
  .ev-item__fig { position: sticky; top: 92px; }
}
.ev-item__fig {
  background: var(--amber);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 36px);
  color: #f2e9e6;
}
.ev-item__kicker {
  font-family: var(--latin); font-weight: 700;
  font-size: var(--fs-caption); letter-spacing: .18em; color: var(--orange);
}
.ev-item__value {
  margin-top: 16px;
  font-family: var(--latin); font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15;
  color: #fff; letter-spacing: -0.02em;
}
.ev-item__sub { margin-top: 8px; font-size: var(--fs-caption); line-height: 1.6; color: var(--orange); }
.ev-item__fig .conds { margin-top: 0; }
.ev-item__org {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--amber-line);
  font-size: var(--fs-caption); color: #c4b0aa;
}
/* 자체시험은 자체시험이라고 먼저 밝힙니다 */
.ev-item__org--internal { color: var(--orange); }
.ev-item__body .h2 { margin-bottom: 20px; }
.ev-item__body p { line-height: 1.9; color: var(--ink-mid); }
.ev-item__body p + p { margin-top: 16px; }
.ev-item__pending { margin-top: 20px; }
.closing p { font-size: var(--fs-small); line-height: 1.85; color: var(--ink-mid); }
.closing p + p { margin-top: 12px; }

/* ==========================================================================
   /company
   ========================================================================== */
.hist { margin-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--line); }
.hist__item {
  display: grid; gap: 6px 32px;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) { .hist__item { grid-template-columns: 160px 1fr; } }
.hist__when { display: flex; align-items: baseline; gap: 8px; }
.hist__year { font-family: var(--latin); font-weight: 700; font-size: var(--fs-h3); color: var(--red); }
.hist__month { font-family: var(--latin); font-size: var(--fs-caption); color: var(--ink-soft); }
.hist__k { font-family: var(--head); font-weight: 700; font-size: var(--fs-body); }
.hist__v { margin-top: 6px; font-size: var(--fs-small); line-height: 1.75; color: var(--ink-mid); }
.mailto { margin-top: 22px; font-size: var(--fs-lead); }

/* ==========================================================================
   /story — 본문은 대표자 정본의 사본입니다
   ========================================================================== */
.chapters { padding-block: clamp(40px, 5vw, 72px); }
.chapter { padding-block: clamp(32px, 4vw, 56px); }
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter__in { display: grid; gap: clamp(20px, 3vw, 56px); }
@media (min-width: 900px) {
  .chapter__in { grid-template-columns: minmax(220px, 4fr) 8fr; align-items: start; }
  .chapter__side { position: sticky; top: 92px; }
}
.chapter__n {
  font-family: var(--latin); font-weight: 700;
  font-size: var(--fs-caption); letter-spacing: .18em; color: var(--red);
}
.chapter__title { margin-top: 10px; font-size: var(--fs-h3); line-height: 1.4; }
.ch__p { font-size: var(--fs-body); line-height: 1.95; }
.chapter__body > * + * { margin-top: 18px; }
.ch__quote {
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--red);
}
.ch__quote p {
  font-family: var(--head); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.6;
}
.ch__lead {
  font-family: var(--head); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.6;
  padding-block: 6px;
}
/* signoff — 지오 그림 + 문구. gio.webp가 흰 배경이라 카드도 흰색으로 둡니다 */
.ch__signoff {
  margin-top: 28px; padding: 18px 22px;
  display: flex; align-items: center; gap: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--fs-small); line-height: 1.8; color: var(--ink-mid);
}
.ch__gio { width: 88px; height: auto; flex-shrink: 0; }
@media (max-width: 520px) { .ch__signoff { gap: 14px; } .ch__gio { width: 66px; } }

/* 웹툰 1화 — 위 2칸만 보이고 '계속 보기'로 펼침. JS 없이 details + flex order.
   strip을 details 뒤에 두고 order로 위로 올려, [open] ~ strip 형제선택으로 펼칩니다. */
.toon { margin-top: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; align-items: center; }
.toon__strip {
  order: 1; width: 100%; max-width: 560px; position: relative; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 1 / 1;
}
.toon__strip img { display: block; width: 100%; }
.toon__strip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 84px;
  background: linear-gradient(to bottom, transparent, var(--tint)); pointer-events: none;
}
.toon__ctrl { order: 2; margin-top: 16px; }
.toon__ctrl[open] ~ .toon__strip { aspect-ratio: auto; }
.toon__ctrl[open] ~ .toon__strip::after { display: none; }
.toon__more {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 10px 22px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: var(--fs-caption); font-weight: 700; color: var(--ink); transition: background .15s;
}
.toon__more:hover { background: var(--tint); }
.toon__more::-webkit-details-marker { display: none; }
.toon__ctrl:not([open]) .toon__less { display: none; }
.toon__ctrl[open] .toon__open { display: none; }

/* ==========================================================================
   /en
   ========================================================================== */
.pagehead--en .pagehead__h1 { max-width: 16em; }
.langswitch { margin-top: 22px; font-size: var(--fs-small); color: var(--ink-mid); }
.inci {
  margin-top: 24px; padding: 20px 22px;
  background: var(--tint); border-radius: var(--radius);
  font-size: var(--fs-small); line-height: 1.75;
}

/* ==========================================================================
   푸터
   ========================================================================== */
.footer {
  background: var(--amber); color: #a8918b;
  padding-block: clamp(44px, 5vw, 64px);
  font-size: var(--fs-caption); line-height: 1.9;
}
.footer__grid { display: grid; gap: 24px; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1fr auto; align-items: end; } }
.footer__corp { font-family: var(--head); font-weight: 700; font-size: var(--fs-small); color: #f0e4e0; margin-bottom: 8px; }
.footer__copy { margin-top: 12px; color: #8d736c; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer__links a { text-decoration: underline; text-underline-offset: 3px; color: #c8b2ac; }
.footer__links a:hover { color: #fff; }
.footer__domain { font-family: var(--latin); letter-spacing: .06em; }

/* ==========================================================================
   AI 더미 이미지 — assets/ph/

   자리표시용이라 **눈에 띄게** 둡니다. [대괄호] 문구를 주황으로 칠하는 것과
   같은 이유입니다 — 실사로 바꾸지 않은 채 배포되면 바로 보여야 합니다.
   `body.clean`을 걸면 딱지가 사라져 실제 인상을 볼 수 있습니다.
   ========================================================================== */
.ph {
  position: relative; margin: 0;
  border-radius: var(--radius); overflow: hidden;
  background: var(--tint-deep);
}
.ph img { width: 100%; }
.ph__tag {
  position: absolute; left: 12px; top: 12px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(232,133,58,0.94); color: var(--amber);
  font-size: 11px; font-weight: 700; line-height: 1.55; letter-spacing: .01em;
}
body.clean .ph__tag { display: none; }

.ph--wrap { padding-top: clamp(28px, 3.5vw, 48px); }
.ph--band { margin-top: clamp(26px, 3.2vw, 40px); }
.ph--band img { aspect-ratio: 21 / 9; object-fit: cover; }
.ph--wide img { aspect-ratio: 32 / 9; }
.ph--side { margin-top: 28px; }
.ph--toon img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 699px) { .ph--band img { aspect-ratio: 16 / 9; } }

/* 브랜드 컬러 (스토리 하단) — 사진+텍스트 2열, AI 이미지 원본 3:2 (크롭 없음).
   모바일은 위아래 스택, 760px↑에서 2열 */
.brandcolor__fig { margin: 0 0 clamp(20px, 4vw, 28px); border-radius: var(--radius); overflow: hidden; background: var(--tint-deep); }
.brandcolor__fig img { width: 100%; display: block; }
.brandcolor__body .h2 { margin-bottom: 16px; }
@media (min-width: 760px) {
  .brandcolor .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; }
  .brandcolor__fig { margin: 0; }
}

/* 제품 이미지 — /product 히어로·구성 카드, 홈 제품 섹션 (2026-07-25) */
.prodhero { max-width: 680px; margin: clamp(28px, 3.5vw, 44px) auto 0; border-radius: var(--radius); overflow: hidden; }
.prodhero img { width: 100%; display: block; }
.lineup__fig { aspect-ratio: 3 / 4; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.lineup__fig img { width: 100%; height: 100%; object-fit: contain; }
.whatfig { margin-top: 22px; border-radius: var(--radius); overflow: hidden; }
.whatfig img { width: 100%; display: block; }

/* 이미지가 앉는 쪽은 따라 내려오지 않게 합니다 */
@media (min-width: 900px) { .split__side--media { position: static; } }
@media (min-width: 800px) { .tips.tips--stack { grid-template-columns: 1fr; } }

/* --- 더미 표시 -----------------------------------------------------------
   확정 전 문구를 눈에 띄게 해서, 배포 전에 남아 있으면 바로 보이게 합니다.
   문장 한가운데 있어도 잡힙니다.                                          */
.dummy {
  background: rgba(232,133,58,0.13);
  box-shadow: 0 0 0 1px rgba(232,133,58,0.35) inset;
  border-radius: 4px;
  padding: 0 .2em;
  color: inherit;
}
.section--dark .dummy, .ev-item__fig .dummy { background: rgba(232,133,58,0.2); }
body.clean .dummy { background: none; box-shadow: none; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}