/* 퍼즐 History(지난 게임) 팝업 — 내 기록 카드의 History 버튼에서 오픈.
   좌: 보드 썸네일, 우: Difficulty/Solved/결과. XOT/Mid/End 3 모드 탭. */
.pzh-popup { position:fixed; inset:0; z-index:10010; display:none; }
.pzh-popup.open { display:block; }
.pzh-popup__backdrop { position:absolute; inset:0; background:rgba(17,24,39,0.55); }
.pzh-popup__dialog {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px, 94vw); max-height:88vh; display:flex; flex-direction:column;
  background:#fff; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,0.3); overflow:hidden;
}
.pzh-popup__header { display:flex; align-items:center; gap:10px; padding:14px 16px 10px; border-bottom:1px solid #eef0f4; }
.pzh-popup__title { margin:0; font-size:1.1rem; font-weight:700; color:#111; flex:0 0 auto; }
.pzh-popup__modes { display:flex; gap:6px; margin-left:auto; }
.pzh-mode-tab {
  appearance:none; border:1px solid #d7dce6; background:#fff; color:#374151;
  font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px; cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.pzh-mode-tab:hover { border-color:#254EAD; color:#254EAD; }
.pzh-mode-tab.active { background:#254EAD; border-color:#254EAD; color:#fff; }
.pzh-popup__close {
  appearance:none; border:none; background:transparent; font-size:24px; line-height:1;
  color:#9ca3af; cursor:pointer; padding:0 4px; flex:0 0 auto;
}
.pzh-popup__close:hover { color:#374151; }
.pzh-popup__body { padding:8px 14px 14px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.pzh-empty, .pzh-loading, .pzh-error { text-align:center; color:#9ca3af; font-size:14px; padding:28px 0; }
.pzh-error { color:#b91c1c; }

.pzh-list { display:flex; flex-direction:column; gap:8px; }
.pzh-item {
  display:flex; gap:12px; align-items:center; padding:8px; border:1px solid #eef0f4;
  border-radius:10px; cursor:pointer; background:#fff; transition:border-color .12s ease, box-shadow .12s ease;
}
.pzh-item:hover { border-color:#254EAD; box-shadow:0 2px 10px rgba(37,78,173,0.12); }
.pzh-item__board { flex:0 0 auto; width:84px; height:84px; border-radius:6px; overflow:hidden; }
.pzh-board { display:block; width:100%; height:100%; }
.pzh-item__info { flex:1 1 auto; min-width:0; font-size:13px; color:#374151; line-height:1.55; }
.pzh-item__meta { color:#374151; }
.pzh-item__meta b { color:#111; }
.pzh-item__result { margin-top:3px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.pzh-verdict { font-weight:800; font-size:13px; padding:1px 8px; border-radius:999px; }
.pzh-verdict.correct { background:#dcfce7; color:#166534; }
.pzh-verdict.near    { background:#fef9c3; color:#854d0e; }
.pzh-verdict.wrong   { background:#fee2e2; color:#991b1b; }
.pzh-delta-pos { color:#15803d; font-weight:700; }
.pzh-delta-neg { color:#b91c1c; font-weight:700; }
.pzh-ldiscs { color:#6b7280; }
.pzh-item__date { margin-top:2px; font-size:12px; color:#9ca3af; }

.pzh-more {
  display:block; width:100%; margin-top:12px; padding:9px; border:1px solid #d7dce6;
  background:#f8fafc; color:#254EAD; font-size:13px; font-weight:600; border-radius:8px; cursor:pointer;
}
.pzh-more:hover { background:#eef2fb; }
.pzh-more[disabled] { opacity:.6; cursor:default; }
body.pzh-popup-open { overflow:hidden; }