/* =========================================================
   COFFEE TIME FOOTER
========================================================= */

.ct-footer {

    width:100%;

    background:#21120b;

    color:#fff;

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

    -webkit-font-smoothing:antialiased;

}


/* =========================================================
   INNER
========================================================= */

.ct-footer-inner {

    position:relative;

    width:100%;

    max-width:1400px;

    min-height:125px;

    margin:0 auto;

    padding:22px 75px;

    display:flex;

    align-items:center;

}


/* =========================================================
   LOGO
========================================================= */

.ct-footer-logo-area {

    flex:0 0 auto;

    margin-right:38px;

}


.ct-footer-logo {

    display:flex;

    align-items:center;

    gap:8px;

    color:#fff;

    text-decoration:none;

}


.ct-footer-logo-icon {

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#b8875f;

}


.ct-footer-logo-icon svg {

    width:32px;

    height:32px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.35;

    stroke-linecap:round;

    stroke-linejoin:round;

}


.ct-footer-logo-text {

    display:flex;

    flex-direction:column;

}


.ct-footer-logo-text strong {

    color:#fff;

    font-family:Arial, sans-serif;

    font-size:16px;

    font-weight:700;

    line-height:1;

    letter-spacing:-.4px;

}


.ct-footer-logo-text small {

    margin-top:4px;

    color:#a78976;

    font-family:Arial, sans-serif;

    font-size:7px;

    font-weight:500;

    line-height:1;

    letter-spacing:1.2px;

}


/* =========================================================
   COMPANY INFO
========================================================= */

.ct-footer-info {

    flex:1;

    min-width:0;

}


.ct-footer-info p {

    margin:0;

    color:#b4a39a;

    font-size:11px;

    font-weight:400;

    line-height:1.65;

    letter-spacing:-.3px;

    white-space:nowrap;

}


.ct-footer-info p i {

    display:inline-block;

    margin:0 6px;

    color:#655148;

    font-style:normal;

}


.ct-footer-info .ct-footer-copy {

    margin-top:3px;

    color:#817066;

    font-family:Arial, sans-serif;

    font-size:9px;

    letter-spacing:.15px;

}


/* =========================================================
   RIGHT
========================================================= */

.ct-footer-right {

    flex:0 0 auto;

    width:355px;

    align-self:stretch;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    justify-content:space-between;

    padding:2px 0 5px;

}


/* =========================================================
   NAV
========================================================= */

.ct-footer-nav {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:12px;

    white-space:nowrap;

}


.ct-footer-nav a {

    color:#b9aaa2;

    font-size:11px;

    font-weight:400;

    line-height:1;

    letter-spacing:-.45px;

    text-decoration:none;

    transition:color .25s ease;

}


.ct-footer-nav a:first-child {

    color:#ddd1ca;

    font-weight:500;

}


.ct-footer-nav a:hover {

    color:#fff;

}


.ct-footer-nav span {

    color:#67554b;

    font-size:9px;

}


/* =========================================================
   SOCIAL
========================================================= */

.ct-footer-social {

    display:flex;

    align-items:center;

    gap:10px;

}


.ct-social {

    width:27px;

    height:27px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f7f4f1;

    color:#29170e;

    text-decoration:none;

    transition:

        transform .25s ease,

        background .25s ease,

        color .25s ease;

}


.ct-social:hover {

    transform:translateY(-3px);

    background:#b8875f;

    color:#fff;

}


.ct-social svg {

    width:15px;

    height:15px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;

}


.ct-social .fill {

    fill:currentColor;

    stroke:none;

}


.ct-facebook svg {

    fill:currentColor;

    stroke:none;

}


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

@media (max-width:1100px) {

    .ct-footer-inner {

        padding-left:35px;

        padding-right:35px;

    }


    .ct-footer-logo-area {

        margin-right:25px;

    }


    .ct-footer-right {

        width:320px;

    }


    .ct-footer-info p {

        font-size:10px;

    }


    .ct-footer-nav {

        gap:8px;

    }


    .ct-footer-nav a {

        font-size:10px;

    }

}


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

