/* 늘봄 업소 상세 — 프리미엄 v2
   방향: 딥 차콜 + 브랜드 레드 + 샴페인 골드 악센트
   원칙: 레이어드 섀도우 / 정교한 타이포 스케일 / 넉넉한 여백 / 절제된 모션
   가독성: 본문 한 줄 40~45자(max-width 44rem) */

.nb-shop{
  --red:#706ed0; --red-d:#5755bb; --red-l:#b6b5ee;
  --gold:#9494b9; --gold-l:#c1c1db;
  --ink:#14161b; --ink-2:#2a2e37; --body:#474c56; --mute:#7b818c;
  --line:#eceef1; --line-2:#f5f6f8; --bg:#fafbfc; --card:#fff;
  --r:6px; --r-sm:3px;
  --sh-1:0 1px 2px rgba(16,20,28,.05), 0 2px 8px rgba(16,20,28,.04);
  --sh-2:0 2px 6px rgba(16,20,28,.06), 0 12px 28px rgba(16,20,28,.07);
  --sh-3:0 8px 20px rgba(16,20,28,.10), 0 24px 56px rgba(16,20,28,.10);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:var(--ink); line-height:1.7; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"tnum" 1;
}
.nb-shop *{box-sizing:border-box}
.nb-shop ::selection{background:rgba(69,224,147,.16)}

/* ═══════════ 히어로 ═══════════ */
.nb-hero{
  position:relative; overflow:hidden; border-radius:calc(var(--r) + 6px);
  padding:56px 48px 50px; color:#fff;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(69,224,147,.30) 0%, transparent 55%),
    radial-gradient(90% 70% at 4% 96%, rgba(124,183,171,.14) 0%, transparent 50%),
    linear-gradient(158deg,#201f40 0%,#191932 52%,#131224 100%);
  box-shadow:var(--sh-3);
}
/* 미세 그레인 — 단색 그라데이션의 밴딩을 없앤다 */
.nb-hero::before{
  content:""; position:absolute; inset:0; opacity:.4; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
/* 상단 헤어라인 */
.nb-hero::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22) 22%,rgba(124,183,171,.5) 50%,rgba(255,255,255,.22) 78%,transparent);
}
.nb-hero-inner{position:relative; z-index:2; max-width:53rem}

.nb-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 15px; margin-bottom:18px;
  border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.03em;
  color:#dedef7!important; text-decoration:none!important;
  background:linear-gradient(180deg,rgba(69,224,147,.26),rgba(69,224,147,.16));
  border:1px solid rgba(138,255,196,.42);
  backdrop-filter:blur(6px); transition:.2s cubic-bezier(.2,.7,.3,1);
}
.nb-chip::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--red-l)}
.nb-chip:hover{background:rgba(69,224,147,.34); transform:translateY(-1px)}

.nb-title{
  font-size:clamp(26px,3.4vw,38px); font-weight:800; line-height:1.28;
  margin:0 0 14px; color:#fff; letter-spacing:-.03em; text-wrap:balance;
}
.nb-lead{
  font-size:16px; color:#b9bec8; margin:0 0 28px; line-height:1.75;
  max-width:44rem; font-weight:400;
}

.nb-badges{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px; padding:0}
.nb-badges li{
  font-size:12.5px; font-weight:600; color:#ccd1d9; padding:7px 14px; border-radius:9px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(4px);
}
.nb-badges li.on{
  color:#b5b4ea; border-color:rgba(74,222,140,.36);
  background:linear-gradient(180deg,rgba(74,222,140,.15),rgba(74,222,140,.07));
}
.nb-badges .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%; background:#706ece;
  margin-right:8px; vertical-align:middle; box-shadow:0 0 0 3px rgba(70,221,140,.2);
  animation:nb-pulse 2.4s ease-in-out infinite;
}
@keyframes nb-pulse{0%,100%{box-shadow:0 0 0 3px rgba(70,221,140,.2)}50%{box-shadow:0 0 0 6px rgba(70,221,140,.05)}}

