@charset "UTF-8";
/* ==========================================================================
   SHAMBHALA — 디자인 시안 2 "MIDNIGHT"
   Deep Forest + Champagne Gold  ·  다크 도미넌트 · 중앙축 타이포그래피
   (컬러 팔레트는 시안 1과 동일 — 아이보리 / 딥포레스트 / 샴페인골드)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --forest:#0D2A20;
  --forest-2:#123528;
  --forest-3:#173D2E;
  --forest-4:#215140;
  --bone:#F7F4ED;
  --bone-2:#EFEAE0;
  --ink:#14120E;

  --gold:#B08D4E;
  /* ↓ 테마 분기용 — 색상 변형은 이 블록만 덮어쓰면 됩니다 */
  --on-gold:#0D2A20;          /* 골드 배경 위 글자색 */
  --scrim-rgb:13,42,32;       /* 이미지·영상 스크림 */
  --deep-rgb:6,20,15;         /* 모달 배경 · 텍스트 그림자 */
  --gold-rgb:176,141,78;
  --gold2-rgb:201,169,106;
  --ink-rgb:20,18,14;         /* 밝은 헤더의 글자 · 경계선 */
  --bone-rgb:247,244,237;     /* 밝은 헤더 배경 */
  --gold-dk:#6F5525;          /* 밝은 배경 위 골드 (대비 확보) */
  --gold-dk2:#8A6A2C;
  --gold-2:#C9A96A;
  --gold-3:#E3D3AE;

  --w-90:rgba(255,255,255,.90);
  --w-64:rgba(255,255,255,.64);
  --w-44:rgba(255,255,255,.44);
  --w-28:rgba(255,255,255,.28);
  --ln:rgba(255,255,255,.10);
  --ln-2:rgba(255,255,255,.055);
  --ink-64:rgba(var(--ink-rgb),.62);
  --ink-42:rgba(var(--ink-rgb),.45);
  --ln-d:rgba(var(--ink-rgb),.13);
  --ln-d2:rgba(var(--ink-rgb),.08);

  --pad:clamp(20px,3.4vw,72px);
  --sec:clamp(96px,11.5vw,210px);

  --f-en:"Italiana","Cormorant Garamond",Garamond,serif;
  --f-dis:"Nanum Myeongjo","Noto Serif KR",serif;
  --f-num:"Cormorant Garamond",Garamond,serif;
  --f-bd:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Noto Sans KR","Malgun Gothic",sans-serif;

  --e:cubic-bezier(.22,1,.36,1);
  --e2:cubic-bezier(.65,0,.35,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--forest);color:var(--w-90);
  font-family:var(--f-bd);font-weight:350;font-size:16px;line-height:1.9;
  letter-spacing:-.012em;overflow-x:hidden;
  /* 한글이 '안내드립니 / 다.' 처럼 어절 중간에서 잘리지 않도록 */
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--gold);color:var(--on-gold)}
:focus-visible{outline:1px solid var(--gold-2);outline-offset:4px}

/* ---------- 3. Typography primitives ---------- */
.lbl{
  /* 가는 장식체(Italiana)는 작은 크기에서 흐리게 보여 또렷한 산세리프로 교체 */
  font-family:var(--f-bd);font-weight:600;font-size:clamp(13.5px,1.05vw,17px);
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-2);
  line-height:1.6;display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;
}
.lbl em{
  font-family:var(--f-bd);font-style:normal;font-weight:400;
  font-size:clamp(13px,.95vw,15px);letter-spacing:.01em;
  text-transform:none;color:var(--w-64);
}
.lbl--c{justify-content:center;text-align:center}
.lbl::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.65;transform:translateY(-.35em)}
.lbl--c::before{display:none}

.h2{
  font-family:var(--f-dis);font-weight:400;
  font-size:clamp(26px,3.55vw,62px);line-height:1.34;letter-spacing:-.045em;color:#fff;
  margin-top:clamp(20px,2vw,34px);
}
.h2 em{font-style:normal;color:var(--gold-2)}
.h2--c{text-align:center}
.h3{
  font-family:var(--f-dis);font-weight:400;
  font-size:clamp(21px,2.2vw,38px);line-height:1.4;letter-spacing:-.04em;color:#fff;
  margin-top:clamp(16px,1.5vw,26px);
}

