/* ============================================================
   MASTER'S 33.3g — COLD BREW LAB
   다크 럭셔리 · 카퍼골드 · 연금술 톤
   ============================================================ */

:root {
  /* 컬러 — 5단계 깊이 */
  --ink:        #0a0a0b;   /* 베이스 블랙 */
  --ink-2:      #121311;   /* 패널 */
  --ink-3:      #1a1c18;   /* 카드 (살짝 그린 기운) */
  --green-deep: #0e1a13;   /* 딥 그린 (녹유리병 톤) */
  --green:      #1f3326;
  --moss:       #3f6f50;

  --copper:     #c98a4b;   /* 메인 카퍼 */
  --copper-lt:  #e0a96a;
  --gold:       #d9b27a;
  --gold-deep:  #9c6b38;

  --paper:      #f3ede2;   /* 라이트 텍스트 */
  --paper-dim:  #b9b2a4;
  --paper-mute: #80796c;
  --line:       rgba(217,178,122,0.16);
  --line-soft:  rgba(243,237,226,0.08);

  /* 타이포 */
  --f-display: 'Cinzel', 'Cormorant Garamond', serif;       /* 격조 헤딩 (브랜드 영문) */
  --f-serif:   'Cormorant Garamond', serif;                  /* 우아 서브 */
  --f-body:    'Pretendard Variable', 'Pretendard', sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;        /* 라벨/수치 */

  --wrap: 1200px;
  --r: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 그레인 텍스처 오버레이 (전역) */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(92%, var(--wrap)); margin-inline: auto; }

/* 유틸 */
.br-sm,.br-md,.br-lg { display:none; }
@media(min-width:480px){.br-sm{display:inline;}}
@media(min-width:768px){.br-md{display:inline;}}
@media(min-width:1024px){.br-lg{display:inline;}}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content:''; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper));
}

.gold-text {
  background: linear-gradient(120deg, var(--gold-deep), var(--gold) 40%, var(--copper-lt) 60%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 60px);
  transition: background .4s var(--ease), backdrop-filter .4s, padding .4s;
}
.site-header.scrolled {
  background: rgba(10,10,11,0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-soft);
  padding-block: 12px;
}
.brand-lock { display:flex; align-items:center; gap:11px; }
.brand-lock img { width: 34px; }
.brand-lock .bl-name {
  font-family: var(--f-display);
  font-size: 1.02rem; letter-spacing: 0.14em; font-weight: 600;
  line-height: 1;
}
.brand-lock .bl-sub {
  font-family: var(--f-mono); font-size: 0.56rem;
  letter-spacing: 0.3em; color: var(--paper-mute); text-transform: uppercase;
}
.nav { display:flex; align-items:center; gap: clamp(18px,2.5vw,38px); }
.nav a { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--paper-dim); transition: color .25s; }
.nav a:hover { color: var(--gold); }
.cart-btn {
  position: relative; display:flex; align-items:center; gap:8px;
  font-family: var(--f-mono); font-size:0.72rem; letter-spacing:0.15em;
  padding: 9px 16px; border:1px solid var(--line);
  border-radius: var(--r); color: var(--gold); cursor:pointer;
  background: transparent; transition: all .3s var(--ease);
}
.cart-btn:hover { border-color: var(--copper); background: rgba(201,138,75,0.08); }
.cart-count {
  min-width: 18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--copper); color:#1a0f04; font-weight:700;
  font-size:0.66rem; border-radius:9px;
}
.nav-toggle { display:none; background:none; border:none; color:var(--gold); cursor:pointer; }

@media(max-width: 880px){
  .nav { gap: 14px; }
  .nav .nav-links { gap: 14px !important; }
  .nav .nav-links a { font-size: 0.74rem; }
  .brand-lock .bl-sub { display:none; }
}
@media(max-width: 560px){
  .nav .nav-links a { display:none; }
  .nav .nav-links a:first-child { display:inline; }  /* '컬렉션'만 노출 */
  .site-header { padding-inline: 16px; }
  .cart-btn { padding: 8px 12px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: 120px 20px 80px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,138,75,0.10), transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(31,51,38,0.45), transparent 70%),
    var(--ink);
}
/* 빛 떨어지는 스포트 */
.hero::after {
  content:''; position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width: 60vw; height: 70vh;
  background: radial-gradient(ellipse at top, rgba(217,178,122,0.14), transparent 65%);
  pointer-events:none;
}
.hero-inner { position: relative; z-index: 2; max-width: 880px; }
.hero-logo {
  width: clamp(110px, 18vw, 168px); margin: 0 auto 30px;
  filter: drop-shadow(0 8px 40px rgba(201,138,75,0.35));
  animation: floatLogo 6s ease-in-out infinite;
}
@keyframes floatLogo { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.hero h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.7rem, 8vw, 6rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.hero h1 .l2 { display:block; font-size: 0.62em; letter-spacing:0.06em; }
.hero .slogan {
  font-family: var(--f-mono);
  font-size: clamp(0.78rem, 1.6vw, 0.98rem);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--copper-lt); margin: 22px 0 0;
}
.hero .lede {
  font-family: var(--f-serif);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-style: italic; color: var(--paper-dim);
  max-width: 540px; margin: 26px auto 0; line-height:1.5;
}
.hero-cta { margin-top: 40px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--f-mono); font-size:0.78rem;
  letter-spacing:0.16em; text-transform:uppercase;
  padding: 15px 30px; border-radius: var(--r);
  cursor:pointer; transition: all .35s var(--ease);
  border: 1px solid transparent;
}
.btn--primary {
  background: linear-gradient(135deg, var(--copper), var(--gold-deep));
  color:#180d03; font-weight:700;
  box-shadow: 0 6px 24px rgba(201,138,75,0.28);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow:0 10px 32px rgba(201,138,75,0.42); }
.btn--ghost { border-color: var(--line); color: var(--gold); }
.btn--ghost:hover { border-color: var(--copper); background: rgba(201,138,75,0.06); }

