/* CSS Document */
/*****Reset*****/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

body, td, select, div, p, pre, input, form, textarea, center, option, pre, blockquote {
	font-family: 'Nanum Gothic','helvetica neue', helvetica, Dotum, sans-serif;
	letter-spacing: 0px;
	word-break: keep-all;
}
a, button {
	font-family: 'Nanum Gothic','helvetica neue', helvetica, Dotum, sans-serif;
	letter-spacing: 0px;
	word-break: keep-all;
}

#content_area h1, #content_area h3, #con_area h1, #con_area h3 {
	font-family: 'Nanum Gothic','helvetica neue', helvetica, Dotum, sans-serif;
	font-style: normal;
	font-weight: 800;
	margin-bottom: 10px;
	word-break: keep-all;
}
h1, h3 {
	font-family: 'Nanum Gothic','helvetica neue', helvetica, Dotum, sans-serif;
	font-style: normal;
	font-weight: 800;
	margin-bottom: 10px;
	word-break: keep-all;
}

/*** 상단 우측 영역 고정 ***/
#right_top_shape {
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 100;
}
.logo_shape {
	filter: alpha(opacity=50);
	width: 32px;
}
.font_serif {
	font-family: '나눔 명조','Nanum Myeongjo';
	font-style: normal;
	font-weight: bold;
	font-weight: 800;
}
body {
	color: #555555;
}
i {
	font-size: 16px;
	padding-right: 10px;
}
p, ul, ol, dl, table { margin-bottom: 5px; }
ul, ol, dd { margin-left: 36px; }
img { border: 0; }

h1 {
	font-size: 30px;
	line-height: 35px;
	font-style: bold;
}
h3 {
	font-size: 18px;
	line-height: 25px;
	letter-spacing: 0px;
	font-style: bold;
}

/* ── input style ── */
input.basic_ip, textarea.basic_ip {
	background: #efefef;
	border: 0;
	width: 98%;
	height: 30px;
	margin-bottom: 5px;
}
input.email01 {
	background: #efefef url(/img/land/bg_email.jpg) no-repeat;
	border: 0;
	width: 98%;
	height: 30px;
	margin-bottom: 5px;
}
input.email01_1, input.focus_area {
	background: #efefef;
	border: 0;
	width: 98%;
	height: 30px;
	margin-bottom: 5px;
}
input.url01 {
	background: #efefef url(/img/land/bg_url.jpg) no-repeat;
	border: 0;
	width: 98%;
	height: 30px;
	margin-bottom: 5px;
}
input.url_txt_01 {
	background: #efefef url(/img/input/bg_url_txt.jpg) no-repeat;
	border: 0;
	width: 98%;
	height: 30px;
	margin-bottom: 5px;
}
input.title {
	background: #efefef url(/img/input/bg_title.jpg) no-repeat;
	border: 0;
	width: 98%;
	height: 30px;
	margin-bottom: 5px;
}
input.password {
	background: #efefef url(/img/input/bg_password.jpg) no-repeat;
	border: 0;
	width: 98%;
	height: 30px;
	margin-bottom: 5px;
}
input.logo {
	background: #efefef url(/img/input/bg_logo.jpg) no-repeat;
	border: 0;
	width: 98%;
	height: 30px;
	margin-bottom: 5px;
}
input.guide {
	background: #efefef;
	border: 0;
	width: 98%;
	height: 30px;
	margin-bottom: 5px;
}
input.location {
	background: #efefef url(/img/input/bg_location.jpg) no-repeat;
	border: 0;
	width: 98%;
	height: 30px;
	margin-bottom: 5px;
}
input.teamname {
	background: #efefef url(/img/input/bg_team_name.jpg) no-repeat;
	border: 0;
	width: 98%;
	height: 30px;
	margin-bottom: 5px;
}
textarea.summary {
	background: #efefef url(/img/input/bg_url_txt.jpg) no-repeat;
	border: 0;
	width: 99%;
	height: 100px;
	margin-bottom: 5px;
}
textarea.focus_area {
	background: #efefef;
	border: 0;
	width: 99%;
	height: 100px;
	margin-bottom: 5px;
}
#add_other_info input {
	border: 1px solid #cdcdcd;
}

