/* 자동 생성 파일 — 고치지 마세요.
   원본은 src/styles/ 에 있고 scripts/build.py 가 합칩니다. */

/* ===== src/styles/base/tokens.css ===== */
/* =========================================================
   TOKENS
   -------------------------------------------------------
   디자인 토큰 — 색·서체·여백의 단일 출처.
   이 값만 바꾸면 사이트 전체 톤이 한 번에 바뀝니다.
   ======================================================= */

:root{
  --bg:#0b0a08;            /* near-black, warm */
  --bg-2:#111010;
  --bg-3:#16140f;
  --cream:#f4efe4;         /* primary text */
  --cream-dim:#bdb7a8;
  --gold:#c8a96a;          /* champagne gold */
  --gold-2:#e3c98f;
  --gold-deep:#9b8049;
  --line:rgba(200,169,106,.22);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Cormorant Garamond","Noto Serif KR",serif;
  --kserif:"Noto Serif KR",serif;
  --sans:"Pretendard","Pretendard Variable",system-ui,sans-serif;
}

/* ===== src/styles/base/reset.css ===== */
/* =========================================================
   RESET
   -------------------------------------------------------
   리셋과 기본 요소 — 브라우저 기본값을 걷어내고
   body·img·a·em 의 기준을 잡습니다.
   ======================================================= */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.7;
  letter-spacing:-.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--gold-2)}
::selection{background:var(--gold);color:#1a1206}

/* ===== src/styles/base/typography.css ===== */
/* =========================================================
   TYPOGRAPHY
   -------------------------------------------------------
   타이포그래피 공통 — 섹션 태그와 전역 줄바꿈 규칙.
   언어별 서체·제목 상한은 typography-lang.css 에 따로 있습니다.
   ======================================================= */

/* ---------- shared ---------- */
.section-tag{
  font-family:var(--sans);
  font-size:.72rem;font-weight:600;letter-spacing:.32em;
  color:var(--gold);text-transform:uppercase;margin-bottom:1.4rem;
}
.section-tag.light{color:var(--gold-2)}

body{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,h4,h5,h6,
.hero__title,.wd-title,.wd-en,.signature__title,.collection__title,
.card__body h3,.section-title,.intro__title,.story__title,.terroir__title,
.heritage__title,.quote__text,.contact__title,.gmap__title{
  text-wrap:balance;
}
p,.wd-lead,.card__note,.hero__sub,.collection__lead,.contact__lead{
  text-wrap:pretty;
}

/* ===== src/styles/base/motion.css ===== */
/* =========================================================
   MOTION
   -------------------------------------------------------
   스크롤 모션 — 등장 애니메이션(.reveal) 2단 구성.
   1) 구형 브라우저: JS 가 IntersectionObserver 로 .in 을 붙임
   2) 최신 브라우저: animation-timeline:view() 로 스크롤에 붙어 스크럽
   ======================================================= */

/* ---------- reveal animation ----------
   Two layers:
   1) Fallback (older browsers): JS adds .in once via IntersectionObserver.
   2) Scroll-driven (modern): the @supports block below re-binds the same
      elements to a view() timeline so they SCRUB in/out with the wheel —
      i.e. the motion reverses as you scroll back up (Apple-style). */
.reveal{opacity:0;transform:translateY(38px);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- scroll-driven (scrubbed) motion ---------- */
@keyframes sd-reveal{from{opacity:0;transform:translateY(64px)}to{opacity:1;transform:none}}
@keyframes sd-drift{from{transform:translateY(-8%)}to{transform:translateY(8%)}}
@keyframes sd-zoom{from{transform:scale(1.24)}to{transform:scale(1.02)}}
@keyframes sd-wipe{from{opacity:.0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    /* reveal now scrubs continuously while the element crosses the lower viewport */
    .reveal{opacity:1;transform:none;
      animation:sd-reveal both linear;
      animation-timeline:view();
      animation-range:entry 0% entry 60%}

    /* background layers drift through their whole pass = visible parallax on every wheel tick */
    [data-parallax]{animation:sd-drift both linear;
      animation-timeline:view();animation-range:cover 0% cover 100%}

    /* cinematic feature images slowly zoom out while on screen */
    .story__bg img,.quote__bg img,.signature__media img{
      animation:sd-zoom both linear;
      animation-timeline:view();animation-range:cover 0% cover 100%}

    /* section headlines get a slightly stronger scrub-in */
    .hero__title .line,.intro__statement span,.story__title,.terroir__title,
    .collection__title,.gmap__title,.signature__title,.heritage__title,
    .contact__title,.quote__text{
      animation:sd-wipe both linear;
      animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}

/* ===== src/styles/components/scroll-progress.css ===== */
/* =========================================================
   SCROLL-PROGRESS
   -------------------------------------------------------
   상단 스크롤 진행 바.
   ======================================================= */

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-2));
  box-shadow:0 0 12px rgba(200,169,106,.6);
}

/* ===== src/styles/components/button.css ===== */


.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5em;padding:.95em 2.1em;border-radius:100px;
  font-size:.92rem;font-weight:600;letter-spacing:.02em;
  cursor:pointer;border:1px solid transparent;
  transition:transform .4s var(--ease),background .4s var(--ease),
             color .4s var(--ease),box-shadow .4s var(--ease);
}
.btn--lg{padding:1.1em 2.6em;font-size:1rem}
.btn--gold{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#1c1304;box-shadow:0 8px 30px rgba(200,169,106,.22);
}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(200,169,106,.4)}
.btn--ghost{border-color:rgba(244,239,228,.35);color:var(--cream)}
.btn--ghost:hover{background:rgba(244,239,228,.08);border-color:var(--cream);transform:translateY(-3px)}

/* ===== src/styles/components/marquee.css ===== */
/* =========================================================
   MARQUEE
   -------------------------------------------------------
   마퀴 띠 — 영문 고유명사가 흐르는 가로 배너.
   ======================================================= */

.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2);padding:1.5rem 0}
.marquee__track{display:flex;gap:2.5rem;white-space:nowrap;width:max-content;
  animation:marquee 32s linear infinite}
.marquee__track span{font-family:var(--serif);font-size:1.4rem;letter-spacing:.16em;
  color:var(--cream-dim);font-weight:500}
.marquee__track span:nth-child(even){color:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ===== src/styles/components/card.css ===== */
/* =========================================================
   CARD
   -------------------------------------------------------
   와인 카드 — 컬렉션 그리드, 타입 뱃지(스파클링/화이트/로제/레드), 필터 버튼.
   ======================================================= */

.collection{padding:clamp(6rem,12vw,11rem) 2rem;background:var(--bg-2);
  border-top:1px solid var(--line)}
.collection__head{max-width:var(--maxw);margin:0 auto 4rem;text-align:center}
.collection__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:1.4rem}
.collection__lead{color:var(--cream-dim);max-width:620px;margin:0 auto;font-size:1.05rem}
.cards{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1.4rem}
.card{background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease)}
.card:hover{transform:translateY(-8px);border-color:rgba(200,169,106,.5);
  box-shadow:0 24px 50px rgba(0,0,0,.5)}
/* 컬렉션 카드의 사진은 배경이 지워진 병 사진입니다.
   잘라내면(cover) 병이 반으로 끊기므로 contain 으로 두고,
   병 뒤에는 와인 타입에 맞는 배경을 깔아 줍니다.

   배경은 크게 흐리고 어둡게 구운 사진입니다(assets/images/wines/backdrops/).
   주인공은 어디까지나 병이므로, 그 위에 어둠 한 겹(::before)을 덮어
   질감만 남기고 형태는 읽히지 않게 눌러 둡니다.

   어느 배경을 쓸지는 카드의 data-type 첫 토큰이 정합니다.
     data-type="sparkling rose" → 스파클링,  "rose sparkling" → 로제
   (레드가 기본값이라 red 는 따로 적지 않습니다.) */
.card__media{position:relative;height:250px;overflow:hidden;
  --backdrop:url("../assets/images/wines/backdrops/red.webp");
  background:var(--backdrop) center/cover no-repeat var(--bg)}
.card[data-type^="sparkling"] .card__media{--backdrop:url("../assets/images/wines/backdrops/sparkling.webp")}
.card[data-type^="white"]     .card__media{--backdrop:url("../assets/images/wines/backdrops/white.webp")}
.card[data-type^="rose"]      .card__media{--backdrop:url("../assets/images/wines/backdrops/rose.webp")}

.card__media::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 108%,rgba(200,169,106,.16),transparent 60%),
             linear-gradient(180deg,rgba(11,10,8,.34),rgba(11,10,8,.76));
  transition:opacity .55s var(--ease)}
.card:hover .card__media::before{opacity:.84}
.card__media::after{content:"";position:absolute;left:50%;bottom:16px;translate:-50% 0;
  width:58%;height:12px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);
  transition:width .55s var(--ease),opacity .55s var(--ease);pointer-events:none}
.card__media img{position:relative;z-index:1;
  width:auto;height:100%;max-width:78%;margin:0 auto;object-fit:contain;
  padding:1.4rem 0 1.1rem;
  transition:transform 1s var(--ease),filter .8s var(--ease);
  /* 배경 위로 병을 띄우는 세 가지 — 밝기·대비·바닥까지 닿는 그림자 */
  filter:brightness(1.07) contrast(1.06) drop-shadow(0 14px 28px rgba(0,0,0,.8))}
.card:hover .card__media img{transform:translateY(-6px) scale(1.05);
  filter:brightness(1.14) contrast(1.08) drop-shadow(0 20px 34px rgba(0,0,0,.85))}
.card:hover .card__media::after{width:50%;opacity:.75}
.card__badge{position:absolute;z-index:2;top:1rem;left:1rem;font-size:.62rem;letter-spacing:.2em;
  font-weight:700;color:var(--gold-2);background:rgba(11,10,8,.7);padding:.4rem .8rem;
  border-radius:100px;border:1px solid var(--line);backdrop-filter:blur(6px)}
