@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

/* ── 함렛은 **라틴만** 쓴다 (2026-08-29) ─────────────────────────
   의뢰인: *"이 글꼴이 마음에 안 들어 한국어는 그냥 꾸밈없는 심플한 글꼴이었으면
             좋겠어 영어는 괜찮아"*

   🔴 **함렛에는 한글이 들어 있다.** 그것도 부리 없는 어정쩡한 고딕이다.
     그래서 제목의 한글이 이상해 보였고, 뒤에 적어둔 `'Nanum Myeongjo'` 폴백은
     **영영 안 걸렸다** — 브라우저는 글자마다 «그 글자가 있는 첫 글꼴»을 쓰는데
     함렛이 한글을 갖고 있으니 거기서 멈춘다.

   ★ 그래서 구글 CSS 를 통째로 부르지 않고, **라틴 조각 넷만** 직접 붙여넣었다.
     함렛이 한글을 못 가지면 한글은 자동으로 다음 차례인 **Pretendard** 로 떨어진다.
     구글 CSS 원본은 @font-face 가 368개다(한글을 100조각 넘게 쪼개 놓았다). 그중 라틴은 4개.

   ★ 이게 한국 화장품 여섯 곳이 쓰는 방식이다 — **라틴 전용 글꼴 + 한글 고딕**
     (`ref-fonts-kr.md`. 명조 제목은 8곳 중 0곳이었다)
   ★ 무신사도 확인했다 — `Pretendard` 한 벌, 세리프 0. 최대 활자 16px.
     **글꼴만 따르고 크기는 안 따른다.** 저긴 상품을 수만 개 늘어놓는 쇼핑몰이고
     우리 정답지(이솝)는 최대 31px 이다 */
