@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

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


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로 설정 */
}


body {
  background-color: transparent;
}


/* Save 메뉴 (btnSavePhoto 옆 작은 드롭다운) */
.save-wrap { position: relative; display: inline-flex; align-items: center; }
.save-menu {
  position: absolute;
  top: 105%;
  left: 0;
  transform: translateY(4px);
  min-width: 140px;
  background: #fff;
  color: #111827;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 6px 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:8px;
  padding:10px 16px; font-size:15px; font-weight:600; cursor:pointer;
}
.save-item + .save-item{ border-top: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) + 30px);  /* 상단과 동일 폭 */
  margin:6px auto 0;                     /* 가운데 정렬 */
  box-sizing: border-box;
}
#editPanel .toolbar{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:8px;
  padding:6px 8px;
  background:#f8f9fa;
  border:1px solid #dee2e6;
  border-radius:8px;
}

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

/* 안쪽 돌 크기(검/백) */
#editPanel .edit-option .disc{ width:30px; height:30px; 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:6px; margin-left:auto; }
#editPanel .actions .vbtn{
  padding:6px 10px; border:none; border-radius:6px;
  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:16px;
  padding:0px 0px 5px;
  width : 382px;
  border:0px solid #000;  
}


.player-row{
  display:flex;
  align-items:center;
  flex:1 1 0;
}

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

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

/* 이름 + (온라인 대전) 타이머 세로 스택 */
.player-name-wrap{ display:flex; flex-direction:column; min-width:0; }
.player-row.right .player-name-wrap{ align-items:flex-end; }
.player-timer{ display:none; font:14px/1.2 ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; color:#6b7280; margin-top:1px; }
.player-timer.show{ display:block; }
.player-timer.is-active{ color:#111; }
.player-timer.is-low{ color:#b91c1c; }
.player-timer-row{ display:flex; gap:5px; align-items:baseline; }
.player-row.right .player-timer-row{ justify-content:flex-end; }
.player-rating-live{ display:none; font-size:14px; font-weight:450; font-variant-numeric:tabular-nums; }
.player-rating-live.show{ display:inline-block; }

/* 배지(숫자 동그라미) — 절대 찌그러지지 않도록 고정폭/고정높이+flex-basis 0 */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;          /* 원하는 크기로 조절 */
  flex:0 0 36px;                    /* ← 이 줄이 ‘안 찌그러짐’의 핵심 */
  border-radius:50%;
  font-weight:700;
  font-size:18px;
  box-sizing:border-box;
}


.badge.black{ background:#000; color:#fff; border:2px solid #000; }
.badge.white{ background:#fff; color:#000; border:2px solid #000; }

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


/* 이름은 한 줄, 길면 … 처리, 보드와 겹치지 않도록 줄바꿈 없이 폭 제어 */
.player-name{
  display:block;
  font-size:17px;
  font-weight:700;
  line-height:1.1;
  max-width: min(42vw, 520px);      /* 화면 반 넘지 않게 가드(원하면 조정) */
}
.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:1px solid currentColor;
  outline-offset:2px;
}
.player-name .player-rating{
  display:block;
  color:#111;
  font-weight:400;
  font-size:.82em;
  margin-top:2px;
}
/* === Bottom Toolbar – Modern, compact, board-attached === */

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

/* 줄바꿈 전용 스팬을 '진짜 줄바꿈'으로 */
#op_button.toolbar .flex-break{
  justify-content: flex-start;   /* 모든 줄의 시작을 왼쪽으로 */
  align-content: flex-start;     /* 여러 줄일 때도 위/왼쪽 정렬 유지 */
  flex-basis: 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: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  
  row-gap: 3px;
  column-gap: 6px;
  padding:6px 8px; 

  /* layout */
  max-width: calc(var(--board) + 10px);
  margin: 4px 2px 0;
  flex-wrap: wrap;
  overflow:visible;
}

/* Buttons – flat & crisp */
#op_button.toolbar button{
  -webkit-appearance: none;
  appearance: none;
  height: 36px;
  min-width: 46px;
  padding: 0 10px;

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

  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  box-shadow: 0 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(-1.5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.16);
    background:#f7f7f7;
  }
}  
#op_button.toolbar button:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
}




/* Icon & toggles – unify size and weight */
#op_button.toolbar .icon,
#op_button.toolbar .icon-toggle{
  height: 36px;
  min-width: 42px;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  color: #333;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
#op_button.toolbar .icon svg,
#op_button.toolbar .icon-toggle svg{
  width:21px; height:21px;
}

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

