/*
 * (가로) 템플릿 전용 스타일
 * - PC: 카테고리 사이드바를 화면 전체 기준 가장 왼쪽 컬럼으로 배치하고
 *   오른쪽 남은 영역 전체를 메인 콘텐츠(article)로 사용하는 2단 레이아웃
 * - 상단 nav("홈"/"운동영상" 등)도 같은 좌측 기준선에 맞춰 정렬
 * - 모바일(1280px 이하)에는 영향을 주지 않음(기존 햄버거+드로어 유지, 카드 그리드는
 *   header/basic.ejs 쪽 mobileCategoryGrid 마크업에서 별도 처리)
 */

:root {
  --horizontal-sidebar-width: 260px;
  --horizontal-gap: 24px;
  --horizontal-side-padding: 32px;
}

/*
 * 이 파일은 setting.mainTemplate === 'horizontal' 일 때만 head.ejs에서 로드됩니다.
 * 따라서 아래 규칙은 별도의 :has()/body 스코프 없이 바로 main/header에 적용해도
 * 다른 템플릿(기본 템플릿 등)에는 전혀 영향을 주지 않습니다.
 */
@media (min-width: 1281px) {
  /* PC: 검색창을 우측 끝(space-between)이 아니라 로고 바로 옆으로 이동.
     검색창은 폭을 제한해 너무 커지지 않도록 한다. */
  header #main {
    justify-content: flex-start;
    gap: 28px;
  }

  header #main .search {
    width: 320px;
    max-width: 320px;
    flex-shrink: 0;
  }

  header #main .search form {
    width: 100%;
  }

  /* 전체 페이지를 [카테고리 사이드바] + [메인 콘텐츠] 2단 그리드로 재구성 */
  main {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: var(--horizontal-sidebar-width) minmax(0, 1fr);
    align-items: flex-start;
    gap: var(--horizontal-gap);
    margin: 0;
    padding: 0 var(--horizontal-side-padding);
    box-sizing: border-box;
  }

  /* aside는 카테고리 사이드바를 포함하는 왼쪽 고정 컬럼 */
  main > aside {
    order: 1;
    width: 100%;
    grid-column: 1;
  }

  /* article은 오른쪽 가변 컬럼 - 화면이 넓어질수록 자연스럽게 확장 */
  main > article {
    order: 2;
    grid-column: 2;
    width: 100%;
    min-width: 0;
  }

  /* article 내부에 폭 고정된 하위 wrap이 있어도 자연스럽게 확장되도록 */
  main > article > .wrap {
    width: 100%;
  }

  /* 상단 헤더 영역(#sub, #main)도 사이드바와 동일한 좌측 기준선에 정렬 */
  header #sub,
  header #main {
    width: 100%;
    max-width: none;
    padding: 0 var(--horizontal-side-padding);
    box-sizing: border-box;
  }

  /* 카테고리는 왼쪽 Sidebar 한 곳에서만 관리하므로, 상단 홈/운동영상/카테고리1~5
     가로 메뉴(#nav 전체)는 PC 화면에서 완전히 제거한다. 높이/여백도 함께 사라지도록
     display:none으로 처리(공간을 차지하는 잔여 margin/padding 없음). */
  header #nav {
    display: none;
  }

  /* leftWing/rightWing 고정 배너는 그리드 레이아웃과 충돌하므로 가로 템플릿에서는 숨김 */
  #banner.leftWing,
  #banner.rightWing {
    display: none;
  }

  /*
   * 요청 32~34: 배너 좌측 여백 제거.
   * 원인: style.css의 #banner.banner__box__* 는 max-width:1280px 로 폭이 제한되어
   * 있고, 부모 article은 style.css에서 flex-direction:column; align-items:center
   * 이므로 이 폭 제한된 배너가 넓어진 article(사이드바 오른쪽 전체 영역) 안에서
   * "가운데 정렬"되어 왼쪽에 불필요한 여백이 생긴다.
   * 가로 템플릿에서는 article이 카테고리 Sidebar 바로 오른쪽부터 시작하는 가변
   * 폭 컬럼이므로, 배너 박스가 article 폭 전체를 그대로 채우도록 max-width를
   * 해제하고 좌측 정렬(align-self:stretch)한다. style.css 자체는 기본 템플릿과
   * 공유되므로 수정하지 않고 이 파일(가로 템플릿 전용)에서만 override한다.
   */
  main > article > #banner.banner__box__indexTop,
  main > article > #banner.banner__box__indexBottom,
  main > article > #banner.banner__box__articleTop,
  main > article > #banner.banner__box__articleCenter,
  main > article > #banner.banner__box__articleBottom,
  main > article > #banner.banner__box__articleContent,
  main > article > #banner.banner__box__articleContentBottom,
  main > article > #banner.banner__box__custom,
  main > article > .wrap > #banner.banner__box__indexTop,
  main > article > .wrap > #banner.banner__box__indexBottom,
  main > article > .wrap > #banner.banner__box__articleTop,
  main > article > .wrap > #banner.banner__box__articleCenter,
  main > article > .wrap > #banner.banner__box__articleBottom,
  main > article > .wrap > #banner.banner__box__articleContent,
  main > article > .wrap > #banner.banner__box__articleContentBottom,
  main > article > .wrap > #banner.banner__box__custom {
    max-width: none;
    width: 100%;
    align-self: stretch;
    margin-left: 0;
    margin-right: 0;
  }

  /* 헤더 영역 배너(#banner.banner__box__header)도 헤더가 사이드바 기준선에
     맞춰 좌측 패딩을 쓰므로 동일하게 폭 제한을 해제한다. */
  header #banner.banner__box__header {
    max-width: none;
    width: 100%;
  }

  /*
   * PC 배너 사이 간격 미세 조정.
   * bannerGapDesktop이 0으로 설정돼 있어 배너끼리 완전히 붙어 보이는 문제를
   * 해결하기 위해 최소 4px 간격을 보장한다(요청 범위: 3~5px).
   * DB 값(bannerGapDesktop)이 4px보다 크게 설정되면 그 값을 그대로 사용하고,
   * 0이거나 더 작을 때만 4px로 보정되므로 기존 1단/2단/3단/4단 grid 열 개수
   * (grid-template-columns, commons.ejs가 담당)에는 전혀 영향을 주지 않는다.
   */
  main > article > #banner.banner__box__indexTop,
  main > article > #banner.banner__box__indexBottom,
  main > article > #banner.banner__box__articleTop,
  main > article > #banner.banner__box__articleCenter,
  main > article > #banner.banner__box__articleBottom,
  main > article > #banner.banner__box__articleContent,
  main > article > #banner.banner__box__articleContentBottom,
  main > article > #banner.banner__box__custom,
  main > article > .wrap > #banner.banner__box__indexTop,
  main > article > .wrap > #banner.banner__box__indexBottom,
  main > article > .wrap > #banner.banner__box__articleTop,
  main > article > .wrap > #banner.banner__box__articleCenter,
  main > article > .wrap > #banner.banner__box__articleBottom,
  main > article > .wrap > #banner.banner__box__articleContent,
  main > article > .wrap > #banner.banner__box__articleContentBottom,
  main > article > .wrap > #banner.banner__box__custom {
    gap: max(var(--banner-gap), 4px);
  }
}

