@charset "utf-8";
/* ==========================================================
   최우수정형외과 — 디자인 개편 스타일 (premium.css)
   기존 default.css / media.css / subpage.css 위에 덮어씁니다.
   내용(글·사진·메뉴)은 건드리지 않고 색·서체·여백만 바꿉니다.
   이 파일 연결 한 줄을 head.sub.php에서 지우면 원래 디자인으로 돌아갑니다.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

:root {
	--color-main: #1F3A63;
	--color-dark: #0F1F38;
	--color-light: #F4F1EA;
	--color-line: #E5E0D6;
	--color-line2: #D9D2C4;
	--color-bg: #F6F4EF;
	--color-bg2: #F1EDE5;
	--pm-navy: #0F1F38;
	--pm-navy2: #16294A;
	--pm-ink: #1A2433;
	--pm-text: #4A5160;
	--pm-muted: #6A7080;
	--pm-gold: #B08D57;
	--pm-gold-dark: #8A6A3A;
	--pm-gold-light: #D8C29A;
	--pm-ivory: #F6F4EF;
	--pm-serif: 'Noto Serif KR', 'Noto Serif CJK KR', 'Nanum Myeongjo', 'AppleMyungjo', serif;
}

body { color: var(--pm-ink); -webkit-font-smoothing: antialiased; }
a:hover, a:focus { color: var(--pm-gold-dark); }

/* ---------- 상단 띠 ---------- */
#hdTop { height: 4rem; line-height: 4rem; font-size: .8em; }
#hdTop:before { background: var(--pm-navy); }
#hdTop dt { color: rgba(255,255,255,.72); letter-spacing: .02em; }
#hdTop dt strong { color: var(--pm-gold-light); font-weight: 500; margin-right: .4em; }
#hdTop dd a { color: rgba(255,255,255,.72); font-size: .95em; transition: color .2s; }
#hdTop dd a:hover { color: var(--pm-gold-light); }

/* ---------- 헤더 · 메뉴 (PC) ---------- */
@media (min-width: 851px) {
	#header { height: 12rem; }
	#header:before { border-bottom: 1px solid var(--color-line); background: #fff; }
	#header h1 { padding: 3rem 0; }
	#header h1 img { height: 6rem; }

	#topMenu dl { margin-right: -.75em; }
	#topMenu dl:before { top: 12rem; background: var(--pm-navy); }
	#topMenu dl:hover:before { height: 5.6rem; }
	#topMenu dd > a { line-height: 12rem; height: 12rem; padding: 0 .75em; font-weight: 500; font-size: 1.08em; color: var(--pm-ink); letter-spacing: -.01em; transition: color .25s; }
	#topMenu dd:hover > a { color: var(--pm-gold-dark); }
	#topMenu dd:hover > a:before { border: 0; left: 50%; bottom: 0; width: 2.4em; height: 2px; margin-left: -1.2em; background: var(--pm-gold); }
	#topMenu dd:hover ul { height: 5.6rem; }
	#topMenu dd ul li { height: 5.6rem; line-height: 5.6rem; }
	#topMenu dd ul li:before { background: rgba(255,255,255,.18); }
	#topMenu dd ul a { color: rgba(255,255,255,.82); font-weight: 400; transition: color .2s; }
	#topMenu dd ul a:hover { color: var(--pm-gold-light); }
}

/* ---------- 메인 비주얼 ---------- */
#main_visual .controll a { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.6); color: #fff; text-shadow: none; width: 2.4em; height: 2.4em; line-height: 2.3em; top: -1.2em; transition: background .25s, border-color .25s; }
#main_visual .controll a:hover { background: var(--pm-navy); border-color: var(--pm-navy); color: #fff; }
#main_visual .swiper-pagination { display: block; }
#main_visual .swiper-pagination-bullet { background: rgba(255,255,255,.6); height: 3px; width: 1.6em; border-radius: 0; }
#main_visual .swiper-pagination-bullet-active { background: #fff; width: 3.6em; }

/* ---------- 섹션 제목 ---------- */
header.title { margin-bottom: 3.2em; }
header.title:before { display: block; width: 1px; height: 3.2rem; margin: 0 auto 1.6rem; background: var(--pm-gold); content: ""; }
header.title h4 { font-family: var(--pm-serif); font-weight: 600; font-size: 2.3em; line-height: 1.25em; color: var(--pm-navy); letter-spacing: -.02em; }
header.title p { margin-top: 1.1em; font-size: 1.05em; font-weight: 400; color: var(--pm-muted); letter-spacing: -.01em; }
header.title p strong { font-weight: 600; color: var(--pm-ink); }
header.title.cw h4 { color: var(--color-light); }
header.title.cw p { color: rgba(255,255,255,.7); }
header.title.cw p strong { color: var(--pm-gold-light); }

