/* =========================================================================
   VNHIGHROLL — Midnight Champagne (v2 · 최고급 리파인)
   딥네이비 + 샴페인골드 + 정교한 골드 헤어라인 · 명품 카지노 컨시어지
   ⚠️ gold-raccoon과 완전 별개. 접두어/클래스 독립.
   ========================================================================= */

/* ---------- fonts (self-host, fontsource subset) ---------- */
@font-face{font-family:"Plex KR";src:url("/assets/fonts/plexkr-400.woff2?v=s2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+AC00-D7A3,U+1100-11FF,U+3130-318F}
@font-face{font-family:"Plex KR";src:url("/assets/fonts/plexlatin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex KR";src:url("/assets/fonts/plexkr-600.woff2?v=s2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+AC00-D7A3,U+1100-11FF,U+3130-318F}
@font-face{font-family:"Plex KR";src:url("/assets/fonts/plexlatin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Gowun";src:url("/assets/fonts/gowun-kr-700.woff2?v=s2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+AC00-D7A3,U+1100-11FF,U+3130-318F}
@font-face{font-family:"Gowun";src:url("/assets/fonts/gowun-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Cormorant 2종(46.7KB) 제거 — --display 로만 쓰였고, 사용처 5곳(.brand-mark · .region-card .count ·
   .stepper-val · .itin-card time · .bridge-flow .bf-t) 중 한글이 섞인 값은 이미 Cormorant 에
   글리프가 없어 Gowun 으로 폴백되고 있었다. 실제로 바뀌는 것은 라틴 숫자·영문 표시뿐이고,
   그 대가로 폰트 요청 2건이 전 페이지에서 사라진다. preload 는 원래 걸려 있지 않았다(BUILD 확인). */

/* ---------- tokens ---------- */
:root{
  --navy-950:#060a13;
  --navy-900:#090f1c;
  --navy-800:#0d1526;
  --navy-700:#131d33;
  --navy-600:#1b2942;
  --ivory:#f5f2e9;
  --ivory-dim:#c4c6c1;
  --muted:#8b93a5;
  --gold:#cfa963;
  --gold-2:#eddaa9;
  --gold-deep:#a9823f;
  --line:rgba(207,169,99,.20);
  --line-2:rgba(207,169,99,.34);
  --glass:linear-gradient(158deg,rgba(24,35,58,.62),rgba(13,21,38,.5));
  --shadow:0 26px 60px -28px rgba(0,0,0,.75);
  /* 디자인 개편 팔레트 (명/암 대비 · 조용한 럭셔리) */
  --ink-950:#0b0d0f;
  --forest-900:#10221b;
  --forest-800:#16352a;
  --cream-50:#f8f5ee;
  --cream-100:#f2eee3;
  --stone-100:#ece8df;
  --stone-300:#cbc5b8;
  --stone-600:#716c63;
  --stone-700:#54514a;
  --ink-800:#1b2028;
  --gold-500:#b7954b;
  /* 시맨틱 토큰 (전 페이지 다크 단일 테마) */
  --text:var(--ivory);
  --text-dim:var(--ivory-dim);
  --text-muted:var(--muted);
  --surface-border:var(--line);
  --shadow-soft:0 8px 32px rgba(11,13,15,.42);
  --sans:"Plex KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  --serif:"Gowun",serif;
  /* --display 는 이제 --serif 와 같다. 토큰을 지우지 않고 별칭으로 남기는 이유:
     사용처 5곳이 '수치·시각을 크게 보여 주는 자리'라는 의미를 계속 표시하고 있어서,
     나중에 전용 서체를 다시 넣을 때 어디에 넣어야 하는지가 이 이름 하나로 남는다. */
  --display:var(--serif);
  --wrap:1180px;
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* 가로 스크롤 원천 차단(모바일 UX) — clip은 sticky 유지하며 가로 넘침만 잘라냄 */
html,body{max-width:100%;overflow-x:clip}
body{
  margin:0;font-family:var(--sans);font-weight:400;line-height:1.78;
  color:var(--ivory);background:var(--navy-900);position:relative;
  background-image:
    radial-gradient(1100px 620px at 82% -6%,rgba(207,169,99,.10),transparent 58%),
    radial-gradient(820px 520px at 6% 3%,rgba(41,66,120,.20),transparent 55%),
    linear-gradient(180deg,var(--navy-950),var(--navy-900) 46%,var(--navy-800));
  /* background-attachment:fixed 제거(R5-A3) — 스크롤마다 뷰포트 전체 그라디언트를 다시 칠하게 만든다.
     모바일에서 특히 비싸고, 이 배경은 그라디언트라 scroll 로 바꿔도 눈에 띄는 차이가 없다. */
  background-attachment:scroll;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* 미세 필름 그레인 — 리치한 질감 */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
/* 모바일에선 그레인 오버레이를 끈다(R5-A3) — position:fixed 전체화면 레이어라 스크롤 내내
   합성 대상으로 남는다. 작은 화면에서 opacity .035 노이즈의 시각적 기여는 사실상 0. */
@media(max-width:820px){body::before{display:none}}
body>*{position:relative;z-index:2}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.16;letter-spacing:-.005em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.4vw,4rem)}
h2{font-size:clamp(1.6rem,3.1vw,2.35rem)}
h3{font-size:1.22rem;letter-spacing:0}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:26px}
main{display:block}
section{padding-block:clamp(46px,7vw,88px)}
::selection{background:rgba(207,169,99,.28);color:#fff}

/* eyebrow — 골드 캡션 + 양옆 헤어라인 */
.eyebrow{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1.1em;display:inline-flex;align-items:center;gap:.85em}
.eyebrow::before{content:"";width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:38px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}

/* 섹션 헤더 여백 */
section>.wrap>.eyebrow:first-child{margin-top:0}

/* 골드 얇은 구분선 */
.hr-gold{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* ---------- header ---------- */
/* backdrop-filter 유지 결정(R6). R5 에서 카드의 blur 를 걷어낸 근거는 '한 장에 10~20개가 쌓인다'였고,
   남은 세 곳(.site-head · .drawer-backdrop · .mobile-bar)은 페이지당 1개라 그 근거가 적용되지 않는다.
   실측 A/B(헤드리스 Edge, GPU 합성, CPU 4~6배 스로틀, 같은 로드 안에서 blur 만 켜고/끄고 3회 교대):
     · 스크롤 프레임 간격 — 중앙값 16.7ms / p90 17.1~17.3ms 로 켜고 끈 값이 같고, 32ms 초과 프레임 0
     · 트레이스 페인트 합계 — 161프레임 동안 켬 평균 56.8ms vs 끔 44.4ms → 프레임당 약 0.08ms
       (16.7ms 예산의 0.5% 수준이고, 회차 간 잡음이 이 차이만 하다)
   즉 걷어내도 사용자가 체감할 몫이 없다. 게다가 이 사이트의 병목은 폰트·이미지 네트워크 워터폴
   (TBT 0ms · TTFB 약 260ms)이라 합성 비용을 줄이는 변경은 LCP 점수를 움직이지 못한다.
   반대로 blur 를 빼면 스크롤되는 본문 위에 겹치는 헤더·바의 글자 대비가 실제로 나빠진다.
   ※ 측정 환경은 데스크톱 GPU다. 저사양 안드로이드 GPU 에서는 더 비쌀 수 있으나,
     그때도 '페이지당 1개'라는 조건은 그대로다. */
.site-head{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px) saturate(1.2);
  background:linear-gradient(180deg,rgba(6,10,19,.94),rgba(6,10,19,.66));
  border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:22px;min-height:72px}
.brand{display:flex;align-items:center;gap:13px;margin-right:auto}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;
  font-family:var(--display);font-weight:600;font-size:1.18rem;color:var(--navy-950);
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  box-shadow:0 6px 20px -6px rgba(207,169,99,.65),inset 0 1px 0 rgba(255,255,255,.4)}
.brand-txt{font-family:var(--serif);font-weight:700;font-size:1.34rem;letter-spacing:.01em}
.site-nav{display:flex;gap:2px}
.site-nav a{padding:9px 15px;border-radius:8px;font-size:.94rem;color:var(--ivory-dim);position:relative;
  transition:color .25s var(--ease)}
.site-nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:6px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.site-nav a:hover{color:var(--ivory)}
.site-nav a:hover::after{transform:scaleX(1)}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);color:var(--gold);
  width:44px;height:44px;border-radius:10px;font-size:1.25rem;cursor:pointer}
/* 드롭다운 내비 (카지노·밤문화·여행 → 도시) */
.nav-group{position:relative}
.nav-top{display:inline-flex;align-items:center;gap:5px;padding:9px 15px;border-radius:8px;font-size:.94rem;color:var(--ivory-dim);cursor:pointer;transition:color .2s var(--ease)}
.nav-top:hover,.nav-group:hover .nav-top,.nav-group:focus-within .nav-top{color:var(--ivory)}
.nav-caret{font-size:.62em;opacity:.7;transition:transform .2s var(--ease)}
.nav-group:hover .nav-caret,.nav-group:focus-within .nav-caret{transform:rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:158px;display:none;flex-direction:column;padding:6px;
  background:linear-gradient(180deg,rgba(19,29,51,.99),rgba(9,15,28,.99));border:1px solid var(--line-2);border-radius:11px;box-shadow:var(--shadow);z-index:60}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{display:flex}
.nav-menu a{padding:9px 12px;border-radius:7px;font-size:.9rem;color:var(--ivory-dim)}
.nav-menu a::after{display:none}
.nav-menu a:hover{background:rgba(207,169,99,.1);color:var(--gold-2)}
.nav-flat{padding:9px 15px;border-radius:8px;font-size:.94rem;color:var(--ivory-dim)}
.nav-flat:hover{color:var(--ivory)}

/* ---------- breadcrumb ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:20px 0 0;
  font-size:.82rem;color:var(--muted)}
.crumbs a{color:var(--ivory-dim)}
.crumbs a:hover{color:var(--gold)}
.crumbs i{font-style:normal;color:var(--gold-deep);opacity:.7}
.crumbs span{color:var(--gold)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;min-height:clamp(560px,86vh,860px);display:flex;align-items:center;
  border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  /* ?v= 는 <head> 의 preload 와 반드시 글자 그대로 같아야 한다 — 다르면 브라우저가
     다른 URL 로 보고 LCP 이미지를 두 번 내려받는다. 지금은 둘 다 v=4(129KB 재인코딩본). */
  background-image:url("/assets/img/hero.webp?v=4")}
@media(max-width:820px){.hero-bg{background-image:url("/assets/img/hero-mobile.webp?v=3")}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(6,10,19,.62) 0%,rgba(6,10,19,.34) 32%,rgba(6,10,19,.72) 74%,var(--navy-900) 100%),
    linear-gradient(90deg,rgba(6,10,19,.7),transparent 62%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(720px 360px at 30% 44%,rgba(207,169,99,.16),transparent 68%)}
.hero .wrap{position:relative;z-index:2;max-width:900px;padding-block:60px}
.hero h1{margin-bottom:.28em;font-size:clamp(2.7rem,6.4vw,4.6rem);line-height:1.05;
  background:linear-gradient(176deg,#fff 30%,var(--gold-2) 128%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 40px rgba(0,0,0,.4)}
.hero .lede{font-size:clamp(1.06rem,1.7vw,1.3rem);line-height:1.7;color:var(--ivory-dim);max-width:600px;margin-bottom:2em}
.hero-cta{display:flex;flex-wrap:wrap;gap:15px}

/* ---------- buttons ---------- */
.btn,.btn-ghost{display:inline-flex;align-items:center;gap:.55em;padding:14px 28px;border-radius:999px;
  font-family:var(--sans);font-weight:600;font-size:.98rem;letter-spacing:.01em;cursor:pointer;
  border:1px solid transparent;transition:transform .2s var(--ease),box-shadow .3s var(--ease),background .3s}
.btn{color:var(--navy-950);background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  box-shadow:0 16px 38px -16px rgba(207,169,99,.8),inset 0 1px 0 rgba(255,255,255,.45)}
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 46px -16px rgba(207,169,99,.95),inset 0 1px 0 rgba(255,255,255,.5)}
/* blur(4px) 제거(R5-A1) — 3% 흰 배경 위 4px 블러는 눈에 거의 안 보이는데 버튼마다 합성 레이어를 만든다 */
.btn-ghost{color:var(--ivory);background:rgba(255,255,255,.03);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(207,169,99,.1);border-color:var(--gold)}
.btn-lg{padding:16px 34px;font-size:1.04rem}
/* T3 — 텍스트 링크 무게의 CTA. <a> 96개와 <button> 50개가 같은 클래스를 쓴다.
   T1(.btn.btn-lg) · T2(.btn-ghost) 아래로 확실히 내려앉아야 해서 알약 배경·테두리·
   backdrop-filter 를 전부 버리고 밑줄만 남긴다. 티어 차이는 '알약이 없다'가 만들고,
   무게(600)는 본문이 아니라 행동이라는 표시로 남긴다.
   button 은 전역 리셋이 없어 네이티브 크롬이 그대로 나오고 텍스트를 가운데 정렬하므로
   text-align:inherit 이 필요하다. 밑줄은 border 가 아니라 text-decoration — 세로 패딩으로
   터치영역을 넓혀도 선이 글자에 붙어 있어야 링크로 읽힌다.
   색 방향(gold → hover gold-2)은 .rg-note a · .verify-link 등 파일 전체 관례를 따른다.
   ※ 동시에 작성된 두 판본을 합친 규칙이다. 다시 쪼개지 말 것. */
.link-cta{display:inline-flex;align-items:center;gap:.35em;min-height:44px;padding:6px 0;
  background:none;border:0;border-radius:6px;cursor:pointer;text-align:inherit;
  font-family:var(--sans);font-weight:600;font-size:.94rem;letter-spacing:.01em;color:var(--gold);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:var(--line-2);
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
.link-cta:hover{color:var(--gold-2);text-decoration-color:var(--gold)}

/* ---------- glass card ---------- */
.card,.region-card{position:relative;display:block;border-radius:var(--r);padding:24px;
  background:var(--glass);border:1px solid var(--line);
  /* backdrop-filter 제거(R5-A1) — 도시 허브 한 장에 카드가 10~20개라 블러 레이어가 그만큼 쌓인다.
     카드 배경(--glass)이 이미 불투명에 가까워 시각적 손실은 거의 없고, 모바일 페인트 비용은 크다. */
  box-shadow:var(--shadow);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.card::after,.region-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:box-shadow .3s}
.card:hover,.region-card:hover{transform:translateY(-5px);border-color:var(--line-2);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.8),0 0 0 1px rgba(207,169,99,.28)}
.card h3,.region-card h3{margin-bottom:.32em}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}

/* 이미지 카드 */
.card.has-img{padding:0}
.card-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .55s var(--ease);
  filter:saturate(1.02)}
.card.has-img:hover .card-img{transform:scale(1.05)}
.card.has-img .card-body{padding:20px 22px 24px;position:relative}
.card.has-img .card-body::before{content:"";position:absolute;left:0;right:0;top:-46px;height:46px;
  background:linear-gradient(180deg,transparent,rgba(13,21,38,.62));pointer-events:none}
.card-badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.7rem;font-weight:600;
  letter-spacing:.06em;color:var(--gold-2);background:rgba(207,169,99,.11);border:1px solid var(--line)}
.card-badge.feat{color:var(--navy-950);background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));border-color:transparent;
  box-shadow:0 3px 10px -3px rgba(207,169,99,.6)}
.badges{display:flex;gap:7px;margin-bottom:12px;flex-wrap:wrap}
.card-feat{border-color:var(--line-2)}
.casino-head .badges{justify-content:flex-start}
.card-region{font-size:.82rem;color:var(--gold);margin:0 0 .6em;letter-spacing:.02em}
.card-tldr{font-size:.92rem;line-height:1.62;color:var(--ivory-dim);margin:0 0 1em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{font-size:.78rem;color:var(--muted);padding-top:.9em;border-top:1px solid var(--line);display:block}

/* region grid */
.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.region-card{padding:26px 24px}
.region-card h3{font-family:var(--serif)}
.region-card p{font-size:.9rem;line-height:1.62;color:var(--ivory-dim);margin-bottom:1em}
.region-card .count{font-family:var(--display);font-size:1.1rem;color:var(--gold);
  display:inline-flex;align-items:center;gap:.5em}
.region-card .count::before{content:"";width:20px;height:1px;background:var(--gold-deep)}

/* section heads */
.page-head{padding-bottom:0}
.page-head h1{margin-bottom:.28em}
.page-head .lede,.section-lede{color:var(--ivory-dim);max-width:700px;font-size:1.04rem}
.mt{margin-top:38px}

/* ---------- TL;DR (AEO) ---------- */
.tldr{position:relative;border-radius:var(--r);padding:26px 30px;margin:0;
  background:linear-gradient(150deg,rgba(207,169,99,.09),rgba(207,169,99,.02));
  border:1px solid var(--line);overflow:hidden}
.tldr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-deep))}
.tldr h2{font-size:.82rem;font-family:var(--sans);font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.8em}
.tldr p,.tldr li{color:var(--ivory);font-size:1.02rem;line-height:1.72}
.tldr ul{margin:0;padding-left:1.15em}
.tldr li{margin-bottom:.5em}
.tldr li::marker{color:var(--gold-deep)}
.tldr b{color:var(--gold-2);font-weight:600}

