/* BASIC css start */
/* =========================================
   2026 TAVALON PC
   TEA GUIDE
========================================= */

#teaGuide {
    width:100%;
    color:#222;
    font-family:'Noto Sans KR', sans-serif;
    word-break:keep-all;
}

#teaGuide * {
    box-sizing:border-box;
}


/* =========================================
   INNER
   ÃÖ´ë 1500px / ÀÛÀº PC ÀÚµ¿ Ãà¼Ò
========================================= */

#teaGuide .tg_inner {
    width:calc(100% - 40px);
    max-width:1500px;
    margin:0 auto;
}


/* =========================================
   COMMON TYPO
========================================= */

#teaGuide .eyebrow {
    margin:0;
    font-family:'Montserrat', sans-serif;
    font-size:11px;
    line-height:1;
    font-weight:600;
    letter-spacing:2px;
    color:#888;
}


/* =========================================
   ½ÇÁ¦ Á¤º¸ ¿µ¿ª
   ÃÖ´ë 1200px / ÀÛÀº PC ÀÚµ¿ Ãà¼Ò
========================================= */

#teaGuide .intro_content,
#teaGuide .section_content {
    width:calc(100% - 40px);
    max-width:1200px;
    margin:0 auto;
}



/* =========================================
   INTRO
========================================= */

#teaGuide .tg_intro {
    padding:180px 0 90px;
}

#teaGuide .tg_intro .intro_content {
    width:100%;
    max-width:1500px;
    margin:0 auto;
    text-align:center;
}

#teaGuide .tg_intro .intro_title {
    margin:0 0 18px;

    font-family:'Montserrat', sans-serif;
    font-size:13px;
    line-height:1;
    font-weight:600;

    letter-spacing:2px;

    color:#777;
}

#teaGuide .tg_intro h2 {
    margin:0;

    font-family:'Noto Sans KR', sans-serif;
    font-size:38px;
    line-height:1.35;
    font-weight:600;

    color:#111;
}

#teaGuide .tg_intro .intro_txt {
    margin:25px 0 0;

    font-family:'Noto Sans KR', sans-serif;
    font-size:15px;
    line-height:1.8;
    font-weight:400;

    color:#777;
}



/* =========================================
   COMMON SECTION
========================================= */

#teaGuide .tg_section {
    padding:95px 0 105px;
    border-bottom:1px solid #ddd;
}

#teaGuide .section_head {
    display:grid;
    grid-template-columns:55px minmax(0, 1fr);
    align-items:start;
    margin-bottom:42px;
}

#teaGuide .section_num {
    padding-top:3px;

    font-family:'Montserrat', sans-serif;
    font-size:11px;
    line-height:1;
    font-weight:600;

    color:#aaa;
}

#teaGuide .section_title {
    min-width:0;
}

#teaGuide .section_title h3 {
    margin:15px 0 17px;
    padding:0;

    font-family:'Montserrat', sans-serif;
    font-size:34px;
    line-height:1.1;
    font-weight:700;

    letter-spacing:-.6px;

    color:#111;
}

#teaGuide .section_title .desc {
    margin:0;

    font-size:14px;
    line-height:1.75;

    color:#777;
}



/* =========================================
   01 TEA GUIDE
========================================= */


/* =========================================
   BASIC
========================================= */

#teaGuide .guide_basic {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));

    width:100%;
    margin-bottom:28px;

    border-top:1px solid #222;
    border-bottom:1px solid #ddd;
}

#teaGuide .guide_basic > div {
    min-width:0;

    padding:22px 25px 23px;

    border-right:1px solid #ddd;
}

#teaGuide .guide_basic > div:last-child {
    border-right:0;
}

#teaGuide .guide_basic span {
    display:block;

    margin-bottom:9px;

    font-family:'Montserrat', sans-serif;
    font-size:9px;
    line-height:1;
    font-weight:600;

    letter-spacing:1.2px;

    color:#999;
}

#teaGuide .guide_basic strong {
    display:block;

    font-family:'Montserrat', sans-serif;
    font-size:18px;
    line-height:1.2;
    font-weight:700;

    color:#222;
}