/* ---------- 의료진 (#ma) ---------- */
#ma { padding-top: 6em; }
#ma:before { background: var(--pm-navy); }
#ma dt article { background: var(--pm-ivory); }
#ma dt article h6 { font-weight: 400; color: var(--pm-muted); letter-spacing: -.01em; }
#ma dt article h4 { font-family: var(--pm-serif); font-weight: 600; color: var(--pm-navy); letter-spacing: -.02em; padding-bottom: .25em; margin-bottom: .2em; }
#ma dt article h4 small { font-family: 'Pretendard', sans-serif; font-weight: 500; color: var(--pm-gold-dark); letter-spacing: 0; margin-left: .2em; }
#ma dt article h4:after { background: var(--pm-gold); height: 1px; width: 2.2em; }
#ma dt article ul { color: var(--pm-text); }
#ma dt article ul li { position: relative; line-height: 175%; }
#ma dt article ul li:before { content: ""; top: .78em; left: .25em; width: .3em; height: .3em; border-radius: 50%; background: var(--pm-gold); }
#ma dd i svg .logo_icon { fill: var(--pm-navy2); }
#ma dd h6 { color: var(--pm-gold-light); font-weight: 400; letter-spacing: .02em; }
#ma dd h4 { font-family: var(--pm-serif); font-weight: 600; color: var(--color-light); letter-spacing: -.02em; }
#ma dd h4:after { background: var(--pm-gold); height: 1px; width: 2.2em; margin-left: -1.1em; }
#ma dd p { color: rgba(255,255,255,.72); }

/* ---------- 진료과목 (#mb) ---------- */
#mb { padding: 7em 0 6.5em; }
#mb:before { background: var(--pm-ivory); }
#mb dl dd { margin: 0 1.4em; }
#mb dl dd a { display: block; color: inherit; }
#mb dl dd figure { border: 1px solid #E3D6BE; padding: .7em; background: #fff; transition: border-color .3s; }
#mb dl dd figure img { border-radius: 50%; transition: transform .6s ease; }
#mb dl dd a:hover figure { border-color: var(--pm-gold); }
#mb dl dd a:hover figure img { transform: scale(1.04); }
#mb dl dd h6 { font-family: var(--pm-serif); font-weight: 600; font-size: 1.45em; color: var(--pm-navy); margin: 1em 0 .35em; letter-spacing: -.02em; }
#mb dl dd p { font-size: .95em; color: var(--pm-muted); letter-spacing: 0; }
#mb .controll a { background: #fff; border: 1px solid var(--color-line); color: var(--pm-navy); text-shadow: none; }

/* ---------- 최우수의 가치 (#mc) ---------- */
#mc { padding: 7em 0; }
#mc:before { background: #fff; }
#mc dl dt i svg { opacity: .07; }
#mc dl dt i svg .logo_icon { fill: var(--pm-navy); }
#mc dl dt h4 { font-family: var(--pm-serif); font-weight: 600; color: var(--pm-navy); letter-spacing: -.02em; line-height: 1.25em; }
#mc dl dt h4:after { display: block; width: 1.6em; height: 1px; margin-top: .55em; background: var(--pm-gold); content: ""; }
#mc dl dt p { color: var(--pm-text); font-size: .78em; line-height: 1.8; margin-top: 1.3em; }
#mc dl dd section { box-shadow: 0 2rem 4rem rgba(15,31,56,.10); }
#mc .controll a { background: #fff; border: 1px solid var(--color-line); color: var(--pm-navy); text-shadow: none; width: 2.4em; height: 2.4em; line-height: 2.3em; top: -1.2em; transition: background .25s, color .25s; }
#mc .controll a:hover { background: var(--pm-navy); color: #fff; border-color: var(--pm-navy); }