.bd{
  margin-top:clamp(20px,1.9vw,32px);
  font-size:clamp(16px,1.14vw,19px);line-height:1.95;color:var(--w-64);font-weight:300;
  max-width:58ch;
}
.bd b{font-weight:500;color:#fff}
.bd--c{margin-left:auto;margin-right:auto;text-align:center;max-width:50ch}

.sec-open{
  padding-inline:var(--pad);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;position:relative;
}
.sec-open::before{
  content:"";position:absolute;left:50%;top:calc(-1 * clamp(40px,5vw,90px));
  width:1px;height:clamp(34px,4.4vw,78px);
  background:linear-gradient(180deg,transparent,var(--gold));opacity:.5;
}

/* 워드 마스크 */
.wd{display:inline-block;overflow:hidden;padding:.08em .03em .2em;margin:-.08em -.03em -.2em;vertical-align:bottom}
.wd>i{display:inline-block;font-style:normal;will-change:transform}

.ticks{margin-top:clamp(20px,1.9vw,32px);display:grid;gap:15px}
.ticks li{
  /* 같은 '본문' 역할이므로 .bd 와 크기 · 행간을 정확히 맞춥니다 */
  position:relative;padding-left:28px;font-size:clamp(16px,1.14vw,19px);
  line-height:1.95;color:var(--w-64);font-weight:300;
}
.ticks li::before{content:"";position:absolute;left:0;top:.78em;width:13px;height:1px;background:var(--gold)}
.ticks li b{font-weight:500;color:#fff}
.ticks li em{font-style:normal;font-size:.84em;color:var(--w-44)}

.chip{
  display:inline-block;font-family:var(--f-bd);font-size:12.5px;font-weight:600;
  letter-spacing:.1em;line-height:1;padding:6px 9px 5px;border:1px solid currentColor;
}
.chip--own{color:var(--gold-2)}
.chip--alli{color:var(--w-44)}

.disc{
  margin:clamp(36px,3.6vw,60px) var(--pad) 0;max-width:920px;
  display:grid;grid-template-columns:18px 1fr;gap:15px;align-items:start;
  font-size:clamp(14px,.98vw,16px);line-height:1.95;color:var(--w-64);font-weight:300;
}
.disc i{
  width:18px;height:18px;border:1px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-size:10px;color:var(--gold-2);margin-top:4px;
}
.disc b{color:var(--w-90);font-weight:400}

/* 라이닝 숫자 */
.fig__n,.plan__price b,.hp__idx,.wrow__n,.qa summary em,.rail em,.mnav__list em,
.hgal__head .lbl,.stk__cap,.hdr__tel,.ftr__tel,.form__fine{
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  height:54px;padding:0 32px;font-size:15.5px;font-weight:600;letter-spacing:.005em;
  border:1px solid transparent;position:relative;isolation:isolate;overflow:hidden;
  transition:color .55s var(--e),border-color .55s var(--e);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--gold-3);
  transform:scaleY(0);transform-origin:bottom;transition:transform .58s var(--e);
}
.btn:hover::after{transform:scaleY(1);transform-origin:top}
.btn--lg{height:64px;padding:0 38px;font-size:17px}
.btn--block{width:100%}

.ar{width:16px;height:1px;background:currentColor;position:relative;flex:0 0 auto;transition:width .5s var(--e)}
.ar::after{
  content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}
.btn:hover .ar{width:24px}

.btn--gold{background:var(--gold);color:#fff;border-color:var(--gold)}
/* 호버 채움을 어두운 골드로 — 흰 글자가 호버 중에도 그대로 읽힙니다 */
.btn--gold::after{background:var(--gold-dk2)}
.btn--gold:hover{color:#fff;border-color:var(--gold-dk2)}
.btn--ghost{border-color:var(--w-28);color:#fff}
.btn--ghost:hover{color:var(--on-gold);border-color:var(--gold-3)}
.btn--line{border-color:var(--ln);color:#fff}
.btn--line:hover{color:var(--on-gold);border-color:var(--gold-3)}

/* ---------- 5. Intro curtain ---------- */
.intro{
  position:fixed;inset:0;z-index:300;background:var(--forest);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
}
.intro__mark{display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden}
.intro__logo{
  font-family:var(--f-en);font-size:clamp(26px,3.4vw,50px);letter-spacing:.4em;
  color:#fff;text-indent:.4em;
}
.intro__tag{font-size:9.5px;letter-spacing:.42em;color:var(--gold-2);text-indent:.42em}
.intro__meter{width:min(220px,42vw);height:1px;background:var(--ln);overflow:hidden}
.intro__meter i{display:block;height:100%;width:0;background:var(--gold-2)}
.intro__num{
  font-family:var(--f-num);font-size:13px;letter-spacing:.24em;color:var(--w-44);
  display:flex;align-items:baseline;gap:2px;
}
.intro__num em{font-style:normal;font-size:10px}

/* ---------- 7. Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:120;height:82px;
  display:flex;align-items:center;gap:clamp(18px,3vw,56px);
  padding-inline:var(--pad);
  transition:height .45s var(--e),background .5s var(--e),border-color .5s var(--e);
  border-bottom:1px solid transparent;
}
.hdr__logo{display:flex;flex-direction:column;line-height:1;margin-right:auto}
.hdr__logo-en{font-family:var(--f-en);font-weight:600;font-size:22px;letter-spacing:.3em;color:#fff;text-indent:.3em}
/* GOLF & RESORT 는 SHAMBHALA 폭 기준 가운데.
   text-indent 는 자간 때문에 끝에 남는 여백을 상쇄해 시각적 중심을 맞춰 줍니다. */
.hdr__logo-kr{font-size:9.5px;font-weight:600;letter-spacing:.28em;margin-top:6px;color:rgba(255,255,255,.72);text-indent:.7em;text-align:center}
.hdr__nav{display:flex;gap:clamp(14px,1.7vw,32px)}
.hdr__nav a{
  font-family:var(--f-bd);font-size:14.5px;font-weight:500;letter-spacing:.015em;
  color:rgba(255,255,255,.94);text-shadow:0 1px 10px rgba(var(--deep-rgb),.5);
  position:relative;padding:5px 0;transition:color .4s var(--e);
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold-2);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e);
}
.hdr__nav a:hover{color:#fff}
.hdr__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr__right{display:flex;align-items:center;gap:clamp(12px,1.4vw,26px)}
.hdr__tel{
  font-family:var(--f-bd);font-weight:600;font-size:15px;letter-spacing:.01em;
  color:var(--gold-3);font-variant-numeric:lining-nums;text-shadow:0 1px 10px rgba(var(--deep-rgb),.5);
}
.hdr__cta{height:44px;padding:0 22px;font-size:14.5px;font-weight:600}
.hdr__burger{display:none;width:34px;height:34px;position:relative}
.hdr__burger span{
  position:absolute;left:6px;width:22px;height:1px;background:#fff;
  transition:transform .5s var(--e),opacity .3s;
}
.hdr__burger span:nth-child(1){top:14px}
.hdr__burger span:nth-child(2){top:20px}
.hdr.is-open .hdr__burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.hdr.is-open .hdr__burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.hdr.is-solid{
  height:66px;background:rgba(var(--bone-rgb),.985);backdrop-filter:blur(16px) saturate(1.1);
  border-bottom-color:rgba(var(--ink-rgb),.13);
}
/* 밝은 헤더일 때의 대비 보정 */
.hdr.is-solid .hdr__logo-en{color:var(--ink)}
.hdr.is-solid .hdr__logo-kr{color:rgba(var(--ink-rgb),.64)}
.hdr.is-solid .hdr__nav a{color:var(--ink);text-shadow:none}
.hdr.is-solid .hdr__nav a:hover{color:var(--gold-dk2)}
.hdr.is-solid .hdr__nav a:hover{color:var(--ink)}
.hdr.is-solid .hdr__nav a::after{background:var(--gold)}
.hdr.is-solid .hdr__tel{color:var(--gold-dk);text-shadow:none}
.hdr.is-solid .hdr__burger span{background:var(--ink)}
.hdr.is-solid .hdr__cta{background:var(--forest);border-color:var(--forest);color:#fff}
.hdr.is-solid .hdr__cta::after{background:var(--gold)}
/* 골드로 채워지는 호버 — 다른 골드 버튼과 같이 흰 글자로 */
.hdr.is-solid .hdr__cta:hover{color:#fff;border-color:var(--gold)}
/* 모바일 메뉴가 열려 있는 동안은 어두운 오버레이 위이므로 흰색으로 되돌립니다 */
.hdr.is-open,.hdr.is-solid.is-open{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.hdr.is-open .hdr__burger span,.hdr.is-solid.is-open .hdr__burger span{background:#fff}
.hdr.is-open .hdr__logo-en,.hdr.is-solid.is-open .hdr__logo-en{color:#fff}
.hdr.is-open .hdr__logo-kr,.hdr.is-solid.is-open .hdr__logo-kr{color:var(--w-44)}
.hdr.is-open .hdr__tel,.hdr.is-solid.is-open .hdr__tel{color:var(--gold-3)}
.hdr.is-open .hdr__cta,.hdr.is-solid.is-open .hdr__cta{background:var(--gold);border-color:var(--gold);color:#fff}
.hdr.is-lift{opacity:0;pointer-events:none;transform:translateY(-14px)}

/* ---------- 8. Mobile nav ---------- */
.mnav{
  position:fixed;inset:0;z-index:110;background:var(--forest-2);
  padding:104px var(--pad) 36px;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--e);pointer-events:none;
  overflow-y:auto;
}
.mnav.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.mnav__list{display:flex;flex-direction:column}
.mnav__list a{
  display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;gap:12px;
  padding:15px 0;border-bottom:1px solid var(--ln-2);
}
.mnav__list em{font-family:var(--f-num);font-style:normal;font-size:12px;letter-spacing:.12em;color:var(--gold)}
.mnav__list b{font-family:var(--f-dis);font-size:19px;font-weight:400;letter-spacing:-.035em;color:#fff}
.mnav__list i{font-family:var(--f-bd);font-weight:500;font-style:normal;font-size:12.5px;letter-spacing:.12em;color:var(--w-44)}
.mnav__foot{display:flex;justify-content:space-between;align-items:baseline;padding-top:24px;font-size:12.5px;color:var(--w-44)}
.mnav__foot a{font-family:var(--f-num);font-size:20px;letter-spacing:.06em;color:var(--gold-2)}

/* ---------- 9. Section rail ---------- */
.rail{
  position:fixed;right:14px;top:50%;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;gap:13px;
  opacity:0;pointer-events:none;transition:opacity .6s var(--e);
}
.rail.is-on{opacity:1;pointer-events:auto}
.rail a{position:relative;width:40px;display:flex;align-items:center;justify-content:flex-end;gap:9px;height:16px}
.rail em{
  font-family:var(--f-num);font-style:normal;font-size:11px;letter-spacing:.1em;
  color:var(--w-28);transition:color .45s var(--e);
}
.rail span{
  position:absolute;right:calc(100% + 10px);top:50%;
  font-family:var(--f-en);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);opacity:0;transform:translateY(-50%) translateX(7px);
  transition:opacity .45s var(--e),transform .45s var(--e);white-space:nowrap;
}
.rail a::after{content:"";width:16px;height:1px;background:var(--w-28);transition:width .5s var(--e),background .45s var(--e)}
.rail a:hover em,.rail a.is-on em{color:#fff}
.rail a:hover span{opacity:1;transform:translateY(-50%)}
.rail a.is-on::after{width:24px;background:var(--gold-2)}
.rail a.is-on span{opacity:1;transform:translateY(-50%)}

/* ---------- 10. Hero (MONOGRAM — 상단 워드마크 · 하단 전폭 4분할 바) ---------- */
.hero{
  position:relative;min-height:100svh;display:block;overflow:hidden;background:var(--forest);
}
.hero__media{position:absolute;inset:0;z-index:0;will-change:clip-path}
.hero__video{width:100%;height:100%;object-fit:cover}
/* 글자가 놓이는 상·하단 '끝자락'만 눌러 주고, 화면 가운데는 영상을 전혀 건드리지 않습니다.
   (예전에는 아래쪽 스크림이 화면 절반까지 올라와 영상이 흐려 보였습니다) */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(var(--deep-rgb),.50) 0%,rgba(var(--deep-rgb),.13) 11%,rgba(var(--deep-rgb),0) 22%),
    linear-gradient(0deg,rgba(var(--deep-rgb),.74) 0%,rgba(var(--deep-rgb),.32) 10%,rgba(var(--deep-rgb),.05) 22%,rgba(var(--deep-rgb),0) 33%);
}
/* 필름 그레인은 영상 위에 노이즈를 얹는 레이어라 원본 화질을 그대로 깎아먹습니다.
   원본 화질 우선 정책에 따라 꺼 둡니다. (질감을 다시 원하시면 opacity 만 올리면 됩니다) */
.hero__grain{display:none}

/* 상단 중앙 워드마크 */
.hero__mark{
  position:absolute;left:0;right:0;top:clamp(24px,5vh,64px);z-index:4;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:clamp(120px,14vw,220px);pointer-events:none;
}
.hero__wm{
  font-family:var(--f-en);font-weight:400;
  font-size:clamp(38px,8.4vw,152px);line-height:1.02;letter-spacing:.02em;
  /* 스크림을 줄인 만큼, 글자 주변만 눌러 밝은 하늘 위에서도 읽히게 합니다.
     영상 전체를 어둡게 하지 않으므로 화질에는 영향이 없습니다. */
  color:#fff;
  text-shadow:0 1px 3px rgba(var(--deep-rgb),.5),0 2px 18px rgba(var(--deep-rgb),.6),0 2px 46px rgba(var(--deep-rgb),.45);
}
.hero__wm .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__wm .ln>i{display:block;font-style:normal;will-change:transform}
/* 발주사 로고 — assets/img/logo.svg 가 있을 때만 표시됩니다 */
.hero__logo{
  width:auto;height:clamp(40px,4.6vw,74px);margin-bottom:clamp(12px,1.6vh,24px);
  object-fit:contain;filter:drop-shadow(0 2px 20px rgba(var(--deep-rgb),.55));
}
/* 국문 핵심 카피 — 영문 이탤릭 대신 또렷하게, 크게 */
.hero__tag{
  margin-top:clamp(8px,1.2vh,18px);
  font-family:var(--f-bd);font-weight:500;
  font-size:clamp(15px,1.5vw,25px);line-height:1.5;letter-spacing:-.01em;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 4px rgba(var(--deep-rgb),.75),0 2px 24px rgba(var(--deep-rgb),.65);
}
.hero__tag i{font-style:normal;color:rgba(var(--gold2-rgb),.85);padding-inline:.3em}

/* 중하단 메시지 */
.hero__mid{
  position:absolute;left:0;right:0;bottom:clamp(132px,19vh,196px);z-index:4;
  text-align:center;padding:clamp(20px,3vh,38px) var(--pad);pointer-events:none;
  background:radial-gradient(58% 170% at 50% 56%,rgba(var(--deep-rgb),.5) 0%,rgba(var(--deep-rgb),.2) 46%,rgba(var(--deep-rgb),0) 76%);
}
.hero__k{
  font-family:var(--f-bd);font-weight:400;font-size:clamp(13.5px,1.1vw,17.5px);
  letter-spacing:.04em;color:rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(var(--deep-rgb),.8),0 1px 24px rgba(var(--deep-rgb),.75);
}
.hero__b{
  margin-top:clamp(6px,1vh,12px);
  font-family:var(--f-dis);font-weight:400;
  font-size:clamp(19px,2.2vw,38px);line-height:1.35;letter-spacing:-.04em;color:#fff;
  text-shadow:0 2px 5px rgba(var(--deep-rgb),.72),0 2px 30px rgba(var(--deep-rgb),.78);
}
.hero__b em{font-style:normal;color:var(--gold-3)}

/* 하단 전폭 4분할 바 — 좌우 패딩 없이 화면 100% 사용 */
.hero__bar{position:absolute;left:0;right:0;bottom:0;z-index:4}
.hero__rule{
  display:block;height:1px;background:rgba(255,255,255,.34);
  transform:scaleX(0);transform-origin:left;
}
.hero__bar ul{display:grid;grid-template-columns:repeat(4,1fr)}
.hero__bar li{border-left:1px solid rgba(255,255,255,.16)}
.hero__bar li:first-child{border-left:none}
.hero__bar a{
  display:grid;gap:6px;justify-items:center;text-align:center;
  padding:clamp(18px,2.6vh,32px) 10px clamp(20px,2.8vh,34px);
  transition:background .5s var(--e);
}
.hero__bar a:hover{background:rgba(255,255,255,.06)}
.hero__bar b{
  font-family:var(--f-bd);font-weight:500;font-size:clamp(14px,1.1vw,17.5px);
  letter-spacing:.01em;color:#fff;text-shadow:0 1px 3px rgba(var(--deep-rgb),.75),0 1px 18px rgba(var(--deep-rgb),.7);
}
.hero__bar em{
  font-style:normal;font-family:var(--f-bd);font-weight:500;font-size:clamp(11.5px,.92vw,14px);
  letter-spacing:.12em;color:rgba(255,255,255,.72);text-shadow:0 1px 3px rgba(var(--deep-rgb),.7);
}

/* ---------- 11. Manifesto (DRIFT BAND — 전폭 무한 롤링 이미지 띠) ---------- */
/* 배경은 인트로 커튼 · 히어로와 동일한 --forest */
.mani{padding:var(--sec) 0;text-align:center;position:relative;overflow:hidden;background:var(--forest)}

/* 좌우 패딩 없이 화면 100% 폭 — 띠는 양쪽 끝에서 잘려 흐릅니다 */
.band{overflow:hidden;width:100%}
.band ul{display:flex;width:max-content;will-change:transform}
.band li{
  flex:0 0 auto;width:clamp(190px,24vw,400px);
  padding-right:clamp(10px,1.2vw,20px);
}
.band img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--forest-2)}

.mani__mid{padding:clamp(48px,6vw,104px) var(--pad)}
.mani .lbl{justify-content:center}
.mani__txt{
  margin:clamp(24px,2.6vw,42px) auto 0;max-width:30ch;
  font-family:var(--f-dis);font-weight:400;
  font-size:clamp(22px,2.9vw,50px);line-height:1.46;letter-spacing:-.045em;color:#fff;
}
.mani__txt .wd>i{color:#fff}
.mani__sub{
  margin-top:clamp(18px,2vw,32px);
  font-size:clamp(14.5px,1.1vw,18px);letter-spacing:.02em;color:var(--w-64);font-weight:300;
}
.mani__sub b{font-weight:500;color:var(--gold-2)}

.figs{
  margin-top:clamp(48px,5.6vw,104px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ln-2);
}
.fig{
  padding:clamp(30px,3.4vw,56px) clamp(10px,1.4vw,26px);
  border-right:1px solid var(--ln-2);
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.fig:last-child{border-right:0}
.fig__n{
  display:flex;align-items:flex-end;justify-content:center;
  min-height:clamp(46px,5.6vw,104px);
  font-family:var(--f-num);font-weight:300;font-size:clamp(46px,5.6vw,104px);
  line-height:1;letter-spacing:-.03em;color:#fff;
}
.fig__n--kr{font-family:var(--f-dis);font-weight:400;font-size:clamp(30px,3.5vw,64px);letter-spacing:-.04em}
.fig em{
  font-family:var(--f-bd);font-style:normal;font-weight:400;
  font-size:clamp(13px,1vw,15.5px);font-weight:500;letter-spacing:.05em;color:var(--gold-2);margin-top:13px;
}
.fig__c{margin-top:14px;font-size:clamp(13.5px,.96vw,15.5px);color:var(--w-64);font-weight:300;text-align:center}

/* ---------- 12. Courses — pinned horizontal ---------- */
.hgal{background:var(--forest);padding-block:var(--sec) clamp(70px,7vw,120px);overflow:hidden}
.hgal__head{padding-inline:var(--pad);max-width:1000px}
.hgal__view{margin-top:clamp(46px,5vw,90px);position:relative}
.hgal__track{display:flex;width:max-content;padding-inline:var(--pad);gap:clamp(16px,1.8vw,34px);will-change:transform}

.hp{
  flex:0 0 auto;width:min(560px,82vw);
  background:var(--forest);border:1px solid var(--ln-2);
  padding:clamp(30px,3vw,52px);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  min-height:clamp(440px,52vh,580px);
}
.hp::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);opacity:.5;
}
.hp--alli::after{background:linear-gradient(90deg,var(--w-28),transparent);opacity:.4}
.hp__idx{
  font-family:var(--f-bd);font-weight:600;font-size:14px;letter-spacing:.14em;color:var(--gold-2);
  display:flex;align-items:baseline;gap:7px;
}
.hp__idx i{font-style:normal;font-size:12px;color:var(--w-44);letter-spacing:.1em}
.hp__country{
  font-family:var(--f-en);font-size:clamp(30px,3.6vw,62px);letter-spacing:.15em;
  color:rgba(255,255,255,.05);line-height:1;margin-top:auto;
  position:absolute;right:clamp(20px,2vw,40px);bottom:clamp(18px,1.8vw,32px);
  pointer-events:none;
}
.hp--own .hp__country{color:rgba(var(--gold2-rgb),.1)}
.hp__body{margin-top:clamp(22px,2.4vw,40px);position:relative;z-index:1}
.hp__body h3{
  font-family:var(--f-dis);font-weight:400;font-size:clamp(23px,2.2vw,37px);
  line-height:1.35;letter-spacing:-.04em;color:#fff;margin-top:16px;
}
.hp__en{font-family:var(--f-bd);font-weight:500;font-size:14px;letter-spacing:.1em;color:var(--w-64);margin-top:10px}
.hp__spec{margin-top:clamp(24px,2.4vw,38px);display:grid;gap:12px;padding-top:20px;border-top:1px solid var(--ln-2)}
.hp__spec>div{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:baseline}
.hp__spec dt{font-size:14px;color:var(--w-64)}
.hp__spec dd{font-size:clamp(15.5px,1.06vw,18px);color:#fff;font-weight:400}
.hp__spec dd em{font-style:normal;font-size:.84em;color:var(--gold-2)}
.hp__pts{margin-top:clamp(20px,2vw,32px);display:grid;gap:10px}
.hp__pts li{
  position:relative;padding-left:22px;font-size:clamp(14.5px,1vw,16.5px);
  line-height:1.8;color:var(--w-64);font-weight:300;
}
.hp__pts li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--gold);opacity:.8}
.hp__pts b{color:var(--gold-2);font-weight:500}

/* 코스 사진 보기 — 카드 하단 고정 */
.hp__more{
  margin-top:clamp(22px,2.2vw,34px);width:100%;
  display:flex;align-items:center;justify-content:center;gap:12px;
  height:54px;border:1px solid rgba(var(--gold-rgb),.5);
  font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--gold-2);
  transition:background .5s var(--e),color .5s var(--e),border-color .5s var(--e);
}
.hp__more:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.hp__more .ar{width:15px}
.hp__more:hover .ar{width:22px}

.hgal__bar{
  margin:clamp(28px,3vw,48px) var(--pad) 0;height:1px;background:var(--ln-2);position:relative;
}
.hgal__bar i{position:absolute;left:0;top:0;height:100%;width:26%;background:var(--gold-2);will-change:transform}

/* ---------- 13. Pocheon — pinned stack ---------- */
.stk{display:grid;grid-template-columns:52% 48%;background:var(--forest);position:relative}
.stk__media{position:relative;height:100svh;overflow:hidden;background:var(--forest-2)}
.stk__fig{position:absolute;inset:0;opacity:0;transition:opacity 1.05s var(--e)}
.stk__fig.is-on{opacity:1}
.stk__fig img{width:100%;height:100%;object-fit:cover}
.stk__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--scrim-rgb),.42) 0%,rgba(var(--scrim-rgb),0) 42%,rgba(var(--scrim-rgb),.5) 100%);
}
.stk__cap{
  position:absolute;left:var(--pad);bottom:clamp(26px,3vw,48px);z-index:2;
  font-family:var(--f-bd);font-weight:600;font-size:15px;letter-spacing:.14em;color:#fff;
  display:flex;align-items:baseline;gap:8px;
}
.stk__cap i{font-style:normal;font-size:12.5px;color:var(--w-44)}

