/* ===== 길담 브랜드 서체 (자체 호스팅 · OFL) =====
   제목 Hahmlet(가변 100~900) · 본문 마루 부리 · UI Pretendard */
@font-face{font-family:"Hahmlet";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(gd-hahmlet.woff2) format("woff2-variations")}
@font-face{font-family:"MaruBuri";font-style:normal;font-weight:300;font-display:swap;src:url(gd-maru-300.woff2) format("woff2")}
@font-face{font-family:"MaruBuri";font-style:normal;font-weight:400;font-display:swap;src:url(gd-maru-400.woff2) format("woff2")}
@font-face{font-family:"MaruBuri";font-style:normal;font-weight:600;font-display:swap;src:url(gd-maru-600.woff2) format("woff2")}
@font-face{font-family:"MaruBuri";font-style:normal;font-weight:700;font-display:swap;src:url(gd-maru-700.woff2) format("woff2")}

/* ============================================================
   길담 — Premium editorial landing
   Palette rooted in the existing brand tokens
   ============================================================ */
:root{
  --navy:#0C2230;      --navy-d:#081821;   --navy-2:#12303f;
  --gold:#C49A3A;      --gold-l:#D8B462;   --gold-ink:#7F621A;  --sun:#E0A94E;
  --teal:#0A6E82;      --teal-l:#2A93A6;
  --cream:#F4EEDF;     --cream-d:#EBE3CF;  --card:#FCFBF8;
  --line:#EADFCB;      --line-2:#DED3BC;
  --ink:#28363E;       --ink-2:#4A5A62;    --mut:#6A655B;

  --serif:'Hahmlet','MaruBuri',serif;                 /* 제목 */
  --display:'Hahmlet','MaruBuri',serif;               /* 숫자·강조 */
  --sans:'MaruBuri','Nanum Myeongjo',serif;           /* 본문·이야기 */
  --ui:'Pretendard Variable','Pretendard',-apple-system,system-ui,'Malgun Gothic',sans-serif;  /* 메뉴·버튼 */

  --maxw:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.55,.06,.68,.19);
  --nav-h:72px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  line-height:1.7;
  font-size:16px;
  letter-spacing:-.01em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  word-break:keep-all;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--gold);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.serif{font-family:var(--serif)}

/* ---- eyebrow / section index ---- */
.eyebrow{
  font-family:var(--ui);
  font-size:12px;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-ink);
  display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{
  content:"";width:28px;height:1px;background:var(--gold);opacity:.7;
}
.eyebrow.center::before{display:none}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(244,238,223,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line);
}
.nav-in{max-width:var(--maxw);margin:0 auto;width:100%;padding:0 clamp(20px,5vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:800;
  font-size:22px;color:var(--navy);letter-spacing:.02em}
.brand .mark{width:34px;height:34px;flex:0 0 34px}
.nav.on-dark .brand{color:var(--cream)}
.nav-menu{display:flex;align-items:center;gap:32px}
.nav-menu a{font-family:var(--ui);font-size:14px;font-weight:500;letter-spacing:-.005em;
  color:var(--ink-2);position:relative;padding:6px 0;transition:color .3s}
.nav.on-dark .nav-menu a{color:rgba(244,238,223,.82)}
.nav-menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);
  transition:width .35s var(--ease)}
.nav-menu a:hover{color:var(--navy)}
.nav.on-dark .nav-menu a:hover{color:#fff}
.nav-menu a:hover::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:12px}
.link-login{font-family:var(--ui);font-size:14px;font-weight:500;letter-spacing:-.005em;color:var(--ink-2);transition:color .3s}
.nav.on-dark .link-login{color:rgba(244,238,223,.82)}
.link-login:hover{color:var(--navy)}
.nav.on-dark .link-login:hover{color:#fff}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ui);font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  padding:12px 24px;border-radius:999px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;
  will-change:transform;white-space:nowrap;
}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-gold{background:var(--navy);color:var(--cream);box-shadow:0 8px 24px -12px rgba(12,34,48,.6)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(12,34,48,.65)}
.nav.on-dark .btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 10px 26px -12px rgba(196,154,58,.7)}
.nav.on-dark .btn-gold:hover{background:var(--gold-l)}
.btn-lg{padding:16px 32px;font-size:16px}
.btn-ghost{border:1px solid var(--line-2);color:var(--navy);background:var(--card)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold)}
.burger{display:none;flex-direction:column;gap:4px;width:26px;height:20px;justify-content:center}
.burger span{height:2px;width:100%;background:var(--navy);border-radius:4px;transition:.35s var(--ease)}
.nav.on-dark .burger span{background:var(--cream)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;color:var(--cream)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;
  transform:scale(1.0);transition:transform 9s ease-out}
.hero.ready .hero-bg img{transform:scale(1.045)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    /* 32% 지점이 .05 라 사실상 투명이었다. 강릉 쪽은 마침 그 자리가 밝은 하늘이라
       금색 헤드라인이 1.65:1 로 묻혔다(실측). 가운데 띠만 올린다 — 사진은 그대로 보인다. */
    linear-gradient(180deg, rgba(8,24,33,.40) 0%, rgba(8,24,33,.30) 34%, rgba(8,24,33,.60) 78%, rgba(8,24,33,.92) 100%),
    radial-gradient(120% 80% at 78% 30%, rgba(224,169,78,.22), transparent 60%);
}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(20px,5vw,48px) clamp(64px,11vh,96px)}
.hero .eyebrow{color:var(--gold-l)}
.hero .eyebrow::before{background:var(--gold-l)}
.hero h1{font-family:var(--serif);font-weight:800;color:#fff;
  font-size:clamp(2.9rem,8.2vw,6rem);line-height:1.04;letter-spacing:-.02em;
  margin:24px 0 0;text-shadow:0 2px 40px rgba(8,24,33,.4)}
.hero h1 em{font-style:normal;color:var(--gold-l)}
.hero h1 .price{font-family:var(--display);font-weight:500}
.hero-sub{margin-top:24px;font-size:clamp(1rem,2.3vw,1.22rem);color:rgba(244,238,223,.9);
  max-width:33ch;line-height:1.75;font-weight:400}
.hero-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-cta .btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 14px 40px -14px rgba(196,154,58,.8)}
.hero-cta .btn-gold:hover{background:var(--gold-l)}
.hero-cta .btn-ghost{background:rgba(252,251,248,.08);border-color:rgba(244,238,223,.4);color:#fff;
  backdrop-filter:blur(4px)}
.hero-cta .btn-ghost:hover{background:rgba(252,251,248,.16);border-color:var(--gold-l);color:#fff}
.hero-meta{margin-top:32px;display:flex;gap:24px;flex-wrap:wrap;
  font-size:13.5px;color:rgba(244,238,223,.72)}
.hero-meta b{color:var(--gold-l);font-family:var(--display);font-size:16px;font-weight:600;margin-right:4px}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(244,238,223,.6)}
.scroll-cue .line{width:1px;height:44px;background:linear-gradient(var(--gold-l),transparent);
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}
  60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================
   Section scaffolding
   ========================================================= */
.section{padding:clamp(80px,13vh,96px) 0;position:relative}
.section-head{max-width:640px;margin-bottom:clamp(48px,7vh,80px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-title{font-family:var(--serif);font-weight:800;color:var(--navy);
  font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.16;letter-spacing:-.02em;margin-top:20px}
.section-desc{margin-top:20px;font-size:clamp(1rem,1.6vw,1.12rem);color:var(--ink-2);line-height:1.8}
.idx{font-family:var(--display);color:var(--gold-ink);font-size:15px}
.how .idx{color:var(--gold-l)}

/* ---- STORY ---- */
.story{background:var(--cream)}
.story-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,7vw,96px);align-items:center}
.story-quote{position:relative}
.story-quote .q-mark{font-family:var(--display);font-size:clamp(6rem,14vw,11rem);color:var(--gold);
  opacity:.24;line-height:.7;position:absolute;top:-.15em;left:-.06em;z-index:0}
.story-quote blockquote{position:relative;z-index:1;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.5;color:var(--navy);letter-spacing:-.01em}
.story-quote blockquote em{font-style:normal;color:var(--gold);
  box-shadow:inset 0 -.42em 0 rgba(196,154,58,.16)}
.story-body p{margin-bottom:1.4em;font-size:1.06rem;color:var(--ink-2);line-height:1.95}
.story-body p:first-child{font-size:1.16rem;color:var(--ink)}
.story-sign{margin-top:32px;display:flex;align-items:center;gap:16px}
.story-sign .rule{width:44px;height:1px;background:var(--line-2)}
.story-sign .name{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:1.05rem}
.story-sign .role{font-size:13px;color:var(--mut)}

/* ---- HOW WE WORK ---- */
.how{background:var(--navy);color:var(--cream);position:relative;overflow:hidden}
.how::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 85% 0%, rgba(196,154,58,.14), transparent 55%),
             radial-gradient(60% 50% at 0% 100%, rgba(10,110,130,.22), transparent 60%)}
.how .wrap{position:relative;z-index:1}
.how .eyebrow{color:var(--gold-l)}
.how .eyebrow::before{background:var(--gold-l)}
.how .section-title{color:#fff}
.how .section-desc{color:rgba(244,238,223,.72)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:12px}
.how-card{padding:32px 0 0;border-top:2px solid var(--gold);position:relative}
.how-card .n{display:none}
.how-card .ico{display:none}
.how-card h3{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:#fff;margin-bottom:16px}
.how-card p{font-size:1rem;color:rgba(244,238,223,.74);line-height:1.85}

/* ---- DESTINATION ---- */
.dest{background:var(--cream)}
.dest-card{position:relative;display:block;text-decoration:none;border-radius:24px;overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(12,34,48,.6);isolation:isolate;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.dest-card:hover{transform:translateY(-6px);box-shadow:0 62px 112px -56px rgba(12,34,48,.72)}
.dest-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gold-l),0 62px 112px -56px rgba(12,34,48,.72)}
.dest-card img{width:100%;height:clamp(420px,64vh,660px);object-fit:cover;
  transform:scale(1.04);transition:transform 1.6s var(--ease)}
.dest-card:hover img{transform:scale(1.08)}
.dest-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(8,24,33,.72) 0%, rgba(8,24,33,.34) 42%, transparent 70%),
            linear-gradient(0deg, rgba(8,24,33,.55), transparent 45%)}
