@charset "utf-8";

:root {
  --cell: 44px;   /* 한 칸 크기 */
  --disc: 38px;   /* 돌 크기 */
  --board: calc(var(--cell) * 8); /* 8x8 보드 전체 */
  --oc-board-color: #008563;
}


body, h1, h2, h3, p, div, ul, ol, li, dl, dd, dt, table, form, blockquote, pre, address, input, textarea {
  margin: 0px;
  padding: 0px;
  font-family: 'Lato', sans-serif; /* 모든 요소의 폰트를 Lato로 설정 */
}

a,
button,
input,
textarea,
select,
label,
summary,
[role="button"],
[tabindex] {
  -webkit-tap-highlight-color: transparent;
}


body {
  background-color: transparent;
}

/* Fullscreen parent begins the iframe immediately below its topbar. Preserve the
   familiar 4px separation inside the child so fixed Review veils cover it too. */
body.ocv-overlay-inner-top-gap {
  box-sizing: border-box;
  padding-top: calc(var(--ocv-u, 1px) * 4);
}


/* Save 메뉴 (btnSavePhoto 옆 작은 드롭다운) */
.save-wrap { position: relative; display: inline-flex; align-items: center; }
.save-menu {
  position: absolute;
  /* 위로 열기: 더보기 패널이 툴바 위에 뜨는 배치에서 아래로 열면 패널/화면 하단에 잘림(2026-07-19) */
  bottom: 105%;
  left: 0;
  /* 우측 끝 버튼에서도 메뉴가 뷰어 밖으로 나가지 않도록 JS가 가로 보정값을 넣는다. */
  transform: translate(var(--save-menu-shift-x, 0px), calc(var(--ocv-u, 1px) * -4));
  min-width: calc(var(--ocv-u, 1px) * 140);
  background: #fff;
  color: #111827;
  border-radius: calc(var(--ocv-u, 1px) * 10);
  box-shadow: 0 calc(var(--ocv-u, 1px) * 4) calc(var(--ocv-u, 1px) * 12) rgba(0,0,0,0.15);
  padding: calc(var(--ocv-u, 1px) * 6) 0;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
  z-index: 999999;
}
.save-menu.open { opacity: 1; pointer-events: auto; }
.save-item{
  display:flex; align-items:center; gap:calc(var(--ocv-u, 1px) * 8);
  padding:calc(var(--ocv-u, 1px) * 10) calc(var(--ocv-u, 1px) * 16); font-size:calc(var(--ocv-u, 1px) * 15); font-weight:600; cursor:pointer;
}
.save-item + .save-item{ border-top:var(--ocv-u, 1px) solid #e5e7eb; }
.save-item:hover{ background:#f9fafb; }
.save-item.disabled{ color:#94a3b8; cursor:not-allowed; background:#f3f4f6; }

/* --- Edit Panel을 상단 toolbar와 동일 톤으로 --- */
#editPanel{
  display:none;
  max-width: calc(var(--board) + calc(var(--ocv-u, 1px) * 30));  /* 상단과 동일 폭 */
  margin:calc(var(--ocv-u, 1px) * 6) auto 0;                     /* 가운데 정렬 */
  box-sizing: border-box;
}
#editPanel .toolbar{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:calc(var(--ocv-u, 1px) * 8);
  padding:calc(var(--ocv-u, 1px) * 6) calc(var(--ocv-u, 1px) * 8);
  background:#f8f9fa;
  border:var(--ocv-u, 1px) solid #dee2e6;
  border-radius:calc(var(--ocv-u, 1px) * 8);
}

/* 에디트용 돌 선택 버튼도 상단 아이콘 버튼 높이에 맞춤 */
#editPanel .edit-option{
  width:calc(var(--ocv-u, 1px) * 36); height:calc(var(--ocv-u, 1px) * 36);
  display:flex; align-items:center; justify-content:center;
  border-radius:calc(var(--ocv-u, 1px) * 10);
  border:calc(var(--ocv-u, 1px) * 3) solid #01744d;
  background:#01744d;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .06s ease;
}
#editPanel .edit-option:active{ transform:translateY(var(--ocv-u, 1px)); }

/* 안쪽 돌 크기(검/백) */
#editPanel .edit-option .disc{ width:calc(var(--ocv-u, 1px) * 30); height:calc(var(--ocv-u, 1px) * 30); border-radius:50%; }
#editPanel .edit-option .disc.white{ background:#fff; border:0px solid #ccc; }
#editPanel .edit-option .disc.black{ background:#000; }

/* 완료/취소 버튼을 상단 vbtn 톤에 맞춤 */
#editPanel .actions{ display:flex; gap:calc(var(--ocv-u, 1px) * 6); margin-left:auto; }
#editPanel .actions .vbtn{
  padding:calc(var(--ocv-u, 1px) * 6) calc(var(--ocv-u, 1px) * 10); border:none; border-radius:calc(var(--ocv-u, 1px) * 6);
  font-weight:400; cursor:pointer; font-size:1.1rem;
}
#editPanel .actions .vbtn.ok{ background:#28a745; color:#fff; }
#editPanel .actions .vbtn.cancel{ background:#dc3545; color:#fff; }

#photoImportPreview{
  display:none;
  max-width: calc(var(--board) + 30px);
  margin:6px auto 0;
  padding:6px;
  box-sizing:border-box;
  background:#f8f9fa;
  border:1px solid #dee2e6;
  border-radius:8px;
}
#photoImportPreview canvas,
#photoImportPreview img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:6px;
  background:#fff;
}
body.photo-import-overlay-edit #photoImportPreview canvas,
body.photo-import-overlay-edit #photoImportPreview img{
  width:auto;
  max-width:100%;
  max-height:var(--photo-import-preview-max-h, 180px);
  margin:0 auto;
}
body.photo-import-edit #op_button{
  display:none !important;
}
body.photo-import-active #ocvOverlayCloseButton{
  display:none !important;
}

/* 드래그 스크롤 방지 */
#op_button {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;         /* Standard */
}

/* 보드판 드래그 방지 */
#ocgibo, #board, #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;
}

/* ----- Player header (top) ----- */
.player-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--ocv-u, 1px) * 5);   /* 좌우 유저 공간 중앙 여백(2026-07-11: 16px → 5px, 모바일과 통일) */
  padding:0px 0px calc(var(--ocv-u, 1px) * 5);
  width:calc(var(--ocv-u, 1px) * 382);
  border:0px solid #000;  
}


.player-row{
  display:flex;
  align-items:center;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
}

.player-row .badge.black {
  margin-right:calc(var(--ocv-u, 1px) * 6);   /* ← 원하는 만큼만 띄우기 */
}
.player-row.right .badge {
  margin-left:calc(var(--ocv-u, 1px) * 6);    /* ← 오른쪽 플레이어는 반대로 왼쪽에 간격 */
}

.player-row.right{
  justify-content:flex-end;
}

/* 퍼즐 및 Game Review 핵심 국면: 현재 차례 쪽 헤더 행 전체를 돌 색으로 강조한다.
   일반 분석/온라인 뷰어에는 적용하지 않는다. */
/* 퍼즐 흑 헤더↔보드는 5px, 백 헤더↔하단 컨트롤은 10px 간격을 유지한다. */
body.oc-puzzle-mode .player-header { gap:0; }
body.oc-puzzle-mode .player-header-black { padding-bottom:calc(var(--ocv-u, 1px) * 5); }
body.oc-puzzle-mode .player-header-white { padding-bottom:calc(var(--ocv-u, 1px) * 10); }
/* 차례 박스: 골드 테두리로 통일. 대신 돌 아이콘(뱃지)의 중복 골드 링은 제거한다. */
body.oc-puzzle-mode .player-row,
body.ocv-game-review-key-moments .player-row {
  min-width:0;
  min-height:calc(var(--ocv-u, 1px) * 48);
  padding:calc(var(--ocv-u, 1px) * 6) calc(var(--ocv-u, 1px) * 8);
  border-radius:calc(var(--ocv-u, 1px) * 8);
  box-sizing:border-box;
  box-shadow: inset 0 0 0 calc(var(--ocv-u, 1px) * 3) transparent;
}
.ocv-key-moment-move-nav {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(var(--ocv-u, 1px) * 4);
  min-width:0;
}
.ocv-key-moment-move-nav[hidden] { display:none !important; }
.ocv-key-moment-move-button {
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  width:100%;
  min-width:0;
  height:calc(var(--ocv-u, 1px) * 34);
  padding:0 0 calc(var(--ocv-u, 1px) * 2);
  align-items:center;
  justify-content:center;
  border:var(--ocv-u, 1px) solid rgba(148,163,184,.8);
  border-radius:calc(var(--ocv-u, 1px) * 8);
  background:rgba(255,255,255,.92);
  color:#172033;
  box-shadow:0 var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 3) rgba(15,23,42,.18);
  font:800 calc(var(--ocv-u, 1px) * 27)/1 system-ui,sans-serif;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  -webkit-touch-callout:none;
}
.ocv-key-moment-move-button:active { transform:scale(.96); }
.ocv-key-moment-move-button:disabled { opacity:.34; cursor:default; transform:none; }
body.oc-puzzle-mode .player-row.is-turn,
body.ocv-game-review-key-moments .player-row.is-turn { box-shadow: inset 0 0 0 calc(var(--ocv-u, 1px) * 3) #c9a93c; }
body.oc-puzzle-mode .player-header .badge.turn,
body.ocv-game-review-key-moments .player-header .badge.turn { box-shadow: none; }
/* 흑 차례: 진한 배경 + 흰 글자 (왼쪽 행 = 흑) */
body.oc-puzzle-mode .player-row:not(.right).is-turn,
body.ocv-game-review-key-moments .player-row:not(.right).is-turn { background:#1a1a1a; }
body.oc-puzzle-mode .player-row:not(.right).is-turn .player-name,
body.oc-puzzle-mode .player-row:not(.right).is-turn .player-name *,
body.ocv-game-review-key-moments .player-row:not(.right).is-turn .player-name,
body.ocv-game-review-key-moments .player-row:not(.right).is-turn .player-name * { color:#fff; }
body.oc-puzzle-mode .player-row:not(.right).is-turn .player-rating-live,
body.ocv-game-review-key-moments .player-row:not(.right).is-turn .player-rating-live { color:#fff !important; }
/* 진한 배경에 묻히는 흑 돌(뱃지)에 흰 테두리 */
body.oc-puzzle-mode .player-row:not(.right).is-turn .badge.black,
body.ocv-game-review-key-moments .player-row:not(.right).is-turn .badge.black { border-color:#fff; }
/* 백 차례: 밝은 배경 (오른쪽 행 = 백) */
body.oc-puzzle-mode .player-row.right.is-turn,
body.ocv-game-review-key-moments .player-row.right.is-turn { background:#f1f5f9; }

/* XOT 퍼즐: 돌 수 아이콘은 양쪽 모두 유지하되 색상 텍스트는 현재 차례인 행에만 표시한다.
   PlayerBlackName/PlayerWhiteName의 실제 textContent는 공유·부모 동기화가 계속 읽도록 남겨 둔다. */
body.oc-puzzle-mode.oc-xot-puzzle-mode .player-name {
  font-size:0 !important;
}
body.oc-puzzle-mode.oc-xot-puzzle-mode .player-row.is-turn .player-name::after {
  content:attr(data-xot-turn-label);
  display:block;
  font-size:calc(var(--ocv-tu, 1px) * 17);
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
}

/* 스프린트 단일 차례 바(turnbar=single, body.oc-single-turnbar): 백 행은 숨기고 흑 행 하나가
   현재 차례를 나타낸다. 돌 아이콘은 차례 색으로 바뀌고 돌 개수는 표시하지 않는다(2026-09-11). */
/* 백 행은 흐름에서 빼되(absolute) 높이는 측정 가능하게 남긴다: autoScale 이 "백 행이 있었을 때의 배율" 을
   계산해 --pz-turnbar-text 로 넘기고, 라벨·돌 아이콘은 그 배율만큼 역보정해 화면상 크기를 이전과 같게 유지한다.
   보드가 커져도 문구 크기는 그대로다. 아래 여백 10px 은 숨긴 백 행의 padding-bottom 을 대신한다(보드 하단 테두리 잘림 방지). */
body.oc-single-turnbar .player-header-white { position:absolute !important; left:0; top:0; visibility:hidden !important; pointer-events:none; }
body.oc-puzzle-mode.oc-single-turnbar #ocgibo { padding-bottom:calc(var(--ocv-u, 1px) * 10); }
body.oc-single-turnbar .player-row-black .badge span { visibility:hidden; }
body.oc-single-turnbar .player-row-black .badge.black {
  width:calc(calc(var(--ocv-u, 1px) * 28) * var(--pz-turnbar-text, 1)); height:calc(calc(var(--ocv-u, 1px) * 28) * var(--pz-turnbar-text, 1)); flex-basis:calc(calc(var(--ocv-u, 1px) * 28) * var(--pz-turnbar-text, 1));
}
body.oc-puzzle-mode.oc-xot-puzzle-mode.oc-single-turnbar .player-row.is-turn .player-name::after { font-size:calc(calc(var(--ocv-tu, 1px) * 17) * var(--pz-turnbar-text, 1)); }
body.oc-puzzle-mode.oc-single-turnbar .player-row-black.is-turn.is-white-turn { background:#f1f5f9; }
body.oc-puzzle-mode.oc-single-turnbar .player-row-black.is-turn.is-white-turn .player-name,
body.oc-puzzle-mode.oc-single-turnbar .player-row-black.is-turn.is-white-turn .player-name * { color:#000; }
body.oc-puzzle-mode.oc-single-turnbar .player-row-black.is-turn.is-white-turn .badge.black { background:#fff; border-color:#000; }

/* 이름 + (온라인 대전) 타이머 세로 스택 */
.player-name-wrap{ display:flex; flex:1 1 0; flex-direction:column; min-width:0; }
.player-row.right .player-name-wrap{ align-items:flex-end; }
.battle-seat-photo{ display:inline-flex; align-items:center; flex:0 0 auto; margin-right:calc(var(--ocv-u, 1px) * 4); }
.battle-seat-photo:empty{ display:none!important; margin-right:0; }
.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);
}
.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; }
.player-timer.show{ display:block; }
.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); }
.player-timer.is-low{ color:#b91c1c; }
.player-timer-row{ display:flex; gap:calc(var(--ocv-u, 1px) * 5); align-items:baseline; }
/* 후원 배지(oc_donor_badge_html): 크기가 글자(em) 기준이고 오른쪽 간격이 인라인 4px 라, 자리 글자 크기·간격을 칸 비율로 둔다(CSS 크기 방식에서 같이 커지게).
   예전 방식은 1px 기준 16px(상속값과 같음)·4px 로 그대로다. */
.battle-seat-donor{ font-size:calc(var(--ocv-u, 1px) * 16); }
.battle-seat-donor .oc-donor-badge{ margin-right:calc(var(--ocv-u, 1px) * 4) !important; }
.player-row.right .player-timer-row{ justify-content:flex-end; }
.player-rating-live{ display:none; font-size:calc(var(--ocv-tu, 1px) * 14); font-weight:450; font-variant-numeric:tabular-nums; }
.player-rating-live.show{ display:inline-block; }
.player-rating-live.rating-unofficial{ color:#999; }
.player-rating-live.rating-local{ color:#666; }
/* 퍼즐 스프린트 판정 배지: 출제 색 선수 행의 오른쪽 끝에 잠깐 표시. 서식·색은 스프린트 패널 .spr-flash 와
   동일(15px·700·4px 6px). 보드가 #ocgibo transform:scale(k) 로 확대되므로 --pz-verdict-inv(=1/k) 로 되돌려
   화면상 크기를 패널 플래시와 같게 맞춘다(JS 가 표시 시점에 계산). */
.puzzle-verdict-badge{
  --pz-verdict-inv:1;
  display:none;
  flex:0 0 auto;
  align-self:center;
  margin-left:auto;
  padding:calc(calc(var(--ocv-tu, 1px) * 4) * var(--pz-verdict-inv)) calc(calc(var(--ocv-tu, 1px) * 6) * var(--pz-verdict-inv));
  border:var(--ocv-u, 1px) solid #d1d5db;
  border-radius:calc(var(--ocv-u, 1px) * 999);
  background:#fff;
  color:#111827;
  font-size:calc(calc(var(--ocv-tu, 1px) * 15) * var(--pz-verdict-inv));
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}
.puzzle-verdict-badge.show{ display:inline-flex; align-items:center; }
.puzzle-verdict-badge.good{ background:#dcfce7; border-color:#86efac; color:#166534; }
.puzzle-verdict-badge.near{ background:#fef3c7; border-color:#fcd34d; color:#92400e; }
.puzzle-verdict-badge.bad{ background:#fee2e2; border-color:#fca5a5; color:#991b1b; }

/* 전체 기능 ocviewer: 흑은 보드 위, 백은 보드 아래에 같은 방향으로 배치한다.
   embed.html은 기존 좌우 헤더를 유지하므로 정적 body 클래스에만 한정한다. */
body.ocv-split-players .player-header{
  display:block;
  gap:0;
}
body.ocv-split-players .player-header-white{
  padding-top:calc(var(--ocv-u, 1px) * 5);
  padding-bottom:0;
}
body.ocv-split-players .player-header > .player-row{
  flex:1 1 auto;
  width:100%;
}
body.ocv-split-players .player-row,
body.ocv-split-players .player-row.right{
  flex:0 0 100%;
  justify-content:flex-start;
}
body.ocv-split-players .player-row .badge,
body.ocv-split-players .player-row.right .badge{
  margin-left:calc(var(--ocv-u, 1px) * 5) !important;
  margin-right:calc(var(--ocv-u, 1px) * 6);
}
body.ocv-split-players .player-row.right .player-name-wrap{
  align-items:flex-start;
}
body.ocv-split-players .player-row.right .player-timer-row{
  justify-content:flex-start;
}
body.ocv-split-players .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;
}
body.ocv-split-players .player-row .battle-seat-photo:empty{
  width:0;
  height:0;
  flex-basis:0;
  margin-right:0;
}
body.ocv-split-players .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);
}
body.ocv-split-players .player-row .player-name{
  width:100%;
  max-width:100%;
  text-align:left !important;
}
body.ocv-split-players .player-row .player-name-line,
body.ocv-split-players .player-row .player-label-name,
body.ocv-split-players .player-row .player-quest-link{
  text-align:left !important;
}
body.ocv-split-players .player-row .player-name-line{
  justify-content:flex-start;
}
/* 퍼즐·핵심 국면 차례 강조 박스를 보드 외곽선에 맞춰 좌우 1px씩 안쪽으로 둔다. */
body.oc-puzzle-mode.ocv-split-players .player-header > .player-row,
body.ocv-game-review-key-moments.ocv-split-players .player-header > .player-row{
  width:calc(100% - calc(var(--ocv-u, 1px) * 2));
  flex-basis:calc(100% - calc(var(--ocv-u, 1px) * 2));
  margin-left:var(--ocv-u, 1px);
  margin-right:var(--ocv-u, 1px);
}
/* 백 행 위·아래의 실제 보이는 간격을 5px로 맞춘다.
   아래쪽은 헤더 padding 대신 툴바 안쪽 여백 한 곳에서만 만든다. */
body.ocv-split-players #op_button.toolbar{
  margin-top:0;
  max-width:none;
  padding-top:calc(var(--ocv-u, 1px) * 5);
  padding-bottom:calc(var(--ocv-u, 1px) * 2);
  padding-left:calc(var(--ocv-u, 1px) * 3);
  padding-right:calc(var(--ocv-u, 1px) * 3);
}

/* 배지(숫자 동그라미) — 절대 찌그러지지 않도록 고정폭/고정높이+flex-basis 0 */
.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;
}


.badge.black{ background:#000; color:#fff; border:calc(var(--ocv-u, 1px) * 2) solid #000; }
.badge.white{ background:#fff; color:#000; border:calc(var(--ocv-u, 1px) * 2) solid #000; }

/* 턴(옐로 테두리) */
.player-header .badge.turn{ box-shadow:0 0 0 calc(var(--ocv-u, 1px) * 3) #c9a93c inset; }


/* 이름은 한 줄, 길면 … 처리, 보드와 겹치지 않도록 줄바꿈 없이 폭 제어 */
.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));      /* 화면 반 넘지 않게 가드(원하면 조정) */
}
.player-name .player-label-name{
  display:block;
}
.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;
}
.player-name .player-quest-link:hover{
  text-decoration:underline;
}
.player-name .player-quest-link:focus-visible{
  outline:var(--ocv-u, 1px) solid currentColor;
  outline-offset:calc(var(--ocv-u, 1px) * 2);
}
/* WOF 선수 이름 → 레이팅 프로필(gplayer.php). 색은 상속해 레이팅 색 클래스를 그대로 쓴다. */
.player-name .player-wof-link{
  color:inherit;
  font:inherit;
  font-weight:inherit;
  line-height:inherit;
  text-decoration:none;
  cursor:pointer;
}
.player-name .player-wof-link:hover{
  text-decoration:underline;
}
.player-name .player-wof-link:focus-visible{
  outline:var(--ocv-u, 1px) solid currentColor;
  outline-offset:calc(var(--ocv-u, 1px) * 2);
}
/* 이름/레이팅은 복사할 수 있어야 한다(#ocgibo 의 보드 드래그 방지 규칙이 헤더까지 상속되던 것 해제). */
.player-header .player-name,
.player-header .player-rating,
.player-header .player-rating-live{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}
.player-name .player-rating{
  display:block;
  color:#111;
  font-weight:400;
  font-size:.82em;
  margin-top:calc(var(--ocv-u, 1px) * 2);
}
/* === Bottom Toolbar – Modern, compact, board-attached === */

/* control strip layout reset (HTML 구조상 필요) */
#control{
  float:none !important;
  width:auto !important;
  background:transparent !important;
}

/* embed.html은 별도 2열 구성을 유지한다. */
body.embed-viewer #op_button.toolbar .flex-break{
  flex-basis:100%;
  width:100%;
  height:0;
  margin:0;
  padding:0;
}

#op_button.toolbar{
  /* glassy container */
  position:relative;
  z-index:1000;
  display:flex;
  align-items:center;
  background: rgba(255,255,255,0.9);
  border:var(--ocv-u, 1px) solid rgba(0,0,0,0.08);
  border-radius: calc(var(--ocv-u, 1px) * 14);
  box-shadow:0 calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 10) rgba(0,0,0,.05);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  
  row-gap: calc(var(--ocv-u, 1px) * 3);
  column-gap: calc(var(--ocv-u, 1px) * 6);
  padding:calc(var(--ocv-u, 1px) * 6) calc(var(--ocv-u, 1px) * 8); 

  /* layout */
  max-width: calc(var(--board) + calc(var(--ocv-u, 1px) * 10));
  /* 텍스트(ACCURACY/DEPTH)↔버튼 상단 여백은 2px로 최소화하고, 그만큼을 버튼 하단 여백으로 이동 */
  margin: calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 7);
  flex-wrap: wrap;
  overflow:visible;
}