.stk__txt{padding:0 clamp(28px,4.4vw,96px)}
.stk__blk{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(70px,9vh,130px);
  border-bottom:1px solid var(--ln-2);
}
.stk__blk:last-child{border-bottom:0}
.stk__blk .bd,.stk__blk .ticks{max-width:46ch}
/* 포천 — 네 블록의 제목 크기를 동일하게 맞춥니다.
   첫 블록만 섹션 대표 제목(.h2)이라 1.6배 컸습니다. 문서 구조상 h2 태그는 그대로 두고
   보이는 크기만 .h3 와 같은 값으로 맞춥니다. */
.stk__blk .h2{
  font-size:clamp(21px,2.2vw,38px);line-height:1.4;letter-spacing:-.04em;
  margin-top:clamp(16px,1.5vw,26px);
}

.stk__mo{display:none;overflow:hidden;margin-bottom:clamp(24px,3.4vw,38px)}
.stk__mo img{width:100%;height:clamp(230px,50vw,380px);object-fit:cover}

/* ---------- 14. Membership (한 화면에 비교되도록 압축) ---------- */
.mem{padding-block:clamp(72px,8.4vw,148px);background:var(--forest-2)}
/* 비교 · 정리 성격의 두 섹션(멤버십 · 핵심 강점)은 헤딩을 한 단계 낮춰
   본문이 한 화면 안에 들어오게 합니다 */
