/* ==========================================================================
   지아 공용 사이트 크롬 — GNB · 푸터 · TOP 버튼
   전 페이지 공용. 이 파일만 고치면 사이트 전역에 반영됩니다.
   ========================================================================== */

:root{

  --ul-ink:#1F1B1B;        /* 최심층 다크 */
  --ul-ink-2:#31302D;      /* 드롭다운 그라데이션 상단 */
  --ul-sidebar:#444542;    /* 모바일 사이드바 */
  --ul-stone:#6F6D69;      /* 서브메뉴 카드 */
  --ul-sub:#ADADAD;        /* 서브 텍스트 */
  --ul-cream:#FFFEF8;      /* 크림 배경 (섹션 배경 1) */
  --ul-cream-2:#FFFAE2;    /* 진한 크림 (섹션 배경 2) */
  --ul-taupe:#968067;      /* 브랜드 토프 */
  --ul-brown:#71543E;      /* 딥 브라운 */
  --ul-line:#E5E1DB;       /* 크림 위 보더 */
  --ul-accent:#FF8133;     /* 포인트 오렌지 */
  --nav-h:5.2083333333vw;  /* 1920 기준 100px */
}

/* 고정 헤더용 상단 여백 — 히어로가 헤더를 덮는 페이지는 body{padding-top:0} 으로 덮어씀 */
body{padding-top:var(--nav-h)}
/* 히어로가 헤더를 덮는 페이지 — 본문이 헤더 아래에서 시작하지 않고 겹친다 */
body.hero-top{padding-top:0}

/* ===== NAV (유라인 GNB 스타일) ===== */
#header .header{position:fixed;left:0;top:0;width:100%;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.55);padding:0 3.125vw;transition:background .6s;z-index:100}
#header .header.on{background:transparent}
#header .header .header-wrap{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}
#header .header .header-wrap .headerBox{display:flex;align-items:center;height:100%}

#header .header .header-wrap .logo{margin-right:4.1666666667vw;z-index:100}
#header .header .header-wrap .logo a{display:flex;align-items:center;height:2.0833333333vw}
#header .header .header-wrap .logo img{height:100%;width:auto;display:block}

#header .header .header-wrap .menu{display:flex;align-items:center;opacity:1;transition:opacity .6s;height:100%}
#header .header .header-wrap .menu.off{opacity:0;pointer-events:none}
#header .header .header-wrap .menu li{height:100%;position:relative}
#header .header .header-wrap .menu li:not(:last-child){margin-right:2.5vw}
#header .header .header-wrap .menu li a{height:100%;font-size:.9375vw;font-weight:500;color:#fff;display:flex;align-items:center;white-space:nowrap}
#header .header .header-wrap .menu li.is-active > a{position:relative}
#header .header .header-wrap .menu li.is-active > a::after{position:absolute;content:"";left:0;right:0;bottom:1.3vw;height:1px;background:#fff}

#header .header .header-wrap .menu li .sub_menu{border-radius:8px;position:absolute;top:100%;left:50%;transform:translateX(-50%);width:8.90625vw;display:none;overflow:hidden;padding-top:0}
#header .header .header-wrap .menu li:hover .sub_menu{display:block}
#header .header .header-wrap .menu li .sub_menu ul{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;padding:28px 0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(.9375vw);backdrop-filter:blur(.9375vw);border-radius:8px;margin-top:12px}
#header .header .header-wrap .menu li .sub_menu ul li{margin-right:0;height:auto}
#header .header .header-wrap .menu li .sub_menu ul li:not(:last-child){margin-bottom:1.0416666667vw}
#header .header .header-wrap .menu li .sub_menu ul li a{font-size:.8333333333vw;font-weight:500;color:var(--ul-sub);display:block;height:auto}
#header .header .header-wrap .menu li .sub_menu ul li a:hover{color:#fff}

#header .header .header-wrap .info{display:flex;align-items:center;z-index:100}
#header .header .header-wrap .info .btn_group{display:flex;align-items:center}
#header .header .header-wrap .info .btn_group a{font-size:1.0416666667vw;font-weight:400;color:#fff;display:inline-block;line-height:1}
#header .header .header-wrap .info .btn_group a:not(:last-child){position:relative;margin-right:.7291666667vw;padding-right:.7291666667vw}
#header .header .header-wrap .info .btn_group a:not(:last-child)::after{position:absolute;content:"";right:0;top:50%;transform:translateY(-50%);background:#fff;opacity:.3;width:1px;height:.5208333333vw}