/* ── link ── */
A { color: #3a76ab; font-weight: bold; text-decoration: none; cursor: pointer; }
A:link { color: #3a76ab; font-weight: bold; text-decoration: none; }
A:visited { color: #3a76ab; font-weight: bold; text-decoration: underline; }
A:hover { color: #3a76ab; font-weight: bold; text-decoration: underline; }
A:active { color: #3a76ab; font-weight: bold; text-decoration: none; }

input.box {
	border: 1px solid #d5d0ca;
	color: #656565;
	font: 12px/15px '돋움', sans-serif;
	height: 15px;
	padding: 2px 3px;
	vertical-align: middle;
}

/* ── Font style ── */
.comment { color: #ccbd48; }
.t_title {
	clear: both;
	width: 100%;
	color: #738e3d;
	font-weight: bold;
	padding-top: 5px;
	margin-bottom: 10px;
}
.t_basic {
	color: #738e3d;
	float: left;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100%;
}
.t_say {
	color: #727b6a;
	font-size: 12px;
	line-height: 18px;
}
.t_say_unbg {
	color: #738e3d;
	font-size: 15px;
	line-height: 18px;
}
.dg_txt {
	background-color: #515248;
	color: #ffffff;
	font-weight: bold;
	font-size: 15px;
	line-height: 18px;
}
.fs1 {
	font-size: 12pt;
	color: #000000;
	font-family: "arial";
	text-align: left;
	background-color: #aaeecc;
}
.line_w {
	background-color: #e9e9e9;
	height: 1px;
	width: 100%;
}

/* ── iframe/device ── */
#container_iframe {
	width: 100%;
	text-align: center;
	background: url("/img/bg/design/grey.jpg");
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}
#device_form {
	position: relative;
	display: inline-block;
	margin: 10px auto 10px;
	padding: 21px;
	background: #fff;
	border: 1px solid #aaa;
	border-radius: 10px;
	box-shadow: 0 12px 25px rgba(0,0,0,0.25);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}
#con_iframe {
	position: relative;
	display: inline-block;
	margin: 20px auto 30px;
	vertical-align: top;
	overflow-x: hidden;
	height: 640px;
}

/* ── modal ── */
#simplemodal-overlay { background-color: #000; }
#modal_content {
	display: none;
	margin: 50px auto;
	width: 300px;
	height: 200px;
	background: #ffffff url(/img/land/bg_modal.jpg) no-repeat right top;
}
#modal_txt {
	font-size: 15px;
	font-weight: bold;
	width: 100%;
	margin-top: 70px;
	height: 90px;
	float: left;
	text-align: center;
}
#login_close {
	float: left;
	height: 30px;
	margin-bottom: 10px;
	width: 100%;
	text-align: center;
}

/* ── background/width ── */
.bg_wg { background-color: #efefef; }
.w_100 { width: 100%; }
.padding_10px { padding: 10px; }
.alpha50 { filter: alpha(opacity=50); opacity: 0.5; }
.alpha100 { filter: alpha(opacity=100); opacity: 1; }

/* ── table ── */
.admin_table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}
.admin_table td, .admin_table th {
	font-size: 8pt;
	border: 1px solid #cdcdcd;
	height: 30px;
	padding-left: 5px;
	padding-right: 5px;
}
.admin_table td { color: #000000; background-color: #efefef; }
.admin_table a { font-size: 8pt; }

/* ── 공통영역 ── */
#add_other_info, #team_mate_add, #team_add, #linked_url_add,
#linked_url_edit_area, #graph_add, #graph_edit_area, #emlist_add { display: none; }
#graph_add { font-size: 12px; }
#graph_now { width: 100%; margin-top: 15px; }
#graph_add table tr td { vertical-align: top; }
#post_graph_edit, #goal_graph_list { display: none; }
#goal_graph_form, #goal_graph_list {
	display: none;
	float: left;
	width: 90%;
	margin-top: 15px;
	padding: 20px 5%;
	background: #efefef;
}
#goal_graph_form input { border: 1px solid #cdcdcd; }
#goal_graph_form table tr td { vertical-align: top; }

