@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');	

nav { position: relative; width: 1400px;height: 60px; margin: inherit; padding: inherit; background: none;}

/* ===== Header ===== */
#header{ position:fixed; top:0; left:0; width:100%; background:transparent; z-index:1000;transition:transform .36s ease, background .3s; will-change:transform, background;}
/* 기본/스크롤 시에도 투명 유지 */
#header.active{background:transparent;}
#header.header--hidden{transform:translateY(-100%);}
.header-inner{ display:flex; justify-content:space-between; align-items:center; padding:25px 40px; position:relative; transition:background .3s;}

/* === 대메뉴 hover(또는 서브바 노출) 시 헤더 화이트 배경 적용 === */
#header.menu-open .header-inner{background:#fff;}

/* --- 로고: 기본은 white 로고, 메뉴 오버 시 black 로고 --- */
.logo{display:flex; align-items:center; text-decoration:none; position:absolute; left:40px; z-index:10; width:140px; height:44px;background-image:url('/home/images/jahayeon/logo.png'); background-repeat:no-repeat; background-position:left center; background-size:contain; text-indent:-9999px; overflow:hidden; white-space:nowrap;transition: background-image 0.3s ease;}
#header.menu-open .logo{background-image:url('/home/images/jahayeon/logo.png'); filter:none;}