.mem .h2,.why .h2{font-size:clamp(24px,2.9vw,46px);line-height:1.3;margin-top:clamp(16px,1.6vw,24px)}
.mem .bd{margin-top:clamp(14px,1.4vw,20px);font-size:clamp(15.5px,1.06vw,18px);line-height:1.9;max-width:48ch}

.plans{
  margin:clamp(28px,3.2vw,54px) var(--pad) 0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,26px);
}
.plan{
  border:1px solid var(--ln-2);background:var(--forest);
  padding:clamp(22px,2.4vw,42px);position:relative;
  display:flex;flex-direction:column;
  transition:border-color .6s var(--e);
}
.plan:hover{border-color:var(--ln)}
.plan--hi{background:linear-gradient(180deg,var(--forest-3) 0%,var(--forest) 62%);border-color:rgba(var(--gold2-rgb),.28)}
.plan__flag{
  position:absolute;left:clamp(22px,2.2vw,42px);top:0;transform:translateY(-50%);
  background:var(--gold);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.1em;padding:6px 13px 5px;
}
.plan__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(14px,1.6vw,26px)}
.plan__kind{
  font-family:var(--f-bd);font-weight:700;font-size:clamp(19px,1.6vw,28px);letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-2);
}
.plan__price{display:flex;align-items:baseline;gap:7px;line-height:1}
.plan__price b{font-family:var(--f-num);font-weight:300;font-size:clamp(38px,3.6vw,62px);letter-spacing:-.03em;color:#fff;font-variant-numeric:lining-nums}
.plan__price em{font-style:normal;font-family:var(--f-dis);font-size:clamp(14px,1.05vw,18px);color:var(--w-64)}
.plan__vat{flex:1 0 100%;margin-top:8px;font-size:14px;color:var(--w-64);letter-spacing:.01em}

.plan__rows{margin-top:clamp(20px,2.2vw,34px);display:grid}
.plan__rows>div{
  display:grid;grid-template-columns:minmax(92px,30%) 1fr;gap:clamp(10px,1.2vw,22px);
  min-height:58px;padding:11px 0;border-top:1px solid var(--ln-2);align-items:center;
}
.plan__rows>div:last-child{border-bottom:1px solid var(--ln-2)}
.plan__rows dt{
  font-size:clamp(14px,.98vw,16px);color:var(--w-64);display:flex;flex-wrap:wrap;gap:0 7px;align-items:baseline;
}
.plan__rows dt span{
  font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--gold-2);
  border:1px solid rgba(var(--gold-rgb),.5);padding:2px 7px 1px;line-height:1.35;
}
.plan__rows dd{font-size:clamp(16px,1.14vw,19px);line-height:1.6;color:#fff;font-weight:400}
.plan__rows dd b{font-weight:500;color:var(--gold-2)}
.plan__rows dd em{display:block;font-style:normal;font-size:.8em;color:var(--w-64);margin-top:5px;line-height:1.55}
/* 두 카드의 CTA 버튼 위치를 아래로 맞춰 나란히 보이게 */
.plan__rows{margin-bottom:clamp(20px,2.2vw,34px)}
.plan .btn{margin-top:auto}

/* 두 상품이 같은 항목은 카드 밖으로 빼서 한 줄로 */
.both{
  margin:clamp(18px,2vw,32px) var(--pad) 0;
  border:1px solid var(--ln-2);background:var(--forest);
  padding:clamp(18px,2vw,28px) clamp(20px,2.2vw,34px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,38px);align-items:center;
}
.both__k{
  font-family:var(--f-bd);font-weight:700;font-size:clamp(14px,1.05vw,17px);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-2);white-space:nowrap;
}
.both ul{display:grid;grid-template-columns:repeat(4,1fr);gap:12px clamp(16px,2vw,34px)}
.both li{display:grid;gap:5px;min-width:0}
.both span{font-size:clamp(13px,.95vw,15px);letter-spacing:.02em;color:var(--w-64)}
.both b{font-size:clamp(15px,1.06vw,17.5px);line-height:1.6;font-weight:400;color:#fff}

.mem__fine{
  margin:clamp(18px,1.8vw,28px) var(--pad) 0;text-align:center;
  font-size:clamp(13.5px,.95vw,15.5px);line-height:1.95;color:var(--w-64);font-weight:300;
}
.mem__fine b{color:var(--w-64);font-weight:500}

/* ---------- 15. Why (네 항목이 한 화면에 들어오도록 압축) ---------- */
.why{padding-block:clamp(72px,8.4vw,148px);background:var(--forest)}
.wlist{margin:clamp(28px,3.2vw,54px) var(--pad) 0;border-top:1px solid var(--ln-2)}
.wrow{
  display:grid;grid-template-columns:74px minmax(200px,24%) 1fr auto;
  gap:clamp(18px,2.2vw,44px);align-items:center;
  padding:clamp(22px,2.5vw,42px) 0;border-bottom:1px solid var(--ln-2);
  position:relative;transition:padding-left .6s var(--e);
}
.wrow::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--e);
}
.wrow:hover{padding-left:20px}
.wrow:hover::before{transform:scaleY(1)}
.wrow__n{font-family:var(--f-num);font-size:clamp(22px,2vw,34px);font-weight:300;color:var(--gold-2);line-height:1;letter-spacing:.04em}
.wrow h3{font-family:var(--f-dis);font-weight:400;font-size:clamp(20px,1.75vw,30px);line-height:1.35;letter-spacing:-.04em;color:#fff}
.wrow p{font-size:clamp(15px,1.06vw,17.5px);line-height:1.9;color:var(--w-64);font-weight:300;max-width:56ch}
.wrow__k{font-family:var(--f-bd);font-weight:500;font-size:clamp(12.5px,.92vw,15px);letter-spacing:.14em;color:var(--w-44);white-space:nowrap}

/* ---------- 16. Lifestyle collage ---------- */
.life{padding-block:var(--sec) 0;background:var(--forest-2)}
.coll{
  margin-top:clamp(52px,5.6vw,100px);
  display:grid;grid-template-columns:repeat(12,1fr);gap:2px;
}
.coll figure{position:relative;overflow:hidden;background:var(--forest-3)}
.coll img{width:100%;height:100%;object-fit:cover;will-change:transform}
.coll figcaption{
  position:absolute;inset:auto 0 0 0;z-index:2;
  /* 밝은 사진(레스토랑 · 테라스) 위에서도 글씨가 읽힐 만큼 스크림을 두꾸롭게 · 높게 */
  padding:clamp(44px,4.4vw,72px) clamp(18px,2vw,34px) clamp(18px,2vw,32px);
  display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(180deg,
    rgba(var(--scrim-rgb),0) 0%,
    rgba(var(--scrim-rgb),.5) 38%,
    rgba(var(--scrim-rgb),.85) 68%,
    rgba(var(--scrim-rgb),.96) 100%);
}
.coll figcaption b{
  font-family:var(--f-dis);font-weight:400;font-size:clamp(15px,1.15vw,21px);
  letter-spacing:-.03em;color:#fff;text-shadow:0 1px 16px rgba(var(--deep-rgb),.7);
}
.coll figcaption span{
  font-size:clamp(11.5px,.78vw,13px);color:rgba(255,255,255,.62);font-weight:300;
  text-shadow:0 1px 12px rgba(var(--deep-rgb),.7);
}
.coll__a{grid-column:span 7;height:clamp(300px,34vw,600px)}
.coll__b{grid-column:span 5;height:clamp(300px,34vw,600px)}
.coll__c{grid-column:span 4;height:clamp(240px,26vw,450px)}
.coll__d{grid-column:span 4;height:clamp(240px,26vw,450px)}
.coll__e{grid-column:span 4;height:clamp(240px,26vw,450px)}

/* ---------- 17. FAQ ---------- */
.faq{
  padding:var(--sec) var(--pad);background:var(--forest);
  display:grid;grid-template-columns:minmax(260px,30%) 1fr;gap:clamp(36px,5vw,110px);
  align-items:start;
}
.faq__l{position:sticky;top:120px}
.faq__l .bd{margin-bottom:clamp(24px,2.4vw,38px)}
.faq__r{border-top:1px solid var(--ln-2)}
.qa{border-bottom:1px solid var(--ln-2)}
.qa summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr 18px;
  gap:14px;align-items:start;padding:clamp(20px,2vw,32px) 0;
  transition:color .45s var(--e);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary em{
  font-family:var(--f-bd);font-weight:600;font-style:normal;font-size:14.5px;letter-spacing:.1em;
  color:var(--gold-2);padding-top:.45em;
}
.qa summary span{
  font-family:var(--f-dis);font-weight:400;font-size:clamp(17.5px,1.3vw,24px);
  line-height:1.6;letter-spacing:-.038em;color:#fff;
}
.qa summary:hover span{color:var(--gold-2)}
.pm{position:relative;width:14px;height:14px;margin-top:.62em}
.pm::before,.pm::after{content:"";position:absolute;background:var(--gold-2);transition:transform .55s var(--e)}
.pm::before{left:0;top:6.5px;width:14px;height:1px}
.pm::after{left:6.5px;top:0;width:1px;height:14px}
.qa[open] .pm::after{transform:scaleY(0)}
.qa[open] summary span{color:var(--gold-2)}
.qa__a{overflow:hidden}
.qa__a p{
  padding:0 32px clamp(24px,2.4vw,36px) 58px;
  font-size:clamp(15px,1.08vw,17.5px);line-height:2;color:var(--w-64);font-weight:300;
}
.qa__a b{font-weight:500;color:#fff}
.qa__a a{color:var(--gold-2);border-bottom:1px solid currentColor}

@media (min-width:1281px){
  /* 우측 섹션 인덱스 레일이 펼쳐질 때 본문과 겹치지 않도록 */
  .faq{padding-right:calc(var(--pad) + 46px)}
  .wlist{margin-right:calc(var(--pad) + 52px)}
}

/* ---------- 18. Corporate (USE CASES) ---------- */
.corp{padding:var(--sec) var(--pad);background:var(--forest-2)}
.corp__hd{text-align:center;max-width:900px;margin-inline:auto}
.corp__hd .bd{max-width:52ch;margin-inline:auto}

.ucase{
  margin-top:clamp(32px,3.6vw,60px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,30px);
}
.ucase li{border:1px solid var(--ln-2);background:var(--forest);display:grid;align-content:start}
.ucase__img{display:block;overflow:hidden;background:var(--forest-3)}
.ucase__img img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform 1.1s var(--e)}
.ucase li:hover .ucase__img img{transform:scale(1.04)}
.ucase em{
  font-style:normal;font-family:var(--f-bd);font-weight:600;font-size:13.5px;letter-spacing:.14em;color:var(--gold-2);
  padding:clamp(18px,2vw,28px) clamp(18px,2vw,30px) 0;
}
.ucase b{
  font-family:var(--f-dis);font-weight:400;font-size:clamp(19px,1.62vw,27px);
  letter-spacing:-.035em;color:#fff;padding:10px clamp(18px,2vw,30px) 0;
}
.ucase__d{
  font-size:clamp(14.5px,1.02vw,16.5px);line-height:1.8;color:var(--w-64);font-weight:300;
  padding:12px clamp(18px,2vw,30px) clamp(20px,2.2vw,32px);
}

/* 요청 창구를 하나로 — CTA 한 개만 두고, 폼은 팝업에서 받습니다 */
.corp__cta{
  margin-top:clamp(30px,3.4vw,54px);max-width:820px;margin-inline:auto;
  border:1px solid var(--ln);background:rgba(var(--deep-rgb),.42);
  padding:clamp(28px,3.2vw,50px) clamp(22px,2.6vw,40px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.corp__cta .btn{margin-top:clamp(20px,2.2vw,32px);max-width:100%}
.corp__sub{margin-top:clamp(14px,1.6vw,22px);font-size:14px;color:var(--w-44);font-weight:300}
.btn--xl{
  height:76px;padding:0 clamp(26px,3.4vw,58px);
  font-size:clamp(15px,1.2vw,19px);font-weight:700;letter-spacing:-.015em;
}
.corp__k{
  text-align:center;font-size:clamp(15px,1.08vw,18px);line-height:1.9;color:var(--w-64);font-weight:300;
  padding-bottom:clamp(18px,2vw,28px);margin-bottom:clamp(18px,2vw,28px);border-bottom:1px solid var(--ln-2);
}
.corp__k b{font-weight:500;color:var(--gold-2)}
/* 국문 카피가 어색하게 끊기지 않도록 폭을 제한 */
.corp__k{max-width:42ch;margin-inline:auto;border-bottom:none;padding-bottom:0;margin-bottom:0}

/* ---------- 19. Forms ---------- */
.form{position:relative}
.form__t{
  /* 한글 제목이라 영문 디스플레이 서체 대신 본문용 명조로 — 자간도 정상 폭으로 */
  font-family:var(--f-dis);font-weight:400;
  font-size:clamp(18px,1.5vw,27px);letter-spacing:-.035em;line-height:1.35;
  color:#fff;
  padding-bottom:clamp(18px,1.8vw,28px);margin-bottom:clamp(20px,2vw,30px);
  border-bottom:1px solid var(--ln-2);
}
.form--main{background:rgba(var(--scrim-rgb),.72);backdrop-filter:blur(18px);border:1px solid var(--ln);padding:clamp(28px,3.2vw,54px)}

.fr{margin-bottom:clamp(18px,1.7vw,26px)}
.fr--half{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.5vw,24px)}
/* 항목명과 입력칸이 한 덩어리로 읽히도록 사이 간격을 좁혔습니다.
   (본문 줄간격 1.9 가 그대로 상속되면 글자 위아래로 여백이 크게 생깁니다) */
.fr label{display:block;font-size:14px;font-weight:500;letter-spacing:.02em;line-height:1.45;margin-bottom:4px;color:var(--w-64)}
.fr label i{font-style:normal;color:var(--gold-2)}
.fr label em{font-style:normal;opacity:.68}
.fr input[type=text],.fr input[type=tel],.fr input[type=email],.fr textarea{
  width:100%;padding:9px 2px;font-size:16.5px;font-weight:300;letter-spacing:-.01em;line-height:1.6;
  border-bottom:1px solid var(--ln);color:#fff;background:transparent;resize:none;
  transition:border-color .45s var(--e),box-shadow .45s var(--e);
}
.fr input::placeholder,.fr textarea::placeholder{color:var(--w-28);font-weight:300}
/* 밑줄형 입력칸은 '밑줄 색이 바뀌는 것' 자체가 포커스 표시입니다.
   여기에 브라우저 기본 포커스 테두리까지 겹치면 밑줄이 두 줄로 보여 어색하므로,
   테두리는 끄고 대신 밑줄을 두 배로 굵혀 포커스를 더 분명하게 보여줍니다.
   (box-shadow 로 그려 레이아웃이 밀리지 않습니다) */
.fr input:focus-visible,.fr textarea:focus-visible{outline:none}
.fr input:focus,.fr textarea:focus{
  border-bottom-color:var(--gold-2);
  box-shadow:0 1px 0 0 var(--gold-2);
}
.fr.is-err input,.fr.is-err textarea{border-bottom-color:#C86A4E;box-shadow:none}
.fr.is-err input:focus,.fr.is-err textarea:focus{box-shadow:0 1px 0 0 #C86A4E}
.fr.is-err label{color:#C86A4E}

.fc{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fc--4{grid-template-columns:repeat(4,1fr)}
.fc input{position:absolute;opacity:0;pointer-events:none}
.fc label{margin:0;cursor:pointer}
.fc span{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:14px 6px 13px;border:1px solid var(--ln);
  font-size:15.5px;font-weight:400;line-height:1.3;color:#fff;
  transition:all .45s var(--e);
}
.fc span em{font-style:normal;font-size:12.5px;color:var(--w-64)}
.fc label:hover span{border-color:var(--gold)}
.fc input:checked+span{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.fc input:checked+span em{color:rgba(var(--scrim-rgb),.7)}
.fc input:focus-visible+span{outline:1px solid var(--gold-2);outline-offset:2px}

.fa{
  display:flex;align-items:flex-start;gap:12px;
  margin:clamp(22px,2vw,32px) 0 clamp(18px,1.7vw,26px);
  font-size:14.5px;color:var(--w-64);font-weight:300;line-height:1.7;cursor:pointer;
}
.fa input{
  appearance:none;flex:0 0 auto;width:17px;height:17px;border:1px solid var(--ln);
  margin-top:3px;position:relative;transition:all .35s var(--e);cursor:pointer;
}
.fa input:checked{background:var(--gold);border-color:var(--gold)}
.fa input:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--on-gold);border-width:0 1.6px 1.6px 0;transform:rotate(42deg);
}
.fa.is-err input{border-color:#C86A4E}
.fa b{font-weight:500;color:var(--gold-2)}
.fa a{border-bottom:1px solid currentColor;opacity:.75}

.form__msg{margin-top:16px;font-size:15px;line-height:1.7;color:var(--gold-2);min-height:1px}
.form__msg.is-err{color:#C86A4E}
.form__fine{margin-top:16px;font-size:13.5px;line-height:1.8;color:var(--w-44);font-weight:300}
.form__fine span{opacity:.75}
.form.is-done{pointer-events:none}
.form__done{
  position:absolute;inset:0;z-index:5;background:var(--forest-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  text-align:center;padding:30px;animation:dn .75s var(--e) both;
}
.form--main .form__done{background:var(--on-gold)}
@keyframes dn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.form__done i{
  width:56px;height:56px;border:1px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;color:var(--gold-2);font-size:21px;font-style:normal;
}
.form__done b{font-family:var(--f-dis);font-weight:400;font-size:clamp(18px,1.5vw,26px);letter-spacing:-.035em;color:#fff}
.form__done p{font-size:14px;line-height:1.9;color:var(--w-44);font-weight:300}

/* ---------- 20. Contact ---------- */
.ct{position:relative;padding:var(--sec) var(--pad);overflow:hidden;background:var(--forest)}
.ct__bg{position:absolute;inset:0;z-index:0}
.ct__bg img{width:100%;height:112%;object-fit:cover;position:absolute;top:-6%;left:0}
.ct__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--scrim-rgb),.9) 0%,rgba(var(--scrim-rgb),.78) 42%,rgba(var(--scrim-rgb),.95) 100%);
}
.ct__in{
  position:relative;z-index:2;max-width:1120px;margin-inline:auto;
  display:grid;grid-template-columns:1fr minmax(400px,46%);gap:clamp(36px,4.6vw,90px);
  align-items:center;
}
.ct__hd{text-align:left}
.ct__hd .lbl{justify-content:flex-start}
.ct__hd .h2,.ct__hd .bd{text-align:left;margin-left:0}

/* ---------- 21. Footer ---------- */
.ftr{background:var(--forest-2);border-top:1px solid var(--ln-2);padding:0 var(--pad) clamp(28px,2.8vw,44px);overflow:hidden}
.ftr__big{padding-block:clamp(40px,5vw,86px) clamp(30px,3.4vw,56px);text-align:center;overflow:hidden}
.ftr__big span{
  font-family:var(--f-en);font-size:clamp(38px,10.5vw,180px);letter-spacing:.14em;
  line-height:1;color:rgba(255,255,255,.055);text-indent:.14em;display:block;white-space:nowrap;
}
.ftr__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px);
  padding-top:clamp(30px,3.2vw,50px);border-top:1px solid var(--ln-2);
}
.ftr__h{
  display:block;font-family:var(--f-bd);font-weight:600;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-2);margin-bottom:14px;
}
.ftr__col p{font-size:15px;line-height:1.95;color:var(--w-64);font-weight:300}
.ftr__tel{font-family:var(--f-num);font-size:clamp(20px,1.7vw,28px);letter-spacing:.05em;color:#fff}
.ftr__nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.ftr__nav a{font-size:14.5px;color:var(--w-64);transition:color .4s var(--e)}
.ftr__nav a:hover{color:var(--gold-2)}
.ftr__copy{
  margin-top:clamp(30px,3.2vw,52px);padding-top:clamp(20px,2vw,32px);border-top:1px solid var(--ln-2);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;
  font-size:12.5px;line-height:1.9;color:var(--w-44);font-weight:300;
}
.ftr__disc{max-width:72ch}

/* ---------- 22. Fixed CTA (모바일 하단 바) ---------- */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:100;display:none;
  grid-template-columns:1fr 1fr;background:var(--forest-3);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(101%);transition:transform .55s var(--e);
  border-top:1px solid var(--ln-2);
}
.mbar.is-on{transform:none}
html.modal-on .mbar.is-on{transform:translateY(101%)}
.mbar a{display:flex;align-items:center;justify-content:center;gap:8px;height:60px;font-size:16px;font-weight:500}
.mbar__tel{color:#fff;border-right:1px solid var(--ln-2)}
/* .mbar a 의 선택자 우선순위가 더 높아 굵기가 먹지 않던 것을 바로잡습니다 */
.mbar a.mbar__cta{background:var(--gold);color:#fff;font-weight:600;letter-spacing:-.01em}

/* ---------- 23. Modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none}
.modal.is-on{display:block}
.modal__bg{position:absolute;inset:0;background:rgba(var(--deep-rgb),.7);backdrop-filter:blur(6px);animation:fi .4s both}
@keyframes fi{from{opacity:0}to{opacity:1}}
.modal__box{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(580px,calc(100vw - 36px));max-height:min(82vh,720px);overflow:auto;
  background:var(--forest-2);border:1px solid var(--ln);padding:clamp(30px,3.4vw,54px);
  animation:mi .55s var(--e) both;
}
@keyframes mi{from{opacity:0;transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%)}}
.modal__x{position:absolute;right:16px;top:14px;width:36px;height:36px;font-size:15px;color:var(--w-44)}
.modal__box h3{font-family:var(--f-dis);font-weight:400;font-size:clamp(18px,1.5vw,25px);letter-spacing:-.035em;color:#fff;margin-bottom:26px}
.modal__box dl{display:grid;gap:16px}
.modal__box dt{font-family:var(--f-bd);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);margin-bottom:6px}
.modal__box dd{font-size:15.5px;line-height:1.85;color:var(--w-64);font-weight:300;padding-bottom:15px;border-bottom:1px solid var(--ln-2)}
.modal__note{margin-top:24px;font-size:13px;color:var(--w-44);font-weight:300}

/* ---------- 세로 스크롤바 ----------
   기본 회색 막대 대신 브랜드 톤의 골드 막대로.
   트랙 안쪽에 투명 테두리를 둬서, 넓은 트랙 위에 가는 막대가 떠 있는 것처럼 보이게 합니다.
   ※ 표준 속성 scrollbar-width 를 같이 쓰면 ::-webkit-scrollbar 의 폭 지정이 무시되므로,
     웹킷 계열(크롬 · 엣지 · 사파리)과 파이어폭스를 나눠서 적용합니다. */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:rgba(var(--deep-rgb),.5)}
::-webkit-scrollbar-thumb{
  background:rgba(var(--gold-rgb),.55);
  border:3.5px solid transparent;background-clip:content-box;border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--gold2-rgb),.9);background-clip:content-box}
::-webkit-scrollbar-thumb:active{background:var(--gold-2);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* 팝업 안쪽 — 어두운 카드 위라 트랙은 비우고 막대만 */
.modal__box::-webkit-scrollbar{width:12px}
.modal__box::-webkit-scrollbar-track{background:transparent;margin-block:16px}
.modal__box::-webkit-scrollbar-thumb{
  background:rgba(var(--gold-rgb),.5);
  border:3.5px solid transparent;background-clip:content-box;border-radius:99px;
}
.modal__box::-webkit-scrollbar-thumb:hover{background:rgba(var(--gold2-rgb),.85);background-clip:content-box}

/* 파이어폭스는 표준 속성만 지원합니다 */
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:rgba(var(--gold-rgb),.6) rgba(var(--deep-rgb),.5)}
  .modal__box{scrollbar-width:thin;scrollbar-color:rgba(var(--gold-rgb),.6) transparent}
}

