/* 제품 상세 페이지 공용 스타일 - 홈 화면과 같은 톤(상세페이지 PDF 기준) */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
:root{--cream:#F8F5F1;--sand:#EFEAE3;--ink:#282828;--body:#4A4945;--muted:#6B6A64;--stone:#868580;--green:#28452C;--red:#AA2733;--line:rgba(40,40,40,0.14);--px:clamp(16px,2.4vw,36px);--gap:0px}
body{background:var(--cream);color:var(--ink);font-family:"Pretendard",system-ui,sans-serif;font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all}
a{color:var(--ink);text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{width:100%}
header{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding:10px var(--px);background:rgba(248,245,241,0.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(40,40,40,0.12)}
header .logo img{width:clamp(88px,11vw,150px);height:auto;object-fit:contain}
nav{display:flex;align-items:center;gap:clamp(0px,0.8vw,14px);margin:0 -10px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--body)}
nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 10px;color:var(--ink);text-decoration:none}
nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:9px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 220ms cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){nav a:hover::after{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){nav a::after{transition:none}}
[data-progress]{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--red);transition:width 120ms linear}

/* 공통 블록 */
.sec{padding:clamp(72px,10vw,160px) var(--px)}
.sec.tight{padding-top:clamp(40px,5vw,80px)}
.sand{background:var(--sand)}
.mono{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);font-weight:400}
.mono.red{color:var(--red)}
.mono .ko{font-family:"Pretendard",sans-serif;letter-spacing:0.02em}
.eyebar{display:flex;justify-content:space-between;gap:16px;margin-bottom:clamp(28px,4vw,56px)}
.big{font-family:'Manrope',sans-serif;font-weight:500;text-transform:uppercase;font-size:clamp(40px,8vw,140px);line-height:0.95;letter-spacing:-0.035em;color:var(--ink)}
.big span{display:block}
.big .st,.st{color:var(--stone)}
.big.ko{font-family:"Pretendard",sans-serif;font-weight:600;text-transform:none;letter-spacing:-0.04em;line-height:1.1}
.big.lower{text-transform:none;letter-spacing:-0.045em}
.lede{font-weight:500;font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:var(--ink)}
.copy{font-size:clamp(15px,1.1vw,16px);color:var(--body)}
.note{font-size:14px;color:var(--muted)}
.aside{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(40px,6vw,96px)}
.aside>div{grid-column:2;max-width:440px;display:flex;flex-direction:column;gap:16px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(40px,5vw,80px);padding-top:clamp(32px,4vw,56px)}
.split2.rule{border-top:0}
.split2 .vr{border-left:1px solid var(--line);padding-left:clamp(24px,4vw,64px)}
.ph{width:100%;height:100%;object-fit:cover}
.full{width:100%;aspect-ratio:16/9;object-fit:cover}
.full.crop{aspect-ratio:16/10;object-position:center 30%}

/* 1. 소개 */
.intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(40px,6vw,96px) var(--px) clamp(64px,8vw,120px);border-bottom:1px solid var(--line)}
.intro figure{display:flex;flex-direction:column;align-items:center;gap:24px}
.intro figure .cut{display:flex;justify-content:center;width:100%;max-width:420px;padding:clamp(28px,4vw,56px) 0;background:#fff}
.intro figure img{height:clamp(240px,30vw,440px);width:auto}
.intro figcaption{font-family:'Manrope',sans-serif;font-size:17px;color:var(--ink)}
.intro h1{font-family:'Manrope',sans-serif;font-weight:500;text-transform:uppercase;font-size:clamp(28px,3.4vw,52px);line-height:1.08;letter-spacing:-0.03em}
.intro .desc{margin-top:20px;max-width:620px;font-size:clamp(15px,1.2vw,17px);color:var(--body)}
.tag{display:inline-block;margin-top:36px;padding:4px 12px;background:var(--ink);color:var(--cream);font-family:'Manrope',sans-serif;font-weight:500;font-size:15px}
.keys{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:14px}
.keys b{display:block;font-family:'Manrope',sans-serif;font-weight:600;font-size:17px;color:var(--ink)}
.keys b::before{content:"\2022\00a0"}
.keys span{font-size:14px;color:var(--body)}
.certs{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:28px;font-weight:600;font-size:15px;color:var(--green)}

/* 2. 사진 묶음 */
.grid3{display:grid;grid-template-columns:57fr 43fr;grid-template-rows:1fr 1fr;gap:var(--gap);padding:var(--gap);aspect-ratio:16/10.5}
.grid3>:first-child{grid-row:1/3}
.grid3 img{width:100%;height:100%;object-fit:cover}

/* 사진+문구 엇갈림 */
.stagger{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.stagger .l{display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.stagger .l img{aspect-ratio:4/3;width:100%;object-fit:cover}
.stagger .l p{padding:0 var(--px) 8px;max-width:560px}
.stagger .r img{aspect-ratio:4/5;width:100%;height:100%;object-fit:cover}

/* 01·02·03 칸 */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);margin-top:clamp(48px,7vw,110px)}
.cols3>div{padding:20px 24px 4px 0}
.cols3>div+div{border-left:1px solid var(--line);padding-left:clamp(16px,2.2vw,32px)}
.num{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--muted)}
.cols3 h3{margin-top:14px;font-family:'Manrope',sans-serif;font-weight:500;font-size:clamp(24px,2.8vw,40px);letter-spacing:-0.03em;line-height:1.15}
.cols3 h3.g{color:var(--green)}
.cols3 p{margin-top:14px;font-size:15px;color:var(--body)}

