@charset "utf-8";
/* ==========================================================================
   GM GOLF — Global Membership
   50~70대 고객 기준 가독성 설계 (2026)

   · 본문 18px 기준, 헤더의 "글자 크기" 버튼으로 22.5px까지 확대 가능
   · 본문급 텍스트는 모두 명도 대비 7:1 이상 (WCAG AAA)
   · 자간은 0에 가깝게, 행간은 1.85로 넉넉하게
   · 금색은 '장식'에만 쓰고, 글자에는 어두운 브론즈(--gold-ink)를 사용
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* --- 텍스트 색 (괄호 안은 --paper 배경 대비 명도비) --- */
  --ink:#0F1A15;        /* 본문·제목        16.9 : 1 */
  --ink-2:#36453D;      /* 본문 보조         9.6 : 1 */
  --ink-3:#45534C;      /* 캡션·주석         7.3 : 1   (구 #77857D = 3.7 : 1) */

  /* --- 브랜드 --- */
  --green-900:#062019;
  --green-800:#0A3126;
  --green-700:#104233;
  --green-600:#12513D;  /* 강조 텍스트       8.8 : 1 */
  --green-500:#1F7A5C;

  --gold:#AE8B4C;       /* 장식 전용(선·점·배지). 글자에는 쓰지 말 것 */
  --gold-ink:#684C12;   /* 밝은 배경 위 금색 글자   7.1 : 1 (아이보리 배경 기준) */
  --gold-2:#E0C68F;     /* 어두운 배경 위 금색 글자 10.3 : 1 */
  --gold-soft:#F3EADA;

  --paper:#FBF9F5;
  --paper-2:#F4F1EA;
  --white:#fff;
  --line:rgba(15,26,21,.2);
  --line-2:rgba(15,26,21,.11);
  --line-inv:rgba(255,255,255,.24);
  --kakao:#FAE100;
  --kakao-ink:#2E1616;

  /* --- 폰트 --- */
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --serif:"Cormorant Garamond","Times New Roman",serif;

  /* --- 치수 --- */
  --wrap:1180px;
  --wrap-narrow:880px;
  --gut:clamp(20px,5vw,40px);
  --sec:clamp(64px,9vw,136px);
  --r:5px;
  --r-lg:10px;
  --hdr:64px;
}
@media (min-width:900px){ :root{ --hdr:86px; } }

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  font-size:100%;                       /* '글자 크기' 버튼이 이 값을 조절합니다 */
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--hdr) + 16px);
}
html.fs-lg{font-size:112.5%}            /* 본문 20.25px */
html.fs-xl{font-size:125%}              /* 본문 22.5px  */
/* 61 — 부드러운 스크롤은 "페이지 안에서 이동할 때"만.
   주소에 #이 붙어 들어온 첫 진입까지 애니메이션되면
   맨 위에서 목표 지점까지 화면이 쭉 흘러 정신없습니다.
   main.js가 로드 완료 후 html에 .nav-smooth 를 붙입니다. */