#op_button.toolbar #first,
#op_button.toolbar #last{
  display:none !important;
}

/* Buttons – flat & crisp */
#op_button.toolbar button{
  -webkit-appearance: none;
  appearance: none;
  height: calc(var(--ocv-u, 1px) * 36);
  min-width: calc(var(--ocv-u, 1px) * 46);
  padding: 0 calc(var(--ocv-u, 1px) * 10);

  border: var(--ocv-u, 1px) solid rgba(0,0,0,0.12);
  border-radius: calc(var(--ocv-u, 1px) * 10);
  background: #ffffff;
  color: #222;
  font-size: calc(var(--ocv-u, 1px) * 16);
  font-weight: 600;
  line-height: calc(var(--ocv-u, 1px) * 32);
  cursor: pointer;

  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  box-shadow: 0 var(--ocv-u, 1px) 0 rgba(255,255,255,0.6) inset;
}


/* Small screens */
@media (max-width: 420px){  
  
}


@media (hover: hover) and (pointer: fine){
  #op_button.toolbar button:hover{
    transform: translateY(calc(var(--ocv-u, 1px) * -1.5));
    box-shadow: 0 calc(var(--ocv-u, 1px) * 6) calc(var(--ocv-u, 1px) * 12) rgba(0,0,0,0.16);
    background:#f7f7f7;
  }
}  
#op_button.toolbar button:active{
  transform: translateY(0);
  box-shadow: 0 calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 6) rgba(0,0,0,0.14);
}




/* Icon & toggles – unify size and weight */
#op_button.toolbar .icon,
#op_button.toolbar .icon-toggle{
  height: calc(var(--ocv-u, 1px) * 36);
  min-width: calc(var(--ocv-u, 1px) * 42);
  padding: 0;
  background: #fff;
  border: var(--ocv-u, 1px) solid rgba(0,0,0,0.12);
  border-radius: calc(var(--ocv-u, 1px) * 10);
  color: #333;
  box-shadow: 0 var(--ocv-u, 1px) 0 rgba(255,255,255,0.6) inset;
}
#op_button.toolbar .icon svg,
#op_button.toolbar .icon-toggle svg{
  width:calc(var(--ocv-u, 1px) * 21); height:calc(var(--ocv-u, 1px) * 21);
}
#btnAI svg[hidden]{display:none!important}
#op_button.toolbar #btnDiscAnim svg{
  width:calc(var(--ocv-u, 1px) * 24); height:calc(var(--ocv-u, 1px) * 24);
}

#op_button.toolbar .tooltip_left{
  margin-left: auto;
}

#op_button.toolbar #btnAnalyze{
  width:calc(var(--ocv-u, 1px) * 42);
  min-width:calc(var(--ocv-u, 1px) * 42);
  position:relative;
}

#op_button.toolbar #btnAnalyze .analyze-busy{
  display:none;
  width:calc(var(--ocv-u, 1px) * 18);
  height:calc(var(--ocv-u, 1px) * 18);
  border:calc(var(--ocv-u, 1px) * 2) solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  box-sizing:border-box;
  animation:ocvAnalyzeBusySpin 0.75s linear infinite;
}

#op_button.toolbar #btnAnalyze[data-analyze-busy="1"] .analyze-icon{
  display:none;
}

#op_button.toolbar #btnAnalyze[data-analyze-busy="1"] .analyze-busy{
  display:inline-block;
}

@keyframes ocvAnalyzeBusySpin{
  to { transform:rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  #op_button.toolbar #btnAnalyze .analyze-busy{
    animation:none;
    border-right-color:currentColor;
  }
}

#op_button.toolbar #btnNewGame svg{
  width:calc(var(--ocv-u, 1px) * 30);
  height:calc(var(--ocv-u, 1px) * 23);
}

/* Toggle ON – gold ring, clearer state */
#op_button.toolbar .icon-toggle.on{
  background:#fffdf3;
  border-color:#c9a93c;
  box-shadow: inset 0 0 0 calc(var(--ocv-u, 1px) * 2) #c9a93c, 0 var(--ocv-u, 1px) 0 rgba(255,255,255,0.6) inset;
}

/* Focus visibility (keyboard) */
#op_button.toolbar button:focus-visible{
  outline:none;
  box-shadow: 0 0 0 calc(var(--ocv-u, 1px) * 3) rgba(59,130,246,0.35);
}

/* 6) 숨긴 체크박스는 화면 밖으로 */
.hidden{ position:absolute !important; left:calc(var(--ocv-u, 1px) * -9999) !important; }


/* Disabled (브라우저 기본 대비 개선) */
#op_button.toolbar button:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

#op_button.toolbar .tooltip button:disabled,
#op_button.toolbar .tooltip_left button:disabled {
  pointer-events: none;
}

.tooltip_left {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* 말풍선 텍스트 (버튼 왼쪽에 표시) */
.tooltip_left .tooltip-text {
  visibility: hidden;
  opacity: 0;
  /* 글자 크기·줄높이는 상속에 맡기지 않는다(2026-09-16). 상속하면 앱 셸·맥 전용 타이포그래피
     규칙에 따라 기기마다 달라지고, 줄높이가 normal 이면 상자 높이와 어긋나 글자가 위로 붙는다. */
  font-size: calc(var(--ocv-u, 1px) * 16);
  line-height: 1.2;
  background: #fff;
  color: #333;
  text-align: center;
  padding: calc(var(--ocv-u, 1px) * 6) calc(var(--ocv-u, 1px) * 10);
  border-radius: calc(var(--ocv-u, 1px) * 4);
  box-shadow: 0 calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 8) rgba(0,0,0,0.15);
  position: absolute;
  top: 50%;
  right: 120%;                 /* 요소 기준 오른쪽에서 90% 만큼 이동하여 버튼 왼쪽에 표시 */
  transform: translateY(-50%);
  transition: opacity 0.15s ease-in-out;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

/* 말풍선 화살표 (→ 버튼 쪽을 가리킴) */
.tooltip_left .tooltip-text::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;                  /* 말풍선 박스의 오른쪽 끝에 화살표 */
  transform: translateY(-50%);
  border-width: calc(var(--ocv-u, 1px) * 6);
  border-style: solid;
  border-color: transparent transparent transparent #fff;
}

/* 터치로 여는 분석 버튼 툴팁 제거(모바일 터치에선 툴팁 안 뜸). PC hover 는 아래 media query 로 유지. */

#op_button.toolbar .tooltip_left.tooltip-analyze .tooltip-text{
  top:auto;
  right:0;
  bottom:calc(100% + calc(var(--ocv-u, 1px) * 8));
  transform:none;
  z-index:1001;
}

#op_button.toolbar .tooltip_left.tooltip-analyze .tooltip-text::after{
  top:100%;
  left:auto;
  right:calc(var(--ocv-u, 1px) * 16);
  transform:none;
  border-color:#fff transparent transparent transparent;
}



.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip.ocv-disabled-shell,
.tooltip[aria-disabled="true"],
.tooltip_left.ocv-disabled-shell,
.tooltip_left[aria-disabled="true"],
label.ocv-disabled-shell {
  cursor: not-allowed;
}

.tooltip.ocv-disabled-shell .icon-toggle,
.tooltip_left.ocv-disabled-shell .icon-toggle,
label.ocv-disabled-shell .icon-toggle {
  cursor: not-allowed;
}

/* FTD 대회 라이브 중계 뷰어(ftd_live=1 = body.oc-ftd-live): 다른 기보를 불러오거나 판을
   바꾸는 컨트롤 비활성 — 내 게임(btnNewGame)·불러오기(btnSaveGame)·보드 편집(btnEditBoard).
   중계는 릴레이 폴링(ocviewer.ftd-live.js)이 transcript diff 로 보드를 갱신하므로, 편집/다른
   기보 로드는 중계 갱신을 멈추거나(loadExternalLive 가 editMode 면 false) 상태를 깨뜨린다.
   평가/분석·공유·이미지저장 등은 유지. JS disabled 는 재활성 경로가 있어 CSS 로 하드 잠금. */
body.oc-ftd-live #btnNewGame,
body.oc-ftd-live #btnSaveGame,
body.oc-ftd-live #btnEditBoard {
  opacity: .4 !important;
  pointer-events: none !important;
  cursor: not-allowed;
}

/* 말풍선 텍스트 (버튼 위에 표시 — 하단 툴바라 아래로 띄우면 화면 밖으로 짤림) */
.tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  /* 글자 크기·줄높이는 상속에 맡기지 않는다(2026-09-16). 상속하면 앱 셸·맥 전용 타이포그래피
     규칙에 따라 기기마다 달라지고, 줄높이가 normal 이면 상자 높이와 어긋나 글자가 위로 붙는다. */
  font-size: calc(var(--ocv-u, 1px) * 16);
  line-height: 1.2;
  background: #fff;
  color: #333;
  text-align: center;
  padding: calc(var(--ocv-u, 1px) * 6) calc(var(--ocv-u, 1px) * 10);
  border-radius: calc(var(--ocv-u, 1px) * 4);
  box-shadow: 0 calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 8) rgba(0,0,0,0.15);
  position: absolute;
  bottom: 125%;                /* 버튼 위로 띄우기 */
  left: 50%;
  /* --tt-shift: 뷰포트 밖으로 짤릴 때 JS(ocviewer.ui.js)가 안쪽으로 밀어주는 보정값 */
  transform: translateX(calc(-50% + var(--tt-shift, 0px)));
  transition: opacity 0.15s ease-in-out;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

/* 말풍선 화살표 (아래쪽 버튼을 가리키도록; 박스가 보정돼도 버튼 중앙을 가리키게 역보정) */
.tooltip .tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;                   /* 텍스트 박스 바로 아래 */
  left: calc(50% - var(--tt-shift, 0px));
  transform: translateX(-50%);
  border-width: calc(var(--ocv-u, 1px) * 6);
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.tooltip.tooltip-start .tooltip-text {
  left: 0;
  transform: none;
}

.tooltip.tooltip-start .tooltip-text::after {
  left: calc(var(--ocv-u, 1px) * 18);
  transform: none;
}

.tooltip.tooltip-end .tooltip-text {
  left: auto;
  right: 0;
  transform: none;
}

.tooltip.tooltip-end .tooltip-text::after {
  left: auto;
  right: calc(var(--ocv-u, 1px) * 18);
  transform: none;
}

#morePanel > .tooltip:first-of-type .tooltip-text {
  left: 0;
  transform: none;
}

#morePanel > .tooltip:first-of-type .tooltip-text::after {
  left: calc(var(--ocv-u, 1px) * 18);
  transform: none;
}

#morePanel > .tooltip:last-of-type .tooltip-text {
  left: auto;
  right: 0;
  transform: none;
}

#morePanel > .tooltip:last-of-type .tooltip-text::after {
  left: auto;
  right: calc(var(--ocv-u, 1px) * 18);
  transform: none;
}

/* 기본: 숨김. 표시는 PC(hover:hover, pointer:fine)에서 마우스오버 시에만(아래 media query).
   터치 환경에서는 툴팁을 띄우지 않는다(무조건 hover 규칙은 터치 sticky-hover 를 유발하므로 제거). */
.tooltip .tooltip-text { visibility: hidden; opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .tooltip.ocv-tooltip-hover-open .tooltip-text,
  .tooltip_left.ocv-tooltip-hover-open .tooltip-text,
  .tooltip.ocv-tooltip-focus-open .tooltip-text,
  .tooltip_left.ocv-tooltip-focus-open .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
}

/* 터치 환경(모바일)에서는 툴팁을 표시하지 않는다(요구사항: 터치로는 툴팁 안 뜸).
   터치로 열던 focus-within / ocv-tooltip-touch-open 표시 규칙을 제거. */

