/* ==========================================================
   제주도 유흥 공식 커뮤니티 - 공통 스타일 (포털형 레이아웃 · 화이트&그린)
   색상은 :root 값만 바꾸면 전체에 반영됩니다.
   --point 계열이 사이트 포인트 색입니다.
   ========================================================== */
:root {
  --ink: #1a1f1c;          /* 본문 글자·진한 배경 */
  --black: #0f1411;
  /* 포인트 = 그린.
     예전 값(#22a559)은 흰 글자를 얹었을 때 대비가 3.18:1 이라 읽기 기준(4.5:1)에 모자랐다.
     버튼·상단 메뉴·배지가 전부 '흰 글자 + 초록 배경'이라 사이트 대부분이 걸렸다.
     같은 초록 계열에서 한 단계만 깊게 내려 5.0:1 을 넘긴 값이다. 색감은 그대로 두고 읽기만 살린다. */
  --point: #16803f;
  --point-dark: #0f5f2e;   /* 눌렀을 때·글자 링크용 — 더 깊은 초록 */
  --point-soft: #b8e6c8;   /* 옅은 배경용. 글자색·테두리로는 쓰지 않는다 (흰 바탕에서 1.4:1) */
  --deep: #14301f;         /* 푸터·강조 박스 같은 진한 초록 */
  --text: #1f2421;
  --text-2: #555d57;
  --muted: #86908a;
  --line: #e2e8e4;
  --line-2: #eef3f0;
  --bg: #fff;
  --bg-soft: #f4faf6;
  /* 제목용: 본문과 같은 Pretendard 를 굵기·자간으로 구분한다 (한글 명조는 오래된 인상을 준다)
     대체 글꼴은 본문과 똑같이 폭을 맞춘 "Pretendard 대체" 를 쓴다 —
     여기에 그냥 "Malgun Gothic" 을 두었더니 제목·목차만 글꼴이 바뀔 때 크게 밀렸다
     (가이드 글 CLS 0.24. 아래 @font-face 주석 참고) */
  --display: "Pretendard", "Pretendard Variable", "Apple SD Gothic Neo", "Pretendard 대체", sans-serif;
  /* 영문·숫자 장식용에만 쓰는 세리프 (Q, 19, 404 등 — 한글은 지나가지 않는다) */
  --serif: Georgia, "Times New Roman", serif;
  --wrap: 1300px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* ── 글꼴이 늦게 도착해도 화면이 밀리지 않게 ─────────────────────────
   Pretendard 는 바깥(jsdelivr)에서 받아온다. 느릴 때는 500ms 넘게 걸린다.
   그동안 화면은 대체 글꼴로 먼저 그려지는데, 문제는 폭이 다르다는 것이다.
   실제로 재 보니 (100px, 한글 한 줄 기준)

       Pretendard   1533px
       맑은 고딕     1811px   ← 18% 더 넓다

   그래서 Pretendard 가 도착하는 순간 긴 본문의 줄바꿈이 통째로 다시 잡히고,
   가이드 글에서 CLS 가 0.24 까지 튀었다 (구글 기준은 0.1 이하).

   size-adjust 로 대체 글꼴을 Pretendard 폭에 맞춰 줄여 둔다.
   잠깐 글자가 조금 작아 보이지만 자리는 그대로라 화면이 밀리지 않는다.
   애플 기기의 Apple SD Gothic Neo 는 Pretendard 가 애초에 그 metric 에 맞춰
   만들어진 글꼴이라 손댈 필요가 없다 — 그래서 보정판보다 앞에 둔다.
   안드로이드는 둘 다 없으므로 sans-serif(Noto Sans KR)로 내려간다. */
@font-face {
  font-family: "Pretendard 대체";
  src: local("Malgun Gothic"), local("맑은 고딕");
  size-adjust: 84.7%;
  font-display: swap;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Pretendard 대체", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
  /* 글자 렌더링을 얇고 선명하게 — 고급스러운 인상의 대부분은 여기서 나온다 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss03", "cv11";
  letter-spacing: -.01em;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--point-dark); }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-family: var(--display); letter-spacing: -.03em; text-wrap: balance; }
p { margin: 0 0 1em; }
button { font: inherit; }
.container { max-width: var(--wrap); margin: 0 auto; padding-inline: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-only { display: none !important; }
@media (max-width: 991px) {
  .pc-only { display: none !important; }
  .m-only { display: flex !important; }
}

/* ---------- Top bar ---------- */
.topbar { background: #fff; color: #6b7280; font-size: 12px; letter-spacing: .01em; border-bottom: 1px solid var(--line); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 32px; }
.topbar ul { display: flex; }
.topbar li + li::before { content: "·"; margin: 0 10px; color: #cfd6d1; }
.topbar a:hover { color: var(--point-dark); }

/* ---------- 아이콘 자리 미리 잡기 (화면 흔들림 방지) ----------
   Font Awesome 의 CSS 는 첫 화면을 막지 않으려고 일부러 늦게 부른다
   (head.sub.php 의 media="print" onload="this.media='all'" 기법).
   그래서 CSS 가 도착하기 전에는 <i> 가 빈 칸이었다가, 도착하는 순간
   아이콘이 생겨나면서 아래 내용을 전부 밀어냈다.
   실측(2026-09-23): 가이드 글에서 5회 중 1회 CLS 0.24 — 구글 기준 0.1 초과.
                     머리글이 25px 자라면서 본문 전체가 위아래로 밀렸다.
   아이콘이 차지할 칸을 미리 못 박아 두면 CSS 가 늦게 와도 아무것도 안 밀린다.
   1.25em 은 Font Awesome 의 고정폭(fa-fw)과 같은 값이라 모양도 그대로다.
   ※ 늦게 부르는 방식 자체는 그대로 둔다 — 그 CSS 는 400ms 짜리라
     화면을 막게 하면 글자가 보이는 시점(LCP)이 그만큼 늦어진다. */
i[class*="fa-"] {
  display: inline-block;
  width: 1.25em;
  height: 1em;
  line-height: 1;
  font-style: normal;
  text-align: center;
}

/* ---------- Header (화이트) ---------- */
.hd { background: #fff; color: var(--ink); border-bottom: 0; }
.hd-inner { display: flex; align-items: center; justify-content: center; gap: 36px; height: 120px; position: relative; }
.hd-logo { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ink); }
.hd-logo:hover { color: var(--ink); }
.logo-word { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 32px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.logo-word b { color: var(--point); font-weight: inherit; }
.logo-word svg { width: 36px; height: 36px; flex: none; }
.logo-tag { font-size: 11px; font-weight: 500; line-height: 1; color: var(--muted); letter-spacing: .02em; }
.hd-search form { display: flex; width: 280px; border: 2px solid var(--point); }
.hd-search input { flex: 1; min-width: 0; height: 34px; border: 0; padding: 0 12px; font: inherit; color: var(--text); background: #fff; }
/* 검색칸 포커스 표시를 지우지 않는다 — 지우면 키보드로 쓰는 사람은 커서가 어디 있는지 알 수 없다.
   대신 안쪽으로 그려 칸이 커 보이지 않게 한다. */
.hd-search input:focus { outline: 2px solid var(--point-dark); outline-offset: -2px; }
.hd-search button { width: 40px; height: 34px; border: 0; background: var(--point); color: #fff; cursor: pointer; }
.hd-search button:hover { background: var(--point-dark); }
.hd-kw { margin-top: 7px; font-size: 12px; display: flex; color: var(--text-2); }
.hd-kw a + a::before { content: "|"; margin: 0 10px; color: #cfd6d1; font-size: 10px; }
.hd-kw a:hover { color: var(--point-dark); }
.hd-icon { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--ink); font-size: 20px; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.hd .hd-icon { color: var(--ink); }
.hd-icon.left { left: 4px; }
.hd-icon.right { right: 4px; }
.m-search { background: var(--bg-soft); padding: 10px 16px; border-top: 1px solid var(--line); }
.m-search form { display: flex; border: 0; }
.m-search input { flex: 1; min-width: 0; height: 38px; border: 0; padding: 0 10px; font: inherit; }
.m-search button { width: 44px; border: 0; background: var(--point); color: #fff; }

@media (max-width: 991px) {
  .hd-inner { height: 72px; }
  .logo-word { font-size: 24px; gap: 7px; }
  .logo-word svg { width: 26px; height: 26px; }
  .logo-tag { font-size: 10px; }
}

/* ---------- PC 메뉴 (그린) ---------- */
.gnb { background: var(--point); color: #fff; position: sticky; top: 0; z-index: 90; }
.gnb .container { display: flex; align-items: stretch; height: 54px; }
.gnb .menu { display: flex; flex: 1; }
.gnb .menu li { flex: 1; }
.gnb .menu li.home { flex: 0 0 60px; }
.gnb .menu a { display: flex; align-items: center; justify-content: center; height: 54px; font-size: 15px; font-weight: 600; letter-spacing: .01em; position: relative; white-space: nowrap; color: #fff; }
.gnb .menu a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; background: #fff; transition: width .2s, left .2s; }
.gnb .menu a:hover, .gnb .menu a[aria-current="page"] { color: #fff; }
.gnb .menu a:hover::after, .gnb .menu a[aria-current="page"]::after { width: 40px; left: calc(50% - 20px); }
.gnb .tools { display: flex; border-left: 1px solid rgba(255,255,255,.3); }
.gnb .tools a, .gnb .tools button { width: 44px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: rgba(255,255,255,.92); background: none; border: 0; cursor: pointer; }
.gnb .tools a:hover, .gnb .tools button:hover { color: #fff; }

/* ---------- 모바일 아이콘 메뉴 ---------- */
/* 좁은 화면 아이콘 메뉴.
   예전에는 옆으로 넘어가는데 스크롤바까지 감춰 놓아, 360px 짜리 화면에서
   마지막 '고객센터'가 잘린 채 더 있다는 사실조차 알 수 없었다.
   칸 최소 너비를 70px → 54px 로 줄이면 메뉴 6개가 324px 라
   가장 좁은 축에 드는 360px 화면에도 다 들어온다. 글자도 한 단계 줄인다. */
.m-gnb { background: var(--point); overflow-x: auto; scrollbar-width: none; }
.m-gnb::-webkit-scrollbar { display: none; }
.m-gnb ul { display: flex; min-width: 100%; padding: 8px 6px 6px; }
.m-gnb li { flex: 1 0 auto; min-width: 54px; }
.m-gnb a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; font-size: 11.5px; padding: 4px 2px; white-space: nowrap; }
.m-gnb i { font-size: 21px; height: 28px; display: flex; align-items: center; color: #fff; }

/* 사이드바 없이 본문만 있는 화면 (로그인 · 회원가입 · 1:1문의 · 안내) */
.sub-wrap { padding-block: 26px 40px; min-height: 40vh; }
.sub-wrap > main { max-width: 760px; margin: 0 auto; }

/* ---------- 본문 2단 ---------- */
.body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding-top: 24px; padding-bottom: 48px; }
@media (max-width: 991px) { .body-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 16px; } }

/* ---------- 섹션 타이틀 ---------- */
.sec { margin-bottom: 34px; }
.sec-title { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
/* 제목은 block 으로 — flex 로 두면 <b> 앞뒤로 빈칸이 벌어진다 */
.sec-title h2, .sec-title h1 { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; padding-bottom: 10px; border-bottom: 2px solid var(--point); margin-bottom: -1px; }
.sec-title h2 b, .sec-title h1 b { font-weight: 800; }
/* 아래 padding-bottom 은 제목(h2)의 10px 과 같아야 한다.
   flex 가 아래를 기준으로 줄을 맞추므로, 다르면 "전체보기"가 제목보다 그만큼 내려앉는다. */
/* 섹션 제목 옆 '전체보기' 링크.
   ── 글자를 CSS 로 만들지 않는 이유 ──
   예전에는 HTML 에 "+" 만 적어 두고 CSS 의 ::after 로 "전체보기"를 그렸다.
   화면에는 잘 보였지만 구글이 읽는 것은 HTML 이라, 링크 글자가 "+" 하나였다.
   구글은 링크에 적힌 글자로 그 페이지가 무엇에 관한 것인지 판단하므로
   "+"는 아무 정보도 주지 못한다. 낭독기가 읽는 이름과도 달라 헷갈렸다.
   그래서 이제 HTML 에 "제휴업소 전체보기"처럼 뜻이 있는 글자를 직접 적는다.
   아래 padding-bottom 은 제목(h2)의 10px 과 같아야 줄이 맞는다. */
.sec-title .plus {
  color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: -.01em;
  padding: 0 2px 10px; line-height: 1; white-space: nowrap; flex: none;
}
.sec-title .plus::after { content: " \203A"; }
.sec-title .plus:hover { color: var(--ink); }

/* 휴대폰에서 '더보기' 링크의 누를 자리 넓히기.
   '제휴업소 전체보기' 같은 링크는 글자만 있어서 높이가 20~23px 밖에 안 됐다.
   손가락으로 누르기 어렵고 접근성 기준(24px)에도 못 미친다.
   위아래 여백을 실제로 줘서 32px 이상으로 만든다 —
   보이지 않는 덧칠(::before)로 늘리는 방법도 있지만, 그러면
   검사 도구가 실제 크기를 못 읽어 문제가 남아 있는지 확인할 길이 없다. */
@media (max-width: 767px) {
  /* '더보기' 링크는 어디에 있든 모두 (섹션 제목·사이드바 위젯·그 밖).
     ★ 명시도를 한 단계 올려 둔다 (.w-title a.plus = 0,2,1).
       같은 명시도(.w-title .plus = 0,2,0)로 적었더니, 사이드바 위젯의
       기본 규칙이 이 미디어쿼리보다 '아래쪽 줄'에 있어서 나중 것이 이겼고
       휴대폰에서 높이가 20px 에 머물렀다(WCAG 2.5.8 기준 24px 미달).
       명시도를 올려 두면 파일 어디에 적히든 순서와 무관하게 이긴다.
       실측으로 확인할 것: tests/mobile_real.php 의 '작은버튼' 칸. */
  .sec-title a.plus, .w-title a.plus, a.plus {
    padding-top: 10px; padding-bottom: 10px;
  }
  /* 사이드바 목록(공지·최신글)의 한 줄짜리 링크도 같은 이유로 넓힌다.
     목록 사이 간격은 줄여서 전체 높이가 늘어나지 않게 맞춘다. */
  .notice-list a, .w-list a { padding-top: 7px; padding-bottom: 7px; }
  .notice-list li, .w-list li { margin-bottom: 0; }
  .notice-list a::before { top: 14px; }

  /* 꼬리글 메뉴·빵부스러기 — 문장 속 링크가 아니라 '눌러서 이동하는 단추'다.
     접근성 기준(WCAG 2.5.8)은 문장 안 링크만 예외로 두고, 이런 독립 링크는
     24px 이상을 요구한다. 본문 문장 속 링크(<p> 안의 a)는 예외라 건드리지 않는다. */
  .ft-links a, .ft-menu a, .about-box a { display: inline-block; padding: 7px 0; }
  .breadcrumb a, .breadcrumb > span { display: inline-block; padding: 6px 0; }
}
/* 섹션 제목 앞 표식: 그린 막대 */
.orb { display: inline-block; width: 4px; height: 15px; flex: none; vertical-align: -2px; margin-right: 9px; border-radius: 2px; background: linear-gradient(180deg, var(--point), var(--point-dark)); }

/* ---------- 배너 ---------- */
.bn { display: block; position: relative; overflow: hidden; background: linear-gradient(135deg, #f3f3f1, #e3e2de); color: #999; }
.bn:hover { color: #999; }
.bn img { width: 100%; height: auto; display: block; }
/* 이미지가 있는 배너는 올린 이미지 비율 그대로 (자르지 않음) */
.vip-list .bn.has-img, .cert-grid .bn.has-img, .prem-grid .item .bn.has-img { aspect-ratio: auto; }
.bn .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 12px; gap: 2px; }
.bn .ph strong { font-size: 17px; color: #777; font-weight: 600; }
/* 등급 배지는 이미지 위에 얹혀 있다. pointer-events:none 이 없으면
   배지 위에서 우클릭할 때 브라우저가 '이미지'를 못 찾아
   '이미지를 다른 이름으로 저장' 대신 링크(HTML 페이지)를 저장하게 된다. */
.bn .lv { position: absolute; top: 8px; left: 8px; background: var(--point-dark); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 3px 8px; z-index: 1; pointer-events: none; }
.bn .lv.is-vip { background: var(--point); color: #fff; }

.vip-list { display: grid; gap: 8px; }
.vip-list .bn { aspect-ratio: 940 / 170; max-width: 100%; }

/* 배너 칸 수는 화면 폭에 따라 늘린다.
   예전에는 어느 폭에서나 2열이라, 데스크톱에서 한 칸이 450px 넘는 정사각형이 되어
   업소 10곳이 5줄을 차지했다. 화면은 휑한데 스크롤만 길어 업소가 적어 보였다. */
.cert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.cert-grid .bn { aspect-ratio: 462 / 600; max-width: 100%; }
@media (min-width: 768px)  { .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.prem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.prem-grid .item .bn { aspect-ratio: 1 / 1; max-width: 100%; }
@media (min-width: 768px)  { .prem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .prem-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* 이미지가 있는 배너와 빈 자리의 높이를 같게 맞춘다 —
   다르면 같은 줄에서 아래 설명 줄이 서로 어긋나 보인다. */
.prem-grid .item .bn.has-img { aspect-ratio: 1 / 1; }
.prem-grid .item .bn.has-img img { width: 100%; height: 100%; object-fit: cover; }
.cert-grid .bn.has-img { aspect-ratio: 462 / 600; }
.cert-grid .bn.has-img img { width: 100%; height: 100%; object-fit: cover; }
/* 배너 아래 업소 이름 줄. 글자만 두면 누를 높이가 19px 라 휴대폰에서 잘 안 눌린다.
   위아래로 여백을 줘 손가락이 닿는 높이를 확보하되, 바깥 여백은 음수로 되돌려
   칸 사이 간격은 그대로 유지한다. */
.cap { display: flex; align-items: center; gap: 5px; padding-top: 7px; font-size: 13px; color: var(--text-2); min-width: 0; margin: 0; }
.cap .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 7px 0; margin: -7px 0; }
.cap .area { color: var(--point-dark); font-weight: 700; flex: none; }
.cap .cnt { color: var(--muted); font-size: 11px; font-weight: 600; flex: none; }
@media (max-width: 575px) { .cert-grid, .prem-grid { gap: 12px 8px; } .cap { font-size: 12px; } }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.tab { border: 1px solid var(--line); background: #fff; color: var(--text-2); padding: 5px 12px; font-size: 13px; cursor: pointer; }
.tab:hover { border-color: var(--ink); color: var(--ink); }
/* 지금 보고 있는 분류. 이 탭들은 눌러서 '이동'하는 링크이므로 aria-current="page" 가 맞다.
   예전에 쓰던 aria-selected 는 role="tab" 이 있는 진짜 탭에만 뜻이 있는 속성이라
   화면 낭독기에 현재 분류가 아예 전달되지 않았다. */
.tab[aria-current="page"] { background: var(--point); border-color: var(--point); color: #fff; font-weight: 600; }

/* ---------- 사이드바 위젯 ---------- */
.side { display: flex; flex-direction: column; gap: 30px; }
.w-title { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.w-title h3 { font-size: 15px; font-weight: 600; padding-bottom: 8px; border-bottom: 2px solid var(--ink); margin-bottom: -1px; }
/* 제목(h3)의 padding-bottom 8px 과 맞춘다 — 다르면 밑줄 기준이 어긋난다.
   본문 섹션과 마찬가지로 "+" 대신 글자로 보여 준다 (한 화면에 더보기 표현이 둘이면 어수선하다) */
/* 사이드바 위젯의 '전체보기' — 본문 섹션과 같은 방식 (글자는 HTML 에 있다) */
.w-title .plus {
  color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: -.01em;
  padding: 0 2px 8px; line-height: 1; white-space: nowrap; flex: none;
}
.w-title .plus::after { content: " \203A"; }
.w-title .plus:hover { color: var(--ink); }

.notice-list li { margin-bottom: 7px; line-height: 1.5; font-size: 14px; }
.notice-list a { display: block; padding-left: 13px; position: relative; }
.notice-list a::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: var(--point); transform: rotate(45deg); }
.notice-list .b { font-weight: 700; }
.notice-list .g { color: var(--point-dark); }

.login-box .ig { display: flex; border: 1px solid #d6d6d6; margin-bottom: 8px; }
.login-box .ig span { width: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); color: #888; border-right: 1px solid #d6d6d6; }
.login-box .ig input { flex: 1; min-width: 0; border: 0; height: 32px; padding: 0 8px; font: inherit; }
.login-box .btn-login { width: 100%; height: 36px; border: 0; background: var(--point); color: #fff; cursor: pointer; margin-top: 2px; letter-spacing: .04em; }
.login-box .btn-login:hover { background: var(--point-dark); }
/* 회원가입·정보찾기·로그아웃. 12px 글자만 두면 누를 높이가 16px 밖에 안 된다 */
.login-box .row { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; font-size: 12px; color: var(--muted); }
.login-box .row a { display: inline-block; padding: 6px 2px; }
.login-box .row label { display: flex; gap: 4px; align-items: center; }
.login-box .row a + a::before { content: "|"; margin: 0 8px; color: #ccc; }
.btn-fav { width: 100%; height: 36px; border: 1px solid var(--point); background: #fff; color: var(--point-dark); cursor: pointer; margin-top: 10px; font-weight: 600; }
.btn-fav:hover { background: var(--point); color: #fff; }
.fav-list { border: 1px solid var(--line); border-top: 0; }
.fav-list a { display: block; padding: 8px 12px; border-top: 1px solid var(--line-2); font-size: 13px; }

.post-list li a { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 14px; }
.post-list .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-list .d { color: var(--muted); font-size: 12px; flex: none; }
.post-list .n { flex: none; width: 14px; height: 14px; background: var(--point); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.post-list .i { flex: none; width: 14px; color: #c5c5c5; font-size: 5px; text-align: center; }
.post-list .empty { color: var(--muted); padding: 6px 0; font-size: 13px; }
.post-list b.t { font-weight: 700; }

.stat-list li { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14px; }
.stat-list i { color: var(--point); width: 16px; margin-right: 5px; font-size: 11px; }

/* 가운데 정렬하지 않는다 — 여기 들어가는 글은 서너 줄짜리 문단이라
   가운데로 모으면 줄 시작점이 들쭉날쭉해 읽기 어렵고 촌스러워 보인다.
   (아래 500줄대에 같은 .about-box 선언이 또 있는데, 거기서는 정렬을 건드리지 않아
    예전에는 이 값이 그대로 살아남아 메인 소개 문단이 통째로 가운데 정렬됐다) */
.about-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; color: var(--text-2); font-size: 13px; line-height: 1.85; }
.about-box a { color: var(--point-dark); font-weight: 600; }
.sns { display: flex; justify-content: center; gap: 8px; }
/* 공유 버튼은 각 서비스의 브랜드 색으로 — 아이콘만 봐도 어디로 공유되는지 알 수 있게 */
.sns a { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; border: 0; font-size: 15px; transition: transform .12s, filter .12s; }
.sns a:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); }
.sns [data-share-to="naver"] { background: #03c75a; }
.sns [data-share-to="facebook"] { background: #1877f2; }
.sns [data-share-to="x"] { background: #000; }
.sns [data-share-to="band"] { background: #00c73c; }
.sns [data-share-to="copy"] { background: #6b7280; }
.sns .nv { font-weight: 900; font-size: 15px; }
.sns .bd { font-size: 8px; font-weight: 800; letter-spacing: -.02em; }

/* ---------- 메인 소개 (H1) ---------- */
.intro-h1 { font-size: 13px; font-weight: 400; color: var(--muted); margin: 0 0 16px; }
.intro-h1 strong { color: var(--ink); font-weight: 700; }

/* ---------- 본문 콘텐츠 ---------- */
.breadcrumb { font-size: 12px; color: var(--muted); padding-bottom: 8px; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { margin: 0 5px; }
.page-lead { background: var(--bg-soft); border-left: 3px solid var(--point); padding: 14px 16px; margin-bottom: 26px; color: var(--text-2); font-size: 14px; }
.page-lead p:last-child { margin: 0; }

.prose { font-size: 15px; line-height: 1.85; color: var(--text); }

/* 업소·글 본문에 에디터가 붙여 놓은 인라인 스타일 길들이기.
   ─ 왜 필요한가 ─
   업소가 다른 곳에서 복사해 붙이면 형광 핑크(#ef007c)·보라(#7820b9) 글씨,
   14pt·18.6667px 처럼 제멋대로인 크기, 가운데 정렬, 밑줄이 그대로 따라 들어온다.
   그 한 덩어리 때문에 초록·흰색으로 맞춘 나머지 화면이 통째로 싸구려로 보인다.
   글자 자체는 건드리지 않고 '색·크기·정렬'만 우리 기준으로 되돌린다.
   표·강조(strong/em)는 그대로 두어 글쓴이의 뜻은 남긴다. */
#bo_v_con [style*="color"],
#bo_v_con font[color] { color: inherit !important; }
#bo_v_con [style*="font-size"] { font-size: inherit !important; }
#bo_v_con [style*="background"] { background: transparent !important; }
#bo_v_con [align] { text-align: inherit !important; }
#bo_v_con u { text-decoration: none; }
#bo_v_con font[size] { font-size: inherit !important; }
.prose h2 { font-size: 20px; font-weight: 800; margin: 36px 0 12px; padding-left: 12px; border-left: 3px solid var(--ink); scroll-margin-top: 70px; color: var(--ink); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; color: var(--point-dark); scroll-margin-top: 70px; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose ul { list-style: disc; }
.prose ul li::marker { color: var(--point); }
.prose li { margin-bottom: 4px; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--point); text-underline-offset: 3px; }
.prose a:hover { color: var(--point-dark); }
.prose strong { color: var(--ink); }

/* 글 끝의 '근거 자료' — 법령·기관 원문으로 나가는 링크 목록.
   본문 안 링크와 구별되게 점 대신 화살표를 주고, 기관 이름은 작게 아래에 붙인다.
   바깥으로 나가는 링크이므로 새 창에서 열린다(읽던 글이 그대로 남는다). */
.prose ul.sources { list-style: none; padding-left: 0; margin: 0 0 1.2em; }
.prose ul.sources li { margin-bottom: 12px; padding-left: 18px; position: relative; line-height: 1.6; }
.prose ul.sources li::before { content: "↗"; position: absolute; left: 0; top: 1px; color: var(--point); font-size: 13px; }
.prose ul.sources .org { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.table-wrap { overflow-x: auto; margin: 0 0 1.4em; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; border-top: 2px solid var(--ink); }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--bg-soft); font-weight: 700; white-space: nowrap; }

.callout { border: 1px solid var(--line); border-left: 3px solid var(--point); background: var(--bg-soft); padding: 12px 14px; margin: 0 0 1.4em; font-size: 14px; }
.callout.dark { border: 0; border-left: 3px solid var(--point); background: var(--deep); color: #d5e3da; }
.callout.dark strong { color: #fff; }
.callout.dark a { color: #fff; }
.callout.gray { border-left-color: #999; background: var(--bg-soft); }
.callout p:last-child { margin: 0; }

.toc { border: 1px solid var(--line); padding: 14px 18px; margin-bottom: 26px; font-size: 14px; }
.toc strong { display: block; margin-bottom: 6px; }
.toc ol { margin: 0; padding-left: 1.3em; }
/* 목차 — 줄 사이가 붙어 있으면 휴대폰에서 다른 항목이 눌린다. 누를 높이를 준다. */
.toc a { color: var(--text-2); display: inline-block; padding: 6px 0; line-height: 1.5; }
.toc a:hover { color: var(--point-dark); }
.toc li { margin-bottom: 2px; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767px) { .card-grid { grid-template-columns: minmax(0, 1fr); } }
.card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px 17px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
/* 카드 위쪽 포인트 선 — 올릴 때만 드러난다 */
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--point), var(--point-soft)); opacity: 0; transition: opacity .15s; }
a.card:hover { border-color: #cfcfcf; box-shadow: 0 6px 18px rgba(0, 0, 0, .07); transform: translateY(-2px); color: inherit; }
a.card:hover::before { opacity: 1; }
.card .tag { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--point-dark); background: #f1faf4; border: 1px solid #cdeadb; border-radius: 999px; padding: 3px 9px; }
.card h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; margin: 9px 0 6px; }
.card p { font-size: 13px; line-height: 1.65; color: var(--text-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* margin-top:auto 로 카드 바닥에 붙인다 — 카드마다 글 길이가 달라도 아래 줄이 나란히 맞는다.
   (예전에는 이 선언이 두 줄로 나뉘어 뒤쪽 margin-top:11px 이 auto 를 덮는 바람에
    메인 야경명소 카드 3장의 위치 줄 높이가 제각각이었다) */
.card .card-foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.card .card-foot i { color: var(--point); margin-right: 3px; }

/* ---------- 게시판 ---------- */
.board-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.board-tools .tabs { margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 38px; padding: 0 16px; background: var(--point); color: #fff; border: 0; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
.btn:hover { background: var(--point-dark); color: #fff; }
/* 누른 뒤 상태 — 글을 올리는 화면들이 두 번 눌리지 않게 버튼을 잠그는데,
   겉모습이 그대로면 눌린 건지 알 수 없어 사람들이 또 누른다. */
.btn:disabled, .btn[disabled], button:disabled, input:disabled, .btn_submit:disabled {
  opacity: .5; cursor: not-allowed; filter: grayscale(.3);
}
.board { min-width: 0; }
.board th { text-align: center; }
.board td.num, .board td.meta { text-align: center; color: var(--muted); white-space: nowrap; font-size: 13px; }
.board td.num { width: 60px; }
.board td.meta { width: 90px; }
.board .notice td { background: #faf8f3; }
.board .notice .num { color: var(--point-dark); font-weight: 700; }
.board .cat { color: var(--point-dark); font-size: 12px; margin-right: 4px; }
.board .empty { text-align: center; padding: 50px 0; color: var(--muted); }
/* ── 좁은 화면 목록표 ──
   글 목록은 칸이 많아(번호·분류·제목·글쓴이·날짜·조회) 휴대폰에서 제목 칸이 뭉개진다.
   좁아지면 곁가지 칸을 숨기고, 그 내용을 제목 아래 한 줄(.row-meta)로 내려 준다.

   ※ 숨기는 기준(.hide-xs)과 대신 보여 주는 줄(.row-meta)의 기준은 반드시 같아야 한다.
     예전에는 보조 줄에 .m-only(991px 이하)를 썼는데 칸은 575px 이하에서 숨겨서,
     그 사이 폭(태블릿·가로로 든 휴대폰)에서 글쓴이·날짜·조회가 두 번씩 나왔다. */
.board .row-meta { display: none; }
@media (max-width: 767px) {
  .board .hide-xs { display: none; }
  .board .row-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); font-weight: 400; }
  /* 칸을 줄였으니 표를 억지로 넓히지 않는다 — 가로 스크롤 없이 화면에 들어온다 */
  .board { min-width: 0; }
  .table-wrap > table.board { min-width: 0; }
  .board td.num, .board th.num { width: 42px; font-size: 12px; }
  .board td, .board th { padding: 10px 6px; }
  .board td.subj { white-space: normal; word-break: keep-all; line-height: 1.45; }
  .board td.subj a { font-size: 14px; }
}

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 2px solid var(--ink); }
.faq summary { cursor: pointer; padding: 13px 36px 13px 30px; font-weight: 600; list-style: none; position: relative; font-size: 15px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; position: absolute; left: 6px; color: var(--point); font-weight: 800; font-family: var(--serif); }
.faq summary::after { content: "+"; position: absolute; right: 8px; color: #999; font-size: 18px; font-weight: 300; top: 10px; }
.faq details[open] summary::after { content: "−"; }
.faq .answer { padding: 0 12px 15px 30px; color: var(--text-2); font-size: 14px; }
.faq .answer p:last-child { margin: 0; }

/* ---------- Footer ---------- */
.ft { margin-top: 24px; background: var(--deep); color: #9db0a4; }
.ft-links { border-bottom: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.ft-links .container { display: flex; flex-wrap: wrap; gap: 4px 0; padding-block: 14px; }
.ft-links a { color: #cfe0d6; }
.ft-links a:hover { color: var(--point-soft); }
.ft-links a + a::before { content: "|"; margin: 0 10px; color: rgba(255,255,255,.22); }
.ft-info { padding-block: 24px 34px; font-size: 12px; line-height: 1.9; }
.ft-info p { margin: 0; }
.ft-info .row span + span::before { content: "·"; margin: 0 7px; color: rgba(255,255,255,.28); }
.ft-info .notice { margin: 12px 0; color: #8ba296; }
.ft-info .copy { margin-top: 12px; color: #86a093; }
.ft-info .copy strong { color: #dceae3; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.badge-19 { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #888; color: #ccc; font-size: 9px; font-weight: 800; margin-right: 6px; vertical-align: middle; }

/* ---------- 모바일 드로어 ---------- */
.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer .dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.drawer .panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(300px, 85vw); background: #fff; overflow-y: auto; }
.drawer .panel-hd { background: var(--point); color: #fff; padding: 16px; display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.03em; }
.drawer .panel-hd button { background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer; }
.drawer .panel-body { padding: 8px 16px 16px; }
.drawer .menu a { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line-2); font-size: 15px; font-weight: 600; }
.drawer .menu i { width: 20px; color: var(--point); text-align: center; }

/* ==========================================================
   추가 기능
   ========================================================== */

/* ---------- 제밤 로고 ---------- */
.logo-name { font-family: var(--display); font-size: 33px; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--ink); white-space: nowrap; }
.logo-name b { color: var(--point); }
/* 로고: [달] 제주의 밤 | 제밤 / JEJU NIGHT — 아래 줄에 제주도 유흥 공식 커뮤니티 제밤 */
.logo-sub { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding-left: 11px; margin-left: 2px; border-left: 1px solid var(--line); line-height: 1; }
.logo-sub em { font-style: normal; font-family: var(--display); font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.logo-sub small { font-family: "Pretendard", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .3em; color: var(--point-dark); }
.logo-tag b { color: var(--point-dark); font-weight: 700; }
.intro-box h1 .h1-sub { display: block; font-family: "Pretendard", sans-serif; font-size: 14px; font-weight: 500; color: var(--muted); margin-top: 6px; letter-spacing: 0; }
.drawer .panel-hd small { font-family: "Pretendard", sans-serif; font-size: 11px; font-weight: 500; color: var(--point-soft); margin-left: 6px; }
.age-box .slogan { font-family: var(--display); font-weight: 700; color: var(--point-dark); font-size: 13px; letter-spacing: .04em; margin-bottom: 6px; }
@media (max-width: 991px) {
  .logo-name { font-size: 22px; }
  .logo-sub { padding-left: 8px; gap: 2px; }
  .logo-sub em { font-size: 11px; }
  .logo-sub small { font-size: 7px; letter-spacing: .22em; }
}

/* ---------- 로고 뱃지 ---------- */
.logo-badge { font-family: "Pretendard", sans-serif; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--point-dark); border: 1px solid var(--point); padding: 3px 6px; margin-left: 2px; align-self: center; }
@media (max-width: 991px) { .logo-badge { font-size: 9px; padding: 2px 4px; } }

/* ---------- PC 하위 메뉴 ---------- */
.gnb .menu li { position: relative; }
.gnb .sub { display: none; position: absolute; top: 54px; left: 50%; transform: translateX(-50%); min-width: 190px; background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--point); box-shadow: 0 10px 24px rgba(0, 0, 0, .1); padding: 6px 0; z-index: 95; }
.gnb .menu li:hover > .sub, .gnb .menu li:focus-within > .sub { display: block; }
.gnb .sub li { flex: none; }
.gnb .sub a { display: block; height: auto; padding: 9px 18px; font-size: 14px; font-weight: 500; color: var(--text); text-align: left; white-space: nowrap; }
.gnb .sub a::after { display: none; }
.gnb .sub a:hover { background: var(--bg-soft); color: var(--point-dark); }

/* 드로어 하위 링크 */
.drawer .sub-links { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 2px 4px 12px 36px; border-bottom: 1px solid var(--line-2); margin-top: -1px; }
.drawer .sub-links a { font-size: 13px; color: var(--text-2); }

/* ---------- 사이드 카테고리 ---------- */
.cat-list { border: 1px solid var(--line); }
.cat-list li + li { border-top: 1px solid var(--line-2); }
.cat-list a { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 14px; }
.cat-list a::after { content: "\203A"; color: #bbb; }
.cat-list a:hover, .cat-list a[aria-current="page"] { background: var(--bg-soft); color: var(--ink); font-weight: 600; }
.cat-list a[aria-current="page"]::after { color: var(--point); }

/* ---------- 지역·업종 선택 바 ---------- */
.select-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; background: var(--bg-soft); border: 1px solid var(--line-2); margin-bottom: 16px; }
.select-bar select, .select-bar input { height: 36px; border: 1px solid #d6d6d6; background: #fff; font: inherit; font-size: 13px; padding: 0 10px; color: var(--text); }
.select-bar select { min-width: 150px; }
.select-bar form { display: flex; flex: 1; min-width: 200px; }
.select-bar form input { flex: 1; min-width: 0; border-right: 0; }
.select-bar form button { height: 36px; padding: 0 14px; border: 0; background: var(--point); color: #fff; cursor: pointer; font-size: 13px; }
.select-bar form button:hover { background: var(--point); }
.tab .count { font-size: 11px; margin-left: 3px; opacity: .7; }

/* ---------- 업소 목록표 ---------- */
.biz-table td { vertical-align: middle; }
.biz-table .thumb { width: 90px; }
.biz-table .thumb span { display: block; width: 76px; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #f1f0ec, #e2e1dc); position: relative; }
.biz-table .thumb span::after { content: "\f03e"; font-family: "Font Awesome 6 Free"; font-weight: 400; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #bbb; }
.biz-table .thumb img { width: 76px; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
@media (max-width: 767px) { .biz-table .thumb img { width: 56px; } }
.biz-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 대표사진도 올린 비율 그대로 */
.biz-photo.has-img { aspect-ratio: auto; display: block; background: none; }
.biz-photo.has-img img { position: static; width: 100%; height: auto; object-fit: initial; display: block; }
.gallery img { width: 100%; height: auto; display: block; }
.tour .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour .img b { z-index: 1; }
.biz-table .name { width: 180px; font-size: 13px; color: var(--point-dark); font-weight: 600; }
.biz-table .subj a { font-weight: 600; }
.biz-table .subj small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; font-weight: 400; }
.biz-table .upd { width: 80px; text-align: center; color: var(--muted); font-size: 13px; white-space: nowrap; }
.biz-table .cm { color: var(--point-dark); font-size: 12px; margin-left: 4px; }
@media (max-width: 767px) { .biz-table .name, .biz-table .upd { display: none; } .biz-table .thumb { width: 70px; } .biz-table .thumb span { width: 56px; } }

/* ---------- 업소 상세 ---------- */
.biz-head { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
@media (max-width: 767px) { .biz-head { grid-template-columns: minmax(0, 1fr); } }
.biz-photo { aspect-ratio: 1 / 1; max-width: 100%; background: linear-gradient(135deg, #f1f0ec, #e2e1dc); position: relative; color: #999; display: flex; align-items: center; justify-content: center; font-size: 13px; text-align: center; }
.biz-photo .lv { position: absolute; top: 10px; left: 10px; background: var(--point); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 3px 8px; }
.biz-title { font-size: 22px; font-weight: 800; line-height: 1.35; margin-bottom: 8px; }
.biz-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.biz-meta .type { color: #fff; background: var(--point-dark); padding: 1px 8px; font-size: 12px; }
.biz-meta .ok { color: var(--point-dark); font-weight: 600; }
.biz-info { width: 100%; min-width: 0; border-top: 2px solid var(--ink); font-size: 14px; margin-bottom: 14px; }
.biz-info th { width: 100px; background: var(--bg-soft); font-weight: 600; }
/* 업소 정보표 안의 링크 — 특히 전화번호는 휴대폰에서 바로 거는 자리라 넉넉해야 한다 */
.biz-info td a { font-weight: 700; display: inline-block; padding: 7px 0; margin: -7px 0; }
.biz-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.line { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.btn.line:hover { background: var(--point); color: #fff; border-color: var(--point); }
.btn.accent { background: var(--point); }
.btn.accent:hover { background: var(--point-dark); }
.btn[aria-pressed="true"] { background: var(--point); border-color: var(--point); color: #fff; }
.biz-tip { margin-top: 12px; font-size: 13px; color: var(--text-2); background: #faf8f3; border: 1px dashed var(--point-soft); padding: 10px 12px; }

.anchor-tabs { display: flex; border: 1px solid var(--line); margin-bottom: 22px; position: sticky; top: 54px; background: #fff; z-index: 10; }
@media (max-width: 991px) { .anchor-tabs { top: 0; } }
.anchor-tabs a { flex: 1; text-align: center; padding: 12px 6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.anchor-tabs a + a { border-left: 1px solid var(--line); }
.anchor-tabs a:hover, .anchor-tabs a.on { background: var(--point); color: #fff; }
.biz-section { scroll-margin-top: 120px; margin-bottom: 36px; }
/* 상세정보 사진: 한 장씩 크게, 올린 비율 그대로 */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 1.4em; }
.gallery span { aspect-ratio: 4 / 3; max-width: 100%; background: linear-gradient(135deg, #f1f0ec, #e2e1dc); display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 12px; }

/* ---------- 댓글 ---------- */
.comments { border-top: 2px solid var(--ink); }
.comment-empty { padding: 30px 0; text-align: center; color: var(--muted); border-bottom: 1px solid var(--line); }
.comment-form { margin-top: 14px; border: 1px solid var(--line); }
.comment-form textarea { width: 100%; min-height: 90px; border: 0; padding: 12px; font: inherit; resize: vertical; display: block; }
.comment-form .bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--line-2); background: var(--bg-soft); font-size: 12px; color: var(--muted); }

/* ---------- 베스트 위젯 ---------- */
.best-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
@media (max-width: 767px) { .best-grid { grid-template-columns: minmax(0, 1fr); } }
.best { border: 1px solid var(--line); }
.best h3 { font-size: 14px; font-weight: 700; padding: 10px 14px; background: var(--point); color: #fff; display: flex; justify-content: space-between; }
.best h3 span { color: var(--point-soft); font-weight: 500; font-size: 12px; }
.best ol { list-style: none; margin: 0; padding: 6px 0; counter-reset: b; }
.best li { counter-increment: b; }
.best li a { display: flex; gap: 10px; align-items: center; padding: 6px 14px; font-size: 14px; }
.best li a::before { content: counter(b); flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--bg-soft); color: var(--text-2); }
.best li:nth-child(-n+3) a::before { background: var(--point); color: #fff; }
.best li .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.best li .d { color: var(--muted); font-size: 12px; flex: none; }

/* ---------- 게시판 추가 칸 ---------- */
.board td.cnt { width: 56px; text-align: center; color: var(--muted); font-size: 13px; }
.board td.biz { width: 120px; font-size: 13px; color: var(--point-dark); font-weight: 600; }
.board td.area { width: 100px; font-size: 13px; color: var(--text-2); }
.board .cm { color: var(--point-dark); font-size: 12px; margin-left: 4px; }
/* 페이지 번호 모양은 아래 '.pg_wrap / .pg_page' 한 곳에서만 정한다.
   목록 스킨들이 그누보드의 get_paging() 출력을 그대로 쓰기 때문에
   여기 있던 .pagination 규칙은 어느 화면에도 붙지 않는 죽은 코드였다. */

/* ---------- 글 보기 ---------- */
.view-head { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 16px 4px 14px; margin-bottom: 24px; }
.view-head .cat { font-size: 12px; color: var(--point-dark); font-weight: 700; }
.view-head h1 { font-size: 22px; font-weight: 800; margin: 4px 0 10px; }
.view-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--muted); }
/* 글쓴이 등 머리말 줄의 링크도 손가락이 닿을 높이를 준다 */
.view-head .meta a { display: inline-block; padding: 6px 0; margin: -6px 0; }
.view-actions { display: flex; justify-content: center; gap: 8px; margin: 30px 0; }
.view-nav { border-top: 1px solid var(--ink); margin: 24px 0 14px; }
.view-nav a { display: flex; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.view-nav a span { flex: none; width: 50px; color: var(--muted); font-size: 13px; }
.view-foot { display: flex; justify-content: flex-end; gap: 6px; }

/* ---------- 문의 폼 ---------- */
.form-table { width: 100%; min-width: 0; border-top: 2px solid var(--ink); }
.form-table th { width: 130px; background: var(--bg-soft); font-weight: 600; vertical-align: middle; }
.form-table td input[type="text"], .form-table td input[type="tel"], .form-table td input[type="email"], .form-table td select, .form-table td textarea { width: 100%; border: 1px solid #d6d6d6; padding: 9px 10px; font: inherit; font-size: 14px; background: #fff; }
.form-table td textarea { min-height: 180px; resize: vertical; }
.form-table .req { color: var(--point-dark); margin-left: 2px; }
@media (max-width: 575px) { .form-table th, .form-table td { display: block; width: 100%; } .form-table th { border-bottom: 0; padding-bottom: 4px; } }
.agree { border: 1px solid var(--line); padding: 12px 14px; font-size: 13px; color: var(--text-2); margin: 14px 0; background: #fcfcfb; }
.agree label { display: flex; gap: 6px; align-items: center; margin-top: 8px; color: var(--text); font-weight: 600; }
.form-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }

/* ---------- 고객센터 허브 ---------- */
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 30px; }
@media (max-width: 767px) { .hub-grid { grid-template-columns: minmax(0, 1fr); } }
.hub { border: 1px solid var(--line); }
.hub .w-title { margin: 0; padding: 12px 14px 0; }
.hub ul { padding: 8px 14px 12px; }
.hub li a { display: flex; gap: 10px; padding: 5px 0; font-size: 14px; }
.hub li .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub li .d { color: var(--muted); font-size: 12px; flex: none; }

/* ---------- 관광명소 ---------- */
.tour-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; margin-bottom: 30px; }
@media (max-width: 575px) { .tour-grid { grid-template-columns: minmax(0, 1fr); } }
.tour { border: 1px solid var(--line); display: flex; flex-direction: column; }
.tour .img { aspect-ratio: 16 / 10; max-width: 100%; background: linear-gradient(135deg, #dbeee3, #f2f9f5); color: #8aa596; display: flex; align-items: flex-end; padding: 12px; font-size: 12px; position: relative; }
.tour .img b { position: absolute; top: 10px; left: 10px; background: var(--point); color: #fff; font-size: 10px; letter-spacing: .06em; padding: 3px 7px; }
.tour .body { padding: 14px 16px 16px; }
.tour h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.tour .loc { font-size: 12px; color: var(--point-dark); font-weight: 600; margin-bottom: 8px; }
.tour p { font-size: 14px; color: var(--text-2); margin: 0; }

/* ---------- 메인 제목 (검색엔진용 h1 한 줄) ---------- */
.home-head { padding: 4px 0 18px; }
.home-head h1 { font-family: var(--display); font-size: 23px; font-weight: 800; line-height: 1.4; letter-spacing: -.04em; margin: 0; }
.home-head h1 b { color: var(--point-dark); font-weight: 700; }
.home-head p { font-size: 13px; color: var(--muted); margin: 5px 0 0; }
@media (max-width: 575px) { .home-head h1 { font-size: 19px; } }

/* ---------- 사이트 소개 (메인 하단) ----------
   상자 자체의 모양은 위쪽 .about-box 한 곳에서만 정한다. 여기서는 안쪽 요소만 손댄다. */
.about-box p { font-size: 13.5px; line-height: 1.85; color: var(--text-2); margin: 0 0 10px; }
.about-box p:last-child { margin-bottom: 0; }
.about-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px !important; }
.about-links a { font-size: 12.5px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 6px 14px; }
.about-links a:hover { border-color: var(--point); color: var(--point-dark); }

/* ---------- 키워드 글 ---------- */
.summary-box { background: var(--deep); color: #d5e3da; padding: 16px 20px; margin-bottom: 24px; font-size: 14px; line-height: 1.8; }
.summary-box strong { color: var(--point-soft); display: block; margin-bottom: 4px; letter-spacing: .04em; }
.summary-box ul { margin: 0; padding-left: 1.1em; list-style: disc; }
.summary-box li::marker { color: var(--point); }
.related { margin-top: 40px; }
/* 함께 보면 좋은 글 목록 — 글자만 두면 누를 높이가 16px 라 휴대폰에서 옆 줄이 눌린다 */
.related li a, .hub li a { display: inline-block; padding: 7px 0; line-height: 1.5; }
.article-cta { margin-top: 24px; }
.guide-cards .card h3 { font-size: 15px; }
.guide-cards .card p { font-size: 13px; }

/* ---------- 404 ---------- */
.nf { text-align: center; padding: 40px 0; }
.nf .code { font-family: var(--serif); font-size: 72px; font-weight: 700; line-height: 1; color: var(--ink); }
.nf .code span { color: var(--point); }
.nf p { color: var(--text-2); margin: 14px 0 22px; }

/* ---------- 19세 확인 ---------- */
.age-gate { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .88); display: flex; align-items: center; justify-content: center; padding: 16px; }
.age-box { width: 100%; max-width: 400px; background: #fff; text-align: center; border-top: 4px solid var(--point); padding: 32px 24px 24px; }
.age-box .big19 { width: 70px; height: 70px; margin: 0 auto 16px; border-radius: 50%; border: 2px solid var(--ink); color: var(--ink); font-family: var(--serif); font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.age-box h2 { font-size: 18px; margin-bottom: 8px; }
.age-box p { color: var(--text-2); font-size: 13px; }
.age-actions { display: flex; gap: 8px; margin-top: 18px; }
.age-actions button { flex: 1; height: 44px; cursor: pointer; font-weight: 600; border: 1px solid var(--ink); }
.age-actions .yes { background: var(--point); color: #fff; }
.age-actions .no { background: #fff; color: var(--ink); }

.to-top { position: fixed; right: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; background: var(--point); color: #fff; border: 0; cursor: pointer; z-index: 80; }
.to-top:hover { background: var(--point-dark); }


/* ==========================================================
   그누보드 연동 보정 (gnuboard.css 전역 규칙 되돌리기 + 스킨 톤 맞춤)
   ========================================================== */
html { overflow-y: auto; }
body { font-size: 14px; font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; }
/* 그누보드 기본 CSS 가 입력 요소에 제 글꼴을 물리므로 되돌린다.
   h1~h6 은 여기에 넣으면 안 된다 — 위쪽 51줄의 font-family: var(--display) 를 덮어버려서
   제목 글꼴 변수가 통째로 무력해진다(예전에 그랬다). 제목은 51줄이 책임진다. */
input, button, select, textarea { font-family: inherit; }
h5, h6 { font-family: var(--display); }
p { word-break: keep-all; }
#hd, #wrapper, #ft { min-width: 0; }
/* 그누보드 기본 CSS 가 1200px 로 고정해 좁은 화면에서 가로 스크롤을 만든다 */
#hd_pop, #hd_wrapper, #gnb .gnb_wrap, #container_wr, #ft_wr { width: auto; max-width: 100%; }
#container { position: static; float: none; width: auto; min-height: 0; margin: 0; height: auto !important; font-size: inherit; }
#container:after { display: none; }
#container_title { display: none; }
#hd_login_msg { display: none; }

.page-title { margin-bottom: 18px; }
.page-title h1 { font-size: 18px; }
/* 내용관리 페이지 */
.jb-ctt { margin: 0; padding: 0; background: none; }
.jb-ctt .prose { line-height: 1.8; }
.jb-ctt .prose ul { padding-left: 1.2em; list-style: disc; }
.jb-ctt-admin { margin-top: 20px; text-align: right; }
/* 제휴·광고 안내: 연락처 + 비회원 문의 폼 */
.jb-partner { margin-top: 34px; scroll-margin-top: 70px; }
.jb-partner-contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
@media (max-width: 767px) { .jb-partner-contacts { grid-template-columns: minmax(0, 1fr); } }
.jb-contact { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); }
.jb-contact i { font-size: 22px; color: var(--point-dark); width: 26px; text-align: center; }
.jb-contact small { display: block; font-size: 12px; color: var(--muted); }
.jb-contact b { font-size: 16px; }
.jb-contact.is-tel { background: var(--point); color: #fff; border-color: var(--point); }
.jb-contact.is-tel i { color: var(--point-soft); }
.jb-contact.is-tel small { color: #bbb; }
a.jb-contact:hover { border-color: var(--point); }
.jb-partner-form { scroll-margin-top: 70px; }
.jb-partner-form textarea.frm_input { width: 100%; height: auto; padding: 8px 10px; line-height: 1.6; }
.jb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jb-privacy { background: var(--bg-soft); border: 1px solid var(--line-2); padding: 12px 14px; font-size: 13px; color: var(--text-2); }
.jb-privacy p { margin: 0 0 6px; }
.jb-privacy label { font-weight: 600; color: var(--ink); display: inline-flex; gap: 6px; align-items: center; }
/* 제휴 업소가 아직 없을 때: 빈 배너 자리를 늘어놓지 않고 모집 안내 한 줄만 (본문이 광고 자리에 밀리지 않게) */
.bn-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; border: 1px solid var(--line); border-left: 3px solid var(--point); border-radius: 10px; background: linear-gradient(90deg, #fbf8f1, #fff 60%); padding: 16px 20px; font-size: 13.5px; color: var(--text-2); text-decoration: none; margin-bottom: 26px; }
.bn-cta .bn-cta-t { display: flex; flex-direction: column; gap: 3px; }
.bn-cta strong { color: var(--ink); font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.bn-cta .go { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 999px; background: var(--point); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.bn-cta:hover { border-color: var(--point-soft); color: var(--text-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.bn-cta:hover .go { background: var(--point-dark); }
.bn-empty .ph strong { color: #9a8a6a; }
.bn-empty:hover { outline: 1px solid var(--point-soft); }
.post-list.empty { padding: 14px; border: 1px dashed var(--line); color: var(--muted); }
.post-list.empty a { color: var(--point-dark); font-weight: 600; margin-left: 6px; }

/* 로그인 후 박스 */
.member-box .mb-hello { margin: 4px 0 10px; font-size: 14px; }
.member-box .mb-grade { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: #fff; background: var(--point); padding: 1px 7px; vertical-align: middle; }
.member-box .mb-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); margin-bottom: 10px; }
.member-box .mb-quick li + li { border-left: 1px solid var(--line-2); }
.member-box .mb-quick a { display: block; text-align: center; padding: 8px 0; font-size: 12px; color: var(--text-2); }
.member-box .mb-quick b { display: block; font-size: 15px; color: var(--ink); }
.member-box .partner-quick { display: grid; gap: 6px; margin-bottom: 8px; }
.member-box .partner-quick a { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; text-decoration: none; }
.member-box .partner-quick a.btn-login { color: #fff; }
.member-box .row { justify-content: flex-end; gap: 0; }
.member-box .row a + a::before { content: "|"; margin: 0 8px; color: #ccc; }

/* ---------- 휴대폰에서 입력칸 글자 크기 ----------
   iOS 사파리는 글자가 16px 보다 작은 입력칸을 누르면 화면을 제멋대로 확대한다.
   로그인·검색·글쓰기에서 화면이 튀어 손님이 당황하고, 되돌리려면 손으로 축소해야 한다.
   (구글 순위와는 무관하다. 순전히 쓰기 편하라고 두는 규칙이다)

   넓은 화면에서는 그대로 두고 — 자동 확대가 일어나지 않으므로 —
   휴대폰·태블릿 폭에서만 16px 로 올린다. */
@media (max-width: 991px) {
  input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
  input[type="search"], input[type="number"], input[type="url"], input[type="date"],
  select, textarea, .frm_input, .full_input {
    font-size: 16px;
  }
  /* 아래는 더 구체적으로 크기를 정해 둔 곳들이라 따로 눌러 준다.
     (글자만 키우면 칸이 좁아 보이므로 높이도 함께 올린다) */
  .hd-search input, .m-search input,
  .login-box .ig input,
  .select-bar select, .select-bar input,
  .form-table td input[type="text"], .form-table td input[type="tel"],
  .form-table td input[type="email"], .form-table td select, .form-table td textarea {
    font-size: 16px;
  }
  .login-box .ig input { height: 40px; }
  .hd-search input { height: 40px; }
  .select-bar select, .select-bar input { height: 42px; }
}

/* 그누보드 스킨 버튼·입력칸 톤 */
.btn_submit, .btn_b02, a.btn_b02, button.btn_b02 { background: var(--point) !important; color: #fff !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; }
.btn_submit:hover, .btn_b02:hover { background: var(--point-dark) !important; border-color: var(--point-dark) !important; }
/* 취소·목록 버튼 — 그누보드 기본 글자색(#bababa)은 흰 바탕에서 1.9:1 이라 거의 안 보였다 */
.btn_b01, a.btn_b01, .btn_cancel, a.btn_cancel {
  border-radius: 0 !important; color: var(--text-2) !important; border: 1px solid var(--line) !important; background: #fff !important;
}
.btn_b01:hover, a.btn_b01:hover, .btn_cancel:hover, a.btn_cancel:hover { border-color: var(--ink) !important; color: var(--ink) !important; }

/* ---------- 페이지 번호 ----------
   그누보드 기본 모양은 회색 배경(#eee)에 회색 글자(#959595, 2.7:1)라 읽기 어렵고,
   처음·이전·다음·끝 버튼은 글자를 화면 밖으로 밀어내고(text-indent:-999px) 배경 GIF 를 쓰는데
   그 GIF 4개가 테마에 없다. 글이 쌓이면 '빈 회색 네모 4개'가 그대로 드러난다.
   그림 없이 글자(≪ ‹ › ≫)로 다시 그린다. */
.pg_wrap { clear: both; float: none; display: block; text-align: center; margin: 22px 0 6px; }
.pg { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pg_page, .pg_current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 9px; font-size: 13px; line-height: 1;
  border: 1px solid var(--line); background: #fff; color: var(--text-2);
  border-radius: 0; text-decoration: none;
}
.pg_page:hover { background: var(--bg-soft); border-color: var(--point); color: var(--point-dark); }
.pg_current { background: var(--point); border-color: var(--point); color: #fff; font-weight: 700; }
/* 처음·이전·다음·맨끝 단추.
   그누보드가 내보내는 글자("처음", "이전", "다음", "맨끝")를 그대로 보여 준다.
   ── 왜 글자를 숨기지 않는가 ──
   예전에는 font-size:0 으로 글자를 감추고 ::before 로 화살표(≪ ‹ › ≫)만 띄웠다.
   보기에는 깔끔했지만, 그것은 구글이 '숨긴 글자'로 규정한 기법 그대로다
   (스팸 정책 문서가 "font-size 를 0 으로 설정"을 직접 예시로 든다).
   게다가 구글은 링크에 적힌 글자로 그 링크가 무엇인지 판단하는데,
   글자를 감추면 "이전/다음"이라는 뜻도 함께 사라진다.
   배경 그림(btn_prev.gif 등)은 테마에 없으므로 걷어낸다. */
.pg_start, .pg_prev, .pg_end, .pg_next {
  text-indent: 0; overflow: visible; background-image: none !important; background-color: #fff;
  padding: 0 10px; border: 1px solid var(--line); font-size: 13px;
}

/* 화면낭독기 전용으로 감추는 글자는 '잘라내기(clip)' 방식을 쓴다.
   그누보드 기본 CSS 는 font-size:0 으로 감추는데, 그것은 구글 스팸 정책이
   '숨긴 글자'의 예시로 직접 드는 기법이다("font-size 를 0 으로 설정").
   뜻은 같지만 오해를 살 이유가 없으므로 표준 방식으로 바꾼다.
   (실제로 화면에 렌더링되는 것은 #hd_pop 뿐이라 그것만 손댄다) */
#hd_pop h2, #hd_h1, #hd_sch h3, #gnb > h2, #ft h1, #hd_login_msg {
  position: absolute !important; width: 1px; height: 1px;
  font-size: 12px !important; line-height: 1 !important;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* 필수 입력 표시 — 배경 그림(require.png)이 없어 404 가 났다. 오른쪽 위 점으로 대신한다 */
.required, textarea.required {
  background-image: none !important;
  border-right: 3px solid var(--point) !important;
}
/* 메뉴 화살표 배경 그림(gnb_bg2.gif)도 없다 — 쓰지 않는다 */
.gnb_1dli .bg { background-image: none !important; }
.frm_input, .full_input, textarea, select { border-radius: 0; }
/* ---------- 키보드 포커스 ----------
   마우스 없이 Tab 으로 다니는 사람에게 '지금 여기'를 보여 준다.
   :focus-visible 을 쓰므로 마우스로 눌렀을 때는 테두리가 생기지 않는다(그때는 거슬리기만 한다).
   색은 --point-soft(#b8e6c8) 가 아니라 --point-dark 를 쓴다 — 옅은 초록은 흰 바탕에서 1.4:1 이라
   테두리를 그려도 사실상 안 보였다. */
.frm_input:focus, textarea:focus, select:focus { outline: 2px solid var(--point-dark); outline-offset: 0; }
:where(a, button, summary, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--point-dark);
  outline-offset: 2px;
  border-radius: 2px;
}
/* 초록 바탕 위(상단 메뉴·버튼)에서는 초록 테두리가 묻히므로 흰색으로 */
.gnb :focus-visible, .m-gnb :focus-visible, .btn:focus-visible, .drawer .panel-hd :focus-visible,
.jbz-callbar:focus-visible, .to-top:focus-visible { outline-color: #fff; outline-offset: -3px; }
.sch_word { background: #faf3e3; color: var(--point-dark); }

/* default.css 의 a.btn(1.4em, line-height 35px)이 테마 .btn 보다 우선하므로 되돌림 */
a.btn { height: 34px; line-height: 1; font-size: 13px; font-weight: 600; text-decoration: none; }

/* 통합검색 (기본 검색 스킨 css 가 뒤에 로드되므로 body 로 우선순위 확보) */
body #sch_res_detail { background: var(--bg-soft); border: 1px solid var(--line-2); }
body #sch_res_detail select, body #sch_res_detail .frm_input { border-radius: 0; border-color: #d6d6d6; }
body .switch_field label:first-of-type, body .switch_field label:last-of-type { border-radius: 0; }
body .switch_field input:checked + label { background-color: var(--point); border-color: var(--point); }
.jbz-search { margin-bottom: 24px; }

/* 소셜 로그인 버튼 영역 */
.login-box #sns_login { margin-top: 10px; }

/* 로고 달 아이콘 — 초록 원 안에 흰 달 (색은 head.php 의 SVG 에 있음) */
.hd .logo-word svg circle { fill: var(--point); stroke: none; }