@charset "utf-8";

/* ===================================
   메인 페이지 스타일
   여수시 청년정책 플랫폼
   =================================== */

/* 메인 페이지 전용 CSS 변수 */
:root {
    --main-visual-padding-top: 80px;
    --main-visual-padding-bottom: 80px;
    --main-news-banner-width: 847px;
    --main-cta-banner-width: 1340px;
}


/* ===================================
   메인 콘텐츠 여백
   =================================== */
#content {
    margin-top: var(--layout-header-height);
}


/* ===================================
   비주얼 섹션 (Visual Section)
   =================================== */
#visual {
    padding: var(--main-visual-padding-top) 0 var(--space-120) 0;
}

.main_title {
    margin-bottom: var(--space-48);
}

.main_title h1 {
    font-size: var(--font-72);
    font-weight: var(--weight-extrabold);
    color: var(--color-gray-900);
}

.main_title h1 .highlight {
    color: var(--color-primary);
}

/* 최신 소식 배너 */
.news_banner {
    width: var(--main-news-banner-width);
    margin: 0 auto var(--main-visual-padding-bottom);
    padding: 0 var(--space-24);
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.news_icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.news_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.news_content {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: var(--font-19);
}

.news_label {
    font-weight: var(--weight-bold);
    color: var(--color-gray-600);
    white-space: nowrap;
}

.news_slider {
    position: relative;
    flex: 1;
    overflow: hidden;
    height: var(--font-28);
}

.news_text {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.news_text.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.news_number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--icon-lg);
    height: var(--icon-lg);
    padding: 0 var(--space-8);
    background-color: var(--color-news-badge-bg);
    color: var(--color-news-badge-text);
    font-size: var(--font-17);
    font-weight: var(--weight-bold);
    border-radius: var(--radius-xl);
    flex-shrink: 0;
}

.news_link {
    color: var(--color-gray-900);
    text-decoration: underline;
    text-underline-offset: var(--space-4);
    font-weight: var(--weight-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - var(--icon-lg) - var(--space-8));
}

.news_link:hover {
    color: var(--color-primary);
}

.news_controls {
    display: flex;
    gap: var(--space-4);
    width: var(--btn-height-xl);
    height: 23px;
}

.news_controls button {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    color: transparent;
    font-size: 0;
    transition: all var(--duration-fast) var(--ease-out);
    position: relative;
}

.news_controls button:hover {
    background-color: transparent;
    color: var(--color-primary);
}

.news_prev::before,
.news_next::before,
.news_pause::before {
    content: '';
    display: block;
    width: var(--space-10);
    height: var(--icon-xs);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.news_prev::before,
.news_next::before {
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(92%);
}

.news_prev::before {
    background-image: url('../img/arrow-left.svg');
}

.news_next::before {
    background-image: url('../img/arrow-right.svg');
}

.news_pause::before {
    background-image: url('../img/pause-icon.svg');
}

.news_pause.playing::before {
    background-image: url('../img/play-icon.svg');
}

.news_prev:hover::before,
.news_next:hover::before {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

.news_pause:hover::before {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

/* 비주얼 카드 그리드 */
.visual_cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-32);
    margin-top: 60px;
}

.visual_card {
    position: relative;
    padding: var(--space-64) var(--space-32);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    box-shadow: var(--shadow-md);
    transition: all var(--duration-base) var(--ease-out);
}

.visual_card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.visual_card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.visual_card:nth-child(1) {
    background: var(--color-warning);
}

.visual_card:nth-child(2) {
    background: var(--color-primary);
}

.visual_card:nth-child(3) {
    background: var(--color-secondary);
}

.card_content h3 {
    font-size: var(--font-36);
    color: var(--color-white);
    margin-bottom: var(--space-16);
}

.card_content p {
    font-size: var(--font-16);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-24);
    opacity: 0.95;
}

.card_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    width: 118px;
    height: var(--btn-height-xl);
    border: var(--border-width-thick) solid var(--color-white);
    border-radius: var(--radius-round-md);
    color: var(--color-white);
    text-decoration: none;
    font-weight: var(--weight-bold);
    transition: all var(--duration-fast) var(--ease-out);
}

.card_btn .arrow {
    font-style: normal;
    font-size: var(--font-20);
    line-height: 1;
    transition: transform var(--duration-fast) var(--ease-out);
}

.card_btn:hover {
    background-color: var(--color-white);
    color: var(--color-gray-900);
}

.card_btn:hover .arrow {
    transform: translateX(4px);
}

.card_image {
    position: absolute;
    right: var(--space-20);
    bottom: var(--space-40);
    width: 200px;
    height: 200px;
}

.card_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ===================================
   섹션 공통 스타일
   =================================== */
.sections {
    position: relative;
}

.section_01 {
    background-color: var(--color-white);
}

.section_02 {
    position: relative;
    background: linear-gradient(to bottom, var(--color-white) 0%, #E3F2FD 100%);
    padding: 0 0 var(--space-120) 0;
}

.section_02::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40%;
    height: 50%;
    background: radial-gradient(ellipse at bottom left, rgba(33, 150, 243, 0.3) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.section_02::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 50%;
    background: radial-gradient(ellipse at bottom right, rgba(76, 175, 80, 0.3) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.section_02 > * {
    position: relative;
    z-index: 1;
}

.section_02 .title_con h2 .highlight {
    color: var(--color-primary);
}

.section_02 .title_con p {
    font-size: var(--font-20);
}


/* ===================================
   Section 3: 소식 알림
   =================================== */
.section_03 {
    background-color: var(--color-white);
    padding: var(--space-120) 0;
}

.news_container {
    display: flex;
    gap: 121px;
    align-items: flex-start;
    position: relative;
}

.news_container::before {
    content: '';
    position: absolute;
    left: calc(364px + var(--btn-height-xl));
    top: 0;
    bottom: 0;
    width: var(--border-width);
    background: var(--color-gray-200);
}

/* 왼쪽: 타이틀 + 카테고리 필터 */
.news_filter {
    flex-shrink: 0;
    width: 364px;
    height: 510px;
    display: flex;
    flex-direction: column;
}

.news_filter .title_con {
    position: relative;
    top: calc(-1 * var(--space-10));
    margin-bottom: var(--space-25);
}

.news_filter .title_con h2 {
    margin-bottom: 0;
}

.news_filter .title_con h2 .highlight {
    color: var(--color-primary);
}

.news_filter .title_con p {
    font-size: var(--font-20);
    font-weight: var(--weight-regular);
    color: var(--color-gray-500);
    margin-bottom: 0;
}

/* 오른쪽: 소식 그리드 */
.news_grid {
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-30);
}

.news_card {
    height: 240px;
    padding: var(--space-30);
    background: var(--color-gray-50);
    border-radius: var(--radius-pill);
    overflow: hidden;
    transition: all var(--duration-base) var(--ease-out);
}

.news_card a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.news_card a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: var(--radius-lg);
}

.news_card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* 카드 헤더 */
.news_card .card_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.news_card .card_title {
    flex: 1;
    font-size: var(--font-24);
    font-weight: var(--weight-bold);
    line-height: 1.4;
    color: var(--color-gray-900);
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    min-height: calc(1.4em * 2);
}

.news_card .badge-new {
    display: inline-block;
    width: 24px;
    margin-left: var(--space-4);
    vertical-align: middle;
}

.news_card .card_arrow {
    flex-shrink: 0;
    font-size: 36px;
    font-weight: var(--weight-semibold);
    color: var(--color-black);
    margin-left: var(--space-12);
    line-height: 1;
    transition: all var(--duration-base) var(--ease-out);
}

.news_card:hover .card_arrow {
    color: var(--color-primary);
    transform: translate(4px, -4px);
}

/* 카드 설명 */
.news_card .card_desc {
    font-size: var(--font-19);
    font-weight: var(--weight-regular);
    line-height: 1.6;
    color: var(--color-gray-600);
    margin-bottom: var(--space-20);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* 카드 푸터 */
.news_card .card_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.news_card .card_category {
    font-size: var(--font-19);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
}

.news_card .card_date {
    font-size: var(--font-17);
    font-weight: var(--weight-regular);
    color: var(--color-gray-500);
}


/* ===================================
   Section 4: 청년참여 리얼후기
   =================================== */
.section_04 {
    background: linear-gradient(to bottom, var(--color-gray-48) 0%, var(--tag-blue-bg) 100%);
    background-image: url('../img/section4-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    padding: var(--subnav-height) 0 0 0;
}

.section_04 .title_con {
    position: relative;
    z-index: 2;
}

.section_04 .title_con h2 {
    margin-bottom: 0;
}

.section_04 .title_con p {
    font-size: var(--font-20);
    font-weight: var(--weight-regular);
}

.section_04 .title_con h2 .highlight {
    color: var(--color-primary);
}

/* 배경 이모지 장식 */
.review_emojis {
    position: absolute;
    top: var(--space-40);
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    height: auto;
    z-index: 1;
    pointer-events: none;
    animation: emoji_float 2000ms ease-in-out 0s infinite alternate;
}

@keyframes emoji_float {
    0% { margin-top: 0px; }
    100% { margin-top: var(--space-20); }
}

.review_emojis img {
    width: 100%;
    height: auto;
    display: block;
}

/* 후기 컨테이너 */
.review_container {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 0 100px;
    position: relative;
    z-index: 2;
}

/* CTA 배너 컨테이너 padding 처리 */
.review_container:has(.review_cta_banner) {
    padding: 0 var(--space-40);
}

/* 1340px 이상에서는 padding 제거 (배너가 max-width로 제한되어 자연스럽게 여백 생김) */
@media screen and (min-width: 1340px) {
    .review_container:has(.review_cta_banner) {
        padding: 0;
    }
}

.review_grid_wrapper {
    width: 100%;
    overflow: hidden;
    margin-bottom: var(--btn-height-xl);
    padding: var(--space-20) 0;
    margin-top: calc(-1 * var(--space-20));
}

.review_grid {
    display: flex;
    gap: var(--btn-height-xl);
    list-style: none;
    padding: 0;
    margin: 0;
    width: max-content;
    animation: scroll_left_review 60s linear infinite;
}

@keyframes scroll_left_review {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.review_card {
    background: var(--color-white);
    border-radius: var(--radius-pill);
    padding: var(--space-64) var(--space-30);
    box-shadow: var(--shadow-banner);
    transition: all var(--duration-base) var(--ease-out);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    min-height: 240px;
    width: 400px;
    flex-shrink: 0;
}

.review_card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.review_image {
    display: none;
}

.review_text {
    font-size: var(--font-24);
    line-height: 1.7;
    color: var(--color-gray-900);
    font-weight: var(--weight-bold);
    margin-bottom: auto;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* 5줄까지만 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.review_id {
    font-size: var(--font-19);
    color: var(--color-gray-500);
    font-weight: var(--weight-semibold);
    margin: var(--space-15) 0 0 0;
}

/* CTA 배너 */
.review_cta_banner {
    background: var(--color-dark-navy);
    border-radius: var(--radius-pill) var(--radius-pill) 0 0;
    padding: 0;
    position: relative;
    overflow: visible;
    width: var(--main-cta-banner-width);
    height: var(--height-cta-banner);
    margin: 0 auto;
}

/* 추가 섹션 배경 */
.section_05 { background-color: var(--color-white); }
.section_06 { background-color: var(--color-gray-50); }
.section_07 { background-color: var(--color-white); }
.section_08 { background-color: var(--color-gray-50); }


/* ===================================
   정부지원 카드 (gov_card)
   =================================== */
.gov_card {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-32);
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.gov_card:hover {
    transform: translateY(calc(-1 * var(--space-4)));
    box-shadow: var(--shadow-xl);
}

.gov_card_header {
    margin-bottom: var(--space-24);
    padding-bottom: var(--space-16);
    border-bottom: var(--border-width-thick) solid var(--color-primary);
}

.gov_card_title {
    font-size: var(--font-24);
    color: var(--color-gray-800);
}

.gov_card_content {
    margin-bottom: var(--space-24);
}

.gov_card_content p {
    color: var(--color-gray-500);
    line-height: var(--leading-relaxed);
}

.gov_card_footer {
    display: flex;
    justify-content: flex-end;
}

.card_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-32);
}


/* ===================================
   관련사이트 배너 (Partner Banner)
   - 상세 스타일은 파트너 배너 슬라이더 섹션 참조
   =================================== */
.partner_banner {
    border-radius: var(--radius-pill-sm);
}


/* ===================================
   푸터 (Footer)
   =================================== */
.section_footer {
    background-color: var(--color-bg-sub);
    color: var(--color-gray-800);
}

.footer_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-30);
}

.footer_logo {
    display: flex;
    justify-content: center;
    padding: var(--space-30) 0 0 0;
}

.footer_logo img {
    height: var(--btn-height-xl);
    width: auto;
}

.footer_menu {
    width: 100%;
    display: flex;
    justify-content: center;
}

.footer_menu ul {
    display: flex;
    align-items: center;
    gap: 0;
}

.footer_menu li {
    position: relative;
    padding: 0 var(--space-20);
}

.footer_menu a {
    color: var(--color-gray-800);
    font-size: var(--font-17);
    font-weight: var(--weight-bold);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}

.footer_menu li:first-child a {
    color: var(--color-primary);
}

.footer_menu a:hover {
    color: var(--color-primary);
}

.footer_info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
}

