/* =====================================================================
   onlineMedicine — Modern Clinical Theme (2026-07-05)
   public.css 뒤에 로드되어 전역 UI 를 세련된 "모던 의료·클린" 톤으로 덮어씀.
   - 폰트: Pretendard (head.php 에서 CDN 로드)
   - 팔레트: 화이트 배경 + 딥 네이비틸 네비 + 블루/틸 포인트
   기존 파일 수정 없이 이 파일만으로 리디자인 (안전 규칙 준수).
   ===================================================================== */

:root {
	--c-bg:        #f5f7fa;
	--c-surface:   #ffffff;
	--c-ink:       #1f2733;
	--c-ink-soft:  #5b6675;
	--c-ink-faint: #93a0b0;
	--c-line:      #e7ecf2;
	--c-line-soft: #eef2f6;

	--c-primary:   #2563eb;   /* medical blue */
	--c-primary-d: #1d4ed8;
	--c-primary-dd:#1746b8;
	--c-accent:    #0ea5b7;   /* teal accent */
	--c-accent-d:  #0b8494;
	--c-primary-wash:#eef4ff;
	--c-accent-wash: #e6f7f9;

	--c-nav-a:     #0f2a44;   /* deep navy */
	--c-nav-b:     #124e64;   /* teal-navy */

	--c-danger:    #ef4444;
	--c-success:   #16a34a;
	--c-warn:      #f59e0b;

	--radius:      14px;
	--radius-sm:   10px;
	--shadow-sm:   0 1px 3px rgba(20,40,70,0.06), 0 1px 2px rgba(20,40,70,0.04);
	--shadow-md:   0 6px 20px rgba(20,40,70,0.08);
	--shadow-lg:   0 16px 44px rgba(20,40,70,0.14);
	--ease:        cubic-bezier(.4,0,.2,1);
}

/* ===== BASE ===== */
body {
	background: var(--c-bg) !important;
	color: var(--c-ink);
	font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
		'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -0.01em;
}
h1,h2,h3,h4,h5,h6 { font-family: inherit; letter-spacing: -0.02em; color: var(--c-ink); }
a { transition: color .18s var(--ease); }
::selection { background: var(--c-accent-wash); }

/* 부드러운 스크롤바 (webkit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #c8d2de; border-radius: 8px; border: 3px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover { background: #aab7c7; }

/* ===== NAVBAR ===== */
.navbar.navbar-default.TopNav {
	background: #000 !important;
	border: none !important;
	box-shadow: 0 2px 16px rgba(0,0,0,0.35) !important;
	min-height: 58px;
	backdrop-filter: saturate(1.1);
}
.navbar.navbar-default.TopNav .navbar-brand {
	font-weight: 800 !important;
	letter-spacing: -0.02em;
}
.navbar.navbar-default.TopNav .navbar-nav > li > a {
	color: rgba(255,255,255,0.82) !important;
	font-size: 13.5px;
	font-weight: 500;
	border-radius: 9px;
	margin: 8px 2px;
	padding: 8px 14px;
	transition: background .18s var(--ease), color .18s var(--ease);
}
.navbar.navbar-default.TopNav .navbar-nav > li > a:hover,
.navbar.navbar-default.TopNav .navbar-nav > li.open > a {
	color: #fff !important;
	background: rgba(255,255,255,0.14) !important;
}
.navbar.navbar-default.TopNav .form-control {
	border-radius: 22px !important;
	background: rgba(255,255,255,0.16) !important;
	border: 1px solid rgba(255,255,255,0.14) !important;
	color: #fff !important;
	height: 34px;
}
.navbar.navbar-default.TopNav .form-control:focus {
	background: rgba(255,255,255,0.26) !important;
	border-color: rgba(255,255,255,0.4) !important;
}
.navbar.navbar-default.TopNav .btn-default {
	border-radius: 22px !important;
	border: 1px solid rgba(255,255,255,0.45) !important;
	background: rgba(255,255,255,0.06) !important;
	color: #fff !important;
	height: 34px;
	font-weight: 600;
	transition: all .18s var(--ease);
}
.navbar.navbar-default.TopNav .btn-default:hover {
	background: #fff !important;
	color: var(--c-nav-a) !important;
	border-color: #fff !important;
}
.navbar.navbar-default.TopNav .dropdown-menu {
	border-radius: 12px !important;
	box-shadow: var(--shadow-lg) !important;
	border: 1px solid var(--c-line) !important;
	padding: 7px 0;
	margin-top: 6px;
}
.navbar.navbar-default.TopNav .dropdown-menu > li > a {
	font-size: 13.5px;
	padding: 9px 18px;
	border-radius: 8px;
	margin: 1px 7px;
	width: auto;
}
.navbar.navbar-default.TopNav .dropdown-menu > li > a:hover,
.navbar.navbar-default.TopNav .dropdown-menu > li.active > a {
	background: var(--c-primary-wash) !important;
	color: var(--c-primary-d) !important;
}

