@charset "utf-8";
/* CSS Document */
/* 타이틀 포인트 이미지 - RIGHT (서브 전용) */
.tit_point_r {
    --tit-point-r-w: 0.3595em;
    --tit-point-r-right: -0.18em;
    --tit-point-r-top: 0.0em;
    position: relative;
    display: inline-block;
    line-height: inherit;
}

.tit_point_r::before {
    content: "";
    position: absolute;
    top: var(--tit-point-r-top);
    right: var(--tit-point-r-right);
    width: var(--tit-point-r-w);
    aspect-ratio: 23 / 25;
    pointer-events: none;
    background: url(../images/tit_point_r.png) no-repeat center / contain;
}

/* 예외 글자별 위치 보정 */
.tit_point_r.r_hap {
    --tit-point-r-top: -0.09em;
}

.tit_point_r.r_ron {
    --tit-point-r-top: -0.07em;
}

.tit_point_r.r_geum {
    --tit-point-r-top: -0.06em;
}

.tit_point_r.r_gi {
    --tit-point-r-top: -0.08em;
}
/* ==================== 서브 페이지 공통 ==================== */
:root {
    --sub-header-offset: 160px;
    --sub-header-offset-scrolled: 132px;

    --sub-visual-min-h: 550px;

    --sub-visual-space: var(--p80);
    --sub-overlap: calc(var(--p100) * 0.8);

    --sub-content-py: 130px;

    --sub-table-th-w: 280px;
    --sub-table-py: 25px;
    --sub-table-px: 30px;
}

/* 헤더 높이에 맞춰 자연스럽게 */
@media screen and (min-width: 1101px) and (max-width: 1499px) {
    :root {
        --sub-header-offset: 150px;
        --sub-header-offset-scrolled: 126px;
    }
}

@media screen and (min-width: 1101px) and (max-width: 1260px) {
    :root {
        --sub-header-offset: 142px;
        --sub-header-offset-scrolled: 120px;
    }
}

@media screen and (max-width: 1100px) {
    :root {
        --sub-header-offset: 72px;
        --sub-header-offset-scrolled: 64px;

        --sub-visual-min-h: auto;
        --sub-content-py: 100px;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --sub-content-py: 50px;
    }
}

.sub_page_visual {
    margin-top: var(--sub-header-offset);
    padding-top: var(--sub-visual-space);
    padding-bottom: calc(var(--sub-visual-space) + var(--sub-overlap) + 20px );
    min-height: var(--sub-visual-min-h);
    transition: margin-top 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    background: url(../images/sub/sub_visual_bg.png) no-repeat;
    background-position: bottom center;
    background-size: cover;
    transition:
        margin-top 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        padding-top 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        padding-bottom 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        min-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        background-position 0.35s ease,
        background-size 0.35s ease;
}

body.header-scrolled .sub_page_visual {
    margin-top: var(--sub-header-offset-scrolled);
}

.sub_visual_inner {
    --sub-visual-gap: clamp(10px, 1vw, 30px);
    --sub-thumb-w: min(30vw, 480px);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sub-visual-gap);
    transition:
        gap 0.35s ease,
        transform 0.35s ease;
}

.sub_visual_content {
    flex: 0 1 calc(100% - var(--sub-thumb-w) - var(--sub-visual-gap));
    min-width: 0;
    max-width: calc(100% - var(--sub-thumb-w) - var(--sub-visual-gap));
    transition:
        max-width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        flex-basis 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.sub_visual_desc {
    margin: 0;
    font-size: var(--fs_40);
    font-weight: 500;
    line-height: 1.3;
    word-break: keep-all;
    transition:
        font-size 0.35s ease,
        margin 0.35s ease,
        line-height 0.35s ease;
}

.sub_visual_title {
    margin: 30px 0 50px;
    font-size: var(--fs_64);
    font-weight: 700;
    line-height: 1.2;
    word-break: keep-all;
    transition:
        font-size 0.35s ease,
        margin 0.35s ease,
        line-height 0.35s ease;
}

.sub_visual_badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    transition: gap 0.35s ease;
}

.sub_visual_badges_row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    transition: gap 0.35s ease;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--p10) var(--p15);
    border: 1px solid var(--gray_f);
    border-radius: 999px;
    background: transparent;
    color: var(--gray_f);
    font-size: var(--fs_20);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}

