/* =====================================================
   공통 : 헤더 / contact / 푸터 / 퀵메뉴
   서브 공통 : sub_visual / sub_menu
   시안 기준 PC 1920 / 모바일 375 (둘 다 1rem = 10px 로 px 값 그대로 rem 환산)
   ===================================================== */

:root {
    --fcp: #005c62;   /* 메인 청록 */
    --fcp2: #0a8189;
    --brown: #8e5d29;
    --beige: #e8d1b8;
    --gold: #cda479;
    --dark: #023235;
}

body {letter-spacing: -0.03em; word-break: keep-all;} /* 시안 Wanted Sans 자간 -3% 공통 / 한글은 단어 단위 줄바꿈 */
body * {letter-spacing: -0.03em;} /* em 값은 상속 시 px로 고정되므로 요소마다 글자 크기 기준으로 다시 계산 */
button, input, select, textarea {font-family: inherit;} /* 폼 요소도 사이트 글꼴 사용 */
.lora {letter-spacing: 0.05em;}
[data-aos="fade-up"]:not(.aos-animate) {transform: translate3d(0, 4rem, 0);} /* 떠오르는 거리 : AOS 기본(100px)보다 짧게 */

.inner {width: 140rem; margin: 0 auto;}

@media all and (max-width: 880px){
    .inner {width: 33.5rem;}
}


/* 헤더 */
#header {z-index: 9999; transition: background 0.3s;}
#header.on {background: rgba(0,0,0,0.4);}
#header .pcHeader {height: 10rem;}
#header .pcHeader .logo {left: 5rem; top: 2.1rem; width: 28.1rem;}
/* GNB는 화면 가운데 기준 (시안 x 498) */
#header .pcHeader .gnb {left: 50%; top: 3.8rem; margin-left: -46.2rem; gap: 6rem; font-size: 2rem; font-weight: 500; line-height: 2.4rem; color: #fff;}
#header .pcHeader .gnb a {display: block; transition: color 0.2s;}
#header .pcHeader .gnb a:hover {color: var(--beige);}
#header .pcHeader .reserve {right: 5rem; top: 2.6rem; width: 21.1rem; height: 5.2rem; padding-left: 2.6rem; gap: 1.2rem; border: 1px solid #fff; border-radius: 2.6rem; font-size: 2rem; color: #fff; transition: background 0.2s, color 0.2s;}
#header .pcHeader .reserve img {width: 2.3rem;}
#header .pcHeader .reserve:hover {background: #fff; color: var(--fcp);}
#header .pcHeader .reserve:hover img {filter: brightness(0) saturate(100%) invert(22%) sepia(53%) saturate(2410%) hue-rotate(161deg) brightness(91%) contrast(101%);}

@media all and (max-width: 880px){
    #header .moHead {height: 6.2rem; z-index: 1;}
    #header .moHead .logo {left: 2rem; top: 1.3rem; width: 17.5rem;}
    #header .moHead .menuBtn {right: 2rem; top: 2.1rem; width: 2.4rem; height: 2rem;}
    #header .moHead .menuBtn span {position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1.5px; background: #fff;}
    #header .moHead .menuBtn span:nth-child(1) {top: 0;}
    #header .moHead .menuBtn span:nth-child(2) {top: 0.9rem;}
    #header .moHead .menuBtn span:nth-child(3) {top: 1.8rem;}

    /* 메뉴 패널 (시안 없음 : contact 영역 색상으로 구성) */
    #header .menuWrap {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); display: none; z-index: 2;}
    #header .menuWrap .box {position: absolute; top: 0; right: -100%; width: 75%; height: 100%; padding: 2.6rem 2.4rem; background: var(--dark); transition: right 0.3s;}
    #header .menuWrap .box.act {right: 0;}
    #header .menuWrap .box .logo {width: 15rem;}
    #header .menuWrap .box .gnb {margin-top: 4rem; font-size: 1.8rem; font-weight: 600; line-height: 2.2rem; color: #fff;}
    #header .menuWrap .box .gnb li + li {margin-top: 2.8rem;}
    #header .menuWrap .box .reserve {margin-top: 4.5rem; height: 4.6rem; gap: 0.8rem; border: 1px solid #fff; border-radius: 2.3rem; font-size: 1.6rem; color: #fff;}
    #header .menuWrap .box .reserve img {width: 2rem;}
}