/* ═══════════ 버튼 ═══════════ */
.nb-cta{display:flex; flex-wrap:wrap; gap:11px}
.nb-btn{
  display:inline-flex; align-items:center; gap:9px; padding:15px 26px; border-radius:13px;
  font-size:15px; font-weight:700; text-decoration:none!important; white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s;
}
.nb-btn.primary{
  color:#fff!important; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#7c7adc,#5f5dc1);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px rgba(53,207,130,.36);
}
.nb-btn.primary::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.nb-btn.primary:hover{transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 12px 30px rgba(53,207,130,.44)}
.nb-btn.primary:hover::after{transform:translateX(120%)}
.nb-btn.primary b{font-weight:800; letter-spacing:.02em; font-variant-numeric:tabular-nums}
.nb-btn.ghost{
  background:rgba(255,255,255,.08); color:#fff!important;
  border:1px solid rgba(255,255,255,.19); backdrop-filter:blur(6px);
}
.nb-btn.ghost:hover{background:rgba(255,255,255,.15); transform:translateY(-2px)}
.nb-btn.lg{padding:17px 34px; font-size:16.5px}
.nb-btn.sm{
  padding:10px 20px; font-size:13.5px; background:var(--card); color:var(--ink)!important;
  border:1px solid var(--line); box-shadow:var(--sh-1);
}
.nb-btn.sm:hover{background:var(--bg); transform:translateY(-1px); box-shadow:var(--sh-2)}

/* ═══════════ 스티키 탭 ═══════════ */
.nb-tabs{
  position:sticky; top:0; z-index:30; display:flex; gap:2px; margin:0 0 30px; padding:0 6px;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nb-tabs::-webkit-scrollbar{display:none}
.nb-tabs a{
  position:relative; flex:0 0 auto; padding:17px 21px; font-size:14.5px; font-weight:700;
  color:var(--mute); text-decoration:none!important; white-space:nowrap; transition:color .18s;
}
.nb-tabs a::after{
  content:""; position:absolute; left:21px; right:21px; bottom:0; height:2.5px; border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--red-l)); transform:scaleX(0); transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.nb-tabs a:hover{color:var(--ink-2)}
.nb-tabs a.on{color:var(--red)}
.nb-tabs a.on::after{transform:scaleX(1)}

/* ═══════════ 섹션 ═══════════ */
.nb-body{max-width:53rem}
.nb-sec{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:36px 38px; margin-bottom:20px; box-shadow:var(--sh-1);
  transition:box-shadow .3s;
}
.nb-sec:hover{box-shadow:var(--sh-2)}
.nb-h2{
  position:relative; display:inline-block; font-size:20px; font-weight:800;
  margin:0 0 22px; padding-bottom:14px; letter-spacing:-.022em;
}
.nb-h2::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 46%,var(--gold) 100%);
}
.nb-p{font-size:15.5px; color:var(--body); line-height:1.85; margin:0 0 18px; max-width:44rem}
.nb-note{
  position:relative; font-size:13.5px; color:var(--mute); line-height:1.72; margin:18px 0 0;
  padding:14px 17px 14px 19px; background:var(--bg); border-radius:var(--r-sm);
  border:1px solid var(--line-2);
}
.nb-note::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:2px;
  background:linear-gradient(180deg,var(--gold),var(--gold-l));
}