.scroll-hint {
  position:absolute; bottom: 30px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:0.6rem; letter-spacing:0.3em;
  color:var(--paper-mute); z-index:2; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-hint span { width:1px; height:36px; background:linear-gradient(var(--copper),transparent); animation: pulseLine 2s infinite; }
@keyframes pulseLine { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ============================================================
   섹션 공통
   ============================================================ */
.section { padding: clamp(80px, 12vh, 150px) 0; position: relative; }
.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head h2 {
  font-family: var(--f-display); font-weight:700;
  font-size: clamp(1.9rem, 4.5vw, 3.2rem); line-height:1.08;
  margin: 18px 0 0;
}
.section-head p { color: var(--paper-dim); font-size:1.05rem; margin-top:16px; }

/* ============================================================
   STORY / 브랜드 매니페스토
   ============================================================ */
.story { background: linear-gradient(180deg, var(--ink), var(--green-deep) 50%, var(--ink)); }
.story-grid {
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px);
  align-items:center;
}
.story-copy h2 {
  font-family:var(--f-display); font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:1.12; margin:16px 0 24px; font-weight:700;
}
.story-copy p { color:var(--paper-dim); margin-bottom:18px; }
.story-copy .pull {
  font-family:var(--f-serif); font-style:italic;
  font-size:1.5rem; color:var(--gold); line-height:1.4;
  border-left:2px solid var(--copper); padding-left:22px; margin:30px 0;
}
.story-visual { position:relative; }
.story-visual img { width:100%; border-radius: var(--r); border:1px solid var(--line); }
.story-visual .badge {
  position:absolute; bottom:-22px; left:-22px;
  background: var(--ink-2); border:1px solid var(--line);
  padding: 18px 22px; border-radius:var(--r);
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.story-visual .badge .num { font-family:var(--f-display); font-size:2rem; color:var(--gold); line-height:1; }
.story-visual .badge .lbl { font-family:var(--f-mono); font-size:0.6rem; letter-spacing:0.2em; color:var(--paper-mute); text-transform:uppercase; }

@media(max-width:820px){ .story-grid{grid-template-columns:1fr;} .story-visual{order:-1;} }

/* ============================================================
   COLLECTION — 제품 그리드
   ============================================================ */
.collection { background: var(--ink); }
.product-grid {
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media(max-width:980px){ .product-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .product-grid{grid-template-columns:1fr;} }

.pcard {
  position:relative; background: var(--ink-3);
  border:1px solid var(--line-soft); border-radius: var(--r);
  overflow:hidden; cursor:pointer;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s;
  display:flex; flex-direction:column;
}
.pcard:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.pcard-art { position:relative; aspect-ratio: 3/5; overflow:hidden; }
.pcard-art img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.pcard:hover .pcard-art img { transform: scale(1.06); }
.pcard-art::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,11,0.85) 92%);
}
.pcard-tag {
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--f-mono); font-size:0.58rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold);
  background: rgba(10,10,11,0.6); border:1px solid var(--line);
  padding:5px 9px; border-radius:2px; backdrop-filter:blur(4px);
}
.pcard-body { padding: 18px 20px 22px; position:relative; z-index:2; margin-top:-46px; }
.pcard-body h3 { font-family:var(--f-display); font-size:1.04rem; letter-spacing:0.04em; line-height:1.2; }
.pcard-body .ko { font-size:0.78rem; color:var(--paper-mute); margin-top:3px; }
.pcard-body .pc-tag { font-family:var(--f-serif); font-style:italic; color:var(--paper-dim); font-size:0.96rem; margin-top:12px; min-height:2.6em; }
.pcard-foot { display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }
.pcard-foot .price { font-family:var(--f-display); font-size:1.2rem; color:var(--gold); }
.pcard-foot .price small { font-family:var(--f-body); font-size:0.7rem; color:var(--paper-mute); }
.pc-add {
  font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--copper-lt);
  border:1px solid var(--line); padding:8px 12px; border-radius:2px;
  background:transparent; cursor:pointer; transition: all .3s;
}
.pc-add:hover { background:var(--copper); color:#180d03; border-color:var(--copper); }

/* 강도 게이지 (상세에서도 재사용) */
.intensity { display:flex; align-items:center; gap:3px; margin-top:14px; }
.intensity .dot { width:7px; height:7px; border-radius:50%; background: var(--line); }
.intensity .dot.on { background: var(--copper); box-shadow:0 0 6px rgba(201,138,75,0.5); }
.intensity .lbl { font-family:var(--f-mono); font-size:0.6rem; letter-spacing:0.14em; color:var(--paper-mute); margin-left:8px; }

/* ============================================================
   LAB / 공정
   ============================================================ */
.lab { background: linear-gradient(180deg, var(--ink), var(--ink-2)); position:relative; }
.lab-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; }
@media(max-width:780px){ .lab-grid{grid-template-columns:1fr;} }
.lab-step { background: var(--ink-2); padding: 40px 32px; transition: background .4s; }
.lab-step:hover { background: var(--ink-3); }
.lab-step .step-no { font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.2em; color:var(--copper); }
.lab-step h3 { font-family:var(--f-display); font-size:1.4rem; margin:14px 0 12px; }
.lab-step p { color:var(--paper-dim); font-size:0.95rem; }
.lab-figure { margin-top:48px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.lab-figure img { width:100%; }

/* ============================================================
   SUBSCRIPTION
   ============================================================ */
.subscribe { background: radial-gradient(110% 90% at 50% 0%, var(--green-deep), var(--ink) 70%); }
.plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:820px){ .plan-grid{grid-template-columns:1fr;} }
.plan {
  border:1px solid var(--line-soft); border-radius:var(--r);
  padding: 34px 30px; background: rgba(18,19,17,0.6);
  position:relative; transition: all .4s var(--ease);
}
.plan.featured { border-color: var(--copper); background: rgba(201,138,75,0.06); }
.plan.featured::before {
  content:'MOST LOVED'; position:absolute; top:-11px; left:30px;
  font-family:var(--f-mono); font-size:0.58rem; letter-spacing:0.18em;
  background:var(--copper); color:#180d03; padding:4px 10px; border-radius:2px;
}
.plan:hover { transform:translateY(-4px); }
.plan h3 { font-family:var(--f-display); font-size:1.5rem; }
.plan .cycle { font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.16em; color:var(--copper-lt); text-transform:uppercase; margin-top:6px; }
.plan .disc { font-family:var(--f-display); font-size:2.6rem; color:var(--gold); margin:18px 0 6px; line-height:1; }
.plan .disc small { font-size:1rem; color:var(--paper-dim); }
.plan p { color:var(--paper-dim); font-size:0.92rem; margin:10px 0 24px; min-height:3em; }
.plan .btn { width:100%; justify-content:center; }

/* ============================================================
   CTA 밴드
   ============================================================ */
