/* TYPE — 공통 스타일 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&family=Noto+Sans+KR:wght@200;300;400;500&display=swap');

:root{
  --ink:#000;
  --paper:#fff;
  --g1:#8C8C8C;
  --g2:#B5B5B5;
  --g3:#C7C7C7;
  --line:rgba(0,0,0,.14);
  --sans:'Inter','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(24px,5vw,48px)}
.label{font-size:10px;font-weight:400;letter-spacing:.38em;text-transform:uppercase;color:var(--g1)}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px clamp(24px,4vw,48px);
  transition:background .5s,padding .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
nav.solid{
  background:rgba(255,255,255,.94);backdrop-filter:blur(18px);
  padding:16px clamp(24px,4vw,48px);border-bottom-color:var(--line);
}
nav .logo img{height:11px;width:auto}   /* 로고 크기 조절: 이 값만 바꾸면 됩니다 */
nav ul{
  display:flex;gap:clamp(18px,3vw,36px);list-style:none;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--g1);
}
nav ul a{transition:color .35s}
nav ul a:hover,nav ul a[aria-current]{color:var(--ink)}

/* ── 푸터 ── */
footer{
  border-top:1px solid var(--line);
  padding:clamp(56px,8vw,88px) 0 clamp(40px,6vw,56px);
  text-align:center;
}
footer .f-logo img{height:22px;width:auto;margin:0 auto}
footer .f-slogan{
  margin-top:16px;font-size:9px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--g2);
}
footer .f-nav{
  display:flex;justify-content:center;gap:24px;flex-wrap:wrap;
  margin:38px 0;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--g1);
}
footer .f-nav a:hover{color:var(--ink)}
footer .f-legal{
  font-size:10px;line-height:2;color:var(--g2);
  padding-top:30px;border-top:1px solid var(--line);
  max-width:760px;margin:0 auto;
}

/* ── 제품 상세 ── */
.detail{
  min-height:100svh;
  padding:clamp(120px,15vw,170px) 0 clamp(70px,9vw,110px);
}
.detail .body{
  max-width:960px;margin:0 auto;
  padding:0 clamp(24px,6vw,64px);
}
.d-head{display:flex;align-items:baseline;gap:16px}
.d-head .no{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--g2)}
.d-head .ttl{font-size:11px;font-weight:400;letter-spacing:.22em}

/* 부제를 표제로 */
.d-sub{margin-top:clamp(40px,6vw,60px)}
.d-sub .kr{
  font-size:clamp(20px,2.9vw,34px);font-weight:200;
  letter-spacing:.01em;line-height:1.35;
}
.d-sub .en{
  margin-top:5px;font-size:clamp(11px,1.2vw,13px);font-weight:300;
  letter-spacing:.14em;color:var(--g2);line-height:1.35;
}

.d-poem{
  margin-top:clamp(26px,3.4vw,36px);
  font-size:clamp(15px,1.5vw,17px);font-weight:300;line-height:2.05;
}
.d-poem-en{
  margin-top:18px;
  font-size:11px;font-weight:300;line-height:1.9;color:var(--g3);
}

.d-rule{width:64px;height:1px;background:rgba(0,0,0,.15);margin:clamp(36px,5vw,44px) 0 clamp(22px,3vw,28px)}

.d-items{display:flex;flex-direction:column;gap:clamp(34px,4vw,46px);max-width:620px}
.d-item .nm{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#555}
.d-item .tx{margin-top:9px;font-size:13px;line-height:2;color:#333}
.d-item .sz{margin-top:7px;font-size:10.5px;letter-spacing:.16em;color:var(--g2)}
.d-item .buy{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  border-bottom:1px solid var(--ink);padding-bottom:4px;
}
.d-item .buy i{font-style:normal;transition:transform .4s}
.d-item .buy:hover i{transform:translateX(4px)}

.d-store{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  margin-top:clamp(32px,4vw,42px);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  border-bottom:1px solid var(--ink);padding-bottom:5px;
}
.d-store i{font-style:normal;transition:transform .4s}
.d-store:hover i{transform:translateX(5px)}

.d-nav{
  display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid var(--line);
  padding:26px clamp(24px,5vw,48px);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g1);
}
.d-nav a:hover{color:var(--ink)}

@media(max-width:820px){
  .detail{min-height:0;padding:clamp(96px,20vw,120px) 0 60px}
  .detail .body{padding:0 24px}
}

/* ── 유틸 ── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}