/* =========================================
   GUIDE TABLE
========================================= */

#teaGuide .guide_table {
    width:100%;

    border-top:1px solid #222;
}

#teaGuide .guide_row {
    display:grid;

    grid-template-columns:
        190px
        minmax(260px, 1fr)
        120px
        170px
        90px;

    align-items:center;

    width:100%;
    min-height:72px;

    border-bottom:1px solid #ddd;
}

#teaGuide .guide_row > div {
    min-width:0;

    padding:0 18px;
}

#teaGuide .guide_row > div:first-child {
    padding-left:10px;
}


/* =========================================
   TABLE HEAD
========================================= */

#teaGuide .guide_th {
    min-height:44px;
}

#teaGuide .guide_th > div {
    font-family:'Montserrat', sans-serif;
    font-size:9px;
    line-height:1;
    font-weight:600;

    letter-spacing:1px;

    color:#999;
}



/* =========================================
   TEA NAME
========================================= */

#teaGuide .tea_name {
    display:flex;

    align-items:center;

    gap:10px;
}

#teaGuide .tea_name strong {
    font-family:'Montserrat', sans-serif;
    font-size:13px;
    line-height:1.2;
    font-weight:600;

    white-space:nowrap;

    color:#222;
}

#teaGuide .tea_name span {
    flex:0 0 auto;

    font-size:11px;

    color:#999;
}



/* =========================================
   DESCRIPTION
========================================= */

#teaGuide .tea_desc {
    font-size:13px;
    line-height:1.6;

    color:#666;
}



/* =========================================
   VALUES
========================================= */

#teaGuide .tea_value {
    font-family:'Montserrat', sans-serif;
    font-size:12px;
    line-height:1.4;
    font-weight:500;

    white-space:nowrap;

    color:#444;
}



/* =========================================
   NOTE
========================================= */

#teaGuide .guide_note {
    margin:16px 0 0;

    font-size:11px;
    line-height:1.7;

    color:#999;
}



/* =========================================
   02 ICED TEA
========================================= */

#teaGuide .tg_iced {
    padding-top:95px;
    padding-bottom:105px;
}



/* =========================================
   METHODS
========================================= */

#teaGuide .iced_methods {
    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:45px;
}



/* =========================================
   METHOD
========================================= */

#teaGuide .iced_method {
    min-width:0;

    border-top:1px solid #222;
}



/* =========================================
   METHOD TITLE
========================================= */

#teaGuide .method_title {
    min-height:145px;

    padding:25px 25px 25px 10px;

    border-bottom:1px solid #ddd;
}

#teaGuide .method_title > span {
    display:block;

    margin-bottom:15px;

    font-family:'Montserrat', sans-serif;
    font-size:9px;
    line-height:1;
    font-weight:600;

    letter-spacing:1.2px;

    color:#999;
}

#teaGuide .method_title h4 {
    margin:0 0 12px;
    padding:0;

    font-family:'Montserrat', sans-serif;
    font-size:23px;
    line-height:1;
    font-weight:700;

    color:#222;
}

#teaGuide .method_title p {
    margin:0;

    font-size:13px;
    line-height:1.7;

    color:#777;
}



/* =========================================
   METHOD STEP
========================================= */

#teaGuide .method_list {
    width:100%;
}

#teaGuide .method_step {
    display:grid;

    grid-template-columns:45px minmax(0, 1fr);

    min-height:105px;

    padding:23px 20px 22px 10px;

    border-bottom:1px solid #ddd;
}

#teaGuide .step_num {
    padding-top:3px;

    font-family:'Montserrat', sans-serif;
    font-size:9px;
    line-height:1;
    font-weight:600;

    color:#aaa;
}

#teaGuide .method_step small {
    display:block;

    margin-bottom:7px;

    font-family:'Montserrat', sans-serif;
    font-size:9px;
    line-height:1;
    font-weight:600;

    letter-spacing:1px;

    color:#999;
}