/* ---------- specs table ---------- */
.specs table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.specs th,.specs td{padding:14px 18px;text-align:left;border-bottom:1px solid rgba(207,169,99,.1);font-size:.95rem}
.specs th{width:32%;color:var(--gold);font-weight:600;background:rgba(207,169,99,.045);white-space:nowrap;font-family:var(--sans)}
.specs td{color:var(--ivory)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:none}
.verify-note{font-size:.82rem;color:var(--muted);margin-top:12px}
/* 공통 혜택 안내 — .verify-note 위에 얹혀 쓰이지만 '주의'가 아니라 '혜택'이므로 골드 톤으로 분리 */
.promo-line{margin:18px 0 0;padding:12px 16px;border:1px solid var(--line);border-left:2px solid var(--gold-deep);
  border-radius:0 11px 11px 0;background:linear-gradient(90deg,rgba(207,169,99,.07),transparent 70%);
  font-size:.86rem;line-height:1.68;color:var(--ivory-dim)}
.promo-line a{color:var(--gold-2);border-bottom:1px solid var(--line-2);white-space:nowrap}
.promo-line a:hover{color:var(--gold)}

/* ---------- 키워드 정보 블록 ---------- */
.kw-list{display:grid;gap:16px}
@media(min-width:720px){.kw-list{grid-template-columns:1fr 1fr}}
.kw-item{border:1px solid var(--line);border-radius:12px;padding:20px 22px;
  background:linear-gradient(158deg,rgba(255,255,255,.022),transparent);transition:border-color .3s}