/* 포탈로 이동된 전역 공유 메뉴 기본 스타일 */
#shareMenu {
  /* 포탈이 위치를 담당하므로 position은 기본값(static) */
  width: max-content;
  min-width: calc(var(--ocv-u, 1px) * 140);
  max-width: calc(var(--ocv-u, 1px) * 220);
  white-space: nowrap;

  background: #fff;
  color: #111827;
  border-radius: calc(var(--ocv-u, 1px) * 10);
  box-shadow: 0 calc(var(--ocv-u, 1px) * 4) calc(var(--ocv-u, 1px) * 12) rgba(0,0,0,0.15);
  padding: calc(var(--ocv-u, 1px) * 6) 0;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* 열렸을 때 */
#shareMenu.open {
  opacity: 1;
  pointer-events: auto;
}

/* 항목들(아이콘+텍스트) */
#shareMenu .share-item {
  display: flex;
  align-items: center;
  gap: calc(var(--ocv-u, 1px) * 8);
  padding: calc(var(--ocv-u, 1px) * 10) calc(var(--ocv-u, 1px) * 16);
  font-size: calc(var(--ocv-u, 1px) * 15);
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  cursor: pointer;
  background: transparent;
  text-align: left;
}
#shareMenu .share-item + .share-item { border-top: var(--ocv-u, 1px) solid #e5e7eb; }
#shareMenu .share-item:hover { background: #f9fafb; }

/* 아이콘 */
#shareMenu .icons { width:calc(var(--ocv-u, 1px) * 18); height:calc(var(--ocv-u, 1px) * 18); flex-shrink:0; color:#374151; stroke-width:2; }


/* Import(게임 불러오기) 메뉴도 포탈로 이동되므로 동일 스타일 적용 */
#saveGameMenu {
  width: max-content;
  min-width: calc(var(--ocv-u, 1px) * 140);
  max-width: calc(var(--ocv-u, 1px) * 220);
  white-space: nowrap;
  background: #fff;
  color: #111827;
  border-radius: calc(var(--ocv-u, 1px) * 10);
  box-shadow: 0 calc(var(--ocv-u, 1px) * 4) calc(var(--ocv-u, 1px) * 12) rgba(0,0,0,0.15);
  padding: calc(var(--ocv-u, 1px) * 6) 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
#saveGameMenu.open {
  opacity: 1;
  pointer-events: auto;
}
#saveGameMenu .share-item {
  display: flex;
  align-items: center;
  gap: calc(var(--ocv-u, 1px) * 8);
  padding: calc(var(--ocv-u, 1px) * 10) calc(var(--ocv-u, 1px) * 16);
  font-size: calc(var(--ocv-u, 1px) * 15);
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  cursor: pointer;
  background: transparent;
  text-align: left;
}
#saveGameMenu .share-item + .share-item { border-top: var(--ocv-u, 1px) solid #e5e7eb; }
#saveGameMenu .share-item:hover { background: #f9fafb; }
#saveGameMenu .share-item.disabled {
  color: #94a3b8;
  cursor: not-allowed;
  background: #f3f4f6;
}
#saveGameMenu .icons { width:calc(var(--ocv-u, 1px) * 18); height:calc(var(--ocv-u, 1px) * 18); flex-shrink:0; color:#374151; stroke-width:2; }

#newGameMenu {
  width: max-content;
  min-width: calc(var(--ocv-u, 1px) * 140);
  max-width: calc(var(--ocv-u, 1px) * 200);
  white-space: nowrap;
  background: #fff;
  color: #111827;
  border-radius: calc(var(--ocv-u, 1px) * 10);
  box-shadow: 0 calc(var(--ocv-u, 1px) * 4) calc(var(--ocv-u, 1px) * 12) rgba(0,0,0,0.15);
  padding: calc(var(--ocv-u, 1px) * 6) 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
#newGameMenu.open {
  opacity: 1;
  pointer-events: auto;
}
#newGameMenu .share-item {
  display: flex;
  align-items: center;
  gap: calc(var(--ocv-u, 1px) * 8);
  padding: calc(var(--ocv-u, 1px) * 10) calc(var(--ocv-u, 1px) * 16);
  font-size: calc(var(--ocv-u, 1px) * 15);
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  cursor: pointer;
  background: transparent;
}
#newGameMenu .share-item + .share-item { border-top: var(--ocv-u, 1px) solid #e5e7eb; }
#newGameMenu .share-item:hover { background: #f9fafb; }
#newGameMenu .icons { width:calc(var(--ocv-u, 1px) * 18); height:calc(var(--ocv-u, 1px) * 18); flex-shrink:0; color:#374151; stroke-width:2; }


/* === 공유 메뉴: 버튼 오른쪽 + 하단 정렬 === */
#op_button.toolbar .share-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#op_button.toolbar .share-wrap .share-menu {
  /* JavaScript에서 body로 이동되므로 기본 스타일만 유지 */
  width: max-content;
  min-width: calc(var(--ocv-u, 1px) * 140);
  max-width: calc(var(--ocv-u, 1px) * 200);
  white-space: nowrap;

  background: #fff;
  color: #111827;
  border-radius: calc(var(--ocv-u, 1px) * 10);
  box-shadow: 0 calc(var(--ocv-u, 1px) * 4) calc(var(--ocv-u, 1px) * 12) rgba(0,0,0,0.15);
  padding: calc(var(--ocv-u, 1px) * 6) 0;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
#op_button.toolbar .share-wrap .share-menu.open {
  opacity: 1;
  pointer-events: auto;
}

/* 아이콘 (이름 충돌 방지 → .icons 사용) */
.share-menu .share-item .icons {
  width: calc(var(--ocv-u, 1px) * 18);
  height: calc(var(--ocv-u, 1px) * 18);
  flex-shrink: 0;
  color: #374151;   /* 텍스트와 어울리는 회색 */
  stroke-width: 2;
}

/* 메뉴 항목 */
#op_button.toolbar .share-wrap .share-menu .share-item {
  display: flex;           /* 아이콘+텍스트 가로 정렬 */
  align-items: center;
  gap: calc(var(--ocv-u, 1px) * 8);
  padding: calc(var(--ocv-u, 1px) * 10) calc(var(--ocv-u, 1px) * 16);
  font-size: calc(var(--ocv-u, 1px) * 15);
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  cursor: pointer;
  background: transparent;
  text-align: left;
}
#op_button.toolbar .share-wrap .share-menu .share-item + .share-item {
  border-top: var(--ocv-u, 1px) solid #e5e7eb;
}
#op_button.toolbar .share-wrap .share-menu .share-item:hover {
  background: #f9fafb;
}


/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #op_button.toolbar button{ transition:none; }
  #op_button.toolbar button:hover,
  #op_button.toolbar button:active{ transform:none; }
}


/* --- score panel (same as before) --- */

.move-indicator{
  min-width:calc(var(--ocv-u, 1px) * 72); text-align:center; font-weight:800; font-size:calc(var(--ocv-u, 1px) * 18);
  padding:calc(var(--ocv-u, 1px) * 4) calc(var(--ocv-u, 1px) * 12); border:calc(var(--ocv-u, 1px) * 2) solid #9A9169; border-radius:calc(var(--ocv-u, 1px) * 10); background:#fff;
}
#BlackFrame, #WhiteFrame, #NextMove { display:none !important; }



/* === Toolbar 버튼 가독성 업그레이드 === */

/* 공통: 활성(기본) 모습을 살짝 또렷하게 */
#op_button.toolbar button,
#op_button.toolbar .icon-toggle {
  background: #fff;
  color: #1f2937;                 /* 진한 텍스트 */
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 var(--ocv-u, 1px) 0 rgba(255,255,255,.6) inset;
}

/* hover/active는 '활성'에만 적용되도록 */
@media (hover:hover) and (pointer:fine){
  #op_button.toolbar button:not(:disabled):hover,
  #op_button.toolbar .icon-toggle:not(:disabled):hover{
    transform: translateY(calc(var(--ocv-u, 1px) * -1.5));
    box-shadow: 0 calc(var(--ocv-u, 1px) * 6) calc(var(--ocv-u, 1px) * 12) rgba(0,0,0,.16);
    background:#f5f7fa;
  }
}
#op_button.toolbar button:not(:disabled):active,
#op_button.toolbar .icon-toggle:not(:disabled):active{
  transform: translateY(0);
  box-shadow: 0 calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 6) rgba(0,0,0,.14);
}

/* 토글 ON 표기(금색 링)는 유지하되 더 선명하게 */
#op_button.toolbar .icon-toggle.on{
  background:#fffdf5;
  border-color:#c9a93c;
  box-shadow: inset 0 0 0 calc(var(--ocv-u, 1px) * 2) #c9a93c, 0 var(--ocv-u, 1px) 0 rgba(255,255,255,.6) inset;
  color:#6b5b1e;
}

/* ✨ 핵심: 비활성(Disabled)을 확실히 구분 */
#op_button.toolbar button:disabled,
#op_button.toolbar .icon-toggle:disabled{
  background:#f3f4f6;            /* 평평한 회색 배경 */
  color:#94a3b8;                  /* 옅은 문자색 */
  border-color:#e5e7eb;           /* 옅은 테두리 */
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  filter: grayscale(80%);         /* 아이콘/텍스트 전체를 탈색 */
  opacity: 0.9;                   /* 투명도는 과하게 낮추지 않기 */
}

/* 비활성 아이콘 SVG도 옅게 */
#op_button.toolbar button:disabled svg,
#op_button.toolbar .icon-toggle:disabled svg{
  opacity:.55;
}

/* 키보드 포커스 링(활성만) */
#op_button.toolbar button:focus-visible:not(:disabled),
#op_button.toolbar .icon-toggle:focus-visible:not(:disabled){
  outline:none;
  box-shadow: 0 0 0 calc(var(--ocv-u, 1px) * 3) rgba(59,130,246,.35);
}

/* 작은 화면에서도 차이 유지 */
@media (max-width: 420px){
  #op_button.toolbar button:disabled,
  #op_button.toolbar .icon-toggle:disabled{
    filter: grayscale(90%);
  }
}


.loss-circle {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:calc(var(--ocv-u, 1px) * 14);
  height:calc(var(--ocv-u, 1px) * 14);
  margin-bottom:calc(var(--ocv-u, 1px) * 4);
  border-radius:50%;
  font-size:calc(var(--ocv-u, 1px) * 12);
  font-weight:bold;
  vertical-align:middle;
}
.loss-circle.black {
  background:#000;
  border:calc(var(--ocv-u, 1px) * 2) solid #000;
  color:#fff;
}
.loss-circle.white {
  border:calc(var(--ocv-u, 1px) * 2) solid #000;
  background:#fff;
  color:#000;
}


#ocgibo {
  width: auto;
  height: auto;
  border-style: solid;
  border-width: 0px;
  border-color: black;
  /* 보드 상자 안 기본 글자 크기(2026-10-11): 따로 정하지 않은 글자(분석 패널·하단 요약·em 단위 등)는 문서 기본 16px 을 물려받았는데,
     CSS 크기 방식에선 상자만 칸 비율로 줄어 글자가 넘쳤다(게시글 임베드에서 DEPTH 가 레벨 버튼을 침범). 예전 방식은 1px 기준이라 16px 그대로. */
  font-size: calc(var(--ocv-u, 1px) * 16);
}

/* iPad 앱에서 #ocgibo 전체 transform 확대는 레이아웃을 그대로 보존하지만 WebKit이
   작은 글자를 비트맵처럼 확대해 흐려지게 한다. 원본의 자리·크기는 유지한 채 최종 좌표에
   네이티브 해상도 텍스트를 겹쳐 그린다(포인터 이벤트는 원본 링크가 그대로 받음). */
.ocv-hidpi-text-source {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
.ocv-hidpi-image-source {
  opacity: 0 !important;
}
.ocv-hidpi-ghost-source {
  opacity: 0 !important;
}
.ocv-hidpi-shape-source {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.ocv-hidpi-svg-source {
  opacity: 0 !important;
}
.ocv-hidpi-evalbar-source {
  opacity: 0 !important;
}
.ocv-hidpi-component-source,
.ocv-hidpi-control-source {
  opacity: 0 !important;
}
/* 말풍선은 복제본이 최종 크기로 덮으므로 확대 레이어 안의 흐린 원본을 감춘다.
   감추지 않으면 두 글자가 겹쳐 찍혀 상자는 제자리인데 글자만 어긋나 보인다.
   opacity 0 이라 레이아웃과 히트테스트는 그대로다(말풍선은 pointer-events:none). */
.ocv-hidpi-floating-source {
  opacity: 0 !important;
}
#ocvHiDpiTextOverlay {
  position: absolute;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  overflow: visible;
}
/* Deep menu copies retain .save-menu.open (pointer-events:auto). Disable every
   painted descendant so taps reach the original controls below, including on
   older WebKit versions without inert support. */
#ocvHiDpiTextOverlay * {
  pointer-events: none !important;
}
.ocv-hidpi-text-copy {
  position: absolute;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  white-space: pre;
  line-height: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.ocv-hidpi-image-copy {
  position: absolute;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  image-rendering: auto;
}
.ocv-hidpi-shape-copy {
  position: absolute;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.ocv-hidpi-ghost-copy {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: content-box;
  transform-origin: 0 0;
  pointer-events: none;
}
.ocv-hidpi-svg-copy {
  position: absolute;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}
.ocv-hidpi-evalbar-copy {
  position: absolute;
  display: block;
  min-width: 0;
  padding: 0;
  pointer-events: none;
}
.ocv-hidpi-evalbar-copy .oc-eval-bar__black,
.ocv-hidpi-evalbar-copy .oc-eval-bar__white {
  transition: none;
}
.ocv-hidpi-zoom-holder {
  position: absolute;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  pointer-events: none;
}
.ocv-hidpi-component-copy,
.ocv-hidpi-control-copy,
.ocv-hidpi-floating-copy {
  pointer-events: none !important;
}
.ocv-hidpi-pseudo-copy {
  pointer-events: none !important;
}
/* #morePanel의 ID는 복제본에서 중복 DOM ID를 만들지 않도록 제거한다. 원본의
   ID 기반 자식 배치 규칙만 전용 클래스로 이어 받아 패널과 아이콘 간격을 보존한다. */
.ocv-hidpi-more-panel-copy > .tooltip,
.ocv-hidpi-more-panel-copy > .share-wrap {
  width: 42px;
  min-width: 42px;
  justify-self: center;
  display: flex;
}
.ocv-hidpi-more-panel-copy > .share-wrap > .tooltip,
.ocv-hidpi-more-panel-copy > .tooltip > label,
.ocv-hidpi-more-panel-copy > .tooltip > .save-wrap {
  display: flex;
  width: 100%;
  min-width: 0;
}
.ocv-hidpi-more-panel-copy > .share-wrap .icon-toggle,
.ocv-hidpi-more-panel-copy > .tooltip .icon-toggle {
  width: 100%;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

/* autoScale이 늦거나 초기 측정에 실패해도 뷰어 전체를 숨기지 않는다.
   자연 크기를 먼저 보여 주고 autoScale이 준비되면 기존처럼 최종 크기를 적용한다. */

#ocbody {
  width: auto;
  height: auto;
  border-style: solid;
  border-width: 0px;
  border-color: black;
}

#ocboard {
  width: auto;
  height: auto;
  border-style: solid;
  border-width: 0px;
  border-color: black;
}

#ocBoardStage {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  width: max-content;
}

.oc-eval-bar {
  position: relative;
  flex: 0 0 calc(var(--ocv-u, 1px) * 24);
  align-self: stretch;
  width: calc(var(--ocv-u, 1px) * 24);
  height: auto;
  margin: calc(var(--ocv-u, 1px) * -1) calc(var(--ocv-u, 1px) * 4) calc(var(--ocv-u, 1px) * -1) 0;
  overflow: visible;
  border: var(--ocv-u, 1px) solid rgba(17, 24, 39, .72);
  border-radius: calc(var(--ocv-u, 1px) * 3);
  background: #111827;
  box-sizing: border-box;
  box-shadow: 0 0 0 var(--ocv-u, 1px) rgba(255, 255, 255, .18) inset;
  cursor: help;
  touch-action: manipulation;
}

.oc-eval-bar[hidden] { display: none !important; }

.oc-eval-bar:focus-visible {
  outline: calc(var(--ocv-u, 1px) * 2) solid #2563eb;
  outline-offset: calc(var(--ocv-u, 1px) * 2);
}

.oc-eval-bar-tooltip-host {
  position: fixed;
  display: block;
  width: 0;
  height: 0;
  z-index: 1001;
}

.oc-eval-bar-tooltip-host .tooltip-text {
  top: 0;
  bottom: auto;
  left: 0;
  width: max-content;
  max-width: min(calc(var(--ocv-u, 1px) * 320), calc(100vw - calc(var(--ocv-u, 1px) * 48)));
  margin: 0;
  transform: translateY(-50%);
  white-space: normal;
}

.oc-eval-bar-tooltip-host .tooltip-text::after {
  width: calc(var(--ocv-u, 1px) * 10);
  height: calc(var(--ocv-u, 1px) * 10);
  top: 50%;
  right: auto;
  bottom: auto;
  left: calc(var(--ocv-u, 1px) * -5);
  margin: 0;
  border: 0;
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
}

.oc-eval-bar-tooltip-host.ocv-tooltip-hover-open .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.oc-eval-bar__track,
.oc-eval-bar__black,
.oc-eval-bar__white {
  position: absolute;
  left: 0;
  right: 0;
}

