/* ═══════════════════════════════════════
   한소망교회 layout.css

   [이번 정리 내역]
   1. a:focus 의 `border:none` 제거
      → .old-site-btn 처럼 border 로 모양을 만드는 요소가
        클릭(포커스) 순간 테두리를 잃고 파란 링크색만 남던 문제.
        이제 :focus 에 기본값을 통째로 다시 쓰지 않아도 된다.
   2. GNB 크기를 clamp() 로 연속 축소
      → 1401~1700 / 1200~1400 / 992~1199 / 1921+ 구간 미디어쿼리 삭제.
        "특정 창 폭에서만 메뉴가 우측 버튼과 겹치던" 문제의 근본 해결.
   3. 1400px 이하는 가로 메뉴를 접고 전체메뉴(햄버거)만 사용
      → 메뉴가 늘어나도 다시 터지지 않는다.
   4. 반응형 경계를 7개 → 5개로 통합
      (1400 / 991 / 767 / 480 / 터치기기)
   ═══════════════════════════════════════ */

/* [수정] border:none 제거.
   테두리로 모양을 잡는 버튼들이 포커스 시 모양을 잃던 원인이었다. */
a:focus { outline: none; text-decoration: none; }


/* ─────────────────────────────────────
   웹폰트
   ───────────────────────────────────── */
@font-face {
    font-family: "WantedSans";
    font-style: normal;
    font-display: swap;
    font-weight: 400 1000;
    src: url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/WantedSans/WantedSansVariable.woff2') format("woff2-variations"),
         url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/WantedSans/WantedSansVariable.woff2') format("woff2");
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/PlayfairDisplay/PlayfairDisplay-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gowun Batang';
    src: url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/GowunBatang/GowunBatang-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gowun Batang';
    src: url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/GowunBatang/GowunBatang-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/NotoSansKR/NotoSansKR-Regular.woff') format('woff'),
         url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/NotoSansKR/NotoSansKR-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/NotoSansKR/NotoSans-Bold.woff') format('woff'),
         url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/NotoSansKR/NotoSans-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif KR';
    src: url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/NotoSerifKR/NotoSerifCJKkr-Regular-subset.woff2') format('woff2'),
         url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/NotoSerifKR/NotoSerif-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Noto Serif KR';
    src: url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/NotoSerifKR/NotoSerifCJKkr-Bold-subset.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* 기존 CSS가 아직 쓰는 이름 호환 */
@font-face {
    font-family: 'NotoSerifKR-Regular';
    src: url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/NotoSerifKR/NotoSerifCJKkr-Regular-subset.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'NotoSerifKR-Regular';
    src: url('/UserData/hansomang/Layouts/hansomang_Layout/Contents/webfont/NotoSerifKR/NotoSerifCJKkr-Bold-subset.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'MaruBuri';
    src: url('https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.woff2');
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: 'HsBombaram21';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/HSBombaram21-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'A2z';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}


/* ─────────────────────────────────────
   루트 변수
   브레이크포인트: 480 / 767 / 991 / 1400 / 터치
   ※ layout.main.css 도 동일한 경계를 쓴다
   ───────────────────────────────────── */
:root {
    --color-primary: #1A1A1A;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-text: #727272;
    --color-bg-dark: #1b2947;
    --color-bg-footer: #111827;
    --color-accent-blue: #0f43a3;
    --transition-base: all 0.3s ease;
}


/* ─────────────────────────────────────
   글로벌 리셋
   ───────────────────────────────────── */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

/* ─────────────────────────────────────────────
   [중요] 기기 글꼴 크기 설정의 영향 차단

   이 사이트는 rem 단위를 480여 곳에서 쓰는데 html 의 기준
   글꼴 크기가 선언되어 있지 않아 브라우저 기본값을 따랐습니다.
   안드로이드/아이폰에서 시스템 글꼴 크기를 키우면 이 기본값이
   함께 커지므로 rem 이 전부 밀려 레이아웃이 깨졌습니다.
   아래 16px 고정으로 그 연결을 끊습니다.
   (16px = 브라우저 기본값이므로 기존 PC 화면은 그대로입니다)

   text-size-adjust : iOS 가로 회전 확대 + 안드로이드 자동 글자
                      키움(font boosting) 차단
   ───────────────────────────────────────────── */
html {
    font-size: 16px;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
html body { overflow-x: clip; }

body {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-family: 'WantedSans', 'Noto Sans KR';
    color: var(--color-primary);
    background-color: var(--color-white);
    overflow-x: clip;
}
body.no-scroll { overflow: hidden; }
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; transition: 0.2s; }
img { max-width: 100%; display: block; }
button { background: none; border: none; cursor: pointer; font-family: inherit; }

/* 폼 요소는 기기 글꼴 설정을 별도로 상속받는 경우가 있어 명시한다 */
input, select, textarea, button { font-size: inherit; font-family: inherit; }

/* [매우 중요] 안쪽 요소에는 절대 overflow 를 주지 마세요.
   #content / .page-content / #dimodePage / .container / .col-xs-12 /
   #mm-0 / .mm-slideout 등에 overflow 를 걸면
   CMS 의 풀블리드 섹션(.dimode-component-WIDE)이 부모 컨테이너를 뚫고
   나가지 못해 좌우가 잘립니다.
   넘침 차단은 위의 html / body 에서만 처리합니다. */

/* overflow:clip 미지원 구형 브라우저 폴백 */
@supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
}

#mm-0 { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.main { flex: 1; }
#content { flex: 1; }

.section-container { max-width: 1500px; margin: 0 auto; padding: 0 clamp(1.25rem, 3.5vw, 3.5rem); }


/* ═══════════════════════════════════════
   GNB (Site Navigation)

   [핵심] 크기를 clamp() 로 잡아 폭에 따라 연속 축소시킨다.
   구간별 미디어쿼리로 값을 덮어쓰면 그 사이 폭에서
   기본값이 그대로 튀어나와 우측 버튼과 겹친다.
   ═══════════════════════════════════════ */
.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1.25rem, 4vw, 6rem);
    background-color: transparent;
    transition: background-color 0.4s ease, padding 0.3s ease;
}
.site-nav.white {
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* [수정] flex:1 → flex:0 1 auto.
   좌측이 남는 공간을 억지로 채우지 않게 해 우측을 밀지 않는다. */
.site-nav-left {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 5rem);
    flex: 0 1 auto;
    min-width: 0;
}
.site-nav-logo { display: block; flex-shrink: 0; }
.site-logo-img { height: clamp(3.75rem, 4.5vw, 5rem); }
.logo-black { display: none; }