.kw-item:hover{border-color:var(--line-2)}
.kw-item h3{font-family:var(--sans);font-weight:600;font-size:1.02rem;color:var(--gold-2);margin-bottom:.5em}
.kw-item p{margin:0;color:var(--ivory-dim);font-size:.93rem;line-height:1.66}

/* ---------- 전체 목록(A-Z) — .kw-list/.kw-item 위에 얹혀 도시별 그룹을 나열 ---------- */
/* 도시 그룹이 5개라 2열 고정(kw-list)보다 넓은 화면에서 3열까지 가는 편이 읽기 좋다 */
@media(min-width:720px){.az-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
.azr h3{display:flex;align-items:baseline;gap:.5em;font-family:var(--serif);font-size:1.12rem;
  padding-bottom:.5em;margin-bottom:.6em;border-bottom:1px solid var(--line)}
.azr h3 a{color:var(--gold-2)}
.azr h3 a:hover{color:var(--gold)}
.azr h3 .muted{font-family:var(--sans);font-size:.8rem;font-weight:400}
.az-list{list-style:none;margin:0;padding:0}
.az-list li{padding:9px 0;border-bottom:1px solid rgba(207,169,99,.09);line-height:1.55}
.az-list li:last-child{border-bottom:0;padding-bottom:0}
.az-list li>a{font-weight:600;font-size:.95rem;color:var(--ivory)}
.az-list li>a:hover{color:var(--gold-2)}
.az-list .muted{display:block;margin-top:2px;font-size:.8rem;line-height:1.55}

/* ---------- prose ---------- */
.prose h2{margin-top:.2em}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.45em;color:var(--ivory-dim)}
.prose p{color:var(--ivory-dim)}
.prose h2{position:relative;padding-bottom:.35em}
.prose h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}

/* ---------- FAQ ---------- */
.faq h2{position:relative;padding-bottom:.35em;margin-bottom:.9em}
.faq h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;
  background:rgba(255,255,255,.018);overflow:hidden;transition:border-color .3s}