#teaGuide .method_step strong {
    display:block;

    margin-bottom:8px;

    font-family:'Montserrat', sans-serif;
    font-size:17px;
    line-height:1.2;
    font-weight:700;

    color:#222;
}

#teaGuide .method_step p {
    max-width:430px;
    margin:0;

    font-size:12px;
    line-height:1.65;

    color:#666;
}


#teaGuide .iced_note {
    margin:18px 0 0;

    font-size:11px;
    line-height:1.7;

    color:#999;
}



/* =========================================
   03 FIND YOUR TEA
========================================= */

#teaGuide .tg_curation {
    padding:115px 0 125px;

    background:#f7f7f5;
}

#teaGuide .curation_inner {
    width:calc(100% - 40px);
    max-width:720px;

    margin:0 auto;

    text-align:center;
}

#teaGuide .curation_inner h3 {
    margin:20px 0 24px;
    padding:0;

    font-family:'Montserrat', sans-serif;
    font-size:44px;
    line-height:1;
    font-weight:700;

    letter-spacing:-.7px;

    color:#111;
}

#teaGuide .curation_inner > p:not(.eyebrow) {
    margin:0;

    font-size:14px;
    line-height:1.8;

    color:#666;
}



/* =========================================
   BUTTON
========================================= */

#teaGuide .curation_btn {
    display:inline-flex;

    align-items:center;
    justify-content:space-between;

    width:260px;
    height:54px;

    margin-top:35px;
    padding:0 22px;

    border:1px solid #222;

    color:#222;

    text-decoration:none;

    transition:all .25s;
}

#teaGuide .curation_btn span {
    font-family:'Montserrat', sans-serif;
    font-size:10px;
    font-weight:600;

    letter-spacing:.7px;
}

#teaGuide .curation_btn i {
    font-family:'Montserrat', sans-serif;
    font-size:16px;
    line-height:1;
    font-style:normal;

    transition:transform .25s;
}

#teaGuide .curation_btn:hover {
    background:#222;

    color:#fff;
}

#teaGuide .curation_btn:hover i {
    transform:translateX(4px);
}



/* =========================================
   SMALL PC
   MacBook / ÀÛÀº µ¥½ºÅ©Åé ´ëÀÀ
========================================= */

@media screen and (max-width:1300px) {

    #teaGuide .intro_content,
    #teaGuide .section_content {
        width:calc(100% - 20px);
    }


    /* GUIDE TABLE */

    #teaGuide .guide_row {
        grid-template-columns:
            165px
            minmax(220px, 1fr)
            100px
            145px
            75px;
    }

    #teaGuide .guide_row > div {
        padding:0 12px;
    }

    #teaGuide .guide_row > div:first-child {
        padding-left:8px;
    }


    #teaGuide .tea_name {
        gap:7px;
    }

    #teaGuide .tea_name strong {
        font-size:12px;
    }

    #teaGuide .tea_name span {
        font-size:10px;
    }

    #teaGuide .tea_desc {
        font-size:12px;
    }

    #teaGuide .tea_value {
        font-size:11px;
    }


    /* ICED */

    #teaGuide .iced_methods {
        gap:30px;
    }

    #teaGuide .method_title {
        padding-right:15px;
    }

    #teaGuide .method_step {
        grid-template-columns:38px minmax(0, 1fr);

        padding-right:15px;
    }

}



/* =========================================
   VERY SMALL PC
========================================= */

@media screen and (max-width:1100px) {

    #teaGuide .tg_inner {
        width:calc(100% - 30px);
    }


    #teaGuide .intro_content,
    #teaGuide .section_content {
        width:100%;
    }


    /* GUIDE BASIC */

    #teaGuide .guide_basic > div {
        padding-left:18px;
        padding-right:18px;
    }


    /* GUIDE TABLE */

    #teaGuide .guide_row {
        grid-template-columns:
            150px
            minmax(190px, 1fr)
            90px
            130px
            70px;
    }


    /* ICED */

    #teaGuide .iced_methods {
        gap:22px;
    }

}
/* BASIC css end */