.cta-band {
  text-align:center; padding: clamp(80px,14vh,160px) 20px;
  background:
    radial-gradient(70% 120% at 50% 50%, rgba(201,138,75,0.10), transparent 60%),
    var(--ink);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.cta-band h2 { font-family:var(--f-display); font-size:clamp(2rem,6vw,4rem); line-height:1; }
.cta-band p { font-family:var(--f-serif); font-style:italic; font-size:1.3rem; color:var(--paper-dim); margin:20px auto 36px; max-width:520px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink-2); border-top:1px solid var(--line-soft); padding: 70px 0 40px; }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; }
@media(max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr;} }
.foot-brand img { width:40px; margin-bottom:16px; }
.foot-brand .fb-name { font-family:var(--f-display); font-size:1.1rem; letter-spacing:0.1em; }
.foot-brand .fb-co { font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.2em; color:var(--paper-mute); text-transform:uppercase; margin-top:4px; }
.foot-brand p { color:var(--paper-mute); font-size:0.86rem; margin-top:16px; max-width:280px; }
.foot-col h4 { font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--copper); margin-bottom:18px; }
.foot-col a, .foot-col p { display:block; color:var(--paper-dim); font-size:0.88rem; margin-bottom:10px; transition:color .25s; }
.foot-col a:hover { color:var(--gold); }
.foot-bottom { margin-top:54px; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.foot-bottom p { font-size:0.76rem; color:var(--paper-mute); }
.foot-bottom .pg { font-family:var(--f-mono); letter-spacing:0.1em; }

/* ============================================================
   CART DRAWER
   ============================================================ */
.drawer-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200;
  opacity:0; pointer-events:none; transition:opacity .4s; backdrop-filter:blur(2px);
}
.drawer-overlay.open { opacity:1; pointer-events:auto; }
.cart-drawer {
  position:fixed; top:0; right:0; height:100svh; width:min(420px, 92vw);
  background: var(--ink-2); border-left:1px solid var(--line);
  z-index:201; transform:translateX(100%); transition:transform .45s var(--ease);
  display:flex; flex-direction:column;
}
.cart-drawer.open { transform:translateX(0); }
.cart-head { display:flex; align-items:center; justify-content:space-between; padding:24px; border-bottom:1px solid var(--line-soft); }
.cart-head h3 { font-family:var(--f-display); font-size:1.3rem; letter-spacing:0.06em; }
.cart-close { background:none; border:none; color:var(--paper-dim); cursor:pointer; font-size:1.4rem; line-height:1; }
.cart-items { flex:1; overflow-y:auto; padding:18px 24px; }
.cart-empty { text-align:center; color:var(--paper-mute); padding:60px 20px; font-family:var(--f-serif); font-style:italic; font-size:1.1rem; }
.ci { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.ci img { width:56px; height:80px; object-fit:cover; border-radius:2px; border:1px solid var(--line-soft); }
.ci-info { flex:1; min-width:0; }
.ci-info h4 { font-family:var(--f-display); font-size:0.92rem; letter-spacing:0.03em; }
.ci-info .ci-sub { font-size:0.72rem; color:var(--paper-mute); margin-top:2px; }
.ci-info .ci-price { color:var(--gold); font-family:var(--f-mono); font-size:0.82rem; margin-top:6px; }
.ci-qty { display:flex; align-items:center; gap:8px; margin-top:8px; }
.ci-qty button { width:24px; height:24px; border:1px solid var(--line); background:transparent; color:var(--gold); cursor:pointer; border-radius:2px; }
.ci-qty span { font-family:var(--f-mono); font-size:0.8rem; min-width:20px; text-align:center; }
.ci-remove { background:none; border:none; color:var(--paper-mute); cursor:pointer; font-size:0.72rem; align-self:flex-start; text-decoration:underline; }
.cart-foot { padding:22px 24px; border-top:1px solid var(--line); }
.cart-total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.cart-total .ct-lbl { font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.16em; color:var(--paper-dim); text-transform:uppercase; }
.cart-total .ct-amt { font-family:var(--f-display); font-size:1.7rem; color:var(--gold); }
.cart-foot .btn { width:100%; justify-content:center; }

/* 토스트 */
.toast {
  position:fixed; bottom:28px; left:50%; transform:translate(-50%, 20px);
  background:var(--ink-3); border:1px solid var(--copper); color:var(--paper);
  padding:13px 22px; border-radius:var(--r); z-index:300;
  font-size:0.86rem; opacity:0; pointer-events:none; transition:all .4s var(--ease);
  box-shadow:0 14px 40px rgba(0,0,0,0.5);
}
.toast.show { opacity:1; transform:translate(-50%, 0); }

/* reveal on scroll */
.reveal { opacity:0; transform:translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pdp { padding-top: 110px; min-height: 100svh; }
.pdp-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,80px); align-items:start; }
@media(max-width:880px){ .pdp-grid{grid-template-columns:1fr;} }
.pdp-visual { position:relative; }
.pdp-visual .pdp-art {
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border:1px solid var(--line); border-radius:var(--r);
}
.pdp-visual .pdp-bottle {
  position:absolute; bottom:-30px; right:-20px; width:42%;
  border-radius:var(--r); border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,0.6);
}
@media(max-width:880px){ .pdp-visual .pdp-bottle{ width:34%; right:8px; bottom:-18px; } }
.pdp-info { padding-top: 6px; }
.pdp-info .origin-tag {
  font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--copper);
}
.pdp-info h1 { font-family:var(--f-display); font-size:clamp(2rem,4.5vw,3rem); line-height:1.05; margin:14px 0 4px; }
.pdp-info .ko { font-family:var(--f-serif); font-style:italic; font-size:1.3rem; color:var(--paper-dim); }
.pdp-info .price { font-family:var(--f-display); font-size:2rem; color:var(--gold); margin:22px 0; }
.pdp-info .price small { font-family:var(--f-body); font-size:0.85rem; color:var(--paper-mute); }
.pdp-desc { color:var(--paper-dim); font-size:1.04rem; margin-bottom:28px; }

.spec-block { border-top:1px solid var(--line-soft); padding-top:22px; margin-top:22px; }
.spec-block h4 { font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--copper); margin-bottom:14px; }
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip {
  font-size:0.82rem; padding:7px 14px; border-radius:20px;
  border:1px solid var(--line); color:var(--paper-dim);
  background:rgba(217,178,122,0.04);
}
.chip.perfect { border-color:var(--line-soft); }

/* 구매 박스 */
.buy-box { margin-top:30px; border:1px solid var(--line); border-radius:var(--r); padding:24px; background:var(--ink-2); }
.buy-mode { display:flex; gap:10px; margin-bottom:20px; }
.buy-mode label {
  flex:1; display:block; cursor:pointer; text-align:center;
  border:1px solid var(--line-soft); border-radius:var(--r); padding:14px 8px;
  transition:all .3s var(--ease);
}
.buy-mode label .bm-t { font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; display:block; }
.buy-mode label .bm-s { font-size:0.74rem; color:var(--paper-mute); margin-top:4px; display:block; }
.buy-mode input { position:absolute; opacity:0; pointer-events:none; }
.buy-mode input:checked + label, .buy-mode label.sel {
  border-color:var(--copper); background:rgba(201,138,75,0.08);
}
.buy-mode input:checked + label .bm-t { color:var(--gold); }

.plan-pick { display:none; flex-direction:column; gap:8px; margin-bottom:20px; }
.plan-pick.show { display:flex; }
.plan-pick .pp-opt {
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--line-soft); border-radius:var(--r); padding:13px 16px; cursor:pointer;
  transition:all .3s;
}
.plan-pick .pp-opt.sel { border-color:var(--copper); background:rgba(201,138,75,0.06); }
.plan-pick .pp-opt .pp-name { font-size:0.92rem; }
.plan-pick .pp-opt .pp-name small { display:block; color:var(--paper-mute); font-size:0.74rem; }
.plan-pick .pp-opt .pp-disc { font-family:var(--f-mono); font-size:0.82rem; color:var(--gold); }

.qty-row { display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.qty-row .qlbl { font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.14em; color:var(--paper-dim); text-transform:uppercase; }
.qty-ctrl { display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); }
.qty-ctrl button { width:40px; height:40px; background:transparent; border:none; color:var(--gold); font-size:1.1rem; cursor:pointer; }
.qty-ctrl span { width:44px; text-align:center; font-family:var(--f-mono); }
.buy-box .btn { width:100%; justify-content:center; }
.buy-total { display:flex; justify-content:space-between; align-items:baseline; margin:4px 0 18px; }
.buy-total .bt-l { font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.14em; color:var(--paper-dim); text-transform:uppercase; }
.buy-total .bt-a { font-family:var(--f-display); font-size:1.6rem; color:var(--gold); }

.back-link { display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.12em; color:var(--paper-mute); margin-bottom:24px; text-transform:uppercase; }
.back-link:hover { color:var(--gold); }

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout { padding: 110px 0 80px; min-height:100svh; }
.co-grid { display:grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px,5vw,60px); align-items:start; }
@media(max-width:880px){ .co-grid{grid-template-columns:1fr;} }
.co-form { }
.co-form .field { margin-bottom:18px; }
.co-form label { display:block; font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--paper-dim); margin-bottom:7px; }
.co-form input, .co-form textarea, .co-form select {
  width:100%; background:var(--ink-2); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:13px 15px; color:var(--paper);
  font-family:var(--f-body); font-size:0.95rem; transition:border-color .25s;
}
.co-form input:focus, .co-form textarea:focus { outline:none; border-color:var(--copper); }
.co-form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px){ .co-form .row2{grid-template-columns:1fr;} }
.co-form .field-note { font-size:0.76rem; color:var(--paper-mute); margin-top:6px; }