.card__body{padding:1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card__body h3{font-family:var(--headline);font-weight:600;font-size:1.32rem;line-height:1.25}
.card__en{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1rem;margin-top:-.2rem}
.card__cepage{font-size:.78rem;letter-spacing:.04em;color:var(--cream-dim);
  padding-bottom:.7rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}
.card__note{font-size:.92rem;color:var(--cream-dim);flex:1}
.card__tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.card__tags li{font-size:.7rem;letter-spacing:.06em;color:var(--gold);
  border:1px solid var(--line);border-radius:100px;padding:.3rem .7rem}

.card__type{position:absolute;top:1rem;right:1rem;z-index:2;display:inline-flex;align-items:center;
  gap:.45em;font-size:.62rem;font-weight:700;letter-spacing:.12em;color:var(--cream);
  background:rgba(11,10,8,.62);border:1px solid var(--line);backdrop-filter:blur(6px);
  padding:.36rem .7rem;border-radius:100px}
.card__type::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-2)}
.card__type--sparkling::before{background:#e9d49a;box-shadow:0 0 7px rgba(233,212,154,.9)}
.card__type--white::before{background:#dfe1a6;box-shadow:0 0 7px rgba(223,225,166,.85)}
.card__type--rose::before{background:#e6a6b6;box-shadow:0 0 7px rgba(230,166,182,.85)}
.card__type--red::before{background:#bf4d57;box-shadow:0 0 7px rgba(191,77,87,.9)}

.cfilter{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;
  max-width:var(--maxw);margin:0 auto 1rem}
/* 두 번째 줄(국가)은 한 단계 가벼운 위계로 둡니다 */
.cfilter--sub{margin-bottom:.9rem}
.cfilter--sub .cfilter__btn{font-size:.78rem;padding:.42rem 1rem;
  border-color:rgba(200,169,106,.14);color:#8d8878}
.cfilter--sub .cfilter__btn:hover{color:var(--cream-dim)}
.cfilter--sub .cfilter__btn.is-active{background:transparent;color:var(--gold-2);
  border-color:rgba(200,169,106,.55);box-shadow:none}
.cfilter__count{text-align:center;font-size:.78rem;letter-spacing:.12em;
  color:#6f6a5e;margin:0 auto 2.4rem}
.cfilter__count strong{color:var(--gold);font-weight:600}
.cfilter__btn{font-family:var(--sans);font-size:.84rem;font-weight:600;letter-spacing:.01em;
  color:var(--cream-dim);background:transparent;border:1px solid var(--line);
  padding:.55rem 1.25rem;border-radius:100px;cursor:pointer;
  transition:color .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}
.cfilter__btn:hover{color:var(--cream);border-color:rgba(200,169,106,.55)}
.cfilter__btn.is-active{background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#1c1304;border-color:transparent;box-shadow:0 6px 20px rgba(200,169,106,.22)}
.card.is-hidden{display:none}

/* ===== src/styles/components/quote.css ===== */
/* =========================================================
   QUOTE
   -------------------------------------------------------
   인용 블록 — 배경 이미지 위에 큰 문장을 얹는 섹션.
   ======================================================= */

.quote{position:relative;min-height:80svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:6rem 2rem}
.quote__bg{position:absolute;inset:-12% 0;z-index:0;will-change:transform}
.quote__bg img{filter:brightness(.4) saturate(.9)}
.quote__overlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,
  rgba(11,10,8,.4),rgba(11,10,8,.85))}
.quote__text{position:relative;z-index:2;font-family:var(--headline);font-weight:400;
  font-size:clamp(1.8rem,4.5vw,3.4rem);line-height:1.4;max-width:900px}
.quote__cite{position:relative;z-index:2;margin-top:2rem;font-size:.82rem;
  letter-spacing:.24em;color:var(--gold-2)}

/* ===== src/styles/components/map.css ===== */
/* =========================================================
   MAP
   -------------------------------------------------------
   글로벌 소싱 지도 — 점묘 지도, 핀, 황금 교역로 아크.
   ======================================================= */

.gmap{position:relative;padding:clamp(6rem,12vw,11rem) 2rem;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(200,169,106,.06),transparent 60%),
    var(--bg)}
.gmap__head{max-width:760px;margin:0 auto 3.5rem;text-align:center}
.gmap__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(2rem,5vw,3.6rem);line-height:1.18;margin-bottom:1.6rem}
.gmap__lead{color:var(--cream-dim);font-size:1.05rem}
.gmap__wrap{position:relative;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.62fr 1fr;gap:1.6rem;align-items:center}
.gmap__stage{position:relative;width:100%;aspect-ratio:2/1;overflow:hidden;
  border-radius:20px;border:1px solid var(--line);cursor:default;
  background:
    radial-gradient(140% 120% at 50% 30%,rgba(30,42,56,.45),transparent 70%),
    linear-gradient(180deg,#0c1015,#0a0c0e)}
.gmap__inner{position:absolute;inset:0;transform-origin:0 0;
  transition:transform 1s var(--ease);will-change:transform}
.gmap__img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 0 14px rgba(200,169,106,.12))}
.gmap__pins{position:absolute;inset:0}

.pinm{position:absolute;transform:translate(-50%,-50%) scale(calc(1/var(--z,1)));
  background:none;border:0;padding:0;cursor:pointer;z-index:2;
  transition:transform .4s var(--ease)}
.gmap__inner.zoomed .pinm{transform:translate(-50%,-50%) scale(calc(1/var(--z,1)))}
.pinm__dot{display:block;width:11px;height:11px;border-radius:50%;
  background:var(--gold-2);box-shadow:0 0 0 3px rgba(200,169,106,.18),0 0 10px rgba(200,169,106,.6);
  position:relative;transition:transform .35s var(--ease)}
.pinm__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(200,169,106,.5);animation:ping 2.6s var(--ease) infinite}
.pinm--flag .pinm__dot{width:15px;height:15px;background:#fff;
  box-shadow:0 0 0 4px rgba(200,169,106,.35),0 0 18px rgba(227,201,143,.9)}
.pinm--flag .pinm__dot::after{inset:-7px;border-color:rgba(227,201,143,.8);border-width:1.5px}
/* home destination hub (대한민국) — always-on gold marker */
.pinm--home .pinm__dot{width:17px;height:17px;background:radial-gradient(circle at 35% 30%,#fff,var(--gold-2) 70%);
  box-shadow:0 0 0 5px rgba(200,169,106,.30),0 0 24px rgba(227,201,143,1)}
.pinm--home .pinm__dot::after{inset:-9px;border-color:rgba(227,201,143,.85);border-width:1.6px}
.pinm--home .pinm__label{opacity:1;background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#1a1408;border-color:transparent;font-weight:700}
.pinm:hover .pinm__dot,.pinm.active .pinm__dot{transform:scale(1.35)}
.pinm__label{position:absolute;left:50%;bottom:170%;transform:translateX(-50%);
  white-space:nowrap;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--cream);
  background:rgba(11,10,8,.82);border:1px solid var(--line);backdrop-filter:blur(6px);
  padding:.35rem .7rem;border-radius:100px;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);z-index:3}
.pinm:hover .pinm__label,.pinm.active .pinm__label{opacity:1}

.gmap__reset{position:absolute;top:1rem;left:1rem;z-index:5;
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(11,10,8,.7);border:1px solid var(--line);backdrop-filter:blur(8px);
  color:var(--cream);font-size:.8rem;font-weight:600;letter-spacing:.02em;
  padding:.6rem 1.1rem;border-radius:100px;cursor:pointer;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s var(--ease)}
.gmap__reset.show{opacity:1;transform:none;pointer-events:auto}
.gmap__reset:hover{background:rgba(200,169,106,.2)}
.gmap__reset span{width:13px;height:13px;border:1.5px solid var(--gold-2);border-radius:3px;
  position:relative}
.gmap__reset span::after{content:"";position:absolute;inset:2px;border:1px solid var(--gold-2);border-radius:1px;opacity:.6}

.gmap__detail{position:relative;z-index:5;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-3));
  border:1px solid var(--line);border-radius:18px;padding:2rem 1.9rem;
  box-shadow:0 18px 50px rgba(0,0,0,.4);transition:opacity .4s var(--ease)}
.gmap__detail-tag{font-size:.66rem;letter-spacing:.22em;color:var(--gold);font-weight:700;margin-bottom:.6rem}
.gmap__detail-region{font-family:var(--headline);font-weight:600;font-size:1.5rem;line-height:1.2}
.gmap__detail-sub{font-family:var(--serif);font-style:italic;color:var(--gold-2);font-size:1rem;margin-bottom:.9rem}
.gmap__detail-body{color:var(--cream-dim);font-size:.92rem;line-height:1.7;margin-bottom:1rem}
.gmap__detail-grapes{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.gmap__detail-grapes li{font-size:.7rem;letter-spacing:.04em;color:var(--gold);
  border:1px solid var(--line);border-radius:100px;padding:.28rem .65rem}

.gmap__stats{list-style:none;max-width:1120px;margin:3.5rem auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  border-top:1px solid var(--line);padding-top:2.8rem;text-align:center}
.gmap__stats li{display:flex;flex-direction:column;gap:.4rem}
.gmap__stats .num{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.4rem);
  font-weight:500;color:var(--gold-2);line-height:1}
.gmap__stats .lbl{font-size:.85rem;color:var(--cream-dim)}

/* Keep the stage at 2:1 on every breakpoint so the equirectangular map fills
   it edge-to-edge (object-fit:contain == no letterbox at 2:1) and the pin
   percentages stay geographically accurate. On small screens the detail card
   drops below the map instead of overlaying the now-shorter map. */
@media (max-width:880px){
  .gmap__wrap{grid-template-columns:1fr;gap:1.2rem}
  .gmap__detail{position:static;width:auto;margin-top:1.2rem;
    background:var(--bg-2);backdrop-filter:none;box-shadow:none}
}
@media (max-width:600px){
  .gmap__title{font-size:clamp(1.7rem,7.4vw,2.3rem)}
  .pinm__label{font-size:.64rem}
  .gmap__stats{grid-template-columns:1fr;gap:1.8rem}
}

.gmap__img{filter:brightness(1.38) saturate(1.12) drop-shadow(0 0 16px rgba(200,169,106,.16))}
.gmap__arcs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.gmap__arc{fill:none;stroke-linecap:round}
.gmap__arc--base{stroke:rgba(200,169,106,.16);stroke-width:.7}
.gmap__arc--flow{stroke:url(#vbArcGrad);stroke-width:1.5;
  filter:drop-shadow(0 0 2.5px rgba(227,201,143,.65));
  stroke-dasharray:4 7;animation:arcflow 5.5s linear infinite}
@keyframes arcflow{to{stroke-dashoffset:-110}}
@media (prefers-reduced-motion:reduce){.gmap__arc--flow{animation:none}}

/* stronger, gently pulsing pins */
.pinm__dot{animation:pinglow 2.8s ease-in-out infinite}
@keyframes pinglow{
  0%,100%{box-shadow:0 0 0 3px rgba(200,169,106,.16),0 0 9px rgba(200,169,106,.55)}
  50%{box-shadow:0 0 0 5px rgba(200,169,106,.10),0 0 18px rgba(227,201,143,.9)}}
.pinm--flag .pinm__dot,.pinm--home .pinm__dot{animation:pinglowflag 2.4s ease-in-out infinite}
@keyframes pinglowflag{
  0%,100%{box-shadow:0 0 0 4px rgba(200,169,106,.34),0 0 16px rgba(227,201,143,.8)}
  50%{box-shadow:0 0 0 7px rgba(200,169,106,.2),0 0 26px rgba(227,201,143,1)}}

/* ===== src/styles/components/hall-badge.css ===== */
/* =========================================================
   HALL-BADGE
   -------------------------------------------------------
   사업관 뱃지 — 히어로에서 "지금 어느 관인지" 알려 주는 알약.
   ======================================================= */

.hall-badge{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem 1.1rem;margin-bottom:1.6rem;
  border:1px solid var(--line);border-radius:100px;
  background:rgba(11,10,8,.45);backdrop-filter:blur(8px);
  font-size:.66rem;font-weight:700;letter-spacing:.22em;color:var(--gold-2);
}
.hall-badge::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--gold-2);box-shadow:0 0 10px currentColor}

