/* filename: repertoire/repertoire.css
   학습 > 레퍼토리 점검 (/repertoire). 기본 모양은 css/research.css (연구 화면) */

.rp-login { max-width: 420px; margin: 40px auto; text-align: center; }
.rp-login p { color: var(--text-muted); margin: 8px 0 16px; }

/* 한 화면에 딱 맞게: 판 + 메시지창(약 95px)이 화면 높이를 꽉 채움 (머리글 · 제목 줄 · 여백 약 145px) */
.st-layout.rp-layout { --board-max: min(1000px, calc(100vh - 240px)); }
/* 체스판 위에서는 끌어도 화면이 스크롤되지 않게 (판이 잠겨 있을 때도) */
.rp-layout .an-board-wrap, .rp-layout .an-board-wrap * { touch-action: none; }
/* 오른쪽 칸: 엔진 · 그래프 · 기보 */
.rp-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: sticky; top: 76px; }
/* 엔진 라인 칸: 늘 3줄 높이 (계산 중에 줄 수가 바뀌어도 아래 창 · 버튼이 움직이지 않게) */
.rp-right .an-pvs, .rp-right .an-pvs:empty { display: flex; height: 84px; overflow: hidden; }
.rp-right .an-engine-msg:empty { display: none; }
.rp-right .an-pvs.stale { opacity: 0.45; }
/* 엔진 라인 숨김 (계산은 계속) */
.rp-eng-card.lines-off .an-pvs { display: none !important; }
.rp-right #eng-info { display: block; min-height: 1.2em; }
.rp-right .an-engine-eval { min-height: 1.4em; }
/* 기보: 연구 화면의 절반 높이 */
.st-layout .rp-tree { height: clamp(64px, calc((100vh - 560px) / 4), 120px); }
.rp-chance { margin-top: 6px; font-size: 0.82rem; color: var(--text-main); }
.st-main .rp-chance b { color: var(--accent-gold); font-weight: 800 !important; }
.rp-chance small { color: var(--text-muted); font-size: 0.72rem; margin-left: 4px; }

