@charset "utf-8";
/* Info
 ========================================================================== */
/**
 * 1. Writer: Platform UX. (Weaverloft Corp.)
 * 2. Production Date: 2026-01-15
 * 3. Client: AP
 * 4. Homepage : https://weaverloft.com/
 */

/*========== Header ==========*/
#header { background-color: #fff; transition: left 0.3s, width 0.3s, border 0.3s;}
#header .header-wrap { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 60px); height: 60px; margin: 0 30px; font-size: 16px; }
#header .header-wrap .path ol,
#header .header-wrap .path ol li { display: flex; align-items: center;}
#header .header-wrap .path ol li:not(:last-of-type)::after { content:'/'; display: inline-block; margin: 0 8px; color: #888; font-size: 0.85em;}
#header .header-wrap .path ol li a:hover { text-decoration: underline;}
#header .header-wrap .acc { position: relative; }
#header .header-wrap .acc > a { display: flex; align-items: center; gap: 10px;}
#header .header-wrap .acc .acc-txt { color: #111; font-weight: 500;}
#header .header-wrap .acc .acc-txt em { color: var(--point-color); font-weight: 700;}
/* user profile */
.user-profile .basic-profile { position: relative; overflow: hidden; width: 30px; height: 30px; border-radius: 50%; background-color: #56616d; } 
.user-profile .basic-profile img { position: absolute; top: 58%; left: 50%; width: 20px; max-width: 140%; transform: translate(-50%, -50%); } 
.user-profile .profile-down { position: absolute; top: 22px; right: 0; display: flex; justify-content: center; align-items: center; width: 12px; height: 12px; border-radius: 50%; background-color: #56616d; } 
.user-profile .profile-down img { width: 5px; } 
.user-bubble { display: none; position: absolute; top: 46px; right: -10px; z-index: 1; min-width: 250px; padding: 16px 16px; background: #56616d; border-radius: 6px; visibility: hidden; opacity: 0; transform: translateX(0) scale(0.9); transition: all 300ms; box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.1); } 
.user-bubble.on { display: block; visibility: visible; opacity: 1; transform: translateX(0) scale(1); transition: all 300ms; } 
.user-bubble:after { content: ''; position: absolute; top: 0; right: 14px; width: 0; height: 0; margin: -10px 0 0 -10px; border: 10px solid transparent; border-bottom-color: #56616d; border-top: 0; } 
/* user-info-wrap ver02 */
.user-wrap { display: flex; align-items: flex-start; gap: 12px;}
.user-wrap .user-info { font-size: 13px; color: #fff; text-align: right; padding-right: 20px;} 
.user-wrap .user-info i { font-weight: 600; } 
.user-wrap .login-info { position: relative; font-size: 12px; color: rgba(255, 255, 255, 0.8); flex-shrink: 0;} 
.user-wrap .login-info span{display: block; margin-bottom: 6px;}
.user-wrap .login-info span:last-of-type{margin-bottom: 0;}
.user-wrap .logout-btn { display: inline-block; width: 29px; height: 29px; background-color: #6f7983; border-radius: 3px; background-image: url('../img/icon-logout.svg'); background-position: center center; background-repeat: no-repeat; background-size: 14px 14px; font-size: 0; } 
.user-wrap .logout-btn:hover { background-color: #3e4b58; } 
.user-wrap .reload-btn { display: inline-block; width: 29px; height: 29px; background-color: #6f7983; border-radius: 3px; background-image: url('../img/icon-reload.svg'); background-position: center center; background-repeat: no-repeat; background-size: 14px 14px; font-size: 0; } 
.user-wrap .reload-btn:hover { background-color: #3e4b58; } 

/*========== Nav ==========*/
.nav {position: fixed; top: 0px; left:0px; width: 235px; height: 100%; z-index: 100; display: flex; flex-direction: column; justify-content: space-between; background: #fff; box-shadow: 2px 0 20px rgba(205, 205, 214, 0.3); transition: width 400ms;}

/* nav-top */
.nav .top { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 60px; margin-bottom: 10px; padding: 0 24px; background-color: #fff; border-bottom: 1px solid #D4D8DD; transition: padding 400ms 0s; }
.nav .top .logo > a { position: relative; display: flex; flex-flow: column; align-items: center; gap: 12px;}
.nav .top .logo > a > .logo-tit { display: inline-block; width: 100%;font-size: 20px; font-weight: 700; color: #111; text-align: center; transition: opacity 400ms 300ms;} 
.nav .top .logo > a .brand-favi { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 34px; height: 100%; margin-left: 8px; opacity: 0; font-size: 0; transition: opacity 400ms 300ms; background-position: center; background-size: contain; background-repeat: no-repeat;}
#container:has(.laneige) .nav .top .logo > a .brand-favi { background-image: url('../img/logo_lng_favicon.ico');}
#container:has(.hera) .nav .top .logo > a .brand-favi { background-image: url('../img/logo_hera_favicon.ico');}
.brand-menu-wrap { position: relative; padding: 5px; border-radius: 5px;}
.btn-brand-menu { display: block; width: 16px; box-sizing: border-box; vertical-align: middle;}
.btn-brand-menu span { display: block; width: 100%; height: 1px; margin: 4px auto; background-color: #111;}
.brand-menu-wrap:has(.btn-brand-menu:hover) { background-color: #f3f3f3;}
/* nav > brand-logo */
.nav .brand-logo { display: flex; align-items: center; width: 100%; height: 60px; margin-bottom: 5px; transition: opacity 400ms 300ms;}
.nav .brand-logo span { width: 120px; height: 32px; margin-left: 24px; font-size: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.nav .brand-logo.laneige-logo span { background-image: url('../img/logo_lng.svg');}
.nav .brand-logo.hera-logo span { background-image: url('../img/logo_hera.png');}
/* nav-bottom */
.nav .bottom {position: relative; width: 100%; height: auto; padding: 0 10px; transition: opacity 400ms 300ms; }
/* nav main-menu */
.nav .bottom .main-menu-area {position: relative; width: 100%; height: auto; background-color: #f3f3f3; border-radius: 20px; overflow: hidden; background-repeat: no-repeat; background-position: -95px calc(100% - 50px); background-size: 330px auto;}
.nav .bottom .main-menu-area + .main-menu-area { margin-top: 24px;}
.nav .bottom .main-menu { padding-top: 10px;}
.nav .bottom .main-menu .category { display: flex; align-items: center; height: 35px; padding-left: 18px; font-size: 17px; font-weight: 700; line-height: 1.2; }
.nav .bottom .main-menu .category span { display: flex; align-items: center; gap: 0.35em;}
.nav .bottom .main-menu .category span::before { content:''; display: inline-block; width: 1.15em; height: 1.2em; background-size: contain; background-repeat: no-repeat; background-position: left center;}
.nav .bottom .main-menu .category.rsv span::before { background-image: url('../img/icon-header-rsv.svg'); transform: translateY(-1px);}
.nav .bottom .main-menu .category.store span::before { background-image: url('../img/icon-header-store.svg'); transform: translateY(-1px);}
.nav .bottom .main-menu .menu-list {display: flex; flex-direction: column; gap: 6px; padding: 6px;}
.nav .bottom .main-menu .menu > a {position: relative; display: flex; align-items: center; padding:11px 34px 11px 18px; font-size: 15px; font-weight: 500; color: #111; white-space: nowrap; cursor: pointer; border-radius: 30px; color: #111;}
.nav .bottom .main-menu .menu:has(ul) > a::after { content:''; position: absolute; right: 17px; top: 50%; transform: translateY(-50%); width:12px; height: 12px; background-image: url('../img/select-arrow-g.svg'); background-position: center; background-size: contain; background-repeat: no-repeat; }
.nav .bottom .main-menu .menu > a:hover,
.nav .bottom .main-menu .menu.active > a { background-color: #333; color: #fff;}
.nav .bottom .main-menu .menu:has(ul) > a:hover::after,
.nav .bottom .main-menu .menu.active:has(ul) > a::after { background-image: url('../img/select-arrow-w.svg');}
.nav .bottom .main-menu .menu.active:has(ul) > a::after { transform: translateY(-50%) rotate(180deg);}
/* nav sub-menu */
.nav .bottom .main-menu .menu .depth2 {position: relative; display: none; max-height: 500px; margin: 10px 0 5px 20px; border-left: 1px solid #D4D8DD;}
.nav .bottom .main-menu .menu.active .depth2 { display: block;}
.nav .bottom .main-menu .menu .depth2 li {margin-bottom: 12px;}
.nav .bottom .main-menu .menu .depth2 li:last-child {margin-bottom: 0px;}
.nav .bottom .main-menu .menu .depth2 li a {display: flex;align-items: center;font-size: 15px;font-weight:500; color: #666;padding:2px 12px;border-radius: 6px;transition: background-color 0.3s;}
.nav .bottom .main-menu .menu .depth2 li.act > a > span {font-weight:600; color: var(--text-color-2); }
.nav .bottom .main-menu .menu .depth2 li a.active,
.nav .bottom .main-menu .menu .depth2 li a:hover {font-weight:600; color: var(--text-color-2);}
.nav .bottom .main-menu .menu .depth2 li > a > span {position: relative; display: block; }
.nav .bottom .main-menu .menu .depth2 li > a.active > span::after,
.nav .bottom .main-menu .menu .depth2 li > a:hover > span::after {position: absolute; top:3px; left:-13px; z-index: 1; content: ''; display: block; background: var(--point-color); width: 2px; height:14px;}

/*========== Footer ==========*/
.copyright-wrap { padding: 0 10px 40px; transition: opacity 400ms 300ms; }
.copyright-wrap .copyright {padding: 15px 0 0; border-top: 1px solid #D4D8DD; font-size: 12px; font-weight:300; text-align: center; color: #999; }

/*========== Contents - Common ==========*/
/* html,body{ background: var(--bg-color);} */
#main { position: relative; width: 100%; min-height: calc(100vh - 60px); padding: 34px 30px 40px 30px; }
#container { min-height: 100vh; padding-left: 235px; min-width: 1360px; overflow-x: auto; background:var(--bg-color); transition: padding 400ms;}
#main:has(.login-sec) { padding: 0;}
#container:has(.login-sec) { background: #fff; padding-left: 0;}

/* Loader */
.loader-wrap {position: fixed; top: 0; left: 0; right: 0; z-index: 999; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden;transition: 0.3s ease-out;}
.loader-wrap::before{content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #fff; opacity: 0.7;}
.loader-wrap.show {opacity: 1; visibility: visible;}
.loader {width: 50px; padding: 5px; aspect-ratio: 1/1; border-radius: 50%; background: var(--point-color); -webkit-mask: conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box; ;mask: conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box; -webkit-mask-composite: source-out; mask-composite: subtract; animation: loading 1s infinite linear; }
@keyframes loading {
    to { transform: rotate(1turn) }
}

/* Section */
.cont-wrap .sec-title{font-weight: 700;  font-size: 24px; color: var(--text-color-2);}
.cont-wrap .section .cont-sec{ position: relative; background: #fff; border: 1px solid #E2E2EE; margin-top: 20px; padding: 24px 24px 30px 24px; border-radius:10px}
.cont-wrap .sub-title { padding-block: 50px 14px; font-size: 20px; font-weight: 700; }

@media screen and (max-width: 1600px) {
	#main { padding: 20px 20px 24px 20px;}
	#header .header-wrap { width: calc(100% - 40px); margin: 0 20px; }
	.nav { width: 50px; transition: width 400ms 300ms;}
	.nav .top { border-bottom: none; padding-left: 0; transition: padding 400ms 0s;}
	.nav .top .logo > a > .logo-tit { opacity: 0; transition: opacity 400ms 0s;}
	.nav .top .logo > a .brand-favi { opacity: 1; transition: opacity 400ms 300ms;}
	.nav .bottom { opacity: 0; transition: opacity 400ms 0s;}
	.copyright-wrap { opacity: 0; transition: opacity 400ms 0s;}
	#container { padding-left: 50px; transition: padding 400ms 300ms;}
	.nav .brand-logo { opacity: 0; transition: opacity 400ms 0s;}

	@media (hover: hover) {
        .nav:hover { width: 235px; transition: width 400ms 0s;}
		.nav:hover .top { border-bottom: 1px solid #D4D8DD; padding: 0 24px; transition: padding 400ms 0s;}
		.nav:hover .top .logo > a > .logo-tit { opacity: 1; transition: opacity 400ms 300ms;}
		.nav:hover .top .logo > a .brand-favi { opacity: 0; transition: opacity 400ms 0s;}
		.nav:hover .bottom { opacity: 1; transition: opacity 400ms 300ms;}
		.nav:hover .copyright-wrap { opacity: 1; transition: opacity 400ms 300ms;}
		#container:has(.nav:hover) { padding-left: 235px; transition: padding 400ms 0s;}
		.nav:hover .brand-logo { opacity: 1; transition: opacity 400ms 300ms;}
    }
}

/* login 페이지
 ========================================================================== */
/* 로그인 */
.login-sec{display:flex; justify-content: center; align-items: center; height: 100vh;}
.login-sec .login-box{width: 100%; max-width: 460px; border:1px solid #ccc; padding: 80px 50px;}
.login-sec .login-box figure{margin-bottom: 20px; text-align: center;}
.login-sec .login-box figure img{width: auto; max-width: 100%; margin: 0 auto;}
.login-sec .login-box h1{font-size: 20px; text-align: center; margin-bottom: 30px;}
.login-sec .login-box .box{position: relative; margin-bottom: 10px;}
.login-sec .login-box .box:last-of-type{margin-bottom: 0;}
.login-sec .login-box .box input{height: 38px;}
.login-sec .login-box form > button{margin-top: 40px; height: 50px;}
.login-sec .login-box .password-box { width: 100%;}
.login-sec .checkbox-wrap input[type="checkbox"] + label::before,
.login-sec .checkbox-wrap input[type="checkbox"]:checked + label::before{transform: translateY(-2px);}
.login-sec .login-box .info { padding: 15px 12px 0; font-size: 15px; word-break:keep-all;}
.login-sec .login-box .info a { text-decoration: underline; color: #195896;}
.login-sec .error { max-width: calc(100% - 24px); margin: 18px auto 0;}