/* Menu Sidebar (아코디언) - 관리자 메뉴 관리 데이터 기반 */
/* 요청 #8: 사이드바 배경색 관리자 설정(--sidebar-bg-color-light, head.ejs에서 주입) 적용 */
.menuSidebar {
  background-color: var(--sidebar-bg-color-light, #fff);
  border-radius: 12px;
  padding: 16px 0;
  box-sizing: border-box;
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 20px;
}

[data-theme='dark'] .menuSidebar {
  background-color: var(--sidebar-bg-color-dark, #1a1a1a);
  border: 1px solid var(--sidebar-border-color-dark, rgba(34, 197, 94, 0.2));
}

.menuAccordion {
  display: flex;
  flex-direction: column;
}

/* hasChildren 메뉴는 [메뉴명 링크] + [펼치기 버튼]을 한 줄에 나란히 배치.
   두 영역은 완전히 분리된 클릭 타겟이다:
   - .menuNodeLink(a) 클릭 → 해당 메뉴 페이지로 이동
   - .menuToggleBtn(button) 클릭 → 하위 메뉴 펼침/접힘만 담당 */
.menuNodeRow {
  display: flex;
  align-items: stretch;
}

.menuNodeRow .menuNodeLink {
  flex: 1;
  min-width: 0;
}

.menuNodeLink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: rgba(0, 0, 0, 0.75);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

[data-theme='dark'] .menuNodeLink {
  color: rgba(255, 255, 255, 0.8);
}

.menuNodeLink:hover {
  background-color: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--video-accent-color, #22c55e);
}

[data-theme='dark'] .menuNodeLink:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* 메뉴 아이콘: 관리자에서 등록한 그림/아이콘은 글씨 크기에 맞게 자동 축소 표시 */
.menuIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  color: rgba(0, 0, 0, 0.4);
}

[data-theme='dark'] .menuIcon {
  color: rgba(255, 255, 255, 0.5);
}

.menuIcon img {
  /* [항목4] 관리자 설정(--menu-icon-size)이 없으면 기존 하드코딩 기본값 18px 그대로 사용(왼쪽 메뉴 버전1) */
  width: var(--menu-icon-size, 18px);
  height: var(--menu-icon-size, 18px);
  object-fit: contain;
}

.menuName {
  flex: 1;
  font-size: 0.95em;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 펼치기/접기 전용 버튼 (▼/▶) - 메뉴명 클릭과 완전히 분리된 클릭 영역 */
.menuToggleBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  border: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.menuToggleBtn:hover {
  color: rgba(0, 0, 0, 0.7);
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme='dark'] .menuToggleBtn {
  color: rgba(255, 255, 255, 0.4);
}

[data-theme='dark'] .menuToggleBtn:hover {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.08);
}

.menuToggleBtn i {
  transition: transform 0.15s;
}

/* 기본 상태(open): 펼침(▼ 형태로 원위치), 접힘 상태: ▶ 형태로 -90도 회전
   서버 렌더링 시 하위 메뉴가 있는 모든 항목에 기본적으로 .open 클래스가
   부여되어 페이지 로드시 항상 펼쳐진 상태로 보인다. */
.menuToggleBtn i {
  transform: rotate(0deg);
}

.menuNode.hasChildren:not(.open) > .menuNodeRow .menuToggleBtn i {
  transform: rotate(-90deg);
}

.menuSubList {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.03);
}

