@charset "utf-8";

/* ============================================================================
   2025 감사특밤 - 살아나리라  /  공통 레이아웃 (Header - GNB - Footer)
   시안 기준 : 1920 뷰포트 / 컨테이너 1350px
   고령층 이용을 고려하여 본문 최소 폰트 16px, 터치영역 최소 48px 확보
   ========================================================================== */

/* ------------------------- Webfont ------------------------- */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
}

/* ------------------------- Design Token ------------------------- */
:root {
    /* 컨테이너 */
    /* 컨테이너 1350 적용 범위 : GNB - 퀵메뉴 - 강사카드 - 푸터
       (상단 로고 / 로그인-한소망교회 홈페이지 는 시안대로 컨테이너 밖 = 화면 가장자리 기준) */
    --container: 1350px;      /* 시안 기준 컨테이너 */
    --container-nav: 1350px;  /* GNB 알약바를 화면폭 가득 채울 때의 최대폭 */
    --gutter: 1.875rem;       /* 30px */

    /* 색상 */
    --gt-navy: #041739;       /* 퀵메뉴 네이비 */
    --gt-footer: #111827;     /* 푸터 네이비 */
    --gt-blue-1: #d07660;     /* GNB 그라데이션 시작 */
    --gt-blue-2: #d07660;     /* GNB 그라데이션 끝 */
    --gt-blue: #76151a;
    --gt-blue-soft: #f0e3dd;
    --gt-text: #1a1a1a;
    --gt-text-sub: #6b7280;
    --gt-line: #e5e7eb;

    /* -- 폰트 토큰 (시안 실측 기준 - 고령층 배려로 큼직하게) ----------
       화면 크기별 조정은 아래 미디어쿼리에서 이 토큰만 덮어씁니다.
       bigtreech 원본과 동일한 이름(--p1~--p5, --section-title 등)도
       함께 정의해 두어 게시판/서브 테마 CSS를 그대로 가져와도 동작합니다. */
    --font-size: 16px;

    /* 메뉴 계열 */
    --gnb-h: 4rem;            /* 64px  알약바 높이 */
    --gnb-pad: 2.25rem;       /* 36px  메뉴 좌우 여백 */
    --f-gnb: 1.1875rem;       /* 19px  GNB 1뎁스 */
    --f-gnb-sub: 1rem;        /* 16px  GNB 2뎁스 */
    --f-util: 1.0625rem;      /* 17px  로그인 / 한소망교회 홈페이지 */
    --f-quick: 1.5625rem;     /* 25px  퀵메뉴 라벨 */
    --nav-label: var(--f-gnb);
    --menu-title: 1.375rem;   /* 22px  모바일 전체메뉴 1뎁스 */
    --menu-sub-heading: var(--f-gnb-sub);
    --menu-item: 1.125rem;

    /* 본문 계열 */
    --section-title: 2.5rem;  /* 40px */
    --section-sub: 1.5rem;    /* 24px */
    --card-title: 1.25rem;    /* 20px */
    --h3: 1.125rem;           /* 18px */
    --p1: 1.375rem;           /* 22px  푸터 대표전화 */
    --p2: 1.125rem;           /* 18px  기본 본문 */
    --p3: 1rem;               /* 16px */
    --p4: 0.9375rem;          /* 15px */
    --p5: 0.8125rem;          /* 13px */
    --caption: 0.75rem;       /* 12px */
    --f-body: var(--p2);
    --f-small: var(--p3);

    /* 헤더 */
    --header-h: 11.9375rem;   /* 191px : 로고영역 + GNB 시작지점 */
    --logo-h: 6.25rem;        /* 100px : 로고 원본 높이 */
}

html {
    font-size: var(--font-size);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    -webkit-text-size-adjust: 100%;          /* iOS 가로/세로 전환 시 글자 크기 자동확대 방지 */
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(31, 127, 245, 0.15);   /* 안드로이드 탭 시 회색 사각형 대신 은은하게 */
}

body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: var(--gt-text);
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: break-word;
	font-family: 'Pretendard';
}

* { box-sizing: border-box; }
h1, h2, h3, h4, h5, p { margin: 0; }
ul, ol, li { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; border: 0; vertical-align: top; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }

/* 키보드 포커스 (고령층-저시력 사용자 접근성) */
a:focus-visible,
button:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
    border-radius: 4px;
}