.nav-menu{display:flex; list-style:none; gap:80px; margin:0 auto;}
.nav-menu>li{position:relative;}
.nav-menu>li>a{text-decoration:none; font-size:20px; font-weight:500;letter-spacing:-1px; text-transform:uppercase; padding:10px 0; display:block; transition:color .3s;}
/* 메뉴 오버 상태에서만 글자 검정색 */
#header.menu-open .nav-menu>li>a{color:#000;}
.nav-menu>li>a:hover{color:#b19163;}

/* 밑줄 라인: 기본은 흰색, 메뉴 오버 시 빨강 */
.nav-menu>li::after{content:""; position:absolute; left:50%; height:2px; bottom:-25px; background:rgba(255,255,255,0.95);transform:translateX(-50%) scaleX(0); transform-origin:center;transition:transform .25s ease, background .25s ease; width:100%;}
#header.menu-open .nav-menu>li::after{background:#b19163;}
.nav-menu>li:hover::after, .nav-menu>li:focus-within::after{transform:translateX(-50%) scaleX(1);}
.nav-menu>li:nth-child(1)::after,
.nav-menu>li:nth-child(2)::after,
.nav-menu>li:nth-child(3)::after,
.nav-menu>li:nth-child(4)::after,
.nav-menu>li:nth-child(5)::after,
.nav-menu>li:nth-child(6)::after{width:100%; padding:0 10px;}

/* 우측 링크/아이콘 컬러 전환 */
.nav-right{ display:flex; align-items:center; gap:30px; position:absolute; right:40px;}
.nav-right a{text-decoration:none; color:#fff; font-size:14px; font-weight:500; transition:color .3s;}
#header.menu-open .nav-right a{color:#000;}
.sitemap-toggle{display:flex; flex-direction:column; gap:6px; cursor:pointer; padding:5px; background:none; border:none;}
.sitemap-toggle span{width:24px; height:2px; background:#333; transition:all .3s;}
#header.menu-open .sitemap-toggle span{background:#000;}
.menu-toggle{display:none; flex-direction:column; gap:6px; cursor:pointer; padding:5px;}
.menu-toggle span{width:24px; height:2px; background:#fff; transition:all .3s; transform-origin:center;}
#header.menu-open .menu-toggle span{background:#000;}
.menu-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ===== Submenu Bar ===== */
.submenu-wrapper{position:fixed; left:0; width:100%; top:80px; opacity:0; visibility:hidden; pointer-events:none;background:#fff; border-top:1px solid #f0f0f0; box-shadow:0 4px 12px rgba(0,0,0,.05);transition:opacity .2s, visibility .2s, top .2s ease; z-index:999;}
.submenu-wrapper.visible{opacity:1; visibility:visible; pointer-events:auto;}
.submenu-inner{ max-width:1400px; margin:0 auto; padding:20px 40px; display:flex; align-items:center; min-height:90px; position:relative;}

/* 각 그룹 컨테이너는 left만 이동 (내부 링크는 flex 흐름) */
.submenu-group{ position:absolute; left:0; width:auto; height:auto; display:none; align-items:center; }
.submenu-group.active{display:flex;}

/* ✅ 균등 간격: 링크 간격은 gap 하나로 통일 */
.submenu{display:flex;align-items:center;gap:48px; position:relative;}
.submenu a{ position:relative; text-decoration:none; color:#333; font-size:18px; padding:0; white-space:nowrap; transition:color .2s; letter-spacing:-0.01em; line-height:1;}
.submenu a:hover{color:#000;}
.submenu a:hover::after{width:100%;}

/* ===== Mobile Slide Menu ===== */
.mobile-menu{ position:fixed; top:0; right:-100%; width:80%; max-width:320px; height:100vh; background:#fff; transition:right .3s; overflow-y:auto; z-index:1001;}
.mobile-menu.active{right:0;}
.mobile-menu-header{ padding:20px; height:66px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eee;}
.mobile-menu-header .logo{ position:static; width:120px; height:24px; background-image:url('/home/images/jahayeon/logo.png'); background-repeat:no-repeat; background-position:left center; background-size:contain; text-indent:-9999px; overflow:hidden; white-space:nowrap; filter:none;}
.mobile-close{font-size:28px; cursor:pointer; color:#666;}
.mobile-nav{padding:20px 0;}
.mobile-nav>li{list-style:none; border-bottom:1px solid #eee;}
.mobile-nav>li>a{ display:flex; justify-content:space-between; align-items:center; padding:15px 20px; color:#000; text-decoration:none; font-weight:500; font-size:18px; position:relative;}
.mobile-nav>li>a::after{ content:''; width:10px; height:10px; border-right:2px solid #666; border-bottom:2px solid #666; transform:rotate(45deg) translateY(-2px); transition:transform .3s ease;}
.mobile-nav>li.open>a::after{transform:rotate(-135deg) translateY(2px);}
.mobile-submenu{display:none; background:#f8f8f8; padding:10px 0;}
.mobile-submenu.active{display:block;}
.mobile-submenu a{display:block; padding:12px 20px 12px 40px; color:#666; text-decoration:none; font-size:14px; letter-spacing:0.04em;}
.mobile-overlay{ position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:999;}
.mobile-overlay.active{opacity:1; visibility:visible;}

/* ===== Sitemap Overlay ===== */
.sitemap-overlay{ position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(255, 255, 255, 0.85); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:9999; overflow-y:auto;}
.sitemap-overlay.active{opacity:1; visibility:visible;}
.sitemap-container{ max-width:1400px; margin:0 auto; padding:80px 40px 60px; position:relative;}
.sitemap-close{ position:absolute; top:40px; right:40px; width:40px; height:40px; color:#2a2a2a; font-size:28px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s;background-color: transparent;
    border: 0;}
.sitemap-close:hover{background:rgba(255,255,255,.2); transform:rotate(90deg);}
.sitemap-header{ text-align:center; margin-bottom:60px;}
.sitemap-header h2{ color:#272727; font-size:36px; font-weight:600; margin-bottom:10px; letter-spacing:-0.02em;}
.sitemap-header p{ color:rgba(57, 57, 57, 0.7); font-size:16px;}
.sitemap-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:40px;}
.sitemap-section{ background:rgba(255,255,255,.05); border-radius:12px; padding:30px; border:1px solid rgba(255,255,255,.1); transition:all .3s;}
.sitemap-section:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); transform:translateY(-2px);}
.sitemap-section h3{ color:#424242; font-size:20px; font-weight:600; margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,.2);}
.sitemap-links{ display:flex; flex-direction:column; gap:12px;}
.sitemap-links a{ color:rgba(36, 36, 36, 0.8); text-decoration:none; font-size:15px; transition:all .2s; padding:8px 12px; border-radius:6px; display:inline-block;}
.sitemap-links a:hover{ color:#424242; background:rgba(255,255,255,.1); padding-left:16px;}

@media (max-width:768px){
  .sitemap-container{padding:60px 20px 40px;}
  .sitemap-close{top:20px; right:20px; width:36px; height:36px; font-size:24px;}
  .sitemap-header h2{font-size:28px;}
  .sitemap-grid{grid-template-columns:1fr; gap:24px;}
  .sitemap-section{padding:24px;}
}
	
@media (max-width:360px){ 
  .mobile-submenu a{letter-spacing:0.03em;}
}

/* 모바일은 기존처럼 흰 배경 유지 */
@media (max-width:1200px){
  .nav-menu{display:none;}
  .sitemap-toggle{display:none;}
  .menu-toggle{display:flex;}
  .header-inner{height:66px; padding:0 16px; background-color: #fff;}
  .logo{ position:static;width: 120px; background-image:url('/home/images/jahayeon/logo.png') !important;}
  .nav-right{position:static; margin-left:auto; gap:16px;}
  #header{background:#fff;}
  .menu-toggle span{background:#000;}
  .submenu-wrapper{display:none;}
}


/*메뉴 상단 색상 부분*/
.alphaHeader { background:rgb(255, 255, 255); }
.alphaHeader .nav-menu a { color:#1e1e1e; }
.alphaHeader .logo{background-image:url('/home/images/jahayeon/logo.png'); filter:none;}
.alphaHeader .sitemap-toggle span { background:#000; }
/*.alphaHeader .skip .log-in { background-position-y:-40px; }*/



/*메뉴 로그인 부분*/
header .skip {position:absolute; top:-30px;right:60px; z-index:99}
header .skip .skip_menu {position:relative; display:inline-block; height:90px; padding:25px 0 0;}
header .skip .skip_menu p {position:relative; width:40px; height:40px; text-indent:-9999px; cursor: pointer; z-index: 2}
header .skip .skip_menu p:after {display:block; position:absolute; right:2px; bottom:2px; width:9px; height:9px; content:''; background:#ff4b28; border-radius:50%; z-index: 13}
header .skip .skip_menu .skip_circle {position:absolute; left:-5px; top:20px; background:#ff840c; width:50px; height:50px; border-radius:50%; opacity: 0; z-index:1; }
header .skip .skip_menu .skip_circle.a {opacity: 1; transition:opacity .1s ease;}
header .skip .skip_menu .skip_circle.b {opacity: 0; transition:opacity 2.1s ease;}
header .skip .skip_menu ul {display:none; position:absolute; left:-23px; top:45px; width:50px; min-height:1px; height:auto; padding:30px 0 10px;
	background:linear-gradient(to bottom,
		rgba(255, 132, 12, 0) 0,
		rgba(255, 132, 12, 0.8) .2%,
		rgba(255, 132, 12, 1) 100%); border-radius:0 0 26px 26px; transform: translate(36%, 0); transition-timing-function: linear; z-index: 0}
header .skip .skip_menu ul li {width:100%; height:40px; text-align:center; text-indent:-9999px}
header .skip .skip_menu ul li a {display:block; height:40px; cursor:pointer}
header .skip .skip_menu ul li.log-mypage {background:url('/home/images/top_mypage_bg_36.png')no-repeat 7px -34px;}
header .skip .skip_menu ul li.log-out {background:url('/home/images/top_mypage_bg_36.png')no-repeat -137px -34px;}
header .skip p.profile {position:relative; padding:0; text-align:center; text-indent:inherit; border-radius:50%}
header .skip p.profile > span {display:block; position:relative; width:100%; height:40px; border-radius:50%; border:1px solid #eee; background:#fff}
header .skip p.profile > span img {width:100%; height:100%; border-radius:50%; }

header .skip .skip_log {position:relative; display:inline-block; height:auto; padding:26px 0 0;}
header .skip .skip_log > a {display:block; position:relative; width:40px; height:40px; overflow:hidden; text-indent:-99999px}
header .skip a.log-out {position:relative; background:url('/home/images/top_mypage_bg.png')no-repeat -165px -40px;}
header .skip a.log-in {background:url('/home/images/top_mypage_bg_40.png')no-repeat -202px 0px}
header .skip ul li.favBt a {color:#52c0ff; border:1px solid #ddd; background:#fff; line-height:33px; padding:0 12px; }

@media (max-width:1200px) {
  header .skip {top:-10px;}
}