/* ===== src/styles/components/hall-cta.css ===== */
/* =========================================================
   HALL-CTA
   -------------------------------------------------------
   사업관 CTA 띠 — 페이지 하단에서 다른 관·문의로 보내는 밴드.
   ======================================================= */

/* 사업관 CTA — 관 하단에서 다른 관·문의로 보내는 띠 */
.hallcta{border-top:1px solid var(--line);background:var(--bg-2)}
.hallcta__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,8vw,6.5rem) 2rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem}
.hallcta__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.3}
.hallcta__actions{display:flex;gap:.9rem;flex-wrap:wrap}

/* ===== src/styles/components/lang-switch.css ===== */
/* =========================================================
   LANG-SWITCH
   -------------------------------------------------------
   언어 변경 드롭다운 — KRDS '언어 변경' 컴포넌트 규격.
   ======================================================= */

.lang{position:relative}

.lang__btn{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  color:var(--cream-dim);background:transparent;cursor:pointer;
  border:1px solid var(--line);border-radius:100px;
  padding:.42rem .85rem;
  transition:color .35s var(--ease),border-color .35s var(--ease),
             background .35s var(--ease);
}
.lang__btn:hover{color:var(--cream);border-color:var(--gold);
  background:rgba(200,169,106,.08)}
.lang__btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

.lang__globe{width:15px;height:15px;flex:none;fill:none;
  stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;color:var(--gold)}
.lang__current{white-space:nowrap;letter-spacing:.01em}
.lang__caret{width:7px;height:7px;flex:none;margin-left:.05rem;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .35s var(--ease)}
.lang.is-open .lang__caret{transform:translateY(1px) rotate(-135deg)}

.lang__menu{
  position:absolute;top:calc(100% + .6rem);right:0;z-index:130;
  min-width:190px;max-height:min(70vh,420px);overflow-y:auto;
  list-style:none;padding:.4rem;
  background:rgba(17,16,16,.97);backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.lang__menu[hidden]{display:none}

.lang__opt{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.6rem .8rem;border-radius:9px;
  font-size:.88rem;color:var(--cream-dim);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.lang__opt:hover{background:rgba(244,239,228,.07);color:var(--cream)}
.lang__opt:focus-visible{outline:2px solid var(--gold-2);outline-offset:-2px}
.lang__opt.is-current{color:var(--gold-2)}
.lang__opt.is-current::after{content:"";width:13px;height:7px;flex:none;
  border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-3px) rotate(-45deg)}

/* 푸터 안에서는 좀 더 조용하게, 목록은 위로 펼침 */
.lang--footer .lang__menu{top:auto;bottom:calc(100% + .6rem);right:50%;
  transform:translateX(50%)}
.lang--footer .lang__btn{font-size:.78rem}

/* 모바일 패널 안에서는 버튼을 가득 채우고 목록을 아래로 */
@media (max-width:880px){
  .lang--nav{width:100%}
  .lang--nav .lang__btn{width:100%;justify-content:flex-start;
    padding:.7rem .9rem;border-radius:10px;font-size:.95rem}
  .lang--nav .lang__caret{margin-left:auto}
  .lang--nav .lang__menu{position:static;margin-top:.5rem;width:100%;
    max-height:none;box-shadow:none;background:rgba(244,239,228,.04)}
}

/* ===== src/styles/components/i18n-helpers.css ===== */
/* =========================================================
   I18N-HELPERS
   -------------------------------------------------------
   번역문 미니 문법이 만들어내는 요소들([br] · {{묶음}} 등).
   ======================================================= */

@media (max-width:600px){ br.lb{display:none} }
@media (max-width:899px){ br.lb-lg{display:none} }
.nw{white-space:nowrap}

/* 사전이 로드되기 전 원문(한국어)이 번쩍이는 것을 막습니다.
   각 HTML <head> 의 부트스트랩 스니펫이 이 속성을 붙였다 뗍니다.
   스크립트가 실패해도 1.2초 뒤 자동 해제되므로 백지가 되지 않습니다. */
html[data-i18n-pending] body{visibility:hidden}

/* ===== src/styles/sections/hero.css ===== */


.hero{position:relative;height:100svh;min-height:640px;display:flex;
  align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{transform:scale(1.12);will-change:transform;filter:saturate(105%)}
.hero__overlay{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 30%,rgba(11,10,8,.25),rgba(11,10,8,.78) 70%),
    linear-gradient(180deg,rgba(11,10,8,.55) 0%,rgba(11,10,8,.2) 40%,rgba(11,10,8,.92) 100%);}
.hero__content{position:relative;z-index:2;max-width:920px;padding:0 1.5rem}
.hero__eyebrow{font-size:.8rem;letter-spacing:.42em;color:var(--gold-2);
  font-weight:600;margin-bottom:2rem}
.hero__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(2.5rem,6.4vw,5.4rem);line-height:1.12;letter-spacing:-.02em}
.hero__title .line{display:block}
.hero__title em{font-family:var(--serif);font-style:italic;font-weight:500}
.hero__sub{margin:2rem auto 0;max-width:640px;color:var(--cream-dim);
  font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.8}
.hero__sub strong{color:var(--gold-2);font-weight:600}
.hero__cta{margin-top:2.6rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero__scroll{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.hero__scroll-line{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);
  position:relative;overflow:hidden}
.hero__scroll-line::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;
  background:var(--gold-2);animation:scrollDown 2.2s var(--ease) infinite}
@keyframes scrollDown{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}
.hero__scroll-text{font-size:.62rem;letter-spacing:.3em;color:var(--cream-dim)}

/* ===== src/styles/sections/intro.css ===== */
/* =========================================================
   INTRO
   -------------------------------------------------------
   인트로 — 선언문 + 2단 본문 + 숫자 지표.
   ======================================================= */

.intro{padding:clamp(6rem,12vw,11rem) 2rem;max-width:var(--maxw);margin:0 auto}
.intro__statement{font-family:var(--headline);font-weight:400;
  font-size:clamp(1.8rem,4.6vw,3.6rem);line-height:1.32;letter-spacing:-.02em;
  margin-bottom:3.5rem}
.intro__statement span{display:block}
.intro__statement em{font-family:var(--serif)}
.intro__cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:920px;
  margin-left:auto}
.intro__cols p{color:var(--cream-dim);font-size:1.02rem}
.intro__stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.5rem;margin-top:5rem;border-top:1px solid var(--line);padding-top:3rem}
.intro__stats li{display:flex;flex-direction:column;gap:.4rem}
.intro__stats .num{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.8rem);
  font-weight:500;color:var(--gold-2);line-height:1}
.intro__stats .lbl{font-size:.85rem;color:var(--cream-dim);letter-spacing:.02em}

/* ===== src/styles/sections/story.css ===== */
/* =========================================================
   STORY
   -------------------------------------------------------
   스토리 — 배경이 고정(sticky)된 채 글이 지나가는 섹션.
   ======================================================= */

.story{position:relative}
.story__pin{position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden}
.story__bg{position:absolute;inset:-10% 0;z-index:0;will-change:transform}
.story__bg img{filter:brightness(.55) saturate(.95)}
.story__bg-overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,10,8,.92) 0%,rgba(11,10,8,.6) 45%,rgba(11,10,8,.25) 100%)}
.story__text{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding:6rem 2rem;width:100%}
.story__text>*{max-width:600px}
.story__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(2.2rem,5.5vw,4.4rem);line-height:1.18;margin-bottom:2rem}
.story__title em{font-family:var(--serif);font-style:italic}
.story__body{color:var(--cream-dim);font-size:1.05rem;margin-bottom:1.3rem}

/* ===== src/styles/sections/terroir.css ===== */
/* =========================================================
   TERROIR
   -------------------------------------------------------
   테루아 — 산지 지도와 포도 품종 카드.
   ======================================================= */

.terroir{padding:clamp(6rem,12vw,11rem) 2rem;max-width:var(--maxw);margin:0 auto}
.terroir__head{max-width:760px;margin-bottom:4rem}
.terroir__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(2rem,5vw,3.6rem);line-height:1.2;margin-bottom:1.8rem}
.terroir__title em{font-family:var(--serif);font-style:italic}
.terroir__lead{color:var(--cream-dim);font-size:1.05rem}
.terroir__map{position:relative;border-radius:18px;overflow:hidden;height:clamp(320px,46vw,560px);
  border:1px solid var(--line);margin-bottom:5rem}
.terroir__map img{filter:brightness(.7) saturate(.9);transition:transform 1.4s var(--ease)}
.terroir__map:hover img{transform:scale(1.05)}
.terroir__pins{position:absolute;inset:0}
.pin{position:absolute;transform:translate(-50%,-50%);color:var(--cream);
  font-size:.82rem;font-weight:600;letter-spacing:.05em;display:flex;align-items:center;gap:.5rem;
  background:rgba(11,10,8,.55);padding:.4rem .8rem;border-radius:100px;
  border:1px solid var(--line);backdrop-filter:blur(6px);white-space:nowrap}
.pin i{width:8px;height:8px;border-radius:50%;background:var(--gold-2);
  box-shadow:0 0 0 0 rgba(200,169,106,.7);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(200,169,106,.6)}
  100%{box-shadow:0 0 0 14px rgba(200,169,106,0)}}