/* 전체메뉴 드롭다운 */
#header .dropdown_menu{width:100%;height:0;-webkit-backdrop-filter:blur(.9375vw);backdrop-filter:blur(.9375vw);background-image:linear-gradient(to bottom,var(--ul-ink-2),var(--ul-ink));position:fixed;left:0;top:0;transition:all .6s;opacity:0;overflow:hidden;z-index:99}
#header .dropdown_menu.on{height:28vw;opacity:1}
#header .dropdown_menu .drop_wrap{display:flex;align-items:flex-start;justify-content:space-between;padding:6.7708333333vw 3.125vw 0}
#header .dropdown_menu .drop_wrap .nav_wrap{width:74.1666666667vw}
#header .dropdown_menu .drop_wrap .nav_wrap > div{display:flex;align-items:flex-start;flex-wrap:wrap;justify-content:flex-start;gap:0 3.6vw;width:100%}
#header .dropdown_menu .drop_wrap .nav_wrap .nav_box{width:12.4479166667vw}
#header .dropdown_menu .drop_wrap .nav_wrap .nav_box li.nav_title{font-size:.9375vw;font-weight:600;color:#fff;padding-bottom:.6770833333vw;margin-bottom:.7291666667vw;border-bottom:1px solid rgba(255,255,255,.14)}
#header .dropdown_menu .drop_wrap .nav_wrap .nav_box li.nav_menu a{font-size:.8333333333vw;font-weight:500;color:var(--ul-sub);display:block;padding:.28vw 0}
#header .dropdown_menu .drop_wrap .nav_wrap .nav_box li.nav_menu a:hover{color:#fff}
#header .dropdown_menu .drop_wrap .banner_wrap{width:16.4583333333vw}
#header .dropdown_menu .drop_wrap .banner_wrap a{height:4.5833333333vw;display:block;position:relative;background:var(--ul-taupe);border-radius:8px;overflow:hidden}
#header .dropdown_menu .drop_wrap .banner_wrap a:not(:last-child){margin-bottom:.5208333333vw}
#header .dropdown_menu .drop_wrap .banner_wrap a .text{position:absolute;top:50%;transform:translateY(-50%);left:1.4583333333vw;color:#fff}
#header .dropdown_menu .drop_wrap .banner_wrap a .text p{font-size:.8854166667vw;line-height:1.4;font-weight:400}
#header .dropdown_menu .drop_wrap .banner_wrap a .text p b{font-weight:600}

/* 모바일 헤더 · 사이드바 */
.mo_header{display:none}
.side_bar{display:none}
.side_dim{display:none}
/* ===== FOOTER — 유라인 푸터 스타일 ===== */
#footer{background:var(--ul-cream);border-top:1px solid var(--ul-line);padding:1.5625vw 3.125vw 1.1979166667vw 6.25vw;z-index:98;position:relative}
#footer .inner{display:grid;grid-template-columns:auto 1fr;column-gap:5.5729166667vw;align-items:start}
#footer .inner .cont{display:contents}
#footer .inner .logo{grid-column:1;grid-row:2}
#footer .inner .cont .top{grid-column:2;grid-row:1}
#footer .inner .cont .info{grid-column:2;grid-row:2}
#footer .inner .logo{width:5.7291666667vw}
#footer .inner .logo a{display:block}
#footer .inner .logo img{width:100%;height:auto;display:block;filter:brightness(0)}