#op_button.toolbar #btnAnalyze{
  width:42px;
  min-width:42px;
  position:relative;
}

#op_button.toolbar #btnAnalyze .analyze-busy{
  display:none;
  width:18px;
  height:18px;
  border:2px 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:30px;
  height:23px;
}

/* Embed viewer keeps the compact move badge in the toolbar. */
body.embed-viewer #op_button.toolbar .move-mini{
  margin-right:0;
  margin-left:0px;
  padding-left:0px;
  width:56px;
  height:36px;

  display:flex;              /* flexbox 켜기 */
  align-items:center;        /* 수직 중앙 */
  justify-content:center;     /* 수평 중앙 */

  font-weight:800;
  font-size:15px;

  border:1px solid #9A9169;
  border-radius:10px;
  background:#fff;
  box-sizing: border-box;
}

/* Toggle ON – gold ring, clearer state */
#op_button.toolbar .icon-toggle.on{
  background:#fffdf3;
  border-color:#c9a93c;
  box-shadow: inset 0 0 0 2px #c9a93c, 0 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 3px rgba(59,130,246,0.35);
}

/* 6) 숨긴 체크박스는 화면 밖으로 */
.hidden{ position:absolute !important; left:-9999px !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;
  background: #fff;
  color: #333;
  text-align: center;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px 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: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
}

.tooltip_left.ocv-tooltip-touch-open .tooltip-text {
  visibility: visible;
  opacity: 1;
}

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

#op_button.toolbar .tooltip_left.tooltip-analyze .tooltip-text::after{
  top:100%;
  left:auto;
  right:16px;
  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;
}

/* 말풍선 텍스트 (아래에 표시) */
.tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  background: #fff;
  color: #333;
  text-align: center;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  position: absolute;
  top: 125%;                   /* 위에서 아래로 띄우기 */
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.15s ease-in-out;
  white-space: nowrap;
  z-index: 10;
}

/* 말풍선 화살표 (위쪽을 가리키도록) */
.tooltip .tooltip-text::after {
  content: '';
  position: absolute;
  bottom: 100%;                /* 텍스트 박스 바로 위 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

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

.tooltip.tooltip-start .tooltip-text::after {
  left: 18px;
  transform: none;
}

/* hover 하면 보이도록. 터치 focus는 아래 media query에서만 허용한다. */
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* 기본: 숨김 */
.tooltip .tooltip-text { visibility: hidden; opacity: 0; }

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

/* 터치 환경에서는 focus가 아닌 실제 터치 이벤트로 열린 tooltip만 표시한다. */
@media (hover: none), (pointer: coarse) {
  .tooltip:focus-within .tooltip-text,
  .tooltip.ocv-tooltip-touch-open .tooltip-text,
  .tooltip_left.ocv-tooltip-touch-open .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
}

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

  background: #fff;
  color: #111827;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 6px 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: 8px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  cursor: pointer;
  background: transparent;
  text-align: left;
}
#shareMenu .share-item + .share-item { border-top: 1px solid #e5e7eb; }
#shareMenu .share-item:hover { background: #f9fafb; }

/* 아이콘 */
#shareMenu .icons { width:18px; height:18px; flex-shrink:0; color:#374151; stroke-width:2; }


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

#newGameMenu {
  width: max-content;
  min-width: 140px;
  max-width: 200px;
  white-space: nowrap;
  background: #fff;
  color: #111827;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 6px 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: 8px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  cursor: pointer;
  background: transparent;
}
#newGameMenu .share-item + .share-item { border-top: 1px solid #e5e7eb; }
#newGameMenu .share-item:hover { background: #f9fafb; }
#newGameMenu .icons { width:18px; height:18px; 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: 140px;
  max-width: 200px;
  white-space: nowrap;

  background: #fff;
  color: #111827;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 6px 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: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #374151;   /* 텍스트와 어울리는 회색 */
  stroke-width: 2;
}

/* 메뉴 항목 */
#op_button.toolbar .share-wrap .share-menu .share-item {
  display: flex;           /* 아이콘+텍스트 가로 정렬 */
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 15px;
  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: 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:72px; text-align:center; font-weight:800; font-size:18px;
  padding:4px 12px; border:2px solid #9A9169; border-radius:10px; 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 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(-1.5px);
    box-shadow: 0 6px 12px 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 2px 6px rgba(0,0,0,.14);
}