.hidden { display: none !important; }
.block { display: block !important; }
.hidden-xs { display: inline; }
.visible-xs { display: none; }
.gt-blind {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ------------------------- AOS 튜닝 -------------------------
   기본 AOS 는 100px 을 이동해 고령층에게는 움직임이 과합니다.
   이동거리를 32px 로 줄여 부드럽게 등장하도록 조정합니다.
   (aos.css 다음에 로드되므로 이 값이 적용됩니다) */
[data-aos="fade-up"]    { transform: translate3d(0, 2rem, 0); }
[data-aos="fade-down"]  { transform: translate3d(0, -2rem, 0); }
[data-aos="fade-right"] { transform: translate3d(-2rem, 0, 0); }
[data-aos="fade-left"]  { transform: translate3d(2rem, 0, 0); }
[data-aos="zoom-in"]    { transform: scale(0.92); }

/* JS 가 꺼져 있으면 애니메이션 대상이 사라지므로 즉시 노출 */
.no-js [data-aos] { opacity: 1 !important; transform: none !important; }

/* ------------------------- Layout Base ------------------------- */
.cms-main-layout { position: relative; width: 100%; min-height: 100vh; overflow-x: hidden; }
/* 안쪽(내용) 폭이 정확히 1350px 이 되도록 좌우 패딩만큼 max-width 를 키웁니다.
   -> 퀵메뉴 - 강사카드 - 푸터의 좌우 끝선이 모두 같은 위치에 맞습니다. */
.cms-container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ============================================================================
   HEADER  (메인 : 슬라이드 위 투명 / 서브 : 네이비 배경)
   ========================================================================== */
.cms-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 900;
}
.cms-header.is-sub {
    position: relative;
    background: var(--gt-navy);
}

/* 스크롤 시 상단 고정바 (시안 최초 화면에는 영향 없음) */
.cms-header.is-fixed {
    position: fixed;
    background: rgba(4, 23, 57, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
    animation: gtHeaderDown 0.35s ease;
}
@keyframes gtHeaderDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* 1행 : 로고 + 유틸 */
.cms-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    /* 로고-유틸은 시안대로 컨테이너 밖(화면 가장자리 기준) */
    padding: 1.375rem 7.5rem 0 4.25rem;   /* 시안 실측 : 로고 좌 68px / 유틸 우 120px */
    transition: padding 0.3s ease;
}
.cms-header.is-fixed .cms-header-top { padding-top: 0.9375rem; padding-bottom: 0.9375rem; }

.cms-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; }
.cms-logo-img { height: var(--logo-h); width: auto; transition: height 0.3s ease; }
.cms-header.is-fixed .cms-logo-img { height: 3.75rem; }

/* 로고 : 맨 위는 컬러, 스크롤 고정바·서브(남색 배경)는 흰색 */
.cms-logo-white { display: none; }
.cms-header.is-fixed .cms-logo-color,
.cms-header.is-sub .cms-logo-color { display: none; }
.cms-header.is-fixed .cms-logo-white,
.cms-header.is-sub .cms-logo-white { display: block; }

.cms-header-actions { display: flex; align-items: center; gap: 0.75rem; }

/* 유틸 링크 (로그인 | 한소망교회 홈페이지) */
.cms-top-utils { display: flex; align-items: center; gap: 1rem; }
.cms-top-link {
    display: inline-flex; align-items: center;
    min-height: 2.75rem; padding: 0 0.25rem;
    color: #fff;
    font-size: var(--f-util);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    transition: opacity 0.2s ease;
}
.cms-top-link:hover { opacity: 1; }
.cms-top-sep { width: 1px; height: 1.125rem; background: rgba(255, 255, 255, 0.55); }

/* 햄버거 (태블릿 이하) */
.cms-hamburger-btn {
    display: none;
    width: 3.25rem; height: 3.25rem;
    align-items: center; justify-content: center;
    color: #fff;
    border-radius: 0.75rem;
    transition: background 0.2s ease, color 0.2s ease;
}
.cms-hamburger-btn.is-active { background: #fff; color: var(--gt-navy); }
.cms-icon-lg { width: 2rem; height: 2rem; }

/* ============================================================================
   GNB : 알약(pill) 그라데이션 바
   메뉴 개수만큼만 폭을 차지하고, 선택된 메뉴는 흰색 칩으로 표시하는
   세그먼트 컨트롤 형태입니다. (바를 화면폭 가득 채우려면
   .cms-desktop-nav 의 width 를 100%, max-width 를 var(--container-nav) 로)
   ========================================================================== */
.cms-gnb-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2); /* 1350 컨테이너 기준 가운데 정렬 */
    margin:0 auto 0;
    padding: 0 var(--gutter) 2.5rem;
}
.cms-header.is-fixed .cms-gnb-wrap { margin-top: 0; padding-bottom: 0.75rem; }

