/* ============================================================
   gmnNav.css — 통합 상단바 단일 소스 (메인 + 전 서브페이지 공용)
   gmn-top-menu.asp 에서 로드됨. 상단바는 이 파일만 고치면 전 페이지 동시 반영.
   .nav 스코프로 작성해 기존 gmnMain2026.css / gmnCommon.css 규칙보다 항상 우선.
   최초 통합: 2026-08-09
   ============================================================ */

/* ===== 컨테이너 (가운데 캡슐 1447px / 높이 70px) ===== */
.nav{ position:absolute; top:30px; left:50%; transform:translateX(-50%); width:min(1447px,calc(100vw - 48px)); z-index:110; }
.nav .main-menu-bar{ display:flex; align-items:center; justify-content:flex-start; width:100%; height:70px; border-radius:70px;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:0 40px 0 35px; }
.nav .nav__logo{ display:flex; align-items:center; flex-shrink:0; }
.nav .nav__logo img{ height:25px; filter:brightness(0) invert(1); transition:transform .5s cubic-bezier(.22,1,.36,1); }
.nav .nav__logo:hover img{ transform:translateY(-1px); }
.nav .main-menu-bar>nav{ flex:0 0 auto; width:auto; margin-left:auto; display:flex; justify-content:flex-end; }