/* 팝업 끝에서 뒤 페이지가 따라 밀리지 않게 */
.modal__box{overscroll-behavior:contain}

/* 폼이 들어가는 모달 (법인 제안서) */
.modal__box--wide{width:min(760px,calc(100vw - 28px));max-height:min(88vh,900px)}
.modal--form .modal__box{padding:clamp(26px,3vw,46px)}
.modal--form .lbl{margin-bottom:12px}
.modal--form .modal__box h3{
  font-size:clamp(22px,2vw,34px);margin-bottom:clamp(22px,2.4vw,34px);
  padding-bottom:clamp(18px,2vw,28px);border-bottom:1px solid var(--ln-2);
}
.form--pop .fr:last-of-type{margin-bottom:0}
.form--pop textarea{min-height:96px}

/* ---------- 25. 코스 사진 뷰어 ---------- */
.gal{position:fixed;inset:0;z-index:210;display:none}
.gal.is-on{display:block}
.gal__bg{position:absolute;inset:0;background:rgba(var(--deep-rgb),.975);animation:fi .35s both}
.gal__fig{
  /* 사진과 설명을 세로로 쌓습니다. 예전에는 설명이 absolute 라 세로가 긴 사진 위에 겹쳤습니다. */
  position:absolute;inset:clamp(54px,6.5vh,80px) clamp(86px,11.5vw,196px) clamp(30px,4vh,52px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2.2vh,26px);
}
.gal__fig img{
  max-width:100%;width:auto;height:auto;
  min-height:0;flex:0 1 auto;                /* 설명이 들어갈 자리를 남기고 줄어듭니다 */
  object-fit:contain;animation:galIn .5s var(--e) both;
}
@keyframes galIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.gal__cap{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;
  padding-inline:clamp(14px,4vw,60px);
}
.gal__cap b{
  font-family:var(--f-dis);font-weight:400;font-size:clamp(18px,1.5vw,26px);
  letter-spacing:-.035em;color:#fff;
}
.gal__cap span{font-size:clamp(13.5px,.98vw,16px);color:var(--w-64);font-weight:300}
.gal__cap em{
  font-style:normal;font-family:var(--f-bd);font-weight:600;font-size:13px;
  letter-spacing:.14em;color:var(--gold-2);margin-top:4px;
}
.gal__x{
  position:absolute;right:clamp(10px,2vw,26px);top:clamp(10px,2vh,24px);z-index:3;
  width:52px;height:52px;font-size:17px;color:var(--w-64);
  transition:color .4s var(--e);
}
.gal__x:hover{color:#fff}
.gal__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:clamp(48px,5vw,64px);height:clamp(48px,5vw,64px);
  display:grid;place-items:center;color:var(--w-64);
  border:1px solid var(--ln);background:rgba(var(--deep-rgb),.5);
  transition:color .4s var(--e),border-color .4s var(--e);
}
.gal__nav:hover{color:#fff;border-color:var(--gold)}
.gal__nav--prev{left:clamp(16px,4.4vw,92px)}
.gal__nav--next{right:clamp(16px,4.4vw,92px)}

@media (max-width:700px){
  .gal__fig{inset:clamp(56px,7vh,76px) 12px clamp(92px,13vh,116px);gap:12px}
  .gal__nav{
    top:auto;bottom:clamp(18px,3vh,30px);transform:none;
    width:52px;height:52px;
  }
  .gal__nav--prev{left:clamp(14px,6vw,40px)}
  .gal__nav--next{right:clamp(14px,6vw,40px)}
  .gal__cap{bottom:calc(-1 * clamp(104px,15vh,140px))}
}

/* ---------- 24. Animation base states ---------- */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-fade],[data-rise],[data-h]{opacity:0}
[data-clip]{clip-path:inset(0 0 100% 0)}
html.nm [data-fade],html.nm [data-rise],html.nm [data-h]{opacity:1!important;transform:none!important}
html.nm [data-clip]{clip-path:none!important}
html.nm [data-draw]{transform:none!important}
/* 모션이 없을 때는 띠가 복제되지 않으므로 가운데 정렬로 마감 */
html.nm .band{display:flex;justify-content:center}
html.nm .hdr.is-lift{opacity:1!important;pointer-events:auto;transform:none!important}
html.nm .wd>i{transform:none!important}
html.nm .intro{display:none}