/* ---------- 진료시간 · 예약 · 오시는 길 (#md) ---------- */
#md { padding: 7em 0; position: relative; }
#md:before { position: absolute; top: 0; bottom: 0; left: 50%; width: 200vw; margin-left: -100vw; z-index: -1; background: var(--pm-ivory); content: ""; }
#md h5 { font-family: var(--pm-serif); font-weight: 600; font-size: 1.45em; color: var(--pm-navy); margin: 1.4em 0 .7em; letter-spacing: -.02em; }
#md dl dt h5:first-child, #md dl dd h5:first-child { margin-top: 0; }
#md dl dt .worktime { background: #fff; border: 1px solid var(--color-line); padding: 1.6em 1.8em; overflow: hidden; }
#md dl dt .worktime ul li { padding: .3em 0; border-bottom: 1px solid #F0ECE4; }
#md dl dt .worktime ul li:last-child { border-bottom: 0; }
#md dl dt .worktime ul li label { color: var(--pm-navy); font-weight: 600; }
#md dl dt .worktime ul li span { color: var(--pm-text); }
#md dl dt .worktime p { color: var(--pm-muted); }
#md dl dt .worktime > i svg { opacity: .06; }
#md dl dt .worktime > i svg .logo_icon { fill: var(--pm-navy); }
#md dl dt .guide { background: var(--pm-navy); }
#md dl dt .guide a { transition: background .25s; }
#md dl dt .guide a:hover { background: var(--pm-navy2); color: #fff; }
#md dl dt .guide a h6 { color: var(--pm-gold-light); opacity: 1; font-weight: 400; }
#md dl dt .guide a h4 { font-weight: 600; }
#md dl dt .guide a p { opacity: .6; }
#md dl dt .guide a.naver { background: #03A94F; }
#md dl dt .guide a.naver:hover { background: #029245; }
#md dl dt .guide a.naver h6 { color: rgba(255,255,255,.75); }
#md dl dd img { border: 1px solid var(--color-line); }

/* ---------- 하단 ---------- */
#footer { padding: 5rem 0 4.5rem; }
#footer:before { background: #0B1729; border-top: 1px solid rgba(176,141,87,.35); }
#footer h1 img { filter: brightness(0) invert(1); opacity: .85; }
#footer address { color: rgba(255,255,255,.62); font-size: .82em; margin-top: 1.6em; line-height: 2; }
#footer p { color: rgba(255,255,255,.38); font-size: .78em; margin-top: .6em; letter-spacing: .02em; }
#footer p b { font-weight: 500; }

/* 하단 버튼: 비급여 진료비용 · 환자권리장전 */
#footer .ft_links { display: flex; justify-content: center; gap: .8rem; margin-top: 2.2rem; }
#footer .ft_links a { display: inline-block; padding: .9rem 2rem; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.82); font-size: 1.4rem; line-height: 1.4; letter-spacing: -.02em; transition: border-color .2s, color .2s, background .2s; }
#footer .ft_links a:hover { border-color: var(--pm-gold); color: var(--pm-gold-light); background: rgba(176,141,87,.08); }
@media (min-width: 1100px) {
	#footer .ft_links { position: absolute; right: 0; bottom: 4.5rem; margin-top: 0; }
}

