/* =========================================================
   COFFEE CONTACT SECTION
========================================================= */

.coffee-contact-section{

    position:relative;

    width:100%;

    padding:85px 20px 90px;

    background:#fff;

    color:#332b27;

    overflow:hidden;

    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Apple SD Gothic Neo",
        Arial,
        sans-serif;

    -webkit-font-smoothing:antialiased;

}


.coffee-contact-inner{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        1fr
        1.12fr
        1fr;

    column-gap:65px;

    align-items:start;

}


/* =========================================================
   COMMON HEADING
========================================================= */

.coffee-section-heading{

    margin-bottom:27px;

}


.coffee-section-label{

    display:block;

    margin-bottom:11px;

    color:#a78268;

    font-family:
        Arial,
        sans-serif;

    font-size:11px;

    font-weight:700;

    line-height:1;

    letter-spacing:.35px;

}


.coffee-section-title{

    margin:0;

    color:#302925;

    font-size:25px;

    font-weight:600;

    line-height:1.35;

    letter-spacing:-1.3px;

}


/* =========================================================
   FAQ
========================================================= */

.coffee-faq-list{

    width:100%;

    border-top:1px solid #eee9e5;

}


.coffee-faq-item{

    border-bottom:1px solid #eee9e5;

}


/* 질문 */

.coffee-faq-question{

    position:relative;

    width:100%;

    min-height:54px;

    padding:0 34px 0 0;

    border:0;

    background:transparent;

    display:flex;

    align-items:center;

    text-align:left;

    color:#4a403a;

    cursor:pointer;

}


.coffee-faq-question-text{

    display:block;

    padding-right:10px;

    font-size:16px;

    font-weight:500;

    line-height:1.5;

    letter-spacing:-.4px;

    transition:
        color .25s ease;

}


.coffee-faq-question:hover
.coffee-faq-question-text{

    color:#9b765e;

}


/* =========================================================
   PLUS ICON
========================================================= */

.coffee-faq-plus{

    position:absolute;

    right:4px;

    top:50%;

    width:18px;

    height:18px;

    margin-top:-9px;

}


.coffee-faq-plus span{

    position:absolute;

    left:50%;

    top:50%;

    display:block;

    width:12px;

    height:1px;

    background:#8f8178;

    transform:
        translate(-50%,-50%);

    transition:
        transform .3s ease,
        opacity .3s ease;

}


.coffee-faq-plus span:nth-child(2){

    transform:
        translate(-50%,-50%)
        rotate(90deg);

}


/* OPEN */

.coffee-faq-item.is-open
.coffee-faq-plus span:nth-child(2){

    opacity:0;

}


.coffee-faq-item.is-open
.coffee-faq-question-text{

    color:#9b765e;

}


/* =========================================================
   ANSWER
========================================================= */

.coffee-faq-answer{

    display:grid;

    grid-template-rows:0fr;

    transition:
        grid-template-rows .4s
        cubic-bezier(.2,.7,.2,1);

}


.coffee-faq-item.is-open
.coffee-faq-answer{

    grid-template-rows:1fr;

}


.coffee-faq-answer-inner{

    overflow:hidden;

    color:#8b817b;

    font-size:14px;

    line-height:1.75;

    letter-spacing:-.3px;

    padding-right:25px;

}


.coffee-faq-item.is-open
.coffee-faq-answer-inner{

    padding-bottom:18px;

}


/* =========================================================
   FAQ MORE BUTTON
========================================================= */

.coffee-faq-more{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:112px;

    height:36px;

    margin-top:21px;

    padding:0 15px;

    border:1px solid #ddd5cf;

    border-radius:3px;

    color:#6d625b;

    background:#fff;

    font-size:10px;

    font-weight:400;

    text-decoration:none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.coffee-faq-more-arrow{

    margin-left:7px;

    font-size:13px;

    transition:
        transform .25s ease;

}


.coffee-faq-more:hover{

    background:#34251e;

    border-color:#34251e;

    color:#fff;

}


.coffee-faq-more:hover
.coffee-faq-more-arrow{

    transform:translateX(3px);

}


/* =========================================================
   INSTAGRAM
========================================================= */

.coffee-instagram-column{

    min-width:0;

}


.instagram-title{

    font-size:20px;

    letter-spacing:-.6px;

}


/* =========================================================
   INSTAGRAM GRID
========================================================= */

.coffee-instagram-grid{

    width:100%;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:6px;

}


.coffee-instagram-item{

    position:relative;

    display:block;

    aspect-ratio:1 / 1;

    overflow:hidden;

    border-radius:7px;

    background:#eee;

}


.coffee-instagram-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .5s
        cubic-bezier(.2,.7,.2,1);

}


