/* ==========================================================================
   STYLE SHEET (style.css)
   
   [목차]
   1. CSS 변수 설정 (:root)
   2. 폰트 설정 (Fonts)
   3. 초기화 및 기본 스타일 (Reset & Base)
   4. 공통 유틸리티 (Common Utilities)
   5. 헤더 영역 (Header)
      5-1. PC 헤더 (min-width: 991px)
      5-2. Mobile 헤더 (max-width: 990px)
   6. 메인 콘텐츠 (Main Home)
   7. 서브 페이지 (Sub Page)
      7-1. 서브 탑 (Visual)
      7-2. 탭 메뉴 및 콘텐츠
      7-3. 뉴스 게시판 및 영상
   8. 푸터 영역 (Footer)
   9. 기타 반응형 처리 (Media Queries)
   ========================================================================== */

/* ==========================================================================
   1. CSS 변수 설정 (:root)
   ========================================================================== */
:root {
    /* 테마 컬러: 하이엔드 다크 웜그레이 & 골드 */
    --color-main1: #383531; /* 깊고 따뜻한 차콜그레이 */
    --color-main2: #8C6B2F; /* 고급스러운 골드 (포인트) */
    --color-main3: #A0978E; /* 은은한 그레이 베이지 (서브) */

    /* 레이아웃 치수 */
    --pc-header-height: 80px;
    --mo-header-height: 13vw;
    --maxw: 60rem;
    --pc-gnb-width: 60rem;
}


/* ==========================================================================
   2. 폰트 설정 (Fonts)
   ========================================================================== */
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   3. 초기화 및 기본 스타일 (Reset & Base)
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

html {
    width: 100%;
    max-width: 2560px;
    min-width: 1440px;
    margin: 0 auto;
    scroll-behavior: smooth;
    font-size: 16px;
}

/* 로딩 전 깜빡임 방지 (JS와 연동 필요) */

html, body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Pretendard, Apple SD Gothic Neo, Noto Sans KR, sans-serif;
    color: #111;
    background: #fff;
}

html, body, div, span, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, p, address, pre, cite, form, fieldset, table, th, td, legend, label, button {
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", "Malgun Gothic", "맑은 고딕", Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size-adjust: 0.5;
    font-size: 16px;
    letter-spacing: -.05em;
    font-display: swap;
}

body {
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: none;
    font-family: "Pretendard Variable";
}

a, button {
    cursor: pointer;
    background: transparent;
}

a {
    display: block;
    text-decoration: none;
    white-space: nowrap;
    color: inherit;
    height: fit-content;
}

button {
    all: unset;
    display: inline-block;
    cursor: pointer;
}

p, span, li, h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
    line-height: 1.5;
}