[data-theme='dark'] .menuSubList {
  background-color: rgba(255, 255, 255, 0.04);
}

.menuNode.hasChildren:not(.open) > .menuSubList {
  display: none;
}

.menuSubItem a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 48px;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.6);
}

/* 하위 메뉴(subMenu) 아이콘: 상위 메뉴 아이콘(.menuIcon)보다 살짝 작게, 들여쓰기 padding과
   자연스럽게 어울리도록 좌측 여백은 padding-left로 이미 확보되어 있어 width만 축소 지정 */
.menuSubIcon {
  width: 16px;
  flex-shrink: 0;
}

.menuSubIcon img {
  width: 16px;
  height: 16px;
}

[data-theme='dark'] .menuSubItem a {
  color: rgba(255, 255, 255, 0.65);
}

.menuSubItem a:hover {
  color: var(--video-accent-color, #22c55e);
  background-color: rgba(0, 0, 0, 0.04);
}

[data-theme='dark'] .menuSubItem a:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* 모바일(1280px 이하): PC 사이드바는 숨기고, 기존 햄버거 드로어 방식 유지 */
@media (max-width: 1280px) {
  .menuSidebar {
    display: none;
  }
}

/*
 * 모바일 상단 헤더 한 줄 강제 배치: [로고] [검색바] [햄버거] (알림 종 아이콘 완전 제거)
 * - 기존 header/basic.css는 로고(70px 행) + 검색창(별도 행)의 2단(134px) 구조라
 *   header 자체를 grid로 재구성해 로고/검색창/햄버거가 한 줄에 오도록 override한다.
 * - basic.ejs/basic.css는 기본 템플릿과 공유되므로 직접 수정하지 않고, 이 파일이
 *   setting.mainTemplate === 'horizontal' 일 때만 로드되는 점을 이용해 override한다.
 * - 비율: 헤더 전체 폭 기준 로고 50% / 검색바 33% / 햄버거 17%
 *   → header를 [main(5fr)][toggle(1fr)] 2컬럼 그리드로 나누면 main=83.3%, toggle=16.7%.
 *     main 내부를 flex로 [logo(60%)][search(40%)]로 나누면
 *     전체 기준 logo=83.3%*60%=50%, search=83.3%*40%=33.3%, toggle=16.7% 가 정확히 나온다.
 * - 320px~430px 폭에서도 한 줄이 깨지지 않도록 로고/검색창 크기를 추가로 축소한다.
 */
@media (max-width: 1280px) {
  header {
    display: grid;
    grid-template-columns: 5fr 1fr;
    grid-template-areas: "main toggle";
    align-items: center;
    height: 56px;
  }

  main {
    margin-top: 56px;
  }

  /* 알림(종) 아이콘 완전 제거 - 모바일 헤더에는 로고/검색바/햄버거 3개만 남긴다 */
  header #alarmBtn {
    display: none !important;
  }

  header #toggleBtn {
    grid-area: toggle;
    position: static;
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  header #toggleBtn svg {
    width: 20px;
  }

  header #sub {
    display: none;
  }

  header #main {
    grid-area: main;
    height: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    min-width: 0;
    box-sizing: border-box;
  }

  /* 로고 영역: 헤더 전체 폭의 약 50% */
  header #main .logo {
    flex: 0 0 60%;
    max-width: 60%;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    overflow: hidden;
    font-size: 1em;
  }

  header #main .logo a {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 요청 #1: 모바일 로고가 너무 작게 보이지 않도록 확대(기존 26px -> 44px).
     헤더 높이 자체도 아래에서 함께 늘려 로고가 잘리지 않게 한다. */
  header #main .logo img {
    max-height: 44px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
  }

  /* 검색바 영역: 헤더 전체 폭의 약 33% (한 줄 헤더 안에 자연스럽게, 돋보기 아이콘 유지) */
  header #main .search {
    flex: 0 0 40%;
    max-width: 40%;
    width: auto;
    display: block;
    margin: 0;
    min-width: 0;
  }

  header #main .search.active {
    display: block;
  }

  header #main .search form {
    height: 30px;
    border-radius: 4px;
  }

  header #main .search input {
    min-width: 0;
    width: 100%;
    padding: 0 8px;
    font-size: 0.8em;
  }

  header #main .search button {
    padding: 0 8px;
    flex-shrink: 0;
  }

  header #main .search button svg {
    width: 12px;
  }
}