@font-face {
  font-family: 'Hahmlet';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hahmlet/v21/BngIUXpCQ3nKpIo0Z__ajQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hahmlet';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hahmlet/v21/BngIUXpCQ3nKpIo0Z__ajQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hahmlet';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hahmlet/v21/BngIUXpCQ3nKpIo0Z__ajQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hahmlet';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hahmlet/v21/BngIUXpCQ3nKpIo0Z__ajQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────
   올리베타 — 공용 스타일

   ★ 치수·색·글자값은 전부 2026-08-26 정답지 실측값이다.
     theouai.com/collections/fragrance · 1280×720 · 헤드리스 Edge
     지어낸 값이 하나도 없다. 바꾼 것은 브랜드 색과 글꼴뿐이다.
   ───────────────────────────────────────────── */

:root{
  --paper:  #FFFAF4;   /* 정답지 body 실측 rgb(255,250,244) 그대로 */
  --ink:    #152F15;   /* 정답지는 #2C140E. 우리는 로고에서 뽑은 딥그린 */
  --ink-2:  #5F7065;
  --ink-3:  #67736A;   /* 대비 4.78 */
  --line:   #E6E0D6;
  --rule:   #2A322A;   /* 머리 아래 선. 정답지 실측 #322A26 을 우리 딥그린 쪽으로 옮긴 값 */

  --gut: 60px;         /* 정답지 좌우 여백 60px */

  /* 글꼴 두 벌 — 제목은 세리프, 본문은 산세리프.
     정답지 셋(Aesop·Byredo·OUAI)은 전부 산세리프 한 벌이다.
     여기서만 갈라선다 — 로고가 세리프인데 화면에 세리프가 하나도 없었다.
     의뢰인이 비교 화면(글꼴-비교.png)에서 함렛을 골랐다. 2026-08-27 */
  --face-head: 'Hahmlet', 'Pretendard Variable', Pretendard,
               'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --face-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}

*{ box-sizing:border-box }
html{
  -webkit-text-size-adjust:100%;

  /* 머리가 스크롤을 따라오는 76px 짜리다(position:sticky).
     이게 없으면 #dcc 같은 링크가 「이동은 하는데 아무 일도 안 일어난 것처럼」 보인다 —
     구간 제목이 화면 맨 위 y=0 에 서고 머리가 그 위를 덮기 때문이다.
     머리를 한 줄(76)로 되돌려 다시 100 이다 — 76 + 여백 24 */
  scroll-padding-top:100px;
  /* 🔴 scroll-behavior:smooth 를 넣지 않는다.
     다른 장에서 salon.html#contact 로 들어오면 브라우저가 맨 위에서부터 부드럽게 내려가는데,
     그 애니메이션이 도중에 끊긴다 — 실제 크롬에서 scrollY 50 에 멈췄다.
     사진은 다 받아졌고 높이도 정상인데 멈춘다.
     그래서 「상품 문의」를 눌렀는데 제조기 배너가 서 있었다 (2026-08-30 재현·확인) */
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--face-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* 한국어는 기본값이면 글자 사이 아무 데서나 끊긴다 — 「사용하 / 며,」
     keep-all 로 어절을 통째로 넘긴다. 한 어절이 칸보다 길 때만 break-word 가 받는다 */
  word-break:keep-all;
  overflow-wrap:break-word;
}

img{ display:block; max-width:100% }

/* ⚠ padding 축약형을 쓰지 않는다 — errors.md #7·#8 */
.wrap{
  padding-left:var(--gut);
  padding-right:var(--gut);
}

.sr{                              /* 정답지 목록에도 보이는 제목이 없다 */
  font-size:1rem;
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ── 머리 — **한 줄에 세 구역** (2026-08-29 · OUAI 4차 실측) ──────────
   잠깐 아모스식 두 줄(로고 56 + 탭 48 = 104)로 갔다가 되돌렸다.
   의뢰인: *"상단이 우리 답지인 ouai하고 다른 느낌이야 전체적으로 오른쪽도 비어있는 느낌"*

   **저쪽이 두 줄인 건 뒤로가기·장바구니가 있어서다. 우리는 그게 없으니 두 줄이 필요없다.**
   OUAI 는 한 줄에 세 구역이고, 그래서 오른쪽이 안 빈다.

       [전체 헤어 살롱 이너케어 기기]   Olivetta   [올리베타란?  상품 문의]
        1fr                              auto            1fr

   ★ 왼쪽 다섯은 페이지가 아니라 **갈래(거르개)** 다 — 아래 「갈래 거르개」를 볼 것.
     의뢰인: *"우리도 ouai처럼 all 헤어 살롱 이너케어로 구분해두고
               오른쪽은 올리베타란? 상품 문의로 구분해두는 거 어때?"*

   실측 (OUAI) — 머리 **76px** · 좌 nav x60 · 14px/700/자간 0.42
                 로고 **101 × 31**, 머리 안 위여백 23 · 아래여백 23 (머리 높이의 **41%**)
                 우 유틸 SEARCH · ACCOUNT · CART(0)  x945~1220

   ★ 로고 높이를 26 → **31** 로 올렸다. 의뢰인: *"너무 박스가 커 … 로고에 딱 맞게"*
     머리가 104 였고 로고는 26 이라 상자만 크고 로고는 작았다. 76 안에 31 이면 23/23 이다.
   ★ 장바구니·검색은 안 가져온다 — 파는 사이트가 아니라 **가짜 버튼**이 된다.
     검색은 18품목이 한 화면에 다 보이는 데다 필터도 있어 **찾을 게 없다**.
     오른쪽은 「도입 문의」 **글자 하나**다. 테두리 도형은 의뢰인이 뺐다 (아래 `.head__util`) */
.head{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.head__row{
  height:76px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.head__nav{ display:flex; gap:24px }
.head__nav a{
  font-size:14px;
  font-weight:700;
  letter-spacing:0.42px;
  color:rgba(18,18,18,.4);        /* 안 누른 것 — 정답지 실측 */
  text-decoration:none;
}
.head__nav a[aria-current]{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:5px;
}
.brand{ justify-self:center; display:block; line-height:0 }
.logo{ height:31px; width:auto }   /* 폭 137px — OUAI 로고는 101×31. 우리 워드마크가 길다 */

/* 오른쪽 구역 — 「올리베타란?」과 「상품 문의」 둘.
   ⚠ 처음에 테두리 알약으로 만들었다가 뺐다 — 의뢰인: *"문의 도형 형식으로 만들지 말아줘 짜친다"*
   정답지도 도형이 아니다. `SEARCH ACCOUNT CART(0)` 전부 **글자뿐**이고 테두리가 없다 */
.head__util{ justify-self:end; display:flex; align-items:center; gap:24px }
.head__util a{
  font-size:14px;
  font-weight:700;
  letter-spacing:0.42px;
  color:var(--ink);
  text-decoration:none;
}
.head__util a[aria-current]{ text-decoration:underline; text-underline-offset:5px }
.head__util a:hover{ text-decoration:underline; text-underline-offset:5px }
/* 안 누른 갈래는 흐리고 오른쪽 둘은 진하다 — 정답지도 유틸 쪽이 진하다 */

/* ── 카드 격자 ─────────────────────────────────
   정답지 실측  4열 · gap 40px 8px · 열 폭 280.25px · 줄 폭 1145px   */
.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:40px 8px;
  padding-top:48px;
  padding-bottom:80px;
}
.card{ display:flex; flex-direction:column; position:relative }

/* 카드를 누르면 상세로 간다 — 제목에만 <a> 를 두고 그 의사요소를 카드 전체로 늘린다.
   사진과 글을 통째로 <a> 로 감싸면 안에 들어가는 제목·문단 구조가 깨진다 */
.name a{ color:inherit; text-decoration:none }
.name a::after{ content:''; position:absolute; inset:0 }
.card:hover .name a{ text-decoration:underline; text-underline-offset:5px }

/* 사진칸 — 정답지 282.3 × 360.3 → 비 0.783. 3:4(0.75) 가 아니다.
   두 장이 같은 칸에 겹쳐 있어 커서를 올리면 바뀐다. 칸 크기는 안 흔들린다 */
.shot{
  position:relative;
  aspect-ratio:282 / 360;
  overflow:hidden;
}
.shot img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.shot .scene{ opacity:0; transition:opacity .45s ease }
.card:hover .shot .scene{ opacity:1 }

.shot.empty{
  border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
}
.shot.empty span{ font-size:12px; color:var(--ink-3) }

/* ── 카드 안 ───────────────────────────────────
   정답지 순서와 실측 치수 그대로
     ★★★★★ 2349 reviews   12px / 600 / Open Sans
     HAIR & BODY … SANTORINI  18px / 600 / 대문자
     2 options                14px / 밑줄
     $28                      18px / 400
     [ ADD TO CART ]          ← 뺐다. 파는 사이트가 아니다

   우리 대응 — 별점이 없으니 그 자리에 제조 공정, 가격 자리에 대표 용량   */
.meta{
  margin-top:9px;
  font-size:12px;
  font-weight:600;
  line-height:1.6;
  color:var(--ink-3);
}
.name{
  margin:3px 0 0;
  font-size:18px;
  font-weight:600;
  line-height:1.25;
}
/* 정답지는 이름을 전부 대문자로 세웠다. 우리는 뺐다 —
   'Aqua Serum' 처럼 라벨이 대소문자를 섞어 쓰는 이름이 있어서
   대문자로 밀면 실물과 달라진다 */
.opt{
  margin:6px 0 0;
  font-size:14px;
  color:var(--ink-2);
}
/* 정답지의 '2 options' 는 누르면 색을 고르는 링크라 밑줄이 있었다.
   우리 자리는 누를 데가 아니라 그냥 설명이다 — 밑줄을 뺐다 */
.size{
  margin:7px 0 0;
  font-size:18px;
  font-weight:400;
  line-height:1.4;
}
/* ── 배너 ──────────────────────────────────────
   정답지: 아모레몰 아모스프로페셔널 브랜드관 · **데스크톱** 1280 실측 (2026-08-29)

   ★ 앞서 잰 값은 전부 틀렸다. 헤드리스가 `HeadlessChrome` 으로 붙어서
     **모바일 화면**을 받았기 때문이다. UA 를 바꿔도 안 됐고,
     실제 크롬으로 들어가서야 데스크톱이 나왔다.

     | | 모바일(내가 잰 것) | 데스크톱(진짜) |
     |---|---|---|
     | 배치 | 사진이 화면을 꽉 채움 | **왼쪽 글자 · 오른쪽 사진** |
     | 글자색 | 흰색, 사진 위에 얹음 | **검정.** 사진 위에 안 얹음 |
     | 배경 | 사진 자체 | **#F5F5F5 한 판** |

   실측 — 칸 높이 550 · 배경 #F5F5F5
          제목 x193 y303  36px/700 행간 43
          부제      y405  16px/400 행간 22
          사진 x698 폭 375 높이 550 (object-fit:cover)

   ★ **사진을 안 늘렸다.** 375 폭짜리를 1265 칸에 그대로 놓고
     남는 890px 을 회색으로 채웠다. 그게 「사진은 작고 회색박스로 채워둔 것」이다

   ★ 배경색만 실측값(#F5F5F5)을 안 쓴다. 저쪽은 페이지가 흰색이라 그 회색이 이어지는데
     우리 페이지는 #FFFAF4 라 **가운데 배너만 차가워 보인다.**
     **같은 관계(페이지의 96%)를 우리 페이지에 적용한 값이 #F5F0EA** 다.
     더 데우면(#EFE7DA) 사진 배경 #E5D7C8 에 붙어 **사진 네모가 사라진다** —
     「사진 타일이 페이지보다 뚜렷하게 어둡다」는 정답지 원칙과 어긋난다 (2차 실측)  */
.banner{
  position:relative;
  height:550px;
  background:#F5F0EA;
  overflow:hidden;
}
/* 🔴 **글자와 사진은 가운데 1024 칸 안에 함께 있어야 한다** (2026-08-29)
   의뢰인: *"아모스에서는 올리베타 페이지보다 훨씬 사진과 글자의 폭이 좁은데"*

   1280 에서 재면 우리와 정답지가 한 픽셀도 안 달랐다. 그런데 의뢰인 눈에는 계속 달랐다.
   **화면 폭이 달랐던 것이다.** 의뢰인이 잘라준 사진에서 우리 사진 오른쪽에 남은 폭이
   60px(`--gut`)이었고, 정답지는 192px 이었다 — 그건 내가 1280 에서 잰 값과 같다.
   즉 의뢰인은 **1280 아래**에서 우리 페이지를 보고 있었고, 거기서 아래 규칙이 켜졌다.

       @media (max-width:1279px){ .banner__txt{left:60px} .banner__pic{right:60px} }

   **이게 글자와 사진을 화면 양쪽 끝으로 밀어버린다.** 폭이 좁아질수록 더 벌어진다.
   1,200 폭에서 사이가 439px — 정답지 264px 의 1.7배다.

   정답지는 안 벌어진다. **1024 짜리 칸을 가운데 놓고 그 안에 둘 다 넣기 때문이다.**
       칸  x120~1144 (1024, 가운데)   글자 칸 안 +73   사진 칸 안 +578, 폭 375
   폭이 변해도 칸이 통째로 움직일 뿐 **둘 사이는 264px 로 고정**이다.

   그래서 고정 좌표(193/698)를 버리고 **가운데에서 잰 자리**로 바꾼다.
       글자  left:50%  margin-left:-439px   (1024÷2 - 73  = 439)
       사진  left:50%  margin-left:+66px    (578 - 1024÷2 = 66)
   1265 폭에서 계산하면 193.5 / 698.5 — 실측값 그대로다. 그러면서 폭이 변해도 안 벌어진다 */
.banner__txt{
  position:absolute;
  left:50%; margin-left:-439px;
  top:157px;                    /* 303 - 146 = 배너 칸 안에서의 자리 */
  color:#000;
}
.banner__txt h2{
  margin:0;
  font-family:var(--face-head);
  font-size:36px;
  font-weight:700;
  line-height:43px;
  letter-spacing:-0.01em;
}
.banner__txt p{
  margin:16px 0 0;
  font-size:16px;
  font-weight:400;
  line-height:22px;
}
.banner__pic{
  position:absolute;
  left:50%; margin-left:66px; top:0;
  width:375px; height:550px;
  overflow:hidden;
}
/* 🔴 **칸의 자리가 아니라 「제품이 어디부터 시작하나」가 눈에 들어온다**
   의뢰인: *"정답지는 사진 글자 사이 간격 좁다. 눈으로 봐도 크게 차이날 정도"*

   자로 재면 칸은 정확히 맞았다 — 제목 x193, 사진 x698~1073, 정답지와 한 픽셀도 안 달랐다.
   **그런데 정답지는 제품이 칸 끝에 붙어 잘려 있고 우리는 안쪽으로 물러나 있었다.**
   칸 안의 좌우 여백만큼 글자에서 멀어 보인 것이다.

   1.30배로 키워 좌우 여백을 잘라낸다 — 왼쪽 병이 칸 끝에 닿고 오른쪽이 밖으로 나간다.
   1.45배는 라벨이 너무 잘린다. 눈으로 대보고 고른 값이다 */
.banner__pic img{
  position:absolute;
  width:130%; height:130%;
  max-width:none;            /* ⚠ 전역 `img{max-width:100%}` 가 130% 를 100% 로 깎는다.
                                 이게 없으면 가로는 안 커지고 왼쪽으로 밀리기만 해서
                                 오른쪽에 배경이 56px 드러난다. 한참 헤맸다 */
  left:-15%; top:0;
  object-fit:cover;
}
/* 배너 사진이 `banner-dcc.png` 가 아닐 때 — 위 130% 확대·이동은 그 사진에 맞춰 고른 값이라
   비율이 다른 사진에 그대로 쓰면 엉뚱한 데가 잘린다. 칸을 그대로 채우게 되돌린다 */
.banner--fill .banner__pic img{
  width:100%; height:100%;
  left:0; top:0;
}

/* 🔴 **「양쪽 끝으로 밀기」 규칙은 지웠다** (2026-08-29 · 사연은 위 주석)
   의뢰인: *"방금 문제 있던 반응형 규칙 굳이 필요없는 거면 그냥 지우자"* — 맞는 말이었다.

   **끝에 붙이는 대신 안 들어가면 쌓는다.** 정답지 칸 1024 + 좌우 여백 60 이 들어가려면
   문서 폭이 1002 이상이어야 한다 → **1024 가 정확히 경계**다. 그 아래로는 세로로 쌓는다.
   경계가 하나뿐이라 위에서 잰 265px 은 데스크톱 폭 어디서나 그대로다.

   ⚠ `margin-left` 를 반드시 0 으로 되돌려야 한다. `position:static` 이 돼도
     음수 margin 은 그대로 살아서 글자가 화면 밖 439px 으로 날아간다 */
@media (max-width:1023px){
  .banner{ height:auto; padding-bottom:32px }
  .banner__txt{ position:static; margin-left:0; padding:48px var(--gut) 0 }
  .banner__pic{ position:static; margin-left:0; width:100%; height:320px; margin-top:24px }
}

/* ── 갈래 거르개 — **머리 왼쪽이 곧 거르개다** (2026-08-29) ───────────
   의뢰인: *"우리도 ouai처럼 all 헤어 살롱 이너케어로 구분해두고
             오른쪽은 올리베타란? 상품 문의로 구분해두는 거 어때?"*

   그 전에는 거르개가 **셋**이었다 — 머리 탭 · 커서 올리면 나오는 펼침 메뉴 · 목록 위 필터 줄.
   의뢰인: *"총 필터가 3개가 겹친다"*. 맞는 지적이었고 **뒤의 둘을 없앴다.**

   정답지도 이 구조다. OUAI 의 `ALL HAIR BODY FRAGRANCE` 가 머리에 있고,
   목록 위 `Filter :` 줄은 **다른 축**(Hair Type·Concern·Scent·Price)으로 자른다 —
   같은 걸 두 번 자르지 않는다. 우리는 자를 다른 축이 없으니 하나만 둔다.

   ★ 링크라서 **폰에서도 된다.** 펼침 메뉴는 커서가 있어야만 열렸다.
   ⚠ 표적(`.ftarget`)은 `.head` 와 `main` 보다 **앞에** 서 있어야 한다 —
     CSS 가 `~` 로 뒤에 오는 것만 고를 수 있어서다 */
.ftarget{ display:block; height:0; overflow:hidden }

/* 눌린 갈래 — 표적이 머리 앞에 있으므로 `~ .head` 로 닿는다.
   `$=` 라서 `#f-clean` 과 `products.html#f-clean` 을 둘 다 잡는다 */
#f-all:target    ~ .head a[href$="#f-all"],
#f-clean:target  ~ .head a[href$="#f-clean"],
#f-mist:target   ~ .head a[href$="#f-mist"],
#f-style:target  ~ .head a[href$="#f-style"],
#f-inner:target  ~ .head a[href$="#f-inner"],
#f-device:target ~ .head a[href$="#f-device"]{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:5px;
}
/* 제품 페이지에 처음 들어오면(주소에 표적이 없으면) 「전체」가 눌린 것이다.
   ⚠ `body:has(.ftarget)` 을 앞에 붙여야 한다 — 안 붙이면 표적이 아예 없는
     회사·살롱 페이지에서도 「전체」에 밑줄이 그어진다 */
body:has(.ftarget):not(:has(.ftarget:target)) .head a[href$="#f-all"]{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:5px;
}

/* 고른 갈래만 남긴다. 「전체」일 때는 아무것도 숨기지 않는다 */
#f-clean:target  ~ main .sect:not(#clean),
#f-mist:target   ~ main .sect:not(#mist),
#f-style:target  ~ main .sect:not(#style),
#f-inner:target  ~ main .sect:not(#inner),
#f-device:target ~ main .sect:not(#device){ display:none }

/* 🔴 갈래를 고르면 **배너도 접는다** (2026-08-29)
   의뢰인: *"하위품목 헤어 살롱등을 누르면 사진과 글이 아니라 상단(상품)이 바로 보여야 할 것 같아"*

   갈래를 고른 건 **제품을 보겠다는 뜻**인데 550px 짜리 배너가 첫 화면을 다 먹고 있었다.
   정답지도 이렇게 한다 — OUAI 는 브랜드 첫 화면에만 배너가 있고
   `/collections/shampoos` 같은 갈래 페이지에는 배너가 없다. 바로 제품이다.

   「전체」와 처음 들어왔을 때는 배너를 그대로 둔다 — 그때가 첫인상 자리다 */
#f-clean:target  ~ main .banner,
#f-mist:target   ~ main .banner,
#f-style:target  ~ main .banner,
#f-inner:target  ~ main .banner,
#f-device:target ~ main .banner{ display:none }

/* 한 갈래만 남으면 그게 첫 구간이다 — 위 여백을 첫 구간처럼 줄인다.
   `:first-of-type` 은 숨겨진 것도 세므로 이 규칙이 따로 필요하다 */
#f-clean:target  ~ main #clean,
#f-mist:target   ~ main #mist,
#f-style:target  ~ main #style,
#f-inner:target  ~ main #inner,
#f-device:target ~ main #device{ padding-top:40px; padding-bottom:104px }
/* 🔴 아래 여백도 여기서 줘야 한다 (2026-08-30).
   `.sect:last-of-type` 은 **숨겨진 것도 센다.** 갈래를 고르면 화면에 남는 건 #clean 인데
   `:last-of-type` 은 여전히 #device(숨김)에 걸려서, 남은 구간은 초록 띠에 그대로 붙었다.
   의뢰인: *"클랜징 페이지만 들어가도 두 번째 케어 밑에 초록이랑 딱 붙어있다"* */
/* ⚠ 8px 이었다. 배너를 접고 나니 구간 제목이 머리 선에 **딱 붙어** 버렸다.
   배너가 있을 때는 배너가 사이를 벌려줘서 8px 로 충분했던 것이다.
   정답지는 머리 선에서 제목까지 53px 를 띄운다(선 122 → 제목 175). 40 으로 맞춘다 */

/* ── 제품 목록의 구간 ───────────────────────────
   품목이 18개가 되어 한 격자에 다 넣으면 뭐가 뭔지 모른다.
   갈래 넷으로 나누고 각 구간에 이름과 한 줄을 붙인다.
   정답지(OUAI)에는 없는 구조다 — 우리 품목 수가 더 많아서 필요해졌다 */
.sect{ padding-top:56px }
.sect:first-of-type{ padding-top:8px }
.sect__head{
  display:grid;
  /* 제목 칸을 카드 한 열(280.25)과 같게 두고 사이를 카드 간격(8)과 같게 벌린다.
     그래야 설명이 **두 번째 카드의 왼쪽 끝**에서 시작한다 — 전에는 x380 이라 아무것과도 안 맞았다 */
  grid-template-columns:280.25px 1fr;
  gap:8px;
  align-items:baseline;
  padding-bottom:4px;
  border-bottom:1px solid var(--line);
}
.sect__head h2{
  margin:0;
  font-family:var(--face-head);
  font-size:24px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-0.01em;
}
/* ⚠ 500 이었다. 아모스 브랜드관의 구간 제목 실측은 **22px/700** 이다 —
   의뢰인이 「아모스 프로페셔널」(30px/700) 두께로 맞추라고 한 것과 같은 결이다 */
.sect__head p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-2);
  /* ⚠ 52ch(434px)로 묶어놨더니 낱말이 「이어지 / 는」으로 잘려 넘어가고
     오른쪽이 391px 비었다 — 의뢰인: *"글자 배치 되어있는 게 어색해"*
     칸을 풀어 한 줄에 들어가게 한다 */
  max-width:none;
}
.sect .grid{ padding-top:28px; padding-bottom:0 }
/* 구간 사이는 `.sect{padding-top:56px}` 이 벌린다. 그래서 격자 아래는 0 이다.
   그런데 **마지막 구간은 뒤에 아무것도 없어서** 꼬리에 그대로 붙었다 (실측 0px).
   꼬리를 새로 붙이기 전에는 안 보이던 문제다 — 의뢰인: *"경계가 너무 붙어있는 느낌"* */
.sect:last-of-type{ padding-bottom:104px }

@media (max-width:1023px){
  .sect__head{ grid-template-columns:1fr }
}

/* ── 좁은 화면 ─────────────────────────────── */
@media (max-width:1023px){
  :root{ --gut:32px }
  .grid{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:599px){
  :root{ --gut:20px }
  /* ⚠ 1칸이었다. 정답지 OUAI 는 390 에서도 **2칸**이다 (카드 폭 171 실측, 2026-08-30).
     1칸이면 카드가 350px 짜리가 되어 한 화면에 하나밖에 안 보인다 */
  .grid{ grid-template-columns:repeat(2, 1fr) }
  /* ⚠ `.head .wrap{ height:64px }` 가 있었다. 한 줄짜리 머리 시절 규칙인데
     두 줄이 된 뒤로는 머리를 65px 로 눌러 **로고와 갈래 사이가 2px** 이 됐다.
     (768 에서는 14px 이었다) 높이는 내용이 정하게 둔다 — 의뢰인: *"간격이 좁다"* */
}

/* ═════════════════════════════════════════════
   회사 페이지 (index.html)
   정답지: kr.aesop.com/kr/our-story.html · 1280×720 실측 (2026-08-26)

     바탕 #FFFEF2 · 글자 #333333 · 왼쪽 기준선 48px
     큰 글 30~31px / 400 / 행간 1.33 / 자간 0
     본문   14px 행간 21  ·  16px 행간 24  (둘 다 1.5)
     장식 라벨 0 · 그라디언트 0 · 페이지 높이 4,123

   구간 리듬 — 사진 위치가 매번 뒤집힌다
     ① 전폭 배너 1265×351 (비 3.60) + 글 겹침
     ② 왼쪽 세로사진 610×914 (0.67) + 오른쪽 글 435 (왼 671)
     ③ 오른쪽 가로사진 731×369 (1.98, 왼 534) + 왼쪽 글 361 (왼 112)
     ④ 왼쪽 가로사진 731×369 (왼 0) + 오른쪽 글 361 (왼 792)
     ⑤ 전폭 사진 1265×439 (2.88)
     ⑥ 인용문 31px, 폭 1170, 왼 48
   ═════════════════════════════════════════════ */

/* 🔴 본문 끝 → 초록 띠 사이. **네 갈래 페이지가 전부 다른 값**이었다 —
   회사 96 · 목록 80 · 살롱 85 · 상세 80 (모바일은 64/56/61/80).
   의뢰인: *"모든 페이지에서 초록 경계 다 여유롭게"* → 104 / 모바일 80 으로 통일 */
.story{ padding-bottom:104px }

/* 「더 보기」 단추 — **모바일에서만** 보인다.
   데스크톱은 사진과 글이 좌우로 번갈아 앉아 그 자체가 변화지만,
   모바일에서 세로로 쌓이면 그 변화가 통째로 사라져 글 덩어리만 이어진다.
   이솝 모바일 브랜드 스토리는 문단마다 단추를 단다 —
   [이솝의 제품 철학 →] [이솝의 디자인 철학 →] [이솝 스토어 찾기 →] (390 실측 2026-08-30) */
.more{ display:none }

/* 사진 칸 — 사진이 들어오면 칸을 꽉 채우고 넘치는 쪽이 잘린다.
   아직 안 들어온 자리는 회색 칸에 무슨 사진인지 적어둔다 */
.pic{ background:#EFEADF; display:flex; align-items:center; justify-content:center; overflow:hidden }
.pic span{ font-size:12px; color:var(--ink-3) }
.pic img{ width:100%; height:100%; object-fit:cover }

/* ① 히어로 — 사진 위에 글이 얹힌다. 스크림 없이 밝은 데를 골라 얹는다 */
.hero{ position:relative }
/* 🔴 높이를 **배너와 같은 550** 으로 맞췄다 (2026-09-02 의뢰인)
   의뢰인: *"전체에서의 상단 … 와 올리베타란? 눌렀을 때 나오는 박스의 크기가 다르다"*

   이솝 실측대로 `aspect-ratio:1265/351` 을 쓰고 있었는데, 제품 페이지 배너는
   아모스 실측대로 550 이었다. **두 정답지를 각각 따라가다 한 사이트 안에서 199px 이 벌어졌다.**
   회사 쪽을 배너에 맞춘다 — 배너 550 은 이미 두 판 고쳐 확인받은 값이다.

   ⚠ 높이를 올리면 사진이 **좌우로** 잘린다. 351 일 때는 원본 폭이 다 보였다
     (1265/1600 로 줄어서 세로가 남았다). 550 은 세로 기준으로 커져 좌우 386px 이 날아간다.
     **제조기가 오른쪽에 있어 가운데 크롭이면 오른쪽 끝이 잘린다** → 크롭을 오른쪽으로 민다.
     390 폭에서 3:2 로 세울 때 쓴 72% 와 같은 값이다 */
/* 🔴 고정 높이(550)를 버리고 **사진 비율**을 쓴다 (2026-09-04)
   고정 높이면 폭이 좁아질 때 세로가 기준이 되어 **가로가 잘린다.**
   그러면 오른쪽 제품이 왼쪽으로 밀려와 **글자가 검은 튜브 위에 올라탄다** —
   1024 에서 대비가 1 까지 떨어졌다(기준 4.5).
   비율로 두면 가로가 안 잘려서 제품이 늘 제자리에 있다.
   ⚠ 1280 에서 높이가 550 → 542 가 된다. 제품 배너(550)와 8px 차이는 눈에 안 띈다 */
.hero .pic{ aspect-ratio:1916 / 821 }
.hero .pic img{ object-position:100% center }
.hero .over{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  /* 🔴 48px 고정 → **7%**. 새 히어로 사진의 **수전이 왼쪽 6% 를 차지**해서
     글자 시작점과 5px 차이로 붙었다. 7% 면 어느 폭에서도 비켜난다 (2026-09-04) */
  padding-left:12%;
}
/* 글자 폭을 고정값 대신 **사진 폭의 비율**로 둔다.
   사진의 빈 자리가 왼쪽 55% 라 46% 면 어느 폭에서도 제품을 안 넘는다 */
.hero .over > *{ max-width:46% }
/* 정답지 이솝 1280 실측 (2026-08-30) — 사진 1280×356 위에 글이 얹힌다.
     제목 「브랜드 스토리」 x55 · 폭 585 · 30px/400 · 행간 39.9
     본문                  x55 · 폭 585 · 14px/400 · 행간 21
     제목 밑 → 본문 위 **15px**
   우리 사진은 1280×355 로 거의 같다. 제목을 세우고 의뢰인 문장을 본문으로 내린다 */
.hero .over p{
  margin:15px 0 0;
  font-size:14px;
  line-height:21px;
}

/* ②③④ 좌우 교대 — 사진은 화면 끝까지 붙고 글만 여백을 지킨다

   ★ 2026-08-29 3차 실측으로 **세로 맞춤과 정렬을 고쳤다** (`ref-company.md`)
     의뢰인: *"지금 글자 배치도 이상해 글자 배치까지 정답지 따라해줘"*
     칸 치수는 맞았는데 **그 안에서 글이 서는 방식**이 달랐다 */
.duo{ display:grid; align-items:center; margin-top:120px }
.duo .pic  { grid-row:1 }
.duo .txt  { grid-row:1 }

/* ② 세로사진 + 글 — 정답지는 **가운데 맞춤**이고 큰 문장이 **가운데 정렬**이다
   (사진 558~1472 · 글 825~1190 → 가운데면 832, 실제 825) */
.duo--a{ grid-template-columns:48.2% 4.8% 34.4% auto }
.duo--a .pic{ grid-column:1; aspect-ratio:610 / 914 }
.duo--a .txt{ grid-column:3 }
/* 이 자리는 문장이 둘이라 30px 이면 너무 크다 — 의뢰인: *"이 글자 너무 커"*
   20px 로 내린다.
   🔴 가운데 정렬을 왼쪽으로 되돌렸다 (2026-08-30).
      이솝은 **네 문단 전부 왼쪽**이고 가운데는 인용문 한 곳뿐이다.
      가운데 정렬은 한 줄짜리에 쓰는 것인데 여기는 네 줄이라 눈이 매번 시작점을 다시 찾았다 */
.duo--a .big{ font-size:20px }

/* ③ 글 + 가로사진 — 정답지는 **위 맞춤**이다. 큰 문장은 왼쪽 정렬
   (사진 1590~1959 · 글 1590~1846 → 가운데면 1646, 실제 1590) */
/* ③도 같은 이유로 가운데 맞춤이다. 위 맞춤이면 아래가 225px 빈다
   (사진 369 · 글 144). 정답지는 글이 사진만큼 길어서 위 맞춤이 맞았다 */
.duo--b{ grid-template-columns:8.85% 28.5% 4.85% 57.8%; align-items:center }
/* 위 맞춤이면 첫 줄의 위 여백이 사진보다 글을 내려앉힌다 — 첫 자식만 여백을 뗀다 */
.duo .txt > :first-child{ margin-top:0 }
/* 큰 문장은 `.big{margin:0}` 이라 앞에 문단이 오면 딱 붙는다. 앞에 뭔가 있을 때만 띄운다.
   `:first-child` 규칙과 무게가 같아(0-3-0) 서로 안 밀어낸다 */
.duo .txt > * + .big{ margin-top:18px }
.duo--b .txt{ grid-column:2 }
.duo--b .pic{ grid-column:4; aspect-ratio:731 / 369 }

/* ④ 가로사진 + 글 — **위 맞춤**. 사진이 ③보다 납작하다: 비 **3.00**(731×244)
   ⚠ 1.98 로 잡아놨었다. ③과 같은 비율을 쓰면 두 구간이 똑같아 보인다 */
/* ⚠ 정답지는 여기가 위 맞춤이다. 저쪽은 글(347)이 사진(244)보다 길어서 그게 맞았고,
   우리는 글이 120 이라 위에 붙이면 아래가 124px 빈다 — 의뢰인: *"이거 사진하고 높이 맞춰줘"*
   그래서 이 자리만 가운데 맞춤으로 되돌린다 */
.duo--c{ grid-template-columns:57.8% 4.8% 28.5% auto; align-items:center }
/* 🔴 731/244 → **731/369** (2026-08-30). ③과 같은 크기로 맞춘다.
   OUAI 회사 페이지는 **614×650 한 가지를 좌우로 뒤집기만** 한다.
   우리는 610×914 · 731×369 · 731×244 · 1265×439 네 가지라 구간마다 페이지가 들썩였다 */
.duo--c .pic{ grid-column:1; aspect-ratio:731 / 369 }
.duo--c .txt{ grid-column:3 }

/* ⑤ 전폭 */
.band{ margin-top:120px }
.band .pic{ aspect-ratio:1265 / 439 }

/* ⑥ 인용 — 정답지는 **가운데 정렬**이고 출처는 14px · 굵기 700 이다 (x47 · 폭 1170) */
.quote{ margin-top:145px; padding-left:48px; padding-right:48px; text-align:center }
/* 🔴 줄 길이를 줄였다 (2026-08-30).
   이솝의 이 자리는 폭 1170 에 **짧은 경구** 한 줄이다.
   우리는 같은 폭에 **긴 두 문장**을 넣어서 한 줄이 1184px 이었다 — 읽는 글이 아니라 현수막이 됐다.
   글은 의뢰인 것이라 자르지 않는다. 대신 칸을 좁혀 줄을 나눈다 */
.quote .big{ max-width:900px; margin-left:auto; margin-right:auto }
/* 출처만 700 이다 — 이솝 「Anatole France」 14px/700 그대로 */
.quote .cite{ font-size:14px; font-weight:700 }

/* 활자 — 정답지는 크기가 딱 두 층이다. 30~31px 과 14~16px */
.big{
  margin:0;
  font-family:var(--face-head);
  font-size:30px;
  /* 🔴 700 → **400** (2026-08-30). 의뢰인: *"회사 소개 디자인이 촌스러운 느낌"*
     정답지 둘을 다시 재보니 **제목까지 전부 400** 이었다 —
     이솝 30·31px/400 · OUAI 42·56px/400. 두 사이트를 통틀어 700 은
     이솝 인용문 밑 출처 「Anatole France」 한 줄뿐이다.
     굵은 글씨가 많으면 크기로 만든 위계가 죽는다.
     ⚠ 앞서 아모스 「아모스 프로페셔널」 30px/700 을 따라 700 으로 올려뒀었다.
       그건 **짧은 브랜드 이름**이었고 여기는 **긴 문장**이다. 같은 값이 아니다 */
  font-weight:400;
  line-height:1.33;
  letter-spacing:-0.01em;
}
.big--serif{ font-size:31px }
/* ⚠ `.quote p` 는 `.big--serif` 보다 구체적이라(0-1-1 대 0-1-0) 31px 을 눌러 14px 로 만든다.
   인용문은 `.big` 을 달고 있으니 그건 빼고 잡는다 */
.txt p:not(.big), .quote p:not(.big){
  margin:18px 0 0;
  font-size:14px;
  line-height:1.5;
}
/* 같은 이유로 여기도 `:not(.big)` 을 달아야 위 규칙과 무게가 같아진다 —
   안 달면 위 규칙(0-2-1)이 이겨서 16px 이 14px 로 밀린다 */
.txt--16 p:not(.big){ font-size:16px; line-height:1.5 }
.cite{ font-size:14px; font-weight:700; margin-top:14px }

/* 아직 안 쓴 글 자리 */
.todo{ color:var(--ink-3) }
.todo::before{ content:'▢ ' }

/* 기술과 인증 — 회사 페이지 맨 아래. 규격 줄과 같은 생김새를 쓴다 */
.certs{ margin-top:96px }
.certs h2{
  margin:0 0 8px;
  font-size:14px; font-weight:700;
  letter-spacing:0.42px;
  text-transform:uppercase;
}
.certs dl{ margin:0; border-top:1px solid var(--line) }
.certs dl > div{
  display:flex; justify-content:space-between; gap:24px;
  padding-top:14px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-size:14px; line-height:20px;
}
.certs dl > div:last-child{ border-bottom:0 }
.certs dt{ font-weight:600; flex:none }
.certs dd{ margin:0; color:var(--ink-2); text-align:right }
.certs__note{ margin:14px 0 0; font-size:12px; color:var(--ink-3) }

/* ── 꼬리 ─────────────────────────────────────
   정답지 theouai.com 하단 · 1280×720 실측 (2026-08-30)

     띠 전폭 · 바탕 #322A26 · 글자 #FFFAF4 · 좌우 여백 60
     위 여백 60 → 워드마크 줄 (로고 530×151 왼 · 문장 오른, 사이 40)
     → 211 지나 링크 칸 5개 (164 폭 · 자리 간격 200) · 링크 세로 간격 37
     칸 제목 14px/700 대문자 자간 0.42 · 링크 14px/400 행간 20 자간 0.14
     맨 아래 저작권 10px/500 대문자 자간 0.42 · 바닥에서 35

   우리는 칸이 넷이라 마지막 칸을 넓게 쓴다. 바탕은 우리 딥그린(--rule) */
.foot{ background:var(--rule); color:var(--paper) }
.foot .wrap{ padding-top:60px; padding-bottom:35px }

.foot__top{
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  padding-bottom:60px;
}
.foot__logo{ height:96px; width:auto; filter:brightness(0) invert(1) }
.foot__say{
  margin:0;
  font-size:24px; font-weight:700; line-height:34px;
  text-align:right;
}

.foot__cols{
  display:grid;
  /* 제품 · 회사 · 문의 · 사업자 정보.
     「문의」는 연락할 곳이 없어 한 번 뺐다가, 이메일이 생겨 되살렸다 (2026-09-02 의뢰인) */
  grid-template-columns:164px 164px 164px 1fr;
  gap:0 36px;
  padding-bottom:56px;
}
.foot__cols h2{
  margin:0 0 17px;
  font-size:14px; font-weight:700;
  letter-spacing:0.42px;
  text-transform:uppercase;
}
.foot__cols a,
.foot__cols p{
  display:block; margin:0 0 17px;
  font-size:14px; line-height:20px; letter-spacing:0.14px;
  color:var(--paper); text-decoration:none;
}
.foot__cols a:hover{ text-decoration:underline; text-underline-offset:4px }
.foot__cols .todo{ color:rgba(255,250,244,.55) }

.foot__copy{
  margin:0;
  font-size:10px; font-weight:500; line-height:10px;
  letter-spacing:0.42px;
  text-transform:uppercase;
  color:rgba(255,250,244,.55);
}

@media (max-width:1023px){
  .duo{ grid-template-columns:1fr !important; margin-top:64px }
  .duo .pic, .duo .txt{ grid-column:1 !important; grid-row:auto !important }
  /* ⚠ 32px 이었다. 히어로와 인용문은 --gut(20) 이라 **한 페이지에 여백이 두 개**였다.
     이솝은 390 에서 글이 전부 x15 한 줄로 선다 */
  .duo .txt{ padding-left:var(--gut); padding-right:var(--gut); margin-top:24px }
  /* ③번 구간만 글이 사진보다 먼저 온다(데스크톱은 글 왼쪽·사진 오른쪽).
     세로로 쌓이면 **글 두 덩어리가 붙고 사진 두 장이 붙는다.**
     사진 → 글 로 순서를 맞춰 리듬을 하나로 만든다 */
  .duo--b .pic{ order:-1 }
}

/* ═════════════════════════════════════════════
   제품 상세 (product-oe-detox.html)
   정답지: theouai.com/products/detox-shampoo · 1280×720 실측 (2026-08-26)

     페이지 높이 5,580 · 바탕 #FFFAF4 · 글자 #2C140E
     좌우 여백 60 · 좌 칸 624 (60~684) · 사이 70 · 우 칸 411 (754~1165)

     빵부스러기  y139  12px/400 · 마지막 마디 #80706A
     큰 사진     624 × 770  (비 0.810) · object-fit:cover
     썸네일      118 × 118 · 간격 8 (자리 간격 126)
     제품명      32px/400 · 대문자 · 행간 42.6
     별점 줄     12px/600
     설명        14px/400 · 행간 20 · 자간 0.14
     "Size:"     14px/600 · 대문자 · 자간 0.12
     선택 칩     12px/700 · 대문자 · 자간 0.42 · 높이 28
     묶음 라벨   14px/700 · 대문자 · 자간 0.42     (PAIRS WELL WITH)
     묶음 카드명 14px/600 · 대문자
     접는 줄     14px/700 · 대문자 · 자간 0.42 · 높이 46
     접힌 본문   14px/400 · 행간 20

     THE SCENT 구간 (우리는 「이렇게 만든다」)
     제목 42px/400 · 대문자 · 자간 0.16 · 행간 42
     항목 라벨 24px/700 · 대문자 · 자간 0.42 · 행 간격 57
     항목 값   14px/400 · 행간 20 · 오른쪽 정렬
     오른쪽 사진 614 × 650 (비 0.945)

   우리 대응 — 별점→제조 공정 · 가격→공급 규격 · 장바구니 없음
   ═════════════════════════════════════════════ */

/* ── 빵부스러기 ─────────────────────────────── */
.crumb{
  padding-top:24px;
  font-size:12px;
  line-height:1.6;
}
.crumb a{ color:var(--ink-2); text-decoration:none }
.crumb a:hover{ text-decoration:underline; text-underline-offset:3px }
.crumb strong{ font-weight:400; color:var(--ink-3) }
.crumb i{ font-style:normal; color:var(--ink-3); padding-left:6px; padding-right:6px }

/* ── 좌 사진 / 우 정보 ──────────────────────── */
.pdp{
  display:grid;
  grid-template-columns:624px 70px 411px;
  padding-top:26px;
  padding-bottom:64px;
}
.pdp__media{ grid-column:1 }
.pdp__info { grid-column:3 }

/* 용기 고르개 — 라디오는 숨기고 라벨로만 누른다 */
.pdp > input{ position:absolute; opacity:0; pointer-events:none }

/* 큰 사진 — 정답지 624×770. 커서를 올리면 연출컷 */
.hero-shot{
  position:relative;
  aspect-ratio:624 / 770;
  overflow:hidden;
}
.hero-shot .v{
  position:absolute; inset:0; margin:0;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.hero-shot .v img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero-shot .v .scene{ opacity:0; transition:opacity .45s ease }
.hero-shot .v:hover .scene{ opacity:1 }

/* 썸네일 — 118 × 118 · 간격 8 */
.thumbs{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.thumbs label{
  width:118px; height:118px;
  display:block;
  cursor:pointer;
  outline:1px solid transparent;
  outline-offset:-1px;
}
.thumbs img{ width:100%; height:100%; object-fit:cover }

/* 고른 것만 보인다 */
#v1:checked ~ .pdp__media .v1,
#v2:checked ~ .pdp__media .v2,
#v3:checked ~ .pdp__media .v3,
#v4:checked ~ .pdp__media .v4{ opacity:1; pointer-events:auto }

#v1:checked ~ .pdp__media .thumbs label[for=v1],
#v2:checked ~ .pdp__media .thumbs label[for=v2],
#v3:checked ~ .pdp__media .thumbs label[for=v3],
#v4:checked ~ .pdp__media .thumbs label[for=v4]{ outline-color:var(--ink) }

/* ── 오른쪽 정보 칸 ─────────────────────────── */
.pdp__info h1{
  margin:0;
  font-family:var(--face-head);
  font-size:32px;
  font-weight:500;
  line-height:42.6px;
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
.pdp__meta{                        /* 정답지의 별점 줄 자리 */
  margin:12px 0 0;
  font-size:12px;
  font-weight:600;
  line-height:1.6;
  color:var(--ink-3);
}
.pdp__lead{
  margin:18px 0 0;
  font-size:14px;
  line-height:20px;
  letter-spacing:0.14px;
}
.pdp__label{
  margin:32px 0 10px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.12px;
  text-transform:uppercase;
}

/* 칩 — 12px/700 · 높이 28 */
.chips{ display:flex; flex-wrap:wrap; gap:6px }
.chips label{
  height:28px;
  display:inline-flex; align-items:center;
  padding-left:12px; padding-right:12px;
  border:1px solid var(--line);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.42px;
  cursor:pointer;
}
#v1:checked ~ .pdp__info .chips label[for=v1],
#v2:checked ~ .pdp__info .chips label[for=v2],
#v3:checked ~ .pdp__info .chips label[for=v3],
#v4:checked ~ .pdp__info .chips label[for=v4]{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}

/* 규격 — 정답지의 가격·정기구독 자리 */
.spec{
  margin-top:22px;
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:20px;
}
.spec div{
  display:flex; justify-content:space-between; gap:16px;
  padding-top:11px; padding-bottom:11px;
  border-bottom:1px solid var(--line);
}
.spec b{ font-weight:600 }
.spec span{ color:var(--ink-2); text-align:right }
/* 마지막 줄 밑줄은 접힘 구간의 윗줄과 겹친다 */
.spec div:last-child{ border-bottom:0 }

.fold{ margin-top:34px; border-top:1px solid var(--line) }
.fold details{ border-bottom:1px solid var(--line) }
.fold summary{
  height:46px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px; font-weight:700;
  letter-spacing:0.42px;
  text-transform:uppercase;
  cursor:pointer;
  list-style:none;
}
.fold summary::-webkit-details-marker{ display:none }
.fold summary::after{ content:"+"; font-weight:400; font-size:16px }
.fold details[open] summary::after{ content:"−" }
.fold p, .fold ul{
  margin:0 0 16px;
  font-size:14px;
  line-height:20px;
  letter-spacing:0.14px;
}
.fold ul{ padding-left:18px }
.fold li{ margin-bottom:4px }

/* ── 「이렇게 만든다」 — 정답지 THE SCENT 자리 ── */
.recipe{
  display:grid;
  grid-template-columns:1fr 614px;
  align-items:stretch;
  gap:0 40px;
  padding-top:56px;
  padding-bottom:56px;
}
/* 정답지는 제목이 구간 맨 위, 항목이 맨 아래에 붙어 있다
   (제목 y1397 · 마지막 줄 y1967 · 구간 1357~2007).
   가운데 정렬로 두면 위아래에 빈 자리가 크게 생긴다 */
.recipe > div{ display:flex; flex-direction:column }
.recipe h2{
  margin:0 0 40px;
  font-size:42px;
  font-weight:700;
  line-height:42px;
  letter-spacing:0.16px;
  text-transform:uppercase;
}
.recipe ol{ margin:auto 0 0; padding:0; list-style:none }   /* auto = 아래로 민다 */
.recipe li{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:57px;                       /* 정답지 행 간격 57px */
  border-bottom:1px solid var(--line);
}
.recipe b{
  font-size:24px; font-weight:700;
  letter-spacing:0.42px;
  text-transform:uppercase;
}
.recipe li span{
  font-size:14px; line-height:20px;
  text-align:right; color:var(--ink-2);
}
.recipe figure{
  margin:0;
  aspect-ratio:614 / 650;
  overflow:hidden;
}
.recipe figure img{ width:100%; height:100%; object-fit:cover }
.recipe .note{
  margin:22px 0 0;
  font-size:14px; line-height:20px; color:var(--ink-3);
}

/* ── DCC 세 단계 — 정답지 SHOP BEST SELLERS 자리 ── */
.steps{ padding-top:56px; padding-bottom:104px }
.steps h2{
  margin:0 0 28px;
  font-size:42px;
  font-weight:700;
  line-height:42px;
  letter-spacing:0.16px;
  text-transform:uppercase;
}
.steps .grid{ grid-template-columns:repeat(3, 1fr); gap:40px 8px; padding-top:0; padding-bottom:0 }
.steps .card[aria-current] .name{ text-decoration:underline; text-underline-offset:5px }

/* ── 좁은 화면 ─────────────────────────────── */
@media (max-width:1279px){
  .pdp{ grid-template-columns:1fr 40px 411px }
  .recipe{ grid-template-columns:1fr 1fr }
}
@media (max-width:1023px){
  .pdp{ grid-template-columns:1fr; gap:32px }
  .pdp__media, .pdp__info{ grid-column:1 }
  .recipe{ grid-template-columns:1fr; gap:32px }
  .recipe h2{ font-size:32px; line-height:34px }
  .steps h2{ font-size:32px; line-height:34px }
  /* ⚠ 1fr 이었다. 768 에서 카드 하나가 704px 이 됐다.
     `.steps .grid`(0-2-0)가 위의 `.grid`(0-1-0)를 눌러서 2칸 규칙이 안 먹었다 */
  .steps .grid{ grid-template-columns:repeat(2, 1fr) }
  .sect:last-of-type,
  #f-clean:target  ~ main #clean,
  #f-mist:target   ~ main #mist,
  #f-style:target  ~ main #style,
  #f-inner:target  ~ main #inner,
  #f-device:target ~ main #device{ padding-bottom:80px }
  .steps{ padding-bottom:80px }
  .thumbs label{ width:88px; height:88px }
}


/* 머리와 꼬리는 **1023 부터** 무너뜨린다.
   768 에서 재보니 갈래 여섯(약 380)이 1fr 칸(283)을 넘어 **로고를 뚫고 들어갔다**.
   1280 에서만 한 줄이 성립한다 */
@media (max-width:1023px){

  /* ① 머리 — 두 줄. 위는 로고와 문의, 아래는 갈래를 가로로 민다 */
  /* 로고를 가운데 두면 오른쪽 문의와 겹친다 (로고 115 + 문의 128 = 243).
     정답지도 좁아지면 가운데를 버린다 — 아모스는 로고 왼쪽·유틸 오른쪽이다 */
  .head__row{
    height:auto;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      'brand util'
      'nav   nav';
    row-gap:0;
    padding-top:14px;
  }
  .brand{ grid-area:brand; justify-self:start }
  .logo{ height:26px }
  .head__util{
    grid-area:util; justify-self:end; align-self:center;
    gap:14px;
  }
  /* ⚠ 12px 이었다. 갈래는 14px 이라 **머리 안에 글자 크기가 둘**이었다.
     데스크톱은 둘 다 14px 이다. 크기를 맞춘다 — 의뢰인: *"위치 정렬 잘 해야할 것 같아"* */
  .head__util a{ font-size:14px; letter-spacing:0.3px }
  .head__nav{
    grid-area:nav;
    margin:18px calc(var(--gut) * -1) 0;
    padding:0 var(--gut) 12px;
    gap:18px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .head__nav::-webkit-scrollbar{ display:none }
  .head__nav a{ font-size:14px; white-space:nowrap }
}

/* 폰에서는 갈래를 화면 끝까지 벌려 **「기기」의 오른쪽 끝이 「올리베타란?」의 「?」와 같은 선**에 서게 한다.
   의뢰인: *"기 와 ?가 딱 맞게"*
   갈래 여섯의 글자 폭 합이 약 252 라, 449 까지는 벌어진 사이가 20~39 로 자연스럽다.
   그보다 넓어지면 사이가 벌어져 보여서 여기까지만 건다 */
@media (max-width:449px){
  .head__nav{ justify-content:space-between; gap:8px }

  /* 꼬리 — 164px 칸을 그대로 두면 마지막 칸이 104px 로 눌린다(768 실측).
     둘씩 앉힌다 */
  .foot__cols{
    grid-template-columns:1fr 1fr;
    gap:32px 36px;
  }
}


/* ═════════════════════════════════════════════
   모바일 — 390 실측 (2026-08-30)

   정답지 셋을 390 폭에서 다시 쟀다.

     OUAI    좌우 20 · 머리 64(햄버거·로고·장바구니) · 큰사진 전폭 390
             카드 2칸(폭 171) · 꼬리 칸이 1칸으로 쌓이고 접힌다
     이솝    좌우 15 · 글 칸 360 전폭(데스크톱 2단이 1단으로) · 제목 31→24
             본문 14px 그대로
     아모스  좌우 20 · 머리 56 sticky · 오른쪽에 검색·장바구니만

   셋이 공통으로 지키는 것 —
     ① 좌우 여백 15~20  ② 머리 56~64  ③ **본문 글자 크기는 안 줄인다**
     ④ 큰 제목만 조금 줄인다  ⑤ 여러 단은 1단으로  ⑥ 사진은 전폭

   우리만 다른 것 — **머리의 갈래 여섯이 곧 제품 필터다.**
   OUAI 처럼 햄버거에 넣으면 필터가 사라진다.
   그래서 로고 줄 아래에 **가로로 미는 갈래 줄**을 둔다.
   (무신사·올리브영이 쓰는 방식이고, JS 가 필요 없다)
   ═════════════════════════════════════════════ */

@media (max-width:767px){

  /* ② 꼬리 — 칸을 1단으로 쌓는다. 로고는 전폭 (OUAI 도 x20 w350) */
  .foot .wrap{ padding-top:40px; padding-bottom:28px }
  .foot__top{
    display:block;
    padding-bottom:40px;
  }
  .foot__logo{ height:auto; width:100%; max-width:300px }
  .foot__say{
    margin-top:20px;
    text-align:left;
    font-size:20px; line-height:29px;
  }
  .foot__cols{
    grid-template-columns:1fr;
    gap:28px 0;
    padding-bottom:36px;
  }

  /* ③ 상세 — 사진칸은 여백 안 전폭, 썸네일은 네 칸이 한 줄에 들어가게 */
  /* 규격 줄 — 왼쪽 이름 · 오른쪽 값을 350px 에 좌우로 벌리면
     「만드는 법 / 원액 1,350ml 이상 + 에너지 파우치 → 1,850ml 이상」이
     「법」과 「이상」으로 쪼개진다. 이름 아래에 값을 놓는다 */
  .spec div{ display:block }
  .spec span{ display:block; text-align:left; margin-top:2px }

  .thumbs{ gap:8px }
  .thumbs label{ width:auto; height:auto; flex:1; aspect-ratio:1 }
  .pdp__info h1{ font-size:28px; line-height:36px }

  /* ④ 회사 이야기 — 히어로는 겹치지 않고 쌓는다.
     사진 비 1265/351 이 390 폭에서는 높이 108 밖에 안 되는데 글은 세 줄이라 흘러나왔다.
     사진을 4:3 으로 세우고 글을 그 아래로 내린다 */
  .hero{ display:block }
  /* 4:3 으로 세웠더니 원본 폭의 37%만 남아 **제조기가 잘려나갔다**.
     3:2 면 74% 가 남는다. 제조기가 오른쪽에 있어 크롭도 오른쪽으로 민다 */
  .hero{ display:block }
  /* ⚠ 데스크톱이 `height:550px` 이므로 여기서 **높이를 풀어야** 비율이 먹는다 */
  .hero .pic{ height:auto; aspect-ratio:3 / 2 }
  .hero .pic img{ object-position:72% center }
  .hero .over{
    position:static;
    padding:28px var(--gut) 0;
  }
  .hero .over > *{ max-width:none }
  /* 이솝 390 실측 — 제목 24px/400 행간 31.92 · 본문 14px 행간 21 · 사이 10 */
  .hero .big{ font-size:24px; line-height:32px }
  .hero .over p{ margin-top:10px }
  /* 인용문 — 데스크톱 900폭에서는 네 줄이라 가운데가 맞지만
     390 에서는 **일곱 줄**이 된다. 가운데 정렬은 한두 줄까지다 */
  .quote{
    margin-top:80px;
    padding-left:var(--gut); padding-right:var(--gut);
    text-align:left;
  }
  .quote .big{ font-size:22px; line-height:1.45 }
  .story{ padding-bottom:80px }

  /* 이솝 단추 실측 — 테두리 사각 · 높이 46 · 14px · 글자 뒤에 화살표 */
  .more{
    display:inline-flex; align-items:center; gap:10px;
    margin-top:24px;
    height:46px; padding:0 20px;
    border:1px solid var(--ink);
    font-size:14px; font-weight:700; letter-spacing:0.3px;
    color:var(--ink); text-decoration:none;
  }
  .more::after{ content:'→' }

  /* 제일 긴 글 덩어리(152자) 한 곳만 바탕을 달리한다.
     이솝도 다섯 블록 중 **제일 긴 블록 하나만** #F6F5E8 로 띄운다 (나머지는 #FFFEF2) */
  .duo--b .txt{
    background:#F6F1EB;
    padding-top:32px; padding-bottom:32px;
    margin-top:0;
  }
  /* 사진 비율을 하나로 — 이솝은 390 에서 **전폭 · 비 1.17 하나**로 반복한다.
     우리는 0.67 / 1.98 / 3.00 / 2.88 로 제각각이라 구간마다 페이지가 들썩였다.
     3:2 로 맞추면 높이가 260 이고, 18품목 띠(260)와도 같아진다.
     원본이 3.00·1.98 이라 4:3 까지 세우면 너무 많이 잘린다 */
  .duo .pic{ aspect-ratio:3 / 2 !important }
  /* 세로 사진(1025×1535)을 3:2 로 자르면 창 높이가 683 이다.
     병은 y628~1200 에 있어 **67%** 지점에서 잘라야 병이 창 가운데 온다 (실측) */
  .duo--a .pic img{ object-position:center 67% }

  /* ⑤ 18품목 띠 — 비 2.88 을 그대로 두면 390 폭에서 높이가 135 다.
     품목 하나가 43px 이라 무엇인지 안 보인다. 높이를 잡고 **옆으로 밀게** 한다 */
  .band{ margin-top:80px }
  .band .pic{
    aspect-ratio:auto; height:260px;
    display:block; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;
  }
  .band .pic::-webkit-scrollbar{ display:none }
  .band .pic img{ width:auto; height:100%; max-width:none }

  /* ⑤ 큰 제목만 줄인다 — 이솝 31→24 */
  .recipe h2, .steps h2{ font-size:26px; line-height:30px }
  .sect__head h2{ font-size:20px }
  .banner__txt h2{ font-size:24px; line-height:1.35 }
}

/* ── 스크롤하면 떠오른다 ────────────────────────
   정답지 실측 (2026-08-30) — OUAI·이솝 둘 다 AOS `fade-up`
     OUAI  translateY(35px) · 이솝  translate3d(0,50px,0)
   가운데값 40px. 숨기는 건 `reveal.js` 가 `.js-reveal` 을 달아줬을 때만 한다.

   ⚠ `.js-reveal .is-in`(0-2-0) 하나로 되돌리려 했더니
      `.js-reveal .duo .pic`(0-3-0)를 못 이겨서 **사진과 글이 영영 안 보였다.**
      되돌리는 규칙도 같은 깊이로 하나씩 적는다 */
.js-reveal .duo .pic,
.js-reveal .duo .txt,
.js-reveal .band,
.js-reveal .quote,
.js-reveal .sect__head,
.js-reveal .card,
.js-reveal .recipe > div,
.js-reveal .recipe figure,
.js-reveal .steps h2,
.js-reveal .pdp__media,
.js-reveal .pdp__info{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .6s ease, transform .6s ease;
}
.js-reveal .duo .pic.is-in,
.js-reveal .duo .txt.is-in,
.js-reveal .band.is-in,
.js-reveal .quote.is-in,
.js-reveal .sect__head.is-in,
.js-reveal .card.is-in,
.js-reveal .recipe > div.is-in,
.js-reveal .recipe figure.is-in,
.js-reveal .steps h2.is-in,
.js-reveal .pdp__media.is-in,
.js-reveal .pdp__info.is-in{ opacity:1; transform:none }

/* 움직임을 줄이라고 설정한 사람에게는 아무것도 안 움직인다 */
@media (prefers-reduced-motion:reduce){
.js-reveal .duo .pic,
.js-reveal .duo .txt,
.js-reveal .band,
.js-reveal .quote,
.js-reveal .sect__head,
.js-reveal .card,
.js-reveal .recipe > div,
.js-reveal .recipe figure,
.js-reveal .steps h2,
.js-reveal .pdp__media,
.js-reveal .pdp__info{ opacity:1; transform:none; transition:none }
}


/* ═══════════════════════════════════════════════════════════════
   설치 매장 (로케이터) — `andyhair.html`
   정답지: world.davines.com/pages/salon-locator  (2026-09-04 실측)

   실측값 — 뷰포트 1045 에서 **지도가 오른쪽 56%**, 목록이 왼쪽.
   제목 42px `Crimson Text`(세리프) · 등급 라벨 20px 세리프 이탤릭 ·
   주소 13px `HK Grotesk`(산세리프) · 배경 흰색.

   ★ 우리 것으로 옮기며 바꾼 것 셋 — 이유가 있다
   1. **제목을 42 → 30px.** 우리 정답지(이솝)의 최대 활자가 31px 이다.
      저쪽 크기를 그대로 들이면 이 사이트 안에서 이 페이지만 커진다.
   2. **등급 라벨을 이탤릭으로 안 쓴다.** 이탤릭은 라틴의 관습이고
      한글 「OC 전문점」에 걸면 브라우저가 억지로 기울여 흉해진다.
      대신 작은 크기 + 자간으로 층을 만든다.
   3. 🔴 **검색창 · 필터 · 페이지 넘김을 안 넣는다.**
      저쪽은 1,129곳이라 그것들이 일을 한다. **우리는 한 곳이다.**
      한 곳을 찾는 검색과 거를 것 없는 필터는 **가짜 버튼**이 된다 —
      장바구니·검색을 안 넣은 것과 같은 이유다. 매장이 늘면 그때 넣는다.
   ═══════════════════════════════════════════════════════════════ */
.loc{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:0 48px;
  align-items:start;
  padding-top:56px; padding-bottom:96px;
}
/* 제목은 **다른 페이지 제목과 같은 값**이다 (`.pdp__info h1` 실측 그대로).
   정답지(Davines)는 42px 이지만 그 크기를 들이면 이 페이지만 혼자 커진다.
   의뢰인: *"설치매장 글자 크기 다른 페이지랑 똑같이 두껍게"* (2026-09-04) */
.loc__head h1{
  margin:0;
  font-family:var(--face-head);
  font-size:32px;
  font-weight:500;
  line-height:42.6px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.loc__head p{
  margin:12px 0 0;
  font-size:14px; line-height:21px;
  color:var(--ink-3);
}
/* 「1129 Salons found」 자리 — 우리는 정직하게 곳 수를 적는다 */
.loc__count{
  margin:28px 0 0; padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-size:13px; font-weight:600;
  letter-spacing:0.3px;
  color:var(--ink);
}

/* ── 매장 카드 — 핀 · 등급 · 상호 · 주소 한 줄 · 행동 셋 ── */
.loc__list{ margin:0; padding:0; list-style:none }
.loc__item{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:0 14px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.loc__pin{ width:26px; height:26px; margin-top:2px; color:var(--ink) }
.loc__pin svg{ display:block; width:100%; height:100% }
.loc__tier{
  margin:0;
  font-family:var(--face-head);
  font-size:12px; font-weight:600; line-height:16px;
  letter-spacing:1.2px;
  color:var(--ink-3);
}
.loc__name{
  margin:4px 0 0;
  font-family:var(--face-head);
  font-size:22px; font-weight:500; line-height:30px;
  color:var(--ink);
}
.loc__addr{
  margin:6px 0 0;
  font-size:14px; line-height:22px;
  color:var(--ink-2);
}
.loc__acts{
  display:flex; flex-wrap:wrap; gap:0 20px;
  margin:12px 0 0;
}
.loc__acts a{
  font-size:13px; line-height:20px;
  color:var(--ink);
  text-decoration:underline; text-underline-offset:3px;
}
.loc__acts a:hover{ color:var(--ink-2) }

/* ── 지도 — 오른쪽. 구글 `output=embed` 는 API 키가 필요 없다 ── */
.loc__map{
  position:relative;
  /* 🔴 `z-index:0` 이 있어야 한다 — Leaflet 은 내부에서 z-index 를 800 까지 쓴다.
     머리(`.head`)가 100 이라 **지도가 머리를 뚫고 비쳤다**(의뢰인 지적).
     여기에 쌓임 맥락(stacking context)을 만들면 800 이 이 상자 안에 갇힌다 */
  z-index:0;
  /* 남한만 담으려면 상자가 세로로 길어야 한다.
     남한은 가로:세로 비가 약 0.51 인데 상자가 옆으로 넓으면 좌우에 남는 자리가
     바다와 이웃 나라로 채워진다. 560 → 700 으로 키워 그 여백을 줄였다 */
  height:700px;
  background:#E8E4DC;              /* 뜨기 전 회색. 정답지도 이 회색이다 */
  overflow:hidden;
}
.loc__map iframe{
  display:block; width:100%; height:100%; border:0;
}

/* 1024 아래 — 지도를 목록 위로 올려 쌓는다 */
@media (max-width:1023px){
  .loc{ grid-template-columns:1fr; gap:32px 0; padding-top:36px }
  .loc__map{ height:360px; order:-1 }
}
@media (max-width:767px){
  .loc{ padding-bottom:56px }
  .loc__head h1{ font-size:28px; line-height:36px }   /* 상세 페이지와 같은 값 */
  .loc__map{ height:280px }
  .loc__item{ grid-template-columns:28px 1fr; gap:0 10px }
  .loc__name{ font-size:20px; line-height:28px }
}

/* ── 지도 위 핀과 말풍선 (Leaflet) ─────────────────────────────
   ★ `output=embed` iframe 을 버리고 Leaflet 로 갈아탄 이유 —
     **iframe 은 핀을 하나만 찍는다.** 의뢰인이 *"나중에는 20개 정도로 늘릴 거야"*
     라고 해서, 우리 HTML 의 `data-lat/lng` 를 읽어 핀을 찍는 쪽으로 옮겼다.
   ★ 매장 정보는 **HTML 에 글자로** 남는다(JS 가 만들지 않는다) —
     이 페이지의 목적이 검색이라 본문이 크롤링돼야 한다. 한 곳에만 적는다 */
.loc__marker svg{ display:block; width:26px; height:34px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)) }
.loc__item{ cursor:pointer }
.loc__item:hover{ background:rgba(42,50,42,.03) }
.loc__item.is-on{ background:rgba(42,50,42,.05) }
.loc__reset{
  float:right;
  font-size:12px; font-weight:500; letter-spacing:0;
  color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px;
}
.loc__reset:hover{ color:var(--ink) }
.leaflet-popup-content{
  margin:12px 14px;
  font-family:var(--face-body);
  font-size:13px; line-height:20px; color:var(--ink);
}
.leaflet-popup-content b{
  display:block; margin-bottom:4px;
  font-family:var(--face-head); font-size:16px; font-weight:500;
}
.leaflet-container{ font-family:var(--face-body) }

/* 지도 색 — OSM 기본 타일은 초록·베이지가 섞여 우리 화면에서 튄다.
   정답지(Davines)는 회색 한 톤이다. **타일에 필터를 걸어** 채도를 뺀다.
   ⚠ 핀과 말풍선은 타일 창(`.leaflet-tile-pane`) 밖이라 색이 그대로 남는다 —
     그래서 딥그린 핀이 회색 지도 위에서 또렷하다 */
.loc__map .leaflet-tile-pane{
  filter:saturate(.28) brightness(1.05) contrast(.94);
}

/* 목록 아래 **통째로 인용될 한 문장** — 조각이 아니라 완결 문장이라야
   AI 와 검색엔진이 따갈 수 있다 (2026-09-04 의뢰인) */
.loc__say{
  margin:22px 0 0;
  font-size:14px; line-height:23px;
  color:var(--ink-2);
}