/* 퍼즐 패널·리더보드·툴팁 공용 CSS (2026-10-10, _puzzle_panel_style.php 의 인라인 <style> 에서 분리: 페이지마다 다시 받던 CSS 를 캐시되는 파일로). 이 파일만 고친다. */
  /* 유효한 허브 진입: 첫 문제 적용 전에는 초기 4돌 판을 표시하지 않는다. */
  html.pz-initial-board-pending #ocviewerFrame { visibility:hidden; }
  /* puzzle control panel */
  #pzPanel { width:100%; max-width:380px; margin:10px auto 0; box-sizing:border-box; padding:0; }
  @media (max-width: 380px) {
    #pzPanel { padding:0 10px; }
  }
  #pzPanel .row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0; flex-wrap:nowrap; min-height:34px; }
  body:not(.pz-zoom):not(.pz-eval) #pzPanel > .row:first-child { margin-top:0; }
  #pzPanel .row > * { width:auto; max-width:none; padding-left:0; padding-right:0; }
  #pzPanel .pz-left { display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; overflow:hidden; }
  #pzPanel .pz-center { display:none; }
  #pzPanel .pz-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
  /* 시작 버튼을 왼쪽에 둔 경우에도 가운데 레이팅이 좌우 버튼 위에 겹치지 않게
     세 영역이 실제 폭을 나눠 갖는다. 과거 absolute 50% 중앙은 다국어 라벨과
     Verify가 함께 보일 때 양쪽 실폭을 무시해 충돌했다. */
  #pzPanel.pz-start-left > .row:first-child {
    display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  }
  #pzPanel.pz-start-left .pz-left { overflow:visible; justify-self:start; }
  #pzPanel.pz-start-left .pz-center {
    position:static; left:auto; transform:none;
    display:flex; justify-content:center; min-width:0; max-width:none; overflow:hidden; pointer-events:none;
  }
  #pzPanel.pz-start-left .pz-right { justify-self:end; }
  #pzPanel.pz-start-left .pz-center #pzMyRating {
    display:flex; align-items:baseline; justify-content:center;
    min-width:0; max-width:100%; overflow:hidden;
  }
  #pzPanel.pz-start-left .pz-center #pzMyRating .pz-rating-label {
    min-width:0; overflow:hidden; text-overflow:ellipsis;
  }
  #pzPanel.pz-start-left .pz-center #pzMyRatingValue { flex:0 0 auto; }
  #pzPanel .pz-rating { font-weight:700; white-space:nowrap; font-size:15px; }
  #pzPanel .pz-left #pzMyRating { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  #pzPanel .pz-rating .pz-rating-label { color:inherit; font-weight:400; margin-right:0; }
  #pzPanel .pz-turn { display:flex; align-items:center; gap:5px; font-size:16px; color:#000; white-space:nowrap; }
  #pzPanel .pz-turn img { width:16px; height:16px; border-radius:50%; box-sizing:border-box; }
  #pzPanel .pz-turn img.pz-turn-white { border:1px solid #111; }
  #pzTimerWrap { display:flex; align-items:center; gap:4px; flex:0 0 auto; margin-right:5px; font-size:16px; }
  #pzTimerWrap svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  #pzPanel .pz-btns { display:flex; gap:6px; flex-shrink:0; }
  #pzPanel .pz-btn {
    padding:4px 12px; border:1px solid #d1d5db; border-radius:8px; background:#fff;
    cursor:pointer; font-weight:700; font-size:15px; white-space:nowrap;
  }
  @media (max-width: 400px) {
    #pzPanel .row { gap:6px; }
    #pzPanel .pz-right { gap:4px; }
    #pzPanel .pz-btn {
      min-height:38px; padding:6px 10px; font-size:15px; line-height:1.15;
    }
  }
  @media (max-width: 320px) {
    #pzPanel .pz-rating { font-size:10px; }
    #pzPanel .pz-turn { font-size:11px; }
    #pzPanel .pz-turn img { width:10px; height:10px; }
    #pzTimerWrap { font-size:11px; }
    #pzPanel .pz-btn { min-height:32px; padding:2px 5px; font-size:11px; }
  }
  #pzPanel .pz-btn.primary { background:#2563eb; color:#fff; border-color:#2563eb; }
  #pzPanel .pz-btn.primary:hover { background:#1d4ed8; }
  #pzPanel .pz-btn:disabled { opacity:.5; cursor:not-allowed; }
  #pzZoomBtn:disabled { opacity:.5; cursor:not-allowed; }
  #pzTimer { font-variant-numeric: tabular-nums; font-weight:700; color:#374151; }
  #pzTimerWrap.is-low { color:#b91c1c; }
  #pzTimerWrap.is-low #pzTimer { color:inherit; }
  #pzResult { padding:10px; border-radius:8px; background:#f3f4f6; font-size:14px; overflow-wrap:anywhere; }
  @media (max-width: 380px) {
    #pzResult { margin-left:-10px; margin-right:-10px; }
  }
  #pzPanel #pzResult .row { flex-wrap:wrap; row-gap:4px; }
  /* 공용 .row의 34px 최소 높이와 상하 margin이 결과 첫 줄에 만들던 빈 공간을
     Verify 안내에 재사용한다. 긴 번역이 두 줄이어도 결과 카드 높이는 기존 수준을 넘지 않는다. */
  #pzPanel #pzResult > .row { min-height:0; margin:0 0 2px; }
  #pzPanel #pzResult .row > * { min-width:0; max-width:100%; }   /* 9행 max-width:none 를 이김 → 결과창 #pzDifficulty(Difficulty·Best 줄)가 박스 폭으로 클램프되어 줄바꿈(xot·midgame 공통) */
  /* 앱(WebView) 전용: 결과창·패널·비로그인 안내를 컨테이너(화면) 폭에 꽉차게. 웹은 380px 유지(기본 좌우 여백은 .container 거터로 보존). */
  #pzGuestNotice { max-width:380px; }                        /* 웹 기본값(인라인 max-width 를 CSS 로 이관 → 앱 override 가 이길 수 있게) */
  html.fs-embed #pzPanel,
  html.fs-embed #pzGuestNotice { max-width:100%; }
  html.fs-embed #pzResult { margin-left:0; margin-right:0; }  /* 풀폭 패널에선 <380px 음수 마진 불필요(표준 여백 유지) */
  #pzResult.correct { background:#dcfce7; color:#166534; }
  #pzResult.near    { background:#fef9c3; color:#854d0e; }
  #pzResult.wrong   { background:#fee2e2; color:#991b1b; }
  #pzResult.neutral { background:#e0f2fe; color:#075985; }
  #pzResult .verdict { font-weight:800; font-size:16px; }
  #pzResult .delta-pos { color:#15803d; font-weight:700; }
  #pzResult .delta-neg { color:#b91c1c; font-weight:700; }
  #pzResult .pz-submit-disconnect-note { display:block; margin-top:4px; font-size:12px; line-height:1.35; color:#6b7280; }
  /* 활성 Verify 는 Eval 과 같은 기본 버튼 모양(2026-10-11 통일 — 예전 회색-청색 강조는 XOT·미드·스프린트만 있어 퍼즐마다 달랐다). 검증 중만 파란색. */
  #pzVerifyBtn.is-active:not(:disabled) { border-color:#1d4ed8; background:#1d4ed8; color:#fff; }
  .pz-verify-info { margin-top:1px; font-size:13px; line-height:1.45; color:#374151; display:flex; align-items:center; gap:0 12px; flex-wrap:wrap; }
  .pz-verify-info.pz-hide { display:none; }
  .pz-verify-info > div { white-space:nowrap; }
  .pz-verify-info > .pz-verify-note {
    flex:0 0 100%; white-space:normal; font-size:12px; line-height:1.25;
    opacity:.82; margin-top:1px;
  }
  .pz-verify-info > div:empty { display:none; }
  #pzStats { font-size:13px; color:#374151; }
  #pzStats > span { margin-right:10px; }
  #pzStats > .pz-result-stat-break { display:block; height:0; margin:0; }
  /* stats 툴팁 좌우 잘림 방지: 첫 항목은 왼쪽 정렬, 마지막 항목은 오른쪽 정렬 */
  #pzStats > span:first-child .pz-tooltip-text { left:0; right:auto; transform:translateX(0); }
  #pzStats > span:first-child .pz-tooltip-text::after { left:14px; right:auto; transform:translateX(0); }
  #pzStats > span:last-child .pz-tooltip-text { left:auto; right:0; transform:translateX(0); }
  #pzStats > span:last-child .pz-tooltip-text::after { left:auto; right:14px; transform:translateX(0); }
  #pzStats > .pz-result-stat-break + span .pz-tooltip-text { left:0; right:auto; transform:translateX(0); }
  #pzStats > .pz-result-stat-break + span .pz-tooltip-text::after { left:14px; right:auto; transform:translateX(0); }
  .pz-record-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
  .pz-record-head .card-title { margin:0 !important; flex:0 0 auto; }
  .pz-my-record-link { color:#254EAD; transition:color .15s ease; }
  .pz-my-record-link:hover,
  .pz-my-record-link:focus { color:#0d6efd; outline:none; }
  .pz-record-head-title { display:flex; align-items:center; gap:8px; min-width:0; }
  .pz-record-rank { flex:0 0 auto; white-space:nowrap; }
  .pz-record-rank-link { color:#254EAD; font-weight:400; text-decoration-line:underline!important; text-decoration-thickness:1px; text-underline-offset:2px; border-bottom:0; -webkit-tap-highlight-color:transparent; }
  .pz-record-rank-link:hover,
  .pz-record-rank-link:focus { color:#1d4ed8; text-decoration-line:underline!important; outline:none; }
  .pz-history-btn {
    appearance:none; border:1px solid #cdd5e3; background:#f3f6fc; color:#254EAD;
    font-size:12px; font-weight:600; line-height:1; padding:4px 9px; border-radius:999px;
    cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .pz-history-btn:hover, .pz-history-btn:focus { background:#254EAD; border-color:#254EAD; color:#fff; outline:none; }
  .pz-history-btn:disabled { opacity:.45; cursor:not-allowed; background:#f3f6fc; border-color:#cdd5e3; color:#64748b; }
  .pz-record-rating-line { display:flex; justify-content:space-between; align-items:baseline; gap:8px; color:#374151; font-size:15px; line-height:1.5; white-space:nowrap; }
  .pz-record-meta { font-size:14px; color:#374151; line-height:1.7; }
  /* 전적 | 오늘, 연속 | LDiscs(엔드) — 레이팅 줄과 같은 좌우 배치로 유저 기록 항목과 맞춤 */
  .pz-record-acc-line,
  .pz-record-streak-line { display:flex; justify-content:space-between; align-items:baseline; gap:8px; text-align:left; white-space:nowrap; }
  .pz-record-acc-line > span,
  .pz-record-streak-line > span { min-width:0; }
  /* 우측 항목(최고·오늘·엔드 LDiscs)은 유저 기록처럼 오른쪽 열에 두되 왼쪽 정렬.
     세 줄이 같은 x 에서 시작하도록 두 열을 한 그리드로 묶는다(퍼즐 페이지 한정).
     ★종전에는 왼쪽 칸을 58% 로 고정했는데 언어마다 어긋났다(2026-09-18 지적):
       한국어는 왼쪽이 남아 가운데선이 왼쪽으로 치우쳐 보이고, 영어는 오른쪽이 모자라
       "Today : 65-18 (78.3%)" 의 백분율이 다음 줄로 밀렸다.
     왼쪽 칸을 '최소 절반, 내용이 더 길면 그만큼'으로 두면 한국어는 정확히 5:5 가 되고
     영어는 필요한 만큼만 더 가져가 오른쪽 항목이 한 줄에 들어간다. */
  .pz-puzzle-page .pz-record-meta {
    display:grid; grid-template-columns:minmax(50%, max-content) minmax(0, 1fr);
    column-gap:4px; align-items:baseline;
  }
  .pz-puzzle-page .pz-record-rating-line,
  .pz-puzzle-page .pz-record-acc-line,
  .pz-puzzle-page .pz-record-streak-line { display:contents; }   /* 줄 div 는 걷어내고 span 이 바로 그리드 칸이 된다 */
  .pz-puzzle-page .pz-record-meta > div > span { flex:none; text-align:left; }
  /* 툴팁이 카드 좌/우 끝에서 잘리지 않게 첫/마지막 항목은 모서리 기준으로 정렬(#pzStats 와 같은 규칙) */
  .pz-record-acc-line > span:first-child .pz-tooltip-text,
  .pz-record-streak-line > span:first-child .pz-tooltip-text { left:0; right:auto; transform:translateX(0); }
  .pz-record-acc-line > span:first-child .pz-tooltip-text::after,
  .pz-record-streak-line > span:first-child .pz-tooltip-text::after { left:14px; right:auto; transform:translateX(0); }
  .pz-record-acc-line > span:last-child .pz-tooltip-text,
  .pz-record-streak-line > span:last-child .pz-tooltip-text { left:auto; right:0; transform:translateX(0); }
  .pz-record-acc-line > span:last-child .pz-tooltip-text::after,
  .pz-record-streak-line > span:last-child .pz-tooltip-text::after { left:auto; right:14px; transform:translateX(0); }
  #pzMyRecordStats { display:flex; flex-wrap:wrap; gap:2px 12px; margin-top:2px; font-size:14px; color:#374151; }
  #pzMyRecordStats > span { white-space:nowrap; }
  #pzMyRecordStats > span:first-child .pz-tooltip-text { left:0; right:auto; transform:translateX(0); }
  #pzMyRecordStats > span:first-child .pz-tooltip-text::after { left:14px; right:auto; transform:translateX(0); }
  #pzMyRecordStats > span:last-child .pz-tooltip-text { left:auto; right:0; transform:translateX(0); }
  #pzMyRecordStats > span:last-child .pz-tooltip-text::after { left:auto; right:14px; transform:translateX(0); }
  .pz-hide { display:none !important; }

  /* 토스트 */
  #mg-toast {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);  /* 하단→화면 중앙: 안드 nav bar 에 가려 안 보이던 문제 방지(Verify 완료 메시지 포함) */
    padding:10px 20px; border-radius:10px; background:#111; color:#fff;
    font-size:14px; font-weight:600; z-index:9999;
    opacity:0; pointer-events:none; transition:opacity .2s;
    white-space:normal; max-width:90vw; text-align:center; word-break:keep-all; overflow-wrap:anywhere;
  }
  #mg-toast.visible { opacity:1; }

  /* 랭킹 우측 카드 */
  .pz-leaderboard-card .card-body { padding-left:0; padding-right:0; }
  .pz-puzzle-page .pz-leaderboard-card .card-body { padding-bottom:0; }
  .pz-leaderboard-card .pz-leaderboard-head { box-sizing:border-box; width:100%; padding:0 1rem; }
  .pz-leaderboard-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
  .pz-leaderboard-head .card-title { margin:0 !important; }
  .pz-leaderboard-filter { display:inline-flex; align-items:center; gap:5px; margin:0; font-size:14px; font-weight:400; color:#374151; white-space:nowrap; cursor:pointer; }
  .pz-leaderboard-filter input { margin:0; }
  .pz-leaderboard-footer { display:flex; min-height:33px; align-items:center; justify-content:center; border-top:1px solid rgba(148,163,184,.28); }
  .pz-leaderboard-view-all { box-sizing:border-box; display:flex; width:100%; min-height:33px; align-items:center; justify-content:center; padding:5px 10px; color:#254ead; font-size:13px; font-weight:800; line-height:1.2; text-align:center; text-decoration:none; }
  .pz-leaderboard-view-all:hover,
  .pz-leaderboard-view-all:focus-visible { background:rgba(148,163,184,.10); color:#173b91; outline:none; }
  .pz-rank-table { width:100%; border-collapse:collapse; font-size:14px; table-layout:fixed; }
  .pz-rank-table th, .pz-rank-table td { padding:5px 3px; border-bottom:1px solid #f0f0f0; text-align:left; word-break:break-all; }
  .pz-rank-table col.c-num  { width:7%; }
  .pz-rank-table col.c-id   { width:42%; }
  .pz-rank-table col.c-rt   { width:17%; }
  .pz-rank-table col.c-acc  { width:18%; }
  .pz-rank-table col.c-ld   { width:16%; }
  .pz-rank-table th { background:#f9fafb; color:#374151; font-weight:700; text-align:center; }
  .pz-rank-table th:first-child,
  .pz-rank-table td:first-child,
  .pz-rank-table td.num {
    text-align:center;
    font-variant-numeric: tabular-nums;
    white-space:nowrap;
    word-break:normal;
    overflow-wrap:normal;
  }
  .pz-rank-table tr.pz-row-unofficial,
  .pz-rank-table tr.pz-row-unofficial .pz-player-cell,
  .pz-rank-table tr.pz-row-unofficial .pz-id-text,
  .pz-rank-table tr.pz-row-unofficial .pz-tooltip { color:#999; }
  /* 라이트 모드 행 교차 배경 — 메인 index 위젯(play.css .index-table tr:nth-child(even))과 같은 #f9f9f9.
     다크 모드는 app-theme.css 가 !important 로 따로 칠하므로 영향 없음.
     대국중(is-playing) 강조 배경은 그대로 유지(:not 으로 제외). */
  .pz-rank-table tbody tr:nth-child(even):not(.is-playing) { background-color:#f9f9f9; }
  .pz-rating-unofficial { color:#999; font-weight:450; }
  .pz-rt-red{color:#e53935;} .pz-rt-orange{color:#fb8c00;} .pz-rt-purple{color:#8e24aa;} .pz-rt-blue{color:#1e88e5;} .pz-rt-green{color:#43a047;}
  .pz-photo { width:16px; height:16px; border-radius:50%; object-fit:cover; vertical-align:middle; margin-right:5px; background:#eee; }
  .pz-player-cell { display:flex; align-items:center; min-width:0; }
  .pz-id-text { display:inline-flex; align-items:center; max-width:100%; min-width:0; overflow:hidden; white-space:nowrap; line-height:1.2; }  /* 사진/국기/닉/인증 세로 중앙(온라인 카드와 동일 레시피) */
  .pz-id-text > [data-midgame-user], .pz-id-text > [data-battle-user] { display:block; flex:0 1 auto; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; }

  /* 인증마크는 원형 크기를 고정하고, 좁은 칸에서는 닉네임만 말줄임한다. */
  .pz-id-text > [data-midgame-user], .pz-id-text > [data-battle-user] { flex: 0 1 auto !important; min-width: 0 !important; }
  .pz-id-text .ocpv-verified-badge { flex:0 0 1em !important; width:1em !important; min-width:1em !important; height:1em !important; aspect-ratio:1; padding:0; border-width:0; }
  .pz-id-text .oc-donor-badge { flex:0 0 auto; }
  /* 국기·인증마크는 flex 중앙정렬에 맡김(서버 PHP 배지의 transform:translateY 무력화). */
  .pz-id-text .oc-flag, .pz-id-text .ocpv-verified-badge { align-self:center; transform:none !important; }
  /* ocviewer 스타일 툴팁 (네임스페이스 분리해 Bootstrap .tooltip 충돌 회피) */
  .pz-tooltip { position:relative; display:inline-block; cursor:default; }
  .pz-tooltip .pz-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; bottom:125%; left:50%; transform:translateX(-50%);
    transition:opacity 0.15s ease-in-out;
    white-space:nowrap; z-index:10;
    font-weight:400;
  }
  .pz-tooltip .pz-tooltip-text::after {
    content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border-width:6px; border-style:solid;
    border-color:#fff transparent transparent transparent;
  }
  .pz-tooltip:hover .pz-tooltip-text,
  .pz-tooltip:focus-within .pz-tooltip-text { visibility:visible; opacity:1; }
  .pz-nick-tip { display:flex; align-items:center; flex:1 1 auto; min-width:0; max-width:100%; }  /* block→flex: 사진과 닉/국기/인증 세로 중앙 일치(블록 line-box 가 사진을 2px 내리던 문제) */
  .pz-record-acc-tip .pz-tooltip-text { left:auto; right:0; transform:translateX(0); width:max-content; max-width:none; }
  .pz-record-acc-tip .pz-tooltip-text::after { left:auto; right:14px; transform:translateX(0); }
  #pzMyChart, #pzMyChartSvg { overflow:visible; }
  .pz-title-bar {
    box-sizing:border-box;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    height:25px;
    line-height:25px;
  }
  .pz-title-bar #pzTitle {
    display:block;
    width:100%;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:25px;
    font-size:17px;
  }
  .pz-guest-link {
    color:#92400e !important;
    font-weight:800;
    text-decoration:underline !important;
    text-underline-offset:2px;
  }
  .pz-guest-link:hover,
  .pz-guest-link:focus {
    color:#78350f !important;
    background:rgba(146,64,14,.1);
    border-radius:3px;
    outline:none;
  }