.pay-methods { display:flex; gap:12px; margin-top:8px; }
.pay-methods label {
  flex:1; text-align:center; border:1px solid var(--line-soft); border-radius:var(--r);
  padding:16px 8px; cursor:pointer; transition:all .3s;
}
.pay-methods label.sel { border-color:var(--copper); background:rgba(201,138,75,0.08); }
.pay-methods label .pm-n { font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.1em; }
.pay-methods label .pm-s { display:block; font-size:0.7rem; color:var(--paper-mute); margin-top:4px; }
.pay-notice { font-size:0.8rem; color:var(--paper-mute); margin-top:12px; padding:12px 14px; border-left:2px solid var(--copper); background:rgba(201,138,75,0.04); }

.co-summary { border:1px solid var(--line); border-radius:var(--r); padding:26px; background:var(--ink-2); position:sticky; top:90px; }
.co-summary h3 { font-family:var(--f-display); font-size:1.3rem; letter-spacing:0.05em; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); }
.co-line { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.co-line img { width:44px; height:62px; object-fit:cover; border-radius:2px; }
.co-line .cl-info { flex:1; min-width:0; }
.co-line .cl-info h4 { font-family:var(--f-display); font-size:0.86rem; }
.co-line .cl-info .cl-sub { font-size:0.72rem; color:var(--paper-mute); }
.co-line .cl-price { font-family:var(--f-mono); font-size:0.82rem; color:var(--gold); white-space:nowrap; }
.co-totals { padding-top:16px; }
.co-totals .ct-row { display:flex; justify-content:space-between; font-size:0.9rem; color:var(--paper-dim); margin-bottom:10px; }
.co-totals .ct-grand { display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; margin-top:6px; border-top:1px solid var(--line); }
.co-totals .ct-grand .g-l { font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; }
.co-totals .ct-grand .g-a { font-family:var(--f-display); font-size:1.8rem; color:var(--gold); }
.co-empty { text-align:center; padding:80px 20px; }
.co-empty p { font-family:var(--f-serif); font-style:italic; font-size:1.2rem; color:var(--paper-dim); margin-bottom:24px; }

.co-done { text-align:center; padding:100px 20px; max-width:520px; margin:0 auto; }
.co-done .ok { width:72px; height:72px; margin:0 auto 24px; border:2px solid var(--copper); border-radius:50%; display:grid; place-items:center; color:var(--gold); font-size:2rem; }
.co-done h2 { font-family:var(--f-display); font-size:2rem; margin-bottom:14px; }
.co-done p { color:var(--paper-dim); margin-bottom:8px; }
.co-done .order-no { font-family:var(--f-mono); color:var(--gold); letter-spacing:0.1em; }

/* ============================================================
   멀티페이지 — 헤더 네비 개선 + 모바일 메뉴
   ============================================================ */
.brand-lock span { display:flex; flex-direction:column; }
.nav-links { display:flex; align-items:center; gap: clamp(18px,2.4vw,34px); }
.nav-links a { position:relative; font-size:0.84rem; letter-spacing:0.04em; color:var(--paper-dim); transition:color .25s; }
.nav-links a:hover, .nav-links a.is-active { color:var(--gold); }
.nav-links a.is-active::after {
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--copper);
}
.cart-btn svg { display:block; }
.nav-toggle { display:none; background:none; border:none; color:var(--gold); cursor:pointer; padding:4px; }

.mobile-menu {
  position:fixed; top:0; left:0; right:0; z-index:90;
  background:rgba(10,10,11,0.97); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:4px;
  padding:90px 28px 32px;
  transform:translateY(-100%); transition:transform .45s var(--ease);
}
.mobile-menu a { font-family:var(--f-display); font-size:1.4rem; padding:12px 0; color:var(--paper-dim); border-bottom:1px solid var(--line-soft); }
.mobile-menu a.is-active { color:var(--gold); }
.mobile-menu .btn { font-family:var(--f-mono); font-size:0.78rem; border:none; }
body.menu-open .mobile-menu { transform:translateY(0); }

@media(max-width:820px){
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  .brand-lock .bl-sub { display:none; }
}

.foot-social { display:flex; gap:12px; margin-top:14px; }
.foot-social a { color:var(--paper-mute); transition:color .25s; }
.foot-social a:hover { color:var(--gold); }

/* ============================================================
   페이지 공통 — 서브페이지 인트로 배너
   ============================================================ */
.page-hero {
  padding: 150px 0 60px; text-align:center;
  background: radial-gradient(120% 80% at 50% -20%, rgba(201,138,75,0.10), transparent 60%), var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.page-hero .eyebrow { justify-content:center; }
.page-hero h1 { font-family:var(--f-display); font-size:clamp(2.2rem,5.5vw,3.6rem); line-height:1.05; margin:18px 0 14px; }
.page-hero p { color:var(--paper-dim); max-width:560px; margin:0 auto; font-size:1.05rem; }

/* ============================================================
   HOME — 티저 카드 (각 페이지로 보내는 분기)
   ============================================================ */
.teasers { background: linear-gradient(180deg, var(--ink), var(--ink-2)); }
.teaser-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:820px){ .teaser-grid{grid-template-columns:1fr;} }
.teaser {
  position:relative; min-height:300px; border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:30px; border:1px solid var(--line-soft);
  text-decoration:none; transition:transform .5s var(--ease), border-color .4s;
}
.teaser:hover { transform:translateY(-6px); border-color:var(--line); }
.teaser img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.teaser:hover img { transform:scale(1.06); }
.teaser::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,11,0.2) 30%, rgba(10,10,11,0.9)); }
.teaser-body { position:relative; z-index:2; }
.teaser-body .t-eye { font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--copper-lt); }
.teaser-body h3 { font-family:var(--f-display); font-size:1.6rem; margin:8px 0 6px; }
.teaser-body p { color:var(--paper-dim); font-size:0.9rem; }
.teaser-body .t-arrow { font-family:var(--f-mono); font-size:0.74rem; color:var(--gold); margin-top:14px; display:inline-flex; gap:6px; }

/* 홈 컬렉션 프리뷰 헤더에 '전체보기' */
.section-head .more-link { font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.1em; color:var(--gold); border:1px solid var(--line); padding:9px 16px; border-radius:var(--r); transition:all .3s; white-space:nowrap; }
.section-head .more-link:hover { background:var(--copper); color:#180d03; border-color:var(--copper); }
.head-row { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:40px; }
.head-row .section-head { margin-bottom:0; }

/* ============================================================
   SHOP — 툴바 + 그리드
   ============================================================ */
.shop-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:32px; padding-bottom:20px; border-bottom:1px solid var(--line-soft); }
.shop-toolbar .count { font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.1em; color:var(--paper-mute); text-transform:uppercase; }
.shop-toolbar select { background:var(--ink-2); border:1px solid var(--line); color:var(--paper); padding:10px 14px; border-radius:var(--r); font-family:var(--f-body); font-size:0.86rem; cursor:pointer; }
.shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media(max-width:900px){ .shop-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .shop-grid{grid-template-columns:1fr;} }