.sub_visual_thumb {
    flex: 0 0 auto;
    width: var(--sub-thumb-w);
    transition:
        width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        margin 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.sub_visual_thumb img {
    display: block;
    width: auto;
    height: auto;
    /* transition:
        width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); */
}

.sub_content {
    --sub_curve: clamp(30px, 5vw, 80px);

    padding-top: var(--sub-content-py);
    padding-bottom: var(--sub-content-py);
    border-radius: var(--sub_curve) var(--sub_curve) 0 0;
    box-shadow: 0 -10px 20px #0c227c80;
    background: var(--gray_f);
    margin-top: calc(var(--sub-overlap) * -1);
}

.sub_detail_title {
    margin: 0 0 40px;
    font-size: var(--fs_40);
    font-weight: 700;
    line-height: 1.3;
    color: var(--gray_2);
    word-break: keep-all;
}

/* ==================== 상세 테이블 ==================== */
.sub_detail_table_wrap {
    width: 100%;
}

.sub_detail_table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-top: 2px solid var(--point);
    border-bottom: 2px solid var(--point);
    background: var(--gray_f);
}

.sub_detail_table th,
.sub_detail_table td {
    padding: 0;
    border-bottom: 1px solid #cedbe8;
    vertical-align: top;
    word-break: keep-all;
}

.sub_detail_table th {
    width: var(--sub-table-th-w);
    background: var(--point2_lighter);
    text-align: center;
}

.sub_detail_table td {
    background: var(--gray_f);
    text-align: left;
}

.sub_detail_table tr:last-child th,
.sub_detail_table tr:last-child td {
    border-bottom: 0;
}

.sub_detail_th_inner {
    padding: var(--sub-table-py) var(--sub-table-px);
    color: var(--point);
    font-size: var(--fs_20);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

.sub_detail_td_inner {
    padding: var(--sub-table-py) var(--sub-table-px);
    color: var(--gray_4);
    font-size: var(--fs_20);
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
}

/* ==================== 반응형 ==================== */
@media screen and (max-width: 1100px) {
    .sub_visual_inner {
        --sub-visual-gap: 25px;
        --sub-thumb-w: min(40vw, 300px);
    }

    .sub_visual_desc {
        font-size: var(--fs_28);
    }

    .sub_detail_th_inner,
    .sub_detail_td_inner {
        padding: 22px 20px;
    }

    .sub_detail_table th {
        width: 220px;
    }
}

@media screen and (max-width: 991px) {
    :root {
        --sub-visual-space: var(--p70);
    }

    .sub_page_visual {
        background: url(../images/sub/sub_visual_bg_m.png) no-repeat;
        background-size: cover;
        background-position: center center;
    }
    .sub_visual_inner {
        --sub-visual-gap: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .sub_visual_content {
        display: contents;
    }

    .sub_visual_desc {
        order: 3;
    }

    .sub_visual_title {
        order: 2;
        margin: 0;
    }

    .sub_visual_badges_row {
        justify-content: center;
    }

    .sub_visual_badges {
        order: 4;
        justify-content: center;
        gap: var(--gap8);
    }
    .badge {
        padding: var(--p8) var(--p12);
        font-size: var(--fs_14);
    }
    .sub_visual_thumb {
        width: min(40vw, 320px);
        order: 1;
        margin: 0 auto;
    }

    .sub_detail_title {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --sub-visual-space: var(--p70);
    }
    /* .sub_visual_inner {
        --sub-visual-gap: 15px;
    } */
    .sub_visual_desc {
        font-size: var(--fs_20);
    }

    .sub_visual_thumb {
        width: min(25vw, 150px);
    }

    .sub_detail_title {
        margin-bottom: 24px;
    }

    /* 모바일 테이블 - 리뷰카드 느낌 */
    .sub_detail_table_wrap {
        width: 100%;
    }

    .sub_detail_table,
    .sub_detail_table tbody {
        display: block;
        width: 100%;
        border: 0;
        background: transparent;
    }

    .sub_detail_table colgroup {
        display: none;
    }

    .sub_detail_table tr {
        display: block;
        width: 100%;
        margin-bottom: 16px;
        border-radius: var(--br_15);
        overflow: hidden;
        background: transparent;
        box-shadow: 0 6px 15px rgba(0, 71, 125, 0.10);
    }

    .sub_detail_table tr:last-child {
        margin-bottom: 0;
    }

    .sub_detail_table th,
    .sub_detail_table td {
        display: block;
        width: 100%;
        margin: 0;
        border: 0;
        text-align: left;
        background: transparent;
    }

    .sub_detail_table th {
        background: var(--point);
    }

    .sub_detail_table td {
        background: var(--gray_f);
    }

    .sub_detail_th_inner {
        min-height: 40px;
        padding: var(--p15) var(--p20);
        color: var(--gray_f);
        font-size: var(--fs_18);
        font-weight: 700;
        line-height: 1.35;
        text-align: left;
        display: flex;
        align-items: center;
    }

    .sub_detail_td_inner {
        padding: var(--p18) var(--p20);
        color: var(--gray_4);
        font-size: var(--fs_18);
        font-weight: 500;
        line-height: 1.6;
        text-align: left;
        word-break: keep-all;
    }
}