@charset "UTF-8";

body { --left-width:0px; }

/* main */
section.main_wrap { height:100vh; --left-width:278px; } 
section.main_wrap article.main_left    { position:fixed; left:0px; top:0px; width:var(--left-width); height:100vh; border-right:1px solid var(--color-G3); overflow-y:scroll; }
section.main_wrap article.main_top     { position:fixed; top:0; left:var(--left-width); right:0; height:52px; z-index:50; display:flex; align-items:center; justify-content:flex-end; padding:0 20px; background-color:#fff; }
section.main_wrap.no_session article.main_content { padding-top:52px; }
section.main_wrap article.main_content { margin-left:var(--left-width); width:calc(100% - var(--left-width)); height:100vh; justify-content: center;  min-width: 0; }
/******/

/* 비로그인 상단 로그인/회원가입 버튼 */
.main_top_auth { display:flex; gap:8px; align-items:center; }
.main_top_auth .btn_login  { height:36px; padding:0 16px; border:none; border-radius:18px; background-color:var(--color-BL); color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:opacity 0.2s; }
.main_top_auth .btn_login:hover  { opacity:0.85; }
.main_top_auth .btn_signup { height:36px; padding:0 16px; border:1px solid var(--color-G4); border-radius:18px; background-color:#fff; color:var(--color-BL); font-size:14px; font-weight:600; cursor:pointer; transition:background-color 0.2s; }
.main_top_auth .btn_signup:hover { background-color:var(--color-G2); }

nav.main_left { 
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; 
	--left-fix-top:250px;
	--left-fix-bottom:74px;
}

nav.main_left .fold_show{ display: none;}
nav.main_left div.left_01 { width:calc(var(--left-width) - 7px); height:var(--left-fix-top); position:fixed; top:0px; background-color:#fff }
nav.main_left div.left_01 div.logo_wrap { height: 50px; margin-top: 24px; }
nav.main_left div.left_01 div.logo_wrap .logo img { cursor:pointer; height: 30px; margin-top: 10px; margin-left: 12px; }
nav.main_left div.left_01 div.logo_wrap i { float:right; cursor:pointer; width: 24px; height: 24px; margin:13px 13px; }
nav.main_left div.left_01 ul { margin: 20px 13px 0 12px;}
nav.main_left div.left_01 ul .main_left_menu { width: 100%; height: 44px; opacity: 1;border-radius: 12px; display: flex; gap:8px; align-items: center; }
nav.main_left div.left_01 ul .main_left_menu i { display:inline-block; line-height:44px; height:44px; margin-left: 10px; } 
nav.main_left div.left_01 ul .main_left_menu.active { background: var(--color-G3); }
nav.main_left div.left_01 ul .main_left_menu .text { cursor: pointer; display:inline-block; line-height:44px; height:44px; font-weight: 700; font-size: 14px; width: calc(100% - 50px); white-space: nowrap; overflow: clip;}
nav.main_left div.left_01 div.recent { margin-top:20px; margin-left: 12px; padding: 10px; font-weight: 800; font-size: 14px; line-height: 100%; color: var(--color-G5); } 

nav.main_left ul.recent    { margin-top:var(--left-fix-top); margin-bottom:var(--left-fix-bottom); padding-left: 12px;}
nav.main_left ul.recent li { height:36px; line-height:36px; padding-left: 10px; font-weight: 400; font-size: 14px; overflow:hidden; white-space:nowrap; }
nav.main_left ul.recent li.create { position:relative; margin-bottom:6px; border-radius:15px; background:#f3f4f6; overflow:hidden; font-size:14px; cursor:pointer; }
nav.main_left ul.recent li.create span{ position:relative; z-index:1; }
nav.main_left ul.recent li.create::before{ content:""; position:absolute; inset:0; width: calc(var(--rate) + 10%); background: linear-gradient(120deg, #d9d9d9, #f0f0f0, #c7c7c7, #d9d9d9); background-size:200% 100%; border-radius:0px 15px 15px 0px; z-index:0; transition:width .4s ease-out; animation:waveMove 1.8s ease-in-out infinite; }
nav.main_left ul.recent li.create span { display: inline-block; width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
nav.main_left ul.recent li.create i   { position: absolute; margin:7px 7px 0px 0px; }
nav.main_left ul.recent li.views      { display:flex; cursor:pointer; border-radius:10px }
nav.main_left ul.recent li.views span { display:inline-block; width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
nav.main_left ul.recent li.views i    { display:none; margin-left:3px; height:35px; }
nav.main_left ul.recent li.views:hover      { background-color:var(--color-G2); }
nav.main_left ul.recent li.views:hover span { width:210px; }
nav.main_left ul.recent li.views:hover i    { display:inline-block }
#recent_more { position:fixed; background-color:#fff; border:1px solid var(--color-G3); box-shadow: 0px 1px 4px 0px #0000001A; padding:5px; border-radius:12px; z-index:9999 }
#recent_more li { border-radius:12px; padding:6px 10px; cursor:pointer  }
#recent_more li:hover { background-color:var(--color-G2); }
#recent_more li .stat { display: inline; }
#recent_more li .unstar { display: none; }
#recent_more .icon[data-fav-seq]:not([data-fav-seq=""]) ~ .stat { display: none; }
#recent_more .icon[data-fav-seq]:not([data-fav-seq=""]) ~ .unstar { display: inline; }

/* 출렁이는 느낌 */
@keyframes waveMove{
  0%{   background-position:0% 50%;  }
  50%{  background-position:100% 50%;}
  100%{ background-position:0% 50%;  }
}

nav.main_left div.left_99 { width:calc(var(--left-width) - 20px); position:fixed; bottom:0px; height:var(--left-fix-bottom); padding-left: 12px; line-height: var(--left-fix-bottom); border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; background-color: var(--color-WH) }
nav.main_left div.user_box { width:calc(var(--left-width) - 32px); height:50px; padding: 0 10px; border-radius: 12px; display: flex; align-items: center; gap: 12px; background-color: var(--color-WH); cursor: pointer; transition: background-color 0.2s ease; }
nav.main_left div.user_box:hover { background-color: var(--color-G2); }
nav.main_left div.user_box.active { background-color: var(--color-G3); }
nav.main_left .user_box .user_meta { display:flex; flex-direction:column; gap:2px; line-height:1.1; flex:1 1 auto; min-width:0;}
nav.main_left .user_box .user_meta .name{ font-weight:800; font-size:14px; color:var(--color-BL);  /* 굵은 이름 */white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
nav.main_left .user_box .user_meta .plan{ font-weight: 400; font-size:12px; line-height: 100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* 사용자 드롭다운 메뉴 (작은 팝업 박스) */
nav.main_left .user_dropdown_menu {
	position: fixed;
	bottom: 84px;
	left: 12px;
	width: 240px;
	background: var(--color-WH);
	border: 1px solid var(--color-G3);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 1000;
	padding: 8px;
}
nav.main_left .user_dropdown_menu.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* 드롭다운 헤더 */
nav.main_left .dropdown_header {
	padding: 10px 8px;
}
nav.main_left .dropdown_user_email {
	font-size: 13px;
	font-weight: 400;
	color: var(--color-BL);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 드롭다운 메뉴 리스트 */
nav.main_left .dropdown_menu_list {
	list-style: none;
	padding: 0;
	margin: 0;
}
nav.main_left .dropdown_menu_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px;
	cursor: pointer;
	transition: background-color 0.15s ease;
	font-size: 14px;
	font-weight: 400;
	color: var(--color-BL);
	border-radius: 6px;
}
nav.main_left .dropdown_menu_item:hover {
	background-color: var(--color-G2);
}
nav.main_left .dropdown_menu_item i.icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
nav.main_left .dropdown_menu_item span {
	flex: 1;
}
nav.main_left .dropdown_menu_item.dropdown_item_with_arrow i.icon.arrow_right {
	width: 16px;
	height: 16px;
	margin-left: auto;
}

/* 드롭다운 구분선 */
nav.main_left .dropdown_divider {
	height: 1px;
	background-color: var(--color-G3);
	margin: 8px 0;
}

/* 드롭다운 푸터 */
nav.main_left .dropdown_footer {
	padding-top: 8px;
	border-top: 1px solid var(--color-G3);
	margin-top: 8px;
}



/* fold */
section.main_wrap.fold { --left-width:72px }
section.main_wrap.fold .fold_show{ display: block; }
section.main_wrap.fold article.main_left .fold_hidden { display:none }
section.main_wrap.fold article.main_left .main_left_menu.active { background: var(--color-WH); }
section.main_wrap.fold article.main_left .main_left_menu:hover { background: var(--color-G3); }
section.main_wrap.fold article.main_left .left_01 { width:calc(var(--left-width) - 1px); }
section.main_wrap.fold article.main_left .left_01 ul .main_left_menu { width: 44px; height: 44px; }
section.main_wrap.fold article.main_left .left_01 div.logo_wrap i.fold_show { float:left; cursor:pointer; width: 24px; height: 24px; margin:13px 22px; }

.user_box span.user_photo         { display:inline-block; width:28px; height:28px; border-radius:100%; overflow:hidden; line-height: 28px; }
.user_box span.user_photo img     { display:inline-block; width:28px; height:28px; }
.user_box span.user_photo span.ci { display:inline-block; width:28px; height:28px; text-align:center; color:#fff; }


section.main_wrap.fold article.main_left .user_dropdown_menu { display: none !important; }


.ci.ci_0 { background-color:#DD6359; color:#fff; font-size: 12px; }
.ci.ci_1 { background-color:#FFA055; color:#fff; font-size: 12px; }
.ci.ci_2 { background-color:#FFDC67; color:#fff; font-size: 12px; }
.ci.ci_3 { background-color:#D6A688; color:#fff; font-size: 12px; }
.ci.ci_4 { background-color:#CCDBAB; color:#fff; font-size: 12px; }
.ci.ci_5 { background-color:#59897B; color:#fff; font-size: 12px; }
.ci.ci_6 { background-color:#B4D7FF; color:#fff; font-size: 12px; }
.ci.ci_7 { background-color:#3E3380; color:#fff; font-size: 12px; }
.ci.ci_8 { background-color:#CFC5EF; color:#fff; font-size: 12px; }
.ci.ci_9 { background-color:#E4E4E4; color:#fff; font-size: 12px; }
.ci.ci_99 { background-color:#FAFAFA; color:#BFBFBF; font-size: 12px; }


/* simple */

section.simple_wrap { display: flex; height:100vh; flex-direction: column; } 
section.simple_wrap article.simple_content { width:100%; display:flex; /* align-items: center; */ justify-content: center; height:100vh; min-width: 0; }
section.simple_wrap article.simple_footer { width: 100%; margin-bottom : 20px; font-weight: 700; font-size: 16px; line-height: 160%; text-align: center; color: var(--color-G5); }
/******/



/* sub */
section.sub_wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
section.sub_wrap article.sub_content {
  width: 100%;
  flex: 1;
}

.sub_header { position: sticky; top: 0; z-index: 50; background:#fff; border-bottom:1px solid var(--color-G3); }
.sub_header__inner { max-width: 1445px; margin: 0 auto; height: 72px; display:flex; align-items:center; justify-content:space-between; padding: 0 24px; }
.sub_header .brand img { height:auto; max-height:28px; display:block;  }
.sub_header .gnb ul { display:flex; gap:24px; align-items:center; }
.sub_header .gnb ul li{ font-weight: 700; font-size: 15px; line-height: 100%; }
.sub_header .gnb a { font-weight:600; }
.sub_header .gnb .btn-try { padding-top: 10px;  padding-right: 20px; padding-bottom: 10px; padding-left: 20px; border-radius: 8px; font-weight: 800; font-size: 15px; background: var(--color-BL); color:  var(--color-WH); } 
.sub_header .brand{ display:flex; align-items:center; gap:8px; text-decoration:none; }
.sub_header .brand__icon{ height:41px; width:auto; display:block; }
.sub_header .brand__text{ font-weight:800; font-size:36px; line-height:1; letter-spacing:0; color:#262626; display:block; }
.sub_header .brand__ai{ color: #EE713D; }
.sub_header .brand img.beta__icon { margin-top: 5px;}


.sub_footer { background: var(--color-BL); border-top: 1px solid var(--color-G3);}
.sub_footer__inner {max-width: 1445px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; text-align: center; }

/* 로고(아이콘+텍스트) */
.sub_footer .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;}
.sub_footer .brand__icon { height: 18px; width: auto; display: block; } /* 피그처럼 작은 아이콘 */
.sub_footer .brand__text { font-family: 'NanumSquare', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-weight: 800; font-size: 14px; /* 푸터는 작은 타이틀 */ line-height: 1; color: #fff; opacity: .9; }

/* 카피 */
.sub_footer .footer_copy { font-weight: 600;  font-size: 14px;  line-height: 1; color: #cbd5e1;                          /* 밝은 회색 톤 */}

/* 메뉴(가운데 배치) */
.sub_footer .footer_menu {  display: inline-flex; align-items: center; gap: 18px; list-style: none; padding: 0; margin: 0; }
.sub_footer .footer_menu a {  font-weight: 600; font-size: 14px; color: #cbd5e1; text-decoration: none; }
.sub_footer .footer_menu a:hover { text-decoration: underline; }

.sub_footer .footer_corp_info { max-width: 1445px; margin: 0 auto; text-align: center; color: var(--color-WH); font-size: 12px; padding-bottom: 20px;}

/* simple2 */
section.simple2_wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
section.simple2_wrap article.simple2_content {
  width: 100%;
  flex: 1;
}

.simple2_header { position: sticky; top: 0; z-index: 50; background:#fff; }
.simple2_header__inner { max-width: 1445px; margin: 0 auto; height: 72px; display:flex; align-items:center; justify-content:space-between; padding: 0 24px; }
.simple2_header .brand img { height:auto; max-height:28px; display:block; }
.simple2_header .brand{ display:flex; align-items:center; gap:8px; text-decoration:none; }
.simple2_header .brand__icon{ height:41px; width:auto; display:block; }
.simple2_header .brand__text{ font-weight:800; font-size:36px; line-height:1; letter-spacing:0; color:#262626; display:block; }
.simple2_header .brand__ai{ color: #EE713D; }
.simple2_header .brand img.beta__icon{ margin-top: 5px;}

/* 로고(아이콘+텍스트) */
.simple2_footer .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;}
.simple2_footer .brand__icon { height: 18px; width: auto; display: block; } /* 피그처럼 작은 아이콘 */
.simple2_footer .brand__text { font-family: 'NanumSquare', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-weight: 800; font-size: 14px; /* 푸터는 작은 타이틀 */ line-height: 1; color: #fff; opacity: .9; }


@media (max-width: 800px) {
	section.main_wrap { height:100vh; --left-width:278px; } 
	section.main_wrap article.main_left    { position:fixed; background-color:#fff; left:0px; top:0px; width:var(--left-width); height:100vh; border-right:1px solid var(--color-G3); overflow-y:scroll; z-index:100 }
	section.main_wrap article.main_top     { left:71px; }
	section.main_wrap article.main_content { margin-left:71px; width:calc(100% - 71px); height:100vh; justify-content: center;  min-width: 0;  }
	section.fold div.user_box { display:none !important }
	.sub_header .brand__text { display:none }
	.sub_header .brand img.beta__icon { display:none }
	.sub_header .gnb .btn-try { padding:5px; font-size:12px }
}


/* ========== RESPONSIVE HELPERS ========== */
@media (max-width: 1200px) {
 	.sub_header__inner { padding: 0 16px; }
 	.sub_footer__inner { padding: 16px; }
 
	/* simple2 */
 	.simple2_header__inner { padding: 0 16px; }
}
@media (max-width: 768px) {
  	.sub_header__inner { height: 64px; }
  	.sub_header .gnb ul { gap: 16px; }
  
  	.sub_footer__inner { gap: 12px; }
  	.sub_footer .brand__text, .sub_footer .footer_copy, .sub_footer .footer_menu a { font-size: 13px; }
  	
  	
	/* simple2 */
  	.simple2_header__inner { height: 64px; }
	
}