/* ============================================================
   ABOUT — 큰 스토리 블록
   ============================================================ */
.about-lead { font-family:var(--f-serif); font-style:italic; font-size:clamp(1.4rem,3vw,2rem); line-height:1.5; color:var(--paper); max-width:760px; }
.about-lead .gold-text { font-style:normal; }
.about-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
@media(max-width:820px){ .about-split{grid-template-columns:1fr;} }
.about-split.rev .about-visual { order:-1; }
@media(max-width:820px){ .about-split.rev .about-visual{order:0;} }
.about-visual img { width:100%; border-radius:var(--r); border:1px solid var(--line); }
.about-copy h2 { font-family:var(--f-display); font-size:clamp(1.7rem,3.5vw,2.6rem); margin-bottom:18px; }
.about-copy p { color:var(--paper-dim); margin-bottom:16px; }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:50px 0; }
@media(max-width:560px){ .stat-row{grid-template-columns:1fr; gap:14px;} }
.stat { text-align:center; padding:28px 16px; border:1px solid var(--line-soft); border-radius:var(--r); }
.stat .n { font-family:var(--f-display); font-size:2.4rem; color:var(--gold); line-height:1; }
.stat .l { font-family:var(--f-mono); font-size:0.64rem; letter-spacing:0.16em; color:var(--paper-mute); text-transform:uppercase; margin-top:10px; }

/* ============================================================
   SUBSCRIBE 페이지 — how it works
   ============================================================ */
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:10px; }
@media(max-width:820px){ .how-grid{grid-template-columns:1fr;} }
.how-step { text-align:center; padding:34px 24px; }
.how-step .hn { width:52px; height:52px; margin:0 auto 18px; border:1px solid var(--copper); border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-size:1.3rem; color:var(--gold); }
.how-step h3 { font-family:var(--f-display); font-size:1.3rem; margin-bottom:10px; }
.how-step p { color:var(--paper-dim); font-size:0.92rem; }

/* ============================================================
   JOURNAL
   ============================================================ */
.journal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media(max-width:900px){ .journal-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .journal-grid{grid-template-columns:1fr;} }
.jcard { border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; background:var(--ink-3); transition:transform .5s var(--ease), border-color .4s; cursor:pointer; }
.jcard:hover { transform:translateY(-5px); border-color:var(--line); }
.jcard-img { aspect-ratio:3/2; overflow:hidden; }
.jcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.jcard:hover .jcard-img img { transform:scale(1.06); }
.jcard-body { padding:22px 24px 26px; }
.jcard-body .cat { font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--copper); }
.jcard-body h3 { font-family:var(--f-display); font-size:1.25rem; line-height:1.25; margin:10px 0 10px; }
.jcard-body p { color:var(--paper-dim); font-size:0.9rem; }
.jcard-body .read { font-family:var(--f-mono); font-size:0.7rem; color:var(--gold); margin-top:14px; display:inline-block; }

/* 모바일 로고 한 줄 유지 (bl-sub 숨길 때 줄바꿈 방지) */
@media(max-width:820px){
  .brand-lock .bl-name { font-size:0.96rem; white-space:nowrap; }
  .brand-lock img { width:30px; }
}

/* ============================================================
   리파인 패스 (2026-06-28b) — 타이포 위계 / 헤더 / 제품상세
   박스 대비 글씨 키우고 정렬 정돈. 나중 규칙이라 우선 적용.
   ============================================================ */

/* ---- 헤더 로고 락업 ---- */
.brand-lock { gap: 13px; }
.brand-lock img { width: 40px; height: auto; }
.brand-lock .bl-text { display:flex; flex-direction:column; justify-content:center; gap:3px; }
.brand-lock .bl-name {
  font-family: var(--f-display);
  font-size: 1.18rem; letter-spacing: 0.1em; font-weight: 600;
  line-height: 1; white-space: nowrap;
}
.brand-lock .bl-sub {
  font-family: var(--f-mono); font-size: 0.6rem;
  letter-spacing: 0.34em; color: var(--paper-mute);
  text-transform: uppercase; line-height: 1; white-space: nowrap;
}

/* ---- 네비 글씨 키움 ---- */
.nav-links a { font-size: 0.92rem; }
.cart-btn { padding: 10px 17px; font-size: 0.74rem; }
.cart-btn svg { width: 16px; height: 16px; }

/* ---- 공통 eyebrow / 라벨 키움 ---- */
.eyebrow { font-size: 0.78rem; letter-spacing: 0.28em; }
.section-head h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.section-head p { font-size: 1.12rem; }

/* ============================================================
   제품상세 — 재설계 (병샷 분리, 위계 정리)
   ============================================================ */
.pdp { padding-top: 124px; }
.pdp-grid { gap: clamp(40px, 5vw, 72px); }

/* 비주얼: 캐릭터 아트 단독 (병샷 오버레이 제거) */
.pdp-visual .pdp-bottle { display: none; }   /* 기존 오버레이 끔 */
.pdp-visual .pdp-art { aspect-ratio: 4/5; }

/* 정보 영역 글씨 위계 */
.pdp-info .origin-tag { font-size: 0.74rem; letter-spacing: 0.22em; }
.pdp-info h1 { font-size: clamp(2.2rem, 4.4vw, 3.1rem); letter-spacing: 0.01em; margin: 14px 0 6px; }
.pdp-info .ko { font-size: 1.45rem; }
.pdp-info .intensity { margin-top: 18px; }
.pdp-info .intensity .dot { width: 8px; height: 8px; }
.pdp-info .intensity .lbl { font-size: 0.68rem; letter-spacing: 0.16em; }

/* 가격 + 상품 썸네일 나란히 */
.price-row { display:flex; align-items:center; gap:20px; margin:24px 0; }
.price-row .price { margin:0; font-size: 2.2rem; }
.price-row .price small { font-size: 0.9rem; }
.price-thumb {
  width: 76px; height: 92px; flex-shrink:0;
  border:1px solid var(--line); border-radius: var(--r);
  overflow:hidden; background: var(--green-deep);
  margin-left:auto;
}
.price-thumb img { width:100%; height:100%; object-fit:cover; }

.pdp-desc { font-size: 1.1rem; line-height: 1.75; margin-bottom: 0; }

/* spec-block 구분선 — 텍스트와 충분히 띄워서 '밑줄' 오인 방지 */
.spec-block { margin-top: 34px; padding-top: 28px; }
.spec-block h4 { font-size: 0.74rem; letter-spacing: 0.2em; margin-bottom: 16px; }
.chip { font-size: 0.95rem; padding: 9px 17px; }

/* ---- 구매 박스 위계 대폭 상향 ---- */
.buy-box { padding: 28px; margin-top: 36px; }
.buy-mode { gap: 12px; margin-bottom: 22px; }
.buy-mode label { padding: 18px 14px; }
.buy-mode label .bm-t { font-family: var(--f-body); font-weight: 700; font-size: 1.02rem; letter-spacing: 0; text-transform: none; line-height:1.3; }
.buy-mode label .bm-s { font-size: 0.86rem; margin-top: 6px; }

.plan-pick .pp-opt { padding: 15px 18px; }
.plan-pick .pp-opt .pp-name { font-size: 1rem; }
.plan-pick .pp-opt .pp-name small { font-size: 0.8rem; margin-top:3px; }
.plan-pick .pp-opt .pp-disc { font-size: 0.95rem; }

