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

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

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

#teaGuide .tg_inner{
    width:100%;
    margin:0 auto;
}

#teaGuide .intro_content,
#teaGuide .section_content{
    width:90%;
    margin:0 auto;
}

#teaGuide .eyebrow{
    margin:0;

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

    letter-spacing:1.6px;

    color:#888;
}



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

#teaGuide .tg_intro{
    width:100%;
    padding:42px 0 44px;
}

#teaGuide .tg_intro .intro_content{
    text-align:left;
}

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

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

    letter-spacing:1.8px;

    color:#777;
}

#teaGuide .tg_intro h2{
    margin:0;
    padding:0;

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

    letter-spacing:-.6px;

    color:#111;
}

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

    font-size:13px;
    line-height:1.75;
    font-weight:400;

    color:#777;
}



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

#teaGuide .tg_section{
    padding:60px 0 68px;
    border-top:1px solid #eee;
}

#teaGuide .section_head{
    display:grid;
    grid-template-columns:34px 1fr;
    align-items:start;

    margin-bottom:32px;
}

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

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

    color:#aaa;
}

#teaGuide .section_title h3{
    margin:12px 0 14px;
    padding:0;

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

    letter-spacing:-.5px;

    color:#111;
}

#teaGuide .section_title .desc{
    margin:0;

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

    color:#777;
}



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

/* BASIC */

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

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

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

#teaGuide .guide_basic > div{
    min-width:0;
    padding:17px 10px 18px;

    border-right:1px solid #ddd;
}

#teaGuide .guide_basic > div:first-child{
    padding-left:4px;
}

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

#teaGuide .guide_basic span{
    display:block;

    min-height:22px;
    margin-bottom:7px;

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

    letter-spacing:.6px;

    color:#999;
}

#teaGuide .guide_basic strong{
    display:block;

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

    letter-spacing:-.2px;

    color:#222;
}



/* GUIDE TABLE */

#teaGuide .guide_table{
    width:100%;
    border-top:1px solid #222;
}


/* PC TABLE HEAD HIDE */

#teaGuide .guide_th{
    display:none;
}


/* TEA ROW */

#teaGuide .guide_row:not(.guide_th){
    display:grid;
    grid-template-columns:repeat(3, 1fr);

    width:100%;
    padding:22px 0 20px;

    border-bottom:1px solid #ddd;
}


/* TEA NAME */

#teaGuide .tea_name{
    display:flex;
    grid-column:1 / -1;
    align-items:center;

    gap:8px;

    margin-bottom:8px;
}

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

    color:#222;
}

#teaGuide .tea_name span{
    font-size:11px;
    line-height:1.2;

    color:#999;
}


/* DESCRIPTION */

#teaGuide .tea_desc{
    grid-column:1 / -1;

    margin-bottom:20px;

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

    color:#666;
}


/* VALUES */

#teaGuide .tea_value{
    position:relative;

    padding-top:18px;

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

    color:#333;
}

#teaGuide .tea_value::before{
    position:absolute;
    top:0;
    left:0;

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

    letter-spacing:.7px;

    color:#aaa;
}

#teaGuide .guide_row:not(.guide_th) > div:nth-child(3)::before{
    content:'CAFFEINE';
}

#teaGuide .guide_row:not(.guide_th) > div:nth-child(4)::before{
    content:'TEMP.';
}

#teaGuide .guide_row:not(.guide_th) > div:nth-child(5)::before{
    content:'TIME';
}


/* NOTE */

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

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

    color:#999;
}



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

#teaGuide .tg_iced{
    padding-top:60px;
    padding-bottom:68px;
}


/* METHODS */

#teaGuide .iced_methods{
    display:block;
    width:100%;
}


/* METHOD */

#teaGuide .iced_method{
    width:100%;
    margin-bottom:45px;

    border-top:1px solid #222;
}

#teaGuide .iced_method:last-child{
    margin-bottom:0;
}


/* METHOD TITLE */

#teaGuide .method_title{
    padding:20px 4px 21px;

    border-bottom:1px solid #ddd;
}

#teaGuide .method_title > span{
    display:block;

    margin-bottom:12px;

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

    letter-spacing:1px;

    color:#999;
}

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

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

    color:#222;
}

#teaGuide .method_title p{
    margin:0;

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

    color:#777;
}



/* METHOD STEP */

#teaGuide .method_list{
    width:100%;
}

#teaGuide .method_step{
    display:grid;
    grid-template-columns:34px 1fr;

    width:100%;
    padding:20px 4px;

    border-bottom:1px solid #ddd;
}

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

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

    color:#aaa;
}

#teaGuide .method_step small{
    display:block;

    margin-bottom:6px;

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

    letter-spacing:.8px;

    color:#999;
}

#teaGuide .method_step strong{
    display:block;

    margin-bottom:7px;

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

    color:#222;
}

#teaGuide .method_step p{
    margin:0;

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

    color:#666;
}


/* NOTE */

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

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

    color:#999;
}



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

#teaGuide .tg_curation{
    width:100%;

    padding:70px 5% 75px;

    background:#f7f7f5;
}

#teaGuide .curation_inner{
    width:100%;
    margin:0 auto;

    text-align:left;
}

#teaGuide .curation_inner h3{
    margin:16px 0 18px;
    padding:0;

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

    letter-spacing:-.6px;

    color:#111;
}

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

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

    color:#666;
}


/* BUTTON */

#teaGuide .curation_btn{
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;
    height:52px;

    margin-top:28px;
    padding:0 17px;

    border:1px solid #222;

    color:#222;

    text-decoration:none;
}

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

    letter-spacing:.7px;
}

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



/* =========================================
   SMALL MOBILE
========================================= */

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

    #teaGuide .tg_intro h2{
        font-size:22px;
    }

    #teaGuide .section_title h3{
        font-size:25px;
    }

    #teaGuide .guide_basic strong{
        font-size:10px;
    }

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

    #teaGuide .curation_inner h3{
        font-size:29px;
    }

}
/* BASIC css end */