.faq details[open]{border-color:var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:17px 20px;font-weight:600;color:var(--ivory);
  display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.35rem;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details p{margin:0;padding:16px 20px;color:var(--ivory-dim);line-height:1.72}

/* ---------- 카지노 상세 히어로 ---------- */
.casino-hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.casino-head h1{margin-bottom:.15em}

/* ---------- 카지노 현장 사진 갤러리 ---------- */
.casino-gallery .gal-sub{margin:.1em 0 .9em;color:var(--muted);font-size:.94rem}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gal-item{margin:0;border-radius:calc(var(--r) - 4px);overflow:hidden;
  border:1px solid var(--line);background:var(--surface,#0c1424);box-shadow:var(--shadow)}
.gal-item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;
  transition:transform .35s ease,filter .35s ease}
.gal-item:hover{border-color:var(--gold,#d4b06a)}
.gal-item:hover img{transform:scale(1.05);filter:brightness(1.05)}
@media(max-width:820px){.gal-grid{grid-template-columns:repeat(3,1fr);gap:7px}}
@media(max-width:520px){.gal-grid{grid-template-columns:repeat(2,1fr);gap:7px}}

/* ---------- $100 웰컴 바우처 ---------- */
.voucher{margin:.2em auto .6em;max-width:540px;cursor:pointer}
.voucher img{display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--gold,#d4b06a);box-shadow:0 10px 34px rgba(0,0,0,.45);
  transition:transform .3s ease,box-shadow .3s ease}
.voucher:hover img{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.55)}
.voucher figcaption{margin-top:.55em;text-align:center;color:var(--muted);
  font-size:.9rem;line-height:1.5}
.voucher-cta{text-align:center;margin:0 0 1.1em}
.trust-box .voucher{max-width:560px}

/* ---------- 위치·지도·현장 확인 ---------- */
.location .addr{margin:.2em 0 .6em}
.map-embed{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);line-height:0;margin:.5em 0}
.map-embed iframe{display:block;width:100%;height:clamp(240px,52vw,380px);border:0}
.map-link{margin:.2em 0 .8em}
.field-note{margin-top:.5em;padding:.75em .95em;border:1px solid var(--gold,#d4b06a);
  border-radius:calc(var(--r) - 4px);background:rgba(212,176,106,.07)}
.field-badge{display:inline-block;padding:.12em .6em;margin-right:.5em;border-radius:999px;
  background:var(--gold,#d4b06a);color:#0b1220;font-size:.78rem;font-weight:700;vertical-align:middle}

/* ---------- 브랜드 영상 ---------- */
.brand-video-sec{text-align:center}
.brand-video{position:relative;margin:1.1em auto 0;max-width:1000px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--gold,#d4b06a);box-shadow:0 16px 46px rgba(0,0,0,.5)}
.brand-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:var(--navy-900,#0b1220)}
/* 수동 재생 오버레이 — 모바일·데이터 절약·모션 최소화에서 포스터 위에 얹힌다.
   용량을 버튼에 적어 두는 이유: 모바일 데이터로 650KB 를 받을지는 사용자가 알고 고를 일이다.
   ※ 숫자는 실제 파일과 함께 움직여야 한다 — 재인코딩 뒤 옛 값을 두면 2배로 부풀려 말하게 된다. */
.bv-play{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.7em;cursor:pointer;border:0;
  background:rgba(6,10,20,.44);color:var(--ivory);font-family:var(--sans);
  transition:background .25s var(--ease)}
.bv-play:hover{background:rgba(6,10,20,.3)}
.bv-play-i{display:grid;place-items:center;width:64px;height:64px;border-radius:999px;
  font-size:1.35rem;color:var(--navy-950);padding-left:4px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  box-shadow:0 14px 34px -12px rgba(207,169,99,.85)}
.bv-play-t{display:grid;gap:2px;text-align:center;font-size:.92rem;font-weight:600}
.bv-play-t small{font-size:.76rem;font-weight:400;color:var(--ivory-dim)}

/* ---------- CTA band (전환 핵심) ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:calc(var(--r) + 6px);padding:clamp(34px,5.5vw,56px);
  text-align:center;background:linear-gradient(135deg,var(--navy-700),var(--navy-600));
  border:1px solid var(--line-2);box-shadow:var(--shadow)}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(460px 220px at 50% 0%,rgba(207,169,99,.2),transparent 70%)}
.cta-band::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cta-band h2{position:relative;margin-bottom:.35em}
.cta-band p{position:relative;color:var(--ivory-dim);max-width:580px;margin:0 auto 1.6em;font-size:1.02rem}
.cta-actions{position:relative;display:flex;flex-wrap:wrap;gap:15px;justify-content:center}

/* ---------- floating contact ---------- */
.fab{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.fab-main{display:inline-flex;align-items:center;gap:.5em;padding:15px 24px;border-radius:999px;
  font-weight:600;color:var(--navy-950);background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  box-shadow:0 18px 44px -12px rgba(207,169,99,.85),inset 0 1px 0 rgba(255,255,255,.45);cursor:pointer;border:none;font-family:var(--sans);font-size:.98rem}
.fab-main:hover{transform:translateY(-2px)}
/* .fab-pulse / @keyframes fabpulse 제거 — 전 페이지에 무한 글로우를 돌리는 값은
   정보량이 0인데 합성 레이어를 계속 살려 둔다. 마크업의 fab-pulse 클래스는 이제 무효(BUILD가 정리 예정). */

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:48px;padding-block:52px;
  background:linear-gradient(180deg,transparent,rgba(6,10,19,.7))}
.foot-brand{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ivory);margin-bottom:.35em}
.foot-desc{color:var(--ivory-dim);max-width:660px;font-size:.92rem;line-height:1.7}
.foot-note{color:var(--muted);font-size:.8rem;max-width:740px;margin-top:16px;line-height:1.72}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.foot-nav a{color:var(--ivory-dim);font-size:.9rem}
.foot-nav a:hover{color:var(--gold)}
.empty{color:var(--muted);padding:30px 0}
.stack>*+*{margin-top:26px}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .site-nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;gap:0;padding:8px 18px 20px;
    background:rgba(6,10,19,.98);border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s var(--ease)}
  .site-nav.open{transform:none;opacity:1;pointer-events:auto}
  .site-nav a{padding:14px 8px;border-bottom:1px solid rgba(207,169,99,.08)}
  .site-nav a::after{display:none}
  .nav-toggle{display:block}
  /* 모바일: 드롭다운을 펼친 형태(그룹 헤더 + 들여쓴 도시들) */
  .site-nav{max-height:calc(100vh - 72px);overflow-y:auto}
  .nav-group{width:100%}
  .nav-top{width:100%;padding:14px 8px;border-bottom:1px solid rgba(207,169,99,.08);color:var(--gold-2);justify-content:space-between}
  .nav-caret{display:none}
  .nav-menu{position:static;display:flex;min-width:0;padding:2px 0 8px 14px;background:none;border:0;box-shadow:none}
  .nav-menu a{padding:11px 8px;font-size:.92rem}
  .nav-flat{padding:14px 8px;border-bottom:1px solid rgba(207,169,99,.08)}
  section{padding-block:52px}
  .hero{min-height:auto;padding-block:80px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* =========================================================================
   전환 시스템 — 컨택트 드로어 · 폼 · 모바일바 · 토스트 · 포커스
   (기존 --navy/--gold/--ivory/--line/--r/--ease 토큰 재사용, 신규 색 없음)
   ========================================================================= */

/* ---------- a11y · 전역 포커스 링 (신규 · 필수) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible,.chip:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

/* ---------- contact drawer ---------- */
.drawer{position:fixed;inset:0;z-index:80}
.drawer[hidden]{display:none}
.drawer.open{display:block}
/* blur 유지 — 근거는 .site-head 위 주석. 이 레이어는 드로어가 열려 있는 동안만 존재하고
   그때 본문 스크롤은 잠겨 있어 프레임마다 다시 칠하지 않는다.
   여는 순간만 A/B(390px·CPU 6배): p90 17.3~19.4ms(켬) vs 17.3~17.7ms(끔), 끊긴 프레임 0. */
.drawer-backdrop{position:absolute;inset:0;background:rgba(4,7,14,.72);
  backdrop-filter:blur(8px);animation:cd-fade .32s var(--ease)}
.drawer-panel{position:absolute;background:linear-gradient(160deg,var(--navy-700),var(--navy-800));
  border:1px solid var(--line-2);box-shadow:var(--shadow);overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* 데스크톱: 우측 사이드 패널 */
.drawer-panel{top:0;right:0;bottom:0;width:min(460px,100%);border-radius:0;
  padding:34px 32px 40px;animation:cd-slide-x .4s var(--ease)}
.drawer-x{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;
  width:44px;height:44px;border-radius:10px;border:1px solid var(--line);cursor:pointer;
  background:rgba(255,255,255,.03);color:var(--ivory-dim);font-size:1.05rem;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.drawer-x:hover{color:var(--gold);border-color:var(--gold);background:rgba(207,169,99,.1)}
@keyframes cd-fade{from{opacity:0}to{opacity:1}}
@keyframes cd-slide-x{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes cd-slide-up{from{transform:translateY(100%)}to{transform:none}}

/* ---------- drawer head ---------- */
.drawer-head{margin:0 0 22px;padding-right:44px}
.drawer-head h3{font-size:1.5rem;margin-bottom:.3em}
.drawer-sub{color:var(--ivory-dim);font-size:.94rem;margin:0 0 1.1em;line-height:1.6}

/* =========================================================================
   ⚠️ R4 문의 드로어 예약 — 삭제 금지
   아래 .cd-step / .cd-label / .cd-hint / .chips / .chips-wrap / .stepper /
   .stepper-btn / .stepper-val / .cd-input / .cd-more 는 현재 빌드 HTML에서
   사용처가 0이지만, R4에서 재설계할 "최소 입력형" 문의 드로어가 그대로
   되살려 쓰는 디자인 시스템입니다. 미사용으로 보여도 지우지 마세요.
   (.chip / .chip.on 은 위저드·필터에서 지금도 사용 중 — 당연히 유지)
   ========================================================================= */

/* ---------- steps · labels ---------- */
.cd-step{border:0;margin:0;padding:0;min-inline-size:0;
  display:flex;flex-direction:column;gap:10px;animation:cd-fade .3s var(--ease)}
.cd-step[hidden]{display:none}
.cd-label{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--ivory);
  margin:14px 0 2px;display:flex;align-items:center;gap:.6em}
.cd-step>.cd-label:first-of-type{margin-top:0}
.cd-hint{font-weight:400;font-size:.76rem;color:var(--gold);letter-spacing:.02em}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips-wrap{gap:8px}
/* .chip / .chip:hover / .chip.on 은 아래 "칩(위저드·필터·문의)" 한 곳에만 있다.
   여기 있던 두 번째 정의는 통합해서 그쪽으로 옮겼다 — 두 벌이 공존하던 동안
   실제 적용값이 두 블록에 반씩 흩어져 있어서(가중치 600은 이쪽, 크기·색은 저쪽)
   어느 한쪽만 읽고 고치면 반드시 틀리는 상태였다. 다시 쪼개지 말 것. */

/* ---------- stepper ---------- */
.stepper{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);width:max-content}
.stepper-btn{width:44px;height:44px;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;border:0;background:transparent;color:var(--gold);
  font-size:1.4rem;line-height:1;transition:color .2s var(--ease),background .2s var(--ease)}
.stepper-btn:hover{background:rgba(207,169,99,.14);color:var(--gold-2)}
.stepper-val{min-width:2.4em;text-align:center;font-family:var(--display);font-size:1.3rem;
  font-weight:600;color:var(--ivory)}

/* ---------- inputs ---------- */
.cd-input{width:100%;padding:13px 15px;border-radius:11px;font-family:var(--sans);
  font-size:.94rem;color:var(--ivory);background:var(--navy-900);
  border:1px solid var(--line-2);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.cd-input::placeholder{color:var(--muted)}
.cd-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(207,169,99,.16)}
textarea.cd-input{resize:vertical;line-height:1.6;min-height:64px}
/* date 인풋 아이콘 골드 톤 */
.cd-input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.7) sepia(.5) saturate(3) hue-rotate(2deg);cursor:pointer}

/* ---------- more (details) ---------- */
.cd-more{border:1px solid var(--line);border-radius:12px;padding:0 16px;
  background:rgba(255,255,255,.018);transition:border-color .3s var(--ease)}
.cd-more[open]{border-color:var(--line-2)}
.cd-more summary{list-style:none;cursor:pointer;padding:14px 0;font-weight:600;font-size:.9rem;
  color:var(--ivory-dim);display:flex;align-items:center;justify-content:space-between;gap:12px}
.cd-more summary::-webkit-details-marker{display:none}
.cd-more summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1;
  transition:transform .3s var(--ease)}
.cd-more[open] summary::after{transform:rotate(45deg)}
.cd-more[open] summary{border-bottom:1px solid var(--line)}
.cd-more>.cd-input{margin:12px 0}
.cd-more[open]>.cd-input:first-of-type{margin-top:16px}
.cd-more>.cd-input:last-child{margin-bottom:16px}

/* ---------- message (step 3) ----------
   .cd-msg 는 아래 "문의 드로어 — 메시지 편집" 한 곳에만 있다. 여기 있던 모노스페이스 판본은
   현행 마크업(textarea rows=8 · 산세리프)과 맞지 않아 대부분 덮여 죽어 있었고,
   살아 있던 두 줄(letter-spacing · transition)만 통합본으로 옮겼다. */

/* ---------- channels ---------- */
.cd-channels{display:flex;flex-direction:column;gap:10px}
.cd-channel{display:flex;align-items:center;justify-content:center;gap:.55em;width:100%;
  min-height:52px;padding:14px 20px;border-radius:999px;cursor:pointer;text-align:center;
  font-family:var(--sans);font-weight:600;font-size:.98rem;color:var(--navy-950);
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));border:1px solid transparent;
  box-shadow:0 14px 34px -16px rgba(207,169,99,.8),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .2s var(--ease),box-shadow .3s var(--ease)}
.cd-channel:hover{transform:translateY(-2px);
  box-shadow:0 20px 42px -16px rgba(207,169,99,.95),inset 0 1px 0 rgba(255,255,255,.5)}
.cd-pending{margin:0;padding:16px 18px;border-radius:12px;font-size:.88rem;line-height:1.6;
  color:var(--ivory-dim);background:rgba(207,169,99,.06);border:1px solid var(--line)}

/* ---------- notes ---------- */
.cd-note{font-size:.76rem;line-height:1.6;color:var(--muted);margin:2px 0 0}

/* ---------- mobile fixed bar ---------- */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;
  align-items:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(9,15,28,.86),rgba(6,10,19,.96));
  /* blur 유지 — 근거는 .site-head 위 주석. 바가 본문 위에 겹쳐 있어 대비 확보에 실제로 기여한다. */
  backdrop-filter:blur(16px) saturate(1.2);border-top:1px solid var(--line-2)}