/* 토글 ON 표기(금색 링)는 유지하되 더 선명하게 */
#op_button.toolbar .icon-toggle.on{
  background:#fffdf5;
  border-color:#c9a93c;
  box-shadow: inset 0 0 0 2px #c9a93c, 0 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 3px 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:14px;
  height:14px;
  margin-bottom:4px;
  border-radius:50%;
  font-size:12px;
  font-weight:bold;
  vertical-align:middle;
}
.loss-circle.black {
  background:#000;
  border:2px solid #000;
  color:#fff;
}
.loss-circle.white {
  border:2px solid #000;
  background:#fff;
  color:#000;
}


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

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


#frame {
  border: 14px solid #feedc2;
  padding: 0px;
  background-color: #01744D;
  position: relative;
  display: inline-block;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.12),
    0 0 0 1px #dacba5;
}

.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: -14px;
  right: -14px;
  top: -14px;
  height: 14px;
}

.oc-frame-wood-right {
  top: 0;
  right: -14px;
  bottom: 0;
  width: 14px;
}

.oc-frame-wood-bottom {
  left: -14px;
  right: -14px;
  bottom: -14px;
  height: 14px;
}

.oc-frame-wood-left {
  top: 0;
  left: -14px;
  bottom: 0;
  width: 14px;
}

.oc-frame-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -11px;
  height: 10px;
  line-height: 13px;
  font-size: 13px;
  text-align: center;
  font-weight: 700;
  color: #5d3a1a;
  pointer-events: none;
  z-index: 4;
}

.oc-frame-move {
  position: absolute;
  left: 3px;
  bottom: -11px;
  height: 10px;
  line-height: 13px;
  font-size: 13px;
  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: 8px;
  height: 8px;
  margin-right: 3px;
  vertical-align: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.oc-frame-move-color.is-black {
  background: #000;
  border: 1px solid #000;
}

.oc-frame-move-color.is-white {
  background: #fff;
  border: 1px solid currentColor;
}

.ocv-save-capture-frame .oc-frame-label {
  bottom: -10px;
  line-height: 10px;
}

.ocv-save-capture-frame .oc-frame-move {
  bottom: -10px;
  line-height: 10px;
}

.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);
  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_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: 18px;
  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: 1px;
  left: 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 - 2px);
  height: calc(var(--cell) * 0.30 - 2px);
}

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

/* x_char와 y_char 위치도 그대로 유지 */
#x-coordinate {
  top: -14px;
  left: -22px;
  width: calc(100% - 20px);
  text-align: center;
  color: #5d3a1a;
  position: absolute;
  z-index: 2;
}
#y-coordinate {
  top: 11px;
  left: -17px;
  height: calc(100% - 20px);
  color: #5d3a1a;
  position: absolute;
  z-index: 2;
}

.x_char {
  position: absolute;
  font-size: 11px !important;
  text-align: center;
  text-transform: uppercase;
}

.y_char {
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 11px !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: 1px;
  border-color: black;
  position: absolute;
  width: 5px; /* 점 크기 조정 */
  height: 5px; /* 점 크기 조정 */
  background-color:black;
  border-radius: 50%; /*  원형으로 */
}



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





#check {
  float: left;
  position: relative;
  width: 14px;
}

#repeat {
  position: absolute;
  margin: 0px;
  padding:0px;
  top:  3px;
  left: 0px;
  width:  14px;
  height: 14px;
  cursor: pointer;
}

#checkPM {
  position: absolute;
  top:  25px;
  left: 0px;
}

#checkPE {
  position:absolute;
  top: 45px;
  left: 0px;
}

#PutMark {
  width: 16px;
  height:16px;
}

.putmarkdot {
  padding-top:10px;
}

#PutEnable {
  width: 16px;
  height:16px;
}

#control {
  float: right;
  width: 317px;
  background-color: #bdb76b;
}

#score_panel {
  clear: both;
  position: relative;

  font-size:22px;
  height:27px;
}

#BlackFrame {
  position: absolute;
  top: 2px;
  left:1px;
  border-style: solid;
  border-width: 2px;
  border-color: #bdb76b;
  width: 45px;
  height:21px;
  line-height:18px;
}

#BlackStone {
  text-align: left;
  color: black;
  font-size:20px;
}

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

#WhiteFrame {
  position: absolute;
  top: 2px;
  left:60px;
  border-style: solid;
  border-width: 2px;
  border-color: #bdb76b;
  width: 45px;
  height:21px;
  line-height:18px;
}

#WhiteStone {
  text-align: left;
  color: white;
    font-size:20px;
}

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

}