.oc-eval-bar__track {
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.oc-eval-bar__black {
  top: 0;
  height: 50%;
  background: #111827;
  transition: height 1s ease-out;
}

.oc-eval-bar__white {
  bottom: 0;
  height: 50%;
  background: #f8fafc;
  transition: height 1s ease-out;
}

.oc-eval-bar__value {
  position: absolute;
  top: calc(var(--ocv-u, 1px) * 6);
  left: 50%;
  z-index: 2;
  min-width: 0;
  width: 100%;
  transform: translateX(-50%);
  transform-origin: center;
  color: #fff;
  font-size: calc(var(--ocv-u, 1px) * 11);
  font-weight: 800;
  line-height: 1;
  letter-spacing: calc(var(--ocv-u, 1px) * -.2);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 2) rgba(0, 0, 0, .8);
  pointer-events: none;
}

.oc-eval-bar.is-white-favored .oc-eval-bar__value {
  top: auto;
  bottom: calc(var(--ocv-u, 1px) * 6);
  color: #111827;
  text-shadow: 0 var(--ocv-u, 1px) var(--ocv-u, 1px) rgba(255, 255, 255, .7);
}

#btnEvalBar svg { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .oc-eval-bar__black,
  .oc-eval-bar__white { transition: none; }
}


#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;
}
/* 확대 시(전체화면 fit 모드 + 폭채움 확대 oc-textfit 모두): 보드(흑/백 아이콘·숫자 포함)는
   transform:scale 로 함께 커지지만, 플레이어 텍스트(이름·레이팅·시계)는 보드 확대를 80%만 따라간다. */
body.oc-fitmode .player-name,
body.oc-textfit .player-name { font-size: calc(calc(var(--ocv-tu, 1px) * 17) * var(--fit-text-factor, 1)); }
body.oc-fitmode .player-timer,
body.oc-fitmode .player-rating-live,
body.oc-textfit .player-timer,
body.oc-textfit .player-rating-live { font-size: calc(calc(var(--ocv-tu, 1px) * 14) * var(--fit-text-factor, 1)); }
/* 확대된 앱에서도 선수 정보 2행의 국기 크기·간격은 이름/레이팅과 같은 비율로
   역보정한다. 바깥 #ocgibo transform 뒤에는 웹 기본값(20×15px, 4px 간격)과 같아진다. */
body.oc-fitmode .player-timer-row .oc-flag,
body.oc-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;
}
body.oc-fitmode .player-timer-row .battle-seat-flag,
body.oc-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;
}
.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
  );
}

.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);
}

.oc-frame-wood-right {
  top: 0;
  right: calc(var(--ocv-u, 1px) * -14);
  bottom: 0;
  width: calc(var(--ocv-u, 1px) * 14);
}

.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);
}

.oc-frame-wood-left {
  top: 0;
  left: calc(var(--ocv-u, 1px) * -14);
  bottom: 0;
  width: calc(var(--ocv-u, 1px) * 14);
}

/* 하단 테두리 글자(수 번호·FlipSight·오프닝): 2026-10-11 모든 화면 1px 아래로(-10 → -11, 안드로이드 앱 전용 1px 보정은 삭제).
   저장용 보드(.ocv-save-capture-frame)는 아래 별도 값을 그대로 쓴다. */
.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;
}

.oc-frame-label a,
.oc-frame-label a:visited,
.oc-frame-label a:hover,
.oc-frame-label a:focus,
.oc-frame-label a:active {
  color: #5d3a1a;
  text-decoration: none;
}

.oc-frame-opening {
  position: absolute;
  /* 오프닝 이름 전용 고정 가로영역: 가운데 FlipSight 오른쪽(50%+30px) ~ 우측 끝.
     이 폭을 넘으면 JS가 scrollWidth/clientWidth 로 판정해 폰트만 축소 → FlipSight와 겹치지 않음. */
  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;
}

.ocv-save-capture-frame .oc-frame-opening {
  bottom: calc(var(--ocv-u, 1px) * -11);
  line-height: calc(var(--ocv-u, 1px) * 10);
}

/* html2canvas can paint absolutely positioned children with z-index:auto/0
   behind the frame border. Keep the real wood-grain strips above the flat
   fallback border in the save-only clone. */
.ocv-save-capture-frame .oc-frame-wood {
  z-index: 1;
}

.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;
}

.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;
}

.oc-frame-move-color.is-black {
  background: #000;
  border: var(--ocv-u, 1px) solid #000;
}

.oc-frame-move-color.is-white {
  background: #fff;
  border: var(--ocv-u, 1px) solid currentColor;
}

.ocv-save-capture-frame .oc-frame-label {
  bottom: calc(var(--ocv-u, 1px) * -11);
  line-height: calc(var(--ocv-u, 1px) * 10);
}

.ocv-save-capture-frame .oc-frame-move {
  bottom: calc(var(--ocv-u, 1px) * -11);
  line-height: calc(var(--ocv-u, 1px) * 10);
}

.oc-frame-move.is-branch,
.oc-frame-move[data-branch="1"],
#MoveNo.is-branch,
#MoveNo[data-branch="1"] {
  color: #2a46a6 !important;
}

#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;
}


.oc_disc {
  border-width: 0px;
  margin: 0px;
  padding: 3px 0 0 3px;
  position: absolute;
  width: var(--disc);
  height: var(--disc);
  z-index: 1;
}

.oc-disc-flip {
  position: absolute;
  width: var(--disc);
  height: var(--disc);
  padding: calc(var(--ocv-u, 1px) * 3) 0 0 calc(var(--ocv-u, 1px) * 3);
  margin: 0;
  border: 0;
  z-index: 250;
  pointer-events: none;
  transform: translateZ(0);
}

.oc-disc-flip__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .oc-disc-flip {
    display: none;
  }
}
.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;
}

#cell_h1, #cell_h2, #cell_h3, #cell_h4,
#cell_h5, #cell_h6, #cell_h7, #cell_h8 {
  border-right-width: 0px;
}

#cell_a8, #cell_b8, #cell_c8, #cell_d8,
#cell_e8, #cell_f8, #cell_g8, #cell_h8 {
  border-bottom-width: 0px;
}


.oc_eval {
  margin: 0px;
  padding: 0px;
  font-size: calc(var(--ocv-u, 1px) * 18);
  line-height: var(--cell);
  position: absolute;
  text-align: center;
  color: yellow;
  width: var(--cell);
  height: var(--cell);
  z-index: 300;
}

.eval-score-text {
  position: relative;
  z-index: 2;
}

.eval-badge-icon {
  position: absolute;
  top: var(--ocv-u, 1px);
  left: var(--ocv-u, 1px);
  width: calc(var(--cell) * 0.30);
  height: calc(var(--cell) * 0.30);
  color: currentColor;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.eval-badge-exact {
  width: calc(var(--cell) * 0.30 - calc(var(--ocv-u, 1px) * 2));
  height: calc(var(--cell) * 0.30 - calc(var(--ocv-u, 1px) * 2));
}

.eval-badge-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Server Book Umigame numbers.  This is a sibling overlay rather than a child
   of .oc_eval, so Evaluate OFF can clear its own DOM without erasing these. */
.oc-umigame {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  z-index: 301;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: calc(var(--cell) * .05);
  pointer-events: none;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}

html.ocv-ai-loading .oc-umigame {
  display: none;
}

/* 흑/백 구분 라인은 제거(2026-09-01) — 숫자 색이 소속을 표시한다:
   흑 수 = 검정(#111), 백 수 = 흰색. 순서 교대(.is-white-first)는 유지. */

/* "흑 : 백" 묶음 전체를 칸 중앙에 정렬한다(2026-09-01). 콜론을 칸 중앙에 고정하던
   grid 방식은 자릿수가 다르면("3 : 11") 묶음이 한쪽으로 쏠려 보였다.
   차례 교대(.is-white-first)는 flex order 로 처리한다. */
.oc-umigame-count {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .3em;
  width: 100%;
  min-width: 0;
  font-size: calc(var(--cell) * .28 - calc(var(--ocv-u, 1px) * 2));  /* 2026-09-01 확대(.21 → .28) 후 2px 축소 — PC·모바일 공통(셀 비례라 동일 적용) */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.oc-umigame-count > b {
  min-width: 0;
  font: inherit;
  text-align: center;
}

.oc-umigame-count > .is-black {
  order: 1;
  color: #111;
  text-shadow: none;
}

.oc-umigame-count > .is-white {
  order: 3;
  color: #fff;
}

.oc-umigame.is-white-first .oc-umigame-count > .is-black { order: 3; }
.oc-umigame.is-white-first .oc-umigame-count > .is-white { order: 1; }

.oc-umigame-count > i {
  order: 2;
  margin: 0;
  color: #fff;
  font: inherit;
  font-style: normal;
}

/* 우미가메수는 칸 하단. 카운트 폰트 확대(.28)로 중앙 평가치와 닿을 수 있어,
   두 값이 같은 칸일 때만 평가치를 살짝(9%) 올린다(2026-09-01, 구 A안 15%보다 완만). */
html.ocv-umigame-evaluate-on .oc-umigame {
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: calc(var(--cell) * .05);
}

html.ocv-umigame-evaluate-on .oc_eval.oc-umigame-cell .eval-score-text {
  display: inline-block;
  transform: translateY(calc(var(--cell) * -.09));
}

/* x_char와 y_char 위치도 그대로 유지 */
#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;
}
#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;
}

.x_char {
  position: absolute;
  font-size: calc(var(--ocv-u, 1px) * 11) !important;
  text-align: center;
  text-transform: uppercase;
}

.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;
}

/* x축 */
#char_a { left: calc(var(--cell) * 1); }
#char_b { left: calc(var(--cell) * 2); }
#char_c { left: calc(var(--cell) * 3); }
#char_d { left: calc(var(--cell) * 4); }
#char_e { left: calc(var(--cell) * 5); }
#char_f { left: calc(var(--cell) * 6); }
#char_g { left: calc(var(--cell) * 7); }
#char_h { left: calc(var(--cell) * 8); }

/* y축 */
#char_1 { top: calc(var(--cell) * 0); }
#char_2 { top: calc(var(--cell) * 1); }
#char_3 { top: calc(var(--cell) * 2); }
#char_4 { top: calc(var(--cell) * 3); }
#char_5 { top: calc(var(--cell) * 4); }
#char_6 { top: calc(var(--cell) * 5); }
#char_7 { top: calc(var(--cell) * 6); }
#char_8 { top: calc(var(--cell) * 7); }


/* 보드 칸의 위치 조정 */
#disc_a1, #cell_a1, #eval_a1 { top: 0px; left: 0px; }
#disc_b1, #cell_b1, #eval_b1 { top: 0px; left: 38px; }
#disc_c1, #cell_c1, #eval_c1 { top: 0px; left: 76px; }
#disc_d1, #cell_d1, #eval_d1 { top: 0px; left: 114px; }
#disc_e1, #cell_e1, #eval_e1 { top: 0px; left: 152px; }
#disc_f1, #cell_f1, #eval_f1 { top: 0px; left: 190px; }
#disc_g1, #cell_g1, #eval_g1 { top: 0px; left: 228px; }
#disc_h1, #cell_h1, #eval_h1 { top: 0px; left: 266px; }
#disc_a2, #cell_a2, #eval_a2 { top: 38px; left: 0px; }
#disc_b2, #cell_b2, #eval_b2 { top: 38px; left: 38px; }
#disc_c2, #cell_c2, #eval_c2 { top: 38px; left: 76px; }
#disc_d2, #cell_d2, #eval_d2 { top: 38px; left: 114px; }
#disc_e2, #cell_e2, #eval_e2 { top: 38px; left: 152px; }
#disc_f2, #cell_f2, #eval_f2 { top: 38px; left: 190px; }
#disc_g2, #cell_g2, #eval_g2 { top: 38px; left: 228px; }
#disc_h2, #cell_h2, #eval_h2 { top: 38px; left: 266px; }
#disc_a3, #cell_a3, #eval_a3 { top: 76px; left: 0px; }
#disc_b3, #cell_b3, #eval_b3 { top: 76px; left: 38px; }
#disc_c3, #cell_c3, #eval_c3 { top: 76px; left: 76px; }
#disc_d3, #cell_d3, #eval_d3 { top: 76px; left: 114px; }
#disc_e3, #cell_e3, #eval_e3 { top: 76px; left: 152px; }
#disc_f3, #cell_f3, #eval_f3 { top: 76px; left: 190px; }
#disc_g3, #cell_g3, #eval_g3 { top: 76px; left: 228px; }
#disc_h3, #cell_h3, #eval_h3 { top: 76px; left: 266px; }
#disc_a4, #cell_a4, #eval_a4 { top: 114px; left: 0px; }
#disc_b4, #cell_b4, #eval_b4 { top: 114px; left: 38px; }
#disc_c4, #cell_c4, #eval_c4 { top: 114px; left: 76px; }
#disc_d4, #cell_d4, #eval_d4 { top: 114px; left: 114px; }
#disc_e4, #cell_e4, #eval_e4 { top: 114px; left: 152px; }
#disc_f4, #cell_f4, #eval_f4 { top: 114px; left: 190px; }
#disc_g4, #cell_g4, #eval_g4 { top: 114px; left: 228px; }
#disc_h4, #cell_h4, #eval_h4 { top: 114px; left: 266px; }
#disc_a5, #cell_a5, #eval_a5 { top: 152px; left: 0px; }
#disc_b5, #cell_b5, #eval_b5 { top: 152px; left: 38px; }
#disc_c5, #cell_c5, #eval_c5 { top: 152px; left: 76px; }
#disc_d5, #cell_d5, #eval_d5 { top: 152px; left: 114px; }
#disc_e5, #cell_e5, #eval_e5 { top: 152px; left: 152px; }
#disc_f5, #cell_f5, #eval_f5 { top: 152px; left: 190px; }
#disc_g5, #cell_g5, #eval_g5 { top: 152px; left: 228px; }
#disc_h5, #cell_h5, #eval_h5 { top: 152px; left: 266px; }
#disc_a6, #cell_a6, #eval_a6 { top: 190px; left: 0px; }
#disc_b6, #cell_b6, #eval_b6 { top: 190px; left: 38px; }
#disc_c6, #cell_c6, #eval_c6 { top: 190px; left: 76px; }
#disc_d6, #cell_d6, #eval_d6 { top: 190px; left: 114px; }
#disc_e6, #cell_e6, #eval_e6 { top: 190px; left: 152px; }
#disc_f6, #cell_f6, #eval_f6 { top: 190px; left: 190px; }
#disc_g6, #cell_g6, #eval_g6 { top: 190px; left: 228px; }
#disc_h6, #cell_h6, #eval_h6 { top: 190px; left: 266px; }
#disc_a7, #cell_a7, #eval_a7 { top: 228px; left: 0px; }
#disc_b7, #cell_b7, #eval_b7 { top: 228px; left: 38px; }
#disc_c7, #cell_c7, #eval_c7 { top: 228px; left: 76px; }
#disc_d7, #cell_d7, #eval_d7 { top: 228px; left: 114px; }
#disc_e7, #cell_e7, #eval_e7 { top: 228px; left: 152px; }
#disc_f7, #cell_f7, #eval_f7 { top: 228px; left: 190px; }
#disc_g7, #cell_g7, #eval_g7 { top: 228px; left: 228px; }
#disc_h7, #cell_h7, #eval_h7 { top: 228px; left: 266px; }
#disc_a8, #cell_a8, #eval_a8 { top: 266px; left: 0px; }
#disc_b8, #cell_b8, #eval_b8 { top: 266px; left: 38px; }
#disc_c8, #cell_c8, #eval_c8 { top: 266px; left: 76px; }
#disc_d8, #cell_d8, #eval_d8 { top: 266px; left: 114px; }
#disc_e8, #cell_e8, #eval_e8 { top: 266px; left: 152px; }
#disc_f8, #cell_f8, #eval_f8 { top: 266px; left: 190px; }
#disc_g8, #cell_g8, #eval_g8 { top: 266px; left: 228px; }
#disc_h8, #cell_h8, #eval_h8 { top: 266px; left: 266px; }






.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%; /*  원형으로 */
}



#dot_lu { top: calc(var(--cell) * 2 - calc(var(--ocv-u, 1px) * 3)); left: calc(var(--cell) * 2 - calc(var(--ocv-u, 1px) * 3)); }
#dot_ru { top: calc(var(--cell) * 2 - calc(var(--ocv-u, 1px) * 3)); left: calc(var(--cell) * 6 - calc(var(--ocv-u, 1px) * 3)); }
#dot_ld { top: calc(var(--cell) * 6 - calc(var(--ocv-u, 1px) * 3)); left: calc(var(--cell) * 2 - calc(var(--ocv-u, 1px) * 3)); }
#dot_rd { top: calc(var(--cell) * 6 - calc(var(--ocv-u, 1px) * 3)); left: calc(var(--cell) * 6 - calc(var(--ocv-u, 1px) * 3)); }





#check {
  float: left;
  position: relative;
  width: calc(var(--ocv-u, 1px) * 14);
}

#repeat {
  position: absolute;
  margin: 0px;
  padding:0px;
  top:  calc(var(--ocv-u, 1px) * 3);
  left: 0px;
  width:  calc(var(--ocv-u, 1px) * 14);
  height: calc(var(--ocv-u, 1px) * 14);
  cursor: pointer;
}

