/*
 * Tangerine & Peach — shared refinement layer.
 *
 * Every page still carries its own inline <style> (no build step), copied
 * across 8+ files. Rather than hand-editing each copy, site-wide polish lives
 * here: this file is linked LAST in every <head>, so a rule here with the same
 * selector as an inline rule wins by source order. Remove the <link> and the
 * site is exactly as it was before this layer existed.
 *
 * Edit the root copy, then `python3 tools/sitesync.py build` copies it to site/.
 */

/* ---------- design tokens ---------- */
:root{
  --font-sans:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-brand:'Cinzel','Pretendard Variable',serif;

  /* type scale (fluid between ~390px and ~1440px viewports) */
  --fs-display:clamp(2rem, 1.45rem + 2.3vw, 3.1rem);
  --fs-section:clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem);
  --fs-subsection:clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --fs-body:0.96rem;
  --fs-small:0.88rem;
  --fs-caption:0.8rem;
  --fs-label:0.72rem;
  --lh-body:1.85;
  --lh-heading:1.35;

  /* spacing scale */
  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --sp-5:32px;
  --sp-6:48px; --sp-7:64px; --sp-8:80px; --sp-9:96px; --sp-10:120px;
  --section-y:clamp(72px, 4.5rem + 3.5vw, 120px);
  --gutter:32px;

  --content-max:1320px;
  --text-max:64ch;

  --radius-sm:4px;
  --control-h:48px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.18s;
  --dur:.4s;
  --dur-slow:.9s;

  color-scheme:light;
}
@media (max-width:820px){ :root{ --gutter:24px; } }
@media (max-width:380px){ :root{ --gutter:16px; } }

/* ---------- always white: neutralise the old dark-mode palette ----------
   Same selectors as the inline dark blocks, so these win by source order. */
:root,
:root[data-theme="dark"]{
  --ink:#211D14;
  --ink-soft:#6E6857;
  --paper:#FFFFFF;
  --surface:#F8F4EC;
  --line:#EAE0CC;
  --gold:#A67C27;
  --gold-deep:#7D5D1C;
  --shadow:0 22px 46px -26px rgba(30,25,10,0.2);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#211D14;
    --ink-soft:#6E6857;
    --paper:#FFFFFF;
    --surface:#F8F4EC;
    --line:#EAE0CC;
    --gold:#A67C27;
    --gold-deep:#7D5D1C;
    --shadow:0 22px 46px -26px rgba(30,25,10,0.2);
  }
}

/* ---------- gutters: header and content share one edge ---------- */
.wrap{max-width:var(--content-max); padding-left:var(--gutter); padding-right:var(--gutter);}
.nav-row, .search-row{padding-left:var(--gutter); padding-right:var(--gutter);}
.pdp-sticky-bar{padding-left:var(--gutter); padding-right:var(--gutter);}
.wrap.narrow, .wrap.terms-wrap{padding-left:var(--gutter); padding-right:var(--gutter);}
.mobile-nav{padding-left:var(--gutter); padding-right:var(--gutter);}

/* ---------- typography hierarchy ---------- */
body{font-family:var(--font-sans);}
h1, h2, h3{letter-spacing:-0.015em; line-height:var(--lh-heading);}

/* section titles: one size, one weight everywhere */
.promo-strip h2,
.pf-info h2,
.edit-banner-copy h2,
.trust-band h2,
.story-split .story-text h2,
.values-section h2,
.brand-cta h2,
.pdp-feature-text h2,
.pdp-3d-text h2,
.pdp-related h2{
  font-size:var(--fs-section); font-weight:300;
}
/* page titles */
.faq-hero h1, .terms-hero h1{font-size:var(--fs-display); font-weight:300;}
.pdp-info h1{font-size:clamp(1.7rem, 1.35rem + 1.4vw, 2.3rem); font-weight:300;}

/* body copy */
.pf-desc,
.story-split .story-text p,
.values-section .section-head p,
.brand-cta p,
.pdp-feature-text p,
.pdp-3d-sub,
.faq-hero p{font-size:var(--fs-body); line-height:var(--lh-body);}

/* labels / eyebrows keep their original inline styles: English point labels
   are Cinzel (Korean characters fall back to Pretendard within the same stack).
   The one English label that was Pretendard gets Cinzel to match that rule. */
.pf-info .trending{font-family:var(--font-brand); font-weight:600; letter-spacing:0.05em;}