/* 서브페이지 GNB 색상 */
.site-nav.is-sub .site-nav-link { color: var(--color-black); }
.site-nav.is-sub .site-nav-link:hover,
.site-nav.is-sub .nav-item.active .site-nav-link { color: rgba(0, 0, 0, 0.6); }
.site-nav.is-sub .gnbTR .gnbTRB { color: var(--color-black); }
.site-nav.is-sub .gnbTR .bar { background: rgba(0, 0, 0, 0.4); }
.site-nav.is-sub .site-menu-btn,
.site-nav.is-sub .gnbBTN { color: var(--color-black); }
.site-nav.is-sub .logo-white { display: none; }
.site-nav.is-sub .logo-black { display: block; }
.site-nav.is-sub.white {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

.site-nav .site-nav-desktop {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(1rem, 1.8vw, 3rem);
}
.site-nav .site-nav-desktop .nav-item { display: block; }

/* 1depth */
.nav-item { position: relative; padding-bottom: 0; }
.nav-item::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 2rem;
}
.site-nav-link {
    color: var(--color-white);
    font-family: 'WantedSans', sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 2.05vw, 1.6rem);
    letter-spacing: -0.01em;
    transition: color 0.3s;
    white-space: nowrap;
    cursor: pointer;
}
.site-nav-link:hover,
.nav-item.active .site-nav-link { color: rgba(255, 255, 255, 0.7); }