.grapes{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.grape{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.grape:hover{transform:translateY(-6px);border-color:rgba(200,169,106,.45)}
.grape__img{height:230px;overflow:hidden}
.grape__img img{transition:transform 1.2s var(--ease);filter:saturate(.95)}
.grape:hover .grape__img img{transform:scale(1.08)}
.grape__info{padding:1.8rem}
.grape__pct{font-family:var(--serif);font-size:2rem;color:var(--gold-2);font-weight:500}
.grape__info h3{font-family:var(--headline);font-weight:600;font-size:1.4rem;margin:.3rem 0 .8rem}
.grape__info h3 small{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1rem;color:var(--cream-dim);margin-left:.4rem}
.grape__info p{color:var(--cream-dim);font-size:.96rem}

/* ===== src/styles/sections/signature.css ===== */
/* =========================================================
   SIGNATURE
   -------------------------------------------------------
   시그니처 — 대표 제품 1종을 좌우 2단으로 크게 보여 주는 섹션.
   ======================================================= */

.signature{position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  min-height:100svh;align-items:stretch;overflow:hidden}
.signature__media{position:relative;overflow:hidden}
.signature__media img{filter:brightness(.8) saturate(1.05);transform:scale(1.1);will-change:transform}
.signature__panel{background:var(--bg-3);display:flex;flex-direction:column;
  justify-content:center;padding:clamp(3rem,7vw,7rem)}
.signature__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1.15;margin:.4rem 0}
.signature__en{font-family:var(--serif);font-style:italic;color:var(--gold-2);
  font-size:1.2rem;margin-bottom:1.8rem}
.signature__body{color:var(--cream-dim);font-size:1.04rem;margin-bottom:2.2rem;max-width:520px}
.spec{display:grid;gap:1rem;margin-bottom:2.4rem;max-width:520px}
.spec div{display:grid;grid-template-columns:80px 1fr;gap:1.2rem;padding-bottom:1rem;
  border-bottom:1px solid var(--line)}
.spec dt{font-size:.78rem;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;
  padding-top:.15rem}
.spec dd{color:var(--cream);font-size:.98rem}

/* ===== src/styles/sections/heritage.css ===== */
/* =========================================================
   HERITAGE
   -------------------------------------------------------
   선별 기준 — 번호가 붙은 4장 카드.
   ======================================================= */

.heritage{padding:clamp(6rem,12vw,11rem) 2rem;max-width:var(--maxw);margin:0 auto}
.heritage__head{text-align:center;margin-bottom:4rem}
.heritage__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(2rem,5vw,3.6rem)}
.heritage__title em{font-family:var(--serif);font-style:italic}
.heritage__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.hcard{border:1px solid var(--line);border-radius:16px;padding:2.2rem 1.8rem;
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.hcard:hover{transform:translateY(-6px);border-color:rgba(200,169,106,.45)}
.hcard__no{font-family:var(--serif);font-size:2.4rem;color:var(--gold-deep);font-weight:500;
  display:block;margin-bottom:1rem}
.hcard h3{font-family:var(--headline);font-weight:600;font-size:1.3rem;margin-bottom:.9rem}
.hcard p{color:var(--cream-dim);font-size:.95rem}

/* ===== src/styles/sections/instagram.css ===== */
/* =========================================================
   INSTAGRAM
   -------------------------------------------------------
   인스타그램 피드 — 최근 게시물 그리드.
   ======================================================= */

.insta{padding:clamp(6rem,12vw,11rem) 2rem;max-width:var(--maxw);margin:0 auto;text-align:center}
.insta__head{max-width:680px;margin:0 auto 3rem}
.insta__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(1.7rem,4vw,2.8rem);margin-bottom:1.2rem;word-break:keep-all}
.insta__lead{color:var(--cream-dim);font-size:1.02rem}
.insta__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-bottom:2.6rem}
.insta__tile{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);display:block}
.insta__tile img{transition:transform 1.1s var(--ease),filter .5s var(--ease);filter:saturate(.96)}
.insta__tile:hover img{transform:scale(1.1)}
.insta__ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;text-align:center;padding:.6rem;
  font-size:.62rem;letter-spacing:.02em;color:var(--cream);
  background:linear-gradient(180deg,rgba(11,10,8,.1),rgba(11,10,8,.78));
  opacity:0;transition:opacity .4s var(--ease)}
.insta__tile:hover .insta__ov{opacity:1}
.insta__ov svg{width:26px;height:26px;fill:var(--gold-2)}
.insta__more{margin:0 auto}

@media (max-width:880px){
  .insta__grid{grid-template-columns:repeat(3,1fr)}
  .insta__ov{opacity:1;background:linear-gradient(180deg,rgba(11,10,8,0) 55%,rgba(11,10,8,.7))}
  .insta__ov svg{display:none}
}
@media (max-width:480px){
  .insta__grid{grid-template-columns:repeat(2,1fr)}
}

/* ===== src/styles/sections/contact.css ===== */
/* =========================================================
   CONTACT
   -------------------------------------------------------
   문의 — 폼과 연락처 정보.
   ======================================================= */

.contact{padding:clamp(6rem,12vw,11rem) 2rem;background:var(--bg-2);
  border-top:1px solid var(--line)}
.contact__inner{max-width:760px;margin:0 auto;text-align:center}
.contact__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(2rem,5vw,3.4rem);margin-bottom:1.4rem}
.contact__lead{color:var(--cream-dim);margin-bottom:3rem}
.contact__form{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;text-align:left;margin-bottom:3rem}
.field{position:relative}
.field--full{grid-column:1/-1}
.field input,.field textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--line);padding:1.5rem 0 .7rem;color:var(--cream);
  font-family:var(--sans);font-size:1rem;transition:border-color .4s var(--ease)}
.field textarea{resize:vertical;min-height:80px}
.field label{position:absolute;left:0;top:1.4rem;color:var(--cream-dim);
  pointer-events:none;transition:.35s var(--ease);font-size:1rem}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  top:0;font-size:.72rem;letter-spacing:.12em;color:var(--gold)}
/* 허니팟 — 사람 눈에 안 보이는 미끼 칸. display:none 은 일부 봇이
   걸러내므로 화면 밖으로 밀어냅니다. (index.html 의 .field--hp) */
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact__form .btn{grid-column:1/-1;justify-self:center}
.contact__form .btn[disabled]{opacity:.5;pointer-events:none}
.contact__hint{grid-column:1/-1;text-align:center;font-size:.9rem;color:var(--gold-2);min-height:1.2em}
.contact__info{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:3rem}
.contact__item{display:flex;flex-direction:column;gap:.4rem;font-size:1rem;color:var(--cream);
  transition:color .35s var(--ease)}
.contact__item span{font-size:.68rem;letter-spacing:.2em;color:var(--gold);font-weight:600}
.contact__item:hover{color:var(--gold-2)}

/* ===== src/styles/layout/site-head.css ===== */
/* =========================================================
   SITE-HEAD
   -------------------------------------------------------
   사이트 헤더 — 그룹 공통 2단 구조.
   1단 로고·사업관 전환·그룹 메뉴·언어 / 2단 현재 관의 앵커 메뉴.
   ======================================================= */

:root{
  --gnb-h:58px;               /* 1단 높이 */
  --lnb-h:46px;               /* 2단 높이 */
  --head-h:calc(var(--gnb-h) + var(--lnb-h));
}

.site-head{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),
             border-color .5s var(--ease);
  border-bottom:1px solid transparent;
  background:linear-gradient(180deg,rgba(11,10,8,.72),rgba(11,10,8,0));
}
.site-head.scrolled{
  background:rgba(11,10,8,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
/* 히어로가 없는 페이지(비전·구성원·와인상세·404)는 처음부터 불투명 */
.site-head--solid{
  background:rgba(11,10,8,.88);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}

.site-head__bar{max-width:var(--maxw);margin:0 auto;padding:0 2rem}

/* ---------- 로고 락업 ---------- */
/* ---------- 로고 마크 ----------
   assets/logo/vb-mark.svg · 원본 비율 204:170.
   reset.css 의 img 전역 규칙(width:100% · object-fit:cover)을 되돌립니다. */
.brand-mark{
  flex:none;display:block;
  width:auto;height:30px;object-fit:contain;
}

.site-head__logo{grid-area:logo;display:flex;align-items:center;gap:.75rem;
  height:var(--gnb-h)}
.site-head__logo-text{display:flex;flex-direction:column;line-height:1.05}
.site-head__logo-name{font-family:var(--sans);font-weight:800;font-size:1.02rem;
  letter-spacing:.01em;color:var(--cream);white-space:nowrap}
.site-head__logo-sub{font-size:.5rem;font-weight:700;letter-spacing:.24em;
  color:var(--gold-deep);white-space:nowrap;transition:opacity .4s var(--ease)}
.site-head.scrolled .site-head__logo-sub{opacity:.55}

/* ---------- 1단 · 사업관 전환 ---------- */
.gnb-div{grid-area:div;display:flex;align-items:center;gap:.35rem}
.gnb-div__link{display:flex;flex-direction:column;gap:.12rem;line-height:1.1;
  padding:.42rem .9rem;border-radius:9px;border:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease)}
.gnb-div__ko{font-size:.86rem;font-weight:600;color:var(--cream-dim);
  transition:color .35s var(--ease);white-space:nowrap}
.gnb-div__en{font-size:.52rem;font-weight:700;letter-spacing:.2em;color:var(--gold-deep)}
.gnb-div__link:hover{background:rgba(244,239,228,.05)}
.gnb-div__link:hover .gnb-div__ko{color:var(--cream)}
.gnb-div__link.is-current{background:rgba(200,169,106,.1);border-color:var(--line)}
.gnb-div__link.is-current .gnb-div__ko{color:var(--gold-2)}
.gnb-div__link.is-current .gnb-div__en{color:var(--gold)}

/* ---------- 1단 · 그룹 메뉴 ---------- */
.gnb-corp{grid-area:corp;display:flex;align-items:center;gap:1.5rem}
.gnb-corp a{font-size:.82rem;font-weight:500;color:var(--cream-dim);
  position:relative;transition:color .35s var(--ease);white-space:nowrap}
.gnb-corp a::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;
  background:var(--gold);transition:width .4s var(--ease)}
.gnb-corp a:hover{color:var(--cream)}
.gnb-corp a:hover::after{width:100%}
.gnb-corp a.is-current{color:var(--gold-2)}

.gnb-lang{grid-area:lang;display:flex;align-items:center}

/* ---------- 2단 · 관별 메뉴 ---------- */
.lnb{grid-area:lnb;display:flex;align-items:center;gap:2rem;
  height:var(--lnb-h);border-top:1px solid rgba(200,169,106,.14)}
.lnb__label{font-size:.62rem;font-weight:700;letter-spacing:.22em;
  color:var(--gold-deep);white-space:nowrap}
.lnb__menu{display:flex;gap:1.9rem;overflow-x:auto;scrollbar-width:none}
.lnb__menu::-webkit-scrollbar{display:none}
.lnb__menu a{font-size:.85rem;font-weight:500;color:var(--cream-dim);
  position:relative;white-space:nowrap;transition:color .35s var(--ease)}