.dest-body{position:absolute;z-index:2;left:0;bottom:0;padding:clamp(32px,5vw,64px);color:var(--cream);max-width:600px;
  display:flex;flex-direction:column;align-items:flex-start}
.dest-body .kicker{font-family:var(--display);letter-spacing:.2em;
  text-transform:uppercase;font-size:14px;color:var(--gold-l)}
.dest-body h3{font-family:var(--serif);font-weight:800;font-size:clamp(2.1rem,5vw,3.4rem);
  color:#fff;line-height:1.1;margin:12px 0 20px;letter-spacing:-.02em}
.dest-body p{font-size:1.05rem;color:rgba(244,238,223,.86);max-width:38ch}
.dest-cta{display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--navy);background:var(--cream);
  padding:12px 20px;border-radius:999px;
  max-height:0;opacity:0;transform:translateY(12px);overflow:hidden;pointer-events:none;
  transition:max-height .55s var(--ease),opacity .45s var(--ease),transform .55s var(--ease),margin .55s var(--ease)}
.dest-card:hover .dest-cta,.dest-card:focus-visible .dest-cta{max-height:52px;opacity:1;transform:none;margin-top:24px;pointer-events:auto}
.dest-cta .arw{transition:transform .35s var(--ease)}
.dest-card:hover .dest-cta .arw{transform:translateX(3px)}
/* keep the hover lift/shadow smooth even though the card also carries .reveal */
.dest .dest-card.reveal{transition:opacity 1.1s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease)}
.dest-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:32px;
  background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.stat{background:var(--card);padding:32px 20px;text-align:center}
.stat .num{font-family:var(--display);font-weight:600;color:var(--navy);
  font-size:clamp(2rem,4.4vw,2.9rem);line-height:1;letter-spacing:-.01em}
.stat .num .u{font-size:.42em;color:var(--gold);margin-left:2px;font-weight:500}
.stat .lbl{margin-top:12px;font-size:13.5px;color:var(--ink-2);font-weight:500}

/* ---- INCLUDED ---- */
.incl{background:var(--cream-d)}
.incl-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,4vw,64px);align-items:start}
.incl-cover{position:sticky;top:calc(var(--nav-h) + 30px)}
.incl-cover .frame{border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -46px rgba(12,34,48,.55);
  border:1px solid var(--line);background:var(--card)}
.incl-cover .frame img{width:100%}
.incl-cover .cap{margin-top:20px;font-size:13.5px;color:var(--mut);text-align:center;font-family:var(--display)}
.incl-list{display:flex;flex-direction:column;gap:20px}
.incl-item{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:32px 32px;transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s}
.incl-item:hover{transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(12,34,48,.4);border-color:var(--line-2)}
.incl-item .top{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.incl-item .ico{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--navy),var(--navy-2));color:var(--gold-l)}
.incl-item .ico svg{width:22px;height:22px}
.incl-item h3{font-family:var(--serif);font-weight:700;font-size:1.32rem;color:var(--navy)}
.incl-item .tag{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:4px 12px;border-radius:999px;background:rgba(196,154,58,.14);color:var(--gold);white-space:nowrap}
.incl-item .tag.only{background:var(--navy);color:var(--gold-l)}
.incl-item p{font-size:1rem;color:var(--ink-2);line-height:1.8}
.incl-item .meta{margin-top:16px;font-size:12.5px;color:var(--mut);letter-spacing:.02em;
  display:flex;align-items:center;gap:8px}
.incl-item .meta::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ---- PRICING ---- */
.price-sec{background:var(--navy);color:var(--cream);position:relative;overflow:hidden}
.price-sec .sun{position:absolute;left:50%;top:-140px;transform:translateX(-50%);width:520px;height:520px;
  background:radial-gradient(circle,rgba(224,169,78,.34),rgba(224,169,78,.06) 46%,transparent 62%);
  pointer-events:none}
.price-card{position:relative;z-index:1;max-width:620px;margin:0 auto;text-align:center;
  background:linear-gradient(180deg, rgba(252,251,248,.06), rgba(252,251,248,.02));
  border:1px solid rgba(234,223,203,.22);border-radius:24px;
  padding:clamp(40px,6vw,64px) clamp(32px,5vw,64px);backdrop-filter:blur(6px)}
.price-card .eyebrow{color:var(--gold-l);justify-content:center}
.price-card .eyebrow::before{display:none}
.price-card h2{font-family:var(--serif);font-weight:800;color:#fff;
  font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.25;margin:16px 0 8px}
.price-card .bundle{font-size:14.5px;color:rgba(244,238,223,.66);margin-bottom:32px}
.price-amt{display:flex;align-items:baseline;justify-content:center;gap:12px;margin-bottom:8px}
.price-amt .was{font-family:var(--display);font-size:1.5rem;color:rgba(244,238,223,.5);
  text-decoration:line-through;text-decoration-color:var(--gold)}
.price-amt .now{font-family:var(--display);font-weight:600;color:#fff;font-size:clamp(3rem,8vw,4.4rem);line-height:1}
.price-amt .won{font-family:var(--serif);font-size:1.6rem;color:var(--gold-l);align-self:center}
.price-card .save{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:var(--navy);background:var(--gold-l);padding:4px 12px;border-radius:999px;margin-bottom:32px}
.price-card .btn{width:100%;max-width:340px}
.price-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:24px;
  font-size:13px;color:rgba(244,238,223,.66)}
.price-trust span{display:inline-flex;align-items:center;gap:6px}
.price-trust svg{width:15px;height:15px;color:var(--gold-l)}
.price-alt{margin-top:24px;font-size:13.5px;color:rgba(244,238,223,.6)}
.price-alt a{color:var(--gold-l);border-bottom:1px solid rgba(216,180,98,.4);padding-bottom:1px}
.price-alt a:hover{color:#fff}

/* ---- COMING SOON ---- */
.soon{background:var(--cream);text-align:center}
.soon .badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);
  padding:8px 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--card)}
.soon .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(196,154,58,.35)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(196,154,58,0)}}
.soon h2{font-family:var(--serif);font-weight:800;color:var(--navy);
  font-size:clamp(1.8rem,4.4vw,2.9rem);margin:24px 0 12px;line-height:1.2}
.soon p{color:var(--ink-2);max-width:44ch;margin:0 auto;font-size:1.06rem}

/* ---- NEWSLETTER ---- */
.news{background:var(--cream);padding-top:0}
.news-inner{background:linear-gradient(158deg,var(--navy-2),var(--navy-d));border-radius:24px;
  padding:clamp(40px,6vw,80px);color:#fff;position:relative;overflow:hidden;text-align:center}
.news-inner::after{content:"";position:absolute;right:-60px;bottom:-80px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(224,169,78,.3),transparent 65%)}
.news-inner .eyebrow{color:var(--gold-l);justify-content:center}
.news-inner .eyebrow::before{display:none}
.news-inner h2{font-family:var(--serif);font-weight:800;font-size:clamp(1.6rem,3.8vw,2.4rem);
  margin:16px 0 12px;position:relative;z-index:1}
.news-inner p{color:rgba(255,255,255,.82);max-width:42ch;margin:0 auto 32px;position:relative;z-index:1}
.news-form{display:flex;gap:8px;max-width:460px;margin:0 auto;position:relative;z-index:1;flex-wrap:wrap}
.news-form input{flex:1;min-width:200px;padding:16px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);color:#fff;font-size:15px;font-family:inherit;outline:none;transition:.3s}
.news-form input::placeholder{color:rgba(255,255,255,.62)}
.news-form input:focus{background:rgba(255,255,255,.2);border-color:var(--gold-l)}
.news-form .btn-gold{background:var(--gold-l);color:var(--navy)}
.news-form .btn-gold:hover{background:#fff}
.news-note{margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.6);position:relative;z-index:1}

/* ---- FINAL CTA ---- */
.final{position:relative;min-height:82svh;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--cream);overflow:hidden}
.final-bg{position:absolute;inset:0;z-index:0}
.final-bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.final-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,24,33,.62),rgba(8,24,33,.5) 40%,rgba(8,24,33,.82))}
.final-in{position:relative;z-index:1;padding:0 24px}
.final .eyebrow{color:var(--gold-l);justify-content:center}
.final .eyebrow::before{display:none}
.final h2{font-family:var(--serif);font-weight:800;color:#fff;
  font-size:clamp(2.2rem,6.4vw,4.4rem);line-height:1.12;margin:20px 0 32px;letter-spacing:-.02em;
  text-shadow:0 2px 40px rgba(8,24,33,.5)}
.final .btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 14px 40px -14px rgba(196,154,58,.8)}
.final .btn-gold:hover{background:var(--gold-l)}

/* ---- FOOTER ---- */
.foot{background:var(--navy-d);color:rgba(244,238,223,.7);padding:64px 0 40px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-bottom:40px;border-bottom:1px solid rgba(234,223,203,.14)}
.foot-brand{max-width:320px}
.foot-brand .brand{color:var(--cream);margin-bottom:16px}
.foot-brand p{font-size:14px;line-height:1.8;color:rgba(244,238,223,.6)}
.foot-cols{display:flex;gap:clamp(40px,7vw,96px);flex-wrap:wrap}
.foot-col h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l);
  margin-bottom:16px;font-weight:600}
.foot-col a,.foot-col span{display:block;font-size:14px;color:rgba(244,238,223,.68);margin-bottom:12px;transition:color .3s}
.foot-col a:hover{color:var(--gold-l)}
.foot-bottom{padding-top:32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(244,238,223,.44)}
.foot-bottom .biz{line-height:1.9}