.ggraph_area_all { background: #ebebe3; }
.ggraph_area { width: 90%; text-align: center; padding-left: 5%; padding-right: 5%; }
.ggraph_collor { color: #dd4d10; margin-top: 20px; }
.ggraph_collor_bg { background: #dd4d10; height: 30px; }
.ggraph_st { display: none; }
#ggraph_values { text-align: left; }

#el_con_area {
	float: left;
	width: 95%;
	padding: 15px 2%;
	text-align: center;
	font-weight: normal;
	border: 1px solid #efefef;
}
.hr_st {
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0,0,0,0.1);
	border-bottom: 1px solid rgba(255,255,255,0.3);
	margin-top: 20px;
	margin-bottom: 20px;
}
.button_div {
	border: 1px #efefef solid;
	background: #ffffff;
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	float: left;
	text-align: center;
	margin-bottom: 5px;
	cursor: pointer;
	font-weight: bold;
}
.button_div:hover {
	border: 1px #cdcdcd solid;
	padding-top: 15px;
	padding-bottom: 15px;
	float: left;
	text-align: center;
	margin-bottom: 5px;
	cursor: pointer;
	font-weight: bold;
	background-color: #cdcdcd;
}
#page_rec {
	clear: both;
	width: 100%;
	padding-top: 30px;
	padding-bottom: 30px;
	border-top: 1px solid #efefef;
	text-align: center;
	font-size: 20px;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}
#page_rec_con {
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
	color: #ffffff;
	text-shadow: -1px -1px 0 #555555, 1px -1px 0 #555555, -1px 1px 0 #555555, 1px 1px 0 #555555;
}
#page_rec_con a { color: #ffffff; }

#bottom {
	clear: both;
	width: 100%;
	margin-top: 10px;
	padding-top: 30px;
	padding-bottom: 30px;
	border-top: 1px solid #efefef;
	text-align: center;
	color: #555555;
}
#bt_txt { padding: 15px; text-align: left; }
#bt_txt_left {
	float: left;
	text-align: left;
	width: 100%;
	font-weight: normal;
	font-size: 12px;
	color: #555555;
	padding-top: 15px;
}
#bt_txt_left a { font-weight: normal; font-size: 12px; color: #555555; }

.circular {
	width: 100px;
	height: 100px;
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border: 1px #efefef solid;
}
.circular img { opacity: 100; filter: alpha(opacity=100); }

#other_info {
	width: 100%;
	text-align: left;
	background-color: #cdcdcd;
	padding-top: 10px;
	padding-bottom: 10px;
}
#other_info h3 { padding-left: 10px; padding-right: 10px; clear: left; text-align: left; }
#other_info ul, #other_info ol {
	clear: left;
	display: block;
	width: 90%;
	margin-left: 2%;
	margin-right: 2%;
	padding-left: 3%;
	padding-right: 3%;
}
#other_info ul li, #other_info ol li { width: 100%; }

#now_weather { display: inline-block; width: 100%; }
#map_location_texts { clear: left; width: 100%; margin-top: 10px; margin-bottom: 10px; }
#ipg_service_zone { width: 100%; text-align: center; display: inline-block; }
#view_mode {
	margin-top: 20px;
	margin-bottom: 20px;
	display: inline-block;
	width: 96%;
	border: 1px solid #efefef;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 10px;
}
#share_zone { display: inline-block; width: 96%; padding-bottom: 20px; padding-right: 15px; }
#share_zone img { width: 15px; }
#recommend { float: left; min-width: 100px; text-align: left; }
#sns_area { float: right; min-width: 100px; text-align: right; padding-left: 10px; }
.link_bt { width: 10px; margin-left: 10px; }

.hr_1 { margin-top: 10px; margin-bottom: 10px; }
.bt1 { margin-left: 10px; width: 25px; }
.img1 { margin-right: 5px; width: 15px; vertical-align: middle; margin-bottom: 2px; }
.img2 { margin-left: 10px; width: 20px; }
#admin_ua_area { line-height: 35px; }

.con_div { float: left; width: 100%; border-bottom: 1px solid #cdcdcd; margin-bottom: 20px; }
#bg_area { display: none; }
.bg_img { display: none; }
.project_con { width: 100%; float: left; margin-bottom: 10px; }
.bottom_guide {
	float: left;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	border: 1px solid #cdcdcd;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 10px;
	background: #efefef;
}
#page_Category { width: 100%; margin-bottom: 15px; border: 1px solid #cdcdcd; padding: 5px; }
#menu_txt a { margin-left: 5px; margin-right: 5px; }
#series_add { float: left; width: 100%; }

.tag_area {
	float: left;
	font-size: 10px;
	margin-right: 5px;
	border: 1px solid #cdcdcd;
	border-radius: 5px;
	padding-left: 5px;
	padding-right: 5px;
	background: #efefef;
}
.app_include_css {
	float: left;
	width: 100%;
	border: 1px solid #cdcdcd;
	text-align: center;
}


/* ══════════════════════════════════════
   사이드바 (menu_left + sub_top + left_menu)
   ══════════════════════════════════════ */

/* 오버레이 */
#ipg_overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 149;
}
#ipg_overlay.open { display: block; }