/* ---------- 환자권리장전 페이지 ---------- */
.pm_rights { max-width: 880px; margin: 0 auto; padding: 2rem 0 4rem; color: var(--pm-ink); }
.pm_rights .lead { text-align: center; color: var(--pm-muted); font-size: 1.7rem; line-height: 1.8; margin-bottom: 5rem; }
.pm_rights h3 { font-family: var(--pm-serif); font-weight: 600; font-size: 2.8rem; color: var(--pm-navy); letter-spacing: -.02em; padding-bottom: 1.4rem; margin: 5rem 0 2.4rem; border-bottom: 1px solid var(--color-line); }
.pm_rights h3:first-of-type { margin-top: 0; }
.pm_rights h3 small { display: block; font-family: 'Pretendard', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .24em; color: var(--pm-gold-dark); margin-bottom: .6rem; }
.pm_rights dl { display: flex; gap: 2.4rem; padding: 2.4rem 0; border-bottom: 1px solid #EFEBE3; }
.pm_rights dt { flex: 0 0 22rem; font-weight: 600; font-size: 1.8rem; color: var(--pm-navy); line-height: 1.6; }
.pm_rights dt span { display: inline-block; min-width: 2.4rem; color: var(--pm-gold-dark); font-family: var(--pm-serif); }
.pm_rights dd { flex: 1 1 auto; font-size: 1.7rem; line-height: 1.85; color: var(--pm-text); }
.pm_rights .source { margin-top: 4rem; padding: 2rem 2.4rem; background: var(--pm-ivory); font-size: 1.4rem; color: var(--pm-muted); line-height: 1.7; }
@media (max-width: 850px) {
	.pm_rights { padding: 1rem 0 2rem; }
	.pm_rights .lead { font-size: 1.05em; margin-bottom: 3rem; }
	.pm_rights h3 { font-size: 1.5em; margin-top: 3.5rem; }
	.pm_rights dl { display: block; padding: 1.8rem 0; }
	.pm_rights dt { font-size: 1.1em; margin-bottom: .6rem; }
	.pm_rights dd { font-size: 1em; }
	.pm_rights .source { font-size: .9em; }
}

/* ---------- 비급여 진료비용 표 ---------- */
#bo_list #list_wrap { font-size: .78em; }
#bo_list #list_wrap .th { background: var(--pm-navy); color: #fff; border-top: 0; border-bottom: 0; font-weight: 500; }
#bo_list #list_wrap .th dd { border-left-color: rgba(255,255,255,.14); padding: 1em 0; }
#bo_list #list_wrap dl { color: var(--pm-text); border-bottom-color: #ECE8DF; }
#bo_list #list_wrap dl:not(.th):hover { background: #FAF8F4; }
#bo_list #list_wrap dl dd { border-left-color: #ECE8DF; padding: .85em .6em; }
#bo_list #list_wrap dl dd a { color: var(--pm-ink); }
#bo_list #list_wrap dl:not(.th) dd:nth-child(3) { color: var(--pm-ink); font-weight: 500; }
#bo_list #list_wrap dl:not(.th) dd:nth-child(5) { color: var(--pm-navy); font-weight: 700; }
#bo_list #list_wrap dl:not(.th) dd:last-of-type { color: var(--pm-muted); }
#bo_list #bo_list_total { color: var(--pm-muted); }
@media (max-width: 736px) {
	#bo_list #list_wrap dl { border-color: #E5E0D6; background: #fff; }
	#bo_list #list_wrap dl dd { border-color: #ECE8DF; }
}

/* ---------- 오른쪽 빠른 메뉴 ---------- */
#quick_btns dl { box-shadow: 0 1.2rem 3rem rgba(15,31,56,.18); }

/* ---------- 서브페이지 상단 ---------- */
#sub_visual:before { background: rgba(15,31,56,.62); }
#sub_visual section h6 { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; letter-spacing: .32em; text-transform: uppercase; color: var(--pm-gold-light); font-weight: 400; }
#sub_visual section h2 { font-family: var(--pm-serif); font-weight: 600; color: #fff; letter-spacing: -.02em; margin-top: 1.4rem; }
#sub_visual section h3 { font-family: var(--pm-serif); font-weight: 500; color: #fff; letter-spacing: -.02em; line-height: 150%; }
#pageNavi { border: 1px solid var(--color-line); box-shadow: 0 1rem 3rem rgba(15,31,56,.08); }
#pageNavi dl dt { color: var(--pm-ink); }
#pageNavi dl:hover dt:has(+dd) { color: var(--pm-gold-dark); }
#pageNavi dl dd:before { border-bottom-color: var(--pm-navy); }
#pageNavi dl dd article { background: var(--pm-navy); border-radius: 0; }
#pageNavi dl dd a { color: rgba(255,255,255,.82); }
#pageNavi dl dd a:hover { background: var(--pm-navy2); color: var(--pm-gold-light); }
#pageNavi p { color: var(--pm-muted); }

/* 서브페이지 본문 제목 서체만 통일 (글 내용은 그대로) */
.pageContent h3, .pageContent h4 { font-family: var(--pm-serif); letter-spacing: -.02em; }

/* 공통 버튼 */
.btn_submit { background: var(--pm-navy); }
a.btn_b02, .btn_b02 { background: var(--pm-navy); }

/* ---------- 모바일 (850px 이하) ---------- */
@media (max-width: 850px) {
	#header:before { background: #fff; border-bottom: 0; }
	#topMenu { background: var(--pm-navy); }
	#topMenu { padding: 0 .8rem; }
	#topMenu dl { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	#topMenu dl::-webkit-scrollbar { display: none; }
	#topMenu dd { flex-shrink: 0; }
	#topMenu dd > a { color: rgba(255,255,255,.9); font-weight: 500; white-space: nowrap; font-size: .8em; padding: 0 .2em; letter-spacing: -.07em; }
	#topMenu dd:hover > a { color: var(--pm-gold-light); }
	.btn_tel { border-color: var(--pm-gold); color: var(--pm-ink); border-radius: 2px; }
	.btn_tel strong { color: var(--pm-navy); }
	#mobileMenu dl dd > a { color: var(--pm-ink); }
	#mobileMenu dl dd > ul a { color: var(--pm-text); }
	#ma { padding-top: 4em; }
	#mb, #mc, #md { padding-top: 4.5em; padding-bottom: 4.5em; }
	#mb dl dd { margin: 0 .8em; }
	#md { padding-left: 2rem; padding-right: 2rem; }
	header.title { margin-bottom: 2.2em; }
	header.title:before { height: 2.4rem; margin-bottom: 1.2rem; }
	#mc dl dt h4:after { margin-left: auto; margin-right: auto; }
	#footer { padding-bottom: 9em; }
}