/* 밤나라 '살아있는 페이지' 스타일 — 효과/모션 */

/* prefers-reduced-motion: 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .bn-reveal{opacity:1 !important;transform:none !important}
  .bn-ticker-track{animation:none !important}
}

/* 1) 스크롤 등장(fade-in) — 클래스가 붙은 요소만(no-JS 항상 보임) */
.bn-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s ease}
.bn-reveal.in{opacity:1;transform:none}

/* 2) NEW 뱃지 */
.bn-new{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;
  font-size:10px;font-weight:800;line-height:1.5;letter-spacing:.3px;color:#fff;
  background:linear-gradient(90deg,#ff3d6e,#e73582);vertical-align:middle;
  animation:bn-newpulse 1.8s ease-in-out infinite}
@keyframes bn-newpulse{0%,100%{box-shadow:0 0 0 0 rgba(231,53,130,.45)}50%{box-shadow:0 0 0 5px rgba(231,53,130,0)}}

/* 3) 실시간 활동 스트립 (라이트 배경용) */
.bn-livebar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;justify-content:center;
  max-width:1180px;margin:14px auto 0;padding:12px 18px;
  background:#fff;border:1px solid #f3d9e5;border-radius:14px;
  box-shadow:0 6px 18px rgba(231,53,130,.07);
  font-size:14px;color:#6a7080}
.bn-livebar b{color:#e73582;font-weight:800;font-variant-numeric:tabular-nums}
.bn-livebar .lb-online{font-weight:800;color:#2a2f3a}
.bn-livebar .lb-online .lb-dot{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:bn-onpulse 1.6s infinite;vertical-align:middle}
.bn-livebar .lb-stat{color:#6a7080}
.bn-livebar .lb-stat i{margin-right:5px;color:#e7659a}
@keyframes bn-onpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* 4) 최근 글 티커(가로 흐름, 라이트 배경용) */
.bn-ticker{max-width:1180px;margin:14px auto 0;overflow:hidden;position:relative;
  border:1px solid #f3d9e5;border-radius:12px;background:#fff;
  box-shadow:0 6px 18px rgba(231,53,130,.05);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.bn-ticker-track{display:flex;width:max-content;gap:0;animation:bn-ticker 42s linear infinite}
@keyframes bn-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bn-tk{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  padding:11px 20px;color:#525866;text-decoration:none;font-size:13.5px;white-space:nowrap;
  border-right:1px solid #f1e4ea}
.bn-tk:hover{background:#fdf2f7;color:#1f2430}
.bn-tk .tk-b{font-size:11px;font-weight:800;color:#e73582;
  padding:2px 7px;border-radius:6px;background:rgba(231,53,130,.10)}
.bn-tk .tk-ago{font-style:normal;font-size:12px;color:#a9aebb}

/* 5) hover 살짝 떠오름 (카드류) */
.bn-pcard,.bn-rcard,.bn-quick-card,.bn-qrow{transition:transform .2s ease, box-shadow .2s ease}
.bn-pcard:hover,.bn-quick-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.28)}
.bn-rcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.34)}
.bn-qrow:hover{transform:translateY(-2px)}

/* 6) 푸터 카톡/텔레 CTA 버튼 */
.bnft-cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.bnft-btn.kakao{background:#fae100;color:#3a1d1d;border:0}
.bnft-btn.tele{background:#229ed9;color:#fff;border:0}
.bnft-btn.kakao:hover{background:#ffe600}
.bnft-btn.tele:hover{background:#1b8dc4}

/* 모바일 하단바 카톡/텔레 강조 */
#bn-mcta .mcta-k i{color:#3a2e00}
#bn-mcta .mcta-k{background:#fae100;color:#3a1d1d}
#bn-mcta .mcta-t{background:#229ed9;color:#fff}
#bn-mcta .mcta-t i{color:#fff}

@media (max-width:640px){
  .bn-livebar{gap:8px 14px;font-size:13px;padding:10px 12px;border-radius:12px}
  .bn-tk{padding:10px 14px;font-size:12.5px}
}

/* 7) 좌하단 플로팅 '카톡 문의'(#bn-inq) — 모바일/태블릿/폴드에서 숨김(하단 고정바와 중복) */
@media (max-width:1024px){
  #bn-inq{display:none!important}
}

/* 8) 모바일 표 깨짐 수정 — 가로스크롤 없이 화면 안에서 줄바꿈으로 맞춤 */
@media (max-width:760px){
  /* 가격표: fixed 4등분 → auto(내용 비례) + 줄바꿈 허용 → 겹침/넘침 제거 */
  .bn-price-wrap{overflow:hidden}
  #bo_v_con .bn-price{table-layout:auto;width:100%;min-width:0}
  #bo_v_con .bn-price th,#bo_v_con .bn-price td{
    white-space:normal;word-break:break-word;overflow-wrap:anywhere;
    padding:6px 4px;font-size:11px;line-height:1.4}
  /* 본문/후기/페이지 내 일반 표도 화면 폭에 맞춰 줄바꿈(스크롤 없음) */
  #bo_v_con table,.rev-v-con table,.bn-page table{
    width:100%!important;max-width:100%;table-layout:auto;border-collapse:collapse}
  #bo_v_con table th,#bo_v_con table td,
  .rev-v-con table th,.rev-v-con table td,
  .bn-page table th,.bn-page table td{
    white-space:normal!important;word-break:break-word;overflow-wrap:anywhere}
}

/* ============================================================
   한국형 홈 리디자인 — 공지 · 지역별 많이본글 · 지역별 후기
   (토큰: --pink/--pink-d/--grad/--wide/--line 등 default.css)
   ============================================================ */

/* 9) 히어로 보강 — 사이트 정체성 문구 + 신뢰 지표 칩 */
.bn-hero-desc{max-width:640px;margin:-14px auto 20px;font-size:15px;line-height:1.75;
  color:#f3e9ef;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.bn-hero-desc b{color:#fff;font-weight:800}
.bn-hero-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0}
.bn-hero-trust li{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.34)}
.bn-hero-trust li i{color:#ffd6e6}

/* 10) 헤더 아래 공지 바(홈, localStorage 닫기 기억) */
.bn-notice-bar{background:linear-gradient(90deg,#fff0f6,#ffe7f1);border-bottom:1px solid var(--pink-line)}
.bn-notice-bar-in{display:flex;align-items:center;gap:12px;min-height:44px;padding:7px 20px}
.bn-notice-bar .nb-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:var(--ink)}
.bn-notice-bar .nb-ic{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;
  color:#fff;background:var(--pink-d);padding:3px 10px;border-radius:var(--r-pill)}
.bn-notice-bar .nb-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;font-weight:600;color:var(--ink)}
.bn-notice-bar .nb-main:hover .nb-t{color:var(--pink-d)}
.bn-notice-bar .nb-all{flex:none;font-size:12.5px;font-weight:700;color:var(--pink-d);white-space:nowrap}
.bn-notice-bar .nb-x{flex:none;width:30px;height:30px;border:0;background:transparent;color:var(--muted);
  font-size:20px;line-height:1;cursor:pointer;border-radius:50%}
.bn-notice-bar .nb-x:hover{background:rgba(231,53,130,.10);color:var(--pink-d)}

/* 11) 공지 리스트(그누보드 클래식 목록) */
.bn-notice-sec{padding-top:46px;padding-bottom:0}
.bn-notice-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--pink-d);border-bottom:1px solid var(--line)}
.bn-notice-list li{border-bottom:1px solid var(--line2)}
.bn-notice-list li:last-child{border-bottom:0}
.bn-notice-list li a{display:flex;align-items:center;gap:12px;padding:13px 10px;color:var(--ink)}
.bn-notice-list li a:hover{background:var(--bg)}
.bn-notice-list .nl-badge{flex:none;font-size:11.5px;font-weight:800;color:#fff;background:var(--pink-d);padding:3px 10px;border-radius:6px}
.bn-notice-list .nl-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.bn-notice-list .nl-d{flex:none;font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.bn-notice-list .nl-h{flex:none;font-size:13px;color:var(--faint);white-space:nowrap;min-width:54px;text-align:right}
.bn-notice-list .nl-h i{margin-right:3px}

/* 12) 지역별 많이 본 글 — 순위 리스트 카드 5개 */
.bn-rank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.bn-tint>.bn-rank-grid{max-width:var(--wide);margin-left:auto;margin-right:auto}
.bn-rank-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column}
.bn-rank-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:2px solid var(--pink-soft)}
.bn-rank-title{font-size:15px;color:var(--ink);font-weight:700}
.bn-rank-title b{color:var(--pink-d);font-weight:850}
.bn-rank-more{flex:none;font-size:12.5px;font-weight:700;color:var(--muted)}
.bn-rank-more:hover{color:var(--pink-d)}
.bn-rank-list{list-style:none;margin:0;padding:6px 6px 10px}
.bn-rank-row a{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:var(--r-sm);color:var(--ink)}
.bn-rank-row a:hover{background:var(--bg)}
.bn-rank-row .rk-no{flex:none;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;color:var(--muted);background:var(--line2);border-radius:6px;font-variant-numeric:tabular-nums}
.bn-rank-row.top .rk-no{color:#fff;background:var(--grad)}
.bn-rank-row .rk-cat{flex:none;min-width:56px;box-sizing:border-box;text-align:center;font-size:10.5px;font-weight:700;color:var(--pink-d);background:var(--pink-soft);padding:2px 6px;border-radius:5px}
.bn-rank-row .rk-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600}
.bn-rank-row .rk-hit{flex:none;font-size:12px;color:var(--faint);white-space:nowrap}
.bn-rank-row .rk-hit i{margin-right:2px}
.bn-rank-empty{padding:22px 16px;text-align:center;color:var(--muted);font-size:13.5px}
.bn-rank-empty p{margin:0 0 12px}

/* 13) 지역별 후기 — 지역마다 최신 5건 리스트 카드(bn-rank-grid 재사용) */
.bn-rvcard .bn-rank-head{border-bottom-color:var(--line2)}
.bn-rvlist{list-style:none;margin:0;padding:4px 6px 10px}
.bn-rvlist li{border-bottom:1px solid var(--line2)}
.bn-rvlist li:last-child{border-bottom:0}
.bn-rvlist li a{display:block;padding:10px 10px;border-radius:var(--r-sm);color:var(--ink)}
.bn-rvlist li a:hover{background:var(--bg)}
.bn-rvlist .rv-t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:var(--ink)}
.bn-rvlist .rv-m{display:block;margin-top:4px;font-size:11.5px;color:var(--faint)}
.bn-rvlist .rv-nick{color:var(--pink-d);font-weight:700}
.bn-rvlist .rv-cmt i{margin-right:2px}
.bn-rvlist .bn-ago{font-style:normal}

/* 14) PC nav — 공지사항 맨 오른쪽 정렬(드롭다운 없이 페이지 링크만) */
.bnnav-ul>li.bnnav-notice{margin-left:auto}

/* 14b) 히어로 배경 = 신규 AI 야경(캐시버스트). default.css .bn-hero url 오버라이드 */
.bn-hero{background-image:url('img/hero-home.webp?v=260701')!important}

/* 16) 모바일 — 순위/후기 카드는 bn-rank-grid(auto-fill)로 1열 세로 스택 */
@media(max-width:880px){
  .bn-rank-head{padding:12px 14px}
}
@media(max-width:560px){
  .bn-notice-list .nl-h{display:none}
  .bn-notice-bar .nb-all{display:none}
  .bn-notice-bar-in{padding:7px 14px}
}