/* 매우 좁은 화면(320px~430px)에서도 한 줄이 깨지지 않도록 추가 축소 (비율은 동일하게 유지) */
@media (max-width: 430px) {
  header #main .logo {
    font-size: 0.9em;
  }

  header #main .logo img {
    max-height: 36px;
  }

  header #main .search input {
    font-size: 0.75em;
    padding: 0 6px;
  }

  header #main .search button svg {
    width: 11px;
  }
}

/* 모바일 Off-canvas Drawer 안의 카테고리 카드 그리드 (3열, 좁은 화면 2열) */
.mobileCategoryGrid {
  display: none;
}

/* [모바일 UI 개선] 카테고리 카드: 기존 2열 아이콘 그리드 -> 1열 세로형 카드 리스트로 구조 변경.
   카테고리 데이터/href/펼치기 기능은 JS(header/basic.ejs)에서 그대로 유지하고, 여기서는
   순수 박스 구조(1열, 카드 모양, 큰 화살표 토글 버튼)만 다시 그린다.
   하위메뉴(nav > ul)는 기존 세로 리스트 구조를 그대로 유지(변경하지 않음). */
@media (max-width: 1280px) {
  .mobileCategoryGrid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 10px 20px 10px;
  }

  /* 카드 박스 자체(펼침 상태에서도 카드 테두리/배경이 한 덩어리로 보이도록 이 요소에 스타일 부여) */
  .mobileCategoryGrid .mobileCategoryItem {
    background-color: rgba(0, 0, 0, 0.04);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.25);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  }

  [data-theme='dark'] .mobileCategoryGrid .mobileCategoryItem {
    background-color: rgba(255, 255, 255, 0.05);
  }

  .mobileCategoryGrid .mobileCategoryItem:active,
  .mobileCategoryGrid .mobileCategoryItem.open {
    border-color: rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.6);
    box-shadow: 0 0 12px 0 rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.35);
  }

  /* 카드 안 가로 행: [아이콘+이름 링크] + [펼치기/접기 화살표 버튼] */
  .mobileCategoryGrid .mobileCategoryRow {
    display: flex;
    align-items: stretch;
  }

  .mobileCategoryGrid .mobileCategoryItem .mobileCategoryLink {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    height: 56px;
    padding: 0 16px;
    text-align: left;
    font-size: 0.95em;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.75);
    word-break: keep-all;
  }

  [data-theme='dark'] .mobileCategoryGrid .mobileCategoryItem .mobileCategoryLink {
    color: rgba(255, 255, 255, 0.9);
  }

  .mobileCategoryGrid .mobileCategoryItem .categoryIcon {
    flex-shrink: 0;
    width: auto;
    font-size: 1.2em;
    color: var(--video-accent-color, #22c55e);
  }

  /* 관리자에서 등록한 그림/아이콘은 글씨 크기에 맞게 자동 축소.
     [항목4] 관리자 설정(--menu-icon-size, 모바일 미디어쿼리 내에서는 모바일 값)이 없으면
     기존 하드코딩 기본값 1.2em 그대로 사용 */
  .mobileCategoryGrid .mobileCategoryItem .categoryIcon img {
    width: var(--menu-icon-size, 1.2em);
    height: var(--menu-icon-size, 1.2em);
    object-fit: contain;
  }

  .mobileCategoryGrid .mobileCategoryItem .categoryName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 펼치기/접기 화살표 버튼: "크게 잘 보이게" 요청에 맞춰 카드 오른쪽에 넓은 탭 영역 + 큰 아이콘 */
  .mobileCategoryGrid .mobileCategoryToggleBtn {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.2);
    color: var(--video-accent-color, #22c55e);
    font-size: 1.2em;
    cursor: pointer;
  }

  [data-theme='dark'] .mobileCategoryGrid .mobileCategoryToggleBtn {
    border-left-color: rgba(255, 255, 255, 0.12);
  }

  .mobileCategoryGrid .mobileCategoryToggleBtn i {
    transition: transform 0.2s ease;
  }

  .mobileCategoryGrid .mobileCategoryItem.open .mobileCategoryToggleBtn i {
    transform: rotate(180deg);
  }

  /* 하위 카테고리 목록: 기본은 접힌 상태(높이 0으로 숨김), .open일 때만 펼침 */
  .mobileCategoryGrid .mobileCategorySubList {
    max-height: 0;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: max-height 0.25s ease;
  }

  .mobileCategoryGrid .mobileCategoryItem.open .mobileCategorySubList {
    max-height: 600px;
  }

  .mobileCategoryGrid .mobileCategorySubList li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 12px 44px;
    font-size: 0.9em;
    color: rgba(0, 0, 0, 0.65);
    border-top: 1px solid rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.15);
  }

  [data-theme='dark'] .mobileCategoryGrid .mobileCategorySubList li a {
    color: rgba(255, 255, 255, 0.75);
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  /* 하위 메뉴 이미지: 상위 카테고리 아이콘(categoryIcon)과 동일한 사이즈로 표시(PC 사이드바와 동일 규칙) */
  .mobileCategoryGrid .mobileCategorySubList .categorySubIcon {
    flex-shrink: 0;
    width: auto;
    display: inline-flex;
  }

  .mobileCategoryGrid .mobileCategorySubList .categorySubIcon img {
    width: 1.1em;
    height: 1.1em;
    object-fit: contain;
  }
}

