/* 유어스튜브 왼쪽 메뉴 (2026-10-18)
   - 아이콘: Lucide 둥근 선 인라인 SVG (container.html 안), 24px · 선 1.75 · 글자색
   - 선택된 줄: 아이콘을 채우고 줄 전체에 둥근 밝은 배경 (유튜브 방식), 파란 점 없음
   - 접힌 메뉴(1252px 이상): 아이콘 위 · 10px 글자 아래
   색은 아래 변수로 정해요. 밤 모드는 night-mode.css 링크가 있을 때(켜기·끄기 버튼 포함) 자동으로 바뀌어요. */
html {
  --ytx-sb-fg: #0f0f0f;
  --ytx-sb-sub: #606060;
  --ytx-sb-hover: #f2f2f2;
  --ytx-sb-active: #e5e5e5;
  --ytx-sb-line: rgba(0, 0, 0, 0.1);
}
html:has(link.night-mode-css) {
  --ytx-sb-fg: #f1f1f1;
  --ytx-sb-sub: #aaaaaa;
  --ytx-sb-hover: #1f1f1f;
  --ytx-sb-active: #2e2e2e;
  --ytx-sb-line: rgba(255, 255, 255, 0.12);
}

/* 묶음과 구분선 */
.yp_side_drawer ul.sections {padding: 12px;border-bottom: 1px solid var(--ytx-sb-line);}
.yp_side_drawer ul.sections h3.ytx-sec-title {margin: 0;padding: 6px 12px 4px;font-size: 13px;line-height: 20px;font-weight: 600;letter-spacing: 0;text-transform: none;color: var(--ytx-sb-sub);}

/* 한 줄: 높이 40 · 아이콘-글자 24 · 글자 14 · 좌우 12 · 모서리 10 */
.yp_side_drawer ul.sections li a {display: flex;align-items: center;gap: 24px;height: 40px;line-height: 40px;padding: 0 12px;border-radius: 10px;font-size: 14px;font-weight: 400;color: var(--ytx-sb-fg) !important;}
.yp_side_drawer ul.sections li a:before {display: none !important;}
.yp_side_drawer ul.sections li a svg.ytx-ic {flex: 0 0 24px;width: 24px;height: 24px;margin: 0;fill: none !important;}
.yp_side_drawer ul.sections li a span {overflow: hidden;text-overflow: ellipsis;}
.yp_side_drawer ul.sections li a:hover,
.yp_side_drawer ul.sections li:not(.active) a:focus {background-color: var(--ytx-sb-hover) !important;color: var(--ytx-sb-fg) !important;}

/* 선택된 줄 */
body .yp_side_drawer ul.sections li.active a,
body .yp_side_drawer ul.sections li.active a:hover,
body .yp_side_drawer ul.sections li.active a:focus {background-color: var(--ytx-sb-active) !important;color: var(--ytx-sb-fg) !important;font-weight: 500;}
.yp_side_drawer ul.sections li.active svg.ytx-ic .f {fill: currentColor;}
.yp_side_drawer ul.sections li.active svg.ytx-ic .d {stroke: var(--ytx-sb-active);}
.yp_side_drawer ul.sections li.active#shorts_menu_ svg.ytx-ic .d {fill: var(--ytx-sb-active);}

/* 휴대폰 메뉴 머리의 닫기(X) */
.yp_side_drawer .open_side_menu_head svg.ytx-ic {display: block;width: 24px;height: 24px;fill: none !important;color: var(--ytx-sb-fg);}

/* 펼친 메뉴 너비 (1252px 이상) */
@media (min-width: 1252px) {
  body.side_open .yp_side_drawer {width: 240px;}
  body.side_open .yp_side_menu.has_side_menu {margin-left: 240px;}

  /* 접힌 메뉴: 아이콘 위, 작은 글자 아래 */
  body:not(.side_open) .yp_side_drawer {width: 72px;}
  body:not(.side_open) .yp_side_menu.has_side_menu {margin-left: 72px;}
  body:not(.side_open) .yp_side_drawer ul.sections {padding: 4px;border-bottom: 0;}
  body:not(.side_open) .yp_side_drawer ul.sections h3 {display: none;}
  body:not(.side_open) .yp_side_drawer .more_links_list {display: block !important;}
  body:not(.side_open) .yp_side_drawer ul.sections li a {flex-direction: column;justify-content: center;gap: 6px;height: 74px;line-height: normal;padding: 16px 0 14px;}
  body:not(.side_open) .yp_side_drawer ul.sections li a span {display: block !important;max-width: 62px;font-size: 10px;line-height: 14px;white-space: nowrap;}
}