#checkPM {
  position: absolute;
  top:  calc(var(--ocv-u, 1px) * 25);
  left: 0px;
}

#checkPE {
  position:absolute;
  top: calc(var(--ocv-u, 1px) * 45);
  left: 0px;
}

#PutMark {
  width: calc(var(--ocv-u, 1px) * 16);
  height:calc(var(--ocv-u, 1px) * 16);
}

.putmarkdot {
  padding-top:calc(var(--ocv-u, 1px) * 10);
}

#PutEnable {
  width: calc(var(--ocv-u, 1px) * 16);
  height:calc(var(--ocv-u, 1px) * 16);
}

#control {
  float: right;
  width: calc(var(--ocv-u, 1px) * 317);
  background-color: #bdb76b;
}

#score_panel {
  clear: both;
  position: relative;

  font-size:calc(var(--ocv-u, 1px) * 22);
  height:calc(var(--ocv-u, 1px) * 27);
}

#BlackFrame {
  position: absolute;
  top: calc(var(--ocv-u, 1px) * 2);
  left:var(--ocv-u, 1px);
  border-style: solid;
  border-width: calc(var(--ocv-u, 1px) * 2);
  border-color: #bdb76b;
  width: calc(var(--ocv-u, 1px) * 45);
  height:calc(var(--ocv-u, 1px) * 21);
  line-height:calc(var(--ocv-u, 1px) * 18);
}

#BlackStone {
  text-align: left;
  color: black;
  font-size:calc(var(--ocv-u, 1px) * 20);
}

#BlackCount {
  text-align: left;
  color: white;
}

#WhiteFrame {
  position: absolute;
  top: calc(var(--ocv-u, 1px) * 2);
  left:calc(var(--ocv-u, 1px) * 60);
  border-style: solid;
  border-width: calc(var(--ocv-u, 1px) * 2);
  border-color: #bdb76b;
  width: calc(var(--ocv-u, 1px) * 45);
  height:calc(var(--ocv-u, 1px) * 21);
  line-height:calc(var(--ocv-u, 1px) * 18);
}

#WhiteStone {
  text-align: left;
  color: white;
    font-size:calc(var(--ocv-u, 1px) * 20);
}

#WhiteCount {
  text-align: left;
  color: black;

}

#NextMove {
  position: absolute;
  top:  calc(var(--ocv-u, 1px) * 4);
  left: calc(var(--ocv-u, 1px) * 125);
  border-style: solid;
  border-width: 0px;
  border-color: #bdb76b;
  text-align: left;
  color: black;
  width: calc(var(--ocv-u, 1px) * 85);
  height:calc(var(--ocv-u, 1px) * 18);
  line-height:calc(var(--ocv-u, 1px) * 18);
}

#MoveNo {
  margin-left: 0;
  padding: 0px;
  text-align: left;
  color: inherit;
}

#PutNext {
  position: absolute;
  top:  calc(var(--ocv-u, 1px) * 6);
  left: calc(var(--ocv-u, 1px) * 178);
  width:  calc(var(--ocv-u, 1px) * 14);
  height: calc(var(--ocv-u, 1px) * 14);
}

#NextCheck {
  position: absolute;
  top: calc(var(--ocv-u, 1px) * 2);
  left: calc(var(--ocv-u, 1px) * 195);
  line-height:calc(var(--ocv-u, 1px) * 20);
}



#Loop {
  position: absolute;
  top:  calc(var(--ocv-u, 1px) * -1);
  left: calc(var(--ocv-u, 1px) * 242);
  color: crimson;
}

#KifuText {
  position: absolute;
  top:  calc(var(--ocv-u, 1px) * 2);
  left: var(--ocv-u, 1px);
  width:calc(var(--ocv-u, 1px) * 230);
  height:calc(var(--ocv-u, 1px) * 20);

  font-size:calc(var(--ocv-u, 1px) * 20);
}

#SetKifu {
  position: absolute;
  top:  calc(var(--ocv-u, 1px) * 2);
  left: calc(var(--ocv-u, 1px) * 237);
  width: calc(var(--ocv-u, 1px) * 62);
  height:calc(var(--ocv-u, 1px) * 25);

  font-size:calc(var(--ocv-u, 1px) * 16);
}

#op_button {
  clear: both;
  position: relative;

}
#solve {
  margin-top: var(--ocv-u, 1px);
  position: absolute;
  top:  0px;
  left: calc(var(--ocv-u, 1px) * 256);
  width:calc(var(--ocv-u, 1px) * 61);
  height:calc(var(--ocv-u, 1px) * 27);
  font-size:calc(var(--ocv-u, 1px) * 16);
}

#first { width:calc(var(--ocv-u, 1px) * 65); height:calc(var(--ocv-u, 1px) * 33); font-size:calc(var(--ocv-u, 1px) * 20); }
#prev  { width:calc(var(--ocv-u, 1px) * 65); height:calc(var(--ocv-u, 1px) * 33); font-size:calc(var(--ocv-u, 1px) * 20); }
#btnAnalyze  { width:calc(var(--ocv-u, 1px) * 42); min-width:calc(var(--ocv-u, 1px) * 42); height:calc(var(--ocv-u, 1px) * 33); font-size:calc(var(--ocv-u, 1px) * 20); }
#next  { width:calc(var(--ocv-u, 1px) * 65); height:calc(var(--ocv-u, 1px) * 33); font-size:calc(var(--ocv-u, 1px) * 20); }
#last  { width:calc(var(--ocv-u, 1px) * 65); height:calc(var(--ocv-u, 1px) * 33); font-size:calc(var(--ocv-u, 1px) * 20); margin-right:0;}

#solve,
#first,
#prev,
#game,
#next,
#last {
  background-color: #e7e4be;
  border: var(--ocv-u, 1px) solid #9A9169;
  border-radius: calc(var(--ocv-u, 1px) * 7);
  color: #222222;
  display: inline-block;
  padding: calc(var(--ocv-u, 1px) * 3) 0px calc(var(--ocv-u, 1px) * 2) 0px;
  font-weight: normal;
  text-decoration: none;
  text-shadow: 0px var(--ocv-u, 1px) 0 rgba(255,255,255,0.4);
  outline: none;
}

#solve:active,
#first:active,
#prev:active,
#kifu:active,
#next:active,
#last:active {
  background-color: #D6E3AD;
  border: var(--ocv-u, 1px) solid #7A7179;
}

#solve:disabled,
#first:disabled,
#prev:disabled,
#kifu:disabled,
#next:disabled,
#last:disabled {
  color: #999999;
  background-color: #D6D3AD;
  border: var(--ocv-u, 1px) solid #BDB76B;
}
#board [id^="eval_"] {
  transition: opacity 0.2s ease;
}

/* Keep the full viewer within the 670px fullscreen baseline. */
#anSvg {
  display: block;
  height: calc(var(--ocv-u, 1px) * 120);
}

/* 모바일앱 전체화면(FlipSightApp UA + ovl=1)에서만 그래프를 키운다(120→160). 웹 전체화면은 제외.
   viewBox 높이(const.js H·ocviewer.html)도 같은 비율(150:250=120:200=0.6)로 키워 좌표 숫자 왜곡을 막는다.
   #ocvStatisticsPanel 이 anPanel(inset:0)을 채우므로 통계 리스트도 함께 커진다. 인라인·웹은 120px 그대로. */
body.ocv-app-graph-tall #anSvg { height: calc(var(--ocv-u, 1px) * 150); }

/* Key Moments compacts the original graph. The graph runtime switches its logical
   height to 150/187.5 at the same time so preserveAspectRatio="none" cannot squash Y. */
body.ocv-game-review-key-moments #anSvg { height: calc(var(--ocv-u, 1px) * 90); }
body.ocv-app-graph-tall.ocv-game-review-key-moments #anSvg { height: calc(var(--ocv-u, 1px) * 112.5); }

#anFooter .an-summary-line {
  min-height: calc(var(--ocv-u, 1px) * 20);
}

/* Toolbar row balancing: keep equal gaps without spacer-created empty slots. */
body:not(.embed-viewer) #op_button.toolbar{
  justify-content:flex-start;
  column-gap:calc(var(--ocv-u, 1px) * 4);
  border:0;
  box-shadow:none;
}

body:not(.embed-viewer) #op_button.toolbar #prev,
body:not(.embed-viewer) #op_button.toolbar #next{
  flex:1 1 0;
  width:auto;
  min-width:0;
  height:calc(var(--ocv-u, 1px) * 36);
}

body:not(.embed-viewer) #op_button.toolbar .tooltip_left{
  flex:0 0 calc(var(--ocv-u, 1px) * 42);
  margin-left:0;
}

body:not(.embed-viewer) #op_button.toolbar #btnAnalyze{
  width:calc(var(--ocv-u, 1px) * 42);
  min-width:calc(var(--ocv-u, 1px) * 42);
  height:calc(var(--ocv-u, 1px) * 36);
}

body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-import,
body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-my-games,
body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-evaluate{
  flex:0 0 calc(var(--ocv-u, 1px) * 42);
  width:calc(var(--ocv-u, 1px) * 42);
  min-width:calc(var(--ocv-u, 1px) * 42);
  display:flex;
}

body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-import > .tooltip,
body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-my-games > .tooltip{
  width:100%;
  min-width:0;
}

body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-evaluate > .ocv-evaluate-button-wrap{
  display:flex;
  width:100%;
  min-width:0;
}

body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-import .icon-toggle,
body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-my-games .icon-toggle,
body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-evaluate .icon-toggle{
  width:100%;
  min-width:0;
}

body:not(.embed-viewer) #op_button.toolbar > .tooltip-more{
  flex:0 0 calc(var(--ocv-u, 1px) * 42);
  width:calc(var(--ocv-u, 1px) * 42);
  min-width:calc(var(--ocv-u, 1px) * 42);
  display:flex;
}

body:not(.embed-viewer) #op_button.toolbar > .tooltip-more > .icon-toggle{
  width:100%;
  min-width:0;
}

/* Embed toolbar uses a smaller button set than the full viewer. */
body.embed-viewer #op_button.toolbar{
  justify-content:flex-start;
}

body.embed-viewer #op_button.toolbar #prev,
body.embed-viewer #op_button.toolbar #next{
  flex:1 1 0;
  width:auto;
  min-width:0;
  height:calc(var(--ocv-u, 1px) * 36);
}

body.embed-viewer #op_button.toolbar .tooltip_left{
  flex:0 0 calc(var(--ocv-u, 1px) * 42);
  margin-left:0;
}

body.embed-viewer #op_button.toolbar #btnAnalyze{
  width:calc(var(--ocv-u, 1px) * 42);
  min-width:calc(var(--ocv-u, 1px) * 42);
  height:calc(var(--ocv-u, 1px) * 36);
}

body.embed-viewer #op_button.toolbar > .share-wrap,
body.embed-viewer #op_button.toolbar > .tooltip{
  flex:0 0 calc(var(--ocv-u, 1px) * 42);
}

/* ── Current-position game statistics ─────────────────────────────────── */
#anPanel {
  position: relative;
}

body.ocv-evalbar-on #anPanel {
  max-width: calc(var(--board) + calc(var(--ocv-u, 1px) * 58)) !important;
}

/* The stage gains 28px (24px bar + 4px gap) while the viewer is uniformly
 * scaled. Give both player headers the same logical-width compensation already
 * used by the graph so their rendered width does not change when the evaluation
 * bar is toggled. */
body.ocv-evalbar-on .player-header {
  width: calc(var(--board) + calc(var(--ocv-u, 1px) * 58));
}

#anPanel.ocv-statistics-active #anSvg,
#anPanel.ocv-statistics-active #anFooter {
  visibility: hidden;
}

#ocvStatisticsPanel {
  --ocv-bg: #fff;
  --ocv-surface: #f7f7f7;
  --ocv-surface-2: #eef0f3;
  --ocv-hover: #eef6ff;
  --ocv-text: #111827;
  --ocv-muted: #667085;
  --ocv-border: #d7dce5;
  --ocv-card-border: #f0f0f0;
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ocv-text, #111827);
  background: var(--ocv-bg, #fff);
}

#ocvStatisticsPanel[hidden] {
  display: none;
}

/* 앱 전체화면은 iframe 자체가 하단 조작 패널 바로 위에서 끝난다. 보드/플레이어의
   기존 확대율은 유지하고 통계 패널만 iframe 바닥까지 넘겨, 목록 스크롤 영역이
   남은 세로 공간을 모두 사용하게 한다. */
body.ocv-app-fullscreen-shell #anPanel.ocv-statistics-active #ocvStatisticsPanel {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: var(--ocv-statistics-fullscreen-height, 100%);
}

.ocv-statistics-head {
  flex: 0 0 auto;
  min-height: calc(var(--ocv-u, 1px) * 28);
  padding: var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 5) calc(var(--ocv-u, 1px) * 3) calc(var(--ocv-u, 1px) * 10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--ocv-u, 1px) * 4);
  border-bottom: var(--ocv-u, 1px) solid var(--ocv-border, #d7dce5);
  box-sizing: border-box;
}

#ocvStatisticsCount {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(var(--ocv-u, 1px) * 12);
  color: var(--ocv-muted, #667085);
}

.ocv-statistics-head-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--ocv-u, 1px) * 4);
  flex: 0 0 auto;
}

.ocv-statistics-basis {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ocv-u, 1px) * 2);
  color: var(--ocv-muted, #667085);
  font-size: calc(var(--ocv-u, 1px) * 10);
  font-weight: 700;
  white-space: nowrap;
}

.ocv-statistics-basis[hidden] {
  display: none !important;
}

