/* filename: css/research.css
   학습 > 연구 (research.php)
   체스판 / 엔진 부분은 분석 보드(analysis.php)와 같은 모양 */

/* hidden 속성이 display: flex 같은 스타일에 덮이지 않게 */
.st-main [hidden], .tool-modal [hidden] { display: none !important; }

.st-main {
  max-width: min(1720px, 100%);
  padding-left: 16px;
  padding-right: 16px;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
}

.st-loading {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
  font-weight: 700;
}

.tool-btn.danger { border-color: #ff6b6b; color: #ff6b6b; }
.tool-btn.st-small { padding: 5px 10px; font-size: 0.75rem; }
.st-spacer { flex: 1; }
.tool-modal-actions { align-items: center; }
.tool-modal-box.st-wide { max-width: 640px; }

/* ===================== 내 연구 목록 ===================== */
.st-list-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.st-h1 { font-size: 1.5rem; font-weight: 900; }
.st-sub { color: var(--text-muted); font-size: 0.9rem; margin-top: 4px; }

/* 목록: 찾기 / 진영 / 분류 / 정렬 */
.st-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.st-search { flex: 1 1 220px; min-width: 0; }
.st-select { width: auto; flex: 0 0 auto; padding-right: 28px; }
.st-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.st-section-head { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 10px; }
.st-section-head:first-of-type { margin-top: 0; }
.st-h2 { font-size: 1.1rem; font-weight: 900; }
.st-count { font-size: 0.8rem; color: var(--text-muted); font-weight: 800; }
.st-more-wrap { display: flex; justify-content: center; margin-top: 12px; }
.st-view-toggle { display: flex; gap: 4px; margin-left: auto; }

/* 내 연구 트리 보기: 진영 → 상위 연구 → 하위 연구 */
.st-stree { grid-column: 1 / -1; background: var(--card-bg); border: 1px solid var(--border-purple); border-radius: 16px; padding: 10px 12px; }
.st-stree-group + .st-stree-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-purple); }
.st-stree-group-title { font-size: 0.82rem; font-weight: 900; color: var(--accent-gold); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.st-stree-kids { margin-left: 12px; padding-left: 10px; border-left: 2px solid var(--border-purple); }
.st-stree-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; min-width: 0; }
.st-stree-row:hover { background: rgba(255, 255, 255, 0.05); }
.st-stree-fold { width: 18px; height: 18px; flex-shrink: 0; border-radius: 4px; border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 0; }
.st-stree-fold:hover { color: var(--accent-gold); }
.st-stree-fold.leaf { visibility: hidden; }
.st-stree-title { color: var(--text-main); text-decoration: none; font-weight: 800; font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-stree-title:hover { color: var(--accent-gold); }
.st-stree-meta { display: flex; gap: 4px; flex-shrink: 0; font-size: 0.7rem; color: var(--text-muted); font-weight: 700; align-items: center; }
.st-stree-add { margin-left: auto; flex-shrink: 0; background: none; border: 1px solid var(--border-purple); color: var(--text-muted); border-radius: 6px; font-size: 0.72rem; font-weight: 800; cursor: pointer; padding: 1px 7px; }
.st-stree-add:hover { color: var(--accent-gold); border-color: var(--accent-gold); }
.st-stree-row.dim .st-stree-title { color: var(--text-muted); font-weight: 600; }
.st-crumb { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 2px; }
.st-crumb a { color: var(--text-muted); text-decoration: none; }
.st-crumb a:hover { color: var(--accent-gold); }
.st-card-likes { color: #ff8fa3; font-weight: 900; }
.st-like.on { border-color: #ff8fa3; color: #ff8fa3; }
.st-mode-tabs { display: flex; gap: 4px; margin: -6px 0 14px; border-bottom: 1px solid var(--border-purple); }
.st-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--border-purple); }
.st-tab {
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 900;
  cursor: pointer;
  margin-bottom: -1px;
}
.st-tab:hover { color: var(--text-main); }
.st-tab.on { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }
.st-badge.vis { color: #9fc5ff; border-color: rgba(159, 197, 255, 0.4); }
.st-badge.owner { color: var(--text-soft); }
.st-readonly {
  margin: -4px 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px dashed #9fc5ff;
  background: rgba(159, 197, 255, 0.07);
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 700;
}
#btn-save.dirty { border-color: var(--accent-gold); color: var(--accent-gold); }
.st-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.st-cat {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-purple);
  background: var(--bg-dark);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
.st-cat:hover { color: var(--text-main); }
.st-cat.on { background: var(--accent-gold); border-color: var(--accent-gold); color: var(--on-accent); }

.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.st-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-purple);
  border-radius: 16px;
  text-decoration: none;
  color: var(--text-main);
  transition: border-color 0.15s, transform 0.15s;
}
.st-card:hover { border-color: var(--accent-gold); transform: translateY(-2px); }
/* 연구 개요: 마우스를 1초 올리면 작은 글씨 팝업 */
.st-sum-tip { position: fixed; z-index: 3000; max-width: 260px; padding: 5px 9px; border-radius: 8px; background: var(--card-bg); border: 1px solid var(--border-purple);
  color: var(--text-main); font-size: 0.75rem; font-weight: 700; line-height: 1.4; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.st-sum-tip[hidden] { display: none; }
/* 카드 오른쪽 원형 그래프: 일반 테마색 · 문제 빨강 · 강의 파랑 (공개 연구의 '챕터 비율 보기'로 켜고 끔, 기본 끔) */
.st-card.has-donut { position: relative; }
/* 그래프는 맨 아래 줄(챕터 · 좋아요 · 수정) 오른쪽 끝 (글자와 겹치지 않음) */
.st-donut { flex: none; width: 36px; height: 36px; margin: -6px 0 -2px auto; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); }
.st-hide-ratio .st-donut { display: none; }
.st-card-title { font-size: 1.02rem; font-weight: 900; word-break: keep-all; }
.st-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.75rem; color: var(--text-muted); font-weight: 700; }
.st-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  border: 1px solid var(--border-purple);
}
.st-badge.white { background: #f2f2f2; color: #111; border-color: #f2f2f2; }
.st-badge.black { background: #2a2733; color: #fff; }
.st-badge.both { background: linear-gradient(90deg, #f2f2f2 50%, #2a2733 50%); color: #888; }
.st-badge.cat { color: var(--accent-gold); border-color: rgba(254, 203, 76, 0.4); }
/* 라인 태그: 중요 노랑 · 어려움 빨강 · 우선도 낮음 회색 */
.st-line-tag { margin-left: 6px; vertical-align: 1px; }
.tag-main { --tag: #5cc3f0; }
.tag-imp { --tag: #fecb4c; }
.tag-hard { --tag: #f06262; }
.tag-sharp { --tag: #a6f53c; }
.tag-trap { --tag: #ff7eb6; }
.tag-prio { --tag: #b28cff; }
.tag-low { --tag: #9a98a6; }
.tag-info { --tag: #ffffff; }   /* 정보: 흰색 (라이트 테마는 검은색) */
html[data-theme="light"] .tag-info { --tag: #111111; }
.tag-alt { --tag: #ff9f43; }   /* 대안: 주황 */
.tag-side { --tag: #3ce0b4; }   /* 사이드라인: 청록 */
.st-line-tag, .lec-tag-btn { color: var(--tag) !important; border-color: color-mix(in srgb, var(--tag) 45%, transparent) !important; }
.lec-btn-row.lec-tag-row { width: auto; grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); }   /* 태그 10개: 5개씩 2줄 (3줄로 안 넘어가게) */
@media (max-width: 520px) { .lec-btn-row.lec-tag-row { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 4px; } .lec-tag-btn { font-size: 0.7rem !important; padding-left: 2px !important; padding-right: 2px !important; } }
/* 챕터 수정 창: 태그가 한 줄이면 창보다 넓어져 가로 스크롤 → 4개씩 2줄 */
#chapter-tags.lec-tag-row { width: auto; grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); }   /* 10개 → 5개씩 2줄 */
.lec-tag-btn { padding-left: 6px !important; padding-right: 6px !important; white-space: nowrap; }
.lec-tag-btn.on { background: var(--tag) !important; border-color: var(--tag) !important; color: #111 !important; }
.st-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  padding: 40px 16px;
  border: 1px dashed var(--border-purple);
  border-radius: 16px;
}

/* ===================== 편집기 위쪽 ===================== */
.st-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.st-back { color: var(--text-muted); text-decoration: none; font-weight: 800; font-size: 0.85rem; }
.st-back:hover { color: var(--accent-gold); }
.st-title-wrap { flex: 1; min-width: 200px; }
.st-title { font-size: 1.3rem; font-weight: 900; word-break: keep-all; }
.st-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.st-top-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.st-save { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); margin-right: 4px; }
.st-save.dirty { color: var(--accent-gold); }
.st-save.error { color: #ff6b6b; }

.st-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.st-card-head .an-card-title { margin-bottom: 0; }
.st-tree-tools { display: flex; gap: 4px; }

/* 라인(챕터) 목록 */
.st-chapters { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; }
.st-chapter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
}
.st-chapter:hover { background: rgba(255, 255, 255, 0.05); }
.st-chapter.on { border-color: var(--accent-gold); background: rgba(254, 203, 76, 0.08); }
.st-chapter-no { color: var(--text-muted); font-size: 0.72rem; min-width: 18px; }
.st-chapter-name { flex: 1; min-width: 0; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.st-chapter-side { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #888; flex-shrink: 0; }
.st-chapter-side.white { background: #f2f2f2; }
.st-chapter-side.black { background: #222; }
.st-chapter-edit { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; padding: 0 2px; }
.st-chapter-edit:hover { color: var(--accent-gold); }
.st-chapter-edit:disabled { visibility: hidden; }
/* 순서 / 수정 버튼은 마우스를 올렸을 때(또는 지금 라인)만 */
@media (hover: hover) {
  /* 자리는 늘 차지하고 보이기만 바꿈 (올릴 때 이름 줄 수가 바뀌어 흔들리지 않게) */
  .st-chapter .st-chapter-edit { visibility: hidden; }
  .st-chapter:hover .st-chapter-edit, .st-chapter.on .st-chapter-edit { visibility: visible; }
}

/* ===================== 수순 트리 (변화수는 이중 트리) ===================== */
.st-tree {
  height: clamp(220px, calc(100vh - 560px), 460px);
  overflow-y: auto;
  background: var(--bg-dark);
  border: 1px solid var(--border-purple);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.9rem;
  line-height: 1.75;
}
.st-tree-empty { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 18px 6px; }
.st-flow { word-break: break-word; }
.st-mv {
  display: inline-block;
  padding: 0 4px;
  margin: 0 1px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.st-mv:hover { background: rgba(255, 255, 255, 0.1); }
.st-mv .num { color: var(--text-muted); font-weight: 700; margin-right: 2px; }
.st-mv .nag { margin-left: 1px; font-weight: 900; }
.st-mv .pnag { margin-left: 3px; font-weight: 800; color: var(--text-soft); }
.st-mv.main { font-weight: 900; }
.st-mv.active { background: var(--accent-gold) !important; color: var(--on-accent) !important; }
.st-mv.active .num, .st-mv.active .nag, .st-mv.active .pnag { color: var(--on-accent) !important; }

/* 기호 색 (리체스와 같은 색) */
.st-mv.nag-good, .nag-good { color: #5ea9cf; }       /* ! 하늘색 */
.st-mv.nag-brilliant, .nag-brilliant { color: #26c2a3; } /* !! */
.st-mv.nag-interesting, .nag-interesting { color: #f28ac6; } /* !? */
.st-mv.nag-dubious, .nag-dubious { color: #e6b800; }  /* ?! 노란색 */
.st-mv.nag-mistake, .nag-mistake { color: #d0791a; }  /* ? */
.st-mv.nag-blunder, .nag-blunder { color: #b8161e; }
.st-mv .nag-only, .st-mv.active .nag-only { color: #7dff1a !important; }   /* □ 유일한 수: 어디서나 형광 연두색으로 고정 */
html[data-theme="light"] .st-mv .nag-only { color: #4cc400 !important; }
.st-mv.active .nag-only { color: #2e7d00 !important; }   /* 지금 수(금색 배경) 위에서도 보이게 */

/* 사용자가 고른 강조 색 (수 배경) */
.st-mv.col-green { background: rgba(21, 120, 27, 0.45); }
.st-mv.col-red { background: rgba(170, 40, 40, 0.5); }
.st-mv.col-blue { background: rgba(0, 72, 200, 0.45); }
.st-mv.col-yellow { background: rgba(230, 160, 0, 0.45); }
.st-mv.col-purple { background: rgba(140, 70, 200, 0.5); }

.st-cmt { color: var(--text-comment); font-size: 0.82rem; margin: 0 4px; white-space: pre-wrap; }
.st-pre { color: #c9a7ff; font-size: 0.82rem; margin: 0 4px; font-style: italic; white-space: pre-wrap; }
.st-root-cmt { color: var(--text-comment); font-size: 0.82rem; margin-bottom: 6px; white-space: pre-wrap; }

/* 변화수 블록: 안쪽으로 들여 쓰고 왼쪽 선. 그 안의 변화수는 또 한 단계 안쪽 (이중 트리) */
.st-vars { margin: 2px 0 4px 6px; }
.st-line {
  position: relative;
  margin: 2px 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--border-purple);
  font-size: 0.86rem;
}
.st-line:hover { border-left-color: rgba(254, 203, 76, 0.5); }
.st-fold {
  position: absolute;
  left: -9px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-purple);
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.st-fold:hover { color: var(--accent-gold); border-color: var(--accent-gold); }
.st-line.folded > :not(.st-fold):not(.st-flow:first-of-type) { display: none; }
.st-folded-note { color: var(--text-muted); font-size: 0.75rem; margin-left: 4px; }

/* ===================== 주석 · 기호 (트리 바로 아래) ===================== */
.st-opening { font-size: 0.78rem; font-weight: 800; color: var(--text-soft); margin: -2px 0 6px; min-height: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-opening .eco { display: inline-block; font-size: 0.68rem; font-weight: 900; color: var(--on-accent); background: var(--accent-gold); border-radius: 4px; padding: 0 5px; margin-right: 6px; }
.st-annot { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-purple); }
.st-annot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-annot-title { font-size: 0.85rem; font-weight: 900; color: var(--accent-gold); }
.st-annot-tools { display: flex; gap: 4px; }
.st-icon-btn {
  width: 30px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border-purple);
  background: var(--bg-dark);
  color: var(--text-main);
  cursor: pointer;
  font-size: 0.85rem;
}
.st-icon-btn:hover:not(:disabled) { border-color: var(--accent-gold); }
.st-icon-btn.danger:hover:not(:disabled) { border-color: #ff6b6b; }
.st-icon-btn:disabled { opacity: 0.35; cursor: default; }
.st-link-btn { align-self: flex-start; background: none; border: none; color: var(--text-muted); font-size: 0.75rem; font-weight: 800; cursor: pointer; padding: 0; }
.st-link-btn:hover { color: var(--accent-gold); }
.st-sym-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.st-sym-row .lbl { font-size: 0.7rem; color: var(--text-muted); font-weight: 800; min-width: 38px; }
.st-sym .key { display: block; font-size: 0.55rem; color: var(--text-muted); font-weight: 700; line-height: 1; margin-top: 1px; }
.st-before { border-color: rgba(159, 197, 255, 0.4); }
/* 수 앞 주석 | 수 뒤 주석 나란히 */
.st-comments { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-comments.single { grid-template-columns: 1fr; }
.st-comments .st-text { min-height: 64px; }

/* 트리에서 오른쪽 클릭 메뉴 */
.st-ctx {
  position: fixed;
  z-index: 2600;
  min-width: 220px;
  padding: 10px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--accent-gold);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.st-ctx-title { font-size: 0.8rem; font-weight: 900; color: var(--accent-gold); }
.st-ctx-item { text-align: left; background: none; border: none; color: var(--text-main); font-size: 0.82rem; font-weight: 700; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.st-ctx-item:hover { background: rgba(255, 255, 255, 0.08); }
.st-ctx-item.danger { color: #ff8a8a; }
.st-sym {
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid var(--border-purple);
  background: var(--bg-dark);
  color: var(--text-main);
  font-weight: 900;
  font-size: 0.85rem;
  cursor: pointer;
}
.st-sym:hover { border-color: var(--accent-gold); }
.st-sym.on { border-color: var(--accent-gold); background: rgba(254, 203, 76, 0.18); }
.st-color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.st-color.on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent-gold); }
.st-color.none { background: transparent; border: 2px dashed var(--border-purple); color: var(--text-muted); font-size: 0.7rem; line-height: 18px; }
.st-color.none.on { border-style: solid; }
.st-color.green { background: #15781B; }
.st-color.red { background: #b02a2a; }
.st-color.blue { background: #1c56c9; }
.st-color.yellow { background: #e0a000; }
.st-color.purple { background: #8c46c8; }
.st-label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--text-muted); font-weight: 800; }
.st-text { resize: vertical; min-height: 44px; font-family: inherit; font-size: 0.85rem; line-height: 1.5; }

/* ===================== 점검 모드 ===================== */
.st-drill-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.st-drill-opts label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--text-muted); font-weight: 800; }
.st-drill-msg {
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-dark);
  border: 1px solid var(--border-purple);
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.5;
}
.st-drill-msg.good { border-color: #22ac38; color: #7be08b; }
.st-drill-msg.bad { border-color: #df5353; color: #ff8a8a; }
.st-drill-msg.done { border-color: var(--accent-gold); color: var(--accent-gold); }
.st-drill-msg .cmt { display: block; margin-top: 4px; font-weight: 600; font-size: 0.82rem; color: var(--text-comment); white-space: pre-wrap; }
.st-drill-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 0.8rem; font-weight: 800; color: var(--text-muted); }
.st-drill-stats b { color: var(--text-main); }
.st-drill-log { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; font-size: 0.82rem; }
.st-drill-log .row { padding: 5px 8px; border-radius: 8px; background: var(--bg-dark); border: 1px solid var(--border-purple); }
.st-drill-log .row b { color: #ff8a8a; }
.st-drill-log .row .ok { color: #7be08b; font-weight: 800; }
.st-drill-log .empty { color: var(--text-muted); }
.st-chapter.no-check .st-chapter-name, .st-chapter.no-check .st-chapter-no { color: var(--text-muted) !important; opacity: 0.6; }   /* 점검할 게 없는 라인 */
/* 점검 진행: 남은 라인 · 이번 라인 수순 · 사이드라인 토글 */
.st-drill-prog { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-soft); }
.st-drill-prog .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--bg-dark); border: 1px solid var(--border-purple); overflow: hidden; }
.st-drill-prog .bar i { display: block; height: 100%; width: 0; background: var(--accent-gold); transition: width .3s; }
.st-drill-prog span { white-space: nowrap; }
.st-drill-run { margin-top: 6px; font-size: 0.8rem; color: var(--accent-gold); }
.st-drill-run[hidden], #drill-all[hidden] { display: none; }
/* 점검 버튼 줄: 글자(전체 보기 ↔ 이번 라인만)가 바뀌어도 버튼 폭이 그대로 */
.an-row:has(#drill-next) > .an-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#drill-next.go { background: var(--accent-gold); border-color: var(--accent-gold); color: var(--on-accent); }   /* 점검을 끝내면 [다음 챕터] 강조 */
#drill-next.go:hover { filter: brightness(1.08); }
.st-drill-path { white-space: normal; overflow-wrap: anywhere; }
.st-drill-path span { display: inline-block; }   /* 수 사이에 빈칸이 없어도 줄바꿈 */
.st-drill-path.all .cm, .st-drill-path.all .pre { display: inline; margin-right: 5px; }
.st-drill-path.all { max-height: 320px; overflow-y: auto; padding-right: 4px; }   /* 전체 보기: 챕터 기보 전체 */
.st-drill-path.all .mv { cursor: pointer; border-radius: 4px; padding: 0 2px; }
.st-drill-path.all .mv:not([class*="nag-"]) { color: var(--text-main); }   /* 기호 붙은 수는 기호 색 */
.st-drill-path.all .mv .nag { margin-left: 1px; }
.st-drill-path.all .mv:hover { background: rgba(255, 255, 255, 0.08); }
.st-drill-path.all .mv.on { background: var(--accent-gold); color: var(--on-accent); }
.st-drill-path.all .side { margin: 2px 0 2px 8px; padding-left: 8px; border-left: 2px solid var(--border-purple); color: var(--text-muted); }
.st-drill-path.all .cm { white-space: pre-wrap; color: var(--text-comment); }
.st-drill-path.all .pre { white-space: pre-wrap; color: #c9a7ff; font-style: italic; }
.st-drill-path { margin-top: 8px; font-size: 0.82rem; line-height: 1.6; color: var(--text-soft); min-height: 1.6em; }
.st-drill-path span { margin-right: 5px; white-space: nowrap; }
.st-drill-path span.on { color: var(--accent-gold); }
.st-drill-path .empty { color: var(--text-muted); }
.st-drill-sides { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.8rem; color: var(--text-soft); cursor: pointer; }
/* 스위치 토글 */
.st-drill-sides input { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 34px; height: 18px; margin: 0; border-radius: 9px; background: var(--bg-dark); border: 1px solid var(--border-purple); cursor: pointer; transition: background .2s, border-color .2s; }
.st-drill-sides input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); transition: transform .2s, background .2s; }
.st-drill-sides input:checked { background: var(--accent-gold); border-color: var(--accent-gold); }
.st-drill-sides input:checked::before { transform: translateX(16px); background: #fff; }
.an-board-wrap.shake { animation: st-shake 0.3s; }
@keyframes st-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ===================== 체스판 / 엔진 (analysis.php 와 같은 모양) ===================== */
/* 라인 목록 | 체스판 | 엔진 · 트리 · 주석 */
.st-layout {
  --board-max: min(600px, calc(100vh - 190px));
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, calc(var(--board-max) + 20px)) minmax(300px, 0.9fr);
  gap: 16px;
  width: 100%;
  align-items: start;
}
.st-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; position: sticky; top: 76px; }
.st-side .st-chapters { max-height: calc(100vh - 200px); }
/* 라인 목록 접기: 접으면 체스판 · 수순 트리가 그만큼 넓어짐 */
.st-side-toggle { flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border-purple); background: var(--bg-dark); color: var(--text-muted); cursor: pointer; font-size: 0.7rem; padding: 0; }
.st-side-toggle:hover { color: var(--accent-gold); border-color: var(--accent-gold); }
.st-side .st-card-head .an-card-title { flex: 1; }
@media (min-width: 1001px) {
  /* 라인 접기: 칸 너비는 그대로, 라인 카드만 작은 상자로 (오프닝 DB · 채팅이 위로 올라옴) */
}
.side-closed .st-side > .an-card:first-child { padding: 8px; align-self: flex-start; width: auto; }
.side-closed .st-side .st-chapters, .side-closed #btn-add-chapter, .side-closed #btn-pick-mode,.side-closed .st-side > .an-card:first-child .an-card-title { display: none !important; }

/* 왼쪽 라인 목록 · 오른쪽 패널: 얇고 깔끔하게 */
.st-side .an-card, .st-layout .an-panel .an-card { padding: 10px; border-radius: 12px; }
.st-side .st-chapter { padding: 4px 6px; font-size: 0.82rem; }
.st-side .st-chapter-name { -webkit-line-clamp: 3; }
.st-layout .an-panel { gap: 8px; }
.st-layout .an-engine-eval { font-size: 1.1rem; min-width: 48px; }
.st-layout .an-pv { font-size: 0.76rem; padding: 3px 6px; }
.st-layout .st-tree { font-size: 0.84rem; padding: 6px 8px; }
.an-board-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; position: sticky; top: 76px; }
.an-board-row {
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  gap: 0;
  width: 100%;
  max-width: var(--board-max);
  min-width: 260px;
  margin: 0 auto;
}
.an-board-row.with-gauge { grid-template-columns: 14px minmax(0, 1fr); gap: 6px; max-width: calc(var(--board-max) + 20px); }
.an-gauge { position: relative; background: #262421; border-radius: 4px; overflow: hidden; display: none; grid-column: 1; }
.with-gauge .an-gauge { display: block; }
.an-gauge-white { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: #f2f2f2; transition: height 0.4s ease; }
.an-gauge.flipped .an-gauge-white { bottom: auto; top: 0; }
.an-gauge::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(214, 79, 0, 0.6); }
.an-board-wrap { grid-column: 2; position: relative; width: 100%; aspect-ratio: 1 / 1; }
.an-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  cursor: pointer;
}
.an-board-wrap, .an-nav button, .st-tree, .an-pvs { -webkit-tap-highlight-color: transparent; }
.sq { position: relative; }
.sq.light { background: var(--sq-light, #f0d9b5); }
.sq.dark { background: var(--sq-dark, #b58863); }
.sq.last::before { content: ""; position: absolute; inset: 0; background: rgba(155, 199, 0, 0.41); }
.sq.selected::before { content: ""; position: absolute; inset: 0; background: rgba(20, 85, 30, 0.5); }
.sq.hover::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.65); }
.sq.check { background-image: radial-gradient(ellipse at center, rgba(255, 0, 0, 1) 0%, rgba(231, 0, 0, 1) 25%, rgba(169, 0, 0, 0) 89%, rgba(158, 0, 0, 0) 100%); }
.sq .piece { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.sq .piece.dragging { opacity: 0.3; }
.sq .dest { position: absolute; left: 50%; top: 50%; width: 28%; height: 28%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(20, 85, 30, 0.5); z-index: 3; pointer-events: none; }
.sq .dest.capture { width: 100%; height: 100%; background: radial-gradient(circle closest-side, transparent 0%, transparent 76%, rgba(20, 85, 30, 0.5) 78%); }   /* 잡을 수 있는 칸: 칸 가장자리 고리 (closest-side 기준이라 원 안에서 보임) */
.sq .coord { position: absolute; font-size: clamp(0.55rem, 1.6vw, 0.75rem); font-weight: 800; z-index: 1; pointer-events: none; }
.sq .coord.file { right: 4%; bottom: 2%; }
.sq .coord.rank { left: 4%; top: 2%; }
.sq.light .coord { color: var(--sq-dark, #b58863); }
.sq.dark .coord { color: var(--sq-light, #f0d9b5); }
/* 수 기호를 판 위 칸 모서리에 (리체스처럼) */
.sq .sq-nag {
  position: absolute;
  top: -8%;
  right: -8%;
  width: 48%;
  height: 48%;
  border-radius: 50%;
  z-index: 4;
  color: var(--text-main);
  font-weight: 900;
  font-size: clamp(0.8rem, 2.2vw, 1.15rem);
  letter-spacing: -0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
/* 포지션 기호 (판 위): 수 기호 왼쪽에 살짝 겹쳐서, 백 유리 = 흰색 → 동등 = 회색 → 흑 유리 = 검은색 */
.sq .sq-pnag { font-size: 0.8em; letter-spacing: -0.08em; }
.sq .sq-pnag.with-nag { right: 22%; z-index: 5; }   /* 포지션 기호가 수 기호 위로 */
.sq .sq-pnag.with-nag.edge-r { right: 37%; }
.sq-pnag.pn-0 { background: #ffffff; color: #111; }
.sq-pnag.pn-1 { background: #e6e6e6; color: #111; }
.sq-pnag.pn-2 { background: #c4c4c4; color: #111; }
.sq-pnag.pn-3, .sq-pnag.pn-4 { background: #8a8a8a; color: #fff; }
.sq-pnag.pn-5 { background: #555555; color: #fff; }
.sq-pnag.pn-6 { background: #2a2a2a; color: #fff; }
.sq-pnag.pn-7 { background: #000000; color: #fff; }
.st-pnag-fold { opacity: 0.75; }
.sq-nag.nag-good { background: #5ea9cf; color: #fff; }
.sq-nag.nag-brilliant { background: #26c2a3; color: #fff; }
.sq-nag.nag-interesting { background: #f28ac6; color: #1a1a1a; }
.sq-nag.nag-dubious { background: #e6b800; color: #fff; }
.sq-nag.nag-mistake { background: #d0791a; color: #fff; }
.sq-nag.nag-blunder { background: #b8161e; color: #fff; }
.an-shapes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.an-ghost { position: fixed; pointer-events: none; z-index: 3000; transform: translate(-50%, -50%); }
.an-promo { position: absolute; inset: 0; background: rgba(11, 9, 18, 0.7); display: none; align-items: center; justify-content: center; z-index: 20; border-radius: 6px; }
.an-promo.active { display: flex; }
.an-promo-box { display: flex; gap: 8px; background: var(--card-bg); border: 1px solid var(--accent-gold); border-radius: 14px; padding: 10px; }
.an-promo-box button { width: clamp(52px, 12vw, 76px); height: clamp(52px, 12vw, 76px); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-purple); border-radius: 10px; cursor: pointer; padding: 4px; }
.an-promo-box button:hover { background: rgba(254, 203, 76, 0.2); border-color: var(--accent-gold); }
.an-promo-box img { width: 100%; height: 100%; }
.an-nav { display: flex; gap: 6px; width: 100%; max-width: var(--board-max); min-width: 260px; margin: 0 auto; }
.an-board-row.with-gauge ~ .an-nav, .an-board-row.with-gauge ~ .an-status { padding-left: 20px; max-width: calc(var(--board-max) + 20px); }
.an-nav button { flex: 1; padding: 10px 0; background: var(--card-bg); border: 1px solid var(--border-purple); border-radius: 10px; color: var(--text-main); font-size: 1rem; font-weight: 900; cursor: pointer; transition: all 0.15s; }
.an-nav button:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.an-nav button:disabled { opacity: 0.35; cursor: default; }
.an-status { width: 100%; max-width: var(--board-max); margin: 0 auto; text-align: center; font-size: 0.9rem; font-weight: 800; color: var(--text-muted); min-height: 1.2em; }
.an-status.alert { color: var(--accent-gold); }
.an-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.an-card { background: var(--card-bg); border: 1px solid var(--border-purple); border-radius: 16px; padding: 14px; }
.an-card-title { font-size: 0.85rem; font-weight: 800; color: var(--accent-gold); margin-bottom: 10px; }
.an-engine-head { display: flex; align-items: center; gap: 10px; }
.an-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.an-switch input { opacity: 0; width: 0; height: 0; }
.an-switch span { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.12); border: 1px solid var(--border-purple); border-radius: 22px; transition: background 0.2s; }
.an-switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #ffffff; border-radius: 50%; transition: transform 0.2s; }
.an-switch input:checked + span { background: var(--accent-gold); border-color: var(--accent-gold); }
.an-switch input:checked + span::before { transform: translateX(18px); background: var(--bg-dark); }
.an-engine-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.an-engine-name strong { font-size: 0.92rem; font-weight: 900; }
.an-engine-name span { font-size: 0.72rem; color: var(--text-muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-engine-eval { font-size: 1.35rem; font-weight: 900; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.an-engine-settings { display: none; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.an-engine-settings.on { display: flex; }
.an-engine-settings label { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 800; color: var(--text-muted); }
.an-engine-settings input, .an-engine-settings select { width: 56px; background: var(--bg-dark); color: var(--text-main); border: 1px solid var(--border-purple); border-radius: 6px; padding: 3px 6px; font-size: 0.78rem; font-weight: 700; }
.an-pvs { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.an-pvs:empty { display: none; }
.an-pv { display: flex; gap: 8px; align-items: baseline; font-size: 0.82rem; background: var(--bg-dark); border: 1px solid var(--border-purple); border-radius: 8px; padding: 5px 8px; overflow: hidden; white-space: nowrap; }
.an-pv-score { flex-shrink: 0; min-width: 46px; font-weight: 900; text-align: center; border-radius: 4px; padding: 1px 4px; font-variant-numeric: tabular-nums; }
.an-pv-score.w { background: #f2f2f2; color: #111111; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.an-pv-score.b { background: #3a3744; color: #ffffff; }
.an-pv-moves { overflow: hidden; text-overflow: ellipsis; color: var(--text-soft); }
.an-pv-moves span { cursor: pointer; padding: 0 2px; border-radius: 3px; }
.an-pv-moves span:hover { background: rgba(254, 203, 76, 0.25); color: #ffffff; }
.an-engine-msg { margin-top: 10px; font-size: 0.78rem; color: var(--text-muted); font-weight: 700; }
.an-engine-msg:empty { display: none; }
.an-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.an-btn { flex: 1 1 auto; padding: 9px 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-purple); border-radius: 10px; color: var(--text-main); font-size: 0.82rem; font-weight: 800; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.an-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.an-btn.primary { background: var(--accent-gold); border-color: var(--accent-gold); color: var(--on-accent); }
.an-btn.primary:hover { opacity: 0.9; color: var(--on-accent); }
.an-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.an-help { font-size: 0.72rem; color: var(--text-muted); line-height: 1.6; width: 100%; max-width: var(--board-max); margin: 0 auto; }
.an-help kbd { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-purple); border-radius: 4px; padding: 0 4px; font-family: inherit; }

/* 아래쪽 FEN / PGN 도구 */
.st-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 16px; }
.st-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; }
.st-tools .tool-textarea { min-height: 96px; }

/* 중간 폭: 라인 목록을 좁게 */
@media (max-width: 1180px) {
  .st-layout { grid-template-columns: minmax(190px, 1fr) minmax(0, calc(var(--board-max) + 20px)) 270px; --board-max: min(520px, calc(100vh - 190px)); }
}
/* 태블릿: 라인 목록을 체스판 위 가로 줄로 */
@media (max-width: 1000px) {
  .st-layout { grid-template-columns: minmax(0, calc(var(--board-max) + 20px)) minmax(300px, 1fr); }
  .st-side { grid-column: 1 / -1; position: static; }
  .st-side .st-chapters { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .st-side .st-chapter { flex: 0 1 auto; }
}
@media (max-width: 760px) {
  .st-layout { grid-template-columns: 1fr; --board-max: 640px; }
  .an-board-col { position: static; }
  .st-tree { height: 320px; }
  .st-tools { grid-template-columns: 1fr; }
}

/* 기호를 단 수의 도착 칸을 기호 색으로 칠함 (리체스처럼) */
.sq.nagsq::before { content: ""; position: absolute; inset: 0; z-index: 1; }.sq.nagsq.nag-good::before { background: rgba(94, 169, 207, 0.5); }
.sq.nagsq.nag-brilliant::before { background: rgba(38, 194, 163, 0.5); }
.sq.nagsq.nag-interesting::before { background: rgba(242, 138, 198, 0.45); }
.sq.nagsq.nag-dubious::before { background: rgba(230, 184, 0, 0.55); }
.sq.nagsq.nag-mistake::before { background: rgba(208, 121, 26, 0.5); }
.sq.nagsq.nag-blunder::before { background: rgba(184, 22, 30, 0.55); }
/* 연구 화면 글꼴 굵기: 전체적으로 얇게 (제목 · 지금 수 · 기호만 조금 굵게) */
.st-main *, .st-ctx *, #info-modal *, #chapter-modal * { font-weight: 500 !important; }
.st-main .st-title, .st-main .st-h1, .st-main .st-h2, .st-main .an-card-title, .st-main .st-annot-title,
.st-main .st-mv.active, .st-main .st-mv .nag, .st-main .sq-nag, .st-main .st-sym, .st-main .an-engine-eval,
.st-main .st-chapter.on .st-chapter-name, .st-main .st-card-title { font-weight: 700 !important; }
/* 주석의 굵은 글자(Ctrl+B): 기보 · 주석 칸 · 강의 설명 어디서나 확실히 굵게 */
.st-main b.cmt-b, .st-main .st-rich b, .st-main .st-rich strong, .lec-note b.cmt-b, b.cmt-b { font-weight: 800 !important; }
/* 체스판 그림자 없음 */
.st-main .an-board { box-shadow: none; }
/* 글자 테두리가 뭉개져 보이지 않게 (글꼴 부드럽게 · 픽셀 맞춤) */
.st-main, .st-ctx, .tool-modal { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* 메인 라인은 밝게, 변화수(사이드 라인)는 연하게 · 안쪽 변화수일수록 더 연하게 */
.st-tree .st-mv.main:not([class*="nag-"]) { color: var(--text-main); }
.st-tree .st-line .st-mv:not([class*="nag-"]) { color: #b9b4cc; }
.st-tree .st-line .st-line .st-mv:not([class*="nag-"]) { color: #9690ad; }
.st-tree .st-line .st-cmt { opacity: 0.85; }
/* ================= 화면 배치 (라인 · 오프닝 DB | 체스판(고정) | 엔진 · 트리 · PGN · 단축키) ================= */
.st-layout {
  --left-w: 380px;
  --right-w: 360px;
  --board-max: min(760px, calc(100vh - 170px));
  grid-template-columns: var(--left-ww, var(--left-w)) minmax(0, 1fr) var(--right-ww, var(--right-w));
  grid-template-rows: auto auto auto 1fr;
}
.st-side { grid-column: 1; grid-row: 1; position: relative; top: auto; }
.st-explorer { grid-column: 1; grid-row: 2 / span 3; min-width: 0; }
.st-layout .an-board-col { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 70px; align-self: start; }
#st-panel, #st-drill { grid-column: 3; grid-row: 1; position: relative; }
.st-import { grid-column: 3; grid-row: 2; min-width: 0; }
.st-helpbox { grid-column: 3; grid-row: 3; min-width: 0; }
.st-layout .an-board-row { max-width: var(--board-max); }
.st-layout .an-nav, .st-layout .an-status { max-width: var(--board-max); }
@media (min-width: 1001px) {
}
.st-layout.drilling .st-explorer, .st-layout.drilling .st-import { display: none; }
@media (max-width: 1180px) { .st-layout { --left-w: 300px; --right-w: 320px; } }
@media (max-width: 1000px) {
  .st-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .st-layout > * { grid-column: 1 !important; grid-row: auto !important; }
  .st-layout .an-board-col { position: static; }
  .st-resizer { display: none; }
}

/* 칸 너비 드래그 (PC) */
.st-resizer { position: absolute; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 6; }
.st-resizer.left { right: -13px; }
.st-resizer.right { left: -13px; }
.st-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; border-radius: 2px; background: transparent; }
.st-resizer:hover::after, .st-resizer.dragging::after { background: var(--accent-gold); }
body.st-resizing { cursor: col-resize; user-select: none; }

.st-side-toggle { width: auto; padding: 0 7px; font-size: 0.72rem; white-space: nowrap; }

/* 라인 목록: 번호 · 진영 아이콘 간격 줄이기 + 점검 상태 네모 */
.st-chapter { gap: 5px; }
.st-chapter-no { min-width: 0; }
.st-chapter-drill { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; background: #5d5a6d; margin-left: auto; }
.st-chapter-drill.good { background: #22ac38; }
.st-chapter-drill.bad { background: #df5353; }
.st-chapter-drill.skip { background: transparent; position: relative; }   /* 점검 필요 없는 라인: V 체크 */
.st-chapter-drill.skip::after { content: '✓'; position: absolute; inset: -3px 0 0; font-size: 12px; font-weight: 900; line-height: 1; text-align: center; color: #8a87a0; }
.st-chapter-drill.skip.seen { box-shadow: none; }   /* 본 라인이면 테두리 대신 체크를 노랗게 */
.st-chapter-drill.skip.seen::after { color: var(--accent-gold); }

/* 분기점 고르기: 키보드 (트리 아래) */
.st-branches { margin-top: 6px; border: 1px solid var(--accent-gold); border-radius: 8px; overflow: hidden; font-size: 0.82rem; }
.st-branch { display: flex; gap: 6px; padding: 4px 8px; cursor: pointer; }
.st-branch:hover { background: rgba(255, 255, 255, 0.06); }
.st-branch.on { background: rgba(254, 203, 76, 0.18); }
.st-branch .k { color: var(--text-muted); font-size: 0.7rem; }
.st-branch-hint { padding: 3px 8px; font-size: 0.68rem; color: var(--text-muted); border-top: 1px solid var(--border-purple); }

/* 분기점 고르기: 휠 팝업 (체스판 위, 체스베이스처럼) */
.st-branch-pop { position: absolute; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 180px; background: var(--card-bg); border: 2px solid var(--accent-gold); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); overflow: hidden; }
.st-branch-pop .st-branch { padding: 7px 12px; font-size: 0.95rem; }

/* 암기 / 점검 모드: 체스판 테두리 */
.an-board-wrap.mode-learn { outline: 4px solid #4fc3f7; outline-offset: 3px; border-radius: 6px; }
.an-board-wrap.mode-drill { outline: 4px solid #e05555; outline-offset: 3px; border-radius: 6px; }
.st-learn-btn { border-color: #4fc3f7; color: #4fc3f7; }

/* 오프닝 DB */
.st-db-tabs { display: flex; gap: 4px; }
.st-db-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.st-db-filters .row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.st-db-filters .lbl { font-size: 0.7rem; color: var(--text-muted); min-width: 40px; }
.st-db-filters .st-cat { padding: 2px 8px; font-size: 0.72rem; }
.st-db-filters select { width: auto; padding: 3px 26px 3px 8px; font-size: 0.75rem; }
.st-db-summary { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; }
.st-db-moves { display: flex; flex-direction: column; }
.st-db-row { display: grid; grid-template-columns: 62px 38px 64px minmax(0, 1fr) 40px; gap: 8px; align-items: center; padding: 4px 4px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; }
.st-db-row:hover { background: rgba(255, 255, 255, 0.06); }
.st-db-row .san { font-weight: 700; }
.st-db-row .n, .st-db-row .avg { color: var(--text-muted); font-size: 0.74rem; text-align: right; }
.st-db-row .pct { font-size: 0.74rem; font-weight: 700; text-align: right; }
.st-db-bar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; font-size: 0.62rem; line-height: 16px; }
.st-db-bar span { text-align: center; overflow: hidden; white-space: nowrap; }
.st-db-bar .w { background: #f2f2f2; color: #222; }
.st-db-bar .d { background: #8a8799; color: #fff; }
.st-db-bar .b { background: #26232f; color: #ddd; }
.st-db-games { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 0.75rem; }
.st-db-games a { color: var(--text-muted); text-decoration: none; display: flex; gap: 6px; padding: 2px 4px; border-radius: 4px; }
.st-db-games a:hover { background: rgba(255, 255, 255, 0.06); color: var(--accent-gold); }
.st-db-empty { font-size: 0.8rem; color: var(--text-muted); padding: 10px 2px; }

/* PGN 가져오기 · 단축키 */
.st-mini-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.st-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; font-size: 0.75rem; color: var(--text-muted); }
.st-keys .item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.st-keys kbd { display: inline-block; min-width: 20px; padding: 1px 5px; text-align: center; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-purple); border-bottom-width: 2px; border-radius: 4px; color: var(--text-main); font-family: inherit; font-size: 0.7rem; }
.st-keys .tip { grid-column: 1 / -1; font-size: 0.72rem; line-height: 1.5; }
/* 왼쪽(라인 + 오프닝 DB) · 오른쪽(패널 + PGN + 단축키)은 각각 세로로 쌓음 → 칸끼리 높이가 엮이지 않음 */
.st-layout { grid-template-rows: auto; }
.st-side { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 12px; position: relative; min-width: 0; }
.st-right { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 12px; position: relative; min-width: 0; }
.st-layout .an-board-col { grid-column: 2; grid-row: 1; }
.st-explorer, .st-import, .st-helpbox, #st-panel, #st-drill { grid-column: auto; grid-row: auto; }
.st-right .an-panel { position: static; }
@media (max-width: 1000px) { .st-side, .st-right { position: static; } }
/* 라이트 모드: 트리 · 주석 글자를 진하게 */
html[data-theme="light"] .st-tree .st-mv.main:not([class*="nag-"]) { color: #1f1b2d; }
html[data-theme="light"] .st-tree .st-line .st-mv:not([class*="nag-"]) { color: #5f5a75; }
html[data-theme="light"] .st-tree .st-line .st-line .st-mv:not([class*="nag-"]) { color: #8a85a0; }
html[data-theme="light"] .st-cmt, html[data-theme="light"] .st-root-cmt, html[data-theme="light"] .st-drill-msg .cmt { color: #2e7d32; }
html[data-theme="light"] .st-pre { color: #7a3fc2; }   /* 앞 주석: 보라 (뒤 주석 파랑 · 초록과 구분) */
html[data-theme="light"] .st-mv:hover, html[data-theme="light"] .st-chapter:hover, html[data-theme="light"] .st-db-row:hover, html[data-theme="light"] .st-branch:hover { background: rgba(75, 54, 123, 0.08); }
html[data-theme="light"] .st-branch.on { background: rgba(75, 54, 123, 0.14); }
html[data-theme="light"] .an-pv-moves { color: #3d3850; }
/* 암기 / 점검 버튼: 같은 모양, 색만 다름 (하늘색 / 빨강) */
.st-learn-btn, .st-drill-btn { background: transparent; font-weight: 800; }
.st-learn-btn { border-color: #4fc3f7; color: #4fc3f7; }
.st-drill-btn { border-color: #e05555; color: #e05555; }
.st-learn-btn:hover { background: rgba(79, 195, 247, 0.12); }
.st-drill-btn:hover { background: rgba(224, 85, 85, 0.12); }
.st-drill-msg .cmt.learn-list { white-space: pre-wrap; line-height: 1.7; }

/* PGN 가져오기 입력창: 기본은 낮게 (필요하면 끌어서 늘림) */
#pgn-in { min-height: 56px; height: 64px; }

/* 수 번호(1. 8...)는 그 수와 같은 색: 메인라인은 본문색, 사이드라인만 회색 (기호 색이 붙은 수도 번호는 라인 색) */
.st-mv .num { color: inherit; }
.st-tree .st-mv .num { color: var(--text-main); }
.st-tree .st-line .st-mv .num { color: #b9b4cc; }
.st-tree .st-line .st-line .st-mv .num { color: #9690ad; }
html[data-theme="light"] .st-tree .st-mv .num { color: #1f1b2d; }
html[data-theme="light"] .st-tree .st-line .st-mv .num { color: #5f5a75; }
html[data-theme="light"] .st-tree .st-line .st-line .st-mv .num { color: #8a85a0; }

/* 라인 목록 페이지 버튼 (20개 단위) */
.st-chapter-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 8px; }
.st-chapter-pager button { min-width: 28px; padding: 3px 7px; border: 1px solid var(--border-purple); border-radius: 6px; background: var(--btn-bg); color: var(--text-main); font-size: 0.8rem; cursor: pointer; }
.st-chapter-pager button.on { background: var(--accent-gold); color: var(--on-accent); border-color: var(--accent-gold); font-weight: 700; }
.st-chapter-pager button:disabled { opacity: 0.4; cursor: default; }

/* 외부 연구 가져오기: PGN 파일 첨부 */
.st-import-file { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.st-import-file .an-btn { cursor: pointer; }

/* 오프닝 DB 기간: 연도 직접 입력 */
.st-db-filters .st-db-year { width: 70px; padding: 3px 6px; font-size: 0.8rem; }

/* 채팅 (오프닝 DB 아래) */
.st-chat { margin-top: 10px; }
.st-chat-log { height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 6px; background: var(--bg-dark); border: 1px solid var(--border-purple); border-radius: 8px; font-size: 0.82rem; }
.st-chat-msg { position: relative; line-height: 1.4; word-break: break-word; padding-right: 16px; }
.st-chat-msg b { color: var(--accent-gold); margin-right: 6px; font-weight: 700; }
.st-chat-msg span { color: var(--text-main); }
.st-chat-del { position: absolute; right: 0; top: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; padding: 0 2px; }
.st-chat-empty { color: var(--text-muted); font-size: 0.8rem; }
.st-chat-form { display: flex; gap: 6px; margin-top: 6px; }
.st-chat-form .tool-input { flex: 1; min-width: 0; padding: 6px 8px; }

/* 주석 색: 메인라인은 파란색 계열, 사이드라인은 기존 초록 */
.st-tree .st-cmt, .st-root-cmt { color: #7cb8ff; }
.st-tree .st-line .st-cmt { color: var(--text-comment); }
html[data-theme="light"] .st-tree .st-cmt, html[data-theme="light"] .st-root-cmt { color: #1f5fbf; }
html[data-theme="light"] .st-tree .st-line .st-cmt { color: #2e7d32; }

/* 복사 · 다른 화면에서 열기 버튼 (2 x 2) */
.st-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.st-tool-grid .an-btn { width: 100%; }

/* 연구 제목 옆 정보 수정 버튼 */
.st-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-title-row .st-title { min-width: 0; }
.st-title-row #btn-edit-info { flex-shrink: 0; }

/* 수 평가 · 포지션 평가 · 색을 한 줄로: 버튼이 칸 너비에 맞춰 줄어듦, 묶음 사이 구분선 */
.st-sym-line { display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; }
.st-sym-line .st-sym-row { flex-wrap: nowrap; gap: 2px; flex-shrink: 1; min-width: 0; }
.st-sym-line #st-move-nags, .st-sym-line #st-pos-nags { flex: 1 1 auto; }
.st-sym-line .st-sym-row + .st-sym-row:not([hidden]) { margin-left: 4px; padding-left: 4px; border-left: 1px solid var(--border-purple); }
.st-sym-line .st-sym { flex: 1 1 0; min-width: 0; padding: 2px 0; font-size: 0.72rem; letter-spacing: -0.02em; border-radius: 5px; line-height: 1.3; }
.st-sym-line .st-sym .key { display: none; }
.st-sym-line #st-colors { gap: 3px; }
.st-sym-line .st-color { width: 15px; height: 15px; border-width: 2px; }

/* 오프닝 DB 접힘: 제목 줄만 */
.db-closed .st-db-tabs, .db-closed .st-db-filters, .db-closed .st-db-summary, .db-closed .st-db-moves, .db-closed .st-db-games, .db-closed .st-db-games-toggle { display: none !important; }
/* 모델 게임 접기 / 펴기 */
.st-db-games-toggle { display: block; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.st-db-games-toggle:hover { color: var(--text-main, inherit); }
.st-db-games-toggle[hidden] { display: none; }
.st-db-games-toggle + .st-db-games { margin-top: 4px; }
#btn-db-toggle { margin-right: 6px; }

/* ===== 화면 정리: 카드 테두리 없이 배경색으로만 구분, 박스 안 박스는 테두리 없이 ===== */
.st-main .st-layout .an-card { border: 0; }
.st-main .st-tree, .st-main .an-pv, .st-main .st-chat-log { border: 0; }
.st-main .st-db-filters .st-cat:not(.on) { border-color: transparent; }

/* 오른쪽: 엔진 · 수순 트리 · 주석을 한 박스로 (구분선으로 나눔) */
.st-main #st-panel { gap: 0; background: var(--card-bg); border-radius: 12px; overflow: hidden; }
.st-main #st-panel > .an-card { background: transparent; border-radius: 0; }
.st-main #st-panel > .an-card + .an-card { border-top: 1px solid var(--border-purple); }

/* 보드 아래 '내보내기 ▾' · '?' 버튼과 펼침 상자 */
.an-nav .st-nav-text { flex: 0 0 auto; padding: 10px 12px; font-size: 0.85rem; }
.st-nav-pops { position: relative; width: 100%; max-width: var(--board-max); margin: 0 auto; }
/* 공유 · 도움말 창이 오른쪽 칸 패널 위로: z-index 만 올림 (position 을 relative 로 바꾸면 sticky 가 풀려 체스판이 아래로 내려감)
   체스판 칸이 static 인 좁은 화면에서만 z-index 가 먹도록 relative */
.an-board-col:has(.st-nav-pops > .st-pop:not([hidden])) { z-index: 40; }
@media (max-width: 1000px) { .st-layout .an-board-col:has(.st-nav-pops > .st-pop:not([hidden])) { position: relative; } }
@media (max-width: 760px) { .an-board-col:has(.st-nav-pops > .st-pop:not([hidden])) { position: relative; } }
.st-pop { position: absolute; right: 0; bottom: 60px; z-index: 30; width: min(360px, 100%); background: var(--card-bg); border: 1px solid var(--border-purple); border-radius: 12px; padding: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
.st-pop[hidden] { display: none !important; }

/* 기보 · 주석 글자 크기 (설정 → 연구) */
.st-main .st-layout .st-tree { font-size: var(--st-tree-fs, 0.84rem); }
.st-main .st-tree .st-cmt { font-size: 0.97em; }
.st-main .st-root-cmt { font-size: calc(var(--st-tree-fs, 0.84rem) * 0.97); }

/* 사이드라인 · 수 앞 주석도 설정한 기보 글자 크기를 따름 */
.st-main .st-tree .st-line { font-size: 1em; }
.st-main .st-tree .st-pre { font-size: 0.97em; }

/* 판 위 수 기호: 칸 모서리 쪽으로 더 띄우고 10% 작게, 화살표 · 동그라미보다 위에 */
.st-main .sq .sq-nag { top: -14%; right: -14%; width: 43%; height: 43%; font-size: clamp(0.72rem, 2vw, 1.04rem); z-index: 12; }

/* 수를 넘길 때 엔진 · 오프닝 DB 칸이 흔들리지 않게: 계산 / 불러오는 동안 지난 결과를 흐리게 유지 */
.an-pvs.stale, .st-db-moves.loading { opacity: 0.45; transition: opacity 0.15s; pointer-events: none; }
.st-main .st-db-moves { min-height: 120px; }

/* 라인 드래그 · 하위 라인 들여쓰기 */
.st-chapters { position: relative; }
.st-chapter { margin-left: calc(var(--lv, 0) * 16px); }
.st-chapter.sub { border-left: 2px solid var(--border-purple); }
.st-chapter-grip { cursor: grab; color: var(--text-muted); font-size: 0.75rem; letter-spacing: -2px; padding: 0 3px 0 0; touch-action: none; user-select: none; opacity: 0.5; flex-shrink: 0; }
.st-chapter:hover .st-chapter-grip { opacity: 1; }
.st-chapter-grip:active { cursor: grabbing; }
.st-chapter.dragging { opacity: 0.35; }
.st-chapter-drop { position: absolute; right: 4px; height: 2px; background: var(--accent-gold); border-radius: 2px; pointer-events: none; display: none; z-index: 5; }
.st-chapter-drop::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gold); }
@media (max-width: 1000px) {
  .st-side .st-chapter { margin-left: 0; }
  .st-side .st-chapter-grip { display: none; }
  .st-side .st-chapter.sub .st-chapter-no::before { content: "↳"; margin-right: 2px; }
}

/* 판 끝 칸 수 기호: 안쪽으로 */
.st-main .sq .sq-nag.edge-r { right: 1%; }
.st-main .sq .sq-nag.edge-t { top: 1%; }
/* 체스판 아래 작은 설정 톱니바퀴 */
.st-main .an-nav .st-gear { flex: 0 0 auto; padding: 0 6px; font-size: 0.8rem; opacity: 0.6; }
.st-main .an-nav .st-gear:hover { opacity: 1; }
/* 라인 드래그 손잡이: 잡기 쉽게 넓힘 */
.st-chapter-grip { align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 22px; margin: -4px 0 -4px -6px; padding: 0 4px; }

/* 데스크톱: 양옆 열은 각자 안에서 스크롤 → 페이지 높이가 안 바뀌어 체스판이 출렁이지 않음 */
@media (min-width: 1001px) {
  .st-side, .st-right { position: sticky; top: 70px; max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .st-layout .an-board-col { position: sticky; top: 70px; }
}
@media (min-width: 1001px) {
  /* 스크롤되는 열 안에서도 폭 조절 손잡이가 늘 보이게: 맨 앞에 두고 sticky */
  .st-side { padding-right: 8px; }
  .st-right { padding-left: 8px; }
  .st-resizer { position: sticky; top: 0; order: -1; flex: 0 0 auto; height: calc(100vh - 80px); margin-bottom: calc(68px - 100vh); }
  .st-resizer.left { align-self: flex-end; right: auto; margin-right: -8px; }
  .st-resizer.right { align-self: flex-start; left: auto; margin-left: -8px; }
}

/* 채팅 접기 (기본 접힘) */
.chat-closed .st-chat-log, .chat-closed .st-chat-form { display: none !important; }
#btn-chat-toggle { margin-right: 6px; }

/* 여러 라인 고르기 */
.st-chapter { user-select: none; -webkit-user-select: none; }
.st-chapter.picked { background: rgba(58, 180, 242, 0.16); box-shadow: inset 3px 0 0 #3ab4f2; }
.st-ch-bulk { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px 6px; margin-bottom: 4px; border: 1px solid var(--border-purple); border-radius: 8px; font-size: 0.78rem; font-weight: 700; }
.st-ch-bulk > span { margin-right: auto; }
.st-ch-bulk .tool-btn { padding: 3px 8px; font-size: 0.75rem; border-radius: 6px; }
.st-ch-bulk .tool-btn.danger:hover { border-color: #df5353; color: #df5353; }

/* 분류 제목 (라인 번호 없음, 폴더처럼 접기) */
.st-chapter.heading { font-weight: 800; }   /* 폴더: 배경 · 테두리 강조 없이 글자색(노랑)만 */
.st-chapter.heading .st-chapter-name { color: var(--accent-gold); }
.st-chapter.heading.picked { background: rgba(58, 180, 242, 0.16); }
.st-chapter-fold { color: var(--text-muted); font-size: 0.75rem; width: 12px; flex-shrink: 0; }
.st-chapter-drill.none { visibility: hidden; }
.st-chapter-drill.seen { box-shadow: 0 0 0 2px var(--accent-gold); }   /* 코스: 이미 본 라인 */
.st-chapter-drill.none.seen { visibility: visible; background: transparent; }   /* 문제 라인도 본 표시 */
html[data-theme="light"] .st-chapter.heading .st-chapter-name { color: #8a5d00; }

/* 한 페이지 라인 수 고르기 */
.st-chapter-size { padding: 2px 4px; border: 1px solid var(--border-purple); border-radius: 6px; background: var(--btn-bg); color: var(--text-main); font-size: 0.75rem; margin-left: 6px; }

/* 가장 최근에 업데이트된 연구: 첫 줄만 보이게 */
.st-grid-oneline { grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; }
.st-grid-oneline > .st-card { margin-bottom: 0; }

/* 연구 테두리 색: 카드는 은은한 테두리, 트리는 글자색 */
.st-card.c-red { border-color: rgba(239, 83, 80, 0.5); }
.st-card.c-orange { border-color: rgba(255, 152, 0, 0.5); }
.st-card.c-yellow { border-color: rgba(253, 216, 53, 0.5); }
.st-card.c-lime { border-color: rgba(156, 204, 101, 0.55); }
.st-card.c-green { border-color: rgba(67, 160, 71, 0.55); }
.st-card.c-sky { border-color: rgba(79, 195, 247, 0.5); }
.st-card.c-blue { border-color: rgba(66, 133, 244, 0.55); }
.st-card.c-purple { border-color: rgba(171, 71, 188, 0.55); }
.st-card.c-pink { border-color: rgba(240, 98, 146, 0.5); }
.st-stree-title.tc-red { color: #e57373; }
.st-stree-title.tc-orange { color: #ffb74d; }
.st-stree-title.tc-yellow { color: #f2d45c; }
.st-stree-title.tc-lime { color: #aed581; }
.st-stree-title.tc-green { color: #66bb6a; }
.st-stree-title.tc-sky { color: #4fc3f7; }
.st-stree-title.tc-blue { color: #6f9cf5; }
.st-stree-title.tc-purple { color: #ba68c8; }
.st-stree-title.tc-pink { color: #f48fb1; }
html[data-theme="light"] .st-stree-title.tc-red { color: #c62828; }
html[data-theme="light"] .st-stree-title.tc-orange { color: #c66900; }
html[data-theme="light"] .st-stree-title.tc-yellow { color: #9a7b00; }
html[data-theme="light"] .st-stree-title.tc-lime { color: #5f8c1d; }
html[data-theme="light"] .st-stree-title.tc-green { color: #2e7d32; }
html[data-theme="light"] .st-stree-title.tc-sky { color: #0277bd; }
html[data-theme="light"] .st-stree-title.tc-blue { color: #1e56c9; }
html[data-theme="light"] .st-stree-title.tc-purple { color: #7b1fa2; }
html[data-theme="light"] .st-stree-title.tc-pink { color: #c2185b; }
/* 색 고르기 칸 */
.st-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.st-colors input { position: absolute; opacity: 0; pointer-events: none; }
.st-colors label { cursor: pointer; }
.st-color { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; font-size: 0.7rem; color: var(--text-muted); }
.st-color.none { border-color: var(--border-purple); }
.st-colors input:checked + .st-color { box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--accent-gold); }
.st-color.c-red { background: #e57373; } .st-color.c-orange { background: #ffb74d; } .st-color.c-yellow { background: #f2d45c; }
.st-color.c-lime { background: #aed581; } .st-color.c-green { background: #66bb6a; } .st-color.c-sky { background: #4fc3f7; }
.st-color.c-blue { background: #6f9cf5; } .st-color.c-purple { background: #ba68c8; } .st-color.c-pink { background: #f48fb1; }
.st-liked-filter { margin-left: 8px; }
#st-ratio-filter { margin-left: 0; }

/* 마우스를 올리면 뜨는 작은 체스판 (엔진 라인 · 사이드라인) */
.st-preview { position: fixed; z-index: 3000; width: 184px; height: 184px; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border-radius: 4px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); pointer-events: none; }
.st-preview[hidden] { display: none; }
.st-preview .sq { position: relative; }
.st-preview .sq.last::before { content: ""; position: absolute; inset: 0; background: rgba(155, 199, 0, 0.41); }
.st-preview .piece { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* 판 위 수 기호: 아이콘 안 글자를 더 크고 굵게 (!! · ?? 도 꽉 차게) */
.st-main .sq .sq-nag { font-size: clamp(0.9rem, 2.7vw, 1.4rem); font-weight: 900 !important; letter-spacing: -0.06em; line-height: 1; font-family: 'Arial Black', 'Segoe UI', Arial, sans-serif; -webkit-text-stroke: 0.4px currentColor; }

/* ---------- 구분선 / 문제 챕터 ---------- */
.st-chapter.divider { background: transparent; border-color: transparent; cursor: default; }
.st-chapter.divider .st-chapter-name { color: var(--text-muted); text-align: left; letter-spacing: -0.02em; font-weight: 700; }
.st-chapter.divider.picked { background: rgba(58, 180, 242, 0.16); }
/* 문제 풀기: 기보 · 평가치 · 엔진 · DB 숨김 */
body.pz-solving #st-explorer, body.pz-solving #an-gauge, body.pz-solving .an-nav #btn-first, body.pz-solving .an-nav #btn-prev, body.pz-solving .an-nav #btn-next, body.pz-solving .an-nav #btn-last { display: none !important; }
body.pz-editing .st-comments, body.pz-editing #btn-show-before { display: none !important; }
#pz-msg { min-height: 56px; }
.pz-legend { font-size: 0.75rem; color: var(--text-muted); margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 10px; }
.pz-legend b { font-size: 0.9rem; }
.pz-edit-body { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pz-edit-head { font-weight: 800; font-size: 0.85rem; padding: 4px 8px; border-radius: 6px; border-left: 4px solid; }
.pz-edit-head.opp { border-color: #e5484d; background: rgba(229, 72, 77, 0.08); }
.pz-edit-head.mine { border-color: #30a46c; background: rgba(48, 164, 108, 0.08); }
.pz-marks { align-items: center; gap: 10px; }
/* 문제 기보 색: 문제 포지션(상대 수) 빨강, 정답 초록, 복수정답 파랑, 오답 회색 취소선 */
.pz-q, .st-tree .st-mv.pz-q { color: #e5484d !important; }
.pz-a, .st-tree .st-mv.pz-a { color: #30a46c !important; font-weight: 800; }
.pz-alt, .st-tree .st-mv.pz-alt { color: #3e9cf0 !important; font-weight: 800; }
.pz-bad, .st-tree .st-mv.pz-bad { color: #8b8d98 !important; }
.st-tree .st-mv.pz-bad { text-decoration: line-through; }
.st-chapter-pz { flex: 0 0 auto; font-size: 0.8rem; line-height: 1; }
/* 문제 편집: 기보는 짧으니 평소의 절반 높이, 오른쪽 열 맨 아래가 잘리지 않게 여백 */
body.pz-editing .st-tree { height: clamp(110px, calc((100vh - 560px) / 2), 230px); }
@media (min-width: 1001px) { .st-right { padding-bottom: 24px; } }
/* 판 위 수 평가 기호: 너무 굵던 것 완화 (크기는 조금 더 크게) */
.st-main .sq .sq-nag { font-size: clamp(1rem, 3vw, 1.55rem); font-weight: 700 !important; font-family: 'Segoe UI', Arial, sans-serif; -webkit-text-stroke: 0; letter-spacing: -0.04em; }
/* 연구 분류 배지 (오프닝 · 전술 …): 테마 강조색(라이트에선 보라)을 쓰지 않고 따로 금색 계열 */
.st-badge.st-catbadge { color: #fecb4c; border-color: rgba(254, 203, 76, 0.4); background: rgba(254, 203, 76, 0.08); }
html[data-theme="light"] .st-badge.st-catbadge { color: #8a5d00; border-color: rgba(176, 120, 0, 0.4); background: rgba(229, 176, 53, 0.14); }
/* 문제: 복수정답(되돌리기) 안내는 노란색 */
.st-drill-msg.warn { border-color: #e5b035; color: #fecb4c; }
html[data-theme="light"] .st-drill-msg.warn { color: #8a5d00; background: rgba(229, 176, 53, 0.1); }
/* 라이트 테마: 점검 메시지 글자를 진하게 (밝은 초록 · 빨강 · 금색은 흰 배경에서 잘 안 보임) */
html[data-theme="light"] .st-drill-msg.good { color: #1b7a2c; background: rgba(34, 172, 56, 0.08); }
html[data-theme="light"] .st-drill-msg.bad { color: #b3261e; background: rgba(223, 83, 83, 0.08); }
html[data-theme="light"] .st-drill-msg.done { color: #8a5800; background: rgba(229, 176, 53, 0.1); }
html[data-theme="light"] .st-drill-msg .cmt { color: #2b2640; }
/* 분류별 배지 색: 오프닝 금색(기본) · 전술 빨강 · 전략 파랑 · 엔딩 초록 · 기타 회색 */
.st-badge.st-catbadge.cat-tactics { color: #ff8a8d; border-color: rgba(255, 138, 141, 0.45); background: rgba(229, 72, 77, 0.1); }
.st-badge.st-catbadge.cat-strategy { color: #8ec5ff; border-color: rgba(142, 197, 255, 0.45); background: rgba(62, 156, 240, 0.1); }
.st-badge.st-catbadge.cat-endgame { color: #7be08b; border-color: rgba(123, 224, 139, 0.45); background: rgba(48, 164, 108, 0.1); }
.st-badge.st-catbadge.cat-misc { color: #b9bccb; border-color: rgba(185, 188, 203, 0.4); background: rgba(185, 188, 203, 0.08); }
html[data-theme="light"] .st-badge.st-catbadge.cat-tactics { color: #c62a2f; border-color: rgba(198, 42, 47, 0.4); background: rgba(229, 72, 77, 0.1); }
html[data-theme="light"] .st-badge.st-catbadge.cat-strategy { color: #1f6fbf; border-color: rgba(31, 111, 191, 0.4); background: rgba(62, 156, 240, 0.1); }
html[data-theme="light"] .st-badge.st-catbadge.cat-endgame { color: #1d7d4f; border-color: rgba(29, 125, 79, 0.4); background: rgba(48, 164, 108, 0.1); }
html[data-theme="light"] .st-badge.st-catbadge.cat-misc { color: #5f6273; border-color: rgba(95, 98, 115, 0.35); background: rgba(95, 98, 115, 0.08); }
/* 라이트 모드: 오프닝 DB 막대의 백(흰색) 칸이 흰 카드에 묻히지 않게 테두리 */
html[data-theme="light"] .st-db-bar { border: 1px solid #b4afc4; }
html[data-theme="light"] .st-db-bar .w { background: #fbfaff; color: #222; }
/* 갈래 고르기 상자: 기보 오른쪽 아래에 작게 겹쳐 띄움 */
.st-tree-wrap { position: relative; }
.st-branch-dock { position: sticky; bottom: 0; height: 0; z-index: 6; }   /* 갈래 고르기 상자 자리: 보이는 화면 아래쪽에 붙음 */
.st-branches[hidden] { display: none !important; }
.st-branches { position: absolute; right: 10px; bottom: 10px; z-index: 6; margin: 0; width: max-content; min-width: 150px; max-width: 70%; background: var(--card-bg); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
html[data-theme="light"] .st-branches { box-shadow: 0 6px 18px rgba(40, 30, 70, 0.18); }
/* 페이지 스크롤바가 생겼다 없어졌다 하며 체스판이 좌우로 흔들리지 않게 늘 자리 확보 */
html { overflow-y: scroll; scrollbar-gutter: stable; }
/* 오프닝 DB 막대: 퍼센트 반올림으로 오른쪽 끝에 생기던 틈을 마지막(흑) 칸이 채움 */
.st-db-bar span:last-child { flex: 1 0 auto; }
.st-db-bar { background: #26232f; }
/* 읽기 전용 안내: 한 줄로 짧게, 내용 길이만큼만 */
.st-readonly { width: fit-content; max-width: 100%; padding: 5px 12px; font-size: 0.78rem; margin: -6px 0 10px; }
/* 체스판 아래 줄: REC 토글(왼쪽) + 차례(가운데) */
.st-status-row { position: relative; width: 100%; max-width: var(--board-max); margin: 0 auto; }
.st-status-row .an-status { max-width: none; padding: 0 70px; box-sizing: border-box; }
.st-rec { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-purple); background: transparent; color: var(--text-muted); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; cursor: pointer; font-family: inherit; }
.st-rec .dot { width: 8px; height: 8px; border-radius: 50%; background: #8b8d98; }
.st-rec.on { color: #e5484d; border-color: rgba(229, 72, 77, 0.55); background: rgba(229, 72, 77, 0.08); }
.st-rec.on .dot { background: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.2); }
.st-rec[hidden] { display: none; }
.an-board-row.with-gauge ~ .st-status-row { padding-left: 20px; max-width: calc(var(--board-max) + 20px); box-sizing: border-box; }
.an-board-row.with-gauge ~ .st-status-row .st-rec { left: 20px; }
/* 양옆 열 안쪽 스크롤바는 숨김 (휠 · 터치 스크롤은 그대로) */
.st-side, .st-right { scrollbar-width: none; }
.st-side::-webkit-scrollbar, .st-right::-webkit-scrollbar { display: none; }
/* 데스크톱: 체스판 · 양옆 열 높이를 화면(머리글 + 제목 줄 + 체스판 아래 버튼 + 바닥글)에 맞춰 페이지 스크롤이 생기지 않게 */
@media (min-width: 1001px) {
  .st-layout { --board-max: clamp(380px, calc(100vh - 268px), 760px); }
  .st-side, .st-right { max-height: calc(100vh - 197px); box-sizing: border-box; }
  .st-resizer { height: calc(100vh - 197px); margin-bottom: calc(185px - 100vh); }
}
/* 화면 좌우 여백을 줄여 넓게 씀 (가운데 체스판은 남는 폭에 맞춰 줄어듦) */
.st-main { max-width: 100%; padding-left: 10px; padding-right: 10px; }
/* 왼쪽 열 통째로 숨김: 체스판 · 오른쪽 열이 그 자리를 씀 */
.st-layout.left-hidden { --left-w: 0px !important; }
.st-layout.left-hidden .st-side { display: none !important; }

.st-main .an-nav #btn-left-hide { flex: 0 0 auto; padding: 0 10px; }
.st-main .an-nav #btn-left-hide.on { color: var(--accent-gold); border-color: var(--accent-gold); }
/* 데스크톱: 가운데 열은 체스판 크기만큼만 (좌우 빈 여백 없이), 남는 폭은 오른쪽(엔진 · 기보) 열이 씀
   오른쪽 열을 넓히면(손잡이) 가운데 체스판이 줄어듦 */
@media (min-width: 1001px) {
  .st-layout { grid-template-columns: var(--left-ww, var(--left-w)) minmax(0, calc(var(--board-max) + 20px)) minmax(var(--right-ww, var(--right-w)), 1fr); }
  .st-layout.left-hidden { grid-template-columns: 0 minmax(0, calc(var(--board-max) + 20px)) minmax(var(--right-ww, var(--right-w)), 1fr); column-gap: 0; }
  .st-layout.left-hidden .an-board-col { margin-right: 16px; }
}
/* 오프닝 DB: 왼쪽 열이 좁아져도 내용이 밖으로 잘리지 않게 (칸 폭에 맞춰 줄임) */
.st-explorer .an-card { container-type: inline-size; min-width: 0; }
.st-explorer .st-card-head { flex-wrap: wrap; row-gap: 6px; }
.st-explorer .st-card-head .an-card-title, .st-db-tabs .st-cat { white-space: nowrap; }
.st-db-row { grid-template-columns: minmax(40px, 62px) minmax(30px, 38px) minmax(34px, 64px) minmax(0, 1fr) minmax(0, 40px); }
.st-db-row .san, .st-db-row .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-db-games a span { overflow: hidden; text-overflow: ellipsis; }
/* 긴장도 분석 창 (다이아몬드) */
#st-sharpcard { container-type: inline-size; min-width: 0; }
#st-sharpcard[hidden] { display: none !important; }
/* 엔드게임 전환 분석: 긴장도 분석과 같은 줄 모양 + 수 옆 표시 (강제 · 피하면 손해 · 상대 제의 필요 · 선택) */
#st-qxcard { container-type: inline-size; min-width: 0; }
#st-qxcard[hidden] { display: none !important; }
.qx-tag { margin-left: 4px; font-style: normal; font-size: 0.64rem; font-weight: 700; white-space: nowrap; color: var(--text-muted); }
.qx-tag.forced { color: #e07a6a; }
.qx-tag.avoid { color: #e0a24a; }
.qx-tag.offer { color: #5ea9cf; }
.qx-row .san { overflow: visible; white-space: normal; }
.sharp-row.qx-row { grid-template-columns: minmax(44px, 1.4fr) 40px minmax(0, 1.2fr) 26px; }
.sharp-row.sharp-head.qx-row > span:nth-child(3) { grid-column: auto; }
.sharp-row.sharp-head.qx-row > span:nth-child(4) { text-align: right; }
.qx-bars { display: grid; grid-template-columns: auto minmax(0, 1fr) 20px; align-items: center; column-gap: 5px; row-gap: 3px; }
.qx-side { font-size: 0.62rem; font-weight: 700; color: var(--text-muted); }
.qx-n { font-size: 0.66rem; font-weight: 700; text-align: right; color: var(--text-muted); }
.db-closed .sharp-body { display: none !important; }
.sharp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 4px; }
.sharp-pos { font-size: 0.8rem; color: var(--text-muted); min-width: 0; }
.sharp-list { min-height: 60px; }
.sharp-row { display: grid; grid-template-columns: minmax(44px, 72px) 44px minmax(0, 1fr) 26px; gap: 10px; align-items: center; padding: 4px 6px; border-radius: 6px; font-size: 0.84rem; cursor: pointer; }
.sharp-row:hover { background: rgba(255, 255, 255, 0.06); }
.sharp-row.sharp-head { cursor: default; font-size: 0.7rem; color: var(--text-muted); font-weight: 700; padding-top: 0; padding-bottom: 2px; }
.sharp-row.sharp-head:hover { background: none; }
.sharp-row.sharp-here { cursor: default; border-bottom: 1px solid var(--border-purple); border-radius: 0; margin-bottom: 2px; }
.sharp-row.sharp-here:hover { background: none; }
.sharp-row.sharp-here .san { grid-column: 1 / 3; }
.sharp-row.sharp-head > span:nth-child(3) { grid-column: 3 / 5; }
.sharp-row .san { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sharp-row .pct { color: var(--text-muted); font-size: 0.76rem; text-align: right; }
.sharp-bad { margin-left: 4px; font-style: normal; font-size: 0.64rem; font-weight: 700; color: #e07a6a; }
.sharp-bar { height: 6px; border-radius: 3px; background: rgba(127, 127, 127, 0.2); overflow: hidden; }
.sharp-bar i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width 0.3s; }   /* 색은 점수에 따라 JS 가 (파랑 → 초록 → 노랑 → 빨강) */
.sharp-num { font-size: 0.8rem; font-weight: 800; text-align: right; color: var(--text-muted); }
.sharp-body .tool-hint { margin-top: 8px; font-size: 0.7rem; line-height: 1.5; }
html[data-theme="light"] .sharp-row:hover { background: rgba(75, 54, 123, 0.08); }
/* Maia-3 창: 백 · 흑 레이팅 + 기대 승률 막대 + 사람이 둘 수 확률 */
.st-q-btn { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--border-purple); background: transparent; color: var(--text-muted); font-size: 0.7rem; font-weight: 800; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.st-q-btn:hover { color: var(--accent-gold); border-color: var(--accent-gold); }
.st-q-pop { position: fixed; z-index: 1000; width: min(340px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--border-purple); border-radius: 10px; font-size: 0.8rem; line-height: 1.6; color: var(--text-muted); }
.st-q-pop[hidden] { display: none; }
.mx-elos { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.mx-elo { display: flex; align-items: center; gap: 6px; flex: 1 1 140px; padding: 4px 6px; border: 1px solid var(--border-purple); border-radius: 8px; }
.mx-elo b { flex: 1; text-align: center; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.mx-side { font-size: 0.74rem; font-weight: 800; padding: 2px 7px; border-radius: 5px; }
.mx-side-w { background: #ece8df; color: #222; }
.mx-side-b { background: #2a2a2e; color: #eee; border: 1px solid rgba(255, 255, 255, 0.15); }
.mx-step { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border-purple); background: transparent; color: inherit; font-weight: 800; cursor: pointer; }
.mx-step:hover { background: rgba(255, 255, 255, 0.07); }
.mx-bar { display: flex; height: 20px; border-radius: 6px; overflow: hidden; font-size: 0.7rem; font-weight: 800; }
.mx-bar span { display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; transition: width 0.3s; }
.mx-w { background: #ece8df; color: #222; }
.mx-d { background: #8a8794; color: #fff; }
.mx-b { background: #2a2a2e; color: #eee; }
.mx-lab { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.72rem; color: var(--text-muted); }
.sharp-row.mx-row { grid-template-columns: minmax(44px, 72px) minmax(0, 1fr) 44px; }
.sharp-row.sharp-head.mx-row > span:nth-child(2) { grid-column: 2 / 4; text-align: right; }
.mx-row .sharp-bar i { background: var(--accent, #f5c542); }
@container (max-width: 320px) {
  .st-db-row { grid-template-columns: 42px 32px 38px minmax(0, 1fr); gap: 5px; }
  .st-db-row .avg { display: none; }
  .st-db-filters .lbl { min-width: 0; }
  .st-db-filters .st-db-year { width: 58px; }
}
/* 오른쪽 열 숨김 (◨): 왼쪽 열이 남는 폭을 씀. 둘 다 숨기면 체스판 가운데 */
.st-layout.right-hidden .st-right { display: none !important; }
@media (min-width: 1001px) {
  .st-layout.right-hidden { grid-template-columns: minmax(var(--left-ww, var(--left-w)), 1fr) minmax(0, calc(var(--board-max) + 20px)) 0; }
  .st-layout.left-hidden.right-hidden { grid-template-columns: 1fr minmax(0, calc(var(--board-max) + 20px)) 1fr; }
  .st-layout.left-hidden.right-hidden .an-board-col { margin-right: 0; }
}
.st-main .an-nav #btn-right-hide { flex: 0 0 auto; padding: 0 10px; }
.st-main .an-nav #btn-right-hide.on { color: var(--accent-gold); border-color: var(--accent-gold); }
/* 내보내기: 체스판 아래 줄 오른쪽 구석의 공유 아이콘 (REC 반대편) */
.st-share { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 999px; border: 1px solid var(--border-purple); background: transparent; color: var(--text-muted); cursor: pointer; }
.st-share:hover { color: var(--accent-gold); border-color: var(--accent-gold); }
/* 기보 카드 제목 줄: 오프닝 이름을 같은 줄에 넣고 남는 높이 없앰 */
.st-tree-card .st-card-head { margin-bottom: 6px; }
.st-tree-card .st-card-head .st-opening { flex: 1 1 auto; min-width: 0; margin: 0 4px; min-height: 0; }
.st-tree-card .st-card-head .st-tree-tools { flex: 0 0 auto; }
/* ---------- 오프닝 DB 창 옮기기 (손잡이 ⠿ 끌기) ---------- */
#st-dbcard { container-type: inline-size; min-width: 0; }
#st-dbcard .st-card-head { flex-wrap: wrap; row-gap: 6px; }
.st-db-grip { cursor: grab; color: var(--text-muted); font-size: 0.95rem; padding: 0 2px; user-select: none; touch-action: none; }
.st-db-grip:hover { color: var(--accent-gold); }
body.db-dragging, body.db-dragging * { cursor: grabbing !important; user-select: none; }
.st-db-ghost { position: fixed; z-index: 4000; pointer-events: none; transform: translate(-50%, -50%); padding: 6px 12px; border-radius: 8px; background: var(--accent-gold); color: var(--on-accent); font-size: 0.8rem; font-weight: 800; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
body.db-dragging .st-side, body.db-dragging .st-right { outline: 2px dashed transparent; outline-offset: -2px; border-radius: 12px; }
.st-side.db-drop, .st-right.db-drop { outline-color: var(--accent-gold) !important; background: rgba(254, 203, 76, 0.06); }
/* 오른쪽에 둔 DB: 기보 칸을 줄이고 DB 목록도 높이 제한 (한 화면에 함께 보이게) */
.st-layout.db-right .st-tree { height: clamp(130px, calc(100vh - 740px), 280px); }
.st-layout.db-right #st-dbcard .st-db-moves { max-height: 170px; overflow-y: auto; min-height: 0; }
.st-layout.db-right #st-dbcard .st-db-games { max-height: 62px; overflow-y: auto; }
/* 오른쪽 손잡이로 폭을 정했으면: 오른쪽은 그 폭 그대로(좁게도 가능), 남는 폭은 왼쪽 열이 씀 */
@media (min-width: 1001px) {
  .st-layout.right-fixed { grid-template-columns: minmax(var(--left-ww, var(--left-w)), 1fr) minmax(0, calc(var(--board-max) + 20px)) var(--right-ww, var(--right-w)); }
  .st-layout.right-fixed.left-hidden { grid-template-columns: 0 minmax(0, calc(var(--board-max) + 20px)) minmax(var(--right-ww, var(--right-w)), 1fr); }
  .st-layout.right-fixed.right-hidden { grid-template-columns: minmax(var(--left-ww, var(--left-w)), 1fr) minmax(0, calc(var(--board-max) + 20px)) 0; }
  .st-layout.right-fixed.left-hidden.right-hidden { grid-template-columns: 1fr minmax(0, calc(var(--board-max) + 20px)) 1fr; }
}
/* 체스판 좌우 여백 최소 (5px 미만): 열 사이 3px, 폭 조절 손잡이는 각 열 안쪽 가장자리에 겹쳐 둠 */
@media (min-width: 1001px) {
  .st-layout { column-gap: 3px; }
  .st-side { padding-right: 0; }
  .st-right { padding-left: 0; }
  .st-resizer { width: 6px; }
  .st-resizer.left { margin-right: 0; }
  .st-resizer.right { margin-left: 0; }
  .st-resizer::after { left: 2px; }
  .st-layout.left-hidden .an-board-col { margin-right: 3px; }
}
/* ---------- 옮길 수 있는 창 (챕터 · 오프닝 DB · 엔진 · 기보) ---------- */
.st-dock { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.st-dock:empty { display: none; }
.st-dockrow { display: flex; gap: 8px; min-width: 0; align-items: flex-start; }
.st-dockrow > [data-panel] { flex: 1 1 0; min-width: 0; }
/* 엔진과 기보를 각각 따로 된 창으로 (예전엔 한 덩어리) */
.st-main #st-panel { gap: 8px; background: transparent; border-radius: 0; overflow: visible; }
.st-main #st-panel .st-dockrow > .an-card, .st-main #st-panel > #pz-editor { background: var(--card-bg); border-radius: 12px; border-top: none; }
.st-grip { cursor: grab; color: var(--text-muted); font-size: 0.95rem; padding: 0 2px; user-select: none; touch-action: none; flex: 0 0 auto; }
.st-grip:hover { color: var(--accent-gold); }
.an-engine-head .st-grip { align-self: center; }
.st-drop-ind { position: fixed; z-index: 3999; pointer-events: none; background: var(--accent-gold); border-radius: 2px; box-shadow: 0 0 0 2px rgba(254, 203, 76, 0.25); }
.st-drop-ind[hidden] { display: none; }
.st-panel-moving { opacity: 0.45; }
/* 점검 · 문제 풀기 중에는 어느 열에 있든 기보 · 엔진 · DB 숨김 (챕터는 그대로) */
.st-layout.drilling #st-engcard, .st-layout.drilling #st-treecard, .st-layout.drilling #st-dbcard,
body.pz-solving #st-engcard, body.pz-solving #st-treecard, body.pz-solving #st-dbcard,
.st-layout.drilling #st-sharpcard, body.pz-solving #st-sharpcard,
.st-layout.drilling #st-qxcard, body.pz-solving #st-qxcard, body.lec-viewing #st-qxcard,
.st-layout.drilling #st-kdbcard, body.pz-solving #st-kdbcard, body.lec-viewing #st-kdbcard { display: none !important; }
#st-kdbcard { container-type: inline-size; min-width: 0; }
#st-kdbcard .st-db-games a { cursor: default; }
/* 챕터 창이 어느 열에 있어도 같은 모양 */
#st-chcard { padding: 10px; border-radius: 12px; }
#st-chcard .st-chapters { max-height: calc(100vh - 200px); }
#st-chcard .st-card-head .an-card-title { flex: 1; }
#st-chcard .st-chapter { padding: 4px 6px; font-size: 0.82rem; }
#st-chcard .st-chapter-name { -webkit-line-clamp: 3; }
.side-closed #st-chcard { padding: 8px; }
.side-closed #st-chcard .st-chapters, .side-closed #st-chcard .an-card-title { display: none !important; }
/* 라이트 모드: 공개 범위 배지(공개 · 일부공개 · 비공개) 글자가 연한 하늘색이라 안 보이던 것 → 진한 파랑 */
html[data-theme="light"] .st-badge.vis { color: #1f5fa8; border-color: rgba(31, 95, 168, 0.45); background: rgba(62, 156, 240, 0.1); }
/* 체스판 아래 버튼 줄을 낮게 (체스판 높이 확보): 버튼 높이 약 42 → 28px, 줄 사이 간격 10 → 6px */
.st-main .an-board-col { gap: 6px; }
.st-main .an-nav button { padding: 4px 0; font-size: 0.88rem; border-radius: 8px; }
.st-main .an-nav .st-gear, .st-main .an-nav #btn-left-hide, .st-main .an-nav #btn-right-hide { padding-top: 4px; padding-bottom: 4px; }
/* 주석 창 · 채팅 창도 따로 옮길 수 있는 창 */
#st-annotcard .st-annot { margin-top: 0; padding-top: 0; border-top: 0; }
#st-annotcard .st-annot-head .st-annot-title { flex: 1; }
.st-dockrow > .st-chat { margin-top: 0; }
.st-explorer:not(:has(.an-card)) { display: none; }
.st-layout.drilling #st-annotcard, body.pz-solving #st-annotcard { display: none !important; }
/* 제목 줄 옆 REC · 공유 버튼 (예전엔 체스판 아래 줄) */
.st-title-row .st-rec, .st-title-row .st-share { position: static; transform: none; flex-shrink: 0; }
/* 제목 부분 공간 줄이기: 위 여백 · 제목 크기 · 아래 간격 */
.st-main { padding-top: 6px; gap: 8px; }
.st-top { margin-bottom: 6px; gap: 10px; }
.st-title { font-size: 1.12rem; }
.st-meta { margin-top: 2px; }
.st-crumb:empty, .st-crumb[hidden] { display: none; }
/* 체스판 아래 창 자리 (손잡이로 옮겨 놓음): 있으면 그 높이만큼 체스판을 줄여 한 화면에 */
#dock-bottom { width: 100%; max-height: 240px; overflow-y: auto; scrollbar-width: none; }
#dock-bottom::-webkit-scrollbar { display: none; }
#dock-bottom .an-card { background: var(--card-bg); border-radius: 12px; padding: 10px; }
/* 제목 줄 · 차례 글씨를 줄인 만큼 체스판 · 양옆 열을 키움 (917px 화면에서 페이지 스크롤 없이 딱 맞게 측정) */
@media (min-width: 1001px) {
  .st-layout { --board-max: clamp(380px, calc(100vh - 215px), 800px); }
  .st-layout.has-bottom { --board-max: clamp(300px, calc(100vh - 461px), 800px); }
  /* 강의 설명 '보드 아래': 상자를 3줄 높이로 고정(넘치면 상자 안 스크롤)하고 그만큼 체스판을 미리 줄임 */
  body.lec-viewing .st-layout.note-below { --board-max: clamp(300px, calc(100vh - 315px), 800px); }
  body.lec-viewing .st-layout.note-below.has-bottom { --board-max: clamp(300px, calc(100vh - 561px), 800px); }
  .st-layout.note-below .an-nav + .lec-note { height: calc(4.8em + 18px); min-height: 0 !important; box-sizing: border-box; overflow-y: auto; flex-shrink: 0; }
  .st-layout.note-below .an-nav + .lec-note > * { flex-shrink: 0; }
  .st-side, .st-right { max-height: calc(100vh - 165px); }
  .st-resizer { height: calc(100vh - 165px); margin-bottom: calc(153px - 100vh); }
}
/* 채팅 전송 버튼: 입력칸이 넓게, 버튼은 글자 크기만큼 */
.st-chat-form .tool-input { flex: 1 1 auto; }
.st-chat-form .an-btn { flex: 0 0 auto; width: auto; padding: 6px 14px; font-size: 0.8rem; }
/* 주석 창: 주석 칸을 위로, 기호(!, ?, ±…) · 색 버튼은 그 아래로 */
#st-annot .st-comments { order: 1; }
#st-annot #btn-show-before { order: 2; }
#st-annot .st-sym-line { order: 3; }
/* 챕터 페이지 줄(‹ 1 2 3 › · n개씩): 목록을 스크롤하지 않아도 늘 보이게 아래에 붙여 둠 */
.st-chapter-pager { position: sticky; bottom: 0; z-index: 3; background: var(--card-bg); padding-top: 6px; padding-bottom: 2px; box-shadow: 0 -6px 8px -6px rgba(0, 0, 0, 0.35); }
/* 챕터 목록 높이를 열 안에 들어오게 줄여 아래 페이지 줄이 화면 밖으로 밀리지 않게 */
#st-chcard .st-chapters, .st-side .st-chapters { max-height: calc(100vh - 265px); }
/* 읽기 전용 안내: 배지 줄 오른쪽에 같은 높이로 */
.st-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.st-meta-row .st-meta { margin-top: 0; }
.st-meta-row .st-readonly { margin: 0; padding: 2px 10px; font-size: 0.74rem; }
/* 창 높이 조절 손잡이 (창 아래 가장자리) */
.st-vresize { height: 9px; margin: 2px -10px -10px; cursor: row-resize; position: relative; flex: 0 0 auto; touch-action: none; }
.st-vresize::after { content: ""; position: absolute; left: 50%; top: 3px; width: 36px; height: 3px; margin-left: -18px; border-radius: 3px; background: var(--border-purple); opacity: 0.7; }
.st-vresize:hover::after { background: var(--accent-gold); opacity: 1; }
body.st-vresizing, body.st-vresizing * { cursor: row-resize !important; user-select: none; }
.chat-closed .st-vresize { display: none; }
/* 연구 목록(메인) 화면은 좌우 여백을 넉넉히 (편집 화면만 꽉 차게) */
#st-list-view { width: 100%; max-width: 1480px; margin: 12px auto 0; padding: 0 28px; box-sizing: border-box; }
@media (max-width: 760px) { #st-list-view { padding: 0 6px; margin-top: 4px; } }
/* 체스판 아래 버튼 크기 통일: 이동 · 뒤집기 5개는 같은 너비로 나눠 갖고, 작은 버튼(◧ ? ⚙ ◨)은 모두 같은 정사각형에 가깝게 */
.st-main .an-nav button { flex: 1 1 0; min-width: 0; }
.st-main .an-nav #btn-left-hide, .st-main .an-nav #btn-right-hide, .st-main .an-nav #btn-help, .st-main .an-nav .st-gear {
  flex: 0 0 38px; padding: 4px 0; font-size: 0.85rem; opacity: 1; text-align: center;
}
/* 모바일(세로로 쌓는 화면)에서는 왼쪽 · 오른쪽 칸 닫기가 쓸모없어 숨김 */
@media (max-width: 1000px) { .st-main .an-nav #btn-left-hide, .st-main .an-nav #btn-right-hide { display: none; } }
.st-list-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* ---------- 책 기호 📖 (이론 수): 갈색 ---------- */
.st-mv.nag-book, .nag-book { color: #b07a45; }
.sq-nag.nag-book { background: #8b5a2b; color: #fff; font-size: 0.8em; }
.sq.nagsq.nag-book::before { background: rgba(139, 90, 43, 0.45); }
html[data-theme="light"] .st-mv.nag-book { color: #7a4b1c; }

/* ---------- 기호 연출 (설정 → 애니메이션): transform · opacity 만 써서 휴대폰에서도 가볍게 ---------- */
.fx-ring { position: absolute; width: 12.5%; height: 12.5%; z-index: 8; pointer-events: none; border-radius: 50%; }
.fx-ring::before, .fx-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
/* !! : 청록 고리 두 겹이 크게 퍼짐 + 판 테두리 빛 */
.fx-ring.brilliant::before { border: 4px solid #26c2a3; animation: fxRing 0.9s ease-out forwards; }
.fx-ring.brilliant::after { border: 3px solid #26c2a3; animation: fxRing 0.9s 0.15s ease-out forwards; }
.fx-brilliant .an-board { animation: fxGlowBrilliant 1s ease-out; }
/* ! : 파란 고리 하나 + 은은한 빛 */
.fx-ring.good::before { border: 3px solid #3ab4f2; animation: fxRingSmall 0.7s ease-out forwards; }
.fx-good .an-board { animation: fxGlowGood 0.8s ease-out; }
@keyframes fxRing { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes fxRingSmall { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes fxGlowBrilliant { 0% { box-shadow: 0 0 0 0 rgba(38, 194, 163, 0); } 25% { box-shadow: 0 0 28px 6px rgba(38, 194, 163, 0.75); } 100% { box-shadow: 0 0 0 0 rgba(38, 194, 163, 0); } }
@keyframes fxGlowGood { 0% { box-shadow: 0 0 0 0 rgba(58, 180, 242, 0); } 30% { box-shadow: 0 0 18px 3px rgba(58, 180, 242, 0.55); } 100% { box-shadow: 0 0 0 0 rgba(58, 180, 242, 0); } }
/* 움직임 줄이기를 켠 기기에서는 연출 없음 */
/* 책 기호: 이모지 대신 단색 아이콘 (글자색으로 칠함). 판 위 동그라미에서는 흰색 */
.nag-ic { display: inline-block; width: 0.95em; height: 0.95em; vertical-align: -0.14em; background-color: currentColor; -webkit-mask: url(/images/book.svg) center / contain no-repeat; mask: url(/images/book.svg) center / contain no-repeat; }
.sq-nag.nag-book { font-size: inherit; display: flex; align-items: center; justify-content: center; }
.sq-nag.nag-book .nag-ic { width: 62%; height: 62%; vertical-align: 0; color: #fff; }
.st-sym.nag-book .nag-ic { width: 1.05em; height: 1.05em; }
/* ---------- 체크메이트: 진 킹 칸에 # 배지 (늘 표시) + 연출 (체크메이트가 되는 수를 둘 때) ---------- */
.sq-nag.nag-mate { background: #b3261e; color: #fff; font-weight: 900; }
.sq.matesq::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(220, 38, 38, 0.55); }
.fx-ring.mate::before { border: 4px solid #e5484d; animation: fxRing 1.2s ease-out forwards; }
.fx-ring.mate::after { border: 3px solid #7a0f0f; animation: fxRing 1.2s 0.2s ease-out forwards; }
.fx-mate .an-board { animation: fxMateFlash 1.4s ease-out; }
.fx-mate .sq-nag.nag-mate { animation: fxPop 0.5s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes fxMateFlash { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } 20% { box-shadow: 0 0 34px 8px rgba(229, 72, 77, 0.8), inset 0 0 60px rgba(120, 0, 0, 0.45); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }
@keyframes fxPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
/* 창 제목 줄: 어느 열에 있든 손잡이 · 접기 버튼 · 제목은 왼쪽에 붙고, 제목이 남는 폭을 차지 (오른쪽 버튼은 끝으로) */
[data-panel] > .st-card-head { justify-content: flex-start; }
[data-panel] > .st-card-head > .an-card-title { flex: 1 1 auto; min-width: 0; }
[data-panel] > .st-card-head > .st-grip, [data-panel] > .st-card-head > .st-side-toggle { flex: 0 0 auto; }
/* 보드 테두리 반짝임 없앰 (!! · ! · 체크메이트 모두 고리만), # 배지는 튀어나오는 움직임 없이 제자리에 (위치가 바뀌어 보이던 것) */
.fx-brilliant .an-board, .fx-good .an-board, .fx-mate .an-board, .fx-mate .sq-nag.nag-mate { animation: none !important; }
/* ---------- 연구 목록 트리: 폴더 · 끌어 옮기기 ---------- */
.st-stree-grip { margin-right: 2px; font-size: 0.9rem; }
.st-stree-row.folder .st-stree-title.folder { cursor: pointer; font-weight: 800; color: var(--accent-gold); user-select: none; }
.st-stree-row.drop, .st-stree-group-title.drop { outline: 2px dashed var(--accent-gold); outline-offset: 1px; border-radius: 6px; background: rgba(254, 203, 76, 0.08); }
.st-stree-add.danger:hover { color: #e5484d; border-color: #e5484d; }
html[data-theme="light"] .st-stree-row.folder .st-stree-title.folder { color: #6b4e16; }
/* 연구 목록: 옮기기 손잡이는 '정렬'을 켰을 때만 */
.st-stree-grip { display: none; }
#st-grid-mine.arranging .st-stree-grip { display: inline-flex; }
/* 내 연구 제목 줄: 새 연구 · 새 폴더는 제목 바로 옆, 아래 줄에 정렬 · 전체 백업 */
.st-section-head #btn-new-study, .st-section-head #btn-new-folder { margin-left: 4px; }
.st-section-head #btn-new-study { margin-left: 10px; }
.st-mine-tools { display: flex; gap: 6px; margin: -4px 0 10px; }
.st-mine-tools[hidden] { display: none; }
/* 라이브러리 (다이아몬드 이상): 내 연구 도구 줄 오른쪽 끝 */
.st-libs { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.st-libs[hidden], #move-lib[hidden] { display: none !important; }
.st-libs-lbl { font-size: 0.78rem; font-weight: 800; color: var(--text-muted); margin-right: 2px; }
.st-lib-tab { min-width: 34px; justify-content: center; }
.st-lib-tab.drop { outline: 2px dashed var(--accent-gold); outline-offset: 2px; }
#move-lib { margin-bottom: 6px; }
.st-lib-act { margin-left: 2px; }
/* 편집 [이동]: 다른 라이브러리 고르기 메뉴 */
.st-libmenu { position: fixed; z-index: 4000; display: flex; flex-direction: column; min-width: 140px; padding: 4px; border-radius: 10px; border: 1px solid var(--accent-gold); background: var(--card-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.st-libmenu button { padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-main); font: inherit; font-size: 0.84rem; font-weight: 700; text-align: left; cursor: pointer; }
.st-libmenu button:hover { background: rgba(255, 196, 0, 0.12); color: var(--accent-gold); }
/* 체크메이트 색: 진 킹 색에 맞춤 (흑 킹 = 검정 계열, 백 킹 = 흰색 계열) */
.sq-nag.nag-mate.mate-b { background: #111 !important; color: #fff !important; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.5); }
.sq-nag.nag-mate.mate-w { background: #fff !important; color: #111 !important; box-shadow: 0 0 0 2px #111, 0 1px 4px rgba(0, 0, 0, 0.5); }
.sq.matesq.mate-b::before { background: rgba(10, 10, 10, 0.55) !important; }
.sq.matesq.mate-w::before { background: rgba(255, 255, 255, 0.6) !important; }
/* 체크메이트: 킹 칸 색은 그대로 (칸 색 · 체크 빨간빛 없음), # 배지는 테두리 없이 가운데 정렬 */
.sq.matesq::before { display: none !important; }
.sq.matesq.check { background-image: none !important; box-shadow: none !important; }
.sq-nag.nag-mate.mate-b, .sq-nag.nag-mate.mate-w { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important; }
.sq .sq-nag.nag-mate { letter-spacing: 0 !important; line-height: 1 !important; font-family: Arial, 'Segoe UI', sans-serif !important; text-indent: 0; padding: 0.06em 0 0; }
/* 책 기호: 파스텔 갈색 */
.st-mv.nag-book, .nag-book, .mv.nag-book, .imv.nag-book { color: #c9a27e; }
.sq-nag.nag-book { background: #c4a07a !important; }
.sq.nagsq.nag-book::before { background: rgba(196, 160, 122, 0.42) !important; }
html[data-theme="light"] .st-mv.nag-book, html[data-theme="light"] .mv.nag-book, html[data-theme="light"] .imv.nag-book { color: #9c7552; }
/* 수 색칠: 형광펜처럼 (밝고 진한 형광색), 연달아 칠한 수 사이 공백도 이어 칠함 */
.st-mv.col-green { background: rgba(57, 255, 20, 0.42); }
.st-mv.col-red { background: rgba(255, 40, 80, 0.5); }
.st-mv.col-blue { background: rgba(0, 200, 255, 0.45); }
.st-mv.col-yellow { background: rgba(255, 238, 0, 0.5); }
.st-mv.col-purple { background: rgba(224, 64, 251, 0.48); }
.st-color.green { background: #39ff14; }
.st-color.red { background: #ff2850; }
.st-color.blue { background: #00c8ff; }
.st-color.yellow { background: #ffee00; }
.st-color.purple { background: #e040fb; }
.st-mv.col-join { position: relative; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.st-mv.col-join::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: calc(0.32em + 2px); background: inherit; pointer-events: none; }
.st-mv.col-joined { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* 폴더 줄: 이름 바꾸기 · 지우기 버튼은 이름 바로 옆 (＋ 하위만 오른쪽 끝) */
.st-stree-add.mini { margin-left: 0; }
.st-badge.any { color: var(--text-muted); }
/* 연구 끌어 옮기기: 앞 · 뒤에 놓을 자리 표시 (금색 선) */
.st-stree-row.drop-before { box-shadow: inset 0 3px 0 var(--accent-gold); }
.st-stree-row.drop-after { box-shadow: inset 0 -3px 0 var(--accent-gold); }
/* 진영 배지 '공용' (둘 다 · 상관없음): 반반 색 대신 회색 */
.st-badge.both, .st-badge.any { background: #6f7380 !important; color: #fff !important; border-color: #6f7380 !important; }
/* 기호 버튼의 책 아이콘은 다른 기호 글자처럼 흰색 (켜졌을 때도) */
.st-sym.nag-book, .st-sym.nag-book .nag-ic, .an-sym.nag-book .nag-ic { color: #fff !important; }
html[data-theme="light"] .st-sym.nag-book .nag-ic, html[data-theme="light"] .an-sym.nag-book .nag-ic { color: var(--text-main) !important; }
/* 형광펜 이음새: 색을 배경과 섞은 불투명색으로 바꿔 살짝 겹쳐도 진한 선이 생기지 않게, 사이 공백은 실제 간격 + 1.5px 만큼 덮음 */
.st-mv.col-green { background: color-mix(in srgb, #39ff14 42%, var(--bg-dark)); }
.st-mv.col-red { background: color-mix(in srgb, #ff2850 50%, var(--bg-dark)); }
.st-mv.col-blue { background: color-mix(in srgb, #00c8ff 45%, var(--bg-dark)); }
.st-mv.col-yellow { background: color-mix(in srgb, #ffee00 50%, var(--bg-dark)); }
.st-mv.col-purple { background: color-mix(in srgb, #e040fb 48%, var(--bg-dark)); }
.st-mv.col-join::after { width: calc(var(--gap, 0.32em) + 1.5px); }
/* 분류 배지: 경기 & 모델게임 (분홍) */
.st-badge.st-catbadge.cat-game { color: #f783ac; border-color: rgba(247, 131, 172, 0.45); background: rgba(247, 131, 172, 0.1); }
html[data-theme="light"] .st-badge.st-catbadge.cat-game { color: #c2255c; border-color: rgba(194, 37, 92, 0.4); background: rgba(247, 131, 172, 0.12); }
/* 양옆 열을 바닥글 바로 위까지 늘림 (아래 빈 띠 없애기): 편집 화면 아래 여백 줄이고 열 최대 높이를 그만큼 키움 */
@media (min-width: 1001px) {
  .st-main:has(#st-editor:not([hidden])) { padding-bottom: 6px; }
  .st-side, .st-right { max-height: calc(100vh - 152px); }
  .st-resizer { height: calc(100vh - 152px); margin-bottom: calc(140px - 100vh); }
}
/* 암기 · 점검 모드 테두리: 판 바깥이 아니라 판 가장자리 안쪽에 그림 (열 사이가 좁아 옆 열에 가려 잘리던 것) */
.an-board-wrap.mode-learn, .an-board-wrap.mode-drill { outline: none; }
.an-board-wrap.mode-learn::after, .an-board-wrap.mode-drill::after { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; z-index: 20; }
.an-board-wrap.mode-learn::after { box-shadow: inset 0 0 0 4px #4fc3f7; }
.an-board-wrap.mode-drill::after { box-shadow: inset 0 0 0 4px #e05555; }
/* 암기 모드 수순 목록: 수를 눌러 그 포지션으로 (지금 보이는 수 강조) */
.st-drill-msg .learn-list { white-space: normal; }
.learn-list .ll { line-height: 1.8; }
.learn-list .lc { padding-left: 12px; opacity: 0.9; white-space: pre-wrap; }
.learn-list .num { color: var(--text-muted); margin-right: 2px; }
.learn-list .lm { display: inline-flex; align-items: center; gap: 1px; padding: 0 5px; margin-right: 4px; border-radius: 4px; cursor: pointer; }
.learn-list .lm:hover { background: rgba(255, 255, 255, 0.08); }
.learn-list .lm.on { background: var(--accent-gold); color: var(--on-accent); }
/* 암기 모드 목록: 수는 기본 글자색(굵게), 주석만 초록 */
.learn-list .ll, .learn-list .lm { color: var(--text-main); font-weight: 800; }
.learn-list .lm.on { color: var(--on-accent); }
.learn-list .lc { color: var(--text-comment); font-weight: 600; }
/* 챕터 목록은 화면이 좁아도 무조건 한 줄에 하나 (태블릿 · 모바일에서 가로로 늘어놓던 것 끔) */
.st-chapters, .st-side .st-chapters, #st-chcard .st-chapters { flex-direction: column !important; flex-wrap: nowrap !important; }
.st-chapters > .st-chapter, .st-side .st-chapter, #st-chcard .st-chapter { flex: 0 0 auto !important; width: auto; }

/* 경기 정보 (PGN 머리글) — 기본 접힘 */
#st-infocard .st-card-head { justify-content: flex-start; margin-bottom: 0; }
#st-infocard .st-card-head .an-card-title { flex: 1; }
#st-infocard .st-side-toggle { width: 24px; padding: 0; }
.st-ginfo { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.st-ginfo .gi-row { display: flex; align-items: center; gap: 6px; }
.st-ginfo .gi-lbl { flex-shrink: 0; min-width: 44px; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.st-ginfo .gi-row .gi-lbl + .tool-input ~ .gi-lbl { min-width: 0; }
.st-ginfo .tool-input { flex: 1; min-width: 0; padding: 4px 7px; font-size: 0.8rem; height: 28px; }
.st-ginfo .tool-input.gi-short { flex: 0 0 64px; }
.st-ginfo .tool-input:disabled { opacity: 0.75; cursor: default; }
.st-layout.drilling #st-infocard, body.pz-solving #st-infocard { display: none !important; }

/* 폴더 이름 바꾸기 · 삭제 버튼은 '편집'을 켰을 때만 */
.st-stree-add.st-folder-act { display: none; }
#st-grid-mine.arranging .st-stree-add.st-folder-act { display: inline-flex; }

/* 챕터 여러 개 고르기: 이동 · 삭제 줄은 목록을 내려도 맨 위에 붙어 있게 */
.st-ch-bulk { position: sticky; top: 0; z-index: 5; background: var(--card-bg); flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }

/* ---------- 강의 챕터 ---------- */
body.lec-viewing #st-explorer, body.lec-viewing #an-gauge, body.lec-viewing .an-nav #btn-first, body.lec-viewing .an-nav #btn-prev, body.lec-viewing .an-nav #btn-next, body.lec-viewing .an-nav #btn-last,
body.lec-viewing #st-engcard, body.lec-viewing #st-treecard, body.lec-viewing #st-dbcard, body.lec-viewing #st-sharpcard, body.lec-viewing #st-annotcard, body.lec-viewing #st-infocard { display: none !important; }
/* 코스: 체스판 아래 [엔진]을 켜면 강의 보기에서도 엔진 창 · 평가 막대 */
body.course-view.lec-viewing.cv-engine #st-engcard, body.course-view.lec-viewing.cv-engine .with-gauge #an-gauge { display: block !important; }
#st-lecture .st-card-head { justify-content: flex-start; }
#st-lecture .st-card-head .an-card-title { flex: 1; }
.lec-moves { height: auto; max-height: calc(100vh - 380px); min-height: 120px; overflow-y: auto; }
.lec-var { color: var(--text-muted); }
.lec-var.learn { color: inherit; }
.lec-note { margin-bottom: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--accent-gold); background: rgba(255, 196, 0, 0.06); display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; line-height: 1.6; }
.lec-note-row b { margin-right: 6px; color: var(--accent-gold); white-space: nowrap; }
.lec-note .st-drill-msg { margin: 0; }
.lec-note:empty { min-height: 40px; }
.lec-actions { display: flex; gap: 6px; justify-content: flex-start; margin-top: 10px; }   /* 처음부터: 왼쪽 구석 */
.lec-next { position: fixed; right: 24px; bottom: 60px; z-index: 50; padding: 12px 22px; font-size: 1rem; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.lec-next:disabled { opacity: 0.45; cursor: default; }
body:not(.lec-viewing) .lec-next { display: none; }   /* 버튼이 body 로 옮겨져 있어서 강의 보기 패널이 숨어도 같이 숨게 */
/* 정지 기호: 네모 (이모지 대신) */
.lec-stop-mark { display: inline-block; width: 0.62em; height: 0.62em; margin-left: 4px; border-radius: 2px; background: #e5484d; vertical-align: 0.05em; }
.lec-stop-btn { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0; }
.lec-stop-btn .lec-stop-mark { margin-left: 0; }
.lec-stop-btn.on { border-color: #e5484d; color: #e5484d; }
.lec-stop-btn[data-lec-key="q"] { color: #e5484d; }   /* 정지: 글씨 · 단축키도 빨간 네모와 같은 색 */
/* 학습하기로 정한 사이드라인 첫 수: 밑줄 */
.st-mv.lec-learn { text-decoration: underline; text-decoration-color: var(--accent-gold); text-underline-offset: 3px; }
/* 챕터 목록 아이콘: 재생 세모 */
.st-chapter-lec { flex: 0 0 auto; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--accent-gold); margin: 0 1px 0 2px; }

/* 구분선: 진영 점 자리만 차지 (보이지 않음) */
.st-chapter-side.blank { visibility: hidden; }

/* 채팅 창 오른쪽: 이 연구를 보고 있는 사람 수 (마우스를 올리면 닉네임) */
#st-chat .st-card-head { justify-content: flex-start; }
#st-chat .st-card-head .an-card-title { flex: 1; }
.st-viewers { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); cursor: default; padding: 2px 6px; border-radius: 6px; }
.st-viewers:hover { color: var(--text-light, #fff); }
.st-viewers-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ecf6e; box-shadow: 0 0 6px rgba(62, 207, 110, 0.6); }
.st-viewers-pop { position: fixed !important; right: auto !important; bottom: auto !important; z-index: 60; min-width: 160px; max-width: 280px; white-space: normal; }

/* 퍼즐을 다 풀었을 때: 틀린 횟수 · 힌트 횟수 */
#pz-msg .pz-result { display: block; margin-top: 6px; font-size: 0.85rem; font-weight: 700; opacity: 0.85; }

/* 채팅: 보낸 사람 닉네임 아이콘 (배지 색 · 박스 없이 이름 색 그대로) */
.st-chat-msg .st-chat-who { display: inline-flex; align-items: center; gap: 3px; vertical-align: -0.1em; }
.st-chat-ic { display: inline-block; width: 13px; height: 13px; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.st-chat-ic.ic-id { --ic: url(/images/nk-id.svg); }
.st-chat-ic.ic-chess { --ic: url(/images/nk-chess.svg); }
.st-chat-ic.ic-chzzk { --ic: url(/images/nk-chzzk.svg); }
.st-chat-ic.ic-lichess { --ic: url(/images/nk-lichess.svg); }
.st-chat-ic.ic-dia { --ic: url(/images/nk-diamond.svg?v=2); }
.st-chat-msg .st-chat-who .st-chat-ic { color: inherit; }

/* 접힌 채팅 제목 옆: 안 본 메시지 수 */
.st-chat-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--accent-gold); color: #111; font-size: 0.72rem; font-weight: 800; line-height: 18px; text-align: center; vertical-align: 1px; }
.st-chat-badge[hidden] { display: none; }

/* 기보: 화살표 · 원을 그려 둔 수 옆 작은 화살표 표시 */
.st-trans { margin-left: 3px; color: #5ea9cf; font-weight: 900; font-size: 0.9em; }   /* 트랜스포즈 (메인라인과 같은 포지션) */
.st-shape-mark { display: inline-block; width: 0.8em; height: 0.8em; margin-left: 3px; vertical-align: -0.05em; background-color: #4caf6a; opacity: 0.9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13L11 5M6 4h6v6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13L11 5M6 4h6v6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 강의: 줄바꿈 기호 */
.lec-br-mark { display: inline-block; margin-left: 3px; color: #3ab4f2; font-weight: 800; font-size: 0.85em; line-height: 1; }
.lec-br-btn { margin-left: 6px; }
.lec-br-btn .lec-br-mark { margin-left: 0; }
.lec-br-btn.on { border-color: #3ab4f2; color: #3ab4f2; }

/* 다음 버튼은 하단바(약 31px, 휴대폰에서는 두 줄)를 가리지 않게 그 위에 */
@media (max-width: 700px) { .lec-next { bottom: 80px; right: 16px; } }

/* 전체 백업: 형식 고르기 카드 */
.bk-opts { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.bk-opt { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-purple); background: var(--bg-dark); color: var(--text-main); cursor: pointer; }
.bk-opt:hover { border-color: var(--accent-gold); }
.bk-opt b { font-size: 0.95rem; color: var(--accent-gold); }
.bk-opt span { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.bk-opt.bk-import { border-style: dashed; }
.bk-opt.bk-import b { color: var(--text-main); }
.bk-opt.bk-reset { border-color: rgba(229, 72, 77, 0.45); }
.bk-opt.bk-reset:hover { border-color: #e5484d; }
.bk-opt.bk-reset b { color: #e5484d; }

/* 연구 초기화 창 */
.reset-title { color: #e5484d; }
.reset-warn { padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; border: 1px solid rgba(229, 72, 77, 0.5); background: rgba(229, 72, 77, 0.08); font-size: 0.86rem; line-height: 1.55; }
.reset-agree { display: flex; gap: 6px; align-items: flex-start; font-size: 0.84rem; margin: 4px 0 6px; cursor: pointer; }
#reset-ok.danger { background: #e5484d; border-color: #e5484d; color: #fff; }
#reset-ok.danger:disabled { opacity: 0.4; cursor: default; }

/* 코스 챕터를 연구 페이지로 볼 때 위쪽 줄 (research?course=…&part=…): 코스 이름 · 챕터 고르기 */
.st-course-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.st-course-name { font-weight: 700 !important; color: var(--accent-gold); }
.st-course-bar .st-select { width: auto; max-width: 100%; }
/* 내 연구 트리: 흑백 나눠 보기 (왼쪽 백 · 오른쪽 흑 / 공용 / 기타), 좁은 화면에서는 위아래로 */
.st-stree-split { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.st-stree-split .st-stree { grid-column: auto; min-width: 0; }
.st-stree-split .st-stree:empty { display: none; }
@media (max-width: 800px) { .st-stree-split { grid-template-columns: 1fr; } }

/* 배지(흑 · 오프닝 · 공개)는 제목 줄 오른쪽에 일렬로 */
.st-title-row { flex-wrap: wrap; row-gap: 4px; }
.st-title-row .st-meta-row { margin-top: 0; flex-wrap: nowrap; }
.st-title-row .st-meta { flex-wrap: nowrap; }
/* 창 끄기 ✕ / 끈 창 모두 켜기 */
.st-panel-x { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid var(--border-purple); background: var(--bg-dark); color: var(--text-muted); cursor: pointer; font-size: 0.72rem; line-height: 1; }
.st-panel-x:hover { color: #ff6b6b; border-color: #ff6b6b; }
.st-panel-closed { display: none !important; }
.st-reopen { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-purple); background: var(--bg-dark); color: var(--text-muted); font-size: 0.72rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.st-reopen:hover { color: var(--accent-gold); border-color: var(--accent-gold); }

/* 단축키 도움말 버튼 ? 는 노란색 */
.st-main .an-nav #btn-help { color: var(--accent-gold); }

/* 챕터 종류 고르기: 일반 빨강 · 문제 파랑 · 강의 초록 */
#chapter-kind-field input[value="line"] + span { color: #ef5350; font-weight: 800; }
#chapter-kind-field input[value="puzzle"] + span { color: #42a5f5; font-weight: 800; }
#chapter-kind-field input[value="lecture"] + span { color: #66bb6a; font-weight: 800; }

/* 코스: 일반 라인 [다음 챕터] (기보 창 아래) */
.st-course-next { display: block; width: calc(100% - 16px); margin: 8px auto; padding: 10px; font-weight: 800; }
.st-course-next[hidden] { display: none; }

/* !!! (보라) · ★ (초록) 기호 */
.st-mv.nag-super, .nag-super, .mv.nag-super, .imv.nag-super { color: #a46cf0; font-weight: 900; }
.sq-nag.nag-super { background: #8a4fe0; color: #fff; letter-spacing: -0.1em; padding-right: 0.1em; font-size: 1em; }   /* 마지막 글자 뒤 음수 자간만큼 오른쪽 여백 → 가운데 정렬 */
.sq.nagsq.nag-super::before { background: rgba(138, 79, 224, 0.5); }
.st-mv.nag-star, .nag-star, .mv.nag-star, .imv.nag-star { color: #2fbf71; }
.sq-nag.nag-star { background: #23a35c; color: #fff; }
.sq.nagsq.nag-star::before { background: rgba(35, 163, 92, 0.45); }
html[data-theme="light"] .st-mv.nag-super, html[data-theme="light"] .mv.nag-super { color: #7a35d6; }
html[data-theme="light"] .st-mv.nag-star, html[data-theme="light"] .mv.nag-star { color: #1d8a4c; }
/* 주석 기호 버튼에서는 !!! · ★ 도 다른 기호처럼 기본 글자색 */
.st-sym.nag-super, .st-sym.nag-star, .an-sym.nag-super, .an-sym.nag-star { color: var(--text-main) !important; }
.st-sym .nag-super, .st-sym .nag-star, .an-sym .nag-super, .an-sym .nag-star { color: inherit !important; }
/* !!! 판 아이콘: 연구 화면의 .st-main .sq .sq-nag 규칙(자간 · 크기)보다 우선. 가늘어서 크게, 음수 자간만큼 오른쪽 여백 → 가운데 */
.st-main .sq .sq-nag.nag-super, .sq .sq-nag.nag-super { font-size: clamp(1rem, 3vw, 1.6rem) !important; letter-spacing: -0.09em !important; padding: 0 0.09em 0 0 !important; text-indent: 0 !important; }

/* 오프닝 DB · 채팅 · 엔진(꺼졌을 때) 창 제목 줄 오른쪽 끝 ✕ */
.st-panel-x-end { margin-left: auto; }
.st-db-tabs + .st-panel-x-end, .st-viewers + .st-panel-x-end { margin-left: 6px; }
.st-panel-x[hidden] { display: none; }

/* 기보 창: 모두 펼치기 / 접기 아이콘 버튼 */
.st-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; }
.st-icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.st-tree-tools + .st-panel-x { margin-left: 6px; }

/* !!! 수는 기보 글자도 보라 (문제 풀기 정답 · 오답 색보다 우선, 지금 수는 그대로) */
.st-tree .st-mv.nag-super:not(.active), .lec-moves .st-mv.nag-super:not(.active), .st-mv.nag-super:not(.active) { color: #a46cf0 !important; }
html[data-theme="light"] .st-tree .st-mv.nag-super:not(.active), html[data-theme="light"] .st-mv.nag-super:not(.active) { color: #7a35d6 !important; }
.st-tree .st-mv.nag-star:not(.active), .st-mv.nag-star:not(.active) { color: #2fbf71 !important; }
html[data-theme="light"] .st-mv.nag-star:not(.active) { color: #1d8a4c !important; }

/* 내 연구 편집: 연구 복사 버튼 (글자) */
#st-grid-mine .st-stree-add.st-copy-act { width: auto; min-width: 0; padding: 0 8px; font-size: 0.75rem; }

/* 제목 아래 배지(진영 · 분류 · 공개 · 닉네임 · 다른 회원 연구): 글자는 한 줄로, 자리가 모자라면 배지째 다음 줄로 */
.st-meta > *, .st-meta-row .st-readonly { white-space: nowrap; flex-shrink: 0; }
.st-title-row .st-meta-row, .st-title-row .st-meta { flex-wrap: wrap; row-gap: 4px; }

/* 기보 모두 펼치기 · 접기 아이콘: 모바일에서 버튼 좌우 여백 때문에 아이콘이 4px 로 찌그러지던 문제 */
.st-icon-btn { padding: 0 !important; min-width: 26px; }
.st-icon-btn svg { flex-shrink: 0; }

/* 모바일: 체스판 아래로 옮긴 강의 수 설명은 강의 보기 중에만 */
body:not(.lec-viewing) .an-nav + .lec-note { display: none; }
.an-nav + .lec-note { margin: 8px 0 0; max-width: var(--board-max); }   /* 설정 '보드 아래': 체스판 너비만큼 */

/* 휴대폰: 코스 화면은 체스판이 맨 위, 강의 수 설명(노란 상자)은 체스판 바로 아래 */
@media (max-width: 1000px) {
  body.course-view .st-layout .an-board-col { order: -1; }
  .lec-note.under-board { margin: 8px 0 0; max-width: var(--board-max); }
  body:not(.lec-viewing) .lec-note.under-board { display: none !important; }
  #st-drill.under-board { margin: 8px 0 0; max-width: var(--board-max); width: 100%; }   /* 점검 · 암기 칸: 체스판 바로 아래 */
}@media (max-width: 1000px) { body.course-view .st-layout > .st-course-bar.cb-mobile { order: -1; } }
/* 주석 굵게 (**글자**, 주석 칸에서 Ctrl+B) */
.cmt-b { font-weight: 900; }
/* 코스 [엔진] 버튼 물고기 아이콘: 이미지를 마스크로 써서 켜고 끌 때 글자색 따라감 */
.cv-fish { display: inline-block; width: 20px; height: 20px; vertical-align: middle; background: currentColor; -webkit-mask: url(/images/engine_fish.svg) center / contain no-repeat; mask: url(/images/engine_fish.svg) center / contain no-repeat; }
/* 휴대폰 코스: [엔진]을 켜면 엔진 창을 체스판 바로 아래로 (원래는 라인 목록 밑 맨 아래라 안 보였음) */
@media (max-width: 1000px) {
  body.course-view.cv-engine .st-layout .an-board-col { order: -3; }
  body.course-view.cv-engine .st-layout > .st-right { order: -2; }
}

/* 코스: 챕터 완료 팝업 */
.st-done-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.55); }
.st-done-box { position: relative; width: min(460px, 100%); padding: 26px 22px 20px; border-radius: 14px; border: 1px solid var(--accent-gold); background: var(--card-bg); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); text-align: center; }
.st-done-msg { font-size: 1.02rem; font-weight: 800; line-height: 1.55; color: var(--text-main); margin-bottom: 18px; word-break: keep-all; }
.st-done-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.st-done-btns .tool-btn { text-decoration: none; }
.st-done-drill { border-color: #e5484d !important; background: #e5484d !important; color: #fff !important; }
.st-done-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; background: none; color: var(--text-muted); font-size: 0.9rem; cursor: pointer; }
.st-done-x:hover { color: var(--text-main); }
/* 폴더 아이콘 (이미지) */
.folder-ico { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.3em; vertical-align: -0.2em; flex: none; }

/* 폴더 색: 폴더 이름 글자색 (폴더 아이콘 색과 맞춤, 기본은 노랑 = 금색) */
.st-stree-row.folder .st-stree-title.folder.fc-red { color: #e5484d; }
.st-stree-row.folder .st-stree-title.folder.fc-orange { color: #f29a3a; }
.st-stree-row.folder .st-stree-title.folder.fc-green { color: #5fa86a; }
.st-stree-row.folder .st-stree-title.folder.fc-sky { color: #5cc3f0; }
.st-stree-row.folder .st-stree-title.folder.fc-blue { color: #6b95e0; }
.st-stree-row.folder .st-stree-title.folder.fc-purple { color: #a07ae6; }
.st-stree-row.folder .st-stree-title.folder.fc-black { color: #8a8698; }
.st-stree-row.folder .st-stree-title.folder.fc-white { color: #f6f3ec; }
html[data-theme="light"] .st-stree-row.folder .st-stree-title.folder.fc-red { color: #b8353a; }
html[data-theme="light"] .st-stree-row.folder .st-stree-title.folder.fc-orange { color: #c97422; }
html[data-theme="light"] .st-stree-row.folder .st-stree-title.folder.fc-green { color: #3f7f4a; }
html[data-theme="light"] .st-stree-row.folder .st-stree-title.folder.fc-sky { color: #3196c4; }
html[data-theme="light"] .st-stree-row.folder .st-stree-title.folder.fc-blue { color: #2f5597; }
html[data-theme="light"] .st-stree-row.folder .st-stree-title.folder.fc-purple { color: #6338a8; }
html[data-theme="light"] .st-stree-row.folder .st-stree-title.folder.fc-black { color: #1f1c26; }
html[data-theme="light"] .st-stree-row.folder .st-stree-title.folder.fc-white { color: #8f8a7e; }
/* 폴더 수정 창 색 고르기: 폴더 아이콘으로 */
.folder-colors .st-color.folder-swatch { display: inline-flex; align-items: center; justify-content: center; background: none; }
.folder-colors .st-color.folder-swatch .folder-ico { width: 20px; height: 20px; margin: 0; }

/* 내 연구 목록: 코스와 연결된 연구 (사슬 아이콘 + 이름 하늘색) */
/* 코스와 연결된 연구: 고를 수 있는 색(빨 · 주 · 노 · 연두 · 초 · 하늘 · 파 · 보 · 분홍)에 없는 민트색 */
.st-linked { color: #3fe0b8 !important; }
html[data-theme="light"] .st-linked { color: #0f8f72 !important; }
.st-card.st-linked-card { border-color: rgba(63, 224, 184, 0.6) !important; }
.st-link-ico { display: inline-flex; align-items: center; margin-right: 4px; vertical-align: -0.12em; }
.st-link-ico svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* 강의 편집: 추가 설명(※) · 수 넘기기(-) 버튼 */
.lec-btn-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0; }
.lec-btn-row .lec-stop-btn { margin: 0; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lec-sp-btn.lec-extra { border-color: #e6b400; color: #e6b400; }
.lec-sp-btn.lec-pass { border-color: #30a46c; color: #30a46c; }
html[data-theme="light"] .lec-sp-btn.lec-extra { border-color: #a67c00; color: #8a6700; }
html[data-theme="light"] .lec-sp-btn.lec-pass { border-color: #1d7f4e; color: #1d7f4e; }
/* QWER 버튼: 기호 · 단축키는 버튼 색 그대로, 설명 글씨만 흰색 (밝은 화면은 기본 글자색) */
.lec-btn-row .lec-btn-txt { color: #fff; }
/* 정지 · 줄바꿈도 E · R 처럼 늘 테두리 색 (정지 빨강, 줄바꿈 파랑) */
.lec-btn-row .lec-stop-btn[data-lec-key="q"] { border-color: #e5484d; }
.lec-btn-row .lec-br-btn { border-color: #3ab4f2; color: #3ab4f2; }
/* QWER 모두 옅은 배경색, 켜진 정지 · 줄바꿈은 더 진하게 */
.lec-btn-row .lec-stop-btn[data-lec-key="q"] { background: rgba(229, 72, 77, 0.12); }
.lec-btn-row .lec-br-btn { background: rgba(58, 180, 242, 0.12); }
.lec-btn-row .lec-sp-btn.lec-extra { background: rgba(230, 180, 0, 0.12); }
.lec-btn-row .lec-sp-btn.lec-pass { background: rgba(48, 164, 108, 0.12); }
.lec-btn-row .lec-stop-btn[data-lec-key="q"].on { background: rgba(229, 72, 77, 0.32); }
.lec-btn-row .lec-br-btn.on { background: rgba(58, 180, 242, 0.32); }
html[data-theme="light"] .lec-btn-row .lec-btn-txt { color: var(--text-main); }
/* 사이드라인 T: 단축키 상자 (글자와 띄움) */
.pz-marks .tool-label .lec-key { margin-left: 6px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; font: 700 0.7em/1.4 Arial, sans-serif; opacity: 0.7; vertical-align: 1px; }
@media (max-width: 520px) { .lec-btn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lec-note-pre { white-space: pre-wrap; opacity: 0.9; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px dashed rgba(254, 203, 76, 0.35); }
.lec-view-btns { display: inline-flex; gap: 6px; margin-left: auto; }

/* 강의 편집 창: 다른 창처럼 상자 + 손잡이(⠿)로 옮기기. 보이는 창이 없는 줄은 숨김 */
.st-main .st-layout .an-card.st-boxed { border: 1px solid var(--border-purple); background: var(--card-bg); border-radius: 12px; padding: 10px; }
.st-dockrow:not(:has(> :not([hidden]))) { display: none; }

/* 강의 편집 기보: 사이드라인 첫 수 앞 노란 원 + 학습 / 표시 */
/* 강의 보기 위 막대의 [강의 편집] 버튼: 빨간 배경 */
#lec-edit-btn { background: #e5484d; border-color: #e5484d; color: #fff; }
#lec-edit-btn:hover { background: #d13438; border-color: #d13438; }
.lec-skip-hint { background: rgba(255, 200, 0, 0.22); color: #ffd84d; font-weight: 700; padding: 0 3px; border-radius: 3px; }
html[data-theme="light"] .lec-skip-hint { background: #fff1a8; color: #6b5200; }
.lec-vl-mark { display: inline-flex; align-items: center; gap: 3px; margin-right: 4px; font-size: 0.68em; font-weight: 800; color: #e6b400; vertical-align: 0.08em; }
.lec-vl-mark::before { content: ""; width: 0.8em; height: 0.8em; border-radius: 50%; border: 2px solid #e6b400; box-sizing: border-box; }
.lec-vl-mark.learn::before { background: #e6b400; }
html[data-theme="light"] .lec-vl-mark { color: #a67c00; }
html[data-theme="light"] .lec-vl-mark::before { border-color: #a67c00; }
html[data-theme="light"] .lec-vl-mark.learn::before { background: #a67c00; }
/* 강의 편집 버튼의 단축키 표시 (Q W E R) */
.lec-btn-row .lec-key { flex: 0 0 auto; margin-left: 2px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; font: 700 0.7em/1.4 Arial, sans-serif; opacity: 0.7; }
/* 포지션 기호 (판 위, 연구 화면): 수 기호보다 조금 작은 글자, 수 기호 왼쪽에 살짝 겹침 (수 기호가 위) */
.st-main .sq .sq-pnag { font-size: clamp(0.6rem, 1.6vw, 0.88rem); letter-spacing: -0.1em; font-family: 'Segoe UI', Arial, sans-serif; -webkit-text-stroke: 0; }
.st-main .sq .sq-pnag.with-nag { right: 15%; z-index: 13; }
.st-main .sq .sq-pnag.with-nag.edge-r { right: 30%; }

/* 판 위 기호 아이콘: 글자 크기를 체스판 너비 기준(cqw)으로 → 화면 · 창 크기가 바뀌어도 아이콘 안 글자 비율이 그대로 (칸 = 12.5cqw, 아이콘 = 칸의 43%) */
.st-main .an-board-wrap { container-type: inline-size; }
.st-main .sq .sq-nag { font-size: 3.4cqw !important; line-height: 1; }
.st-main .sq .sq-nag.nag-super { font-size: 3.1cqw !important; }
.st-main .sq .sq-pnag { font-size: 3.3cqw !important; letter-spacing: 0 !important; padding: 0 !important; font-family: Arial, 'Segoe UI', sans-serif !important; font-weight: 700 !important; }
.st-main .sq .sq-pnag.pn-0, .st-main .sq .sq-pnag.pn-7 { font-size: 2.8cqw !important; letter-spacing: -0.04em !important; padding-right: 0.04em !important; }
.st-sym-fold { flex: 0 0 auto; margin-left: auto; padding: 0 5px; height: 22px; background: none; border: 1px dashed var(--border-purple); border-radius: 6px; color: var(--accent-gold); font-size: 0.7rem; font-weight: 900; cursor: pointer; }   /* 포지션 기호 · 색 접기 (맨 오른쪽, 점선으로 구분) */
.st-sym-fold:hover { border-color: var(--accent-gold); }
.st-sym-fold[hidden] { display: none; }

/* 판 위 기호 그림 (글꼴 대신 SVG): 아이콘 크기에 맞춰 같은 굵기 */
.sq .sq-nag.has-ic { padding: 0 !important; text-indent: 0 !important; letter-spacing: 0 !important; -webkit-text-stroke: 0 !important; }
.sq .sq-nag .sym-ic { width: 78%; height: 78%; fill: none; stroke: currentColor; stroke-width: 3.3; stroke-linecap: butt; stroke-linejoin: miter; display: block; }   /* 굵고 각지게 */
.sq .sq-nag .sym-ic .f { fill: currentColor; stroke: none; }

/* 체스판 아래 버튼: 이전 · 다음 수가 가장 크게, 처음 · 끝은 그다음, 판 뒤집기는 작은 버튼(◧ ? ⚙ ◨)과 같은 크기 */
.st-main .an-nav #btn-prev, .st-main .an-nav #btn-next { flex: 1.7 1 0; }
.st-main .an-nav #btn-first, .st-main .an-nav #btn-last { flex: 1 1 0; }
.st-main .an-nav #btn-flip { flex: 0 0 38px; padding: 4px 0; font-size: 0.85rem; }

/* 코스 화면 체스판 아래: [엔진] · [분석 창] 버튼도 작은 버튼과 같은 크기, 아이콘 크기 통일 */
.st-main .an-nav #btn-cv-engine, .st-main .an-nav #btn-cv-analysis { flex: 0 0 38px; padding: 4px 0; display: flex; align-items: center; justify-content: center; }
.st-main .an-nav #btn-cv-engine .cv-fish { width: 16px; height: 16px; }
.st-main .an-nav #btn-cv-analysis svg { width: 15px; height: 15px; }

/* 칸 색칠 하이라이트 (우클릭, 옵션 > 연구 '기물 하이라이트 방식' = 칸 색칠): 기물 아래에 칸 색 */
.sq .sq-mark { position: absolute; inset: 0; z-index: 1; opacity: 0.84; pointer-events: none; }   /* 조금만 비침: 밝은 칸 · 어두운 칸이 살짝만 다르게 */

/* 주석 입력 칸 (글 편집 div): textarea 처럼 보이게 · 굵게가 칸 안에서 보임 */
.st-text.st-rich { white-space: pre-wrap; word-break: break-word; overflow-y: auto; max-height: 260px; resize: vertical; cursor: text; outline: none; }
.st-text.st-rich:empty::before { content: attr(data-ph); color: var(--text-muted); opacity: 0.7; pointer-events: none; }
.st-text.st-rich b, .st-text.st-rich strong { font-weight: 900; }
.st-text.st-rich[hidden] { display: none; }
.sq .sq-pnag .sym-ic { width: 88%; height: 88%; }   /* 포지션 평가 기호 그림은 조금 더 크게 */

/* 제목 줄: 배지 · 정보 수정 | REC 사이 작은 세로 구분선 (REC 가 숨으면 같이 숨김) */
.st-title-sep { flex: none; width: 1px; height: 14px; background: var(--border-purple); margin: 0 2px; align-self: center; }
.st-title-sep:has(+ .st-rec[hidden]) { display: none; }

/* 첫 연구 입장 팝업 (기본 설정 3가지) */
.ob-wrap { position: fixed; inset: 0; z-index: 5000; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ob-box { width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--border-purple); border-radius: 16px; padding: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.ob-title { font-size: 1.02rem; font-weight: 900; color: var(--accent-gold); margin-bottom: 14px; }
.ob-q { margin-bottom: 16px; }
.ob-q-title { font-size: 0.88rem; font-weight: 800; margin-bottom: 8px; }
.ob-opts { display: flex; gap: 8px; }
.ob-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; background: var(--btn-bg); border: 1px solid var(--border-purple); border-radius: 10px; color: var(--text-main); font-family: inherit; font-size: 0.85rem; font-weight: 800; cursor: pointer; }
.ob-opt:hover { border-color: var(--accent-gold); }
.ob-opt.on { border-color: var(--accent-gold); background: rgba(254, 203, 76, 0.12); color: var(--accent-gold); }
.ob-board { width: 96px; height: 96px; border-radius: 4px; display: block; }
.ob-board .l { fill: var(--sq-light, #f0d9b5); }
.ob-board .d { fill: var(--sq-dark, #b58863); }
.ob-note { margin-top: 6px; font-size: 0.72rem; color: var(--text-muted); }
.ob-ok { width: 100%; margin-top: 4px; }
.ob-ok:disabled { opacity: 0.4; cursor: default; }
.ob-foot { margin-top: 10px; text-align: center; font-size: 0.75rem; color: var(--text-muted); }

/* 강의 편집기: 버튼 줄 끝의 [동그라미 / 칸 색칠] 스위치 */
/* 우클릭 하이라이트 스위치는 QWER 아래 줄로 (한 줄에 두면 버튼이 잘림) */
.lec-btn-row:has(.lec-mark-seg) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lec-mark-seg { display: inline-flex; grid-column: 1 / -1; justify-self: start; }
.lec-mark-seg .tool-btn { border-radius: 0; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.lec-mark-seg .tool-btn:first-of-type { border-radius: 8px 0 0 8px; }
.lec-mark-seg { align-items: center; }
.lec-mark-seg.in-side { margin-left: auto; }   /* 사이드라인 줄 오른쪽 끝 */
.lec-mark-lbl { margin-right: 6px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.lec-mark-seg .tool-btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.lec-mark-seg .tool-btn.on { background: var(--accent-gold); border-color: var(--accent-gold); color: var(--on-accent); }
@media (max-width: 520px) { .lec-btn-row:has(.lec-mark-seg) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lec-mark-seg { grid-column: 1 / -1; justify-content: center; } }
#st-chat.chat-private { display: none !important; }   /* 비공개 연구: 채팅 숨김 */

/* 주석 강조 (Ctrl+H): 보는 사람의 테마색 글자 */
.cmt-hl, .st-main .cmt-hl, .st-text.st-rich .cmt-hl { color: var(--accent-gold) !important; }

/* 기보에서 여러 수 고르기 (Shift+클릭) */
.st-mv.multi { outline: 2px solid var(--accent-gold); outline-offset: -1px; border-radius: 4px; background: rgba(254, 203, 76, 0.16); }

/* 단축키 · 사용법 창: 넓게, 한 줄에 하나씩 (키 칸 고정 너비 | 설명) */
#st-helpbox { width: min(560px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; }
#st-helpbox .st-keys { grid-template-columns: 1fr; gap: 5px; }
#st-helpbox .st-keys .item { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; }
#st-helpbox .st-keys .item .ks { display: flex; flex-wrap: wrap; gap: 3px; }
#st-helpbox .st-keys kbd { white-space: nowrap; }
#st-helpbox .st-keys .item > span:last-child { line-height: 1.45; }

/* 연구 카드: 제목은 2줄까지 (넘으면 … 으로 자름), 배지 줄은 한 줄 (긴 닉네임은 … 으로) */
.st-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.st-card > .st-card-meta:not(:last-child) { flex-wrap: nowrap; overflow: hidden; }
.st-card > .st-card-meta:not(:last-child) > * { flex-shrink: 0; }
.st-card > .st-card-meta:not(:last-child) > :last-child { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 휴대폰: 연구 상단 정리 — ← 내 연구 / 제목 · 배지 / 버튼 줄을 각각 한 줄씩, 암기 · 점검은 둘이 함께 다음 줄 */
@media (max-width: 760px) {
  .st-top { gap: 6px 8px; }
  .st-back { flex: 1 1 auto; font-size: 0.8rem; }
  .st-title-wrap { flex: 1 1 100%; min-width: 0; }
  .st-title-row { gap: 6px; }
  .st-top-actions { flex: 1 1 100%; gap: 6px; }
  .st-top-actions .tool-btn { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 0.82rem; white-space: nowrap; }
  .st-top-actions::after { content: ""; flex: 0 0 100%; order: 1; margin-top: -6px; }
  .st-top-actions .st-learn-btn, .st-top-actions .st-drill-btn, .st-top-actions #btn-practice-back { order: 2; }
}

/* 휴대폰 · 태블릿: 체스판을 언제나 맨 위로 (제목 · 버튼 줄보다도 위) — 레이아웃 칸을 풀어 편집기 전체를 한 줄로 세우고 체스판 열을 맨 앞에 */
@media (max-width: 1000px) {
  #st-editor:not([hidden]) { display: flex; flex-direction: column; gap: 10px; }
  #st-editor > .st-layout { display: contents; }
  /* 체스판 · ◀ ▶ 줄 → 제목 줄 → 체스판 아래에 놓은 창들 → 나머지 창 순서 */
  #st-editor .st-layout > .an-board-col { display: contents; }
  #st-editor .an-board-col > * { order: -5; }
  #st-editor > .st-top { order: -4; margin-bottom: 0; }
  #st-editor .an-board-col > #dock-bottom { order: -3; }
}

/* 상단 접기 · 엔진 창 접기 버튼: 휴대폰 · 태블릿에서만 */
.st-top-fold, .st-eng-fold { display: none; }
@media (max-width: 1000px) {
  .st-top-fold, .st-eng-fold { display: inline-block; flex: 0 0 auto; }
  .st-top.folded .st-crumb, .st-top.folded .st-title-row > :not(.st-title), .st-top.folded .st-top-actions { display: none !important; }
  .st-top.folded .st-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #st-engcard.eng-folded > :not(.an-engine-head) { display: none !important; }
}

/* 휴대폰 · 태블릿 코스 화면: 체스판 → (강의 수 설명) → 기보 · 강의 칸 → 바리에이션 목록 → 코스 띠(진행률 · 파트 목록)는 맨 아래 */
@media (max-width: 1000px) {
  body.course-view #st-editor .st-layout > .st-right { order: -2; }
  body.course-view #st-editor .st-layout > .st-course-bar.cb-mobile { order: 10 !important; }
}

/* 코스 바리에이션 목록: 라인 수 (js/research.js renderChapters) */
.st-line-cnt { margin-left: 6px; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }

/* ---------- 분석 보드 (/analysis, body.analysis-view): 연구 전용 버튼 · 창 숨김, 불러오기 창 ---------- */
body.analysis-view #st-back, body.analysis-view #st-crumb, body.analysis-view .st-meta-row, body.analysis-view #btn-edit-info,
body.analysis-view .st-title-sep, body.analysis-view #btn-rec, body.analysis-view #st-save, body.analysis-view #btn-save,
body.analysis-view #btn-like, body.analysis-view #btn-copy, body.analysis-view #btn-learn, body.analysis-view #btn-drill,
body.analysis-view #btn-practice-back, body.analysis-view #lec-edit-btn, body.analysis-view #pz-edit-btn,
body.analysis-view #st-chcard, body.analysis-view #st-chat, body.analysis-view #link-copy { display: none !important; }
#an-importcard .st-card-head { margin-bottom: 8px; }
#an-importcard .st-card-head .an-card-title { flex: 1; margin: 0; }
.an-import-text { width: 100%; min-height: 96px; resize: vertical; box-sizing: border-box; }
.an-import-row { display: flex; gap: 6px; margin-top: 6px; }
.an-import-row .an-btn { flex: 1 1 0; text-align: center; }
.an-import-msg { font-size: 0.78rem; font-weight: 700; margin-top: 6px; color: var(--text-muted); }
.an-import-msg:empty { display: none; }
.an-import-msg.error { color: #ff6b6b; }
/* ---------- 분석 보드 영화관 모드 (body.an-cinema): 체스판 + 기보만, 기보 창 머리의 작은 버튼 · Esc 로 되돌림 ---------- */
.an-cin-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.an-cin-btn { display: none; width: 26px; height: 26px; padding: 0; border-radius: 6px; border: 1px solid var(--border-purple); background: var(--card-bg); color: var(--text-muted); cursor: pointer; align-items: center; justify-content: center; flex: 0 0 auto; }
.an-cin-btn:hover, .an-cinema-showmoves:hover { color: var(--accent-gold); border-color: var(--accent-gold); }
.an-cin-btn svg, .an-cinema-showmoves svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body.an-cinema .an-cin-btn { display: inline-flex; }
.an-cinema-showmoves { display: none; position: fixed; top: 12px; right: 12px; z-index: 50; width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--border-purple); background: var(--card-bg); color: var(--text-muted); cursor: pointer; align-items: center; justify-content: center; }
body.an-cinema.an-nomoves .an-cinema-showmoves { display: inline-flex; }
body.an-cinema .topbar, body.an-cinema footer, body.an-cinema .st-top, body.an-cinema .st-side, body.an-cinema .st-resizer,
body.an-cinema .an-nav, body.an-cinema .st-nav-pops, body.an-cinema #an-status, body.an-cinema #dock-bottom, body.an-cinema .an-gauge,
body.an-cinema #st-panel [data-panel]:not(#st-treecard), body.an-cinema #st-panel > :not(.st-dockrow),
body.an-cinema #st-treecard .st-grip, body.an-cinema #st-treecard .st-panel-x,
body.an-cinema #st-drill, body.an-cinema #st-puzzle, body.an-cinema #st-lecture { display: none !important; }
body.an-cinema #st-panel { display: flex !important; }
body.an-cinema.an-nomoves .st-right { display: none !important; }
body.an-cinema { padding-top: 0 !important; }
body.an-cinema .st-main { overflow: hidden; overflow: clip; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding-top: 20px; padding-bottom: 20px; }
body.an-cinema #st-editor .st-layout { --board-max: min(780px, calc(100vh - 60px)); grid-template-columns: 0 minmax(0, calc(var(--board-max) + 20px)) minmax(280px, 420px) !important; justify-content: center; column-gap: 0; }
body.an-cinema.an-nomoves #st-editor .st-layout { grid-template-columns: 0 minmax(0, calc(var(--board-max) + 20px)) 0 !important; }
body.an-cinema .st-right { max-height: calc(100vh - 60px) !important; }
@media (max-width: 1000px) { body.an-cinema #st-editor .st-layout { grid-template-columns: 1fr !important; } }
/* 영화관 모드에서 따로 켠 엔진 창 · 평가치 막대 */
.an-cin-btn.on { color: var(--accent-gold); border-color: var(--accent-gold); }
body.an-cinema.an-cin-eng #st-panel .st-dockrow > #st-engcard.an-card { display: block !important; }
body.an-cinema.an-cin-eng #st-engcard .st-grip, body.an-cinema.an-cin-eng #st-engcard .st-panel-x { display: none !important; }
body.an-cinema.an-cin-eval .with-gauge .an-gauge { display: block !important; }
body.an-cinema:not(.an-cin-eval) .an-board-row.with-gauge { grid-template-columns: 0 minmax(0, 1fr); gap: 0; }

/* ---------- 양옆 열 한 칸 더 (◧ ◨ 버튼: 기본 3단 → 4단 → 그 열 숨김 → 기본, 양쪽 다 넓히면 5단) ---------- */
/* 넓히지 않으면 바깥 칸(dock-left2 · dock-right2)에 둔 창은 안쪽 칸 아래에 이어서 보임 */
#dock-left2, #dock-right2 { order: 1; }
@media (min-width: 1001px) {
  .st-layout.left-wide { --left-ww: calc(var(--left-w) * 1.6); }
  .st-layout.right-wide { --right-ww: calc(var(--right-w) * 1.6); }
  .st-layout.left-wide .st-side, .st-layout.right-wide .st-right { flex-direction: row; align-items: flex-start; gap: 8px; }
  .st-layout.left-wide .st-side > .st-dock, .st-layout.right-wide .st-right > .st-dock, .st-layout.right-wide .st-right > #st-panel { flex: 1 1 0; min-width: 0; }
  .st-layout.left-wide #dock-left2 { order: -1; display: flex; min-height: 120px; align-self: stretch; }
  .st-layout.left-wide .st-resizer.left { order: 99; }
  .st-layout.right-wide .st-resizer.right { order: -2; }
  .st-layout.right-wide #dock-right2 { display: flex; min-height: 120px; align-self: stretch; }
  body.db-dragging .st-layout.left-wide #dock-left2, body.db-dragging .st-layout.right-wide #dock-right2 { outline: 2px dashed var(--border-purple); outline-offset: -2px; border-radius: 12px; }
}
.st-main .an-nav #btn-left-hide.wide, .st-main .an-nav #btn-right-hide.wide { color: var(--accent-gold); border-color: var(--accent-gold); background: rgba(254, 203, 76, 0.12); }/* 첫 연구 팝업: 화면 배치 몇 단 그림 (가운데 굵은 칸이 체스판) */
.ob-cols { display: flex; gap: 3px; height: 34px; width: 96px; align-items: stretch; }
.ob-cols i { flex: 1 1 0; border-radius: 3px; background: color-mix(in srgb, var(--text-muted) 35%, transparent); }
.ob-cols i.b { flex: 2.2 1 0; background: color-mix(in srgb, var(--accent-gold) 70%, transparent); }/* 긴장도: 분석할 수 개수 (− 숫자 +) */
.sharp-n { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 0.74rem; color: var(--text-muted); }
.sharp-n b { min-width: 18px; text-align: center; color: var(--text-main); font-variant-numeric: tabular-nums; }
.sharp-n .mx-step { width: 22px; height: 22px; font-size: 0.8rem; }/* 오프닝 DB 리체스 필터 접기 */
.st-dbf-toggle { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 3px 2px; margin-bottom: 2px; background: none; border: none; color: var(--text-muted); font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; text-align: left; }
.st-dbf-toggle:hover { color: var(--accent-gold); }
.st-dbf-arrow { font-size: 0.62rem; flex: none; }
.st-dbf-name { flex: none; }
.st-dbf-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; opacity: 0.85; }/* 휴대폰 · 태블릿(1000px 이하): PC 에서 몇 단으로 나눴든(옆으로 나란히 둔 창 포함) 위아래 한 줄로. 체스판 맨 위는 그대로 */
@media (max-width: 1000px) {
  .st-layout .st-side, .st-layout .st-right { flex-direction: column !important; }
  .st-dockrow { flex-direction: column; align-items: stretch; }
  .st-dockrow > [data-panel] { flex: 1 1 auto; width: 100%; }
}
/* ---------- 휴대폰 · 태블릿 연구 · 분석: 체스판 고정 + 하단 탭 (js/research.js mobileTabs) ---------- */
.m-tabbar { display: none; }
.m-more { display: none; }
@media (max-width: 1000px) {
  #dock-bottom { max-height: none; overflow: visible; }
  html.m-app, html.m-app body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  html.m-app footer { display: none !important; }
  html.m-app .st-main { padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
  html.m-app .st-layout { --board-max: min(calc(100vw - 20px), calc(100vh - var(--m-top, 54px) - 300px)); --board-max: min(calc(100vw - 20px), calc(100dvh - var(--m-top, 54px) - 300px)); }
  html.m-app #st-editor:not([hidden]) { height: calc(100vh - var(--m-top, 54px)); height: calc(100dvh - var(--m-top, 54px)); gap: 6px; padding-top: 6px; box-sizing: border-box; }
  html.m-app #st-editor .an-board-col > * { flex: none; }
  html.m-app .st-side { display: none; }
  html.m-app #st-editor .st-layout > .st-right { order: -4; flex: none; max-height: 42vh; overflow-y: auto; }
  html.m-app #st-editor .an-board-col > #dock-bottom { order: -3; flex: 1 1 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; }
  html.m-app .m-off { display: none !important; }
  html.m-app .st-dockrow:not(:has(> :not(.m-off))) { display: none; }
  html.m-app .m-more:not(.m-off) { display: flex; gap: 8px; }
  html.m-app .m-more .tool-btn { flex: 1; min-height: 44px; }
  /* 탭 영역이 스크롤되므로 창 안쪽 스크롤 · 높이 제한은 없앰 */
  html.m-app .st-tree, html.m-app #st-chapters, html.m-app #db-moves, html.m-app #db-games { height: auto !important; max-height: none !important; overflow: visible !important; }
  /* 엔진: 평소에는 제목 줄(스위치 · 평가)만, 엔진 탭에서 전체 */
  html.m-app #st-engcard:not(.m-open) > :not(.an-engine-head) { display: none !important; }
  /* 모바일에 필요 없는 것 */
  html.m-app .st-grip, html.m-app .st-panel-x, html.m-app #eng-close, html.m-app .st-vresize, html.m-app .st-top-fold, html.m-app .st-eng-fold { display: none !important; }
  /* 터치 크기 */
  html.m-app .st-main .an-nav button { min-height: 44px; }
  html.m-app .st-card-head .an-card-title { white-space: nowrap; flex: none; }
  html.m-app .st-side-toggle { min-width: 40px; min-height: 36px; }
  html.m-app .st-tree-tools button, html.m-app #btn-promote, html.m-app #btn-delete { min-width: 40px; min-height: 36px; }
  html.m-app .st-tree .st-mv { display: inline-block; padding: 7px 6px; min-height: 34px; box-sizing: border-box; font-size: 0.95rem; }
  html.m-app .st-sym-line { flex-wrap: wrap; gap: 6px; }
  html.m-app .st-sym-line .st-sym { flex: 1 0 40px; min-height: 38px; font-size: 0.86rem; }
  html.m-app .st-sym-line .st-color { width: 30px; height: 30px; }
  html.m-app .st-sym-fold { min-width: 40px; min-height: 38px; }
  html.m-app .st-share { position: static; transform: none; width: 44px; height: 38px; }
  html.m-app .st-top-actions .tool-btn { min-height: 44px; }
  /* 하단 탭 */
  html.m-app .m-tabbar { order: 5; flex: none; display: flex; margin: 0 -10px; background: var(--card-bg); border-top: 1px solid var(--border-purple); padding-bottom: env(safe-area-inset-bottom, 0); }
  html.m-app .m-tab { flex: 1 1 0; min-width: 0; height: 50px; background: none; border: none; border-top: 2px solid transparent; color: var(--text-muted); font-family: inherit; font-size: 0.82rem; font-weight: 800; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html.m-app .m-tab.on { color: var(--accent-gold); border-top-color: var(--accent-gold); }
}