.footer_info address {
    font-style: normal;
    color: var(--color-gray-600);
    font-size: var(--font-17);
    font-weight: var(--weight-medium);
    line-height: var(--leading-relaxed);
}

.footer_info address p {
    margin: var(--space-4) 0;
}

.footer_info a {
    color: var(--color-gray-600);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.footer_info a:hover {
    color: var(--color-primary);
}

.copyright {
    color: var(--color-gray-500);
    font-size: var(--font-17);
    font-weight: var(--weight-medium);
    margin-top: var(--space-8);
}


/* ===================================
   팝업 (Modal/Popup)
   =================================== */
.popup_con {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--rgba-black-90);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-out),
                visibility var(--duration-base) var(--ease-out);
    overflow-y: auto;
}

.popup_con.active {
    opacity: 1;
    visibility: visible;
}

.popup_con .width_con {
    padding: var(--space-64) var(--space-24);
}

.btn_popup_close {
    position: fixed;
    top: var(--space-24);
    right: var(--space-24);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rgba-white-20);
    border-radius: var(--radius-full);
    color: var(--color-white);
    font-size: var(--font-24);
    z-index: calc(var(--z-modal) + 10);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-out),
                visibility var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
    backdrop-filter: blur(5px);
}

.popup_con.active ~ .btn_popup_close {
    opacity: 1;
    visibility: visible;
}

.btn_popup_close:hover {
    background-color: var(--color-warning);
    transform: rotate(90deg);
}


/* ===================================
   최상단 이동 버튼 (Scroll to Top)
   =================================== */
.btn_top {
    position: fixed;
    bottom: var(--space-32);
    right: var(--space-32);
    width: var(--space-64);
    height: var(--space-64);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-out),
                visibility var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
    z-index: var(--z-sticky);
    cursor: pointer;
}

.btn_top svg {
    width: var(--icon-md);
    height: var(--icon-md);
    flex-shrink: 0;
}

.btn_top span {
    font-size: var(--font-14);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: 0.5px;
}

.btn_top.show {
    opacity: 1;
    visibility: visible;
}

.btn_top:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(calc(-1 * var(--space-4)));
}

.btn_top:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


/* ===================================
   버튼 컨테이너 (Button Container)
   =================================== */
.btn_con {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
    align-items: center;
}


/* ===================================
   스크롤 애니메이션 (Scroll Animation)
   ===================================

   메인 페이지 전용 Fade-in 애니메이션

   작동 방식:
   1. wait_scroll.js가 IntersectionObserver로 .show_trigger 요소 감지
   2. .show_trigger가 뷰포트 66%에 도달하면 .wait_scroll 클래스 제거
   3. .wait_scroll 클래스 제거 시 opacity/blur/transform 애니메이션 실행
   4. 요소별 transition-delay로 순차적 애니메이션 효과

   구조:
   - .sections.wait_scroll: 초기 숨김 상태 (opacity: 0, blur: 4px)
   - .sections: 보임 상태 (opacity: 1, blur: 0)
   - .show_trigger: 애니메이션 트리거 포인트 (height: 200px)
   =================================== */

/* 기본 애니메이션 스타일 - 보임 상태 */
.sections .width_con .title_con h2,
.sections .width_con .title_con h3,
.sections .width_con .title_con h4,
.sections .width_con .title_con h5,
.sections .width_con .title_con h6 {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition: all 1200ms ease-out;
}

.sections .width_con .title_con h4:before {
    transition: inherit;
}

/* 순차적 딜레이 */
.sections .width_con .title_con h1,
.sections .width_con .title_con h2 {
    transition-delay: 200ms;
}

.sections .width_con .title_con h4 {
    transition-delay: 400ms;
}

.sections .width_con .title_con h5 {
    transition-delay: 600ms;
}

.sections .width_con .title_con h6 {
    transition-delay: 800ms;
}

/* wait_scroll 클래스가 있을 때 숨김 */
.sections.wait_scroll .width_con .title_con h2,
.sections.wait_scroll .width_con .title_con h3,
.sections.wait_scroll .width_con .title_con h4,
.sections.wait_scroll .width_con .title_con h5,
.sections.wait_scroll .width_con .title_con h6 {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(var(--space-36));
}

.sections.wait_scroll .width_con .title_con h4:before {
    width: 144px;
}

/* p 태그 추가 (원본에는 없지만 필요) */
.sections .width_con .title_con p {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition: all 1200ms ease-out;
    transition-delay: 300ms;
}

.sections.wait_scroll .width_con .title_con p {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(var(--space-36));
}

/* section1 (width_con 없는 섹션) 예외 처리 */
.sections > .title_con h2,
.sections > .title_con h3,
.sections > .title_con p {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition: all 1200ms ease-out;
}

.sections > .title_con h2 {
    transition-delay: 200ms;
}

.sections > .title_con p {
    transition-delay: 300ms;
}

.sections.wait_scroll > .title_con h2,
.sections.wait_scroll > .title_con h3,
.sections.wait_scroll > .title_con p {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(var(--space-36));
}

/* section1의 policy_cards */
.sections > .policy_cards {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition: all 1200ms ease-out;
    transition-delay: 600ms;
}

.sections.wait_scroll > .policy_cards {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(var(--space-36));
}

/* stack_card: 슬라이더 너비 고정 */
.stack_card .slick-slide,
.stack_card .policy_card {
    width: var(--card-width) !important;
    max-width: var(--card-width) !important;
}

/* width_con 안의 다른 콘텐츠들 */
.sections .width_con > div:not(.title_con):not(.show_trigger),
.sections > .review_grid_wrapper,
.sections .review_container > div {
    /*opacity: 1;*/
    /*filter: blur(0);*/
    /*transform: translateY(0);*/
    /*transition: all 1200ms ease-out;*/
    /*transition-delay: 600ms;*/
}

.sections.wait_scroll .width_con > div:not(.title_con):not(.show_trigger),
.sections.wait_scroll > .review_grid_wrapper,
.sections.wait_scroll .review_container > div {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(var(--space-36));
}

/* show_trigger - 높이를 줘서 섹션 중간쯤에 위치하게 함 */
.show_trigger {
    display: block;
    height: 200px;
    visibility: hidden;
}


/* ===================================
   반응형 스타일 (Responsive)
   =================================== */

/* ===================================
   태블릿 (1026px ~ 1440px)
   =================================== */
@media screen and (max-width: 1440px) and (min-width: 1026px) {
    /* CTA 배너 컨테이너 padding (태블릿) */
    .review_container:has(.review_cta_banner) {
        padding: 0 30px;
    }

    /* CTA 배너 */
    .review_cta_banner {
        width: 100%;
        max-width: var(--main-cta-banner-width);
        margin: 0 auto;
    }

    /* 비주얼 카드 이미지 - 브라우저 크기에 따라 축소 */
    .card_image {
        width: clamp(100px, 10vw, 160px);
        height: clamp(100px, 10vw, 160px);
    }
}

/* ===================================
   태블릿 (1026px ~ 1299px) - 소식 알림 1열
   =================================== */
@media screen and (max-width: 1299px) and (min-width: 1026px) {
    .news_grid {
        grid-template-columns: 1fr;
    }
}


/* ===================================
   데스크톱 (1025px 이하)
   =================================== */
@media screen and (max-width: 1025px) {
    /* CTA 배너 컨테이너 padding */
    .review_container:has(.review_cta_banner) {
        padding: 0 30px;
    }

    /* 메인 타이틀 */
    .main_title {
        margin-bottom: var(--space-30);
    }

    .main_title h1 {
        font-size: var(--font-72);
        font-weight: var(--weight-extrabold);
    }

    .main_title h1 br {
        display: none;
    }

    /* 비주얼 카드 이미지 */
    .card_image {
        width: 130px;
        height: 130px;
        right: 10px;
    }

    /* 카드 그리드 */
    .card_grid {
        grid-template-columns: 1fr;
    }

    /* 타이틀 */
    .title_con {
        margin-bottom: var(--space-32);
    }

    /* 정책 카드 */
    .policy_cards {
        height: 660px;
        display: flex;
        align-items: center;
    }

    .section_02 {
        padding: 0 0 var(--space-120) 0;
    }

    /* 소식 알림 */
    .news_grid {
        grid-template-columns: 1fr;
    }

    /* Section 4 - 후기 섹션 */
    .section_04 {
        padding-bottom: 0;
    }

    .review_emojis {
        width: 1140px;
    }

    .review_container {
        padding: 0 15px;
    }

    /* CTA 배너 */
    .review_cta_banner {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .cta_content {
        padding: 0 var(--space-40) 0 var(--space-30);
        gap: var(--space-20);
    }

    .cta_people {
        width: 336px;
        bottom: 21px;
        left: calc(-1 * var(--subnav-height));
    }

    .cta_text {
        font-size: var(--font-24);
        white-space: nowrap;
        margin-left: -50px;
    }

    .cta_button {
        width: clamp(120px, 14vw, 157px);
        height: clamp(42px, 5vw, 51px);
        flex-shrink: 0;
    }

    .cta_button span {
        font-size: var(--font-17);
    }

    .cta_button .icon {
        width: 30px;
        height: 30px;
    }
}


/* ===================================
   중간 태블릿 (900px 이하)
   =================================== */
@media screen and (max-width: 900px) {
    /* 메인 타이틀 */
    .main_title h1 {
        font-size: var(--font-56);
    }

    /* 비주얼 카드 - 슬라이더 모드 */
    .visual_cards {
        /*display: block; !* 슬라이더를 위해 그리드 비활성화 *!*/
        flex-direction: column;
        display: flex;
    }

    .visual_card {
        width: 100% !important;
    }

    /* 비주얼 카드 이미지 */
    .card_image {
        width: 180px;
        height: 180px;
        right: var(--space-30);
        bottom: var(--space-40);
    }

    /* 검색 영역 */
    .search_area,
    .search_box,
    .news_banner {
        width: 100%;
        max-width: 100%;
    }
}


/* ===================================
   태블릿 (1000px 이하) - CTA 이미지 숨김
   =================================== */
@media screen and (max-width: 1000px) {
    .cta_people {
        display: none;
    }
}


/* ===================================
   태블릿 (899px 이하)
   =================================== */
@media screen and (max-width: 899px) {
    /* CTA 배너 컨테이너 padding */
    .review_container:has(.review_cta_banner) {
        padding: 0 20px;
    }

    /* Section 4 - 후기 섹션 */
    .review_emojis {
        width: 855px;
    }

    .cta_people {
        display: none;
    }

    .cta_content {
        padding: 0 var(--space-30);
        gap: var(--space-20);
    }

    .cta_text {
        font-size: var(--font-24);
        margin-left: 0;
        white-space: nowrap;
    }

    .cta_button {
        width: 140px;
        height: 45px;
        flex-shrink: 0;
    }

    .cta_button span {
        font-size: var(--font-15);
        white-space: nowrap;
    }

    .cta_button .icon {
        width: 26px;
        height: 26px;
    }

    /* 메인 타이틀 */
    .main_title h1 {
        font-size: var(--font-64);
        font-weight: var(--weight-extrabold);
    }

    /* 섹션 타이틀 */
    .section_02 .title_con h2,
    .section_03 .title_con h2,
    .section_04 .title_con h2 {
        font-size: var(--font-60);
        font-weight: var(--weight-extrabold);
    }

    .section_02 .title_con p,
    .section_03 .title_con p,
    .section_04 .title_con p {
        font-size: var(--font-20);
        font-weight: var(--weight-regular);
    }

    /* 검색 영역 */
    .search_area,
    .search_box {
        width: 100%;
        max-width: 100%;
    }

    /* 소식 알림 레이아웃 */
    .section_03 .width_con {
        padding: 0;
        width: 100%;
    }

    .news_container,
    .visual_cards.three_con {
        flex-direction: column;
        gap: var(--space-32);
        padding: 0 15px;
    }

    .news_container::before {
        display: none;
    }

    .news_filter {
        width: 100%;
        height: auto;
        align-items: center;
    }

    .news_filter .title_con {
        top: 0;
        text-align: center;
        margin-bottom: var(--space-24);
    }

    .filter_list {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: var(--space-16);
        margin-bottom: var(--space-24);
    }

    .filter_list::before {
        display: none;
    }

    .filter_list li {
        margin-bottom: 0;
    }

    .filter_item {
        padding: var(--space-8) var(--space-16);
        font-size: var(--font-19);
    }

    .filter_item.active::before {
        display: none;
    }

    .filter_nav {
        justify-content: center;
    }

    .news_grid {
        flex: none;
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .news_card {
        height: 200px;
        padding: 20px;
    }

    .news_card .card_title {
        font-size: var(--font-19);
        margin-bottom: var(--space-8);
    }

    .news_card .card_desc {
        font-size: var(--font-16);
        margin-bottom: var(--space-12);
        -webkit-line-clamp: 2;
    }

    .news_card .card_category,
    .news_card .card_date {
        font-size: var(--font-16);
    }
}


/* ===================================
   중간 모바일 (700px 이하)
   =================================== */
@media screen and (max-width: 700px) {
    /* 소식 알림 - 필터 탭을 셀렉트로 변경 */
    .news_filter .filter_list {
        display: none;
    }

    .filter_select {
        display: block;
        width: 100%;
        padding: var(--space-12) var(--space-16);
        font-size: var(--font-19);
        font-weight: var(--weight-semibold);
        color: var(--color-gray-900);
        background: var(--color-white);
        border: none;
        border-bottom: 3px solid var(--color-black);
        border-radius: 0;
        margin-bottom: var(--space-24);
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-16) center;
        padding-right: var(--space-40);
    }

    /* 후기 섹션 - CTA 배너 모바일 스타일 */
    .review_container {
        width: 100%;
        max-width: 368px;
        margin: 0 auto;
        padding: 0 var(--space-20);
    }

    .review_cta_banner {
        width: 100%;
        max-width: 368px;
        height: 170px;
        margin: 0 auto;
        padding: 0;
    }

    .cta_content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-20);
        padding: var(--space-24);
        position: relative;
        height: 100%;
    }

    .cta_people {
        display: none;
    }

    .cta_text {
        position: static;
        transform: none;
        font-size: var(--font-24);
        font-weight: var(--weight-semibold);
        white-space: nowrap;
        margin: 0;
        text-align: left;
        line-height: 1.5;
    }

    /* 후기 텍스트 줄바꿈 활성화 */
    .cta_text .mobile-br {
        display: inline;
    }

    .cta_button {
        width: auto;
        padding: 0 var(--space-20);
        height: 45px;
        align-self: center;
    }

    .cta_button span {
        font-size: var(--font-15);
    }

    .cta_button .icon {
        width: 24px;
        height: 24px;
    }
}


