:root {
    --navy: #123458;
    --navy-deep: #09243f;
    --blue: #2468a9;
    --mint: #82d9c4;
    --ice: #e9f3f7;
    --paper: #f7f9f8;
    --white: #fff;
    --ink: #172331;
    --muted: #66717d;
    --line: #d8e0e4;
    --container: 1180px;
    --shadow: 0 24px 60px rgba(10, 39, 66, .13);
}

@property --scan-x { syntax: '<percentage>'; inherits: true; initial-value: 68%; }
@property --scan-y { syntax: '<percentage>'; inherits: true; initial-value: 42%; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { font-family: 'Noto Sans KR', sans-serif; color: var(--ink); background: var(--white); line-height: 1.65; overflow-x: hidden; }
body, button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button, input, select { border: 0; }
img { display: block; width: 100%; }
ul { list-style: none; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.hero-content, .hero-visual, .section-heading > *, .process-grid > *, .doctor-grid > *, .space-grid > *, .faq-grid > *, .contact-grid > * { min-width: 0; }
.skip-link { position: fixed; z-index: 9999; top: 12px; left: 12px; padding: 10px 16px; background: var(--navy); color: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.section-space { padding: 120px 0; }

.main-header { position: sticky; top: 0; z-index: 1000; height: 84px; display: flex; align-items: center; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(216,224,228,.75); backdrop-filter: blur(16px); transition: height .25s, box-shadow .25s; }
.main-header.is-scrolled { height: 70px; box-shadow: 0 8px 30px rgba(9,36,63,.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 11px; line-height: 1; }
.logo-mark { width: 37px; aspect-ratio: 1; display: grid; place-items: center; color: white; background: var(--navy); font-family: Manrope, sans-serif; font-weight: 800; border-radius: 50% 50% 50% 12%; }
.logo strong, .logo small { display: block; }
.logo strong { font: 800 18px/1 Manrope, sans-serif; letter-spacing: .12em; color: var(--navy); }
.logo small { margin-top: 6px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.desktop-nav { display: flex; gap: 34px; margin-left: auto; }
.desktop-nav a { position: relative; font-size: 14px; font-weight: 600; }
.desktop-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--blue); transition: right .25s; }
.desktop-nav a:hover::after { right: 0; }
.header-call { display: flex; align-items: center; gap: 10px; padding-left: 28px; border-left: 1px solid var(--line); color: var(--navy); font: 700 15px/1.2 Manrope, sans-serif; }
.header-call svg { width: 19px; }
.header-call small { display: block; margin-bottom: 4px; color: var(--muted); font: 500 10px/1 'Noto Sans KR', sans-serif; }

.hero { position: relative; overflow: hidden; padding: 72px 0 0; background: linear-gradient(110deg, #f7fbfc 0%, #eef6f8 60%, #e7f1f5 100%); }
.hero-line { position: absolute; width: 780px; height: 280px; left: -120px; bottom: 105px; opacity: .45; clip-path: inset(0 100% 0 0); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 280'%3E%3Cpath d='M0 168h95l30-64 40 124 48-188 48 128h82l27-48 32 95 46-160 48 113h284' fill='none' stroke='%2382d9c4' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; animation: trace-line 2.2s .4s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes trace-line { to { clip-path: inset(0 0 0 0); } }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 68px; min-height: 590px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--blue); font: 700 12px/1 Manrope, 'Noto Sans KR', sans-serif; letter-spacing: .14em; }
.eyebrow span { width: 30px; height: 2px; background: currentColor; }
.eyebrow.light { color: var(--mint); }
.hero h1, .section-heading h2, .process h2, .doctor h2, .space h2, .faq h2, .contact h2 { font-weight: 600; line-height: 1.24; letter-spacing: -.055em; word-break: keep-all; }
.hero h1, .section-heading h2, .process h2, .doctor h2, .space h2, .faq h2, .contact h2 { overflow-wrap: break-word; }
.hero h1 { font-size: clamp(40px, 4vw, 62px); }
.hero h1 em { color: var(--blue); font-style: normal; }
.hero-copy { max-width: 560px; margin-top: 26px; color: var(--muted); font-size: 17px; word-break: keep-all; }
.hero-actions { display: flex; gap: 12px; margin-top: 36px; }
.btn { min-height: 54px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 6px; font-weight: 700; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; }
.btn svg { width: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: white; background: var(--navy); box-shadow: 0 12px 25px rgba(18,52,88,.18); }
.btn-primary:hover { background: var(--blue); }
.btn-secondary { color: var(--navy); background: rgba(255,255,255,.65); border: 1px solid rgba(18,52,88,.16); }
.hero-points { display: flex; gap: 22px; margin-top: 42px; }
.hero-points div { min-width: 125px; padding-top: 12px; border-top: 1px solid rgba(18,52,88,.18); }
.hero-points dt { color: var(--blue); font: 700 11px/1 Manrope, sans-serif; }
.hero-points dd { margin-top: 8px; font-size: 12px; font-weight: 600; }
.hero-visual { position: relative; align-self: end; --scan-x: 68%; --scan-y: 42%; }
.visual-index { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--blue); font: 700 9px/1 Manrope, sans-serif; letter-spacing: .12em; }
.image-frame { position: relative; overflow: hidden; height: 535px; border-radius: 160px 12px 12px 12px; box-shadow: var(--shadow); }
.image-frame::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.image-frame img { height: 100%; object-fit: cover; object-position: 48% center; }
.scan-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; clip-path: circle(94px at var(--scan-x) var(--scan-y)); transition: clip-path .18s ease-out; }
.scan-layer::before { content: ''; position: absolute; z-index: 2; inset: 0; background: linear-gradient(rgba(11,58,94,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(11,58,94,.12) 1px, transparent 1px), rgba(104,219,211,.13); background-size: 18px 18px; mix-blend-mode: multiply; }
.scan-layer::after { content: ''; position: absolute; z-index: 3; width: 188px; height: 188px; left: var(--scan-x); top: var(--scan-y); border: 1px solid rgba(130,217,196,.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(9,36,63,.35), inset 0 0 25px rgba(130,217,196,.3); transform: translate(-50%, -50%); }
.scan-layer img { filter: grayscale(1) contrast(1.3) brightness(.83) sepia(.2) hue-rotate(145deg) saturate(2.4); }
.scan-crosshair { position: absolute; z-index: 4; width: 26px; height: 26px; left: var(--scan-x); top: var(--scan-y); transform: translate(-50%, -50%); }
.scan-crosshair::before, .scan-crosshair::after { content: ''; position: absolute; background: rgba(255,255,255,.88); }
.scan-crosshair::before { left: 12px; top: 0; width: 1px; height: 26px; }
.scan-crosshair::after { left: 0; top: 12px; width: 26px; height: 1px; }
.scan-readout { position: absolute; z-index: 5; top: 24px; right: 22px; display: flex; flex-direction: column; align-items: flex-end; color: white; font: 700 8px/1.3 Manrope, sans-serif; letter-spacing: .15em; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.scan-readout strong { margin-top: 4px; color: var(--mint); font-size: 9px; }
.visual-note { position: absolute; left: -42px; bottom: 40px; display: flex; align-items: center; gap: 13px; padding: 15px 20px; background: rgba(255,255,255,.94); box-shadow: 0 15px 40px rgba(9,36,63,.16); border-radius: 8px; }
.visual-note svg { color: var(--blue); }
.visual-note span { font-size: 12px; font-weight: 600; }
.visual-note small { display: block; color: var(--blue); font: 700 9px/1 Manrope, sans-serif; letter-spacing: .14em; margin-bottom: 5px; }
.quick-info { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; background: var(--navy); color: white; }
.quick-info > div { min-height: 106px; display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-right: 1px solid rgba(255,255,255,.12); }
.quick-info svg { flex: 0 0 24px; color: var(--mint); }
.quick-info span { font-size: 12px; font-weight: 600; }
.quick-info small { display: block; margin-bottom: 5px; color: rgba(255,255,255,.58); font-size: 10px; font-weight: 500; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 54px; }
.section-heading h2, .process h2, .doctor h2, .space h2, .faq h2, .contact h2 { font-size: clamp(34px, 3.4vw, 50px); }
.section-heading > p { max-width: 430px; color: var(--muted); }
.symptom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.symptom-card { min-height: 420px; padding: 32px; display: flex; flex-direction: column; background: var(--paper); border: 1px solid transparent; transition: transform .25s, box-shadow .25s, border-color .25s; }
.symptom-card:hover { transform: translateY(-7px); border-color: var(--line); box-shadow: 0 18px 45px rgba(18,52,88,.09); }
.symptom-card.featured { background: var(--ice); }
.card-top { display: flex; justify-content: space-between; align-items: center; color: var(--blue); }
.card-top span { font: 700 10px/1 Manrope, sans-serif; letter-spacing: .13em; }
.card-top svg { width: 27px; }
.symptom-card h3 { margin-top: 46px; font-size: 25px; line-height: 1.4; letter-spacing: -.04em; }
.symptom-card ul { margin-top: 25px; color: var(--muted); font-size: 13px; }
.symptom-card li { position: relative; padding: 7px 0 7px 17px; border-bottom: 1px solid rgba(102,113,125,.13); }
.symptom-card li::before { content: ''; position: absolute; left: 0; top: 16px; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.symptom-card a { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 18px; color: var(--navy); font-size: 13px; font-weight: 700; }
.symptom-card a svg { width: 17px; }
.medical-note { display: flex; align-items: flex-start; justify-content: center; gap: 9px; margin-top: 28px; color: var(--muted); font-size: 12px; text-align: center; }
.medical-note svg { flex: 0 0 15px; margin-top: 3px; }

.process { color: white; background: var(--navy-deep); }
.process-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.process-intro { position: sticky; top: 120px; align-self: start; }
.process-intro > p:not(.eyebrow) { max-width: 390px; margin-top: 28px; color: rgba(255,255,255,.62); }
.text-link { display: inline-flex; align-items: center; gap: 30px; margin-top: 42px; padding-bottom: 8px; color: white; border-bottom: 1px solid rgba(255,255,255,.3); font-weight: 600; font-size: 13px; }
.text-link svg { width: 17px; }
.process-list li { display: grid; grid-template-columns: 65px 1fr; gap: 24px; padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.process-list li:first-child { padding-top: 0; }
.process-list li > span { color: var(--mint); font: 700 13px/1.6 Manrope, sans-serif; }
.process-list h3 { font-size: 21px; }
.process-list p { max-width: 520px; margin-top: 10px; color: rgba(255,255,255,.56); font-size: 14px; }

.doctor-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 90px; }
.doctor-image { position: relative; }
.doctor-image::before { content: ''; position: absolute; left: -18px; bottom: -18px; width: 48%; height: 55%; background: var(--ice); z-index: -1; }
.doctor-image img { aspect-ratio: .82; object-fit: cover; object-position: center; }
.doctor-copy blockquote { max-width: 590px; margin-top: 32px; padding-left: 23px; color: var(--muted); border-left: 3px solid var(--mint); font-size: 17px; }
.doctor-name { display: flex; align-items: baseline; gap: 15px; margin-top: 34px; }
.doctor-name span { color: var(--muted); font-size: 13px; }
.doctor-name strong { font-size: 26px; }
.career-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; margin-top: 25px; padding-top: 25px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.career-list li::before { content: '·'; margin-right: 7px; color: var(--blue); }
.credential-note { margin-top: 18px; color: #8b949d; font-size: 11px; }

.space { padding-bottom: 0; color: white; background: var(--blue); }
.space-grid { display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 68px; }
.space-copy { padding-bottom: 120px; }
.space-copy > p:last-child { max-width: 350px; margin-top: 26px; color: rgba(255,255,255,.72); }
.space-image { align-self: end; }
.space-image img { height: 510px; object-fit: cover; object-position: center; }

.faq-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: 100px; }
.faq-intro > p:not(.eyebrow) { margin-top: 22px; color: var(--muted); }
.text-link.dark { color: var(--navy); border-color: var(--line); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 { font-size: 17px; }
.faq-item button { width: 100%; padding: 25px 4px; display: flex; align-items: center; justify-content: space-between; color: var(--ink); background: transparent; text-align: left; font-weight: 600; cursor: pointer; }
.faq-item button svg { width: 20px; color: var(--blue); transition: transform .25s; }
.faq-item button[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq-answer p { padding: 0 45px 26px 4px; color: var(--muted); font-size: 14px; }

.contact { color: white; background: var(--navy); }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; }
.contact-info > p:not(.eyebrow) { max-width: 430px; margin-top: 24px; color: rgba(255,255,255,.63); }
.contact-info dl { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 54px; }
.contact-info dt { margin-bottom: 9px; color: var(--mint); font-size: 11px; font-weight: 700; }
.contact-info dd { color: rgba(255,255,255,.75); font-size: 13px; }
.reservation-form { padding: 40px; color: var(--ink); background: white; }
.form-heading { display: flex; justify-content: space-between; margin-bottom: 28px; font-weight: 700; }
.form-heading small { color: var(--muted); font-size: 10px; font-weight: 500; }
.field { margin-bottom: 22px; }
.field label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; }
.field input, .field select { width: 100%; height: 49px; padding: 0 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; }
.field input:focus, .field select:focus { outline: 2px solid var(--mint); border-color: transparent; }
.field input[aria-invalid="true"] { border-color: #c94a4a; }
.error { display: block; min-height: 16px; margin-top: 4px; color: #b73636; font-size: 11px; }
.consent { display: flex; align-items: center; gap: 10px; margin: 6px 0 24px; color: var(--muted); font-size: 11px; cursor: pointer; }
.consent input { width: 16px; height: 16px; accent-color: var(--navy); }
.btn-submit { width: 100%; }
.form-status { min-height: 18px; margin-top: 12px; color: var(--blue); font-size: 12px; text-align: center; }

.main-footer { padding: 45px 0; background: var(--navy-deep); color: rgba(255,255,255,.5); }
.footer-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 50px; font-size: 10px; }
.footer-logo .logo-mark { background: rgba(255,255,255,.12); }
.footer-logo strong { color: white; }
.footer-logo small { color: rgba(255,255,255,.5); }
.mobile-fixed-cta { display: none; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 960px) {
    .section-space { padding: 90px 0; }
    .desktop-nav { display: none; }
    .hero { padding-top: 50px; }
    .hero-grid { grid-template-columns: 1fr; gap: 45px; }
    .hero-content { text-align: center; }
    .eyebrow, .hero-actions, .hero-points { justify-content: center; }
    .hero-copy { margin-inline: auto; }
    .hero-visual { width: min(100%, 620px); margin-inline: auto; }
    .image-frame { height: auto; aspect-ratio: 1.15; border-radius: 110px 12px 12px 12px; }
    .visual-note { left: 18px; }
    .quick-info { grid-template-columns: 1fr 1fr; }
    .quick-info > div:nth-child(2) { border-right: 0; }
    .quick-info > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
    .symptom-grid { grid-template-columns: 1fr; }
    .symptom-card { min-height: 350px; }
    .process-grid, .doctor-grid, .space-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; gap: 60px; }
    .process-intro { position: static; }
    .doctor-image { width: min(100%, 590px); }
    .space-copy { padding-bottom: 0; }
    .space-image img { height: auto; }
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 600px) {
    .container { width: min(calc(100% - 32px), var(--container)); }
    body { padding-bottom: 62px; }
    .section-space { padding: 72px 0; }
    .main-header, .main-header.is-scrolled { height: 68px; }
    .header-call { display: none; }
    .logo-mark { width: 33px; }
    .hero { padding-top: 40px; }
    .hero-line { display: none; }
    .hero-grid { min-height: 0; }
    .hero h1 { font-size: 36px; }
    .hero-copy { font-size: 15px; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .hero-points { width: 100%; gap: 10px; }
    .hero-points div { width: 0; min-width: 0; flex: 1; }
    .hero-points dd { font-size: 10px; }
    .image-frame { aspect-ratio: 1 / 1.05; border-radius: 76px 8px 8px 8px; }
    .hero-visual { animation: mobile-scan 7s ease-in-out infinite alternate; }
    .scan-readout { top: 17px; right: 15px; }
    .visual-note { right: 12px; left: auto; bottom: 12px; padding: 11px 13px; }
    .quick-info { width: 100%; grid-template-columns: 1fr 1fr; }
    .quick-info > div { min-height: 96px; padding: 18px 14px; gap: 10px; }
    .quick-info span { font-size: 10px; }
    .section-heading { display: block; margin-bottom: 36px; }
    .section-heading > p { margin-top: 18px; font-size: 14px; }
    .section-heading h2, .process h2, .doctor h2, .space h2, .faq h2, .contact h2 { font-size: 34px; }
    .symptom-card { min-height: 370px; padding: 26px; }
    .process-grid, .doctor-grid, .space-grid, .faq-grid, .contact-grid { gap: 44px; }
    .process-list li { grid-template-columns: 40px 1fr; gap: 10px; }
    .career-list { grid-template-columns: 1fr; }
    .contact-info dl { grid-template-columns: 1fr; }
    .reservation-form { padding: 26px 20px; margin-inline: -4px; }
    .mobile-fixed-cta { position: fixed; z-index: 1100; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; height: 62px; box-shadow: 0 -10px 30px rgba(9,36,63,.15); }
    .mobile-fixed-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; color: white; background: var(--navy-deep); font-size: 13px; font-weight: 700; }
    .mobile-fixed-cta a:last-child { background: var(--blue); }
    .mobile-fixed-cta svg { width: 17px; }
}

@keyframes mobile-scan {
    0% { --scan-x: 28%; --scan-y: 35%; }
    50% { --scan-x: 70%; --scan-y: 44%; }
    100% { --scan-x: 46%; --scan-y: 72%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}