fieldset, img, abbr, acronym, label { border: 0 none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
ol, ul, dl { list-style: none; }
hr { display: none; }
label, select, input, textarea { vertical-align: middle; }
img { display: block; width: 100%; height: auto; max-width: 100%; }
svg { stroke-width: 1; }
video { width: 100%; height: auto; }
small { opacity: 0.8; }


/* ==========================================================================
   4. 공통 유틸리티 (Common Utilities)
   ========================================================================== */
.container { max-width: var(--maxw); margin: 0 auto; }
.HIDDEN { display: none !important; }
site-body { margin: 0 auto; }

/* PC/Mobile 표시 제어 */
@media (min-width: 991px) {
    .pc { display: block; }
    .mo { display: none; }
    page-view { position: relative; display: block; min-height: calc(100vh - 30rem); }
}

@media (max-width: 990px) {
    .pc { display: none; }
    .mo { display: block; }
    html { min-width: initial; } /* 모바일에서 min-width 해제 */
    page-view { position: relative; display: block; min-height: 400px; }
}


/* ==========================================================================
   5. 헤더 영역 (Header)
   ========================================================================== */
header .bgm-toggle { display: none; }

/* --------------------------------------------------------------------------
   5-1. PC 헤더 (min-width: 991px)
   -------------------------------------------------------------------------- */
@media (min-width: 991px) {
    /* 레이아웃 & 배경 */
    .site-header {
        position: fixed; top: 0; width: 100%;
        background: rgb(0 0 0 / 30%);
        height: var(--pc-header-height);
        transition: 0.3s 0.4s;
        max-width: 2560px; z-index: 50;
    }
    .site-header:hover { background: #fff; transition: 0s 0s; }
    .site-header .header-bg {
        background: #000; height: 100vh;
        opacity: 0; pointer-events: none; transition: 0.3s;
    }
    .site-header:hover .header-bg { opacity: 0.5; }

    /* 로고 */
    header .logo { position: absolute; left: 10rem; width: 11rem; }
    header .logo .header-logo-white { display: none; }
    header .logo img { width: 100%; }

    /* GNB 네비게이션 */
    header .gnb {
        display: flex; align-items: center; justify-content: center;
        max-width: 1400px; margin: 0 auto;
        height: var(--pc-header-height);
    }
    header .nav {
        display: flex; width: 100%;
        max-width: var(--pc-gnb-width);
        height: var(--pc-header-height);
    }
    header .nav a {
        display: flex; align-items: center; justify-content: center;
        width: 100%; text-align: center; height: 100%;
        font-size: 18px; font-weight: 600;
    }
    header .nav a:hover { color: var(--color-main1); }
    header .nav a.active { font-weight: 700; }

    /* 우측 전화번호 버튼 */
    header .number {
        position: absolute; right: 10rem; white-space: nowrap;
        background-color: var(--color-main1);
        border-radius: 100px; padding: 4px 22px;
    }
    header .number .feather {
        width: 22px; height: 22px; margin-top: 3px;
        fill: #fff; stroke-width: 0;
    }
    header .number p {
        display: flex; align-items: center; gap: 5px;
        font-weight: 600; font-size: 1.5rem; color: #fff;
    }

    /* 메가 메뉴 */
    .mega-wrap { position: relative; z-index: 1; }
    .mega {
        position: absolute; left: 0; right: 0; top: 100%;
        background: #f5f5f5; max-height: 0; overflow: hidden; transition: 0.5s;
    }
    .site-header:hover .mega { max-height: 1000px; border-bottom: 1px solid #eee; }
    .mega .inner { margin: 0 auto; display: grid; max-width: var(--pc-gnb-width); }
    .mega .col { border-left: 1px solid #ebebeb; }
    .mega .col:last-child { border-right: 1px solid #ebebeb; }
    .mega .col li { width: 100%; }
    .mega .col h4 { margin: 0 0 8px; font-size: 14px; color: #333; display: none; }
    
    .depth2, .depth3 { list-style: none; padding: 0; margin: 0; }
    .depth2 > li:hover { background-color: var(--color-main1); color: #fff; }
    .depth2 > li a { padding: 16px 12px; font-size: 15px; }
    .depth3 { margin-top: 6px; padding-left: 12px; border-left: 2px solid #ddd; display: none; }
    .depth3 a { font-size: 14px; color: #444; }

    /* 모바일 요소 숨김 */
    .mo_gnb, .mo_quick_top { display: none !important; }
}

/* --------------------------------------------------------------------------
   5-2. Mobile 헤더 (max-width: 990px)
   -------------------------------------------------------------------------- */
@media (max-width: 990px) {
    header { background: var(--color-main1); }
    .site-header { position: sticky; top: 0; z-index: 2; }
    .site-header .header-bg { display: none !important; }
    
    header .gnb {
        position: relative; height: var(--mo-header-height);
        display: flex; justify-content: center; align-items: center;
    }

    /* 로고 */
    header .logo { width: 30vw; height: auto; margin-right: 8vw; }
    header .logo .header-logo-color { display: none; }
    header .logo img { width: 100%; }
    header .logo .logo_color { display: none; }

    /* 전화번호 아이콘 */
    header .number {
        position: absolute; display: flex; align-items: center;
        width: 24vw; right: 2vw !important; transition: 0.2s;
    }
    header .number:hover { transform: scale(1.05); }
    header .number img { width: 100%; }

    /* 햄버거 메뉴 버튼 */
    header .menu_btn {
        position: absolute; display: block;
        top: 50%; transform: translateY(-50%); left: 4vw;
        width: 26px; height: 20px; transition: 0.2s;
    }
    header .menu_btn:hover { transform: translateY(-50%) scale(1.2); }
    header .menu_btn div {
        position: absolute; left: 0; width: 100%; height: 2px;
        background-color: #fff; border-radius: 4px;
    }
    header .menu_btn div:nth-child(1) { top: 0; transform-origin: top left; transition: transform 0.2s ease; }
    header .menu_btn div:nth-child(2) { top: 9px; }
    header .menu_btn div:nth-child(3) { bottom: 0; transform-origin: bottom left; transition: transform 0.2s ease; }

    /* 메뉴 오픈 시 햄버거 애니메이션 */
    header.open .menu_btn div { position: absolute; }
    header.open .menu_btn div:nth-child(1) { transform: rotate(45deg); }
    header.open .menu_btn div:nth-child(2) { opacity: 0; }
    header.open .menu_btn div:nth-child(3) { transform: rotate(-45deg); }

    /* 모바일 메뉴 패널 (Mega Wrap) */
    .mega-wrap {
        position: absolute; transform: translateX(-100%);
        transition: 0.3s ease; padding: 3vw 3vw 80vw 3vw;
        width: 100%; height: 100vh; overflow-y: auto;
        background: #383A38; scrollbar-width: none; z-index: 1;
    }
    .open .mega-wrap { transform: translateX(0%); }
    .nav { display: none; }
    .mega .inner { display: block; }
    
    .mega .col { border-bottom: 1px solid #555; }
    .mega .col a { position: relative; padding: 4vw 8vw; color: #C8B9AF; font-size: 4vw; }
    .mega .col a:hover { background: rgb(0 0 0 / 10%); }
    
    /* 아코디언 화살표 */
    .mega .col h4 > a:after {
        content: ""; position: absolute; right: 6vw; top: 5vw;
        width: 1.8vw; height: 1.8vw;
        border-top: 0.6vw solid #C8B9AF; border-right: 0.6vw solid #C8B9AF;
        transform: rotate(135deg); transition: 0.3s;
    }
    .mega .col.mo-open h4 a:after { transform: rotate(-45deg); }

    /* 뎁스 메뉴 */
    header .depth2 { background: rgb(0 0 0 / 20%); display: none; }
    header .depth3 { display: none; }
    header .col.mo-open .depth2 { display: block; }

    /* 모바일 GNB 하단 링크 */
    .mo_gnb li { position: relative; display: flex; width: 100%; }
    .mo_gnb li a, .mo_gnb li span {
        text-align: center !important; color: #fff;
        font-size: 5vw; font-weight: 600; padding: 4vw 0; width: 100%;
    }
    .m_number { margin-top: 60px; background: #4B5055; }
    .m_registration { background: var(--color-main1); }
    
    #menu_btn_close {
        top: auto; transform: none; left: inherit; height: auto;
        background: #222; margin-top: 10px; border-radius: 10px; cursor: pointer;
    }

    /* 모바일 퀵 탑 버튼 */
    .mo_quick_top {
        position: sticky; display: block; top: var(--mo-header-height);
        width: 100%; background-color: #ffe303; cursor: pointer;
    }
    .mo_quick_top .mo-quick-top-img { display: flex; align-items: center; }
    .mo_quick_top .mo-quick-top-img img { width: 100%; }
}


/* ==========================================================================
   6. 메인 콘텐츠 (Main Home)
   ========================================================================== */
.home_pc { position: relative; width: 100%; }
.home_pc .home_bg { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.home_pc .pc-bg-wrap { aspect-ratio: 21/9; }

.home_pc .home_title {
    position: absolute; top: 30%; left: 68%; z-index: 1;
    background: rgb(255 255 255 / 80%);
    min-width: 380px; padding: 40px 30px; border-radius: 20px;
    text-align: center; cursor: default;
    gap: 1.3rem; display: flex; flex-direction: column;
}
.home_pc .home_title .sub_title { font-size: 1.25rem; font-weight: 700; color: var(--color-main1); }
.home_pc .home_title .main_title { font-weight: 700; font-size: 1.75rem; line-height: 1.2; }
.home_pc .home_title .main_title b { font-size: 2.5rem; font-weight: 700; padding: 0 5px; color: var(--color-main1); }
.home_pc .home_title img { width: 200px; margin: 0 auto; }
.home_pc .home_title .txt_box {
    width: 100%; background-color: var(--color-main1);
    font-weight: 700; color: #fff; font-size: 1.75rem;
    font-family: 'GmarketSansBold'; padding: 16px 0; border-radius: 8px;
}

.home_mo { display: flex; flex-direction: column; width: 100%; display: none; }
.home_mo div { line-height: 0; }
.home_mo #db_box { background-color: color-mix(in srgb, var(--color-main1) 60%, black 40%); padding: 10px; }
.home_mo #db_box iframe { width: 100%; }

@media (max-width: 990px) {
    .home_pc { display: none; }
    .home_mo { display: flex; }
    .home_mo #db_box { padding: 2.5vw; }
}


/* ==========================================================================
   7. 서브 페이지 (Sub Page)
   ========================================================================== */

/* --------------------------------------------------------------------------
   7-1. 서브 탑 (Visual)
   -------------------------------------------------------------------------- */
.subtop {
    position: relative; display: flex; flex-direction: column;
    justify-content: center; width: 100%; height: 30rem;
    text-align: center; overflow: hidden;
}

/* 배경 이미지 및 효과 */
.subtop-img {
    position: absolute; width: 100%; height: 100%;
    background: url(/img/sub-page/nav-bg.jpg) center/cover;
    animation: sub_top 1.5s 0s both; animation-delay: 0.5s;
}

/* 텍스트 애니메이션 컨테이너 */
.subtop-wrap {
    display: flex; flex-direction: column; gap: 1rem;
    cursor: default; z-index: 1; opacity: 0;
    animation: subFadeUp 1s ease forwards;
}
.subtop-wrap .subtop-crumb {
    display: flex; justify-content: center; gap: 10px;
    opacity: 0; animation: subFadeUpTo60 1s ease forwards 0.2s;
}
.subtop p {
    font-size: 1.25rem; color: #666;
    opacity: 0; animation: subFadeUp 1s ease forwards 0.35s;
}

/* 메인 타이틀 (H1) */
.subtop h1 {
    display: inline-block; clip-path: inset(0 0 100% 0);
    transform: translateY(10px); opacity: 0;
    font-size: clamp(52px, 4.8vw, 62px); font-weight: 800;
    letter-spacing: -1.2px; color: #222; margin-bottom: 22px;
    animation: subTitleReveal 900ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards 0.15s;
}
.subtop h1::after {
    content: ""; display: block; width: 52px; height: 4px;
    background: var(--color-main2); margin: 18px auto 0; border-radius: 99px;
}

/* Keyframes */
@keyframes sub_top { 0% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes subFadeUp { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes subFadeUpTo60 { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 0.6; transform: translateY(0); } }
@keyframes subTitleReveal {
    0% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translateY(10px); }
    100% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0); }
}

@media (max-width: 990px) {
    .subtop { margin-bottom: 0; height: 50vw; }
    .subtop-wrap { gap: 0.5rem; }
    .subtop h1 { font-size: 8vw; color: #353535; padding-top: 0; }
    .subtop p { font-size: 3.2vw; color: #555; }
    .subtop-img { background-position: right; background-size: cover; }
}

/* --------------------------------------------------------------------------
   7-2. 탭 메뉴 및 콘텐츠 (수정완료: 배경 투명화 및 여백 최적화)
   -------------------------------------------------------------------------- */
.tab { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
.tab .tab-btn {
    display: flex; align-items: center; justify-content: center;
    width: 50%; max-width: 200px; height: 100%;
    border: 1px solid #dbdbdb; padding: 10px 12px;
    background: #fff; transition: 0.2s; box-sizing: border-box;
}
.tab .tab-btn:hover { background: #f5f5f5; font-weight: bold; }
.tab .tab-btn.on { background: var(--color-main1); pointer-events: none; }
.tab .tab-btn a { display: flex; align-items: center; justify-content: center; height: 100%; }
.tab .tab-btn.on a { color: #fff; }
.tab-btn.active, .tab-btn[aria-current="page"] { background: var(--color-main1) !important; border-color: var(--color-main1); color: #fff; }

.subnav-wrap { margin: 1.5rem 0 !important; } /* 1번 영역 여백 축소 */
.subnav--depth3 { margin: 1.5rem; }
.subnav--depth3 .tab {
    padding-top: 1.5rem; width: var(--maxw);
    border-top: 1px solid #eee; margin: 0 auto;
}
.subnav--depth3 .tab .tab-btn { border: 0; background: transparent; }
.subnav--depth3 .tab .tab-btn.active {
    background: rgb(0 0 0 / 3%) !important;
    color: var(--color-main1); font-weight: bold;
}

/* 2번 영역: 회색 박스 제거 및 배경 투명화 */
.contents_wrap {
    display: flex; flex-wrap: wrap; width: 100%;
    max-width: 1000px; margin: 0 auto; padding-top: 0 !important; padding-bottom: 10rem;
    background-color: transparent !important;
}
.contents_wrap .contents-box {
    display: flex; flex-direction: column; width: 100%; height: auto; margin: 0 auto;
    background-color: transparent !important;
}
.contents_wrap .contents-box img { width: 100%; height: auto; display: block; margin: 0 auto; }
.contents_wrap .contents-box h3 { width: 100%; font-size: 2rem; margin-bottom: 10px; }
.contents_wrap .contents-box ul, .contents_wrap .contents-box ul li {
    width: 100%; height: auto; display: flex; flex-wrap: wrap; align-content: flex-start;
}

/* 기존 회색 배경 요소 무력화 */
.contents_wrap .contents-box h2 {
    font-size: 1.5rem; font-weight: bold; padding: 20px 0;
    text-align: center; color: #3a3a3a; 
    background-color: transparent !important; /* 회색 배경 제거 */
    margin-top: 5px; margin-bottom: 5px;
}
.contents_wrap .contents-box .overview-txt {
    background: transparent !important; /* 회색 배경 제거 */
    text-align: center; font-size: 1.5rem;
    padding: 10px 0; font-weight: 600; letter-spacing: 1px;
}

/* 페이드업(Fade Up) 효과 */
.contents-box, .video-container, .news-board li, .db_box {
    opacity: 0; transform: translateY(40px);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.visible { opacity: 1 !important; transform: translateY(0) !important; }
/* --------------------------------------------------------------------------
   7-3. 뉴스 게시판 및 영상
   -------------------------------------------------------------------------- */
.contents_wrap .news-board .news-title {
    font-size: 1.2rem; word-break: keep-all; line-height: 1.2em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contents_wrap .news-board .on .news-title { font-weight: bold; }

.contents_wrap .news-board li {
    position: relative; border-bottom: 1px solid #dbdbdb; padding: 18px; cursor: pointer;
}
.contents_wrap .news-board li::after {
    content: ''; position: absolute; right: 30px; top: 30px;
    display: block; width: 8px; height: 8px;
    border-right: 1px solid #333; border-top: 1px solid #333;
    transform: translateY(-50%) rotate(135deg); transition: .3s;
}
.contents_wrap .news-board li.on::after { transform: translateY(-50%) rotate(315deg); }
.contents_wrap .news-board li:first-child { border-top: 1px solid #dbdbdb; }

.contents_wrap .news-board li .acd_body {
    display: inline-block; width: 100%; height: 0; overflow: hidden; transition: .3s;
}
.contents_wrap .news-board li .acd_body:hover { opacity: 0.5; }
.contents_wrap .news-board li.on .acd_body { height: fit-content; padding: 22px 0px 0px; }
.contents_wrap .news-board li.on .acd_body span {
    display: block; white-space: normal; width: 100%; line-height: 1.5; color: #555;
}

/* 뉴스 게시판 등장 순차 딜레이 */
.news-board li:nth-child(1) { transition-delay: 0.1s; }
.news-board li:nth-child(2) { transition-delay: 0.2s; }
.news-board li:nth-child(3) { transition-delay: 0.3s; }
.news-board li:nth-child(4) { transition-delay: 0.4s; }
.news-board li:nth-child(5) { transition-delay: 0.5s; }

/* 비디오 컨테이너 */
.contents_wrap .video-container {
    position: relative; width: 100%; max-width: 1000px; aspect-ratio: 16 / 9; margin-bottom: 3rem;
}
.contents_wrap .video-container:last-child { margin-bottom: 0; }
.contents_wrap .video-container h3 { font-size: 1.5rem; padding: 10px 0; }
.contents_wrap .video-container iframe { position: relative; width: 100%; height: 100%; top: 0; left: 0; }

/* DB Box */
.contents_wrap .db_box {
    position: relative; width: 100%; max-width: 600px;
    margin: 0 auto; padding-bottom: 100%; height: 0; overflow: hidden;
}
.contents_wrap .db_box iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

@media (max-width: 990px) {
    .contents_wrap .news-board .news-title { width: 90%; }
    .contents_wrap .db_box {
        position: relative; width: 100%; padding-bottom: 150%; height: 0; overflow: hidden;
    }
}


/* ==========================================================================
   8. 푸터 영역 (Footer)
   ========================================================================== */
.footer { width: 100%; background: #1b1b1b; cursor: default; }
.footer .ft_wrap {
    display: flex; width: 1400px; margin: 0 auto;
    padding: 3rem 0 4rem; color: #fff;
}

/* 푸터 좌측 정보 */
.footer .ft_box1 { display: flex; flex-direction: column; width: 70%; }
.footer .ft_box1 .logo-white { width: 9rem; margin-bottom: 1.25rem; }
.footer .ft_box1 .logo-color { display: none; }
.footer .ft_box1 .title { font-size: 1.75rem; font-weight: 700; padding-bottom: 20px; }
.footer .ft_box1 .copyright .title { font-size: revert; font-weight: revert; }

.footer .ft_box1 table {
    font-size: 1rem; font-weight: 500; line-height: 1.75; margin-bottom: 1.25rem;
}
.footer .ft_box1 tr td:nth-child(1) { width: 120px; font-weight: bold; }
.footer .ft_box1 p { font-size: 0.75rem; font-weight: 300; line-height: 1.75; opacity: 0.8; }

/* 푸터 우측 정보 */
.footer .ft_box2 {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-direction: column; padding: 10px 0 0; width: 30%; height: 100%;
}
.footer .ft_box2 .ft_number { display: flex; align-items: center; font-size: 1.5rem; }
.footer .ft_box2 .ft_number a b { font-size: 1.8rem; font-family: 'GmarketSansBold'; }

@media (max-width: 990px) {
    .footer { padding-bottom: 48vw; cursor: default; background: #f2f2f2; }
    .footer .ft_wrap {
        flex-direction: column-reverse; width: initial; padding: 0; color: #333;
    }
    
    .footer .ft_box1 { width: initial; padding: 3vw 0 0 3vw; }
    .footer .ft_box1 .logo-color { width: 10rem; display: block; }
    .footer .ft_box1 .logo-white { display: none; }
    .footer .ft_box1 .title { font-size: 5vw; padding-bottom: 1rem; }
    
    .footer .ft_box1 table { line-height: 1.5; margin: 1rem 0; }
    .footer .ft_box1 table tr td { font-size: 2.8vw; }
    .footer .ft_box1 table tr td:nth-child(1) { width: 16vw; }
    .footer .ft_box1 p {
        font-size: clamp(12px, 2vw, 14px); text-wrap: auto;
        white-space: normal; word-break: auto-phrase;
    }
    .footer .ft_box1 .copyright { padding-top: 0; padding-bottom: 20px; }

    .footer .ft_box2 {
        width: initial; align-items: initial; padding: 8vw 2.5vw 2.5vw;
        border-bottom: 1px solid #cdcdcd; flex-direction: row;
    }
    .footer .ft_box2 .ft_number { font-weight: 600; line-height: 1; }
    
    /* 탑 버튼 (모바일 전용) */
    .footer .ft_box2 #scrollTopBtn {
        display: flex; align-items: center; justify-content: center;
        width: 10vw; height: 10vw; background: var(--color-main1); border-radius: 100px;
    }
    .footer .ft_box2 #scrollTopBtn .feather {
        width: 22px; height: 22px; color: #fff; fill: transparent; stroke-width: 3px; padding-top: 0.5vw;
    }
}


/* ==========================================================================
   9. 기타 반응형 처리 (Media Queries)
   ========================================================================== */
@media (max-width: 1681px) {
    header .logo { left: 5rem; }
    header .number { right: 5rem; }
    header .bgm-toggle { right: 17rem; }
}

@media (max-width: 1441px) {
    header .logo { left: 1rem; }
    header .number { right: 1rem; }
    header .bgm-toggle { right: 13rem; }
}

/* 가로 모드 및 높이가 낮은 화면 대응 */
@media (orientation: landscape) and (pointer: coarse) {
    .home_mo::before {
        content: "가로모드에서는 화면이 정상적으로 표시되지 않을 수 있습니다. 세로모드로 확인해 주세요.";
        display: block; position: sticky; top: 0; z-index: 99999;
        padding: 10px 12px; font-size: 18px; line-height: 1.35;
        background: rgba(0, 0, 0, .78); color: #fff; backdrop-filter: blur(6px); text-align: center;
    }
    .home_mo { padding-top: 0 !important; }
    .popup_wrap { display: none !important; }

    @media (max-height: 520px) {
        site-header, site-footer { display: none !important; }
        body { padding-top: 0 !important; padding-bottom: 0 !important; }
    }
}