/* 홈페이지 상단 메뉴(대메뉴+마우스오버 서브메뉴) — LIB/SiteMenuHelper.php f_renderSiteNav() 출력용 */
.site-nav .sn-top,.site-nav .sn-sub{list-style:none;margin:0;padding:0}
.site-nav .sn-top{display:flex;gap:4px;flex-wrap:wrap}
.site-nav .sn-top>li{position:relative}
.site-nav .sn-top>li>a{display:block;padding:7px 13px;border-radius:999px;font-size:14px;font-weight:700;line-height:1.6;white-space:nowrap;cursor:pointer}
.site-nav .sn-has>a::after{content:"";display:inline-block;margin-left:6px;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55}
.site-nav .sn-sub{display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);min-width:150px;padding:6px;background:#fff;border:1px solid #e4e0d6;border-radius:12px;box-shadow:0 10px 28px rgba(20,30,60,.16);z-index:80}
.site-nav .sn-sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} /* 마우스가 대메뉴→서브 사이 틈에서 안 끊기게 */
.site-nav .sn-has:hover>.sn-sub,.site-nav .sn-has:focus-within>.sn-sub,.site-nav .sn-has.open>.sn-sub{display:block}
.site-nav .sn-sub a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:600;color:#1b2b4b;white-space:nowrap}
.site-nav .sn-sub a:hover{background:#dbe8f8;color:#1f3760}
@media(max-width:640px){
  .site-nav .sn-sub{left:0;transform:none}
}

/* 서브페이지 공통 헤더(.topbar.has-menu) + 공통 배너 */
.topbar.has-menu .wrap{gap:20px}
.topbar .site-nav .sn-top>li>a{color:#3a4a6b}
.topbar .site-nav .sn-top>li>a:hover{background:#dbe8f8;color:#1f3760}
.sub-banner{padding-top:24px}
.sub-banner .sc-banner{position:relative;margin-bottom:0}
.sub-banner .slot{background-size:cover;background-position:center}

/* 서브페이지 헤더 크기를 홈(main_v1 .main-head)과 동일하게 — 로고 20px/900, 메뉴 14px/700, 상하 14px */
.topbar.has-menu{padding:14px 0}
.topbar.has-menu .brand{font-weight:900;font-size:20px;letter-spacing:-.5px;white-space:nowrap}

/* 페이지/게시글 템플릿은 본문 링크용 a{밑줄}이 기본이라, 메뉴·공통배너 안 링크는 밑줄 제거 */
.topbar a,.site-nav a,.sub-banner a{text-decoration:none}

/* ── 모바일(≤820px): 햄버거 버튼 + 펼침 패널(2026-10-05) ──
   [로고 ··· 로그인 ☰] 한 줄, 메뉴는 ☰를 누르면 헤더 아래로 세로 펼침. 서브메뉴가 있는 항목은 탭하면 아래로 열리고, 한 번 더 탭하면 이동 */
.site-nav .sn-burger{display:none}
@media(max-width:820px){
  .site-nav .sn-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 9px;border:0;border-radius:8px;background:transparent;cursor:pointer}
  .site-nav .sn-burger span{display:block;height:2px;border-radius:2px;background:#1b2b4b;transition:.2s}
  body.main-shell[data-theme="d"] .site-nav .sn-burger span{background:#e9e6dc}
  .site-nav.open .sn-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-nav.open .sn-burger span:nth-child(2){opacity:0}
  .site-nav.open .sn-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* 헤더 줄 배치: 로고 · (여백) · 로그인 · ☰ — 헤더 종류(기본형/템플릿형/서브)마다 달랐던 모바일 규칙을 덮어씀 */
  nav.site-nav{position:static !important;order:3 !important;flex:0 0 auto !important;margin:0 !important;overflow:visible !important}
  .topbar.has-menu{position:relative} /* 기본형·템플릿형 헤더는 이미 sticky(위치 기준이 됨) */
  .topbar.has-menu .wrap,.main-head .wrap{flex-wrap:nowrap !important;gap:10px !important}
  .topbar.has-menu .sub-auth,.main-head .auth-slot{margin-left:auto !important;position:static !important}
  .topbar.has-menu .brand,.main-head .brand{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* 펼침 패널 */
  .site-nav .sn-top{display:none;position:absolute;left:0;right:0;top:100%;z-index:90;flex-direction:column;flex-wrap:nowrap;gap:0;padding:6px 20px 12px;background:#fff;border-bottom:1px solid #e4e0d6;box-shadow:0 12px 24px rgba(20,30,60,.12);max-height:75vh;overflow-y:auto}
  .site-nav.open .sn-top{display:flex}
  body.main-shell .site-nav .sn-top>li>a,.topbar .site-nav .sn-top>li>a{display:block;padding:13px 6px;border-radius:0;color:#1b2b4b !important;font-size:15px;border-bottom:1px solid #efece4;background:none !important}
  .site-nav .sn-has>a{display:flex !important;justify-content:space-between;align-items:center}
  .site-nav .sn-has.open>a::after{transform:rotate(-135deg) translateY(-1px)}
  /* 서브메뉴: 아래로 접고 펴는 방식(마우스오버 아님) */
  .site-nav .sn-has:hover>.sn-sub,.site-nav .sn-has:focus-within>.sn-sub{display:none}
  .site-nav .sn-sub,.site-nav .sn-has.open>.sn-sub{position:static;transform:none;min-width:0;padding:2px 0 4px 14px;border:0;border-radius:0;box-shadow:none;background:#f7f8fa}
  .site-nav .sn-has.open>.sn-sub{display:block}
  .site-nav .sn-sub::before{display:none}
  .site-nav .sn-sub a{padding:11px 8px}
}

/* ── 좌측메뉴 2단 레이아웃 기본값(2026-10-11) — 페이지/모듈 틀(sub_plain_v1/shell.css)과 같은 값. 게시판·웹진 템플릿에서도 쓰려고 공통 CSS에 둠 ── */
.layout-sidebar{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px}
.layout-sidebar>*{min-width:0}
.layout-sidebar nav{background:#fff;border:1px solid var(--line,#e4e0d6);border-radius:14px;padding:16px;align-self:start}
.layout-sidebar nav a{display:block;padding:8px 10px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink,#1b2b4b)}
.layout-sidebar nav a:hover{background:var(--sky,#dbe8f8)}
.layout-sidebar nav .side-title{font-size:15px;font-weight:800;color:var(--navy,#1f3760);padding:4px 10px 10px;margin-bottom:6px;border-bottom:1px solid var(--line,#e4e0d6)}
@media(max-width:820px){
  .layout-sidebar{grid-template-columns:minmax(0,1fr);gap:14px}
  .layout-sidebar nav{display:flex;flex-wrap:wrap;gap:8px;padding:12px}
  .layout-sidebar nav .side-title{display:none}
  .layout-sidebar nav a{display:inline-block;padding:8px 14px;border:1px solid var(--line,#e4e0d6);border-radius:999px;background:#fff;line-height:1.3}
  /* 메뉴 4개 이상(.sb-collapsible, LIB/SiteMenuHelper.php): "섹션 · 현재 위치 ▾" 한 줄로 접고, 누르면(.open) 2열로 펼침 — 줄줄이 늘어나 스크롤이 길어지던 것 방지(2026-10-28) */
  .layout-sidebar nav.sb-collapsible{display:block;padding:0;overflow:hidden}
  .layout-sidebar nav.sb-collapsible .sb-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;border:0;background:none;font:inherit;font-size:15px;color:var(--ink,#1b2b4b);cursor:pointer;text-align:left}
  .layout-sidebar nav.sb-collapsible .sb-t{flex:none;font-size:12px;font-weight:800;color:var(--sub,#6b7894);letter-spacing:.02em}
  .layout-sidebar nav.sb-collapsible .sb-cur{flex:1;min-width:0;font-weight:800;color:var(--navy,#1f3760);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .layout-sidebar nav.sb-collapsible .sb-toggle i{flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
  .layout-sidebar nav.sb-collapsible.open .sb-toggle i{transform:rotate(-135deg) translateY(-2px)}
  .layout-sidebar nav.sb-collapsible a{display:none}
  .layout-sidebar nav.sb-collapsible.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 12px 12px}
  .layout-sidebar nav.sb-collapsible.open .sb-toggle{grid-column:1/-1;margin:0 -12px;width:calc(100% + 24px);border-bottom:1px solid var(--line,#e4e0d6)}
  .layout-sidebar nav.sb-collapsible.open a{display:block;padding:10px 12px;border-radius:12px;font-size:14px;text-align:center;word-break:keep-all}
  .layout-sidebar nav.sb-collapsible a.active{background:var(--sky,#dbe8f8);border-color:var(--navy,#1f3760);color:var(--navy,#1f3760);font-weight:800}
}
@media(min-width:821px){.layout-sidebar nav .sb-toggle{display:none}}

/* ── 좌측메뉴 스타일(2026-10-11): nav.sb-{card|line|navy|pill|minimal}. PC(821px↑)만 — 모바일은 위 알약 나열 그대로 ── */
@media(min-width:821px){
  /* 라인형 — 카드 없이 글자 목록 + 왼쪽 세로선 */
  .layout-sidebar nav.sb-line{background:none;border:0;border-radius:0;padding:0 0 0 2px}
  .layout-sidebar nav.sb-line .side-title{border-bottom:0;padding:0 0 12px 16px;font-size:17px}
  .layout-sidebar nav.sb-line a{border-radius:0;padding:10px 16px;border-left:2px solid var(--line);color:var(--sub);font-weight:600}
  .layout-sidebar nav.sb-line a:hover{background:none;color:var(--navy);border-left-color:var(--blue)}
  .layout-sidebar nav.sb-line a.active{background:none;color:var(--navy);font-weight:800;border-left-color:var(--navy)}

  /* 네이비 패널형 — 헤더/히어로보다 한 톤 밝은 블루 네이비, 그림자 없이 차분하게(헤더·히어로와 겹쳐 무거워 보이지 않게 톤을 낮춤) */
  .layout-sidebar nav.sb-navy{background:linear-gradient(170deg,#25497d,#1c3d6d);border:0;border-radius:16px;padding:18px 14px}
  .layout-sidebar nav.sb-navy .side-title{color:#fff;border-bottom:0;padding:0 10px 12px;margin-bottom:6px;font-size:16px;position:relative}
  .layout-sidebar nav.sb-navy .side-title::after{content:"";display:block;width:28px;height:2px;border-radius:2px;background:#d9b57b;margin-top:9px}
  .layout-sidebar nav.sb-navy a{color:#d3def2;padding:10px 12px;border-radius:10px;font-weight:600}
  .layout-sidebar nav.sb-navy a:hover{background:rgba(255,255,255,.1);color:#fff}
  .layout-sidebar nav.sb-navy a.active{background:rgba(255,255,255,.16);color:#fff;font-weight:800;box-shadow:inset 3px 0 0 #d9b57b}

  /* 소프트 블루형 — 연한 블루 바탕, 네이비 글자, 현재 페이지는 흰 카드 + 금빛 막대. 네이비 헤더/히어로와 가장 편하게 어울림 */
  .layout-sidebar nav.sb-soft{background:#eaf1fb;border:1px solid #d6e3f5;border-radius:16px;padding:18px 14px}
  .layout-sidebar nav.sb-soft .side-title{color:var(--navy);border-bottom:0;padding:0 10px 12px;margin-bottom:6px;font-size:16px}
  .layout-sidebar nav.sb-soft .side-title::after{content:"";display:block;width:28px;height:2px;border-radius:2px;background:#d9b57b;margin-top:9px}
  .layout-sidebar nav.sb-soft a{color:#3a4a6b;padding:10px 12px;border-radius:10px;font-weight:600}
  .layout-sidebar nav.sb-soft a:hover{background:rgba(255,255,255,.7);color:var(--navy)}
  .layout-sidebar nav.sb-soft a.active{background:#fff;color:var(--navy);font-weight:800;box-shadow:0 2px 8px rgba(31,55,96,.1),inset 3px 0 0 #d9b57b}

  /* 알약형 — 카드 없이 알약 버튼이 세로로, 현재 페이지는 진한 색으로 채움 */
  .layout-sidebar nav.sb-pill{background:none;border:0;border-radius:0;padding:0}
  .layout-sidebar nav.sb-pill .side-title{border-bottom:0;padding:0 4px 12px;font-size:17px}
  .layout-sidebar nav.sb-pill a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;margin-bottom:8px;font-weight:700}
  .layout-sidebar nav.sb-pill a:hover{border-color:var(--navy);background:#fff}
  .layout-sidebar nav.sb-pill a.active{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:800}

  /* 미니멀형 — 얇은 구분선 목록, 현재 페이지는 굵게 + 오른쪽 화살표 */
  .layout-sidebar nav.sb-minimal{background:none;border:0;border-radius:0;padding:0;border-top:2px solid var(--navy)}
  .layout-sidebar nav.sb-minimal .side-title{border-bottom:1px solid var(--line);padding:14px 4px;margin:0;font-size:17px}
  .layout-sidebar nav.sb-minimal a{border-radius:0;border-bottom:1px solid var(--line);padding:13px 4px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
  .layout-sidebar nav.sb-minimal a:hover{background:none;color:var(--navy)}
  .layout-sidebar nav.sb-minimal a.active{color:var(--navy);font-weight:800}
  .layout-sidebar nav.sb-minimal a.active::after{content:"→";color:var(--navy)}
}