/* ═══════════ 요금표 ═══════════ */
.nb-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-sm)}
.nb-price{width:100%; border-collapse:separate; border-spacing:0; font-size:15px; min-width:340px}
.nb-price thead th{
  text-align:left; font-size:11.5px; font-weight:700; color:var(--mute);
  padding:0 16px 12px; border-bottom:1px solid var(--line);
  letter-spacing:.09em; text-transform:uppercase;
}
.nb-price tbody td{padding:17px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.nb-price tbody tr:last-child td{border-bottom:none}
.nb-price tbody tr{transition:background .18s}
.nb-price tbody tr:hover{background:linear-gradient(90deg,rgba(69,224,147,.035),transparent)}
.nb-price .nm{font-weight:700; color:var(--ink); letter-spacing:-.01em}
.nb-price .pr{
  font-weight:800; color:var(--red); font-size:17px; white-space:nowrap;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}

/* ═══════════ 본문 ═══════════ */
.nb-content{font-size:15.5px; line-height:1.88; color:var(--body); max-width:44rem}
.nb-content h2{
  font-size:18px; font-weight:800; color:var(--ink); margin:34px 0 13px;
  padding-left:14px; border-left:3px solid var(--red); letter-spacing:-.02em;
}
.nb-content h2:first-child{margin-top:0}
.nb-content h3{font-size:16px; font-weight:700; color:var(--ink-2); margin:26px 0 10px}
.nb-content p{margin:0 0 16px}
.nb-content ul,.nb-content ol{margin:0 0 16px; padding-left:4px; list-style:none; counter-reset:gdol}
.nb-content ul li{position:relative; padding-left:20px; margin-bottom:9px}
.nb-content ul li::before{
  content:""; position:absolute; left:2px; top:11px; width:6px; height:6px; border-radius:50%;
  background:var(--gold);
}
.nb-content ol li{position:relative; padding-left:32px; margin-bottom:11px; counter-increment:gdol}
.nb-content ol li::before{
  content:counter(gdol); position:absolute; left:0; top:2px;
  width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  background:rgba(69,224,147,.1); color:var(--red);
}
.nb-content img{max-width:100%; height:auto; border-radius:var(--r-sm); margin:20px 0; box-shadow:var(--sh-1)}
.nb-content table{width:100%; border-collapse:collapse; margin:20px 0; font-size:14.5px}
.nb-content th,.nb-content td{border:1px solid var(--line); padding:12px 14px; text-align:left}
.nb-content th{background:var(--bg); font-weight:700}

/* ═══════════ 방문 지역 ═══════════ */
.nb-areas{list-style:none; display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0}
.nb-areas li{
  font-size:13.5px; font-weight:600; color:var(--ink-2); padding:9px 16px; border-radius:10px;
  background:linear-gradient(180deg,#fff,var(--bg)); border:1px solid var(--line);
  box-shadow:var(--sh-1); transition:.2s cubic-bezier(.2,.7,.3,1);
}
.nb-areas li:hover{
  transform:translateY(-2px); border-color:rgba(69,224,147,.32); color:var(--red);
  box-shadow:0 4px 14px rgba(69,224,147,.14);
}

/* ═══════════ 이용 안내 ═══════════ */
.nb-rules{list-style:none; margin:0; padding:0}
.nb-rules li{
  position:relative; padding:14px 0 14px 30px; font-size:15px; color:var(--body);
  line-height:1.75; border-bottom:1px solid var(--line-2);
}
.nb-rules li:last-child{border-bottom:none; padding-bottom:0}
.nb-rules li:first-child{padding-top:0}
.nb-rules li:first-child::before{top:9px}
.nb-rules li::before{
  content:""; position:absolute; left:7px; top:23px; width:7px; height:7px;
  border-radius:2px; background:linear-gradient(135deg,var(--red),var(--red-l)); transform:rotate(45deg);
}

/* ═══════════ FAQ ═══════════ */
.nb-faq details{
  border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:10px;
  background:var(--card); overflow:hidden; transition:border-color .22s, box-shadow .22s;
}
.nb-faq details:last-child{margin-bottom:0}
.nb-faq details[open]{border-color:rgba(69,224,147,.3); box-shadow:0 4px 16px rgba(69,224,147,.09)}
.nb-faq summary{
  display:flex; align-items:flex-start; gap:12px; padding:17px 20px; cursor:pointer;
  font-size:15px; font-weight:700; color:var(--ink); line-height:1.6; list-style:none;
  transition:background .18s;
}
.nb-faq summary::-webkit-details-marker{display:none}
.nb-faq summary:hover{background:var(--bg)}
.nb-faq summary .q{
  flex:0 0 auto; width:23px; height:23px; margin-top:1px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#7c7adc,#5f5dc1); box-shadow:0 2px 6px rgba(53,207,130,.3);
}
.nb-faq summary .arw{
  flex:0 0 auto; width:9px; height:9px; margin:6px 0 0 auto;
  border-right:2px solid var(--mute); border-bottom:2px solid var(--mute);
  transform:rotate(45deg); transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.nb-faq details[open] summary .arw{transform:rotate(-135deg); border-color:var(--red)}
.nb-faq .ans{
  padding:0 20px 19px 55px; font-size:14.5px; color:var(--body); line-height:1.82;
  animation:nb-fade .28s ease;
}
@keyframes nb-fade{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}

/* ═══════════ 하단 예약 ═══════════ */
.nb-book{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-radius:var(--r); padding:34px 38px; box-shadow:var(--sh-2);
  background:
    radial-gradient(100% 140% at 92% 0%, rgba(69,224,147,.26) 0%, transparent 58%),
    linear-gradient(150deg,#262a33,#14161b);
}
.nb-book::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,183,171,.45),transparent);
}
.nb-book strong{display:block; font-size:18px; font-weight:800; color:#fff; margin-bottom:6px; letter-spacing:-.02em}
.nb-book p{margin:0; font-size:14px; color:#a5aab4}

.nb-nav-btns{display:flex; gap:9px; margin:28px 0 44px}

/* ═══════════ 모바일 ═══════════ */
.nb-fab{display:none}

@media (max-width:768px){
  .nb-hero{padding:36px 24px 34px; border-radius:16px}
  .nb-lead{font-size:15px; margin-bottom:24px}
  .nb-sec{padding:26px 21px; border-radius:15px}
  .nb-h2{font-size:18px}
  .nb-tabs a{padding:14px 16px; font-size:14px}
  .nb-tabs a::after{left:16px; right:16px}
  .nb-content{font-size:15px}
  .nb-faq .ans{padding-left:20px}
  .nb-book{padding:26px 21px; flex-direction:column; align-items:stretch; text-align:center}
  .nb-book .nb-btn{justify-content:center}
  .nb-shop{padding-bottom:76px}

  .nb-fab{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; gap:9px;
    padding:10px 13px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(16,20,28,.1);
  }
  .nb-fab a, .nb-fab div{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 0; border-radius:13px; font-size:15px; font-weight:700; text-decoration:none!important;
  }
  /* ★id="ds-callbar" — 업소 상세 모바일 하단 고정 CTA(페이지당 정확히 1개, 런북 14-1) */
  #ds-callbar{
    color:#fff!important; background:linear-gradient(180deg,#7c7adc,#5f5dc1);
    box-shadow:0 4px 16px rgba(87,85,199,.36);
  }
  #ds-callbar.is-pending{
    color:var(--ink-2)!important; background:var(--bg); border:1px solid var(--line);
    box-shadow:none; cursor:default;
  }
}

@media (prefers-reduced-motion:reduce){
  .nb-shop *,.nb-shop *::before,.nb-shop *::after{animation:none!important; transition:none!important}
}

/* ═══════════════════════════════════════════════════
   v3 — 색감 · 입체감 강화 레이어
   섹션마다 고유 색조를 주고, 평면 요소를 카드로 띄운다.
   ═══════════════════════════════════════════════════ */

/* 섹션 상단 컬러 라인 — 섹션별로 색이 달라 스크롤 중 위치가 인지된다 */
.nb-sec{position:relative; overflow:hidden}
.nb-sec::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--red),var(--gold));
  opacity:.85;
}
#nb-course::before{background:linear-gradient(90deg,#706ed0,#9291e2)}
#nb-about::before{background:linear-gradient(90deg,#e9bb6c,#f0ca89)}
#nb-area::before{background:linear-gradient(90deg,#312eb5,#8382cd)}
#nb-guide::before{background:linear-gradient(90deg,#9494b9,#c1c1db)}
#nb-faq::before{background:linear-gradient(90deg,#8c8ae1,#b8b7ee)}