/* contact (Roun Location) */
#contact {padding: 15rem 0; background: var(--dark); color: #fff;}
#contact .tit {font-size: 6rem; font-weight: 500; line-height: 6rem; letter-spacing: 0.03em; color: var(--beige);}
#contact .mapArea {position: absolute; left: 66rem; top: 0; width: 74rem;}
#contact .map {height: 59.5rem; overflow: hidden;}
#contact .map img {width: 100%; height: 100%; object-fit: cover;}
#contact .addr {margin-top: 2.8rem; font-size: 2.8rem; line-height: 2.8rem;}
#contact .row {margin-top: 5.5rem;}
#contact .row:first-of-type {margin-top: 6rem;}
#contact .hd {font-size: 2.4rem; line-height: 2.4rem; color: var(--beige);}
#contact .num {display: inline-block; margin-top: 2rem; font-size: 6rem; line-height: 6rem;}
#contact .kakao {width: 28rem; height: 5.4rem; margin-top: 2.5rem; padding: 0 2.5rem; border: 1px solid #fff; border-radius: 3rem; font-size: 2rem;}
#contact .kakao .ch {width: 2.9rem; margin-right: 1.5rem;}
#contact .kakao .search {width: 1.5rem; margin-left: auto;}
#contact .wrt {margin-top: 1.8rem; font-size: 1.8rem; line-height: 2.6rem;}
#contact .wrt b, #contact .hours b {color: var(--beige);}
#contact .hours {margin-top: 2rem; font-size: 2.2rem; line-height: 3.5rem;}
#contact .hours .note, .p1_5 .info .hours .note {font-size: 0.82em; opacity: 0.75;} /* 오전 회진 시간 안내 */
#contact .badge {width: 18rem; height: 3.6rem; margin-top: 2rem; border-radius: 1.8rem; background: var(--gold); font-size: 1.8rem; line-height: 3.6rem;}

@media all and (max-width: 880px){
    #contact {padding: 5.5rem 0 6rem;}
    #contact .tit {font-size: 3.5rem; line-height: 3.5rem; text-align: center;}
    #contact .mapArea {position: static; width: 100%; margin-top: 3.5rem;}
    #contact .map {height: 26.9rem;}
    #contact .addr {margin-top: 2.2rem; font-size: 2rem; line-height: 2rem;}
    #contact .row, #contact .row:first-of-type {margin-top: 4rem;}
    #contact .hd {font-size: 1.8rem; line-height: 1.8rem;}
    #contact .num {margin-top: 1.5rem; font-size: 4.2rem; line-height: 4.2rem;}
    #contact .kakao {margin-top: 2rem;}
    #contact .wrt {font-size: 1.6rem;}
    #contact .hours {margin-top: 1.5rem; font-size: 1.8rem; line-height: 3rem;}
}


/* 푸터 */
#footer {height: 20.1rem; padding-top: 5rem; background: #212121; color: #fff;}
#footer .logo {position: absolute; right: 0; top: 2.5rem; width: 24.6rem;}
#footer .info {font-size: 1.6rem; line-height: 3.4rem; margin-top: -0.9rem;}
#footer .info span {margin-right: 2.2rem;}
#footer .copy {margin-top: 2.6rem; font-size: 1.6rem; line-height: 1.6rem;}

@media all and (max-width: 880px){
    #footer {height: 24rem; padding-top: 3.5rem;}
    #footer .logo {position: static; width: 16.4rem;}
    #footer .info {margin-top: 1.9rem; font-size: 1.4rem; line-height: 2.7rem;}
    #footer .info span {margin-right: 1.4rem;}
    #footer .copy {margin-top: 2.3rem; font-size: 1.3rem; line-height: 1.3rem;}
}


/* 퀵메뉴 */
#quick {right: 5rem; bottom: 8rem; z-index: 9000; width: 8rem;}
#quick .box {overflow: hidden; border-radius: 1rem; background: var(--fcp);}
#quick .box li a {display: block; padding: 1.4rem 0 1.3rem; font-size: 1.2rem; font-weight: 700; line-height: 1.3rem; color: #fff; text-align: center;}
#quick .box .ic {display: block; width: 2.6rem; height: 2.7rem; margin: 0 auto 0.9rem;}
#quick .box .ic img {width: 100%; height: 100%; object-fit: contain;}
#quick .box li.refer a {height: 8rem; padding-top: 1rem; border-radius: 1rem; background: var(--brown);}
#quick .box li.refer .ic {margin-bottom: 0.7rem;}
#quick .topBtn {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 8rem; height: 8rem; margin-top: 1.2rem; padding: 0; border-radius: 1rem; background: #fff; box-shadow: 0 0 0.8rem rgba(88,56,27,0.2); font-size: 1.4rem; line-height: 1.4rem; color: #454545; text-align: center;}
#quick .topBtn img {display: block; width: 1.2rem; margin: 0 0 0.8rem;}