/* ===================================
   모바일 (576px 이하)
   =================================== */
@media screen and (max-width: 576px) {
    /* 비주얼 */
    #visual {
        /*min-height: 60vh;*/
        padding: var(--space-40) 0;
    }

    #visual .title_con h2 {
        font-size: var(--font-36);
    }

    #visual .title_con p {
        font-size: var(--font-18);
    }

    /* 메인 타이틀 */
    .main_title {
        margin-bottom: var(--space-32);
    }

    .main_title h1 {
        font-size: var(--font-48);
        font-weight: var(--weight-extrabold);
        line-height: 1.3;
    }

    .main_title h1 .highlight::before {
        content: '\A';
        white-space: pre;
    }

    /* 검색 박스 */
    .search_box {
        width: 100%;
        height: auto;
        border-radius: 24px;
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-12);
        gap: var(--space-8);
    }

    .search_select {
        width: 100%;
        flex-shrink: 0;
    }

    .select_btn {
        font-size: var(--font-14);
        padding: var(--space-8) var(--space-16);
        width: 100%;
        justify-content: flex-start;
        min-height: auto;
    }

    .search_input {
        font-size: var(--font-16);
        padding: var(--space-12) var(--space-16);
        padding-right: 60px;
        width: 100%;
        min-width: 0;
        border-radius: var(--radius-pill-sm);
        background-color: var(--color-gray-100);
    }

    .search_btn {
        width: 44px;
        height: 44px;
        right: 20px;
        top: auto;
        bottom: 20px;
        transform: none;
    }

    .search_btn .search_icon {
        width: 24px;
        height: 24px;
    }

    /* 뉴스 배너 */
    .news_banner {
        width: 308px;
        margin: 0 auto var(--space-40);
        padding: 0;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-8);
    }

    .news_icon {
        display: none;
    }

    .news_content {
        font-size: var(--font-16);
        display: contents;
    }

    .news_label {
        display: inline-flex;
        align-items: center;
        gap: var(--space-8);
        width: 100%;
        order: 1;
    }

    .news_label.divider-vertical::after {
        display: none;
    }

    .news_label::before {
        content: '';
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url('../img/news-icon.png') no-repeat center;
        background-size: contain;
    }

    .news_slider {
        order: 2;
    }

    .news_text {
        display: flex;
        align-items: center;
        width: 100%;
        gap: var(--space-8);
    }

    .news_number {
        font-size: var(--font-14);
        flex-shrink: 0;
    }

    .news_link {
        font-size: var(--font-16);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        line-height: 1.5;
        display: inline-block;
    }

    .news_controls {
        order: 3;
        flex-shrink: 0;
    }

    /* 비주얼 카드 */
    .visual_card {
        min-height: 240px;
        text-align: left;
    }

    .visual_card .card_content {
        align-items: flex-start;
    }

    .visual_card .card_content h3 {
        font-size: var(--font-36);
    }

    .visual_card .card_content p {
        font-size: var(--space-20);
    }

    .card_btn {
        width: 100px;
        height: 50px;
        font-size: var(--font-14);
    }

    .card_image {
        width: 100px;
        height: 100px;
        right: 15px;
        bottom: 50px;
    }

    /* 정책 카드 */
    .policy_cards {
        height: 578px;
        display: flex;
        align-items: center;
    }

    .section_02 {
        padding: 0 0 var(--space-120) 0;
    }

    .section_02 .title_con h2 {
        font-size: var(--font-40);
        font-weight: var(--weight-extrabold);
    }

    .section_02 .title_con p {
        font-size: var(--font-20);
        font-weight: var(--weight-regular);
    }

    .mobile-br {
        display: inline;
    }

    /* 정책 카드 슬라이더 */
    ul.stack_card li.slick-slide {
        width: 365px;
        margin: 0;
    }

    ul.stack_card .policy_card {
        width: 365px;
    }

    .policy_cards .slick-list {
        padding: 0 30px;
    }

    ul.stack_card li.cells {
        height: 428px;
    }

    ul.stack_card li.cells.slick-current {
        height: 518px;
    }

    .stack_card .slick-prev {
        left: 10px;
        transform: translateX(0);
    }

    .stack_card .slick-next {
        right: 10px;
        left: auto;
        transform: translateX(0);
    }
}


/* ===================================
   모바일 (500px 이하)
   =================================== */
@media screen and (max-width: 500px) {
    /* 소식 알림 - 카드 1열 */
    .news_grid {
        grid-template-columns: 1fr;
    }
}


/* ===================================
   소형 모바일 (425px 이하)
   =================================== */
@media screen and (max-width: 425px) {
    /* 메인 타이틀 */
    .main_title h1 {
        font-size: var(--font-40);
        font-weight: var(--weight-extrabold);
    }

    /* 섹션 타이틀 */
    .section_02 .title_con h2,
    .section_03 .title_con h2,
    .section_04 .title_con h2,
    .news_filter .title_con h2 {
        font-size: var(--font-40);
        font-weight: var(--weight-extrabold);
    }

    .section_02 .title_con p,
    .section_03 .title_con p,
    .section_04 .title_con p,
    .news_filter .title_con p {
        font-size: var(--font-20);
        font-weight: var(--weight-regular);
    }

    .news_filter {
        align-items: flex-start;
    }

    .news_grid {
        grid-template-columns: 1fr;
    }

    .news_card {
        height: 200px;
        padding: 20px;
    }

    .news_card .card_title {
        font-size: var(--font-19);
    }

    .news_card .card_desc {
        font-size: var(--font-16);
        -webkit-line-clamp: 2;
    }

    /* 후기 섹션 */
    .section_04 {
        padding-bottom: 0;
    }

    .review_emojis {
        width: 600px;
        top: 60px;
        left: -40px;
        transform: none;
    }

    .review_grid_wrapper {
        margin-bottom: 0;
    }

    .review_card {
        transform: scale(0.85);
    }
}


/* ===================================
   초소형 모바일 (360px 이하)
   =================================== */
@media screen and (max-width: 360px) {
    /* 메인 타이틀 */
    .main_title h1 {
        font-size: var(--font-40);
        font-weight: var(--weight-extrabold);
    }

    .main_title h1 br {
        display: inline;
    }
}


/* ===================================
   가로 모드 (992px 이하)
   =================================== */
@media screen and (max-width: 992px) and (orientation: landscape) {
    #visual {
        /*min-height: 80vh;*/
    }
}


/* ===================================
   메인 팝업 (Main Popup)
   =================================== */

/* 팝업 오버레이 래퍼 */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}

/* 팝업이 활성화되었을 때 */
.popup-overlay.on {
    display: flex;
    opacity: 1;
}

/* 팝업이 열려있을 때 body 스크롤 방지 */
body.popup-open {
    overflow: hidden;
}

/* 팝업 컨테이너 */
.popup-container {
    position: relative;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    transform: scale(0.9);
    transition: transform var(--duration-base) var(--ease-out);
}

.popup-overlay.on .popup-container {
    transform: scale(1);
}

/* 팝업 헤더 */
.popup-header {
    position: relative;
    padding: var(--space-16);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--color-white);
}

/* 팝업 닫기 버튼 */
.btn-popup-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background-color var(--duration-base) var(--ease-out);
    font-size: var(--font-24);
    color: var(--color-gray-600);
}

.btn-popup-close:hover {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
}

/* 팝업 콘텐츠 영역 */
.popup-content {
    padding: 0;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}

/* 팝업 이미지 */
.popup-content img {
    width: 100%;
    height: auto;
    display: block;
}

/* 팝업 이미지 플레이스홀더 */
#popup-slider {
    counter-reset: popup-counter;
}

/* 슬릭 초기화 전에는 첫 번째 슬라이드만 표시 */
#popup-slider:not(.slick-initialized) .popup-slide {
    display: none;
}

#popup-slider:not(.slick-initialized) .popup-slide:first-child {
    display: block;
}

.popup-content .popup-slide .popup-link .popup-image-placeholder {
    width: 100%;
    height: 400px;
    background-color: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 복제된 슬라이드가 아닌 것만 카운터 증가 */
.popup-content .slick-slide:not(.slick-cloned) .popup-link .popup-image-placeholder {
    counter-increment: popup-counter;
}

.popup-content .popup-slide .popup-link .popup-image-placeholder::before {
    content: '팝업 이미지 영역 ' counter(popup-counter);
    color: var(--color-gray-400);
    font-size: var(--font-16);
    font-weight: 400;
    white-space: nowrap;
    font-family: inherit;
}

/* 팝업 푸터 */
.popup-footer {
    padding: var(--space-15) var(--space-20);
    background-color: var(--color-gray-50);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 팝업 푸터 버튼 */
.popup-footer button {
    padding: var(--space-10) var(--space-16);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-14);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
}

.btn-today-close {
    background-color: var(--color-white);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
}

.btn-today-close:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

.popup-footer .btn-popup-close {
    background-color: var(--color-primary);
    color: var(--color-white);
    width: auto;
    height: auto;
}

.popup-footer .btn-popup-close:hover {
    background-color: var(--color-primary-dark);
}

/* 팝업 링크 */
.popup-content .popup-slide .popup-link {
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    font-weight: normal;
    font-size: inherit;
    font-family: inherit;
}

.popup-content .popup-slide .popup-link:hover img {
    opacity: 0.95;
}

.popup-content .popup-slide .popup-link:visited,
.popup-content .popup-slide .popup-link:active,
.popup-content .popup-slide .popup-link:focus {
    color: inherit;
    font-weight: normal;
}

/* 팝업 반응형 */
@media screen and (max-width: 768px) {
    .popup-container {
        width: 95%;
        max-height: 85vh;
    }

    .popup-content {
        max-height: calc(85vh - 140px);
    }

    .popup-content .popup-slide .popup-link .popup-image-placeholder {
        height: 300px;
    }

    .popup-header {
        padding: var(--space-12);
    }
}

@media screen and (max-width: 480px) {
    .popup-content .popup-slide .popup-link .popup-image-placeholder {
        height: 200px;
    }

    .popup-content .popup-slide .popup-link .popup-image-placeholder::before {
        font-size: var(--font-14);
    }
}
@charset "utf-8";

/* ===================================
   재사용 가능한 컴포넌트 스타일
   여수시 청년정책 플랫폼

   이 파일은 main.css에서 추출한 재사용 가능한 컴포넌트들을 포함합니다.
   =================================== */


/* ===================================
   버튼 컴포넌트 (Button Components)
   =================================== */

/* 기본 버튼 스타일 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
}

/* 버튼 크기 변형 */
.btn-sm {
    height: 36px;
    padding: 0 var(--space-16);
    font-size: var(--font-14);
}

.btn-md {
    height: 40px;
    padding: 0 var(--space-20);
    font-size: var(--font-17);
}

.btn-lg {
    height: 51px;
    padding: 0 var(--space-24);
    font-size: var(--font-18);
}

.btn-xl {
    height: 60px;
    padding: 0 var(--space-32);
    font-size: var(--font-18);
}

.btn.xlg {
    height: 50px;
    padding: 0 var(--space-32);
    font-size: var(--font-20);
    border-radius: var(--radius-sm);
}

/* 버튼 스타일 변형 */
/* Primary 버튼 - 주요 액션 */
.btn-primary,
.btn.primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover,
.btn.primary:hover {
    background-color: var(--color-primary-dark);
}

/* Secondary 버튼 - 보조 액션 (outline 스타일) */
.btn-secondary,
.btn.secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover,
.btn.secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Tertiary 버튼 - 3차 액션 */
.btn.tertiary {
    background-color: var(--color-gray-50);
    color: var(--color-gray-800);
}

.btn.tertiary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

/* Outline 버튼 - 테두리만 있는 버튼 */
.btn-outline {
    background-color: transparent;
    border: var(--border-width-thick) solid var(--color-white);
    color: var(--color-white);
}

.btn-outline:hover {
    background-color: var(--color-white);
    color: var(--color-gray-900);
}

/* Outline Dark 버튼 - 어두운 배경용 테두리 버튼 */
.btn-outline-dark {
    background-color: transparent;
    border: var(--border-width-thick) solid var(--color-primary);
    color: var(--color-primary);
}

.btn-outline-dark:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Lift 버튼 - 호버 시 살짝 올라가는 효과 */
.btn-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/* Full Width 버튼 */
.btn-block {
    display: flex;
    width: 100%;
}

/* 둥근 버튼 */
.btn-rounded {
    border-radius: var(--radius-round-md);
}

.btn-rounded-lg {
    border-radius: var(--radius-pill);
}


/* ===================================
   카드 컴포넌트 (Card Components)
   =================================== */


/* 비디오 배경 (옵션) */
.yt_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    pointer-events: none;
}