.coffee-instagram-item:hover img{

    transform:scale(1.08);

}


/* =========================================================
   INSTAGRAM OVERLAY
========================================================= */

.coffee-instagram-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        rgba(45,28,19,.48);

    color:#fff;

    opacity:0;

    transition:
        opacity .3s ease;

}


.coffee-instagram-item:hover
.coffee-instagram-overlay{

    opacity:1;

}


.coffee-instagram-overlay svg{

    width:25px;

    height:25px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

    stroke-linecap:round;

    stroke-linejoin:round;

}


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

.coffee-instagram-button{

    display:inline-flex;

    align-items:center;

    margin-top:17px;

    color:#766961;

    font-size:10px;

    font-weight:500;

    text-decoration:none;

}


.coffee-instagram-button span{

    margin-left:7px;

    font-size:13px;

    transition:
        transform .25s ease;

}


.coffee-instagram-button:hover{

    color:#9b765e;

}


.coffee-instagram-button:hover span{

    transform:
        translate(3px,-3px);

}


/* =========================================================
   CONTACT
========================================================= */

.coffee-contact-description{

    margin:0 0 25px;

    color:#827770;

    font-size:16px;

    font-weight:400;

    line-height:1.8;

    letter-spacing:-.3px;

}


.coffee-contact-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}


/* CONTACT ITEM */

.coffee-contact-item{

    display:flex;

    align-items:center;

    min-height:27px;

}


/* ICON */

.coffee-contact-icon{

    width:25px;

    height:25px;

    flex:0 0 25px;

    margin-right:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#9b765e;

}


.coffee-contact-icon svg{

    width:19px;

    height:19px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* TEXT */

.coffee-contact-text{

    display:flex;

    flex-direction:column;

    gap:2px;

    color:#625851;

    font-size:14px;

    line-height:1.5;

}


.coffee-contact-text strong{

    font-size:14px;

    font-weight:500;

}


.coffee-contact-text small{

    color:#9a9089;

    font-size:9px;

    font-weight:400;

}


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

.coffee-contact-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:94px;

    height:36px;

    margin-top:23px;

    padding:0 15px;

    border:1px solid #d8d0ca;

    border-radius:3px;

    color:#675d56;

    background:#fff;

    font-size:10px;

    font-weight:400;

    text-decoration:none;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease;

}


.coffee-contact-button span{

    margin-left:8px;

    font-size:13px;

    transition:
        transform .25s ease;

}


.coffee-contact-button:hover{

    background:#34251e;

    border-color:#34251e;

    color:#fff;

}


.coffee-contact-button:hover span{

    transform:translateX(3px);

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

    .coffee-contact-section{

        padding:
            70px 25px 75px;

    }


    .coffee-contact-inner{

        grid-template-columns:
            1fr 1fr;

        gap:55px 45px;

    }


    .coffee-contact-info-column{

        grid-column:
            1 / -1;

    }


    .coffee-section-title{

        font-size:23px;

    }

}


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

@media(max-width:680px){

    .coffee-contact-section{

        padding:
            60px 20px 70px;

    }


    .coffee-contact-inner{

        display:flex;

        flex-direction:column;

        gap:65px;

    }


    .coffee-contact-column{

        width:100%;

    }


    .coffee-section-heading{

        margin-bottom:22px;

    }


    .coffee-section-label{

        font-size:10px;

    }


    .coffee-section-title{

        font-size:24px;

        letter-spacing:-1.1px;

    }


    .instagram-title{

        font-size:20px;

    }


    .coffee-faq-question{

        min-height:58px;

    }


    .coffee-faq-question-text{

        font-size:13px;

    }


    .coffee-faq-answer-inner{

        font-size:11px;

    }


    .coffee-contact-description{

        font-size:11px;

    }


    .coffee-contact-info-column{

        width:100%;

    }

}


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

@media(max-width:420px){

    .coffee-contact-section{

        padding:
            50px 16px 60px;

    }


    .coffee-contact-inner{

        gap:55px;

    }


    .coffee-section-title{

        font-size:22px;

    }


    .coffee-faq-question-text{

        font-size:12px;

    }


    .coffee-instagram-grid{

        gap:5px;

    }

}



/* hr태그 css*/
.custom-hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #d4c5b9 20%, #d4c5b9 80%, transparent);
  position: relative;
  margin: 40px 0;
}

.custom-hr::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background-color: #e6b980; /* 점 색상 */
  border-radius: 50%;
}