/* 전달 기술 */
.tech{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(40px,5vw,72px)}
.tech figure{position:relative}
.tech figure img{width:100%;aspect-ratio:5/6;object-fit:cover}
.labels{list-style:none;display:flex;flex-direction:column;gap:20px;margin-bottom:40px}
.labels b{display:block;font-family:'Manrope',sans-serif;font-weight:600;font-size:20px;color:var(--ink)}
.labels span{font-size:14px;color:var(--body)}

/* 큰 숫자 */
.huge{font-family:'Manrope',sans-serif;font-weight:500;font-size:clamp(150px,26vw,440px);line-height:0.82;letter-spacing:-0.06em;color:var(--ink)}
.huge sup,.huge small{font-size:0.36em;color:var(--stone);letter-spacing:-0.03em}
.huge sup{vertical-align:0.9em;line-height:0}
.unit{font-family:'Manrope',sans-serif;font-weight:500;font-size:clamp(22px,2.6vw,38px);letter-spacing:-0.03em}

/* 배경 질감 띠 */
.tex{background-size:cover;background-position:center}

/* 성분 리스트 */
.rows{list-style:none;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:56px 1fr 1fr;gap:16px;align-items:center;padding:clamp(18px,2vw,28px) 0;border-bottom:1px solid var(--line)}
.rows .nm{font-family:'Manrope',sans-serif;font-weight:500;font-size:clamp(20px,2.6vw,36px);letter-spacing:-0.03em;line-height:1.15}
.rows .ds{font-size:15px;color:var(--body)}
.pep{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:24px;margin-top:clamp(48px,7vw,110px)}
.pep .rows{border-top:0}
.pep .rows li{grid-template-columns:56px 1fr;padding-top:0}
.pep .rows li+li{padding-top:clamp(18px,2vw,28px)}
.pep .rows li:last-child{border-bottom:0}
.pep .rows p{grid-column:2;margin-top:-8px;font-size:15px;color:var(--body)}

/* 수분 시스템 */
.hyd{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:clamp(40px,6vw,96px)}
.hyd .l{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.hyd .l img{aspect-ratio:4/3;width:100%;object-fit:cover}
.hyd .r img{width:100%;height:100%;object-fit:cover}
.eq{list-style:none;padding:0 var(--px) 8px;max-width:600px}
.eq li{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-family:'Manrope',sans-serif;font-weight:500;font-size:clamp(18px,1.7vw,24px);letter-spacing:-0.02em}
.eq li.cap{padding:0 0 12px;border-bottom:1px solid var(--muted)}
.eq li:last-child{border-bottom:0;color:var(--green)}
.eq li i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--muted)}

/* 단계 → 제품 나무 */
.tree{margin-top:clamp(56px,8vw,120px);text-align:center}
.tree .top{display:grid;grid-template-columns:repeat(4,1fr)}
.tree .top b{display:block;font-family:'Manrope',sans-serif;font-weight:500;font-size:clamp(17px,2.4vw,32px);letter-spacing:-0.02em}
.tree .top b.ko{font-family:"Pretendard",sans-serif;font-weight:600}
.tree .top .mono{display:block;margin-top:8px;font-size:clamp(9px,1vw,12px);letter-spacing:0.14em}
.tree .ticks{display:grid;grid-template-columns:repeat(4,1fr);height:clamp(40px,5vw,72px);margin-top:20px}
.tree .ticks i{background:linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat}
.tree .bar{margin:0 12.5%;border-top:1px solid var(--ink)}
.tree .stem{width:1px;height:clamp(36px,4.6vw,64px);margin:0 auto;background:var(--ink)}
.tree h3{margin-top:28px;font-family:'Manrope',sans-serif;font-weight:500;text-transform:uppercase;font-size:clamp(22px,3.8vw,56px);letter-spacing:-0.035em;line-height:1.05}
.tree p{margin-top:24px;font-size:clamp(15px,1.2vw,17px);color:var(--ink)}
.tree .mono{margin-top:14px}

