/* =====================================================
   onlineMedicine - Global Design System
   ===================================================== */

* { box-sizing: border-box; }

body {
	padding-top: 60px;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
	margin: 0;
	background-color: #f4f6fb;
	font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', -apple-system, sans-serif;
	color: #333;
}

/* ===== NAVBAR ===== */
.navbar.navbar-default.TopNav {
	background: #111;
	border: none;
	box-shadow: 0 2px 12px rgba(0,0,0,0.35);
	min-height: 56px;
}

.navbar.navbar-default.TopNav .navbar-brand {
	color: #fff !important;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.5px;
	padding: 15px 16px;
}

/* 청진기 이모지(🩺) 제거 */
.navbar.navbar-default.TopNav .navbar-brand::before {
	content: '';
}

.navbar.navbar-default.TopNav .navbar-nav > li > a,
.navbar.navbar-default.TopNav .navbar-nav > li > .btn-link {
	color: rgba(255,255,255,0.88) !important;
	font-size: 13px;
	font-weight: 500;
	transition: color 0.2s;
}

.navbar.navbar-default.TopNav .navbar-nav > li > a:hover,
.navbar.navbar-default.TopNav .navbar-nav > li > .btn-link:hover {
	color: #fff !important;
	background: rgba(255,255,255,0.12) !important;
}

.navbar.navbar-default.TopNav .navbar-toggle {
	border-color: rgba(255,255,255,0.5);
}
.navbar.navbar-default.TopNav .navbar-toggle .icon-bar {
	background-color: #fff;
}

.navbar.navbar-default.TopNav .form-control {
	border-radius: 20px;
	border: none;
	background: rgba(255,255,255,0.18);
	color: #fff;
	font-size: 13px;
	height: 32px;
	padding: 6px 14px;
}
.navbar.navbar-default.TopNav .form-control::placeholder { color: rgba(255,255,255,0.7); }
.navbar.navbar-default.TopNav .form-control:focus {
	background: rgba(255,255,255,0.28);
	box-shadow: none;
	outline: none;
}

.navbar.navbar-default.TopNav .btn-default {
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.5);
	background: transparent;
	color: #fff;
	font-size: 12px;
	height: 32px;
	padding: 5px 14px;
}

.navbar.navbar-default.TopNav .dropdown-menu {
	border-radius: 10px;
	border: none;
	box-shadow: 0 6px 24px rgba(0,0,0,0.15);
	overflow: hidden;
	margin-top: 4px;
	background: #fff;
	padding: 6px 0;
	min-width: 180px;
}

.navbar.navbar-default.TopNav .dropdown-menu > li > a {
	color: #333 !important;
	background: #fff !important;
	font-size: 13px;
	font-weight: 500;
	padding: 9px 18px;
	transition: background 0.15s, color 0.15s;
}

.navbar.navbar-default.TopNav .dropdown-menu > li > a:hover,
.navbar.navbar-default.TopNav .dropdown-menu > li > a:focus {
	background: #e8f0fe !important;
	color: #1a73e8 !important;
}

.navbar.navbar-default.TopNav .dropdown-menu > li.active > a,
.navbar.navbar-default.TopNav .dropdown-menu > li.active > a:hover,
.navbar.navbar-default.TopNav .dropdown-menu > li.active > a:focus {
	background: #e8f0fe !important;
	color: #1a73e8 !important;
}

.navbar.navbar-default.TopNav .dropdown-menu > .divider {
	background-color: #eef0f3;
	margin: 4px 0;
}

/* 드롭다운 토글이 열렸을 때 부모 li 배경 자연스럽게 */
.navbar.navbar-default.TopNav .navbar-nav > li.open > a,
.navbar.navbar-default.TopNav .navbar-nav > li.open > a:hover,
.navbar.navbar-default.TopNav .navbar-nav > li.open > a:focus {
	background: rgba(255,255,255,0.12) !important;
	color: #fff !important;
}