/* ==========================================================================
   밝은 섹션 — 다크 일변도를 깨는 교차 배치
   섹션 안에서 색 토큰을 밝은 면 기준으로 뒤집으면
   하위 요소는 대부분 자동으로 따라옵니다.
   ========================================================================== */
.sec--light{
  background:var(--bone);
  color:rgba(var(--ink-rgb),.9);

  --w-90:rgba(var(--ink-rgb),.9);
  --w-64:rgba(var(--ink-rgb),.64);
  --w-44:rgba(var(--ink-rgb),.5);
  --w-28:rgba(var(--ink-rgb),.32);
  --ln:rgba(var(--ink-rgb),.17);
  --ln-2:rgba(var(--ink-rgb),.10);

  --forest:#fff;              /* 섹션 안의 카드 · 패널 */
  --forest-2:var(--bone-2);
  --forest-3:var(--bone-2);

  --gold-2:var(--gold-dk2);   /* 밝은 면에서 읽히는 골드로 교체 */
  --gold-3:var(--gold-dk);
  --gold2-rgb:138,106,44;
}

/* 흰색으로 고정돼 있던 글자를 잉크색으로 */
.sec--light .h2,
.sec--light .h3,
.sec--light .bd b,
.sec--light .ticks li b,
.sec--light .mani__txt,
.sec--light .mani__txt .wd>i,
.sec--light .fig__n,
.sec--light .plan__price b,
.sec--light .plan__rows dd,
.sec--light .both b,
.sec--light .qa summary span,
.sec--light .qa__a b{color:var(--ink)}

