/* ====================================================================
   약관 · 정책 (기획팀 전달본 11벌, 2026-09-12)

   ★ 이 글은 <읽히려고> 있는 글이다. 라이선스가 요구해서 걸어 두는 것이
     아니라, 회원이 분쟁이 났을 때 실제로 찾아 읽는다. 그래서 셋을 준다 —
       ① 목차   조항이 스물두 개다. 없으면 건널 수가 없다
       ② 지금 위치  목차에서 짚어 준다. 안 짚으면 그냥 링크 묶음이다
       ③ 남은 양  얼마나 남았는지 안 보이면 중간에 그만 읽는다

   ⚠ 색은 <토큰만> 쓴다. 값을 박으면 사파이어·플래티넘을 갈 때 여기만 남는다.
   ==================================================================== */

.pol {
  --pol-w: 264px;              /* 목차 너비. 조항 제목이 두 줄 안에 들어가는 값 */
  position: relative;
  padding-bottom: 40px;
}

/* ── 읽은 만큼 ─────────────────────────────────────────────────────
   ⚠ fixed 다. 문서 안에 두면 스크롤과 함께 올라가 안 보인다. */
.pol__bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg,
      color-mix(in oklab, var(--primary) 55%, transparent),
      var(--primary));
  z-index: 40;
  transition: width .12s linear;
  pointer-events: none;
}

/* ── 머리 ──────────────────────────────────────────────────────── */
.pol__hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 24px;
  margin-bottom: 22px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  /* 왼쪽 위에서 은은하게. 카드마다 같은 그림자를 찍는 대신 머리에만 준다 */
  background:
    radial-gradient(620px 220px at 0% 0%,
      color-mix(in oklab, var(--primary) 16%, transparent), transparent 70%),
    var(--surface-2);
}

.pol__mark {
  flex: none;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  font-size: 24px;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 16%, var(--surface-3));
  border: 1px solid color-mix(in oklab, var(--primary) 40%, var(--line));
}

.pol__heroin { min-width: 0; }

.pol__eyebrow {
  margin: 0 0 4px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
}

.pol__title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--text);
  text-wrap: balance;
}

.pol__lead {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
  max-width: 62ch;
}

.pol__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pol__fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-3);
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.pol__fact i { color: var(--text-4); }

/* ── 목차 + 본문 ───────────────────────────────────────────────── */
.pol__grid {
  display: grid;
  grid-template-columns: var(--pol-w) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.pol__toc {
  position: sticky;
  top: 84px;                    /* 머리글에 안 가리는 자리 */
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 14px 10px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.pol__toctitle {
  margin: 0 0 8px 8px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-4);
}

.pol__toclist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.pol__tocitem {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 7px 8px;
  border-radius: calc(var(--r) - 4px);
  font-size: var(--fs-sm);
  color: var(--text-4);
  transition: background var(--t-bg), color var(--t-color);
}
.pol__tocitem b {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--text-5);
}
/* ⚠ 조항 제목이 길다. 자르지 않고 <줄바꿈>한다 — 잘리면 어느 조항인지 못 읽는다 */
.pol__tocitem span { line-height: 1.45; }

.pol__tocitem:hover { background: var(--surface-3); color: var(--text-2); }

.pol__tocitem.is-on {
  background: color-mix(in oklab, var(--primary) 18%, var(--surface-3));
  color: var(--text);
}
.pol__tocitem.is-on b { color: var(--primary); }

/* ── 본문 ──────────────────────────────────────────────────────── */
.pol__body { min-width: 0; }