/* 요청 #12: 모바일 상단 계정 영역([마이페이지][로그아웃] 또는 [회원가입][로그인])도
   Dark Glass 스타일로 통일. 항목 수와 관계없이 동일한 카드 디자인을 사용한다. */
@media (max-width: 1280px) {
  header #nav .mypage li a {
    background-color: rgba(255, 255, 255, 0.05);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.25);
    border-radius: 10px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  }

  header #nav .mypage li a:hover {
    border-color: rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.55);
    box-shadow: 0 0 10px 0 rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.3);
    background-color: rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.08);
  }

  /* 요청 #13/#14: 모바일 메뉴 최하단 찜한목록/시청기록. 위쪽에 구분선을 두어
     카테고리/하위메뉴 영역과 시각적으로 분리한다. */
  .mobileBottomMenu {
    display: flex;
    flex-direction: column;
    margin: 0 10px 20px 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    gap: 4px;
  }

  [data-theme='dark'] .mobileBottomMenu {
    border-top-color: rgba(255, 255, 255, 0.12);
  }

  body:not([data-theme='dark']) .mobileBottomMenu {
    border-top-color: rgba(0, 0, 0, 0.12);
  }

  .mobileBottomMenu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border-radius: 8px;
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.8);
  }

  body:not([data-theme='dark']) .mobileBottomMenu a {
    color: rgba(0, 0, 0, 0.75);
  }

  .mobileBottomMenu a i {
    width: 18px;
    text-align: center;
    color: var(--video-accent-color, #22c55e);
  }

  .mobileBottomMenu a:hover {
    background-color: rgba(var(--video-accent-color-rgb, 34, 197, 94), 0.08);
  }
}