/* Quantity / Total — 같은 가로축 정렬 (label 왼쪽 / 값 오른쪽) */
.qty-row { justify-content: space-between; margin-bottom: 22px; }
.qty-row .qlbl { font-family: var(--f-body); font-weight:600; font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--paper); }
.qty-ctrl button { width: 44px; height: 44px; font-size: 1.2rem; }
.qty-ctrl span { width: 50px; font-size: 0.95rem; }

.buy-total { margin: 6px 0 22px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.buy-total .bt-l { font-family: var(--f-body); font-weight: 600; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--paper); }
.buy-total .bt-a { font-size: 1.9rem; }

/* 장바구니 버튼 — 톤 정리 (한글이라 mono 빼고 body bold) */
.buy-box .btn--primary, .btn.btn--cart {
  font-family: var(--f-body); font-weight: 700;
  font-size: 1.02rem; letter-spacing: 0.02em; text-transform: none;
  padding: 18px 30px;
}

.back-link { font-size: 0.82rem; margin-bottom: 28px; }

/* ============================================================
   Shop / 컬렉션 그리드 — 4개는 2x2 (3+1 금지)
   ============================================================ */
.shop-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 880px; margin-inline:auto; }
@media(max-width:560px){ .shop-grid{ grid-template-columns:1fr; max-width:420px; } }

/* 홈 컬렉션 프리뷰도 4열 유지하되 카드 글씨 키움 */
.pcard-body h3 { font-size: 1.14rem; }
.pcard-body .ko { font-size: 0.84rem; }
.pcard-body .pc-tag { font-size: 1.02rem; }
.pcard-foot .price { font-size: 1.3rem; }
.pc-add { font-family: var(--f-body); font-weight:600; font-size: 0.82rem; letter-spacing: 0.02em; text-transform: none; padding: 9px 15px; }

/* 칩/버튼 공통 한글 가독 */
.btn { font-size: 0.82rem; }

/* lab-banner — AI사진 대신 타이포 배너 */
.lab-banner {
  margin-top: 48px; padding: 70px 30px; text-align:center;
  border:1px solid var(--line); border-radius:var(--r);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(201,138,75,0.08), transparent 60%),
    linear-gradient(180deg, var(--ink-2), var(--green-deep));
}
.lab-banner-quote {
  font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.25; margin-top: 16px;
}

/* ============================================================
   ARTICLE — 저널 글 페이지 (매거진 레이아웃)
   ============================================================ */
.article { padding-top: 120px; }
.article-head { max-width: 760px; text-align:center; }
.article-head .back-link { display:inline-block; margin-bottom:26px; }
.art-cat { font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--copper); }
.article-head h1 { font-family:var(--f-display); font-size:clamp(2rem,4.5vw,3.2rem); line-height:1.15; margin:16px 0 18px; }
.art-lede { font-family:var(--f-serif); font-style:italic; font-size:1.3rem; color:var(--paper-dim); line-height:1.5; }
.article-hero { width:min(92%,980px); margin:50px auto; aspect-ratio:16/8; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); }
.article-hero img { width:100%; height:100%; object-fit:cover; }
.article-body { max-width:680px; }
.art-p { font-size:1.12rem; line-height:1.95; color:var(--paper-dim); margin-bottom:26px; }
.art-h { font-family:var(--f-display); font-size:1.6rem; color:var(--paper); margin:46px 0 18px; }
.art-q {
  font-family:var(--f-serif); font-style:italic; font-size:1.7rem;
  line-height:1.45; color:var(--gold); text-align:center;
  margin:44px 0; padding:0 20px;
  border:none; position:relative;
}
.art-q::before, .art-q::after { content:'—'; color:var(--copper); display:block; font-style:normal; font-size:1.2rem; margin:8px auto; }
.article-foot { max-width:680px; text-align:center; margin-top:60px; padding-top:40px; border-top:1px solid var(--line-soft); }
.af-brand { font-family:var(--f-display); font-size:1.5rem; letter-spacing:0.08em; }
.af-sub { font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--paper-mute); margin-top:6px; }

/* 헤더 로고 줄바꿈 강제 방지 (gold-text span 포함) */
.brand-lock .bl-name { display:inline-flex; align-items:baseline; white-space:nowrap; }
.brand-lock .bl-name .gold-text { display:inline; white-space:nowrap; }
.brand-lock { flex-wrap:nowrap; }

/* ============================================================
   푸터 리파인 (2026-06-28e) — 황금비 정렬, 브랜드 락업 한 줄
   ============================================================ */
.site-footer { padding: 80px 0 38px; }

/* 그리드: 브랜드 영역 넓게(황금비), 컬럼 균등 */
.foot-grid {
  display: grid;
  grid-template-columns: 1.618fr 1fr 1fr 1fr;  /* 브랜드:컬럼 = 황금비 */
  gap: 56px;
  align-items: start;
}
@media(max-width:880px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:40px 32px; } }
@media(max-width:480px){ .foot-grid{ grid-template-columns:1fr; gap:32px; } }

/* 브랜드 락업: 로고 좌측 + 2줄 텍스트 가로 정렬 */
.foot-brand .fb-lock { display:flex; align-items:center; gap:16px; }
.foot-brand .fb-lock img { width: 58px; height:58px; flex-shrink:0; }   /* 2줄 텍스트 높이에 맞춤 */
.foot-brand .fb-lock-text { display:flex; flex-direction:column; justify-content:center; gap:5px; }
.foot-brand .fb-name {
  font-family: var(--f-display); font-size: 1.16rem;
  letter-spacing: 0.08em; line-height: 1; white-space:nowrap; color: var(--paper);
}
.foot-brand .fb-co {
  font-family: var(--f-mono); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-mute); line-height: 1; white-space:nowrap;
}
.foot-brand > p {
  color: var(--paper-mute); font-size: 0.88rem; line-height: 1.7;
  margin-top: 22px; max-width: 320px;
}

/* 컬럼: 일관된 줄간격 */
.foot-col h4 {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--copper); margin-bottom: 20px;
}
.foot-col a, .foot-col p {
  display: block; color: var(--paper-dim); font-size: 0.9rem;
  line-height: 1; margin-bottom: 14px; transition: color .25s;
}
.foot-col a:hover { color: var(--gold); }
.foot-social { display:flex; gap:14px; margin-top:18px; }