/* 2depth 드롭다운 */
.site-sub-menu {
    position: absolute;
    top: calc(100% + 1.2rem);
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    align-items: center;
    text-align: center;
    min-width: 170px;
    background: rgba(17, 45, 105, 0.9);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-item:hover .site-sub-menu,
.nav-item:focus-within .site-sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.site-sub-link {
    color: var(--color-white);
    font-size: 1.15rem;
    opacity: 0.85;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-weight: 400;
}
.site-sub-link:hover {
    opacity: 1;
    color: #fff;
    font-weight: 700;
    transform: scale(1.05);
}

/* GNB 우측 */
.site-nav-right {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1.5rem);
    padding-top: 0;
    flex: 0 0 auto;
    margin-left: auto;
}
.nav-quick-links {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.gnbTR { display: none; }
.gnbTR .gnbTRB { font-size: 16px; color: #fff; }
.gnbTR .gnbTRB:hover,
.gnbTR .gnbTRB:focus { text-decoration: none; }
.gnbTR .bar {
    display: inline-block;
    height: 16px; width: 1px;
    background: rgba(255, 255, 255, 0.6);
}

/* 전체메뉴(메가메뉴) 버튼 - 992px 이상 전용 */
.site-menu-btn {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    z-index: 30;
}
.site-menu-btn svg {
    width: clamp(28px, 2vw, 36px);
    height: clamp(28px, 2vw, 36px);
    stroke-width: 1.5;
}

/* 모바일 mmenu 버튼 - 991px 이하 전용 (기본은 숨김) */
.gnbBTN { display: none; align-items: center; color: var(--color-white); }
.gnbBTN svg { width: 28px; height: 28px; }


/* ═══ 우측 버튼 공통 (예전홈페이지 / 관리 / LIVE) ═══
   [수정] 기존 :focus 블록에 기본 스타일을 통째로 복사해둔 것을 제거.
   원인이던 a:focus{border:none} 을 없앴으므로 더는 필요 없다. */
.old-login-btn,
.old-site-btn,
.live-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem clamp(0.7rem, 0.9vw, 1rem);
    border-radius: 999px;
    font-size: clamp(0.8rem, 0.85vw, 0.95rem);
    white-space: nowrap;
    line-height: 1;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.old-login-btn{padding: .2rem clamp(0.7rem, .4vw, .4rem)}
.old-site-btn svg,
.live-btn svg {
    width: clamp(15px, 1.1vw, 17px);
    height: clamp(15px, 1.1vw, 17px);
    flex-shrink: 0;
}
.old-login-btn svg{
    width: clamp(15px, 1.1vw, 17px);
    height: clamp(15px, 1.1vw, 17px);
}
.old-site-btn:focus-visible,
.live-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 예전홈페이지 */
.old-site-btn {
    border: 2px solid rgba(255, 255, 255, 1);
    color: var(--color-white);
    font-weight: 500;
}
.old-site-btn:hover {
    background-color: rgba(11, 58, 143, 0.8);
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
}
.site-nav.is-sub .old-site-btn {
    color: var(--color-black);
    border-color: rgba(0, 0, 0, 0.3);
}
.site-nav.is-sub .old-site-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.6);
    color: var(--color-black);
}

/* 관리 (관리자 전용) */
.admin-btn { border-color: rgba(255, 255, 255, 1); }
.admin-btn:hover { background-color: rgba(11, 58, 143, 1); }
.site-nav.is-sub .admin-btn {
    color: var(--color-accent-blue);
    border-color: rgba(15, 67, 163, 0.45);
}
.site-nav.is-sub .admin-btn:hover {
    background-color: rgba(15, 67, 163, 0.08);
    border-color: var(--color-accent-blue);
    color: var(--color-accent-blue);
}

