/* =====================================================================
   COCODEMER HOME — css/home.css (HOME v3, KO index.html · EN en/index.html 에서만 로드)
   · css/site.css 다음에 로드. site.css 수정 0
   · 범위: .hp(HOME <main>) + HOME 페이지의 footer 가독성 + 포커스 링
   ===================================================================== */

:root{
  --hp-muted:#666666;          /* 라이브 --muted #8A8A8A(3.2~3.5:1) → 흰/F6 배경 4.9~5.7:1 */
  --hp-dark-muted:rgba(255,255,255,.74);
  --hp-ease:cubic-bezier(.22,.61,.36,1);
  --hp-hero-bg:#121212;
}

/* ---------- 공통: 가독성 · 포커스 · 줄바꿈 ---------- */
.hp img{height:auto}   /* width/height 속성(CLS 방지) 추가분이 세로를 고정하지 않도록 */
.hp h1,.hp h2,.hp h3{text-wrap:balance}
.hp .lead,.hp .midcopy,.hp p{text-wrap:pretty}
.hp .sec-en{color:var(--hp-muted)}
.hp .sec-top .lead{color:var(--hp-muted);font-weight:400}
.hp .sys .step,.hp .evid .l{color:var(--hp-muted)}
.hp .midcopy{color:var(--ink-2);font-weight:400}
.hp .dark .sec-en,.hp .dark.sec-en{color:rgba(255,255,255,.6)}
.hp .dark .sec-top .lead{color:var(--hp-dark-muted)}
.hp .btn{transition:background-color .25s var(--hp-ease),color .25s var(--hp-ease),border-color .25s var(--hp-ease),transform .15s var(--hp-ease)}
.hp .btn:active{transform:translateY(1px)}
.hp .btn.sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.hp-center{text-align:center}
.hp-mt30{margin-top:30px}
.hp-mt48{margin-top:48px}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible{outline:2px solid #111;outline-offset:3px}
.hp .dark a:focus-visible,.hp .dark [role="button"]:focus-visible,.hp-hero a:focus-visible,.hp-films a:focus-visible,.hp-films [role="button"]:focus-visible{outline-color:#fff}
footer .f-biz span,footer .f-b2b,footer .f-nav a{color:#6f6f6f}
footer .f-copy{color:#707070}
.hp #archive .arc .no{color:rgba(255,255,255,.62)}
@media (prefers-reduced-motion:reduce){.hp *{transition:none!important}}

/* ---------- v2 제목 구조: 섹션 제목 H3→H2, 하위 H4→H3 (라이브 h3/h4 스타일을 그대로 옮김) ---------- */
.hp h2,.hp h3{font-size:inherit;font-weight:inherit}
.hp .sec-top h2{font-size:clamp(20px,2.2vw,26px);font-weight:500;line-height:1.5}
.hp .sec-top h2.en-d{font-weight:400;letter-spacing:.05em}
.hp .dark .sec-top h2{color:#fff}
.hp .product-now h2{font-family:var(--serif);font-size:clamp(24px,3.6vw,44px);font-weight:400;letter-spacing:.06em;color:#fff;line-height:1.3}
.hp .sys h3{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:.08em;margin-bottom:20px}
.hp .b2bi h3{font-size:17px;font-weight:400;color:#fff;margin-bottom:12px;line-height:1.5}

/* =====================================================================
   P1. HERO (v2) — 고정 1장 + 구매 띠
   · 문구 시작점 = 헤더 로고와 같은 선(콘텐츠 폭 1240 기준 좌측 여백) → 1920 정렬 보정
   ===================================================================== */
.hp-hero{background:var(--hp-hero-bg);color:#fff;padding:0}
.hp-hero-main{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  min-height:clamp(470px,calc(100vh - 80px - 128px),720px);
  padding-right:max(0px,calc((100% - var(--max)) / 2))}
.hp-hero-copy{align-self:center;padding:64px 32px 64px clamp(24px,3.5vw,64px);max-width:640px}
.hp-hero .eyebrow{font-family:var(--serif);font-size:clamp(13px,1.1vw,16px);letter-spacing:.2em;color:rgba(255,255,255,.78);margin-bottom:26px}
.hp-hero h1{font-size:clamp(28px,2.9vw,44px);font-weight:500;line-height:1.38;letter-spacing:-.01em;margin-bottom:24px;color:#fff}
.hp-hero-sub{font-size:clamp(15px,1.15vw,17px);color:rgba(255,255,255,.86);line-height:1.8;font-weight:400}
.hp-hero-fig{position:relative;overflow:hidden}
.hp-hero-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 8%,#000 22%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 8%,#000 22%)}

/* 구매 띠 — Aqua 썸네일 + 제품명 + 버튼 + B2B + 기존 유통 파트너 안내문(라이브 WHERE TO BUY 문장 그대로) */
.hp-now{border-top:1px solid rgba(255,255,255,.12);background:#0c0c0c}
.hp-now-in{max-width:var(--max);margin:0 auto;padding:16px 32px 14px;display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"prod cta b2b" "note note note";
  align-items:center;column-gap:24px;row-gap:8px}
.hp-now-prod{grid-area:prod;display:flex;align-items:center;gap:16px;min-width:0}
.hp-now-thumb{flex:0 0 auto;width:60px;height:60px;background:#fff;overflow:hidden}
.hp-now-thumb img{width:100%;height:100%;object-fit:contain;object-position:50% 50%;padding:3px}
.hp-now-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hp-now-e{font-family:var(--serif);font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.62)}
.hp-now-n{font-family:var(--serif);font-size:clamp(15px,1.3vw,18px);letter-spacing:.08em;color:#fff;line-height:1.4}
.hp-now-cta{grid-area:cta;display:flex;gap:10px}
.hp-now-cta .btn{min-width:150px}
.hp-now-b2b{grid-area:b2b;justify-self:end;display:inline-flex;align-items:flex-end;min-height:44px;font-size:14px;color:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(255,255,255,.4);padding:0 0 4px;transition:color .25s var(--hp-ease),border-color .25s var(--hp-ease)}
.hp-now-b2b:hover{color:#fff;border-bottom-color:#fff}
.hp-now-note{grid-area:note;font-size:14px;color:rgba(255,255,255,.66);line-height:1.6;padding-right:76px}

@media (max-width:1000px){
  .hp-hero-main{min-height:clamp(420px,58vw,540px)}
  .hp-hero-copy{padding:48px 32px 48px 24px}
  .hp-now-in{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"prod b2b" "cta cta" "note note"}
  .hp-now-note{padding-right:0}
}
@media (max-width:640px){
  .hp-hero-main{display:flex;flex-direction:column-reverse;min-height:0;padding-right:0}
  .hp-hero-fig{aspect-ratio:4/3}
  .hp-hero-fig img{object-position:60% 50%;-webkit-mask-image:none;mask-image:none}
  .hp-hero-copy{max-width:none;padding:28px 20px 26px}
  .hp-hero .eyebrow{margin-bottom:12px;font-size:12.5px}
  .hp-hero h1{font-size:clamp(22px,6.1vw,26px);margin-bottom:10px}
  .hp-hero-sub{font-size:15px;line-height:1.7}
  .hp-now-in{padding:14px 20px 18px;column-gap:12px;row-gap:12px}
  .hp-now-prod{gap:12px}
  .hp-now-thumb{width:48px;height:48px}
  .hp-now-e{font-size:11.5px}
  .hp-now-n{font-size:15px}
  .hp-now-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hp-now-cta .btn{min-width:0;width:100%;padding-right:8px;padding-left:8px}
}
/* 낮은 화면(소형 폰): 글자는 줄이지 않고 이미지 높이만 줄여 구매 버튼·B2B를 첫 화면 안에 */
@media (max-width:640px) and (max-height:760px){
  .hp-hero-fig{aspect-ratio:auto;height:clamp(150px,calc(100svh - 470px),230px)}
}
@media (max-width:640px) and (max-height:680px){
  .hp-hero-fig{height:clamp(140px,calc(100svh - 470px),190px)}
  .hp-hero-copy{padding:22px 20px 20px}
}
/* 낮은 PC 화면(높이 ≤820): 히어로 최소 높이를 낮춰 구매 띠를 첫 화면 안에 */
@media (min-width:1001px) and (max-height:820px){
  .hp-hero-main{min-height:max(400px,calc(100vh - 80px - 128px))}
}

/* ---------- QUICK NAV — 모바일 2×3 격자(197px) → 한 줄 가로 스크롤(약 56px) ---------- */
@media (max-width:640px){
  .hp .quick.q6 .quick-in{display:flex;overflow-x:auto;scrollbar-width:none;padding:0 12px;-webkit-overflow-scrolling:touch}
  .hp .quick.q6 .quick-in::-webkit-scrollbar{display:none}
  .hp .quick.q6 .quick-in a{flex:0 0 auto;padding:18px 14px;border-right:0;min-height:44px}
}

/* =====================================================================
   TODAY — 3개 상자 테두리 → 상단 hairline 흐름(01→02→03)
   ===================================================================== */
.hp .hp-flow{background:none;border:0;gap:clamp(20px,3vw,48px)}
.hp .hp-flow .sys{background:none;border-top:1px solid var(--ink);padding:28px 4px 8px;text-align:right}
.hp .hp-flow .sys h3{margin-bottom:10px}
.hp .hp-flow .sys ul{border-top:0;padding-top:0}
.hp .hp-flow .sys li{color:var(--hp-muted);font-weight:400}
@media (max-width:1000px){.hp .hp-flow{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .hp .hp-flow{grid-template-columns:1fr;gap:0}
  .hp .hp-flow .sys{padding:22px 0 20px}
  .hp .hp-flow .sys .step{margin-bottom:8px;white-space:nowrap}
  .hp .hp-flow .sys h3{margin-bottom:6px}
  .hp .hp-flow .sys .sysline{margin-bottom:6px}
}

/* =====================================================================
   AVAILABLE NOW — 흰 사각 패널 제거, 연출컷 4:5
   ===================================================================== */
.hp #now .hp-pn{grid-template-columns:minmax(0,440px) minmax(0,520px)}
.hp #now .hp-pn .pn-fig{background:none;padding:0}
.hp #now .hp-pn .pn-fig img{aspect-ratio:4/5;object-fit:cover;object-position:50% 46%}
.hp #now .pn-body{color:var(--hp-dark-muted);font-weight:400}
@media (max-width:860px){
  .hp #now .hp-pn{grid-template-columns:minmax(0,440px)}
  .hp #now .hp-pn .pn-fig{max-width:360px;width:100%}
}
@media (max-width:640px){
  .hp #now .hp-pn .pn-fig{max-width:none}
  .hp #now .hp-pn .pn-fig img{aspect-ratio:1/1;object-position:50% 50%}
}

/* =====================================================================
   SKIN CODE — PC 2열(문구 | 축·수치). 카피·수치 동일
   ===================================================================== */
.hp .hp-sc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.hp .hp-sc .sec-top{text-align:right;margin-bottom:28px}
.hp .hp-sc .sec-top .rule{margin-right:0}
.hp .hp-sc .sec-top .lead{margin-right:0}
.hp .hp-sc .midcopy{text-align:right;margin:0}
.hp .hp-sc-cta{margin-top:34px}
.hp #skincode .hp-sc .axes.tight{margin-bottom:36px}
@media (max-width:1000px){
  .hp .hp-sc{grid-template-columns:1fr;gap:36px}
  .hp .hp-sc .sec-top,.hp .hp-sc .midcopy{text-align:center}
  .hp .hp-sc .sec-top .rule,.hp .hp-sc .sec-top .lead{margin-right:auto}
  .hp .hp-sc-tx{display:flex;flex-direction:column;align-items:center}
  .hp .hp-sc-data{order:0}
}

/* HERITAGE 카드 — 모바일 세로 3장(약 1,740px) → 가로 스냅 스크롤(다음 카드 일부 노출) */
@media (max-width:640px){
  .hp #archive .arcgrid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:none;border:0;gap:12px;
    margin-left:-20px;padding-left:20px}
  .hp #archive .arcgrid::-webkit-scrollbar{display:none}
  .hp #archive .arc{scroll-snap-align:start;border:1px solid rgba(255,255,255,.14)}
}

/* =====================================================================
   COLLECTIONS — 이미지 타일(비대칭: SKINCARE 큰 칸 / FRAGRANCE·BIO 세로 2칸)
   ===================================================================== */
.hp-colgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(16px,2vw,28px)}
.hp-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;color:var(--ink);overflow:hidden}
.hp-col .ph{position:relative;overflow:hidden;background:#e9e9e9;min-height:240px}
.hp-col .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--hp-ease)}
.hp-col:hover .ph img{transform:scale(1.03)}
.hp-col .tx{padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column;align-items:flex-start}
.hp-col .ln{font-family:var(--serif);font-size:12px;letter-spacing:.16em;color:var(--hp-muted);margin-bottom:14px}
.hp-col h3{font-size:clamp(17px,1.4vw,20px);font-weight:500;line-height:1.5;margin-bottom:12px}
.hp-col h3.en-d{font-family:var(--serif);font-weight:400;letter-spacing:.03em}
.hp-col p{font-size:14.5px;color:var(--ink-2);line-height:1.8}
.hp-link{margin-top:auto;padding-top:22px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--ink);line-height:1.6;transition:border-color .25s var(--hp-ease)}
.hp-col:hover .hp-link{border-bottom-color:transparent}
.hp-col-main{grid-row:1/3;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
.hp-col-main .ph{aspect-ratio:auto;min-height:420px}
.hp-col-main .ph img{object-position:50% 40%}
.hp-col:nth-child(2) .ph img{object-position:52% 52%}
.hp-col:nth-child(3) .ph img{object-position:60% 50%}
@media (max-width:1000px){
  .hp-colgrid{grid-template-columns:1fr}
  .hp-col-main{grid-row:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none}
  .hp-col-main .ph{min-height:300px}
}
@media (max-width:640px){
  .hp-col,.hp-col-main{grid-template-columns:1fr}
  .hp-col .ph,.hp-col-main .ph{min-height:0;aspect-ratio:4/3}
  .hp-col-main .ph img{object-position:50% 30%}
}

/* =====================================================================
   기록 영상 — BRAND FILM + COLLABORATION 한 섹션(PC 2열)
   ===================================================================== */
.hp-films-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.hp-filmcard .sec-en,.hp-filmcard h3,.hp-filmcard .lead{text-align:right}
.hp-films .sec-en{color:rgba(255,255,255,.6)}
.hp-films .lead{margin:0 0 28px;color:var(--hp-dark-muted);font-weight:400;min-height:3.4em}
.hp-filmcard h2{color:#fff;font-size:clamp(19px,1.8vw,24px);font-weight:500;margin-bottom:12px}
.hp-filmcard h2.en-d{font-family:var(--serif);font-weight:400;letter-spacing:.04em}
.hp #collaboration .collabfilm .frame{aspect-ratio:16/9;overflow:hidden}
.hp #collaboration .collabfilm .frame img{height:100%;object-fit:cover}
.hp #collaboration .ytlink,.hp #film .ytlink{text-align:right}
.hp #collaboration .ytlink a{color:rgba(255,255,255,.72);border-bottom-color:rgba(255,255,255,.3)}
.hp #collaboration .ytlink a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
.hp #film .ytlink a{color:rgba(255,255,255,.72)}
.hp-films .play i{width:60px;height:60px}
.hp-films .ytlink a{display:inline-block;padding:12px 0 2px}
@media (max-width:860px){
  .hp-films-in{grid-template-columns:1fr;gap:56px}
  .hp-films .lead{min-height:0}
}

/* =====================================================================
   마지막 이중 CTA — 구매 | B2B
   ===================================================================== */
.hp-close{border-top:1px solid rgba(255,255,255,.1)}
.hp-close-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);margin-bottom:clamp(28px,3vw,40px)}
.hp-close-p{background:var(--black);padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;align-items:flex-start}
.hp-close-p .sec-en{color:rgba(255,255,255,.6);margin-bottom:14px}
.hp-close-p h2{color:#fff;font-size:clamp(19px,1.8vw,24px);font-weight:500;line-height:1.5;margin-bottom:14px}
.hp-close-p p{color:var(--hp-dark-muted);font-size:15px;line-height:1.8;margin-bottom:30px}
.hp-close-p .btn{margin-top:auto;min-width:200px}
.hp .hp-b2bgrid .b2bi p{color:var(--hp-dark-muted)}
.hp .hp-b2bgrid .b2bi .no{color:rgba(255,255,255,.55)}
@media (max-width:1000px){
  .hp-close-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hp-close-p .btn{width:100%}
  .hp .hp-b2bgrid{grid-template-columns:1fr 1fr}
  .hp .hp-b2bgrid .b2bi{padding:22px 16px 24px}
  .hp .hp-b2bgrid .b2bi h3{font-size:14.5px}
  .hp .hp-b2bgrid .b2bi p{font-size:13px}
}
.hp .hp-flow .sys .step{text-align:right}
@media (max-width:640px){.hp-close-p p br{display:none}}

/* =====================================================================
   HOME 방향 C (전체 리뉴얼 2단계, 2026-09-29) — 브랜드·제품 균형형
   첫 화면: 현재 기준 문장 + 현재 판매 제품(Aqua) / 과거 기록은 어두운 구역 + ARCHIVE
   ===================================================================== */
/* ---------- 공통: 스킨케어 시스템(RESET·BOOST·KEEP) — 현재/예정 구분 ---------- */
.px-rbk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);margin-top:8px}
.px-rbk-col{display:flex;flex-direction:column;border-top:1px solid var(--ink);padding-top:22px}
.px-rbk-fig{aspect-ratio:4/3;background:#f3f3f3;overflow:hidden;margin-bottom:20px}
.px-rbk-fig img{width:100%;height:100%;object-fit:cover}
.px-rbk-col:nth-child(3) .px-rbk-fig img{object-fit:contain;background:#fff}
.px-rbk-h{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.px-rbk-h .n{font-family:var(--serif);font-size:12px;letter-spacing:.14em;color:var(--hp-muted)}
.px-rbk-h .k{font-family:var(--serif);font-size:20px;letter-spacing:.08em}
.px-rbk-d{font-size:15px;color:var(--ink-2);line-height:1.7;margin-bottom:16px}
.px-rbk .rbk-item{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding:13px 0;font-size:15px}
.px-rbk .rbk-item .st{font-family:var(--serif);font-size:10.5px;letter-spacing:.12em;padding:4px 9px;border:1px solid var(--ink);color:var(--ink);white-space:nowrap}
.px-rbk .rbk-item .st.soon{border-color:#cfcfcf;color:var(--hp-muted)}
.px-rbk .rbk-item.is-now{color:var(--ink)}
.px-rbk .rbk-item.is-now .nm{border-bottom:1px solid var(--ink)}
.px-rbk .rbk-item.is-now:hover .nm{border-bottom-color:transparent}
.px-rbk-col.is-current{border-top-width:3px;padding-top:20px}
@media (max-width:860px){.px-rbk{grid-template-columns:1fr;gap:40px}.px-rbk-fig{aspect-ratio:16/9}}

/* ---------- 공통: 컬렉션 2칸(향·BIO) ---------- */
.px-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.px-col{display:grid;grid-template-rows:auto 1fr;background:#fff;color:var(--ink)}
.px-col .ph{aspect-ratio:16/10;overflow:hidden}
.px-col .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--hp-ease)}
.px-col:hover .ph img{transform:scale(1.03)}
.px-col .tx{padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;align-items:flex-start}
.px-col .ln{font-family:var(--serif);font-size:12px;letter-spacing:.16em;color:var(--hp-muted);margin-bottom:12px}
.px-col h3{font-size:clamp(17px,1.4vw,20px);font-weight:500;line-height:1.5;margin-bottom:10px}
.px-col h3.en-d{font-family:var(--serif);font-weight:400}
.px-col p{font-size:14.5px;color:var(--ink-2);line-height:1.8}
@media (max-width:640px){.px-cols{grid-template-columns:1fr}}

/* =====================================================================
   C. 브랜드·제품 균형형 — 히어로(현재 기준 문구 + 현재 제품 사진)
   ===================================================================== */
.px-hero-c .hp-hero-fig.px-fig-light{background:#dfe6f2}
.px-hero-c .hp-hero-fig.px-fig-light img{object-position:50% 42%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 6%,#000 16%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 6%,#000 16%)}
.px-hero-c .hp-hero-sub br+br{display:block;content:"";margin-top:6px}
.px-hero-c h1{font-size:clamp(26px,2.6vw,40px)}
@media (max-width:640px){
  .px-hero-c .hp-hero-fig.px-fig-light img{-webkit-mask-image:none;mask-image:none;object-position:50% 40%}
  .px-hero-c .hp-hero-sub{font-size:15px}
}

/* C. 과거 기록 구역 — 어두운 배경 + ARCHIVE 표시로 현재 제품과 분리 */
.px-past-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;margin-bottom:clamp(40px,5vw,64px)}
.px-past-tx .rule{margin-right:0}
.px-past-tx h2{color:#fff;font-size:clamp(20px,2.1vw,28px);font-weight:500;line-height:1.5;margin-bottom:22px}
.px-past-tx p{color:rgba(255,255,255,.76);font-size:15px;line-height:1.85;margin-bottom:14px}
.px-past-tx .btn{margin-top:14px}
.px-past-fig{position:relative;aspect-ratio:4/3;overflow:hidden}
.px-past-fig img{width:100%;height:100%;object-fit:cover}
.px-past-tag,.px-arc .st{position:absolute;right:14px;top:14px;font-family:var(--serif);font-size:10.5px;letter-spacing:.14em;color:#fff;border:1px solid rgba(255,255,255,.6);padding:4px 10px;background:rgba(0,0,0,.35)}
.px-arc .arc{position:relative}
.px-arc .st{position:static;display:inline-block;margin-top:12px;background:none;color:rgba(255,255,255,.75)}
@media (max-width:860px){.px-past-top{grid-template-columns:1fr}}

@media (max-width:640px) and (max-height:760px){
  .px-hero-c .hp-hero-sub br{display:none}
}
@media (max-width:640px) and (max-height:760px){
  .px-hero-c .hp-hero-fig{height:clamp(120px,calc(100svh - 540px),200px)}
  .px-hero-c .hp-hero-copy{padding:20px 20px 18px}
}

/* ---------- HOME C 마감 (2단계) ---------- */
/* 모바일 히어로: Aqua 병 라벨(제품명)이 읽히도록 라벨 위치 기준으로 자름 */
@media (max-width:640px){
  .px-hero-c .hp-hero-fig{aspect-ratio:auto;height:clamp(180px,34svh,300px)}
  .px-hero-c .hp-hero-fig.px-fig-light img{object-position:50% 50%}
}
@media (max-width:640px) and (max-height:760px){
  .px-hero-c .hp-hero-fig{height:clamp(150px,calc(100svh - 500px),200px)}
  .px-hero-c .hp-hero-fig.px-fig-light img{object-position:50% 52%}
}
/* EN 긴 H1 줄바꿈 */
.px-hero-c h1{max-width:18em}
html[lang="en"] .px-hero-c h1{max-width:15em}
/* ARCHIVE 표시 중복 축소: 대표 사진 태그는 두고, 카드 태그는 유지(품목별 상태) */
/* 과거 기록 카드 — 모바일 가로 스냅 스크롤 */
@media (max-width:640px){
  .hp .px-arc{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;background:none;border:0;gap:12px;margin-left:-20px;padding-left:20px}
  .hp .px-arc::-webkit-scrollbar{display:none}
  .hp .px-arc .arc{scroll-snap-align:start;border:1px solid rgba(255,255,255,.14)}
}
@media (max-width:640px){html[lang="en"] .px-hero-c h1{max-width:none;font-size:clamp(21px,5.9vw,24px)}}
@media (max-width:640px) and (max-height:680px){.px-hero-c .hp-hero-fig{height:clamp(130px,calc(100svh - 500px),180px)}}
/* 스킨케어 시스템: 관련 기술 한 줄 / 과거 구역: 브랜드 원칙(H2) + 출발 질문(H3) */
.px-rbk-tech{margin-top:auto;padding-top:14px;font-size:14px;color:var(--ink-2)}
.px-rbk-tech span{display:block;font-family:var(--serif);font-size:10.5px;letter-spacing:.14em;color:var(--hp-muted);margin-bottom:4px}
.px-past-e{font-family:var(--serif);font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.62);margin:-6px 0 14px}
.px-past-lead{font-size:16px!important;color:rgba(255,255,255,.86)!important;margin-bottom:26px!important}
.px-past-q{color:#fff;font-size:clamp(16px,1.3vw,18px);font-weight:500;line-height:1.55;margin:0 0 14px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.hp #system .today-cta{margin-top:clamp(36px,4vw,52px);display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){.hp #system .today-cta .btn{width:100%}}
/* step4: 상태 표시를 공통 .badge 로 통일(판매 중·COMING SOON·ARCHIVE) + H1 크기 공통 토큰 */
.px-rbk .rbk-item .badge{flex:0 0 auto}
.px-arc .badge{margin-top:12px}
.px-past-tag.badge{position:absolute;right:14px;top:14px;background:rgba(0,0,0,.35)}
.px-hero-c h1{font-size:var(--ds-fs-h1)}
@media (max-width:640px){.px-hero-c h1{font-size:clamp(22px,6.1vw,26px)}html[lang="en"] .px-hero-c h1{font-size:clamp(21px,5.9vw,24px)}}
@media (max-width:640px){.hp-now-cta .btn{font-size:14px}}
@media (max-width:640px){.hp-now-b2b,.hp-now-note{font-size:15px}} /* step4: 모바일 본문성 글자 15px */
/* step6: HOME 첫 제목 = 브랜드 원칙(라이브 1번 장면 문구), 서비스 전환 문장은 과거 구역 끝으로 이동 */
.px-past-tx h2{margin-bottom:22px}
.px-past-now{margin:30px 0 8px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.px-past-now h3{color:#fff;font-size:var(--ds-fs-h3);font-weight:500;line-height:1.5;margin-bottom:12px}
.px-past-now p{color:rgba(255,255,255,.82)!important}
.px-hero-c h1{max-width:none}
@media (max-width:640px){html[lang="en"] .px-hero-c h1{font-size:clamp(22px,6.1vw,26px)}}
html[lang="en"] .px-hero-c h1{font-size:clamp(26px,2.5vw,38px)} /* step6: EN H1 끝 단어 외톨이 방지 */
@media (max-width:640px){html[lang="en"] .px-hero-c h1{font-size:clamp(22px,6.1vw,26px)}}
.px-hero-c .hp-now-note{padding-right:0} /* step6: 썸네일 없는 구매 띠의 안내문 들여쓰기 제거 */

/* =====================================================================
   모바일 제품 이미지 전체 표시 (2026-09-30 최종) — HOME 히어로 Aqua · 한·영 공통
   대상: 640px 이하(승인 디자인이 이미 1열 세로 배치로 바뀌는 구간)에만 적용.
   문제: 승인 배치의 모바일 틀 height:clamp(180px,34svh,300px) 는 가로로 긴
         상자(390×287, 1.36)라, 원본 700×1000(0.70)이 object-fit:cover 로
         위(뚜껑)·아래가 잘려 51% 만 보였다.
   조치: 틀을 원본 비율(7/10)로 두고 contain 을 안전망으로 둔다. 비율이 같아
         여백 띠가 생기지 않는다. 화면 높이가 낮으면 높이를 제한하고 폭이
         비율을 따라 줄어 가운데 정렬되며, 어느 경우에도 잘리지 않는다.
   유지: 641px 이상 PC·태블릿 배치는 승인 디자인 그대로(cover·좌측 그라데이션·
         기존 2열 그리드). 문구·원본 이미지·영상·섹션 순서 무변경.
   대체: 이 블록은 위쪽 모바일 히어로 높이 규칙(34svh / 100svh-500 / 100svh-500)을
         의도적으로 덮어쓴다. 구매 띠를 첫 화면에 넣기 위한 높이 제한이었고,
         제품을 자르지 않는 쪽을 택했다. 세로 스크롤은 허용한다.
   ===================================================================== */
@media (max-width:640px){
  .px-hero-c .hp-hero-fig{aspect-ratio:7/10;height:auto;max-height:none;width:100%}
  .px-hero-c .hp-hero-fig.px-fig-light img{object-fit:contain;object-position:50% 50%}
}
@media (max-width:640px) and (max-height:760px){
  .px-hero-c .hp-hero-fig{height:56svh;width:auto;margin:0 auto}
}
@media (max-width:640px) and (max-height:680px){
  .px-hero-c .hp-hero-fig{height:52svh;width:auto;margin:0 auto}
}

/* FINAL REVIEW 2026-09-30: consistent hero alignment */
/* Desktop crop is limited to scenery: bottle source bounds remain visible.
   Mobile retains the full original image. No painted strips or mask. */
@media (min-width:641px){
 .px-hero-c .hp-hero-main{--final-hero-h:clamp(520px,42vw,720px);padding-right:0;min-height:0;height:var(--final-hero-h);grid-template-columns:minmax(0,1fr) min(48vw,var(--final-hero-h))}
 .px-hero-c .hp-hero-copy{padding:40px clamp(32px,5.42vw,104px);max-width:960px}
 .px-hero-c .hp-hero-fig{height:100%;aspect-ratio:auto;width:100%}
 .px-hero-c .hp-hero-fig.px-fig-light img{object-fit:cover;object-position:50% 70%;-webkit-mask-image:none;mask-image:none}
}