.cms-desktop-nav {
    display: flex;
    flex-wrap: wrap;                        /* 메뉴가 많아지면 자동 줄바꿈 */
    align-items: center;
    justify-content: center;
    width: auto;                            /* 내용만큼만 */
    max-width: 100%;
    min-height: var(--gnb-h);
    padding: 0.3125rem 5rem;                     /* 흰색 칩이 바 안쪽에 들어가도록 */
    background: linear-gradient(90deg, var(--gt-blue-1) 0%, var(--gt-blue-2) 100%);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(20, 90, 200, 0.22);
}

.cms-nav-item-wrap { position: relative; display: flex; align-items: center; flex: 0 1 auto; }

/* 1뎁스 */
.cms-nav-item {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: calc(var(--gnb-h) - 0.625rem);
    padding: 0 var(--gnb-pad);
    color: #fff;
    font-size: var(--f-gnb);
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
    border-radius: 999px;
    transition: background 0.22s ease, color 0.22s ease;
}

/* hover / 현재메뉴 : 흰색 칩 + 파란 글자 */
.cms-nav-item-wrap:hover > .cms-nav-item,
.cms-nav-item-wrap:focus-within > .cms-nav-item,
.cms-nav-item-wrap.is-open > .cms-nav-item,
.cms-nav-item.is-active {
    background: #fff;
    color: var(--gt-blue);
}

/* 구분자 - 얇고 은은하게 */
.cms-nav-sep {
    align-self: center;
    width: 1px;
    height: 1.0625rem;
    background: rgba(255, 255, 255, 0.35);
    flex: 0 0 auto;
}

/* 2뎁스 드롭다운 */
.cms-nav-dropdown {
    position: absolute;
    top: 100%; left: 50%;
    z-index: 20;
    min-width: 10.5rem;
    padding-top: 0.5rem;
    transform: translateX(-50%) translateY(0.5rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.cms-nav-item-wrap:hover > .cms-nav-dropdown,
.cms-nav-item-wrap:focus-within > .cms-nav-dropdown,
.cms-nav-item-wrap.is-open > .cms-nav-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.cms-nav-dropdown-inner {
    position: relative;
    padding: 0.375rem;
    background: #fff;
    border: 1px solid rgba(4, 23, 57, 0.06);
    border-radius: 0.75rem;
    box-shadow: 0 10px 28px rgba(4, 23, 57, 0.14), 0 1px 3px rgba(4, 23, 57, 0.06);
}
.cms-nav-sub-heading {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.625rem;
    padding: 0.3125rem 0.875rem;
    color: #3d4757;
    font-size: var(--f-gnb-sub);
    font-weight: 500;
    letter-spacing: -0.02em;
    white-space: nowrap;
    border-radius: 0.5rem;
    transition: background 0.18s ease, color 0.18s ease;
}
.cms-nav-sub-heading:hover,
.cms-nav-sub-heading:focus { background: var(--gt-blue-soft); color: var(--gt-blue); }
.cms-nav-sub-heading.is-active { background: var(--gt-blue-soft); color: var(--gt-blue); }

/* ============================================================================
   Mobile Overlay Menu  (bigtreech 구조 유지 - 고령층 대응 확대)
   ========================================================================== */
.cms-mobile-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;   /* inset 미지원 구형 iOS(<14.1) 폴백 */
    inset: 0;
    z-index: 950;                 /* 헤더(900)보다 위 - 스크롤 위치와 무관하게 항상 덮음 */
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: overlayFadeIn 0.3s ease forwards;
}
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 상단 고정 바 : 닫기 버튼이 항상 보이도록 sticky */
.cms-overlay-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 4.25rem;
    padding: 0 1rem 0 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--gt-line);
}
.cms-overlay-title {
    color: var(--gt-navy);
    font-size: var(--menu-title);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.cms-overlay-close {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    color: var(--gt-navy);
    font-size: var(--p3);
    font-weight: 700;
    letter-spacing: -0.02em;
    background: #eef1f6;
    border-radius: 2rem;
    transition: background 0.2s ease, color 0.2s ease;
}
.cms-overlay-close:hover { background: var(--gt-blue); color: #fff; }
.cms-overlay-close svg { width: 1.25rem; height: 1.25rem; }

.cms-overlay-container {
    min-height: calc(100vh - 4.25rem);
    min-height: calc(100dvh - 4.25rem);   /* iOS 주소창 높이 변화 대응 (미지원 시 위 100vh) */
    padding: 2rem 1.5rem 4rem;
}
.cms-overlay-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
}
.cms-mob-col { min-width: 0; }
.cms-mob-title {
    display: block;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--gt-navy);
    font-size: var(--menu-title);
    font-weight: 800;
    letter-spacing: -0.03em;
    border-bottom: 3px solid var(--gt-blue);
}
.cms-mob-list-container { display: flex; flex-direction: column; gap: 0.25rem; }
.cms-mob-standalone-item,
.cms-mob-sub-heading {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.5rem 0.875rem;
    color: #374151;
    font-size: var(--menu-item);
    font-weight: 500;
    letter-spacing: -0.02em;
    border-radius: 0.625rem;
    transition: background 0.18s ease, color 0.18s ease;
}
.cms-mob-standalone-item:hover,
.cms-mob-sub-heading:hover { background: var(--gt-blue-soft); color: var(--gt-blue); }