.lnb__menu a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:var(--gold);transition:width .4s var(--ease)}
.lnb__menu a:hover{color:var(--cream)}
.lnb__menu a:hover::after{width:100%}

/* ---------- 햄버거 ---------- */
.site-head__toggle{grid-area:burger;display:none;flex-direction:column;gap:5px;
  background:none;border:0;cursor:pointer;padding:8px;z-index:120}
.site-head__toggle span{width:24px;height:2px;background:var(--cream);
  transition:.4s var(--ease)}

/* ---------- 데스크톱 배치 ---------- */
@media (min-width:881px){
  .site-head__body{display:contents}
  .site-head__bar{
    display:grid;
    grid-template-columns:auto 1fr auto auto;
    grid-template-areas:
      "logo div corp lang"
      "lnb  lnb lnb  lnb";
    column-gap:2rem;
  }
  .gnb-div{justify-self:end}
  /* 관별 메뉴가 없는 페이지(그룹 홈·비전·구성원)는 2단을 아예 만들지 않음 */
  .site-head--single .site-head__bar{grid-template-areas:"logo div corp lang"}
}

/* ---------- 모바일: 같은 요소를 패널로 재배치 ---------- */
@media (max-width:880px){
  .site-head__bar{display:flex;align-items:center;justify-content:space-between;
    padding:0 1.2rem}
  .site-head__toggle{display:flex}
  .site-head__logo-name{font-size:.94rem;letter-spacing:0}

  .site-head__body{
    position:fixed;inset:0 0 0 auto;width:min(86vw,340px);
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:5.2rem 1.5rem 2.4rem;overflow-y:auto;
    background:rgba(11,10,8,.97);backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-left:1px solid var(--line);
    transform:translateX(100%);transition:transform .5s var(--ease);
    z-index:110;
  }
  .site-head.is-open .site-head__body{transform:none}
  .site-head.is-open .site-head__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-head.is-open .site-head__toggle span:nth-child(2){opacity:0}
  .site-head.is-open .site-head__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* 패널 안 순서: 사업관 → 관별 메뉴 → 그룹 메뉴 → 언어 변경 (KRDS 권장 배치) */
  .gnb-div {order:1;flex-direction:column;gap:.5rem;margin-bottom:1.6rem}
  .lnb     {order:2;flex-direction:column;align-items:flex-start;gap:1.05rem;
            height:auto;padding:1.5rem 0;border-top:1px solid var(--line)}
  .gnb-corp{order:3;flex-direction:column;align-items:flex-start;gap:1.05rem;
            padding:1.5rem 0;border-top:1px solid var(--line)}
  .gnb-lang{order:4;padding-top:1.5rem;border-top:1px solid var(--line)}

  .gnb-div__link{padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px}
  .gnb-div__ko{font-size:1.02rem}
  .lnb__label{display:none}
  .lnb__menu{flex-direction:column;gap:1.05rem;overflow:visible}
  .lnb__menu a,.gnb-corp a{font-size:1.05rem}
}



/* 히어로가 없는 페이지의 상단 여백 확보용 */
.page-offset{padding-top:var(--head-h)}

/* ===== src/styles/layout/page-head.css ===== */
/* =========================================================
   PAGE-HEAD
   -------------------------------------------------------
   페이지 헤더 — 히어로가 없는 페이지(비전·구성원)의 상단.
   ======================================================= */

.phead{
  position:relative;overflow:hidden;
  padding:calc(var(--head-h) + 5.5rem) 2rem 4.5rem;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 100% at 78% -20%,rgba(200,169,106,.13),transparent 62%),
    linear-gradient(180deg,var(--bg-3),var(--bg));
}
.phead__inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
.phead__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.16;margin:.4rem 0 1.2rem}
.phead__lead{max-width:720px;color:var(--cream-dim);font-size:1.04rem;line-height:1.9}
.phead__crumb{display:flex;align-items:center;gap:.5rem;font-size:.72rem;
  letter-spacing:.16em;color:var(--gold-deep);margin-bottom:.4rem}
.phead__crumb a{color:var(--gold-deep);transition:color .3s var(--ease)}
.phead__crumb a:hover{color:var(--gold-2)}
@media (max-width:600px){
  .phead{padding:calc(var(--head-h) + 3.2rem) 1.4rem 3rem}
}

/* ===== src/styles/layout/footer.css ===== */
/* =========================================================
   FOOTER
   -------------------------------------------------------
   푸터 — 기본형(가운데)과 그룹형 4단 확장, 사업자 정보, 법정 음주 경고.
   ======================================================= */

.footer{padding:4rem 2rem 3rem;border-top:1px solid var(--line);text-align:center}
.footer__inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;
  align-items:center;gap:1.2rem}
.footer__brand{display:flex;align-items:center;gap:.8rem;font-family:var(--serif);
  font-size:1.3rem;letter-spacing:.18em;color:var(--cream)}
.footer__brand .brand-mark{height:34px}
.footer__desc{color:var(--cream-dim);font-size:.95rem}
.footer__nav{display:flex;gap:1.8rem;flex-wrap:wrap;justify-content:center}
.footer__nav a{font-size:.9rem;color:var(--cream-dim);transition:color .3s var(--ease)}
.footer__nav a:hover{color:var(--gold-2)}
.footer__legal{color:#6f6a5e;font-size:.78rem;line-height:1.7;margin-top:.6rem}

.footer--corp{text-align:left;padding:5rem 2rem 3rem}
.footer--corp .footer__inner{align-items:stretch;gap:0}

.footer__top{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;
  padding-bottom:2.6rem;border-bottom:1px solid var(--line)}
.footer__brand-text{display:flex;flex-direction:column;line-height:1.1}
.footer__brand-name{font-family:var(--sans);font-weight:800;font-size:1.1rem;letter-spacing:.01em}
.footer__brand-sub{font-family:var(--sans);font-size:.5rem;font-weight:700;
  letter-spacing:.24em;color:var(--gold-deep)}
.footer--corp .footer__desc{margin-left:auto;font-size:.88rem;text-align:right}

.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;
  padding:2.6rem 0}
.footer__col{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.footer__col-title{font-family:var(--sans);font-size:.6rem;font-weight:700;
  letter-spacing:.24em;color:var(--gold);text-transform:uppercase}
.footer__col a{font-size:.9rem;color:var(--cream-dim);transition:color .3s var(--ease)}
.footer__col a:hover{color:var(--gold-2)}
.footer__col--lang{align-items:flex-start}

.footer--corp .footer__legal{margin-top:0;padding-top:2rem;
  border-top:1px solid var(--line);text-align:left}

/* 사업자 정보 — 대표이사·주소·대표전화 한 줄 */
.footer__biz{display:flex;flex-wrap:wrap;gap:.35rem 1.6rem;
  padding-top:1.8rem;border-top:1px solid var(--line);
  color:var(--cream-dim);font-size:.82rem;line-height:1.8}
.footer__biz a{color:var(--cream-dim);transition:color .3s var(--ease)}
.footer__biz a:hover{color:var(--gold-2)}
.footer--corp .footer__biz + .footer__warning{margin-top:1.4rem}

@media (max-width:880px){
  .footer__cols{grid-template-columns:repeat(2,1fr);gap:2rem}
  .footer--corp .footer__desc{margin-left:0;text-align:left;width:100%}
}
@media (max-width:520px){
  .footer--corp{padding:3.5rem 1.4rem 2.4rem}
  .footer__cols{grid-template-columns:1fr;gap:1.8rem}
}

/* 열이 세 개인 변형 — 사업관 열이 없는 와인관 단독 배포본의 푸터.
   (좁은 화면 규칙을 덮지 않도록 넓은 화면에서만 적용합니다) */
@media (min-width:881px){
  .footer__cols--3{grid-template-columns:repeat(3,1fr)}
}

.footer__warning{
  margin-top:.6rem;
  color:var(--cream-dim);
  font-size:.8rem;line-height:1.75;
  padding:.9rem 1.1rem;
  border:1px solid var(--line);border-radius:10px;
  background:rgba(244,239,228,.04);
}
.footer--corp .footer__warning{margin-top:2rem}
.footer--corp .footer__legal{margin-top:1rem;padding-top:0;border-top:0}

/* 대만 — 시행세칙이 요구하는 대비색 독립 영역 */
html[lang="zh-Hant"] .footer__warning{
  color:var(--cream);font-weight:600;letter-spacing:.02em;
  border-color:var(--gold);
  background:rgba(200,169,106,.12);
}

/* ===== src/styles/pages/group.css ===== */
/* =========================================================
   GROUP
   -------------------------------------------------------
   그룹 홈(index.html) — 사업 부문·지표 밴드·티저·채널·메종 목록·FAQ.
   ======================================================= */

.divisions{padding:clamp(5rem,10vw,9rem) 2rem;max-width:var(--maxw);margin:0 auto}
.divisions__head{text-align:center;margin-bottom:clamp(2.4rem,5vw,4rem)}
.divisions__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(2rem,4.6vw,3.4rem);margin-bottom:1.1rem}
.divisions__lead{max-width:760px;margin:0 auto;color:var(--cream-dim);line-height:1.9}

.divisions__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.dvn{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(400px,46vw,560px);padding:2.4rem;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;isolation:isolate;
  transition:transform .6s var(--ease),border-color .6s var(--ease);
}
.dvn:hover{transform:translateY(-6px);border-color:var(--gold)}
.dvn__bg{position:absolute;inset:0;z-index:-2}
.dvn__bg img{transition:transform 1.6s var(--ease)}
.dvn:hover .dvn__bg img{transform:scale(1.06)}
.dvn__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,10,8,.35) 0%,rgba(11,10,8,.82) 62%,rgba(11,10,8,.95) 100%)}
.dvn__no{position:absolute;top:2rem;left:2.4rem;font-family:var(--serif);
  font-size:.78rem;letter-spacing:.28em;color:var(--gold)}
.dvn__en{font-size:.62rem;font-weight:700;letter-spacing:.26em;color:var(--gold-2)}
.dvn__name{font-family:var(--headline);font-weight:500;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.2;margin:.5rem 0 .9rem}
.dvn__desc{color:var(--cream-dim);font-size:.98rem;line-height:1.85;max-width:44ch}
.dvn__meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin:1.6rem 0 1.4rem;
  padding-top:1.4rem;border-top:1px solid rgba(200,169,106,.2)}
.dvn__meta div{display:flex;flex-direction:column;gap:.2rem}
.dvn__meta dt{font-size:.6rem;font-weight:700;letter-spacing:.18em;color:var(--gold-deep)}
.dvn__meta dd{font-family:var(--serif);font-size:1.5rem;color:var(--cream)}
.dvn__go{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
  font-size:.9rem;font-weight:600;color:var(--gold-2)}