@media (max-width:900px) {

    .ct-footer-inner {

        min-height:150px;

        display:grid;

        grid-template-columns:auto 1fr;

        column-gap:25px;

        row-gap:15px;

        padding:25px 30px;

    }


    .ct-footer-logo-area {

        grid-column:1;

        grid-row:1;

        margin-right:0;

    }


    .ct-footer-info {

        grid-column:2;

        grid-row:1;

    }


    .ct-footer-right {

        grid-column:1 / -1;

        grid-row:2;

        width:100%;

        flex-direction:row;

        align-items:center;

        padding:0;

    }


    .ct-footer-social {

        margin-left:auto;

    }

}


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

@media (max-width:650px) {

    .ct-footer-inner {

        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

        min-height:auto;

        padding:38px 20px 32px;

    }


    /* LOGO */

    .ct-footer-logo-area {

        margin:0 0 22px;

    }


    .ct-footer-logo {

        justify-content:center;

    }


    .ct-footer-logo-icon {

        width:35px;

        height:35px;

    }


    .ct-footer-logo-icon svg {

        width:35px;

        height:35px;

    }


    .ct-footer-logo-text strong {

        font-size:17px;

    }


    .ct-footer-logo-text small {

        font-size:7px;

    }


    /* INFO */

    .ct-footer-info {

        width:100%;

    }


    .ct-footer-info p {

        white-space:normal;

        font-size:11px;

        line-height:1.9;

    }


    .ct-footer-info p i {

        display:none;

    }


    .ct-footer-info .ct-footer-copy {

        margin-top:7px;

        font-size:9px;

        line-height:1.5;

    }


    /* RIGHT */

    .ct-footer-right {

        width:100%;

        margin-top:22px;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:19px;

    }


    /* NAV */

    .ct-footer-nav {

        justify-content:center;

        flex-wrap:wrap;

        gap:8px;

    }


    .ct-footer-nav a {

        font-size:10px;

    }


    .ct-footer-nav span {

        font-size:8px;

    }


    /* SOCIAL */

    .ct-footer-social {

        margin-left:0;

        gap:9px;

    }


    .ct-social {

        width:31px;

        height:31px;

    }


    .ct-social svg {

        width:16px;

        height:16px;

    }

}


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

@media (max-width:400px) {

    .ct-footer-inner {

        padding-left:15px;

        padding-right:15px;

    }


    .ct-footer-info p {

        font-size:10px;

    }


    .ct-footer-info .ct-footer-copy {

        font-size:8px;

    }


    .ct-footer-nav a {

        font-size:9px;

    }

}


/* TOP BUTTON */
/* =========================================
   TOP BUTTON
========================================= */
.top-btn {
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.top-btn.show {
    opacity: 1;
    visibility: visible;
}

.top-btn {
    position: fixed;
    right: 28px;
    bottom: 28px;

    width: 52px;
    height: 52px;

    padding: 0;
    margin: 0;

    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 50%;

    background: rgba(35, 24, 18, 0.88);

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 9999;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.35),
        inset 0 0 0 1px rgba(255,255,255,0.05);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* 화살표 */
.top-arrow {
    display: block;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 300;

    line-height: 1;

    transform: translateY(-1px);

    transition: transform 0.3s ease;
}


/* 마우스 올렸을 때 */
.top-btn:hover {
    background: #3a2518;

    border-color: rgba(255,255,255,0.9);

    transform: translateY(-5px);

    box-shadow:
        0 12px 30px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.05);
}


.top-btn:hover .top-arrow {
    transform: translateY(-4px);
}


/* 클릭 */
.top-btn:active {
    transform: translateY(-2px) scale(0.96);
}


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

@media (max-width: 768px) {

    .top-btn {
        right: 18px;
        bottom: 18px;

        width: 46px;
        height: 46px;
    }

    .top-arrow {
        font-size: 10px;
    }
}


/* 아주 작은 모바일 */
@media (max-width: 480px) {

    .top-btn {
        right: 15px;
        bottom: 15px;

        width: 44px;
        height: 44px;
    }

    .top-arrow {
        font-size: 12px;
    }
}