/* 유튜브 라이브 */
.live-btn {
    border: 1px solid transparent;
    background-color: #e70c0c;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.live-btn:hover {
    background-color: #000;
    color: #fff;
    transform: translateY(-1px);
}
/* 서브페이지에서도 빨강 유지 (강조 요소이므로) */
.site-nav.is-sub .live-btn { color: #fff; border-color: transparent; }

.live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background-color: #fff;
    flex-shrink: 0;
    animation: live-blink 1.4s ease-in-out infinite;
}
@keyframes live-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
}


/* ═══ 맨 위로 버튼 ═══ */
.to-top {
    position: fixed;
    right: 1.5rem; bottom: 1.5rem;
    z-index: 999;
    width: 3.75rem; height: 3.75rem;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.1rem;
    border: none; border-radius: 50%;
    background-color: var(--color-accent-blue);
    color: #fff; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    opacity: 0; visibility: hidden;
    transform: translateY(0.75rem);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background-color 0.2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background-color: #0b3480; }
.to-top svg { width: 20px; height: 20px; margin-bottom: -2px; }
.to-top .to-top-txt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
}


/* ═══════════════════════════════════════
   햄버거 전체메뉴 (메가메뉴 오버레이)
   ═══════════════════════════════════════ */
.hero-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: var(--color-white);
    display: none;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6rem 2rem 4rem 2rem;
}
.hero-mobile-menu.active { display: flex; }

.mobile-menu-close {
    position: absolute;
    top: 2.5rem; right: 2.5rem;
    color: #111;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10000;
}