/* 섹션 헤더 아이콘 배지 */
.nb-h2{padding-left:0}
.nb-sec > .nb-h2::before{
  content:""; display:inline-block; width:9px; height:9px; margin-right:10px;
  border-radius:3px; vertical-align:2px;
  background:linear-gradient(135deg,var(--red),var(--red-l));
  box-shadow:0 2px 7px rgba(69,224,147,.4);
}
#nb-about > .nb-h2::before{background:linear-gradient(135deg,#e9bb6c,#f0ca89); box-shadow:0 2px 7px rgba(91,124,250,.4)}
#nb-area > .nb-h2::before{background:linear-gradient(135deg,#312eb5,#8382cd); box-shadow:0 2px 7px rgba(18,184,134,.4)}
#nb-guide > .nb-h2::before{background:linear-gradient(135deg,#9494b9,#c1c1db); box-shadow:0 2px 7px rgba(124,183,171,.42)}
#nb-faq > .nb-h2::before{background:linear-gradient(135deg,#8c8ae1,#b8b7ee); box-shadow:0 2px 7px rgba(98,240,235,.4)}

/* ── 요금표: 평면 표 → 입체 카드 행 ── */
.nb-price{border-spacing:0 10px; border-collapse:separate}
.nb-price thead th{padding-bottom:4px}
.nb-price tbody tr{
  background:linear-gradient(180deg,#fff,#e8e8ee);
  box-shadow:0 1px 2px rgba(16,20,28,.05), 0 3px 12px rgba(16,20,28,.05);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.nb-price tbody tr:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(16,20,28,.07), 0 14px 32px rgba(69,224,147,.13);
  background:linear-gradient(180deg,#fff,#dedef7);
}
.nb-price tbody td{border-bottom:none; padding:19px 18px}
.nb-price tbody td:first-child{
  border-radius:var(--r-sm) 0 0 var(--r-sm); border-left:3px solid var(--red);
}
.nb-price tbody tr:nth-child(2) td:first-child{border-left-color:#9291e2}
.nb-price tbody tr:nth-child(3) td:first-child{border-left-color:var(--gold)}
.nb-price tbody td:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
/* 시간 셀을 알약 배지로 */
.nb-price tbody td:nth-child(2){
  font-size:13px; font-weight:700; color:var(--ink-2);
}
.nb-price tbody td:nth-child(2)::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold); margin-right:8px; vertical-align:1px;
}
.nb-price .pr{font-size:18px}

/* ── 방문 지역 칩: 컬러 틴트 + 리프트 ── */
.nb-areas li{
  background:linear-gradient(180deg,#fff,#e5e5f0);
  border-color:#e6e6f0;
}
.nb-areas li:hover{
  background:linear-gradient(180deg,#fff,#e3e3f3);
  border-color:rgba(18,184,134,.4); color:#2a289d;
  box-shadow:0 5px 16px rgba(18,184,134,.16);
}

/* ── 이용 안내: 골드 톤 통일 ── */
.nb-rules li::before{background:linear-gradient(135deg,var(--gold),var(--gold-l))}

/* ── FAQ: 보라 톤 + 열림 상태 강조 ── */
.nb-faq summary .q{background:linear-gradient(180deg,#9997e5,#7675d2); box-shadow:0 2px 7px rgba(77,224,219,.34)}
.nb-faq details[open]{
  border-color:rgba(98,240,235,.34);
  box-shadow:0 4px 18px rgba(98,240,235,.12);
  background:linear-gradient(180deg,#dedef7,#fff);
}
.nb-faq details[open] summary{background:linear-gradient(180deg,#dedef7,transparent)}
.nb-faq details[open] summary .arw{border-color:#8c8ae1}

/* ── 본문 h2 좌측 바에 그라데이션 ── */
.nb-content h2{
  border-left:none; padding-left:16px; position:relative;
}
.nb-content h2::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:3px;
  background:linear-gradient(180deg,var(--red),var(--gold));
}

/* ── 히어로 깊이 보강 ── */
.nb-hero{
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(69,224,147,.34) 0%, transparent 55%),
    radial-gradient(80% 60% at 12% 100%, rgba(91,124,250,.16) 0%, transparent 52%),
    radial-gradient(90% 70% at 4% 96%, rgba(124,183,171,.15) 0%, transparent 50%),
    linear-gradient(158deg,#282c36 0%,#181b21 52%,#0e1014 100%);
}
.nb-title{text-shadow:0 2px 20px rgba(0,0,0,.28)}

/* ── 하단 예약 바 깊이 ── */
.nb-book{
  background:
    radial-gradient(100% 140% at 92% 0%, rgba(69,224,147,.3) 0%, transparent 58%),
    radial-gradient(70% 100% at 0% 100%, rgba(124,183,171,.14) 0%, transparent 55%),
    linear-gradient(150deg,#282c36,#111318);
}

/* ── 노트 박스 톤 ── */
.nb-note{background:linear-gradient(180deg,#e9e9ed,#e9e9ed); border-color:#e8e8ee}

/* ═══════════════════════════════════════════════════
   v4 — 코스 요금 카드 (표 → 개별 셀 카드)
   카드마다 색조를 달리해 코스 등급이 한눈에 구분되게 한다.
   ═══════════════════════════════════════════════════ */
.nb-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.nb-card{
  position:relative; overflow:hidden; isolation:isolate;
  padding:24px 22px 22px; border-radius:16px;
  border:1px solid var(--line); background:#fff;
  box-shadow:0 1px 2px rgba(16,20,28,.05), 0 6px 18px rgba(16,20,28,.055);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
/* 상단 컬러 바 */
.nb-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:2;
}
/* 우상단 컬러 글로우 */
.nb-card::after{
  content:""; position:absolute; z-index:-1; top:-58px; right:-58px;
  width:150px; height:150px; border-radius:50%; opacity:.5;
  transition:opacity .22s, transform .22s;
}
.nb-card:hover{transform:translateY(-4px)}
.nb-card:hover::after{opacity:.85; transform:scale(1.12)}

.nb-card .cap{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; min-height:24px}
.nb-card .nm{font-size:14.5px; font-weight:800; letter-spacing:-.015em}
.nb-card .tag{
  font-size:10.5px; font-weight:800; letter-spacing:.02em; color:#fff;
  padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.nb-card .min{display:flex; align-items:baseline; gap:3px; margin-bottom:6px}
.nb-card .min b{
  font-size:38px; font-weight:800; line-height:1; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
.nb-card .min em{font-style:normal; font-size:15px; font-weight:700; color:var(--mute)}
.nb-card .pr{
  font-size:21px; font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; padding-top:12px; border-top:1px dashed var(--line);
}
.nb-card .pr span{font-size:14px; font-weight:700; margin-left:2px}

/* ── 톤 A : 레드(기본) ── */
.nb-card.t-a{background:linear-gradient(180deg,#fff 60%,#dedef7)}
.nb-card.t-a::before{background:linear-gradient(90deg,#706ed0,#b6b5ee)}
.nb-card.t-a::after{background:radial-gradient(circle,rgba(69,224,147,.2),transparent 68%)}
.nb-card.t-a .nm{color:#5755bb}
.nb-card.t-a .min b{color:#706ed0}
.nb-card.t-a .pr{color:#5755bb}
.nb-card.t-a:hover{border-color:rgba(69,224,147,.4); box-shadow:0 8px 20px rgba(69,224,147,.16), 0 20px 44px rgba(69,224,147,.12)}

/* ── 톤 B : 퍼플(집중) ── */
.nb-card.t-b{background:linear-gradient(180deg,#fff 60%,#dedef7)}
.nb-card.t-b::before{background:linear-gradient(90deg,#7675d2,#b8b7ee)}
.nb-card.t-b::after{background:radial-gradient(circle,rgba(77,224,219,.2),transparent 68%)}
.nb-card.t-b .nm{color:#6664c3}
.nb-card.t-b .min b{color:#7675d2}
.nb-card.t-b .pr{color:#6664c3}
.nb-card.t-b .tag{background:linear-gradient(180deg,#9997e5,#7675d2); box-shadow:0 2px 7px rgba(77,224,219,.35)}
.nb-card.t-b:hover{border-color:rgba(77,224,219,.4); box-shadow:0 8px 20px rgba(77,224,219,.16), 0 20px 44px rgba(77,224,219,.12)}

/* ── 톤 C : 골드(프리미엄) ── */
.nb-card.t-c{background:linear-gradient(180deg,#fff 60%,#e5e4f1)}
.nb-card.t-c::before{background:linear-gradient(90deg,#7c7ba5,#c1c1db)}
.nb-card.t-c::after{background:radial-gradient(circle,rgba(99,164,151,.22),transparent 68%)}
.nb-card.t-c .nm{color:#565689}
.nb-card.t-c .min b{color:#7c7ba5}
.nb-card.t-c .pr{color:#565689}
.nb-card.t-c:hover{border-color:rgba(99,164,151,.45); box-shadow:0 8px 20px rgba(99,164,151,.18), 0 20px 44px rgba(99,164,151,.13)}

@media (max-width:768px){
  .nb-cards{grid-template-columns:1fr; gap:11px}
  .nb-card{
    display:grid; grid-template-columns:1fr auto; align-items:center;
    padding:18px 20px; row-gap:4px;
  }
  .nb-card .cap{grid-column:1; margin-bottom:0}
  .nb-card .min{grid-column:1; margin-bottom:0}
  .nb-card .min b{font-size:27px}
  .nb-card .pr{grid-column:2; grid-row:1 / span 2; border-top:none; padding-top:0; font-size:19px}
}

/* ═══════════════════════════════════════════════════
   v6 — 지역 분류 (자치구 → 하위 동·역)
   상태를 4단계로 분명히 한다: 기본 / 호버 / 열림 / 선택
   ★열림 상태를 밝은 배경 + 밝은 글씨로 두면 글자가 사라져 보인다 → 열림은 '채운' 스타일로.
   ═══════════════════════════════════════════════════ */
.nb-cate{
  font-family:'Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif;
  margin:0 0 24px;
}

/* ── 1단: 자치구 ── */
.nb-cate-head{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:18px 18px 16px; border-radius:18px;
  background:linear-gradient(180deg,#e8e8ee,#f6f7f9);
  border:1px solid #eceef1;
  box-shadow:inset 0 1px 2px rgba(16,20,28,.03);
}

.nb-ct{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 16px; border-radius:12px; cursor:pointer;
  font-size:14px; font-weight:700; letter-spacing:-.012em; line-height:1;
  color:#41454e; background:#fff; border:1px solid #e3e6ea;
  text-decoration:none!important; white-space:nowrap;
  box-shadow:0 1px 2px rgba(16,20,28,.05);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s, background .18s, color .18s;
}
.nb-ct:hover{
  color:#5f5dc1; border-color:#dcdcf3; background:#dedef7;
  transform:translateY(-2px); box-shadow:0 5px 14px rgba(69,224,147,.13);
}

/* 전체 버튼 — 중립 다크 */
.nb-ct.all{
  color:#fff!important; border-color:transparent;
  background:linear-gradient(180deg,#3d424c,#252932);
  box-shadow:0 3px 10px rgba(37,41,50,.26);
}
.nb-ct.all:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(37,41,50,.32)}

/* ★열림 — 채운 레드. 밝은 배경+밝은 글씨 조합을 쓰지 않는다(글자가 사라져 보임) */
.nb-ct.open{
  color:#fff!important; border-color:transparent;
  background:linear-gradient(180deg,#817fdf,#6362c3);
  box-shadow:0 5px 16px rgba(58,209,134,.34);
  transform:translateY(-1px);
}
/* 선택(현재 보고 있는 분류) — 더 진한 채움 */
.nb-ct.on{
  color:#fff!important; border-color:transparent;
  background:linear-gradient(180deg,#6362c3,#4442af);
  box-shadow:0 5px 16px rgba(40,176,108,.36);
}

.nb-ct b{
  font-size:11px; font-weight:800; line-height:1; padding:3px 7px; border-radius:999px;
  background:#dfdff6; color:#5755bb; font-variant-numeric:tabular-nums;
}
.nb-ct.open b,.nb-ct.on b,.nb-ct.all b{background:rgba(255,255,255,.26); color:#fff}

.nb-ct .arw{
  width:6px; height:6px; margin-left:2px; opacity:.6;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-2px);
  transition:transform .26s cubic-bezier(.2,.7,.3,1), opacity .2s;
}
.nb-ct:hover .arw{opacity:.9}
.nb-ct.open .arw{transform:rotate(-135deg) translate(-2px,-1px); opacity:1}

/* ── 2단: 하위 동·역 ── */
.nb-cate-sub{
  display:none; flex-wrap:wrap; gap:8px; position:relative;
  margin-top:10px; padding:18px 20px; border-radius:16px;
  background:#fff; border:1px solid #e4e4f1;
  box-shadow:0 6px 22px rgba(69,224,147,.09);
  animation:nb-sub-in .26s cubic-bezier(.2,.7,.3,1);
}
.nb-cate-sub.open{display:flex}
/* 위쪽 연결 삼각형 */
.nb-cate-sub::before{
  content:""; position:absolute; top:-7px; left:30px; width:12px; height:12px;
  background:#fff; border-left:1px solid #e4e4f1; border-top:1px solid #e4e4f1;
  transform:rotate(45deg);
}
@keyframes nb-sub-in{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}

.nb-cs{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:10px; line-height:1;
  font-size:13px; font-weight:600; color:#4b5058;
  background:#fafbfc; border:1px solid #e9ebef;
  text-decoration:none!important; white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .16s, color .16s, background .16s;
}
.nb-cs:hover{
  color:#5f5dc1; background:#fff; border-color:#dcdcf3;
  transform:translateY(-2px); box-shadow:0 4px 12px rgba(69,224,147,.14);
}
/* '○○구 전체' 는 살짝 강조 */
.nb-cate-sub > .nb-cs:first-child{
  font-weight:800; color:#4442af; background:#dedef7; border-color:#d6d6f0;
}
/* ★선택 상태는 배경까지 확실히 바꾼다.
   :first-child 규칙이 .nb-cs.on 보다 우선순위가 높아, 글자만 흰색이 되고 배경은 연분홍으로 남아
   '○○구 전체' 글씨가 보이지 않던 문제를 여기서 잡는다. */
.nb-cate-sub > .nb-cs:first-child.on{
  color:#fff!important; border-color:transparent;
  background:linear-gradient(180deg,#817fdf,#6362c3);
  box-shadow:0 4px 12px rgba(58,209,134,.3);
}
.nb-cs.on{
  color:#fff!important; border-color:transparent;
  background:linear-gradient(180deg,#817fdf,#6362c3);
  box-shadow:0 4px 12px rgba(58,209,134,.3);
}
.nb-cs b{
  font-size:10.5px; font-weight:800; line-height:1; padding:2px 6px; border-radius:999px;
  background:#dfdff6; color:#5755bb; font-variant-numeric:tabular-nums;
}
.nb-cs.on b{background:rgba(255,255,255,.26); color:#fff}
/* 업소 없는 지역 — 흐리게 두되 클릭은 가능 */
.nb-cs.empty{color:#a2a8b2; background:#fbfcfd; border-color:#eef0f3}
.nb-cs.empty:hover{color:#5f5dc1; background:#fff}

@media (max-width:768px){
  .nb-cate-head{padding:14px 13px 12px; gap:6px; border-radius:15px}
  .nb-ct{padding:9px 13px; font-size:13.5px; border-radius:11px}
  .nb-cate-sub{padding:14px 15px; gap:6px; border-radius:14px}
  .nb-cs{padding:8px 12px; font-size:12.5px}
}

/* ── 늘봄: 카드 썸네일이 프레임을 채우게 (2026-08-21) ──────────────────────
   목록 프레임은 1:1(padding-bottom:100%)인데 동적 SVG 는 16:9 라
   나리야 기본 규칙(height:auto)에서는 위쪽만 채우고 아래가 흰 띠로 남았다(실측).
   ★프레임 비율을 바꾸면 다른 화면까지 흔들리므로 이미지 쪽을 채우게 한다. */
.img-wrap .img-item img.img-render {
	width: 100%;
	height: 100%;
	object-fit: cover;
}