로 감싸면 안에 들어가는 제목·문단 구조가 깨진다 */
.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;
}
/* 🔴 **기본 연출인 제품은 .scene 을 아예 안 넣는다** (2026-09-10 의뢰인).
**OC 제조기 · TT** 만 아직 연출컷이 정면컷에
색만 바꾼 그라디언트다. 장소도 사건도 없어서 넘어가 봤자 배경색만 깜빡인다.
넣는 쪽은 장소가 있는 것만 — O BALANCE · C-CLEAR · CE-CARE · OE-DETOX · WE
· **마스카라**(2026-09-10 — 아크릴판 · 물방울)
· **W**(2026-09-11 — 자주 바탕 · 긴 그림자)
· **M**(2026-09-11 — 크림 바탕에 눕힘 · 단단한 그림자)
· **S**(2026-09-11 — 유리그릇 · 물방울)
· **에너지소금**(2026-09-11 — 트래버틴 판 · 소금 알갱이 · 잎 그림자)
· **홍삼**(2026-09-11 — 무명천 · 홍삼 뿌리 · 어두운 바탕) */
.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;
}
/* 🔴 히어로 글자만 한 단계 두껍게 — 400 → 500 (2026-09-04 의뢰인: *"조금씩 더 두껍게"*)
⚠ **`.big` 을 통째로 올리지 않는다.** 그 값은 회사 페이지의 긴 문단들과 인용문도 함께 쓴다.
2026-08-30 에 700 이 *"촌스럽다"* 고 해서 400 으로 내린 이력이 있다 —
굵은 글씨가 많으면 크기로 만든 위계가 죽는다. 사진 위에 얹힌 이 두 줄만 올린다.
★ 사진 위 글자는 배경이 있어 같은 굵기라도 얇아 보인다. 500 이면 그 손해만 메운다 */
.hero .big{ font-weight:500 }
.hero .over p{ font-weight:500 }
/* ②③④ 좌우 교대 — 사진은 화면 끝까지 붙고 글만 여백을 지킨다
★ 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 네 가지라 구간마다 페이지가 들썩였다 */
/* ⚠ ④ story-4 는 원본이 1600×533(3.0) 이라 이 칸에서 **가로 34% 가 잘린다.**
2026-09-14 에 의뢰인이 보고 **「PC 에서는 티 안 난다」로 그냥 두기로 했다.** 건드리지 말 것.
폰에서는 잘림 없이 제 비율로 선다 (아래 767 규칙) */
.duo--c .pic{ grid-column:1; aspect-ratio:731 / 369 }
.duo--c .txt{ grid-column:3 }
/* ⑤ 전폭 — 제품이 오른쪽에서 왼쪽으로 흘러간다 (2026-09-12 의뢰인) */
.band{ margin-top:120px }
.band .pic{ aspect-ratio:1265 / 439 }
.flow{
overflow:hidden; /* 화면 밖으로 나간 것은 잘린다 */
display:flex; width:100%;
/* 양끝을 흐리게 지운다 — 안 그러면 제품이 **모서리에서 뚝 끊긴다.**
흘러 들어오고 흘러 나가는 것처럼 보여야 한다 */
-webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* 🔴 움직이는 것은 **덩이 하나뿐**이다 (2026-09-12).
줄마다 따로 움직이면 각자 제 폭의 절반씩 밀려서 이음매가 어긋난다.
두 벌을 묶은 덩이를 **절반(=정확히 한 벌)** 만큼 밀면 제자리로 돌아온다 */
.flow__track{
display:flex; flex:none;
animation:flow 64s linear infinite;
will-change:transform;
}
.flow__row{
display:flex; flex:none; align-items:flex-end;
margin:0; padding:0; list-style:none; gap:34px;
padding-right:34px; /* 두 벌 사이도 같은 간격이라야 이음매가 안 보인다 */
}
.flow__row li{ flex:none }
.flow__row img{
display:block; width:auto; height:216px;
object-fit:contain;
}
/* 🔴 **절반만큼만** 민다. 두 벌이 똑같으니 절반에서 처음으로 돌아가도 눈에는 이어져 보인다.
`transform` 만 움직인다 — 자리를 다시 계산하지 않아 부드럽고 배터리를 안 먹는다 */
@keyframes flow{
from{ transform:translate3d(0,0,0) }
to { transform:translate3d(-50%,0,0) }
}
/* ⚠ 마우스를 올리면 멎게 해뒀다가 **뺐다** (2026-09-12 의뢰인).
제품을 짚어 보라고 넣은 것인데, 여기 제품은 누를 수 있는 것도 아니고
위쪽 차림표로 마우스가 지나가기만 해도 멈춰서 **고장처럼 보였다.**
흐르는 띠는 그냥 계속 흐르게 둔다 */
/* ⚠ 움직임을 줄여달라고 해둔 사람에게는 **흐르지 않는다.** 멀미를 일으킨다 */
@media (prefers-reduced-motion: reduce){
.flow__track{ animation:none }
.flow{ overflow-x:auto } /* 대신 손으로 밀어서 볼 수 있게 */
}
/* ⑥ 인용 — 정답지는 **가운데 정렬**이고 출처는 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:700; /* .loc__head h1 과 같은 값을 유지한다 */
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 }
/* 🔴 위여백 34px → **2px** (2026-09-04 의뢰인. 폰에서 먼저 고치고 데스크톱까지)
이 테두리가 **규격칸을 닫는 선** 노릇을 한다. 그런데 규격칸 아래여백 11 에
여기 34 가 얹혀 **45px** 이나 떨어져 있었다 — 「용기」 **위** 선은 11px 인데 아래만 멀었다.
⚠ 34px 은 실측값이 아니다. `ref-products.md` 에 근거가 없다 — 내가 임의로 정한 값이었다 */
.fold{ margin-top:2px; 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;
/* 🔴 폰에서 조금 내린다 (2026-09-04 의뢰인)
재보면 로고 글자와 세로 가운데가 정확히 맞는데(둘 다 28.0),
**로고의 잎이 위로 솟아 있어** 유틸이 높이 떠 보인다.
상자를 맞추는 것과 눈에 맞는 것이 다른 경우다 — 눈을 따른다.
`position:relative; top` 은 자리를 안 밀고 그리기만 옮긴다 */
position:relative;
top:6px;
}
/* ⚠ 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 }
.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 에서는 **일곱 줄**이 된다. 가운데 정렬은 한두 줄까지다 */
/* 🔴 왼쪽 정렬로 바꿔놨다가 되돌린다 (2026-09-13).
「가운데 정렬은 한두 줄까지」라고 적어뒀는데, 정답지는 390 에서도 **가운데**다(실측).
글이 짧아져서 이제 가운데가 맞다 */
.quote{
margin-top:80px;
padding-left:var(--gut); padding-right:var(--gut);
text-align:center;
}
.quote .big{ font-size:22px; line-height:1.45 }
/* ⚠ 데스크톱에서 넣은 줄바꿈이 휴대폰에서는 **어중간하게 또 접힌다.**
좁은 화면에서는 줄바꿈을 풀고 저절로 접히게 둔다 */
.quote .big br{ display:none }
.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;
}
/* 🔴 **3:2(1.5) 로 눌러놨더니 사진이 크게 잘렸다** (2026-09-13 의뢰인).
정답지를 390 으로 다시 재보니 **1.17** 이었다 — 우리가 낮게 잡은 것이다.
1.5 는 높이 260, 1.17 은 **333**. 특히 ② 세로 사진(0.67)이 심하게 잘리고 있었다.
⚠ 첫 장(히어로)만 정답지가 **0.96** 으로 더 높다. 그것도 맞춘다 */
/* 🔴 **비율 맞추기를 그만둔다 — 사진을 통째로 보여준다** (2026-09-14 의뢰인 세 번째 지적).
1.5 → 1.17 로 두 번 낮췄는데 또 「잘린다」가 왔다. 재보니 당연했다 —
① story-1 1916×821 (2.33 가로) → 0.96 칸 : **가로 59% 가 잘림**
② story-2 1025×1535 (0.67 세로) → 1.17 칸 : **세로 43% 가 잘림**
③ story-3 1774×887 (2.0) → 1.17 칸 : 가로 42% 가 잘림
④ story-4 1600×533 (3.0) → 1.17 칸 : 가로 61% 가 잘림
칸 비율은 정답지(이솝)에서 잰 값이다. 저쪽 사진은 그 비율로 **찍은** 것이고
우리 사진은 아니다. 남의 칸에 우리 사진을 밀어넣으니 병이 반으로 잘렸다.
→ 폰에서는 **칸이 사진을 따라간다.** `height:auto` 면 사진 제 비율로 선다.
⚠ 그래서 사진마다 높이가 다르다. 그게 맞다 — 자르지 않으려면 높이를 포기해야 한다.
⚠ 넓은 화면(1024+)은 그대로다. 거기서는 칸이 넓어 잘림이 크지 않다 */
.hero .pic, .duo .pic{ aspect-ratio:auto !important; height:auto }
.hero .pic img, .duo .pic img{ height:auto; object-fit:contain }
/* ⑤ 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;
/* 500 -> 700. 사이트의 다른 제목이 전부 700 이라 페이지 제목만 가늘어 보였다.
.pdp__info h1 과 짝이라 그쪽도 같이 올렸다 (2026-09-09 의뢰인) */
font-weight:700;
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 }
/* 카드 — 정답지는 스타벅스 매장찾기다 (2026-09-09 실측)
.base___JrMLA { transition: background-color .2s ease-out } ← 배경색 하나만
:not(.isActive):hover { background:#0000000f } ← 검정 6%
.isActive { background:브랜드색 10%; border:2px solid 브랜드색; border-radius:8px }
⚠ 저쪽은 margin:2px + width:calc(100% - 4px) 로 테두리 들어갈 자리를 미리 비운다.
우리는 outline 을 쓴다 — 레이아웃을 아예 안 건드려서 더 깔끔하다 */
.loc__item{
display:grid;
grid-template-columns:1fr; /* 표식을 빼서 한 칸이 됐다 */
/* 정답지는 테두리와 글자 사이가 넉넉하다 (padding-left 40px).
우리는 표식을 뺐으니 좌우를 같게 22px 로 둔다.
⚠ 글자는 제자리(제목과 같은 줄)에 두고 **테두리만 바깥으로** 나가야 한다 —
그래서 padding 만큼 margin 을 음수로 되돌린다 (2026-09-09 의뢰인) */
padding:22px 22px;
margin-inline:-22px;
border-bottom:1px solid var(--line);
cursor:pointer;
transition:background-color .2s ease-out;
}
.loc__item:not(.is-on):hover{ background:rgba(21,47,21,.05) }
.loc__item.is-on{
background:rgba(21,47,21,.08);
outline:2px solid var(--ink);
outline-offset:-2px;
border-radius:8px; /* 정답지(스타벅스) 실측값 */
border-bottom-color:transparent;
}
/* 고른 카드의 표식만 커진다 — 지도의 노드와 같은 움직임 */
.loc__item .loc__dot{ transition:transform .2s ease-out }
.loc__item.is-on .loc__dot{ transform:scale(1.5) }
.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:600; line-height:30px; /* 카드 제목(.name)이 600 이다 */
color:var(--ink);
}
.loc__addr{
margin:7px 0 0;
font-size:14px; line-height:21px;
color:var(--ink-2);
}
/* 🔴 정답지는 행동 단추를 **고른 카드에만** 보여준다 (「Order Here」).
늘 보여주면 300곳에서 링크가 수백 개가 되어 목록이 링크 덩어리가 된다.
저쪽 카드가 127px(고름) / 179px 인 것도 이 방식 덕이다 (2026-09-09 의뢰인) */
.loc__acts{
display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px;
margin:14px 0 0;
}
/* 문의하기는 정답지(스타벅스)의 「Order Here」처럼 **속이 찬 알약 단추**로.
글자 링크 둘은 왼쪽에 두고, 단추만 오른쪽 끝으로 민다 (2026-09-09 의뢰인) */
.loc__call{
display:none; /* 고른 카드에만 나온다 — 아래 .is-on 규칙 */
margin-left:auto;
padding:10px 22px; border-radius:50px;
background:var(--ink); color:var(--paper) !important;
font-size:14px; font-weight:600; letter-spacing:-.01em;
text-decoration:none !important;
transition:opacity .2s ease-out;
}
.loc__call:hover{ opacity:.82 }
.loc__item.is-on .loc__call{ display:inline-block }
.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__name{ font-size:20px; line-height:28px }
}
/* ── 지도 위 핀과 말풍선 (Leaflet) ─────────────────────────────
★ `output=embed` iframe 을 버리고 Leaflet 로 갈아탄 이유 —
**iframe 은 핀을 하나만 찍는다.** 의뢰인이 *"나중에는 20개 정도로 늘릴 거야"*
라고 해서, 우리 HTML 의 `data-lat/lng` 를 읽어 핀을 찍는 쪽으로 옮겼다.
★ 매장 정보는 **HTML 에 글자로** 남는다(JS 가 만들지 않는다) —
이 페이지의 목적이 검색이라 본문이 크롤링돼야 한다. 한 곳에만 적는다 */
/* 물방울 핀(.loc__marker)과 옛 고름 색은 지웠다 - 2026-09-09.
핀은 작은 원으로 바뀌었고, 카드 고름 색은 위쪽 .loc__item 규칙이 정답지 값으로 갖고 있다.
⚠ 여기 남아 있던 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`) 밖이라 색이 그대로 남는다 —
그래서 딥그린 핀이 회색 지도 위에서 또렷하다 */
/* 정답지(테슬라)는 바탕 지도를 거의 지우고 점만 남긴다.
🔴 그런데 opacity(.5) + contrast(.74) 로 눌렀더니 **지역명 글자까지 같이 흐려졌다** (2026-09-09 의뢰인).
필터는 글자만 골라서 못 건드린다 - 대신 **대비를 거꾸로 올린다.**
대비를 올리면 어두운 것(글자·경계선)은 더 어두워지고 밝은 것(면)은 더 밝아져서,
바탕은 그대로 옅은데 글자만 살아난다. opacity 는 뺐다 */
.loc__map .leaflet-tile-pane{
/* 값은 여섯 개를 찍어 재고 골랐다 —
1.55 는 바탕이 완전히 하얘져 「지도가 아니라 흰 종이」가 됐고,
1.15 는 글자가 다시 흐려졌다. 1.30 이 글자는 검고 지도는 살아 있다 */
filter:grayscale(1) contrast(1.30);
}
/* 목록 아래 **통째로 인용될 한 문장** — 조각이 아니라 완결 문장이라야
AI 와 검색엔진이 따갈 수 있다 (2026-09-04 의뢰인) */
.loc__say{
margin:22px 0 0;
font-size:14px; line-height:23px;
color:var(--ink-2);
}
/* ── 매장이 4곳이 되어 목록이 지도(700px)보다 길어졌다 (2026-09-08 의뢰인)
정답지(Davines)와 같은 해법: 왼쪽 기둥을 지도와 같은 높이로 묶고
**목록만 그 안에서 스크롤**시킨다. 제목·곳수는 위에, 인용 문장은 바닥에 고정.
1023px 아래에서는 지도가 위로 올라가고 목록은 페이지 흐름대로 흐르므로 손대지 않는다 */
@media (min-width:1024px){
.loc__col{
display:flex; flex-direction:column;
height:700px; /* .loc__map 과 같은 값 — 지도 높이를 바꾸면 여기도 */
min-height:0;
}
.loc__list{
flex:1 1 auto; min-height:0;
overflow-y:auto;
/* 🔴 overflow-y 를 주면 가로도 같이 잘린다(overflow-x 가 auto 가 된다).
고른 카드는 margin-inline:-12px 로 상자 밖까지 나가 있어서 **왼쪽 테두리가 잘렸다.**
상자를 왼쪽으로 14px 넓히고 그만큼 안쪽 여백을 줘서, 글은 제자리에 두고 잘림만 없앤다 */
/* 🔴 좌우 24 로 같다. 오른쪽이 비어 보이는 건 **스크롤바(10px) 자리**이지 여백이 아니다.
한 번 14 로 줄였다가 카드가 스크롤바 밑으로 8px 들어가 잘렸다 (2026-09-09).
▶ 재는 기준을 조심할 것 — 잘리는 자리는 상자 테두리가 아니라 **스크롤바 안쪽**이다.
ul.offsetWidth - ul.clientWidth 로 스크롤바 폭을 빼고 재야 한다.
scrollbar-gutter:stable 은 목록이 짧아 스크롤바가 없을 때도 자리를 잡아둔다 */
scrollbar-gutter:stable;
margin-left:-24px;
padding-left:24px;
padding-right:24px;
scrollbar-width:thin;
scrollbar-color:#C9C2B6 transparent;
}
.loc__list::-webkit-scrollbar{ width:6px }
.loc__list::-webkit-scrollbar-thumb{ background:#C9C2B6; border-radius:3px }
.loc__list::-webkit-scrollbar-track{ background:transparent }
/* 바닥 고정 문장은 스크롤 구역과 선으로 구분한다 */
.loc__col .loc__say{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line) }
}
/* ══════════════════════════════════════════════════════════════
매장 네트워크 (2026-09-09)
정답지 둘을 섞었다 — 지도 표현은 **테슬라**(작은 원형 노드를 실제 지도에 촘촘히),
윗머리 인상은 **임팩트허브**(메시지와 숫자가 먼저, 지도는 그 아래).
🔴 색은 **등급이 아니라 종류**다. 두 노드는 크기가 같고 색만 다르다.
══════════════════════════════════════════════════════════════ */
:root{
--net-pro:#152F15; /* 전문점 — 브랜드 딥그린 */
--net-use:#A08149; /* 올리베타 사용점 — 보조 브론즈 */
}
/* .wrap 의 좌우 padding 을 지우지 않도록 shorthand 를 쓰지 않는다 */
/* ── 범례 + 지역 ── */
.loc__count b{ font-family:var(--face-head); font-weight:600 }
.loc__none{ display:block; margin-top:6px; font-weight:400; color:var(--ink-3) }
/* 🔴 [hidden] 은 UA 기본값이라 **작성자가 쓴 display 가 이긴다.**
.loc__item 은 display:grid, .loc__none 은 display:block 이라 숨겨도 그대로 보였다 */
.loc__item[hidden],.loc__none[hidden],.loc__reset[hidden]{ display:none !important }
/* ── 검색·거르기. 정답지(스타벅스) 실측 ─────────────────────────
토글 바깥 알약 테두리 .67px · 라운드 50px · 패딩 0
칸 패딩 7px 16px · 16px/600 · 라운드 50px
검색 입력 테두리 없이 아래선만 .67px · 19px/400 · 오른쪽 패딩 48px
돋보기 24 x 24, 오른쪽 */
.find{ margin:22px 0 0 }
/* 거르기 토글 — 정답지(스타벅스 Pickup|Delivery) 실측 그대로 (2026-09-09 의뢰인)
바깥 알약 테두리 .67px · 라운드 50px · 패딩 0
칸 패딩 7px 16px · 16px/600 · 자간 -0.16px
⚠ 저쪽 칸 안에는 **색 점이 없다.** 글자뿐이다 */
.find__toggle{
display:inline-flex; padding:0;
border:1px solid var(--ink); border-radius:50px;
}
.find__toggle button{
display:inline-flex; align-items:center; gap:7px;
padding:7px 16px; border:0; border-radius:50px;
background:transparent; color:var(--ink);
font:inherit; font-size:16px; font-weight:600; letter-spacing:-.16px;
cursor:pointer; transition:background-color .2s ease-out, color .2s ease-out;
}
.find__toggle button:hover{ background:rgba(21,47,21,.06) }
.find__toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--paper) }
/* 정답지(스타벅스) 실측 — 검색 입력은 **334 x 35** 이고 칸을 다 채우지 않는다.
저쪽은 남는 자리에 Filter 단추가 붙지만 우리 거르기는 위 토글이 한다 (2026-09-09 의뢰인) */
/* ── 지역 거르개 — 토글 옆 단추 + 펼침 창 (2026-09-14 의뢰인) ──────
*"밑에 더럽게 다 설치하지 말고 그냥 전문점 사용점 필터 옆에 필터 버튼 만들고
지역 구분 창 나오게"*
⚠ 칩 열세 개를 아래에 늘어놨던 판을 걷어냈다. PC 두 줄(64px) · 폰 **세 줄(99px)** 이었다.
거르개가 목록보다 자리를 더 먹었다. 단추 하나면 **한 줄도 안 쓴다** — 토글 옆 빈자리에 앉는다 */
/* 🔴 창의 기준을 **단추가 아니라 이 줄**로 잡는다.
단추에 맞추면(`.find__area{position:relative}`) 390px 화면에서 창이
**왼쪽으로 9px 삐져나갔다**(실측). 단추가 오른쪽에 있어 `right:0` 이 밖을 가리킨 것이다.
줄에 맞추면 창의 오른쪽 끝이 **기둥의 오른쪽 끝**이 되어 어느 폭에서도 안 넘친다 */
.find__row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; position:relative }
/* 단추는 토글과 **같은 알약 말투**다 — 높이·글자·라운드를 맞춰 한 줄로 읽히게 한다 */
.find__areabtn{
display:inline-flex; align-items:center; gap:6px;
padding:7px 14px;
border:1px solid var(--ink); border-radius:50px;
background:transparent; color:var(--ink);
font:inherit; font-size:16px; font-weight:600; letter-spacing:-.16px;
cursor:pointer;
transition:background-color .2s ease-out, color .2s ease-out;
}
.find__areabtn:hover{ background:rgba(21,47,21,.06) }
.find__areabtn svg{ width:14px; height:14px; flex:none; transition:transform .2s ease-out }
.find__areabtn[aria-expanded="true"] svg{ transform:rotate(180deg) }
/* 고른 상태 — 토글의 고른 칸과 같이 **채운 알약**이 된다.
글자도 「지역」에서 「경기」로 바뀐다. 창을 안 열어도 무엇으로 걸렀는지 보인다 */
.find__areabtn.is-set{ background:var(--ink); color:var(--paper) }
/* 펼침 창 — 지도 위로 떠야 하므로 z-index 를 준다.
⚠ 오른쪽 끝을 단추에 맞춘다(`right:0`). 왼쪽에 맞추면 좁은 화면에서 창이 밖으로 나간다 */
.find__pop{
position:absolute; top:calc(100% + 8px); right:0; z-index:40;
width:282px; max-width:calc(100vw - 40px);
padding:12px;
display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
background:var(--paper);
border:1px solid var(--line); border-radius:12px;
box-shadow:0 14px 36px rgba(21,47,21,.16);
}
.find__pop[hidden]{ display:none }
.find__pop button{
padding:7px 6px;
border:.67px solid var(--line); border-radius:50px;
background:none; color:var(--ink);
font-size:13px; font-weight:600; letter-spacing:-.01em;
white-space:nowrap; cursor:pointer;
transition:background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}
.find__pop button:hover{ background:rgba(21,47,21,.06) }
.find__pop button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.find__pop button[hidden]{ display:none }
.find__search{ position:relative; margin-top:16px; max-width:334px }
.find__search input{
width:100%; height:35px;
padding:0 44px 0 2px;
border:0; border-bottom:1px solid rgba(21,47,21,.5); border-radius:0;
background:transparent; color:var(--ink);
font-family:var(--face-body); font-size:19px; font-weight:400; /* 정답지 19px/400 */
transition:border-color .2s ease-out;
}
.find__search input::placeholder{ color:var(--ink-3) }
.find__search input:focus{ outline:0; border-bottom-color:var(--ink); border-bottom-width:2px }
.find__search input::-webkit-search-cancel-button{ -webkit-appearance:none }
.find__search svg{
position:absolute; right:2px; top:5px; width:24px; height:24px;
color:var(--ink-2); pointer-events:none;
}
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ── 지도. 가장자리까지 꽉 채운다 ── */
.net__map .leaflet-container{ background:#F5F1E9; font-family:var(--face-body) }
/* 바탕 지도를 거의 지운다 — 주인공은 점이다 */
.net__map .leaflet-control-attribution{
background:rgba(255,250,244,.82); font-size:10px; color:var(--ink-3);
}
/* 확대 단추가 왼쪽 패널과 겹친다 - 오른쪽으로 보낸다 */
.net__map .leaflet-top.leaflet-left{ left:auto; right:0 }
.net__map .leaflet-bar a{
background:var(--paper); color:var(--ink); border-bottom-color:var(--line);
}
/* ── 노드를 눌렀을 때 뜨는 카드 ── */
.net__map .leaflet-popup-content-wrapper{
border-radius:0; background:var(--paper);
box-shadow:0 14px 36px rgba(21,47,21,.16); padding:0;
}
.net__map .leaflet-popup-content{ margin:0; width:236px !important; line-height:1.6 }
.net__map .leaflet-popup-tip{ background:var(--paper) }
.netcard__shot{
display:block; width:100%; height:118px; object-fit:cover;
background:#EDE7DC; border-bottom:1px solid var(--line);
}
.netcard__body{ padding:16px 18px 17px }
.netcard__name{ margin:0; font-size:17px; font-weight:500; letter-spacing:-.01em }
.netcard__en{
margin:4px 0 0; font-family:var(--face-head);
font-size:11px; letter-spacing:.2em; color:var(--ink-3);
}
.netcard__region{ margin:11px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-2) }
.netcard__tier{ margin:9px 0 0; font-size:12px; color:var(--ink-2) }
.netcard__tier i{
display:inline-block; width:7px; height:7px; border-radius:50%;
margin-right:7px; vertical-align:1px;
}
.netcard__more{
display:inline-block; margin:14px 0 0; font-size:13px;
color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink);
padding-bottom:2px;
}
@media (max-width:900px){
/* 🔴 폰의 좌우 여백은 20px 이라 -22px 을 밀면 카드가 화면 밖으로 나간다 (2026-09-09).
밀어내는 양을 여백보다 작게 둔다 */
.loc__item{ padding:22px 12px; margin-inline:-12px }
.find__toggle button{ font-size:14px; padding:6px 13px }
.find__search input{ font-size:16px }
/* 폰에서는 토글 글자가 14px 이라 지역 단추도 같이 낮춘다 — 한 줄에 같이 앉아야 한다 */
.find__areabtn{ font-size:14px; padding:6px 12px }
.find__pop{ grid-template-columns:repeat(3,1fr) }
}
/* ══════════════════════════════════════════════════════════════
모바일 — 목록을 **옆으로 넘긴다** (2026-09-14 의뢰인)
*"모바일에서는 매장 누르고 118곳을 쭉 내려야 밑에 설명까지 다다를 수 있어.
그걸 몇 개 매장 마다 옆으로 넘기는 식으로"*
🔴 DOM 을 다시 짜지 않는다. 격자를 **세로로 채우고 가로로 넘긴다** —
`grid-auto-flow:column` + `grid-template-rows:repeat(N,auto)` 면
N 개마다 새 칸이 생기고, 칸 하나가 화면 폭(`grid-auto-columns:100%`)이다.
숨긴 매장(`[hidden]`)은 칸을 안 먹으므로 **거르기·검색과 저절로 맞는다.**
쪽을 `` 로 묶는 방법은 거를 때마다 DOM 을 다시 짜야 해서 버렸다.
⚠ 카드가 좌우로 12px 삐져나와 있다(배경만 넓고 글자는 제자리). 그대로 두면
**넘김 상자가 그 12px 까지 스크롤 거리로 세어** 칸이 어긋난다.
→ 삐져나오는 몫을 **상자 쪽 음수 여백**으로 옮기고 카드는 0 으로 둔다.
══════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
/* 🔴 이 한 줄이 없으면 넘김이 통째로 망가진다.
격자 칸의 기본 `min-width` 는 `auto` 라 **안에 든 것보다 작아지지 않는다.**
칸이 30쪽(약 12만 px)만큼 벌어져 `.loc__col` 이 화면 밖으로 나갔다 —
실측에서 목록 상자 폭이 4300px 로 나왔고 페이지가 가로로 넘쳤다 */
.loc__col{ min-width:0 }
.loc__list{
min-width:0;
display:grid;
grid-auto-flow:column;
grid-template-rows:repeat(5,auto);
grid-auto-columns:100%;
overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory;
overscroll-behavior-x:contain; /* 끝에서 페이지째 끌려가지 않게 */
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
margin-inline:-12px;
}
.loc__list::-webkit-scrollbar{ display:none }
.loc__item{ scroll-snap-align:start; margin-inline:0 }
/* 쪽 넘김 줄 — 손가락으로 밀어도 되지만 **단추가 있어야 넘어가는 줄 안다** */
.locpg{
display:flex; align-items:center; justify-content:center; gap:18px;
margin:18px 0 0; padding-top:14px;
border-top:1px solid var(--line);
}
.locpg__btn{
width:44px; height:44px; padding:0; /* 손가락 과녁 44px */
display:flex; align-items:center; justify-content:center;
background:none; border:1px solid var(--line); border-radius:50%;
color:var(--ink); cursor:pointer;
transition:background-color .2s ease-out, opacity .2s ease-out;
}
.locpg__btn:hover{ background:rgba(21,47,21,.06) }
.locpg__btn:disabled{ opacity:.3; cursor:default }
.locpg__btn svg{ width:20px; height:20px; display:block }
.locpg__now{
margin:0; min-width:74px; text-align:center;
font-size:13px; font-weight:600; letter-spacing:.3px; color:var(--ink-3);
}
.locpg__now b{ font-family:var(--face-head); font-weight:600; color:var(--ink) }
}
/* 폰은 한 쪽에 넷. 카드가 130px 남짓이라 다섯이면 한 화면을 넘는다 */
@media (max-width:767px){
.loc__list{ grid-template-rows:repeat(4,auto) }
}
/* 넓은 화면은 예전 그대로 — 세로로 쭉, 목록 안에서만 구른다 */
@media (min-width:1024px){
.locpg{ display:none !important }
}
/* 🔴 목록 카드에서 표식을 뺐다 (2026-09-09 의뢰인: 「왼쪽 박스칸에서 표시되는 게 촌스러움」).
정답지(스타벅스)도 카드 왼쪽에 표식이 없다 — 종류는 「전문점」 글자 라벨이 말한다.
로고를 줄마다 반복하면 상표가 글머리표가 되어 값싸 보인다.
로고는 지도에서 고른 매장 하나에만 나온다 */
/* 🔴 로고가 투명 PNG 라 고리 안으로 지도가 비쳐 「위에 얹힌 것」으로 안 보였다 (2026-09-09 의뢰인).
정답지(스타벅스)의 고른 표식은 **속이 꽉 찬 도형**이다 — 초록 바탕에 흰 심볼.
그래서 채운 원판을 깔고 로고를 흰색으로 뒤집는다. 그림자로 지도에서 한 겹 띄운다 */
.net-mark{
width:34px; height:34px; border-radius:50%;
background:var(--ink);
display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 7px rgba(21,47,21,.38), 0 0 0 2px var(--paper);
pointer-events:none;
}
.net-mark img{ width:23px; height:23px; display:block; filter:brightness(0) invert(1) }
/* ══ 카카오 지도용 (2026-09-12) ═══════════════════════════════════
Leaflet 은 점이 **SVG 원**이라 JS 로 그렸다. 카카오에는 그게 없어서
`CustomOverlay` 에 div 를 얹어 CSS 로 그린다.
⚠ 카카오의 `Circle` 은 반지름이 **미터**라 확대하면 같이 커진다 — 점으로 못 쓴다 */
.kdot{
display:block; border-radius:50%;
/* ⚠ 테두리를 2px 로 올렸더니 점이 허옇게 떴다 — 8px 점에 2px 테두리면
속살이 4px 밖에 안 남는다. 1.5px 로 두고 겹침은 **그림자**로 푼다 */
border:1.5px solid var(--paper);
box-shadow:0 1px 3px rgba(0,0,0,.42);
box-sizing:border-box; cursor:pointer;
transform:translate(-50%, -50%); /* CustomOverlay 는 왼쪽 위가 기준이다 */
transition:width .15s ease-out, height .15s ease-out;
}
.kdot--pro{ background:#152F15 }
.kdot--use{ background:#A08149 }
/* 고른 것 — 전문점은 점이 **그대로 마크가 된다.**
🔴 예전에는 21px 칸에 34px 그림을 넣어 **가로만 눌린 회색 타원**이 됐다.
칸과 그림을 따로 두지 않는다 — **칸이 곧 마크다.** 크기는 JS 가 배율 따라 잡는다 */
.kdot.is-on{
border:2px solid var(--paper);
background:#111; /* 의뢰인 지시 — 진초록 말고 **검정** */
box-shadow:0 0 0 9px rgba(21,47,21,.14), 0 2px 6px rgba(0,0,0,.45);
display:flex; align-items:center; justify-content:center;
padding:18%; box-sizing:border-box;
}
.kdot.is-on img{
width:100%; height:100%; display:block;
flex:none; /* ⚠ 이게 없으면 flex 가 가로만 눌러 타원이 된다 */
object-fit:contain;
filter:brightness(0) invert(1); /* 검은 바탕 위 흰 마크 */
}
/* 멀리서 본 전문점 — 로고를 접고 후광 두른 점으로 돌아간다 */
.kdot--pro.is-on.is-far{ background:#152F15; border-width:1.5px; padding:0 }
.kdot--use.is-on{
background:#A08149; padding:0;
box-shadow:0 0 0 9px rgba(160,129,73,.16), 0 2px 6px rgba(0,0,0,.45);
}
/* 말풍선 — Leaflet 의 `popup` 자리. 속은 `.netcard__*` 를 그대로 쓴다 */
.kcard{
width:236px; background:var(--paper);
box-shadow:0 14px 36px rgba(21,47,21,.16);
font-family:var(--face-body); line-height:1.6;
transform:translateX(-50%);
}
.net__map .map_wrap, .net__map > div{ background:#F5F1E9 }
/* ══ 매장 종류 — 정답지는 다비네스 살롱 로케이터 (2026-09-09) ═══════
큰 사진 한 장 + 옆에 제목과 짧은 글. 두 덩이가 좌우 번갈아 놓인다.
저쪽 사진 실측 690 x 517 = 약 4:3.
🔴 사진과 글은 의뢰인이 넣는다. 지금은 빈칸이다 */
.kinds{ padding-top:96px; padding-bottom:8px }
.kinds__row{
display:grid; grid-template-columns:1fr 1fr; gap:0 72px;
align-items:center;
}
.kinds__row + .kinds__row{ margin-top:88px }
/* 둘째 덩이는 사진을 오른쪽으로 — 번갈아 놓는 것이 정답지의 리듬이다 */
.kinds__row--flip .kinds__shot{ order:2 }
.kinds__shot{
aspect-ratio:4 / 3;
background:#EFEAE1;
border:1px dashed var(--slot-line, #C3B6A2);
display:flex; align-items:center; justify-content:center;
}
.kinds__shot::after{
content:attr(data-slot);
font-size:13px; letter-spacing:.06em; color:#9A8F7F;
}
.kinds__shot img{ width:100%; height:100%; object-fit:cover; display:block }
.kinds__shot:has(img){ border:0; background:none }
.kinds__shot:has(img)::after{ content:none }
/* 제목 굵기는 사이트 기준에 맞춘다 - .banner__txt h2 / .sect__head h2 / .steps h2 가 전부 700 이다.
여기만 400 이라 혼자 가늘어 보였다 (2026-09-09 의뢰인) */
.kinds__txt h2{
margin:0;
/* 🔴 --face-head(함렛)를 쓰면 **라틴만** 함렛으로 나온다(한글은 함렛에 없어 프리텐다드로 떨어진다).
그래서 「올리베타 OC 전문점」의 OC 두 글자만 세리프가 되고
「올리베타 사용점」은 전부 산세리프라 **두 제목이 다른 글꼴로 보였다.**
실측: 700 32px 에서 OC 폭이 함렛 56.1 / 프리텐다드 47.3 (19% 차이).
이 페이지의 다른 곳(카드의 「OC 제조기」)도 본문 글꼴이라 그쪽에 맞춘다 */
font-family:var(--face-body);
font-size:32px; font-weight:700; line-height:1.32; letter-spacing:-.01em;
}
.kinds__txt p{
margin:20px 0 0; max-width:30em;
font-size:15px; line-height:1.85; color:var(--ink-2);
}
/* 단추 - 정답지(다비네스)는 각진 사각 테두리다. 알약도 아니고 채워진 것도 아니다.
저쪽 실측 194 x 49 · 14px · 자간 1px · 세리프 */
.kinds__more{
display:inline-block; margin-top:28px;
padding:14px 28px;
border:1px solid var(--ink); border-radius:0;
font-family:var(--face-body); font-size:14px; font-weight:600; letter-spacing:.02em;
color:var(--ink); text-decoration:none; cursor:pointer;
transition:background-color .2s ease-out, color .2s ease-out;
}
.kinds__more:hover{ background:var(--ink); color:var(--paper) }
@media (max-width:900px){
.kinds{ padding-top:60px }
.kinds__row{ grid-template-columns:1fr; gap:22px 0 }
.kinds__row + .kinds__row{ margin-top:52px }
.kinds__row--flip .kinds__shot{ order:0 }
.kinds__txt h2{ font-size:25px }
}