/* 사이드바 컨테이너 */
.menu_left {
	position: fixed;
	top: 0; left: 0;
	width: 260px;
	height: 100vh;
	background: #2c3e50;
	z-index: 150;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	overflow-y: auto;
}
.menu_left.open { transform: translateX(0); }

.contents { transition: margin-left 0.25s ease; }

/* 햄버거 버튼 */
#an_hamburger {
	width: 40px; height: 40px;
	background: transparent; border: none;
	cursor: pointer; border-radius: 50%;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 5px; flex-shrink: 0;
	transition: background 0.15s;
}
#an_hamburger:hover { background: rgba(0,0,0,0.08); }
#an_hamburger span {
	display: block; width: 20px; height: 2px;
	background: #555; border-radius: 2px;
}

/* 사이드바 헤더 (sub_top 상단) */
.ipg-sb-header {
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px 0 20px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	flex-shrink: 0;
}
.ipg-sb-logo { font-size: 17px; font-weight: 800; color: #fff; text-decoration: none; }
.ipg-sb-close {
	width: 32px; height: 32px;
	background: none; border: none;
	color: rgba(255,255,255,0.4);
	font-size: 20px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	transition: background 0.15s, color 0.15s;
}
.ipg-sb-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* 로그인 사용자 정보 */
.ipg-sb-user {
	padding: 14px 20px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ipg-sb-user-name { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.ipg-sb-user-actions { display: flex; gap: 8px; }
.ipg-sb-action-btn {
	flex: 1; text-align: center; padding: 5px 0;
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.7);
	border-radius: 4px; font-size: 12px;
	transition: background 0.15s;
	text-decoration: none;
}
.ipg-sb-action-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* 비로그인 로그인 영역 */
.ipg-sb-login {
	padding: 16px 20px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ipg-sb-login-title { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 10px; }
.ipg-sb-input {
	display: block; width: 100%; margin-bottom: 8px;
	padding: 8px 11px; font-size: 13px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 4px; color: #fff; outline: none;
	transition: border-color 0.15s;
}
.ipg-sb-input::placeholder { color: rgba(255,255,255,0.3); }
.ipg-sb-input:focus { border-color: #32A2DB; }
.ipg-sb-login-btn {
	width: 100%; padding: 9px;
	font-size: 13px; font-weight: 700;
	background: #32A2DB; color: #fff;
	border: none; border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s;
}
.ipg-sb-login-btn:hover { background: #2188bf; }

/* 메뉴 섹션 라벨 */
.ipg-sb-section {
	font-size: 10px; font-weight: 700;
	color: rgba(255,255,255,0.3);
	text-transform: uppercase; letter-spacing: 0.1em;
	padding: 14px 20px 4px;
}

/* 메뉴 아이템 */
.ipg-sb-item {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 20px;
	color: rgba(255,255,255,0.75);
	font-size: 14px; font-weight: 500;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	transition: background 0.15s, color 0.15s;
	text-decoration: none;
}
.ipg-sb-item:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.ipg-sb-item:visited { color: rgba(255,255,255,0.75); }
.ipg-sb-item:last-child { border-bottom: none; }
.ipg-sb-icon {
	width: 22px; text-align: center;
	flex-shrink: 0; font-size: 16px;
}
.ipg-sb-icon img {
	width: 18px; height: 18px;
	object-fit: contain; opacity: 0.7;
	vertical-align: middle;
}
.ipg-sb-logout { color: #e88; }
.ipg-sb-logout:hover { background: rgba(231,76,60,0.1); color: #e74c3c; }
.ipg-sb-close-menu { color: rgba(255,255,255,0.4); }
.ipg-sb-close-menu:hover { color: rgba(255,255,255,0.7); }

/* 구 사이드바 요소 — 더 이상 사용 안 함 */
#ipg_sidebar { display: none !important; }
#login_area, #login_txt, #login_div, #login_desk { display: none; }
.menu_ul { display: none; }
.bt_sub { display: none; }


/* ══════════════════════════════════════
   반응형
   ══════════════════════════════════════ */
@media all and (max-width: 799px) {
	#recommend {
		width: 100%;
		float: left;
		text-align: center;
	}
	#sns_area {
		clear: both;
		float: left;
		width: 100%;
		padding: 0;
		margin: 0;
		text-align: center;
		margin-top: 10px;
		border-top: 1px solid #efefef;
		border-bottom: 1px solid #efefef;
		padding-top: 10px;
		padding-bottom: 10px;
		background: #ffffff;
	}
}