/* 좁은 화면에서 헤더 유틸 링크를 대신 노출 */
.cms-mob-utils { display: none; grid-column: 1 / -1; margin-top: 0.5rem; }
.cms-mob-utils a {
    display: flex; align-items: center; justify-content: center;
    min-height: 3.5rem;
    color: #fff;
    font-size: var(--menu-item);
    font-weight: 700;
    background: var(--gt-blue);
    border-radius: 0.75rem;
}

/* ============================================================================
   SUB PAGE (서브 공통 - 필요 최소 구성)
   ========================================================================== */
.sub-page-wrapper { padding: 4rem 0 6rem; }
#subgnb { margin-bottom: 2.5rem; }
.subTDM { display: flex; flex-direction: column; gap: 1.25rem; }
.subTD2 h1 { font-size: var(--section-title); font-weight: 800; letter-spacing: -0.03em; color: var(--gt-navy); }
.subTD3 ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.subTD3 ul li a {
    display: flex; align-items: center; min-height: 3rem;
    padding: 0 1.5rem;
    color: #6b7280; font-size: var(--f-body); font-weight: 500;
    background: #f3f4f6; border-radius: 2rem; transition: 0.2s;
}
.subTD3 ul li a h1 { font-size: inherit; font-weight: inherit; }
.subTD3 ul li.active a,
.subTD3 ul li a:hover { background: var(--gt-blue); color: #fff; }
.depth4 { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.depth4 li a {
    display: flex; align-items: center; min-height: 2.75rem;
    padding: 0 1.25rem; color: #6b7280; font-size: var(--f-small);
    border: 1px solid var(--gt-line); border-radius: 2rem; transition: 0.2s;
}
.depth4 li.active a, .depth4 li a:hover { border-color: var(--gt-blue); color: var(--gt-blue); font-weight: 700; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.cms-footer { background: var(--gt-footer); padding: 3.75rem 0 3.75rem; }
.cms-footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 3.5rem;
}
.cms-footer-logo { width: auto; height: 5rem; }
.cms-footer-info { text-align: right; }
.cms-footer-tel {
    display: inline-block;
    color: #fff;
    font-size: var(--p1);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.cms-footer-tel:hover { text-decoration: underline; }
.cms-footer-addr {
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--p3);
    line-height: 1.6;
}

.cms-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.cms-footer-links { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-left: -0.75rem; }
.cms-footer-link {
    display: inline-flex; align-items: center;
    min-height: 2.75rem; padding: 0 0.75rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--f-small);
    font-weight: 500;
    border-radius: 0.5rem;
    transition: color 0.2s ease, background 0.2s ease;
}
.cms-footer-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.cms-footer-sns { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.75rem; }
.cms-footer-sns a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;
    color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease;
}
.cms-footer-sns a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.cms-footer-sns svg { width: 1.5rem; height: 1.5rem; }

.cms-footer-copy {
    color: rgba(255, 255, 255, 0.42);
    font-size: var(--f-small);
    text-align: right;
}
.cms-footer-copy a { text-decoration: underline; text-underline-offset: 2px; }
.cms-footer-copy a:hover { color: rgba(255, 255, 255, 0.75); }

/* ============================================================================
   맨 위로 버튼 (고령층 이동 편의)
   ========================================================================== */