/* 정부 사업 카드 */
.gov_card {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-32);
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.gov_card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.gov_card_header {
    margin-bottom: var(--space-24);
    padding-bottom: var(--space-16);
    border-bottom: 2px solid var(--color-primary);
}

.gov_card_title {
    font-size: var(--font-24);
    color: var(--color-gray-800);
}

.gov_card_content {
    margin-bottom: var(--space-24);
}

.gov_card_content p {
    color: var(--color-gray-500);
    line-height: var(--leading-relaxed);
}

.gov_card_footer {
    display: flex;
    justify-content: flex-end;
}

.card_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-32);
}


/* ===================================
   필터 컴포넌트 (Filter Components)
   =================================== */

/* 필터 메뉴 리스트 */
.filter_list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 122px;
    position: relative;
}

.filter_list::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    background: var(--color-gray-100);
}

.filter_list li {
    margin-bottom: 0;
}

/* 필터 아이템 */
.filter_item {
    display: block;
    padding: var(--space-12) var(--space-20) var(--space-12) var(--space-14);
    font-size: var(--font-24);
    font-weight: var(--weight-semibold);
    color: var(--color-gray-500);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: all var(--duration-base) var(--ease-out);
}

.filter_item:hover {
    color: var(--color-gray-900);
}

.filter_item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.filter_item.active {
    font-weight: var(--weight-bold);
    color: var(--color-gray-900);
}

.filter_item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    background: var(--color-gray-900);
    z-index: 2;
}

.filter_item .arrow {
    margin-left: var(--space-8);
    display: inline-block;
    transition: transform var(--duration-base) var(--ease-out);
}

.filter_item.active .arrow {
    transform: translateX(var(--space-4));
}

/* 모바일용 셀렉트 박스 (기본 숨김) */
.filter_select {
    display: none;
}

/* 필터 네비게이션 버튼 */
.filter_nav {
    display: flex;
    margin-top: auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}

.filter_nav .nav-arrow-group {
    display: flex;
    gap: var(--space-12);
}

.filter_nav .nav_btn {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: var(--radius-circle);
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
    box-shadow: 0px 4px 20px 0px var(--rgba-black-10);
}

.filter_nav .nav_btn.page_more {
    color: var(--color-gray-900);
}

.filter_nav .nav_btn.page_more:hover {
    color: #ffffff;
}

.filter_nav .nav_btn.page_more i {
    font-size: 24px;
}

.filter_nav .nav_btn:hover:not(:disabled) {
    background: var(--color-primary);
    box-shadow: 0px 4px 20px 0px var(--rgba-black-15);
}

.filter_nav .nav_btn:hover:not(:disabled) img {
    filter: brightness(0) invert(1);
}

/* 왼쪽 화살표 위치 조정 */
.filter_nav .nav_btn.prev img {
    position: relative;
    left: -2px;
}

.filter_nav .nav_btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* ===================================
   CTA 컴포넌트 (Call to Action)
   =================================== */

/* CTA 배너 */
.review_cta_banner {
    background: var(--color-dark-navy);
    border-radius: var(--radius-pill) var(--radius-pill) 0 0;
    padding: 0;
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: 1340px;
    height: var(--height-cta-banner);
    margin: 0 auto;
}

.cta_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--space-64);
    gap: var(--space-40);
    position: relative;
    z-index: 2;
}

.cta_people {
    width: 280px;
    height: auto;
    flex-shrink: 0;
    position: relative;
    bottom: var(--space-10);
}

.cta_people img {
    width: 100%;
    height: auto;
    display: block;
}

.cta_text {
    flex: 1;
    font-size: var(--font-24);
    font-weight: var(--weight-semibold);
    color: var(--color-white);
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

.cta_text .highlight {
    color: var(--color-accent-yellow);
}

/* 레거시 버튼 - 하위 호환성 유지 */
/* 새로운 페이지에서는 .btn .btn-lg .btn-outline .btn-rounded-lg .btn-lift 조합 사용 권장 */
.cta_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    width: 157px;
    height: 51px;
    padding: 0;
    background: transparent;
    color: var(--color-white);
    border: var(--border-width-thick) solid var(--color-white);
    border-radius: var(--radius-pill-sm);
    font-size: var(--font-18);
    font-weight: var(--weight-bold);
    text-decoration: none;
    transition: all var(--duration-base) var(--ease-out);
    flex-shrink: 0;
}

.cta_button:hover {
    background-color: var(--color-white);
    color: var(--color-gray-900);
    transform: translateY(-2px);
    box-shadow: 0px 8px 20px var(--rgba-black-20);
}

.cta_button:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.cta_button span {
    font-size: var(--font-17);
    font-weight: var(--weight-semibold);
}

.cta_button .icon {
    width: 30px;
    height: 30px;
}


/* ===================================
   슬라이더 커스텀 (Slick Slider Custom)
   =================================== */

/* 슬릭 슬라이더 화살표 커스터마이징 */
.slick-prev,
.slick-next {
    width: 50px;
    height: 50px;
    z-index: 10;
}

.slick-prev:before,
.slick-next:before {
    font-size: 50px;
    opacity: 0.7;
}

.slick-prev:hover:before,
.slick-next:hover:before {
    opacity: 1;
}

/* 슬릭 슬라이더 도트 커스터마이징 */
.slick-dots {
    bottom: -40px;
}

.slick-dots li button:before {
    font-size: var(--font-12);
    color: var(--color-gray-400);
    opacity: 0.5;
}

.slick-dots li.slick-active button:before {
    color: var(--color-primary);
    opacity: 1;
}

/* 파트너 배너 슬라이더 */
.partner_slider {
    position: relative;
    margin: 0 auto;
    padding: 0 var(--space-64);
    background-color: var(--color-white);
    border-radius: var(--radius-pill-sm);
    height: 80px;
    box-shadow: 0 4px var(--space-20) var(--rgba-black-08);
}

.partner_item {
    padding: 0 var(--space-16);
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner_item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.partner_item a:hover {
    opacity: 0.7;
}

.partner_item img {
    max-width: 100%;
    max-height: 60px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ===================================
   태그/뱃지 컴포넌트 (Tag/Badge Component)
   =================================== */

/* 기본 태그 스타일 */
.tag {
    display: inline-flex;
    align-items: center;
    height: 43px;
    padding: 0 var(--space-16);
    background: var(--color-gray-100);
    color: var(--color-gray-900);
    border-radius: var(--radius-card-tag);
    font-size: var(--font-19);
    font-weight: var(--weight-semibold);
}

/* 태그 색상 스타일 */
.tag.tag-red {
    background: var(--tag-red-bg);
    color: var(--tag-red-text);
}

.tag.tag-blue {
    background: var(--tag-blue-bg);
    color: var(--tag-blue-text);
}

.tag.tag-purple {
    background: var(--tag-purple-bg);
    color: var(--tag-purple-text);
}

.tag.tag-violet {
    background: var(--tag-violet-bg);
    color: var(--tag-violet-text);
}

.tag.tag-yellow {
    background: var(--tag-yellow-bg);
    color: var(--tag-yellow-text);
}

.tag.tag-green {
    background: var(--tag-green-bg);
    color: var(--tag-green-text);
}

.tag.tag-cyan {
    background: var(--tag-cyan-bg);
    color: var(--tag-cyan-text);
}


/* ===================================
   배지 컴포넌트 (Badge Component)
   =================================== */

/* 배지 기본 스타일 */
.badge {
    display: inline-block;
    height: auto;
    padding: 6px var(--space-16);
    font-size: 14px;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-3xl);
}

/* 배지 색상 스타일 */
.badge.badge-gray {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.badge.badge-blue {
    background: #E3F2FD;
    color: #1565C0;
}

.badge.badge-red {
    background: #FFE5E5;
    color: #D32F2F;
}

.badge.badge-purple {
    background: #E8D5FF;
    color: #7B2CBF;
}

.badge.badge-violet {
    background: #F0E5FF;
    color: #9C27B0;
}

.badge.badge-yellow {
    background: #FFF9C4;
    color: #F57F17;
}

.badge.badge-green {
    background: #C8E6C9;
    color: #2E7D32;
}

.badge.badge-cyan {
    background: #B2EBF2;
    color: #00838F;
}


/* ===================================
   검색 컴포넌트 (Search Component)
   =================================== */

/* 검색 영역 */
.search_area {
    margin-bottom: 10px;
}

.search_box {
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    border-radius: 20px;
    box-shadow: 0 4px 20px var(--rgba-black-08);
}

/* 검색 셀렉트 */
.search_select {
    position: relative;
}

.select_btn {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-16) var(--space-24);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-19);
    font-weight: var(--weight-bold);
    color: var(--color-gray-900);
    white-space: nowrap;
}

.select_btn .icon {
    width: auto;
    height: 18px;
    object-fit: contain;
}

.select_btn .arrow {
    width: 12px;
    height: 8px;
    object-fit: contain;
}

.select_btn:hover {
    background-color: transparent;
    color: var(--color-primary);
}

/* 검색 입력창 */
.search_input {
    flex: 1;
    padding: var(--space-16) var(--space-24);
    padding-right: 70px;
    border: none;
    outline: none;
    font-size: var(--font-19);
    background: transparent;
    min-width: 0;
}

.search_input::placeholder {
    color: var(--color-gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 검색 버튼 */
.search_btn {
    position: absolute;
    right: 6px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #2C9DAD 0%, #046FD9 100%);
    border: none;
    border-radius: var(--radius-circle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--duration-fast) var(--ease-out);
    z-index: 1;
}

.search_btn:hover {
    opacity: 0.9;
}

.search_btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.search_btn .search_icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}


/* ===================================
   카드 호버 효과 (Card Hover Effects)
   =================================== */

/* 카드 호버 타입 1: 살짝 올라가는 효과 (청년참여 페이지 정책 카드) */
.card-hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

.card-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--rgba-black-12);
}

/* 카드 호버 타입 2: 테두리 변경 + 그림자 + 올라가는 효과 (4가지 약속) */
.card-hover-primary {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    will-change: transform;
}

.card-hover-primary:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(3, 107, 172, 0.1);
    transform: translateY(-2px);
}


/* ===================================
   페이지네이션 컴포넌트 (Pagination)
   =================================== */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pagination-gap);
    margin-top: var(--pagination-margin-top);
    padding: 0 var(--space-20);
}

/* 이전/다음 버튼 */
.pagination_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pagination-btn-size);
    height: var(--pagination-btn-size);
    border: var(--border-width) solid var(--border-color);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
    color: var(--color-gray-600);
}

.pagination_btn:hover:not(:disabled) {
    background-color: var(--color-gray-50);
    border-color: var(--border-color-hover);
    color: var(--color-primary);
}

.pagination_btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.pagination_btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: var(--color-gray-50);
}

.pagination_btn svg {
    width: 8px;
    height: 14px;
    flex-shrink: 0;
}

/* 페이지 번호 컨테이너 */
.pagination_numbers {
    display: flex;
    align-items: center;
    gap: var(--pagination-gap);
    margin: 0 var(--pagination-gap);
}

/* 페이지 번호 버튼 */
.pagination_number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-btn-size);
    height: var(--pagination-btn-size);
    padding: 0 var(--space-12);
    border: var(--border-width) solid var(--border-color);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    font-size: var(--font-16);
    font-weight: var(--weight-medium);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
    user-select: none;
}

.pagination_number:hover:not(.active) {
    background-color: var(--color-gray-50);
    border-color: var(--border-color-hover);
    color: var(--color-primary);
}

.pagination_number:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.pagination_number.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    cursor: default;
    pointer-events: none;
}

/* 반응형 - 768px 이하 (태블릿) */
@media screen and (max-width: 768px) {
    .pagination {
        margin-top: var(--pagination-margin-top-tablet);
        gap: var(--pagination-gap-tablet);
    }

    .pagination_btn {
        width: var(--pagination-btn-size-tablet);
        height: var(--pagination-btn-size-tablet);
    }

    .pagination_numbers {
        gap: var(--pagination-gap-tablet);
        margin: 0 var(--pagination-gap-tablet);
    }

    .pagination_number {
        min-width: var(--pagination-btn-size-tablet);
        height: var(--pagination-btn-size-tablet);
        padding: 0 var(--space-8);
        font-size: var(--font-14);
    }
}

/* 반응형 - 425px 이하 (모바일) */
@media screen and (max-width: 425px) {
    .pagination {
        margin-top: var(--pagination-margin-top-mobile);
        gap: var(--pagination-gap-mobile);
    }

    .pagination_btn {
        width: var(--pagination-btn-size-mobile);
        height: var(--pagination-btn-size-mobile);
    }

    .pagination_btn svg {
        width: 6px;
        height: 12px;
    }

    .pagination_numbers {
        gap: var(--pagination-gap-mobile);
        margin: 0 var(--pagination-gap-mobile);
    }

    .pagination_number {
        min-width: var(--pagination-btn-size-mobile);
        height: var(--pagination-btn-size-mobile);
        padding: 0 var(--space-8);
        font-size: var(--font-12);
    }
}