/* ===== 메뉴 (글자 사이 40px = gap 28 + 링크 좌우 6+6) ===== */
.nav .menu{ display:flex; list-style:none; gap:28px; margin:0; padding:0; }
.nav .menu>li{ flex:0 0 auto; text-align:center; position:relative; }
.nav .menu>li>a{ display:inline-block; padding:15px 8px; font-family:'Pretendard'; font-weight:500; font-size:clamp(15px,1.25vw,19px); letter-spacing:-.01em; color:rgba(255,255,255,.84); position:relative; transition:color .28s ease; }
.nav .menu>li:hover>a,.nav .menu>li:focus-within>a{ color:#fff; font-weight:700; }
.nav .menu>li>a::after{ content:""; position:absolute; left:8px; right:8px; bottom:6px; height:1.5px; background:#DDBD7E; transform:scaleX(0); transform-origin:right; transition:transform .28s ease; }
.nav .menu>li:hover>a::after,.nav .menu>li:focus-within>a::after{ transform:scaleX(1); transform-origin:left; }
/* [2026-08-10 #6] 드롭다운 호버 끊김/버벅임 방지: 메뉴~서브메뉴 사이 투명 브릿지(10px 갭 메움) */
.nav .menu>li::before{ content:""; position:absolute; left:0; right:0; top:100%; height:12px; z-index:1; }

/* ===== 서브메뉴 (다크 블러 카드 + 골드 화살표) ===== */
.nav .submenu{ position:absolute; z-index:130; top:calc(100% + 10px); left:50%; transform-origin:top center; transform:translateX(-50%) translateY(10px) scale(.97); min-width:212px; list-style:none; margin:0;
  background:rgba(13,13,15,.66); backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:10px; overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease,transform .22s ease; box-shadow:0 36px 90px -44px rgba(0,0,0,.9); }
.nav .submenu::before{ content:""; position:absolute; top:0; left:18px; right:18px; height:1px; background:linear-gradient(90deg,transparent,#DDBD7E,transparent); opacity:.55; }
.nav .menu>li:hover .submenu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); }
.nav .submenu li{ opacity:0; transform:translateX(-10px); transition:opacity .22s ease,transform .22s ease; }
.nav .menu>li:hover .submenu li{ opacity:1; transform:none; }
.nav .submenu li:nth-child(1){ transition-delay:.02s; } .nav .submenu li:nth-child(2){ transition-delay:.05s; }
.nav .submenu li:nth-child(3){ transition-delay:.08s; } .nav .submenu li:nth-child(4){ transition-delay:.11s; }
.nav .submenu li:nth-child(5){ transition-delay:.14s; }
.nav .submenu li a{ display:flex; align-items:center; padding:12px 16px; font-size:16px; font-weight:500; color:rgba(255,255,255,.62); border-radius:10px; letter-spacing:-.01em; white-space:nowrap; transition:color .3s ease,background .3s,padding-left .34s ease; }
.nav .submenu li a::after{ content:"\203A"; margin-left:auto; padding-left:14px; color:#DDBD7E; font-size:24px; font-weight:400; line-height:1; position:relative; top:-3px; opacity:0; transform:translateX(-8px); transition:opacity .3s ease,transform .3s ease; }
.nav .submenu li a:hover{ color:#fff; background:rgba(255,255,255,.06); padding-left:22px; }
.nav .submenu li a:hover::after{ opacity:1; transform:none; }

/* ===== 우측 아이콘군 간격: 고객센터~돋보기 35px / 돋보기~언어~로그인 15px ===== */
.nav .main-menu-bar>.nav__search{ margin-left:29px; }
.nav .main-menu-bar>.nav__lang{ margin-left:10px; }
.nav .main-menu-bar>.nav__login,
.nav .main-menu-bar>.nav__user{ margin-left:10px; }

/* 검색(돋보기) */
.nav .nav__search{ display:flex; align-items:center; }
.nav .nav__search-btn{ width:38px; height:38px; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:none; color:rgba(255,255,255,.9); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all .28s ease; padding:0; }
.nav .nav__search-btn:hover{ background:#DDBD7E; border-color:#DDBD7E; color:#111; }
.nav .nav__search-btn svg{ width:18px; height:18px; }
.nav .nav__search-form{ overflow:hidden; width:0; transition:width .32s ease,margin .32s ease; }
.nav .nav__search.open .nav__search-form{ width:170px; margin-left:8px; }
.nav .nav__search-form input{ width:100%; height:36px; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.28); color:#fff; border-radius:19px; padding:0 15px; outline:none; font-size:14px; }
.nav .nav__search-form input::placeholder{ color:rgba(255,255,255,.5); }
.nav .nav__search-form input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; height:15px; width:15px; margin-left:6px; cursor:pointer; background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat; }

/* 언어(지구본) */
.nav .nav__lang{ position:relative; display:flex; align-items:center; }
.nav .nav__lang-btn{ width:38px; height:38px; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:none; color:rgba(255,255,255,.9); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all .28s ease; padding:0; }
.nav .nav__lang-btn:hover{ background:#DDBD7E; border-color:#DDBD7E; color:#111; }
.nav .nav__lang-btn svg{ width:19px; height:19px; }
.nav .nav__lang-menu{ position:absolute; top:calc(100% + 12px); right:0; min-width:162px; list-style:none; margin:0; padding:8px; background:rgba(20,20,22,.96); border:1px solid rgba(185,138,52,.35); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.4); opacity:0; visibility:hidden; transform:translateY(8px); transition:all .25s ease; z-index:1300; }
.nav .nav__lang:hover .nav__lang-menu{ opacity:1; visibility:visible; transform:none; }
.nav .nav__lang-menu li a{ display:flex; align-items:center; gap:10px; padding:9px 12px; font-size:14px; color:rgba(255,255,255,.82); border-radius:8px; white-space:nowrap; }
.nav .nav__lang-menu li a:hover{ background:rgba(255,255,255,.08); color:#DDBD7E; }
.nav .flag{ flex:0 0 auto; width:22px; height:15px; border-radius:3px; background-size:cover; background-position:center; box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.flag-en{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><rect width='60' height='40' fill='%23B22234'/><g fill='%23fff'><rect y='3.08' width='60' height='3.08'/><rect y='9.24' width='60' height='3.08'/><rect y='15.4' width='60' height='3.08'/><rect y='21.56' width='60' height='3.08'/><rect y='27.72' width='60' height='3.08'/><rect y='33.88' width='60' height='3.08'/></g><rect width='26' height='21.56' fill='%233C3B6E'/></svg>"); }
.flag-zh{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><rect width='60' height='40' fill='%23DE2910'/><polygon points='14,7 16.35,12.4 22,12.9 17.6,16.7 19,22.4 14,19.3 9,22.4 10.4,16.7 6,12.9 11.65,12.4' fill='%23FFDE00'/></svg>"); }
.flag-ja{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><rect width='60' height='40' fill='%23fff'/><circle cx='30' cy='20' r='11' fill='%23bc002d'/></svg>"); }
.flag-ko{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><rect width='60' height='40' fill='%23fff'/><circle cx='30' cy='20' r='10' fill='%230047A0'/><path d='M20 20 a10 10 0 0 1 20 0 z' fill='%23CD2E3A'/></svg>"); }
.flag-fr{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><rect width='60' height='40' fill='%23fff'/><rect width='20' height='40' fill='%230055A4'/><rect x='40' width='20' height='40' fill='%23EF4135'/></svg>"); }
.flag-de{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><rect width='60' height='40' fill='%23FFCE00'/><rect width='60' height='13.34' fill='%23000000'/><rect y='13.33' width='60' height='13.34' fill='%23DD0000'/></svg>"); }

/* 로그인 아이콘 / 로그인 시 프로필 칩 */
.nav .nav__login{ display:flex; align-items:center; }
.nav .nav__login>a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:rgba(255,255,255,.9); transition:all .28s ease; }
.nav .nav__login>a:hover{ background:#DDBD7E; border-color:#DDBD7E; color:#111; }
.nav .nav__login svg{ width:19px; height:19px; }
.nav .nav__user{ display:flex; align-items:center; }
.nav .nav__user-link{ display:inline-flex; align-items:center; gap:9px; color:#fff; padding:4px 10px 4px 4px; border-radius:24px; transition:background .25s ease; }
.nav .nav__user-link:hover{ background:rgba(255,255,255,.08); }
.nav .nav__user-ava{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#e4c98a,#b98a34); display:inline-flex; align-items:center; justify-content:center; color:#141416; flex:0 0 auto; }
.nav .nav__user-ava svg{ width:20px; height:20px; }
.nav .nav__user-name{ font-size:15px; font-weight:600; color:#fff; white-space:nowrap; letter-spacing:-.01em; }
.nav .nav__user-caret{ font-size:11px; color:rgba(255,255,255,.7); }

/* ===== 모바일 버거 ===== */
.nav .nav__burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; cursor:pointer; background:none; border:0; color:#fff; align-items:center; margin-left:auto; }
.nav .nav__burger span{ width:22px; height:1.6px; background:currentColor; transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s; }
body.mnav-open .nav .nav__burger span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
body.mnav-open .nav .nav__burger span:nth-child(2){ opacity:0; }
body.mnav-open .nav .nav__burger span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* ===== 모바일 풀스크린 메뉴 ===== */
.mnav{ position:fixed; inset:0; z-index:105; background:rgba(14,14,16,.98); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; justify-content:center; padding:0 8vw;
  opacity:0; visibility:hidden; transform:translateY(-2%); transition:opacity .5s ease,transform .5s ease,visibility .5s; }
body.mnav-open .mnav{ opacity:1; visibility:visible; transform:none; }
.mnav ul{ list-style:none; margin:0; padding:0; }
.mnav>ul>li{ border-bottom:1px solid rgba(255,255,255,.1); }
.mnav>ul>li>a{ display:block; padding:22px 4px; color:#fff; font-family:'Pretendard'; font-weight:700; font-size:26px; letter-spacing:-.02em; }
.mnav .sub{ display:flex; flex-wrap:wrap; gap:8px 20px; padding:0 4px 22px; }
.mnav .sub a{ color:rgba(255,255,255,.6); font-size:15px; padding:8px 0; min-height:40px; display:flex; align-items:center; }
.mnav .sub a:active{ color:#fff; }

/* ===== 반응형: 720px 이하 = 버거만 ===== */
@media (max-width:720px){
  .nav .main-menu-bar>nav,
  .nav .nav__search,
  .nav .nav__lang,
  .nav .nav__login,
  .nav .nav__user{ display:none; }
  .nav .nav__burger{ display:flex; }
}


/* ============================================================
   [2026-08-27] 모바일 전체 메뉴 (≤720px 전용)

   설계 기준
   · 먼저 보여야 할 것은 사이트 구조다. 바로가기는 구조를 다 보여준 뒤 맨 아래.
   · 간격 규칙을 하나로 고정한다.
       섹션 제목 → 첫 하위 : 14px
       하위 줄 간격          : 4px (항목 자체가 44px 이라 실제 리듬은 48px)
       섹션 → 다음 섹션      : 32px
   · 좌우 정렬선은 22px 하나로 통일. 제목·하위·바로가기가 모두 같은 선에서 시작한다.
   · 현재 페이지는 금색 글자에 더해 좌측 4px 금색 마커와 옅은 배경으로 표시한다.
   · 검정 배경 + 금색 포인트라는 기존 무드는 유지한다.
   ============================================================ */
@media (max-width:720px){

  .mnav{
    height:100dvh;
    padding:0 !important;
    display:block !important;
    overflow:hidden;
    transform:none !important;
    transition:opacity .24s ease, visibility .24s;
  }

  /* ---------- 상단 ---------- */
  .mnav__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:calc(env(safe-area-inset-top, 0px) + 18px) 22px 16px;
    min-height:78px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mnav__title{
    font-family:'Pretendard';
    font-size:19px; font-weight:600;
    letter-spacing:-.02em; color:#fff;
  }
  /* [2026-08-29] "전체 메뉴" 글자를 GMN 로고로 바꿨다.
     메뉴가 열린 상태에서도 홈으로 나갈 수 있어야 한다. */
  .mnav__home{
    display:inline-flex; align-items:center;
    padding:6px 4px; margin:-6px -4px;   /* 터치 영역만 넓히고 위치는 그대로 */
    -webkit-tap-highlight-color:transparent;
  }
  .mnav__home img{
    height:22px; width:auto; display:block;
    filter:brightness(0) invert(1);      /* 어두운 배경이라 흰색으로 */
    transition:opacity .28s cubic-bezier(.16,1,.3,1);
  }
  .mnav__home:active img{ opacity:.6; }
  .mnav__home:focus-visible{ outline:2px solid #DDBD7E; outline-offset:4px; border-radius:6px; }
  .mnav__close{
    position:relative; width:44px; height:44px;
    margin-right:-11px;
    background:none; border:0; cursor:pointer;
  }
  .mnav__close span{
    position:absolute; left:50%; top:50%;
    width:18px; height:1.5px; background:#fff; border-radius:2px;
  }
  .mnav__close span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
  .mnav__close span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }

  /* ---------- 내용 영역 ---------- */
  .mnav > ul{
    display:block;
    height:calc(100dvh - 78px - env(safe-area-inset-top, 0px));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:26px 22px calc(env(safe-area-inset-bottom, 0px) + 32px);
  }

  /* ---------- 섹션(그룹) ---------- */
  .mnav > ul > li{
    border-bottom:0 !important;
    margin:0 0 32px 0;          /* 섹션 간격 */
  }
  .mnav > ul > li > a{
    display:block;
    padding:0 0 14px !important;  /* 제목 → 첫 하위 */
    font-size:15px !important;
    font-weight:600 !important;
    letter-spacing:.06em;
    text-transform:none;
    color:rgba(221,189,126,.92);   /* 그룹 제목은 금색 라벨로 */
  }

  /* ---------- 하위 메뉴 ---------- */
  .mnav .sub{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:10px;
    row-gap:4px !important;
    padding:0 !important;
    border-left:1px solid rgba(255,255,255,.09);   /* 그룹 묶음선 */
    padding-left:14px !important;
    margin-left:1px;
  }
  .mnav .sub a{
    position:relative;
    display:flex !important;
    align-items:center;
    min-height:44px !important;
    padding:0 10px 0 10px !important;
    margin-left:-10px;
    border-radius:8px;
    font-size:16px !important;
    font-weight:500;
    color:rgba(255,255,255,.78);
    line-height:1.3;
    letter-spacing:-.02em;
    word-break:keep-all;
  }
  .mnav .sub a.is-wide{ grid-column:1 / -1; }
  .mnav .sub a:active{ background:rgba(255,255,255,.06); }

  /* ---------- 바로가기 (구조 아래, 얇게) ---------- */
  .mnav__quickrow{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:0 0 32px 0 !important;
    padding:0;
    list-style:none;
  }
  /* 바로가기는 .mnav__quickrow 안으로 옮겨지므로 자식 선택자를 쓰면 안 된다 */
  .mnav li.mnav__quick{ margin:0 !important; width:auto !important; border-bottom:0 !important; }
  .mnav li.mnav__quick > a{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    min-height:46px;                 /* 터치는 확보하되 두껍지 않게 */
    padding:0 14px !important;
    font-size:15px !important;
    font-weight:600 !important;
    letter-spacing:-.02em;
    color:rgba(255,255,255,.88);
    background:transparent;
    border:1px solid rgba(255,255,255,.16);
    border-radius:10px;
  }
  .mnav li.mnav__quick > a::after{
    content:'';
    width:6px; height:6px;
    border-right:1.4px solid rgba(221,189,126,.85);
    border-top:1.4px solid rgba(221,189,126,.85);
    transform:rotate(45deg);
  }

  /* ---------- 현재 페이지 ---------- */
  .mnav .sub a.is-current{
    color:#DDBD7E !important;
    font-weight:600;
    background:rgba(221,189,126,.07);
  }
  .mnav .sub a.is-current::before{
    content:'';
    position:absolute; left:-15px; top:50%;
    width:2px; height:16px;
    margin-top:-8px;
    background:#DDBD7E;
    border-radius:2px;
  }
  .mnav li.mnav__quick > a.is-current{
    color:#DDBD7E !important;
    border-color:rgba(221,189,126,.55);
    background:rgba(221,189,126,.07);
  }

  /* 키보드 접근 */
  .mnav a:focus-visible,
  .mnav__close:focus-visible{ outline:2px solid #DDBD7E; outline-offset:3px; border-radius:8px; }
}

/* ============================================================
   [2026-08-28] 모바일 상단 로고(홈) 복귀 + 메뉴 간격 정리 (≤720px 전용)
   ============================================================ */
@media (max-width:720px){

  /* ---------- 좌측 로고 = 홈 버튼 ---------- */
  .nav{
    left:12px !important;
    right:12px !important;
    width:auto !important;
  }
  /* width:auto 로는 내용만큼만 차지해 space-between 이 동작하지 않는다.
     로고는 왼쪽 끝, 햄버거는 오른쪽 끝에 붙도록 폭을 채운다. */
  .nav .main-menu-bar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
  }
  .nav .nav__logo{
    display:flex !important;
    align-items:center;
    height:44px;                 /* 터치 영역 */
    padding:0 4px;
  }
  .nav .nav__logo img{
    height:19px !important;
    width:auto !important;
    display:block;
  }
  /* 메인은 어두운 사진 위 → 흰 로고 */
  .nav .nav__logo img{ filter:brightness(0) invert(1) !important; }

  /* ---------- 햄버거 메뉴 항목 간격 ---------- */
  /* 하위 항목 44px + 줄 간격 4px = 48px 리듬이 넓었다.
     터치 영역은 44px 을 지키되 줄 사이 여백을 없애 리듬을 44px 로 좁힌다. */
  .mnav .sub{ row-gap:0 !important; }
  /* 그룹 제목과 첫 하위 사이 */
  .mnav > ul > li > a{ padding-bottom:10px !important; }
  /* 섹션 사이 */
  .mnav > ul > li{ margin-bottom:26px !important; }
  .mnav__quickrow{ margin-bottom:0 !important; }
  .mnav > ul{ padding-top:22px !important; }
}

/* [2026-08-28] 햄버거 메뉴 상단 겹침 해결.
   원인: .nav 가 z-index:110, .mnav 가 105 라서 메뉴를 열어도
   상단바(GMN 로고·햄버거)가 오버레이 위에 그대로 그려져
   "전체 메뉴" 제목과 로고가 겹쳐 보였다.
   오버레이를 상단바 위로 올리고, 열려 있는 동안 상단바는 숨긴다.
   닫기(X)는 .mnav 안에 있으므로 그대로 눌린다. */
@media (max-width:720px){
  .mnav{ z-index:200 !important; }
  body.mnav-open .nav{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
}