/* ---------- section rhythm ---------- */
.product-feature{padding:var(--section-y) 0;}
.pull-quote{padding:calc(var(--section-y) * 1.1) 0;}
.trust-band{padding:var(--section-y) 0;}
.values-section{padding:var(--section-y) 0;}
.brand-cta{padding:var(--section-y) 0;}
.pdp-3d{padding:var(--section-y) 0;}
.pdp-related{padding:var(--section-y) 0;}
.promo-strip{padding:40px 0;}
#faq{padding:var(--sp-7) 0;}

/* ---------- buttons & inputs: one height, one rhythm ---------- */
.link-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--control-h); padding:0 28px;
  font-size:var(--fs-small); letter-spacing:0.02em;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.notify-form{align-items:stretch;}
.notify-form input{min-height:var(--control-h); padding:0 16px; font-size:var(--fs-small);}
.pdp-buy input[type=email], .pdp-buy button{min-height:52px;}

/* ---------- header / navigation ---------- */
:focus-visible{outline:2px solid var(--gold-deep); outline-offset:3px;}

.navlinks > li > a{position:relative; display:inline-block; padding:6px 0; letter-spacing:0.01em;}
.navlinks > li > a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur) var(--ease);
}
.navlinks > li > a:hover{color:var(--ink);}
.navlinks > li > a:hover::after,
.navlinks > li > a[aria-current="page"]::after,
.nav-has-mega.mega-open > a::after{transform:scaleX(1);}
.mobile-nav a[aria-current="page"]{color:var(--gold-deep);}

/* icon buttons: 40px hit area, same visual footprint */
.nav-icons button{padding:10px; margin:-6px;}
.hamburger-btn{padding:9px; margin:-5px;}

/* mega menu: fades in instead of popping; also opens for keyboard users.
   Stays display:none while closed so its lazy images aren't fetched on
   every page view; @starting-style gives the fade (instant in older browsers). */
