/* ============================================================
    CSS CUSTOM PROPERTIES
    ============================================================ */
:root {
    --main-color:   #0a2a43;
    --sub-color:    #0f4c81;
    --point-color:  #00a8c6;
    --background:   #eaf3f8;
    --gray-bg:      #f1f1f1;
    --font-1:       #282828;
    --border-color: #dadada;

    --font-pretendard: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    --font-serif:      'Noto Serif KR', serif;
    --font-caslon:     'Libre Caslon Text', serif;

    --container-max: 1520px;
    --section-py:    100px;
    --section-px:    200px;
}

/* ============================================================
    RESET & BASE
    ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 16px; scroll-behavior: smooth; }
body  { font-family: var(--font-pretendard); color: var(--font-1); background: #fff; overflow-x: hidden; }
img   { max-width: 100%; display: block; }
a     { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ============================================================
    COMMON MODULE: .section-header
    ============================================================ */
.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    width: 100%;
}
.section-header__en {
    color: var(--Point-Color, #00A8C6);
text-align: center;
/* pc-IEUM ENT CLINIC */
font-family: "Libre Caslon Text";
font-size: 22px;
font-weight: 400;
line-height: normal;
letter-spacing: 4.4px;
}
.section-header__ko {
    font-family: var(--font-pretendard);
    font-weight: 600;
    font-size: 56px;
    color: #111;
    letter-spacing: -1.68px;
    line-height: 1.3;
    word-break: keep-all;
}
.section-header__ko--white { color: #fff; }
.section-header__ko .point { color: var(--point-color); }
.section-header__sub {
    margin-top: -10px;
    color: var(--Font-1, #282828);
text-align: center;
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 30px; /* 150% */
}
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.section-divider::after {
    content: '';
    display: block;
    width: 1px;
    height: 30px;
    background: #ddd;
}

/* ============================================================
    COMMON MODULE: .cause-card
    ============================================================ */
.cause-card {
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cause-card__title {
    font-size: 26px;
    font-weight: 700;
    color: var(--sub-color);
    letter-spacing: -0.78px;
    line-height: 36px;
}
.cause-card__title b {
    font-weight: 400;
}
.cause-card__desc {
    font-size: 18px;
    font-weight: 400;
    color: var(--font-1);
    line-height: 32px;
}

/* ============================================================
    COMMON MODULE: .symptom-card
    ============================================================ */
.symptom-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}
.symptom-card__img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}
.symptom-card__body {
    background: linear-gradient(90deg, var(--sub-color) 0%, var(--main-color) 100%);
    color: #fff;
    text-align: center;
    padding: 20px 10px;
    flex-grow: 1;
}
.symptom-card__body-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.78px;
    line-height: 36px;
}

.symptom-card__body-title small {
font-style: normal;
font-weight: 400;
}
.symptom-card__body-desc {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -1.16px;
    line-height: 26px;
    margin-top: 4px;
}

.treat-intro {
    color: var(--BackGround, #EAF3F8);
text-align: center;
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
margin-bottom: 40px;
}
/* ============================================================
    COMMON MODULE: .treatment-card
    ============================================================ */
.treatment-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex: 1;
    min-width: 0;
}
.treatment-card__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    justify-content: space-between;
}
.treatment-card__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}
.treatment-card__num {
    font-size: 26px;
    font-weight: 400;
    color: var(--main-color);
    letter-spacing: -0.78px;
    line-height: 36px;
}
.treatment-card__title {
    font-size: 36px;
    font-weight: 700;
    color: var(--main-color);
    letter-spacing: -1.08px;
    line-height: 1.2;
    word-break: keep-all;
    margin-bottom: 10px;
}
.treatment-card__title small { font-weight: 400;  font-size: 36px; }
.treatment-card__desc {
    font-size: 20px;
    font-weight: 300;
    color: var(--font-1);
    line-height: 32px;
    word-break: keep-all;
    letter-spacing: -0.1px;
}
.treatment-card__desc .point { color: var(--point-color); font-weight: 600; }
.treatment-card__icon {
    width: 180px;
    height: 180px;
    object-fit: contain;
    align-self: flex-end;
}

/* ============================================================
    SECTION #1: 인트로
    ============================================================ */
