@charset "UTF-8";

/* ============================================================
   모바일 공통 — GNB(Global Navigation Bar) 모바일 디자인
   ------------------------------------------------------------
   2026-05-28 신규 디자인 적용본 (gnb_20260528.css 모바일 블록 편입)
   - 옛 햄버거 메뉴(.hamburger-btn / .menu-overlay / #header-menu fixed right) 제거
   - 신규 햄버거(.gnb-toggle) / 백드롭(.gnb-backdrop) / 좌측 슬라이드 패널(#gnb .menu.is-open) 적용
   - 옛 [data-type="left"] { display:none } 규칙 제거 (좌측메뉴 자식이 메가패널에 표시되도록)
   ============================================================ */

/* ============================================================
   1024px 이하 — 햄버거 모바일 모드
   ============================================================ */
@media (max-width:1024px){
  html{ transform:none !important; }
  #wrapper{ min-width:0 !important; overflow-x:hidden; }
  body{ overflow-x:hidden; }

  #gnb{
    min-width:0 !important;
    width:100% !important;
    height:64px !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
    position:sticky;
    top:0;
  }
  .gnb-wrap{
    padding:0 16px !important;
    flex-wrap:nowrap !important;
    max-width:100% !important;
  }
  #gnb .logo-box h1{ font-size:17px; }
  #gnb .logo-box .gnb-logo-new .logo-pc{ display:none; }
  #gnb .logo-box .gnb-logo-new .logo-mo{ display:block; height:17px !important; width:auto; }

  /* 로고를 가운데 정렬 — 햄버거가 좌측이므로 .logo-box를 절대 중앙 */
  .gnb-wrap{ position:relative; justify-content:center !important; }
  #gnb .logo-box{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    margin:0;
    width:auto !important;
    pointer-events:auto;
  }
  #gnb .logo-box .gnb-logo-new,
  #gnb .logo-box #logo{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:auto !important;
  }

  .gnb-toggle{
    display:block !important;
    position:fixed;
    left:8px;
    top:10px; /* GNB 64px 안에서 (64-44)/2 = 10 */
    width:44px;
    height:44px;
    background:none;
    border:0;
    cursor:pointer;
    margin:0;
    padding:0;
    z-index:1002;
    transition:left .3s ease;
  }
  .gnb-toggle span,
  .gnb-toggle span::before,
  .gnb-toggle span::after{
    display:block;
    position:absolute;
    left:50%;
    width:24px;
    height:2px;
    background:#272f3c;
    transform:translateX(-50%);
    transition:transform .25s ease, top .25s ease, opacity .2s ease, background .2s ease;
  }
  .gnb-toggle span{ top:50%; margin-top:-1px; }
  .gnb-toggle span::before{ content:""; top:-8px; }
  .gnb-toggle span::after{ content:""; top:8px; }
  .gnb-toggle.is-open span{ background:transparent; }
  .gnb-toggle.is-open span::before,
  .gnb-toggle.is-open span::after{
    background:#a0a6b1 !important;
  }
  .gnb-toggle.is-open span::before{ top:0; transform:translateX(-50%) rotate(45deg); }
  .gnb-toggle.is-open span::after{ top:0; transform:translateX(-50%) rotate(-45deg); }

  /* 모바일 메뉴 — 좌측 슬라이드 패널 */
  #gnb .menu{
    position:fixed !important;
    top:0;
    left:0;
    right:auto;
    bottom:0;
    width:90% !important;
    max-width:420px;
    height:100vh !important;
    height:100dvh !important;
    background:#fff;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    overflow-y:auto;
    padding:80px 12px 120px;
    gap:0;
    transform:translateX(-100%);
    transition:transform .3s ease;
    z-index:998;
    box-shadow:8px 0 30px rgba(0,0,0,.08);
    box-sizing:border-box;
  }
  /* 메뉴 상단 로고 영역 */
  #gnb .menu::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:min(90vw, 420px);
    height:60px;
    background:#fff url("/images/main/gnb_logo_m.png") no-repeat 16px center;
    background-size:auto 17px;
    border-bottom:1px solid #eef0f3;
    z-index:999;
    transform:translateX(-100%);
    transition:transform .3s ease;
    pointer-events:none;
    box-sizing:border-box;
  }
  #gnb .menu.is-open{ transform:translateX(0); }
  #gnb .menu.is-open::before{ transform:translateX(0); }

  #gnb .menu > li{
    margin:0 !important;
    text-align:left !important;
    border-bottom:1px solid #f1f3f6 !important;
    width:100%;
  }
  #gnb .menu > li:last-child{ border-bottom:0 !important; }
  #gnb .menu > li > a{
    display:flex !important;
    align-items:center;
    padding:20px 18px !important;
    height:auto !important;
    font-size:17px !important;
    border-radius:0 !important;
    background:none !important;
    color:#5d636c !important;
    font-weight:var(--fontweight-regular) !important;
  }
  #gnb .menu > li > a::before{
    width:20px !important;
    height:20px !important;
    margin-right:12px !important;
    vertical-align:middle !important;
    opacity:.85;
  }
  /* 실제 <img> 아이콘 크기 강제 — 원본 사이즈가 제각각이라 작은 기준(20px)으로 통일 */
  #gnb .menu > li > a img{
    width:20px !important;
    height:20px !important;
    object-fit:contain !important;
    margin-right:12px !important;
    flex-shrink:0;
  }
  #gnb .menu > li > a.active,
  #gnb .menu > li > a:hover,
  #gnb .menu > li.is-open > a{
    color:#E6007E !important;
    background:#FFF8FB !important;
    font-weight:var(--fontweight-medium) !important;
  }
  #gnb .menu > li > a.active:before,
  #gnb .menu > li > a:hover:before,
  #gnb .menu > li.is-open > a:before{
    -webkit-filter:none !important;
    filter:none !important;
    opacity:1;
  }

  /* 모바일: 햄버거는 GNB 좌측 고정 (기본 위치는 위에서 잡음) */
  /* 메뉴 열린 상태에서만 X 모양 + 메뉴 우측 상단으로 이동 */
  body.menu-open .gnb-toggle{
    left:min(calc(90vw - 52px), 368px) !important;
  }

  /* 메뉴 열렸을 때 body 스크롤 방지 */
  body.menu-open{
    overflow:hidden;
  }

  /* 모바일 날씨 — 메뉴 하단 고정 + 메뉴와 동일한 슬라이드 인/아웃 + 20% 축소 */
  #gnb .weather{
    display:flex !important;
    position:fixed !important;
    left:0 !important;
    right:auto !important;
    top:auto !important;
    bottom:0 !important;
    width:90% !important;
    max-width:420px !important;
    height:auto !important;
    padding:14px 18px !important;
    margin:0 !important;
    border-top:1px solid #eef0f3 !important;
    background:#fff !important;
    z-index:1001 !important;
    box-sizing:border-box !important;
    align-items:center !important;
    gap:10px !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    transform:translateX(-100%);
    transition:transform .3s ease;
    visibility:hidden;
  }
  body.menu-open #gnb .weather{
    transform:translateX(0);
    visibility:visible;
  }
  #gnb .weather img{ width:37px !important; }
  #gnb .weather .temper-text-mo{ gap:3px !important; }
  #gnb .weather .temper-text-mo .temp-mo{ font-size:19px !important; }
  #gnb .weather .temper-text-mo .temp-mo i{ font-size:17px !important; }
  #gnb .weather .temper-text-mo .minmax{ font-size:11px !important; }

  #gnb .menu > li.has-mega > a::after{
    content:"";
    display:inline-block;
    width:9px;
    height:9px;
    margin-left:auto;
    border-right:2px solid #a0a6b1;
    border-bottom:2px solid #a0a6b1;
    transform:rotate(45deg);
    transition:transform .2s ease;
  }
  #gnb .menu > li.has-mega.is-open > a::after{
    transform:rotate(-135deg);
  }

  /* :focus/:focus-visible 검은 사각 outline 제거 (X 버튼, 메뉴 항목 클릭 시 자국) */
  #gnb .gnb-toggle:focus,
  #gnb .gnb-toggle:focus-visible,
  #gnb .menu a:focus,
  #gnb .menu a:focus-visible,
  #gnb .menu button:focus,
  #gnb .menu button:focus-visible{
    outline:none !important;
  }

  .mega-panel{
    position:static !important;
    width:100% !important;
    max-height:0;
    padding:0 20px !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    overflow:hidden;
    background:#f7f8fa !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transition:max-height .3s ease, padding .3s ease;
    top:auto;
    min-height:0 !important;
  }
  #gnb .menu > li.has-mega.is-open .mega-panel{
    max-height:2000px;
    padding:8px 20px 16px !important;
  }
  .mega-inner{
    display:block !important;
    padding:0 !important;
    gap:0 !important;
    min-height:0 !important;
  }
  .mega-title{
    position:static !important;
    width:auto !important;
    font-size:14px !important;
    color:#7a8190 !important;
    margin:8px 0 4px !important;
    font-weight:var(--fontweight-medium) !important;
    padding-top:0 !important;
  }
  .mega-title small{ display:none !important; }

  .mega-col{
    margin-top:10px;
    max-width:none !important;
  }
  .mega-col > .l2-link{
    font-size:15px !important;
    padding:10px 12px !important;
    margin:0 0 4px !important;
    border:0 !important;
    border-radius:8px !important;
    background:none !important;
    box-shadow:none !important;
    color:#272f3c !important;
    text-align:left !important;
    display:block !important;
    font-weight:var(--fontweight-medium) !important;
  }
  .mega-col > .l2-link::before,
  .mega-col > .l2-link::after{ display:none !important; }
  .mega-col > .l2-link:hover,
  .mega-col > .l2-link.is-active{
    background:#E6007E !important;
    color:#fff !important;
  }
  .mega-col .l3-list{
    padding:4px 0 4px 16px !important;
    margin:0 0 8px 18px !important;
    border-left:2px solid #e7e9ee !important;
    background:none !important;
    border-radius:0 !important;
    max-height:none !important;
    overflow:visible !important;
    gap:2px !important;
    display:flex !important;
    flex-direction:column !important;
  }
  /* 모바일은 좌측정렬 (common.css 데스크탑의 center 정렬 override) */
  .mega-col .l3-list li{
    text-align:left !important;
  }
  .mega-col .l3-list li a{
    padding:6px 0 !important;
    font-size:13px !important;
    color:#5d636c !important;
    text-align:left !important;
  }

  .gnb-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    z-index:997;
  }
  .gnb-backdrop.is-open{ display:block; }
}

@media (max-width:640px){
  #gnb .logo-box .gnb-logo-new .logo-mo{ height:15px !important; }
  .gnb-wrap{ padding:0 12px !important; }
}