@charset "utf-8";

/* =========================================================
    WRAPPER
========================================================= */
#wrapper{display:flex;flex-direction:column;min-height:100vh;}
#container{flex:1;min-width:0;}


/* =========================================================
    TOP BANNER (띠배너)
========================================================= */
.top-banner{position:relative;background:var(--static-1);color:var(--color-white);}
.top-banner .inner{display:flex;align-items:center;justify-content:center;column-gap:var(--space-16);height:50px;}
.top-banner-icon{width:32px;height:32px;border-radius:var(--radius-8);}
.top-banner p{font-size:var(--fs-15);font-weight:500;line-height:1.4;}
.top-banner .btn{height:30px;margin-left:var(--space-40);border-color:var(--color-white);color:var(--text-1);font-size:var(--fs-11);}
.top-banner-close{position:absolute;top:50%;right:var(--space-20);display:flex;padding:6px;color:rgba(var(--color-white-rgb),.8);transform:translateY(-50%);transition:var(--transition);}
.top-banner-close:hover{color:var(--color-white);}
.top-banner.hide{display:none;}


/* =========================================================
    HEADER
========================================================= */
#header{position:sticky;top:0;background:var(--color-white);z-index:900;transition:box-shadow var(--transition);}
#header.scrolled{box-shadow:var(--shadow-1);}

.header-top{border-bottom:1px solid var(--border-1);}
.header-top .inner{display:flex;align-items:center;height:70px;}
.header-logo a{display:flex;}
.header-logo img{height:26px;width:auto;}

.header-search{position:relative;display:flex;align-items:center;width:100%;max-width:600px;height:44px;margin-left:var(--space-40);padding:0 var(--space-8) 0 var(--space-20);border:1px solid var(--border-2);border-radius:var(--radius-full);transition:border-color var(--transition);}
.header-search:focus-within{border-color:var(--border-3);}
.header-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;font-size:var(--fs-14);color:var(--text-1);outline:none;}
.header-search input::placeholder{color:var(--text-3);}
.header-search button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--text-1);}

.header-util{display:flex;align-items:center;column-gap:var(--space-16);margin-left:auto;}
.header-util .btn{height:36px;font-size:var(--fs-13);}

/* GNB */
.gnb{position:relative;}
.gnb>.inner{display:flex;align-items:center;height:60px;}
.gnb-list{display:flex;align-items:center;column-gap:var(--space-8);margin-left:var(--space-12);}
.gnb-list.right{margin-left:auto;}
.gnb-list a{display:flex;align-items:center;height:40px;padding:0 var(--space-16);font-size:var(--fs-14);font-weight:500;color:var(--text-1);transition:var(--transition);}
.gnb-list a:hover,
.gnb-list a.active{color:var(--static-1);}

/* 전체메뉴 버튼 (열림 시 메뉴닫기) */
.btn-allmenu{display:inline-flex;align-items:center;column-gap:var(--space-10);height:40px;padding:0 var(--space-18);border-radius:var(--radius-6);background:var(--static-1);font-size:var(--fs-13);font-weight:500;color:var(--color-white);transition:var(--transition);}
.btn-allmenu:hover{background:var(--static-1-hover);}
.btn-allmenu .ico-bar{position:relative;display:block;width:16px;height:12px;}
.btn-allmenu .ico-bar i{position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;background:currentColor;transition:var(--transition);}
.btn-allmenu .ico-bar i:nth-child(1){top:0;}
.btn-allmenu .ico-bar i:nth-child(2){top:50%;transform:translateY(-50%);}
.btn-allmenu .ico-bar i:nth-child(3){bottom:0;}
.btn-allmenu.active{background:var(--bg-3);}
.btn-allmenu.active .ico-bar i:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg);}
.btn-allmenu.active .ico-bar i:nth-child(2){opacity:0;}
.btn-allmenu.active .ico-bar i:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg);}

/* 전체메뉴 드롭다운 */
.allmenu{position:absolute;top:100%;left:0;right:0;background:var(--color-white);border-top:1px solid var(--border-1);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transform:translateY(-8px);transition:var(--transition);}
.allmenu.open{opacity:1;visibility:visible;transform:translateY(0);}
.allmenu .category-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4) var(--space-20);padding:var(--space-28) 0;}

/* 카테고리 리스트 (전체메뉴 · 메인 비주얼 공용) */
.category-list a{display:flex;align-items:center;column-gap:var(--space-10);height:48px;padding:0 var(--space-12);border-radius:var(--radius-8);font-size:var(--fs-15);font-weight:500;color:var(--text-1);transition:var(--transition);}
.category-list a:hover{background:var(--bg-2);color:var(--static-1);}
.category-list .ico{font-size:1.05em;line-height:1;}


/* =========================================================
    FOOTER
========================================================= */
#footer{padding:var(--space-80) 0 var(--space-100);background:var(--bg-3);color:var(--text-on-dark-2);}
#footer .inner{display:flex;column-gap:var(--space-80);row-gap:var(--space-32);}
.footer-logo{display:flex;flex-shrink:0;padding-top:2px;}
.footer-logo img{height:24px;width:auto;}
.footer-info{display:flex;flex-direction:column;row-gap:var(--space-24);}
.footer-links{display:flex;column-gap:var(--space-12);}
.footer-links a{font-size:var(--fs-14);color:var(--color-white);text-decoration:underline;text-underline-offset:3px;}
.footer-info address{display:flex;flex-direction:column;row-gap:var(--space-10);}
.footer-info address p{display:flex;flex-wrap:wrap;row-gap:4px;}
.footer-info address span{position:relative;font-size:var(--fs-14);line-height:1.6;}
.footer-info address span+span{margin-left:var(--space-12);padding-left:var(--space-12);}
.footer-info address span+span::before{position:absolute;top:50%;left:0;width:1px;height:10px;background:rgba(var(--color-white-rgb),.4);transform:translateY(-50%);content:'';}


/* =========================================================
    RESPONSIVE
========================================================= */
@media screen and (max-width: 1024px) {
    .gnb-list.right{display:none;}
    .allmenu .category-list{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media screen and (max-width: 500px) {
    .top-banner .inner{column-gap:8px;height:44px;padding-right:28px;justify-content:flex-start;}
    .top-banner-icon{width:24px;height:24px;border-radius:6px;}
    .top-banner p{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .top-banner .btn{margin-left:auto;flex-shrink:0;}
    .top-banner-close{right:6px;}

    .header-top .inner{flex-wrap:wrap;height:auto;padding:12px 0;row-gap:12px;}
    .header-logo img{height:22px;}
    .header-search{order:3;max-width:none;margin-left:0;height:42px;}
    .header-util{column-gap:8px;}
    .header-util .btn{height:32px;padding:0 10px;font-size:12px;}

    .gnb>.inner{height:52px;overflow-x:auto;scrollbar-width:none;}
    .gnb>.inner::-webkit-scrollbar{display:none;}
    .btn-allmenu{flex-shrink:0;height:36px;padding:0 12px;}
    .gnb-list{column-gap:0;margin-left:4px;}
    .gnb-list a{padding:0 10px;white-space:nowrap;font-size:14px;}
    .allmenu .category-list{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 0;}

    #footer{padding:48px 0 72px;}
    #footer .inner{flex-direction:column;}
    .footer-info address span{font-size:12px;}
    .footer-info address span+span{margin-left:8px;padding-left:8px;}
}