/* 첫 화면(index) 전용 — v10 머리·꼬리에 하위 페이지 메뉴를 잇고 mid 프로필 크기로 맞춘다.
   메뉴 판 값은 sub.css 와 같다(바꿀 때 둘 다). 색 토큰은 v10 :root 를 건드리지 않게 값으로 쓴다 */
header nav{font-size:14px;gap:18px}
header nav a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:0}
.logo{display:inline-flex;flex-direction:column;justify-content:center;min-height:48px}
.logo span{font-size:11px;white-space:nowrap}
.header-right .shop{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:0;font-size:13px}
.header-right button{font-size:13px;min-height:48px}
.menu-btn{display:none;background:none;border:0;color:inherit;width:48px;height:48px;min-width:48px;min-height:48px;place-items:center;margin-right:-10px;flex:none;cursor:pointer}
.menu-btn i,.menu-btn i::before,.menu-btn i::after{display:block;width:20px;height:1px;background:currentColor;position:relative;content:""}
.menu-btn i::before{position:absolute;top:-6px}.menu-btn i::after{position:absolute;top:6px}
.menu-sheet{position:fixed;inset:0;z-index:60;background:#f4f5f3;color:#152733;padding:100px 9% 40px;display:flex;flex-direction:column;gap:6px;opacity:0;visibility:hidden;transition:opacity .22s ease-out,visibility .22s;overflow-y:auto}
.menu-sheet.open{opacity:1;visibility:visible}
.menu-sheet a{font-size:26px;letter-spacing:-.04em;padding:12px 0;border-bottom:1px solid #cdd5d8}
.menu-sheet .menu-close{position:absolute;top:22px;right:6%;background:none;border:0;color:inherit;font-size:28px;width:48px;height:48px}
.menu-sheet small{margin-top:auto;font-size:13px;color:#4f6371;line-height:1.8;letter-spacing:.04em}
/* 폰에서 메뉴 판으로 옮겨 오는 소리·모션 단추(sub.js) */
.sheet-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sheet-tools:empty{display:none}
.sheet-tools button{background:transparent;border:1px solid #b7c3c7;color:#344754;min-height:48px;padding:0 18px;font-size:15px;white-space:nowrap}
@media(max-width:1100px){header nav{gap:12px}.header-right{gap:16px}}
@media(max-width:800px){.menu-btn{display:grid}.logo span{font-size:10px}.header-right .shop{display:none}}
/* 접힘(sub.js 가 넘침을 재서 붙인다) — 줄바꿈 대신 넘치게 해서 잴 수 있게 한다 */
header nav a,.header-right>*{white-space:nowrap}
header.fold nav,header.compact .header-right .shop{display:none}
header.fold .menu-btn{display:grid}
header.fold .header-right{margin-left:auto}
@media(prefers-reduced-motion:reduce){.menu-sheet{transition:none}}

/* 꼬리 — 하위 페이지와 같은 크기 */
footer p{font-size:16px}
footer a{font-size:15px;display:inline-flex;align-items:center;min-height:48px}
footer .logo{font-size:26px}
footer small{display:block;font-size:13px;color:#4f6371;letter-spacing:.04em}

/* ── mid 바닥값 — v10 의 위계·색·글꼴·배치는 두고, 7~12px 이던 글만 끌어올린다.
   영문 대문자 라벨 13px(커진 만큼 자간은 줄임) · 본문 16px(폰 15~16) · 단추와 글 링크 14px·터치 48 · 흐린 글은 대비 4.5 까지.
   style.css 의 폰 규칙(같은 선택자)보다 뒤에 있어서 폭과 상관없이 이 값이 걸린다 — 폰만 다른 값은 맨 아래 @media 에 ── */
/* 첫 장면 */
.hero-copy .eyebrow{font-size:13px;letter-spacing:.16em}
.hero-korean{font-size:17px}
.circle-link,.hero-copy .circle-link{font-size:14px;min-height:48px}
.circle-link span{width:48px;height:48px;flex:none}
.hero-aside p{font-size:14px;line-height:1.8}
.hero-aside .eyebrow{font-size:13px;letter-spacing:.1em}
.signature-copy>p:not(.eyebrow){font-size:16px;line-height:1.9}
.signature-line{font-size:13px;letter-spacing:.1em}
/* 첫 장면 네 제품 구성 — 자리·각도·마우스 반응은 형이 받아 온 v13 그대로(style.css 끝 블록·hero-portrait.js).
   사진만 흰 바탕 JPG → 같은 500×500 투명 컷(assets/pack-*.webp, 자리·크기 동일). v13 은 장면 전체를 곱하기로 섞어 흰 바탕을 지우는데,
   그러면 흰 병(라이트)의 흰 테두리도 바탕색이 되어 왼쪽 윤곽이 사라진다 → 컷 + 옅은 그림자로 윤곽만 살린다(곱하기는 그대로).
   v13 의 작은 영문 줄(7px·폰 5px)은 글 쪽 브랜드 줄과 같은 말이라 접는다.
   칸 자르기(overflow:hidden)는 흰 바탕을 가리던 것 — 컷은 바탕이 없어서 풀어 둔다. 세로로 긴 창(태블릿 세로 820×1180)에서는
   칸 폭이 사진 폭보다 좁아져 병 양옆이 잘렸다(병 폭 = 사진 폭의 24%, 칸 폭은 사진 폭의 16~20%) */
.signature-intro .portrait-pack{overflow:visible}
.signature-intro .portrait-pack img{-webkit-mask-image:none;mask-image:none;filter:brightness(1.075) drop-shadow(0 12px 14px #3b51602e)}
.portrait-edition{display:none}
/* 세로 태블릿(801px 넘는 세로 창) — 글 위·제품 아래로 쌓는다. 칸의 위끝·높이는 sub.js 가 글 아래끝을 재서 넣는다 */
@media(min-width:801px) and (orientation:portrait){
  .signature-copy{top:16%;width:72%}
  .signature-intro .hero-portrait{left:10%;width:80%}
}
/* sub.js 가 제품 칸이 모자란다고 잴 때만 — 1단: 브랜드 줄 접고 글을 머리줄 바로 아래로, 2단: 영문 머리표까지 접음 */
.signature-copy.tight1{top:max(12%,88px)}
.signature-copy.tight1 .signature-line,.signature-copy.tight2 .eyebrow{display:none}
/* 제품 이야기(제품 사진 위 글) — 제품 사진은 v13 처럼 가림막 없이(style.css 끝 블록): 부스터 아래끝·옴므 뚜껑이 둥근 가림막에 먹히던 것 */
.story-copy .eyebrow{font-size:13px;letter-spacing:.12em;color:#3d5462}
.story-copy>p:not(.eyebrow){font-size:16px;line-height:1.8;max-width:380px;color:#3d5462}
#ingredient-names{font-size:13px;gap:8px;color:#3d5462}
#story-actions a,.product-hold #story-actions a{font-size:14px;display:inline-flex;align-items:center;min-height:48px}
#story-actions button{font-size:14px;min-height:48px}
.scene-note{width:170px}
.scene-note>span:not(.scene-note-line){font-size:13px;letter-spacing:.06em}
.scene-note small{font-size:13px;line-height:1.6}
.scroll-label{font-size:13px;letter-spacing:.1em}
/* 밝은 장(부스터·크림·라이트) 글·꺼진 단추 = #3d5462 한 색 — v10 #78909e·#718a95·#748c98·#536570 은 크림 베이지·라이트 바탕에서 2.2~4.5(bg_contrast.py).
   옴므·첫 장면 색은 style.css 의 더 구체적인 규칙이 그대로 이긴다 */
.timeline button{font-size:13px;letter-spacing:.06em;min-height:48px;min-width:96px;color:#3d5462}
.timeline button span{font-size:13px}
#skip-story{font-size:14px;min-height:48px}
.phase-nav button{font-size:14px;min-height:48px;color:#3d5462}
/* 철학·의식 */
.manifesto-main p{font-size:16px}
.manifesto-main>div{max-width:400px}
.text-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;min-height:48px}
.research-strip>span{font-size:13px;letter-spacing:.08em;line-height:2.2;color:#5b6a73}
.research-strip b{font-size:16px}
.research-strip a{font-size:14px;min-height:48px}
.ritual-copy>p:not(.eyebrow){font-size:16px;line-height:1.9}
.ritual-copy h2 em{color:#66796f}
.ritual-caption{font-size:13px;letter-spacing:.1em;color:#5f6f6a}
.collection-heading>p{font-size:16px;max-width:320px}
.collection-picker a{font-size:15px;min-height:48px}
.collection-picker span{color:#5e7074}
/* 제품 소개(네 포뮬러) */
.dossier-number,.dossier-caption{font-size:13px;letter-spacing:.1em}
.dossier-number{color:#557079}
.dossier-replay{font-size:14px;min-height:48px}
.dossier-copy>.eyebrow{font-size:13px;letter-spacing:.1em;color:#57707a}
.dossier-name{font-size:16px}
.dossier-tabs button{font-size:14px;min-height:48px;min-width:48px;color:#5a6e75}
.dossier-panel h4{font-size:16px}
.dossier-panel p{font-size:15px;line-height:1.8;color:#55676e}
.dossier-panel small{font-size:13px}
.formula-point>span{font-size:14px;color:#62747a}
.dossier-actions>a{font-size:14px;display:inline-flex;align-items:center;min-height:48px}
.dossier-actions>button{font-size:14px;min-height:48px}
.formula-editor-note{font-size:13px;color:#5d6b70}
/* 더 알아보기 */
.support-links span{font-size:13px;letter-spacing:.08em;color:#5a6c64}
.support-links p{font-size:16px}
@media(max-width:800px){
  .hero-korean{font-size:16px}
  .hero-copy .eyebrow{max-width:260px}
  .story-copy>p:not(.eyebrow){font-size:15px;line-height:1.75;max-width:none}
  .timeline{gap:8px}
  .timeline button{min-width:0;letter-spacing:.02em}
  .timeline button span{display:none}
  .phase-nav button{font-size:13px;padding:0 8px;margin-right:6px}
  .collection-picker a{font-size:14px}
}
/* 폰 3D 이야기 — 글·제품·아래 단추줄이 서로 덮지 않게(scratchpad story_fit.py 로 잰 자리).
   v10 에서 6px 라 읽히지 않던 장식 줄(.scroll-label)은 폰에서 접고, 단계 메뉴와 「제품 바로보기」를 한 줄에 놓는다.
   아래 단추줄 = 14(바닥) + 48(타임라인) + 6 + 48(단계·바로보기) → 상담 원은 그 위(gm-assist.css 의 gm-lift) */
@media(max-width:800px){
  .story-copy{top:max(12%,88px)}
  .story-copy .eyebrow{margin-bottom:10px}
  .story-copy>p:not(.eyebrow){line-height:1.65}
  .scroll-label{display:none}
  .stage-bottom{bottom:14px;gap:6px 8px}
  /* 단계 메뉴·바로보기 줄은 키 작은 폰에서 3D 받침대 아래 테두리와 같은 높이에 온다 — 터치 상자(48)는 두고 글자만 상자 아래쪽으로 */
  #skip-story{margin-left:auto;max-width:40%;padding:18px 0 0;text-align:right;line-height:1.3}
  .phase-nav{left:7%;width:auto;max-width:52%;bottom:68px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .phase-nav::-webkit-scrollbar{display:none}
  .phase-nav button{flex:none;min-width:48px;padding:18px 6px 0;margin-right:0}
  .phase-nav button:before{margin-right:5px}
  /* sub.js 가 글이 제품에 닿는다고 잴 때만 — 1단: 머리표 접고 제목 줄임, 2단: 영문 제품명·원료명 줄까지 접음 */
  .story-copy.tight1 .eyebrow{display:none}
  .story-copy.tight1 h2{font-size:24px;margin-bottom:10px}
  .story-copy.tight2 #ingredient-names{display:none}
  /* 키 작은 폰에서 옴므 받침대 아래 테두리가 단계 메뉴 줄까지 내려온다(v10 도 같은 자리) — 밝은 글이 밝은 받침대 위에서도 읽히게 */
  body[data-chapter=homme] .phase-nav button,body[data-chapter=homme] #skip-story{text-shadow:0 0 2px #142630,0 0 8px #142630}
  /* 옴므 제품 단계 조명 — v10 은 가로 화면 기준(70% 46%, 제품이 오른쪽)이라 세로 화면에선 밝은 글 오른쪽에 떨어져 글이 지워진다
     (v10 390×844 실측 대비 1.1~1.7, bg_contrast.py). 폰에선 같은 색으로 병 뒤에만 비춘다(원료·성분 단계의 바탕 중심도 같은 까닭으로) */
  body[data-chapter=homme] .stage{background:radial-gradient(ellipse at 50% 64%,#49636a 0%,#233b43 45%,#101e25 100%)}
  body[data-chapter=homme].product-hold .stage{background:radial-gradient(ellipse 46% 24% at 50% 64%,#e7ece8 0%,#dce4df 26%,#657d81 62%,#142630 100%)}
  /* 옴므에서 쓸고 지나가는 빛줄기(.cinema-light, app.js --beam-*)도 세로 화면에선 글 덩어리와 아래 단추줄을 지난다
     (v10 390×844 f=.85 실측 1.8~2.9) — 글 자리·단추줄 자리만 빛을 덜고 제품 자리는 그대로 */
  /* 그래도 빛줄기가 지나는 자리의 흐린 글(#becdcd)은 4.2~4.4 — 폰 옴므에서만 한 단계 밝게(제목 #f1eee4 보다는 어둡게) */
  body[data-chapter=homme] .story-copy>p,body[data-chapter=homme] #ingredient-names,body[data-chapter=homme] .phase-nav button,body[data-chapter=homme] .timeline button{color:#d3dfdf}
  body[data-chapter=homme] .cinema-light{-webkit-mask-image:linear-gradient(#0003 0 44%,#000 60% 76%,#0003 86%);mask-image:linear-gradient(#0003 0 44%,#000 60% 76%,#0003 86%)}
  /* 밝은 장에선 원료 그림이 키 작은 폰에서 단추줄까지 내려온다(375×667 크림 원료: 시어 껍질 위 「제품 바로보기」 1.47) — 어두운 글에 밝은 테두리 빛.
     첫 장면(.opening)은 사진 위 흰 글이라 뺀다 */
  body:not(.opening):not([data-chapter=homme]) .phase-nav button,body:not(.opening):not([data-chapter=homme]) #skip-story{text-shadow:0 0 2px #f4f5f3,0 0 8px #f4f5f3}
}