/* 하단 바: 좌우 정렬 + 충분한 여백 */
.foot-bottom {
  margin-top: 60px; padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items:center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.foot-bottom p { font-size: 0.76rem; color: var(--paper-mute); line-height:1.4; }
.foot-bottom .pg { font-family: var(--f-mono); letter-spacing: 0.14em; color: var(--paper-dim); }

/* 우편번호 검색 row */
.zip-row { display:flex; gap:10px; }
.zip-row input[data-zip] { flex:1; cursor:pointer; }
.zip-btn {
  flex-shrink:0; white-space:nowrap;
  font-family: var(--f-body); font-weight:600; font-size:0.9rem;
  padding: 0 22px; border:1px solid var(--copper);
  border-radius: var(--r); background: rgba(201,138,75,0.1);
  color: var(--gold); cursor:pointer; transition: all .3s var(--ease);
}
.zip-btn:hover { background: var(--copper); color:#180d03; }
.co-form input[readonly] { cursor:pointer; }
.co-form input[name="addr2"][readonly] { cursor:text; }

/* 우편번호 검색 모달 */
.postcode-modal {
  position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.postcode-modal.open { display:flex; }
.postcode-box {
  width:min(480px, 96vw); max-height:90vh;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
.postcode-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--line-soft);
  font-family:var(--f-display); font-size:1.1rem; letter-spacing:0.05em;
}
.postcode-close { background:none; border:none; color:var(--paper-dim); font-size:1.5rem; line-height:1; cursor:pointer; }
.postcode-close:hover { color:var(--gold); }
.postcode-embed { width:100%; height:420px; }
.postcode-embed > div { width:100% !important; }

/* ============================================================
   히어로 좌측 정렬 버전 (2026-06-28f)
   ============================================================ */
.hero--left { place-items: center start; text-align: left; }
.hero--left .hero-inner { max-width: 760px; margin-left: clamp(20px, 8vw, 120px); }

/* 로고 좌측 + MASTER'S/33.3g 가로 락업 */
.hero-lockup { display:flex; align-items:center; gap: clamp(20px,3vw,36px); margin-bottom: 30px; }
.hero--left .hero-logo {
  width: clamp(92px, 12vw, 150px); margin:0; flex-shrink:0;
}
.hero--left h1 {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 0.92; margin:0; text-align:left;
}
.hero--left h1 .l2 {
  display:block; font-size: 1em; letter-spacing: 0.02em;
  color: var(--gold);   /* 33.3g만 골드 */
}

/* lede 좌측 정렬 + italic 제거 */
.hero--left .slogan { margin: 0 0 0 2px; }
.hero--left .lede {
  font-family: var(--f-body);   /* serif italic → 본문체 */
  font-style: normal;
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  color: var(--paper-dim); line-height: 1.6;
  max-width: 540px; margin: 24px 0 0;
}
.hero--left .hero-cta { justify-content: flex-start; }

/* 큰 버튼 (황금비 패딩, 글자 키움) */
.btn--lg {
  font-size: 0.92rem; letter-spacing: 0.1em;
  padding: 20px 38px;   /* 세로:가로 ≈ 1:1.9 */
}
@media(max-width:560px){
  .hero-lockup { gap:18px; }
  .btn--lg { padding: 17px 28px; font-size: 0.85rem; }
}

/* 모바일 히어로 락업 — 넘침 방지 */
@media(max-width:600px){
  .hero--left .hero-inner { margin-left: 0; padding: 0 22px; max-width:100%; }
  .hero-lockup { gap: 16px; }
  .hero--left .hero-logo { width: 76px; }
  .hero--left h1 { font-size: clamp(2.2rem, 13vw, 3.4rem); }
  .hero--left .lede { font-size: 1.02rem; }
}
@media(max-width:380px){
  .hero--left h1 { font-size: 2.2rem; }
  .hero--left .hero-logo { width: 64px; }
}
/* 헤더 로고 모바일 — CART와 간격 */
@media(max-width:430px){
  .brand-lock .bl-name { font-size: 0.92rem; }
  .brand-lock img { width: 28px; }
}

/* 모바일 히어로 락업 = 세로 (로고 위 / 텍스트 아래) — 가로 넘침 근본해결 */
@media(max-width:600px){
  .hero-lockup { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero--left h1 { font-size: clamp(2.6rem, 15vw, 4rem); line-height: 0.95; }
  .hero--left .hero-logo { width: 84px; }
}

/* ============================================================
   히어로 — 전체 가운데 정렬 + lede만 좌측 들여쓰기 (2026-06-28g)
   ============================================================ */
.hero--center { place-items: center; text-align: center; }
.hero--center .hero-inner { margin: 0 auto; max-width: 720px; display:flex; flex-direction:column; align-items:center; }

/* 로고 + MASTER'S/33.3g 가로 락업 — 중앙 배치 */
.hero--center .hero-lockup {
  display:flex; align-items:center; justify-content:center;
  gap: clamp(20px,3vw,36px); margin-bottom: 28px;
}
.hero--center .hero-logo { width: clamp(92px,12vw,150px); margin:0; flex-shrink:0; }
.hero--center h1 {
  font-size: clamp(2.6rem,7vw,5.4rem); line-height:0.92; margin:0; text-align:left;
}
.hero--center h1 .l2 { display:block; font-size:1em; letter-spacing:0.02em; color:var(--gold); }

.hero--center .slogan { margin: 0; }

/* lede — 블록은 중앙, 텍스트는 좌측 들여쓰기 정렬 */
.hero--center .lede {
  font-family: var(--f-body); font-style: normal;
  font-size: clamp(1.05rem,1.8vw,1.32rem);
  color: var(--paper-dim); line-height: 1.6;
  margin: 24px auto 0; text-align: left;     /* ← 가운데 블록 안에서 왼쪽 정렬 */
  width: fit-content; max-width: 540px;
}
.hero--center .hero-cta { justify-content: center; margin-top: 38px; }

/* 모바일: 락업 세로 + 전체 중앙 유지 */
@media(max-width:600px){
  .hero--center .hero-lockup { flex-direction: column; gap: 14px; }
  .hero--center h1 { font-size: clamp(2.6rem,15vw,4rem); text-align:center; }
  .hero--center .hero-logo { width: 84px; }
  .hero--center .lede { font-size: 1.02rem; }
}

/* ============================================================
   HERO — FOUR ROYAL HOUSES (4패널 황실 컬렉션, 2026-06-28h)
   ============================================================ */
.hero-royal {
  position: relative; height: 100svh; min-height: 640px;
  overflow: hidden; background: var(--ink);
}

/* 배경 4패널 */
.royal-panels { position:absolute; inset:0; display:grid; grid-template-columns: repeat(4, 1fr); }
.rpanel {
  position: relative; overflow: hidden;
  background-image: var(--art);
  background-size: cover; background-position: center top;
  border-right: 1px solid rgba(0,0,0,0.5);
  filter: grayscale(0.15) brightness(0.5);
  transition: filter .6s var(--ease), transform .6s var(--ease);
  /* 진입 애니메이션 */
  opacity: 0; transform: translateY(30px);
  animation: panelIn .9s var(--ease) forwards;
}
.rpanel:nth-child(1){ animation-delay:.1s }
.rpanel:nth-child(2){ animation-delay:.22s }
.rpanel:nth-child(3){ animation-delay:.34s }
.rpanel:nth-child(4){ animation-delay:.46s }
@keyframes panelIn { to { opacity:1; transform:none; } }

.rpanel::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,11,0.5) 0%, rgba(10,10,11,0.2) 40%, rgba(10,10,11,0.85) 100%);
  transition: background .6s;
}
.rpanel-name {
  position:absolute; bottom: 28px; left:0; right:0; z-index:2;
  text-align:center; font-family:var(--f-mono); font-size:0.64rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--gold);
  opacity:0; transform:translateY(10px); transition: all .5s var(--ease);
}
/* 호버: 해당 패널 밝아지고 살짝 확대 + 이름 노출, 나머진 더 어둡게 */
.royal-panels:hover .rpanel { filter: grayscale(0.4) brightness(0.32); }
.royal-panels:hover .rpanel:hover {
  filter: grayscale(0) brightness(0.95); transform: scale(1.02); z-index:1;
}
.rpanel:hover::after { background: linear-gradient(180deg, rgba(10,10,11,0.25), rgba(10,10,11,0.55)); }
.rpanel:hover .rpanel-name { opacity:1; transform:none; }