.mbar-btn{flex:1;min-height:48px;padding:12px 14px;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--ivory);
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  transition:background .22s var(--ease),border-color .22s var(--ease)}
.mbar-btn:hover{background:rgba(207,169,99,.1);border-color:var(--gold)}
.mbar-btn.primary{color:var(--navy-950);border-color:transparent;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  box-shadow:0 10px 26px -12px rgba(207,169,99,.8),inset 0 1px 0 rgba(255,255,255,.4)}
.mbar-x{flex:0 0 auto;width:44px;height:44px;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;color:var(--muted);font-size:.95rem;
  background:transparent;border:1px solid var(--line);
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.mbar-x:hover{color:var(--ivory);border-color:var(--line-2)}

/* 토스트는 .vnhr-toast 하나만 사용 — 아래 "토스트" 섹션 참조 */

/* ---------- 전환 시스템 반응형 ---------- */
@media(max-width:820px){
  /* 모바일 = 하단 바텀시트 */
  /* max-height: 소프트 키보드가 열리면 vh 는 줄지 않아 채널 버튼이 키보드 밑으로 들어간다.
     svh 로 1차 보정하고, visualViewport 를 읽는 JS 가 --vvh 를 넣어주면 그 값까지 따라 줄어든다. */
  .drawer-panel{top:auto;right:0;left:0;bottom:0;width:100%;max-height:92vh;max-height:min(92svh,var(--vvh,92svh));
    border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;
    padding:26px 20px calc(30px + env(safe-area-inset-bottom,0px));
    animation:cd-slide-up .4s var(--ease)}
  /* 시트 상단 그랩 핸들 */
  .drawer-panel::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:999px;background:var(--line-2)}
  .drawer-head{padding-top:6px}
  .mobile-bar{display:flex}
  /* [hidden] 을 되살린다 — 작성자 display:flex 가 UA 의 [hidden]{display:none} 를 이기므로
     이 규칙이 없으면 닫기(✕) 버튼과 vnhr_mbar_closed 플래그가 아무 효과도 내지 못한다. */
  .mobile-bar[hidden]{display:none}
  /* <head> 인라인 가드가 붙이는 html.mbar-off — 이전에 바를 닫은 방문자에게 첫 페인트부터 감춘다.
     vnhr.js 는 defer 라 파싱·페인트 뒤에 hidden 을 걸기 때문에, 그 사이 한 번 번쩍이는 것을
     막을 수 있는 건 파싱 시점에 붙는 이 클래스뿐이다. 가드만 있고 이 규칙이 없으면 가드는 무효. */
  html.mbar-off .mobile-bar{display:none}
  html.mbar-off body{padding-bottom:0}
  .fab{display:none}
  /* 바 높이만큼 본문 하단 여백. 바를 닫으면 회수해서 76px 빈 공간이 남지 않게 한다.
     :has() 미지원 브라우저는 여백이 그대로 남는다(= 종전 동작) — 콘텐츠가 가려지지 않는 쪽으로 실패. */
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body:has(#mobile-bar[hidden]){padding-bottom:0}
}

/* =========================================================================
   디자인 개편 — 콘텐츠유형 명/암 대비 (조용한 럭셔리 · 여행 컨시어지)
   원칙1: 여행·정보=밝은 크림(신뢰·가독성) / 카지노·홈·밤문화=딥네이비(프리미엄)
   전환영역(cta-band·drawer·footer·mobile-bar)은 항상 다크 → 명/암 리듬.
   ========================================================================= */

/* CTA 배너 텍스트는 다크 배너 위이므로 테마와 무관하게 항상 밝게 고정 */
.cta-band h2{color:var(--ivory)}
.cta-band p{color:var(--ivory-dim)}

/* ---- build.mjs 신규 클래스 (문맥 인라인 CTA · 책임안내 · 확인일 박스) ---- */
.inline-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:2px 0}
/* R4: <aside class="rg-note"> 가 .inline-cta 밖으로 나와 flex 아이템이 아니게 됐다 →
   flex:1 / min-width 는 무효이므로 제거하고 독립 블록으로 세운다. */
.rg-note{display:block;margin:14px 0 0;font-size:.82rem;line-height:1.62;color:var(--muted)}
.rg-note a{color:var(--gold);border-bottom:1px solid var(--line-2)}
.rg-note a:hover{color:var(--gold-2)}
.verify-box{border:1px solid var(--line);border-radius:12px;padding:20px 22px;
  background:linear-gradient(158deg,rgba(255,255,255,.022),transparent)}
.verify-box h2{font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.8em;padding:0}
.verify-box h2::after{display:none}
/* 확인 안내 목록 — 실제 마크업은 <ul class="verify-list">. 종전엔 .verify-box ul/li 로 잡아
   같은 박스 안의 .verify-src-list 까지 함께 물들이며 출처의 .86rem 을 .9rem 으로 덮어썼다. */