.dvn__go::after{content:"→";transition:transform .4s var(--ease)}
.dvn:hover .dvn__go::after{transform:translateX(5px)}

.dvn--spirits{--gold:var(--silver);--gold-2:var(--silver-2);--gold-deep:var(--silver-3)}
@media (max-width:880px){
  .divisions__grid{grid-template-columns:1fr}
  .dvn{min-height:420px;padding:1.8rem}
  .dvn__no{top:1.5rem;left:1.8rem}
}

.glance{border-block:1px solid var(--line);background:var(--bg-2)}
.glance__inner{max-width:var(--maxw);margin:0 auto;
  padding:clamp(3rem,6vw,4.5rem) 2rem}
.glance__tag{text-align:center}
.glance__grid{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);
  gap:2rem 1.5rem;margin-top:2.4rem}
.glance__grid li{display:flex;flex-direction:column;gap:.45rem;align-items:center;
  text-align:center;position:relative}
.glance__grid li+li::before{content:"";position:absolute;left:-.75rem;top:12%;
  height:76%;width:1px;background:var(--line)}
.glance__num{font-family:var(--serif);font-size:clamp(2.2rem,4.4vw,3.4rem);
  font-weight:500;color:var(--gold-2);line-height:1}
.glance__lbl{font-size:.82rem;color:var(--cream-dim);line-height:1.5}
@media (max-width:880px){
  .glance__grid{grid-template-columns:repeat(3,1fr);gap:2.2rem 1rem}
  .glance__grid li+li::before{display:none}
}
@media (max-width:520px){
  .glance__grid{grid-template-columns:repeat(2,1fr)}
}

.gteaser{max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,10vw,9rem) 2rem;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.gteaser__card{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:2rem;min-height:340px;padding:2.4rem;border:1px solid var(--line);
  border-radius:20px;background:linear-gradient(160deg,var(--bg-3),var(--bg));
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.gteaser__card:hover{border-color:var(--gold);transform:translateY(-5px)}
.gteaser__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.25;margin:.5rem 0 .9rem}
.gteaser__desc{color:var(--cream-dim);line-height:1.85;font-size:.98rem}
.gteaser__go{display:inline-flex;align-items:center;gap:.5rem;
  font-size:.88rem;font-weight:600;color:var(--gold-2)}
.gteaser__go::after{content:"→";transition:transform .4s var(--ease)}
.gteaser__card:hover .gteaser__go::after{transform:translateX(5px)}
@media (max-width:880px){.gteaser{grid-template-columns:1fr}}

.pchan{max-width:var(--maxw);margin:0 auto;padding:0 2rem clamp(5rem,10vw,9rem);
  text-align:center}
.pchan__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;margin-top:2.2rem;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pchan__item{background:var(--bg);padding:2rem 1rem;display:grid;place-items:center;
  min-height:110px;font-family:var(--serif);font-size:1.02rem;letter-spacing:.12em;
  color:var(--cream-dim);transition:color .4s var(--ease),background .4s var(--ease)}
.pchan__item:hover{color:var(--gold-2);background:var(--bg-2)}
.pchan__note{margin-top:1.2rem;font-size:.78rem;color:#6f6a5e}

.maisons{max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,10vw,9rem) 2rem}
.maisons__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.4rem;margin-bottom:2.4rem}
.maisons__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.2}
.maisons__lead{max-width:56ch;color:var(--cream-dim);line-height:1.9;font-size:.98rem}

/* 부문 필터 — .cfilter 와 같은 조작감을 유지 */
.mfilter{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.8rem}
.mfilter__btn{font-family:var(--sans);font-size:.82rem;font-weight:600;
  color:var(--cream-dim);background:transparent;border:1px solid var(--line);
  border-radius:100px;padding:.5rem 1.1rem;cursor:pointer;
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.mfilter__btn:hover{color:var(--cream);border-color:var(--gold)}
.mfilter__btn.is-active{color:#1c1304;background:linear-gradient(135deg,var(--gold-2),var(--gold));
  border-color:transparent}

.maisons__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.maison{background:var(--bg);padding:1.9rem 1.5rem;min-height:172px;
  display:flex;flex-direction:column;gap:.5rem;
  transition:background .45s var(--ease)}
.maison:hover{background:var(--bg-2)}
.maison.is-hidden{display:none}
.maison__div{font-size:.55rem;font-weight:700;letter-spacing:.2em;color:var(--gold-deep)}
.maison__name{font-family:var(--serif);font-size:1.24rem;line-height:1.25;color:var(--cream);
  letter-spacing:.02em}
.maison__meta{font-size:.8rem;color:var(--cream-dim);line-height:1.6;margin-top:auto}
.maison__since{font-family:var(--serif);font-style:italic;color:var(--gold)}
.maison--flag{background:linear-gradient(160deg,rgba(200,169,106,.12),var(--bg) 70%)}
.maison--flag .maison__div{color:var(--gold-2)}
.maison--own{background:linear-gradient(160deg,rgba(197,203,214,.12),var(--bg) 70%)}
.maison--own .maison__div{color:var(--silver)}
.maison--own .maison__since{color:var(--silver)}

@media (max-width:1080px){.maisons__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.maisons__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){
  .maisons{padding:3.5rem 1.4rem}
  .maisons__grid{grid-template-columns:1fr}
  .maison{min-height:0;padding:1.5rem 1.3rem}
}

.faq{background:var(--bg-2);border-block:1px solid var(--line)}
.faq__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,10vw,9rem) 2rem;
  display:grid;grid-template-columns:minmax(240px,.8fr) 1.6fr;gap:clamp(2rem,5vw,5rem);
  align-items:start}
.faq__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.2;margin-bottom:1rem}
.faq__lead{color:var(--cream-dim);line-height:1.9;font-size:.96rem}
.faq__list{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.faq__item{background:var(--bg)}
.faq__q{width:100%;display:flex;align-items:flex-start;gap:1rem;text-align:left;
  padding:1.3rem 1.5rem;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--cream);
  line-height:1.6;transition:color .3s var(--ease)}
.faq__q:hover{color:var(--gold-2)}
.faq__q::after{content:"";flex:none;width:11px;height:11px;margin-left:auto;
  margin-top:.35rem;border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);
  transform:rotate(45deg);transition:transform .4s var(--ease)}
.faq__item.is-open .faq__q::after{transform:rotate(-135deg)}
.faq__no{flex:none;font-family:var(--serif);font-size:.9rem;color:var(--gold-deep);
  margin-top:.15rem}
.faq__a{padding:0 1.5rem 1.4rem 3.4rem;color:var(--cream-dim);line-height:1.9;
  font-size:.95rem}
.faq__a[hidden]{display:none}
@media (max-width:880px){
  .faq__inner{grid-template-columns:1fr;gap:2rem}
  .faq__a{padding-left:1.5rem}
}

/* 영어 화면에서는 국문/영문 병기가 같은 말이 두 번 나오는 셈이므로 영문 보조 라벨을 감춥니다.
   (프랑스어·독일어 등에서는 "Vins / WINE" 병기가 오히려 도움이 되므로 그대로 둡니다.) */
html[lang^="en"] .gnb-div__en,
html[lang^="en"] .dvn__en{display:none}

/* ===== src/styles/pages/wine-detail.css ===== */
/* =========================================================
   WINE-DETAIL
   -------------------------------------------------------
   와인 상세(wine.html) — 제품 헤더/테이스팅 노트/페어링,
   그리고 쿠퍼리 전용 '메종 이야기' 블록.
   ======================================================= */

.card__body{position:relative}
.card__more{margin-top:.9rem;font-size:.74rem;letter-spacing:.05em;color:var(--gold);
  opacity:.7;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.card:hover .card__more{opacity:1;transform:translateX(3px)}

/* solid nav for sub-pages */
.nav--detail{background:rgba(11,10,8,.82);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line)}

.wd{max-width:var(--maxw);margin:0 auto;padding:8.5rem 2rem 2rem}
.wd-hero{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.wd-figure{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  aspect-ratio:4/5;background:var(--bg-2)}
.wd-figure img{transition:transform 1.4s var(--ease)}
.wd-figure:hover img{transform:scale(1.04)}
.wd-figure__badge{position:absolute;top:1.1rem;left:1.1rem;font-size:.64rem;letter-spacing:.2em;
  font-weight:700;color:var(--gold-2);background:rgba(11,10,8,.7);padding:.45rem .9rem;
  border-radius:100px;border:1px solid var(--line);backdrop-filter:blur(6px)}

.wd-info{padding-top:.5rem}
.wd-info .section-tag{margin-bottom:1rem}
.wd-title{font-family:var(--headline);font-weight:600;font-size:2.5rem;line-height:1.2}
.wd-en{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.4rem;margin-top:.3rem}
.wd-lead{font-size:1.06rem;color:var(--cream-dim);line-height:1.8;margin-top:1.6rem;
  padding-top:1.6rem;border-top:1px solid var(--line)}

.wd-specs{list-style:none;margin-top:1.8rem;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.wd-specs li{background:var(--bg);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.25rem}
.wd-specs dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.wd-specs dd{font-size:.98rem;color:var(--cream)}

/* 바디·당도 눈금
   자료(제품 설명 PDF)가 1~5 단계로 표기하므로, 숫자만 적기보다
   같은 5칸 눈금으로 보여 주는 편이 원본에 더 가깝습니다. */
/* 빈 칸이 생기면 선 색(--line)이 그대로 드러나 회색 블록처럼 보입니다.
   빈 칸이 생기는 경우는 둘뿐이라 각각 한 줄씩 막아 둡니다.
     ① 항목이 홀수 → 마지막 하나가 왼쪽에 혼자 남습니다
     ② 마지막(수상·평가)이 두 칸을 쓰는데 그 앞이 홀수 자리 → 앞 항목이 혼자 남습니다 */
.wd-specs .is-wide{grid-column:1 / -1}
.wd-specs li:last-child:nth-child(odd){grid-column:1 / -1}
.wd-specs li:nth-last-child(2):has(+ li.is-wide:last-child:nth-child(even)){grid-column:1 / -1}
.wd-specs .is-meter dd{display:flex;align-items:center;min-height:1.5rem}
.wd-specs .meter{display:inline-flex;align-items:center;gap:.34rem}
.wd-specs .meter i{width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(200,169,106,.4)}
.wd-specs .meter i.on{border-color:transparent;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  box-shadow:0 0 8px rgba(200,169,106,.4)}
.wd-specs .meter b{margin-left:.45rem;font-size:.78rem;font-weight:600;
  letter-spacing:.06em;color:var(--cream-dim)}

/* 연출컷이 없는 와인은 배경이 지워진 병 사진을 씁니다 —
   4:5 틀에 맞춰 자르면 병이 끊기므로 통째로 담고,
   뒤에는 컬렉션 카드와 같은 타입별 배경을 깔아 줍니다. */
.wd-figure--bottle{--backdrop:url("../assets/images/wines/backdrops/red.webp");
  background:var(--backdrop) center/cover no-repeat var(--bg)}
.wd-figure--sparkling{--backdrop:url("../assets/images/wines/backdrops/sparkling.webp")}
.wd-figure--white{--backdrop:url("../assets/images/wines/backdrops/white.webp")}
.wd-figure--rose{--backdrop:url("../assets/images/wines/backdrops/rose.webp")}
.wd-figure--bottle::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 106%,rgba(200,169,106,.15),transparent 58%),
             linear-gradient(180deg,rgba(11,10,8,.36),rgba(11,10,8,.78))}
