@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

@font-face {
    font-family: 'GounBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Pretendard Variable", Pretendard, "Marcellus", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

body { color: #333; max-width: 1903px; margin: 0 auto; overflow-x: hidden; }
h2 { font-family: "Marcellus", "Noto Sans KR", "Malgun Gothic", sans-serif !important; }
h3, h4, h5, h6 {
    font-family: "Pretendard Variable", Pretendard, "Marcellus", "Noto Sans KR", "Malgun Gothic", sans-serif !important;
}

.section { position: relative; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; }

/* Doctor */
.sec-doc { background-image: url('/foreign/img/main/bg_doc.png'); aspect-ratio: 1903 / 1002; padding-top: 6.5vw; }
.sec-title { text-align: center; font-size: 3.8vw; font-family: "Marcellus", serif; color: #111; font-weight: 400; }
.sec-title2 { text-align: center; font-size: 3.1vw; font-family: "Marcellus", serif; color: #111; font-weight: 600; }
.sec-subtitle { text-align: center; font-size: 0.9vw; color: #888; margin-top: 0.5vw; letter-spacing: 0.05vw; }
.doc-content { position: absolute; top: 40%; left: 46%; width: 44%; }
.doc-quote { font-family: 'GounBatang'; font-size: 1.35vw; line-height: 1.5; color: #c15905; margin-bottom: 2.5vw; }
.doc-profile { margin-bottom: 1.2vw; }
.doc-name { font-size: 2.2vw; font-weight: 800; color: #000; display: flex; align-items: baseline; gap: 1vw; }
.doc-position { font-size: 1vw; font-weight: 600; color: #333; }
.doc-divider { width: 100%; height: 1px; background-color: #dfdfdf; margin-bottom: 1.8vw; }
.doc-credentials { display: flex; gap: 2vw; justify-content: space-between; }
.cred-col { width: 48%; list-style: none; }
.cred-col li {
    position: relative;
    padding-left: 0.8vw;
    font-size: 0.75vw;
    line-height: 1.6;
    color: #555;
    margin-bottom: 1vw;
    letter-spacing: -0.01vw;
}
.cred-col li::before { content: "•"; position: absolute; left: 0; color: #c15905; font-size: 0.7vw; }

/* Signature program */
.sec-program { width: 100%; padding: 8vw 5vw; }
.program-header { text-align: center; margin-bottom: 5vw; }
.sec-subtitle2 {
    font-size: 0.9vw;
    color: #999;
    margin-bottom: 1vw;
    font-family: "Marcellus", serif;
    text-align: center;
}
.program-list { display: flex; gap: 2vw; align-items: flex-start; justify-content: space-between; }
.program-item { display: flex; flex-direction: column; width: 18.4%; gap: 1.5vw; }
.img-box img { width: 100%; height: auto; display: block; }
.txt-box { display: flex; flex-direction: column; gap: 0.8vw; }
.prog-num { font-size: 1.1vw; color: #555; font-family: "Marcellus", serif; }
.prog-name { font-size: 1.3vw; font-weight: 600; color: #111; letter-spacing: 0.05vw; }
.prog-desc { font-size: 0.8vw; color: #333; line-height: 1.4; word-break: keep-all; letter-spacing: -0.02vw; }

/* Why */
.sec-why { width: 100%; padding: 8vw 5vw; background-color: #faf8f5; }
.txt-org { color: #d06020; }
.why-content { position: relative; width: 85%; margin: 0 auto; }
.why-center { position: absolute; top: 50%; left: 50%; width: 32vw; transform: translate(-50%, -50%); z-index: 2; }
.why-center img { width: 100%; display: block; border-radius: 50%; }
.why-wrap { position: relative; display: flex; justify-content: space-between; margin-bottom: 2vw; z-index: 1; }
.why-box {
    width: 44%;
    padding: 3vw 5vw;
    border-radius: 7vw;
    box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.box-left { background: linear-gradient(to right, #fff, #fcf9f5); text-align: left; }
.box-right { background: linear-gradient(to left, #fff, #fcf9f5); text-align: right; }
.why-num { font-size: 1.1vw; color: #d06020; font-family: "Marcellus", serif; margin-bottom: 0.8vw; }
.why-desc { font-size: 1.3vw; line-height: 1.4; color: #222; letter-spacing: -0.02vw; font-weight: 700; }
.why-desc strong { font-weight: 700; color: #111; }

/* Safe */
.sec-safe { background: url('/foreign/img/main/bg_safe.png') no-repeat center/cover; padding: 10vw 5vw; width: 100%; }
.safe-inner { display: flex; justify-content: space-between; align-items: flex-start; width: 85%; margin: 0 auto; }
.safe-left { width: 35%; display: flex; flex-direction: column; }
.safe-left .sec-subtitle2, .safe-left .sec-title2 { text-align: left; }
.safe-left .sec-title2 { font-size: 3.5vw; line-height: 1.3; font-weight: 700; color: #111; }
.safe-right {
    width: 55%;
    padding: 5vw 4vw 3vw;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0 4vw 0 8vw;
    box-shadow: 2.5vw 2.5vw 0 rgba(244, 234, 230, 0.9);
}
.timeline-wrap { position: relative; padding-left: 2vw; }
.timeline-item { position: relative; display: flex; gap: 1vw; margin-bottom: 2.8vw; }
.timeline-num { width: 2vw; font-size: 1.1vw; color: #d06020; font-family: "Marcellus", serif; font-weight: 600; }
.timeline-txt { width: calc(100% - 3vw); display: flex; flex-direction: column; gap: 0.8vw; }
.timeline-line { position: absolute; left: 0.2vw; top: 0.6vw; bottom: 3vw; width: 1px; background: #666; }
.timeline-dot {
    position: absolute;
    left: -1.95vw;
    top: 0.5vw;
    width: 0.4vw;
    height: 0.4vw;
    background: #333;
    border-radius: 50%;
    z-index: 2;
}
.timeline-txt h3 { font-size: 1.2vw; color: #111; line-height: 1.4; font-weight: 400; letter-spacing: -0.02vw; }
.timeline-txt h3 strong { font-weight: 700; }
.timeline-txt p { font-size: 0.85vw; color: #333; line-height: 1.5; letter-spacing: -0.02vw; }

/* Before & After */
.sec-bna { width: 100%; padding: 7.5vw 0 8vw; background: #f6f6f6; }
.bna-header { text-align: center; margin-bottom: 3.5vw; }
.sec-bna .sec-title { font-size: 3.1vw; }
.bna-inner { width: calc(100% - 100px); max-width: 1100px; margin: 0 auto; }
.bna-main-wrap { position: relative; width: 900px; margin: 0 auto; }
.bna-main { width: 100%; border-bottom: 1px dotted #020101; ; }
.bna-main-slide img { width: 100%; aspect-ratio: 2.9 / 1; object-fit: cover; display: block; }

.bna-caption {
    height: 36px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bna-caption span { width: 28%; font-size: 18px; font-family: "Marcellus", serif; }
.bna-caption strong { width: 44%; font-size: 15px; color: #111; text-align: center; }
.bna-before { color: #aaa; text-align: left; }
.bna-after { color: #d76c21; text-align: right; }

.bna-arrow {
    position: absolute;
    top: calc(50% - 18px);
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    appearance: none;
    overflow: hidden;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 5;
}

.bna-prev { left: -76px; }
.bna-next { right: -76px; }

.bna-arrow img {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    border-radius: 50%;
}

.bna-arrow:focus,
.bna-arrow:active {
    border: 0;
    outline: none;
    box-shadow: none;
}

.bna-arrow.slick-disabled {
    opacity: 0.35;
    cursor: default;
}

.bna-thumb { margin: 34px -8px 0; }
.bna-thumb .slick-slide { padding: 0 8px; outline: none; }
.bna-thumb-slide { cursor: pointer; opacity: 0.55; transition: opacity 0.25s ease; }
.bna-thumb-slide:hover, .bna-thumb-slide.is-active { opacity: 1; }

.bna-thumb-slide img {
    width: 100%;
    aspect-ratio: 2.9 / 1;
    object-fit: cover;
    display: block;
}

.bna-thumb .slick-dots {
    position: static;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 38px;
}

.bna-thumb .slick-dots li { width: 7px; height: 7px; margin: 0; }

.bna-thumb .slick-dots li button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #555;
    font-size: 0;
}

.bna-thumb .slick-dots li button::before { display: none; }

.bna-thumb .slick-dots li.slick-active button {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #555;
}
/* Before & After */

/* Equipment */
.sec-equipment { width: 100%; padding: 8vw 5vw 4vw; background: #fafafa; }
.eq-category { width: calc(100% - 100px); max-width: 1300px; margin: 0 auto 6vw; }
.eq-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 3vw 2.76%; }
.eq-item { width: 22.92%; display: flex; flex-direction: column; margin-bottom: 2vw; }
.cat-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 3vw; }
.cat-star { width: 1.5vw; margin-bottom: 1vw; }
.cat-title { font-size: 2vw; font-weight: 800; color: #111; letter-spacing: 0.05vw; }
.eq-img-box { background: #faf7f2; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1.05; }
.eq-img-box img { width: 100%; height: auto; display: block; }
.eq-name { background: #9f6f46; color: #fff; text-align: center; padding: 1vw 0; font-size: 1.1vw; }

/* Contact */
.sec-contact { width: 100%; padding: 8vw 0; aspect-ratio: 1903 / 790; }
.contact-inner {
    width: calc(100% - 100px);
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.contact-left { width: 45%; display: flex; flex-direction: column; }
.contact-right { width: 50%; display: flex; flex-direction: column; }
.info-title {
    font-family: "Marcellus", serif;
    font-size: clamp(20px, 2.7vw, 32px);
    color: #222;
    margin-bottom: 1.2vw;
    font-weight: 400;
}
.info-phone { font-family: "Marcellus", serif; font-size: clamp(28px, 3.8vw, 45px); color: #b66827; margin-bottom: 3vw; }
.time-table { display: flex; flex-direction: column; width: 100%; }
.time-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.8vw;
    font-size: clamp(13px, 1.4vw, 17px);
    color: #111;
}
.time-day { width: 33%; font-weight: 400; color: #333; }
.time-hours { width: 38%; font-weight: 700; }
.time-badge { width: 29%; }
.badge-late {
    background: #b66827;
    color: #fff;
    padding: 0.3vw 0.8vw;
    border-radius: 2vw;
    font-size: clamp(10px, 0.9vw, 13px);
}
.badge-no {
    background: #111;
    color: #fff;
    padding: 0.3vw 0.8vw;
    border-radius: 2vw;
    font-size: clamp(10px, 0.9vw, 13px);
}
.time-note { font-size: clamp(11px, 1.2vw, 14px); color: #555; margin: 0.5vw 0 3vw; }
.sns-wrap { display: flex; align-items: center; gap: 1.5vw; }
.sns-wrap img { width: auto; height: clamp(20px, 2.5vw, 36px); display: block; }
.sns-line { width: 1px; height: clamp(15px, 1.5vw, 24px); background: #e0e0e0; }
.map-address { font-size: clamp(13px, 1.4vw, 17px); color: #333; line-height: 1.4; margin-bottom: 1.5vw; }
.map-box { width: 100%; aspect-ratio: 680 / 390; overflow: hidden; background: #f4f4f4; }
.root_daum_roughmap { width: 100% !important; height: 100% !important; }

/* Transportation */
.sec-trans { background: url('/foreign/img/main/bg_loca.png') no-repeat center/cover; padding: 8vw 0; width: 100%; }
.trans-inner {
    width: calc(100% - 100px);
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.trans-item {
    width: 33.33%;
    padding: 0 1.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.trans-item:not(:last-child) { border-right: 1px dotted #ccc; }
.trans-icon {
    width: clamp(80px, 9vw, 140px);
    aspect-ratio: 1 / 1;
    background: #a66b3a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2vw;
}
.trans-icon img { width: 100%; height: auto; display: block; }
.trans-title { color: #a66b3a; font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; margin-bottom: 2vw; }
.trans-desc { color: #111; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.5; word-break: keep-all; }
.bus-line { margin-bottom: 1.2vw; line-height: 1.4; font-size: clamp(13px, 1vw, 16px); }

/* Footer */
.footer { width: 100%; padding: 4vw 0; background: #323736; }
.footer-inner { width: calc(100% - 100px); max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 4vw; }
.ft-logo { width: clamp(140px, 15vw, 220px); flex-shrink: 0; }
.ft-logo img { width: 100%; height: auto; display: block; }
.ft-info { display: flex; flex-direction: column; gap: 0.8vw; }
.ft-text { font-size: clamp(12px, 1.1vw, 14px); color: #ddd; line-height: 1.6; word-break: keep-all; }
.ft-bar { margin: 0 0.5vw; color: #777; font-size: 0.9em; }
.ft-copy { font-size: clamp(11px, 1vw, 13px); color: #999; }