.pol__sec {
  /*
    ★ 안쪽 여백을 넉넉히 (레드 2026-09-14 「왼쪽에 너무 쏠려 있다」).
      폭 제한을 풀고 나니 글이 판 왼쪽 모서리에 바싹 붙었다 —
      24px 은 좁은 판에서 정한 값이라 넓어진 판에는 모자란다.
    ⚠ 좁은 화면 규칙(@media 900)이 아래에서 다시 16px 로 줄인다. 모바일은 그대로다.
  */
  padding: 28px clamp(24px, 4vw, 56px);
  margin-bottom: 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
  /* ★ 목차로 뛰었을 때 제목이 머리글에 안 가리게 */
  scroll-margin-top: 84px;
}

.pol__sectitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sec);
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
}

.pol__secno {
  flex: none;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 14%, var(--surface-3));
  border: 1px solid color-mix(in oklab, var(--primary) 32%, var(--line));
}

/*
  약관 본문.

  ⚠⚠ 폭을 <묶지 않는다> (레드 2026-09-14 「글들이 중간에 짤린다 · 반쪽이 횡하게 남는다」).

    읽기 좋은 줄 길이는 65자쯤이라 72ch 로 묶어 두었는데, 이 화면은
    <문서>다. 판이 넓어질수록 글은 왼쪽 절반에만 고이고 오른쪽이 통째로 비어,
    문단이 중간에서 잘린 것처럼 읽혔다.

  ★ 대신 판(.pol__sec)이 줄 길이를 쥔다 — 목차가 오른쪽을 264px 가져가고
    바깥 컨테이너가 한계를 준다. 여기서 또 묶으면 두 번 좁아진다.
*/
.pol__prose {
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--text-2);
  /* max-width 는 두지 않는다 — 위 주석 참고 */
}
.pol__prose p { margin: 0 0 10px; }
.pol__prose p:last-child { margin-bottom: 0; }

.pol__prose h4 {
  margin: 18px 0 8px;
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--text);
}

.pol__prose ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
/* 점 대신 짧은 막대. 조항 안의 목록은 「나열」이지 「차례」가 아니다 */
.pol__prose li {
  position: relative;
  padding-left: 16px;
}
.pol__prose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .82em;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--primary) 70%, transparent);
}

.pol__prose a { color: var(--primary); text-decoration: underline; }

.pol__foot {
  display: flex;
  justify-content: center;
  padding: 8px 0 22px;
}

/* ── 함께 보기 ─────────────────────────────────────────────────── */
.pol__rel {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.pol__reltitle {
  margin: 0 0 12px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-4);
}

.pol__relgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.pol__relcard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-3);
  transition: background var(--t-bg), border-color var(--t-bg), color var(--t-color);
}
.pol__relcard i { color: var(--text-5); transition: color var(--t-color); }
.pol__relcard:hover {
  background: var(--surface-3);
  border-color: color-mix(in oklab, var(--primary) 50%, var(--line));
  color: var(--text);
}
.pol__relcard:hover i { color: var(--primary); }

/* ── 목차 화면 ─────────────────────────────────────────────────── */
.pol__idxgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.pol__idxcard {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  transition: background var(--t-bg), border-color var(--t-bg), transform var(--t-bg);
}
.pol__idxcard:hover {
  background: var(--surface-3);
  border-color: color-mix(in oklab, var(--primary) 50%, var(--line));
  transform: translateY(-2px);
}

/*
   번호는 <차례다>. 이용약관이 1번이고 나머지는 그것이 가리키는 순서라
   숫자에 뜻이 있다 — 뜻 없는 장식이면 안 붙인다.
*/
.pol__idxno {
  font-size: var(--fs-xs);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text-5);
}

.pol__idxcard > i:first-of-type {
  font-size: 17px;
  color: var(--primary);
}

.pol__idxname {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text);
}

.pol__idxgo { font-size: 12px; color: var(--text-5); }

/* ── 좁은 화면 ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /*
     ★ 목차가 <위로> 온다. 좁은 화면에서 옆에 붙이면 본문이 한 줄에
       스무 자도 안 들어간다.
     ⚠ sticky 를 풀어야 한다. 안 풀면 목차가 화면 위에 눌러앉아
       본문이 그 밑으로 지나간다.
  */
  .pol__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pol__toc {
    position: static;
    max-height: 280px;
  }
  .pol__hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 16px; }
  .pol__sec { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pol__bar { transition: none; }
  .pol__idxcard:hover { transform: none; }
}