/* ===== TOP SIDE MENU ===== */
.TopSideMenu {
	background: #fff;
	border-bottom: 1px solid #e8eaf6;
	margin-top: 0;
	padding: 8px 15px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.TopSideMenu .TopSideBtn {
	border: none;
	background: transparent;
	color: #555;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 20px;
	transition: all 0.2s;
	margin: 2px;
}

.TopSideMenu .TopSideBtn:hover,
.TopSideMenu .TopSideBtn:focus {
	background: #e8f0fe;
	color: #1a73e8;
	outline: none;
}

.TopSideMenu .pager { margin: 0; }
.TopSideMenu .pager > li { display: inline; }

/* ===== MAIN CONTENT ===== */
.MainSection { min-height: calc(100vh - 120px); }

.ListDataArea {
	padding-top: 20px;
	padding-bottom: 40px;
}

/* ===== SIDE BOARD LIST ===== */
.BoardListArea .navbar-default {
	background: #fff;
	border: none;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	overflow: hidden;
}

.BoardListArea .list-group-item {
	border-left: none;
	border-right: none;
	border-color: #f0f0f0;
	padding: 10px 16px;
	transition: background 0.15s;
}

.BoardListArea .list-group-item:hover { background: #f0f4ff; }

.BoardListArea .list-group-item .btn-link {
	color: #333;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.BoardListArea .list-group-item .btn-link:hover { color: #1a73e8; }

#side_nav .list-group-item.active,
#side_nav .list-group-item.active:hover,
#side_nav .list-group-item.active:focus {
	background-color: #e8f0fe;
	border-color: #e8f0fe;
}

#side_nav { padding: 0; }
#side_nav .list-group-item .btn { padding: 0; }
#side_nav .list-group-item .btn[data-target="#make_board"] { padding: 6px 12px; }

/* ===== PANEL / CARD ===== */
.panel.panel-default {
	border: none;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	margin-bottom: 20px;
	overflow: hidden;
}

.panel-default > .panel-heading {
	background: #f8f9ff;
	border-bottom: 1px solid #e8eaf6;
	font-weight: 700;
}

.page-header {
	border-bottom: 2px solid #e8eaf6;
	margin-top: 10px;
	margin-bottom: 16px;
}

.page-header .list-group-item {
	border: none;
	background: transparent;
	padding: 4px 0;
}

.page-header h4 { font-size: 15px; font-weight: 800; margin: 0; }

/* ===== LIST GROUP ===== */
.list-group-item {
	border-radius: 0 !important;
	border-color: #f0f0f0;
	transition: background 0.15s;
}

.list-group-item:hover { background: #f8f9ff; }

.list-group-item h5 { font-size: 13px; }

/* ===== BUTTONS ===== */
.btn-primary {
	background: linear-gradient(135deg, #1a73e8, #1565c0);
	border: none;
	border-radius: 8px;
	font-weight: 600;
	transition: all 0.2s;
}
.btn-primary:hover, .btn-primary:focus {
	background: linear-gradient(135deg, #1565c0, #0d47a1);
	border: none;
	box-shadow: 0 4px 12px rgba(26,115,232,0.35);
}

.btn-default {
	border: 1px solid #dde2f0;
	border-radius: 8px;
	background: #fff;
	color: #555;
	transition: all 0.2s;
}
.btn-default:hover { border-color: #1a73e8; color: #1a73e8; background: #f0f4ff; }

/* ===== FORM ===== */
.form-control {
	border: 2px solid #e8eaf6;
	border-radius: 8px;
	height: 42px;
	font-size: 14px;
	transition: border-color 0.2s;
}
.form-control:focus {
	border-color: #1a73e8;
	box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
	outline: none;
}

/* ===== LABELS ===== */
.label.label-info {
	background: #1a73e8;
	border-radius: 4px;
	font-size: 10px;
}

/* ===== FOOTER ===== */
footer {
	background: #1a2340;
	color: rgba(255,255,255,0.7);
	margin-top: 40px;
}

.footer-inner {
	padding: 32px 0 24px;
}

.footer-content {
	text-align: center;
}

.footer-logo {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 8px;
}

.footer-desc {
	font-size: 13px;
	color: rgba(255,255,255,0.55);
	margin: 0 0 6px;
}

.footer-copy {
	font-size: 12px;
	color: rgba(255,255,255,0.35);
	margin: 0;
}

/* ===== ALERT / MESSAGE ===== */
.MessegeArea {
	margin-top: 0;
	position: fixed;
	top: 70px;
	right: 20px;
	z-index: 9000;
	width: auto;
}

.MessegeArea .alert {
	right: unset !important;
	top: unset !important;
	width: 320px !important;
	position: relative !important;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.MessegeArea .alert.moblie {
	width: unset !important;
}

/* ===== BADGE ===== */
.mybadge {
	display: inline-block;
	min-width: 10px;
	padding: 3px 7px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	background-color: #e53935;
	border-radius: 10px;
}
.list-group-item > .mybadge { float: right; }

/* ===== PAGINATION ===== */
.PagenationArea .PageNumBtn,
.BoardPageNation .PageNumBtn {
	padding: 6px 12px;
	position: relative;
	float: left;
	line-height: 1.42857143;
	color: #555;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #dde2f0;
	margin: 3px;
	border-radius: 6px;
	transition: all 0.15s;
}

.PagenationArea .PageNumBtn:hover,
.BoardPageNation .PageNumBtn:hover {
	border-color: #1a73e8;
	background-color: #e8f0fe;
	color: #1a73e8;
}

.PagenationArea .PageNumBtn.active,
.BoardPageNation .PageNumBtn.active {
	color: #1a73e8;
	border-color: #1a73e8;
	background-color: #e8f0fe;
	font-weight: 700;
}

.PagenationArea .PageNumBtn:focus,
.BoardPageNation .PageNumBtn:focus,
.btn:focus,
.table .btn:focus { outline: none; }

/* ===== VIEW / BOARD DETAIL ===== */
.view_title,
.My_list_title {
	padding: 12px 20px;
	margin-bottom: 12px;
	border: 1px solid #eee;
	border-left-width: 5px;
	border-radius: 8px;
	background: #fff;
	font-weight: 700;
	font-size: 15px;
}

.view_title_point { border-left-color: #f6a623; }
.My_list_title_point { border-left-color: #1a73e8; }

/* ===== MISC ===== */
.SelectList { background-color: #f0f8ff; }
.BoardListArea .list-group { margin: 0; }
.BoardAddDataArea { padding-top: 0; padding-bottom: 30px; }
.ControlBtnArea { padding-top: 15px; padding-bottom: 30px; }
.AddDelMyNoteBtnArea { padding-top: 5px; padding-bottom: 5px; }

.AddDelMyNoteBtn[data-situ="1"] {
	color: #fff;
	background-color: #e53935;
	border-color: #c62828;
}

.btn.Authority { border-radius: 50%; padding: 10px; }
.btn.Authority[value="1"] { background-color: #43a047; color: #fff; border: none; }
.btn.Authority[value="0"] { background-color: #e53935; color: #fff; border: none; }

.BoardOnOffModeBtn[data-value="1"]:before { content: '공개중'; }
.BoardOnOffModeBtn[data-value="0"]:before { content: '비공개중'; }

/* ===== LOADING ANIMATION ===== */
.btn .Loding { font-size: 14px; }

.Loding {
	animation: Loding 1.2s linear infinite reverse;
	-webkit-animation: Loding 1.2s linear infinite reverse;
}

@keyframes Loding {
	from { transform: rotate(360deg); }
	to { transform: rotate(0deg); }
}
@-webkit-keyframes Loding {
	from { transform: rotate(360deg); }
	to { transform: rotate(0deg); }
}

/* ===== LAYOUT PADDING ===== */
#side_nav .list-group-item .btn-link { font-size: 13px; }
#description_div { margin-top: 15px; }
#writh_but { margin-bottom: 20px; float: right; }
.SimulStartBtn { margin-top: 20px; float: right; margin-right: 15px; }
#submit_but { margin-top: 15px; float: right; margin-right: 0; }
#div_button { margin-top: 15px; }
#nodic_div { margin-top: 15px; }
#label_radio { padding-left: 15px; }
#professor_div { margin-top: 15px; }
#input_div { margin-top: 15px; }
#text_div { padding-top: 20px; padding-right: 5px; }
#simulated_main { padding-top: 60px; }
#foundqize_main { padding-top: 60px; }
#simulate_div { padding-bottom: 200px; }
#comment_div { padding-top: 60px; }
#cm_textbox_div { height: auto; min-height: 500px; }
#found_pass_div { padding-top: 60px; }
#text_writh_div { padding-top: 60px; }
#text_view_div { padding-top: 60px; }
#subject_borad_div { padding-top: 100px; }



.btn.LoadBoardData:focus{
	board: none;
	outline: none;
}

.btn .Loding{
	font-size: 12px;
}

@-webkit-keyframes Loding {	
    from {
    	transform: rotate(360deg);
    }
    to {
    	transform: rotate(0deg);
    }
}



.PagenationArea .PageNumBtn,
.BoardPageNation .PageNumBtn{	
	padding: 6px 12px;
	position: relative;
    float: left;
    line-height: 1.42857143;
    color: #808080;
    text-decoration: none;
    text-decoration-line: none;
    background-color: #337ab700;
    border: 1px solid #ffffff;        
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;    
}
.PagenationArea .PageNumBtn:hover,
.BoardPageNation .PageNumBtn:hover{
	border: 1px solid rgb(0 0 0 30%);
	background-color: #eaeaea;
}
 
.PagenationArea .PageNumBtn.active,
.BoardPageNation .PageNumBtn.active {	
    color: #808080;
    border-color: #000000;    
    background-color: #337ab700;    
    text-decoration-line: none;  
}



.PagenationArea .PageNumBtn:focus,
.BoardPageNation .PageNumBtn:focus,
.btn:focus,
.table .btn:focus {	 
    border: 0px solid rgb(0 0 0 0%);
	outline:none;  
}


.SelectList{	
	background-color: #f3fdff;	
}

.MessegeArea{
	margin-top: 70px;
}

.MessegeArea .alert{
	right: -519px;
	top: -40px;
    width: 320px;
    position: absolute;
}

.MessegeArea .alert.moblie{
	right: unset;
	top: unset;
    width: unset;
    position: unset;
}

.MessegeArea p{
	margin-top: 3px;
	margin-bottom: 3px;
}



.BoardListArea .list-group{
	margin: 0px;
}

.BoardOnOffModeBtn[data-value="1"]:before{
	content: '공개중';
}
.BoardOnOffModeBtn[data-value="0"]:before{
	content: '비공개중';
}


#side_nav .list-group-item .btn,
.table .btn{
	board: 0px;
	outline: none;
	text-decoration-line: none;
}

#side_nav .list-group-item.active, 
#side_nav .list-group-item.active:hover, 
#side_nav .list-group-item.active:focus {    
    background-color: #bad5eb;
    border-color: #bad5eb;
}

#side_nav .list-group-item .btn{
	padding: 0;
}
#side_nav .list-group-item .btn[data-target="#make_board"]{
	padding: 6px 12px;
}

.BoardAddDataArea{
	padding-top: 0px;
	padding-bottom: 30px;
}

.ControlBtnArea{
	padding-top: 15px;
	padding-bottom: 30px;
}

/*img {width:200px;}*/

#description_div {margin-top:15px;}

#comment_main_div {width:100%; background-color:black;}
#comment_main_div img{width:15px;}

#writh_but{margin-bottom:20px; float:right;}

.SimulStartBtn{
	margin-top:20px; float:right; margin-right:15px;
}
#submit_but{margin-top:15px; float:right; margin-right:0px;}

#div_button{margin-top:15px;}

#nodic_div{margin-top:15px;}

#label_radio{padding-left:15px;}

#professor_div{margin-top:15px;}
#input_div{margin-top:15px;}
#text_div{padding-top:20px; padding-right:5px; }

#simulated_main{padding-top:60px;}
#foundqize_main{padding-top:60px;}
#simulate_div{padding-bottom:200px;}
#comment_div{padding-top:60px;}
#cm_textbox_div{height:auto;min-height:500px}

#found_pass_div{padding-top:60px;}
#text_writh_div{padding-top:60px;}
#text_view_div{padding-top:60px;}
#subject_borad_div{padding-top:100px;}


.view_title_point {
border-left-color: #f0ad4e;
}

.view_title,
.My_list_title {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 10px;
	border: 1px solid #eee;
	border-left-width: 5px;
	border-radius: 3px;
}

.My_list_title_point {
border-left-color: #428bca;
}

.AddDelMyNoteBtnArea{
	padding-top: 5px;
	padding-bottom: 5px;
}

.mybadge{
	display: inline-block;
	min-width: 10px;
	padding: 3px 7px;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	background-color: #d9534f;
	border-radius: 10px;
}

.list-group-item > .mybadge {
    float: right;
}

.AddDelMyNoteBtn[data-situ="1"]{
	color: rgb(255, 255, 255);
    background-color: rgb(217, 83, 79);
    border-color: rgb(212, 63, 58);
}
.AddDelMyNoteBtn.disabled[data-situ="1"]{
	color: rgb(0, 0, 0);
}

.AddDelMyNoteBtn[data-situ="0"]{
	color: rgb(0, 0, 0);
}

.btn.Authority{
	border-radius: 50%;
	padding: 10px;
}

.btn.Authority[value="1"]{
	background-color: #04dd00;
}
.btn.Authority[value="0"]{
	background-color: red;
}


/*로딩 시작*/
.Loding{
	
	animation-name: Loding;
	animation-duration: 4s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: reverse;

	-webkit-animation-name: Loding;
	-webkit-animation-duration: 4s;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-direction: reverse;


}
@keyframes Loding {	
    from {
    	transform: rotate(360deg);
    }
    to {
    	transform: rotate(0deg);
    }
}
/*로딩 끝*/
/* ── 게시물 상세 메타바 (블록쿼트 안의 footer) — 투명 배경 + 검정 글씨 ──
   기본 Bootstrap 스타일 또는 다른 override 가 어둡게 잡혀 가독성이 떨어지는 문제 해결.
   게시번호 · 날짜 · 게시자 정보가 검은 글씨로 평이하게 보이도록 통일.
   .ViewDataArea 와 .ListDataArea 둘 다 — 어떤 게시물 상세 페이지든 적용 (suggests/board/community/notic). */
.ViewDataArea blockquote,
.ListDataArea blockquote,
.container blockquote {
	border-left-color: #ddd;
	background: transparent;
	padding-left: 16px;
}
.ViewDataArea blockquote footer,
.ViewDataArea blockquote .small,
.ViewDataArea blockquote small,
.ListDataArea blockquote footer,
.ListDataArea blockquote .small,
.ListDataArea blockquote small,
.container blockquote footer,
.container blockquote .small,
.container blockquote small,
blockquote footer {
	background: transparent !important;
	color: #222 !important;
	font-size: 13px;
	padding: 4px 0 !important;
	display: block;
	margin: 0 !important;
}
.ViewDataArea blockquote footer strong,
.ListDataArea blockquote footer strong,
.container blockquote footer strong,
blockquote footer strong {
	color: #000 !important;
}
.ViewDataArea blockquote footer:before,
.ListDataArea blockquote footer:before,
.container blockquote footer:before,
blockquote footer:before {
	content: '' !important; /* 기본 em-dash 제거 */
}

/* 질환 정리글 줄간격 — 넓게(Word 1.0+ 느낌). 2026-07-05 Jun 요청 */
.disease-section { line-height: 1.9; }
.disease-section p,
.disease-section li,
.disease-section td,
.disease-section th { line-height: 1.9; }
.disease-section p { margin-bottom: 12px; }
.disease-section li { margin-bottom: 7px; }
.disease-section td,
.disease-section th { padding: 8px 10px; vertical-align: top; }
.disease-section h3 { margin-top: 28px; margin-bottom: 10px; }
.disease-section ol,
.disease-section ul { margin-bottom: 14px; }

/* 문제 풀이 해설 줄간격 — 질환글과 동일하게 넓게. 2026-07-05 Jun 요청 */
.qa-explanation { line-height: 1.9; }
.qa-explanation p,
.qa-explanation li,
.qa-explanation td,
.qa-explanation th { line-height: 1.9; }
.qa-explanation p { margin-bottom: 10px; }
.qa-explanation li { margin-bottom: 6px; }