/* ===== TOP SIDE MENU ===== */
.TopSideMenu {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
	box-shadow: var(--shadow-sm);
	padding: 9px 15px;
}
.TopSideMenu .TopSideBtn {
	font-weight: 600;
	border-radius: 22px;
	color: var(--c-ink-soft);
	transition: all .18s var(--ease);
}
.TopSideMenu .TopSideBtn:hover,
.TopSideMenu .TopSideBtn:focus {
	background: var(--c-primary-wash);
	color: var(--c-primary-d);
}

/* ===== CARDS / PANELS ===== */
.panel.panel-default,
.BoardListArea .navbar-default {
	background: var(--c-surface) !important;
	border: 1px solid var(--c-line) !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow-sm) !important;
	transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.panel.panel-default:hover { box-shadow: var(--shadow-md) !important; }
.panel-default > .panel-heading {
	background: linear-gradient(180deg, #fbfcfe, #f4f7fb) !important;
	border-bottom: 1px solid var(--c-line) !important;
	font-weight: 700;
	color: var(--c-ink);
	padding: 13px 18px;
}
.page-header { border-bottom: 2px solid var(--c-line); }
.page-header h4 { font-weight: 800; }

/* ===== LIST GROUP ===== */
.list-group-item {
	border-color: var(--c-line-soft) !important;
	transition: background .15s var(--ease), padding-left .15s var(--ease);
}
.list-group-item:hover,
.BoardListArea .list-group-item:hover {
	background: var(--c-primary-wash) !important;
}
.BoardListArea .list-group-item .btn-link { color: var(--c-ink); font-weight: 600; }
.BoardListArea .list-group-item .btn-link:hover { color: var(--c-primary-d); }
#side_nav .list-group-item.active,
#side_nav .list-group-item.active:hover,
#side_nav .list-group-item.active:focus {
	background: linear-gradient(90deg, var(--c-primary-wash), #f4f8ff) !important;
	border-color: var(--c-primary-wash) !important;
	box-shadow: inset 3px 0 0 var(--c-primary);
}

/* ===== BUTTONS ===== */
.btn {
	border-radius: var(--radius-sm) !important;
	font-weight: 600;
	transition: all .18s var(--ease);
}
.btn-primary {
	background: linear-gradient(135deg, var(--c-primary), var(--c-primary-d)) !important;
	border: none !important;
	box-shadow: 0 4px 12px rgba(37,99,235,0.28);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background: linear-gradient(135deg, var(--c-primary-d), var(--c-primary-dd)) !important;
	box-shadow: 0 7px 18px rgba(37,99,235,0.38) !important;
	transform: translateY(-1px);
}
.btn-success {
	background: linear-gradient(135deg, #22c55e, var(--c-success)) !important;
	border: none !important;
}
.btn-info {
	background: linear-gradient(135deg, var(--c-accent), var(--c-accent-d)) !important;
	border: none !important; color:#fff !important;
}
.btn-danger { background: linear-gradient(135deg, #f87171, var(--c-danger)) !important; border:none !important; }
.btn-warning { background: linear-gradient(135deg, #fbbf24, var(--c-warn)) !important; border:none !important; color:#fff !important; }
.btn-default {
	border: 1px solid var(--c-line) !important;
	background: var(--c-surface) !important;
	color: var(--c-ink-soft) !important;
}
.btn-default:hover {
	border-color: var(--c-primary) !important;
	color: var(--c-primary-d) !important;
	background: var(--c-primary-wash) !important;
}

/* ===== FORMS ===== */
.form-control {
	border: 1.5px solid var(--c-line) !important;
	border-radius: var(--radius-sm) !important;
	height: 44px;
	color: var(--c-ink);
	box-shadow: none !important;
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form-control:focus {
	border-color: var(--c-primary) !important;
	box-shadow: 0 0 0 3.5px rgba(37,99,235,0.13) !important;
}
textarea.form-control { height: auto; }
label { color: var(--c-ink-soft); font-weight: 600; }

/* ===== TABLES ===== */
.table { background: var(--c-surface); border-radius: var(--radius); overflow: hidden; }
.table > thead > tr > th {
	background: linear-gradient(180deg, #fbfcfe, #f2f6fb);
	border-bottom: 2px solid var(--c-line) !important;
	color: var(--c-ink-soft);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: -0.01em;
	padding: 12px 14px;
	vertical-align: middle;
}
.table > tbody > tr > td { border-top: 1px solid var(--c-line-soft) !important; padding: 11px 14px; vertical-align: middle; }
.table-hover > tbody > tr:hover { background: var(--c-primary-wash) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfd; }

/* ===== LABELS / BADGES ===== */
.label { border-radius: 6px; font-weight: 700; padding: .28em .6em; }
.label-info { background: var(--c-accent) !important; }
.label-primary { background: var(--c-primary) !important; }
.label-success { background: var(--c-success) !important; }
.label-danger { background: var(--c-danger) !important; }
.mybadge { background: var(--c-danger); box-shadow: 0 2px 6px rgba(239,68,68,0.3); }

/* ===== PAGINATION ===== */
.PagenationArea .PageNumBtn,
.BoardPageNation .PageNumBtn {
	border: 1px solid var(--c-line) !important;
	border-radius: 9px !important;
	color: var(--c-ink-soft) !important;
	background: var(--c-surface) !important;
	margin: 3px !important;
	min-width: 38px;
	text-align: center;
	font-weight: 600;
	transition: all .15s var(--ease);
}
.PagenationArea .PageNumBtn:hover,
.BoardPageNation .PageNumBtn:hover {
	border-color: var(--c-primary) !important;
	background: var(--c-primary-wash) !important;
	color: var(--c-primary-d) !important;
}
.PagenationArea .PageNumBtn.active,
.BoardPageNation .PageNumBtn.active {
	background: linear-gradient(135deg, var(--c-primary), var(--c-primary-d)) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 4px 10px rgba(37,99,235,0.3);
}

/* ===== VIEW / DETAIL TITLE ===== */
.view_title, .My_list_title {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-left-width: 4px;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	font-weight: 700;
}
.view_title_point { border-left-color: var(--c-warn) !important; }
.My_list_title_point { border-left-color: var(--c-primary) !important; }

/* ===== MODALS ===== */
.modal-content {
	border: none !important;
	border-radius: 18px !important;
	box-shadow: var(--shadow-lg) !important;
	overflow: hidden;
}
.modal-header {
	background: linear-gradient(135deg, var(--c-nav-a), var(--c-nav-b)) !important;
	border: none !important;
	padding: 20px 26px !important;
}
.modal-header .modal-title { color: #fff !important; font-weight: 800; }
.modal-header .close { color: #fff; opacity: .85; text-shadow: none; }
.modal-footer { background: #f7f9fc !important; border-top: 1px solid var(--c-line) !important; }

/* ===== ALERTS ===== */
.alert { border: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.alert-danger  { background: #fef2f2; color: #b91c1c; }
.alert-success { background: #f0fdf4; color: #15803d; }
.alert-info    { background: var(--c-accent-wash); color: var(--c-accent-d); }
.alert-warning { background: #fffbeb; color: #b45309; }

/* ===== FOOTER ===== */
footer { background: linear-gradient(135deg, #0f2a44, #142f3f) !important; }

/* ===== LOGIN (login.php 인라인 스타일 위 미세 보정) ===== */
.login-wrap { background: radial-gradient(1200px 600px at 50% -10%, #e8f0ff 0%, var(--c-bg) 55%) !important; }
.login-card { border-radius: 22px !important; box-shadow: var(--shadow-lg) !important; }
.login-card-header { background: linear-gradient(135deg, var(--c-nav-a) 0%, var(--c-primary-d) 100%) !important; }
.login-btn-primary { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-d)) !important; border-radius: 12px !important; }
.login-btn-primary:hover { background: linear-gradient(135deg, var(--c-primary-d), var(--c-primary-dd)) !important; }

/* ===== 진입 애니메이션 (은은하게) ===== */
@keyframes omFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel.panel-default, .login-card, .view_title { animation: omFadeUp .35s var(--ease) both; }

/* =====================================================================
   BUTTONS & FORMS — 부드럽고 세련되게 (2026-07-05 보강)
   옛날 인터넷 느낌의 각지고 딱딱한 버튼/폼을 부드러운 pill·soft-shadow 로.
   ===================================================================== */

/* --- 모든 버튼 공통: 둥글게, 여백 넉넉히, 부드러운 전환 --- */
.btn {
	border-radius: 11px !important;
	padding: 9px 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	border-width: 1px;
	box-shadow: 0 1px 2px rgba(20,40,70,0.05);
	transition: transform .16s var(--ease), box-shadow .16s var(--ease),
		background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.btn:active { transform: translateY(0) scale(.985); }
.btn-lg { border-radius: 14px !important; padding: 13px 26px; font-size: 16px; }
.btn-sm { border-radius: 9px !important; padding: 6px 13px; }
.btn-xs { border-radius: 7px !important; padding: 3px 9px; }

/* 기본(default) 버튼 — 옛 회색 버튼을 부드러운 라이트 카드형으로 */
.btn-default {
	background: #fff !important;
	border: 1px solid #e2e8f1 !important;
	color: #46536a !important;
}
.btn-default:hover, .btn-default:focus {
	background: var(--c-primary-wash) !important;
	border-color: #c3d5f7 !important;
	color: var(--c-primary-d) !important;
	box-shadow: 0 4px 12px rgba(37,99,235,0.12) !important;
	transform: translateY(-1px);
}
.btn-default:active { background: #e4edfd !important; }

/* 색상 버튼 — soft gradient + 살짝 떠오르는 hover */
.btn-primary { color:#fff !important; }
.btn-primary:hover, .btn-primary:focus { transform: translateY(-1px); }
.btn-success:hover, .btn-info:hover, .btn-danger:hover, .btn-warning:hover { transform: translateY(-1px); filter: brightness(1.04); }

/* 링크형 버튼 부드럽게 */
.btn-link { color: var(--c-primary-d) !important; font-weight:600; text-decoration:none !important; }
.btn-link:hover { color: var(--c-primary-dd) !important; }

/* 아웃라인 느낌의 강조 없는 액션바 버튼도 정돈 */
.ControlBtnArea .btn, .AddDelMyNoteBtnArea .btn { margin: 3px; }

/* --- 폼 컨트롤: 크게, 둥글게, 부드러운 포커스 --- */
.form-control {
	height: 46px;
	padding: 10px 15px;
	border: 1.5px solid #e4e9f1 !important;
	border-radius: 12px !important;
	background: #fff;
	font-size: 14.5px;
	color: var(--c-ink);
	box-shadow: inset 0 1px 2px rgba(20,40,70,0.03) !important;
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.form-control::placeholder { color: #a9b4c4; }
.form-control:hover { border-color: #cfd8e6 !important; }
.form-control:focus {
	border-color: var(--c-primary) !important;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(37,99,235,0.12) !important;
	outline: none;
}
textarea.form-control { min-height: 120px; line-height: 1.7; }

/* select 커스텀 화살표 + pill 모양 (네비 검색창 제외) */
select.form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6675' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
	cursor: pointer;
}
.navbar.TopNav select.form-control { background-image: none; }

/* input group (검색 등) 둥글게 이어붙이기 */
.input-group .form-control:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.input-group-btn:last-child > .btn { border-top-right-radius: 12px !important; border-bottom-right-radius: 12px !important; }

/* 체크박스/라디오 살짝 크게 + 포인트 색 */
input[type=checkbox], input[type=radio] { accent-color: var(--c-primary); width: 16px; height: 16px; vertical-align: -2px; cursor: pointer; }

/* --- 게시판/목록: 카드 느낌, 부드러운 hover --- */
.list-group { border-radius: var(--radius); overflow: hidden; }
.list-group-item {
	padding: 13px 18px;
	border-color: var(--c-line-soft) !important;
}
.list-group-item:hover, .BoardListArea .list-group-item:hover {
	background: linear-gradient(90deg, var(--c-primary-wash), #f6f9ff) !important;
}
.BoardListArea .list-group-item .btn-link { font-size: 14px; }

/* 게시판 목록 테이블 행 — 부드러운 구분선 + hover 강조 */
.ListDataArea .table > tbody > tr,
.BoardListArea .table > tbody > tr { transition: background .14s var(--ease); }
.ListDataArea .table > tbody > tr:hover td,
.BoardListArea .table > tbody > tr:hover td { background: var(--c-primary-wash) !important; }
.ListDataArea .table a, .BoardListArea .table a { color: var(--c-ink); font-weight: 500; }
.ListDataArea .table a:hover, .BoardListArea .table a:hover { color: var(--c-primary-d); }

/* NEW 뱃지/라벨 부드럽게 */
.label { border-radius: 7px; padding: .3em .62em; font-size: 10.5px; letter-spacing: .02em; box-shadow: 0 1px 3px rgba(20,40,70,0.1); }

/* 페이지 상단 타이틀 영역 여백 정돈 */
.page-header h4 { letter-spacing: -0.02em; }

/* 문제풀이/제출 등 우측 액션버튼 살짝 큼직하게 */
#writh_but, #submit_but, .SimulStartBtn, .LoginBtn, .SiteJoinBtn { font-weight: 700; }

/* ===== 반응형 미세조정 ===== */
@media (max-width: 767px) {
	.navbar.navbar-default.TopNav .navbar-nav > li > a { margin: 2px 0; }
	.table > thead > tr > th, .table > tbody > tr > td { padding: 9px 8px; font-size: 13px; }
	.btn { padding: 9px 15px; }
	.form-control { height: 44px; }
}