/* lab-components.css — 연구소 공통 컴포넌트 (Phase 1: 디자인 시스템 통일)
   판정 패널·전략 뱃지·수순 뷰의 표준 스타일. dict-/fp-/rv- 3벌 중복을 lab-*로 통일.
   토큰(--ink/--good/--danger/--r*)은 styles.css 것을 재사용. */

/* ── 판정 패널 ── */
.lab-verdict{border-radius:var(--r2);padding:14px 18px;margin-bottom:14px;border:1px solid transparent;
  animation:labReveal .34s var(--ease-out) both}
.lab-verdict.win{background:var(--good-bg)}
.lab-verdict.lose{background:var(--danger-bg)}
.lab-verdict.route{background:var(--warm-bg);border-color:var(--warm-br)}
.lab-verdict.none{background:var(--soft)}
.lab-v-top{display:flex;align-items:baseline;gap:10px}
.lab-v-char{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.lab-v-head{font-size:14px;font-weight:700}
.lab-verdict.win .lab-v-head{color:var(--good)}
.lab-verdict.lose .lab-v-head{color:var(--danger)}
.lab-verdict.route .lab-v-head{color:var(--warm-ink)}
.lab-v-sub{font-size:12.5px;color:var(--ink2);margin-top:5px;line-height:1.55}
.lab-v-depth{font-size:12px;color:var(--ink3);margin-top:8px}

/* ── 전략 의미 뱃지 (넘길 글자 유불리) ── */
.lab-mean{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;
  background:var(--soft);color:var(--ink2);vertical-align:1px}
.lab-mean.good{background:var(--good-bg);color:var(--good)}
.lab-mean.danger{background:var(--danger-bg);color:var(--danger)}
.lab-mean.kill{background:var(--p-bg);color:var(--p-ink)}

/* ── 수순(라인) 뷰 ── */
.lab-line{margin:8px 0 4px;padding:14px 16px;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r2)}
.lab-line-head{font-size:13px;font-weight:700;color:var(--ink)}
.lab-line-sub{font-size:12px;color:var(--ink3);margin:4px 0 10px;line-height:1.5}
.lab-line-row{display:flex;align-items:flex-start;gap:10px;margin-top:8px}
.lab-line-num{font-size:11px;font-weight:600;color:var(--ink4);flex-shrink:0;padding-top:4px;min-width:44px}
.lab-line-seq{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.lab-line-w{font-size:13px;padding:2px 8px;border-radius:7px;background:var(--soft);color:var(--ink2)}
.lab-line-w.me{background:var(--good-bg);color:var(--good);font-weight:600}
.lab-line-w.opp{background:var(--danger-bg);color:var(--danger);font-weight:600}
.lab-line-end{font-size:12px;font-weight:600;color:var(--ink3);padding:2px 8px}
.lab-line-legend{font-size:11.5px;color:var(--ink4);margin-top:12px}
.lab-line-legend .lab-line-w{font-size:11px;padding:1px 6px;margin:0 1px}

/* ── 단어 그룹 섹션 (판정별, 접이식) ── */
.lab-sec{border-bottom:1px solid var(--hair)}
.lab-sec:last-child{border-bottom:none}
.lab-gh{display:flex;align-items:center;gap:8px;padding:11px 4px;cursor:pointer;user-select:none}
.lab-badge{font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;letter-spacing:-.01em}
.lab-badge.win{background:var(--good-bg);color:var(--good)}
.lab-badge.lose{background:var(--danger-bg);color:var(--danger)}
.lab-badge.route{background:var(--warm-bg,var(--soft));color:var(--warm-ink,var(--ink2))}
.lab-badge.muted{background:var(--soft);color:var(--ink3);border:1px solid var(--hair)}
.lab-gnote{font-size:12px;color:var(--ink3)}
.lab-gcaret{margin-left:auto;color:var(--ink3);display:flex;transition:transform .2s}
.lab-gcaret svg{width:13px;height:13px}
.lab-gh.open .lab-gcaret{transform:rotate(180deg)}
.lab-rows{max-height:0;overflow:hidden;transition:max-height .3s ease}
.lab-rows.open{max-height:4000px}
.lab-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 4px;
  border-top:1px solid var(--hair);cursor:pointer;transition:background .12s}
.lab-row:hover{background:var(--soft)}
.lab-w{font-size:14px;color:var(--ink);font-weight:500}
.lab-w .more{font-size:12px;color:var(--ink4);margin-left:6px;font-weight:400}
.lab-next{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2);text-align:right;flex-shrink:0}
.lab-give{color:var(--ink3)}