html.nav-smooth{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html.nav-smooth{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.125rem;        /* 18px — 노안 기준 본문 최소치 */
  font-weight:450;           /* 400보다 획이 또렷 */
  line-height:1.85;
  letter-spacing:0;          /* 음수 자간은 노안에 불리 */
  word-break:keep-all;
  overflow-wrap:break-word;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px;border-radius:3px}
::selection{background:var(--green-700);color:#fff}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:clamp(44px,6.5vw,88px)}
.sec--dark{background:var(--green-900);color:#fff}
.sec--paper2{background:var(--paper-2)}
.sec--white{background:var(--white)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 4. Type ---------- */
.eyebrow{
  font-family:var(--serif);
  font-size:clamp(1rem,2.6vw,1.15rem);
  font-weight:700;
  letter-spacing:.18em;          /* 지나치게 넓은 자간은 읽기 어려워 완화 */
  text-transform:uppercase;
  color:var(--gold-ink);
  line-height:1.4;
  margin-bottom:.85em;
}
.sec--dark .eyebrow,.hero .eyebrow,.phero .eyebrow{color:var(--gold-2)}

h1,.h1{font-size:clamp(2rem,6.2vw,3.6rem);line-height:1.3;font-weight:800;letter-spacing:-.015em}
h2,.h2{font-size:clamp(1.65rem,4.4vw,2.6rem);line-height:1.36;font-weight:800;letter-spacing:-.012em}
h3,.h3{font-size:clamp(1.3rem,3vw,1.6rem);line-height:1.5;font-weight:700;letter-spacing:-.008em}
h4,.h4{font-size:clamp(1.15rem,2.5vw,1.25rem);line-height:1.55;font-weight:700;letter-spacing:-.005em}

.lead{font-size:clamp(1.15rem,2.6vw,1.3rem);line-height:1.85;color:var(--ink-2)}
.sec--dark .lead{color:rgba(255,255,255,.88)}
.body{color:var(--ink-2)}
.small{font-size:1.0625rem;line-height:1.8;color:var(--ink-3)}
.note{font-size:1rem;line-height:1.75;color:var(--ink-3)}
.sec--dark .small,.sec--dark .note{color:rgba(255,255,255,.78)}
strong,b{font-weight:800}
.hl{color:var(--green-600);font-weight:800}
.sec--dark .hl{color:var(--gold-2)}

.sec-head{max-width:740px;margin-bottom:clamp(34px,5vw,62px)}
.sec-head--c{margin-inline:auto;text-align:center}
.sec-head p{margin-top:clamp(14px,2vw,20px)}

.rule{height:1px;background:var(--line);border:0;margin:0}
.gold-rule{width:52px;height:3px;background:var(--gold);margin-bottom:26px}
.sec-head--c .gold-rule{margin-inline:auto}

/* ---------- 5. Buttons ---------- */
.btn{
  --bg:var(--green-700);--fg:#fff;--bd:var(--green-700);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:58px;padding:.85em 1.8em;
  background:var(--bg);color:var(--fg);border:2px solid var(--bd);border-radius:var(--r);
  font-size:1.125rem;font-weight:800;letter-spacing:-.005em;line-height:1.3;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(6,32,25,.6)}
.btn:active{transform:translateY(0)}
.btn--gold{--bg:#6E5116;--bd:#6E5116;--fg:#fff}        /* 흰 글자 대비 7.4 : 1 */
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:rgba(15,26,21,.3)}
.btn--ghost:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--ghost-inv{--bg:rgba(6,32,25,.4);--fg:#fff;--bd:rgba(255,255,255,.8)}
.btn--ghost-inv:hover{--bg:#fff;--fg:var(--green-900);--bd:#fff}
.btn--kakao{--bg:var(--kakao);--bd:#D9C400;--fg:var(--kakao-ink)}
.btn--lg{min-height:64px;padding:1em 2.1em;font-size:1.2rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row--c{justify-content:center}
@media (max-width:559px){ .btn-row .btn{width:100%} }


/* ---------- 6a. 상단 유틸리티 바 (데스크톱 전용) ---------- */
.ubar{display:none;background:var(--paper-2);border-bottom:1px solid var(--line-2)}
.ubar__in{display:flex;align-items:center;justify-content:flex-end;gap:clamp(16px,2.4vw,32px);min-height:50px}
.ubar__tel{display:inline-flex;align-items:center;gap:.4em;font-size:1.05rem;font-weight:700;color:var(--ink-2)}
.ubar__tel b{font-size:1.2rem;font-weight:800;color:var(--green-700);letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}
.ubar .fsw{display:flex}
@media (min-width:900px){ .ubar{display:block} }

/* ---------- 6. Header ---------- */
.hdr{
  position:sticky;top:0;z-index:80;
  height:var(--hdr);
  background:rgba(251,249,245,.97);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.hdr__in{height:100%;display:flex;align-items:center;gap:14px}
.hdr__logo{display:flex;align-items:center;flex:0 0 auto}
.hdr__logo img{height:clamp(28px,5vw,38px);width:auto}
.nav{display:none}
.nav ul{display:flex;align-items:center;gap:clamp(12px,1.7vw,24px)}
.nav a{
  display:flex;align-items:center;min-height:48px;
  font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;color:var(--ink-2);
  position:relative;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:10px;height:2px;background:var(--gold-ink);transition:right .28s ease}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.hdr__cta{display:none;margin-left:14px}
.hdr__tel{
  display:none;align-items:center;gap:.4em;
  font-size:1.35rem;font-weight:800;letter-spacing:-.01em;color:var(--green-700);
}

/* 글자 크기 조절 */
.fsw{display:none;align-items:center;gap:6px}
.fsw__lbl{font-size:1rem;font-weight:700;color:var(--ink-3);white-space:nowrap}
.fsw button{
  width:46px;height:46px;border:1.5px solid var(--line);background:var(--white);
  border-radius:var(--r);cursor:pointer;font-weight:800;color:var(--ink-2);
  display:grid;place-items:center;line-height:1;transition:background .15s,border-color .15s,color .15s;
}
.fsw button:hover{border-color:var(--green-700);color:var(--green-700)}
.fsw button[aria-pressed="true"]{background:var(--green-700);border-color:var(--green-700);color:#fff}
.fsw .s{font-size:.9rem}
.fsw .m{font-size:1.12rem}
.fsw .l{font-size:1.38rem}

.burger{
  margin-left:auto;width:50px;height:50px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;
}
.burger span{display:block;width:26px;height:2.4px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:26px;height:2.4px;background:var(--ink);transition:transform .26s ease}
.burger span::before{top:-8px}
.burger span::after{top:8px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-8px) rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--hdr) 0 0;z-index:70;
  background:var(--paper);
  padding:8px var(--gut) 40px;
  overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .24s ease,transform .24s ease,visibility .24s;
}
.drawer[data-open="true"]{opacity:1;visibility:visible;transform:none}
.drawer a.drawer__link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:72px;border-bottom:1px solid var(--line-2);
  font-size:1.2rem;font-weight:800;letter-spacing:-.01em;
}
.drawer a.drawer__link span.en{font-family:var(--serif);font-size:1rem;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;flex:0 0 auto}
.drawer__foot{margin-top:26px;display:grid;gap:12px}
.drawer .fsw{display:flex;margin-top:26px}

@media (min-width:900px){
  .hdr__cta{display:block;margin-left:auto}
}
@media (min-width:1120px){
  .nav{display:block;margin-left:clamp(18px,2.6vw,44px);margin-right:auto}
  .hdr__cta{margin-left:14px}
  .burger,.drawer{display:none}
}

/* ---------- 7. Hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--green-900);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media picture,.phero__media picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(6,32,25,.5) 0%,rgba(6,32,25,.3) 45%,rgba(6,32,25,.72) 100%),
    linear-gradient(90deg,rgba(6,32,25,.62) 0%,rgba(6,32,25,.14) 62%,rgba(6,32,25,0) 85%);
}
.hero__in{
  min-height:clamp(580px,88svh,880px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:clamp(96px,16vw,150px) clamp(34px,6vw,60px);
}
.hero h1{max-width:17ch;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.hero .lead{color:#fff;max-width:42ch;margin-top:clamp(16px,2.6vw,24px);text-shadow:0 1px 16px rgba(6,32,25,.75)}
.hero .btn-row{margin-top:clamp(28px,4.4vw,40px)}
.hero__stats{
  margin-top:clamp(38px,6vw,64px);padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--line-inv);
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px 12px;
}
.hero__stats dt{font-size:1rem;font-weight:700;color:rgba(255,255,255,.86);margin-bottom:2px;text-shadow:0 1px 12px rgba(6,32,25,.75)}
.hero__stats dd{font-size:clamp(1.8rem,5.4vw,2.4rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;text-shadow:0 1px 14px rgba(6,32,25,.65)}
.hero__stats dd .u{font-size:.52em;font-weight:700;margin-left:.15em}
@media (min-width:760px){ .hero__stats{grid-template-columns:repeat(4,1fr);gap:12px} }

.phero{position:relative;isolation:isolate;background:var(--green-900);color:#fff;overflow:hidden}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.phero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(6,32,25,.66) 0%,rgba(6,32,25,.44) 42%,rgba(6,32,25,.86) 100%),
    linear-gradient(90deg,rgba(6,32,25,.66) 0%,rgba(6,32,25,.22) 56%,rgba(6,32,25,0) 78%);
}
.phero__in{min-height:clamp(460px,66svh,680px);display:flex;flex-direction:column;justify-content:flex-end;padding-block:clamp(84px,14vw,130px) clamp(34px,5vw,58px)}
.phero h1{max-width:19ch;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.phero .lead{color:#fff;max-width:46ch;margin-top:16px;text-shadow:0 1px 16px rgba(6,32,25,.75)}
.crumb{display:flex;gap:.6em;align-items:center;font-size:1rem;font-weight:700;color:rgba(255,255,255,.88);margin-bottom:18px;text-shadow:0 1px 12px rgba(6,32,25,.75)}
.crumb a{text-decoration:underline;text-underline-offset:4px}
.crumb a:hover{color:#fff}

/* ---------- 8. Trust strip ---------- */
.strip{background:var(--green-800);color:#fff;padding-block:clamp(22px,3vw,32px)}
.strip ul{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,3vw,40px);text-align:center}
.strip li{display:flex;align-items:center;gap:.5em;font-size:clamp(1rem,2.3vw,1.1rem);font-weight:700;color:#fff}
.strip li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-2);flex:0 0 auto}

/* ---------- 9. Product cards ---------- */
.cards{display:grid;gap:clamp(22px,3vw,30px)}
@media (min-width:760px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{
  display:flex;flex-direction:column;
  background:var(--white);border:1.5px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:0 24px 48px -30px rgba(6,32,25,.55);border-color:var(--line)}
.card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card__media img{transform:scale(1.045)}
.card__flag{
  position:absolute;left:14px;top:14px;z-index:2;
  background:rgba(6,32,25,.9);
  color:#fff;font-family:var(--serif);font-size:1rem;font-weight:700;letter-spacing:.08em;
  padding:.4em .8em;border-radius:4px;text-transform:uppercase;
  max-width:calc(100% - 28px);
}
.card__body{padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;flex:1}
.card__tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.tag{
  font-size:1rem;font-weight:700;line-height:1.35;
  padding:.45em .8em;border-radius:100px;
  background:var(--gold-soft);color:#5E4519;      /* 7.3 : 1 */
}
.tag--green{background:#E2EDE7;color:var(--green-700)}
.card h3{margin-bottom:12px}
.card__desc{font-size:1.0625rem;line-height:1.8;color:var(--ink-2);margin-bottom:20px}
.card__facts{border-top:1px solid var(--line-2);padding-top:16px;margin-top:auto;display:grid;gap:10px}
.card__facts div{display:flex;justify-content:space-between;gap:14px;font-size:1.0625rem}
.card__facts dt{color:var(--ink-3)}
.card__facts dd{font-weight:800;text-align:right}
.card__price{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.card__price .lbl{font-size:1rem;font-weight:700;color:var(--ink-3)}
.card__price .val{font-size:1.75rem;font-weight:800;color:var(--green-600);letter-spacing:-.025em}
.card__price .val .u{font-size:.6em;font-weight:800;margin-left:.1em}
.card__cta{margin-top:20px}

/* ---------- 10. Feature grid ---------- */
.feats{display:grid;gap:1px;background:var(--line-2);border:1.5px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:640px){ .feats{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1020px){ .feats--3{grid-template-columns:repeat(3,1fr)} }
.feat{background:var(--white);padding:clamp(26px,3.4vw,40px)}
.sec--paper2 .feat{background:var(--paper)}
.feat__n{font-size:1.2rem;font-weight:800;letter-spacing:.02em;color:var(--gold-ink);margin-bottom:14px}
.feat h3{margin-bottom:12px}
.feat p{font-size:1.0625rem;line-height:1.82;color:var(--ink-2)}

/* ---------- 11. Tables ---------- */
.tscroll{
  position:relative;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1.5px solid var(--line);border-radius:var(--r-lg);background:var(--white);
}
.tscroll table{min-width:760px;font-size:1.0625rem}
.tscroll th,.tscroll td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top;line-height:1.7}
.tscroll thead th{
  background:var(--green-800);color:#fff;font-weight:800;font-size:1.0625rem;
  position:sticky;top:0;z-index:1;white-space:nowrap;
}
.tscroll tbody th{
  font-weight:800;color:var(--ink);font-size:1.0625rem;white-space:nowrap;background:var(--paper-2);
  position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--line-2);
}
.tscroll thead th:first-child{position:sticky;left:0;z-index:3}
@media (min-width:1040px){
  .tscroll tbody th,.tscroll thead th:first-child{position:static;box-shadow:none}
}
.tscroll tbody tr:last-child th,.tscroll tbody tr:last-child td{border-bottom:0}
.tscroll td b{color:var(--green-600)}
.tscroll .note{font-size:1rem}
.scroll-hint{display:flex;align-items:center;gap:.4em;font-size:1rem;font-weight:700;color:var(--ink-3);margin-bottom:10px}
@media (min-width:1040px){ .scroll-hint{display:none} }

.ptable td.was{color:var(--ink-3);text-decoration:line-through}
.ptable td.now{font-weight:800;color:var(--green-600)}
.ptable td.save{color:#95341F;font-weight:800}        /* 7.0 : 1 */

/* ---------- 12. Split / media ---------- */
.split{display:grid;gap:clamp(28px,4vw,58px);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-media{grid-template-columns:1.15fr .85fr}
  .split--rev .split__media{order:2}
}
.split__media img{width:100%;border-radius:var(--r-lg);border:1px solid var(--line-2)}
.split__media figcaption{margin-top:12px;font-size:1rem;color:var(--ink-3);text-align:center}
.sec--dark .split__media figcaption{color:rgba(255,255,255,.8)}
.split__body > * + *{margin-top:clamp(16px,2vw,22px)}

.mediagrid{display:grid;gap:clamp(16px,2.2vw,24px)}
@media (min-width:640px){ .mediagrid--2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:880px){ .mediagrid--4{grid-template-columns:repeat(4,1fr)} .mediagrid--3{grid-template-columns:repeat(3,1fr)} }
.mediagrid .split__media img{aspect-ratio:16/10;object-fit:cover}
.shot{background:var(--white);border:1.5px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.shot img{width:100%}
.shot figcaption{padding:14px 18px;font-size:1rem;color:var(--ink-3);border-top:1px solid var(--line-2);line-height:1.6}
.sec--dark .shot{background:rgba(255,255,255,.07);border-color:var(--line-inv)}
.sec--dark .shot figcaption{border-color:var(--line-inv);color:rgba(255,255,255,.82)}

.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile:hover img{transform:scale(1.05)}
.tile__cap{
  position:absolute;inset:auto 0 0 0;padding:clamp(18px,2.4vw,24px);padding-top:clamp(40px,6vw,64px);
  background:linear-gradient(180deg,rgba(6,32,25,0) 0%,rgba(6,32,25,.74) 38%,rgba(6,32,25,.96) 100%);
  color:#fff;
}
.tile__cap h4{margin-bottom:5px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.tile__cap p{font-size:1rem;line-height:1.66;color:rgba(255,255,255,.94)}

/* ---------- 13. Spec bar ---------- */
.specs{display:grid;gap:1px;background:var(--line-2);border-block:1px solid var(--line-2)}
@media (min-width:640px){ .specs{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .specs{grid-template-columns:repeat(5,1fr)} }
.spec{background:var(--paper);padding:clamp(22px,2.6vw,30px)}
.spec dt{font-size:1rem;letter-spacing:.06em;color:var(--gold-ink);font-weight:800;margin-bottom:8px}
.spec dd{font-size:1.0625rem;line-height:1.7;color:var(--ink-2);font-weight:600}
.spec .note{font-size:1rem}

/* ---------- 14. Numbered blocks ---------- */
.block{padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--line-2)}
.block__head{display:flex;gap:clamp(16px,3vw,34px);align-items:flex-start;margin-bottom:clamp(28px,4vw,46px)}
.block__n{
  font-size:clamp(2.6rem,7vw,3.8rem);font-weight:800;line-height:1;
  color:var(--gold-ink);flex:0 0 auto;letter-spacing:-.02em;
}
.sec--dark .block__n{color:var(--gold-2)}
.block__t h2{margin-bottom:8px}
.block__t .kicker{font-size:1.0625rem;font-weight:800;color:var(--green-600);margin-bottom:8px}
.sec--dark .block__t .kicker{color:var(--gold-2)}

/* ---------- 15. Pricing ---------- */
.plans{display:grid;gap:clamp(20px,2.6vw,26px)}
@media (min-width:780px){ .plans{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1020px){ .plans--3{grid-template-columns:repeat(3,1fr)} }
.plan{
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,38px);display:flex;flex-direction:column;position:relative;
}
.plan--hi{border:2.5px solid var(--green-700);box-shadow:0 18px 44px -30px rgba(6,32,25,.6)}
.plan__badge{
  position:absolute;top:-15px;left:clamp(26px,3.4vw,38px);
  background:var(--green-700);color:#fff;font-size:1rem;font-weight:800;
  padding:.4em .95em;border-radius:100px;
}
.plan__name{font-family:var(--serif);font-size:1.9rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;color:var(--ink)}
.plan__who{font-size:1.0625rem;color:var(--ink-2);margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--line-2)}
.plan__was{font-size:1.0625rem;color:var(--ink-3);text-decoration:line-through;margin-bottom:2px}
.plan__price{display:flex;align-items:baseline;gap:.15em;margin-bottom:6px}
.plan__price .v{font-size:clamp(2.4rem,6vw,3rem);font-weight:800;line-height:1;color:var(--green-600);letter-spacing:-.03em}
.plan__price .u{font-size:1.2rem;font-weight:800;color:var(--green-600)}
.plan__sub{font-size:1rem;color:var(--ink-3);margin-bottom:22px}
.plan ul{display:grid;gap:11px;margin-bottom:26px}
.plan li{position:relative;padding-left:1.5em;font-size:1.0625rem;line-height:1.72;color:var(--ink-2)}
.plan li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.plan .btn{margin-top:auto}

/* ---------- 16. Benefit list ---------- */
.bens{display:grid;gap:1px;background:var(--line-inv);border:1px solid var(--line-inv);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:640px){ .bens{grid-template-columns:repeat(2,1fr)} }
.ben{background:var(--green-900);padding:clamp(20px,2.4vw,26px);display:flex;gap:14px;align-items:flex-start}
.ben .n{font-size:1.15rem;font-weight:800;color:var(--gold-2);flex:0 0 auto;padding-top:.1em}
.ben p{font-size:1.0625rem;line-height:1.7;color:rgba(255,255,255,.94)}

/* ---------- 17. Quote ---------- */
.quote{text-align:center;max-width:28ch;margin-inline:auto}
.quote blockquote{font-family:var(--serif);font-size:clamp(1.6rem,4.4vw,2.2rem);line-height:1.55;font-weight:600}
.quote cite{display:block;margin-top:18px;font-style:normal;font-size:1.0625rem;font-weight:700;letter-spacing:.06em;color:var(--gold-ink)}
.sec--dark .quote cite{color:var(--gold-2)}

/* ---------- 18. Contact / form ---------- */
.contact{display:grid;gap:clamp(34px,5vw,64px)}
@media (min-width:980px){ .contact{grid-template-columns:.92fr 1.08fr} }
.contact__info .tel{
  display:inline-flex;align-items:center;gap:.4em;
  font-size:clamp(2.3rem,7.4vw,3.2rem);font-weight:800;letter-spacing:-.025em;
  color:#fff;margin-block:8px 12px;
}
.contact__info dl{display:grid;gap:14px;margin-top:28px;padding-top:28px;border-top:1px solid var(--line-inv)}
.contact__info dl div{display:flex;gap:16px;font-size:1.0625rem}
.contact__info dt{flex:0 0 78px;color:rgba(255,255,255,.74)}
.contact__info dd{color:#fff;font-weight:600}
.contact__info dd a{text-decoration:underline;text-underline-offset:4px}

.form{background:var(--white);border-radius:var(--r-lg);padding:clamp(26px,3.6vw,42px);color:var(--ink)}
/* 다크 섹션 안이라도 폼 내부는 밝은 배경이므로 텍스트 색을 되돌립니다 */
.sec--dark .form .note,.sec--dark .form .small{color:var(--ink-3)}
.sec--dark .form .lead,.sec--dark .form .body{color:var(--ink-2)}
.sec--dark .form h1,.sec--dark .form h2,.sec--dark .form h3,.sec--dark .form h4{color:var(--ink)}
.form__grid{display:grid;gap:18px}
@media (min-width:560px){ .form__grid--2{grid-template-columns:1fr 1fr} }
.field label{display:block;font-size:1.0625rem;font-weight:800;margin-bottom:9px}
.field label .req{color:#9B2810;margin-left:3px}
.field input,.field select,.field textarea{
  width:100%;min-height:60px;padding:.8em 1em;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);
  font-size:1.125rem;line-height:1.5;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.field textarea{min-height:132px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2336453D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-600);background:#fff;box-shadow:0 0 0 3px rgba(18,81,61,.18)}
.field input::placeholder,.field textarea::placeholder{color:#6E7A74}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:1rem;line-height:1.7;color:var(--ink-2);cursor:pointer}
.consent input{width:26px;height:26px;min-height:0;flex:0 0 auto;margin-top:3px;accent-color:var(--green-600)}
.form .btn{margin-top:4px}
.form__note{font-size:1rem;color:var(--ink-3);margin-top:14px;line-height:1.7}
.form__note a{color:var(--green-600);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- 19. Footer ---------- */
.ftr{background:var(--green-900);color:rgba(255,255,255,.84);padding-block:clamp(44px,6vw,76px);font-size:1.0625rem;line-height:1.85}
.ftr__top{display:grid;gap:28px;padding-bottom:32px;border-bottom:1px solid var(--line-inv)}
@media (min-width:860px){ .ftr__top{grid-template-columns:1.1fr 1fr 1fr} }
.ftr__brand{font-family:var(--serif);font-size:1.8rem;letter-spacing:.16em;color:#fff;font-weight:700}
.ftr__brand span{display:block;font-family:var(--sans);font-size:1rem;letter-spacing:.22em;color:var(--gold-2);margin-top:7px;font-weight:700}
.ftr h4{color:#fff;font-size:1.0625rem;letter-spacing:.06em;margin-bottom:14px;font-weight:800}
.ftr ul{display:grid}
.ftr a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.ftr__biz{margin-top:28px;display:flex;flex-wrap:wrap;gap:4px 20px;font-size:1rem;color:rgba(255,255,255,.76)}
.ftr__copy{margin-top:20px;font-size:1rem;color:rgba(255,255,255,.68);line-height:1.7}

/* ---------- 20. Mobile action bar ---------- */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:75;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--green-800);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 24px -12px rgba(0,0,0,.5);
}
.mbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:70px;color:#fff;font-size:1rem;font-weight:800;
  border-left:1px solid rgba(255,255,255,.18);
}
.mbar a:first-child{border-left:0}
.mbar a.is-kakao{background:var(--kakao);color:var(--kakao-ink)}
.mbar svg{width:22px;height:22px}
@media (max-width:899px){ body{padding-bottom:70px} }
@media (min-width:900px){ .mbar{display:none} }

.fab{
  display:none;position:fixed;right:24px;bottom:24px;z-index:75;
  align-items:center;gap:.5em;
  background:var(--kakao);color:var(--kakao-ink);
  padding:.95em 1.5em;border-radius:100px;font-weight:800;font-size:1.0625rem;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.5);
  transition:transform .2s ease;
}
.fab:hover{transform:translateY(-3px)}
@media (min-width:900px){ .fab{display:inline-flex} }

/* ---------- 21. Reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} }

/* ---------- 22. Misc ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.badge{
  font-size:1.0625rem;font-weight:700;padding:.55em 1em;border-radius:100px;
  border:1.5px solid var(--line);color:var(--ink-2);background:var(--white);
}
.sec--dark .badge{border-color:var(--line-inv);background:rgba(255,255,255,.1);color:#fff}
.kv{display:grid;gap:16px;margin-top:24px}
@media (min-width:560px){ .kv{grid-template-columns:repeat(3,1fr)} }
.kv > div{background:var(--white);border:1.5px solid var(--line-2);border-radius:var(--r);padding:20px 22px}
.sec--dark .kv > div{background:rgba(255,255,255,.09);border-color:var(--line-inv)}
.kv dt{font-size:1rem;font-weight:700;color:var(--ink-3);margin-bottom:6px}
.sec--dark .kv dt{color:rgba(255,255,255,.82)}
.kv dd{font-size:1.75rem;font-weight:800;line-height:1.25;color:var(--green-600);letter-spacing:-.025em}
.sec--dark .kv dd{color:var(--gold-2)}
.kv dd .u{font-size:.58em;font-weight:800;margin-left:.1em}

.chk{display:grid;gap:12px}
.chk li{position:relative;padding-left:1.7em;font-size:1.0625rem;line-height:1.75;color:var(--ink-2)}
.chk li::before{content:"✔";position:absolute;left:0;top:0;color:var(--gold-ink);font-weight:800}
.sec--dark .chk li{color:rgba(255,255,255,.94)}
.sec--dark .chk li::before{color:var(--gold-2)}

/* 숫자는 항상 라이닝 숫자로 (Cormorant의 올드스타일 숫자는 1이 I, 0이 O로 보임) */
.hdr__tel,.hero__stats dd,.card__price .val,.plan__price .v,.plan__price .u,
.contact__info .tel,.kv dd,.feat__n,.block__n,.ben .n,.tscroll td,.tscroll th{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* ---------- 23. Print ---------- */
@media print{
  .hdr,.drawer,.mbar,.fab,.form,.fsw{display:none !important}
  body{background:#fff;color:#000;font-size:11pt;padding-bottom:0}
  .sec--dark{background:#fff;color:#000}
  .sec--dark *{color:#000 !important}
}

/* ---------- 24. 모바일 터치 영역 (48px 이상) ---------- */
@media (max-width:899px){
  .ftr ul a,.contact__info dd a,.crumb a{display:inline-flex;align-items:center;min-height:48px}
  .form__note a{display:inline-block;padding-block:12px}
  html{scroll-padding-bottom:86px}
}

/* ---------- 25. 자료 이미지 높이 통일 ----------
   지도·표·스크린샷처럼 비율이 제각각인 이미지를 같은 크기의 액자에 담습니다.
   잘라내면 내용이 보이지 않으므로 contain(전체 보이기) + 여백 배경을 씁니다.
   비율은 --shot-ratio 로 조절 (기본 4/3, 세로 자료는 3/4 등).          */
.mediagrid--even .shot{display:flex;flex-direction:column;height:100%}
.mediagrid--even .shot img{
  width:100%;
  aspect-ratio:var(--shot-ratio,4/3);
  object-fit:contain;
  background:var(--paper-2);
}
.mediagrid--even .shot figcaption{margin-top:auto}
.sec--dark .mediagrid--even .shot img{background:rgba(255,255,255,.07)}
/* 사진은 액자를 꽉 채우도록 예외 처리 */
.mediagrid--even .shot--cover img{object-fit:cover;background:none}

/* KV 카드의 보조 설명 줄 (예: 직항 6곳 → 도시 이름) */
.kv dd .sub{
  display:block;margin-top:7px;
  font-size:1rem;font-weight:600;line-height:1.6;letter-spacing:0;
  color:var(--ink-2);
}
.sec--dark .kv dd .sub{color:rgba(255,255,255,.88)}

/* ---------- 26. 어두운 섹션의 소제목 가독성 ---------- */
.sec--dark .block__t .kicker{color:#F5E7C4;font-size:1.125rem;letter-spacing:.01em}  /* 13.9 : 1 */

/* ---------- 27. 캡션 안의 보기 버튼 ---------- */
.figbtn{
  display:inline-flex;align-items:center;gap:.5em;
  margin-top:12px;min-height:48px;padding:.5em 1.1em;
  background:var(--white);color:var(--green-700);
  border:2px solid var(--green-700);border-radius:100px;
  font-size:1.0625rem;font-weight:800;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.figbtn svg{width:20px;height:20px;flex:0 0 auto}
.figbtn:hover{background:var(--green-700);color:#fff}
.sec--dark .figbtn{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.sec--dark .figbtn:hover{background:#fff;color:var(--green-900)}
.shot figcaption:has(.figbtn){display:flex;flex-direction:column;align-items:flex-start;gap:0}
/* 60i — 사진 설명과 버튼이 한 줄에 나란히 올 때, 사이를 띄웁니다. */
.split__media figcaption:has(.figbtn){
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:10px 18px;
}
.split__media figcaption .figbtn{margin-top:0}

/* ---------- 28. 팝업 (객실 배치도 등) ---------- */
.modal{
  width:min(760px,calc(100vw - 32px));max-width:none;
  max-height:calc(100vh - 48px);
  padding:0;border:0;border-radius:var(--r-lg);
  background:var(--white);color:var(--ink);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  overflow:hidden;
}
.modal::backdrop{background:rgba(6,32,25,.72);backdrop-filter:blur(3px)}
.modal[open]{display:flex;flex-direction:column}
.modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px clamp(18px,3vw,28px);
  border-bottom:1px solid var(--line-2);flex:0 0 auto;
}
.modal__head h3{font-size:1.25rem;margin:0}
.modal__x{
  width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:50%;
  color:var(--ink);cursor:pointer;transition:background .16s,color .16s;
}
.modal__x svg{width:22px;height:22px}
.modal__x:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.modal__body{padding:clamp(18px,3vw,28px);overflow:auto;flex:1 1 auto}
.modal__body img{
  width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--paper-2);
}
.modal__body .note{margin-top:14px}
.modal__foot{padding:0 clamp(18px,3vw,28px) clamp(18px,3vw,24px);flex:0 0 auto}
.modal__foot .btn{width:100%}
@media (min-width:640px){ .modal__foot{display:none} }   /* 데스크톱은 X 버튼으로 충분 */
html:has(dialog[open]){overflow:hidden}

/* ---------- 29. 타일 캡션을 사진 아래로 ----------
   글씨가 사진을 덮으면 사진(특히 바다·하늘)이 가려지고 가독성도 떨어져
   캡션을 사진 아래 흰 영역으로 내립니다.                              */
.tile{
  aspect-ratio:auto;display:flex;flex-direction:column;height:100%;
  background:var(--white);border:1.5px solid var(--line-2);
}
.tile img{aspect-ratio:4/3;object-fit:cover}
.tile:hover img{transform:none}
.tile__cap{
  position:static;inset:auto;
  background:none;color:inherit;
  padding:18px clamp(16px,2vw,22px);padding-top:18px;
  border-top:1px solid var(--line-2);
  flex:1 1 auto;
}
.tile__cap h4{color:var(--ink);text-shadow:none;margin-bottom:6px}
.tile__cap p{color:var(--ink-2);font-size:1.0625rem;line-height:1.72}
.sec--dark .tile{background:rgba(255,255,255,.07);border-color:var(--line-inv)}
.sec--dark .tile__cap{border-color:var(--line-inv)}
.sec--dark .tile__cap h4{color:#fff}
.sec--dark .tile__cap p{color:rgba(255,255,255,.9)}

/* ---------- 30. 코스 갤러리 ---------- */
.gallery{display:grid;gap:clamp(14px,2vw,22px)}
@media (min-width:640px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .gallery{grid-template-columns:repeat(3,1fr)} }
.gallery figure{
  margin:0;display:flex;flex-direction:column;
  border:1.5px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);
}
.gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.gallery figcaption{
  padding:14px clamp(14px,1.8vw,18px);
  font-size:1.0625rem;font-weight:600;color:var(--ink-2);
  border-top:1px solid var(--line-2);background:var(--white);
  flex:1 1 auto;line-height:1.6;
}
.gallery figure.span2{grid-column:span 1}
@media (min-width:1000px){ .gallery figure.span2{grid-column:span 2} .gallery figure.span2 img{aspect-ratio:32/10} }

/* 코스 가이드 카드 */
.guide{display:grid;gap:clamp(16px,2.2vw,24px)}
@media (min-width:640px){ .guide{grid-template-columns:repeat(2,1fr)} }
.guide figure{
  margin:0;display:flex;flex-direction:column;
  border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white);
}
.guide img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center top;background:var(--paper-2)}
.guide figcaption{padding:clamp(16px,2vw,22px);flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.guide figcaption b{font-size:1.2rem;font-weight:800}
.guide figcaption .note{margin-bottom:4px}
.guide .figbtn{margin-top:auto}

/* 넓은 팝업 (코스 가이드처럼 큰 문서용) */
.modal--wide{width:min(1020px,calc(100vw - 24px))}
.modal__more{
  display:inline-flex;align-items:center;gap:.4em;margin-top:14px;min-height:48px;
  font-size:1.0625rem;font-weight:700;color:var(--green-600);
  text-decoration:underline;text-underline-offset:4px;
}

/* ---------- 31. 평점 ---------- */
.rating{display:grid;gap:clamp(28px,4vw,52px);align-items:start}
@media (min-width:900px){ .rating{grid-template-columns:.85fr 1.15fr} }
.rating__score{
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,38px);text-align:center;
}
.rating__big{font-size:clamp(3.6rem,11vw,5rem);font-weight:800;line-height:1;color:var(--green-600);letter-spacing:-.04em}
.rating__big span{font-size:.34em;font-weight:700;color:var(--ink-3);letter-spacing:0}
.stars{display:flex;justify-content:center;gap:3px;margin:14px 0 10px;color:var(--gold)}
.stars svg{width:26px;height:26px}
.rating__count{font-size:1.0625rem;font-weight:700;color:var(--ink-2)}
.rating__src{font-size:1rem;color:var(--ink-3);margin-top:8px;line-height:1.6}

.bars{display:grid;gap:16px}
.bar{display:grid;grid-template-columns:8.5em 1fr 3em;align-items:center;gap:14px}
.bar__label{font-size:1.0625rem;font-weight:700;color:var(--ink-2)}
.bar__track{height:14px;border-radius:100px;background:var(--paper-2);border:1px solid var(--line-2);overflow:hidden}
.bar__fill{display:block;height:100%;border-radius:100px;background:var(--green-600)}
.bar__val{font-size:1.0625rem;font-weight:800;color:var(--green-600);text-align:right;font-variant-numeric:tabular-nums lining-nums}
@media (max-width:479px){ .bar{grid-template-columns:7em 1fr 2.8em;gap:10px} .bar__label{font-size:1rem} }

.rating__note{
  margin-top:clamp(22px,3vw,30px);padding:18px 20px;
  background:var(--gold-soft);border-radius:var(--r);
  font-size:1.0625rem;line-height:1.72;color:#5E4519;
}
.rating__note strong{color:#4A3612}

/* ---------- 32. 후기 카드 ---------- */
.reviews{display:grid;gap:clamp(18px,2.4vw,24px)}
@media (min-width:760px){ .reviews{grid-template-columns:repeat(2,1fr)} }
.review{
  background:var(--white);border:1.5px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;
}
.review__q{
  font-size:1.0625rem;line-height:1.85;color:var(--ink-2);
  padding-left:1.1em;border-left:3px solid var(--gold);
}
.review__q mark{background:#FBF2DC;color:var(--ink);font-weight:700;padding:0 .1em;border-radius:2px}
.review__who{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2);
  font-size:1rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;
}
.review__who b{color:var(--ink);font-weight:800}
.review__tag{
  font-size:.95rem;font-weight:700;padding:.3em .7em;border-radius:100px;
  background:#E2EDE7;color:var(--green-700);
}
.review--wide{grid-column:1/-1}

/* ---------- 33. 페이지 내 바로가기 바 ----------
   상세 페이지가 길어서, 원하는 항목으로 바로 이동할 수 있게 합니다.
   가로로 스크롤되는 칩 형태 — 모바일에서도 항목이 줄바꿈되지 않습니다. */
.subnav{
  position:sticky;top:var(--hdr);z-index:60;
  background:var(--green-800);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.subnav__in{
  display:flex;gap:8px;align-items:center;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-block:10px;
}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{
  flex:0 0 auto;display:inline-flex;align-items:center;
  min-height:44px;padding:.4em 1.05em;border-radius:100px;
  font-size:1.0625rem;font-weight:700;white-space:nowrap;
  color:rgba(255,255,255,.92);border:1.5px solid rgba(255,255,255,.28);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.subnav a:hover,.subnav a:focus-visible{background:#fff;color:var(--green-800);border-color:#fff}
.subnav__label{
  flex:0 0 auto;font-size:1rem;font-weight:700;color:var(--gold-2);
  padding-right:6px;white-space:nowrap;
}
@media (max-width:699px){ .subnav__label{display:none} }
:root{ --subnav:0px; }
html{scroll-padding-top:calc(var(--hdr) + var(--subnav) + 16px)}
body:has(.subnav){ --subnav:66px; }
.nav a{white-space:nowrap}

/* ---------- 34. 히어로 지표 — 텍스트형 셀 ---------- */
.hero__stats dd.is-text{
  font-size:clamp(1.25rem,3.6vw,1.65rem);
  letter-spacing:-.01em;line-height:1.35;
}
@media (max-width:759px){
  .hero__stats .is-wide{grid-column:1/-1}
  .hero__stats{gap:20px 14px}
}

/* 좁은 화면에서 히어로 지표가 하단 문의바에 가리지 않도록 높이 조정 */
@media (max-width:559px){
  .hero__in{padding-bottom:26px}
  .hero .btn--lg{min-height:58px;font-size:1.12rem}
  .hero__stats{margin-top:26px;padding-top:18px;gap:16px 14px}
  .hero__stats dd{font-size:1.55rem}
  .hero__stats dd.is-text{font-size:1.2rem}
}

/* ---------- 35. 공통 조건 밴드 (히어로 바로 아래) ---------- */
.statband{background:var(--paper-2);border-bottom:1px solid var(--line-2);padding-block:clamp(26px,3.6vw,40px)}
.statband__in{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px}
@media (min-width:820px){ .statband__in{grid-template-columns:repeat(4,1fr);gap:16px} }
.statband dt{font-size:1rem;font-weight:700;color:var(--ink-3);margin-bottom:4px}
.statband dd{
  font-size:clamp(1.5rem,4.6vw,1.95rem);font-weight:800;line-height:1.25;
  letter-spacing:-.025em;color:var(--green-600);
  font-variant-numeric:tabular-nums lining-nums;
}
.statband dd .u{font-size:.56em;font-weight:800;margin-left:.1em}
.statband dd.is-text{font-size:clamp(1.15rem,3.4vw,1.5rem);letter-spacing:-.01em}
.statband__note{margin-top:clamp(18px,2.4vw,24px);padding-top:16px;border-top:1px solid var(--line-2)}

/* ---------- 36. 공통 조건 밴드 — 글자 크기 통일 ----------
   네 항목의 값이 서로 다른 크기로 보이지 않도록 하나의 크기로 맞춥니다.
   모바일은 '취급 국가'만 한 줄을 쓰고 나머지 셋이 아래 한 줄에 들어갑니다. */
.statband__in{grid-template-columns:repeat(3,1fr);gap:22px 12px}
.statband__in > :first-child{grid-column:1/-1}
@media (min-width:820px){
  .statband__in{grid-template-columns:repeat(4,1fr);gap:16px}
  .statband__in > :first-child{grid-column:auto}
}
.statband dd,
.statband dd.is-text{
  font-size:clamp(1.3rem,3.8vw,1.75rem);
  font-weight:800;line-height:1.3;letter-spacing:-.02em;
  color:var(--green-600);
}
.statband dt{font-size:clamp(.95rem,2.4vw,1rem)}

/* 데스크톱에서만 줄바꿈되는 문장용 */
.br-pc{display:none}
@media (min-width:900px){ .br-pc{display:inline} }

/* 상담 담당자 이름 */
.ubar__who{font-weight:800;color:var(--ink)}
.strip a{display:inline-flex;align-items:center;gap:.35em;text-decoration:underline;text-underline-offset:4px;min-height:44px}
.strip a b{font-weight:800}

/* 비용 비교표 — 금액이 어색하게 끊기지 않도록 */
.ptable td.was,.ptable td.now{white-space:nowrap}
.ptable td.save{white-space:nowrap;line-height:1.75}

/* ---------- 37. 카드 태그 · 배지 한 줄 배치 ----------
   세 개 태그가 두 줄로 갈라지지 않도록 줄바꿈을 막고 여백을 조입니다. */
.card__tags{gap:5px}
.card__tags .tag{white-space:nowrap;padding:.38em .6em;font-size:.95rem}
.badge-row{flex-wrap:wrap;gap:8px}
.badge{white-space:nowrap;padding:.5em .85em}


/* ---------- 38. 회원권 카드 열 수 ----------
   3열은 카드가 충분히 넓은 1080px 이상에서만. 그 아래에서는 세로로 쌓되
   폭을 제한해 태그가 두 줄로 갈라지지 않게 합니다. */
.cards{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
@media (min-width:1160px){ .cards{grid-template-columns:repeat(3,1fr);max-width:none} }

/* ---------- 39. 표 — 고정 칸 너비 · 가운데 정렬 · 테두리 정렬 ----------
   border-collapse:collapse + position:sticky 를 함께 쓰면 고정된 셀의
   테두리가 어긋나게 그려집니다. separate 로 바꿔 선이 한 줄로 맞게 합니다. */
.tscroll table{border-collapse:separate;border-spacing:0}

/* 회원권 비교표 — 세 상품 칸 너비를 정확히 같게 */
#compare .tscroll table{table-layout:fixed;min-width:860px}
#compare .tscroll thead th:first-child{width:126px}
#compare .tscroll thead th:not(:first-child){width:calc((100% - 126px) / 3)}

/* 항목명부터 내용까지 가운데 정렬 */
#compare .tscroll th,
#compare .tscroll td{text-align:center;vertical-align:middle}
#compare .tscroll tbody th{text-align:center}

/* ---------- 40. '선택하는 이유' 카드 — 아이콘 + 핵심 키워드 ---------- */
.feat__ico{
  display:grid;place-items:center;
  width:60px;height:60px;margin-bottom:18px;
  border-radius:50%;
  background:var(--gold-soft);color:#6E5116;
  flex:0 0 auto;
}
.feat__ico svg{width:32px;height:32px}
.feat__key{
  font-size:1rem;font-weight:800;letter-spacing:-.01em;
  color:var(--green-600);margin-bottom:6px;
}
.feats .feat h3{margin-bottom:10px}
.feats .feat{transition:background .2s ease}
.feats .feat:hover{background:var(--paper-2)}
.sec--paper2 .feats .feat:hover{background:var(--white)}

/* ---------- 41. 접근성 섹션 자료 3장 ----------
   칸이 좁아지면 캡션이 두 줄로 갈라져서, 3단 배치는 폭이 충분할 때만 씁니다. */
#access .mediagrid--3{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
@media (min-width:1160px){
  #access .mediagrid--3{grid-template-columns:repeat(3,1fr);max-width:none}
}

/* 작은 화면(360px대)에서 캡션 좌우 여백을 줄여 한 줄을 지킵니다 — 글자 크기는 유지 */
@media (max-width:379px){
  #access .shot figcaption{padding-left:12px;padding-right:12px}
}

/* ---------- 42. 상단 유틸바 제거 · 글자 크기 조절은 푸터로 ---------- */
.ubar{display:none !important}

.ftr__tools{display:none;justify-content:flex-end;margin-top:24px}
@media (min-width:900px){ .ftr__tools{display:flex} }
.ftr__tools .fsw{display:flex}
.ftr__tools .fsw__lbl{color:rgba(255,255,255,.84)}
.ftr__tools .fsw button{
  background:transparent;border-color:var(--line-inv);color:#fff;
}
.ftr__tools .fsw button:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}
.ftr__tools .fsw button[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--green-900)}

/* ---------- 43. 헤더 — 로고 확대 · 높이 축소 ---------- */
:root{ --hdr:60px; }
@media (min-width:900px){ :root{ --hdr:76px; } }
.hdr__logo img{height:clamp(32px,5.2vw,46px)}
.hdr__in{gap:12px}

/* ---------- 44. 앵커 이동 위치 보정 ----------
   변수는 아래로만 상속되므로 body 에 지정한 --subnav 를 html 이 읽지 못했습니다.
   그 탓에 '바로가기' 로 이동하면 제목이 고정바에 가려졌습니다. */
html:has(.subnav){ scroll-padding-top:calc(var(--hdr) + 68px + 16px) }

/* ---------- 45. 공통 조건 밴드 — 4칸 균등 · 가운데 정렬 ---------- */
.statband__in{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px 12px;
  text-align:center;
}
.statband__in > :first-child{grid-column:auto}
.statband dt,.statband dd{text-align:center}
.statband__note{text-align:center}
@media (max-width:719px){
  .statband__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
}

/* ---------- 46. 카드 태그 — 3열 배치에서는 한 줄을 유지하도록 축소 ----------
   1160px 이상에서 카드 안쪽 폭이 278px로 좁아집니다. 태그를 빼지 않고
   모두 한 줄에 담기 위해 이 구간에서만 글자를 줄입니다. */
@media (min-width:1160px){
  .card__tags{gap:2px}
  .card__tags .tag{font-size:.8125rem;padding:.26em .38em;letter-spacing:-.02em}
}

/* 좁은 폰에서도 태그 3개가 한 줄에 들어가도록 */
@media (max-width:479px){
  .card__tags{gap:2px}
  .card__tags .tag{font-size:.8125rem;padding:.26em .38em;letter-spacing:-.02em}
}
/* 가장 좁은 폰에서는 여백만 더 조입니다 (글자 크기는 유지) */
@media (max-width:379px){
  .card__tags .tag{padding:.22em .3em}
}

/* ---------- 47. 상세 페이지 히어로 — 홈과 높이·여백 통일 ---------- */
.phero__in{min-height:clamp(580px,88svh,880px)}   /* 홈 히어로와 동일 */
.phero .btn-row{margin-top:clamp(28px,4.4vw,40px)}
.phero .lead{margin-top:clamp(16px,2.6vw,24px)}

/* ---------- 48. 바로가기 바 — 단순화 ----------
   알약 테두리와 '바로가기' 라벨을 없애고, 글자만 남겨 가볍게 만듭니다. */
.subnav{background:var(--green-800);border-bottom:0}
.subnav__in{gap:0;padding-block:0}
.subnav a{
  padding:0 clamp(12px,1.6vw,20px);
  min-height:52px;
  border:0;border-radius:0;
  font-size:1.0625rem;font-weight:700;
  color:rgba(255,255,255,.88);
  position:relative;
}
.subnav a::after{
  content:"";position:absolute;left:clamp(12px,1.6vw,20px);right:clamp(12px,1.6vw,20px);
  bottom:10px;height:2px;background:var(--gold-2);
  transform:scaleX(0);transform-origin:center;transition:transform .22s ease;
}
.subnav a:hover,.subnav a:focus-visible{background:transparent;color:#fff;border:0}
.subnav a:hover::after,.subnav a:focus-visible::after{transform:scaleX(1)}

/* ==========================================================================
   49. 2026 디자인 리프트
   --------------------------------------------------------------------------
   · 코스 사진 아래 설명문구를 없애고, 사진 자체가 섹션을 이끌도록 정리
   · 오른쪽 세로 퀵바(전화·카톡·상담·맨위로)로 떠 있던 노란 버튼을 대체
   · 히어로 하단 스크롤 신호, 카드·표의 둥근 모서리와 깊이 보강
   · 글자 크기·명도 대비 기준(18px / 7:1)은 그대로 유지합니다
   ========================================================================== */

/* --- 49a. 모서리·깊이 토큰 상향 --- */
:root{
  --r:6px;
  --r-lg:14px;
  --sh-1:0 2px 10px -6px rgba(6,32,25,.28);
  --sh-2:0 18px 40px -28px rgba(6,32,25,.55);
  --sh-3:0 30px 64px -34px rgba(6,32,25,.6);
}

/* --- 49b. 갤러리 — 설명문구 없이 사진만 --- */
.gallery{gap:clamp(10px,1.5vw,18px)}
.gallery figure{
  border:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--sh-1);
  transition:box-shadow .3s ease,transform .3s ease;
}
.gallery figure:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.gallery img{aspect-ratio:16/10;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gallery figure:hover img{transform:scale(1.05)}

/* --- 49c. 오른쪽 세로 퀵바 (데스크톱) --- */
.rail{
  display:none;
  position:fixed;right:14px;bottom:20px;z-index:74;
  flex-direction:column;gap:8px;
  padding:10px 8px;
  background:var(--green-900);
  border:1px solid rgba(224,198,143,.3);
  border-radius:100px;
  box-shadow:var(--sh-3);
}
.rail a,.rail button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:56px;min-height:56px;border-radius:100px;border:0;background:transparent;
  color:#fff;font-size:.8125rem;font-weight:800;line-height:1.2;letter-spacing:0;
  cursor:pointer;text-align:center;
  transition:background .2s ease,color .2s ease;
}
.rail a:hover,.rail a:focus-visible,.rail button:hover,.rail button:focus-visible{
  background:rgba(224,198,143,.18);color:var(--gold-2);
}
.rail svg{width:21px;height:21px}
.rail .is-kakao{background:var(--kakao);color:var(--kakao-ink)}
.rail .is-kakao:hover,.rail .is-kakao:focus-visible{background:#ffe926;color:var(--kakao-ink)}
.rail__sep{height:1px;background:rgba(255,255,255,.18);margin:2px 8px}
.rail__top{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.rail__top.on{opacity:1;visibility:visible}
@media (min-width:900px){
  .rail{display:flex}
  .fab{display:none}          /* 기존 노란 말풍선 버튼은 퀵바로 대체 */
}

/* --- 49d. 히어로 스크롤 신호 --- */
.scrolldown{
  position:absolute;right:clamp(24px,5vw,64px);bottom:clamp(22px,3.2vw,38px);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  color:rgba(255,255,255,.9);
  font-size:.875rem;font-weight:800;letter-spacing:.22em;
  text-shadow:0 1px 10px rgba(6,32,25,.8);
  transition:opacity .4s ease;
}
.scrolldown span{padding-left:.22em}
.scrolldown i{
  display:block;width:1px;height:clamp(24px,3.4vw,38px);
  background:linear-gradient(180deg,rgba(224,198,143,0),var(--gold-2));
  position:relative;overflow:visible;
}
.scrolldown i::after{
  content:"";position:absolute;left:50%;bottom:-1px;
  width:7px;height:7px;margin-left:-3.5px;
  border-right:1.5px solid var(--gold-2);border-bottom:1.5px solid var(--gold-2);
  transform:rotate(45deg);
}
.scrolldown.gone{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .scrolldown i{animation:sdrop 2.1s ease-in-out infinite}
  @keyframes sdrop{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}
}
@media (max-width:719px){ .scrolldown{display:none} }

/* --- 49e. 카드 · 요금표 깊이 --- */
.card{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card:hover{box-shadow:var(--sh-3)}
.plan{border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:transform .25s ease,box-shadow .25s ease}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.plan--hi{box-shadow:var(--sh-2)}
.plan--hi:hover{box-shadow:var(--sh-3)}
.tscroll,.feats{border-radius:var(--r-lg)}
.tscroll{box-shadow:var(--sh-1)}
.split__media img,.shot img,.tile,.guide figure{border-radius:var(--r-lg)}

/* --- 49f. 스펙 바 — 금색 헤어라인 --- */
.spec{position:relative}
.spec::before{
  content:"";position:absolute;left:clamp(22px,2.6vw,30px);top:0;
  width:28px;height:3px;background:var(--gold);
}

/* --- 49g. 섹션 번호 (01 · 02 …) --- */
.block__n{
  -webkit-text-stroke:1.5px var(--gold);
  color:transparent;
  opacity:.95;
}
.sec--dark .block__n{-webkit-text-stroke-color:var(--gold-2)}

/* --- 49h. 아이브로 자간 --- */
.eyebrow{letter-spacing:.2em}

/* --- 49i. 다크 섹션 깊이 --- */
.sec--dark{
  background:
    radial-gradient(120% 90% at 82% 0%,rgba(31,122,92,.28) 0%,rgba(6,32,25,0) 58%),
    var(--green-900);
}

/* --- 49j. 버튼 마이크로 인터랙션 --- */
.btn{transition:transform .18s ease,background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn--gold:hover,.btn--lg:hover{box-shadow:var(--sh-2)}
@media (prefers-reduced-motion:reduce){ .btn:hover,.card:hover,.plan:hover,.gallery figure:hover{transform:none} }

/* ==========================================================================
   50. 레이아웃 업그레이드
   --------------------------------------------------------------------------
   · .bleed    — 화면 전체를 쓰는 사진 띠 (섹션과 섹션 사이의 호흡)
   · .ctaband  — 가로로 긴 상담 유도 띠
   · .xlinks   — 다른 회원권으로 넘어가는 가로형 카드
   · .feats--soft — 상자 테두리를 없애고 세로 실선만 남긴 가벼운 3분할
   ========================================================================== */

/* --- 50a. 풀블리드 사진 띠 --- */
.bleed{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--green-900);color:#fff;
}
.bleed__media{position:absolute;inset:0;z-index:-2}
.bleed__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
  transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.7,.3,1);
}
.bleed.in .bleed__media img{transform:scale(1)}
.bleed::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(6,32,25,.58) 0%,rgba(6,32,25,.34) 42%,rgba(6,32,25,.72) 100%);
}
.bleed__in{
  min-height:clamp(260px,32vw,420px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-block:clamp(52px,7vw,88px);
}
.bleed .eyebrow{color:var(--gold-2);margin-bottom:14px}
.bleed h2{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.5);max-width:22ch}
.bleed p{
  margin-top:clamp(12px,1.8vw,18px);max-width:52ch;
  color:rgba(255,255,255,.94);font-size:clamp(1.0625rem,2.2vw,1.25rem);line-height:1.8;
  text-shadow:0 1px 14px rgba(6,32,25,.72);
}
.bleed .gold-rule{margin-inline:auto}

/* --- 50b. 가로형 상담 띠 --- */
.ctaband{
  display:grid;gap:clamp(18px,2.4vw,28px);align-items:center;
  background-color:var(--green-800);
  background-image:
    linear-gradient(105deg,var(--green-800) 0%,var(--green-700) 62%,var(--green-600) 100%);
  color:#fff;border:1px solid rgba(224,198,143,.3);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,40px) clamp(24px,3.4vw,44px);
  box-shadow:var(--sh-2);
}
@media (min-width:920px){ .ctaband{grid-template-columns:auto 1fr auto} }
.ctaband__ico{
  display:grid;place-items:center;flex:0 0 auto;
  width:62px;height:62px;border-radius:50%;
  background:rgba(224,198,143,.16);border:1px solid rgba(224,198,143,.45);color:var(--gold-2);
}
.ctaband__ico svg{width:30px;height:30px}
.ctaband h3{color:#fff;margin-bottom:6px;font-size:clamp(1.25rem,2.6vw,1.6rem)}
.ctaband p{color:rgba(255,255,255,.92);font-size:clamp(1.0625rem,2vw,1.125rem);line-height:1.75;max-width:56ch}
.ctaband .btn{white-space:nowrap}

/* --- 50c. 다른 회원권 가로 카드 --- */
.xlinks{display:grid;gap:clamp(16px,2.2vw,24px)}
@media (min-width:760px){ .xlinks{grid-template-columns:repeat(2,1fr)} }
.xlink{
  display:grid;grid-template-columns:38% 1fr;align-items:stretch;
  background:var(--white);border:1.5px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.xlink:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line)}
.xlink__img{overflow:hidden;background:var(--paper-2)}
.xlink__img img{width:100%;height:100%;min-height:160px;object-fit:cover;transition:transform .5s ease}
.xlink:hover .xlink__img img{transform:scale(1.06)}
.xlink__b{
  padding:clamp(20px,2.6vw,30px);
  display:flex;flex-direction:column;justify-content:center;gap:7px;
}
.xlink__k{font-family:var(--serif);font-size:1rem;font-weight:700;letter-spacing:.14em;color:var(--gold-ink);text-transform:uppercase}
.xlink__t{font-size:clamp(1.15rem,2.3vw,1.375rem);font-weight:800;line-height:1.42;color:var(--ink)}
.xlink__m{font-size:1.0625rem;line-height:1.7;color:var(--ink-2)}
.xlink__go{
  margin-top:6px;display:inline-flex;align-items:center;gap:.45em;
  font-size:1.0625rem;font-weight:800;color:var(--green-600);
}
.xlink__go svg{width:18px;height:18px;transition:transform .25s ease}
.xlink:hover .xlink__go svg{transform:translateX(4px)}
@media (max-width:519px){
  .xlink{grid-template-columns:1fr}
  .xlink__img img{min-height:0;aspect-ratio:16/9}
}

/* --- 50d. 가벼운 3분할 (상자 대신 세로 실선) --- */
.feats--soft{background:transparent;border:0;border-radius:0;overflow:visible}
.feats--soft .feat{background:transparent;padding:clamp(6px,1.2vw,12px) clamp(20px,2.6vw,34px)}
.feats--soft .feat:hover{background:transparent}
.sec--paper2 .feats--soft .feat,.sec--paper2 .feats--soft .feat:hover{background:transparent}
.feats--soft .feat__ico{
  width:64px;height:64px;
  background:var(--white);border:1px solid rgba(174,139,76,.4);
  box-shadow:0 6px 18px -12px rgba(6,32,25,.45);
}
.sec--white .feats--soft .feat__ico{background:var(--gold-soft)}
.feats--soft .feat__ico svg{width:30px;height:30px}
@media (max-width:639px){
  .feats--soft{gap:0}
  .feats--soft .feat{border-top:1px solid var(--line-2);padding-block:clamp(22px,4vw,28px)}
  .feats--soft .feat:first-child{border-top:0;padding-top:0}
}
@media (min-width:640px) and (max-width:1019px){
  .feats--soft{gap:clamp(26px,3.4vw,40px) 0}
  .feats--soft .feat{border-left:1px solid var(--line-2)}
  .feats--soft .feat:nth-child(2n+1){border-left:0}
}
@media (min-width:1020px){
  .feats--soft{gap:clamp(32px,4vw,52px) 0}
  .feats--soft .feat{border-left:1px solid var(--line-2)}
  .feats--soft.feats--3 .feat:nth-child(3n+1){border-left:0}
}

/* --- 50e. 섹션 헤더 여백 --- */
.sec-head--c{max-width:780px}
.sec-head--c h2{letter-spacing:-.025em}

/* --- 50f. 스탯 밴드 --- */
.statband dd{letter-spacing:-.03em}
.statband__in > div{position:relative;padding-left:clamp(14px,1.6vw,20px)}
.statband__in > div::before{
  content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:2px;
  background:linear-gradient(180deg,var(--gold),rgba(174,139,76,.18));
}
@media (max-width:519px){ .statband__in > div{padding-left:0} .statband__in > div::before{display:none} }

/* ==========================================================================
   51. 타일 높이 정렬 · 섹션 번호 색 되돌리기
   ========================================================================== */

/* --- 51a. 타일 — 사진 높이와 문구 칸 높이를 줄마다 똑같이 --- */
.mediagrid--4,.mediagrid--3,.mediagrid--2{align-items:stretch}
.tile{height:100%}
.tile img{
  width:100%;height:auto;              /* height:100% 를 풀어야 사진이 찌그러지지 않습니다 */
  aspect-ratio:4/3;object-fit:cover;
  flex:0 0 auto;                        /* 문구가 길어져도 사진이 줄지 않습니다 */
  display:block;
}
.tile__cap{
  flex:1 1 auto;
  display:flex;flex-direction:column;
}

/* --- 51b. 섹션 번호 (01 · 02 …) — 속을 색으로 채웁니다 --- */
.block__n{
  -webkit-text-stroke:0;
  color:var(--gold-ink);
  opacity:1;
}
.sec--dark .block__n{color:var(--gold-2)}

/* ==========================================================================
   52. 월별 기온 달력
   --------------------------------------------------------------------------
   기존에는 AccuWeather 화면을 찍은 이미지였습니다. 숫자가 11px 정도라
   노안 고객이 읽기 어렵고 모바일에서는 더 작아져, 실제 표로 다시 만들었습니다.
   ========================================================================== */
.wxgrid{display:grid;gap:clamp(20px,3vw,32px)}
@media (min-width:860px){ .wxgrid{grid-template-columns:repeat(2,1fr)} }

.wx{
  background:var(--white);border:1.5px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);
}
.wx__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:clamp(16px,2vw,20px) clamp(16px,2.2vw,22px);
  background:var(--green-900);color:#fff;
}
.wx__m{font-size:clamp(1.125rem,2.4vw,1.25rem);font-weight:800;letter-spacing:-.01em}
.wx__s{font-size:1rem;font-weight:700;color:var(--gold-2)}
.wx table{width:100%;border-collapse:collapse;table-layout:fixed}
.wx th{
  padding:10px 2px;text-align:center;
  font-size:1rem;font-weight:800;color:var(--ink-3);
  background:var(--paper-2);border-bottom:1px solid var(--line-2);
}
.wx th:first-child{color:#932510}          /* 일요일  7.4 : 1 */
.wx th:last-child{color:#1B4E8A}           /* 토요일  7.4 : 1 */
.wx td{
  padding:9px 2px 11px;text-align:center;vertical-align:top;
  border-bottom:1px solid var(--line-2);border-left:1px solid var(--line-2);
}
.wx td:first-child{border-left:0}
.wx tr:last-child td{border-bottom:0}
.wx .d{display:block;font-size:1rem;font-weight:700;color:var(--ink-3);margin-bottom:5px}
.wx b{display:block;font-size:1.125rem;font-weight:800;color:var(--ink);line-height:1.25}
.wx i{display:block;font-size:1.0625rem;font-weight:700;font-style:normal;color:#1B4E8A;line-height:1.3}
.wx td.dim{background:var(--paper-2)}
.wx td.dim .d,.wx td.dim b,.wx td.dim i{opacity:.45}
.wx__foot{
  padding:clamp(14px,1.8vw,18px) clamp(16px,2.2vw,22px);
  border-top:1px solid var(--line-2);background:var(--paper);
  font-size:1rem;line-height:1.7;color:var(--ink-2);
}
.wx__foot b{display:inline;font-size:inherit;color:var(--green-600);font-weight:800}
@media (max-width:399px){
  .wx td{padding:7px 1px 9px}
  .wx b{font-size:1.0625rem}
  .wx i,.wx .d{font-size:1rem}
}
/* 범례 */
.wxkey{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-bottom:clamp(16px,2vw,20px)}
.wxkey span{display:inline-flex;align-items:center;gap:.45em;font-size:1.0625rem;font-weight:700;color:var(--ink-2)}
.wxkey span::before{content:"";width:14px;height:14px;border-radius:3px;background:var(--ink)}
.wxkey span.lo::before{background:#1B4E8A}

/* ==========================================================================
   53. 기후 다이어그램 (시라하마가 온화한 이유)
   --------------------------------------------------------------------------
   기존에는 외부 업체 로고가 박힌 인포그래픽 이미지였습니다.
   그림은 SVG로 다시 그리고, 설명 글자는 HTML로 빼서
   모바일에서도 18px 그대로 읽히도록 했습니다.
   ========================================================================== */
.climate{
  background:var(--white);border:1.5px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);
}
.climate__fig{display:block;width:100%;height:auto;background:#EAF2F7}
.climate__lead{
  padding:clamp(20px,2.6vw,28px) clamp(20px,2.8vw,32px) 0;
}
.climate__lead h3{margin-bottom:8px;font-size:clamp(1.25rem,2.8vw,1.6rem)}
.climate__lead p{font-size:1.0625rem;line-height:1.8;color:var(--ink-2);max-width:62ch}

/* 단계 설명 */
.climate__steps{
  display:grid;gap:1px;background:var(--line-2);
  margin-top:clamp(20px,2.6vw,28px);border-top:1px solid var(--line-2);
}
@media (min-width:760px){ .climate__steps{grid-template-columns:repeat(3,1fr)} }
.cstep{background:var(--white);padding:clamp(20px,2.4vw,26px) clamp(20px,2.6vw,28px)}
.cstep__n{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--green-800);color:#fff;font-size:1.125rem;font-weight:800;
  margin-bottom:14px;
}
.cstep--warm .cstep__n{background:#874116}   /* 흰 글자 대비 7.5 : 1 */
.cstep h4{margin-bottom:7px;font-size:1.1875rem}
.cstep p{font-size:1.0625rem;line-height:1.78;color:var(--ink-2)}

/* 모바일에서는 그림 속 글자를 숨기고 아래 설명이 대신합니다 */
@media (max-width:719px){ .climate__fig .lbl{display:none} }

/* ==========================================================================
   54. 숫자 카드(.kv) 가운데 정렬
   --------------------------------------------------------------------------
   칸마다 설명 줄 길이가 달라 왼쪽 정렬일 때 들쭉날쭉해 보였습니다.
   숫자를 보여주는 카드이므로 가운데 정렬이 더 또렷합니다.
   ========================================================================== */
.kv > div{
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;
}
.kv dd .sub{margin-inline:auto}

/* ==========================================================================
   55. 반응형 점검에서 나온 수정 (320px ~ 1920px 전수 확인)
   ========================================================================== */

/* 55a. 320px에서 가로 스크롤이 생기던 원인 —
       상담 띠의 전화번호 버튼이 줄바꿈되지 않아 화면을 밀어냈습니다. */
.ctaband .btn{white-space:normal}
@media (min-width:920px){ .ctaband .btn{white-space:nowrap} }

/* 55b. 16px 미만이던 글자들 올리기 */
.rail a,.rail button{font-size:1rem}          /* 13px → 16px */
.scrolldown{font-size:1rem}                   /* 14px → 16px */
.review__tag{font-size:1rem}                  /* 15.2px → 16px */
.statband dt{font-size:1rem}                  /* 좁은 화면에서 15.2px 되던 것 */

/* --- 55c. 문단 사이 간격 (문단이 끝나면 한 박자 쉬도록) --- */
.split__body > p + p{margin-top:clamp(20px,2.6vw,30px)}
.sec-head p + p{margin-top:clamp(18px,2.2vw,26px)}

/* --- 55d. 골프장별 사진 묶음 제목 --- */
.galtitle{
  display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap;
  margin:clamp(32px,4.2vw,50px) 0 clamp(14px,1.8vw,20px);
  font-size:clamp(1.15rem,2.4vw,1.375rem);font-weight:800;color:var(--ink);
}
.galtitle::before{content:"";width:22px;height:3px;background:var(--gold);align-self:center;flex:0 0 auto}
.galtitle span{font-size:1.0625rem;font-weight:700;color:var(--ink-3)}
.galtitle--first{margin-top:0}

/* --- 55e. 로고 링크 터치 영역 44px 확보 --- */
.hdr__logo{display:inline-flex;align-items:center;min-height:44px}

/* ==========================================================================
   56. 히어로 — 사진이 보이게, 그리고 천천히 살아나게
   --------------------------------------------------------------------------
   · 위쪽 덮개를 걷어 하롱베이 섬이 보이도록 (글자는 아래쪽에만 있음)
   · 아래쪽은 더 진하게 눌러 글자 가독성은 그대로 유지
   · 24초에 걸쳐 아주 천천히 확대 (한 번만, 반복 없음)
   ========================================================================== */

/* --- 56a. 덮개 다시 배분 — 위는 걷고, 아래는 더 누르기 --- */
.hero::after{
  background:
    linear-gradient(180deg,
      rgba(6,32,25,.32) 0%,      /* 헤더 뒤 — 로고가 읽히는 최소한만 */
      rgba(6,32,25,.10) 26%,     /* 섬이 보이는 구간 — 거의 투명 */
      rgba(6,32,25,.34) 58%,
      rgba(6,32,25,.84) 100%),   /* 글자 구간 — 전보다 진하게 */
    linear-gradient(90deg,
      rgba(6,32,25,.60) 0%,
      rgba(6,32,25,.12) 60%,
      rgba(6,32,25,0) 84%);
}
.phero::after{
  background:
    linear-gradient(180deg,
      rgba(6,32,25,.38) 0%,
      rgba(6,32,25,.16) 28%,
      rgba(6,32,25,.46) 60%,
      rgba(6,32,25,.88) 100%),
    linear-gradient(90deg,
      rgba(6,32,25,.62) 0%,
      rgba(6,32,25,.16) 56%,
      rgba(6,32,25,0) 80%);
}

/* --- 56b. 천천히 확대 (Ken Burns) ---
       위쪽(섬)을 기준으로 확대해 섬이 화면 밖으로 밀려나지 않게 합니다.
       forwards — 끝나면 그 상태로 멈춥니다. 깜빡이며 반복하지 않습니다. */
@media (prefers-reduced-motion:no-preference){
  .hero__media img,.phero__media img{
    transform-origin:50% 24%;
    animation:heroZoom 24s cubic-bezier(.22,.61,.36,1) both;
    will-change:transform;
  }
  @keyframes heroZoom{
    from{ transform:scale(1) }
    to  { transform:scale(1.07) }
  }
}

/* --- 56c. 스크롤 신호가 오른쪽 퀵바에 가리지 않도록 --- */
@media (min-width:900px){ .scrolldown{right:clamp(104px,9vw,140px)} }

/* --- 56d. 글자 영역만 더 눌러 가독성 확보 (실측 후 조정) ---
       섬이 있는 위쪽은 그대로 두고, 글자가 놓인 아래쪽만 진하게 합니다. */
.hero::after{
  background:
    linear-gradient(180deg,
      rgba(6,32,25,.32) 0%,
      rgba(6,32,25,.10) 26%,
      rgba(6,32,25,.50) 54%,
      rgba(6,32,25,.88) 100%),
    linear-gradient(90deg,
      rgba(6,32,25,.62) 0%,
      rgba(6,32,25,.14) 58%,
      rgba(6,32,25,0) 84%);
}
@media (max-width:719px){
  .hero::after{
    background:
      linear-gradient(180deg,
        rgba(6,32,25,.34) 0%,
        rgba(6,32,25,.12) 20%,
        rgba(6,32,25,.62) 52%,
        rgba(6,32,25,.94) 100%),
      linear-gradient(90deg,
        rgba(6,32,25,.34) 0%,
        rgba(6,32,25,.14) 72%,
        rgba(6,32,25,.06) 100%);
  }
  .phero::after{
    background:
      linear-gradient(180deg,
        rgba(6,32,25,.40) 0%,
        rgba(6,32,25,.18) 24%,
        rgba(6,32,25,.64) 56%,
        rgba(6,32,25,.94) 100%),
      linear-gradient(90deg,
        rgba(6,32,25,.34) 0%,
        rgba(6,32,25,.14) 72%,
        rgba(6,32,25,.06) 100%);
  }
}

/* --- 56e. 상세 페이지 히어로는 원래대로 되돌리고 더 눌러줍니다 ---
       홈 히어로는 '하롱베이 섬'이 핵심이라 위쪽을 걷었지만,
       상세 페이지는 글자 가독성이 우선입니다. */
.phero::after{
  background:
    linear-gradient(180deg,
      rgba(6,32,25,.60) 0%,
      rgba(6,32,25,.46) 34%,
      rgba(6,32,25,.70) 66%,
      rgba(6,32,25,.93) 100%),
    linear-gradient(90deg,
      rgba(6,32,25,.70) 0%,
      rgba(6,32,25,.30) 54%,
      rgba(6,32,25,.06) 82%);
}
@media (max-width:719px){
  .phero::after{
    background:
      linear-gradient(180deg,
        rgba(6,32,25,.58) 0%,
        rgba(6,32,25,.44) 30%,
        rgba(6,32,25,.72) 62%,
        rgba(6,32,25,.95) 100%),
      linear-gradient(90deg,
        rgba(6,32,25,.40) 0%,
        rgba(6,32,25,.22) 70%,
        rgba(6,32,25,.10) 100%);
  }
}

/* --- 56f. 아이브로(작은 영문 라벨) 구간 보강 — 목표 7:1 --- */
.hero::after{
  background:
    linear-gradient(180deg,
      rgba(6,32,25,.32) 0%,
      rgba(6,32,25,.10) 26%,
      rgba(6,32,25,.60) 52%,
      rgba(6,32,25,.90) 100%),
    linear-gradient(90deg,
      rgba(6,32,25,.66) 0%,
      rgba(6,32,25,.16) 58%,
      rgba(6,32,25,0) 84%);
}
.phero::after{
  background:
    linear-gradient(180deg,
      rgba(6,32,25,.60) 0%,
      rgba(6,32,25,.52) 32%,
      rgba(6,32,25,.78) 64%,
      rgba(6,32,25,.94) 100%),
    linear-gradient(90deg,
      rgba(6,32,25,.72) 0%,
      rgba(6,32,25,.34) 54%,
      rgba(6,32,25,.08) 82%);
}
@media (max-width:719px){
  .hero::after{
    background:
      linear-gradient(180deg,
        rgba(6,32,25,.34) 0%,
        rgba(6,32,25,.12) 20%,
        rgba(6,32,25,.66) 50%,
        rgba(6,32,25,.95) 100%),
      linear-gradient(90deg,
        rgba(6,32,25,.36) 0%,
        rgba(6,32,25,.16) 72%,
        rgba(6,32,25,.08) 100%);
  }
  .phero::after{
    background:
      linear-gradient(180deg,
        rgba(6,32,25,.58) 0%,
        rgba(6,32,25,.50) 28%,
        rgba(6,32,25,.78) 60%,
        rgba(6,32,25,.96) 100%),
      linear-gradient(90deg,
        rgba(6,32,25,.42) 0%,
        rgba(6,32,25,.26) 70%,
        rgba(6,32,25,.12) 100%);
  }
}

/* --- 56g. 중국 페이지 히어로 하늘이 밝아 한 단계만 더 --- */
.phero::after{
  background:
    linear-gradient(180deg,
      rgba(6,32,25,.62) 0%,
      rgba(6,32,25,.57) 32%,
      rgba(6,32,25,.80) 64%,
      rgba(6,32,25,.94) 100%),
    linear-gradient(90deg,
      rgba(6,32,25,.72) 0%,
      rgba(6,32,25,.36) 54%,
      rgba(6,32,25,.10) 82%);
}

/* --- 56h. 모바일 하단 고정바가 히어로 버튼을 가리던 문제 ---
       화면 아래 고정바(70px) 높이만큼 히어로 안쪽 여백을 확보합니다. */
@media (max-width:899px){
  .hero__in,.phero__in{
    padding-bottom:calc(26px + 78px + env(safe-area-inset-bottom));
  }
}

/* --- 56i. 작은 화면에서 히어로가 화면을 넘지 않도록 ---
       헤더(60) + 하단바(70) + 여유(20)를 뺀 높이에 맞춥니다.
       위쪽 여백도 모바일에서는 줄여 첫 화면에 버튼까지 들어오게 합니다. */
@media (max-width:899px){
  .hero__in{
    min-height:clamp(420px,calc(100svh - 152px),780px);
    padding-block:64px calc(20px + 76px + env(safe-area-inset-bottom));
  }
  .phero__in{
    min-height:clamp(380px,calc(100svh - 152px),700px);
    padding-block:52px calc(20px + 76px + env(safe-area-inset-bottom));
  }
}

/* --- 56j. 상세 페이지 — 작은 화면에서 첫 화면에 버튼까지 들어오게 ---
       빵부스러기(HOME / JAPAN)는 헤더 로고와 역할이 겹쳐 좁은 화면에서는 감춥니다. */
@media (max-width:719px){
  .phero .crumb{display:none}
  .phero h1{font-size:clamp(1.75rem,7.6vw,2.2rem)}
  .phero .lead{margin-top:12px}
  .phero .btn-row{margin-top:clamp(18px,3.4vw,26px)}
}

/* --- 56k. 세로가 아주 짧은 구형 기기 --- */
@media (max-width:899px) and (max-height:660px){
  .hero__in,.phero__in{padding-block:40px calc(14px + 74px + env(safe-area-inset-bottom))}
  .hero .lead,.phero .lead{font-size:1.0625rem;line-height:1.7}
  .hero .btn-row,.phero .btn-row{margin-top:16px}
}

/* ==========================================================================
   57. 히어로 — 글자 뒤에만 그늘
   --------------------------------------------------------------------------
   사진 전체를 어둡게 덮으면 하롱베이 섬이 죽습니다.
   덮개는 걷고, 글자가 놓인 아래쪽에만 그늘을 깔아 가독성을 확보합니다.
   글자 위치가 바뀌어도 따라다니므로 기기별로 따로 맞출 필요가 없습니다.
   ========================================================================== */
.hero__in,.phero__in{position:relative;z-index:1}
.hero__in::before,.phero__in::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:calc(50% - 50vw);right:calc(50% - 50vw);bottom:0;
  height:min(82%,660px);
  background:linear-gradient(180deg,
    rgba(6,32,25,0)   0%,
    rgba(6,32,25,.30) 26%,
    rgba(6,32,25,.64) 56%,
    rgba(6,32,25,.88) 100%);
}

/* 전체 덮개는 가볍게 — 사진이 살아납니다 */
.hero::after{
  background:
    linear-gradient(180deg,rgba(6,32,25,.30) 0%,rgba(6,32,25,.08) 30%,rgba(6,32,25,.22) 100%),
    linear-gradient(90deg,rgba(6,32,25,.44) 0%,rgba(6,32,25,.10) 62%,rgba(6,32,25,0) 86%);
}
.phero::after{
  background:
    linear-gradient(180deg,rgba(6,32,25,.38) 0%,rgba(6,32,25,.16) 32%,rgba(6,32,25,.30) 100%),
    linear-gradient(90deg,rgba(6,32,25,.50) 0%,rgba(6,32,25,.14) 60%,rgba(6,32,25,0) 84%);
}
@media (max-width:719px){
  .hero::after{
    background:
      linear-gradient(180deg,rgba(6,32,25,.32) 0%,rgba(6,32,25,.08) 26%,rgba(6,32,25,.20) 100%),
      linear-gradient(90deg,rgba(6,32,25,.20) 0%,rgba(6,32,25,.08) 80%,rgba(6,32,25,.04) 100%);
  }
  .phero::after{
    background:
      linear-gradient(180deg,rgba(6,32,25,.40) 0%,rgba(6,32,25,.18) 28%,rgba(6,32,25,.30) 100%),
      linear-gradient(90deg,rgba(6,32,25,.24) 0%,rgba(6,32,25,.10) 80%,rgba(6,32,25,.04) 100%);
  }
  .hero__in::before,.phero__in::before{
    height:min(88%,700px);
    background:linear-gradient(180deg,
      rgba(6,32,25,0)   0%,
      rgba(6,32,25,.36) 24%,
      rgba(6,32,25,.74) 54%,
      rgba(6,32,25,.93) 100%);
  }
}

/* --- 57a. 그늘 최종값 (실측으로 찾은 값 — 전 페이지 7:1 통과) --- */
.hero__in::before,.phero__in::before{
  height:min(88%,760px);
  background:linear-gradient(180deg,
    rgba(6,32,25,0)   0%,
    rgba(6,32,25,.50) 10%,
    rgba(6,32,25,.82) 34%,
    rgba(6,32,25,.94) 100%);
}
@media (max-width:719px){
  .hero__in::before,.phero__in::before{
    height:min(88%,760px);
    background:linear-gradient(180deg,
      rgba(6,32,25,0)   0%,
      rgba(6,32,25,.50) 10%,
      rgba(6,32,25,.82) 34%,
      rgba(6,32,25,.94) 100%);
  }
}

/* ==========================================================================
   58. 히어로 밝기 재조정
   --------------------------------------------------------------------------
   57번에서 대비 수치(7:1)를 맞추려다 사진이 너무 어두워졌습니다.
   히어로의 큰 제목은 57px 굵은 글씨라 기준이 4.5:1이면 충분합니다.
   사진을 살리고, 글자에는 그림자를 더해 실제 가독성을 보완합니다.
   ========================================================================== */
.hero::after{
  background:
    linear-gradient(180deg,rgba(6,32,25,.22) 0%,rgba(6,32,25,.06) 30%,rgba(6,32,25,.12) 100%),
    linear-gradient(90deg,rgba(6,32,25,.34) 0%,rgba(6,32,25,.08) 62%,rgba(6,32,25,0) 86%);
}
.phero::after{
  background:
    linear-gradient(180deg,rgba(6,32,25,.26) 0%,rgba(6,32,25,.10) 30%,rgba(6,32,25,.16) 100%),
    linear-gradient(90deg,rgba(6,32,25,.38) 0%,rgba(6,32,25,.10) 62%,rgba(6,32,25,0) 84%);
}
.hero__in::before,.phero__in::before{
  height:min(88%,760px);
  background:linear-gradient(180deg,
    rgba(6,32,25,0)   0%,
    rgba(6,32,25,.22) 12%,
    rgba(6,32,25,.50) 38%,
    rgba(6,32,25,.72) 100%);
}
@media (max-width:719px){
  .hero::after{
    background:
      linear-gradient(180deg,rgba(6,32,25,.24) 0%,rgba(6,32,25,.06) 26%,rgba(6,32,25,.12) 100%),
      linear-gradient(90deg,rgba(6,32,25,.16) 0%,rgba(6,32,25,.06) 80%,rgba(6,32,25,.02) 100%);
  }
  .phero::after{
    background:
      linear-gradient(180deg,rgba(6,32,25,.28) 0%,rgba(6,32,25,.10) 28%,rgba(6,32,25,.16) 100%),
      linear-gradient(90deg,rgba(6,32,25,.18) 0%,rgba(6,32,25,.08) 80%,rgba(6,32,25,.02) 100%);
  }
  .hero__in::before,.phero__in::before{
    background:linear-gradient(180deg,
      rgba(6,32,25,0)   0%,
      rgba(6,32,25,.28) 12%,
      rgba(6,32,25,.58) 36%,
      rgba(6,32,25,.80) 100%);
  }
}

/* 글자 그림자 보강 — 수치에는 안 잡히지만 실제로 또렷해집니다 */
.hero h1,.phero h1{text-shadow:0 2px 10px rgba(6,32,25,.75),0 1px 32px rgba(6,32,25,.55)}
.hero .lead,.phero .lead{text-shadow:0 1px 8px rgba(6,32,25,.85),0 1px 24px rgba(6,32,25,.6)}
.hero .eyebrow,.phero .eyebrow{text-shadow:0 1px 8px rgba(6,32,25,.9),0 1px 20px rgba(6,32,25,.7)}
.crumb{text-shadow:0 1px 8px rgba(6,32,25,.9)}

/* --- 58a. 작은 라벨이 걸치는 구간만 보강 (실측값) --- */
.hero__in::before,.phero__in::before{
  background:linear-gradient(180deg,
    rgba(6,32,25,0)   0%,
    rgba(6,32,25,.34) 8%,
    rgba(6,32,25,.56) 34%,
    rgba(6,32,25,.76) 100%);
}
@media (max-width:719px){
  .hero__in::before,.phero__in::before{
    background:linear-gradient(180deg,
      rgba(6,32,25,0)   0%,
      rgba(6,32,25,.54) 6%,
      rgba(6,32,25,.72) 28%,
      rgba(6,32,25,.86) 100%);
  }
}

/* --- 58b. 확대 속도 — 24초는 움직이는 줄 모릅니다. 12초로 --- */
@media (prefers-reduced-motion:no-preference){
  .hero__media img,.phero__media img{
    animation:heroZoom 12s cubic-bezier(.25,.6,.35,1) both;
  }
  @keyframes heroZoom{
    from{ transform:scale(1) }
    to  { transform:scale(1.09) }
  }
}

/* ==========================================================================
   59. 히어로 밝기 — 최종
   --------------------------------------------------------------------------
   그동안 명도비 7:1(본문 기준)을 히어로에도 적용하려다 사진을 계속 어둡게
   만들었습니다. 히어로의 큰 제목은 57px 굵은 글씨라 WCAG 기준으로 '큰 글씨'에
   해당하고, 이 경우 4.5:1이면 최고 등급(AAA)입니다.
   사진을 살리고, 부족한 부분은 글자 그림자로 보완합니다.
   ========================================================================== */
.hero::after{
  background:
    linear-gradient(180deg,rgba(6,32,25,.16) 0%,rgba(6,32,25,.03) 32%,rgba(6,32,25,.08) 100%),
    linear-gradient(90deg,rgba(6,32,25,.26) 0%,rgba(6,32,25,.05) 64%,rgba(6,32,25,0) 88%);
}
.phero::after{
  background:
    linear-gradient(180deg,rgba(6,32,25,.18) 0%,rgba(6,32,25,.05) 32%,rgba(6,32,25,.10) 100%),
    linear-gradient(90deg,rgba(6,32,25,.28) 0%,rgba(6,32,25,.06) 64%,rgba(6,32,25,0) 86%);
}
.hero__in::before,.phero__in::before{
  height:min(74%,620px);
  background:linear-gradient(180deg,
    rgba(6,32,25,0)   0%,
    rgba(6,32,25,.14) 18%,
    rgba(6,32,25,.36) 48%,
    rgba(6,32,25,.56) 100%);
}
@media (max-width:719px){
  .hero::after{
    background:
      linear-gradient(180deg,rgba(6,32,25,.16) 0%,rgba(6,32,25,.03) 28%,rgba(6,32,25,.08) 100%),
      linear-gradient(90deg,rgba(6,32,25,.10) 0%,rgba(6,32,25,.03) 84%,rgba(6,32,25,0) 100%);
  }
  .phero::after{
    background:
      linear-gradient(180deg,rgba(6,32,25,.18) 0%,rgba(6,32,25,.05) 28%,rgba(6,32,25,.10) 100%),
      linear-gradient(90deg,rgba(6,32,25,.12) 0%,rgba(6,32,25,.04) 84%,rgba(6,32,25,0) 100%);
  }
  .hero__in::before,.phero__in::before{
    height:min(78%,660px);
    background:linear-gradient(180deg,
      rgba(6,32,25,0)   0%,
      rgba(6,32,25,.20) 16%,
      rgba(6,32,25,.44) 46%,
      rgba(6,32,25,.64) 100%);
  }
}

/* 글자 그림자 — 수치에는 안 잡히지만 실제로는 이게 가독성을 만듭니다 */
.hero h1,.phero h1{
  text-shadow:0 1px 3px rgba(6,32,25,.9),0 3px 14px rgba(6,32,25,.8),0 6px 40px rgba(6,32,25,.6);
}
.hero .lead,.phero .lead{
  text-shadow:0 1px 3px rgba(6,32,25,.95),0 2px 12px rgba(6,32,25,.85),0 4px 30px rgba(6,32,25,.6);
}
.hero .eyebrow,.phero .eyebrow{
  text-shadow:0 1px 3px rgba(6,32,25,.95),0 2px 10px rgba(6,32,25,.9),0 4px 24px rgba(6,32,25,.7);
}
.crumb{text-shadow:0 1px 3px rgba(6,32,25,.95),0 2px 10px rgba(6,32,25,.9)}

/* --- 59a. 그늘 최종값 ---
       PC는 아래 70%에만, 모바일은 글자가 화면을 많이 차지하므로 88%에.
       위쪽(섬·산)은 그늘이 전혀 닿지 않습니다. */
.hero__in::before,.phero__in::before{
  height:min(70%,660px);
  background:linear-gradient(180deg,
    rgba(6,32,25,0)   0%,
    rgba(6,32,25,.50) 14%,
    rgba(6,32,25,.76) 42%,
    rgba(6,32,25,.90) 100%);
}
@media (max-width:719px){
  .hero__in::before,.phero__in::before{
    height:min(88%,760px);
    background:linear-gradient(180deg,
      rgba(6,32,25,0)   0%,
      rgba(6,32,25,.46) 8%,
      rgba(6,32,25,.70) 30%,
      rgba(6,32,25,.86) 100%);
  }
}

/* --- 59b. 그늘 범위 40%로 축소 (요청) ---
       PC는 아래 40%에만. 위쪽 60%는 사진 그대로입니다.
       모바일은 글자 블록 자체가 화면의 약 75%를 차지해 40%로는 글자가 사진 위에
       그대로 놓이므로, 60%로 두되 시작을 늦춰 위쪽은 밝게 유지합니다. */
.hero__in::before,.phero__in::before{
  height:min(40%,400px);
  background:linear-gradient(180deg,
    rgba(6,32,25,0)   0%,
    rgba(6,32,25,.58) 16%,
    rgba(6,32,25,.84) 48%,
    rgba(6,32,25,.94) 100%);
}
@media (max-width:719px){
  .hero__in::before,.phero__in::before{
    height:min(60%,540px);
    background:linear-gradient(180deg,
      rgba(6,32,25,0)   0%,
      rgba(6,32,25,.52) 12%,
      rgba(6,32,25,.80) 40%,
      rgba(6,32,25,.92) 100%);
  }
}

/* --- 59c. 글자 둘레에 어두운 테두리(halo) ---
       그늘 범위를 40%로 줄인 대신, 글자 바로 둘레만 어둡게 감쌉니다.
       사진 밝기는 전혀 건드리지 않으면서 글자만 또렷해집니다. */
.hero h1,.phero h1{
  text-shadow:
    0 0 2px  rgba(6,32,25,1),
    0 0 6px  rgba(6,32,25,.98),
    0 0 16px rgba(6,32,25,.92),
    0 0 38px rgba(6,32,25,.8),
    0 3px 10px rgba(6,32,25,1);
}
.hero .lead,.phero .lead{
  text-shadow:
    0 0 2px  rgba(6,32,25,1),
    0 0 6px  rgba(6,32,25,.98),
    0 0 14px rgba(6,32,25,.92),
    0 0 30px rgba(6,32,25,.78),
    0 2px 8px rgba(6,32,25,1);
}
.hero .eyebrow,.phero .eyebrow{
  text-shadow:
    0 0 2px  rgba(6,32,25,1),
    0 0 5px  rgba(6,32,25,1),
    0 0 12px rgba(6,32,25,.95),
    0 0 26px rgba(6,32,25,.85),
    0 2px 6px rgba(6,32,25,1);
}
.crumb{
  text-shadow:0 0 2px rgba(6,32,25,1),0 0 6px rgba(6,32,25,.98),0 0 14px rgba(6,32,25,.9);
}

/* --- 59d. 히어로 버튼 높이 살짝 축소 --- */
.hero .btn--lg,.phero .btn--lg{
  min-height:56px;padding:.78em 1.9em;font-size:1.14rem;
}
@media (max-width:899px){
  .hero .btn--lg,.phero .btn--lg{min-height:54px;padding:.74em 1.6em;font-size:1.1rem}
}

/* 빵부스러기를 없앤 만큼 아이브로 위 여백 정리 */
.phero .eyebrow{margin-top:0}

/* ==========================================================================
   60. 홈 히어로 높이 · 크롭 / 스펙바 금색 선 위치
   ========================================================================== */

/* --- 60a. 홈 히어로를 상세 페이지와 같은 높이로 ---
       상세 페이지는 헤더 아래에 '바로가기 바'(52px)가 하나 더 있어서
       위쪽 블록 전체가 홈보다 52px 큽니다. 그만큼 홈 사진을 키웁니다. */
.hero__in{min-height:clamp(632px,calc(88svh + 52px),932px)}
@media (max-width:899px){
  .hero__in{min-height:clamp(472px,calc(100svh - 100px),832px)}
}

/* --- 60b. 하롱베이 섬이 잘리지 않도록 크롭 기준을 위로 --- */
.hero__media img{object-position:center 34%}
@media (max-width:719px){ .hero__media img{object-position:center 30%} }

/* --- 60c. 스펙바 금색 선이 사진에 붙어 있던 것 → 살짝 내림 --- */
.spec::before{top:clamp(15px,1.8vw,20px)}

/* --- 60d. 비교표 여백 축소 (행 높이가 높다는 의견) --- */
#compare .tscroll th,
#compare .tscroll td{
  padding:11px 14px;
  line-height:1.6;
}
#compare .tscroll td .note{line-height:1.55}
@media (max-width:719px){
  #compare .tscroll th,
  #compare .tscroll td{padding:10px 12px}
}

/* --- 60e. 상담 폼 — 입력칸·버튼 높이 축소 ---
       터치 영역 최소 기준(48px)은 유지하면서 여백만 줄입니다. */
.field input,.field select,.field textarea{
  min-height:52px;padding:.62em .9em;font-size:1.0625rem;
}
.field textarea{min-height:104px}
.field label{margin-bottom:6px}
.form__grid{gap:14px}
.form .btn--lg{min-height:56px;padding:.8em 1.6em;font-size:1.14rem}
.consent{font-size:1rem;line-height:1.62}
.consent input{width:26px;height:26px;margin-top:2px}

/* --- 60f. 예약 내역 표 ---
       기존에는 예약 화면을 찍은 이미지였습니다. 글씨가 작아 모바일에서
       읽히지 않아 실제 표로 다시 만들었습니다. */
.tscroll--sm table{min-width:0}
.bktbl{width:100%}
.bktbl th,.bktbl td{text-align:center;vertical-align:middle;padding:12px 10px}
.bktbl thead th{background:var(--green-900);color:#fff;border-bottom:0}
.bktbl tbody th{font-weight:800;color:var(--ink);white-space:nowrap}
.bktbl tbody th{background:var(--paper-2)}
.bktbl tbody td{background:var(--white)}
.bktbl b{font-size:1.125rem;color:var(--green-600)}
.bktbl .d-sun{color:#932510;font-weight:800;margin-left:.15em}
.bktbl .d-wk{color:var(--ink-3);font-weight:700;margin-left:.15em}
@media (max-width:479px){
  .bktbl th,.bktbl td{padding:10px 6px;font-size:1rem}
  .bktbl b{font-size:1.0625rem}
}

/* --- 60g. 숫자 카드(.kv) — 칸 수에 맞게 폭 채우기 ---
       3칸 고정이라 2개만 있을 때 오른쪽이 비어 왼쪽으로 치우쳐 보였습니다. */
@media (min-width:560px){
  .kv:has(> div:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
  .kv:has(> div:first-child:last-child){grid-template-columns:1fr}
  .kv:has(> div:nth-child(4)){grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .kv:has(> div:nth-child(4)){grid-template-columns:repeat(4,1fr)}
}

/* --- 60h. 체크 목록 — 본문 안에서 쓸 때 조금 더 크게 --- */
.chk--lg{gap:14px;margin-top:clamp(18px,2.4vw,24px)}
.chk--lg li{font-size:1.125rem;line-height:1.78;padding-left:1.8em}
.chk--lg li::before{font-size:1.0625rem;top:.12em}
.chk--lg li strong{color:var(--ink)}