/* 졸졸이 사이드바 메뉴 - 통합 스타일시트 ---------------------------------------------------------------
 * 기존 s_image.css(stalker_type=='1') / s_text.css(stalker_type=='2') 를 통합
 * 테마는 #alwayStalker 요소에 s_1 / s_2 클래스를 붙여서 선택합니다. (stalker.html 참고)
 */

/* =========================================================
   공통 (모든 타입 공통)
   ========================================================= */
#alwayStalker { position:absolute; }
#alwayStalker:hover { z-index:999; background:transparent; }

/* 본문 옆 자동 위치 계산이 끝나기 전까지는 숨겨서
   "좌측에 잠깐 보였다가 우측으로 이동"하는 튐 현상을 방지.
   stalker.js가 left 계산을 마치면 stk-ready 클래스를 붙여 살짝 페이드인 시킴 */
#alwayStalker { opacity: 0; transition: opacity 0.15s ease; }
#alwayStalker.stk-ready { opacity: 1; }

#side li { padding:10px; list-style:none; text-align:center; }
#side li a { font-size:13px; font-weight:bold; text-decoration:none; }

#side li ul { padding:3px 0; display:none; }
#side li.on ul { display:block;}
#side li ul span { padding:0; top:-1px;}
#side li ul span a { padding:6px 5px 6px 10px; color:#8F8F8F !important; }

#side li ul span ul span a { padding:6px 5px 6px 15px; color:#8F8F8F !important; }


/* =========================================================
   타입 1: s_1 (이미지형) - 공통 규칙 외 추가 없음
   ========================================================= */


/* =========================================================
   타입 2: s_2 (텍스트형) - side_t / side_b caret 영역
   ========================================================= */
.alwayStalker.s_2 #side li { border-bottom:0px solid #8C8C8C; }

.alwayStalker.s_2 #side_t { text-align:center; border-bottom:0px solid #8C8C8C; }
.alwayStalker.s_2 #side_t a { font-size:14px; font-weight:bold; text-decoration:none; }

.alwayStalker.s_2 #side_b { text-align:center; font-size:14px; font-weight:bold; text-decoration:none;}

/* =========================================================
   자동 스크롤 컨트롤 (속도 다이얼 + Start/Stop 버튼)
   메뉴(#side) 리스트 아래, Bottom 화살표 위에 위치
   ========================================================= */
.stk-scroll-box {
  padding: 8px 6px 5px;
  border-top: 1px solid #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* 이미지 액자(stalker_type=1)용: 메뉴 중간 이미지가 이 영역까지 이어지므로
   구분선을 없애 이미지 경계가 끊겨 보이지 않도록 함 */
.stk-scroll-box.stk-scroll-box-imgframe {
  border-top: none;
}

.stk-speed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.stk-speed-svg {
  width: 34px;
  height: 34px;
  cursor: grab;
  touch-action: none;
}
.stk-speed-svg:active { cursor: grabbing; }
.stk-speed-track { fill: none; stroke: #eeeeee; stroke-width: 5; }
.stk-speed-fill {
  fill: none;
  stroke: #4a90e2;
  stroke-width: 5;
  stroke-linecap: round;
  transform-origin: 18px 18px;
  transform: rotate(-90deg);
  transition: stroke-dasharray 0.05s linear;
}
.stk-speed-handle { fill: #4a90e2; stroke: #ffffff; stroke-width: 1.5; }
.stk-speed-value { font-size: 9px; color: #999999; font-weight: 600; }

.stk-scroll-toggle {
  display: inline-block;
  width: 90%;
  padding: 6px 0px;
  border: none;
  border-radius: 4px;
  background-color: #4a90e2;
  color: #ffffff;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.stk-scroll-toggle.active { background-color: #e2445c; }
.stk-scroll-toggle:hover { opacity: 0.9; }