/* =========================================================
   SPOTS — hover-reveal travel cards
   (ported from a shadcn/21st.dev TravelCard into static CSS)
   ========================================================= */
.spots{background:var(--cream-d)}
.spots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.spot{position:relative;height:clamp(430px,56vh,540px);border-radius:20px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 18px 44px -30px rgba(12,34,48,.55);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);cursor:pointer;isolation:isolate;
  display:block;color:#fff}
.spot:hover,.spot:focus-visible{transform:translateY(-8px);
  box-shadow:0 44px 74px -38px rgba(12,34,48,.62);outline:none}
.spot:focus-visible{box-shadow:0 0 0 3px var(--gold-l),0 44px 74px -38px rgba(12,34,48,.62)}
.spot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .8s var(--ease)}
.spot:hover .spot-img,.spot:focus-visible .spot-img{transform:scale(1.09)}
.spot::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(8,24,33,.92) 4%,rgba(8,24,33,.5) 40%,rgba(8,24,33,.06) 100%)}
.spot-top{position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px}
.spot-tag{font-size:11px;font-weight:600;letter-spacing:.06em;padding:6px 12px;border-radius:999px;
  background:rgba(8,24,33,.34);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff}
.spot-idx{font-family:var(--display);font-size:15px;color:var(--gold-l)}
.spot-body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:24px}
.spot-name{font-family:var(--serif);font-weight:800;font-size:1.72rem;line-height:1.14;color:#fff;
  letter-spacing:-.01em}
.spot-loc{margin-top:6px;font-size:13px;color:var(--gold-l);font-weight:500;letter-spacing:.01em}
.spot-over{font-size:14px;line-height:1.65;color:rgba(244,238,223,.86);
  max-height:0;opacity:0;transform:translateY(8px);overflow:hidden;
  transition:max-height .6s var(--ease),opacity .45s var(--ease),transform .6s var(--ease),margin .6s var(--ease)}
.spot:hover .spot-over,.spot:focus-visible .spot-over{max-height:9em;opacity:1;transform:none;margin-top:12px}
.spot-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:13.5px;font-weight:600;color:var(--navy);background:var(--cream);
  padding:8px 20px;border-radius:999px;
  max-height:0;opacity:0;transform:translateY(14px);overflow:hidden;pointer-events:none;
  transition:max-height .55s var(--ease),opacity .45s .05s var(--ease),transform .55s var(--ease),margin .55s var(--ease)}
.spot:hover .spot-cta,.spot:focus-visible .spot-cta{max-height:48px;opacity:1;transform:none;
  margin-top:20px;pointer-events:auto}
.spot-cta .arw{transition:transform .35s var(--ease)}
.spot:hover .spot-cta .arw{transform:translateX(3px)}

/* =========================================================
   Reveal animation
   ========================================================= */
/* Reveals are visible by default so content NEVER hides without JS.
   Only when the <html class="js"> flag is set do we hide-then-animate. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(15px);transition:opacity 1.15s var(--ease),transform 1.15s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}
.reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s}
.reveal[data-d="4"]{transition-delay:.4s}

/* =========================================================
   Reviews (editorial pull-quotes — no stars, no avatars)
   ========================================================= */
.review-list{margin-top:24px;max-width:860px}
.review{padding:40px 0;border-top:1px solid var(--line);margin:0}
.review:first-child{border-top:none}
.review p{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.5vw,1.75rem);
  line-height:1.62;color:var(--navy);letter-spacing:-.01em}
.review cite{display:block;margin-top:20px;font-style:normal;font-family:var(--ui);
  font-size:.92rem;letter-spacing:.02em;color:var(--mut)}

/* =========================================================
   FAQ (clean Q/A list — no accordion box, no chevron)
   ========================================================= */
.faq-list{margin-top:24px;max-width:880px}
.faq-item{padding:32px 0;border-top:1px solid var(--line)}
.faq-item:first-child{border-top:none}
.faq-item h3{font-family:var(--serif);font-weight:700;font-size:clamp(1.15rem,2vw,1.35rem);
  color:var(--navy);margin-bottom:12px}
.faq-item p{font-size:1rem;color:var(--ink-2);line-height:1.85}
.faq-item p a{color:var(--teal)}

/* =========================================================
   Polish (redesign pass) — orphan-free headings, tabular
   figures, button press + keyboard focus
   ========================================================= */
h1,h2,.section-title,.hero h1,.price-card h2,.dest-body h3{text-wrap:balance}
p,.hero-sub,.section-desc,.review p,.faq-item p,.story-body p{text-wrap:pretty}
.stat .num,.hero-meta b,.price-amt,.price-amt .now{font-variant-numeric:tabular-nums}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gold-l),0 0 0 5px rgba(12,34,48,.25)}
.nav-menu a:focus-visible,.drawer-links a:focus-visible,.link-login:focus-visible,
.faq-item p a:focus-visible,.foot-col a:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px;border-radius:4px}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:960px){
  .story-grid{grid-template-columns:1fr;gap:48px}
  .how-grid{grid-template-columns:1fr;gap:0}
  .how-card{padding:32px 0;border-top:1px solid rgba(234,223,203,.16)}
  .incl-grid{grid-template-columns:1fr;gap:32px}
  .incl-cover{position:static;max-width:340px;margin:0 auto}
  .spots-grid{grid-template-columns:repeat(2,1fr)}
  .foot-top{flex-direction:column}
}
/* ============ Nav dropdown (여행지) ============ */
.nav-drop{position:relative;display:inline-flex}
.nav-drop-t{font-family:var(--ui);font-size:14px;font-weight:500;letter-spacing:-.005em;color:var(--ink-2);
  background:none;border:none;cursor:pointer;padding:6px 0;display:inline-flex;align-items:center;gap:4px}