/* 프린트 시 숨김 */
@media print {
    .pagination {
        display: none;
    }
}


/* ===================================
   폼 요소 컴포넌트 (Form Elements)
   =================================== */

/* 기본 Input 스타일 */
.form-input {
    width: 100%;
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--space-6);
    font-size: var(--font-16);
    background-color: var(--color-white);
    color: var(--color-gray-800);
    transition: all var(--duration-base) var(--ease-out);
}

.form-input:hover {
    border-color: var(--color-gray-400);
}

.form-input:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(3, 107, 172, 0.1);
}

.form-input:focus:not(:focus-visible) {
    outline: none;
    border-color: var(--color-gray-300);
    box-shadow: none;
}

.form-input::placeholder {
    color: var(--color-gray-400);
}

.form-input:disabled {
    background-color: var(--color-gray-50);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Input 크기 변형 */
.form-input-sm {
    padding: var(--space-8) var(--space-12);
    font-size: var(--font-14);
}

.form-input-lg {
    padding: var(--space-16) var(--space-20);
    font-size: var(--font-18);
}

/* 기본 Select 스타일 */
.form-select {
    width: 100%;
    padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--space-6);
    font-size: var(--font-14);
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-12) center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    transition: all var(--duration-base) var(--ease-out);
}

.form-select:hover {
    border-color: var(--color-gray-400);
}

.form-select:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(3, 107, 172, 0.1);
}

.form-select:focus:not(:focus-visible) {
    outline: none;
    border-color: var(--color-gray-300);
    box-shadow: none;
}

.form-select:disabled {
    background-color: var(--color-gray-50);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Checkbox 스타일 */
.form-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    cursor: pointer;
    user-select: none;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--space-4);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--color-white);
    transition: all var(--duration-base) var(--ease-out);
}

.form-checkbox input[type="checkbox"]:hover {
    border-color: var(--color-primary);
}

.form-checkbox input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.5L4.5 8L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.form-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.form-checkbox label {
    cursor: pointer;
    font-size: var(--font-14);
    color: var(--color-gray-700);
}

/* Radio 스타일 */
.form-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    cursor: pointer;
    user-select: none;
}

.form-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-circle);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--color-white);
    transition: all var(--duration-base) var(--ease-out);
}

.form-radio input[type="radio"]:hover {
    border-color: var(--color-primary);
}

.form-radio input[type="radio"]:checked {
    border-color: var(--color-primary);
    border-width: 5px;
}

.form-radio input[type="radio"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.form-radio label {
    cursor: pointer;
    font-size: var(--font-14);
    color: var(--color-gray-700);
}

/* Textarea 스타일 */
.form-textarea {
    width: 100%;
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--space-6);
    font-size: var(--font-16);
    background-color: var(--color-white);
    color: var(--color-gray-800);
    font-family: inherit;
    resize: vertical;
    min-height: var(--space-120);
    transition: all var(--duration-base) var(--ease-out);
}

.form-textarea:hover {
    border-color: var(--color-gray-400);
}

.form-textarea:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(3, 107, 172, 0.1);
}

.form-textarea:focus:not(:focus-visible) {
    outline: none;
    border-color: var(--color-gray-300);
    box-shadow: none;
}

.form-textarea::placeholder {
    color: var(--color-gray-400);
}

/* Form Group */
.form-group {
    margin-bottom: var(--space-20);
}

.form-label {
    display: block;
    margin-bottom: var(--space-8);
    font-size: var(--font-14);
    font-weight: var(--weight-semibold);
    color: var(--color-gray-700);
}

.form-label.required::after {
    content: '*';
    color: var(--color-error);
    margin-left: var(--space-4);
}

.form-help {
    display: block;
    margin-top: var(--space-4);
    font-size: var(--font-12);
    color: var(--color-gray-500);
}

.form-error {
    display: block;
    margin-top: var(--space-4);
    font-size: var(--font-12);
    color: var(--color-error);
}

/* 레거시 폼 요소 - 하위 호환성 유지 */
/* 새로운 페이지에서는 .form-select 사용 권장 */
.sort_select {
    padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--space-6);
    font-size: var(--font-14);
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-12) center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
}

.sort_select:hover {
    border-color: var(--color-gray-400);
}

.sort_select:focus:not(:focus-visible) {
    outline: none;
    border-color: var(--color-gray-200);
}

.sort_select:focus-visible {
    outline: none;
    border-color: var(--subnav-bg);
}


/* ===================================
   정책 카드 컴포넌트 (Policy Card Component)
   Stack Card 슬라이더 구조:
   - 426px × 600px 고정 사이즈
   - 카드 상단: 이미지 영역 (180px)
   - 카드 하단: 콘텐츠 영역 (bottom 30px)
   - 호버 시 상승 효과
   =================================== */

/* 슬라이더 컨테이너 */
.policy_cards {
    margin: 0 auto;
    height: 660px;
    display: flex;
    align-items: center;
}

.policy_cards .slick-list {
    margin: 0 -10px;
    margin-top: 60px;
}

.policy_cards .slick-slide {
    margin: 0 10px;
}

.policy_cards .slick-track {
    display: flex;
    align-items: stretch;
}

/* 카드 기본 스타일 */
.policy_card {
    position: relative;
    display: block;
    width: var(--card-width);
    height: var(--card-height-active);
    padding: var(--space-32);
    background: var(--color-white);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
    overflow: hidden;
    transition: all var(--duration-base) var(--ease-out);
}

.policy_card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.policy_card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* 카드 배지 - 우측 상단 위치 */
.card_badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    line-height: 0;
}

.card_badge img {
    display: block;
    width: 150px !important;
    height: auto !important;
}

/* 카드 이미지 - 상단 고정 */
.policy_card .card_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.policy_card .card_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 카드 콘텐츠 - 하단 고정 */
.policy_card .card_content {
    position: absolute;
    bottom: var(--space-32);
    left: var(--space-32);
    right: var(--space-32);
    display: flex;
    flex-direction: column;
    z-index: 2;
}

/* 카드 태그 */
.policy_card .card_tags {
    display: flex;
    gap: var(--space-8);
    padding-top: var(--space-16);
    padding-bottom: 0;
    margin-bottom: var(--space-20);
}

/* 카드 제목 - 1줄 말줄임 */
.policy_card h3.card_title {
    font-size: 1.75rem;  /* 28px */
    font-weight: var(--weight-bold);
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0;
}

/* 카드 설명 */
.policy_card .card_desc {
    font-size: var(--font-20);
    font-weight: var(--weight-regular);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-20);
}

/* 카드 기간 */
.policy_card .card_date {
    font-size: var(--font-19);
    font-weight: var(--weight-semibold);
    color: var(--color-gray-500);
}

/* 카드 연령 */
.policy_card .card_age {
    font-size: var(--font-19);
    font-weight: var(--weight-semibold);
    color: var(--color-gray-500);
}

/* 카드 D-day */
.policy_card .card_dday {
    font-size: 2.5rem; /* 40px */
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    text-align: right;
}




/* ===================================
   공유하기 컴포넌트 (Share Component)
   =================================== */

.sub_nav_right {
    position: relative;
}

.box-sub-share {
    display: flex;
    position: absolute;
    right: 152px;
    height: 49px;
    top: 50%;
    margin-top: -24.5px;
    background: var(--color-white);
    width: auto;
    padding: 0 18px;
    border-radius: var(--radius-pill-sm);
    text-align: center;
    z-index: 100;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 2px 8px var(--rgba-black-15);
}

.box-sub-share.on {
    opacity: 1;
    visibility: visible;
}

.box-sub-share .close {
    position: absolute;
    right: -82px;
    top: 50%;
    margin-top: -35px;
    background: var(--color-gray-48);
    width: 70px;
    height: 70px;
    color: var(--color-black);
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box-sub-share .close:hover {
    background: var(--color-gray-100);
}

.box-sub-share .close > span:first-child {
    font-size: 24px;
    line-height: 1;
    font-weight: var(--weight-regular);
}

.box-sub-share .send {
    display: flex;
    align-items: center;
}

.box-sub-share .send ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

.box-sub-share .send li {
    margin: 0;
}

.box-sub-share .send li button {
    width: 25px;
    height: 25px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-indent: -9999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 175px 25px;
    background-position: 0 0;
    transition: transform 0.2s ease;
}

.box-sub-share .send li button:hover {
    transform: scale(1.1);
}

.box-sub-share .send li .fb {
    background-image: url('../img/ico-sub-share.png');
    background-position: 0 0;
}

.box-sub-share .send li .tw {
    background-image: url('../img/ico-sub-share.png');
    background-position: -25px 0;
}

.box-sub-share .send li .is {
    background-image: url('../img/ico-sub-share.png');
    background-position: -125px 0;
}

.box-sub-share .send li .na {
    background-image: url('../img/ico-sub-share.png');
    background-position: -100px 0;
}


/* ===================================
   헤더 & 네비게이션 (Header & Navigation)
   =================================== */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--layout-header-height);
    background-color: var(--color-white);
    transition: box-shadow var(--duration-base) var(--ease-out),
                border-bottom-color var(--duration-base) var(--ease-out);
    border-bottom: 1px solid transparent;
    z-index: var(--z-sticky);
}

#header:hover {
    border-bottom-color: var(--color-gray-300);
}

.header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    max-width: 1920px;
    padding: 0 100px;
}

/* 왼쪽: 로고 영역 */
.header_left {
    flex-shrink: 0;
}

.logo {
    margin: 0;
}

.btn_home {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
}

.btn_home img {
    height: 50px !important;
    width: auto;
}

/* 로고 툴팁 */
.btn_home[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 6px 12px;
    background-color: var(--color-gray-800);
    color: var(--color-white);
    font-size: 14px;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out);
    z-index: 10;
}

.btn_home[data-tooltip]:hover::after {
    opacity: 1;
}

/* 네비게이션 커버 (모바일 딤드 레이어) */
.nav_cover {
    display: none;
}

/* 중앙: 메인 네비게이션 (GNB) */
.nav_gnb {
    flex: 1;
    display: flex;
    justify-content: center;
    margin: 0 var(--space-30);
    position: static;
}

.nav_gnb > ul {
    display: flex;
    align-items: center;
    gap: var(--space-48);
}

.nav_gnb > ul > li {
    position: static;
}

.nav_gnb > ul > li > a {
    display: inline-block;
    padding: var(--space-8) var(--space-4);
    color: var(--color-gray-800);
    font-weight: var(--weight-bold);
    font-size: var(--font-22);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.nav_gnb > ul > li > a:hover {
    color: var(--color-primary);
}

.nav_gnb .submenu li a {
    position: relative;
}

.nav_gnb .submenu li a[target="_blank"]::after {
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-image: url(/build/site/yeosu/img/external-link--i.svg);
}

#m-gnb #gnb .dept2 .a2 {
    display: flex;
    font-size: 1.9rem;
    padding: 1.5rem .5rem;
    border-bottom: 1px solid #E4E7EA;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.m-gnb-wrap .submenu li a[target="_blank"]::after {
    content: "";
    position: static !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transform: none !important;
    margin-left: auto !important;
    width: 1rem;
    height: 1rem;
    background-image: url(/build/site/yeosu/img/external-link--i.svg);
}

/* 2depth 메뉴 전체 패널 (메가메뉴) - 데스크탑 전용 */
@media screen and (min-width: 1300px) {
    .nav_gnb .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100vw;
        margin-left: calc(-100vw / 2 + 50%);
        background-color: var(--color-white);
        box-shadow: 0 4px 20px var(--rgba-black-10);
        border-top: 1px solid var(--color-gray-300);
        padding: var(--space-40) calc((100vw - 1720px) / 2);
        opacity: 0;
        visibility: hidden;
        transition: opacity 300ms ease, visibility 300ms ease;
        z-index: var(--z-dropdown);
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0 80px;
    }
}