.ocv-statistics-basis-buttons {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: var(--ocv-u, 1px) solid var(--ocv-border, #d7dce5);
  border-radius: calc(var(--ocv-u, 1px) * 6);
  background: var(--ocv-surface, #f4f6f9);
}

.ocv-statistics-basis button {
  min-width: calc(var(--ocv-u, 1px) * 24);
  height: calc(var(--ocv-u, 1px) * 22);
  padding: 0 calc(var(--ocv-u, 1px) * 4);
  border: 0;
  border-radius: 0;
  color: var(--ocv-muted, #667085);
  background: transparent;
  font: inherit;
  font-size: calc(var(--ocv-u, 1px) * 10);
  font-weight: 700;
  cursor: pointer;
}

.ocv-statistics-basis button + button {
  border-left: var(--ocv-u, 1px) solid var(--ocv-border, #d7dce5);
}

.ocv-statistics-basis button.is-selected {
  color: #fff;
  background: #111827;
}

.ocv-statistics-source {
  display: inline-flex;
  flex: 0 0 auto;
  padding: var(--ocv-u, 1px);
  border: var(--ocv-u, 1px) solid var(--ocv-border, #d7dce5);
  border-radius: calc(var(--ocv-u, 1px) * 7);
  background: var(--ocv-surface, #f4f6f9);
}

.ocv-statistics-source button {
  min-width: calc(var(--ocv-u, 1px) * 50);
  height: calc(var(--ocv-u, 1px) * 22);
  padding: 0 calc(var(--ocv-u, 1px) * 5);
  border: 0;
  border-radius: calc(var(--ocv-u, 1px) * 5);
  color: var(--ocv-muted, #667085);
  background: transparent;
  font: inherit;
  font-size: calc(var(--ocv-u, 1px) * 11);
  font-weight: 700;
  cursor: pointer;
}

.ocv-statistics-source button.is-selected {
  color: #fff;
  background: #111827;
}

/* Opening Explorer: the lower panel is the explorer itself. The board keeps
   normal ocviewer evaluations and never receives archive-style statistics. */
.ocv-opening-move {
  --ocv-opening-black: 0%;
  --ocv-opening-draw: 0%;
  --ocv-opening-white: 0%;
  min-height: calc(var(--ocv-u, 1px) * 40);
  padding: calc(var(--ocv-u, 1px) * 5) calc(var(--ocv-u, 1px) * 8);
  display: grid;
  grid-template-columns: calc(var(--ocv-u, 1px) * 38) calc(var(--ocv-u, 1px) * 43) calc(var(--ocv-u, 1px) * 70) minmax(calc(var(--ocv-u, 1px) * 126), 1fr);
  align-items: center;
  gap: calc(var(--ocv-u, 1px) * 6);
  border-bottom: var(--ocv-u, 1px) solid var(--ocv-card-border, #f0f0f0);
  background: var(--ocv-bg, #fff);
  box-sizing: border-box;
}

.ocv-opening-move:nth-child(even) {
  background: var(--ocv-surface, #f7f7f7);
}

.ocv-opening-coordinate,
.ocv-opening-eval,
.ocv-opening-frequency {
  min-width: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ocv-opening-coordinate {
  font-size: calc(var(--ocv-u, 1px) * 14);
  font-weight: 800;
}

.ocv-opening-eval {
  padding: calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 3);
  overflow: hidden;
  border-radius: calc(var(--ocv-u, 1px) * 4);
  color: var(--ocv-text, #111827);
  background: var(--ocv-surface-2, #eef0f3);
  font-size: calc(var(--ocv-u, 1px) * 12);
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
}

.ocv-opening-frequency {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: calc(var(--ocv-u, 1px) * 5);
  font-size: calc(var(--ocv-u, 1px) * 12);
}

.ocv-opening-frequency b { font-weight: 800; }
.ocv-opening-frequency small {
  overflow: hidden;
  color: var(--ocv-muted, #667085);
  font-size: calc(var(--ocv-u, 1px) * 10);
  font-weight: 700;
  text-overflow: ellipsis;
}

.ocv-opening-winbar {
  position: relative;
  min-width: 0;
  height: calc(var(--ocv-u, 1px) * 28);
  display: block;
  overflow: hidden;
  border: var(--ocv-u, 1px) solid var(--ocv-border, #d7dce5);
  border-radius: calc(var(--ocv-u, 1px) * 4);
  background: #fff;
  box-sizing: border-box;
}

.ocv-opening-winbar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
}

.ocv-opening-winbar-fill.is-black {
  left: 0;
  width: var(--ocv-opening-black);
  background: #20242b;
}

.ocv-opening-winbar-fill.is-draw {
  left: var(--ocv-opening-black);
  width: var(--ocv-opening-draw);
  background: #a8adb6;
}

.ocv-opening-winbar-fill.is-white {
  left: calc(var(--ocv-opening-black) + var(--ocv-opening-draw));
  width: var(--ocv-opening-white);
  background: #f8fafc;
}

/* Put the side to move first so the win-rate graph follows the board turn. */
.ocv-opening-move.is-white-to-move .ocv-opening-winbar-fill.is-white {
  left: 0;
}

.ocv-opening-move.is-white-to-move .ocv-opening-winbar-fill.is-draw {
  left: var(--ocv-opening-white);
}

.ocv-opening-move.is-white-to-move .ocv-opening-winbar-fill.is-black {
  left: calc(var(--ocv-opening-white) + var(--ocv-opening-draw));
}

.ocv-opening-winbar-label {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ocv-u, 1px) * 3);
  padding: calc(var(--ocv-u, 1px) * 3) calc(var(--ocv-u, 1px) * 5);
  border: var(--ocv-u, 1px) solid rgba(17, 24, 39, .18);
  border-radius: calc(var(--ocv-u, 1px) * 999);
  transform: translateY(-50%);
  color: #111827;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 2) rgba(15, 23, 42, .16);
  box-sizing: border-box;
  font-size: calc(var(--ocv-u, 1px) * 10);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}

.ocv-opening-winbar-label.is-black { left: calc(var(--ocv-u, 1px) * 5); }
.ocv-opening-winbar-label.is-white { right: calc(var(--ocv-u, 1px) * 5); }
.ocv-opening-move.is-white-to-move .ocv-opening-winbar-label.is-black {
  right: calc(var(--ocv-u, 1px) * 5);
  left: auto;
}
.ocv-opening-move.is-white-to-move .ocv-opening-winbar-label.is-white {
  right: auto;
  left: calc(var(--ocv-u, 1px) * 5);
}
.ocv-opening-winbar-label i {
  width: calc(var(--ocv-u, 1px) * 8);
  height: calc(var(--ocv-u, 1px) * 8);
  flex: 0 0 calc(var(--ocv-u, 1px) * 8);
  border: var(--ocv-u, 1px) solid #6b7280;
  border-radius: 50%;
  box-sizing: border-box;
}
.ocv-opening-winbar-label.is-black i { border-color: #111827; background: #111; }
.ocv-opening-winbar-label.is-white i { background: #fff; }

@media (max-width: 400px) {
  .ocv-statistics-head { padding-left: calc(var(--ocv-u, 1px) * 6); }
  .ocv-statistics-source button { min-width: calc(var(--ocv-u, 1px) * 44); padding: 0 calc(var(--ocv-u, 1px) * 4); font-size: calc(var(--ocv-u, 1px) * 10); }
  .ocv-opening-move {
    min-height: calc(var(--ocv-u, 1px) * 38);
    padding: calc(var(--ocv-u, 1px) * 4) calc(var(--ocv-u, 1px) * 6);
    grid-template-columns: calc(var(--ocv-u, 1px) * 34) calc(var(--ocv-u, 1px) * 39) calc(var(--ocv-u, 1px) * 61) minmax(calc(var(--ocv-u, 1px) * 112), 1fr);
    gap: calc(var(--ocv-u, 1px) * 4);
  }
  .ocv-opening-coordinate { font-size: calc(var(--ocv-u, 1px) * 13); }
  .ocv-opening-eval { padding-inline: calc(var(--ocv-u, 1px) * 2); font-size: calc(var(--ocv-u, 1px) * 11); }
  .ocv-opening-frequency { font-size: calc(var(--ocv-u, 1px) * 11); }
  .ocv-opening-frequency small { font-size: calc(var(--ocv-u, 1px) * 9); }
  .ocv-opening-winbar { height: calc(var(--ocv-u, 1px) * 26); }
  .ocv-opening-winbar-label { gap: calc(var(--ocv-u, 1px) * 2); padding: calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 3); font-size: calc(var(--ocv-u, 1px) * 9); }
  .ocv-opening-winbar-label.is-black { left: calc(var(--ocv-u, 1px) * 3); }
  .ocv-opening-winbar-label.is-white { right: calc(var(--ocv-u, 1px) * 3); }
  .ocv-opening-move.is-white-to-move .ocv-opening-winbar-label.is-black { right: calc(var(--ocv-u, 1px) * 3); }
  .ocv-opening-move.is-white-to-move .ocv-opening-winbar-label.is-white { left: calc(var(--ocv-u, 1px) * 3); }
  .ocv-opening-winbar-label i { width: calc(var(--ocv-u, 1px) * 7); height: calc(var(--ocv-u, 1px) * 7); flex-basis: calc(var(--ocv-u, 1px) * 7); }
}

.ocv-statistics-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.ocv-statistics-game {
  width: 100%;
  padding: calc(var(--ocv-u, 1px) * 5) calc(var(--ocv-u, 1px) * 14);
  display: block;
  border: 0;
  border-bottom: var(--ocv-u, 1px) solid var(--ocv-card-border, #f0f0f0);
  color: var(--ocv-text, #111827);
  background: var(--ocv-bg, #fff);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.ocv-statistics-game:nth-child(even) {
  background: var(--ocv-surface, #f7f7f7);
}

.ocv-statistics-game:active {
  filter: brightness(.97);
}

.ocv-statistics-game-meta {
  display: flex;
  align-items: center;
  gap: calc(var(--ocv-u, 1px) * 8);
}

.ocv-statistics-game-meta {
  margin-bottom: calc(var(--ocv-u, 1px) * 2);
  color: var(--ocv-muted, #8a93a3);
  font-size: calc(var(--ocv-u, 1px) * 11);
  font-weight: 600;
}

.ocv-statistics-game-type {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocv-statistics-game-badge {
  display: inline-block;
  flex: 0 0 auto;
  padding: var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 6);
  border-radius: calc(var(--ocv-u, 1px) * 4);
  color: #6b7280;
  background: #eef0f3;
  font-size: calc(var(--ocv-u, 1px) * 10);
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.ocv-statistics-game-badge.is-training {
  color: #5b21b6;
  background: #ede9fe;
}

.ocv-statistics-game-meta time {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: calc(var(--ocv-u, 1px) * 12);
  white-space: nowrap;
}

.ocv-statistics-game-main {
  min-height: calc(var(--ocv-u, 1px) * 19);
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0 calc(var(--ocv-u, 1px) * 8);
  font-size: calc(var(--ocv-u, 1px) * 14);
}

.ocv-statistics-result {
  display: flex;
  align-items: center;
  gap: calc(var(--ocv-u, 1px) * 4);
  white-space: nowrap;
}

.ocv-statistics-result strong {
  font-size: calc(var(--ocv-u, 1px) * 14);
  font-weight: 700;
  white-space: nowrap;
}

.ocv-statistics-result strong.is-win,
.ocv-statistics-result strong.is-draw,
.ocv-statistics-result strong.is-loss {
  padding: var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 8);
  border-radius: calc(var(--ocv-u, 1px) * 999);
  font-weight: 800;
}

.ocv-statistics-result strong.is-win {
  color: #166534;
  background: #dcfce7;
}

.ocv-statistics-result strong.is-draw {
  color: #854d0e;
  background: #fef9c3;
}

.ocv-statistics-result strong.is-loss {
  color: #991b1b;
  background: #fee2e2;
}

.ocv-statistics-player {
  display: flex;
  align-items: baseline;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  color: var(--ocv-text, #111827);
}

.ocv-statistics-player b {
  display: inline-block;
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(var(--ocv-u, 1px) * 14);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.ocv-statistics-rating {
  flex: 0 0 auto;
  margin: 0 calc(var(--ocv-u, 1px) * 3);
  color: var(--ocv-muted, #8a93a3);
  font-size: calc(var(--ocv-u, 1px) * 14);
  font-weight: 500;
  line-height: 1.1;
}

.ocv-statistics-rating.is-rating-red { color: #e53935; }
.ocv-statistics-rating.is-rating-orange { color: #fb8c00; }
.ocv-statistics-rating.is-rating-purple { color: #8e24aa; }
.ocv-statistics-rating.is-rating-blue { color: #1e88e5; }
.ocv-statistics-rating.is-rating-green { color: #43a047; }
.ocv-statistics-rating.is-rating-gold { color: #d4a017; }
.ocv-statistics-rating.is-rating-gray { color: #8a93a3; }

@media (hover: hover) {
  .ocv-statistics-game:hover {
    background: var(--ocv-hover, #eef6ff);
  }
}

@media (hover: none), (pointer: coarse) {
  .ocv-statistics-game-type { font-size: calc(var(--ocv-u, 1px) * 12); }
  .ocv-statistics-game-meta time { font-size: calc(var(--ocv-u, 1px) * 13); }
  .ocv-statistics-player b,
  .ocv-statistics-rating,
  .ocv-statistics-result strong { font-size: calc(var(--ocv-u, 1px) * 15); }
}

html.fs-app-theme-dark .ocv-statistics-game-badge {
  color: var(--fs-app-text-2, #cbd5e1);
  background: var(--fs-app-surface-3, #253247);
}

html.fs-app-theme-dark .ocv-statistics-game-badge.is-training {
  color: #ddd6fe;
  background: #3b2a63;
}

html.fs-app-theme-dark .ocv-statistics-result strong.is-win {
  color: var(--fs-result-win-text, #4ade80);
  background: var(--fs-result-win-bg, rgba(34, 197, 94, .18));
}

html.fs-app-theme-dark .ocv-statistics-result strong.is-draw {
  color: var(--fs-result-draw-text, #fde047);
  background: var(--fs-result-draw-bg, rgba(234, 179, 8, .18));
}

html.fs-app-theme-dark .ocv-statistics-result strong.is-loss {
  color: var(--fs-result-loss-text, #f87171);
  background: var(--fs-result-loss-bg, rgba(239, 68, 68, .18));
}

/* app-theme.css의 범용 small 색상보다 우선하여 My Games와 같은 레이팅 팔레트를 유지한다. */
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-red {
  color: var(--fs-rating-red, #ef5b5b) !important;
}
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-orange {
  color: var(--fs-rating-orange, #fb923c) !important;
}
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-purple {
  color: var(--fs-rating-purple, #c084fc) !important;
}
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-blue {
  color: var(--fs-rating-blue, #60a5fa) !important;
}
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-green {
  color: var(--fs-rating-green, #4ade80) !important;
}
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-gold {
  color: var(--fs-rating-gold, #facc15) !important;
}
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-gray {
  color: var(--fs-rating-unofficial, #a8b4c4) !important;
}

.ocv-statistics-message {
  height: 100%;
  padding: calc(var(--ocv-u, 1px) * 12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ocv-muted, #667085);
  font-size: calc(var(--ocv-u, 1px) * 12);
  text-align: center;
  box-sizing: border-box;
}

.ocv-statistics-message a {
  margin-left: calc(var(--ocv-u, 1px) * 4);
  color: #2f6ee5;
  font-weight: 700;
}

.ocv-statistics-spinner {
  width: calc(var(--ocv-u, 1px) * 18);
  height: calc(var(--ocv-u, 1px) * 18);
  border: calc(var(--ocv-u, 1px) * 2) solid var(--ocv-border, #d7dce5);
  border-top-color: #2f6ee5;
  border-radius: 50%;
  animation: ocv-statistics-spin .7s linear infinite;
}

@keyframes ocv-statistics-spin {
  to { transform: rotate(360deg); }
}

.ocv-stat-cell {
  position: absolute;
  z-index: 310;
  width: var(--cell);
  height: var(--cell);
  color: #fff;
  line-height: 1;
  text-align: center;
  text-shadow: none;
  pointer-events: none;
  box-sizing: border-box;
}

.ocv-stat-count {
  position: absolute;
  left: calc(var(--ocv-u, 1px) * 2);
  right: calc(var(--ocv-u, 1px) * 2);
  top: calc(50% + calc(var(--ocv-u, 1px) * 5));
  transform: translateY(-50%);
  max-width: calc(var(--cell) - calc(var(--ocv-u, 1px) * 4));
  margin: 0 auto;
  font-size: calc(var(--cell) * var(--ocv-stat-count-scale, .31) + calc(var(--ocv-u, 1px) * 2));
  font-weight: 800;
  white-space: nowrap;
}

.ocv-stat-cell.is-eval-size .ocv-stat-count {
  font-size: calc(var(--ocv-u, 1px) * 18);
}

.ocv-stat-cell.is-eval-size-minus-one .ocv-stat-count {
  font-size: calc(var(--ocv-u, 1px) * 17);
}

.ocv-stat-rate {
  position: absolute;
  left: calc(var(--ocv-u, 1px) * 2);
  right: calc(var(--ocv-u, 1px) * 2);
  top: 68%;
  margin-top: calc(var(--ocv-u, 1px) * 4);
  font-size: calc(var(--cell) * var(--ocv-stat-rate-scale, .20));
  font-weight: 700;
  white-space: nowrap;
}

.ocv-stat-win {
  position: absolute;
  left: calc(var(--ocv-u, 1px) * 2);
  right: calc(var(--ocv-u, 1px) * 2);
  top: calc(24% + calc(var(--ocv-u, 1px) * 2));
  font-size: calc(var(--cell) * .17);
  font-weight: 700;
  white-space: nowrap;
}

/* 통계 ON 중에는 대국자 개인 정보(사진·국기·레이팅·시간·인증배지)를 숨긴다.
   국면(수순) 통계 열람 화면이라 특정 대국자 정보는 불필요/혼란스럽다. 디스크 수 배지는 게임 상태라 유지.
   DOM 은 안 건드리므로 통계 OFF 시 클래스 제거만으로 원상 복원된다(이름은 JS 로 Black/White 초기화). */
html.ocv-statistics-on #BlackPhotoSlot,
html.ocv-statistics-on #WhitePhotoSlot,
html.ocv-statistics-on #BlackFlagSlot,
html.ocv-statistics-on #WhiteFlagSlot,
html.ocv-statistics-on #BlackRating,
html.ocv-statistics-on #WhiteRating,
html.ocv-statistics-on #BlackTimer,
html.ocv-statistics-on #WhiteTimer,
html.ocv-statistics-on #BlackVerifiedSlot,
html.ocv-statistics-on #WhiteVerifiedSlot {
  display: none !important;
}

html.ocv-statistics-on .oc_eval {
  z-index: 320;
  padding: calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 2) 0 0;
  font-size: calc(var(--cell) * .24);
  line-height: 1;
  text-align: right;
  box-sizing: border-box;
}

html.ocv-statistics-on .oc_eval .eval-score-text {
  position: static;
  font-size: inherit;
  line-height: inherit;
}

html.ocv-statistics-on .oc_eval .eval-badge-icon {
  width: calc(var(--cell) * .23);
  height: calc(var(--cell) * .23);
}

/* 오프닝 탭에는 보드 통계 오버레이가 없다. 통계 공통 축소 규칙만 되돌려
   Evaluate 표시를 일반 ocviewer와 완전히 같은 크기·정렬로 유지한다. */
html.ocv-statistics-on.ocv-statistics-opening .oc_eval {
  z-index: 300;
  padding: 0;
  font-size: calc(var(--ocv-u, 1px) * 18);
  line-height: var(--cell);
  text-align: center;
}

html.ocv-statistics-on.ocv-statistics-opening .oc_eval .eval-score-text {
  position: relative;
  font-size: inherit;
  line-height: inherit;
}

html.ocv-statistics-on.ocv-statistics-opening .oc_eval .eval-badge-icon {
  width: calc(var(--cell) * .30);
  height: calc(var(--cell) * .30);
}

html.ocv-statistics-on.ocv-statistics-opening .oc_eval .eval-badge-exact {
  width: calc(var(--cell) * .30 - calc(var(--ocv-u, 1px) * 2));
  height: calc(var(--cell) * .30 - calc(var(--ocv-u, 1px) * 2));
}

html.fs-app-theme-dark #ocvStatisticsPanel {
  --ocv-bg: var(--fs-app-surface, #151d2a);
  --ocv-surface: var(--fs-app-surface-2, #1c2635);
  --ocv-surface-2: var(--fs-app-surface-3, #253247);
  --ocv-hover: var(--fs-app-surface-3, #253247);
  --ocv-text: var(--fs-app-text, #f1f5f9);
  --ocv-muted: var(--fs-app-text-2, #cbd5e1);
  --ocv-border: var(--fs-app-border, #3a414c);
  --ocv-card-border: #282f39;
}

html.fs-app-theme-dark .ocv-statistics-source button.is-selected {
  color: #fff;
  background: #2b65d9;
}

html.fs-app-theme-dark .ocv-statistics-basis button.is-selected {
  color: #fff;
  background: #2b65d9;
}

html.fs-app-theme-dark .ocv-statistics-message a {
  color: #86b8ff;
}

html.fs-app-theme-dark .ocv-opening-winbar {
  background: #f8fafc;
}

html.fs-app-theme-dark .ocv-opening-winbar-fill.is-draw {
  background: #7d8796;
}
/* Evaluation bar: preserve semantic black/white fills with subdued theme-neutral chrome. */
.oc-eval-bar {
  border-color: rgba(100, 116, 139, 0.78);
  box-shadow: none;
}

@media (prefers-color-scheme: dark) {
  .oc-eval-bar {
    border-color: rgba(100, 116, 139, 0.9);
    box-shadow: none;
  }

  .oc-eval-bar__value {
    font-weight: 700;
    text-shadow: 0 var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 2) rgba(0, 0, 0, 0.72);
  }
}

body.dark .oc-eval-bar,
body.dark-mode .oc-eval-bar,
html[data-theme="dark"] .oc-eval-bar,
html[data-bs-theme="dark"] .oc-eval-bar {
  border-color: rgba(100, 116, 139, 0.9);
  box-shadow: none;
}

body.dark .oc-eval-bar__value,
body.dark-mode .oc-eval-bar__value,
html[data-theme="dark"] .oc-eval-bar__value,
html[data-bs-theme="dark"] .oc-eval-bar__value {
  font-weight: 700;
  text-shadow: 0 var(--ocv-u, 1px) calc(var(--ocv-u, 1px) * 2) rgba(0, 0, 0, 0.72);
}
.ocv-key-moment-panel {
  min-height: calc(var(--ocv-u, 1px) * 96);
  box-sizing: border-box;
  margin: 0 calc(var(--ocv-u, 1px) * 5);
  padding: calc(var(--ocv-u, 1px) * 3) calc(var(--ocv-u, 1px) * 12);
  border: var(--ocv-u, 1px) solid #dbe4ef;
  border-radius: calc(var(--ocv-u, 1px) * 14);
  background: linear-gradient(145deg, #f8fbff, #eef5ff);
  color: #172033;
  text-align: left;
  cursor: zoom-in;
}
.ocv-key-moment-panel button,
.ocv-key-moment-panel a,
.ocv-key-moment-panel input,
.ocv-key-moment-panel select,
.ocv-key-moment-panel textarea { cursor: pointer; }
.ocv-key-moment-panel[hidden] { display: none !important; }
.ocv-key-moment-panel[data-quality="brilliant"] { --ocv-quality-text: #137f7a; --ocv-quality-dark-text: #67d5cf; }
.ocv-key-moment-panel[data-quality="great"] { --ocv-quality-text: #25729c; --ocv-quality-dark-text: #73c6eb; }
.ocv-key-moment-panel[data-quality="best"] { --ocv-quality-text: #568425; --ocv-quality-dark-text: #abd878; }
.ocv-key-moment-panel[data-quality="excellent"] { --ocv-quality-text: #668c28; --ocv-quality-dark-text: #b9da78; }
.ocv-key-moment-panel[data-quality="book"] { --ocv-quality-text: #795f46; --ocv-quality-dark-text: #d7b996; }
.ocv-key-moment-panel[data-quality="inaccuracy"] { --ocv-quality-text: #9a7000; --ocv-quality-dark-text: #ffe27a; }
.ocv-key-moment-panel[data-quality="mistake"] { --ocv-quality-text: #a9590d; --ocv-quality-dark-text: #ffc078; }
.ocv-key-moment-panel[data-quality="miss"] { --ocv-quality-text: #b33a33; --ocv-quality-dark-text: #ff9b94; }
.ocv-key-moment-panel[data-quality="blunder"] { --ocv-quality-text: #9e2926; --ocv-quality-dark-text: #f28f8b; }
/* 판정·필터 줄과 위아래 여백을 줄여 같은 패널 높이에서 코치 설명을 더 많이 표시한다. */
.ocv-key-moment-header { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--ocv-u, 1px) * 8); margin-bottom: calc(var(--ocv-u, 1px) * 5); }
.ocv-key-moment-filters { display: inline-flex; flex: 0 0 auto; min-width: 0; max-width: 60%; align-items: center; gap: calc(var(--ocv-u, 1px) * 2); padding: 0; border: var(--ocv-u, 1px) solid #cbd5e1; border-radius: calc(var(--ocv-u, 1px) * 8); background: #f8fafc; }
.ocv-key-moment-filter { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--ocv-u, 1px) * 26); min-height: calc(var(--ocv-u, 1px) * 18); padding: 0 calc(var(--ocv-u, 1px) * 7); box-sizing: border-box; border: 0; border-radius: calc(var(--ocv-u, 1px) * 7); background: transparent; color: #64748b; font: 750 calc(var(--ocv-u, 1px) * 11)/1.2 system-ui,sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ocv-key-moment-filter:hover { background: #e2e8f0; }
.ocv-key-moment-filter[aria-pressed="true"] { background: #111827; color: #fff; }
.ocv-key-moment-text { min-width: 0; }
.ocv-key-moment-heading { display: flex; align-items: baseline; justify-content: flex-start; flex: 1 1 auto; flex-wrap: wrap; gap: calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 6); min-width: 0; margin: 0; }
.ocv-key-moment-kicker { flex: 0 1 auto; min-width: 0; max-width: 100%; color: #2563eb; font-size: calc(var(--ocv-u, 1px) * 11); line-height: 1.1; font-weight: 800; letter-spacing: .02em; text-align: left; overflow-wrap: anywhere; }
.ocv-key-moment-panel h2 { min-width: 0; max-width: 100%; margin: 0; color: var(--ocv-quality-text, inherit); font-size: calc(var(--ocv-u, 1px) * 14); line-height: 1.1; overflow-wrap: anywhere; }
.ocv-key-moment-coach-row { display: flex; min-width: 0; align-items: flex-start; gap: calc(var(--ocv-u, 1px) * 8); }
.ocv-key-moment-copy-wrap { position: relative; min-width: 0; flex: 1 1 auto; }
/* 수 종류 리드(2026-09-02): 판정 한마디를 해당 판정 색으로 강조 */
.ocv-review-quality-lead { font-weight: 800; color: var(--ocv-quality-text, #172033); }
html.fs-app-theme-dark .ocv-review-quality-lead { color: var(--ocv-quality-dark-text, #e5edf8); }
.ocv-key-moment-copy-line { min-height: calc(var(--ocv-u, 1px) * 68); margin: 0; font-size: calc(var(--ocv-u, 1px) * 12); line-height: 1.3; height: calc(var(--ocv-u, 1px) * 68); max-height: calc(var(--ocv-u, 1px) * 68); padding-right: calc(var(--ocv-u, 1px) * 2); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; cursor: zoom-in; -webkit-overflow-scrolling: touch; }
.ocv-key-moment-copy-line:focus-visible { outline: calc(var(--ocv-u, 1px) * 2) solid #2563eb; outline-offset: calc(var(--ocv-u, 1px) * 2); border-radius: calc(var(--ocv-u, 1px) * 4); }
.ocv-key-moment-copy-line::-webkit-scrollbar { width: calc(var(--ocv-u, 1px) * 4); }
.ocv-key-moment-copy-line::-webkit-scrollbar-thumb { border-radius: calc(var(--ocv-u, 1px) * 4); background: rgba(100,116,139,.48); }
.ocv-key-moment-scrollbar { display: none; pointer-events: none; }
.ocv-key-moment-copy-line.is-ai-loading { position: relative; overflow: hidden; }
.ocv-key-moment-typing { display: none; height: 1.3em; align-items: center; gap: calc(var(--ocv-u, 1px) * 4); padding: 0 calc(var(--ocv-u, 1px) * 3); vertical-align: middle; }
.ocv-key-moment-copy-line.is-ai-loading .ocv-key-moment-typing { display: inline-flex; }
/* 딤은 온라인 게임방 채팅 확장(#obChatExpandBackdrop)과 같은 방식·같은 값으로 만든다:
   카드 레이어와 형제인 별도 요소, rgba(15,23,42,.35), backdrop-filter 없음. */
.ocv-review-copy-backdrop { display: none; position: fixed; inset: 0; z-index: 709; background: rgba(15,23,42,.35); }
body.ocv-review-copy-popup-open .ocv-review-copy-backdrop { display: block; }
/* 확대된 코치 대화는 온라인 게임방 채팅 시트처럼 보드를 가리지 않는다(2026-09-21).
   화면 전체를 덮는 fixed 레이어(inset:0 + 스크림 + backdrop-filter)를 쓰면 다크모드 앱 WebView 에서
   보드 영역이 통째로 단색으로 덮여 보였다. 배경만 투명하게 해도 증상이 남아(덮인 색이 동일) 레이어
   자체를 카드 높이만큼으로 줄인다 — 보드 위에는 아무 요소도 겹치지 않는다.
   닫기는 카드 탭(bindTapWithoutDrag)이 담당하므로 바깥 스크림이 없어도 동작은 같다. */
.ocv-review-copy-popup { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 710; display: flex; padding: 0 calc(var(--ocv-u, 1px) * 8) max(calc(var(--ocv-u, 1px) * 12), env(safe-area-inset-bottom)); align-items: flex-end; justify-content: center; box-sizing: border-box; background: transparent; }
body.ocv-overlay-inner-top-gap .ocv-review-copy-popup { padding-bottom: calc(var(--ocv-u, 1px) * 12); }
.ocv-review-copy-popup[hidden] { display: none !important; }
.ocv-review-copy-popup-card { display: flex; width: min(calc(var(--ocv-u, 1px) * 430), 100%); height: min(calc(var(--ocv-u, 1px) * 280), 46vh); min-height: min(calc(var(--ocv-u, 1px) * 180), 46vh); flex-direction: column; overflow: hidden; border: var(--ocv-u, 1px) solid #cbd5e1; border-radius: calc(var(--ocv-u, 1px) * 15); background: #f8fafc; color: #172033; box-shadow: 0 calc(var(--ocv-u, 1px) * 18) calc(var(--ocv-u, 1px) * 48) rgba(15,23,42,.38); cursor: zoom-out; }
.ocv-review-copy-popup-card:focus-visible { outline: calc(var(--ocv-u, 1px) * 3) solid #2563eb; outline-offset: calc(var(--ocv-u, 1px) * -3); }
.ocv-review-copy-popup-heading { display: flex; min-height: calc(var(--ocv-u, 1px) * 48); padding: 0; align-items: center; box-sizing: border-box; border-bottom: var(--ocv-u, 1px) solid #e2e8f0; }
.ocv-review-copy-popup-coach { appearance: none; -webkit-appearance: none; display: flex; width: 100%; min-width: 0; min-height: calc(var(--ocv-u, 1px) * 48); padding: calc(var(--ocv-u, 1px) * 6) calc(var(--ocv-u, 1px) * 12); align-items: center; gap: calc(var(--ocv-u, 1px) * 9); border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ocv-review-copy-popup-coach:hover { background: #eef4fb; }
.ocv-review-copy-popup-coach:focus-visible { outline: calc(var(--ocv-u, 1px) * 2) solid #2563eb; outline-offset: calc(var(--ocv-u, 1px) * -2); }
.ocv-review-copy-popup-heading img { display: block; width: calc(var(--ocv-u, 1px) * 36); height: calc(var(--ocv-u, 1px) * 36); flex: 0 0 calc(var(--ocv-u, 1px) * 36); border: calc(var(--ocv-u, 1px) * 2) solid #cbd5e1; object-fit: cover; } /* 모양·바탕: ocviewer.review-coach.css 공용 규칙 */
.ocv-review-copy-popup-heading strong { min-width: 0; color: inherit; font: 800 calc(var(--ocv-u, 1px) * 15)/1.2 system-ui, sans-serif; }
.ocv-review-copy-popup-coach-arrow { flex: 0 0 auto; margin-left: var(--ocv-u, 1px); font: 900 calc(var(--ocv-u, 1px) * 18)/1 system-ui, sans-serif; }
.ocv-review-copy-popup-body { min-height: 0; flex: 1 1 auto; padding: calc(var(--ocv-u, 1px) * 12) calc(var(--ocv-u, 1px) * 14) calc(var(--ocv-u, 1px) * 16); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; font-size: calc(var(--ocv-u, 1px) * 15); line-height: 1.5; white-space: normal; -webkit-overflow-scrolling: touch; }
.ocv-review-copy-popup-body::-webkit-scrollbar { width: calc(var(--ocv-u, 1px) * 6); }
.ocv-review-copy-popup-body::-webkit-scrollbar-thumb { border-radius: calc(var(--ocv-u, 1px) * 6); background: rgba(100,116,139,.55); }
.ocv-review-copy-popup-body.is-ai-loading .ocv-key-moment-typing { display: inline-flex; }
.ocv-key-moment-typing > i { display: block; width: calc(var(--ocv-u, 1px) * 5); height: calc(var(--ocv-u, 1px) * 5); border-radius: 50%; background: currentColor; opacity: .42; animation: ocv-review-coach-typing 1s ease-in-out infinite; }
.ocv-key-moment-typing > i:nth-child(2) { animation-delay: .14s; }
.ocv-key-moment-typing > i:nth-child(3) { animation-delay: .28s; }
@keyframes ocv-review-coach-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .34; } 30% { transform: translateY(-3px); opacity: .78; } }
@media (prefers-reduced-motion: reduce) { .ocv-key-moment-typing > i { animation: none; opacity: .58; } }
.ocv-key-moment-hint { color: #6d28d9; font-weight: 650; margin-left: .35em; }
.ocv-review-coach-picker { position: fixed; inset: 0; z-index: 720; display: flex; padding: max(calc(var(--ocv-u, 1px) * 18), env(safe-area-inset-top)) calc(var(--ocv-u, 1px) * 14) max(calc(var(--ocv-u, 1px) * 18), env(safe-area-inset-bottom)); align-items: center; justify-content: center; box-sizing: border-box; background: rgba(15,23,42,.58); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.ocv-review-coach-picker[hidden] { display: none !important; }
.ocv-review-coach-picker-card { display: flex; width: min(calc(var(--ocv-u, 1px) * 430), 100%); max-height: min(78vh, calc(var(--ocv-u, 1px) * 610)); flex-direction: column; overflow: hidden; border: var(--ocv-u, 1px) solid #cbd5e1; border-radius: calc(var(--ocv-u, 1px) * 16); background: #f8fafc; color: #172033; box-shadow: 0 calc(var(--ocv-u, 1px) * 18) calc(var(--ocv-u, 1px) * 50) rgba(15,23,42,.35); }
.ocv-review-coach-picker-heading { display: flex; min-height: calc(var(--ocv-u, 1px) * 50); padding: calc(var(--ocv-u, 1px) * 7) calc(var(--ocv-u, 1px) * 8) calc(var(--ocv-u, 1px) * 7) calc(var(--ocv-u, 1px) * 16); align-items: center; justify-content: space-between; border-bottom: var(--ocv-u, 1px) solid #e2e8f0; }
.ocv-review-coach-picker-heading h2 { margin: 0; color: inherit; font-size: calc(var(--ocv-u, 1px) * 17); line-height: 1.25; }
.ocv-review-coach-picker-close { appearance: none; -webkit-appearance: none; display: inline-flex; width: calc(var(--ocv-u, 1px) * 44); height: calc(var(--ocv-u, 1px) * 44); padding: 0; align-items: center; justify-content: center; border: 0; border-radius: calc(var(--ocv-u, 1px) * 10); background: transparent; color: #334155; font: 700 calc(var(--ocv-u, 1px) * 28)/1 system-ui, sans-serif; cursor: pointer; }
.ocv-review-coach-picker-close:hover { background: #e2e8f0; }
.ocv-review-coach-picker-close:focus-visible { outline: calc(var(--ocv-u, 1px) * 2) solid #2563eb; outline-offset: calc(var(--ocv-u, 1px) * -2); }
.ocv-review-coach-options { display: grid; min-height: 0; padding: calc(var(--ocv-u, 1px) * 10); grid-template-columns: repeat(2, minmax(0,1fr)); gap: calc(var(--ocv-u, 1px) * 8); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ocv-review-coach-option { appearance: none; -webkit-appearance: none; display: flex; min-width: 0; min-height: calc(var(--ocv-u, 1px) * 58); padding: calc(var(--ocv-u, 1px) * 5); align-items: center; gap: calc(var(--ocv-u, 1px) * 7); overflow: hidden; border: var(--ocv-u, 1px) solid #dbe4ef; border-radius: calc(var(--ocv-u, 1px) * 11); background: #fff; color: #172033; text-align: left; cursor: pointer; }
.ocv-review-coach-option:hover { border-color: #93c5fd; background: #eff6ff; }
.ocv-review-coach-option.is-selected { border-color: #d4a017; background: #fff8d8; box-shadow: inset 0 0 0 var(--ocv-u, 1px) rgba(212,160,23,.2); }
.ocv-review-coach-option:focus-visible { outline: calc(var(--ocv-u, 1px) * 2) solid #2563eb; outline-offset: var(--ocv-u, 1px); }
.ocv-review-coach-option img { display: block; width: calc(var(--ocv-u, 1px) * 44); height: calc(var(--ocv-u, 1px) * 44); flex: 0 0 calc(var(--ocv-u, 1px) * 44); border: var(--ocv-u, 1px) solid #e2e8f0; object-fit: cover; }
.ocv-review-coach-option-copy { display: flex; min-width: 0; flex-direction: column; gap: calc(var(--ocv-u, 1px) * 2); }
.ocv-review-coach-option-copy strong { overflow: hidden; color: inherit; font-size: calc(var(--ocv-u, 1px) * 13); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.ocv-review-coach-option-copy small { display: -webkit-box; overflow: hidden; color: #64748b; font-size: calc(var(--ocv-u, 1px) * 10); line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ocv-key-moment-graph-current-line { stroke: var(--ocv-key-moment-current-color, #000); stroke-width: 2.4; stroke-dasharray: 5 4; opacity: .9; pointer-events: none; vector-effect: non-scaling-stroke; }
body.ocv-game-review-key-moments #anSvg #anCursor { stroke: #000 !important; }
body.ocv-game-review-key-moments #anSvg #anCursor.ocv-key-moment-source-cursor { stroke: var(--ocv-key-moment-current-color, #000) !important; }
body.ocv-game-review-key-moments #anSvg #anCursor.ocv-review-move-source-cursor { stroke: var(--ocv-key-moment-current-color, #000) !important; }
html.fs-app-theme-dark body.ocv-game-review-key-moments #anSvg #anCursor,
body.fs-app-theme-dark.ocv-game-review-key-moments #anSvg #anCursor { stroke: #f8fafc !important; }
html.fs-app-theme-dark body.ocv-game-review-key-moments #anSvg #anCursor.ocv-key-moment-source-cursor,
body.fs-app-theme-dark.ocv-game-review-key-moments #anSvg #anCursor.ocv-key-moment-source-cursor { stroke: var(--ocv-key-moment-current-color, #f8fafc) !important; }
html.fs-app-theme-dark body.ocv-game-review-key-moments #anSvg #anCursor.ocv-review-move-source-cursor,
body.fs-app-theme-dark.ocv-game-review-key-moments #anSvg #anCursor.ocv-review-move-source-cursor { stroke: var(--ocv-key-moment-current-color, #f8fafc) !important; }
.ocv-review-move-graph-point { stroke: #334155; stroke-width: 1; pointer-events: none; vector-effect: non-scaling-stroke; }
.ocv-review-move-graph-point.is-current-move { stroke: #0f172a; stroke-width: 2.5; }
html.fs-app-theme-dark .ocv-review-move-graph-point, body.fs-app-theme-dark .ocv-review-move-graph-point { stroke: #e2e8f0; }
html.fs-app-theme-dark .ocv-review-move-graph-point.is-current-move, body.fs-app-theme-dark .ocv-review-move-graph-point.is-current-move { stroke: #fff; }
.ocv-key-moment-source-dot-hidden { display: none; }
.ocv-key-moment-graph-point { stroke: #334155; stroke-width: 2.2; pointer-events: none; vector-effect: non-scaling-stroke; transition: opacity .12s ease; }
.ocv-key-moment-graph-point.is-filtered-out { stroke: var(--ocv-key-moment-outline, #94a3b8); stroke-width: 1.2; opacity: .7; }
.ocv-key-moment-graph-point.is-current { stroke: #0f172a; stroke-width: 5; opacity: 1; filter: drop-shadow(0 0 3px rgba(255,255,255,.95)); }
.ocv-review-toolbar { display: grid; grid-template-columns: minmax(0,1fr) calc(var(--ocv-u, 1px) * 36) repeat(2, minmax(0,1fr)) minmax(calc(var(--ocv-u, 1px) * 88),1.25fr); gap: calc(var(--ocv-u, 1px) * 5); width: min(100%, calc(var(--board) + calc(var(--ocv-u, 1px) * 30))); margin: calc(var(--ocv-u, 1px) * 7) auto calc(var(--ocv-u, 1px) * 5); }
.ocv-review-toolbar[hidden] { display: none !important; }
.ocv-review-action { min-width: 0; min-height: calc(var(--ocv-u, 1px) * 38); overflow: hidden; border: var(--ocv-u, 1px) solid #cbd5e1; border-radius: calc(var(--ocv-u, 1px) * 10); background: #fff; color: #1e293b; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ocv-review-toolbar .ocv-review-action { min-height: calc(var(--ocv-u, 1px) * 34); }
.ocv-review-action--icon { display: flex; align-items: center; justify-content: center; padding: calc(var(--ocv-u, 1px) * 3); }
.ocv-review-action--icon svg { display: block; width: calc(var(--ocv-u, 1px) * 22); height: calc(var(--ocv-u, 1px) * 22); flex: 0 0 calc(var(--ocv-u, 1px) * 22); }
.ocv-review-control-tooltip { display: flex; min-width: 0; }
.ocv-review-control-tooltip > button { width: 100%; }
.ocv-review-action[aria-pressed="true"] { border-color: #d4a017; background: #fff8d8; color: #7c5900; }
.ocv-review-action[data-hint-mode="eval"] { border-color: #7c3aed; background: #f3e8ff; color: #5b21b6; }
/* 다음 핵심 국면으로 넘어가게 유도: 핵심 국면 제목과 같은 파랑 계열의 옅은 강조(2026-10-02). */
#ocvReviewNext:not(:disabled) { border-color: #93c5fd; background: #e0ecff; color: #1d4ed8; }
.ocv-review-action:focus-visible { outline: calc(var(--ocv-u, 1px) * 2) solid #2563eb; outline-offset: calc(var(--ocv-u, 1px) * 2); }
.ocv-review-action:disabled { opacity: .4; cursor: default; }
body.ocv-game-review-key-moments :focus,
body.ocv-game-review-key-moments :focus-visible { outline: none !important; }
@media (max-width: 520px) and (pointer: coarse) {
  .ocv-key-moment-panel { min-height: calc(var(--ocv-u, 1px) * 108); margin-right: calc(var(--ocv-u, 1px) * 4); margin-left: calc(var(--ocv-u, 1px) * 4); padding: calc(var(--ocv-u, 1px) * 3) calc(var(--ocv-u, 1px) * 12); }
  .ocv-key-moment-filter { min-height: calc(var(--ocv-u, 1px) * 20); font-size: calc(var(--ocv-u, 1px) * 12); }
  .ocv-key-moment-heading { margin-top: 0; }
  .ocv-key-moment-panel h2 { font-size: calc(var(--ocv-u, 1px) * 16); }
  .ocv-key-moment-kicker { font-size: calc(var(--ocv-u, 1px) * 12); }
  .ocv-key-moment-coach-row { gap: calc(var(--ocv-u, 1px) * 9); }
  .ocv-key-moment-copy-line { min-height: calc(var(--ocv-u, 1px) * 78); margin-bottom: 0; font-size: calc(var(--ocv-u, 1px) * 14); line-height: 1.42; height: calc(var(--ocv-u, 1px) * 78); max-height: calc(var(--ocv-u, 1px) * 78); }
  .ocv-key-moment-copy-line { scrollbar-width: none; }
  .ocv-key-moment-copy-line::-webkit-scrollbar { width: 0; height: 0; }
  .ocv-key-moment-scrollbar { position: absolute; top: 0; right: calc(var(--ocv-u, 1px) * -7); bottom: 0; display: block; width: calc(var(--ocv-u, 1px) * 4); opacity: 0; border-radius: calc(var(--ocv-u, 1px) * 4); background: rgba(100,116,139,.22); transition: opacity .12s ease; }
  .ocv-key-moment-copy-wrap.has-scroll-overflow .ocv-key-moment-scrollbar { opacity: 1; }
  .ocv-key-moment-scrollbar-thumb { position: absolute; top: 0; left: 0; display: block; width: calc(var(--ocv-u, 1px) * 4); min-height: calc(var(--ocv-u, 1px) * 10); border-radius: calc(var(--ocv-u, 1px) * 4); background: rgba(71,85,105,.72); will-change: transform; }
  .ocv-review-toolbar { grid-template-columns: minmax(0,.95fr) calc(var(--ocv-u, 1px) * 42) minmax(0,.9fr) minmax(0,.9fr) minmax(calc(var(--ocv-u, 1px) * 88),1.25fr); }
  .ocv-key-moment-move-button { height:calc(var(--ocv-u, 1px) * 42); }
  .ocv-review-toolbar .ocv-review-action { display: flex; align-items: center; justify-content: center; min-height: calc(var(--ocv-u, 1px) * 42); padding: calc(var(--ocv-u, 1px) * 3) calc(var(--ocv-u, 1px) * 4); font-size: calc(var(--ocv-u, 1px) * 15); line-height: 1.1; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
}
.ocv-review-move-layer { position: absolute; inset: 0; z-index: 260; pointer-events: none; }
.ocv-review-best-move-layer { position: absolute; inset: 0; z-index: 270; pointer-events: none; }
.ocv-review-move-quality-layer { position: absolute; inset: 0; z-index: 320; pointer-events: none; }
.ocv-review-put-next-marker { pointer-events: none; }
.ocv-review-best-move-marker { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--disc) * .72); height: calc(var(--disc) * .72); box-sizing: border-box; border: calc(var(--ocv-u, 1px) * 2) solid #facc15; border-radius: 50%; background: rgba(15,23,42,.9); color: #fde047; box-shadow: 0 0 0 calc(var(--ocv-u, 1px) * 2) rgba(255,255,255,.8), 0 calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 5) rgba(15,23,42,.45); font-size: clamp(calc(var(--ocv-u, 1px) * 14), calc(var(--disc) * .42), calc(var(--ocv-u, 1px) * 24)); font-weight: 900; line-height: 1; text-shadow: 0 var(--ocv-u, 1px) var(--ocv-u, 1px) rgba(0,0,0,.65); pointer-events: none; }
.ocv-game-review-key-moments #ghostLayer > [id^="ghost_"] { display: none !important; }
.ocv-game-review-key-moments #board { cursor: pointer; }
.ocv-game-review-key-moments #anSvg { cursor: pointer; }
html.fs-app-theme-dark .ocv-key-moment-graph-current-line,
body.fs-app-theme-dark .ocv-key-moment-graph-current-line { stroke: var(--ocv-key-moment-current-color, #f8fafc); }
.ocv-game-review-menu > button { font: 850 calc(var(--ocv-u, 1px) * 16)/1 system-ui; }
html.fs-app-theme-dark .ocv-key-moment-panel, body.fs-app-theme-dark .ocv-key-moment-panel { border-color: #334155; background: linear-gradient(145deg, #111c2d, #17243a); color: #f1f5f9; }
html.fs-app-theme-dark .ocv-key-moment-panel h2, body.fs-app-theme-dark .ocv-key-moment-panel h2 { color: var(--ocv-quality-dark-text, var(--ocv-quality-text, inherit)); }
html.fs-app-theme-dark .ocv-key-moment-kicker, body.fs-app-theme-dark .ocv-key-moment-kicker { color: #60a5fa; }
html.fs-app-theme-dark .ocv-key-moment-scrollbar, body.fs-app-theme-dark .ocv-key-moment-scrollbar { background: rgba(148,163,184,.24); }
html.fs-app-theme-dark .ocv-key-moment-scrollbar-thumb, body.fs-app-theme-dark .ocv-key-moment-scrollbar-thumb { background: rgba(203,213,225,.78); }
html.fs-app-theme-dark .ocv-key-moment-hint, body.fs-app-theme-dark .ocv-key-moment-hint { color: #c4b5fd; }
html.fs-app-theme-dark .ocv-review-copy-popup-card, body.fs-app-theme-dark .ocv-review-copy-popup-card { border-color: #475569; background: #111c2d; color: #f1f5f9; box-shadow: 0 calc(var(--ocv-u, 1px) * 18) calc(var(--ocv-u, 1px) * 50) rgba(0,0,0,.72); }
html.fs-app-theme-dark .ocv-review-copy-popup-heading, body.fs-app-theme-dark .ocv-review-copy-popup-heading { border-bottom-color: #334155; }
html.fs-app-theme-dark .ocv-review-copy-popup-coach:hover, body.fs-app-theme-dark .ocv-review-copy-popup-coach:hover { background: #1e3352; }
html.fs-app-theme-dark .ocv-review-copy-popup-heading img, body.fs-app-theme-dark .ocv-review-copy-popup-heading img { border-color: #64748b; }
html.fs-app-theme-dark .ocv-review-copy-popup-body::-webkit-scrollbar-thumb, body.fs-app-theme-dark .ocv-review-copy-popup-body::-webkit-scrollbar-thumb { background: rgba(203,213,225,.72); }
html.fs-app-theme-dark .ocv-review-coach-picker-card, body.fs-app-theme-dark .ocv-review-coach-picker-card { border-color: #475569; background: #111c2d; color: #f1f5f9; box-shadow: 0 calc(var(--ocv-u, 1px) * 18) calc(var(--ocv-u, 1px) * 50) rgba(0,0,0,.72); }
html.fs-app-theme-dark .ocv-review-coach-picker-heading, body.fs-app-theme-dark .ocv-review-coach-picker-heading { border-bottom-color: #334155; }
html.fs-app-theme-dark .ocv-review-coach-picker-close, body.fs-app-theme-dark .ocv-review-coach-picker-close { color: #e2e8f0; }
html.fs-app-theme-dark .ocv-review-coach-picker-close:hover, body.fs-app-theme-dark .ocv-review-coach-picker-close:hover { background: #243249; }
html.fs-app-theme-dark .ocv-review-coach-option, body.fs-app-theme-dark .ocv-review-coach-option { border-color: #334155; background: #17243a; color: #f1f5f9; }
html.fs-app-theme-dark .ocv-review-coach-option:hover, body.fs-app-theme-dark .ocv-review-coach-option:hover { border-color: #60a5fa; background: #1e3352; }
html.fs-app-theme-dark .ocv-review-coach-option.is-selected, body.fs-app-theme-dark .ocv-review-coach-option.is-selected { border-color: #facc15; background: #4a3808; box-shadow: inset 0 0 0 var(--ocv-u, 1px) rgba(250,204,21,.22); }
html.fs-app-theme-dark .ocv-review-coach-option img, body.fs-app-theme-dark .ocv-review-coach-option img { border-color: #475569; }
html.fs-app-theme-dark .ocv-review-coach-option-copy small, body.fs-app-theme-dark .ocv-review-coach-option-copy small { color: #aebdd0; }
html.fs-app-theme-dark .ocv-key-moment-graph-point, body.fs-app-theme-dark .ocv-key-moment-graph-point { stroke: #e2e8f0; }
html.fs-app-theme-dark .ocv-key-moment-graph-point.is-filtered-out, body.fs-app-theme-dark .ocv-key-moment-graph-point.is-filtered-out { stroke: var(--ocv-key-moment-outline, #94a3b8); stroke-width: 1.2; opacity: .7; }
html.fs-app-theme-dark .ocv-key-moment-graph-point.is-current, body.fs-app-theme-dark .ocv-key-moment-graph-point.is-current { stroke: #fff; filter: drop-shadow(0 0 3px rgba(2,6,23,.95)); }
html.fs-app-theme-dark .ocv-review-action, body.fs-app-theme-dark .ocv-review-action { border-color: #475569; background: #172033; color: #e2e8f0; }
html.fs-app-theme-dark .ocv-key-moment-move-button, body.fs-app-theme-dark .ocv-key-moment-move-button { border-color:#475569; background:#172033; color:#e2e8f0; box-shadow:none; }
html.fs-app-theme-dark .ocv-review-action[aria-pressed="true"], body.fs-app-theme-dark .ocv-review-action[aria-pressed="true"] { border-color: #facc15; background: #4a3808; color: #fde68a; box-shadow: inset 0 0 0 var(--ocv-u, 1px) rgba(250,204,21,.22); }
html.fs-app-theme-dark .ocv-review-action[data-hint-mode="eval"], body.fs-app-theme-dark .ocv-review-action[data-hint-mode="eval"] { border-color: #a78bfa; background: #3b2366; color: #ede9fe; box-shadow: inset 0 0 0 var(--ocv-u, 1px) rgba(167,139,250,.25); }
html.fs-app-theme-dark .ocv-review-action:focus-visible, body.fs-app-theme-dark .ocv-review-action:focus-visible { outline-color: #60a5fa; }
html.fs-app-theme-dark #ocvReviewNext:not(:disabled), body.fs-app-theme-dark #ocvReviewNext:not(:disabled) { border-color: #3b82f6; background: #1e3a5f; color: #dbeafe; }
html.fs-app-theme-dark .ocv-key-moment-filters, body.fs-app-theme-dark .ocv-key-moment-filters { border-color: #475569; background: #0f172a; }
html.fs-app-theme-dark .ocv-key-moment-filter, body.fs-app-theme-dark .ocv-key-moment-filter { color: #94a3b8; }
html.fs-app-theme-dark .ocv-key-moment-filter:hover, body.fs-app-theme-dark .ocv-key-moment-filter:hover { background: #1e293b; }
html.fs-app-theme-dark .ocv-key-moment-filter[aria-pressed="true"], body.fs-app-theme-dark .ocv-key-moment-filter[aria-pressed="true"] { background: #334155; color: #f8fafc; }
html.fs-app-theme-dark .ocv-review-best-move-marker, body.fs-app-theme-dark .ocv-review-best-move-marker { border-color: #fde047; background: rgba(2,6,23,.94); color: #fde68a; box-shadow: 0 0 0 calc(var(--ocv-u, 1px) * 2) rgba(248,250,252,.92), 0 calc(var(--ocv-u, 1px) * 2) calc(var(--ocv-u, 1px) * 6) rgba(0,0,0,.72); }