.nav.on-dark .nav-drop-t{color:rgba(244,238,223,.82)}
.nav-drop-t .caret{font-size:9px;transition:transform .25s;opacity:.8}
.nav-drop:hover .nav-drop-t,.nav-drop:focus-within .nav-drop-t{color:var(--navy)}
.nav.on-dark .nav-drop:hover .nav-drop-t,.nav.on-dark .nav-drop:focus-within .nav-drop-t{color:#fff}
.nav-drop:hover .caret,.nav-drop:focus-within .caret{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(6px);min-width:218px;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 46px -22px rgba(12,34,48,.4);
  padding:8px;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease;z-index:60}
.nav-drop-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop-menu a{display:block;padding:8px 12px;border-radius:8px;color:var(--navy)!important;
  font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:-.005em;line-height:1.3;text-decoration:none}
.nav-drop-menu a::after{display:none}
.nav-drop-menu a em{display:block;font-style:normal;font-weight:400;font-size:12px;color:var(--ink-2);margin-top:2px}
.nav-drop-menu a:hover{background:var(--cream)}
.nav-drop-menu a.soon,.nav-drop-menu a.soon em{color:var(--mut,#9A958B)!important}

/* ============ Board / 소식 (게시판) ============ */
.board-wrap{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.notice-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.notice{padding:24px 4px;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:96px 1fr;gap:4px 20px;align-items:baseline}
.notice-date{font-size:13px;color:var(--mut,#9A958B);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.notice-body h3{font-family:var(--serif);font-size:18px;color:var(--navy);margin:0 0 6px;font-weight:700}
.notice-body p{font-size:14.5px;color:var(--ink-2);line-height:1.7;margin:0}
.notice-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:var(--gold-ink,#7a5c17);background:rgba(196,154,58,.14);padding:2px 8px;border-radius:999px;margin-bottom:8px}
.op-form{margin-top:16px;background:#FCFBF8;border:1px solid var(--line);border-radius:16px;padding:clamp(24px,4vw,32px)}
.op-form .field{margin-bottom:12px}
.op-form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;letter-spacing:.02em}
.op-form input,.op-form textarea,.op-form select{width:100%;padding:12px 16px;border:1.5px solid var(--line);
  border-radius:12px;font-family:var(--sans),sans-serif;font-size:14.5px;background:#fff;color:var(--ink);resize:vertical}
.op-form input:focus,.op-form textarea:focus,.op-form select:focus{outline:none;border-color:var(--teal)}
.op-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.op-cat{font-size:13px;padding:8px 12px;border:1.5px solid var(--line);border-radius:999px;
  background:#fff;color:var(--ink-2);cursor:pointer;transition:all .18s}
.op-cat.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.op-note{font-size:12.5px;color:var(--mut,#9A958B);margin-top:12px;line-height:1.6}
@media (max-width:560px){ .notice{grid-template-columns:1fr;gap:6px} }

@media (max-width:720px){
  .nav-menu,.link-login,.nav-drop{display:none}
  .burger{display:flex}
  .nav-actions{gap:8px}
  .nav-actions .btn{padding:8px 16px;font-size:13px}   /* CTA를 모바일 상단에도 노출 (PC와 통일) */
  .nav-actions .btn .arw{display:none}
  .section{padding:clamp(64px,10vh,80px) 0}
  .section-head{margin-bottom:40px}
  .dest-stats{grid-template-columns:repeat(2,1fr)}
  /* Hero — framed for a tall phone, not a squeezed desktop */
  .hero-bg img{object-position:50% 44%}
  .hero-in{padding-bottom:96px}
  .hero-sub{max-width:27ch}
  .hero-meta{gap:12px 24px}
  /* Spots — swipeable carousel that peeks the next card (mobile-native) */
  .spots-grid{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(-1 * clamp(20px,5vw,48px));
    padding:6px clamp(20px,5vw,48px)}
  .spots-grid::-webkit-scrollbar{display:none}
  .spot{flex:0 0 84%;scroll-snap-align:center;height:454px}
}

/* =========================================================
   Mobile sticky conversion bar (phone only)
   ========================================================= */
.mcta{display:none}
@media (max-width:720px){
  .mcta{display:flex;position:fixed;left:12px;right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom));z-index:95;
    align-items:center;justify-content:space-between;gap:12px;
    padding:12px 12px 12px 20px;border-radius:16px;text-decoration:none;
    background:rgba(12,34,48,.94);backdrop-filter:saturate(150%) blur(12px);
    -webkit-backdrop-filter:saturate(150%) blur(12px);color:var(--cream);
    border:1px solid rgba(234,223,203,.16);box-shadow:0 14px 36px -12px rgba(8,24,33,.72);
    transform:translateY(160%);visibility:hidden;
    transition:transform .55s var(--ease),visibility .55s}
  .mcta.show{transform:none;visibility:visible}
  .mcta-txt{display:flex;flex-direction:column;line-height:1.3}
  .mcta-txt b{font-family:var(--serif);font-weight:700;font-size:1.04rem;color:#fff}
  .mcta-txt em{font-style:normal;font-size:11px;color:var(--gold-l);letter-spacing:.01em}
  .mcta-btn{flex:0 0 auto;font-weight:600;font-size:13.5px;color:var(--navy);
    background:var(--gold);padding:12px 16px;border-radius:999px;white-space:nowrap}
  .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* Touch devices can't hover — reveal card CTAs by default */
@media (hover:none){
  .spot-over{max-height:9em;opacity:1;transform:none;margin-top:12px}
  .spot-cta{max-height:48px;opacity:1;transform:none;margin-top:20px;pointer-events:auto}
  .spot-img{transform:scale(1.02)}
  .dest-cta{max-height:52px;opacity:1;transform:none;margin-top:24px;pointer-events:auto}
}
@media (max-width:420px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
}

/* Drawer (mobile menu) */
.drawer{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--navy);color:var(--cream);
  height:100vh;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:flex;flex-direction:column;
  padding:max(24px,env(safe-area-inset-top)) clamp(20px,6vw,40px) calc(32px + env(safe-area-inset-bottom,0px));
  transform:translateX(100%);transition:transform .5s var(--ease);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer-head{display:flex;justify-content:space-between;align-items:center;flex:0 0 auto}
.drawer-head .brand{color:var(--cream)}
.drawer-close{font-size:30px;line-height:1;color:var(--cream)}
.drawer-links{display:flex;flex-direction:column;gap:6px;margin-top:clamp(24px,5vh,48px)}
.drawer-links a{font-family:var(--serif);font-size:1.7rem;font-weight:700;color:var(--cream);
  padding:12px 0;border-bottom:1px solid rgba(234,223,203,.14)}
.drawer-links a:last-child{border-bottom:none}
.drawer-foot{margin-top:auto;padding-top:32px;flex:0 0 auto;display:flex;flex-direction:column;gap:12px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .hero-bg img{transform:none !important}
}

/* =========================================================
   COURSE — one-day itinerary timeline (gangneung product page)
   ========================================================= */
.course{background:var(--cream-d)}
.timeline{max-width:720px;margin:0 auto}
.tl-item{display:grid;grid-template-columns:60px 26px 1fr;gap:0 16px;padding:12px 0;position:relative}
.tl-time{grid-column:1;text-align:right;font-family:var(--display);
  font-size:14.5px;color:var(--gold-ink);padding-top:2px;white-space:nowrap}
.tl-rail{grid-column:2;position:relative;display:flex;justify-content:center}
.tl-rail::before{content:"";position:absolute;top:2px;bottom:-26px;width:1px;background:var(--line-2)}
.tl-item:last-child .tl-rail::before{display:none}
.tl-dot{position:relative;margin-top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--cream-d);border:2px solid var(--gold);z-index:1;flex:0 0 auto}
.tl-item.opt .tl-dot{background:var(--gold)}
.tl-body{grid-column:3;padding-bottom:2px}
.tl-body h4{font-family:var(--serif);font-weight:700;font-size:1.14rem;color:var(--navy);line-height:1.3}
.tl-body p{font-size:.95rem;color:var(--ink-2);margin-top:2px;line-height:1.6}
.tl-body .opt-tag{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;
  color:var(--gold-ink);background:rgba(196,154,58,.14);padding:2px 8px;border-radius:999px;vertical-align:middle}
@media (max-width:520px){
  .tl-item{grid-template-columns:50px 22px 1fr;gap:0 12px}
  .tl-time{font-size:13px}
}

/* ============ Intro splash (brand logo → home) ============ */
.splash{position:fixed;inset:0;z-index:3000;background:var(--cream);
  display:grid;place-items:center;overflow:hidden}
.splash-seen .splash{display:none}          /* once per session, no flash */
.s-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.s-mark{width:116px;height:auto;
  filter:drop-shadow(0 10px 26px rgba(12,34,48,.14));
  animation:sMark 1.35s cubic-bezier(.18,.9,.24,1) both}
.s-word{margin-top:16px;font-family:var(--display,"Hahmlet"),serif;font-weight:600;
  color:var(--navy);font-size:clamp(30px,8vw,40px);letter-spacing:.04em;line-height:1;
  display:inline-flex;justify-content:center}
/* each glyph rises up from behind a mask, staggered */
.s-ch{display:inline-block;overflow:hidden;padding:.16em .006em .05em}
.s-ch b{display:inline-block;font-weight:inherit;transform:translateY(118%);
  animation:sRise .95s cubic-bezier(.19,.86,.24,1) both}
.s-ch:nth-child(1) b{animation-delay:.50s}
.s-ch:nth-child(2) b{animation-delay:.64s}
.s-ch:nth-child(3) b{animation-delay:.76s}
.s-ch:nth-child(4) b{animation-delay:.86s}
.s-ch:nth-child(5) b{animation-delay:.94s}
.s-ch:nth-child(6) b{animation-delay:1.01s}
@keyframes sRise{to{transform:translateY(0)}}
.s-rule{width:0;height:2px;margin:16px 0 12px;background:var(--gold);border-radius:4px;
  animation:sRule .7s cubic-bezier(.2,.8,.3,1) .95s both}
.s-tag{color:var(--ink-2,#5a6a72);font-size:clamp(12px,3.4vw,13.5px);letter-spacing:.16em;
  opacity:0;animation:sUp .85s ease 1.10s both}
@keyframes sMark{
  0%{opacity:0;transform:scale(.55) translateY(14px)}
  55%{opacity:1;transform:scale(1.08) translateY(0)}
  75%{transform:scale(.97)}
  100%{opacity:1;transform:scale(1)}}
@keyframes sUp{to{opacity:1;transform:none}}
@keyframes sRule{to{width:56px}}
.splash.done{animation:sOut .75s ease forwards}
@keyframes sOut{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .s-mark,.s-word,.s-tag,.s-ch b{animation:none;opacity:1;transform:none}
  .s-rule{animation:none;width:56px}
  .splash.done{animation:none;opacity:0;visibility:hidden}
}

/* ============ Guide preview (show the real thing, honestly) ============ */
.pv-lead{max-width:54ch;margin:-4px 0 32px;color:var(--ink-2,#5a6a72);
  font-size:clamp(15px,2.4vw,17px);line-height:1.7;text-wrap:pretty}
.pv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pv-card{margin:0}
.pv-shot{border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 22px 46px -26px rgba(12,34,48,.45);background:#fff;
  aspect-ratio:945/1638;transition:transform .35s ease, box-shadow .35s ease}
.pv-card:hover .pv-shot{transform:translateY(-4px);box-shadow:0 30px 56px -26px rgba(12,34,48,.5)}
.preview-en .pv-shot{aspect-ratio:544/770}   /* English PDF is A-series, not the tall KR page */
.pv-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.pv-cap{margin-top:12px;font-family:var(--display,"Hahmlet"),serif;font-weight:600;
  font-size:16px;color:var(--navy);line-height:1.35}
.pv-cap span{display:block;font-family:var(--sans),sans-serif;font-weight:400;
  font-size:13px;color:var(--ink-2,#5a6a72);margin-top:2px}
.pv-note{margin-top:32px;font-size:13.5px;color:var(--ink-2,#5a6a72)}
@media (max-width:720px){
  .pv-grid{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(-1 * clamp(20px,5vw,48px));
    padding:6px clamp(20px,5vw,48px)}
  .pv-grid::-webkit-scrollbar{display:none}
  .pv-card{flex:0 0 72%;scroll-snap-align:center}
}

/* ─────────────────────────────────────────────────────────────
   모바일 접근성 보정 (2026-07-29)

   1) 드로어의 '로그인' 버튼이 안 보였다.
      .btn-ghost 는 밝은 배경(--card)을 갖는데, 인라인으로 글자만
      크림색으로 덮어써서 흰 배경 + 흰 글씨(명암비 1.05:1)가 됐다.
      어두운 드로어 위에서는 배경을 비워야 진짜 ghost 가 된다.

   2) 720px 이하에서 .link-login 이 통째로 숨겨져,
      로그인(로그아웃 상태)·내 가이드(로그인 상태) 로 들어갈 칸이
      상단에 하나도 없었다. 햄버거를 열어야만 보였다.
   ───────────────────────────────────────────────────────────── */
.drawer-foot .btn-ghost{
  background:transparent;
  color:var(--cream);
  border:1.5px solid rgba(234,223,203,.55)}
.drawer-foot .btn-ghost:hover,
.drawer-foot .btn-ghost:focus-visible{
  background:rgba(244,238,223,.12);
  border-color:var(--gold-l);
  color:#fff}

@media (max-width:720px){
  a.link-login[href*="#login"],
  a.link-login[href*="#my"],
  a.link-login.gd-my{
    display:inline-flex!important;align-items:center;
    padding:8px 12px;border-radius:999px;
    font-size:13px;font-weight:600;white-space:nowrap;
    border:1.5px solid rgba(196,154,58,.85);
    color:var(--navy)}
  .nav.on-dark a.link-login[href*="#login"],
  .nav.on-dark a.link-login[href*="#my"],
  .nav.on-dark a.link-login.gd-my{color:#F2EDE2}
}

/* 드로어가 쿠키 배너(z-index 99999) 밑에 깔려, 열어도 하단의
   로그인 버튼이 배너에 가려 보이지 않았다. 드로어는 전체화면이므로
   열려 있는 동안에는 드로어가 위에 와야 한다. */
.drawer{z-index:100000}

/* 항목이 늘면서(사용 방법 추가) 하단 버튼이 화면 밖으로 밀렸다.
   세로가 짧은 폰에서는 간격을 줄여 한 화면에 들어오게 한다. */
@media (max-width:720px) and (max-height:900px){
  .drawer-links{gap:2px;margin-top:clamp(12px,3vh,24px)}
  .drawer-links a{font-size:1.35rem;padding:8px 0}
  .drawer-foot{padding-top:20px;gap:8px}
  .drawer-foot .btn{padding:12px 16px;font-size:14px}
}


/* ══ 좁은 기기 보정 — 2026-08-03 실측으로 찾은 것만 ═══════════════════
   320~375px 에서 '무엇이 담겼나요' 칸이 최대 61px 화면 밖으로 나갔다.
   원인은 grid 의 `1fr` 이 곧 `minmax(auto,1fr)` 이라는 것 — 칸의 최소폭
   (min-content: 좌우 padding 30+30 에 안 쪼개지는 영어 단어)이 화면보다
   커도 줄지 않는다. minmax(0,1fr) 로 바닥을 열어야 비로소 줄어든다.
   영어가 한글보다 더 많이 나간 이유도 이것이다(단어가 안 쪼개진다). */
@media (max-width:960px){
  .incl-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  /* 320px 에서 마지막 칸이 24px 밖으로 나갔다. 원인은 안 쪼개지는 긴 영어 버튼 글
     ("Get the Gangneung guide · $9.90 →") 이 칸의 최소폭을 화면보다 크게 만든 것.
     칸에 100% 를 못박고 버튼 줄을 접을 수 있게 한다. */
  .final-in{width:100%;max-width:100%;box-sizing:border-box}
  .final-in h2{overflow-wrap:break-word}
  .final-in .btn{white-space:normal;max-width:100%;line-height:1.45;text-align:center}
  .incl-item{padding:24px 20px}
  .incl-item .top{flex-wrap:wrap;gap:12px}
  .incl-item h3{min-width:0;overflow-wrap:break-word}
  .incl-item .tag{margin-left:0}
  .incl-cover{max-width:100%}
  .final-in{padding:0 20px}
}

/* PC 좁은 쪽(961~1200) — 영어 상단 메뉴에 계산기·사용법을 넣자 최대 75px 넘쳤다.
   글자와 간격을 폭에 맞춰 줄인다. 한글은 원래 여유가 있어 영향이 없다. */
@media (min-width:961px) and (max-width:1200px){
  .nav-menu{gap:clamp(12px,1.7vw,24px)}
  .nav-menu a,.nav-drop-t{font-size:13px}
  .nav-actions{gap:8px}
  .nav-actions .btn{padding:8px 12px;font-size:13px}
  .nav-actions .btn .arw{display:none}
}

/* 바닥 링크가 모바일에서 21px 높이라 손가락으로 누르기 어려웠다(실측).
   글자 크기는 그대로 두고 누를 수 있는 넓이만 키운다. */
@media (max-width:720px){
  .foot-col a{display:block;padding:12px 0;margin-bottom:0;line-height:1.4}
  .foot-col h4{margin-bottom:2px}
}

/* 히어로 글자에 그림자 — 강릉 쪽 사진은 헤드라인 자리가 밝은 하늘이라
   금색 "하루면 충분해요" 가 1.65:1 로 묻혔다(실측). 오버레이만 더 올리면
   사진이 탁해진다. 글자 둘레만 어둡게 해서 사진은 살리고 글자만 띄운다. */
.hero h1,.hero h1 em{text-shadow:0 2px 22px rgba(8,24,33,.62),0 1px 4px rgba(8,24,33,.5)}
.hero .hero-sub,.hero .eyebrow{text-shadow:0 1px 16px rgba(8,24,33,.85),0 1px 3px rgba(8,24,33,.7)}
/* 히어로 본문은 크림 90% 였다. 사진 위에서 10% 를 깎을 이유가 없다. */
.hero .hero-sub{color:rgba(244,238,223,1)}

/* en-nav-960 */
/* 영어는 라벨이 길다 — 'Get the guide →' + What's inside · Pricing · Calculator · How to use.
   721~960px 사이에서 상단 버튼이 화면 오른쪽으로 삐져나갔다(768px 63px · 821px 13px 실측).
   한글은 안 걸리므로 전체 기준을 건드리지 않고 **영어에서만** 한 단계 일찍 접는다. */
@media (max-width:960px){
  :lang(en) .nav-menu,:lang(en) .link-login,:lang(en) .nav-drop{display:none}
  :lang(en) .burger{display:flex}
  :lang(en) .nav-actions{gap:8px}
  :lang(en) .nav-actions .btn{padding:8px 16px;font-size:13px}
  :lang(en) .nav-actions .btn .arw{display:none}
}

/* en-nav-narrow */
/* 320px 에서 'Get the guide' 가 23px 삐져나간다(실측). 한글은 안 걸린다.
   버튼을 없애면 가장 좁은 화면에서 살 길이 사라지므로, 줄여서 남긴다. */
@media (max-width:420px){
  :lang(en) .nav-actions{gap:6px}
  :lang(en) .nav-actions .btn{padding:6px 8px;font-size:12px;letter-spacing:-.01em}
}

/* ── 코스 계산기 섹션 (홈) ─────────────────────────────────────
   무료 도구를 히어로 바로 아래로 올린다. 상단 메뉴에만 있으면 안 눌린다. */
.calc-sec{background:var(--cream-d)}
.calc-box{max-width:920px;margin:0 auto;background:var(--card);
  border:1px solid var(--line);border-radius:22px;padding:38px 34px 30px;
  box-shadow:0 10px 34px rgba(12,34,48,.07)}
.calc-steps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:26px}
.calc-steps span{display:flex;align-items:center;gap:9px;font-size:15px;
  color:var(--ink-2);background:var(--cream);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px}
.calc-steps i{width:22px;height:22px;border-radius:50%;background:var(--navy);
  color:var(--cream);font-style:normal;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
/* ⚠ 열 곳을 flex 로 흘렸더니 마지막 하나(대전)만 둘째 줄에 혼자 떨어졌다.
   실수처럼 보인다. 5×2 격자로 못 박아 **의도한 배열**로 만든다. */
/* ⚠ 묵호가 들어와 열한 곳이 됐다. 5열이면 5+5+1 로 또 하나가 혼자 남는다.
   4열이면 4+4+3 이라 마지막 줄이 셋이다 — 실수처럼 안 보인다. */
.calc-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.calc-chip{font-size:18px;font-weight:700;color:var(--navy);background:var(--cream);
  border:1.5px solid var(--line-2);border-radius:12px;padding:13px 10px;
  text-decoration:none;transition:.18s;text-align:center}
.calc-chip:hover,.calc-chip:focus-visible{background:var(--navy);color:var(--cream);
  border-color:var(--navy);transform:translateY(-2px)}
.calc-go{display:block;width:fit-content;margin:26px auto 0;font-size:17px;
  font-weight:700;color:var(--gold-ink);text-decoration:none;
  border-bottom:2px solid var(--gold);padding-bottom:5px}
.calc-go span{transition:.18s;display:inline-block}
.calc-go:hover span{transform:translateX(4px)}
.calc-note{text-align:center;margin-top:20px;font-size:15px;color:var(--mut)}
@media(max-width:560px){
  .calc-box{padding:28px 18px 24px;border-radius:18px}
  /* ⚠ 3열이면 열 곳이 3+3+3+1 이라 마지막 하나가 또 혼자 남는다. 2열이면
     5줄로 딱 떨어지고 손가락으로 누르기도 낫다. */
  .calc-chips{grid-template-columns:repeat(2,1fr);gap:9px}
  .calc-chip{font-size:16px;padding:12px 6px}
  .calc-steps span{font-size:13.5px;padding:7px 12px}
}

.calc-sub2{text-align:center;margin-top:12px;font-size:14.5px;color:var(--mut);
  letter-spacing:.02em}
/* 값 내는 쪽 바로 앞의 다리 — 조용하게. 여기서 화려하면 가격표와 싸운다. */
.calc-bridge{background:var(--navy);color:var(--cream);padding:22px 0}
.calc-bridge .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:center;text-align:center}
.calc-bridge p{margin:0;font-size:17px;color:rgba(244,238,223,.9)}
.calc-bridge b{color:var(--gold-l)}
.calc-bridge a{font-size:17px;font-weight:700;color:var(--navy);background:var(--gold-l);
  border-radius:999px;padding:11px 22px;text-decoration:none;transition:.18s}
.calc-bridge a:hover{background:var(--cream)}
.calc-bridge a span{display:inline-block;transition:.18s}
.calc-bridge a:hover span{transform:translateX(3px)}

/* ── 홈: 도시 셋 ─────────────────────────────────────────────
   글로 "세 도시" 라고 쓰는 것과 표지 셋이 나란히 있는 것은 다르다. */
.books{background:var(--cream-d)}
/* ── 종이 결 ─────────────────────────────────────────────────
   ⚠ 사이트 크림(#F4EEDF)은 **AI 디자인이 몰려 있는 크림(#F4F1EA)과 거리 11**
     이다. 상투 구간 한복판이다. 책 종이(#EDECE6)도 거리 9로 마찬가지인데,
     책이 그 구간을 벗어나 보이는 이유는 색이 아니라 **결** 때문이다 —
     결이 실제 찍히는 색을 #E2E2DD 까지 끌어내린다(거리 46).
     사이트에는 결이 없어 평평한 크림 그대로였다. 그래서
       ① AI 티가 나고
       ② 책과 톤이 안 맞는다
     같은 결을 깔면 둘이 한 번에 풀린다. **브랜드 색은 안 건드린다.**
   ⚠ 진짜 난수 잡음이다. 격자로 흉내 내면 확대했을 때 무늬가 드러난다. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");background-size:220px 220px;
  mix-blend-mode:multiply}
/* 어두운 면 위에서는 결이 때가 탄 것처럼 보인다 — 거기선 뺀다 */
.hero,.price-sec,.final,.foot,.calc-bridge{isolation:isolate}

/* ── 홈: 도시 셋 ─────────────────────────────────────────────
   글로 "세 도시" 라고 쓰는 것과 표지 셋이 나란히 있는 것은 다르다. */
.books{background:var(--cream-d)}
.bk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.bk-card{display:block;text-decoration:none;background:var(--card);
  border:1px solid var(--line);border-radius:18px;padding:16px 16px 20px;
  transition:.2s}
.bk-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(12,34,48,.12)}
.bk-img{border-radius:12px;overflow:hidden;background:var(--cream-d);
  aspect-ratio:840/1456}
.bk-img img{width:100%;height:100%;object-fit:cover;display:block}
.bk-t{font-family:var(--display);font-size:25px;font-weight:700;color:var(--navy);
  margin-top:16px;letter-spacing:-.02em}
.bk-s{font-size:15px;color:var(--ink-2);margin-top:5px;line-height:1.6}
.bk-m{font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  color:var(--gold-ink);margin-top:12px}

@media(max-width:860px){
  .what-grid{grid-template-columns:1fr;gap:14px}
  .bk-grid{grid-template-columns:1fr;gap:16px}
  .bk-img{aspect-ratio:16/10}
  .bk-card{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:center;
    padding:14px}
  .bk-img{aspect-ratio:840/1456}
  .bk-t{margin-top:0}
  .bk-m{margin-top:8px}
}


/* ── 종이 결 ─────────────────────────────────────────────────
   ⚠ 사이트 크림(#F4EEDF)은 **AI 디자인이 몰려 있는 크림(#F4F1EA)과 거리 11**
     이다. 상투 구간 한복판이다. 책 종이(#EDECE6)도 거리 9로 마찬가지인데,
     책이 그 구간을 벗어나 보이는 이유는 색이 아니라 **결** 때문이다 —
     결이 실제 찍히는 색을 #E2E2DD 까지 끌어내린다(거리 46).
     사이트에는 결이 없어 평평한 크림 그대로였다. 그래서
       ① AI 티가 나고
       ② 책과 톤이 안 맞는다
     같은 결을 깔면 둘이 한 번에 풀린다. **브랜드 색은 안 건드린다.**
   ⚠ 진짜 난수 잡음이다. 격자로 흉내 내면 확대했을 때 무늬가 드러난다. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");background-size:220px 220px;
  mix-blend-mode:multiply}
/* 어두운 면 위에서는 결이 때가 탄 것처럼 보인다 — 거기선 뺀다 */
.hero,.price-sec,.final,.foot,.calc-bridge{isolation:isolate}

/* ── 홈: 무엇을 파나 ─────────────────────────────────────────
   ⚠ 여기가 **똑같은 둥근 상자 세 개**였다. AI 가 만드는 배치의 전형이다.
     무엇보다 **책에는 그런 상자가 없다** — 책은 머리카락 선 열네 군데로 가른다.
     사이트만 상자를 쓰면 같은 집 물건으로 안 보인다.
     선으로 가르고, 번호는 크게, 셋의 무게를 다르게 준다.
     둘째 줄(계산기)이 미끼라 거기만 진하다 — 셋이 똑같으면 고를 이유가 없다. */
.what{background:transparent}
.sell{margin-top:38px;border-top:1px solid var(--line-2)}
.sell-row{display:grid;grid-template-columns:88px 1fr 190px;gap:26px;
  align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line-2)}
.sell-n{font-family:var(--display);font-size:44px;font-weight:700;line-height:1;
  color:var(--line-2);letter-spacing:-.04em}
.sell-b h3{font-family:var(--display);font-size:30px;font-weight:700;margin:0;
  color:var(--navy);letter-spacing:-.025em;line-height:1.2}
.sell-b p{margin:10px 0 0;font-size:16px;line-height:1.8;color:var(--ink-2);
  max-width:46ch}
.sell-x{text-align:right;font-family:var(--display);font-size:23px;font-weight:700;
  color:var(--navy);line-height:1.25;letter-spacing:-.02em}
.sell-x em{display:block;font-family:var(--ui);font-style:normal;font-size:12.5px;
  font-weight:600;letter-spacing:.1em;color:var(--mut);margin-top:6px}
/* 미끼 줄만 무겁게 — 번호에 색을 주고 왼쪽에 굵은 선 하나 */
.sell-lead{position:relative}
.sell-lead::before{content:"";position:absolute;left:-24px;top:34px;bottom:34px;
  width:3px;background:var(--gold)}
.sell-lead .sell-n{color:var(--gold)}
.sell-lead .sell-b h3{font-size:34px}
.sell-free{color:#0A6E82}
.sell-go{display:inline-block;margin-top:14px;font-family:var(--ui);font-size:15px;
  font-weight:700;color:var(--gold-ink);text-decoration:none;
  border-bottom:2px solid var(--gold);padding-bottom:4px}
.sell-go span{display:inline-block;transition:.18s}
.sell-go:hover span{transform:translateX(4px)}

@media(max-width:820px){
  .sell-row{grid-template-columns:52px 1fr;gap:16px;padding:26px 0}
  .sell-n{font-size:32px}
  .sell-b h3,.sell-lead .sell-b h3{font-size:25px}
  .sell-x{grid-column:2;text-align:left;font-size:19px;margin-top:12px}
  .sell-x em{margin-top:3px}
  .sell-lead::before{left:-14px}
}

/* ── 홈: 파는 물건 셋 ────────────────────────────────────────
   ⚠ 세 번째 판이다.
     1차 똑같은 둥근 상자 셋 → AI 티
     2차 선으로만 가른 글 목록 → 한눈에 안 들어옴
     3차 실물 셋을 늘어놓음 → **크기가 제각각이라 흐트러져 보임**
   3차에서 무엇을 놓쳤나 — 조사에서 본 모노클 최상단은 `632 | 300 | 300` 으로
   **면적은 4.4배 차이인데 비율은 셋 다 4:3** 이었다. 나는 비율까지 다 다르게
   뒀다(책 0.58 / 폰 0.46 / 지도 1.21). 크기를 다르게 하는 것과 **제각각인 것**은
   다르다.
   → **높이를 하나로 묶고 바닥선을 맞춘다.** 물건 셋을 한 상 위에 올려 둔 모양이
     된다. 폭은 저마다의 비율대로 흐르되 위아래가 정렬돼 흐트러지지 않는다.
   ⚠ 비교 대상 여섯 곳(Hoxton·Herb Lester·Monocle·Present&Correct·Atlas Obscura
     ·Kinfolk)이 **예외 없이** radius 0, 카드 배경 없음, 테두리 없음이었다.
     그림자만 남기고 다 걷는다. */
.goods{background:transparent;padding-bottom:0}
.goods-head{margin-bottom:34px}
.goods-head .section-title{margin-top:10px}
.goods-row{display:flex;align-items:flex-end;justify-content:flex-start;
  gap:clamp(24px,4vw,64px);flex-wrap:nowrap}
.gd{margin:0;display:flex;flex-direction:column;align-items:flex-start}
/* 높이 하나로 묶는다 — 여기가 핵심 */
/* ⚠ 420px 로 뒀더니 물건은 정돈됐는데 **설명이 화면 밖으로 밀렸다.**
   섹션 하나가 한 화면에 안 들어오면 '한눈에' 가 안 된다. 330px 로 내린다. */
.gd img{height:clamp(210px,23vw,330px);width:auto;max-width:100%;display:block;
  border-radius:0;box-shadow:0 16px 40px rgba(12,34,48,.20)}
.gd-calc img{border-radius:10px}          /* 폰만 모서리 — 실물이 그러니까 */
.gd figcaption{margin-top:16px;font-family:var(--sans);font-size:15px;
  color:var(--ink-2);line-height:1.6}
.gd figcaption b{display:block;font-family:var(--display);font-size:21px;
  font-weight:700;color:var(--navy);letter-spacing:-.02em;margin-bottom:4px}
.gd figcaption em{display:block;font-family:var(--ui);font-style:normal;
  font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--gold-ink);
  margin-top:6px}
.gd-calc figcaption em{color:#0A6E82}
.goods-go{display:inline-block;margin-top:44px;font-family:var(--ui);font-size:17px;
  font-weight:700;color:var(--navy);text-decoration:none;
  border-bottom:2.5px solid var(--gold);padding-bottom:6px}
.goods-go span{display:inline-block;transition:.18s}
.goods-go:hover span{transform:translateX(5px)}

@media(max-width:820px){
  /* 폰에서는 셋을 한 줄에 세우면 다 작아진다. 가로로 밀어 보게 둔다 —
     스크롤 띠는 카사 브루투스가 지면에서 쓰던 것과 같은 발상이다. */
  .goods-row{overflow-x:auto;padding-bottom:8px;gap:20px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .goods-row::-webkit-scrollbar{display:none}
  .gd{scroll-snap-align:start;flex:none}
  .gd img{height:300px}
  .gd figcaption{margin-top:14px;font-size:14px}
  .gd figcaption b{font-size:18px}
  .goods-head{margin-bottom:30px}
  .goods-go{margin-top:34px;font-size:16px}
}

/* ── 홈: 도시 셋 ─────────────────────────────────────────────
   글로 "세 도시" 라고 쓰는 것과 표지 셋이 나란히 있는 것은 다르다. */
.books{background:var(--cream-d)}
/* ── 종이 결 ─────────────────────────────────────────────────
   ⚠ 사이트 크림(#F4EEDF)은 **AI 디자인이 몰려 있는 크림(#F4F1EA)과 거리 11**
     이다. 상투 구간 한복판이다. 책 종이(#EDECE6)도 거리 9로 마찬가지인데,
     책이 그 구간을 벗어나 보이는 이유는 색이 아니라 **결** 때문이다 —
     결이 실제 찍히는 색을 #E2E2DD 까지 끌어내린다(거리 46).
     사이트에는 결이 없어 평평한 크림 그대로였다. 그래서
       ① AI 티가 나고
       ② 책과 톤이 안 맞는다
     같은 결을 깔면 둘이 한 번에 풀린다. **브랜드 색은 안 건드린다.**
   ⚠ 진짜 난수 잡음이다. 격자로 흉내 내면 확대했을 때 무늬가 드러난다. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");background-size:220px 220px;
  mix-blend-mode:multiply}
/* 어두운 면 위에서는 결이 때가 탄 것처럼 보인다 — 거기선 뺀다 */
.hero,.price-sec,.final,.foot,.calc-bridge{isolation:isolate}

/* ── 홈: 도시 셋 ─────────────────────────────────────────────
   글로 "세 도시" 라고 쓰는 것과 표지 셋이 나란히 있는 것은 다르다. */
.books{background:var(--cream-d)}
.bk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.bk-card{display:block;text-decoration:none;background:var(--card);
  border:1px solid var(--line);border-radius:18px;padding:16px 16px 20px;
  transition:.2s}
.bk-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(12,34,48,.12)}
.bk-img{border-radius:12px;overflow:hidden;background:var(--cream-d);
  aspect-ratio:840/1456}
.bk-img img{width:100%;height:100%;object-fit:cover;display:block}
.bk-t{font-family:var(--display);font-size:25px;font-weight:700;color:var(--navy);
  margin-top:16px;letter-spacing:-.02em}
.bk-s{font-size:15px;color:var(--ink-2);margin-top:5px;line-height:1.6}
.bk-m{font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  color:var(--gold-ink);margin-top:12px}

@media(max-width:860px){
  .what-grid{grid-template-columns:1fr;gap:14px}
  .bk-grid{grid-template-columns:1fr;gap:16px}
  .bk-img{aspect-ratio:16/10}
  .bk-card{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:center;
    padding:14px}
  .bk-img{aspect-ratio:840/1456}
  .bk-t{margin-top:0}
  .bk-m{margin-top:8px}
}


/* ── 종이 결 ─────────────────────────────────────────────────
   ⚠ 사이트 크림(#F4EEDF)은 **AI 디자인이 몰려 있는 크림(#F4F1EA)과 거리 11**
     이다. 상투 구간 한복판이다. 책 종이(#EDECE6)도 거리 9로 마찬가지인데,
     책이 그 구간을 벗어나 보이는 이유는 색이 아니라 **결** 때문이다 —
     결이 실제 찍히는 색을 #E2E2DD 까지 끌어내린다(거리 46).
     사이트에는 결이 없어 평평한 크림 그대로였다. 그래서
       ① AI 티가 나고
       ② 책과 톤이 안 맞는다
     같은 결을 깔면 둘이 한 번에 풀린다. **브랜드 색은 안 건드린다.**
   ⚠ 진짜 난수 잡음이다. 격자로 흉내 내면 확대했을 때 무늬가 드러난다. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");background-size:220px 220px;
  mix-blend-mode:multiply}
/* 어두운 면 위에서는 결이 때가 탄 것처럼 보인다 — 거기선 뺀다 */
.hero,.price-sec,.final,.foot,.calc-bridge{isolation:isolate}

/* ── 홈: 무엇을 파나 ─────────────────────────────────────────
   ⚠ 여기가 **똑같은 둥근 상자 세 개**였다. AI 가 만드는 배치의 전형이다.
     무엇보다 **책에는 그런 상자가 없다** — 책은 머리카락 선 열네 군데로 가른다.
     사이트만 상자를 쓰면 같은 집 물건으로 안 보인다.
     선으로 가르고, 번호는 크게, 셋의 무게를 다르게 준다.
     둘째 줄(계산기)이 미끼라 거기만 진하다 — 셋이 똑같으면 고를 이유가 없다. */
.what{background:transparent}
.sell{margin-top:38px;border-top:1px solid var(--line-2)}
.sell-row{display:grid;grid-template-columns:88px 1fr 190px;gap:26px;
  align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line-2)}
.sell-n{font-family:var(--display);font-size:44px;font-weight:700;line-height:1;
  color:var(--line-2);letter-spacing:-.04em}
.sell-b h3{font-family:var(--display);font-size:30px;font-weight:700;margin:0;
  color:var(--navy);letter-spacing:-.025em;line-height:1.2}
.sell-b p{margin:10px 0 0;font-size:16px;line-height:1.8;color:var(--ink-2);
  max-width:46ch}
.sell-x{text-align:right;font-family:var(--display);font-size:23px;font-weight:700;
  color:var(--navy);line-height:1.25;letter-spacing:-.02em}
.sell-x em{display:block;font-family:var(--ui);font-style:normal;font-size:12.5px;
  font-weight:600;letter-spacing:.1em;color:var(--mut);margin-top:6px}
/* 미끼 줄만 무겁게 — 번호에 색을 주고 왼쪽에 굵은 선 하나 */
.sell-lead{position:relative}
.sell-lead::before{content:"";position:absolute;left:-24px;top:34px;bottom:34px;
  width:3px;background:var(--gold)}
.sell-lead .sell-n{color:var(--gold)}
.sell-lead .sell-b h3{font-size:34px}
.sell-free{color:#0A6E82}
.sell-go{display:inline-block;margin-top:14px;font-family:var(--ui);font-size:15px;
  font-weight:700;color:var(--gold-ink);text-decoration:none;
  border-bottom:2px solid var(--gold);padding-bottom:4px}
.sell-go span{display:inline-block;transition:.18s}
.sell-go:hover span{transform:translateX(4px)}

@media(max-width:820px){
  .sell-row{grid-template-columns:52px 1fr;gap:16px;padding:26px 0}
  .sell-n{font-size:32px}
  .sell-b h3,.sell-lead .sell-b h3{font-size:25px}
  .sell-x{grid-column:2;text-align:left;font-size:19px;margin-top:12px}
  .sell-x em{margin-top:3px}
  .sell-lead::before{left:-14px}
}

/* ── 메뉴를 다섯으로 ───────────────────────────────────────────
   12개였다. 페이지마다 다르기까지 했다. 손님이 묻는 순서로 다섯만 남긴다.
   모바일 서랍은 같은 묶음에 **작은 머리말**을 달아 눈에 들어오게 한다. */
.drawer-links .dl-head{display:block;font-family:var(--ui);font-size:11px;
  font-weight:700;letter-spacing:.16em;color:var(--gold-ink);
  margin:22px 0 2px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.drawer-links .dl-head:first-child{margin-top:0}
.nav-drop-menu a em{display:block;font-style:normal;font-size:11.5px;
  color:var(--mut);margin-top:2px}

/* ── 사는 길 한 줄 띠 ──────────────────────────────────────────
   계산기·사용법·어떻게만드나에는 **살 방법이 화면에 없었다.**
   본문을 밀지 않게 한 줄만 둔다. */
.buybar{background:var(--navy);color:var(--cream);padding:14px 0}
.buybar-in{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.buybar-t{font-size:14px;color:rgba(244,238,223,.78)}
.buybar-t b{color:var(--gold-l);font-weight:700}
.buybar-b{flex:none;font-family:var(--ui);font-size:14px;font-weight:700;
  background:var(--gold);color:var(--navy);text-decoration:none;
  padding:11px 20px;border-radius:999px;transition:background .18s}
.buybar-b:hover{background:var(--gold-l)}
@media(max-width:560px){
  .buybar-in{flex-direction:column;align-items:stretch;text-align:center}
  .buybar-b{text-align:center}
}

/* ── 세 도시 카드 ─────────────────────────────────────────────
   ⚠ 폰에서 `.bk-card` 가 두 칸 grid 라 자식이 넷이면 글이 흩어진다.
     `.bk-txt` 로 묶어 자식을 둘로 만든다. */
.bk-img{position:relative}
.bk-soon{position:absolute;left:10px;top:10px;z-index:1;
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.08em;
  background:var(--navy);color:var(--cream);padding:5px 10px;border-radius:999px}
.bk-card.is-soon .bk-img img{filter:saturate(.72)}
@media(max-width:760px){
  .bk-card{grid-template-columns:118px 1fr}
  .bk-txt{min-width:0}
  .bk-t{margin-top:0}
}

/* ── 지도가 두 벌이라는 표시 ─────────────────────────────────
   미리보기에 보이는 건 모바일용 한 벌이다. PC용이 따로 있다는 걸
   사기 전에 알아야 한다. */
.pv-two{margin:9px 0 0;font-family:var(--ui);font-size:13px;line-height:1.6;
  color:var(--mut);text-align:center}
.pv-two b{color:var(--ink-2);font-weight:700}

/* ══════════════════════════════════════════════════════════════════
   장식용 금색 막대를 끈다
   뜻 없는 장식이다. 제목마다 붙어 있었는데 어울리지 않았다.
   ⚠ `.nav-menu a::after` 는 남긴다 — 장식이 아니라 지금 어디에
     올려놨는지 알려주는 밑줄이다.
   ══════════════════════════════════════════════════════════════════ */
.eyebrow::before,.hero .eyebrow::before,.how .eyebrow::before,
.s-rule,.story-sign .rule,.sell-lead::before,
.heyebrow::after,.eb::after,.cap .rule,.frame .rule{display:none}
.eyebrow,.hero .eyebrow,.how .eyebrow{padding-left:0}

/* ══════════════════════════════════════════════════════════════════
   숫자 막대 균형
   숫자 46px / 이름표 13.5px 이라 3.4배 차이가 났다. 숫자만 보이고
   무엇을 센 건지가 안 읽혔다. 단위(곳)는 금색이라 대비 2.26:1 이었다.
   ⚠ 파일 맨 끝에 둔다 — 앞의 `.stat` 규칙을 덮어야 한다.
   ══════════════════════════════════════════════════════════════════ */
.dest-stats{border-radius:16px}
.stat{padding:24px 18px}
.stat .num{font-size:clamp(1.7rem,2.8vw,2.15rem);letter-spacing:-.015em}
.stat .num .u{font-size:.44em;color:var(--mut);font-weight:600;
  margin-left:4px;letter-spacing:0}
.stat .lbl{margin-top:9px;font-size:14.5px;color:var(--ink-2);font-weight:600}
@media(max-width:560px){
  .stat{padding:20px 12px}
  .stat .lbl{font-size:13.5px}
}

/* ══════════════════════════════════════════════════════════════════
   계산기를 1번 섹션 위로  — 상자와 칩을 버리고 도구 + 결과 화면으로
   ⚠ 파일 맨 끝에 둔다. 앞의 `.calc-box` 규칙을 덮어야 한다.
   ══════════════════════════════════════════════════════════════════ */
.calcx{background:var(--cream)}
.calcx-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.66fr);
  gap:clamp(30px,5vw,76px);align-items:center}
.calcx-say .section-title{margin-top:14px}
.calcx-say .section-desc{max-width:40ch;margin-top:16px}
.calcx-note{margin-top:16px;font-size:14px;line-height:1.7;color:var(--mut)}
.calcx-note b{color:var(--ink-2);font-weight:700}
/* 그림자 없음 — 여행 상품 사이트 11곳 실측에서 11/11 이 `box-shadow: none` */
.calcx-shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:13px}
.calcx-shot img{width:100%;max-width:310px;height:auto;display:block;
  border-radius:12px;box-shadow:none}
.calcx-shot figcaption{font-family:var(--ui);font-size:12px;letter-spacing:.04em;
  color:var(--mut)}

/* 고르는 칸 — 도시를 다 펼친다
   ⚠ 예전엔 `<select>` 두 개짜리 알약 검색바였다. 예약 사이트 형식인데
     길담은 예약을 안 받는다. 게다가 폰에서 셀렉트를 열면 OS 기본 목록이
     떠서 길담이 손댈 수 없는 화면이 나온다. 한 번만 누르게 바꿨다. */
.tw{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;max-width:600px}
.tw-c{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--navy);
  text-decoration:none;background:#fff;border:1px solid var(--line-2);
  border-radius:999px;padding:10px 19px;line-height:1;
  transition:background .16s,border-color .16s,color .16s}
.tw-c:hover{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.tw-c:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tw-on{background:var(--gold);border-color:var(--gold)}
.tw-on:hover{background:var(--navy);border-color:var(--navy)}

/* ── 사진 띠 — 히어로를 계산기 아래로 내린 자리 ────────────────
   첫 화면을 다 먹던 100svh 를 걷어내고 한 판만 남긴다.
   사진은 그대로 크게 쓰되, 첫 화면 자리를 도구에 내준다. */
.hero-band .hero{min-height:0;height:clamp(430px,64vh,640px)}
.hero-band .hero-in{padding-bottom:clamp(40px,7vh,64px)}
.hero-band .hero h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.hero-band .scroll-cue{display:none}

@media(max-width:860px){
  .hero-band .hero{height:clamp(380px,54vh,520px)}
  /* 도구가 먼저, 결과 화면은 나중 — 좁은 화면에서 그림이 먼저 오면
     무슨 그림인지 모른 채 스크롤한다. */
  .calcx-in{grid-template-columns:1fr;gap:32px}
  .calcx-say{order:1}
  .calcx-shot{order:2}
  .calcx-shot img{max-width:264px}
}

/* ══════════════════════════════════════════════════════════════════
   금색 글자를 바탕에 맞게 나눈다
   렌더해서 재 보니 크림 바탕 위 금색은 1.71:1 이었다(기준 4.5:1).
   남색 바탕 위에서는 8.25:1 로 잘 보인다. 그래서 바탕별로 나눈다.
   ⚠ 파일 맨 끝에 둔다.
   ══════════════════════════════════════════════════════════════════ */
/* 글자용 금색을 한 칸 더 내렸다.
   `--gold-ink` #7F621A 는 크림에선 4.95 로 통과했지만 조금 짙은 크림
   `#EBE3CF`(들어 있는 것 칸) 위에서 4.48 로 아슬하게 미달이었다.
   #785C18 이면 세 바탕 모두 4.9 이상이다. */
:root{--gold-txt:#785C18}
.eyebrow{color:var(--gold-txt)}
/* 남색 바탕인 칸만 원래 금색을 쓴다 — 거기선 8.25:1 로 잘 보인다.
   ⚠ `.final` 은 남색인 줄 알았는데 재 보니 크림이었다. 뺐다. */
.how .eyebrow,.pricing .eyebrow,
.mcta .eyebrow,.buybar .eyebrow{color:var(--gold-l)}
/* 금색 14% 바탕 위 금색 글자였다(2.53:1).
   ⚠ `.incl-item .tag` 가 두 클래스라 `.tag` 한 개로는 안 이긴다. */
.tag,.incl-item .tag{color:var(--gold-txt)}
.tag.only,.incl-item .tag.only{color:var(--gold-l)}
/* 마지막 칸(`final`)은 **사진 위**다. 실제 픽셀을 집어 보니 바탕이
   rgb(118,124,121) 이라 금색이 2.16:1 이었다. 색을 바꾸면 사진 위에서
   탁해지니, 히어로가 쓰는 것과 같은 그림자로 띄운다. */
.final .eyebrow{text-shadow:0 1px 16px rgba(8,24,33,.9),0 1px 3px rgba(8,24,33,.8)}
/* 사진 위에 얹힌 글자들 — 픽셀을 집어 재 보니 3.4:1 안팎이었다.
   사진은 자리마다 밝기가 달라서 색으로는 못 잡는다. 그림자로 띄운다. */
.dest-body .kicker,.dest-body .dest-cta,.hero-sub span{
  text-shadow:0 1px 14px rgba(8,24,33,.9),0 1px 3px rgba(8,24,33,.8)}
/* 크림 바탕 위 금색 강조 글자 (「답답했어요.」 같은)
   ⚠ `.story-quote blockquote em` 은 클래스+요소 두 겹이라
     `blockquote em` 한 겹으로는 안 이긴다. 같은 무게로 맞춰 적는다.
   ⚠ `.hero h1 em` 은 사진 위인데 그림자가 이미 걸려 있다. 건드리지 않는다. */
.story-quote em,.story-body em,
.story-quote blockquote em{color:var(--gold-txt)}
/* 큰 따옴표는 장식이다. 글이 아니니 대비 대신 무게를 뺀다.
   ⚠ `.story-quote .q-mark` 가 두 클래스라 한 개짜리로는 안 이긴다. */
.q-mark,.story-quote .q-mark{color:var(--line-2)}
/* 계산기를 맨 앞으로 */

/* ══════════════════════════════════════════════════════════════════
   계산기를 1번 섹션 위로  — 상자와 칩을 버리고 도구 + 결과 화면으로
   ⚠ 파일 맨 끝에 둔다. 앞의 `.calc-box` 규칙을 덮어야 한다.
   ══════════════════════════════════════════════════════════════════ */
.calcx{background:var(--cream)}
.calcx-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.66fr);
  gap:clamp(30px,5vw,76px);align-items:center}
.calcx-say .section-title{margin-top:14px}
.calcx-say .section-desc{max-width:40ch;margin-top:16px}
.calcx-note{margin-top:16px;font-size:14px;line-height:1.7;color:var(--mut)}
.calcx-note b{color:var(--ink-2);font-weight:700}
/* 그림자 없음 — 여행 상품 사이트 11곳 실측에서 11/11 이 `box-shadow: none` */
.calcx-shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:13px}
.calcx-shot img{width:100%;max-width:310px;height:auto;display:block;
  border-radius:12px;box-shadow:none}
.calcx-shot figcaption{font-family:var(--ui);font-size:12px;letter-spacing:.04em;
  color:var(--mut)}

/* 고르는 칸 — 도시를 다 펼친다
   ⚠ 예전엔 `<select>` 두 개짜리 알약 검색바였다. 예약 사이트 형식인데
     길담은 예약을 안 받는다. 게다가 폰에서 셀렉트를 열면 OS 기본 목록이
     떠서 길담이 손댈 수 없는 화면이 나온다. 한 번만 누르게 바꿨다. */
.tw{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;max-width:600px}
.tw-c{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--navy);
  text-decoration:none;background:#fff;border:1px solid var(--line-2);
  border-radius:999px;padding:10px 19px;line-height:1;
  transition:background .16s,border-color .16s,color .16s}
.tw-c:hover{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.tw-c:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tw-on{background:var(--gold);border-color:var(--gold)}
.tw-on:hover{background:var(--navy);border-color:var(--navy)}

/* ── 사진 띠 — 히어로를 계산기 아래로 내린 자리 ────────────────
   첫 화면을 다 먹던 100svh 를 걷어내고 한 판만 남긴다.
   사진은 그대로 크게 쓰되, 첫 화면 자리를 도구에 내준다. */
.hero-band .hero{min-height:0;height:clamp(430px,64vh,640px)}
.hero-band .hero-in{padding-bottom:clamp(40px,7vh,64px)}
.hero-band .hero h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.hero-band .scroll-cue{display:none}

@media(max-width:860px){
  .hero-band .hero{height:clamp(380px,54vh,520px)}
  /* 도구가 먼저, 결과 화면은 나중 — 좁은 화면에서 그림이 먼저 오면
     무슨 그림인지 모른 채 스크롤한다. */
  .calcx-in{grid-template-columns:1fr;gap:32px}
  .calcx-say{order:1}
  .calcx-shot{order:2}
  .calcx-shot img{max-width:264px}
}