.sec-intro {
    padding: var(--section-py) var(--section-px);
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}
.sec-intro__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 50px;
    color: #222;
    text-align: center;
    letter-spacing: -2.5px;
    line-height: 70px;
    word-break: keep-all;
}
.sec-intro__sub {
    color: var(--font-1);
    text-align: center;
    font-size: 26px;
    font-weight: 300;
    line-height: 41.6px;
    letter-spacing: 0.52px;
}

/* ============================================================
    SECTION #2: 와이드 배너
    ============================================================ */
.sec-banner { padding: 0 var(--section-px) var(--section-py); }
.sec-banner__wrap {
    width: 100%;
    border-radius: 30px;
    /*overflow: hidden;*/
    aspect-ratio: 1520 / 480;
}
.sec-banner__wrap img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
    SECTION #3: 난청이란?
    ============================================================ */
.sec-what {
    background: var(--gray-bg);
    padding: 160px var(--section-px) var(--section-py);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sec-what__desc {
    font-size: 20px;
    color: var(--font-1);
    text-align: center;
    line-height: 36px;
    word-break: keep-all;
}
.sec-what__img-wrap {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    height: 548px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sec-what__img-wrap img { /*width: 894px;*/ max-width: 100%; /*height: 451px;*/ object-fit: contain; }

/* ============================================================
    SECTION #5: 난청의 원인
    ============================================================ */
.sec-cause { padding: var(--section-py) var(--section-px); }
.sec-cause__layout { display: flex; gap: 40px; align-items: stretch; }
.sec-cause__img-wrap { width: 740px; flex-shrink: 0; border-radius: 20px; overflow: hidden; }
.sec-cause__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.sec-cause__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

/* ============================================================
    SECTION #6: 난청의 증상
    ============================================================ */
.sec-symptom {
    background: var(--background);
    padding: var(--section-py) var(--section-px);
}
.sec-symptom__container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.symptom-card {
    flex: 0 0 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
}

/* ============================================================
    SECTION #7: 난청의 위험성
    ============================================================ */
.sec-risk {
    background: var(--gray-bg);
    padding: var(--section-py) var(--section-px);
}
.sec-risk__banner {
    width: 100%;
    border-radius: 30px;
    overflow: hidden;
    aspect-ratio: 1520 / 480;
    margin-top: 40px;
}
.sec-risk__banner img { width: 100%; height: 100%; object-fit: cover; }
.sec-risk__quote {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 34px;
    color: #6a96af;
    text-align: center;
    letter-spacing: -1.02px;
    line-height: 57.8px;
    margin-top: 40px;
    word-break: keep-all;
}
.sec-risk__text {
    font-size: 22px;
    color: var(--font-1);
    text-align: center;
    line-height: 36px;
    margin: 30px;
    word-break: keep-all;
}

/* ============================================================
    SECTION 치료: 난청 치료방법
    ============================================================ */
.sec-treatment {
    background: var(--sub-color);
    padding: var(--section-py) 100px;
}
.sec-treatment__grid { display: flex; gap: 10px; }

/* ============================================================
    RESPONSIVE
    ============================================================ */
@media (max-width: 1600px) {
    .sec-cause__img-wrap { width: 650px; }
    :root { --section-px: 60px; --section-py: 100px; }


    .treatment-card {
        background: #fff;
        border-radius: 20px;
        padding: 40px;
        display: flex;
        flex: 1;
        min-width: 0;
        flex: 0 0 calc(50% - 20px);
        min-width: calc(50% - 20px);
        padding: 30px;
    }

    .sec-treatment__grid {
        gap: 20px;
        flex-wrap: wrap;
    }

    .sec-treatment {
        background: var(--sub-color);
        padding: var(--section-py) 60px;
    }
}

@media (max-width: 1400px) {
    .sec-cause__img-wrap { width: 530px; }
}

@media (max-width: 1024px) {
    :root { --section-px: 40px; --section-py: 70px; }
    .section-header__ko { font-size: 38px; }
    .sec-intro__title { font-size: 32px; line-height: 52px; }
    .sec-cause__layout { flex-direction: column; }
    .sec-cause__img-wrap { width: 100%; height: 360px; }
    .symptom-card { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }
    .sec-treatment__grid { gap: 20px; flex-direction: column;}
    .sec-cause__layout {
        display: flex;
        gap: 40px;
        align-items: center;
        flex-direction: column;
    }
    .sec-cause__list {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        width: 100%;
    }

    
}

@media (max-width: 768px) {
    :root { --section-px: 20px; --section-py: 50px; }
    .section-header__ko { font-size: 26px; }
    .sec-intro__title { font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: 40px; /* 138.889% */ }

.sec-intro__sub {
    color: var(--font-1);
    text-align: center;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.52px;
}

.sec-what {
    background: var(--gray-bg);
    padding: 100px var(--section-px) var(--section-py);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sec-what__desc {
    font-size: 20px;
    color: var(--font-1);
    text-align: center;
    line-height: 33px;
    word-break: keep-all;
    margin-top: 20px;
}

.sec-what__img-wrap {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sec-what__img-wrap img {width: 100%;max-width: 100%;height: 260px;object-fit: contain;}
.section-header__sub {
    margin-top: 10px;
    color: var(--Font-1, #282828);
    text-align: center;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 26px;
}
.cause-card {
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
    .sec-banner__wrap { aspect-ratio: 4 / 3; }
    .symptom-card { flex: 0 0 100%; max-width: 100%; }
    .treatment-card__title { font-size: 26px; }
    .treatment-card__desc {
        color: var(--Font-1, #282828);

/* 이음-서브페이지폰트 18px */
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 177.778% */
margin-top: 5px;    
}

.treat-intro {
    color: var(--BackGround, #EAF3F8);
    text-align: center;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 40px;
}

    .section-header__en {
        margin-bottom: 10px;
        color: var(--Point-Color, #00A8C6);
text-align: center;

/* Mob-IEUM ENT */
font-family: "Libre Caslon Text";
font-size: 14px;
font-weight: 400;
line-height: normal;
letter-spacing: 2.8px;
    }

    .section-header {
        gap: 0px;
    }

    .treatment-card {
        padding: 30px;
    }

    .section-divider {
        margin: 30px auto;
    }

    .sec-risk__quote {
        color: #6A96AF;
text-align: center;
font-family: "Noto Serif KR";
font-size: 26px;
font-style: normal;
font-weight: 400;
line-height: 40px; /* 153.846% */
letter-spacing: -0.78px;
    }

    .sec-risk__text {
        color: var(--Font-1, #282828);
text-align: center;

/* 이음-서브페이지폰트 18px */
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 177.778% */
    }

    .sec-treatment {
        background: var(--sub-color);
        padding: var(--section-py) 20px;
    }

    .cause-card__title {
        font-size: 22px;
        line-height: 36px;
    }

    .treatment-card__icon {
        width: 100px;
        height: 100px;
        object-fit: contain;
        align-self: flex-end;
    }
    .cause-card__desc {
        font-size: 16px;
        font-weight: 400;
        color: var(--font-1);
        line-height: 26px;
    }
}

/* ============================================================
   #5 — 왜 이비인후과 보청기여야 할까요?
   ============================================================ */
.ha-why { background: #fff; padding: var(--section-py) var(--section-px); }
.ha-why__grid { display: flex; gap: 20px; }
.ha-why__card {
    flex: 1; min-width: 0;
    border-radius: 20px; overflow: hidden;
    display: flex; flex-direction: column;
}
.ha-why__card-img {
    width: 100%; height: 548px;
    object-fit: cover; display: block;
}
.ha-why__card-body {
    background: #f5f5f5;
    padding: 40px;
    display: flex; flex-direction: column; gap: 10px;
    flex-grow: 1;
}
.ha-why__card-title {
    font-size: 26px; font-weight: 700;
    color: var(--sub-color);
    letter-spacing: -0.78px; line-height: 36px;
}
.ha-why__card-desc {
    font-size: 18px; font-weight: 400;
    color: var(--font-1); line-height: 32px;
}

/* ============================================================
   #8 — 라이프스타일별 보청기 솔루션
   ============================================================ */
.ha-solution {
    background: linear-gradient(90deg, var(--sub-color) 0%, var(--main-color) 100%);
    padding: var(--section-py) var(--section-px);
}
.ha-solution__sub {
    font-size: 20px; font-weight: 400;
    color: var(--background); text-align: center;
    line-height: 30px; padding-bottom: 40px;
}
.ha-solution__list { display: flex; flex-direction: column; gap: 20px; }
.ha-solution__row {
    background: #fff; border-radius: 20px;
    display: flex; align-items: center;
    padding: 80px; gap: 40px;
}
.ha-solution__row--reverse { flex-direction: row-reverse; }
.ha-solution__img-wrap {
    width: 580px; flex-shrink: 0;
    border-radius: 20px; overflow: hidden;
    height: 360px;
}
.ha-solution__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ha-solution__text { flex: 1; display: flex; flex-direction: column; gap: 40px; }
.ha-solution__label {
    font-size: 26px; font-weight: 300;
    color: var(--sub-color); letter-spacing: -1.3px; line-height: 36px;
}
.ha-solution__name {
    font-size: 36px; font-weight: 700;
    color: var(--main-color); letter-spacing: -1.08px; line-height: 36px;
}
.ha-solution__name span { font-weight: 400; }
.ha-solution__desc {
    font-size: 20px; font-weight: 300;
    color: var(--font-1); line-height: 32px;
    word-break: keep-all;
}
.ha-solution__recommend {
    display: flex; flex-direction: column; gap: 10px;
}
.ha-solution__recommend-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 20px; font-weight: 600;
    color: var(--point-color);
}
.ha-solution__recommend-title::before {
    content: ''; display: block;
    width: 8px; height: 20px;
    background: var(--point-color);
}
.ha-solution__recommend-list {
    padding-left: 20px;
    font-size: 18px; font-weight: 400;
    color: #000; line-height: 32px;
}

/* ============================================================
   #6 — 7단계 정밀 보청기 처방 프로세스
   ============================================================ */
.ha-process { padding: var(--section-py) var(--section-px); }
.ha-process__sub {
    font-size: 20px; font-weight: 400;
    color: var(--font-1); text-align: center;
    line-height: 30px; padding-bottom: 40px;
}
.ha-process__slider { position: relative; padding-top: 40px; }
.ha-process__badge {
    position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    background: var(--sub-color); color: #fff;
    font-size: 26px; font-weight: 700;
    padding: 20px 50px; border-radius: 500px;
    letter-spacing: -0.78px; line-height: 36px;
    z-index: 2; white-space: nowrap;
}
.ha-process__track {
    background: var(--background);
    border-radius: 20px;
    padding: 100px 80px 80px;
    display: flex; align-items: center; gap: 40px;
}
.ha-process__arrow {
    width: 24px; height: 40px; flex-shrink: 0;
    cursor: pointer; opacity: 0.5;
    transition: opacity 0.2s;
    background: none; border: none; padding: 0;
}
.ha-process__arrow:hover { opacity: 1; }
.ha-process__arrow svg { width: 100%; height: 100%; }
.ha-process__card {
    flex: 1; background: #fff; border-radius: 20px;
    display: flex; overflow: hidden;
}
.ha-process__card-img {
    width: 640px; flex-shrink: 0;
    height: 340px; object-fit: cover;
}
.ha-process__card-body {
    flex: 1; padding: 40px;
    display: flex; flex-direction: column;
    justify-content: center; gap: 40px;
}
.ha-process__card-header {
    display: flex; align-items: baseline; gap: 10px;
}
.ha-process__card-num {
    font-size: 26px; font-weight: 400;
    color: var(--sub-color); letter-spacing: -0.78px; line-height: 36px;
}
.ha-process__card-title {
    font-size: 36px; font-weight: 700;
    color: var(--sub-color); letter-spacing: -1.08px; line-height: 36px;
}
.ha-process__card-line {
    width: 100%; height: 1px;
    background: var(--border-color);
}
.ha-process__card-desc {
    font-size: 20px; font-weight: 400;
    color: #000; line-height: 36px;
}
/* 슬라이드 래퍼 */
.ha-process__slides {
    flex: 1; overflow: hidden;
}
.ha-process__slides-inner {
    display: flex;
    transition: transform 0.4s ease;
}
.ha-process__slide {
    flex: 0 0 100%;
    min-width: 0;
}

/* ============================================================
   #8 — 청각장애 진단 절차
   ============================================================ */
.ha-diag {
    background: var(--sub-color);
    padding: var(--section-py) 100px;
}
.ha-diag__grid { display: flex; flex-direction: column; gap: 20px; }
.ha-diag__row { display: flex; gap: 10px; }
.ha-diag__card {
    flex: 1; min-width: 0;
    background: #fff; border-radius: 20px;
    padding: 40px;
    display: flex; flex-direction: column;
    justify-content: space-between;
}
.ha-diag__card-top {
    display: flex; flex-direction: column; gap: 20px;
}
.ha-diag__card-num {
    font-size: 26px; font-weight: 400;
    color: var(--main-color);
    letter-spacing: -0.78px; line-height: 36px;
}
.ha-diag__card-title {
    font-size: 36px; font-weight: 700;
    color: var(--main-color);
    letter-spacing: -1.08px; line-height: 1.2;
    word-break: keep-all;
    margin-bottom: -20px;
}
.ha-diag__card-title span { font-weight: 400; }
.ha-diag__card-desc {
    font-size: 20px; font-weight: 300;
    color: var(--font-1); line-height: 32px;
    word-break: keep-all; margin-top: 10px;
}
.ha-diag__card-detail {
    margin-top: 20px; padding-left: 5px;
}
.ha-diag__card-detail strong {
    display: block; font-size: 20px; font-weight: 700;
    color: var(--font-1); line-height: 32px;
    margin-bottom: 10px;
}
.ha-diag__card-detail p {
    font-size: 18px; font-weight: 400;
    color: var(--font-1); line-height: 32px;
    padding-left: 5px; margin-bottom: 10px;
}
.ha-diag__card-icon {
    width: 180px; height: 180px;
    object-fit: contain; align-self: flex-end;
    margin-top: 20px;
}

/* ============================================================
   #5 — 청각장애 등록 및 보조금 지원 안내
   ============================================================ */
.ha-subsidy { background: #fff; padding: var(--section-py) var(--section-px); }
.ha-subsidy__layout {
    display: flex; gap: 80px; align-items: stretch;
}
.ha-subsidy__img-wrap {
    width: 740px; flex-shrink: 0;
    border-radius: 20px; overflow: hidden;
}
.ha-subsidy__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ha-subsidy__info {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; gap: 40px;
}
.ha-subsidy__headline {
    font-family: var(--font-serif);
    font-size: 31px; font-weight: 700;
    color: var(--font-1);
    letter-spacing: -0.96px; line-height: 36px;
    word-break: keep-all;
    margin-bottom: 10px;
}
.ha-subsidy__desc {
    font-size: 20px; font-weight: 400;
    color: var(--font-1); line-height: 36px;
}
.ha-subsidy__desc .point { color: var(--point-color); }
.ha-subsidy__line {
    width: 100%; height: 1px; background: var(--border-color);
}
.ha-subsidy__detail {
    display: flex; flex-direction: column; gap: 40px;
}
.ha-subsidy__detail-group {
    display: flex; flex-direction: column; gap: 15px;
}
.ha-subsidy__detail-title {
    font-size: 26px; font-weight: 700;
    color: var(--sub-color);
    letter-spacing: -0.78px; line-height: 36px;
}
.ha-subsidy__detail-title .note {
    font-size: 16px; font-weight: 400;
    color: #f44336; letter-spacing: -0.48px;
    margin-left: 10px;
}
.ha-subsidy__detail-text {
    font-size: 18px; font-weight: 400;
    color: var(--font-1); line-height: 32px;
}
.ha-subsidy__detail-text strong { font-weight: 700; }

@media (max-width: 1400px) {
    .ha-why__card-body {
        background: #f5f5f5;
        padding: 30px;
    }
    .ha-solution__row {
        align-items: start;
    }

    /* 왜 이비인후과 보청기 */
    .ha-why__card-img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        display: block;
    }

     /* 라이프스타일 솔루션 */
    .ha-solution__row { flex-direction: column-reverse; padding: 40px; }
    .ha-solution__row--reverse { flex-direction: column-reverse; }
    .ha-solution__img-wrap { width: 100%; height: 300px; }

    /* 7단계 프로세스 */
    .ha-process__card { flex-direction: column; }
    .ha-process__card-img { width: 100%; height: 260px; }
    .ha-process__track { padding: 80px 40px 40px; gap: 20px; }

    /* 청각장애 진단 */
    .ha-diag {
        padding: var(--section-py) 60px;
    }

    .ha-diag__card {
        flex: 1;
        min-width: 0;
        background: #fff;
        border-radius: 20px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .ha-diag__card-title {
        font-size: 28px;
        font-weight: 700;
        color: var(--main-color);
        letter-spacing: -1.08px;
        line-height: 1.2;
        word-break: keep-all;
    }

    .ha-diag__card-desc {
        font-size: 18px;
        font-weight: 300;
        color: var(--font-1);
        line-height: 30px;
        word-break: keep-all;
        margin-top: 10px;
    }

    .ha-diag__card-icon {
        width: 100px;
        height: 100px;
    }

     /* 보조금 안내 */
     .ha-subsidy__layout { flex-direction: column; gap: 40px; }
    .ha-subsidy__img-wrap { width: 100%; height: 360px; }        
}

/* ============================================================
   RESPONSIVE — 태블릿 (1024px)
   ============================================================ */
@media (max-width: 1024px) {
    /* 왜 이비인후과 보청기 */
    .ha-why__card-img { height: 340px; }
    .ha-why__card-body { padding: 30px; }

    /* 라이프스타일 솔루션 */
    .ha-solution__name { font-size: 28px; }

    /* 청각장애 진단 */
    .ha-diag__row { flex-direction: column; gap: 20px; }
    .ha-diag__card-title { font-size: 28px; }

   
}

/* ============================================================
   RESPONSIVE — 모바일 (768px)
   ============================================================ */
@media (max-width: 768px) {
    /* 왜 이비인후과 보청기 */
    .ha-why__grid { flex-direction: column; }
    .ha-why__card-img { height: 260px; }
    .ha-why__card-body { padding: 20px; }
    .ha-why__card-title { font-size: 22px; line-height: 30px; }
    .ha-why__card-desc { font-size: 16px; line-height: 28px; }

    
    /* 라이프스타일 솔루션 */
    .ha-solution__row { padding: 27px; gap: 30px; }
    .ha-solution__img-wrap { height: 240px; }
    .ha-solution__label { font-size: 20px; }
    .ha-solution__name { font-size: 24px; line-height: 32px; }
    .ha-solution__desc { font-size: 18px; line-height: 30px; }
    .ha-solution__recommend-title { font-size: 18px; }
    .ha-solution__recommend-list { font-size: 16px; line-height: 28px; }
    .ha-solution__recommend-list {
        padding-left: 0px;}
    /* 7단계 프로세스 */
    .ha-process__badge { font-size: 20px; padding: 14px 36px; }
    .ha-process__track { padding: 60px 0px 20px; gap: 10px; }
    .ha-process__card-img { height: 200px; }
    .ha-process__card-body { padding: 25px; gap: 20px; }
    .ha-process__card-num {
        font-size: 22px;
        font-weight: 400;
        color: var(--sub-color);
        letter-spacing: -0.78px;
        line-height: 36px;
    }
    .ha-process__card-title {
        font-size: 21px;
    }
    .ha-process__card-desc { font-size: 18px; line-height: 30px; }
    .ha-process__arrow { width: 18px; height: 30px; }

    /* 청각장애 진단 */
    .ha-diag {
        padding: var(--section-py) 20px;
    }
    .ha-diag__card { padding: 30px; }
    .ha-diag__card-title { font-size: 22px; }
    .ha-diag__card-desc { font-size: 18px; }
    .ha-diag__card-icon { width: 120px; height: 120px; }

    /* 보조금 안내 */
    .ha-subsidy__layout { gap: 30px; }
    .ha-subsidy__detail-group {
        gap: 5px;
    }
    .ha-subsidy__detail {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .ha-subsidy__img-wrap { height: 260px; }
    .ha-subsidy__headline { font-size: 24px; line-height: 36px; }
    .ha-subsidy__desc { font-size: 18px; line-height: 30px; }
    .ha-subsidy__detail-title { font-size: 20px; }
    .ha-subsidy__detail-text { font-size: 16px; line-height: 28px; }

    .treatment-card__title small {
        font-weight: 400;
        font-size: 26px;
    }
}