/* 변형 게임 규칙(variant_rules.php, 2026-11-02). lesson.css 와 fs-skin2.css 뒤에 싣는다.
   색은 레슨 변수(--ls-*)만 쓴다. 새 스타일, 앱 다크는 그 변수가 바뀌어 따라간다.
   폭: 레슨과 같은 좌우 16px, 768px 이상 15px, 가운데 고정 폭 없음. */
main.fs-lesson.vr-rules{--ls-px-l:16px;--ls-px-r:16px;--vr-on-pri:var(--ls-on-pri,#fff);max-width:none;margin:0;padding:0 16px 24px}
@media (min-width:768px){main.fs-lesson.vr-rules{--ls-px-l:15px;--ls-px-r:15px;padding:0 15px 32px}}
html.fs-skin2 main.fs-lesson.vr-rules{--vr-on-pri:var(--s2-accent-ink,#fff)}
html.fs-skin2 main.fs-lesson.vr-rules .fs-lesson-bar h1{white-space:normal;overflow:visible}

/* BETA: 레슨 목차 '야옹봇 베타' 알약(.fs-lesson__tag) 그대로, 다크는 보라 다크 값 */
main.vr-rules .vr-beta{margin-left:8px;font-size:12px;line-height:1.6;letter-spacing:.04em;vertical-align:.15em}
html.fs-app-theme-dark main.vr-rules .vr-beta{background:#2e2350;color:#a78bfa}

/* 게임 고르기: 두 칸 알약. 폭은 글자에 맞춰 나누고 줄바꿈하지 않는다(긴 언어 이름이 두 줄로 꺾여 알약이 깨지지 않게, 2026-11-02) */
.vr-tabs{display:flex;gap:8px;margin:0 0 12px}
main.vr-rules a.vr-tab{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:44px;display:flex;align-items:center;justify-content:center;padding:8px 12px;
  border:1px solid var(--ls-bd);border-radius:999px;background:var(--ls-card);color:var(--ls-fg);font-size:14px;font-weight:700;line-height:1.3;
  text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent}
main.vr-rules a.vr-tab:hover{border-color:var(--ls-pri)}
main.vr-rules a.vr-tab[aria-current="page"]{border-color:var(--ls-pri);background:var(--ls-pri);color:var(--vr-on-pri)}
main.vr-rules .vr-lead{margin:0 4px 16px;font-size:15px}

/* 규칙 카드 */
.vr-section{margin:0 0 20px;padding:16px;border:1px solid var(--ls-bd);border-radius:16px;background:var(--ls-card)}
main.fs-lesson.vr-rules h2{margin:0 0 10px;font-size:18px;line-height:1.4}
.vr-examples>h2{padding:0 4px}
.vr-list{margin:0;padding-left:1.4em;font-size:15px;line-height:1.7}
.vr-list li+li{margin-top:6px}

/* 판 그림 카드: 1단, 768px 이상 2단 */
.vr-legend{justify-content:flex-start;margin:0 4px 12px}
.vr-legend__star{color:var(--ls-fg);font-size:14px;line-height:1}
.vr-legend__ring{width:12px;height:12px;border:2px solid #b7791f;border-radius:50%}
.vr-legend__line{border:1px solid #2f855a;border-radius:2px;background:rgba(147,228,186,.25)}
html.fs-app-theme-dark .vr-legend__ring{border-color:#f5c861}
html.fs-app-theme-dark .vr-legend__line{border-color:#93e4ba}
.vr-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:768px){.vr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
/* 그림 묶음 제목(Regooth 뒤집기 예·한 줄 승리 예): 두 칸을 가로질러 다른 국면을 나눈다 */
main.fs-lesson.vr-rules .vr-fig-group{grid-column:1/-1;margin:8px 4px 0;font-size:15px;font-weight:800;line-height:1.4;color:var(--ls-fg)}
main.fs-lesson.vr-rules .vr-fig-group:first-child{margin-top:0}
.vr-fig{min-width:0;margin:0;padding:14px 14px 18px;border:1px solid var(--ls-bd);border-radius:16px;background:var(--ls-card)}
.vr-fig figcaption{margin:0 0 12px;font-size:14px;line-height:1.65;color:var(--ls-fg)}
html.fs-skin2 main.vr-rules :is(.vr-section,.vr-fig){border-color:var(--s2-line);border-radius:22px;background:var(--s2-surface);box-shadow:0 3px 0 var(--s2-lip)}
main.vr-rules .vr-credit{margin:16px 4px 0;color:var(--ls-mut);font-size:13px}

/* 9x9 판(이 페이지 스크립트): 레슨 보드 규격에서 칸 수만 9 */
.ls-board.vr-board9{--ls-size:calc(var(--ls-cell) * 9)}
.vr-board9 .ls-overlay{grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr)}
/* 클래식 리버시 판(2026-11-03, 이 페이지 스크립트가 그림): 대국판 .obb-classic 과 같은 종이색 바탕·판지 테두리·짙은 갈색 좌표. 다크 모드도 실물 판처럼 그대로 */
.ls-board.vr-board8c{--ls-size:calc(var(--ls-cell) * 8)}
.vr-board8c .ls-overlay{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}
html .vr-board8c .ls-surface{background-color:#e6dcc3 !important;background-blend-mode:normal !important;
  background-image:radial-gradient(rgba(120,100,70,.10) 1px,transparent 1.2px),radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.2px),linear-gradient(160deg,rgba(255,255,255,.18),rgba(120,96,60,.10)) !important;
  background-size:7px 7px,11px 11px,100% 100% !important;box-shadow:inset 0 0 0 1px #3a3226 !important}
html .vr-board8c .oc-frame-wood,html .vr-board8c .oc-frame-wood-left::before,html .vr-board8c .oc-frame-wood-right::before{background-color:#d9ceb2 !important;background-image:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) !important}
html .vr-board8c .oc-frame-wood::after{display:none !important}
html .vr-board8c .ls-coords,html .vr-board8c .ls-frame-label{color:#3a3226 !important}

/* 특수 디스크 ★: 레슨 보드의 표시 종류 'special'(data-marks [칸,"special","★"]). 돌 몸통 중심을 따른다 */
.ls-mark--special{z-index:5;inset:0;color:#fff;font:700 calc(var(--ls-cell) * .5)/1 system-ui,-apple-system,"Segoe UI Symbol",sans-serif;
  transform:translateY(var(--ls-mark-offset-y))}
.ls-mark--special.on-white{color:#111827}   /* 대국판과 같은 색: 검은 돌엔 흰 별, 흰 돌엔 검은 별(금색 별은 대국판의 '방금 둔 수') */