.gt-top-btn {
    position: fixed;
    right: 1.5rem; bottom: 1.5rem;
    z-index: 800;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.125rem;
    width: 4rem; height: 4rem;
    color: #fff;
    background: var(--gt-blue);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(31, 127, 245, 0.45);
    opacity: 0; visibility: hidden; transform: translateY(0.75rem);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.gt-top-btn.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.gt-top-btn span { font-size: var(--caption); font-weight: 700; letter-spacing: -0.03em; }
.gt-top-btn svg { width: 1.25rem; height: 1.25rem; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */

/* 컨테이너보다 좁아지기 시작 : 1560 이하 - 알약바를 단계적으로 축소 */
@media (max-width: 1560px) {
    :root { --gnb-pad: 1.875rem; }
    .cms-header-top { padding-left: 2.5rem; padding-right: 2.5rem; }
}

@media (max-width: 1400px) {
    :root {
        --gnb-h: 3.75rem; --gnb-pad: 1.5rem; --f-gnb: 1.125rem;
        --f-util: 1.25rem; --f-quick: 1.375rem;
        --logo-h: 5rem;
    }
    .cms-gnb-wrap { padding: 0 2.5rem 2.5rem; margin-top: 1.75rem; }
    .cms-header-top { padding: 1.75rem 2.5rem 0; }
}

@media (max-width: 1280px) {
    :root { --gnb-h: 3.5rem; --gnb-pad: 1.125rem; --f-gnb: 1.0625rem; --f-quick: 1.25rem; }
    .cms-gnb-wrap { padding: 0 2rem 2rem; }
    .cms-footer-logo { height: 4.25rem; }
}

/* 태블릿 이하 : 알약바를 억지로 줄이지 않고 햄버거 전체메뉴로 전환 */
@media (max-width: 1199px) {
    :root {
        --logo-h: 4.5rem; --gutter: 1.25rem;
        --f-util: 1.125rem; --f-quick: 1.1875rem;
        --section-title: 1.875rem; --section-sub: 1.25rem;
    }

    .cms-header-top { padding: 1.25rem 1.5rem; }
    .cms-header.is-fixed .cms-header-top { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .cms-gnb-wrap { display: none; }
    .cms-hamburger-btn { display: inline-flex; }
    .cms-top-utils { gap: 0.75rem; }

    .cms-footer-top { flex-direction: column; align-items: flex-start; gap: 1.75rem; padding-bottom: 2.5rem; }
    .cms-footer-info { text-align: left; }
    .cms-footer-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .cms-footer-copy { text-align: left; }

    .sub-page-wrapper { padding: 2.5rem 0 4rem; }
}

/* 모바일 */
@media (max-width: 767px) {
    :root {
        --f-util: 1rem;
        --f-quick: 1.0625rem;
        --menu-title: 1.25rem;
        --menu-item: 1.0625rem;
        --p2: 1.0625rem;
        --p1: 1.25rem;
        --section-title: 1.625rem;
        --logo-h: 3rem;
    }

    .cms-header-top { padding: 0.75rem 0.875rem; gap: 0.5rem; }
    .cms-header-actions { gap: 0.25rem; }
    .cms-top-utils { gap: 0.375rem; min-width: 0; }
    .cms-top-link { padding: 0 0.125rem; min-height: 2.5rem; }
    .cms-top-sep { height: 0.875rem; }
    .cms-hamburger-btn { width: 2.875rem; height: 2.875rem; }
    .cms-icon-lg { width: 1.75rem; height: 1.75rem; }

    .cms-overlay-head { height: 3.75rem; padding: 0 0.75rem 0 1rem; }
    .cms-overlay-container {
        min-height: calc(100vh - 3.75rem);
        min-height: calc(100dvh - 3.75rem);
        padding: 1.5rem 1rem 3rem;
    }
    .cms-overlay-grid { grid-template-columns: 1fr; gap: 1.75rem; }

    .cms-footer { padding: 2.5rem 0 3rem; }
    .cms-footer-logo { height: 3.75rem; }
    .cms-footer-tel { font-size: var(--p1); }
    .cms-footer-links { gap: 0; margin-left: -0.5rem; }
    .cms-footer-link { padding: 0 0.5rem; }
    .cms-footer-sns { margin-left: 0.25rem; }

    .gt-top-btn { right: 0.875rem; bottom: 0.875rem; width: 3.5rem; height: 3.5rem; }

    .hidden-xs { display: none !important; }
    .visible-xs { display: inline !important; }
}

/* 초소형 : 헤더가 좁아 유틸 링크가 넘칠 때 사이트 이동 링크는 전체메뉴/푸터로 */
@media (max-width: 480px) {
    .cms-top-link-site,
    .cms-top-utils .cms-top-sep:last-of-type { display: none; }
    .cms-mob-utils { display: block; }
}

@media (max-width: 359px) {
    :root { --f-util: 0.9375rem; --logo-h: 2.75rem; }
}

/* 모션 최소화 선호 사용자 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}