@media all and (max-width: 880px){
    #quick {right: 1rem; bottom: 2.4rem; width: 5.8rem;}
    /* + 버튼을 누르면 위로 펼쳐짐 */
    #quick .box {position: absolute; right: 0; bottom: 13rem; width: 5.8rem; opacity: 0; visibility: hidden; transform: translateY(1rem); transition: 0.3s;}
    #quick.open .box {opacity: 1; visibility: visible; transform: none;}
    #quick .box li a {padding: 1rem 0 0.8rem; font-size: 1rem; line-height: 1.1rem;}
    #quick .box .ic {width: 2.2rem; height: 2.2rem; margin-bottom: 0.5rem;}
    #quick .box li.refer a {height: auto; padding-top: 1rem;}
    #quick .toggle {position: relative; display: block; width: 5.8rem; height: 5.8rem; border-radius: 1rem; background: var(--fcp);}
    #quick .toggle span {position: absolute; left: 50%; top: 50%; width: 2rem; height: 2px; margin: -1px 0 0 -1rem; background: #fff; transition: transform 0.3s;}
    #quick .toggle span:nth-child(2) {transform: rotate(90deg);}
    #quick.open .toggle span:nth-child(1) {transform: rotate(45deg);}
    #quick.open .toggle span:nth-child(2) {transform: rotate(135deg);}
    #quick .topBtn {width: 5.8rem; height: 5.8rem; margin-top: 0.8rem; box-shadow: 0 0 0.5rem rgba(0,0,0,0.15); font-family: "Outfit", sans-serif; font-size: 1.2rem; line-height: 1.2rem;}
    #quick .topBtn img {margin-bottom: 0.6rem;}
}