.verify-list{margin:0;padding-left:1.1em}
.verify-list li{color:var(--ivory-dim);font-size:.9rem;line-height:1.7;margin-bottom:.4em}
.verify-list li::marker,.verify-src-list li::marker{color:var(--gold-deep)}
.verify-box a{color:var(--gold);border-bottom:1px solid var(--line-2)}
.verify-box b{color:var(--gold-2)}
.verify-box .muted{color:var(--muted)}
/* 검증 안내 확장(§1-3) — 상태 배지·출처 토글·정정 */
.verify-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:.6em}
.verify-head h2{margin:0}
.verify-status{display:inline-flex;align-items:center;gap:.4em;padding:3px 11px;border-radius:999px;
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.02em;border:1px solid var(--line)}
.verify-status::before{content:"";width:6px;height:6px;border-radius:50%}
.verify-status.vs-ok{color:#9fd6b6;background:rgba(71,123,97,.16);border-color:rgba(71,123,97,.4)}
.verify-status.vs-ok::before{background:var(--success,#477b61)}
.verify-status.vs-check{color:var(--gold-2);background:rgba(207,169,99,.1);border-color:var(--line-2)}
.verify-status.vs-check::before{background:var(--gold)}
.verify-status.vs-closed{color:#e0a3a3;background:rgba(150,60,60,.16);border-color:rgba(150,60,60,.4)}
.verify-status.vs-closed::before{background:#c46}
.verify-src-toggle{background:none;border:0;color:var(--gold);cursor:pointer;font-size:.9rem;padding:0;
  font-family:var(--sans);border-bottom:1px solid var(--line-2)}
.verify-src-toggle:hover{color:var(--gold-2)}
.verify-src{margin:.6em 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:rgba(6,10,20,.35);font-size:.86rem;color:var(--ivory-dim)}
.verify-src p{margin:0 0 .4em}
.verify-src-list{margin:.3em 0 0;padding-left:1.1em;line-height:1.7}
.verify-src-list li{margin-bottom:.4em}
.verify-src-list a{word-break:break-all}
.verify-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.verify-link{color:var(--gold);border-bottom:1px solid var(--line-2);font-size:.9rem}
/* 비교 프리셋(기본 비교 SSR §5-2) */
.cmp-mine-title,.cmp-preset h2{font-family:var(--serif)}
.cmp-preset{margin-top:8px;padding-top:22px;border-top:1px solid var(--line)}
.cmp-preset:first-of-type{border-top:0}
.cmp-preset h2{font-size:1.24rem;color:var(--gold-2);margin-bottom:.3em}
.cmp-preset .muted{margin-bottom:12px}
.cmp-preset-cta{margin-top:14px}
/* 프리셋 나머지 목록 — <details>. .faq details / .cd-more 와 같은 접이식 어법을 따른다. */
.preset-all{margin:14px 0 0;border:1px solid var(--line);border-radius:12px;
  padding:0 16px;background:rgba(255,255,255,.018);transition:border-color .3s var(--ease)}
.preset-all[open]{border-color:var(--line-2)}
.preset-all>summary{list-style:none;cursor:pointer;padding:13px 0;font-size:.9rem;font-weight:600;
  color:var(--ivory-dim);display:flex;align-items:center;justify-content:space-between;gap:12px}
.preset-all>summary::-webkit-details-marker{display:none}
.preset-all>summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1;transition:transform .3s var(--ease)}
.preset-all[open]>summary::after{transform:rotate(45deg)}
.preset-all[open]>summary{border-bottom:1px solid var(--line)}
.preset-all>summary:hover{color:var(--ivory)}
.preset-all .az-list{padding-block:6px 14px}

/* 대결 비교 페이지의 '어느 쪽' 카드 — .kw-item 위에 얹힌다.
   .kw-item 은 h3·p 만 다루므로 h4·ul 이 브라우저 기본값으로 남아 있었다. */
.cmp-side>h4{font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold);margin:1.15em 0 .5em}
.cmp-side>h4:first-of-type{margin-top:.9em}
.cmp-side>ul{margin:0;padding-left:1.05em}
.cmp-side>ul li{color:var(--ivory-dim);font-size:.92rem;line-height:1.7;margin-bottom:.3em}
.cmp-side>ul li::marker{color:var(--gold-deep)}
.cmp-side>p.muted{margin-bottom:.2em;font-size:.9rem}
.cmp-side>p.muted a{color:var(--gold-2);border-bottom:1px solid var(--line-2)}
.cmp-side>p.muted a:hover{color:var(--gold)}
/* 맞음/아님 대비 — .fit-good / .fit-less 의 초록·골드 어법을 그대로 가져온다.
   BUILD 가 h4 와 ul 양쪽에 클래스를 달아 줘서 :nth-of-type 이 필요 없다(순서에 의존하지 않음).
   색은 보강일 뿐이고, 실제 구분은 제목 문구('맞습니다' / '다른 쪽')가 이미 하고 있다. */
.cmp-side>h4.cmp-pick{color:#9fd6b6}
.cmp-side>h4.cmp-avoid{color:var(--gold-2)}
.cmp-side>ul.cmp-pick li::marker{color:#6f9e85}
.cmp-side>ul.cmp-avoid li::marker{color:var(--gold-deep)}

/* 프리셋 표에 실린 업소 링크 행 — 모바일에서 .mtable 이 thead 를 clip 하므로
   이 줄이 해당 섹션에서 카지노 상세로 갈 수 있는 유일한 경로다. 탭 타깃을 넉넉히 준다.
   선택자를 .cmp-preset 으로 올린 이유: 마크업이 class="cmp-heads muted" 라
   .cmp-preset .muted(0,2,0) 가 .cmp-heads(0,1,0) 의 margin-bottom 을 눌러 버린다. */
.cmp-preset .cmp-heads{margin:.2em 0 .7em;font-size:.86rem;line-height:2}
.cmp-heads a{color:var(--gold-2);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.cmp-heads a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* #preset-* 점프 대상. 렌더링되는 건 없지만 sticky 헤더(72px)가 제목을 덮으므로
   스크롤 여백이 필요하다 — 앵커의 존재 이유가 그 제목을 보여 주는 것이기 때문에. */
.anchor-t{display:block;height:0;scroll-margin-top:88px}
.muted{color:var(--muted)}
.prose-link{margin-top:14px}

/* ---- 상태 배지 · 확인일 (StatusBadge / VerifiedDate) ---- */
.status-badge{display:inline-flex;align-items:center;gap:.4em;padding:4px 11px;border-radius:999px;
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:var(--stone-300);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.status-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--stone-600)}
.status-badge.verify{color:var(--gold-2);background:rgba(207,169,99,.1);border-color:var(--line-2)}
.status-badge.verify::before{background:var(--gold)}
.status-badge.open{color:#9fd6b6;background:rgba(71,123,97,.16);border-color:rgba(71,123,97,.4)}
.status-badge.open::before{background:var(--success,#477b61)}

/* ---- 일정 카드 · 브리지 카드 (ItineraryCard / BridgeCard) ---- */
.itin-card{border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  background:linear-gradient(158deg,rgba(24,35,58,.5),rgba(13,21,38,.4))}
.itin-card ol{list-style:none;margin:0;padding:0}
.itin-card li{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ivory-dim)}
.itin-card li:last-child{border-bottom:0}
.itin-card time{flex:0 0 58px;font-family:var(--display);font-size:1.05rem;color:var(--gold-2)}
.bridge-card{position:relative;border:1px solid var(--line-2);border-radius:14px;padding:22px 24px;
  background:linear-gradient(135deg,var(--forest-900),var(--navy-800));overflow:hidden}
.bridge-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(360px 160px at 90% 0%,rgba(207,169,99,.14),transparent 70%)}
.bridge-card h3{color:var(--ivory);position:relative}
.bridge-card p{color:var(--ivory-dim);position:relative}

/* =========================================================================
   초고전환 개편 (Phase 1): 위저드 · 목적별 · 필터 · 비교 · 심화 카지노 · 신뢰
   ========================================================================= */
.sr-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ic{display:inline-block;vertical-align:-3px;margin-right:7px;flex:0 0 auto}
.casino-sub .ic{margin-right:4px}
.hero-h1{font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.16}
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:22px 0 0;padding:0}
.hero-trust li{font-size:.78rem;color:var(--ivory-dim);padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}

/* 칩(위저드·필터·문의) — .chip 의 유일한 정의.
   앞쪽 "chips" 절에 있던 두 번째 정의를 여기로 합쳤다. 합칠 때 뒤엣것만 남기면 안 됐던 이유는,
   실제 적용값이 두 블록에 나뉘어 있었기 때문이다. 아래 세 줄은 앞 블록에만 있어서
   그동안 '죽은 선언처럼 보였지만 실제로는 살아 있던' 값이라 그대로 가져왔다:
     · font-weight:600      (뒤 블록 base 에 없음 → 지웠다면 전 칩이 400으로 얇아졌다)
     · :hover 의 gold 배경  (뒤 블록 :hover 는 border·color 만 건드린다)
     · .on 의 box-shadow    (뒤 블록 .on 에 없음 → 선택된 칩의 골드 글로우가 사라졌다)
   반대로 크기·색·모서리·transition 은 뒤 블록이 현행 디자인이라 그쪽을 채택했다.
   min-height:44px 는 양쪽이 이미 일치 — 헤드리스 실측 44px 확인(터치 타깃 기준선). */
.chip{min-height:44px;padding:9px 15px;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.86rem;color:var(--ivory-dim);
  background:rgba(255,255,255,.04);border:1px solid var(--line);transition:.16s var(--ease)}
.chip:hover{color:var(--ivory);border-color:var(--line-2);background:rgba(207,169,99,.1)}
.chip.on{color:var(--navy-950);border-color:var(--gold);
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  box-shadow:0 6px 18px -8px rgba(207,169,99,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.chip-clear{color:var(--muted)}

/* 추천 위저드 */
.wizard-sec{border:1px solid var(--line-2);border-radius:18px;padding:clamp(22px,3vw,34px);
  background:linear-gradient(158deg,rgba(27,41,66,.55),rgba(13,21,38,.5));margin-top:26px}
/* .wz 는 서버 HTML 에선 <noscript> 만 든 빈 상자고, vnhr.js(defer)가 첫 단계를 채운다.
   그래서 min-height 가 막아야 하는 시프트는 '단계 전환'이 아니라 '첫 페인트 → JS 주입'이다.
   실측(헤드리스, 폰트 로드 후): 질문 단계는 전부 같은 높이다. 칩 두 줄이면 246.2px,
   한 줄이면 192.2px — 질문 h3 는 320px 폭에서도 한 줄이라 단계별 편차가 없다.
   따라서 '가장 짧은 단계'가 곧 유일한 값이고, 종전 130px 은 모바일에서 116px 모자랐다.
   칩이 두 줄로 접히는 지점은 페이지마다 다르다(도시 6칩 ~510px, 도시고정 4칩 ~430px).
   그 사이 구간에선 한쪽이 54px 만큼 남는데, 실제 기기 폭이 없는 띠라 시프트가 없는 쪽을 택했다.
   246.2 → 247 로 올림한 것은 예약값이 콘텐츠보다 작아 0.2px 라도 밀리는 일이 없게 하려는 것. */
.wz{margin-top:16px;min-height:193px}
@media(max-width:520px){.wz{min-height:247px}}
.wz-prog{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.wz-q{font-family:var(--serif);font-size:1.4rem;color:var(--ivory);margin:0 0 16px}
.wz-opts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.wz-nav{display:flex;gap:12px;flex-wrap:wrap}
.wz-selline{margin:.2em 0 1em;font-size:.85rem}
.reco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:6px 0 18px}
.reco-card{position:relative;display:block;border:1px solid var(--line);border-radius:13px;padding:16px 16px 14px;
  background:linear-gradient(160deg,rgba(19,29,51,.7),rgba(13,21,38,.55));transition:.18s var(--ease)}
.reco-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.reco-card h4{font-family:var(--serif);font-size:1.12rem;color:var(--ivory);margin:.35em 0 .15em}
.reco-min{font-size:.82rem;color:var(--ivory-dim);margin:.3em 0 0}
.reco-best{font-size:.8rem;color:var(--gold-2);margin:.35em 0 0}
.reco-add{position:absolute;top:12px;right:12px;font-size:.72rem;color:var(--gold-2);border:1px solid var(--line-2);
  border-radius:999px;padding:3px 8px;background:rgba(207,169,99,.08)}
.reco-add:hover{background:rgba(207,169,99,.18)}

/* 목적별 */
.purpose-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.purpose-card{text-align:left;cursor:pointer;border:1px solid var(--line);border-radius:13px;padding:16px 16px;
  background:linear-gradient(160deg,rgba(24,35,58,.42),rgba(13,21,38,.36));transition:.16s var(--ease);min-height:88px}
.purpose-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.purpose-card h3{font-size:1.02rem;color:var(--ivory);margin:0 0 .3em}
.purpose-card p{font-size:.8rem;color:var(--muted);margin:0}
.purpose-result{margin-top:22px}
.purpose-title{font-family:var(--serif);color:var(--gold-2);margin-bottom:12px}

/* 권역 묶음 — 필터로 카드가 전부 빠지면 vnhr.js 가 hidden 을 건다.
   지금은 이 div 에 display 를 주는 규칙이 없어 UA 의 [hidden] 만으로도 감춰지지만,
   나중에 누가 display 를 주는 클래스를 붙이면 작성자 규칙이 UA 를 이겨 조용히 무효가 된다.
   .mobile-bar 에서 실제로 그렇게 당했으므로 미리 못을 박아 둔다. */
[data-cluster-group][hidden]{display:none}

/* 도시 필터 바 */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 6px}
.filter-label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.filter-count{font-size:.82rem;color:var(--gold-2);margin-left:4px}

/* 카지노 상세 심화 */
.casino-sub{color:var(--ivory-dim);font-size:.92rem;margin:.4em 0 0}
.qmeta .qm{display:inline-block;margin-right:10px;color:var(--gold-2)}
.status-badge.closed{color:#e0a3a3;background:rgba(150,60,60,.16);border-color:rgba(150,60,60,.4)}
.status-badge.closed::before{background:#c46}
.card-badge.low{color:#9fd6b6;background:rgba(71,123,97,.16);border-color:rgba(71,123,97,.4)}
.fit,.proscons{margin:2px 0}
.fit-cols,.pc-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.fit-good,.fit-less,.pc-pro,.pc-con{border:1px solid var(--line);border-radius:13px;padding:16px 18px;
  background:linear-gradient(160deg,rgba(255,255,255,.02),transparent)}
.fit-good,.pc-pro{border-color:rgba(71,123,97,.34);background:linear-gradient(160deg,rgba(71,123,97,.1),transparent)}
.fit-less,.pc-con{border-color:rgba(207,169,99,.28)}
.fit-good h3,.pc-pro h3{color:#9fd6b6;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .5em;padding:0}
.fit-good h3::after,.pc-pro h3::after,.fit-less h3::after,.pc-con h3::after{display:none}
.fit-less h3,.pc-con h3{color:var(--gold-2);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .5em;padding:0}
.fit ul,.proscons ul{margin:0;padding-left:1.05em}
.fit li,.proscons li{color:var(--ivory-dim);font-size:.92rem;line-height:1.7;margin-bottom:.3em}
.region-fit{margin-top:14px}

/* 미니멈·비교 표 */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mtable,.cmp-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:420px}
.mtable th,.mtable td,.cmp-table th,.cmp-table td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;color:var(--ivory-dim)}
.mtable thead th,.cmp-table thead th{color:var(--gold-2);font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.04em;background:rgba(207,169,99,.06)}
.cmp-table tbody th{color:var(--gold-2);white-space:nowrap}
.mtable-fallback{color:var(--ivory-dim)}
.cmp-rm{margin-left:8px;color:var(--muted);background:none;border:0;cursor:pointer;font-size:.8rem}
.cmp-rm:hover{color:var(--gold-2)}
.access table{width:100%;border-collapse:collapse}
.access th{width:110px;color:var(--gold-2);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-weight:600;font-size:.86rem}
.access td{color:var(--ivory-dim);padding:9px 12px;border-bottom:1px solid var(--line);font-size:.9rem}

/* 비슷한 카지노 — R2 마크업: <ul.sim-list><li><a>이름</a><span.sim-meta><span.sim-reason> */
.sim-list{list-style:none;margin:.6em 0 0;padding:0;display:grid;gap:10px}
.sim-list li{border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  background:linear-gradient(160deg,rgba(255,255,255,.022),transparent);transition:border-color .25s var(--ease)}
.sim-list li:hover{border-color:var(--line-2)}
.sim-list li>a{display:block;font-family:var(--serif);font-weight:700;font-size:1.06rem;color:var(--gold-2);line-height:1.35}
.sim-list li>a:hover{color:var(--gold)}
.sim-meta{display:block;margin-top:5px;font-size:.86rem;line-height:1.6;color:var(--ivory-dim)}
/* .sim-reason 은 카드가 아니라 li 안의 span 이므로 블록으로 떨어뜨린다 */
.sim-reason{display:block;margin:6px 0 0;font-size:.82rem;line-height:1.55;color:var(--gold-2)}
@media(min-width:720px){.sim-list{grid-template-columns:1fr 1fr}}
/* 섹션은 <section class="prose sim"> 다. .prose ul(0,1,1) 이 .sim-list(0,1,0) 를 이겨
   카드 그리드 전체가 1.2em 안으로 밀려 위 h2·본문과 좌측선이 어긋났고,
   .prose li 의 margin-bottom 이 grid gap 위에 덧붙어 행 간격만 벌어졌다. .sim 이 그걸 되돌린다. */
.prose.sim ul{padding-left:0}
.prose.sim li{margin-bottom:0}

/* 신뢰 섹션 */
.trust-box{border:1px solid var(--line-2);border-radius:18px;padding:clamp(22px,3vw,32px);
  background:linear-gradient(158deg,rgba(24,35,58,.4),rgba(13,21,38,.4))}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:14px}
.trust-item h3{font-size:1.02rem;color:var(--gold-2);margin:0 0 .4em}
.trust-item p{font-size:.9rem;color:var(--ivory-dim);margin:0;line-height:1.72}
.trust-item a{color:var(--gold);border-bottom:1px solid var(--line-2)}
.benefit-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.benefit-list li{position:relative;padding:12px 16px 12px 42px;border:1px solid var(--line);border-radius:11px;
  background:linear-gradient(160deg,rgba(207,169,99,.06),transparent);color:var(--ivory-dim);font-size:.94rem;line-height:1.65}
.benefit-list li::before{content:"✓";position:absolute;left:15px;top:12px;color:var(--gold-2);font-weight:700}
.benefit-list b{color:var(--gold-2)}
.promo li b{color:var(--gold-2)}

/* 문의 드로어 — 메시지 편집 */
.cd-msg-label{display:block;font-size:.78rem;color:var(--muted);margin:4px 0 6px;letter-spacing:.04em}
/* .cd-msg 의 유일한 정의 — 앞쪽 "message (step 3)" 판본을 여기로 합쳤다.
   letter-spacing 과 transition 은 앞 블록에만 있던 실제 적용값이라 가져왔다.
   min-height 는 120px 을 채택했다(앞 블록은 180px). 실측 근거:
   마크업이 rows=8 이라 표시 높이는 210.4px 로 고정되고 min-height 는 여기에 관여하지 않는다.
   이 값이 실제로 하는 일은 resize:vertical 로 사용자가 아래로 줄일 때의 바닥이다.
   180px 이면 줄일 수 있는 폭이 30px 뿐이라 손잡이가 사실상 무효가 되고,
   120px 이면 약 4줄을 남기면서 모바일 바텀시트에서 채널 버튼을 끌어올릴 여지가 생긴다. */
.cd-msg{width:100%;box-sizing:border-box;padding:12px 13px;border-radius:11px;resize:vertical;min-height:120px;
  font-family:var(--sans);font-size:.9rem;line-height:1.6;letter-spacing:.01em;color:var(--ivory);
  background:rgba(6,10,20,.5);border:1px solid var(--line);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
/* 포커스 링은 하나만 — 종전엔 앞 블록의 box-shadow 헤일로(3px)와 이 outline 이 겹쳐
   같은 자리에 링이 두 겹으로 그려졌다. 둘 중 접근성 지표로 확실한 outline 을 남긴다. */
.cd-msg:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.cd-msg-tools{display:flex;justify-content:flex-end;margin:8px 0 6px}
.btn-mini{font-size:.78rem;color:var(--gold-2);background:rgba(207,169,99,.08);border:1px solid var(--line-2);
  border-radius:999px;padding:5px 12px;cursor:pointer}
.btn-mini:hover{background:rgba(207,169,99,.18)}
/* 채널 핸드오프 행 — 복사 결과를 알린 뒤의 복구 수단(다시 복사 · 다시 열기 · 닫기).
   드로어를 닫지 않기 때문에 이 줄에서 붙여넣기 실패·탭 미개설을 모두 되돌릴 수 있다. */
.cd-handoff{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.cd-handoff .btn-mini{min-height:36px;display:inline-flex;align-items:center;text-decoration:none}

/* 토스트 */
.vnhr-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:120;
  background:linear-gradient(180deg,rgba(19,29,51,.98),rgba(13,21,38,.98));border:1px solid var(--line-2);
  border-radius:12px;padding:12px 18px;color:var(--ivory);font-size:.88rem;box-shadow:var(--shadow);opacity:0;transition:.28s var(--ease);max-width:90vw}
.vnhr-toast.on{opacity:1;transform:translate(-50%,0)}
.vnhr-toast a{color:var(--gold-2);border-bottom:1px solid var(--line-2);margin-left:6px}

/* 라이트박스 닫기 버튼 (role=dialog 안의 유일한 초점 대상) */
.lb-x{position:absolute;top:16px;right:16px;z-index:2;display:grid;place-items:center;
  width:44px;height:44px;border-radius:10px;cursor:pointer;font-size:1.05rem;
  color:var(--ivory-dim);background:rgba(6,10,20,.72);border:1px solid var(--line-2)}
.lb-x:hover{color:var(--gold);border-color:var(--gold);background:rgba(207,169,99,.12)}
/* 갤러리 썸네일이 키보드로 열리게 되었으니 포커스가 보여야 한다 */
[data-lb]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* 비교함에 담은 업소 — 제거(✕) 컨트롤. thead 는 모바일에서 clip 되므로 표 밖에 둔다. */
.cmp-chosen{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0}
.cmp-chosen li{display:inline-flex;align-items:center;gap:.35em;padding:6px 8px 6px 14px;
  border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.03);font-size:.88rem}
.cmp-chosen a{color:var(--gold-2)}
.cmp-chosen a:hover{color:var(--gold)}
.cmp-chosen .cmp-rm{margin-left:2px;width:26px;height:26px;border-radius:999px;display:grid;place-items:center}
.cmp-chosen .cmp-rm:hover{background:rgba(207,169,99,.16)}
/* .cmp-desktop / .cmp-cards / .cc* 제거 — 데스크톱 표와 모바일 카드를 둘 다 찍던 중복 렌더였다.
   서버(R3)와 vnhr.js 둘 다 이제 단일 표 + .mtable data-th 변환을 쓴다. */
@media (max-width:640px){
  .fit-cols,.pc-cols{grid-template-columns:1fr}
  /* 인라인 CTA 세로 스택 — 책임안내 텍스트 잘림 방지, 터치영역 확대 */
  .inline-cta{flex-direction:column;align-items:stretch}
  .inline-cta .btn,.inline-cta .btn-ghost{width:100%}
  .hero-cta .btn,.hero-cta .btn-ghost{flex:1 1 auto}
  /* 미니멈·가격 표 → 모바일 카드 변환 (가로 스크롤 제거) */
  .table-scroll{overflow-x:visible}
  .mtable{min-width:0}
  .mtable,.mtable thead,.mtable tbody,.mtable tr,.mtable th,.mtable td{display:block}
  .mtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mtable tr{border:1px solid var(--line);border-radius:11px;margin-bottom:10px;padding:6px 12px}
  .mtable td{border:0;padding:6px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;min-width:0;word-break:break-word}
  .mtable td::before{content:attr(data-th);color:var(--gold-2);font-size:.8rem;flex:0 0 auto}
  /* thead 를 clip 으로 지우는 바로 이 폭에서 .cmp-heads 가 유일한 경로가 된다.
     표의 캡션이 아니라 목록으로 읽히게 박스를 세우고 탭 영역을 넓힌다. */
  .cmp-preset .cmp-heads{padding:11px 13px;border:1px solid var(--line);border-radius:11px;
    background:rgba(255,255,255,.02)}
  .cmp-heads a{display:inline-block;padding:4px 3px}
}
/* 도시 히어로 (배경 이미지 + 다크 오버레이, 헤드라인 좌측 여백) */
.region-hero{background-size:cover;background-position:center;border-bottom:1px solid var(--line-2)}
.region-hero-in{padding-top:clamp(48px,7vw,92px);padding-bottom:clamp(40px,6vw,72px);max-width:var(--wrap);margin:0 auto}
.region-hero .lede{max-width:640px}
@media (max-width:640px){.region-hero{background-image:linear-gradient(180deg,rgba(6,10,20,.86),rgba(6,10,20,.72)),var(--rh)}}

/* 여행 아티클 — 좁은 본문폭·목차·바로답변 */
.article{max-width:820px;margin-left:auto;margin-right:auto}
.tldr.answer{border-left:3px solid var(--gold)}
.answer-label{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 .4em}
.toc{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:rgba(255,255,255,.02)}
.toc-h{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin:0 0 .5em}
.toc ol{margin:0;padding-left:1.2em}
.toc li{margin:.25em 0}
.toc a{color:var(--ivory-dim);border-bottom:1px solid transparent}
.toc a:hover{color:var(--gold-2);border-bottom-color:var(--line-2)}

/* 야간 일정 빌더 */
.itin-sec{border:1px solid var(--line-2);border-radius:18px;padding:clamp(22px,3vw,34px);
  background:linear-gradient(158deg,rgba(16,34,27,.4),rgba(13,21,38,.5));margin-top:26px}
.itin{margin-top:16px;min-height:120px}
.itin-result .itin-card ol{counter-reset:step}
.itin-result .itin-card time{color:var(--gold-2)}
/* 브리지 동선(밤문화 상세) */
.bridge-flow{list-style:none;margin:14px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.bridge-flow li{flex:1;min-width:120px;border:1px solid var(--line);border-radius:11px;padding:12px 14px;
  background:rgba(6,10,20,.35);position:relative}
.bridge-flow .bf-t{display:block;font-family:var(--display);font-size:1.05rem;color:var(--gold-2);margin-bottom:3px}
.bridge-flow .bf-d{display:block;font-size:.85rem;color:var(--ivory-dim)}
.bridge-card .eyebrow{color:var(--gold-2)}
/* prefers-reduced-motion 은 상단 전역 규칙(*{animation/transition:none!important})이 전부 커버 */