@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_r2{
    --tit-point-r-top: -0.15em;
}
.tit_point_r2::before {
    background: url(../images/tit_point_r2.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: 80px;

    --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: 70px;
    }
}

@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;
    }
}

/* ==================== 담픽꿀팁 ==================== */
.tip_page {
    --tip-intro-icon-w: min(16vw, 180px);
    --tip-check-w: 36px;
    --tip-check-h: 24px;

    --tip-summary-card-w: 220px;
    --tip-summary-card-h: 280px;
    --tip-summary-icon-w: 144px;
    --tip-summary-mobile-card-min-h: 80px;
    --tip-summary-mobile-icon-w: 56px;
}

/* 인트로 */
.tip_page .tip_intro_section {
    margin-top: var(--sub-header-offset);
    padding-top: var(--p80);
    background: var(--gray_f);
    transition: margin-top 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.tip_page .tip_intro {
    margin-bottom: var(--m70);
}

.tip_page .tip_intro_icon {
    flex: 0 0 auto;
    width: var(--tip-intro-icon-w);
}

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

/* 리스트 */
.tip_page .tip_list_section {
    padding-bottom: var(--sub-content-py);
    background: var(--gray_f);
}

.tip_page .tip_list {
    display: flex;
    flex-direction: column;
    gap: var(--gap90);
}

.tip_page .tip_item_head {
    gap: var(--gap10);
    margin-bottom: var(--m25);
}

.tip_page .tip_item_head::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: var(--m15);
    background: var(--point);
    opacity: 0.55;
}

.tip_page .tip_check {
    display: block;
    flex: 0 0 auto;
    width: var(--tip-check-w);
    height: var(--tip-check-h);
    object-fit: contain;
}

.tip_page .tip_box {
    padding: var(--p25) var(--p30);
    border-radius: var(--br_15);
    background: var(--point2_lighter);
}

.tip_page .tip_box p + p {
    margin-top: var(--m8);
}

/* 요약 */
.tip_page .tip_summary_section {
    padding-top: var(--sub-content-py);
    padding-bottom: var(--sub-content-py);
}

.tip_page .tip_summary_list {
    display: grid;
    gap: var(--gap20);
}

.tip_page .tip_summary_card {
    border: 1px solid var(--point);
    border-radius: var(--br_15);
    background: var(--gray_f);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.2) !important;
}

.tip_page .tip_summary_icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tip_page .tip_summary_icon img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.tip_page .tip_summary_card p {
    line-height: 1.3;
    text-align: center;
    word-break: keep-all;
}

/* 요약 - PC */
@media screen and (min-width: 1101px) {
    .tip_page .tip_summary_section .wrap {
        max-width: 1420px;
    }

    .tip_page .tip_summary_list {
        grid-template-columns: repeat(6, var(--tip-summary-card-w));
        justify-content: center;
        gap: var(--gap20);
    }

    .tip_page .tip_summary_card {
        width: var(--tip-summary-card-w);
        height: var(--tip-summary-card-h);
        padding: var(--p25) var(--p20);
        flex-direction: column;
        gap: var(--gap20);
    }

    .tip_page .tip_summary_icon {
        width: var(--tip-summary-icon-w);
    }

    .tip_page .tip_summary_card p {
        min-height: calc(1em * 2.6);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 태블릿 */
@media screen and (max-width: 1100px) {
    .tip_page {
        --tip-intro-icon-w: min(22vw, 120px);
        --tip-check-w: 30px;
        --tip-check-h: 20px;
    }

    .tip_page .tip_intro_section {
        padding-top: var(--p70);
    }

    .tip_page .tip_intro {
        margin-bottom: var(--m55);
    }

    .tip_page .tip_list {
        gap: var(--gap45);
    }

    .tip_page .tip_list_section {
        padding-bottom: var(--p70);
    }

    .tip_page .tip_summary_section {
        padding-top: var(--p100);
        padding-bottom: var(--p100);
    }

    .tip_page .tip_summary_list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--gap20);
    }

    .tip_page .tip_summary_card {
        height: 230px;
        padding: var(--p20);
        flex-direction: column;
        gap: var(--gap15);
    }

    .tip_page .tip_summary_icon {
        width: 105px;
    }

    .tip_page .tip_summary_card p {
        min-height: calc(1em * 2.6);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 모바일 */
@media screen and (max-width: 767px) {
    .tip_page {
        --tip-intro-icon-w: min(24vw, 90px);
        --tip-check-w: 24px;
        --tip-check-h: 16px;
        --tip-summary-mobile-icon-w: 56px;
    }

    .tip_page .tip_intro_section {
        padding-top: var(--p50);
    }

    .tip_page .tip_intro {
        align-items: flex-start;
        margin-bottom: var(--m45);
    }

    .tip_page .tip_list_section {
        padding-bottom: var(--p55);
    }

    .tip_page .tip_item_head {
        align-items: flex-start;
        margin-bottom: var(--m15);
    }

    .tip_page .tip_item_head::after {
        margin-top: calc(var(--fs_30) * 0.55);
        margin-left: var(--m10);
    }

    .tip_page .tip_box {
        padding: var(--p20);
    }

    .tip_page .tip_summary_section {
        padding-top: var(--p50);
        padding-bottom: var(--p50);
    }

    .tip_page .tip_summary_list {
        grid-template-columns: 1fr;
        gap: var(--gap12);
    }

    .tip_page .tip_summary_card {
        width: 100%;
        min-height: var(--tip-summary-mobile-card-min-h);
        height: auto;
        padding: var(--p15) var(--p25);
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--gap20);
        text-align: left;
    }

    .tip_page .tip_summary_icon {
        flex: 0 0 var(--tip-summary-mobile-icon-w);
        width: var(--tip-summary-mobile-icon-w);
    }

    .tip_page .tip_summary_card p {
        flex: 1;
        min-width: 0;
        min-height: 0;
        display: block;
        line-height: 1.3;
        text-align: left !important;
        word-break: keep-all;
    }
}

/* 작은 모바일 */
@media screen and (max-width: 430px) {
    .tip_page {
        --tip-intro-icon-w: min(25vw, 72px);
        --tip-summary-mobile-card-min-h: 76px;
        --tip-summary-mobile-icon-w: 48px;
    }

    .tip_page .tip_summary_card {
        padding: var(--p12) var(--p20);
        gap: var(--gap15);
    }

    .tip_page .tip_summary_icon {
        flex-basis: 48px;
        width: 48px;
    }
}