/* 데스크탑 전용 네비게이션 스타일 */
@media screen and (min-width: 1300px) {
    .nav_gnb .has-submenu:hover .submenu {
        opacity: 1;
        visibility: visible;
    }

    /* 서브메뉴 li 항목 - 한 줄에 4개씩 배치 */
    .nav_gnb .submenu > li {
        list-style: none;
        text-align: left;
        width: calc((100% - 240px) / 4);
        box-sizing: border-box;
    }

    .nav_gnb .submenu > li:nth-child(4n) {
        margin-right: 0;
    }

    /* 2depth 메뉴 링크 */
    .nav_gnb .submenu > li > a {
        display: flex;
        align-items: center;
        position: relative;
        min-width: 200px;
        padding: var(--space-12) var(--space-48) var(--space-12) var(--space-24);
        margin-bottom: var(--space-16);
        color: var(--color-text-primary);
        font-size: var(--font-18);
        font-weight: var(--weight-bold);
        text-decoration: none;
        border: 1px solid var(--color-gray-300);
        border-radius: var(--radius-sm);
        background-color: var(--color-white);
        transition: all 300ms ease;
        white-space: nowrap;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .nav_gnb .submenu > li > a::after {

    }

    .nav_gnb .submenu > li > a:not([target="_blank"])::after {
        content: '';
        position: absolute;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 6px;
        background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1.2L1.25002 0L6.25014 4.8L5.00012 6L0 1.2Z' fill='%23666666'/%3E%3Cpath d='M5.00012 6L3.74986 4.80019L8.74998 0.000186968L10 1.20019L5.00012 6Z' fill='%23666666'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: center;
    }

    .nav_gnb .submenu > li > a:hover {
        color: var(--color-text-primary);
        background-color: var(--color-primary-light);
        border-color: var(--color-primary);
        box-shadow: 0 4px 8px var(--rgba-black-10);
    }

    .nav_gnb .submenu > li > a:hover::after {
        background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1.7L1.25002 0.5L6.25014 5.3L5.00012 6.5L0 1.7Z' fill='black'/%3E%3Cpath d='M5.00012 6.5L3.74986 5.30019L8.74998 0.500187L10 1.70019L5.00012 6.5Z' fill='black'/%3E%3C/svg%3E%0A");
    }

    /* 3depth 서브메뉴 */
    .nav_gnb .submenu-3depth {
        display: block;
        padding: 0 0 12px 12px;
    }

    .nav_gnb .submenu-3depth li {
        list-style: none;
        margin-bottom: 8px;
    }

    .nav_gnb .submenu-3depth li:last-child {
        margin-bottom: 0;
    }

    .nav_gnb .submenu-3depth a {
        display: block;
        position: relative;
        padding: 4px 0 4px 14px;
        color: var(--color-gray-700);
        font-size: var(--font-15);
        font-weight: var(--weight-bold);
        text-decoration: none;
        transition: color 200ms ease;
        white-space: nowrap;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .nav_gnb .submenu-3depth a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 4px;
        background-color: var(--color-primary);
        border-radius: var(--radius-circle);
    }

    .nav_gnb .submenu-3depth a:hover {
        color: var(--color-primary);
    }
}

/* 오른쪽: 유틸리티 메뉴 */
.header_right {
    flex-shrink: 0;
}

.util_menu {
    display: flex;
    align-items: center;
    gap: var(--space-30);
}

.util_icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-700);
    font-size: 17px;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out);
    cursor: pointer;
    gap: 10px;
    line-height: 1;
}

/* 유틸 아이콘 툴팁 */
.util_icon[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 6px 12px;
    background-color: var(--color-gray-800);
    color: var(--color-white);
    font-size: 14px;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out);
    z-index: 10;
}

.util_icon[aria-label]:hover::after {
    opacity: 1;
}

.util_icon:hover {
    color: var(--color-black);
}

.util_icon:hover img {
    filter: brightness(0);
}

.util_icon:focus {
    outline: none;
}

.util_icon:active {
    transform: scale(0.95);
}

.util_icon.util_lock img,
.util_icon.util_user img,
.util_icon.util_bell img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* 알림 뱃지 */
.util_icon.has_badge .badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    /* 포인트 컬러 */
    background-color: var(--color-warning);
    color: var(--color-white);
    font-size: var(--font-12);
    font-weight: var(--weight-bold);
    line-height: 18px;
    border-radius: 8px;
    z-index: 2;
}

/* 햄버거 메뉴 버튼 - 공통 스타일 */
.btn_open_nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-circle);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
    z-index: var(--z-fixed);
    text-decoration: none;
    color: transparent;
}

/* 데스크톱(1025px 초과): 사이트맵 버튼만 표시 */
.btn_open_sitemap {
    display: flex;
}

.btn_open_menu {
    display: none;
}

/* 햄버거 버튼 툴팁 */
.btn_open_sitemap[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 6px 12px;
    background-color: var(--color-gray-800);
    color: var(--color-white);
    font-size: 14px;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out);
    z-index: 10;
}

.btn_open_sitemap[aria-label]:hover::after {
    opacity: 1;
}

.btn_open_nav:hover {
    background-color: var(--color-primary-dark);
    transform: scale(1.05);
}

.btn_open_nav:active {
    transform: scale(0.95);
}

.btn_open_nav div {
    position: relative;
    width: 24px;
    height: 3px;
    background-color: var(--color-white);
    border-radius: 2px;
    transition: background-color 0ms 150ms;
}

.btn_open_nav div::before,
.btn_open_nav div::after {
    position: absolute;
    content: '';
    right: 0;
    width: 24px;
    height: 3px;
    background-color: var(--color-white);
    border-radius: 2px;
    transition: all 150ms ease-in-out 150ms, transform 150ms ease-in-out;
}

.btn_open_nav div::before {
    top: -8px;
    transform: rotate(0deg);
}

.btn_open_nav div::after {
    top: 8px;
    transform: rotate(0deg);
}

/* 모바일 전체 메뉴 (LNB) - 데스크톱에서는 숨김 */
.nav_lnb {
    display: none;
}


/* ===================================
   반응형 스타일 (Responsive)
   =================================== */
@media screen and (max-width: 1720px) {
    .nav_gnb > ul {
        gap: var(--space-16);
    }

    .nav_gnb > ul > li > a {
        font-size: var(--font-19);
    }
}


/* ===================================
   데스크톱 (1440px 이하)
   =================================== */
@media screen and (max-width: 1440px) {
    /* 헤더 좌우 여백 조정 */
    .header_inner {
        padding: 0 var(--space-64);
    }

    /* GNB 메뉴 간격 조정 */
    .nav_gnb > ul {
        gap: var(--space-20);
    }

    .nav_gnb {
        margin-right: var(--space-40);
    }
}

/* ===================================
   데스크톱 (1280px 이하)
   =================================== */
@media screen and (max-width: 1280px) {
    /* Top 버튼 - 위치만 조정 (크기는 데스크톱과 동일하게 유지) */
    .btn_top {
        bottom: var(--space-20);
        right: var(--space-20);
    }
}


/* ===================================
   태블릿/모바일 (1025px 이하)
   - 1299px에서 이미 모바일 레이아웃 적용됨
   - 여기서는 더 작은 화면에 필요한 추가 스타일만 정의
   =================================== */
@media screen and (max-width: 1025px) {
    /* 네비게이션 커버 제거 */
    .nav_cover,
    body.open_nav .nav_cover {
        display: none;
    }

    /* 헤더 보더 제거 */
    #header {
        border-bottom: none;
    }

    #header:hover {
        border-bottom: none;
    }

    .header_inner {
        padding: 0 var(--space-30);
        gap: var(--space-16);
    }

    .btn_home img {
        height: 50px;
    }

    /* 모바일에서 모든 툴팁 숨김 */
    .btn_home[data-tooltip]::after,
    .util_icon[aria-label]::after,
    .btn_open_sitemap[aria-label]::after {
        display: none !important;
    }

    /* HOT ISSUE 슬라이더로 전환 */
    .hot-issue-cards {
        display: block;
        max-width: 100%;
        margin: 0 auto 60px;
    }

    .hot-issue-cards.slick-slider .slick-list {
        overflow: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .hot-issue-cards.slick-slider .slick-track {
        display: flex;
        margin: 0;
        padding: 0;
        gap: var(--space-20);
    }

    .hot-issue-cards.slick-slider .slick-slide {
        background: transparent;
        display: block;
        float: none;
    }

    /* dots 스타일 */
    .hot-issue-cards.slick-slider .slick-dots {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 0;
        margin: 0;
        list-style: none;
        z-index: 10;
        width: auto;
        text-align: left;
    }

    .hot-issue-cards.slick-slider .slick-dots li {
        margin: 0;
        width: 16px;
        height: 16px;
        line-height: 0;
        display: block;
        position: static;
    }

    .hot-issue-cards.slick-slider .slick-dots li button {
        width: 16px;
        height: 16px;
        padding: 0;
        border: none;
        border-radius: var(--radius-lg);
        background-color: #D9D9D9;
        font-size: 0;
        line-height: 0;
        cursor: pointer;
        transition: background-color var(--duration-base) ease;
        display: block;
    }

    .hot-issue-cards.slick-slider .slick-dots li button:before {
        display: none;
        content: '';
        opacity: 0;
    }

    .hot-issue-cards.slick-slider .slick-dots li button:hover,
    .hot-issue-cards.slick-slider .slick-dots li button:focus:not(:focus-visible) {
        background-color: #B0B0B0;
        outline: none;
    }

    .hot-issue-cards.slick-slider .slick-dots li button:focus-visible {
        background-color: #B0B0B0;
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    .hot-issue-cards.slick-slider .slick-dots li.slick-active {
        width: 40px;
    }

    .hot-issue-cards.slick-slider .slick-dots li.slick-active button {
        width: 40px;
        height: 16px;
        border-radius: var(--radius-lg);
        background-color: var(--color-black);
    }

    /* 햄버거 메뉴 버튼 */
    .btn_open_nav {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background-color: var(--color-primary);
        border: none;
        border-radius: var(--radius-circle);
        cursor: pointer;
        transition: background-color var(--duration-fast) var(--ease-out),
                    transform var(--duration-fast) var(--ease-out),
                    right 500ms ease-out;
        z-index: var(--z-fixed);
    }

    .btn_open_nav:hover {
        background-color: var(--color-primary-dark);
        transform: scale(1.05);
    }

    .btn_open_nav:active {
        transform: scale(0.95);
    }

    /* 햄버거 메뉴 삼선 */
    .btn_open_nav div {
        position: relative;
        width: 24px;
        height: 3px;
        background-color: var(--color-white);
        border-radius: 2px;
        transition: background-color 0ms 150ms;
    }

    .btn_open_nav div::before,
    .btn_open_nav div::after {
        position: absolute;
        content: '';
        right: 0;
        width: 24px;
        height: 3px;
        background-color: var(--color-white);
        border-radius: 2px;
    }

    .btn_open_nav div::before {
        top: -8px;
    }

    .btn_open_nav div::after {
        top: 8px;
    }

    /* 모바일 전체 메뉴 (LNB) - 2단 레이아웃 */
    .nav_lnb {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100vw;
        width: 100vw;
        max-width: 480px; /* 태블릿에서 최대 너비 제한 */
        height: 100vh;
        background-color: var(--color-white);
        padding: 0;
        box-shadow: -4px 0 20px var(--rgba-black-10);
        transition: right 500ms ease-out;
        z-index: calc(var(--z-fixed) + 1);
        overflow: hidden;
    }

    body.open_nav .nav_lnb {
        right: 0;
    }

    /* LNB 헤더 영역 */
    .nav_lnb_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-16);
        background-color: var(--color-primary-light);
    }

    .nav_lnb_header .nav_logo {
        display: block;
        padding: 0;
        margin: 0;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }

    .nav_lnb_header .nav_logo img {
        height: 50px !important;
        display: block;
    }

    .btn_close_nav {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-circle);
        background-color: var(--color-white);
        color: var(--color-gray-400);
        border: none;
        font-size: var(--font-24);
        font-weight: var(--weight-bold);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 300ms ease;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }

    .btn_close_nav:hover {
        background-color: var(--color-light-bg);
    }

    /* 상단 영역 */
    .nav_top {
        background-color: var(--color-primary-light);
        padding: var(--space-20) var(--space-16);
    }

    .nav_utility {
        display: flex;
        align-items: center;
        gap: var(--space-16);
        margin-bottom: var(--space-16);
        font-size: var(--font-16);
    }

    .nav_utility a {
        padding: 0;
        margin: 0;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }

    .nav_utility a:first-child {
        color: var(--color-text-primary);
        font-weight: var(--weight-bold);
        text-decoration: none;
    }

    .nav_utility a:nth-child(2),
    .nav_utility a:nth-child(3) {
        color: var(--color-text-primary);
        text-decoration: none;
        font-weight: var(--weight-regular);
    }

    .nav_search {
        position: relative;
        display: flex;
        align-items: center;
        background-color: var(--color-white);
        border: var(--border-width-thick) solid var(--color-primary);
        border-radius: var(--radius-pill);
        padding: var(--space-12) var(--space-16);
        box-shadow: 0 4px 20px var(--rgba-black-08);
    }

    .nav_search input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: var(--font-15);
        outline: none;
        color: var(--color-text-primary);
        padding-right: 45px;
    }

    .nav_search input::placeholder {
        color: var(--color-gray-400);
    }

    .nav_search_btn {
        position: absolute;
        right: 6px;
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #2C9DAD 0%, #046FD9 100%);
        border: none;
        border-radius: var(--radius-circle);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 300ms ease;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }

    .nav_search_btn:hover {
        opacity: 0.9;
    }

    .nav_search_btn .search_icon {
        width: 16px;
        height: 16px;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }

    /* 콘텐츠 영역 (2단 레이아웃) */
    .nav_content {
        display: grid;
        grid-template-columns: 180px 1fr;
        flex: 1;
        overflow-x: visible;
        overflow-y: hidden;
        background-color: var(--color-primary-light);
    }

    /* 좌측 카테고리 메뉴 영역 */
    .nav_category {
        display: flex;
        flex-direction: column;
        gap: 0;
        background-color: var(--color-primary-light);
        padding: var(--space-24) 0 0 0;
        margin: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: visible;
        position: relative;
        z-index: 10;
    }

    .nav_category li {
        list-style: none;
        position: relative;
        width: 100%;
    }

    .nav_category li a {
        width: 100%;
    }

    .nav_category li.active a {
        background: linear-gradient(135deg, #2C9DAD 0%, #046FD9 100%);
        border-radius: 0 24px 24px 0;
        color: var(--color-white);
        position: relative;
        transition: none;
    }

    .nav_category li.active a::after {
        content: '›';
        position: absolute;
        right: 16px;
        top: 46%;
        transform: translateY(-50%);
        color: var(--color-white);
        font-size: 24px;
        line-height: 1;
        z-index: 1;
    }

    .nav_category a {
        display: block;
        padding: var(--space-16) var(--space-16);
        color: var(--color-text-primary);
        font-size: var(--font-16);
        font-weight: var(--weight-semibold);
        border-bottom: none;
        border-radius: 0;
        text-decoration: none;
        transition: none;
        outline: none;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }

    .nav_category a:active,
    .nav_category a:focus:not(:focus-visible) {
        outline: none;
    }

    .nav_category a:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    .nav_category a:hover {
        background-color: var(--rgba-black-05);
        color: var(--color-primary);
    }

    /* 우측 서브메뉴 영역 */
    .nav_submenu {
        background-color: var(--color-white);
        padding: var(--space-24) var(--space-20);
        overflow-y: auto;
        overflow-x: visible;
        border-radius: 24px 0 0 0;
        position: relative;
        z-index: 0;
    }

    .nav_submenu ul {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        margin: 0;
    }

    .nav_submenu li {
        list-style: none;
    }

    .nav_submenu a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-16) var(--space-12);
        color: var(--color-text-primary);
        font-size: var(--font-15);
        font-weight: var(--weight-medium);
        text-decoration: none;
        border-bottom: 1px solid var(--color-light-bg);
        transition: all 300ms ease;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
        outline: none;
    }

    .nav_submenu a:active,
    .nav_submenu a:focus:not(:focus-visible) {
        outline: none;
    }

    .nav_submenu a:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    .nav_submenu a:hover {
        background-color: var(--color-gray-50);
        color: var(--color-primary);
    }

    /* 2depth 현재 페이지 활성화 스타일 */
    /* 3depth가 없는 2depth 메뉴의 active 스타일 */
    .nav_submenu li.active:not(:has(.submenu_3depth_mobile)) > a,
    .nav_submenu li.active > a:not(.has-3depth) {
        background-color: #E8F4F8;
        color: var(--color-primary);
        font-weight: var(--weight-semibold);
    }

    /* 3depth 하위 메뉴 active 스타일 */
    .submenu_3depth_mobile li.active a {
        color: var(--color-primary);
        font-weight: var(--weight-semibold);
    }

    /* 3depth active 상태일 때 점 색상만 변경 (크기는 그대로) */
    .submenu_3depth_mobile li.active::before {
        background-color: var(--color-primary) !important;
    }

    /* 서브메뉴 리스트 전환 */
    .submenu_list {
        display: none !important;
    }

    .submenu_list.active {
        display: flex !important;
    }

    /* 3depth 모바일 메뉴 */
    .submenu_3depth_mobile {
        display: none !important;
        flex-direction: column;
        padding-left: var(--space-20);
        margin-top: var(--space-12);
        margin-bottom: var(--space-8);
        gap: var(--space-4);
    }

    /* 3depth 메뉴가 열린 상태 */
    .submenu_3depth_mobile.open {
        display: flex !important;
    }

    .submenu_3depth_mobile li {
        list-style: none;
        position: relative;
        padding-left: var(--space-16);
    }

    .submenu_3depth_mobile li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 4px;
        background-color: var(--color-primary);
        border-radius: var(--radius-circle);
    }

    .submenu_3depth_mobile li a {
        display: block;
        padding: var(--space-12) var(--space-8);
        font-size: var(--font-14);
        font-weight: var(--weight-regular);
        color: var(--color-gray-700);
        text-decoration: none;
        border: none;
        transition: color 200ms ease;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
        outline: none;
    }

    .submenu_3depth_mobile li a:active,
    .submenu_3depth_mobile li a:focus:not(:focus-visible) {
        outline: none;
    }

    .submenu_3depth_mobile li a:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    .submenu_3depth_mobile li a:hover {
        color: var(--color-primary);
    }

    /* 3depth가 있는 2depth 메뉴에 화살표 표시 */
    .nav_submenu a.has-3depth::after {
        content: '›';
        display: inline-block;
        transform: rotate(90deg);
        font-size: var(--font-18);
        color: var(--color-text-secondary);
        transition: transform 300ms ease;
    }

    /* 3depth가 열렸을 때 화살표 회전 */
    .nav_submenu a.has-3depth:has(+ .submenu_3depth_mobile.open)::after {
        transform: rotate(-90deg);
    }
}