/* 백 · 흑 채택률 그래프 (가운데가 뚫린 원) */
.rp-graphs { display: flex; justify-content: space-around; gap: 10px; }
/* 그래프 4개: 칸이 좁으면 같이 줄어듦 */
.rp-graph { position: relative; width: min(104px, calc(25% - 8px)); aspect-ratio: 1 / 1; flex-shrink: 0; }
.rp-graph .ctr .lbl { white-space: nowrap; }
.rp-graph svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
/* 테마와 상관없이 잘 보이게: 백 = 어두운 바탕 위 흰색, 흑 = 밝은 바탕 위 검은색 */
.rp-graph .trk { fill: none; stroke-width: 14; }
.rp-graph .arc { fill: none; stroke-width: 14; transition: stroke-dashoffset 0.5s ease; }
.rp-graph .trk { stroke: #3a3744; }   /* 원 색은 그래프마다 (점검률 테마색 · 채택률 흰색 · 정확도 값에 따라) */
.rp-graph .ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.st-main .rp-graph .pct { font-size: 1rem; font-weight: 800 !important; color: var(--text-main); }
.rp-graph .lbl { font-size: 0.72rem; color: var(--text-muted); }

/* [레퍼토리 점검] 기록 */
.rp-recs { display: flex; flex-direction: column; gap: 4px; min-height: 80px; max-height: calc(100vh - 340px); overflow-y: auto; }
/* 기록 상자가 여러 개면 화면 높이를 나눠 씀 (모르는 라인 · 유일수 포지션 · 상대 블런더 = 3개, 마스터 DB 이탈 라인까지 = 4개) */
.st-side .rp-recs { max-height: calc((100vh - 480px) / 3); min-height: 50px; }
.st-side:has(#rp-mrecs-card:not([hidden])) .rp-recs { max-height: calc((100vh - 540px) / 4); }
.rp-rec { display: flex; gap: 6px; align-items: flex-start; font-size: 0.8rem; padding: 4px 6px; border-radius: 6px; background: var(--bg-dark); }
.rp-rec .no { color: var(--text-muted); min-width: 18px; }
.rp-rec .pgn { flex: 1; word-break: break-word; }
.rp-rec button { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0 2px; }
.rp-rec button:hover { color: #ff6b6b; }
.rp-empty { color: var(--text-muted); font-size: 0.8rem; padding: 14px 2px; text-align: center; }
.rp-dbname { font-size: 0.72rem; color: var(--text-muted); }
.rp-open-analysis { width: 100%; }
/* 통계 창: 판 수 + 승무패 막대 한 줄 */
.st-main .rp-stats .st-db-moves { min-height: 0; }
.rp-stats .st-db-empty { text-align: center; }
/* 체스판 아래: 메시지창 + 버튼 */
.rp-msgbar { display: flex; gap: 8px; width: 100%; }
/* 메시지 두 칸(위 · 아래)에 딱 맞는 높이. 칸은 비어 있어도 자리를 차지해서 화면이 움직이지 않음 */
.rp-msgs { flex: 1; min-width: 0; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border-purple); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.rp-msg { border-radius: 8px; padding: 6px 8px; font-size: 0.82rem; line-height: 1.5; background: var(--bg-dark); border-left: 4px solid var(--border-purple); color: var(--text-main); }
.rp-msg.good { border-left-color: #3fb950; background: rgba(63, 185, 80, 0.15); }
.rp-msg.bad { border-left-color: #df5353; background: rgba(223, 83, 83, 0.18); }
.rp-msg:not(.note):not(.prompt) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
/* 안내(모두 점검 · DB 끝 · 정한 수 도달): 눈에 띄게 테마색 테두리 */
.rp-msg.note { color: var(--text-main); border: 2px solid var(--accent-gold); background: rgba(254, 203, 76, 0.12); }
.st-main .rp-msg.note { font-weight: 700 !important; }
/* 왼쪽 띠: 백 수 = 흰색, 흑 수 = 검은색 (초록 · 빨강 바탕은 그대로) */
.rp-msg.w { border-left-color: #ffffff; }
.rp-msg.b { border-left-color: #000000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.rp-msg.empty { visibility: hidden; }
/* 기다리는 중 안내: 깜빡이는 점선 테두리 */
.rp-msg.wait { color: var(--text-muted); border: 1px dashed var(--accent-gold); animation: rp-wait 1.2s ease-in-out infinite; }
@keyframes rp-wait { 50% { opacity: 0.5; } }
.st-main .rp-msg .mv { font-weight: 800 !important; margin-right: 6px; padding: 1px 6px; border-radius: 4px; }
/* 수 표시: 테마와 상관없이 백 수 = 흰 바탕 검은 글씨, 흑 수 = 검은 바탕 흰 글씨 */
.rp-msg.w .mv { background: #ffffff; color: #111111; }
.rp-msg.b .mv { background: #111111; color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
/* 유일수: 수 바로 뒤 파란 상자 */
.st-main .rp-msg .only { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: #2f7de1; color: #ffffff; font-size: 0.75rem; font-weight: 800 !important; }
.st-main .rp-msg .rank { color: #f5c518; font-weight: 700 !important; }
.st-main .rp-msg .warn { color: #ff6b6b; font-weight: 700 !important; }   /* 마스터 DB 채택률이 고른 DB 보다 훨씬 낮음 */   /* 1위일 때만: 채택률 1위 · 마스터 DB 1위 = 노란색 */
/* 첫 수 안내: 눈에 띄게 */
.rp-msg.prompt { border: 2px solid var(--accent-gold); background: rgba(254, 203, 76, 0.12); color: var(--accent-gold); text-align: center; padding: 4px 8px; }
.rp-msg.note b { color: var(--accent-gold); }
.st-main .rp-msg.prompt { font-weight: 800 !important; }
/* 기보 아래 버튼 (한 줄) */
.rp-acts { display: flex; gap: 8px; }
.rp-restart { margin-left: 10px; border: none; border-radius: 8px; padding: 3px 10px; font-size: 0.85rem; font-weight: 700; cursor: pointer; background: var(--accent-gold); color: var(--on-accent); }
.rp-btn { flex: 1; border: none; border-radius: 10px; font-size: 0.9rem; cursor: pointer; padding: 16px 6px; }
.st-main .rp-btn { font-weight: 800 !important; }
.rp-btn.unknown { background: var(--accent-gold); color: var(--on-accent); }
.rp-btn.skip { background: #6e6b7b; color: #ffffff; }
.rp-btn.stop { background: #d64545; color: #ffffff; }
.rp-btn.undo { background: var(--card-bg); color: var(--text-main); border: 2px solid var(--border-purple); }
.rp-btn.rp-start { flex: 2; }
/* 모르는 라인 저장 안내 */
.rp-saved { border: 2px solid var(--accent-gold); background: rgba(254, 203, 76, 0.1); border-radius: 12px; padding: 10px 12px; font-size: 0.85rem; line-height: 1.6; color: var(--text-main); }
.st-main .rp-saved-line { font-weight: 700 !important; }
.st-main .rp-saved b { color: var(--accent-gold); font-weight: 800 !important; }
/* 빨간 수 확인 상자 */
.rp-ask { border: 2px solid #df5353; background: rgba(223, 83, 83, 0.14); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.st-main .rp-ask-msg { font-size: 0.88rem; font-weight: 700 !important; color: var(--text-main); }
.rp-ask-btns { display: flex; gap: 8px; }
.st-main .rp-ask-only { margin-left: 10px; color: #f5c518; font-weight: 800 !important; }   /* 놓친 유일수 · 평가치 */
.rp-ask-btns .rp-btn { padding: 10px 6px; font-size: 0.85rem; }
.rp-ask-btns #rp-ask-no { background: #3ab4f2; color: #ffffff; }   /* 아니요, 준비된 수였습니다 = 하늘색 */
.rp-ask-btns #rp-ask-yes { background: var(--accent-gold); color: var(--on-accent); }  /* 모르는 수였습니다 = 테마색 */
.rp-btn:disabled { opacity: 0.35; cursor: default; }
/* FEN 붙여넣기 */
.rp-setup-fen { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rp-setup-fen .tool-input { width: 100%; font-family: monospace; }
.rp-setup-fen .tool-btn { align-self: center; min-width: 120px; }

/* 제목 옆 [설정 변경] */
.st-badge.rp-reconfig { cursor: pointer; background: var(--accent-gold); color: var(--on-accent); border-color: var(--accent-gold); }
.st-badge.rp-reconfig:hover { filter: brightness(1.1); }
/* 처음 설정 창 */
.rp-setup { top: 54px; z-index: 990; }   /* 상단바(54px, z-index 1000)는 가리지 않게 · 상단바 하위 메뉴가 설정 창 위로 보이게 */
.rp-setup h3 { text-align: center; }
.rp-setup .tool-modal-box { max-width: 980px; width: calc(100% - 32px); }
.rp-choice span, .rp-choice small { word-break: keep-all; text-align: center; }   /* 낱말 중간에서 줄이 바뀌지 않게 */
/* 고르는 버튼은 개수와 상관없이 한 줄 */
.rp-choices { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
.rp-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 12px; border: 1px solid var(--border-purple); background: var(--sq-dark, #b58863); color: #ffffff; cursor: pointer; font-weight: 800; font-size: 0.9rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.rp-choice:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.rp-choice img { width: 56px; height: 56px; }
.rp-choice small { color: rgba(255, 255, 255, 0.85); font-size: 0.72rem; font-weight: 500; }

@media (max-width: 600px) {
  .rp-choices { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 모바일: 대화창 - 체스판 - 버튼 3개 - 그래프 - 엔진 - 통계 - 레퍼토리 점검 (기보는 맨 아래) */
@media (max-width: 1000px) {
  .st-layout.rp-layout { display: flex; flex-direction: column; gap: 12px; }
  .rp-layout .st-side, .rp-layout .an-board-col, .rp-layout .rp-right, .rp-layout .rp-right > .an-panel { display: contents; }
  .rp-layout .rp-msgbar { order: 1; }
  .rp-layout .an-board-row { order: 2; }
  .rp-layout .rp-acts, .rp-layout #rp-start, .rp-layout .rp-ask, .rp-layout .rp-saved { order: 3; }
  .rp-layout .rp-graphs-card { order: 4; }
  .rp-layout .rp-eng-card { order: 5; }
  .rp-layout .rp-stats { order: 6; }
  .rp-layout .rp-recs-card, .rp-layout #rp-open-analysis { order: 7; }
  .rp-layout .rp-tree-card { order: 8; }
  .rp-layout .rp-recs { max-height: none; }
  /* 좁은 화면에서는 메시지를 줄바꿈해서 다 보이게 */
  .rp-msg:not(.note):not(.prompt) { white-space: normal; }
}

/* 휴대폰 · 태블릿: 체스판을 언제나 맨 위로 (제목 · 안내 메시지보다도 위) */
@media (max-width: 1000px) {
  .rp-main { display: flex; flex-direction: column; }
  .rp-main > .st-layout { order: -1; }
  .rp-layout .an-board-row { order: 0; }
}