/* 대국용 새 보드(iframe 없음, 2026-10-07, online.battle-board.js). 계획: docs/online-battle-board-plan-2026-10-07.md
 * 아래 "기존 보드에서 옮긴 규칙"은 ocviewer.css(대국자 줄·배지·시계·패스·봇 말풍선·테두리·좌표·칸·별점)와
 * ocviewer.html initBattleTimer 의 주입 스타일을 같은 값 그대로 .obb 안으로 한정한 것이다(대국용 body 클래스
 * ocv-split-players·oc-battle-mode·oc-live-battle 조건은 새 보드에서는 항상 참이라 뺐다). 2026-10-09 기존 보드 제거 때 원본의
 * 대국 전용 규칙(패스 배지·좌석 버튼·준비·첫 수 배지·봇 말풍선)은 지워서 그 부분은 이 파일이 원본이다. 공용 규칙(이름·시계·좌표 등)을
 * 바꿀 때는 ocviewer.css 와 함께 바꾼다.
 * 판 질감·나무 테두리는 oc-board-materials.css(#board·#frame·.oc-frame-wood)를 그대로 공유한다. */

/* 글꼴: 기존 보드 문서는 Lato(/font/lato.css)를 싣는다. 한국어 테마는 페이지 글꼴 목록에 "Lato" 만 적고 파일을 싣지 않아 새 보드가
   시스템 글꼴로 그려졌다(이름·레이팅 폭, 줄 높이, 좌표·테두리 글자 위치 차이, 2026-10-07). 보드 전용 이름 'OBB Lato' 의 @font-face 는
   online.php 가 /font/lato.css 를 그대로 옮겨 기존 보드와 같은 주소(oc_cdn_static_url)로 출력한다. 페이지에 "Lato" 를 등록하면
   로비·채팅 글꼴까지 바뀌므로 등록하지 않는다. */

/* 기존 보드 문서의 기본값 되살리기: 온라인 화면의 Bootstrap·테마 CSS(박스 크기·줄 높이·글꼴·.badge 여백·이미지 정렬)가
   보드 영역에 섞이지 않게 한다. 기존 보드 문서는 브라우저 기본값 + ocviewer.css 의 Lato 글꼴이다. */
