/*
 * 18-typing-line-select.css
 * 코딩연습 코드 영역 라인 select/호버 하이라이트 UI
 * - 라인 마커 컬럼 클릭 → 해당 라인 select toggle
 * - Shift+클릭 → 앵커~클릭라인 범위 select
 * - Streak된 라인은 자동으로 한 그룹(같은 색)으로 시각
 * - hover 시 반투명 라인 띠 표시
 */

/* ============================================================
   3열 Grid 재복원 — 13-typing-flat.css 의 2열 !important override를 상쇄
   [gutter 라인번호] [코드] [마커 컬럼]
   ============================================================ */
#pg-academy .typing-box--input .typing-input-wrapper,
#pg-academy .typing-box--free .typing-input-wrapper,
#pg-academy .typing-box--reference .typing-input-wrapper {
  grid-template-columns:
    var(--typing-gutter-width, 40px)
    minmax(0, 1fr)
    var(--typing-marker-width, 60px) !important;
}

/* textarea 우측 boundary 제한 — position:absolute 인 textarea 가 마커 컬럼을 덮어
   클릭 이벤트를 가로채지 않도록 right 를 마커 너비만큼 확한다. */
#pg-academy .typing-box--free .typing-overlay-input,
#pg-academy .typing-box--reference .typing-overlay-input {
  right: var(--typing-marker-width, 60px) !important;
  width: auto !important;
}

/* overlay — 전폭 배치 + absolute 로 실제 크기 결정 */
.typing-line-hover-overlay,
.typing-line-selection-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  grid-column: 1 / -1;
  grid-row: 1;
  pointer-events: none;
  z-index: 1;
}

.typing-line-hover-band {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(148, 163, 184, 0.08);
  border-left: 2px solid rgba(148, 163, 184, 0.42);
  transition: top 0.08s ease;
  pointer-events: none;
}

[data-theme="light"] .typing-line-hover-band {
  background: rgba(15, 23, 42, 0.04);
  border-left-color: rgba(15, 23, 42, 0.22);
}

.typing-line-selection-band {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  border-radius: 2px;
}

/* 그룹 색상 5개 순환 — 라 · 파랑 · 에메랄드 · 오렌지 · 핑크 */
.typing-line-selection-band[data-group="0"] {
  background: rgba(167, 139, 250, 0.24);
  border-left: 2px solid rgba(167, 139, 250, 0.85);
}
.typing-line-selection-band[data-group="1"] {
  background: rgba(96, 165, 250, 0.24);
  border-left: 2px solid rgba(96, 165, 250, 0.85);
}
.typing-line-selection-band[data-group="2"] {
  background: rgba(52, 211, 153, 0.22);
  border-left: 2px solid rgba(52, 211, 153, 0.85);
}
.typing-line-selection-band[data-group="3"] {
  background: rgba(251, 146, 60, 0.22);
  border-left: 2px solid rgba(251, 146, 60, 0.85);
}
.typing-line-selection-band[data-group="4"] {
  background: rgba(236, 72, 153, 0.22);
  border-left: 2px solid rgba(236, 72, 153, 0.85);
}

.typing-line-selection-band--error {
  background: rgba(239, 68, 68, 0.24);
  border-left: 3px solid rgba(239, 68, 68, 0.95);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.22);
}

[data-theme="light"] .typing-line-selection-band--error {
  background: rgba(220, 38, 38, 0.18);
  border-left-color: rgba(220, 38, 38, 0.9);
}

/* ============================================================
   마커 컬럼 — 살표 앵커가 될 세로 타임라인
   ============================================================ */
.typing-line-markers {
  position: relative;
  overflow: visible;
  background: rgba(148, 163, 184, 0.02);
}

/* 원 central을 관통하는 세로 점선 가이드 */
.typing-line-markers::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  border-left: 1px dashed rgba(148, 163, 184, 0.34);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .typing-line-markers::before {
  border-left-color: rgba(15, 23, 42, 0.18);
}

/* 각 라인 슬롯: 라인번호 span 과 동일한 26px 행 높이 유지 + 원 수직 central 정렬 */
.typing-line-markers span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--typing-code-line-height, 26px);
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: background 0.12s ease;
}
.typing-line-markers span:hover {
  background: rgba(148, 163, 184, 0.08);
}

/* 마커 원 default 스타일 (살표 출발점 앵커) */
.typing-line-markers .marker-circle {
  position: relative;
  width: 14px;
  height: 14px;
  border-width: 1.5px;
  border-style: solid;
  background: var(--color-bg-card);
  transition: background 0.12s ease, border-color 0.12s ease,
              transform 0.12s ease, box-shadow 0.12s ease;
}

[data-theme="dark"] .typing-line-markers .marker-circle:not(.active):not(.is-error) {
  border-color: rgba(148, 163, 184, 0.52);
  background: rgba(15, 23, 42, 0.42);
}

/* 미select 라인 hover */
.typing-line-markers span:hover .marker-circle:not(.active) {
  border-color: var(--color-brand);
  background: rgba(34, 211, 238, 0.12);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
  transform: scale(1.15);
}

/* 활성 원 — internal 흰 점 (앵커 포인트 중심 표시) */
.typing-line-markers .marker-circle.active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 활성 원 — 외곽 링 (살표 출발점 시각 강조) */
.typing-line-markers .marker-circle.active {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.04),
    0 0 10px rgba(255, 255, 255, 0.12);
}

.typing-line-markers .marker-circle.is-error {
  background: rgb(239, 68, 68);
  border-color: rgb(239, 68, 68);
  box-shadow:
    0 0 0 4px rgba(239, 68, 68, 0.18),
    0 0 12px rgba(239, 68, 68, 0.55);
  transform: scale(1.12);
}

/* 마커 원 그룹Stars 채움 색 */
.typing-line-markers .marker-circle[data-group="0"] {
  background: rgb(167, 139, 250);
  border-color: rgb(167, 139, 250);
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.55);
}
.typing-line-markers .marker-circle[data-group="1"] {
  background: rgb(96, 165, 250);
  border-color: rgb(96, 165, 250);
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.55);
}
.typing-line-markers .marker-circle[data-group="2"] {
  background: rgb(52, 211, 153);
  border-color: rgb(52, 211, 153);
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.55);
}
.typing-line-markers .marker-circle[data-group="3"] {
  background: rgb(251, 146, 60);
  border-color: rgb(251, 146, 60);
  box-shadow: 0 0 6px rgba(251, 146, 60, 0.55);
}
.typing-line-markers .marker-circle[data-group="4"] {
  background: rgb(236, 72, 153);
  border-color: rgb(236, 72, 153);
  box-shadow: 0 0 6px rgba(236, 72, 153, 0.55);
}

/* select 라인 범례(이미지의 bottom legend) */
.typing-line-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-border-main);
  background: rgba(255, 255, 255, 0.02);
}
.typing-line-legend:empty {
  display: none;
}
.typing-line-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.typing-line-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.typing-line-legend-dot[data-group="0"] { background: rgb(167, 139, 250); }
.typing-line-legend-dot[data-group="1"] { background: rgb(96, 165, 250); }
.typing-line-legend-dot[data-group="2"] { background: rgb(52, 211, 153); }
.typing-line-legend-dot[data-group="3"] { background: rgb(251, 146, 60); }
.typing-line-legend-dot[data-group="4"] { background: rgb(236, 72, 153); }