.sec--light .plan__rows dt span,
.sec--light .qa summary em{color:var(--gold-dk)}
.sec--light .qa__a a{color:var(--gold-dk)}

/* 카드 · 패널 */
.sec--light .plan{background:#fff}
.sec--light .plan--hi{
  background:linear-gradient(180deg,var(--bone-2) 0%,#fff 62%);
  border-color:rgba(var(--gold-rgb),.42);
}
.sec--light .both{background:#fff}

/* 버튼 — 밝은 배경에서의 반전 */
.sec--light .btn--line{border-color:rgba(var(--ink-rgb),.26);color:var(--ink)}
.sec--light .btn--line::after{background:var(--ink)}
.sec--light .btn--gold::after{background:var(--ink)}
.sec--light .btn--line:hover{color:var(--bone);border-color:var(--ink)}
.sec--light .btn--gold:hover{color:#fff;border-color:var(--ink)}

/* 포천 — 왼쪽은 사진, 오른쪽만 밝은 면 */
.sec--light .stk__cap{color:#fff}

/* 밝은 섹션 위를 지날 때 — 고정된 섹션 레일 색 반전 (JS 가 html 에 클래스 부여) */
html.light-view .rail em{color:rgba(var(--ink-rgb),.38)}
html.light-view .rail a:hover em,html.light-view .rail a.is-on em{color:var(--ink)}
html.light-view .rail a::after{background:rgba(var(--ink-rgb),.26)}
html.light-view .rail a.is-on::after{background:var(--gold-dk)}
html.light-view .rail span{color:var(--gold-dk)}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1280px){
  .wrow{grid-template-columns:66px 1fr;row-gap:10px;align-items:start;padding-block:clamp(20px,2.1vw,30px)}
  .wrow p{grid-column:2}
  .wrow__k{display:none}
  .stk{grid-template-columns:46% 54%}
  .ct__hd{text-align:center}
  .ct__hd .lbl{justify-content:center}
  .ct__hd .lbl::before{display:none}
  .ct__hd .h2,.ct__hd .bd{text-align:center;margin-inline:auto}
}

@media (max-width:1024px){
  .ct__in{grid-template-columns:1fr;gap:clamp(30px,4vw,54px)}
  .hdr__nav,.hdr__tel{display:none}
  .hdr__cta{display:none}
  .hdr__burger{display:block}
  .rail{display:none}
  .mbar{display:grid}
  .faq{grid-template-columns:1fr}
  .faq__l{position:static}
  .faq__l .btn{display:none}
  .plans{grid-template-columns:1fr;gap:clamp(20px,2.4vw,32px)}
  .plan__flag{top:0;left:clamp(20px,2.4vw,40px)}
  .both{grid-template-columns:1fr;gap:14px;align-items:start}
  .both ul{grid-template-columns:1fr 1fr}

  /* 포천 — 핀 해제, 세로 스택 */
  .stk{grid-template-columns:1fr}
  .stk__media{display:none}
  .stk__mo{display:block}
  /* 좌우 여백은 .stk__txt 한 곳에서만 줍니다.
     예전에는 .stk__blk 에도 걸려 있어 여백이 두 번 들어가(40px) 다른 섹션(20px)과 어긋났습니다. */
  .stk__txt{padding-inline:var(--pad)}
  .stk__blk{padding-inline:0;min-height:0;padding-block:clamp(44px,6vw,80px)}

  .coll__a,.coll__b{grid-column:span 12;height:clamp(280px,52vw,460px)}
  .coll__c,.coll__d{grid-column:span 6;height:clamp(220px,34vw,340px)}
  .coll__e{grid-column:span 12;height:clamp(240px,46vw,400px)}

  .btn--xl{height:68px;font-size:clamp(14.5px,1.7vw,16px);padding-inline:24px}
  .corp__cta .btn{width:100%}

  .ftr{padding-bottom:calc(60px + clamp(28px,2.8vw,44px) + env(safe-area-inset-bottom))}
}

@media (max-width:1180px){
  .band li{width:clamp(180px,28vw,320px)}
}

@media (max-width:820px){
  .ucase{grid-template-columns:1fr}
  .ucase__img img{aspect-ratio:21/9}
  .band li{width:clamp(170px,38vw,280px)}
  .figs{grid-template-columns:repeat(2,1fr)}
  .fig{border-bottom:1px solid var(--ln-2)}
  .fig:nth-child(2n){border-right:0}
  .fig:nth-last-child(-n+2){border-bottom:0}
  .hero__mark{padding-inline:clamp(70px,9vw,130px)}
  /* 모바일에서는 헤더를 유지해 메뉴 · 전화 · CTA 접근성을 확보하고,
     대신 히어로 구간에서는 헤더 로고만 감춰 워드마크와 겹치지 않게 합니다. */
  .hdr.is-lift{opacity:1;pointer-events:auto;transform:none}
  .hdr.is-lift .hdr__logo{opacity:0;pointer-events:none}
  .hp{width:min(430px,84vw);min-height:0;padding:clamp(26px,4vw,40px)}
  .ftr__grid{grid-template-columns:1fr;gap:26px}
  .qa summary{grid-template-columns:34px 1fr 16px;gap:10px}
  .qa__a p{padding-left:44px;padding-right:0}
}

@media (max-width:600px){
  body{font-size:15.5px}
  .wrow{padding-block:26px}
  .wrow p{font-size:14.5px;line-height:1.95}
  .plan__rows>div{grid-template-columns:1fr;gap:4px;min-height:0;padding:11px 0}
  .plan__rows dd{font-size:15px}
  .both ul{grid-template-columns:1fr}
  .band li{width:clamp(150px,52vw,230px)}
  .band img{aspect-ratio:1/1}
  .mani__txt{max-width:none}
  .hero__mark{position:absolute;top:clamp(74px,12vh,110px);padding-inline:var(--pad)}
  .hero__wm{font-size:clamp(34px,10.6vw,58px)}
  .hero__tag{font-size:clamp(14px,3.9vw,17.5px);margin-top:10px;line-height:1.55}
  .hero__logo{height:clamp(34px,11vw,52px);margin-bottom:12px}
  .hero__mid{bottom:clamp(150px,23vh,200px)}
  .hero__bar ul{grid-template-columns:1fr 1fr}
  .hero__bar li{border-top:1px solid rgba(255,255,255,.16)}
  .hero__bar li:nth-child(-n+2){border-top:none}
  .hero__bar li:nth-child(odd){border-left:none}
  .hero__bar a{padding:14px 8px}
  .fr--half{grid-template-columns:1fr;gap:0}
  .fr--half>div{margin-bottom:clamp(18px,1.7vw,26px)}
  .fc{grid-template-columns:1fr}
  .fc--4{grid-template-columns:1fr 1fr}
  .fc span{flex-direction:row;gap:9px;padding:13px}
  .fc--4 span{justify-content:center}
  /* 좁은 화면에서는 버튼 글자가 두 줄이 되어도 깨지지 않게 */
  .btn--xl{
    height:auto;min-height:62px;padding:16px 18px;line-height:1.5;
    font-size:14.5px;letter-spacing:-.03em;text-align:center;
  }
  .btn--xl .ar{display:none}
  .hp__more{height:52px;font-size:15px}
  .coll__c,.coll__d{grid-column:span 12;height:clamp(230px,58vw,340px)}
  .modal__box{padding:28px 22px}
  .ftr__copy{flex-direction:column}
}

/* ---------- 터치 환경 탭 영역 보정 ----------
   손가락으로 누르기 무리였던 작은 링크 · 체크박스의 탭 범위를 넓힙니다.
   보이는 크기는 그대로고, 눌리는 면적만 넓어집니다. */
@media (any-pointer:coarse){
  .ftr__nav{gap:0 10px}
  .ftr__nav a{padding:10px 6px}
  .ftr__tel{display:inline-block;padding-block:10px}

  .fa input{position:relative}
  .fa input::before{
    content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%);
  }
  .fa a,.qa__a a,.form__fine a{position:relative;display:inline-block}
  .fa a::after{
    content:"";position:absolute;left:-10px;right:-10px;top:50%;
    height:42px;transform:translateY(-50%);
  }
  .qa__a a::after{
    content:"";position:absolute;left:-8px;right:-8px;top:50%;
    height:44px;transform:translateY(-50%);
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-fade],[data-rise],[data-h]{opacity:1!important}
  [data-clip]{clip-path:none!important}
  [data-draw]{transform:none!important}
  .intro{display:none}
}


/* ==========================================================================
   확정 컬러 — ESPRESSO (딥 에스프레소 + 브론즈골드)
   색을 바꾸시려면 아래 블록의 값만 수정하시면 전체에 반영됩니다.
   ========================================================================== */
:root{
  --forest:#241A12;          /* 기본 배경 */
  --forest-2:#2E2218;        /* 한 단계 밝은 면 */
  --forest-3:#3B2C1E;        /* 강조 패널 */
  --forest-4:#4E3A27;

  --bone:#F7F2E9;            /* 밝은 헤더 · 밝은 면 */
  --bone-2:#EDE5D7;
  --ink:#1A1108;

  --gold:#B5894A;
  --gold-2:#D0AC6E;
  --gold-3:#EBD8AF;

  --on-gold:#241A12;
  --scrim-rgb:36,26,18;
  --deep-rgb:18,12,7;
  --gold-rgb:181,137,74;
  --gold2-rgb:208,172,110;
  --ink-rgb:26,17,8;
  --bone-rgb:247,242,233;
  --gold-dk:#75561F;
  --gold-dk2:#8E6A28;
}