/* ===================================
   가로 모드 (992px 이하)
   =================================== */
@media screen and (max-width: 992px) and (orientation: landscape) {
    .nav_lnb {
        top: var(--layout-header-height);
        height: calc(100vh - var(--layout-header-height));
    }
}


/* ===================================
   태블릿 (768px 이하)
   =================================== */
@media screen and (max-width: 768px) {
    /* Top 버튼 - 위치만 조정 (크기는 유지) */
    .btn_top {
        bottom: var(--space-24);
        right: var(--space-24);
    }

    .partner_slider {
        padding: 0 32px;
    }
}

/* ===================================
   모바일 (700px 이하) - 푸터 반응형
   =================================== */
@media screen and (max-width: 700px) {
    /* 소식알림 - 필터 탭 숨기고 셀렉트박스 표시 */
    .news_filter .filter_list {
        display: none;
    }

    .filter_select {
        display: block;
        width: 100%;
        padding: var(--space-12) var(--space-16);
        font-size: var(--font-19);
        font-weight: var(--weight-semibold);
        color: var(--color-gray-900);
        background: var(--color-white);
        border: none;
        border-bottom: 3px solid var(--color-black);
        border-radius: 0;
        margin-bottom: var(--space-24);
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-16) center;
        padding-right: var(--space-40);
    }

    .partner_slider {
        padding: 0 24px;
        height: 70px;
    }

    .partner_item,
    .partner_item a {
        height: 70px;
    }

    .partner_item img {
        max-height: 50px;
    }

    /* 푸터 */
    .footer_inner {
        width: 368px;
        max-width: 368px;
        padding: 0;
    }

    .footer_logo {
        padding: 30px 0 0 0;
    }

    .footer_logo img {
        height: 48px;
    }

    .footer_menu {
        width: 100%;
    }

    .footer_menu ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 8px;
    }

    .footer_menu li {
        padding: 0;
        flex-basis: auto;
    }

    .footer_menu li:nth-child(1),
    .footer_menu li:nth-child(2),
    .footer_menu li:nth-child(3) {
        order: 0;
    }

    .footer_menu li:nth-child(4),
    .footer_menu li:nth-child(5) {
        order: 1;
    }

    .footer_menu li::after {
        display: none;
    }

    .footer_menu a {
        font-size: 17px;
    }

    .footer_info {
        gap: 8px;
        align-items: center;
    }

    .footer_info address {
        font-size: 17px;
    }

    .footer_info address p {
        margin: 4px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .footer_info .tel,
    .footer_info .fax {
        display: block;
    }

    .footer_info .divider-vertical::after {
        display: none;
    }

    .copyright {
        font-size: 14px;
    }
}

/* ===================================
   초소형 모바일 (360px 이하)
   =================================== */
@media screen and (max-width: 360px) {
    .footer_inner {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }
}


/* ===================================
   모바일 (599px 이하) - 소식알림 1열 레이아웃
   =================================== */
@media screen and (max-width: 599px) {
    .news_grid {
        grid-template-columns: 1fr;
    }
}


/* ===================================
   모바일 (576px 이하)
   =================================== */
@media screen and (max-width: 576px) {
    /* 헤더 */
    .header_inner {
        padding: 0 var(--space-16);
    }

    .btn_home img {
        height: 50px;
        width: auto;
    }

    .btn_open_nav {
        width: 55px;
        height: 55px;
    }

    .btn_open_nav div {
        width: 26px;
        height: 3px;
    }

    .btn_open_nav div::before,
    .btn_open_nav div::after {
        width: 26px;
        height: 3px;
    }

    /* 전체 메뉴 */
    .nav_lnb {
        width: 100%;
        right: -100%;
    }

    /* 버튼 */
    .btn_popup_close {
        width: 40px;
        height: 40px;
        font-size: var(--font-20);
    }

    /* top버튼 위치만 조정 (크기는 유지) */
    .btn_top {
        bottom: var(--space-16);
        right: var(--space-16);
    }

    /* 검색 박스 - 모바일 */
    .search_box {
        width: 100%;
        height: auto;
        border-radius: 40px;
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-8);
        gap: 0;
    }

    .search_select {
        width: 100%;
        flex-shrink: 0;
    }

    .select_btn {
        font-size: var(--font-14);
        padding: var(--space-4) var(--space-16);
        width: 100%;
        justify-content: flex-start;
        min-height: auto;
    }

    .search_input {
        font-size: var(--font-16);
        padding: var(--space-4) var(--space-16);
        padding-right: 70px;
        width: 100%;
        min-width: 0;
    }

    .search_btn {
        width: 60px;
        height: 60px;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

}


/* ===================================
   초소형 모바일 (400px 이하)
   =================================== */
@media screen and (max-width: 400px) {
    /* 유틸리티 메뉴 */
    .util_menu {
        gap: var(--space-4);
    }

    /* 버튼 */
    .btn_con {
        gap: var(--space-8);
    }

}


/* ===================================
   초소형 모바일 (360px 이하)
   =================================== */
@media screen and (max-width: 360px) {
    /* 헤더 */
    .btn_home img {
        height: 50px;
    }
}


/* ===================================
   CTA 배너 - 1025px 이하
   =================================== */
@media screen and (max-width: 1025px) {
    .cta_content {
        padding: 0 var(--space-40) 0 var(--space-30);
    }

    .cta_text {
        font-size: var(--font-24);
        white-space: nowrap;
        margin-left: -50px;
    }

    .cta_button {
        width: clamp(120px, 14vw, 157px);
        height: clamp(42px, 5vw, 51px);
        flex-shrink: 0;
    }

    .cta_button span {
        font-size: clamp(var(--font-14), 1.5vw, var(--font-17));
        white-space: nowrap;
    }

    .cta_button .icon {
        width: clamp(22px, 2.5vw, 30px);
        height: clamp(22px, 2.5vw, 30px);
    }
}


/* 모바일 전용 줄바꿈 - 기본 숨김 */
.mobile-br {
    display: none;
}

/* ===================================
   CTA 배너 - 700px 이하 (세로 레이아웃)
   =================================== */
@media screen and (max-width: 700px) {
    .mobile-br {
        display: block;
    }

    .review_cta_banner {
        height: 170px;
    }

    .cta_content {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--space-16);
        padding: var(--space-24);
    }

    .cta_text {
        font-size: var(--font-24);
        white-space: nowrap;
        margin-left: 0;
        text-align: left;
        line-height: 1.5;
    }

    .cta_button {
        width: auto;
        height: 45px;
        padding: 0 var(--space-16);
        align-self: flex-end;
    }

    .cta_button span {
        font-size: var(--font-15);
    }

    .cta_button .icon {
        width: 24px;
        height: 24px;
    }
}


/* ===================================
   유틸리티 클래스 (Utility Classes)
   =================================== */

/* 텍스트 정렬 유틸리티 */
.center {
    text-align: center;
}

/* 세로 구분선 유틸리티 */
.divider-vertical {
    position: relative;
    padding-right: var(--space-16);
    margin-right: var(--space-16);
}

.divider-vertical::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background-color: var(--color-gray-300);
}


/* ===================================
   웹 접근성 개선 - Focus Visible
   =================================== */

/* 검색 입력 필드 */
.search_input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* 정렬 셀렉트 */
.sort_select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

/* 유틸리티 아이콘 */
.util_icon:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 네비게이션 로고 */
.nav_lnb_header .nav_logo:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 네비게이션 닫기 버튼 */
.btn_close_nav:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* 네비게이션 유틸리티 링크 */
.nav_utility a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 네비게이션 검색 입력 */
.nav_search input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 네비게이션 검색 버튼 */
.nav_search_btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}


/* ===================================
   데스크탑 미디어쿼리 (1300px 이상)
   - 모바일 메뉴 완전 숨김, 데스크탑 GNB 표시
   =================================== */
@media screen and (min-width: 1300px) {
    /* 데스크탑에서 모바일 메뉴 완전 숨김 */
    .m-gnb-wrap,
    #m-gnb {
        display: none !important;
    }

    /* 데스크탑에서 햄버거 버튼 숨김 */
    .btn_open_menu {
        display: none !important;
    }
}

/* ===================================
   모바일 미디어쿼리 (1299px 이하)
   - GNB 숨김, 햄버거 버튼 표시
   =================================== */
@media screen and (max-width: 1400px) {
    /* 모바일에서 데스크탑 GNB 숨김 */
    .nav_gnb {
        display: none !important;
    }

    /* 모바일에서 유틸리티 아이콘 숨김 */
    .util_icon {
        display: none !important;
    }

    /* 모바일에서 사이트맵 버튼 숨김 */
    .btn_open_sitemap {
        display: none !important;
    }

    /* 모바일에서 햄버거 버튼 보이기 */
    .btn_open_menu {
        display: flex !important;
    }

    /* 헤더 - sticky로 변경 (모바일에서는 스크롤 시 헤더가 함께 이동) */
    #header {
        position: sticky;
        left: auto;
    }

    /* 콘텐츠 여백 제거 (sticky는 문서 흐름에 포함되므로) */
    #content {
        margin-top: 0;
    }

    /* 모바일 메뉴 열렸을 때 스크롤 방지 */
    html:has(> body.open_nav),
    body.open_nav {
        overflow: hidden;
    }

    /* 모바일 메뉴 열렸을 때 햄버거 버튼 숨김 */
    body.open_nav .btn_open_menu {
        display: none !important;
    }
}