/*
 * 모바일 배너 좌우 여백 추가.
 * - 기존 style.css의 모바일 규칙(@media max-width:1280px main{padding:0 10px})은
 *   이미 main 전체에 10px 좌우 패딩을 주고 있어 배너도 화면 끝에 붙지는 않지만,
 *   요청에 맞춰 가로 템플릿에서는 이를 명시적으로 8~12px 범위로 재확인/보정하고
 *   배너칸 사이 간격(gap)도 화면폭에 관계없이 최소값을 보장한다.
 * - 배너 자체의 grid-template-columns(단수)는 commons.ejs의 인라인 스타일이
 *   그대로 담당하므로 이 파일에서는 여백/간격만 다루고 단수 로직은 건드리지 않는다.
 * - 반응형(찌그러짐/잘림/가로스크롤 방지)은 style.css의 #banner img{width:100%;
 *   height:auto; object-fit:contain} 규칙을 그대로 유지하며 override하지 않는다.
 */
@media (max-width: 1280px) {
  main {
    padding: 0 10px;
    box-sizing: border-box;
  }

  #banner.banner_box {
    box-sizing: border-box;
  }

  /* 배너 칸 사이 간격이 0으로 설정돼 있어도(bannerGapMobile=0) 최소 3px은
     유지되도록 보장 - 배너끼리 완전히 붙어 보이지 않을 정도만(요청 범위: 2~4px) */
  #banner.banner__box__indexTop,
  #banner.banner__box__indexBottom,
  #banner.banner__box__articleTop,
  #banner.banner__box__articleCenter,
  #banner.banner__box__articleBottom,
  #banner.banner__box__articleContent,
  #banner.banner__box__articleContentBottom,
  #banner.banner__box__custom,
  #banner.banner__box__sideTop,
  #banner.banner__box__sideBottom {
    gap: max(var(--banner-mobile-gap), 3px);
  }

  /* 배너 이미지가 늘어난 폭 안에서도 찌그러지지 않고 가로 스크롤이 생기지 않도록
     각 배너 슬롯이 폭을 100% 초과하지 않게 고정 */
  #banner .banner,
  #banner .banner a {
    max-width: 100%;
    overflow: hidden;
  }
}



/* ============================================================
 * [왼쪽 메뉴 템플릿 버전2 - 귀여운 버전]
 * 관리자 > 디자인설정 > "왼쪽 메뉴 템플릿"에서 v2 선택 시 적용.
 * 특징: 아이콘/색상 강조, 둥근 카드형 메뉴 항목, 캐주얼한 느낌의 여백/그림자.
 * 기존 v1(.menuSidebar) 클래스는 그대로 두고, v2 전용(.menuSidebar--v2)
 * 클래스가 함께 부여된 경우에만 아래 스타일이 추가로 적용된다.
 * ============================================================ */