#wrap {overflow: hidden;}
@supports (overflow: clip) { #wrap {overflow: clip;} } /* hidden은 sticky(4 외과 수술 단계)를 막으므로 clip 사용 */


/* =====================================================
   서브 공통
   ===================================================== */

/* 상단 비주얼 : 배경 사진은 페이지마다 style로 지정 */
.subVisual {position: relative; height: 67.4rem; background: no-repeat center / cover; color: #fff; text-align: center;}
.subVisual::before {content: ''; position: absolute; inset: 0; background: rgba(24,15,5,0.8);}
.subVisual::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 14.9rem; background: url(../img/sv_shade.png) no-repeat center / 100% 100%;}
.subVisual .txtArea {position: relative; z-index: 1; padding-top: 25.5rem;}
.subVisual .eng {font-size: 2.4rem; font-weight: 500; line-height: 2.4rem; color: var(--beige);}
.subVisual .tit {margin-top: 3.5rem; font-size: 6.5rem; font-weight: 700; line-height: 6.5rem;}
.subVisual .path {justify-content: center; gap: 2rem; margin-top: 5.5rem; font-size: 2rem; font-weight: 500; line-height: 2rem;}
.subVisual .path .home {width: 2rem;}
.subVisual .path .arr {width: 0.5rem;}

/* 서브 탭 메뉴 : 비주얼 아래쪽에 겹침 */
.subMenu {position: absolute; left: 50%; bottom: 0; z-index: 2; width: 140rem; margin-left: -70rem;}
.subMenu .cur {display: none;}
.subMenu ul {display: flex;}
.subMenu li {flex: 1;}
.subMenu li a {display: block; height: 7rem; background: rgba(255,255,255,0.2); font-size: 2.2rem; font-weight: 500; line-height: 7rem; color: #fff; text-align: center; transition: background 0.2s;}
.subMenu li a:hover {background: rgba(255,255,255,0.3);}
.subMenu li.on a {background: var(--fcp); font-weight: 700;}

@media all and (max-width: 880px){
    .subVisual {height: 37rem;}
    .subVisual::after {height: 10rem; background-image: url(../img/sv_shade_mo.png);}
    .subVisual .txtArea {padding-top: 14rem;}
    .subVisual .eng {font-size: 1.4rem; line-height: 1.4rem;}
    .subVisual .tit {margin-top: 1.5rem; font-size: 3.5rem; line-height: 3.5rem;}
    .subVisual .path {gap: 1.2rem; margin-top: 2rem; font-size: 1.5rem; line-height: 1.5rem;}
    .subVisual .path .home {width: 1.6rem;}

    /* 모바일 : 현재 메뉴 바를 누르면 목록이 펼쳐짐 */
    .subMenu {left: 0; width: 100%; margin-left: 0;}
    .subMenu .cur {display: block; position: relative; width: 100%; height: 4.8rem; background: var(--fcp); font-size: 1.6rem; font-weight: 700; color: #fff;}
    .subMenu .cur img {position: absolute; right: 2rem; top: 50%; width: 1.2rem; margin-top: -0.4rem; transition: transform 0.3s;}
    .subMenu.open .cur img {transform: rotate(180deg);}
    .subMenu ul {display: none; position: absolute; left: 0; top: 100%; width: 100%; background: #fff; box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.1);}
    .subMenu li a {height: 4.6rem; background: none; font-size: 1.5rem; line-height: 4.6rem; color: #444;}
    .subMenu li a:hover {background: none;}
    .subMenu li + li a {border-top: 1px solid #eee;}
    .subMenu li.on a {background: none; color: var(--fcp);}
}


/* 섹션 타이틀 : 청록 소제목 + 큰 제목 (span 은 청록 강조) */
.secTit {text-align: center;}
.secTit .label {font-size: 2.6rem; font-weight: 600; line-height: 2.6rem; color: var(--fcp);}
.secTit .tit {margin-top: 3rem; font-size: 5rem; font-weight: 700; line-height: 6.5rem; color: #111;}
.secTit .tit span {color: var(--fcp);}

@media all and (max-width: 880px){
    .secTit .label {font-size: 1.8rem; line-height: 1.8rem;}
    .secTit .tit {margin-top: 2rem; font-size: 2.6rem; line-height: 3.6rem;}
}

/* 소제목이 영문(Lora)인 경우 */
.secTit .label.lora {font-weight: 500; letter-spacing: 0.05em;}

@media all and (max-width: 880px){
    .secTit .label.lora {font-size: 1.6rem; line-height: 1.6rem;}
}

/* 섹션 타이틀 2 : 영문(Lora) 소제목 + 60px 제목 (진료안내 이후 서브 공통) */
.secTit2 {text-align: center;}
.secTit2 .eng {font-size: 2.6rem; font-weight: 500; line-height: 2.6rem; letter-spacing: 0.05em; color: var(--fcp);}
.secTit2 .tit {margin-top: 3rem; font-size: 6rem; font-weight: 700; line-height: 6rem; color: #111;}

@media all and (max-width: 880px){
    .secTit2 .eng {font-size: 1.6rem; line-height: 1.6rem;}
    .secTit2 .tit {margin-top: 2rem; font-size: 2.8rem; line-height: 2.8rem;}
}

.secTit .tit:first-child {margin-top: 0;} /* 소제목 없이 제목만 있는 경우 */


/* CTA 배너 (특화진료·외과특화·건강검진 하단 공통) : 배경 사진은 페이지마다 style로 지정 */
.subCta {position: relative; height: 45rem; padding-top: 10.3rem; background: no-repeat center 70% / cover; color: #fff;}
.subCta::before {content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.4);}
.subCta .inner {position: relative; z-index: 1;}
.subCta .tit {font-size: 5rem; font-weight: 700; line-height: 6.5rem;}
.subCta .txt {margin-top: 3.5rem; font-size: 2.5rem; line-height: 4rem;}

@media all and (max-width: 880px){
    .subCta {height: 37rem; padding-top: 9.2rem; text-align: center;}
    .subCta.warm {background-image: url(../img/cta_2_mo.jpg) !important;} /* 외과특화·건강검진 : 모바일 전용 배경 (인라인 PC 배경 덮어씀) */
    .subCta .tit {font-size: 2.8rem; line-height: 3.8rem;}
    .subCta .txt {margin-top: 2rem; font-size: 1.8rem; line-height: 3rem;}
}