/* ===================================
   모바일 슬라이더 메뉴 (Mobile Slider Menu) - www 서브페이지와 동일
   =================================== */

/* 모바일 메뉴 래퍼 - 기본 숨김 (화면 밖) */
.m-gnb-wrap {
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: block;
    transition: right ease .5s .1s;
    pointer-events: none;
}

.m-gnb-wrap.on {
    right: 0;
    pointer-events: auto;
}

/* 배경 오버레이 - 슬라이드 메뉴 뒤에 검정 투명 배경 */
.m-gnb-wrap::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.m-gnb-wrap.on::after {
    opacity: 1;
    pointer-events: auto;
}

.m-gnb-wrap .m-gnb-in {
    display: flex;
    flex-direction: column;
    align-items: normal;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    max-width: 430px;
    background: #E0EEF6;
    overflow: visible;
}

.m-gnb-wrap .ico-close {
    width: 24px;
    height: 24px;
}

#btn-mobile-gnb-close {
    position: absolute;
    top: 9px;
    right: 20px;
    background: #FFFFFF;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

#btn-mobile-gnb-close i {
    width: 24px;
    height: 24px;
    display: block;
    background: url(../../www/images/common/close_line_gray.svg) no-repeat center center;
    background-size: contain;
    font-size: 0;
}

.m-gnb-wrap .m-gnb-head {
    display: flex;
    flex-direction: column;
    align-items: normal;
    position: sticky;
    top: 0;
    left: 0;
    gap: 16px;
    padding: 22px 15px;
}

.m-gnb-wrap .m-gnb-head .etc-ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.m-gnb-wrap .m-gnb-head .etc-ul button i {
    font-size: 20px;
}

.m-gnb-wrap .m-gnb-head .m-gnb-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.m-gnb-wrap .m-gnb-head .m-gnb-login a + a {
    margin-right: 10px;
}

.m-gnb-wrap .m-gnb-head .m-gnb-login .name {
    font-weight: bold;
}

.m-gnb-wrap .m-gnb-head .m-gnb-login a,
.m-gnb-wrap .m-gnb-head .m-gnb-login button {
    font-size: 17px;
    color: #2F3336;
}

.m-gnb-wrap .m-gnb-head .m-gnb-login .btn-pop {
    font-size: 17px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #2F3336;
}

.m-gnb-wrap .m-gnb-head .btn-navi-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    height: 40px;
    padding: 0;
    font-weight: bold;
    color: #2F3336;
}

.m-gnb-wrap .m-gnb-head .btn-navi-login i {
    color: #2F3336;
}

.m-gnb-wrap .m-gnb-head .btn-navi-login:active {
    border-radius: 60px;
    background-color: #D6EBFF;
    transition: all 0.3s ease;
}

.m-gnb-wrap .m-gnb-head .etc-menu {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.m-gnb-wrap .m-gnb-head .etc-menu .link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: bold;
    width: 80px;
    height: 56px;
}

.m-gnb-wrap .m-gnb-head .etc-menu .link::before {
    display: inline-flex;
    content: '';
    width: 20px;
    height: 20px;
    background-color: #E4E4E4;
}

.m-gnb-wrap .m-gnb-head .etc-menu .link:active {
    border-radius: 60px;
    background-color: #D6EBFF;
    transition: all 0.3s ease;
}

.m-gnb-wrap .m-gnb-body {
    display: flex;
    flex-direction: column;
    align-items: normal;
    flex: 1;
    overflow: visible;
    scroll-behavior: smooth;
    position: relative;
}

.m-gnb-wrap .m-gnb-body.type1 {
    border: 0;
}

.m-gnb-wrap .m-gnb-body-btm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid #E4E4E4;
}

.m-gnb-wrap .m-gnb-top-etc {
    display: flex;
    justify-content: space-between;
}

.m-gnb-wrap .m-gnb-top-etc .etc-ul {
    display: flex;
}

.m-gnb-wrap .m-gnb-top-etc .etc-ul li {
    display: flex;
    align-items: center;
}

.m-gnb-wrap .m-gnb-top-etc .etc-ul li:not(:first-child) {
    margin-left: 16px;
}

.m-gnb-wrap .m-gnb-top-etc .etc-ul li:not(:first-child)::before {
    display: inline-flex;
    content: '';
    width: 1px;
    height: 16px;
    margin-right: 16px;
    background-color: #DDDDDD;
}

#header .m-gnb-wrap .header-search-area .search-inner {
    /*display: flex;*/
    display: none;
    align-items: center;
    background: #FFFFFF;
    border: 2px solid #036BAC;
    border-radius: 40px;
    padding: 10px 20px;
}

.m-gnb-wrap .m-gnb-head .m-gnb-login a img {
    height: 17px !important;
}

#header .m-gnb-wrap .m-gnb-head .m-gnb-login a {
    display: flex;
    gap: 10px;
    align-items: center;
}

#header .m-gnb-wrap .header-search-area .search-inner .search-input {
    border: 0;
    background: transparent;
    max-width: 160px;
    width: 100%;
    font-size: 17px;
}

#header .m-gnb-wrap .header-search-area .search-inner .btn-search {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-block;
    background: linear-gradient(135deg, #2C9DAD 0%, #046FD9 100%);
    border-radius: 50%;
    position: relative;
    right: -8px;
}

#header .m-gnb-wrap .header-search-area .search-inner .btn-search::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: url(../images/common/head_icn_search.svg) no-repeat center center;
    background-size: contain;
    filter: brightness(0) invert(1);
}

#header .m-gnb-wrap .header-search-area .search-input:focus {
    outline: none;
}

#header .m-gnb-wrap .header-search-area .search-inner .search-input {
    max-width:initial;
}

.m-gnb-wrap .m-gnb-menu #btn-mobile-gnb {
    display:none;
}

.m-gnb-wrap .m-gnb-menu {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.m-gnb-wrap .gnb-wrap {
    position: relative;
    flex: 1;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.m-gnb-wrap #gnb,
.m-gnb-wrap .gnb,
.m-gnb-wrap .nav_gnb {
    position: relative !important;
    height: 100% !important;
    min-height: 500px !important;
    display: block !important;
    margin: 0;
}

/* 모바일 메뉴 내부에서 데스크탑 네비게이션 스타일 완전 초기화 - dept2 제외 */
#m-gnb .nav_gnb .submenu-3depth,
#m-gnb .submenu-3depth,
#m-gnb #gnb .submenu-3depth {
    position: static !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

#m-gnb .nav_gnb .li2,
#m-gnb .nav_gnb .has-submenu-3depth,
#m-gnb .li2,
#m-gnb .has-submenu-3depth,
#m-gnb .nav_gnb .submenu > li,
#m-gnb .submenu > li,
#m-gnb #gnb .submenu > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
}

/* 데스크탑 네비게이션의 박스 스타일 제거 - 2depth는 #m-gnb #gnb .dept2 .a2 스타일 사용 */

/* 1depth 메뉴 리스트 */
#m-gnb #gnb .ul1 {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    bottom: 0;
    padding: 15px 0;
    z-index: 0;
    overflow: visible;
}

#m-gnb #gnb .ul1:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 190px;
    width: 1000px;
    bottom: 0;
    background: #FFFFFF;
    border-radius: 30px 0 0 0;
    box-shadow: -5px 10px 50px 0 rgba(39, 47, 119, 0.10);
    z-index: -1;
}

/* 1depth 메뉴 항목 */
#m-gnb #gnb .li1 {
    width: 190px;
    border: 1px solid rgba(255,255,255,.8);
    border-left-width: 0;
    border-right-width: 0;
    background: rgba(255,255,255,0.1);
}

#m-gnb #gnb .li1 + .li1 {
    border-top-width: 0;
}

#m-gnb #gnb .li1 .a1 {
    font-size: 19px;
    font-weight: 700;
    padding: 15px 20px;
    z-index: 0;
    margin-right: -10px;
    display: block;
    position: relative;
    color: #3A2B34;
}

#m-gnb #gnb .li1 .a1:before {
    content: "\ea6e";
    font-family: remixicon !important;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    opacity: 0;
    transition: .3s all;
}

#m-gnb #gnb .li1 .a1 span {
    display: block;
    line-height: 1.4em;
    color: #3A2B34;
    font-weight: 700;
    word-break: keep-all;
}

/* 1depth 활성화 */
#m-gnb #gnb .li1 > .a1.on {
    border-radius: 0 9px 19px 0;
    color: #FFFFFF;
    background: linear-gradient(135deg, #2C9DAD 0%, #046FD9 100%);
}

#m-gnb #gnb .li1 > .a1.on:before {
    opacity: 1;
    margin-right: 0;
    color: #FFFFFF;
    font-weight: 700;
}

/* 2depth 메뉴 */
#m-gnb #gnb .li1 .dept2 {
    display: none;
    position: absolute;
    top: 0;
    left: 190px;
    width: 240px;
    bottom: 0;
    padding: 17px 0 15px 22px;
    overflow: auto;
}

#m-gnb #gnb .li1 .dept2.on {
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
}

#m-gnb #gnb .dept2 > b {
    display: none;
}

#m-gnb #gnb .dept2 .li2 {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

#m-gnb #gnb .dept2 .a2 {
    display: flex !important;
    font-size: 19px !important;
    padding: 15px 5px !important;
    border-bottom: 1px solid #E4E7EA !important;
    justify-content: space-between !important;
    background: transparent !important;
    color: #2F3336 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

#m-gnb #gnb .dept2 .a2.plus::after {
    display: inline-block;
    content: "\ea4e";
    font-family: remixicon !important;
}

#m-gnb #gnb .dept2 .a2 span {
    font-size: .94em;
    font-weight: 500;
    color: #2F3336;
    word-break: keep-all;
}

/* 2depth 활성화 */
#m-gnb #gnb .dept2 > li.on > .a2 {
    border-bottom-color: #E4E7EA !important;
}

#m-gnb #gnb .dept2 > li.on > .a2 span {
    color: #CF336B !important;
    font-weight: 700 !important;
}

/* 3depth 메뉴 - 기본 숨김 */
#m-gnb #gnb .dept3,
#m-gnb .dept3,
#m-gnb .nav_gnb .dept3,
#m-gnb .nav_gnb .submenu-3depth {
    display: none !important;
    position: relative;
    padding: 17px;
    background: #FBFCFD;
    border-bottom: 1px solid #D0D0DD;
}

#m-gnb #gnb .dept3.on,
#m-gnb .dept3.on,
#m-gnb .nav_gnb .submenu-3depth.on {
    display: block !important;
    padding: 17px !important;
    background: #FBFCFD;
    border-bottom: 1px solid #D0D0DD;
}

#m-gnb #gnb .dept3 li + li {
    margin-top: 13px;
}

#m-gnb #gnb .li3 .a3 {
    position: relative;
    padding-left: 12px;
    display: block;
    color: #2F3336;
    font-size: 17px;
}

#m-gnb #gnb .li3 .a3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 7px;
    height: 2px;
    background: #ADB5BD;
    transition: all 0.8s;
}

/* 4depth 메뉴 숨김 */
.m-gnb-wrap #gnb .dept4 {
    display: none;
}

/* 모바일 메뉴 오픈 시 배경 제거 - 검정 배경 문제 해결 */
html.m-open .black-bg {
    display: none !important;
}

/*맞춤형검색*/
.search-select {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    width: 100%;
}

.select-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    position: relative;
    padding: 12px;

}

.select-wrap > div {
    flex: 1;
}

.custom-select {
    position: relative;
    display: inline-block;
    line-height: 1;
}

.select-selected {
    background: #F8F9FA;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    padding: 20px 20px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 19px;
    color: #333333;
    justify-content: space-between;
}

.select-selected::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/arr_select-selected.svg) no-repeat center center / contain;
}

.select-items {
    position: absolute;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 4px 20px var(--rgba-black-08);
    width: 100%;
    top: calc(100% + 20px);
    display: none;
    overflow: hidden;
    z-index: 2;
}

.custom-select:nth-child(2) .select-items {
    max-height: 300px;
    overflow-y: scroll;
}

.select-wrap .custom-select:first-child .select-items li {
    width: 100%;
}

.select-wrap .custom-select:nth-child(2) .select-items li,
.select-wrap .custom-select:nth-child(3) .select-items li {
    width: 50%;
}

.select-items li {
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 0;
    float: left;
    text-align: center;
    padding: 12px;
}

.select-items li button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 12px 12px;
    border-radius: 100px;
    background: #f8f9fa;
    font-size: 17px;
}

.select-items li button:hover {
    background: var(--color-primary-dark);
    color: #fff;
}

.search-select .btn.primary {
    width: 100%;
    padding: 20px 20px;
    font-weight: bold;
    border: 0;
    border-radius: 12px;
    font-size: 19px;
}

@media screen and (max-width: 1000px) {

    .search-select .select-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .search-select .select-wrap .custom-select {
        width: auto;
        flex: 1 1 100%;
    }

    .select-wrap > div:last-child .btn {
        height: 100%;
    }
}

@media screen and (max-width: 500px) {
    .select-wrap .custom-select:nth-child(3) .select-items li {
        width: 100%;
    }
}