#NextMove {
  position: absolute;
  top:  4px;
  left: 125px;
  border-style: solid;
  border-width: 0px;
  border-color: #bdb76b;
  text-align: left;
  color: black;
  width: 85px;
  height:18px;
  line-height:18px;
}

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

#PutNext {
  position: absolute;
  top:  6px;
  left: 178px;
  width:  14px;
  height: 14px;
}

#NextCheck {
  position: absolute;
  top: 2px;
  left: 195px;
  line-height:20px;
}



#Loop {
  position: absolute;
  top:  -1px;
  left: 242px;
  color: crimson;
}

#KifuText {
  position: absolute;
  top:  2px;
  left: 1px;
  width:230px;
  height:20px;

  font-size:20px;
}

#SetKifu {
  position: absolute;
  top:  2px;
  left: 237px;
  width: 62px;
  height:25px;

  font-size:16px;
}

#op_button {
  clear: both;
  position: relative;

}
#solve {
  margin-top: 1px;
  position: absolute;
  top:  0px;
  left: 256px;
  width:61px;
  height:27px;
  font-size:16px;
}

#first { width:65px; height:33px; font-size:20px; }
#prev  { width:65px; height:33px; font-size:20px; }
#btnAnalyze  { width:42px; min-width:42px; height:33px; font-size:20px; }
#next  { width:65px; height:33px; font-size:20px; }
#last  { width:65px; height:33px; font-size:20px; margin-right:0;}

#solve,
#first,
#prev,
#game,
#next,
#last {
  background-color: #e7e4be;
  border: 1px solid #9A9169;
  border-radius: 7px;
  color: #222222;
  display: inline-block;
  padding: 3px 0px 2px 0px;
  font-weight: normal;
  text-decoration: none;
  text-shadow: 0px 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: 1px solid #7A7179;
}

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

/* Keep the full viewer within the 670px fullscreen baseline. */
#anSvg {
  display: block;
  height: 120px;
}

#anFooter .an-summary-line {
  min-height: 20px;
}

/* Toolbar row balancing: keep equal gaps without spacer-created empty slots. */
body:not(.embed-viewer) #op_button.toolbar{
  justify-content:flex-start;
  column-gap:4px;
}

body:not(.embed-viewer) #op_button.toolbar #first,
body:not(.embed-viewer) #op_button.toolbar #prev,
body:not(.embed-viewer) #op_button.toolbar #next,
body:not(.embed-viewer) #op_button.toolbar #last{
  flex:1 1 0;
  width:auto;
  min-width:0;
  height:36px;
}

body:not(.embed-viewer) #op_button.toolbar .tooltip_left{
  flex:0 0 42px;
  margin-left:0;
}

body:not(.embed-viewer) #op_button.toolbar #btnAnalyze{
  width:42px;
  min-width:42px;
  height:36px;
}

body:not(.embed-viewer) #op_button.toolbar > .tooltip:not(.tooltip_left),
body:not(.embed-viewer) #op_button.toolbar > .share-wrap{
  flex:1 1 0;
  min-width:0;
  display:flex;
}

body:not(.embed-viewer) #op_button.toolbar > .tooltip:not(.tooltip_left) > label,
body:not(.embed-viewer) #op_button.toolbar > .share-wrap > .tooltip{
  width:100%;
  min-width:0;
  display:flex;
}

body:not(.embed-viewer) #op_button.toolbar > .tooltip:not(.tooltip_left) > .icon-toggle,
body:not(.embed-viewer) #op_button.toolbar > .tooltip:not(.tooltip_left) > label .icon-toggle,
body:not(.embed-viewer) #op_button.toolbar > .share-wrap > .tooltip .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 #first,
body.embed-viewer #op_button.toolbar #prev,
body.embed-viewer #op_button.toolbar #next,
body.embed-viewer #op_button.toolbar #last{
  flex:1 1 0;
  width:auto;
  min-width:0;
  height:36px;
}

body.embed-viewer #op_button.toolbar .tooltip_left{
  flex:0 0 42px;
  margin-left:0;
}

body.embed-viewer #op_button.toolbar #btnAnalyze{
  width:42px;
  min-width:42px;
  height:36px;
}

body.embed-viewer #op_button.toolbar .move-mini{
  flex:0 0 calc((100% - 42px - 24px) / 4);
  min-width:0;
  width:calc((100% - 42px - 24px) / 4);
}

body.embed-viewer #op_button.toolbar > .share-wrap,
body.embed-viewer #op_button.toolbar > .tooltip{
  flex:0 0 42px;
}

body.embed-viewer #op_button.toolbar .move-mini + .share-wrap{
  margin-left:auto;
}