.nav-has-mega.mega-open .mega-menu,
.nav-has-mega:focus-within .mega-menu{
  display:block; opacity:1; transform:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
@starting-style{
  .nav-has-mega.mega-open .mega-menu,
  .nav-has-mega:focus-within .mega-menu{opacity:0; transform:translateY(-6px);}
}
/* product cards: a full-bleed square photo, same as the homepage and /products
   cards (contain in a 4:3 box showed each photo shape at a different size) */
.mega-promo .mega-promo-img{padding:0; aspect-ratio:1; background:#FFFFFF; overflow:hidden;}
.mega-promo img{display:block; object-fit:cover; transition:transform var(--dur-slow) var(--ease);}
.mega-promo:hover img{transform:scale(1.03);}
.mega-promo .mega-promo-title{margin-top:2px;}

/* ---------- homepage ---------- */
/* content edge = where .wrap's text starts, so banner copy lines up with the page */
:root{ --edge:max(var(--gutter), calc((100vw - var(--content-max)) / 2 + var(--gutter))); }

.hero-scroll-cue{color:rgba(255,255,255,.82); text-shadow:0 1px 8px rgba(0,0,0,.3);}

/* single product: the piece floats on white, larger, no card chrome */
.pf-grid{grid-template-columns:1.1fr 1fr; gap:clamp(40px, 7vw, 112px);}
.pf-visual{border:none; border-radius:0; box-shadow:none;}
.pf-visual img{transition:transform var(--dur-slow) var(--ease);}
.pf-visual:hover img{transform:scale(1.025);}
.pf-info h2{margin-bottom:18px;}
.pf-desc{margin-bottom:28px;}
.pf-price{margin-bottom:28px;}
.pf-specs li{font-size:var(--fs-small);}
@media (max-width:820px){ .pf-grid{grid-template-columns:1fr; gap:32px;} }

/* editorial banners: copy sits on a readable veil and on the content edge */
.scene-photo .scene-veil{
  background:
    linear-gradient(0deg, rgba(10,12,6,.70) 0%, rgba(10,12,6,.36) 32%, rgba(10,12,6,.08) 60%, transparent 78%),
    radial-gradient(70% 60% at 0% 100%, rgba(10,12,6,.30) 0%, transparent 70%);
}
.edit-banner-copy{
  max-width:none; width:100%;
  padding:0 var(--edge) clamp(40px, 6vw, 72px);
}
.edit-banner-copy > *{max-width:440px;}
.edit-banner-copy h2{margin-bottom:12px; text-shadow:0 2px 18px rgba(0,0,0,.25);}
.edit-banner-copy p{font-size:var(--fs-body); line-height:1.7; opacity:.92; margin-bottom:24px; text-shadow:0 1px 10px rgba(0,0,0,.3);}

/* trust band: readable body size */
.trust-grid{gap:clamp(24px, 3vw, 40px); margin-bottom:48px;}
.trust-item p{font-size:0.92rem; line-height:1.75;}
.trust-band h2{margin-bottom:clamp(40px, 5vw, 56px);}

/* ---------- motion: one easing, shorter distances, gentler zoom ---------- */
.reveal{
  transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
/* slow photo drift on hero/banners: same timing, half the zoom (was 1.0 -> 1.1) */
@keyframes kenburns{ from{transform:scale(1);} to{transform:scale(1.05);} }
.hero-scroll-cue svg{animation-duration:2.4s;}
.mobile-nav-toggle svg{transition:transform var(--dur-fast) var(--ease);}
.site-toast{transition:opacity .3s var(--ease), transform .3s var(--ease);}
/* the inline reduced-motion rule already stops animations/transitions;
   make sure revealed content is never left mid-fade for those visitors */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none;}
}

/* ---------- product detail ---------- */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* sticky bar: takes no space while hidden (it left a ~70px blank band under
   the header), shares the content edge, and carries the page's one CTA */
.pdp-sticky-bar{
  height:64px; margin-bottom:-64px; padding-top:0; padding-bottom:0;
  padding-left:var(--edge); padding-right:var(--edge);
  border-bottom:1px solid var(--line); pointer-events:none;
}
.pdp-sticky-cta{
  display:inline-flex; align-items:center; min-height:38px; padding:0 18px;
  background:var(--ink); color:var(--paper); text-decoration:none;
  font-size:var(--fs-caption); letter-spacing:0.02em;
  transition:background var(--dur-fast) var(--ease);
}
.pdp-sticky-cta:hover{background:var(--gold-deep);}
#pdpBuy{scroll-margin-top:220px;}
.pdp-breadcrumb{padding:32px 0 28px;}

/* info column order: name > price > description > buy > note > specs > tabs */
.pdp-info .pdp-desc{margin-bottom:36px;}
.pdp-buy{margin-bottom:0;}
.pdp-note{margin-top:24px;}
.pdp-specs{margin-top:40px; margin-bottom:0;}
.pdp-tabs{margin-top:64px;}

/* ---------- touch targets (mobile/tablet) ----------
   Same look, bigger hit areas: padding grows, gaps shrink to compensate. */
.search-row input{padding:10px 0;}
.search-row{padding-top:4px; padding-bottom:4px;}
.foot-signup input{padding:14px 4px;}
.faq-item{padding:12px 0;}
.faq-item summary{padding:14px 0; min-height:44px;}
.pdp-breadcrumb a{padding:6px 0;}
@media (max-width:820px){
  .foot-cols ul{gap:0;}
  .foot-cols a{display:inline-block; padding:10px 0;}
  .foot-bottom a{display:inline-block; padding:8px 0;}
  .text-link{display:inline-block; padding:10px 0;}
}
/* tablet/mobile single column: the featured piece shouldn't balloon to full width */
@media (max-width:820px){ .pf-visual{width:100%; max-width:560px; margin:0 auto;} }

/* 안심 기준 -> 자주 묻는 질문: same beige block, split by a hairline at text width */
#trust{padding-bottom:var(--sp-7);}
#trust + #faq{padding-top:0;}
#trust + #faq .wrap{position:relative; padding-top:var(--sp-7);}
#trust + #faq .wrap::before{
  content:''; position:absolute; top:0; left:var(--gutter); right:var(--gutter);
  height:1px; background:color-mix(in srgb, var(--gold) 28%, transparent);
}

/* search field: type=search for the mobile keyboard's search key, same look as before */
.search-row input[type=search]{-webkit-appearance:none; appearance:none;}
.search-row input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}

/* ---------- /safety: the 안심 기준 points as their own page ---------- */
.safety-list{padding:0 0 var(--section-y);}
.safety-list .trust-grid{margin:16px 0 56px; gap:clamp(28px, 4vw, 56px);}
.safety-list .trust-item{gap:14px;}
.safety-list .trust-item svg{color:var(--gold-deep);}
.safety-list .trust-item p{font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-soft);}
.safety-links{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* admin "사이트에서 보기" links to #bn-<banner id>: land below the sticky header */
[id^="bn-"]{scroll-margin-top:130px;}