@charset "UTF-8";

body { margin: 0;background: #000;color: #fff;font-family: 'Montserrat', sans-serif;}

.layout-wrap {display: flex;min-height: 100vh;}

/* 좌측 메뉴 */
.sidebar {width: 450px;min-width: 450px;background: #000;padding-top: 0;}

/* 로고 영역 */
.sidebar-logo {width: 350px;height: 32px;margin: 34px 50px 36px 50px;display: flex;align-items: center;}
.sidebar-logo a {display: inline-flex;align-items: center;text-decoration: none;color: #ff2b2b;font-size: 20px;font-weight: 700;}

/* 메뉴 전체 폭 350px, 좌우 50px */
.sidebar-nav {width: 350px;margin: 0 50px;}
.menu-group {margin-bottom: 8px;}

/* 1차 메뉴 */
.menu-depth1 {width: 350px;height: 56px;display: flex;align-items: center;justify-content: space-between;padding: 0 14px;color: #fff;text-decoration: none;font-size: 20px;font-weight: 700;line-height: 1;border-radius: 8px;background: transparent;border: 0;}
.menu-depth1:hover {background: rgba(255,255,255,0.05);color: #fff;}
.menu-depth1-left {display: flex;align-items: center;gap: 12px;}

/* 2차 메뉴 */
.submenu {margin-top: 4px;}
.menu-depth2 {width: 350px;height: 54px;display: flex;align-items: center;padding: 0 18px 0 46px;color: #d9d9d9;text-decoration: none;font-size: 16px;font-weight: 600;line-height: 1;border-radius: 6px;}
.menu-depth2:hover {background: rgba(255,255,255,0.05);color: #fff;}
.menu-depth2.active {background: #1b1b1b;color: #ff2b2b;font-weight: 700;}
.menu-icon,
.submenu-icon {display: inline-flex;align-items: center;justify-content: center;color: inherit;}
.menu-icon svg {width: 20px;height: 20px;fill: currentColor;}
.submenu-icon svg {width: 18px;height: 18px;fill: currentColor;}
.menu-icon,
.menu-arrow,
.submenu-icon {display: inline-flex;align-items: center;justify-content: center;}
.menu-arrow {display: inline-block;background: transparent url('/img/cmm/menu_arr.png') no-repeat center center;background-size: 10px 7px;width: 10px;height: 7px;transition: transform 0.2s ease;}
.menu-depth1[aria-expanded="true"] .menu-arrow {transform: rotate(180deg);}

/* 우측 샘플 영역 */
.content-area {flex: 1;background: linear-gradient(180deg, #111 0%, #1a1a1a 100%);min-width: 0; padding-bottom:100px;}
.content-inner {padding: 40px;}

/* =========================
우측 콘텐츠 영역
========================= */

/* 상단 헤더 */
.content-header {height: 100px;display: flex;align-items: center;justify-content: space-between;padding: 0 32px;border-bottom: 1px solid rgba(255,255,255,0.05);background: #00000066;}
.header-left {display: flex;align-items: center;}
.menu-toggle-btn {width: 40px;height: 40px;border: 0;background: transparent;color: #bfbfbf;display: inline-flex;align-items: center;justify-content: center;padding: 0;cursor: pointer;}
.menu-toggle-btn:hover {color: #fff;}
.menu-toggle-btn svg {width: 18px;height: 18px;fill: currentColor;transition: transform 0.3s ease;}

/* 사이드바 접혔을 때 화살표 방향 변경 */
.layout-wrap.sidebar-collapsed .menu-toggle-btn svg {transform: rotate(180deg);}

/* 우측 상단 영역 */
.header-right {display: flex;align-items: center;gap: 18px;}
.header-link {color: #d9d9d9;text-decoration: none;font-size: 14px;font-weight: 600;}
.header-link:hover {color: #fff;}
.login-btn {height: 42px;min-width: 82px;padding: 0 24px;border-radius: 999px;background: #fff;color: #111;text-decoration: none;display: inline-flex;align-items: center;justify-content: center;font-size: 14px;font-weight: 700;}
.login-btn:hover {color: #111;}
.lang-switch {height: 42px;padding: 4px;border-radius: 999px;background: rgba(0,0,0,0.35);border: 1px solid rgba(255,255,255,0.08);display: inline-flex;align-items: center;gap: 4px;}
.lang-btn {min-width: 42px;height: 32px;padding: 0 12px;border: 0;border-radius: 999px;background: transparent;color: #cfcfcf;font-size: 12px;font-weight: 700;}
.lang-btn.active {background: #e10600;color: #fff;}

/* 본문 샘플 */
.content-body {padding: 40px; background: transparent;}

/* =========================
사이드바 접힘 상태
========================= */
.sidebar {width: 450px;min-width: 450px;transition: all 0.3s ease;overflow: hidden;}
.layout-wrap.sidebar-collapsed .sidebar {width: 0;min-width: 0;}   





@media (max-width: 768px) {

/* 사이드바 숨기기 */
.sidebar { position: fixed;left: -450px;top: 0;height: 100%;z-index: 1000;}
.sidebar.open {left: 0;}

/* 콘텐츠 전체 사용 */
.content-area {width: 100%;}

/* 헤더 */
.content-header {height: 100px;padding: 0 20px;}

/* 오른쪽 영역 */
.header-right {gap: 10px;}

/* Sign up 숨김 */
.header-link {display: none;}

/* 로그인 버튼 축소 */
.login-btn {height: 36px;min-width: 70px;padding: 0 16px;font-size: 13px;}

/* 언어 버튼 */
.lang-switch {height: 36px;}
.lang-btn {height: 28px;min-width: 36px;font-size: 11px;}

}

@media (max-width:768px){

.keyword-list{flex-wrap: nowrap;overflow-x: auto;padding-bottom:5px;}
.keyword-btn{white-space: nowrap;}

}

@media (max-width: 768px) {

.content-header {height: 100px;padding: 0 16px;display: flex;align-items: center;justify-content: space-between;}
.header-left {flex: 0 0 auto;display: flex;align-items: center;}
.header-right {flex: 0 0 auto;display: flex;align-items: center;gap: 8px;}

/* Sign up 숨김 */
.header-link {display: none !important;}
.menu-toggle-btn {width: 32px;height: 32px;}
.menu-toggle-btn svg {width: 16px;height: 16px;}
.login-btn {height: 36px;min-width: 74px;padding: 0 16px;font-size: 13px;border-radius: 999px;}
.lang-switch {height: 36px;padding: 3px;gap: 3px;}
.lang-btn {min-width: 34px;height: 28px;padding: 0 10px;font-size: 11px;}

}

@media (max-width: 768px) {

.sidebar {position: fixed;top: 0;left: -450px;width: 450px;min-width: 450px;height: 100vh;background: #000;z-index: 1050;overflow-y: auto;overflow-x: hidden;transition: left 0.3s ease;}
.layout-wrap.sidebar-collapsed .sidebar {width: 450px;min-width: 450px;}
.sidebar.open {left: 0;}
.sidebar-nav {width: 350px;margin: 0 50px;}

}

.sidebar-mobile-top { display: none;}

@media (max-width: 768px) {
	
.sidebar-mobile-top {display: flex;justify-content: flex-end;padding: 16px 16px 0 16px;}
.sidebar-close-btn {width: 36px;height: 36px;border: 0;background: transparent;color: #fff;display: inline-flex;align-items: center;justify-content: center;padding: 0;cursor: pointer;padding-right:25px;}
.sidebar-close-btn svg {width: 18px;height: 18px;fill: currentColor;}
.sidebar-logo {margin: 16px 50px 28px 50px;}

}

.sidebar-overlay {  display: none;}

@media (max-width: 768px) {
	
.sidebar-overlay {display: none;position: fixed;inset: 0;background: rgba(0,0,0,0.55);z-index: 1040;}
.sidebar-overlay.show {display: block;}

}