/* 중앙 로고타입 오버레이 (클릭 통과 → 패널 클릭 가능, 단 CTA/로고는 클릭) */
.royal-center {
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 80px 20px; pointer-events:none;
  background: radial-gradient(60% 50% at 50% 48%, rgba(10,10,11,0.78), rgba(10,10,11,0.32) 70%, transparent);
}
.royal-center > * { pointer-events: none; }       /* 텍스트는 패널 클릭 통과 */
.royal-center .royal-cta, .royal-center .royal-cta * { pointer-events: auto; }  /* 버튼만 클릭 */
.royal-logo {
  width: clamp(72px, 8vw, 104px);
  filter: drop-shadow(0 6px 30px rgba(201,138,75,0.45));
  margin-bottom: 22px;
  opacity:0; animation: fadeUp 1s var(--ease) .5s forwards;
}
.royal-title {
  font-family: var(--f-display); font-weight:700;
  font-size: clamp(3rem, 8vw, 6.4rem); line-height: 0.86;
  letter-spacing: 0.02em; color: var(--paper);
  text-shadow: 0 4px 40px rgba(0,0,0,0.8);
  opacity:0; animation: fadeUp 1s var(--ease) .62s forwards;
}
.royal-title .rt-g { color: var(--gold); }
.royal-slogan {
  font-family: var(--f-mono); font-size: clamp(0.74rem, 1.5vw, 0.96rem);
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--copper-lt);
  margin-top: 22px; opacity:0; animation: fadeUp 1s var(--ease) .74s forwards;
}
.royal-lede {
  font-family: var(--f-body); font-size: clamp(1rem, 1.7vw, 1.2rem);
  color: var(--paper-dim); line-height: 1.6; margin-top: 20px; max-width: 480px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.9);
  opacity:0; animation: fadeUp 1s var(--ease) .86s forwards;
}
.royal-cta {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top: 38px;
  opacity:0; animation: fadeUp 1s var(--ease) .98s forwards;
}
@keyframes fadeUp { from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none} }

/* 모바일: 4패널 → 2x2 */
@media(max-width: 760px){
  .royal-panels { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .royal-title { font-size: clamp(2.6rem, 13vw, 4rem); }
  .rpanel-name { display:none; }
  .royal-center { background: radial-gradient(80% 60% at 50% 50%, rgba(10,10,11,0.82), rgba(10,10,11,0.5) 75%); }
}

/* ============================================================
   버튼 글자 황금비 보정 (2026-06-28h) — 글자가 버튼 높이의 ~60% 차지
   기존 btn 패딩 대비 글자 너무 작던 것 수정
   ============================================================ */
.btn {
  font-size: 0.98rem;          /* 0.82 → 0.98 */
  letter-spacing: 0.06em;       /* 과한 자간 축소 */
  padding: 16px 30px;           /* 세로 패딩 = 글자높이 대비 적정 */
  line-height: 1;
}
.btn--lg {
  font-size: 1.08rem;           /* 0.92 → 1.08 */
  letter-spacing: 0.05em;
  padding: 19px 40px;
}
/* CTA 밴드 버튼 — 한글이라 본문체 bold, 더 큼직하게 */
.cta-band .btn {
  font-family: var(--f-body); font-weight: 700;
  font-size: 1.12rem; letter-spacing: 0.02em;
  padding: 20px 46px; text-transform: none;
}
/* mono 라벨형 버튼은 한글 가독 위해 약간만 */
.btn--primary, .btn--ghost { text-transform: none; }

/* ============================================================
   Home 티저 — 배경 이미지 위치 미세조정 (2026-06-28h)
   ============================================================ */
/* 저널 티저: 시바 여왕 얼굴 보이게 (상단 정렬) */
.teaser img.t-journal { object-position: center 22%; }
/* 구독 티저: 병을 오른쪽 위로 (글씨 겹침 줄임) */
.teaser img.t-sub { object-position: 72% 18%; transform: scale(1.0); }
.teaser:hover img.t-sub { transform: scale(1.05); }

/* ============================================================
   고아줄(orphan) 자동 회피 — text-wrap balance/pretty (2026-06-28i)
   끝 단어만 다음 줄 떨어지는 것 브라우저가 자동 방지
   ============================================================ */
.page-hero p, .how-step p, .teaser-body p, .royal-lede,
.section-head p, .about-lead, .jcard-body p, .pcard-body .pc-tag {
  text-wrap: balance;   /* 짧은 문단 줄 길이 균형 */
}
.art-p, .pdp-desc {
  text-wrap: pretty;    /* 긴 본문 마지막 줄 고아 방지 */
}

/* ═══════════ 주문서 모드 토글 + 현장수령 QR (2026-06-28) ═══════════ */
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px}
.mode-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 14px;cursor:pointer;
  background:var(--ink-2,#121311);border:1px solid var(--line);border-radius:10px;color:var(--paper-dim);
  transition:all .2s var(--ease);text-align:center;position:relative;overflow:hidden}
.mode-opt:hover{border-color:rgba(217,178,122,.4);color:var(--paper)}
.mode-opt.active{border-color:var(--copper);background:linear-gradient(180deg,rgba(201,138,75,.12),transparent);color:var(--paper)}
.mode-opt.active::after{content:"";position:absolute;top:10px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--copper);box-shadow:0 0 10px var(--copper)}
.mode-opt .mo-ico{width:30px;height:30px;color:currentColor}
.mode-opt.active .mo-ico{color:var(--gold)}
.mode-opt .mo-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6}
.mode-opt .mo-t{font-family:var(--f-display,'Cinzel',serif);font-size:1.05rem;letter-spacing:.5px;margin-top:4px}
.mode-opt .mo-s{font-size:.74rem;color:var(--paper-mute);font-family:var(--f-mono,monospace)}

/* QR 결제 */
.qr-pay{background:var(--ink-2,#121311);border:1px solid var(--line);border-radius:12px;padding:24px 22px}
.qr-tabs{display:flex;gap:8px;margin-bottom:22px;justify-content:center}
.qr-tab{padding:9px 22px;border-radius:30px;border:1px solid var(--line);color:var(--paper-mute);
  font-size:.86rem;font-weight:600;cursor:pointer;transition:.18s}
.qr-tab:hover{color:var(--paper)}
.qr-tab.active{background:var(--copper);border-color:var(--copper);color:var(--ink)}
.qr-stage{text-align:center}
.qr-frame{width:220px;height:220px;margin:0 auto;border-radius:14px;display:grid;place-items:center}
/* 준비중 안내 박스 (목업 QR 자리) */
.qr-frame--soon{background:var(--ink-3,#1a1c18);border:1px dashed var(--line);box-shadow:none}
.qr-soon{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:18px}
.qr-soon-ico{width:42px;height:42px;color:var(--copper)}
.qr-soon-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}
.qr-soon-tag{font-family:var(--f-body);font-size:.95rem;font-weight:600;color:var(--paper-dim);line-height:1.5;letter-spacing:-.2px}
.qr-amt{margin-top:38px;font-size:.9rem;color:var(--paper-dim)}
.qr-amt b{font-family:var(--f-display,'Cinzel',serif);font-size:1.5rem;color:var(--gold);margin-left:8px;letter-spacing:.5px}
.qr-guide{margin-top:10px;font-size:.8rem;color:var(--paper-mute);line-height:1.6;max-width:300px;margin-inline:auto}