.obb, .obb *, .obb *::before, .obb *::after { box-sizing:content-box; }
.obb { font-family:'OBB Lato', sans-serif; font-size:calc(var(--ocv-u, 1px) * 16); font-weight:400; line-height:normal; letter-spacing:normal; text-transform:none; text-align:left; }
html:not(.fs-app-theme-dark) .obb { color:#000; }
.obb img { vertical-align:baseline; }
.obb .badge { padding:0; line-height:normal; white-space:normal; vertical-align:baseline; text-align:center; }
.obb button { font:inherit; }

/* ── 새 보드 고유 규칙 ── */
#ocviewerFrame.obb-host { display:block; position:relative; overflow:hidden; }
.obb { --cell:44px; --disc:38px; --board:calc(var(--cell) * 8); --oc-board-color:#008563; position:relative; width:100%; overflow:hidden; text-align:left; }
.obb-scale { width:calc(var(--ocv-u, 1px) * 382); transform-origin:0 0; }
.obb-board-wrap { text-align:center; font-size:0; line-height:0; }
/* CSS 크기(2026-10-11 관리자 시범 → 같은 날 전체, online.battle-board.js cssMode): 확대·축소(transform) 대신 칸 크기를 보드 자리 폭
   (컨테이너 단위)에서 계산한다. 폭 채우기(obb-fill: 좁은 화면·앱·맞춤 모드)가 아니면 예전처럼 1배(칸 44px)를 넘지 않는다. 맞춤 모드 높이 상한은 JS 가
   --obb-cell-hmax 로 준다. 칸 = (자리 폭 − 2px) / (8 + 28/44): 보드 8칸 + 양쪽 테두리(칸×14/44) + 이름 줄 여유 2px, 예전 widthScale(=(폭−2)/380)과 같은 크기.
   크기 값은 아래 "기존 보드에서 옮긴 규칙"·공용 재질 css(oc-board-materials.css)·이 스크립트의 인라인 값에 칸 비율 변수로 들어 있다(분석 뷰어와 같은 꼴:
   px 자리가 calc(var(--ocv-u, 1px) * N), 이름·레이팅·시계 글자와 시계 줄 국기·봇 말풍선 글자는 var(--ocv-tu, 1px)). 변수는 CSS 방식일 때 .obb-scale
   (예전 transform 이 확대하던 범위) 안에서만 정의하고, 그 밖·예전 방식은 기본값 1px 라 예전과 같다. 이 절에는 예전과 모양이 다른 규칙만 둔다. */
#ocviewerFrame.obb-host.obb-css-host { container-type:inline-size; }
.obb.obb-css { --obb-cell-max:44px; --cell:min(var(--obb-cell-max), var(--obb-cell-hmax, 9999px), calc((100cqw - 2px) / 8.636364)); --disc:calc(var(--cell) * 38 / 44);
  --obb-u:calc(var(--cell) / 44); --obb-frame:calc(var(--obb-u) * 14); }
.obb.obb-css.obb-fill { --obb-cell-max:9999px; }
.obb.obb-css .obb-scale { width:calc(var(--board) + var(--obb-frame) * 2 + 2px); margin:0 auto; transform:none; }
.obb.obb-css :where(.player-header) { width:auto; }
.obb.obb-css { --obb-tu:max(min(1px, var(--obb-u)), calc(var(--obb-u) * 0.8)); }
.obb.obb-css .obb-scale { --ocv-u:var(--obb-u); --ocv-tu:var(--obb-tu); }
/* 좌표: 예전 고정 보정값(-22px 등) 대신 각 칸 정가운데·테두리 두께 가운데에 둔다(#char_a~h left = 칸 × 1~8, #char_1~8 top = 칸 × 0~7) */
.obb.obb-css #x-coordinate { top:calc(var(--obb-frame) * -1); left:0; width:var(--board); height:var(--obb-frame); }
.obb.obb-css .x_char { top:0; width:var(--cell); margin-left:calc(var(--cell) * -1); height:var(--obb-frame); line-height:var(--obb-frame); font-size:calc(var(--obb-u) * 11) !important; }
.obb.obb-css #y-coordinate { top:0; left:calc(var(--obb-frame) * -1); width:var(--obb-frame); height:var(--board); }
.obb.obb-css .y_char { left:0; width:var(--obb-frame); height:var(--cell); line-height:var(--cell); font-size:calc(var(--obb-u) * 11) !important; }
/* 별점 4개: 가운데를 칸 교차점에(점 전체 7u 의 절반) */
.obb.obb-css #dot_lu { top:calc(var(--cell) * 2 - var(--obb-u) * 3.5); left:calc(var(--cell) * 2 - var(--obb-u) * 3.5); }
.obb.obb-css #dot_ru { top:calc(var(--cell) * 2 - var(--obb-u) * 3.5); left:calc(var(--cell) * 6 - var(--obb-u) * 3.5); }
.obb.obb-css #dot_ld { top:calc(var(--cell) * 6 - var(--obb-u) * 3.5); left:calc(var(--cell) * 2 - var(--obb-u) * 3.5); }
.obb.obb-css #dot_rd { top:calc(var(--cell) * 6 - var(--obb-u) * 3.5); left:calc(var(--cell) * 6 - var(--obb-u) * 3.5); }
/* 선 굵기: 칸 선·보드 가장자리 선은 돌 캔버스가 그린다(online.battle-board.js drawStatic). DOM 테두리는 브라우저가 화면 화소로 내림해
   칸 비율(예: 1.3px)로 줘도 1px 로 남았다(예전 transform 확대에서는 함께 굵어졌다). 그래서 CSS 모드는 칸 테두리·보드 안쪽 그림자를 끈다. */
.obb.obb-css .oc_cell { border-right-width:0; border-bottom-width:0; }
.obb.obb-css #board { box-shadow:none; }

.obb #frame { vertical-align:top; font-size:calc(var(--ocv-u, 1px) * 16); line-height:normal; text-align:left; }
.obb #board .obb-discs { position:absolute; left:0; top:0; width:var(--board); height:var(--board); z-index:1; pointer-events:none; }

/* 착수 미리보기(마우스 올림·손가락 닿은 칸): 기존 보드 #hoverLayer(z-index 201, 고스트 투명도 0.20)와 같은 자리·투명도 */
.obb #board .obb-hover { position:absolute; left:0; top:0; width:var(--board); height:var(--board); z-index:201; pointer-events:none; opacity:.2; }
.obb .obb-flips { position:absolute; left:0; top:0; width:var(--board); height:var(--board); z-index:250; pointer-events:none; }
.obb .obb-flip { position:absolute; overflow:hidden; pointer-events:none; }
.obb .obb-flip img { display:block; max-width:none; transform:translateX(0); will-change:transform; }
@media (prefers-reduced-motion: reduce) { .obb .obb-flips { display:none; } }
.obb .oc-frame-label span { color:#5d3a1a; }
/* 보드 전용 글꼴을 받는 동안 글자만 숨긴다(판·돌은 보인다). online.battle-board.js bindResize 가 받은 뒤(최대 3초) 뗀다. */
.obb.obb-font-wait .player-header,
.obb.obb-font-wait #x-coordinate,
.obb.obb-font-wait #y-coordinate,
.obb.obb-font-wait .oc-frame-label,
.obb.obb-font-wait .oc-frame-move,
.obb.obb-font-wait .oc-frame-opening { visibility:hidden; }
/* 확대(보드가 1배보다 클 때): 이름·레이팅·시계는 보드 확대를 80%만 따라간다(ocviewer.css body.oc-textfit 규칙과 같은 값) */
.obb.obb-textfit .player-name { font-size:calc(calc(var(--ocv-tu, 1px) * 17) * var(--fit-text-factor, 1)); }
.obb.obb-textfit .player-timer,
.obb.obb-textfit .player-rating-live { font-size:calc(calc(var(--ocv-tu, 1px) * 14) * var(--fit-text-factor, 1)); }
.obb.obb-textfit .player-timer-row .oc-flag { width:calc(calc(var(--ocv-tu, 1px) * 20) * var(--fit-text-factor, 1)) !important; height:calc(calc(var(--ocv-tu, 1px) * 15) * var(--fit-text-factor, 1)) !important; flex-basis:calc(calc(var(--ocv-tu, 1px) * 20) * var(--fit-text-factor, 1)) !important; border-width:calc(var(--ocv-tu, 1px) * var(--fit-text-factor, 1)) !important; }
.obb.obb-textfit .player-timer-row .battle-seat-flag { margin-left:0 !important; margin-right:calc(calc(var(--ocv-tu, 1px) * 4) * var(--fit-text-factor, 1)) !important; }
.obb.obb-textfit .ocv-bot-bubble-text { font-size:calc(calc(var(--ocv-tu, 1px) * 12) * var(--fit-text-factor, 1)); line-height:calc(calc(var(--ocv-tu, 1px) * 14) * var(--fit-text-factor, 1)); max-height:calc(calc(var(--ocv-tu, 1px) * 28) * var(--fit-text-factor, 1)); }
.obb.obb-textfit .ocv-bot-bubble.is-mobile .ocv-bot-bubble-text { font-size:calc(calc(var(--ocv-tu, 1px) * 13) * var(--fit-text-factor, 1)); }

/* ── 기존 보드에서 옮긴 규칙(같은 값) ── */
/* 특정도는 원래 규칙과 같게 :where(.obb) 로 한정한다(다크 테마 html.fs-app-theme-dark … 규칙이 기존처럼 이긴다). */
:where(.obb) #ocgibo,
:where(.obb) #board,
:where(.obb) #frame {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none;}
:where(.obb) .player-header {display:flex; align-items:center; justify-content:space-between; gap:calc(var(--ocv-u, 1px) * 5); padding:0px 0px calc(var(--ocv-u, 1px) * 5); width:calc(var(--ocv-u, 1px) * 382); border:0px solid #000;}
:where(.obb) .player-row {display:flex; align-items:center; flex:1 1 0; min-width:0; overflow:hidden;}
:where(.obb) .player-row .badge.black {margin-right:calc(var(--ocv-u, 1px) * 6);}
:where(.obb) .player-row.right .badge {margin-left:calc(var(--ocv-u, 1px) * 6);}
:where(.obb) .player-row.right {justify-content:flex-end;}
:where(.obb) .player-name-wrap {display:flex; flex:1 1 0; flex-direction:column; min-width:0;}
:where(.obb) .player-row.right .player-name-wrap {align-items:flex-end;}
:where(.obb) .battle-seat-photo {display:inline-flex; align-items:center; flex:0 0 auto; margin-right:calc(var(--ocv-u, 1px) * 4);}
:where(.obb) .battle-seat-photo:empty {display:none!important; margin-right:0;}
:where(.obb) .battle-seat-photo-img {display:block; width:calc(var(--ocv-u, 1px) * 24); height:calc(var(--ocv-u, 1px) * 24); object-fit:cover; border-radius:50%; border:var(--ocv-u, 1px) solid rgba(0,0,0,.12); box-sizing:border-box; flex:0 0 calc(var(--ocv-u, 1px) * 24);}
:where(.obb) .player-timer {display:none; font:calc(var(--ocv-tu, 1px) * 14)/1.2 ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; color:#6b7280; margin-top:var(--ocv-u, 1px); padding:var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 5); border:var(--ocv-u, 1px) solid transparent; border-radius:calc(var(--ocv-u, 1px) * 6); opacity:.66;}
:where(.obb) .player-timer.show {display:block;}
:where(.obb) .player-timer.is-active {color:#111; opacity:1; border-color:#c9a93c; background:#fffdf3; box-shadow:0 0 0 var(--ocv-u, 1px) rgba(201,169,60,.22);}
:where(.obb) .player-timer.is-low {color:#b91c1c;}
:where(.obb) .player-timer-row {display:flex; gap:calc(var(--ocv-u, 1px) * 5); align-items:baseline;}
:where(.obb) .player-row.right .player-timer-row {justify-content:flex-end;}
:where(.obb) .player-rating-live {display:none; font-size:calc(var(--ocv-tu, 1px) * 14); font-weight:450; font-variant-numeric:tabular-nums;}
:where(.obb) .player-rating-live.show {display:inline-block;}
:where(.obb) .player-rating-live.rating-unofficial {color:#999;}
:where(.obb) .player-rating-live.rating-local {color:#666;}
:where(.obb) .battle-pass-badge {display:none; flex:0 0 auto; min-width:0; align-items:center; justify-content:center; align-self:center; height:calc(var(--ocv-u, 1px) * 26); margin:0 calc(var(--ocv-u, 1px) * 2) 0 calc(var(--ocv-u, 1px) * 4); padding:0 calc(var(--ocv-u, 1px) * 7); border:var(--ocv-u, 1px) solid #fdba74; border-radius:calc(var(--ocv-u, 1px) * 6); box-sizing:border-box; background:#fff7ed; color:#9a3412; font-size:calc(var(--ocv-u, 1px) * 14); font-style:normal; font-weight:700; line-height:1; letter-spacing:.02em; white-space:nowrap;}
:where(.obb) .battle-pass-badge.show {display:flex;}
:where(.obb) .player-row.has-pass-badge .player-name-wrap {flex:0 1 auto;}
:where(.obb) .player-row.has-pass-badge .battle-pass-badge {margin:0 auto;}
html.fs-app-theme-dark :where(.obb) .battle-pass-badge,
body.fs-app-theme-dark :where(.obb) .battle-pass-badge {background:#431f10; border-color:#9a5b2d; color:#fed7aa;}
:where(.obb) .player-row.is-pass-continuing .player-timer,
:where(.obb) .player-row.is-pass-continuing > .badge {box-shadow:0 0 0 calc(var(--ocv-u, 1px) * 2) #fb923c; animation:obPassTurnPulse .6s ease-in-out 2;}
@keyframes obPassTurnPulse{0%,100%{box-shadow:0 0 0 2px rgba(251,146,60,.3)}
  50%{box-shadow:0 0 0 3px #fb923c}}
@media (prefers-reduced-motion:reduce){:where(.obb) .player-row.is-pass-continuing .player-timer,
:where(.obb) .player-row.is-pass-continuing > .badge {animation:none}}
:where(.obb) .player-header {display:block; gap:0;}
:where(.obb) .player-header-white {padding-top:calc(var(--ocv-u, 1px) * 5); padding-bottom:0;}
:where(.obb) .player-header > .player-row {flex:1 1 auto; width:100%;}
:where(.obb) .player-row,
:where(.obb) .player-row.right {flex:0 0 100%; justify-content:flex-start;}
:where(.obb) .player-row .badge,
:where(.obb) .player-row.right .badge {margin-left:calc(var(--ocv-u, 1px) * 5) !important; margin-right:calc(var(--ocv-u, 1px) * 6);}
:where(.obb) .player-row.right .player-name-wrap {align-items:flex-start;}
:where(.obb) .player-row.right .player-timer-row {justify-content:flex-start;}
:where(.obb) .player-row .battle-seat-photo {width:calc(var(--ocv-u, 1px) * 36); height:calc(var(--ocv-u, 1px) * 36); margin:0 calc(var(--ocv-u, 1px) * 6) 0 0; flex:0 0 calc(var(--ocv-u, 1px) * 36); align-self:center;}
:where(.obb) .player-row .battle-seat-photo:empty {width:0; height:0; flex-basis:0; margin-right:0;}
:where(.obb) .player-row .battle-seat-photo-img {width:calc(var(--ocv-u, 1px) * 36); height:calc(var(--ocv-u, 1px) * 36); flex-basis:calc(var(--ocv-u, 1px) * 36); border-radius:calc(var(--ocv-u, 1px) * 3);}
:where(.obb) .player-row .player-name {width:100%; max-width:100%; text-align:left !important;}
:where(.obb) .player-row .player-name-line,
:where(.obb) .player-row .player-label-name,
:where(.obb) .player-row .player-quest-link {text-align:left !important;}
:where(.obb) .player-row .player-name-line {justify-content:flex-start;}
:where(.obb) .player-row.right .battle-seat-control {margin-left:calc(var(--ocv-u, 1px) * 6); margin-right:0;}
:where(.obb) .player-row.has-bot-bubble .player-name-wrap {flex:0 1 auto; max-width:58%;}
:where(.obb) .ocv-bot-bubble {position:relative; display:flex; align-items:center; flex:1 1 0; min-width:0; height:calc(var(--ocv-u, 1px) * 36); max-height:calc(var(--ocv-u, 1px) * 36); margin:0 calc(var(--ocv-u, 1px) * 2) 0 calc(var(--ocv-u, 1px) * 10); padding:calc(var(--ocv-u, 1px) * 3) calc(var(--ocv-u, 1px) * 8); border:var(--ocv-u, 1px) solid #cbd5e1; border-radius:calc(var(--ocv-u, 1px) * 9); background:#fff; color:#1f2937; box-shadow:0 var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 4) rgba(15,23,42,.16); box-sizing:border-box; pointer-events:none;}
:where(.obb) .ocv-bot-bubble[hidden] {display:none;}
:where(.obb) .ocv-bot-bubble::before {content:""; position:absolute; left:calc(calc(var(--ocv-u, 1px) * -5) * var(--ocv-bubble-copy-scale, 1)); top:50%; width:calc(calc(var(--ocv-u, 1px) * 8) * var(--ocv-bubble-copy-scale, 1)); height:calc(calc(var(--ocv-u, 1px) * 8) * var(--ocv-bubble-copy-scale, 1)); border-left:calc(var(--ocv-u, 1px) * var(--ocv-bubble-copy-scale, 1)) solid #cbd5e1; border-bottom:calc(var(--ocv-u, 1px) * var(--ocv-bubble-copy-scale, 1)) solid #cbd5e1; background:#fff; transform:translateY(-50%) rotate(45deg);}
:where(.obb) .ocv-bot-bubble-text {display:-webkit-box; width:100%; max-height:calc(var(--ocv-tu, 1px) * 28); overflow:hidden; color:inherit; font-size:calc(var(--ocv-tu, 1px) * 12); line-height:calc(var(--ocv-tu, 1px) * 14); text-align:left; white-space:normal; overflow-wrap:anywhere; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;}
:where(.obb) .ocv-bot-bubble.is-mobile .ocv-bot-bubble-text {font-size:calc(var(--ocv-tu, 1px) * 13);}
:where(.obb) .badge {display:inline-flex; align-items:center; justify-content:center; width:calc(var(--ocv-u, 1px) * 36); height:calc(var(--ocv-u, 1px) * 36); flex:0 0 calc(var(--ocv-u, 1px) * 36); border-radius:50%; font-weight:700; font-size:calc(var(--ocv-u, 1px) * 18); box-sizing:border-box;}
:where(.obb) .badge.black {background:#000; color:#fff; border:calc(var(--ocv-u, 1px) * 2) solid #000;}
:where(.obb) .badge.white {background:#fff; color:#000; border:calc(var(--ocv-u, 1px) * 2) solid #000;}
:where(.obb) .player-header .badge.turn {box-shadow:0 0 0 calc(var(--ocv-u, 1px) * 3) #c9a93c inset;}
:where(.obb) .player-name {display:block; font-size:calc(var(--ocv-tu, 1px) * 17); font-weight:700; line-height:1.1; max-width: min(42vw, calc(var(--ocv-u, 1px) * 520));}
:where(.obb) .player-name .player-label-name {display:block;}
:where(.obb) .player-name .player-quest-link {border:0; background:transparent; padding:0; margin:0; color:inherit; font:inherit; font-weight:inherit; line-height:inherit; cursor:pointer; text-align:inherit;}
:where(.obb) .player-name .player-quest-link:hover {text-decoration:underline;}
:where(.obb) .player-name .player-quest-link:focus-visible {outline:var(--ocv-u, 1px) solid currentColor; outline-offset:calc(var(--ocv-u, 1px) * 2);}
:where(.obb) .player-name .player-wof-link {color:inherit; font:inherit; font-weight:inherit; line-height:inherit; text-decoration:none; cursor:pointer;}
:where(.obb) .player-name .player-wof-link:hover {text-decoration:underline;}
:where(.obb) .player-name .player-wof-link:focus-visible {outline:var(--ocv-u, 1px) solid currentColor; outline-offset:calc(var(--ocv-u, 1px) * 2);}
:where(.obb) .player-header .player-name,
:where(.obb) .player-header .player-rating,
:where(.obb) .player-header .player-rating-live {-webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;}
:where(.obb) .player-name .player-rating {display:block; color:#111; font-weight:400; font-size:.82em; margin-top:calc(var(--ocv-u, 1px) * 2);}
:where(.obb) #frame {border: calc(var(--ocv-u, 1px) * 14) solid #feedc2; padding: 0px; background-color: var(--oc-board-color); position: relative; display: inline-block; box-shadow: inset 0 0 0 var(--ocv-u, 1px) rgba(0,0,0,0.12), 0 0 0 var(--ocv-u, 1px) #dacba5;}
:where(.obb) .oc-frame-wood {position: absolute; pointer-events: none; z-index: 0; background: repeating-linear-gradient( 0deg, #feedc2 0px, #feedc2 1.5px, #eedeb6 2.5px, #feedc2 4.5px, #eedeb6 5px, #feedc2 7px, #eedeb6 8.5px );}
:where(.obb) .oc-frame-wood-top {left: calc(var(--ocv-u, 1px) * -14); right: calc(var(--ocv-u, 1px) * -14); top: calc(var(--ocv-u, 1px) * -14); height: calc(var(--ocv-u, 1px) * 14);}
:where(.obb) .oc-frame-wood-right {top: 0; right: calc(var(--ocv-u, 1px) * -14); bottom: 0; width: calc(var(--ocv-u, 1px) * 14);}
:where(.obb) .oc-frame-wood-bottom {left: calc(var(--ocv-u, 1px) * -14); right: calc(var(--ocv-u, 1px) * -14); bottom: calc(var(--ocv-u, 1px) * -14); height: calc(var(--ocv-u, 1px) * 14);}
:where(.obb) .oc-frame-wood-left {top: 0; left: calc(var(--ocv-u, 1px) * -14); bottom: 0; width: calc(var(--ocv-u, 1px) * 14);}
:where(.obb) .oc-frame-label {position: absolute; left: 0; right: 0; bottom: calc(var(--ocv-u, 1px) * -11); height: calc(var(--ocv-u, 1px) * 10); line-height: calc(var(--ocv-u, 1px) * 13); font-size: calc(var(--ocv-u, 1px) * 12); text-align: center; font-weight: 700; color: #5d3a1a; z-index: 4;}
:where(.obb) .oc-frame-label a,
:where(.obb) .oc-frame-label a:visited,
:where(.obb) .oc-frame-label a:hover,
:where(.obb) .oc-frame-label a:focus,
:where(.obb) .oc-frame-label a:active {color: #5d3a1a; text-decoration: none;}
:where(.obb) .oc-frame-opening {position: absolute; left: calc(50% + calc(var(--ocv-u, 1px) * 30)); right: 0; bottom: calc(var(--ocv-u, 1px) * -11); height: calc(var(--ocv-u, 1px) * 10); line-height: calc(var(--ocv-u, 1px) * 13); font-size: calc(var(--ocv-u, 1px) * 12); text-align: right; font-weight: 700; color: #5d3a1a; pointer-events: none; white-space: nowrap; z-index: 5;}
:where(.obb) .oc-frame-move {position: absolute; left: 0; bottom: calc(var(--ocv-u, 1px) * -11); height: calc(var(--ocv-u, 1px) * 10); line-height: calc(var(--ocv-u, 1px) * 13); font-size: calc(var(--ocv-u, 1px) * 12); text-align: left; font-weight: 700; color: #5d3a1a; pointer-events: none; white-space: nowrap; z-index: 5;}
:where(.obb) .oc-frame-move-color {display: inline-block; width: calc(var(--ocv-u, 1px) * 8); height: calc(var(--ocv-u, 1px) * 8); margin-right: calc(var(--ocv-u, 1px) * 3); vertical-align: 0; flex: 0 0 auto; box-sizing: border-box;}
:where(.obb) .oc-frame-move-color.is-black {background: #000; border: var(--ocv-u, 1px) solid #000;}
:where(.obb) .oc-frame-move-color.is-white {background: #fff; border: var(--ocv-u, 1px) solid currentColor;}
:where(.obb) .oc-frame-move.is-branch,
:where(.obb) .oc-frame-move[data-branch="1"],
:where(.obb) #MoveNo.is-branch,
:where(.obb) #MoveNo[data-branch="1"] {color: #2a46a6 !important;}
:where(.obb) #board {position: relative; width: var(--board); height: var(--board); background-color: var(--oc-board-color); box-shadow: inset 0 0 0 1px black; z-index: 1;}
:where(.obb) .oc_cell {border-style: solid; border-width: 0px 1px 1px 0px; border-color: black; margin: 0px; padding: 0px; font-size: 100%; line-height: var(--cell); position: absolute; text-align: center; width: var(--cell); height: var(--cell); z-index: 3;}
:where(.obb) #cell_h1,
:where(.obb) #cell_h2,
:where(.obb) #cell_h3,
:where(.obb) #cell_h4,
:where(.obb) #cell_h5,
:where(.obb) #cell_h6,
:where(.obb) #cell_h7,
:where(.obb) #cell_h8 {border-right-width: 0px;}
:where(.obb) #cell_a8,
:where(.obb) #cell_b8,
:where(.obb) #cell_c8,
:where(.obb) #cell_d8,
:where(.obb) #cell_e8,
:where(.obb) #cell_f8,
:where(.obb) #cell_g8,
:where(.obb) #cell_h8 {border-bottom-width: 0px;}
:where(.obb) #x-coordinate {top: calc(var(--ocv-u, 1px) * -14); left: calc(var(--ocv-u, 1px) * -22); width: calc(100% - calc(var(--ocv-u, 1px) * 20)); text-align: center; color: #5d3a1a; position: absolute; z-index: 2;}
:where(.obb) #y-coordinate {top: calc(var(--ocv-u, 1px) * 13); left: calc(var(--ocv-u, 1px) * -17); height: calc(100% - calc(var(--ocv-u, 1px) * 20)); color: #5d3a1a; position: absolute; z-index: 2;}
:where(.obb) .x_char {position: absolute; font-size: calc(var(--ocv-u, 1px) * 11) !important; text-align: center; text-transform: uppercase;}
:where(.obb) .y_char {position: absolute; width: calc(var(--ocv-u, 1px) * 20); height: calc(var(--ocv-u, 1px) * 20); font-size: calc(var(--ocv-u, 1px) * 11) !important; text-align: center; text-transform: uppercase;}
:where(.obb) #char_a {left: calc(var(--cell) * 1);}
:where(.obb) #char_b {left: calc(var(--cell) * 2);}
:where(.obb) #char_c {left: calc(var(--cell) * 3);}
:where(.obb) #char_d {left: calc(var(--cell) * 4);}
:where(.obb) #char_e {left: calc(var(--cell) * 5);}
:where(.obb) #char_f {left: calc(var(--cell) * 6);}
:where(.obb) #char_g {left: calc(var(--cell) * 7);}
:where(.obb) #char_h {left: calc(var(--cell) * 8);}
:where(.obb) #char_1 {top: calc(var(--cell) * 0);}
:where(.obb) #char_2 {top: calc(var(--cell) * 1);}
:where(.obb) #char_3 {top: calc(var(--cell) * 2);}
:where(.obb) #char_4 {top: calc(var(--cell) * 3);}
:where(.obb) #char_5 {top: calc(var(--cell) * 4);}
:where(.obb) #char_6 {top: calc(var(--cell) * 5);}
:where(.obb) #char_7 {top: calc(var(--cell) * 6);}
:where(.obb) #char_8 {top: calc(var(--cell) * 7);}
:where(.obb) .x_corner {border-style: solid; border-width: var(--ocv-u, 1px); border-color: black; position: absolute; width: calc(var(--ocv-u, 1px) * 5); height: calc(var(--ocv-u, 1px) * 5); background-color:black; border-radius: 50%;}
:where(.obb) #dot_lu {top: calc(var(--cell) * 2 - calc(var(--ocv-u, 1px) * 3)); left: calc(var(--cell) * 2 - calc(var(--ocv-u, 1px) * 3));}
:where(.obb) #dot_ru {top: calc(var(--cell) * 2 - calc(var(--ocv-u, 1px) * 3)); left: calc(var(--cell) * 6 - calc(var(--ocv-u, 1px) * 3));}
:where(.obb) #dot_ld {top: calc(var(--cell) * 6 - calc(var(--ocv-u, 1px) * 3)); left: calc(var(--cell) * 2 - calc(var(--ocv-u, 1px) * 3));}
:where(.obb) #dot_rd {top: calc(var(--cell) * 6 - calc(var(--ocv-u, 1px) * 3)); left: calc(var(--cell) * 6 - calc(var(--ocv-u, 1px) * 3));}
:where(.obb) .player-name-line {display:flex;align-items:center;justify-content:flex-start;gap:0;width:100%;max-width:100%;min-width:0;white-space:nowrap}
:where(.obb) .player-name-line>b {display:flex;flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden}
:where(.obb) .player-name-line .player-name {width:100%;max-width:100%}
:where(.obb) .player-row.right .player-name-line {justify-content:flex-start}
:where(.obb) .player-row.right .player-name {width:100%}
:where(.obb) .player-row.right .player-name,
:where(.obb) .player-row.right .player-label-name,
:where(.obb) .player-row.right .player-quest-link {text-align:left!important}
:where(.obb) .battle-seat-photo,
:where(.obb) .battle-seat-flag,
:where(.obb) .battle-seat-verified,
:where(.obb) .battle-seat-donor {display:inline-flex;align-items:center;flex:0 0 auto;font-size:calc(var(--ocv-u, 1px) * 16)}
:where(.obb) .battle-seat-donor .oc-donor-badge {margin-right:calc(var(--ocv-u, 1px) * 4) !important}
:where(.obb) .battle-seat-donor:empty {display:none}
:where(.obb) .battle-seat-control {display:inline-flex;align-items:center;margin-left:calc(var(--ocv-u, 1px) * 6);vertical-align:middle;flex:0 0 auto;white-space:nowrap;transform:translateY(var(--ocv-u, 1px))}
:where(.obb) .player-row.right .battle-seat-control {margin-left:calc(var(--ocv-u, 1px) * 6);margin-right:0}
:where(.obb) .battle-seat-btn {position:relative;display:inline-flex;align-items:center;justify-content:center;width:calc(var(--ocv-u, 1px) * 20);height:calc(var(--ocv-u, 1px) * 20);padding:0;border-radius:calc(var(--ocv-u, 1px) * 999);background:#fff;line-height:1;cursor:pointer;white-space:nowrap;box-sizing:border-box}
:where(.obb) .battle-seat-btn.leave {border:calc(var(--ocv-u, 1px) * 2) solid #ef4444;background:#fff;color:#dc2626;box-shadow:0 var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 3) rgba(220,38,38,.24)}
:where(.obb) .battle-seat-btn.leave::before,
:where(.obb) .battle-seat-btn.leave::after {content:"";position:absolute;width:calc(var(--ocv-u, 1px) * 10);height:calc(var(--ocv-u, 1px) * 1.8);background:currentColor;border-radius:calc(var(--ocv-u, 1px) * 999)}
:where(.obb) .battle-seat-btn.leave::before {transform:rotate(45deg)}
:where(.obb) .battle-seat-btn.leave::after {transform:rotate(-45deg)}
:where(.obb) .battle-seat-btn.leave:hover,
:where(.obb) .battle-seat-btn.leave:focus-visible {border-color:#dc2626;color:#fff;background:#dc2626;outline:none}
:where(.obb) .battle-seat-btn.leave:active {transform:scale(.94)}
:where(.obb) .player-timer-row {gap:0}
:where(.obb) .player-timer-row .battle-seat-flag {margin-right:calc(var(--ocv-tu, 1px) * 4);align-self:center}
:where(.obb) .player-timer-row .battle-seat-flag .oc-flag {margin-right:0!important}
:where(.obb) .player-row.right .player-timer-row .battle-seat-flag {margin-right:calc(var(--ocv-tu, 1px) * 4);margin-left:0}
:where(.obb) .player-timer-row .battle-seat-flag:empty {display:none;margin:0}
:where(.obb) .player-rating-live.show+.player-timer.show,
:where(.obb) .player-timer.show+.player-rating-live.show {margin-left:calc(var(--ocv-u, 1px) * 5)}
:where(.obb) .battle-ready-badge {display:none;align-items:center;justify-content:center;flex:0 0 calc(var(--ocv-u, 1px) * 18);width:calc(var(--ocv-u, 1px) * 18);height:calc(var(--ocv-u, 1px) * 17);margin:0;padding:0;border:var(--ocv-u, 1px) solid #60a5fa;border-radius:calc(var(--ocv-u, 1px) * 4);background:#eff6ff;color:#1d4ed8;line-height:1;box-sizing:border-box}
:where(.obb) .battle-ready-badge .ob-ready-go {display:block;font-size:calc(var(--ocv-u, 1px) * 8);font-weight:800;line-height:1;letter-spacing:-.02em}
:where(.obb) .player-timer.show+.battle-ready-badge.show,
:where(.obb) .battle-ready-badge.show+.player-timer.show {margin-left:calc(var(--ocv-u, 1px) * 2)}
:where(.obb) .battle-ready-badge.show {display:inline-flex;animation:obReadyRaise .2s ease-out}
:where(.obb) .battle-seat-waiting {color:#9ca3af!important;cursor:pointer!important;text-decoration:underline;text-underline-offset:calc(var(--ocv-u, 1px) * 2)!important}
:where(.obb) .battle-seat-off {opacity:.4;filter:grayscale(1)}
@keyframes obReadyRaise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){:where(.obb) .battle-ready-badge.show {animation:none}}
:where(.obb) .battle-seat-btn {width:calc(var(--ocv-u, 1px) * 18);height:calc(var(--ocv-u, 1px) * 18)}
:where(.obb) .battle-seat-btn.leave::before,
:where(.obb) .battle-seat-btn.leave::after {width:calc(var(--ocv-u, 1px) * 9);height:calc(var(--ocv-u, 1px) * 1.7)}
:where(.obb) .battle-seat-control {transform:none}
:where(.obb) .battle-seat-btn.leave {border-width:calc(var(--ocv-u, 1px) * 1.5);border-color:#ef4444;color:#dc2626;box-shadow:0 var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 2) rgba(220,38,38,.12)}
:where(.obb) .battle-seat-btn.leave::before,
:where(.obb) .battle-seat-btn.leave::after {top:50%;left:50%;width:calc(var(--ocv-u, 1px) * 8);height:calc(var(--ocv-u, 1px) * 1.5)}
:where(.obb) .battle-seat-btn.leave::before {transform:translate(-50%,-50%) rotate(45deg)}
:where(.obb) .battle-seat-btn.leave::after {transform:translate(-50%,-50%) rotate(-45deg)}
:where(.obb) .battle-ready-badge {align-self:center}
:where(.obb) .battle-firstmove-badge {display:none;align-items:center;flex:0 0 auto;margin-left:calc(var(--ocv-u, 1px) * 4);padding:var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 6);border-radius:calc(var(--ocv-u, 1px) * 999);border:var(--ocv-u, 1px) solid #cbd5e1;background:#f1f5f9;color:#475569;font-size:calc(var(--ocv-u, 1px) * 9);font-weight:800;line-height:1.4;white-space:nowrap;align-self:center}
:where(.obb) .battle-firstmove-badge.show {display:inline-flex}
:where(.obb) .battle-firstmove-badge.urgent {border-color:#fca5a5;background:#fef2f2;color:#dc2626;animation:obFmPulse 1s ease-in-out infinite}
html.fs-app-theme-dark :where(.obb) .battle-firstmove-badge {border-color:#475569;background:rgba(148,163,184,.16);color:#cbd5e1}
html.fs-app-theme-dark :where(.obb) .battle-firstmove-badge.urgent {border-color:#b91c1c;background:rgba(220,38,38,.18);color:#f87171}
@keyframes obFmPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){:where(.obb) .battle-firstmove-badge.urgent {animation:none}}
/* 내 회선 상태·지연 차감(2026-10-11, online.page.js liveNetPayload → Header.renderNet·renderLagDrop): 신호 막대 3개(주황=느림, 빨강 깜빡임=응답 없음)와 빨간 "−9.4s" */
:where(.obb) .battle-net-badge {display:none;align-items:flex-end;gap:calc(var(--ocv-u, 1px) * 1.5);height:calc(var(--ocv-u, 1px) * 11);margin-left:calc(var(--ocv-u, 1px) * 4);flex:0 0 auto;align-self:center}
:where(.obb) .battle-net-badge.show {display:inline-flex}
:where(.obb) .battle-net-badge i {display:block;width:calc(var(--ocv-u, 1px) * 3);border-radius:var(--ocv-u, 1px);background:#cbd5e1}
:where(.obb) .battle-net-badge i:nth-child(1) {height:calc(var(--ocv-u, 1px) * 4)}
:where(.obb) .battle-net-badge i:nth-child(2) {height:calc(var(--ocv-u, 1px) * 7)}
:where(.obb) .battle-net-badge i:nth-child(3) {height:calc(var(--ocv-u, 1px) * 10)}
:where(.obb) .battle-net-badge.weak i:nth-child(-n+2) {background:#d97706}
:where(.obb) .battle-net-badge.bad i:nth-child(1) {background:#dc2626}
:where(.obb) .battle-net-badge.bad {animation:obNetBlink 1s ease-in-out infinite}
@keyframes obNetBlink {50%{opacity:.35}}
:where(.obb) .battle-lag-badge {display:none;align-items:center;flex:0 0 auto;margin-left:calc(var(--ocv-u, 1px) * 4);padding:var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 6);border-radius:calc(var(--ocv-u, 1px) * 999);border:var(--ocv-u, 1px) solid #fca5a5;background:#fef2f2;color:#dc2626;font-size:calc(var(--ocv-u, 1px) * 10);font-weight:800;line-height:1.4;white-space:nowrap;align-self:center;font-variant-numeric:tabular-nums}
:where(.obb) .battle-lag-badge.show {display:inline-flex}
html.fs-app-theme-dark :where(.obb) .battle-net-badge i {background:#475569}
html.fs-app-theme-dark :where(.obb) .battle-net-badge.weak i:nth-child(-n+2) {background:#f59e0b}
html.fs-app-theme-dark :where(.obb) .battle-net-badge.bad i:nth-child(1) {background:#f87171}
html.fs-app-theme-dark :where(.obb) .battle-lag-badge {border-color:#b91c1c;background:rgba(220,38,38,.18);color:#f87171}
@media (prefers-reduced-motion:reduce){:where(.obb) .battle-net-badge.bad {animation:none}}
:where(.obb) .player-name-line {align-items:center}
:where(.obb) .player-name-line>b {align-self:center;align-items:center}
:where(.obb) .player-name-line>* {align-self:center}
:where(.obb) .battle-seat-photo img,
:where(.obb) .battle-seat-flag img,
:where(.obb) .battle-seat-photo-img {display:block}
:where(.obb) .player-row .player-timer-row .battle-seat-flag {margin-left:0}
:where(.obb) .player-row {min-height:calc(var(--ocv-u, 1px) * 41);box-sizing:border-box}
:where(.obb) .battle-seat-waiting {text-decoration-line:underline!important;text-decoration-style:solid!important;text-decoration-thickness:1px!important;text-underline-offset:calc(var(--ocv-u, 1px) * 2)!important}