@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,
.nav-menu>li:nth-child(7)::after{width:100%; padding:0 10px;}
.mobile-nav>li.mobile-nav-mypage>a::after{display:none;}

/* 우측 링크/아이콘 컬러 전환 */
.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; }*/



/*메뉴 로그인 부분*/
.user-account-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:72px;
  height:34px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#7a7468;
  color:#fff;
  text-decoration:none;
  flex-shrink:0;
  box-sizing:border-box;
  transition:border-color .3s, color .3s, background .3s, opacity .3s;
  cursor:pointer;
  font:inherit;
  font-size:14px;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1;
}
.header-logout-form {
  display:inline-flex;
  margin:0;
  padding:0;
}
.user-account-btn .user-account-label {
  display:block;
  white-space:nowrap;
  line-height:1;
}
.user-account-btn:hover {
  opacity:.92;
}
body:not(.bg) header:not(.alphaHeader) #header:not(.menu-open) .user-account-btn {
  border-color:rgba(0,0,0,.12);
  background:#7a7468;
  color:#fff;
}
#header.menu-open .user-account-btn,
body.bg header .user-account-btn {
  border-color:rgba(0,0,0,.12);
  background:#7a7468;
  color:#fff;
}
.nav-right .skip,
.nav-right .user-nav {
  position: static;
  top: auto;
  right: auto;
  display: flex;
  align-items: center;
  z-index: 10;
}
header .skip .skip_menu {position:relative; display:inline-flex; align-items:center; height:auto; padding:0;}
header .skip .skip_menu.is-logged-in > p.profile {position:relative; width:40px; height:40px; text-indent:-9999px; cursor:pointer; z-index:2; margin:0;}
header .skip .skip_menu.is-logout-only .skip_sub,
header .skip .skip_menu.is-logout-only .skip_circle {display:none !important;}
header .skip .skip_menu.is-logout-only > p.profile {cursor:pointer;}
header .skip .skip_menu.is-logged-in > p.profile: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:-5px; 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:50%; top:calc(100% + 4px); width:50px; min-height:1px; height:auto; padding:30px 0 14px;
	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:translateX(-50%); transition-timing-function:linear; z-index:20}
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-counsel {background:none; text-indent:0;}
header .skip .skip_menu ul li.log-counsel a {display:flex; align-items:center; justify-content:center;}
header .skip .skip_menu ul li.log-counsel a i {font-size:22px; color:#fff; line-height:40px;}
header .skip .skip_menu ul li.log-counsel a span {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}
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 rgba(255,255,255,.35); background:#f5f5f5}
#header.menu-open .skip p.profile > span,
body.bg header .skip p.profile > span {border-color:#eee; background:#fff}
header .skip p.profile > span img {width:100%; height:100%; border-radius:50%; object-fit:cover;}

header .skip .skip_log {position:relative; display:inline-flex; align-items:center; height:auto; padding:0;}
header .skip .skip_log.is-logged-out > a.log-in {
  display:block; position:relative; width:40px; height:40px; overflow:hidden; text-indent:-99999px;
  border-radius:50%; border:1px solid #ddd; background-color:#f5f5f5;
  background-image:url('/home/images/top_mypage_bg_40.png'); background-repeat:no-repeat;
  background-size:240px auto; background-position:-202px -40px;
}
/* 메인 투명 헤더(어두운 배경)에서만 밝은 아이콘 */
body:not(.bg) header:not(.alphaHeader) #header:not(.menu-open) .skip .skip_log.is-logged-out > a.log-in {
  background-position:-202px 0; border-color:rgba(255,255,255,.45); background-color:rgba(255,255,255,.2);
}
header .skip a.log-out {position:relative; background:url('/home/images/top_mypage_bg.png') no-repeat -165px -40px;}
header .skip ul li.favBt a {color:#52c0ff; border:1px solid #ddd; background:#fff; line-height:33px; padding:0 12px;}
.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

@media (max-width:1200px) {
  .user-account-btn {
    min-width:64px;
    height:30px;
    padding:0 14px;
    font-size:13px;
  }
  header .skip .skip_menu.is-logged-in > p.profile,
  header .skip .skip_log.is-logged-out > a.log-in,
  header .skip p.profile > span {width:32px; height:32px;}
  header .skip .skip_menu .skip_circle {left:-2px; top:-2px; width:36px; height:36px;}
  header .skip .skip_menu ul {width:36px; padding:22px 0 10px;}
  header .skip .skip_menu ul li {height:32px;}
  header .skip .skip_menu ul li.log-mypage {background:url('/home/images/top_mypage_bg_36.png')no-repeat 0 -36px;}
  header .skip .skip_menu ul li.log-out {background:url('/home/images/top_mypage_bg_36.png')no-repeat -144px -36px;}
  header .skip .skip_log.is-logged-out > a.log-in {
    background-image:url('/home/images/top_mypage_bg_30.png'); background-size:180px auto; background-position:-152px -30px;
    border-color:#ddd; background-color:#f5f5f5;
  }
}