/* ── 인쇄 ──────────────────────────────────────────────────────────
   회원이 「기록 보관을 위해 사본을 인쇄하거나 저장해 두시기 바랍니다」를
   실제로 하려 할 때. 목차·막대·함께보기는 종이에서 쓸모가 없다. */
@media print {
  .pol__bar, .pol__toc, .pol__rel, .pol__foot { display: none !important; }
  .pol__grid { grid-template-columns: minmax(0, 1fr); }
  .pol__sec, .pol__hero { border: none; background: none; padding: 0 0 14px; }
  .pol__prose { max-width: none; color: #000; }
}

/* ── 책임도박의 도구 안내 ──────────────────────────────────────────
   ★ 정책 전문 <위>에 온다. 회원이 지금 당장 쓸 수 있는 것이 먼저다 —
     전문을 먼저 깔면 도움이 필요한 사람이 스물몇 조항을 지나야 한다.
   ⚠ 첫 판(미성년자)은 색이 다르다. 나머지와 같은 모양이면 그냥 넷 중 하나가 된다. */
.pol__tools {
  display: grid;
  /*
    ★ <석 줄이 가로를 다 쓴다> (레드 2026-09-14 「가로 100%」).

    ⚠ 예전에는 repeat(auto-fit, minmax(280px, 1fr)) 이었다. 넓은 화면에서는
      칸이 여섯까지 잡히는데 카드는 셋뿐이라, 석 장이 <왼쪽 절반에만> 몰리고
      오른쪽이 통째로 비었다. 위의 미성년자 판은 grid-column:1/-1 이라 끝까지
      가 있어서 <어긋난 것이 더 눈에 띄었다>.

    ⚠ minmax(0,1fr) 이다. 1fr 만 쓰면 긴 글이 든 칸이 제 폭을 우겨 셋이 안 맞는다.
  */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

/* 좁은 화면 — 셋을 억지로 세우면 글이 세로로 길게 눕는다 */
@media (max-width: 1024px) {
  .pol__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pol__tools { grid-template-columns: minmax(0, 1fr); }
}

.pol__tool {
  padding: 18px 20px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.pol__tool.is-warn {
  grid-column: 1 / -1;
  border-color: color-mix(in oklab, var(--cta) 45%, var(--line));
  background:
    radial-gradient(520px 160px at 0% 0%,
      color-mix(in oklab, var(--cta) 12%, transparent), transparent 70%),
    var(--surface-2);
}
.pol__tool.is-warn h3 i { color: var(--cta); }

.pol__tool h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--text);
}
.pol__tool h3 i { color: var(--primary); }

.pol__tool p {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text-2);
}

.pol__tool ul {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}
.pol__tool li { position: relative; padding-left: 16px; }
.pol__tool li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .78em;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--primary) 70%, transparent);
}

.pol__toolfoot {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  color: var(--text-4);
}

/* 목차 화면은 읽는 글이 아니라 <고르는 화면>이다. 머리가 더 여유롭고,
   읽은 만큼 막대가 뜰 일도 없다. */
.pol--index .pol__hero { padding: 32px 24px; }
.pol--index .pol__bar { display: none; }

/* ── 표 ────────────────────────────────────────────────────────────
   ★★ 이 문서들의 표는 <값이 칸에 매여 있어야> 뜻이 산다.
     보너스 롤오버표에서 「카지노 무입금 보너스 / [50]x / 보너스 금액」 세 값이
     한 줄에 안 서면 어느 배수가 어느 보너스 것인지 알 수가 없다.
     실제로 문단으로 풀려 스물몇 줄로 늘어선 적이 있다 (레드 2026-09-13).

   ⚠ 넓은 표는 <제 그릇 안에서> 옆으로 굴린다. 화면 몸통이 옆으로 밀리면
     본문 전체가 어긋난다. */