.wd-figure--bottle img{position:relative;z-index:1;
  width:auto;height:100%;max-width:62%;margin:0 auto;
  object-fit:contain;padding:2.6rem 0 2.2rem;
  filter:brightness(1.06) contrast(1.05) drop-shadow(0 20px 36px rgba(0,0,0,.82))}
.wd-figure--bottle::after{content:"";position:absolute;left:50%;bottom:8%;translate:-50% 0;
  width:46%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);pointer-events:none}

.wd-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.wd-tags li{font-size:.74rem;letter-spacing:.06em;color:var(--gold);
  border:1px solid var(--line);border-radius:100px;padding:.4rem .9rem}

.wd-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}

/* tasting / story body */
.wd-body{max-width:var(--maxw);margin:4.5rem auto 0;padding:0 2rem;
  display:grid;grid-template-columns:1.6fr 1fr;gap:3.5rem}
.wd-notes h2,.wd-aside h2{font-family:var(--headline);font-weight:600;font-size:1.5rem;
  margin-bottom:1.1rem}
.wd-notes p{color:var(--cream-dim);line-height:1.95;margin-bottom:1.1rem;font-size:1.02rem}
.wd-aside{border:1px solid var(--line);border-radius:16px;padding:1.8rem;height:fit-content;
  background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.wd-aside .pairing{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.8rem}
.wd-aside .pairing span{font-size:.86rem;color:var(--cream);border:1px solid var(--line);
  border-radius:100px;padding:.4rem .9rem;background:var(--bg)}
.wd-aside .src{font-size:.82rem;color:#6f6a5e;line-height:1.7;padding-top:1.4rem;
  border-top:1px solid var(--line)}
.wd-aside .src a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

/* prev / next + more */
.wd-more{max-width:var(--maxw);margin:5rem auto 0;padding:2.4rem 2rem 0;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.wd-more a{display:flex;flex-direction:column;gap:.25rem;color:var(--cream-dim);
  transition:color .3s var(--ease)}
.wd-more a:hover{color:var(--cream)}
.wd-more .lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.wd-more .nm{font-family:var(--headline);font-size:1.1rem}
.wd-more .next{text-align:right;margin-left:auto}

/* ---------------------------------------------------------
   MAISON — 상세 페이지 안의 메종 이야기 (쿠퍼리 전용)
   와인관에 있던 .story / .terroir / .signature / .quote 를
   그대로 감싸 쓰기 때문에, 여기서는 바깥 여백과 제목만 정합니다.
   --------------------------------------------------------- */
.wd-maison{margin-top:clamp(4rem,8vw,7rem);border-top:1px solid var(--line);
  padding-top:clamp(3rem,6vw,5rem)}
.wd-maison[hidden]{display:none}
.wd-maison__head{max-width:var(--maxw);margin:0 auto;padding:0 2rem}
.wd-maison__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.3}
/* 상세 페이지에서는 섹션 간 간격을 조금 좁힙니다 */
.wd-maison .story{margin-top:clamp(2.4rem,5vw,4rem)}
.wd-maison .terroir{padding-top:clamp(3rem,6vw,5rem)}
/* .signature 는 100svh 그리드라, 상세 페이지에서는 높이를 조금 낮춥니다 */
.wd-maison .signature{min-height:auto}
.wd-maison .quote{min-height:62svh}
@media (max-width:560px){
  .wd-maison__head{padding:0 1.2rem}
}

@media (max-width:900px){
  .wd-hero{grid-template-columns:1fr;gap:2rem}
  .wd-figure{aspect-ratio:1/1;max-width:520px}
  .wd-body{grid-template-columns:1fr;gap:2.2rem;margin-top:3rem}
  .wd-title{font-size:2rem}
}
@media (max-width:560px){
  .wd{padding:7rem 1.2rem 1rem}
  .wd-body{padding:0 1.2rem}
  .wd-specs{grid-template-columns:1fr}
  .wd-en{font-size:1.2rem}
}

.wd-type{display:inline-flex;align-items:center;gap:.5em;margin-left:.7rem;vertical-align:middle;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--cream);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  padding:.32rem .75rem;border-radius:100px}
.wd-type::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold-2)}
.wd-type--sparkling::before{background:#e9d49a;box-shadow:0 0 8px rgba(233,212,154,.9)}
.wd-type--white::before{background:#dfe1a6;box-shadow:0 0 8px rgba(223,225,166,.85)}
.wd-type--rose::before{background:#e6a6b6;box-shadow:0 0 8px rgba(230,166,182,.85)}
.wd-type--red::before{background:#bf4d57;box-shadow:0 0 8px rgba(191,77,87,.9)}

/* ===== src/styles/pages/vision.css ===== */
/* =========================================================
   VISION
   -------------------------------------------------------
   비전(vision.html).
   ======================================================= */

.vmission{max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,10vw,9rem) 2rem;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.vmission__statement{font-family:var(--headline);font-weight:400;
  font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.35;letter-spacing:-.02em}
.vmission__body p{color:var(--cream-dim);line-height:1.95;margin-bottom:1.2rem}
@media (max-width:880px){.vmission{grid-template-columns:1fr;gap:1.8rem}}

.vvalues{background:var(--bg-2);border-block:1px solid var(--line)}
.vvalues__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,10vw,9rem) 2rem}
.vvalues__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:2.6rem;background:var(--line);border:1px solid var(--line);
  border-radius:18px;overflow:hidden}
.vvalue{background:var(--bg);padding:2.2rem 1.8rem;display:flex;flex-direction:column;gap:.8rem}
.vvalue__no{font-family:var(--serif);font-size:2rem;color:var(--gold-deep);line-height:1}
.vvalue__en{font-size:.6rem;font-weight:700;letter-spacing:.22em;color:var(--gold)}
.vvalue h3{font-family:var(--headline);font-weight:600;font-size:1.2rem}
.vvalue p{color:var(--cream-dim);font-size:.94rem;line-height:1.8}
@media (max-width:1080px){.vvalues__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.vvalues__grid{grid-template-columns:1fr}}

/* ===== src/styles/pages/members.css ===== */
/* =========================================================
   MEMBERS
   -------------------------------------------------------
   구성원(members.html) — 대표이사 인사말과 조직도.
   ======================================================= */

/* ---------- 1) 인사말 ---------- */
.mgreet{max-width:var(--maxw);margin:0 auto;padding:clamp(4.5rem,9vw,8rem) 2rem 0}
.mgreet__inner{display:grid;grid-template-columns:minmax(230px,290px) 1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start}

.mgreet__side{position:sticky;top:calc(var(--head-h,72px) + 2rem);
  display:flex;flex-direction:column;align-items:flex-start}
.mgreet__portrait{width:100%;aspect-ratio:4/5;border:1px solid var(--line);
  border-radius:20px;overflow:hidden;display:grid;place-items:center;
  background:
    radial-gradient(90% 80% at 50% 12%,rgba(200,169,106,.16),transparent 62%),
    linear-gradient(170deg,var(--bg-3),var(--bg-2));
  margin-bottom:1.4rem}
/* 대표 사진이 준비되기 전까지의 자리표시자 — 로고 마크를 옅게 깔아 둡니다 */
.mgreet__mono{width:52%;height:auto;object-fit:contain;opacity:.55}
.mgreet__role{font-size:.62rem;font-weight:700;letter-spacing:.22em;color:var(--gold)}
.mgreet__name{font-family:var(--headline);font-weight:600;
  font-size:clamp(1.4rem,2.4vw,1.8rem);margin:.45rem 0 .15rem}
.mgreet__en{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1rem}

.mgreet__title{font-family:var(--headline);font-weight:500;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.35;margin-bottom:2rem}
.mgreet__lead{font-size:clamp(1.02rem,1.5vw,1.15rem);line-height:1.9;
  color:var(--cream);margin-bottom:1.5rem}
.mgreet__p{color:var(--cream-dim);font-size:1rem;line-height:2;margin-bottom:1.35rem}
.mgreet__p strong{color:var(--cream);font-weight:600}

.mgreet__sign{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.35rem;align-items:flex-end;text-align:right}
.mgreet__sign-role{font-size:.78rem;letter-spacing:.14em;color:var(--gold)}
.mgreet__sign-name{font-family:var(--headline);font-weight:600;
  font-size:clamp(1.15rem,2vw,1.4rem)}

@media (max-width:900px){
  .mgreet__inner{grid-template-columns:1fr;gap:2.2rem}
  .mgreet__side{position:static;flex-direction:row;align-items:center;gap:1.4rem;
    flex-wrap:wrap}
  .mgreet__portrait{width:132px;aspect-ratio:1/1;margin-bottom:0;border-radius:16px}
  .mgreet__sign{align-items:flex-start;text-align:left}
}

/* ---------- 2) 조직도 ---------- */
.morg{max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,10vw,9rem) 2rem}
.morg__lead{max-width:62ch;color:var(--cream-dim);font-size:1rem;line-height:1.9;
  margin-top:1.1rem}
.orgchart{margin-top:clamp(2.6rem,5vw,4rem)}
.orgchart__top{display:flex;justify-content:center}
.orgchart__stem{width:1px;height:2.8rem;margin:0 auto;background:var(--line)}

.orgnode{border:1px solid var(--line);border-radius:16px;text-align:center;
  background:linear-gradient(170deg,var(--bg-3),var(--bg));
  transition:border-color .5s var(--ease)}
.orgnode__role{font-size:.6rem;font-weight:700;letter-spacing:.22em;color:var(--gold)}
.orgnode__name{font-family:var(--headline);font-weight:600;font-size:1.15rem;
  margin:.4rem 0 .15rem}
