/* =========================================================
   menu_merged_clean_responsive.css
   노트북 / 태블릿 / 모바일 안정형
========================================================= */

/* anchor 이동 시 상단바 높이만큼 여백 */
html{
  scroll-behavior: smooth;
  scroll-padding-top: 115px;
}

/* 기본 박스 */
*,
*::before,
*::after{
  box-sizing: border-box;
}

/* -------------------- TOP AREA -------------------- */
#toparea{
  width:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  height:100px;
  background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,0.08);
}

/* 로고 */
#logo{
  position:absolute;
  left:clamp(16px, 3vw, 30px);
  top:50%;
  transform:translateY(-50%);
  z-index:10001;
  margin-left:0 !important;
}

#logo img{
  display:block;
  width:auto;
  height:clamp(56px, 7vw, 100px);
  max-width:min(260px, 28vw);
}

/* 공통 */
.gnb{
  background:transparent;
}
.gnb li{
  list-style:none !important;
}

/* -------------------- PC MENU -------------------- */
@media (min-width:1024px){

  .gnb{
    height:100px;
    display:flex;
    align-items:center;
    width:100%;
  }

  .gnb > ul{
    width:100% !important;
    height:100px;
    margin:0;
    padding-left:clamp(180px, 24vw, 360px) !important;  /* 로고 자리 확보 */
    padding-right:clamp(20px, 3vw, 40px) !important;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:nowrap;
    gap:clamp(2px, 0.6vw, 10px);
    border-bottom:2px solid #000;
    box-sizing:border-box;
    overflow:hidden;
  }

  .gnb .menu{
    float:none !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 1 auto;
    min-width:0;
  }

  /* 기존 강제 밀기 제거 */
  .gnb .menu:first-child{
    margin-left:0 !important;
  }

  .gnb .menu:last-child{
    margin-right:0 !important;
  }

  /* 글씨 크기 */
  .gnb .depth1{
    font-size:clamp(14px, 1.15vw, 20px) !important;
    line-height:normal !important;
  }

  .gnb .depth1 a{
    color:#111 !important;
    font-family:'Pretendard', sans-serif;
    font-weight:900 !important;
    letter-spacing:-0.2px !important;

    display:flex;
    align-items:center;
    justify-content:center;
    height:100px;
    padding:0 clamp(6px, 0.9vw, 14px) !important;

    white-space:nowrap;
    text-decoration:none;
    text-shadow:none !important;
    transform:none !important;
    transition:color .2s ease, opacity .2s ease !important;

    position:relative;
  }

  .gnb .depth1 a:hover{
    color:#888 !important;
    opacity:1 !important;
  }

  /* 밑줄 */
  .gnb .depth1 a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:18px;
    height:2px;
    background:rgba(255,255,255,.75);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .2s ease, opacity .2s ease;
    opacity:0;
  }

  .gnb .depth1 a:hover::after{
    transform:scaleX(1);
    opacity:.8;
  }

  /* 기존 장식 제거 */
  .gnb .menu::after,
  .gnb .depth1::after{
    display:none !important;
    content:none !important;
  }
}

/* -------------------- 노트북 대응 -------------------- */
@media (min-width:1024px) and (max-width:1400px){

  #toparea{
    height:90px;
  }

  .gnb{
    height:90px;
  }

  .gnb > ul{
    height:90px;
    padding-left:clamp(150px, 21vw, 280px) !important;
    padding-right:20px !important;
    gap:2px;
  }

  .gnb .depth1 a{
    height:90px;
    padding:0 8px !important;
  }

  .gnb .depth1{
    font-size:clamp(13px, 1vw, 17px) !important;
  }

  #logo img{
    height:clamp(52px, 5vw, 82px);
    max-width:min(220px, 22vw);
  }
}

/* -------------------- 작은 노트북 대응 -------------------- */
@media (min-width:1024px) and (max-width:1180px){

  .gnb > ul{
    padding-left:150px !important;
    padding-right:14px !important;
  }

  .gnb .depth1{
    font-size:13px !important;
  }

  .gnb .depth1 a{
    padding:0 6px !important;
    letter-spacing:-0.4px !important;
  }

  #logo img{
    height:58px;
    max-width:180px;
  }
}

/* -------------------- MOBILE -------------------- */
.button_container{
  display:none;
}

@media (max-width:1023px){

  #toparea{
    height:80px;
  }

  #logo{
    left:16px;
    top:50%;
    transform:translateY(-50%);
  }

  #logo img{
    height:56px;
    max-width:180px;
  }

  .gnb{
    display:none;
  }

  .button_container{
    display:block;
    position:absolute;
    top:26px;
    right:20px;
    height:27px;
    width:35px;
    cursor:pointer;
    z-index:100;
    transition:opacity .25s ease;
  }

  .button_container:hover{
    opacity:0.7;
  }

  .button_container div.txt{
    display:none;
    position:absolute;
    top:-2px;
    right:47px;
    font-size:22px;
    color:#999;
    letter-spacing:0;
    font-weight:normal;
  }

  .button_container.active div.txt{
    color:#fff;
  }

  .button_container span{
    background:#111;
    border:none;
    height:4px;
    width:100%;
    position:absolute;
    left:0;
    top:0;
    transition:all .35s ease;
  }

  .button_container span:nth-of-type(2){
    top:11px;
  }

  .button_container span:nth-of-type(3){
    top:22px;
  }

  .button_container.active .top{
    transform:translateY(11px) rotate(45deg);
    background:#fff;
  }

  .button_container.active .middle{
    opacity:0;
    background:#fff;
  }

  .button_container.active .bottom{
    transform:translateY(-11px) rotate(-45deg);
    background:#fff;
  }

  /* 모바일 전체 메뉴 오버레이 */
  .open{
    position:absolute;
    top:0;
    left:0;
    z-index:99;
    width:100%;
    min-height:100vh;
    padding:110px 20px 35px;
    box-sizing:border-box;

    font-size:25px;
    text-align:center;

    display:block !important;
    opacity:.97;
    visibility:visible;

    overflow-x:hidden;
    background:linear-gradient(180deg,#1b1b2f,#2e1f47);
    transition:opacity .35s, visibility .35s, height .35s;
  }

  .open ul{
    list-style:none;
    padding:0 0 20px 0;
    margin:0 auto;
    display:block;
    position:relative;
    width:100%;
    max-width:420px;
  }

  .open ul li{
    display:block;
    position:relative;
  }

  .open ul li a{
    color:rgba(255,255,255,.92);
    display:block;
    position:relative;
    text-decoration:none;
    overflow:hidden;
    transition:color .2s ease, opacity .2s ease;
    padding:10px 0;
  }

  .open ul li a:hover{
    color:rgba(255,255,255,.70);
  }

  .open ul li ul{
    padding-top:10px;
  }

  .open ul li ul li a{
    font-size:17px;
    line-height:33px;
    color:#fff;
  }
}