#footer .inner .cont .top{display:flex;align-items:center;padding-bottom:1.0416666667vw;border-bottom:1px solid var(--ul-line);margin-bottom:1.71875vw}
#footer .inner .cont .top a{font-size:.7291666667vw;font-weight:500;color:#4A453F}
#footer .inner .cont .top a:not(:last-child){margin-right:2.0833333333vw}
#footer .inner .cont .info{display:flex;align-items:flex-start}
#footer .inner .cont .info > div{width:100%}
#footer .inner .cont .info > div.left{width:18.2291666667vw;flex-shrink:0}
#footer .inner .cont .info > div > div{display:flex}
#footer .inner .cont .info > div > div:not(:last-child){margin-bottom:.5208333333vw}
#footer .inner .cont .info > div > div > p{font-size:.6770833333vw;font-weight:600;color:var(--ul-ink);margin-right:.5208333333vw;flex-shrink:0}
#footer .inner .cont .info > div > div span{font-size:.6770833333vw;font-weight:400;color:#6B6660}
#footer .inner .cont .info > div > div span a{color:#6B6660}
#footer .inner .cont .info > div .copy{margin-top:1.71875vw;justify-content:space-between;align-items:center}
#footer .inner .cont .info > div .copy p{font-size:.7291666667vw;font-weight:500;color:#736E66;margin-right:0}
#footer .inner .cont .info > div .copy .sns a{font-size:.6770833333vw;font-weight:500;color:var(--ul-ink)}
#footer .inner .cont .info > div .copy .sns a:not(:first-child){margin-left:1.5625vw}
.mo_footer{display:none}
/* TOP */
.top-btn{position:fixed;right:24px;bottom:32px;z-index:90;width:48px;height:48px;border-radius:50%;background:var(--text-black);color:#FFF;display:none;align-items:center;justify-content:center}
.top-btn.is-show{display:flex}
.top-btn svg{width:20px;height:20px}

/* ===== 모바일 GNB (유라인 사이드바 스타일) ===== */
@media screen and (max-width:900px){
  body{padding-top:16vw}
  body.hero-top{padding-top:0}
  #header .header{display:none !important}
  #header .dropdown_menu{display:none !important}
  .mo_header{position:fixed;left:0;top:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 5.3333333333vw;height:16vw;background:rgba(0,0,0,.55);z-index:200;transition:background .4s}
  .mo_header.on{background:transparent}
  .mo_header h1 > a{display:flex;align-items:center;height:calc(100vw * (30/375))}
  .mo_header h1 img{height:100%;width:auto;display:block}
  .mo_header .mo_icon{display:flex;align-items:center;gap:5.3333333333vw}
  .mo_header .mo_icon a,.mo_header .mo_icon button{width:6.4vw;height:6.4vw;color:#fff;display:flex;align-items:center;justify-content:center}
  .mo_header .mo_icon svg{width:100%;height:100%}

  .side_dim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s;z-index:201}
  .side_dim.active{opacity:1;visibility:visible}

  .side_bar{position:fixed;width:86%;max-width:420px;height:100%;top:0;left:0;transform:translateX(-100%);transition:transform .3s;background:var(--ul-sidebar);z-index:202;padding:5.3333333333vw 5.3333333333vw 29.3333333333vw;display:block;overflow:hidden}
  .side_bar.active{transform:translateX(0)}
  .side_bar .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14.9333333333vw}
  .side_bar .top .info{display:flex;align-items:center}
  .side_bar .top .info a{font-size:4.8vw;color:#fff}
  .side_bar .top .info a:first-child{margin-right:5.3333333333vw;padding-right:5.3333333333vw;position:relative}
  .side_bar .top .info a:first-child::after{position:absolute;content:"";width:1px;height:3.2vw;background:#fff;opacity:.3;right:0;top:50%;transform:translateY(-50%)}
  .side_bar .top .icon{display:flex;align-items:center}
  .side_bar .top .icon button{width:6.4vw;height:6.4vw;color:#fff;display:flex;align-items:center;justify-content:center}
  .side_bar .top .icon button svg{width:100%;height:100%}
  .side_bar #mo_nav{overflow-y:auto;height:100%}
  .side_bar #mo_nav ul.menu:not(:last-child){margin-bottom:9.8666666667vw}
  .side_bar #mo_nav ul.menu li{position:relative;width:100%}
  .side_bar #mo_nav ul.menu li.active > a,.side_bar #mo_nav ul.menu li.active > button{color:#fff}
  .side_bar #mo_nav ul.menu li.active .arrow{transform:rotate(180deg)}
  .side_bar #mo_nav ul.menu li > a,.side_bar #mo_nav ul.menu li > button{font-size:4.2666666667vw;color:var(--ul-sub);display:flex;align-items:center;width:100%;text-align:left;padding:0;font-family:inherit}
  .side_bar #mo_nav ul.menu li .arrow{width:5.3333333333vw;height:5.3333333333vw;position:absolute;right:0;top:0;transition:transform .3s;color:var(--ul-sub);pointer-events:none}
  .side_bar #mo_nav ul.menu li .arrow svg{width:100%;height:100%}
  .side_bar #mo_nav ul.menu li .sub{display:none;margin-top:7.4666666667vw;margin-left:5.6vw}
  .side_bar #mo_nav ul.menu li.active .sub{display:block}
  .side_bar #mo_nav ul.menu li .sub li:not(:last-child){margin-bottom:6.4vw}
  .side_bar #mo_nav ul.menu li .sub li a{color:#fff;font-size:4vw}
}

@media screen and (max-width:900px){
  #footer{padding:10.6666666667vw 5.3333333333vw;z-index:49}
  #footer .inner{display:none}
  #footer .mo_footer{display:block}
  #footer .mo_footer h1{margin-bottom:10.6666666667vw}
  #footer .mo_footer h1 a{width:23.4666666667vw;display:block}
  #footer .mo_footer h1 img{width:100%;height:auto;display:block;filter:brightness(0)}
  #footer .mo_footer .info{padding-bottom:8.5333333333vw;border-bottom:1px solid var(--ul-line)}
  #footer .mo_footer .info div{display:flex;align-items:center}
  #footer .mo_footer .info div:first-child{margin-bottom:4.2666666667vw}
  #footer .mo_footer .info div a{font-size:3.7333333333vw;font-weight:500;color:#4A453F}
  #footer .mo_footer .info div a:first-child{margin-right:4.2666666667vw;padding-right:4.2666666667vw;position:relative}
  #footer .mo_footer .info div a:first-child::after{position:absolute;content:"";width:1px;height:2.6666666667vw;top:50%;transform:translateY(-50%);right:0;background:#C6C2BA}
  #footer .mo_footer .adress{padding-top:8.5333333333vw;margin-bottom:10.6666666667vw}
  #footer .mo_footer .adress div{display:flex;align-items:center}
  #footer .mo_footer .adress div:not(:last-child){margin-bottom:2.4vw}
  #footer .mo_footer .adress div p{font-size:3.2vw;font-weight:600;color:var(--ul-ink);margin-right:2.1333333333vw;flex-shrink:0}
  #footer .mo_footer .adress div span{font-size:3.2vw;color:#6B6660}
  #footer .mo_footer .adress div span a{color:#6B6660}
  #footer .mo_footer .adress .copy{font-size:3.4666666667vw;font-weight:500;color:#736E66;margin-top:6.4vw}
  #footer .mo_footer .sns{display:flex;flex-wrap:wrap;width:80%}
  #footer .mo_footer .sns a{font-size:3.7333333333vw;font-weight:500;color:var(--ul-ink);margin-right:8vw;margin-bottom:5.3333333333vw}
}

/* ==========================================================================
   밝은 배경 페이지 (Store · 블로그 하위 · 고객센터 하위)
   - 페이지 배경을 크림으로 통일
   - 최상단에서는 GNB 배경 투명 + 로고/메뉴/유틸을 검정으로
   - 스크롤하면 기존 다크 반투명 바로 복귀
   ========================================================================== */
body.gnb-light{background:var(--ul-cream)}
body.gnb-light .section,
body.gnb-light .page-head,
body.gnb-light .bg-light{background:var(--ul-cream)}
body.gnb-light .page-head{border-bottom:1px solid var(--ul-line)}

/* 최상단: 투명 배경 + 검정 요소 */
body.gnb-light #header .header.on{background:transparent}
body.gnb-light #header .header.on .logo img{filter:brightness(0)}
body.gnb-light #header .header.on .menu li a,
body.gnb-light #header .header.on .menu li a.signature p,
body.gnb-light #header .header.on .info .btn_group a{color:#000}
body.gnb-light #header .header.on .info .btn_group a:not(:last-child)::after{background:#000;opacity:.25}
body.gnb-light #header .header.on .menu li.is-active > a::after{background:#000}

/* 모바일 헤더도 동일 처리 */
body.gnb-light .mo_header.on{background:transparent}
body.gnb-light .mo_header.on h1 img{filter:brightness(0)}
body.gnb-light .mo_header.on .mo_icon a,
body.gnb-light .mo_header.on .mo_icon button{color:#000}

/* 뉴스레터 카드 — 라운딩 제거 */
.post-card{border-radius:0}
.post-body .tag{border-radius:0}