.orgnode__en{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:.92rem}

.orgnode--ceo{padding:1.9rem 2.6rem;min-width:min(320px,90vw);position:relative}
.orgnode--ceo .orgnode__name{font-size:clamp(1.4rem,2.4vw,1.75rem)}
.orgnode__badge{display:inline-block;font-size:.55rem;font-weight:700;letter-spacing:.24em;
  color:var(--bg);background:linear-gradient(140deg,var(--gold-2),var(--gold-deep));
  border-radius:100px;padding:.35em 1em;margin-bottom:.9rem}

.orgchart__branches{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1.8rem}
.orgbranch{position:relative;padding-top:2.8rem}
/* 가로 바에서 각 부문으로 내려오는 세로선 */
.orgbranch::before{content:"";position:absolute;top:0;left:50%;width:1px;height:2.8rem;
  background:var(--line)}
/* 형제 노드를 잇는 가로 바 (마지막 열은 그리지 않음) */
.orgbranch:not(:last-child)::after{content:"";position:absolute;top:0;left:50%;
  width:calc(100% + 1.8rem);height:1px;background:var(--line)}
.orgbranch:hover .orgnode--div{border-color:var(--gold)}

.orgnode--div{padding:1.15rem 1.2rem;position:relative}
/* 부문 노드와 담당 목록을 잇는 세로선
   (.orgteam 은 overflow:hidden 이라 가상요소가 잘립니다 — 노드 쪽에 붙입니다) */
.orgnode--div::after{content:"";position:absolute;top:100%;left:50%;width:1px;height:1.4rem;
  background:var(--line)}
.orgteam{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  position:relative}
.orgteam__item{background:var(--bg);padding:1.4rem 1.3rem;display:flex;gap:1rem;
  align-items:flex-start;transition:background .4s var(--ease)}
.orgteam__item:hover{background:var(--bg-2)}
.orgteam__ph{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--bg-2);
  font-family:var(--serif);font-size:1rem;letter-spacing:.06em;color:var(--gold-2)}
.orgteam__role{font-size:.56rem;font-weight:700;letter-spacing:.2em;color:var(--gold)}
.orgteam__name{font-family:var(--headline);font-weight:600;font-size:1.02rem;
  margin:.3rem 0 .3rem}
.orgteam__desc{color:var(--cream-dim);font-size:.86rem;line-height:1.75}

@media (max-width:860px){
  .orgchart__branches{grid-template-columns:1fr;gap:0}
  /* 세로 배치에서는 가로 바 대신 위아래를 잇는 세로선만 남깁니다 */
  .orgbranch:not(:last-child)::after{display:none}
  .orgbranch{padding-top:2.2rem}
  .orgbranch::before{height:2.2rem}
  .orgbranch + .orgbranch{margin-top:2.2rem}
}

/* ===== src/styles/pages/not-found.css ===== */
/* =========================================================
   NOT-FOUND
   -------------------------------------------------------
   404 페이지(404.html).
   ======================================================= */

.nf{
  min-height:82vh;display:flex;align-items:center;justify-content:center;
  padding:7rem 2rem 5rem;text-align:center;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(200,169,106,.10),transparent 60%),
    var(--bg);
}
.nf__inner{max-width:640px;display:flex;flex-direction:column;align-items:center}
.nf__brand{
  display:flex;align-items:center;gap:.8rem;margin-bottom:3rem;
  font-family:var(--serif);font-size:1.15rem;letter-spacing:.18em;
  color:var(--cream-dim);transition:color .3s var(--ease);
}
.nf__brand:hover{color:var(--cream)}
.nf__code{
  font-family:var(--serif);font-weight:300;line-height:1;
  font-size:clamp(5rem,17vw,9.5rem);letter-spacing:.06em;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:.2rem 0 1.6rem;
}
.nf__title{
  font-family:var(--headline);font-weight:400;
  font-size:clamp(1.35rem,3.6vw,1.9rem);letter-spacing:-.02em;
  color:var(--cream);margin-bottom:1rem;
}
.nf__desc{color:var(--cream-dim);font-size:1rem;line-height:1.9}
.nf__actions{
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:2.6rem;
}
.nf__links{
  display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center;
  margin-top:3.2rem;padding-top:2.2rem;
  border-top:1px solid var(--line);width:100%;
}
.nf__links a{font-size:.9rem;color:var(--cream-dim);transition:color .3s var(--ease)}
.nf__links a:hover{color:var(--gold-2)}
@media (max-width:520px){
  .nf{padding:5rem 1.4rem 4rem}
  .nf__actions{width:100%;flex-direction:column}
  .nf__actions .btn{width:100%}
}

/* ===== src/styles/layout/responsive.css ===== */
/* =========================================================
   RESPONSIVE
   -------------------------------------------------------
   전역 반응형 — 위에서 정한 값을 화면 폭에 맞춰 덮어씁니다.
   ※ 반드시 마지막에서 두 번째로 불러올 것(미디어쿼리는 특이도를 올리지 않습니다).
   ======================================================= */

@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .heritage__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  .intro__cols{grid-template-columns:1fr;gap:1.5rem}
  .intro__stats{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem}
  .grapes{grid-template-columns:1fr;gap:1.4rem}
  .grape{display:grid;grid-template-columns:130px 1fr}
  .grape__img{height:100%}
  .signature{grid-template-columns:1fr}
  .signature__media{height:60vh}
  .story__bg-overlay{background:linear-gradient(180deg,rgba(11,10,8,.55),rgba(11,10,8,.9))}
}
@media (max-width:600px){
  .hero__content{padding:0 1.9rem}
  .hero__eyebrow{font-size:.58rem;letter-spacing:.2em;margin-bottom:1.3rem}
  .hero__title{font-size:clamp(1.5rem,6.2vw,2.2rem);line-height:1.22;letter-spacing:-.01em}
  .hero__sub{font-size:.86rem;line-height:1.7;margin-top:1.4rem}
  .hero__sub br{display:none}
  .hero__cta{margin-top:2rem}
  .intro__statement{font-size:clamp(1.5rem,6.6vw,2rem);line-height:1.4}
  .story__title{font-size:clamp(1.8rem,8vw,2.4rem)}
  .terroir__title,.collection__title,.heritage__title,.contact__title,
  .signature__title{font-size:clamp(1.7rem,7.4vw,2.3rem)}
  .quote__text{font-size:clamp(1.5rem,6.6vw,2rem)}
  .hero__cta{flex-direction:column;align-items:stretch}
  .cards{grid-template-columns:1fr}
  .heritage__grid{grid-template-columns:1fr}
  .contact__form{grid-template-columns:1fr}
  .contact__info{gap:1.6rem}
  .marquee__track span{font-size:1.1rem}
  .grape{grid-template-columns:1fr}
  .grape__img{height:200px}
  .intro__stats{grid-template-columns:1fr 1fr}
  .pin{font-size:.7rem;padding:.3rem .6rem}
}

/* ===== src/styles/base/typography-lang.css ===== */
/* =========================================================
   TYPOGRAPHY-LANG
   -------------------------------------------------------
   언어별 타이포그래피 — 9개 언어가 같은 레이아웃에서 자연스럽게 읽히도록.
   ※ html[lang] 접두사라 특이도가 높습니다. 항상 마지막에 불러옵니다.
   ======================================================= */

:root{ --headline:var(--kserif); }

html[lang^="en"],html[lang^="fr"],html[lang^="de"],
html[lang^="es"],html[lang^="it"]{
  --headline:"Cormorant Garamond",Georgia,"Times New Roman",serif;
}
html[lang^="ja"]{
  --headline:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --sans:"Hiragino Sans","Yu Gothic",YuGothic,Meiryo,"Noto Sans JP",sans-serif;
}
html[lang="zh-Hans"]{
  --headline:"Songti SC","Noto Serif SC","Source Han Serif SC",serif;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}
html[lang="zh-Hant"]{
  --headline:"Songti TC","Noto Serif TC","Source Han Serif TC",serif;
  --sans:"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
}

html[lang^="ko"] body{word-break:keep-all}
html[lang^="ja"] body,
html[lang^="zh"] body{word-break:normal;line-break:strict}
html[lang^="de"] body{hyphens:auto;-webkit-hyphens:auto}

/* 라틴 계열은 한국어보다 글자 수가 20~40% 많습니다.
   제목이 넘치지 않도록 큰 제목만 상한을 조금 낮춥니다. */
html[lang^="de"] .hero__title,
html[lang^="fr"] .hero__title,
html[lang^="es"] .hero__title{font-size:clamp(2.1rem,5.4vw,4.5rem)}
html[lang^="de"] .intro__statement,
html[lang^="fr"] .intro__statement,
html[lang^="es"] .intro__statement{font-size:clamp(1.6rem,4vw,3rem)}
html[lang^="de"] .gnb-div__ko,
html[lang^="fr"] .gnb-div__ko{font-size:.8rem}

/* 라틴 계열 제목은 Cormorant 특성상 자간을 조금 열어 주는 편이 낫습니다 */
html[lang^="en"] .hero__title,html[lang^="fr"] .hero__title,
html[lang^="de"] .hero__title,html[lang^="es"] .hero__title,
html[lang^="it"] .hero__title{letter-spacing:0}

/* CJK 제목은 자간을 좁히지 않습니다(글자가 붙어 보임) */
html[lang^="ja"] .hero__title,html[lang^="zh"] .hero__title,
html[lang^="ja"] .intro__statement,html[lang^="zh"] .intro__statement{letter-spacing:0}

/* 영문 대문자 섹션 태그는 CJK 에서 자간을 조금 줄입니다 */
html[lang^="ja"] .section-tag,html[lang^="zh"] .section-tag{letter-spacing:.22em}

/* 긴 제목의 "고아 줄" 방지 — 마지막 줄에 낱말 하나만 떨어지는 현상.
   로망스어(fr·it·es)는 같은 뜻을 20~40% 길게 쓰고,
   일본어는 지명·등급을 가타카나로 옮기느라 글자 수가 늘어납니다.
   두 경우 모두 제목 상한만 조금 낮추면 줄이 고르게 나뉩니다.
   ※ 390~1920px 실측(scripts 없음 · 개발용 하네스)으로 정한 값이니
      문구를 크게 바꿀 때는 다시 재 보세요. */
html[lang^="fr"] .terroir__title,
html[lang^="it"] .terroir__title,
html[lang^="es"] .terroir__title{font-size:clamp(1.7rem,4.2vw,2.95rem)}
html[lang^="ja"] .terroir__title{font-size:clamp(1.5rem,4vw,3.1rem)}
html[lang^="ja"] .signature__title{font-size:clamp(1.9rem,3.7vw,3rem)}