.mobile-menu-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 3rem 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.mobile-menu-col { display: flex; flex-direction: column; }
.mobile-menu-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    border-top: 2px solid #111;
    border-bottom: 2px solid #111;
}
.mobile-menu-list { display: flex; flex-direction: column; gap: 0.75rem; }
.mobile-menu-link { font-size: 1.25rem; color: #666; transition: color 0.3s; }
.mobile-menu-link:hover { color: var(--color-accent-blue); font-weight: 700; }

/* 우측 하단 심볼 포인트 */
.mobile-menu-symbol {
    position: fixed;
    bottom: -2rem; right: -2rem;
    z-index: 1;
    opacity: 0.05;
    pointer-events: none;
}
.mobile-menu-symbol img { width: clamp(250px, 30vw, 450px); object-fit: contain; }


/* ═══════════════════════════════════════
   모바일 mmenu
   ═══════════════════════════════════════ */
#my-menu {
    display: none;
    background-color: rgba(0, 0, 0, 0.3);
    max-width: 240px;
    z-index: 99999;
}
body > .mm-opened { display: block !important; }
#mm-0:before { height: 0 !important; }
.mm-navbar.mm-hasbtns .mm-close .mm-sronly { display: none; }
.mm-navbars-top { background-color: rgba(0, 0, 0, 0.75); }
.mm-btn { top: unset !important; }
.mm-menu .mm-listview > li .mm-next:after { border-color: #fff !important; }
.mm-panels > .mm-panel > .mm-listview { margin: 0 !important; }
.mm-panels > .mm-panel.mm-hasnavbar { padding-top: 0 !important; }
.mm-panels > .mm-panel { padding: 0; }
.mm-panels, .mm-panels > .mm-panel { z-index: 9999; }
.mm-listview { margin: 0; }
.mm-listview > li > a, .mm-listview > li > span { padding: 10px 20px !important; font-size: 17px; margin: 0; }
.mm-listview .mm-vertical .mm-panel, .mm-vertical .mm-listview .mm-panel { padding: 0 0 0 10px; }

.closeMenu {
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer;
    font-size: 40px;
    position: absolute;
    right: 0; top: 5%;
}

.mob-login {
    overflow: hidden;
    padding: 15px 0;
    border-bottom: 1px solid #808080;
    margin-bottom: 10px;
}
.mob-login li { float: right; overflow: hidden; }
.mob-login a {
    display: inline-block !important;
    font-size: 17px !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #aaa !important;
    padding: 0 10px !important;
}
.mob-login a .fa { font-size: 20px !important; }

.mmenu-depth1 > a { color: #fff !important; }
.mmenu-depth2 > a { color: #E4E3B9 !important; }
.mmenu-depth3 > a { color: #B4EBF1 !important; }
a.mm-next { width: 100% !important; }


/* ═══════════════════════════════════════
   서브페이지 공통 (브레드크럼 등)
   ═══════════════════════════════════════ */
#content { padding-top: 0; }
.subgnb {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-blend-mode: normal;
    background-size: auto;
    border-color: rgb(229, 229, 229);
    border-style: solid;
    border-width: 1px 0 0;
    padding: 0;
    margin: 0;
}
.sub-unit {
    background-position: right;
    padding: 150px 0 50px;
    background-repeat: no-repeat;
}
.subgnb-home {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 0 35px 5px;
}
.subgnb-home a,
.subgnb-home .title {
    font-size: 17px;
    font-family: 'WantedSans', 'Noto Sans KR', sans-serif;
    color: #666666;
}

.depth3 {
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;
    gap: 20px;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.depth3 li { position: relative; }
.depth3 li a {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.5);
    transition: all ease .3s;
    font-size: 23px;
}
.depth3 li a:hover, .depth3 li a:focus { text-decoration: none; }
.depth3 li:hover a, .depth3 li.active a { color: rgba(0, 0, 0, 1); }
.depth3 li:after {
    content: '';
    position: absolute;
    height: 2px; width: 0%;
    background-color: #000;
    left: 0; bottom: -5px;
    transition: all ease .3s;
}
.depth3 li.active:after { width: 100%; }

.depth4 {
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;
    gap: 20px;
    margin-top: 30px;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.depth4 li { position: relative; }
.depth4 li a { color: rgba(0, 0, 0, 0.5); transition: all ease .3s; font-size: 20px; }
.depth4 li.active a {
    padding: 2px 20px;
    border-radius: 14px;
    background-color: #000;
    color: #fff;
}
.depth4 li a:hover { text-decoration: none; font-weight: bold; }

#sub_title {
    font-size: 48px;
    font-weight: bold;
    margin: 0;
    display: inline-block;
    padding: 8rem 0 20px;
    width: 100%;
    float: left;
}


/* ═══════════════════════════════════════
   Footer
   ═══════════════════════════════════════ */
.footer {
    background-color: var(--color-bg-footer);
    padding-top: 3.75rem;
    padding-bottom: 2.5rem;
    margin-top: -7px;
}
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.footer-logo-img { height: 5rem; filter: brightness(0) invert(1); opacity: 0.8; }

.sns-links { display: flex; align-items: center; gap: 1.25rem; }
.sns-link { color: rgba(255, 255, 255, 0.6); transition: color 0.3s; }
.sns-link.kakao:hover { color: #FEE500; }
.sns-link.instagram:hover { color: #ffffff; }
.sns-link.youtube:hover { color: #FF0000; }

.footer-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.contact-phone { color: rgba(255, 255, 255, 0.8); font-weight: 700; font-size: 1.25rem; margin: 0; }
.contact-addr, .contact-copy {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
    margin: 0;
    word-break: keep-all;
}
.contact-copy { color: rgba(255, 255, 255, 0.3); }

.footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.footer-bottom-left { display: flex; align-items: center; gap: 2.5rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.footer-link {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    color: rgba(255, 255, 255, 1);
    background-color: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.footer-link:visited { color: rgba(255, 255, 255, 1); background-color: transparent; }
.footer-link:hover {
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.45);
    background-color: rgba(255, 255, 255, 0.5);
}
.footer-link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }

.footer-credit { color: rgba(255, 255, 255, 0.2); font-size: 1rem; margin: 0; }
.footer-credit a { color: rgba(255, 255, 255, 0.4); }
.footer-credit a:hover { color: rgba(255, 255, 255, 0.7); }


/* .container
   max-width 로 상한만 두어 좁은 화면에서는 100%,
   넓은 화면에서는 1470px 로 잡히게 한다. */
.container {
    width: 100%;
    max-width: 1470px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}


/* ═══════════════════════════════════════
   반응형
   경계: 1400 / 991 / 767 / 480 / 터치기기
   ※ layout.main.css 도 동일한 경계를 쓴다
   ═══════════════════════════════════════ */

/* ── PC (992px 이상) : 모바일 mmenu 버튼 숨김 ───────── */
@media (min-width: 992px) {
    .gnbBTN { display: none !important; }
}


/* ── 1400px 이하 : 가로 메뉴 접기 ────────────────────
   로고 + 우측 버튼 + 햄버거만 남으므로 어떤 폭에서도 밀리지 않는다.
   메뉴는 전체메뉴(메가메뉴) 오버레이에서 모두 접근 가능. */
@media (max-width: 1400px) {
    .site-nav .site-nav-desktop { display: none !important; }
    .site-nav-left { gap: 0; }

    /* 예전홈페이지 버튼은 아이콘만 (폭 확보) */
    .old-site-btn { padding: 0; width: 36px; height: 36px; justify-content: center; }
    .old-site-btn span { display: none; }
}


/* ── 991px 이하 (태블릿·모바일) ─────────────────────── */
@media (max-width: 991px) {

    /* [핵심] AOS 좌우 이동 애니메이션 무력화
       fade-left / fade-right 계열의 초기 transform(±100px)이
       뷰포트 밖으로 가로 오버플로를 만들어
       가로 스크롤 + fixed 헤더 폭 확장 + 햄버거 화면이탈을 유발함.
       opacity 페이드는 유지되므로 등장 효과는 남는다. */
    [data-aos="fade-left"],
    [data-aos="fade-right"],
    [data-aos="fade-up-left"],
    [data-aos="fade-up-right"],
    [data-aos="fade-down-left"],
    [data-aos="fade-down-right"],
    [data-aos="slide-left"],
    [data-aos="slide-right"] {
        transform: none !important;
    }

    /* 헤더를 항상 뷰포트 폭에 고정
       100vw 사용 이유: 부모(컨테이닝 블록)가 넓어져도 영향받지 않음 */
    .site-nav {
        left: 0; right: auto;
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
        padding: 1.25rem 4vw;
        align-items: center;
    }
    .site-nav.white { padding-top: 1rem; padding-bottom: 1rem; }

    .site-nav-left {
        flex: 1 1 auto;
        gap: 0;
        justify-content: flex-start;
        align-items: center;
        min-width: 0;
        overflow: hidden;
    }

    /* PC 전용 요소 숨김 */
    .site-nav .gnbTR,
    .site-nav .site-menu-btn { display: none !important; }

    /* 모바일 mmenu 버튼 노출 */
    .site-nav .gnbBTN { display: inline-flex !important; }

    .site-nav-right {
        padding-top: 0;
        flex: 0 0 auto;
        margin-left: auto;
        gap: 0.5rem;
        position: relative;
        z-index: 30;
    }
    .nav-quick-links { gap: 0.35rem; }

    /* 햄버거 아이콘 시인성
       svg 가 stroke="currentColor" 이므로 color 값이 곧 아이콘 색.
       메인의 .white 배경은 rgba(0,0,0,0.4) 즉 어두운 반투명이므로
       어두운 배경에서는 흰색을 유지하고, 밝은 서브페이지에서만 검정. */
    .site-nav .gnbBTN { color: #fff; }
    .site-nav .gnbBTN svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
    .site-nav.is-sub .gnbBTN { color: #111; }
    .site-nav.is-sub .gnbBTN svg { filter: none; }

    /* 우측 버튼 */
    .old-site-btn { width: 40px; height: 40px; border-color: rgba(255, 255, 255, 0.5); }
    .old-site-btn svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
    .site-nav.is-sub .old-site-btn svg { filter: none; }

    .live-btn { padding: 0.4rem 0.7rem; font-size: 0.8rem; gap: 0.3rem; }
    .live-btn svg { width: 16px; height: 16px; }
    .live-dot { width: 6px; height: 6px; }

    /* 서브페이지 */
    .sub-unit { padding: 110px 0 40px; }
    #sub_title { font-size: 34px; padding: 4rem 0 16px; }
    .depth3, .depth4 { justify-content: flex-start; }
    .depth3 li a { font-size: 19px; }
    .depth4 { margin-top: 20px; }
    .depth4 li a { font-size: 17px; }
}


/* ── 767px 이하 (모바일) ───────────────────────────── */
@media (max-width: 767px) {
    .site-nav { padding: 1rem 1.25rem; }
    .gnbBTN svg { width: 26px; height: 26px; }
    .live-dot { display: none; }

    /* 전체메뉴 오버레이 */
    .mobile-menu-container { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
    .hero-mobile-menu { padding: 5rem 1.5rem 3rem 1.5rem; }
    .mobile-menu-close { top: 1.5rem; right: 1.5rem; }

    /* 서브페이지 */
    .sub-unit { padding: 90px 0 30px; }
    #sub_title { font-size: 26px; padding: 3rem 0 12px; }
    .subgnb-home { padding-bottom: 20px; }
    .subgnb-home a, .subgnb-home .title { font-size: 14px; }
    .depth3 { gap: 12px; }
    .depth3 li a { font-size: 16px; }
    .depth4 { gap: 8px; }
    .depth4 li a { font-size: 15px; }

    /* 맨 위로 버튼 */
    .to-top { right: 1rem; bottom: 1rem; width: 3.25rem; height: 3.25rem; }
    .to-top svg { width: 18px; height: 18px; }
    .to-top .to-top-txt { font-size: 0.625rem; }

    /* Footer */
    .footer { padding-top: 3rem; padding-bottom: 2rem; }
    .footer-top { flex-direction: column; align-items: center; text-align: center; gap: 2rem; }
    .footer-contact { align-items: center; }
    .footer-bottom { flex-direction: column; gap: 1.5rem; text-align: center; }
    .footer-bottom-left { flex-direction: column; gap: 1rem; align-items: center; }
    .contact-addr, .contact-copy, .footer-credit { font-size: 0.875rem; }
    .footer-links { justify-content: center; gap: 0.4rem; }
    .footer-link { padding: 0.35rem 0.75rem; font-size: 0.8125rem; }
}


/* ── 480px 이하 ────────────────────────────────────── */
@media (max-width: 480px) {
    .mobile-menu-container { grid-template-columns: 1fr; }
    .mobile-menu-title { font-size: 1.25rem; }
    .mobile-menu-link { font-size: 1.05rem; }
    #sub_title { font-size: 22px; }

    /* LIVE 도 아이콘만 */
    .live-btn { padding: 0; width: 40px; height: 40px; justify-content: center; gap: 0.25rem; }
    .live-btn .live-txt { display: none; }
    .live-btn svg { width: 18px; height: 18px; }
}


/* ═══════════════════════════════════════
   터치 기기 전용

   폭 조건을 두지 않는다. 아이패드 Pro 가로(1366) /
   갤럭시탭 가로(1280) 처럼 폭은 넓지만 hover 가 없는 기기에서
   hover 로만 열리는 2뎁스 드롭다운에 접근할 수 없기 때문.

   (hover:none) and (pointer:coarse) 는 마우스가 달린 터치 노트북에는
   해당하지 않으므로 PC 환경에는 영향이 없다.
   ═══════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    .site-nav .site-nav-desktop,
    .site-nav .gnbTR,
    .site-nav .site-menu-btn { display: none !important; }

    .site-nav .gnbBTN { display: inline-flex !important; }
    .site-nav-right { padding-top: 0; margin-left: auto; gap: 0.5rem; }

    /* 터치 타깃 최소 44px 확보 */
    .site-nav .gnbBTN { min-width: 44px; min-height: 44px; justify-content: center; }

    .old-site-btn,
    .live-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
    .old-site-btn span,
    .live-btn .live-txt { display: none; }
}


/* ═══════════════════════════════════════
   모션 최소화 설정 존중
   ═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .to-top { transition: opacity 0.2s ease; }
    .live-dot { animation: none; }
}