.pol__tablewrap {
  overflow-x: auto;
  margin: 0 0 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  /* 굴릴 수 있다는 것을 오른쪽 끝 그늘로 알린다 */
  background: var(--surface-3);
}

.pol__tablewrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  /* 숫자 칸([35]x · [100]%)이 줄줄이라 자리를 고정한다 */
  font-variant-numeric: tabular-nums;
}

.pol__tablewrap th,
.pol__tablewrap td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid var(--line);
}

.pol__tablewrap th {
  white-space: nowrap;
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--text);
  background: color-mix(in oklab, var(--primary) 12%, var(--surface-3));
  border-bottom-color: color-mix(in oklab, var(--primary) 30%, var(--line));
}

.pol__tablewrap td { color: var(--text-2); background: var(--surface-2); }

/* 첫 칸은 <무엇에 대한 값인지>다. 나머지보다 또렷해야 눈이 거기서 출발한다 */
.pol__tablewrap td:first-child { font-weight: 700; color: var(--text); }

.pol__tablewrap tr:last-child td { border-bottom: none; }
.pol__tablewrap tbody tr:hover td { background: var(--surface-3); }

/* 종이에서는 굴릴 수가 없다 — 줄여서라도 다 보이게 */
@media print {
  .pol__tablewrap { overflow: visible; border-color: #999; }
  .pol__tablewrap th, .pol__tablewrap td { color: #000; background: none; border-color: #999; }
}

/* ==========================================================================
   약관 · 정책 — 시안 「게시판 묶음」 (css/board.css · 접두어 bd-) (레드 2026-09-27 「notice.html 이 스타일로」 · 「약관 11종 전부」)
   [왼쪽 고정 메뉴 248 — 문서 열한 벌 + 지금 문서의 조항 하위메뉴] [오른쪽 본문 판]. PolicyPage 가 그린다.
   (위쪽 .pol 규칙은 옛 모양 — 지금은 안 쓴다. 책임도박 /responsible 도 9/27 부터 PolicyPage + 아래 .bd-guide 안내 카드)
   ★ 크기는 시안 지정값. 색은 웨일리 톤 — 금색 면 · 칩은 사파이어(--primary), 금색 글자 · 선 · 옅은 판은 하늘(#4EC3F7).
     (이벤트 목록과 같은 규칙) 시안 --text-sub → --text-4 · --line-strong → #5b6580
   ★ 메뉴에 공지사항 · 이용가이드는 없다 — 기획팀 「웨일리는 공지사항 및 가이드 없음」. 문서 열한 벌 + 고객센터 · 라이브챗.
   ========================================================================== */
.bd{ --card:#0f1528; --well:#0a0f1e; display:grid; grid-template-columns:248px minmax(0,1fr); align-items:start; gap:18px; padding-bottom:48px; font-size:14px; line-height:1.5; font-weight:400; }

/* ---- 왼쪽 : 메뉴(아이콘 · 이름 · 설명) + 지금 메뉴의 세부 항목 ---- */
.bd-side{ position:sticky; top:96px; display:grid; gap:14px; }
.bd-nav{ display:grid; gap:4px; padding:8px; border-radius:18px; border:1px solid var(--line); background:var(--card);
  max-height:calc(100vh - 110px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.bd-nav__group.is-gap{ margin-top:6px; padding-top:6px; border-top:1px solid var(--line); border-radius:0; }
.bd-nav__group{ border-radius:13px; transition:background-color .2s; }
.bd-nav__group.is-on{ background:linear-gradient(160deg, rgba(78,195,247,.1), rgba(78,195,247,.02)); box-shadow:inset 0 0 0 1px rgba(78,195,247,.28); }
.bd-nav__item{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; padding:10px 12px 10px 10px; border:0; border-radius:13px; background:none; color:var(--text-4); text-align:left; text-decoration:none; font:inherit; cursor:pointer; transition:background-color .2s; }
.bd-nav__group:not(.is-on) .bd-nav__item:hover{ background:rgba(255,255,255,.035); }
.bd-nav__txt{ display:grid; gap:2px; min-width:0; }
.bd-nav__txt b{ font-size:14px; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd-nav__group.is-on .bd-nav__txt b{ color:#fff; }
.bd-nav__txt small{ font-size:11px; color:var(--text-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd-nav__item > svg{ width:14px; height:14px; color:var(--text-4); opacity:.6; }
.bd-nav__item em{ font-style:normal; font-size:11px; font-weight:800; padding:2px 8px; border-radius:99px; background:rgba(78,195,247,.18); color:#9fdcff; white-space:nowrap; }
.bd-nav__subs{ display:grid; gap:1px; margin:0 10px 10px 58px; padding:0 0 0 12px; list-style:none; border-left:1px solid rgba(78,195,247,.25); }
.bd-nav__subs a{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; height:32px; padding:0 10px; border-radius:8px; font-size:13px; font-weight:600; color:var(--text-4); text-decoration:none; transition:background-color .2s, color .2s; }
.bd-nav__subs a:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.bd-nav__subs a.is-on{ background:rgba(78,195,247,.12); color:#fff; font-weight:800; }
.bd-nav__subs a.is-on::before{ content:""; position:absolute; left:-15px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:#4EC3F7; box-shadow:0 0 0 3px rgba(78,195,247,.2); }
.bd-nav__subs small{ font-size:11px; font-weight:600; color:var(--text-4); font-variant-numeric:tabular-nums; }
/* 조항 하위메뉴 — 시안 하위메뉴 모양에 [번호 · 제목] (레드 「이 목록들이 시안 하위메뉴로」) */
/* ⚠ 칸 폭을 메뉴 안에 묶는다 — 긴 조항 제목(한 줄 · 말줄임)이 격자 칸을 밀어 메뉴 밖으로 나갔다(9/27 실측 284 > 248) */
.bd-nav__subs.is-laws{ grid-template-columns:minmax(0,1fr); min-width:0; }
.bd-nav__subs.is-laws li{ min-width:0; }
.bd-nav__subs.is-laws a{ justify-content:flex-start; gap:10px; height:auto; min-height:32px; padding:6px 10px; }
.bd-nav__subs.is-laws small{ flex:none; min-width:16px; font-weight:800; color:var(--text-5); }
.bd-nav__subs.is-laws a.is-on small{ color:#9fdcff; }
.bd-nav__subs.is-laws span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 메뉴 아이콘 — 색 타일 없이 그림만, 그림을 타일 색(--t1 · --t2, account.css .dt--*)으로 칠한다 */
.bd-nav .dt{ display:grid; place-items:center; width:38px; height:38px; background:none; box-shadow:none; }
.bd-nav .dt svg{ width:26px; height:26px; fill:var(--t1); color:var(--t1); filter:drop-shadow(0 2px 6px color-mix(in srgb, var(--t2) 45%, transparent)); }
.bd-nav .dt > i{ font-size:20px; color:var(--t1); filter:drop-shadow(0 2px 6px color-mix(in srgb, var(--t2) 45%, transparent)); }
.bd-nav__group:not(.is-on) .dt{ filter:saturate(.35) brightness(.8); transition:filter .2s; }
.bd-nav__group:not(.is-on) .bd-nav__item:hover .dt{ filter:none; }

/* ---- 오른쪽 ------------------------------------------------------------- */
.bd-main{ min-width:0; border-radius:18px; border:1px solid var(--line); background:var(--card); }
.bd-main__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:16px 22px 14px; border-bottom:1px solid var(--line); }
.bd-main__head h1{ margin:0; font-size:22px; font-weight:900; line-height:1.5; color:#fff; }
.bd-main__head p{ margin:4px 0 0; font-size:13px; color:var(--text-4); }
.bd-main__meta{ font-size:12px; color:var(--text-4); white-space:nowrap; }
.bd-main__meta b{ margin-left:4px; color:#fff; }
.bd-body{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:14px 22px 20px; }
.bd-empty{ display:grid; justify-items:center; gap:6px; padding:56px 0; border-radius:14px; border:1px dashed var(--line); text-align:center; }
.bd-empty small{ font-size:12px; color:var(--text-4); }

/* ---- 조항 목차 · 조항 카드 ---------------------------------------------- */
.bd-toc{ display:grid; gap:10px; padding:16px 18px; border-radius:14px; border:1px solid var(--line); background:var(--well); }
.bd-toc b{ font-size:13px; color:#fff; }
.bd-toc div{ display:flex; flex-wrap:wrap; gap:6px; }
.bd-toc a{ height:30px; display:inline-flex; align-items:center; padding:0 12px; border-radius:99px; border:1px solid var(--line); font-size:12px; font-weight:600; color:var(--text-4); text-decoration:none; transition:border-color .2s, color .2s; }
.bd-toc a:hover{ border-color:#4EC3F7; color:#4EC3F7; }
.bd-laws{ display:grid; gap:10px; }
.bd-law{ scroll-margin-top:96px; padding:20px 22px; border-radius:14px; border:1px solid var(--line); background:var(--well); }
.bd-law h2{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:17px; font-weight:800; line-height:1.5; color:#fff; }
.bd-law h2 span{ flex:none; padding:3px 10px; border-radius:7px; background:rgba(78,195,247,.14); color:#9fdcff; font-size:12px; font-weight:800; }
/* 조항 본문 — 콘솔이 쓴 HTML. 시안 조항 줄(14 · 1.75 · 흰 글자)과 같은 결로 */
.bd-law__prose{ display:grid; gap:8px; font-size:14px; line-height:1.75; color:var(--text); word-break:keep-all; }
.bd-law__prose > *{ margin:0; }
.bd-law__prose ul, .bd-law__prose ol{ display:grid; gap:6px; padding-left:18px; }
.bd-law__prose li::marker{ color:#4EC3F7; font-weight:700; }
.bd-law__prose strong, .bd-law__prose b{ color:#fff; }
.bd-law__prose a{ color:#4EC3F7; }
/* 번호 칸 — 시안 조항 줄([① | 글] 22 · 8)과 같은 결. 번호가 3.1. 처럼 길어 칸은 글자만큼 넓힌다 */
.bd-law__prose .bd-li{ display:grid; grid-template-columns:minmax(22px,auto) minmax(0,1fr); gap:8px; }
.bd-law__prose .bd-li > em{ font-style:normal; font-weight:700; color:#4EC3F7; font-variant-numeric:tabular-nums; }
.bd-law__prose ul:has(> li.bd-li), .bd-law__prose ol:has(> li.bd-li){ padding-left:0; list-style:none; }
.bd-law__prose li.bd-li::marker{ content:none; }
.bd-law__prose h4{ margin:6px 0 0; font-size:14px; font-weight:800; color:#fff; }
.bd-law__prose div{ overflow-x:auto; }
.bd-law__prose table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.bd-law__prose th, .bd-law__prose td{ padding:8px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.bd-law__prose th{ background:rgba(255,255,255,.04); font-weight:800; color:#fff; white-space:nowrap; }
.bd-law__prose tr:last-child td{ border-bottom:0; }

/* ---- 책임도박 안내 카드 (옛 ResponsiblePage 의 도구 안내 네 판 — 레드 2026-09-27 「책임도박도 신규 스타일로」) ----
   조항 카드와 같은 결(well · 14 · 1.7). 미성년자 판만 한 줄을 다 쓰고 붉은 선 — 다른 모든 것에 앞서는 선이다.
   ⚠ 제목 아이콘 · 순번 동그라미는 넣지 않는다 (레드 2026-09-14 「제목 아이콘 싹 다 제거」) */
.bd-guide{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.bd-guide__card{ display:grid; align-content:start; gap:10px; padding:18px 20px; border-radius:14px; border:1px solid var(--line); background:var(--well); font-size:14px; line-height:1.7; color:var(--text); word-break:keep-all; }
.bd-guide__card h3{ margin:0; padding-left:12px; border-left:3px solid #4EC3F7; font-size:16px; font-weight:800; line-height:1.4; color:#fff; }
.bd-guide__card p{ margin:0; }
.bd-guide__card ul{ display:grid; gap:6px; margin:0; padding-left:18px; }
.bd-guide__card li::marker{ color:#4EC3F7; font-weight:700; }
.bd-guide__foot{ font-size:12px; color:var(--text-4); }
.bd-guide__card .btn{ justify-self:start; }
/* 네 판이라 2칸 격자에서 「도움 받기」가 반쪽만 남는다 — 그 판도 한 줄을 다 쓴다(미성년자 · 점검|방법 · 도움) */
.bd-guide__card.is-wide{ grid-column:1 / -1; }
.bd-guide__card.is-warn{ grid-column:1 / -1; border-color:rgba(255,107,129,.35); background:linear-gradient(160deg, rgba(255,107,129,.10), rgba(255,107,129,.02)), var(--well); }
.bd-guide__card.is-warn h3{ border-left-color:#ff6b81; }

/* ---- 좁은 화면 (시안 1024 이하 — 메뉴가 위로 올라와 가로 칸) ------------- */
@media (max-width:1024px){
  .bd{ grid-template-columns:minmax(0,1fr); }
  .bd-side{ position:static; }
  /* ⚠ 시안은 다섯 칸 격자 — 우리는 문서가 열한 벌이라 한 줄로 두고 옆으로 민다 */
  .bd-nav{ display:flex; max-height:none; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .bd-nav::-webkit-scrollbar{ display:none; }
  .bd-nav__group{ flex:none; }
  .bd-nav__group.is-gap{ margin:0; padding:0; border:0; }
  .bd-nav__item{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:2px; min-width:76px; padding:6px 10px; }
  .bd-nav__txt small, .bd-nav__item em, .bd-nav__item > svg, .bd-nav__subs{ display:none; }
}
/* 휴대폰 (1023 이하) — 세로 여백 줄이기 · 조항 목차는 한 줄로 옆으로 민다 */
@media (max-width:1023px){
  .bd{ gap:10px; }
  .bd-nav{ padding:5px; gap:2px; border-radius:14px; }
  .bd-nav .dt{ width:30px; height:30px; }
  .bd-nav .dt svg{ width:22px; height:22px; }
  .bd-nav__txt b{ font-size:11px; white-space:nowrap; letter-spacing:-.02em; }
  .bd-main{ border-radius:14px; }
  .bd-main__head{ flex-wrap:wrap; align-items:flex-start; gap:6px 12px; padding:14px 14px 12px; }
  .bd-main__head > div{ min-width:0; }
  .bd-main__head h1{ font-size:20px; }
  .bd-main__head p{ margin-top:3px; font-size:12px; }
  .bd-body{ gap:10px; padding:12px; }
  .bd-toc{ padding:12px 14px; gap:8px; }
  .bd-toc div{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-14px; padding-inline:14px; }
  .bd-toc div::-webkit-scrollbar{ display:none; }
  .bd-toc a{ flex:none; white-space:nowrap; }
  .bd-guide{ grid-template-columns:minmax(0,1fr); }
  .bd-guide__card{ padding:14px 16px; }
}
@media (max-width:640px){
  .bd-body{ padding:14px; }
}