.menuSidebar--v2 {
  background-color: var(--sidebar-bg-color-light, #fff);
  border-radius: 20px;
  padding: 18px 12px;
  box-shadow: 0 4px 24px 0 rgba(34, 197, 94, 0.12);
}

[data-theme='dark'] .menuSidebar--v2 {
  background-color: var(--sidebar-bg-color-dark, #1a1a1a);
  border: 1px solid var(--sidebar-border-color-dark, rgba(34, 197, 94, 0.25));
}

.menuAccordion--v2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menuSidebar--v2 .menuNodeRow {
  border-radius: 14px;
  overflow: hidden;
}

/* 요청: 카테고리(왼쪽 메뉴) 항목을 감싸는 진한 녹색 배경(필박스). 관리자 설정(기타 디자인
   > 카테고리 배경색, categoryPillBackgroundColor)이 없으면 기존 하드코딩 초록(34, 197, 94)을
   그대로 사용한다. */
.menuSidebar--v2 .menuNodeLink {
  border-left: none;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 600;
  background-color: rgba(var(--category-pill-bg-color-rgb, 34, 197, 94), 0.06);
  transition: transform 0.15s, background-color 0.15s;
}

[data-theme='dark'] .menuSidebar--v2 .menuNodeLink {
  background-color: rgba(var(--category-pill-bg-color-rgb, 34, 197, 94), 0.1);
}

.menuSidebar--v2 .menuNodeLink:hover {
  background-color: var(--video-accent-color, #22c55e);
  color: #fff;
  border-left: none;
  transform: translateY(-1px);
}

.menuSidebar--v2 .menuIcon--v2 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(var(--category-pill-bg-color-rgb, 34, 197, 94), 0.15);
  color: var(--video-accent-color, #22c55e);
  font-size: 0.95em;
}

.menuSidebar--v2 .menuNodeLink:hover .menuIcon--v2 {
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.menuSidebar--v2 .menuIcon--v2 img {
  /* [항목4] 관리자 설정(--menu-icon-size)이 없으면 기존 하드코딩 기본값 20px 그대로 사용 */
  width: var(--menu-icon-size, 20px);
  height: var(--menu-icon-size, 20px);
  border-radius: 50%;
}

.menuSidebar--v2 .menuToggleBtn {
  border-radius: 10px;
  margin-right: 4px;
}

.menuSidebar--v2 .menuSubList {
  background-color: transparent;
  gap: 2px;
  padding: 4px 0 4px 8px;
}

.menuSidebar--v2 .menuSubItem a {
  border-radius: 10px;
  margin: 0 4px;
  padding: 8px 12px 8px 40px;
}

.menuSidebar--v2 .menuSubItem a:hover {
  background-color: rgba(var(--category-pill-bg-color-rgb, 34, 197, 94), 0.12);
  color: var(--video-accent-color, #22c55e);
}

@media (max-width: 1280px) {
  .menuSidebar--v2 {
    display: none;
  }
}

/* ============================================================
 * [왼쪽 메뉴 템플릿 버전3 - 3박스형]
 * 관리자 > 디자인설정 > "왼쪽 메뉴 템플릿"에서 v3 선택 시 적용.
 * 특징: 메뉴 항목을 3개의 독립된 큰 박스(카드)로 나누어 배치.
 * ============================================================ */
.menuSidebar--v3 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 20px;
}

.menuBox--v3 {
  background-color: var(--sidebar-bg-color-light, #fff);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.06);
}

[data-theme='dark'] .menuBox--v3 {
  background-color: var(--sidebar-bg-color-dark, #1a1a1a);
  border: 1px solid var(--sidebar-border-color-dark, rgba(34, 197, 94, 0.2));
}

.menuBoxTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95em;
  font-weight: 700;
  color: var(--video-accent-color, #22c55e);
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme='dark'] .menuBoxTitle {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menuBoxList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menuBoxItem a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-radius: 8px;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.75);
}

[data-theme='dark'] .menuBoxItem a {
  color: rgba(255, 255, 255, 0.8);
}

.menuBoxItem a:hover {
  background-color: rgba(var(--category-pill-bg-color-rgb, 34, 197, 94), 0.1);
  color: var(--video-accent-color, #22c55e);
}

.menuBoxItem--sub a {
  padding-left: 26px;
  font-size: 0.85em;
  color: rgba(0, 0, 0, 0.55);
}

[data-theme='dark'] .menuBoxItem--sub a {
  color: rgba(255, 255, 255, 0.6);
}

.menuBoxItemIcon {
  /* [항목4] 관리자 설정(--menu-icon-size)이 없으면 기존 하드코딩 기본값 16px 그대로 사용(왼쪽 메뉴 버전3) */
  width: var(--menu-icon-size, 16px);
  height: var(--menu-icon-size, 16px);
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}

@media (max-width: 1280px) {
  .menuSidebar--v3 {
    display: none;
  }
}

/*
 * [카테고리 상단(가로) 메뉴 - 신규] setting.categoryMenuLayout이 'topmenu' 또는 'both'일 때
 * header/basic.ejs가 렌더링하는 #topCategoryNav 전용 스타일.
 * - 왼쪽 사이드바(menuSidebar 등)는 이 파일 위쪽의 기존 규칙을 그대로 사용하며 이 블록의
 *   영향을 받지 않는다.
 * - PC(>=1281px)에서만 보이는 가로 메뉴바이며, 모바일에서는 이미 mobileCategoryGrid가
 *   동일 데이터를 카드형으로 보여주므로 여기서는 숨긴다(중복 노출 방지).
 */
@media (min-width: 1281px) {
  #topCategoryNav {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  [data-theme='dark'] #topCategoryNav {
    background-color: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  #topCategoryNav .topCategoryNavList {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--horizontal-side-padding);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
  }

  #topCategoryNav .topCategoryNavItem {
    position: relative;
  }

  #topCategoryNav .topCategoryNavLink {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    font-size: 0.95em;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
  }

  #topCategoryNav .topCategoryNavLink img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 3px;
  }

  #topCategoryNav .topCategoryNavItem:hover > .topCategoryNavLink,
  #topCategoryNav .topCategoryNavItem:hover > .topCategoryNavLink i {
    color: var(--video-accent-color, #22c55e);
  }

  #topCategoryNav .topCategoryNavItem.hasChildren:hover {
    background-color: rgba(var(--category-pill-bg-color-rgb, 34, 197, 94), 0.08);
  }

  /* 1단계 하위 목록(카테고리/서브메뉴): hover 시 드롭다운으로 노출 */
  #topCategoryNav .topCategoryNavSubList {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    display: none;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
    border-radius: 0 0 8px 8px;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: 6px 0;
  }

  [data-theme='dark'] #topCategoryNav .topCategoryNavSubList {
    background-color: #333;
  }

  #topCategoryNav .topCategoryNavItem:hover > .topCategoryNavSubList {
    display: flex;
  }

  #topCategoryNav .topCategoryNavSubList > li {
    position: relative;
  }

  #topCategoryNav .topCategoryNavSubList > li > a {
    display: block;
    padding: 10px 18px;
    font-size: 0.9em;
    white-space: nowrap;
    color: inherit;
  }

  #topCategoryNav .topCategoryNavSubList > li > a:hover {
    background-color: rgba(var(--category-pill-bg-color-rgb, 34, 197, 94), 0.1);
    color: var(--video-accent-color, #22c55e);
  }

  /* 2단계 하위 목록(카테고리의 subCategories): 오른쪽으로 펼쳐지는 서브 드롭다운 */
  #topCategoryNav .topCategoryNavSubList > li > ul {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 180px;
    display: none;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    z-index: 21;
    list-style: none;
    margin: 0;
    padding: 6px 0;
  }

  [data-theme='dark'] #topCategoryNav .topCategoryNavSubList > li > ul {
    background-color: #333;
  }

  #topCategoryNav .topCategoryNavSubList > li:hover > ul {
    display: flex;
  }

  #topCategoryNav .topCategoryNavSubList > li > ul > li > a {
    display: block;
    padding: 10px 18px;
    font-size: 0.9em;
    white-space: nowrap;
    color: inherit;
  }

  #topCategoryNav .topCategoryNavSubList > li > ul > li > a:hover {
    background-color: rgba(var(--category-pill-bg-color-rgb, 34, 197, 94), 0.1);
    color: var(--video-accent-color, #22c55e);
  }
}

/* 모바일(<=1280px)에서는 mobileCategoryGrid가 동일 데이터를 이미 카드형으로 보여주므로
   상단 가로 메뉴는 완전히 숨긴다(중복 노출 방지). */
@media (max-width: 1280px) {
  #topCategoryNav {
    display: none;
  }
}