:root {
    --color-primary: #163b35;
    --color-accent: #006b63;
    --color-gold: #b58a36;
    --color-background: #f2f7f5;
    --color-surface: #ffffff;
    --color-text: #2f4547;
    --color-border: #dce7e2;
}

body {
    background: var(--color-background);
    color: var(--color-text);
    margin: 0;
    font-family: "Pretendard", 
    -apple-system, 
    BlinkMacSystemFont, 
    "Apple SD Gothic Neo", 
    "Malgun Gothic", 
    sans-serif;
    font-weight: 400;
}
header{
    background: var(--color-surface);
    --side-space: max(24px, calc((100vw - 1320px) / 2));
    padding: 14px var(--side-space) 0;    
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
.header-social {
    display: flex;
    justify-self: end;
    align-items: center;
    gap: 10px;
}
.social-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
}
.social-icon svg {
    width: 23px;
    height: 23px;
}
.social-naver {
    color: #03a94d;
    font-size: 24px;
    font-weight: 900;
}
.social-youtube { color: #d9252a; }
.social-instagram { color: #a33d80; }
nav {
    background: var(--color-primary);
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-block: 8px;
    margin-top: 16px;
    border-top: 1px solid var(--color-border);
    margin-inline: calc(-1 * var(--side-space));
    padding-inline: var(--side-space);
}
nav a {
    font-weight: 600;
    font-size: 20px; 
    color: var(--color-surface); 
    text-decoration: none;
    text-align: center;
    padding: 12px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.2s;
}
nav a:hover,
nav a:focus-visible {
    background: var(--color-accent);
}
header h1 {
    margin: 0;
    width: 320px;
    aspect-ratio: 3.45;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
header h1 img {
    position: absolute;
    width: 108.6%;
    max-width: none;
    height: auto;
    left: -4.3%;
    top: -46%;
}
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-background);
    min-height: clamp(420px, 60vh, 620px);
    box-sizing: border-box;
    padding: 32px max(32px, calc((100vw - 1280px) / 2));
    display: flex;
    align-items: center;
}
.hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.hero-text {
    position: relative;
    z-index: 1;
    max-width: 45%;
    word-break: keep-all;
}
.hero h2 {
    font-weight: 700;
    font-size: clamp(32px, 3.6vw, 58px);
    line-height: 1.25;
    letter-spacing: -0.04em;
    margin: 0 0 24px;
    color: var(--color-primary);
}
.hero p {
    font-size: 20px;
    color: var(--color-text);
    line-height: 1.6;
}
.header-phone {
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 12px;
    padding: 12px 20px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-background);
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.phone-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.phone-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.phone-text > span {
    font-size: 15px;
}
.header-phone strong {
    font-size: 24px;
}
.header-phone:hover,
.header-phone:focus-visible {
    color: var(--color-accent);
    background: var(--color-surface);
    border-color: var(--color-accent);
}
.hero-accent {
    color: var(--color-accent);
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.hero-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 54px;
    padding: 14px 28px;
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.button-primary {
    background: var(--color-accent);
    color: var(--color-surface);
}
.button-secondary {
    background: var(--color-surface);
    color: var(--color-accent);
}
.hero-actions a:hover {
    background: var(--color-primary);
    color: var(--color-surface);
}
.hero-actions a:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
}
.dialysis-notice {
    padding: 72px max(24px, calc((100% - 1280px) / 2));
    background: var(--color-background);
    word-break: keep-all;
}
.dialysis-heading {
    text-align: center;
    margin-bottom: 36px;
}
.section-label {
    margin: 0 0 16px;
    color: var(--color-accent);
    font-size: 18px;
    font-weight: 700;
}
.dialysis-heading h2 {
    margin: 0;
    color: var(--color-primary);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.35;
    letter-spacing: -0.035em;
}
.dialysis-symptoms {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 16px;
}
.dialysis-symptoms li {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 144px;
    padding: 24px;
    border: 1px solid #cdded6;
    border-top: 3px solid #7ba99a;
    background: #e5efea;
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.7;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}
@media (hover: hover) and (pointer: fine) {
    .dialysis-symptoms li:hover {
        transform: translateY(-4px) scale(1.025);
        background: #d9e9e1;
        box-shadow: 0 10px 24px rgb(22 59 53 / 10%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .dialysis-symptoms li {
        transition: none;
    }
    .dialysis-symptoms li:hover {
        transform: none;
    }
}
.dialysis-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 32px;
}
.dialysis-contact p {
    margin: 0;
    font-size: 20px;
    line-height: 1.8;
}
.dialysis-contact p strong {
    font-weight: 600;
    color: var(--color-primary);
}
.dialysis-call {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 28px;
    border-radius: 16px;
    background: var(--color-primary);
    color: var(--color-surface);
    text-decoration: none;
    transition: background-color 0.2s;
}
.dialysis-call span { font-size: 15px; }
.dialysis-call strong {
    font-size: clamp(26px, 3vw, 32px);
    letter-spacing: -0.02em;
}
.dialysis-call:hover { background: var(--color-accent); }
.dialysis-call:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 6px;
}

.care-section {
    padding: 72px max(24px, calc((100% - 1280px) / 2));
    background: var(--color-surface);
    word-break: keep-all;
}
.care-section > h2 {
    margin: 0 0 36px;
    text-align: center;
    color: var(--color-primary);
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.035em;
}
.care-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}
.care-card {
    position: relative;
    min-width: 0;
    min-height: 520px;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-primary);
}
.care-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: .76;
    transition: transform .5s ease, opacity .5s ease;
    z-index: -2;
}
.care-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(11 36 31 / 8%) 20%, rgb(11 36 31 / 38%) 55%, rgb(11 36 31 / 94%) 100%);
    z-index: -1;
    pointer-events: none;
}
.care-copy { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 24px; color: white; }
.care-copy h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.4; margin: 0 0 16px; color: white; word-break: keep-all; }
.care-copy p { font-size: 20px; line-height: 1.7; margin: 0; color: #f0f5f2; word-break: keep-all; }
@media (hover: hover) and (pointer: fine) {
    .care-card:hover > img { transform: scale(1.1); opacity: 1; }
}
@media (max-width: 1000px) {
    .care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .care-card { min-height: 430px; }
}
@media (max-width: 520px) {
    .care-grid { grid-template-columns: 1fr; }
    .care-card { min-height: 400px; }
}
@media (prefers-reduced-motion: reduce) {
    .care-card > img { transition: none; }
    .care-card:hover > img { transform: none; }
}

/* 의료진 소개: 제목 다음에 사진과 학술 활동을 배치 */
.director-section {
    background: #fff;
    overflow: hidden;
    word-break: keep-all;
    padding-top: 72px;
}
.director-intro { text-align: center; padding: 0 24px 64px; }
.director-intro h2 { margin: 12px 0 20px; font-size: clamp(32px, 4vw, 44px); color: var(--color-primary); }
.director-intro-message { font-size: 24px; margin: 0; line-height: 1.6; }
.director-profile {
    display: flex;
    align-items: flex-end;
    gap: 64px;
    padding: 28px max(24px, calc((100% - 1280px) / 2)) 0;
    background: #f5f8f6;
}
.director-portrait { width: 36%; max-width: 440px; flex-shrink: 0; position: relative; isolation: isolate; }
.director-portrait::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -4% 0;
    border-radius: 50% 50% 0 0 / 34% 34% 0 0;
    background: #dcebe4;
}
.director-photo {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(7px 3px 10px rgb(22 59 53 / 10%)); clip-path: inset(0 0 0 .35%);
}
.director-copy { flex: 1; min-width: 0; padding: 20px 0 52px; }
.director-copy h3 { margin: 0 0 12px; font-size: clamp(36px, 4vw, 48px); color: var(--color-primary); line-height: 1.4; }
.director-copy h3 span { font-size: 22px; font-weight: 500; margin-right: 12px; }
.director-qualification { margin: 0 0 36px; font-size: 20px; line-height: 1.8; color: var(--color-accent); }
.director-research { margin: 0 0 28px; max-width: 680px; font-size: 20px; line-height: 1.8; }
.director-activity-title { font-size: 22px; margin: 0 0 16px; color: var(--color-primary); }
.director-career { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 0; padding: 22px 0 0; border-top: 1px solid #c9dbd1; list-style: none; font-size: 20px; line-height: 1.7; }
.director-career li { padding-left: 15px; position: relative; }
.director-career li::before { content: ''; width: 4px; height: 4px; background: var(--color-accent); position: absolute; left: 0; top: 14px; border-radius: 50%; }
@media (max-width: 800px) {
    .director-profile { flex-direction: column; align-items: center; gap: 32px; background: #eaf2ee; }
    .director-portrait { width: min(75%, 320px); }
    .director-copy { padding: 0 0 40px; width: 100%; }
    .director-career { grid-template-columns: 1fr; }
    .director-intro { padding-bottom: 36px; }
}

.academic-details { margin-top: 30px; }
.academic-details summary { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: fit-content; max-width: 100%; box-sizing: border-box; padding: 16px 26px; background: var(--color-primary); color: white; border-radius: 8px; font-size: 20px; font-weight: 600; cursor: pointer; list-style: none; }
.academic-details summary::-webkit-details-marker { display: none; }
.academic-details summary:hover { background: var(--color-accent); }
.academic-details summary:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 4px; }
.academic-details[open] summary span { transform: rotate(45deg); }
.academic-content { margin-top: 24px; padding: 24px; background: white; border: 1px solid var(--color-border); border-radius: 12px; overflow-wrap: anywhere; }
.academic-group + .academic-group { margin-top: 36px; }
.academic-group h5 { font-size: 24px; color: var(--color-primary); margin: 0 0 20px; }
.academic-item { padding: 20px 0; border-top: 1px solid var(--color-border); }
.academic-item h6 { font-size: 20px; line-height: 1.6; margin: 0 0 10px; color: var(--color-accent); }
.academic-item p, .academic-item a { font-size: 18px; line-height: 1.7; margin: 8px 0; }
.academic-item a { color: var(--color-accent); text-underline-offset: 4px; }
.director-profile:has(.academic-details[open]) { align-items: flex-start; }

/* 각 진료 분야의 경계와 세로 브랜드 표기 */
.care-card { box-sizing: border-box; border: 1px solid rgb(255 255 255 / 50%); }
.care-brand { position: absolute; z-index: 1; top: 22px; left: 16px; writing-mode: vertical-rl; font-size: 11px; letter-spacing: 2px; color: rgb(255 255 255 / 85%); pointer-events: none; }

/* 긴 진료명도 카드 너비에 맞춰 한 줄로 표시 */
.care-card { container-type: inline-size; }
.care-copy h3 { white-space: nowrap; font-size: clamp(24px, 9.2cqi, 36px); letter-spacing: -0.055em; }
.care-copy h3, .care-copy p { transition: opacity .35s ease; }
@media (hover: hover) and (pointer: fine) {
    .care-card:hover .care-copy h3 { opacity: .35; }
    .care-card:hover .care-copy p { opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
    .care-copy h3, .care-copy p { transition: none; }
}

.care-copy { padding-inline: 12px; }

/* 설명 줄 수와 관계없이 네 카드의 제목 높이를 통일 */
.care-copy p { min-height: 3.4em; }

.care-section #care-title { margin-bottom: 16px; }
.care-intro { margin: 0 0 40px; text-align: center; font-size: clamp(20px, 2vw, 24px); line-height: 1.7; color: var(--color-accent); word-break: keep-all; }

/* 네 가지 진료 단계와 필요 시 재진하는 흐름 */
.principles-section { padding: 56px max(24px, calc((100% - 1280px) / 2)); background: #f2f7f5; word-break: keep-all; }
.principles-heading { text-align: center; margin-bottom: 38px; }
.principles-heading h2 { font-size: clamp(28px, 2.7vw, 38px); line-height: 1.4; margin: 0 0 12px; color: var(--color-primary); }
.principles-message { margin: 0; font-size: clamp(23px, 2.3vw, 30px); line-height: 1.5; color: var(--color-accent); }
.care-route-wrap { position: relative; margin: 0 20px; padding-bottom: 70px; }
.care-route { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.care-route li { position: relative; text-align: center; padding: 0 20px; }
.care-route li:not(:last-child)::before { content: ''; position: absolute; top: 13px; left: 50%; width: 100%; height: 3px; background: #9bbeb0; }
.route-dot { position: relative; z-index: 1; display: block; width: 28px; height: 28px; margin: 0 auto 22px; border-radius: 50%; background: #f2f7f5; border: 5px solid var(--color-accent); box-sizing: border-box; }
.care-route h3 { font-size: 24px; line-height: 1.4; color: var(--color-primary); margin: 0 0 12px; }
.care-route p { font-size: 19px; line-height: 1.65; color: var(--color-text); margin: 0; }
.route-return { position: absolute; top: 0; left: 0; width: 100%; height: 230px; overflow: visible; pointer-events: none; }
.route-return-label { position: relative; width: fit-content; margin: 48px auto -42px; padding: 0 16px; background: #f2f7f5; color: var(--color-accent); font-size: 18px; font-weight: 600; }
.route-note { text-align: center; margin: 12px 0 0; font-size: 16px; color: #60756c; }
@media (max-width: 800px) {
 .principles-section { padding-block: 44px; }
 .care-route-wrap { margin: 0; padding-bottom: 8px; }
 .care-route { display: block; }
 .care-route li { text-align: left; padding: 0 0 28px 60px; min-height: 85px; }
 .care-route li:not(:last-child)::before { left: 13px; top: 14px; width: 3px; height: 100%; }
 .route-dot { position: absolute; top: 3px; left: 0; margin: 0; }
 .route-return { display: none; }
 .route-return-label { margin: 0 0 20px 60px; padding: 0; }
 .route-return-label::before { content: '↶ '; }
}

/* 핵심 진료 세 단계를 하나의 영역으로 강조 */
.principles-heading h2 { font-size: 21px; font-weight: 600; margin-bottom: 12px; }
.principles-message { font-size: clamp(30px, 3.8vw, 48px); font-weight: 700; letter-spacing: -.04em; }
.care-route-wrap { isolation: isolate; padding-top: 32px; }
.care-route-wrap::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 25%; right: 0; background: #dfede5; border-radius: 28px; }
.care-route li:not(:first-child)::before { background: var(--color-accent); height: 4px; }
.care-route li:first-child h3 { font-size: 21px; color: #60756c; }
.care-route li:first-child p { font-size: 17px; color: #60756c; }
.care-route li:first-child .route-dot { border-width: 3px; border-color: #9bbeb0; }
.care-route li:not(:first-child) .route-dot { background: #dfede5; }
.route-return { top: 32px; opacity: .55; }
.route-return-label { margin-left: 38%; background: #dfede5; color: #526f62; font-size: 16px; }
@media (max-width: 800px) {
 .care-route-wrap::before { left: -12px; right: -12px; top: 145px; }
 .care-route li:not(:first-child)::before { width: 4px; height: 100%; }
 .route-return-label { margin-left: 60px; }
}

.care-route-wrap { padding-bottom: 32px; }

/* 시설과 방문 안내 */
.facility-section, .visit-section { padding: 80px max(24px, calc((100% - 1280px) / 2)); word-break: keep-all; }
.facility-section { background: #fff; }
.section-heading { text-align: center; margin-bottom: 40px; }
.section-heading h2 { margin: 12px 0 20px; font-size: clamp(30px, 3.5vw, 44px); color: var(--color-primary); }
.section-heading > p:not(.section-label) { font-size: 21px; line-height: 1.7; color: var(--color-text); }
.facility-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid #dce7e2; }
.facility-grid article { padding: 32px 20px; text-align: center; }
.facility-grid article + article { border-left: 1px solid #dce7e2; }
.facility-symbol { display: grid; place-items: center; margin: 0 auto 20px; width: 64px; height: 64px; border-radius: 50%; background: #e5efe9; color: #006b63; font-size: 38px; }
.facility-grid h3 { font-size: 24px; margin: 0 0 14px; color: var(--color-primary); }
.facility-grid p { font-size: 20px; line-height: 1.7; margin: 0; color: var(--color-text); }
.facility-notice { text-align: center; margin: 24px 0 0; font-size: 17px; color: #60756c; }
.visit-section { background: #f2f7f5; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; background: white; border-radius: 24px; overflow: hidden; }
.visit-hours, .visit-address { padding: 36px 40px; }
.visit-address { border-left: 1px solid #dce7e2; }
.visit-grid h3 { font-size: 28px; color: var(--color-primary); margin: 18px 0 24px; }
.opening-label { font-size: 17px; color: #006b63; }
.hours-list { margin: 0; }
.hours-list div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #e5ede8; font-size: 21px; }
.hours-list dd { margin: 0; font-weight: 650; color: var(--color-primary); }
.visit-call { margin-top: 28px; }
.visit-call p { font-size: 18px; margin: 0 0 8px; }
.visit-call a { font-size: clamp(26px,3vw,36px); font-weight: 700; color: #006b63; text-decoration: none; }
.visit-address p { font-size: 20px; line-height: 1.7; margin: 8px 0; }
.visit-address .address-main { font-size: 23px; font-weight: 600; }
.parking-info { margin-top: 24px; }
.parking-info strong { font-size: 21px; color: var(--color-primary); }
.map-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.map-links a { padding: 13px 18px; border: 1px solid #adcabc; border-radius: 8px; color: #163b35; font-size: 18px; text-decoration: none; }
.map-links a:hover { background: #e5efe9; }
.location-images { display: grid; gap: 24px; margin-top: 32px; }
.location-images figure { margin: 0; background: white; border-radius: 20px; overflow: hidden; }
.location-images img { display: block; width: 100%; height: auto; }
@media (max-width: 800px) {
 .facility-section, .visit-section { padding-block: 52px; }
 .facility-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .facility-grid article:nth-child(3) { border-left: 0; }
 .facility-grid article:nth-child(n+3) { border-top: 1px solid #dce7e2; }
 .visit-grid { grid-template-columns: 1fr; }
 .visit-hours, .visit-address { padding: 28px 24px; }
 .visit-address { border-left: 0; border-top: 1px solid #dce7e2; }
}
@media (max-width: 420px) { .facility-grid h3 { font-size: 21px; } .facility-grid p { font-size: 18px; } .hours-list div { font-size: 19px; } }

.principles-mark { display: block; width: 64px; height: 64px; object-fit: contain; margin: 0 auto 16px; mix-blend-mode: multiply; }
.facility-grid { gap: 20px; border: 0; }
.facility-grid article { padding: 0 0 24px; background: #f2f7f5; border-radius: 16px; overflow: hidden; }
.facility-grid article + article { border-left: 0; }
.facility-photo { width: 100%; height: 200px; object-fit: cover; display: block; margin-bottom: 24px; }
@media(max-width: 800px) { .facility-photo { height: 170px; } .facility-grid { gap: 14px; } }

.site-footer { background: #17211e; color: #c5cec9; padding: 44px max(24px, calc((100% - 1280px) / 2)) 28px; word-break: keep-all; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid #39443f; }
.footer-top img { width: 270px; max-width: 70%; height: auto; }
.back-top { color: #c5cec9; text-decoration: none; font-size: 16px; }
.footer-body { display: flex; justify-content: space-between; gap: 32px; padding: 22px 0; }
.footer-body p, .footer-body address { font-style: normal; font-size: 17px; line-height: 1.8; margin: 8px 0; }
.footer-body .footer-name { color: white; font-size: 20px; }
.footer-name span { font-size: 17px; color: #c5cec9; margin-left: 18px; }
.footer-contact a { color: white; font-size: 30px; font-weight: 650; text-decoration: none; }
.footer-copyright { font-size: 14px; color: #9eaca4; margin: 0; }
@media(max-width: 800px) { .footer-body { flex-direction: column; gap: 12px; } .footer-name span { display: block; margin-left: 0; } }

/* 약도와 건물 안내를 나란히 비교 */
.location-images { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 20px; }
.location-images img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 700px) { .location-images { grid-template-columns: 1fr; gap: 16px; } }

/* 이미지 비율 차이와 관계없이 두 안내 틀의 높이를 통일 */
.location-images { align-items: stretch; }
.location-images figure { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.location-images img { width: 100%; height: 100%; object-fit: contain; }


.footer-top { justify-content: flex-end; }

.scroll-top { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 66px; height: 66px; border: 1px solid #7d9e8f; border-radius: 50%; background: #163b35; color: white; box-shadow: 0 4px 18px #163b3526; cursor: pointer; font-family: inherit; font-size: 13px; }
.scroll-top[hidden] { display: none; }
.scroll-top > span:first-child { font-size: 25px; line-height: 1; }
.scroll-top:hover { background: #006b63; }
.scroll-top:focus-visible { outline: 3px solid #b58a36; outline-offset: 4px; }
@media(max-width: 700px) { .scroll-top { right: 16px; bottom: 16px; width: 58px; height: 58px; } }

/* 기존 인쇄 QR을 유지하는 빠른 안내 */
.visit-address { display: flex; align-items: flex-start; gap: 24px; }
.visit-address-copy { min-width: 0; flex: 1; }
.visit-qr { flex: 0 0 150px; align-self: center; color: var(--color-primary); text-align: center; text-decoration: none; }
.visit-qr img { display: block; width: 100%; height: auto; }
.visit-qr span { display: block; font-size: 15px; margin-top: 10px; }
.quick-contact { position: fixed; z-index: 90; right: 16px; top: 50%; transform: translateY(-50%); width: 104px; padding: 8px; border: 1px solid #dce7e2; border-radius: 16px; background: white; box-shadow: 0 4px 24px #163b3514; }
.quick-contact a { text-decoration: none; text-align: center; }
.quick-qr { display: block; color: #163b35; font-size: 14px; font-weight: 600; }
.quick-qr img { display: block; width: 88px; height: auto; }
.quick-phone { display: block; margin-top: 8px; padding: 12px 3px; border-radius: 10px; background: #163b35; color: white; font-size: 14px; font-weight: 600; }
.quick-contact a:focus-visible, .visit-qr:focus-visible { outline: 3px solid #b58a36; outline-offset: 3px; }
@media (max-width: 1600px) {
 body { padding-bottom: 96px; }
 .quick-contact { top: auto; right: auto; left: 16px; bottom: 12px; transform: none; width: auto; display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
 .quick-qr { display: flex; align-items: center; gap: 5px; font-size: 12px; }
 .quick-qr img { width: 58px; }
 .quick-qr span { max-width: 24px; }
 .quick-phone { margin: 0; padding: 14px 10px; }
}
@media (min-width: 801px) and (max-width: 1250px) { .visit-address { flex-direction: column; } .visit-qr { align-self: flex-start; flex-basis: auto; width: 160px; } }
@media (max-width: 520px) { .visit-address { flex-direction: column; } .visit-qr { align-self: center; flex-basis: auto; width: 180px; } }

.hours-list dd small { display: block; font-size: 16px; font-weight: 400; text-align: right; }
@media (max-width: 700px) {
 header { grid-template-columns: 1fr; justify-items: center; --side-space: 16px; }
 header h1 { grid-row: 1; width: min(300px,100%); }
 .header-phone { grid-row: 2; justify-self: center; margin-top: 12px; }
 .header-social { grid-row: 3; justify-self: center; margin-top: 14px; }
 header nav { width: 100%; box-sizing: content-box; grid-template-columns: repeat(3,minmax(0,1fr)); }
 header nav a { font-size: 16px; padding-inline: 4px; }
}

/* 오른쪽 세로형 빠른 안내 */
.director-former { font-size: 20px; line-height: 1.6; color: var(--color-primary); margin: 0 0 24px; }
.quick-contact { left: auto; right: 16px; top: 50%; bottom: auto; transform: translateY(-50%); width: 132px; box-sizing: border-box; padding: 10px; display: block; }
.quick-qr { display: block; font-size: 19px; }
.quick-qr img { width: 110px; height: auto; }
.quick-qr span { display: block; max-width: none; margin-top: 4px; }
.quick-phone { display: block; margin-top: 12px; padding: 14px 4px; font-size: 18px; }
.visit-qr { flex-basis: 220px; width: 220px; }
.visit-qr span { font-size: 18px; }
@media (min-width: 1100px) { body { padding-right: 0; padding-bottom: 0; } header { --side-space: 24px; } }
@media (min-width: 801px) and (max-width: 1250px) { .visit-qr { width: 240px; flex-basis: auto; align-self: center; } }
@media (max-width: 1099px) { .quick-contact { right: 8px; width: 100px; padding: 6px; top: auto; bottom: calc(94px + env(safe-area-inset-bottom,0px)); transform: none; } .quick-qr img { width: 86px; } .quick-qr { font-size: 17px; } .quick-phone { font-size: 16px; padding: 12px 0; } body { padding-bottom: calc(160px + env(safe-area-inset-bottom,0px)); } }
@media (max-width: 520px) { .visit-qr { width: 240px; flex-basis: auto; } .director-former { font-size: 18px; } }

/* 본문 너비를 유지하는 화면 위 고정 안내 */
.quick-contact { width: 162px; }
.quick-qr img { width: 100%; }
@media (max-width: 1099px) { .quick-contact { width: 122px; } .quick-qr img { width: 100%; } }

.visit-qr { width: 270px; flex-basis: 270px; }
@media(max-width:1250px) { .visit-qr { width:270px; flex-basis:auto; } }

.director-former { font-weight: 700; }
.quick-contact { border: 2px solid #729e8f; box-shadow: 0 6px 24px #163b3524; }

/* 증상을 먼저 알아볼 수 있는 아이콘 카드 */
.dialysis-subtitle { margin:16px 0 0; font-size:20px; line-height:1.6; color:#52675f; }
.dialysis-symptoms { grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.dialysis-symptoms li { flex-direction:column; align-items:center; text-align:center; padding:24px 16px; border:1px solid #d3e3db; border-radius:16px; background:#e6f0eb; box-shadow:0 3px 12px #163b3505; }
.symptom-icon { width:76px; height:76px; flex-shrink:0; margin-bottom:18px; color:#246e60; }
.dialysis-symptoms h3 { font-size:21px; line-height:1.45; letter-spacing:-.04em; margin:0 0 12px; font-weight:750; min-height:61px; display:flex; align-items:center; }
.dialysis-symptoms li p { font-size:17px; line-height:1.65; font-weight:400; margin:0; color:#52675f; }
.dialysis-contact { margin-top:24px; padding:28px 32px; border-radius:16px; background:#163b35; color:white; flex-wrap:nowrap; }
.dialysis-cta-copy { min-width:0; }
.dialysis-cta-copy h3 { font-size:26px; line-height:1.5; margin:0 0 8px; letter-spacing:-.025em; }
.dialysis-cta-copy em { font-style:normal; color:#e6cc8e; }
.dialysis-contact p { font-size:17px; line-height:1.65; color:#dce9e3; }
.dialysis-call { flex-shrink:0; border-radius:0; border-left:1px solid #ffffff40; padding:8px 0 8px 32px; background:transparent; }
.dialysis-call span { font-size:17px; color:#dce9e3; }
.dialysis-call strong { font-size:32px; white-space:nowrap; }
.dialysis-call:hover { background:transparent; color:#e6cc8e; }
@media(max-width:1099px) { .dialysis-symptoms { grid-template-columns:repeat(2,minmax(0,1fr)); } .dialysis-symptoms h3 { min-height:0; } .dialysis-contact { flex-direction:column; align-items:stretch; } .dialysis-call { text-align:center; border-left:0; border-top:1px solid #ffffff40; padding:20px 0 0; } }
@media(max-width:520px) { .dialysis-symptoms { grid-template-columns:1fr; } .dialysis-symptoms li { padding:24px; } .dialysis-contact { padding:24px; } .dialysis-cta-copy h3 { font-size:24px; } .dialysis-subtitle { font-size:18px; } }

.hero { min-height: max(420px, calc(100svh - var(--header-height, 180px))); }
.quick-phone { line-height:1.5; }

/* 상세 페이지로 이어지는 주 메뉴 */
.site-nav { position:relative; z-index:110; }
.nav-group { min-width:0; position:relative; }
.nav-parent { display:block; }
.nav-dropdown { display:none; position:absolute; top:100%; left:0; width:100%; min-width:0; box-sizing:border-box; padding:10px 0; background:white; border:1px solid #dce7e2; border-top:3px solid #b58a36; border-radius:0 0 12px 12px; box-shadow:0 14px 32px #163b3520; }
.nav-group:last-child .nav-dropdown { left:auto; right:0; }
.nav-dropdown a { display:block; padding:13px 20px; text-align:left; color:#163b35; font-size:17px; white-space:normal; }
.nav-dropdown a:hover,.nav-dropdown a:focus-visible { background:#e6f0eb; }
.nav-group:hover .nav-dropdown,.nav-group:focus-within .nav-dropdown { display:block; }
.care-card { text-decoration:none; }
.academic-link { color:#006b63; font-size:18px; font-weight:650; text-decoration:none; }

/* 시설별 역할을 중심으로 세 공간 안내 */
.facility-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.facility-photo { height:240px; margin-bottom:0; }
.facility-copy { padding:26px 22px 8px; text-align:left; }
.facility-grid .facility-name { font-size:17px; color:#507b68; font-weight:650; margin-bottom:12px; }
.facility-grid h3 { font-size:27px; line-height:1.5; min-height:81px; margin-bottom:16px; }
.facility-grid .facility-copy > p:last-child { font-size:18px; }
/* QR·전화·맨 위로를 화면 오른쪽 아래 한 묶음으로 */
.quick-contact { top:auto; left:auto; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:none; width:142px; padding:8px; }
.quick-contact .scroll-top { position:static; width:100%; height:46px; flex-direction:row; gap:8px; margin-top:8px; border:0; border-radius:8px; box-shadow:none; font-size:14px; }
.quick-contact .quick-phone { font-size:17px; }
.quick-contact .quick-qr img { width:100%; }
@media(max-width:800px) { .facility-grid { grid-template-columns:1fr; }.facility-grid h3 { min-height:0; }.quick-contact { width:112px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); }.quick-contact .quick-phone { font-size:15px; } }

.quick-toggle { display:block; margin:0 0 5px auto; border:0; background:transparent; color:#163b35; font:inherit; font-size:25px; line-height:1; width:30px; height:30px; cursor:pointer; border-radius:6px; }
.quick-toggle:hover { background:#e6f0eb; }.quick-toggle:focus-visible { outline:3px solid #b58a36; }
.quick-contact.is-collapsed { width:112px; }.quick-contact.is-collapsed .quick-qr,.quick-contact.is-collapsed .quick-phone { display:none; }.quick-contact.is-collapsed .quick-toggle { width:100%; font-size:16px; margin:0; height:36px; font-weight:600; }
/* 안내를 닫으면 기존 원형 맨 위로 버튼만 독립적으로 남김 */
.quick-contact.is-collapsed { width:auto; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.quick-contact.is-collapsed .quick-toggle { width:auto; margin:0 0 8px auto; padding:6px 12px; height:32px; background:white; border:1px solid #b7ccc0; border-radius:20px; font-size:13px; }
.quick-contact.is-collapsed .scroll-top { width:66px; height:66px; border-radius:50%; flex-direction:column; gap:2px; margin:0 0 0 auto; border:1px solid #7d9e8f; box-shadow:0 4px 18px #163b3526; font-size:13px; }
/* 닫기는 별도 줄 없이 모서리에 배치 */
.quick-contact:not(.is-collapsed) .quick-toggle { position:absolute; top:-12px; right:-10px; margin:0; width:26px; height:26px; border-radius:50%; background:#e5e7e6; color:#59625e; border:1px solid #d2d7d4; font-size:21px; display:grid; place-items:center; line-height:1; }
.quick-contact:not(.is-collapsed) .quick-toggle:hover { background:#cfd6d2; }

/* 메인 내비게이션과 이어지는 하위 메뉴 */
.site-nav .nav-dropdown { background:#163b35; border:1px solid #42665a; border-top:3px solid #83b6a1; border-radius:0 0 12px 12px; padding:8px; box-shadow:0 12px 24px #102d3529; }
.site-nav .nav-dropdown a { color:#eef6f1; font-size:18px; padding:14px 18px; border-radius:6px; border-bottom:1px solid #ffffff16; text-align:left; transition:background .18s,color .18s; }
.site-nav .nav-dropdown a:last-child { border-bottom:0; }
.site-nav .nav-dropdown a:hover,.site-nav .nav-dropdown a:focus-visible { background:#dceee5; color:#163b35; }
.site-nav .nav-group:hover > .nav-parent,.site-nav .nav-group:focus-within > .nav-parent { background:#28594b; color:#fff; }
.photo-credits { margin:16px 0 0; font-size:13px; color:#62756c; text-align:right; }
.photo-credits summary { cursor:pointer; }.photo-credits p { text-align:left; line-height:1.7; padding:12px 0; }.photo-credits a { color:inherit; }

/* Mobile: readable navigation and a compact, action-first page. */
.mobile-menu-trigger,.mobile-contact-bar { display:none; }
.mobile-menu { border:0; color:var(--color-primary); background:#f7faf8; }
.mobile-menu::backdrop { background:#102d3580; }
@media(max-width:800px) {
 html { scroll-padding-top:92px; }
 body { padding:0 0 calc(90px + env(safe-area-inset-bottom,0px)); font-size:18px; }
 body.menu-open { overflow:hidden; }
 body > header { position:sticky; top:0; z-index:120; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; min-height:72px; box-sizing:border-box; border-bottom:1px solid #dce7e2; }
 header h1,header .brand-logo { width:220px; max-width:calc(100% - 84px); margin:0; flex-shrink:1; }
 header .header-phone,header .header-social,header .site-nav { display:none; }
 .mobile-menu-trigger { display:block; flex-shrink:0; border:1px solid #dce7e2; border-radius:10px; padding:12px 10px; font:inherit; font-size:16px; font-weight:650; color:#163b35; background:white; min-height:44px; }
 .mobile-menu { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; padding:0 20px max(28px,env(safe-area-inset-bottom)); box-sizing:border-box; }
 .mobile-menu-heading { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; background:#f7faf8; padding:16px 0; border-bottom:1px solid #dce7e2; }
 .mobile-menu-heading h2 { margin:0; font-size:24px; }.mobile-menu-close { background:white; border:1px solid #dce7e2; border-radius:10px; font:inherit; color:inherit; padding:12px; }
 .mobile-menu-groups { display:grid; grid-template-columns:1fr 1fr; gap:28px 20px; padding:24px 0; }
 .mobile-menu-groups section { min-width:0; }.mobile-menu-groups h3 { font-size:19px; line-height:1.5; margin:0 0 8px; border-bottom:2px solid #83b6a1; padding-bottom:10px; }
 .mobile-menu-groups a { display:block; color:#163b35; text-decoration:none; font-size:17px; line-height:1.5; padding:10px 0; overflow-wrap:anywhere; word-break:keep-all; }
 .mobile-menu-groups h3 a { font-size:inherit; padding:0; }
 .mobile-contact-bar { display:flex; gap:8px; position:fixed; z-index:130; bottom:0; left:0; right:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:#fffffffa; border-top:1px solid #dce7e2; box-shadow:0 -3px 16px #163b3508; }
 .mobile-contact-bar a { display:flex; justify-content:center; align-items:center; min-height:52px; border-radius:10px; text-decoration:none; font-size:18px; font-weight:700; }
 .mobile-location { flex:1; color:#163b35; background:#e6f0eb; }.mobile-call { flex:2; gap:12px; color:white; background:#163b35; }
 .quick-contact,.quick-contact.is-collapsed { width:auto; padding:0; border:0; background:transparent; box-shadow:none; right:16px; bottom:calc(88px + env(safe-area-inset-bottom,0px)); }
 .quick-contact .quick-qr,.quick-contact .quick-phone,.quick-contact .quick-toggle { display:none!important; }
 .quick-contact .scroll-top,.quick-contact.is-collapsed .scroll-top { width:46px; height:46px; border-radius:50%; margin:0; background:white; color:#163b35; border:1px solid #b7ccc0; box-shadow:0 3px 12px #163b3510; }
 .quick-contact .scroll-top span:last-child { display:none; }.quick-contact .scroll-top[hidden] { display:none; }
 body:not(.detail-page) main { display:flex; flex-direction:column; }
 .hero { order:0; }.care-section { order:1; }.dialysis-notice { order:2; }.director-section { order:3; }.principles-section { order:4; }.facility-section { order:5; }.visit-section { order:6; }
 .hero { min-height:0; padding:32px 20px 0; display:flex; flex-direction:column; align-items:stretch; gap:24px; }
 .hero-text { width:100%; max-width:none; padding:0; flex:auto; }
 .hero h2 { font-size:30px; line-height:1.4; letter-spacing:-.04em; margin:0 0 18px; word-break:keep-all; }
 .hero p { font-size:18px; line-height:1.65; margin:0 0 18px; }.hero p br { display:none; }
 .hero-actions { gap:10px; margin:20px 0 0; }.hero-actions a { font-size:17px; min-height:48px; padding:12px 18px; box-sizing:border-box; }
 .hero-image { position:static; width:calc(100% + 40px); max-width:none; height:auto; max-height:none; margin:0 -20px; object-fit:contain; align-self:auto; border-radius:0; }
 .care-section,.dialysis-notice,.director-section,.principles-section,.facility-section,.visit-section { padding:48px 20px; }
 .care-section h2,.dialysis-heading h2,.director-intro h2,.section-heading h2 { font-size:28px; line-height:1.4; letter-spacing:-.03em; }
 .care-intro,.section-heading > p { font-size:18px; line-height:1.65; }.section-heading br { display:none; }
 .care-grid { display:grid; grid-template-columns:1fr; gap:12px; border:0; }
 .care-card { display:flex; align-items:center; height:auto; min-height:120px; padding:14px; gap:16px; background:#e6f0eb; border:1px solid #d3e3db; border-radius:14px; overflow:hidden; }
 .care-card::after,.care-card::before,.care-brand { display:none; }
 .care-card img { position:static; width:86px; height:100px; flex:0 0 86px; object-fit:contain; transform:none; opacity:1; }
 .care-card .care-copy { position:static; padding:0; min-height:0; width:auto; flex:1; color:#163b35; }
 .care-card .care-copy h3 { font-size:21px; line-height:1.45; white-space:normal; margin:0 0 7px; color:#163b35; }
 .care-card .care-copy p { font-size:17px; line-height:1.55; color:#52675f; min-height:0; margin:0; }
 .care-card:hover img { transform:none; }.care-card:hover .care-copy,.care-card:hover h3,.care-card:hover p { opacity:1; }
 .dialysis-subtitle { font-size:18px; }.dialysis-symptoms { grid-template-columns:1fr; gap:0; margin-top:24px; background:#e6f0eb; border-radius:14px; padding:4px 16px; }
 .dialysis-symptoms li { flex-direction:row; text-align:left; gap:14px; padding:18px 0; border:0; border-bottom:1px solid #cddfd5; border-radius:0; box-shadow:none; background:transparent; }
 .dialysis-symptoms li:last-child { border-bottom:0; }.dialysis-symptoms li:hover { transform:none; box-shadow:none; }
 .dialysis-symptoms .symptom-icon { width:32px; height:32px; margin:0; }.dialysis-symptoms h3 { font-size:19px; min-height:0; margin:0; }.dialysis-symptoms li p { display:none; }
 .dialysis-contact { padding:24px 20px; gap:12px; }.dialysis-cta-copy h3 { font-size:23px; }.dialysis-contact p { font-size:17px; }.dialysis-call strong { font-size:29px; }
 .director-profile { display:flex; flex-direction:column; gap:24px; }.director-portrait { width:100%; max-width:340px; margin:0 auto; height:360px; }.director-photo { max-height:360px; width:auto; max-width:100%; }
 .director-copy { padding:0; width:100%; }.director-copy h3 { font-size:29px; }.director-research { font-size:18px; }.director-career { font-size:18px; }.director-qualification,.director-former { font-size:18px; }
 .director-copy > .academic-details { display:none; }
 .principles-heading h2 { font-size:18px; }.principles-message { font-size:29px; }.care-route { display:block; padding:0; }.care-route li { text-align:left; margin:0; padding:0 0 26px 34px; min-height:0; border:0; position:relative; }
 .care-route li::before { content:''; position:absolute; left:7px; top:12px; bottom:0; width:2px; background:#83b6a1; }.care-route li:last-child::before { display:none; }.care-route .route-dot { position:absolute; left:0; top:5px; margin:0; width:16px; height:16px; box-sizing:border-box; }.care-route li h3 { font-size:21px; }.care-route li p { font-size:18px; }.care-route::before,.care-route::after,.care-route-wrap::before { display:none; }
 .facility-photo { height:200px; }.facility-grid h3 { font-size:24px; }.facility-copy { padding:20px; }.facility-grid { gap:20px; }
 .visit-hours,.visit-address { padding:24px 20px; }.hours-list dd { font-size:23px; }.hours-list dt { font-size:18px; }.visit-qr { display:none; }.map-links { flex-wrap:wrap; }.map-links a { min-height:46px; font-size:17px; }.visit-address .address-main { font-size:20px; }
 .site-footer { padding:32px 20px; }.footer-body { display:block; }.footer-contact { margin-top:24px; }.footer-name span { display:block; margin-top:8px; }
 a:focus-visible,button:focus-visible { outline:3px solid #b58a36; outline-offset:3px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media(max-width:800px) {
 .dialysis-symptoms li { min-height:0; }
 .care-route li:not(:last-child)::before { left:7px; top:12px; bottom:0; width:2px; height:auto; }
 .care-route-wrap { margin:0; padding-bottom:0; }
 .director-career { grid-template-columns:1fr; gap:10px; }
}
/* Keep map actions compact and aligned on small screens. */
@media(max-width:800px) {
 .map-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; }
 .map-links a { display:flex; justify-content:center; align-items:center; min-height:52px; padding:10px 6px; box-sizing:border-box; font-size:16px; white-space:nowrap; }
 .map-links .map-brand-icon { width:20px; height:20px; margin-right:5px!important; }
 .director-intro-message { font-size:20px; line-height:1.5; word-break:keep-all; }
}
/* Mobile home omits the facilities section. */
@media(max-width:800px) {
 body:not(.detail-page) .facility-section { display:none; }
}
/* Mobile care links: integrated artwork, clear text and a visible destination. */
@media(max-width:800px) {
 .care-section > h2 { margin-bottom:14px; }
 .care-intro { margin-bottom:28px; font-size:18px; }
 .care-grid { gap:14px; }
 .care-card { padding:0; gap:0; min-height:148px; border:1px solid #dce7e2; border-radius:16px; background:#fff; }
 .care-card > img { width:104px; flex:0 0 104px; height:148px; object-fit:cover; object-position:center; align-self:stretch; border-radius:0; }
 .care-card .care-copy { padding:18px 16px; }
 .care-card .care-copy h3 { font-size:20px; line-height:1.45; letter-spacing:-.045em; margin:0 0 8px; text-wrap:balance; }
 .care-card .care-copy p { font-size:16px; line-height:1.65; word-break:keep-all; overflow-wrap:break-word; text-wrap:pretty; }
 .care-card .care-copy::after { content:'자세히 보기  →'; display:block; margin-top:12px; font-size:14px; line-height:1.4; font-weight:650; color:#28705d; }
 .care-card:active { background:#f2f7f5; }
}

/* Restrained, one-time movement supports the mobile reading order. */
.mobile-contact-bar svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
@media(max-width:800px) {
 .mobile-contact-bar a { gap:7px; font-size:17px; }
 .mobile-contact-bar .mobile-call { gap:8px; }
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference) {
 .mobile-entered { animation:mobile-arrive .65s cubic-bezier(.2,.7,.3,1) both; }
 .hero-text.mobile-entered { animation-duration:.85s; }
 .care-route li.mobile-entered { animation-duration:.5s; }
 .care-route li.mobile-entered:not(:last-child)::before { transform-origin:top; animation:route-connect .9s ease-out both; }
}
@keyframes mobile-arrive { from { opacity:.45; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes route-connect { from { transform:scaleY(0); } to { transform:scaleY(1); } }
/* Mobile drawer: select a category before viewing its links. */
@media(max-width:800px) {
 .mobile-menu { width:min(86vw,360px); max-width:calc(100vw - 36px); height:100dvh; max-height:100dvh; padding:0 0 max(24px,env(safe-area-inset-bottom)); margin:0 0 0 auto; background:white; overflow-y:auto; }
 .mobile-menu-heading { padding:18px 16px; background:#163b35; color:white; gap:8px; border:0; }
 .mobile-menu-heading h2 { font-size:20px; letter-spacing:-.04em; }
 .mobile-menu-close { padding:10px; min-width:44px; min-height:44px; font-size:16px; background:transparent; border:1px solid #ffffff40; color:white; }
 .mobile-menu-groups { display:block; padding:0; }
 .mobile-menu-groups details { margin:0; border-bottom:1px solid #dce7e2; }
 .mobile-menu-groups summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 18px; min-height:64px; box-sizing:border-box; font-size:18px; font-weight:700; line-height:1.45; cursor:pointer; list-style:none; background:#f7faf8; }
 .mobile-menu-groups summary::-webkit-details-marker { display:none; }
 .mobile-menu-groups summary::after { content:''; width:7px; height:7px; border-right:2px solid #52786a; border-bottom:2px solid #52786a; transform:rotate(45deg); flex-shrink:0; margin-right:4px; }
 .mobile-menu-groups details[open] summary { color:#006b63; background:#e6f0eb; }
 .mobile-menu-groups details[open] summary::after { transform:rotate(225deg); }
 .mobile-submenu { padding:6px 18px 12px; background:white; }
 .mobile-submenu a { padding:14px 10px; font-size:17px; line-height:1.5; min-height:48px; box-sizing:border-box; border-bottom:1px solid #eff3f0; }
 .mobile-submenu a:last-child { border:0; }
 .mobile-submenu a:active { background:#e6f0eb; }
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference) {
 .mobile-menu[open] { animation:drawer-open .24s ease-out; }
 @keyframes drawer-open { from {transform:translateX(100%);} to {transform:translateX(0);} }
}
/* Mobile surfaces share the clinic's mint palette. */
@media(max-width:800px) {
 body:not(.detail-page) .care-section { background:#f0f5f2; }
 body:not(.detail-page) .care-card { background:#e2eee7; border-color:#cbded3; }
 body:not(.detail-page) .care-card:nth-child(even) { background:#e6eff0; border-color:#cddfe0; }
 body:not(.detail-page) .care-card .care-copy p { color:#425e53; }
 body:not(.detail-page) .director-section { background:#f6f5ef; }
 body:not(.detail-page) .director-profile { background:#e7f0e9; }
 body:not(.detail-page) .visit-grid { background:#e8f1ec; }
 body:not(.detail-page) .location-images figure { background:#e8f1ec; }
 .mobile-contact-bar { background:#f1f6f3fa; }
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference) {
 .care-card.mobile-reveal-ready { opacity:.12; transform:translateY(24px); }
 .care-card.mobile-entered { animation:care-arrive .75s cubic-bezier(.16,.7,.25,1) both; }
}
@keyframes care-arrive { from {opacity:.12;transform:translateY(24px);} to {opacity:1;transform:translateY(0);} }
/* Blend the mobile hero photo into the introductory surface. */
@media(max-width:800px) {
 .hero { gap:0; background:#f2f7f5; }
 .hero-text { padding-bottom:22px; }
 .hero-image { margin-top:0; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 23%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 23%,#000 100%); }
}
/* Match the mobile introduction to the cool operating-room photograph. */
@media(max-width:800px) {
 .hero { background:linear-gradient(180deg,#edf2f5 0%,#e6edf2 68%,#d8e4eb 100%); }
 .hero-text { padding-bottom:0; }
 .hero-image { margin-top:-10px; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 19%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 19%,#000 100%); }
 .hero-actions { position:relative; z-index:2; margin-bottom:16px; }
}
/* Mobile hero focuses on the introduction and visit actions. */
@media(max-width:800px) {
 .hero-image { display:none; }
 .hero { padding-bottom:32px; }
 .hero-actions { margin-bottom:0; }
}
/* Mobile portraits: introduce the doctor first, show clinical work below. */
.mobile-hero-portrait { display:none; }
@media(max-width:800px) {
 .hero { padding-bottom:0; background:#edf4f0; }
 .mobile-hero-portrait { display:block; position:relative; isolation:isolate; margin:24px 0 0; height:290px; }
 .mobile-hero-portrait::before { content:''; position:absolute; z-index:-1; inset:20px -20px 0 20%; background:#dbeae1; border-radius:150px 150px 0 0; }
 .mobile-hero-portrait img { display:block; position:absolute; right:0; bottom:0; height:280px; width:auto; max-width:64%; object-fit:contain; object-position:bottom; }
 .mobile-hero-portrait figcaption { position:absolute; left:0; bottom:30px; width:46%; font-size:16px; color:#163b35; line-height:1.7; }
 .mobile-hero-portrait strong { display:block; font-size:28px; }
 .mobile-hero-portrait figcaption span { display:block; font-size:14px; line-height:1.6; margin-top:8px; word-break:keep-all; }
 .director-profile .director-portrait { width:100%; max-width:none; height:auto; margin:0; }
 .director-portrait::before { display:none; }
 .director-portrait picture { display:block; }
 .director-profile .director-photo { width:100%; height:auto; max-height:none; max-width:100%; aspect-ratio:1672 / 941; object-fit:contain; filter:none; clip-path:none; }
}
/* Keep the mobile introduction clear of the fixed contact bar. */
@media(max-width:800px) {
 .hero { padding-top:20px; }
 .hero h2 { font-size:28px; margin-bottom:14px; }
 .hero p { font-size:17px; line-height:1.55; margin-bottom:14px; }
 .hero-actions { margin-top:14px; }
 .mobile-hero-portrait { margin-top:8px; height:220px; }
 .mobile-hero-portrait img { height:218px; }
 .mobile-hero-portrait::before { top:10px; }
 .mobile-hero-portrait figcaption { bottom:18px; }
 .mobile-hero-portrait figcaption span { margin-top:4px; }
}
/* Lift a larger portrait toward the hero actions. */
@media(max-width:800px) {
 .mobile-hero-portrait { margin-top:-40px; height:260px; }
 .mobile-hero-portrait img { height:280px; right:-8px; max-width:62%; }
 .mobile-hero-portrait::before { inset:0 -20px 0 18%; }
 .mobile-hero-portrait figcaption { bottom:20px; }
 .hero-text { z-index:2; }
}
/* Mobile interview provides a visual pause before visiting information. */
.interview-section { display:none; }
@media(max-width:800px) {
 .care-card .care-copy p { display:none; }
 .care-card .care-copy h3 { font-size:24px; line-height:1.4; margin:0; }
 .care-card .care-copy::after { margin-top:16px; font-size:15px; }
 .interview-section { display:block; order:5; padding:12px 20px 44px; background:#f2f7f5; }
 .interview-section h2 { color:#163b35; font-size:28px; line-height:1.4; margin:12px 0 24px; letter-spacing:-.03em; }
 .interview-card { display:block; border:1px solid #cbded3; border-radius:16px; overflow:hidden; background:#e2eee7; text-decoration:none; color:#163b35; }
 .interview-thumbnail { position:relative; aspect-ratio:16/9; overflow:hidden; background:#d9e7e0; }
 .interview-thumbnail img { display:block; width:100%; height:100%; object-fit:cover; }
 .interview-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:56px; height:40px; border-radius:12px; background:#163b35ed; color:white; font-size:20px; box-shadow:0 3px 14px #0002; }
 .interview-caption { padding:20px; }
 .interview-caption strong { display:block; font-size:21px; line-height:1.5; }
 .interview-caption span { display:block; margin-top:8px; font-size:15px; line-height:1.6; color:#46685a; }
}
@media(max-width:800px) {
 .care-card .care-copy { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; }
 .care-card .care-copy::after { align-self:flex-end; text-align:right; margin-top:16px; }
}
@media(max-width:800px) {
 .mobile-hero-portrait figcaption { width:60%; z-index:1; }
 .mobile-hero-portrait figcaption span { white-space:nowrap; font-size:clamp(12px,3.3vw,14px); letter-spacing:-.025em; }
}
/* Give the mobile drawer a calm branded rhythm. */
@media(max-width:800px) {
 .mobile-menu { background:#edf4ef; }
 .mobile-menu-groups summary { background:#e9f1ec; }
 .mobile-menu-groups details:nth-child(even) summary { background:#e4eeea; }
 .mobile-menu-groups details[open] summary { background:#cfe3d7; color:#164f3e; box-shadow:inset 4px 0 #28755a; }
 .mobile-submenu { padding:10px 12px 14px; background:#f0f6f2; }
 .mobile-submenu a { margin:4px 0; padding:14px 14px; border:0; border-radius:9px; background:#e3eee7; }
 .mobile-submenu a:nth-child(even) { background:#e8f1ec; }
 .mobile-submenu a[aria-current] { background:#246653; color:white; font-weight:700; }
 .mobile-submenu a[aria-current]::after { content:'현재'; float:right; font-size:12px; padding:3px 7px; border-radius:12px; background:#ffffff24; }
 .mobile-submenu a:active { background:#cde3d5; color:#163b35; }
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference) {
 .mobile-menu-groups summary,.mobile-menu-groups summary::after { transition:background-color .2s,transform .2s; }
 .mobile-menu-groups details[open] .mobile-submenu a { animation:submenu-enter .3s ease-out both; }
 .mobile-menu-groups details[open] .mobile-submenu a:nth-child(2) { animation-delay:.035s; }
 .mobile-menu-groups details[open] .mobile-submenu a:nth-child(3) { animation-delay:.07s; }
 .mobile-menu-groups details[open] .mobile-submenu a:nth-child(4) { animation-delay:.105s; }
 .mobile-menu-groups details[open] .mobile-submenu a:nth-child(5) { animation-delay:.14s; }
}
@keyframes submenu-enter { from {opacity:.35;transform:translateX(8px);} to {opacity:1;transform:translateX(0);} }