/* 루틴 */
.rt{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.rt .unit{padding-bottom:0.4em}
.gridR{display:grid;grid-template-columns:57fr 43fr;grid-template-rows:1fr 1fr;gap:var(--gap);aspect-ratio:16/10.5;margin-top:clamp(48px,6vw,96px)}
.gridR>:first-child{grid-row:1/3}
.gridR img{width:100%;height:100%;object-fit:cover}

/* 다음 제품·푸터 */
.next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:clamp(32px,4.5vw,64px) var(--px);border-top:1px solid rgba(40,40,40,0.12);background:var(--sand)}
.next .lab{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted)}
.next a{display:inline-flex;align-items:center;min-height:44px;font-family:'Manrope',sans-serif;font-weight:500;font-size:clamp(18px,2vw,26px);letter-spacing:-0.02em;text-decoration:underline;text-decoration-color:rgba(40,40,40,0.3);text-underline-offset:6px}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px var(--px) 28px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted)}
a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--green)}}

/* 모바일 */
@media (max-width:760px){
  .intro,.tech,.split2,.hyd,.stagger,.pep{grid-template-columns:1fr}
  .intro figure .cut{max-width:none}
  .aside{grid-template-columns:1fr}
  .aside>div{grid-column:1}
  .split2 .vr{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}
  .cols3{grid-template-columns:1fr}
  .cols3>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .cols3>div{padding:18px 0 22px}
  .grid3,.gridR{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .grid3>:first-child,.gridR>:first-child{grid-row:auto;grid-column:1/3;aspect-ratio:4/5}
  .grid3>:not(:first-child),.gridR>:not(:first-child){aspect-ratio:1/1}
  .stagger .l p,.eq{padding-left:var(--px)}
  .stagger .r img{aspect-ratio:4/5}
  .hyd .r img{aspect-ratio:4/5}
  .rows li{grid-template-columns:36px 1fr}
  .rows .ds{grid-column:2}
  .pep .rows li{grid-template-columns:36px 1fr}
  .full,.full.crop{aspect-ratio:auto}
  .tech figure img{aspect-ratio:4/5}
}

/* 언어 전환 */
html:not([lang="ko"]) .big.ko{font-family:'Manrope',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:-0.035em;line-height:0.95}
html[lang="en"] .tree .top b.ko+.mono{display:none}
html[lang="ja"] body{word-break:normal;line-break:strict}
html[lang="ja"] .big.ko{line-height:1.15}
html[lang="ja"] .tree .top b{white-space:nowrap;font-size:clamp(12px,2.4vw,32px)}

/* 사진 추가분: 소개 사진 · 2장 묶음 · 다음 제품 썸네일 */
.intro figure .hero{width:100%;max-width:520px;height:auto;aspect-ratio:4/5;object-fit:cover}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:var(--gap) var(--gap) 0}
.duo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.next a.nx{gap:clamp(14px,2vw,28px);text-decoration:none}
.next a.nx img{width:clamp(72px,8vw,120px);aspect-ratio:4/5;object-fit:cover}
.next a.nx span{text-decoration:underline;text-decoration-color:rgba(40,40,40,0.3);text-underline-offset:6px}
.hr{display:flex;align-items:center;gap:calc((20px + clamp(0px,0.8vw,14px)) / 2)}
.lang{position:relative;display:flex;align-items:center;gap:6px;min-height:44px;border-left:1px solid rgba(40,40,40,0.2);padding-left:calc((20px + clamp(0px,0.8vw,14px)) / 2);color:var(--ink);cursor:pointer}
.lang .cur{padding-right:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23282828' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center;font-family:'IBM Plex Mono','Pretendard',monospace;font-size:11px;letter-spacing:0.08em;white-space:nowrap}
.lang select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0}
.lang:focus-within{outline:2px solid var(--green);outline-offset:2px}
@media (max-width:420px){.lang .cur{display:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:420px){header{gap:8px 12px}.hr{gap:calc((10px + clamp(0px,0.8vw,14px)) / 2)}nav{margin:0 -5px;font-size:10px;letter-spacing:0.14em}nav a{padding:0 5px}nav a::after{left:5px;right:5px}.lang{padding-left:calc((10px + clamp(0px,0.8vw,14px)) / 2)}}