/* =====================================================
   sub1.css — 병원소개 페이지 전용 스타일
   피그마 기준: 1920px 데스크탑 / 1024px 태블릿 / 768px 모바일
   ===================================================== */

/* ── 색상 변수 (피그마 기준) ── */
:root {
    --main-color:  #0a2a43;   /* 피그마 --main-color  */
    --point-color: #00a8c6;   /* 피그마 --point-color */
    --bg-light:    #eaf3f8;   /* 피그마 --background  */
    --font-1:      #282828;   /* 피그마 --font-1      */
  }
  
  /* ══════════════════════════════════════════════
     SECTION 공통 — 아이브로우·타이틀·디바이더
  ══════════════════════════════════════════════ */
  .section-eyebrow {
    font-family: 'Libre Caslon Text', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--point-color);
    letter-spacing: 4.4px;
    text-align: center;
  }
  .section-title {
    font-family: 'Pretendard', var(--font-ko);
    font-size: 56px;
    font-weight: 600;
    color: #111;
    letter-spacing: -1.68px;
    text-align: center;
    line-height: 1.3;
  }
  /* 섹션 제목 아래 수직 구분선 */
  .section-divider {
    width: 1px;
    height: 30px;
    background: #ddd;
    margin: 30px auto 40px;
  }
  
  /* ══════════════════════════════════════════════
     SECTION 1 — 인트로 (숨, 소리 일상을 잇다)
  ══════════════════════════════════════════════ */
  .section-intro {
    padding: 150px 0 70px;
    text-align: center;
  }
  .section-intro__sub {
    font-family: 'Noto Serif KR', serif;
    font-size: 50px;
    font-weight: 400;
    color: #222;
    margin-bottom: 10px;
  }
  .section-intro__title {
    font-family: 'Pretendard', var(--font-ko);
    font-size: 90px;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.3;
    /* 피그마: gradient from #4ec4d2 → #0f4c81 (61.94%) */
    background: linear-gradient(to right, #4ec4d2, #0f4c81 62%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* ══════════════════════════════════════════════
     SECTION 2 — 병원소개 (이미지 + 텍스트)
  ══════════════════════════════════════════════ */
  .section-about {
    padding: 100px;
  }
  .section-about__grid {
    display: grid;
    grid-template-columns: 860fr 764fr;
    gap: 80px;
    align-items: center;
  }
  .section-about__img {
    border-radius: 10px;
    overflow: hidden;
    background: #d9d9d9;
  }
  .section-about__img img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
  }
  .section-about__heading {
    font-size: 58px;
    font-weight: 300;
    letter-spacing: -2.9px;
    line-height: 1.4;
    color: var(--font-1);
    margin-bottom: 60px;
  }
  .section-about__heading .t-light {
    font-family: 'Pretendard', var(--font-ko);
    font-weight: 300;
  }
  .section-about__heading .t-blue {
    font-family: 'Pretendard', var(--font-ko);
    font-weight: 700;
    color: #0f4c81;
  }
  .section-about__heading .t-teal {
    font-family: 'Pretendard', var(--font-ko);
    font-weight: 700;
    color: var(--point-color);
  }
  .section-about__body {
    font-family: 'Pretendard', var(--font-ko);
    font-size: 18px;
    font-weight: 300;
    color: var(--font-1);
    line-height: 36px;
    letter-spacing: -0.9px;
  }
  
  /* ══════════════════════════════════════════════
     SECTION 3 — 3대 핵심가치
  ══════════════════════════════════════════════ */
  .section-values {
    padding: 100px 200px;
  }
  .values-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .values-item {
    position: relative;
    width: 462px;
    height: 420px;
    overflow: hidden;
  }
  .values-item__graphic {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .values-item__graphic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .values-item:first-child .values-item__graphic img {
    margin-right: -20px;
  }

  .values-item:nth-child(2) .values-item__content {
    margin-left: 45px;
  }

  .values-item:nth-child(3) .values-item__content {
    margin-left: 15px;
  }
 
  .values-item__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 0 20px;
  }
  .values-item__num {
    font-family: 'Noto Serif KR', serif;
    font-size: 26px;
    font-weight: 700;
    color: #aeaeae;
    letter-spacing: -1.3px;
    line-height: 1;
  }
  .values-item__title {
    font-family: 'Noto Serif KR', serif;
    font-size: 34px;
    letter-spacing: -1.7px;
    color: var(--main-color);
    margin-bottom: 10px;
  }
  .values-item__title strong {
    font-weight: 900;
  }
  .values-item__desc {
    font-family: 'Pretendard', var(--font-ko);
    font-size: 18px;
    font-weight: 300;
    color: var(--font-1);
    letter-spacing: -0.9px;
    line-height: 26px;
  }
  
  /* ══════════════════════════════════════════════
     SECTION 4 — 안심케어 프로세스
  ══════════════════════════════════════════════ */
  .section-process {
    padding: 100px 200px 218px;
    background: linear-gradient(to bottom, var(--bg-light), #fff 50%);
  }
  .process-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
   .process-list2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .process-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .process-item__step {
    display: block;
    font-family: 'Pretendard', var(--font-ko);
    font-size: 36px;
    font-weight: 600;
    color: var(--main-color);
    letter-spacing: -1.8px;
    line-height: 72.7px;
  }
  .process-item__img {
    position: relative;
    width: 100%;
    aspect-ratio: 355 / 300;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
  }
  .process-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .process-item__img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10,42,67,0.5);
  }
  .process-item__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', var(--font-ko);
    font-size: 40px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -2px;
    line-height: 1;
  }
  .process-item__desc {
    font-family: 'Pretendard', var(--font-ko);
    font-size: 18px;
    font-weight: 400;
    color: var(--font-1);
    letter-spacing: -0.9px;
    line-height: 26px;
  }

  /* ══════════════════════════════════════════════
     RESPONSIVE — Tablet (≤1800px)
  ══════════════════════════════════════════════ */
  @media (max-width: 1800px) {

  .section-process {
        padding: 100px 100px 218px;
    }
    }

    /* ══════════════════════════════════════════════
     RESPONSIVE — Tablet (≤1400px)
  ══════════════════════════════════════════════ */
  @media (max-width: 1400px) {
    .section-about__heading {
        font-size: 50px;
    }

    .process-item__overlay {
        font-size: 30px;
    }
  }

  /* ══════════════════════════════════════════════
     RESPONSIVE — Tablet (≤1024px)
  ══════════════════════════════════════════════ */
  @media (max-width: 1024px) {
    .section-process {
        padding: 100px 60px 218px;
    }
    
    .sub-hero {
        position: relative;
        height: 800px;
    }

    .sub-hero__breadcrumb {
        font-family: 'Pretendard', var(--font-ko);
        color: #eaf3f8;
        margin-bottom: 15px;
        text-align: center;
        font-family: Pretendard;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px; /* 115.385% */
        letter-spacing: -1.3px;
    }

    .sub-hero__title {
        font-family: 'Pretendard', var(--font-ko);
        font-size: 64px;
        font-style: normal;
        font-weight: 700;
        line-height: 80px; /* 125% */
        letter-spacing: -3.2px;
        color: #eaf3f8;
    }

    .section-intro__sub   { font-size: 24px; }
    .section-intro__title { font-size: 50px; }
  
    .section-about {
        padding: 5px 40px 80px;
    }

    .section-about__grid  { grid-template-columns: 1fr; gap: 40px; }
    .section-about__img img { height: 360px; }
    .section-about__heading { font-size: 30px; margin-bottom: 30px; }
    .section-about__body  { font-size: 17px; line-height: 26px; }
  
    .section-values {
        padding: 40px;
    }

    .section-title  { font-size: 40px; }
    .section-eyebrow { font-size: 22px; }
  
    .values-list  { gap: 40px; flex-direction: column;}
    .values-item  { width: 350px; height: 310px; }
    .values-item__title { font-size: 26px; }
    .values-item__desc  { font-size: 15px; }
    .values-item__graphic::before { width: 250px; height: 250px; }
    .values-item__graphic::after  { width: 200px; height: 200px; }
  
    .process-list { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
	.process-list2 { grid-template-columns: repeat(1, 1fr); gap: 40px 24px; }
    .process-item__step    { font-size: 28px; }
    .process-item__overlay { font-size: 30px; }
    .process-item__desc    { font-size: 15px; }
  }
  
  /* ══════════════════════════════════════════════
     RESPONSIVE — Mobile (≤768px)
  ══════════════════════════════════════════════ */
  @media (max-width: 768px) {
    .sub-hero {
        position: relative;
        height: 630px;
        padding-top: 85px;
    }

    .sub-hero__breadcrumb {
        font-size: 18px;
        margin-bottom: 0;
    }

    .sub-hero__bg {
        position: absolute;
        inset: 0;
        background-image: url(/resource/images/about/hero-bg-m.png);
        background-size: cover;
        background-position: center;
        top: 85px;
    }

    .sub-hero__title {
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: 80px; /* 166.667% */
        letter-spacing: -2.4px;
    }

    .sub-nav {
        display: none;
    }

    .section-intro        { padding: 100px 0 40px; }
    .section-intro__sub   { font-size: 24px; }
    .section-intro__title { font-size: 50px; }

    .section-about__grid {
        grid-template-columns: 1fr;
        gap: 80px;
    }
  
    .section-about        { padding: 40px 20px; }
    .section-about__heading { font-size: 30px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        letter-spacing: -1.5px; margin-bottom: 30px; }
    .section-about__body  { font-size: 16px;
        font-style: normal;
        font-weight: 300;
        line-height: 26px; /* 162.5% */
        letter-spacing: -0.8px; }
  
    .section-title  { font-size: 30px; letter-spacing: -1px; }
    .section-eyebrow { font-size: 15px; letter-spacing: 2px; }
    .section-divider { margin: 20px auto 20px; }
  
    .section-values { padding: 40px 20px; }
    .values-list    { flex-direction: column; align-items: center; gap: 32px; }
    .values-item    { width: 100%; }
    .values-item__title { font-size: 24px; }
    .values-item__graphic::before { width: 240px; height: 240px; }
    .values-item__graphic::after  { width: 190px; height: 190px; }
  
    .section-process { padding: 40px 20px 200px; }
    .process-list    { grid-template-columns: 1fr; gap: 20px; }
	.process-list2    { grid-template-columns: 1fr; gap: 20px; }
    .process-item__step    { font-size: 24px; }
    .process-item__overlay { font-size: 30px; }
    .process-item__desc    { font-size: 16px; line-height: 26px; }
    .process-item__img { margin-bottom: 20px; }
  }
  
/* ==========================================
    DOCTOR SECTION
========================================== */
.doctors-section {
    position: relative;
    overflow: hidden;
    }

    /* decorative background pattern */
    .section-deco {
        position: absolute;
        left: 200px;
        top: 200px;
        width: 624px;
        height: 800px;
        opacity: 1;
        overflow: hidden;
        pointer-events: none;
        translate: -32%;
    }
    .section-deco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    }

    /* heading */
    .section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 200px 0;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    }
    .en-label {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    color: var(--point-color);
    letter-spacing: 4.4px;
    text-align: center;
    }
    .section-heading h1 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 56px;
    color: #111;
    line-height: 72.8px;
    letter-spacing: -1.68px;
    text-align: center;
    margin-top: 2px;
    }
    .heading-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1px;
    width: 100%;
    }
    .v-line {
    display: block;
    width: 1px;
    height: 30px;
    background: #ddd;
    margin-bottom: 0;
    margin: 30px auto;
    }
    .heading-desc {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 45px;
    color: #222;
    line-height: 57.8px;
    text-align: center;
    white-space: nowrap;
    }

    /* doctor card */
    .doctor-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 100px;
    padding: 100px 200px;
    max-width: 1920px;
    margin: 0 auto;
    justify-content: center;
    }
    .doctor-photo {
    position: relative;
    flex-shrink: 0;
    width: 427px;
    height: 653px;
    border-radius: 10px;
    overflow: hidden;
    }
    .doctor-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    }
    .photo-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 112px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 70%);
    pointer-events: none;
    }
    .doctor-info {
    display: flex;
    flex-direction: column;
    gap: 60px;
    flex: 1;
    justify-content: center;
    }
    .doctor-name {
    font-family: 'Pretendard', sans-serif;
    line-height: 1;
    }
    .doctor-name .name {
    font-weight: 700;
    font-size: 64px;
    line-height: 72.8px;
    color: var(--sub-color);
    letter-spacing: -2.9px;
    }
    .doctor-name .position {
    font-weight: 300;
    font-size: 40px;
    color: var(--font-1);
    letter-spacing: -2.9px;
    margin-left: 8px;
    }
    .doctor-details {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    }
    .career-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 396px;
    flex-shrink: 0;
    }
    .specialty-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 1;
    }
    .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 25px 10px;
    border-radius: 50px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #fff;
    letter-spacing: -1.1px;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 120px;
    box-sizing: border-box;
    }
    .badge-blue  { background: var(--sub-color);   padding: 9px 42px 10px; }
    .badge-teal  { background: var(--point-color); }
    .career-list { padding-left: 10px; }
    .career-list li,
    .specialty-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: var(--font-1);
    line-height: 36px;
    letter-spacing: -0.9px;
    }
    .specialty-text { padding-left: 10px; }
    .doctor-watermark {
        color: rgba(131, 205, 218, 0.20);
        font-family: 'Binggrae';
        font-size: 82px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.2; /* 34% */
    margin-top: -55px;
    }

    @media (max-width: 1640px) {
        .doctor-watermark {
            font-size: 70px;
        }
    }

    @media (max-width: 1550px) {
        .doctor-watermark {
            font-size: 54px;
        }
    }

    @media (max-width: 1400px) {
 /* doctor card */
 .doctor-card {
    flex-direction: column;
    gap: 50px;
    padding: 80px 40px 105px;
}
.doctor-photo {
    width: 100%;
    max-width: 720px;
    height: 720px;
}
.doctor-info { gap: 40px; width: 100%; max-width: 780px; }
.doctor-name .name     { font-size: 64px; letter-spacing: -1.5px; }
.doctor-name .position { font-size: 40px; letter-spacing: -1.5px; }
.career-list li,
.specialty-text { font-size: 17px; letter-spacing: -0.85px; }
.career-block { width: 50%; }

.doctor-watermark {
    font-family: 'Pretendard', 'Georgia', serif;
    font-weight: 300;
    font-size: 60px;
    line-height: 1.2;
    color: rgba(131, 205, 218, 0.2);
    white-space: nowrap;
    letter-spacing: -1px;
    margin-top: 0;
}
/* section deco */
.section-deco {
    left: -90px;
    translate: 0;
    top: 370px;
    width: 603px;
    height: 584px;
}
    }

    /* ==========================================
        TABLET (≤ 1024px)  ←  800px Figma frame
    ========================================== */
    @media (max-width: 1024px) {

    /* section heading */
    .section-heading  { padding: 112px 40px 0; }
    .section-heading h1 { font-size: 36px; line-height: 50px; letter-spacing: 0; }
    .heading-desc     { font-size: 30px; line-height: 34px; }

   
    }

    /* ==========================================
        MOBILE (≤ 767px)  ←  375px Figma frame
    ========================================== */
    @media (max-width: 767px) {

    /* visual */
    .visual { height: 630px; }
    .visual-content {
        padding-top: 0;
        padding-bottom: 0;
        justify-content: center;
    }
    .visual-title { gap: 10px; }
    .visual-category { font-size: 18px; letter-spacing: -0.9px; }
    .visual-heading  { font-size: 48px; letter-spacing: -2.4px; }
    .visual-subnav   { display: none; }

    /* section heading */
    .section-heading { padding: 100px 20px 0; }
    .en-label        { font-size: 14px; letter-spacing: 2.8px; }
    .section-heading h1 { font-size: 36px; line-height: 50px; }
    .heading-divider { padding-bottom: 40px; }
    .heading-desc    {
        font-size: 26px;
        line-height: 36px;
        white-space: normal;
        word-break: keep-all;
    }

    /* doctor card */
    .doctor-card {
        flex-direction: column;
        gap: 30px;
        padding: 40px 20px 111px;
    }
    .doctor-photo {
        width: 100%;
        max-width: 335px;
        height: 360px;
    }
    .photo-fade      { display: none; }
    .doctor-info     { gap: 20px; width: 100%; }
    .doctor-name .name     { font-size: 56px; }
    .doctor-name .position { font-size: 36px; }
    .doctor-details  { flex-direction: column; }
    .career-block    { width: 100%; }
    .badge-blue      { background: var(--main-color); padding: 9px 20px 10px; }
    .doctor-watermark {
        font-size: 45px;
        overflow: hidden;
        max-width: 100%;
        margin-top: 0;
    }

    /* section deco */
    .section-deco {
        left: -105px;
        translate: 0;
        top: 347px;
        width: 414px;
        height: 414px;
    }
    }

    /* ══════════════════════════════════════════════
       장비소개 페이지 전용 스타일
       피그마 기준: 1920 데스크탑 / 800 태블릿 / 375 모바일
    ══════════════════════════════════════════════ */

    /* ── Section: 장비소개 헤더 ── */
    .equip-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 100px 200px;
        text-align: center;
    }
    .equip-header__eyebrow {
        font-family: 'Libre Caslon Text', serif;
        font-style: italic;
        font-weight: 400;
        font-size: 22px;
        color: var(--point-color, #00a8c6);
        letter-spacing: 4.4px;
        line-height: 1;
    }
    .equip-header__title {
        font-family: 'Pretendard', sans-serif;
        font-weight: 600;
        font-size: 56px;
        color: #111;
        letter-spacing: -1.68px;
        line-height: 72.8px;
    }
    .equip-header__divider {
        width: 1px;
        height: 30px;
        background: #ddd;
        margin-top: 19.9px;
    }
    .equip-header__desc {
        font-family: 'Pretendard', sans-serif;
        font-weight: 400;
        font-size: 45px;
        color: #222;
        line-height: 57.8px;
        text-align: center;
        margin-top: 28.9px;
    }

    /* ── 탭 필터 ── */
    .equip-filter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .equip-filter__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 208px;
        padding: 20px 30px;
        border-radius: 50px;
        background: #f1f1f1;
        border: none;
        font-family: 'Pretendard', sans-serif;
        font-weight: 500;
        font-size: 25px;
        color: #aeaeae;
        letter-spacing: -1.75px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .equip-filter__btn:hover {
        background: #e0e0e0;
    }
    .equip-filter__btn.is-active {
        background: var(--point-color, #00a8c6);
        color: #fff;
        font-weight: 700;
    }

    /* ── 모바일 드롭다운 (기본 숨김) ── */
    .equip-dropdown {
        display: none;
    }

    /* ── 장비 카드 리스트 영역 ── */
    .equip-cards {
        padding: 100px 200px;
        display: flex;
        flex-direction: column;
        gap: 80px;
    }

    /* ── 장비 카드 ── */
    .equip-card {
        display: flex;
        align-items: start;
        gap: 40px;
    }
    .equip-card__img {
        flex-shrink: 0;
        width: 520px;
        height: 360px;
        border-radius: 20px;
        overflow: hidden;
        background: #f1f1f1;
    }
    .equip-card__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .equip-card__body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .equip-card__line {
        width: 100%;
        height: 1px;
        background: var(--border-color, #0A2A43);
    }
    .equip-card__content {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: 0 20px;
    }
    .equip-card__info {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .equip-card__name {
        font-family: 'Pretendard', sans-serif;
        font-weight: 700;
        font-size: 36px;
        color: var(--font-1, #282828);
        letter-spacing: -1.8px;
        line-height: normal;
    }
    .equip-card__model {
        font-family: 'Pretendard', sans-serif;
        font-weight: 400;
        font-size: 26px;
        color: var(--sub-color, #0f4c81);
        letter-spacing: -0.78px;
        line-height: normal;
    }
    .equip-card__desc {
        font-family: 'Pretendard', sans-serif;
        font-weight: 400;
        font-size: 18px;
        color: var(--font-1, #282828);
        letter-spacing: -0.78px;
        line-height: 32px;
        word-break: break-all;
    }

    @media (max-width: 1400px) {
        .equip-cards {
            padding: 60px 100px;
            display: flex;
            flex-direction: column;
            gap: 80px;
        }

        .equip-card__name {
            font-size: 34px;
        }

        .equip-card__content {
            display: flex;
            flex-direction: column;
            gap: 25px;
            padding: 0 20px;
        }

        .equip-card__desc {
            font-size: 18px;
            line-height: 32px;
        }

        .equip-card__model {
            font-size: 24px;
        }
    }

    /* ══════════════════════════════════════════════
       RESPONSIVE — Tablet (≤1024px)
    ══════════════════════════════════════════════ */
    @media (max-width: 1024px) {
        /* 헤더 */
        .equip-header {
            padding: 100px 40px;
        }
        .equip-header__title {
            font-size: 36px;
            line-height: 50px;
        }
        .equip-header__desc {
            font-size: 36px;
            line-height: 46px;
        }

        /* 탭 필터 */
        .equip-filter {
            padding: 0 40px;
        }

        /* 카드 영역 */
        .equip-cards {
            padding: 40px 40px 100px;
            gap: 80px;
        }

        /* 카드: 세로 배치 */
        .equip-card {
            flex-direction: column;
            gap: 20px;
        }
        .equip-card__img {
            width: 100%;
            height: auto;
            aspect-ratio: 520 / 360;
        }
        .equip-card__body {
            padding: 10px 0;
        }
    }

    /* ══════════════════════════════════════════════
       RESPONSIVE — Mobile (≤768px)
    ══════════════════════════════════════════════ */
    @media (max-width: 768px) {
        /* 헤더 */
        .equip-header {
            padding: 100px 20px;
            height: auto;
        }
        .equip-header__eyebrow {
            font-size: 14px;
            letter-spacing: 2.8px;
        }
        .equip-header__title {
            font-size: 36px;
            line-height: 50px;
        }
        .equip-header__desc {
            font-size: 26px;
            line-height: 36px;
        }

        /* 탭 → 드롭다운 전환 */
        .equip-filter {
            display: none;
        }
        .equip-dropdown {
            display: block;
            padding: 0 20px;
        }
        .equip-dropdown__select {
            width: 100%;
            height: 55px;
            padding: 10px 30px;
            border: 1px solid #ddd;
            border-radius: 10px;
            background: #f5f5f5;
            font-family: 'Pretendard', sans-serif;
            font-weight: 700;
            font-size: 18px;
            color: var(--font-1, #282828);
            letter-spacing: -1.26px;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' fill='none'%3E%3Cpath d='M3.18 4.32L9 9.68l5.82-5.36' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 18px 14px;
            cursor: pointer;
        }

        /* 카드 영역 */
        .equip-cards {
            padding: 20px 20px 60px;
            gap: 40px;
        }

        /* 카드 */
        .equip-card {
            gap: 20px;
        }
        .equip-card__body {
            gap: 20px;
            padding: 10px 0;
        }
        .equip-card__content {
            gap: 20px;
            padding: 0;
        }
        .equip-card__info {
            gap: 0;
        }
        .equip-card__name {
            font-size: 26px;
            letter-spacing: -0.78px;
            line-height: 36px;
        }
        .equip-card__model {
            font-size: 18px;
            line-height: 32px;
        }
        .equip-card__desc {
            font-size: 18px;
            line-height: 26px;
        }
    }
    /* ==========================================================
   이음이비인후과 — 병원 둘러보기 섹션 스타일
   파일: /resource/css/sub1-3-tour.css
   의존: Swiper CDN CSS (head에 먼저 로드)
   ========================================================== */

:root {
  --tour-point: #00a8c6;
  --tour-main:  #0a2a43;
  --tour-bg:    #eaf3f8;
}


/* ══════════════════════════════════════
   헤더 영역
══════════════════════════════════════ */
.tour-section { width: 100%; }

.tour-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 100px 200px;
  text-align: center;
}

.tour-en-label {
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--tour-point);
}

.tour-title {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  font-weight: 600;
  font-size: 56px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #111;
  margin: 0;
}

.tour-vline {
  display: block;
  width: 1px;
  height: 30px;
  background-color: #ddd;
  margin: 19px auto 0;
  flex-shrink: 0;
}

.tour-desc {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  font-weight: 400;
  font-size: 45px;
  line-height: 1.285;
  color: #222;
  margin: 50px 0 0;
}

.tour-desc strong {
  font-weight: 700;
  color: var(--tour-point);
}

.tour-ci {
  display: block;
  width: 64px;
  height: 62px;
  object-fit: contain;
  margin-top: 10px;
}


/* ══════════════════════════════════════
   슬라이더 래퍼 — PC 기본 (가로 배치)
══════════════════════════════════════ */
/* 메인 swiper 구조 강제 고정 */
.tour-main.swiper {
  overflow: hidden;
}

.tour-main .swiper-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  height: 100% !important;
}

.tour-main .swiper-slide {
  flex-shrink: 0 !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.tour-main .swiper-slide img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.tour-slider-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 25px;
  width: 100%;
  padding: 0 200px 100px;
}


/* ══════════════════════════════════════
   메인 슬라이더 — PC
══════════════════════════════════════ */
.tour-main {
  flex: 0 0 1200px;
  width: 1200px;
  height: 650px;
  border-radius: 20px;
  overflow: hidden;            /* ← 반드시 유지 */
  background-color: var(--tour-bg);
  position: relative;
  float: none !important;
}

.tour-main .swiper-slide {
  width: 100%;
  height: 100%;
}

.tour-main .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 공간명 뱃지 */
.tour-room-badge {
  position: absolute;
  top: 40px;
  left: 40px;
  background-color: var(--tour-main);
  color: #fff;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.7;
  padding: 4px 20px 5px;
  border-radius: 50px;         /* PC: pill */
  z-index: 10;
  pointer-events: none;
}

/* 이전/다음 버튼 */
.tour-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 100px;
  background-color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 0;
  transition: background-color 0.2s;
}

.tour-nav-btn:hover,
.tour-nav-btn:focus-visible {
  background-color: #f0f0f0;
  outline: none;
}

.tour-nav-btn svg {
  width: 14px;
  height: 22px;
  flex-shrink: 0;
}

.tour-prev-btn { left: 0;  border-radius: 0 50px 50px 0; }
.tour-next-btn { right: 0; border-radius: 50px 0 0 50px; }

.tour-pagination { display: none; }


/* ══════════════════════════════════════
   썸네일 슬라이더 — PC (세로)

   ★ .swiper-wrapper flex-direction은
     여기서 직접 쓰지 않음.
     수직 모드는 Swiper 번들 CSS가
     .swiper-vertical > .swiper-wrapper { flex-direction:column }
     으로 자동 처리하므로 별도 규칙 불필요.
══════════════════════════════════════ */
.tour-thumbs {
  flex: 0 0 auto;
  width: 275px;
  height: 650px;
  overflow: hidden;
}

/* PC: 각 슬라이드 높이 고정 (spaceBetween 18px → 슬롯 166.5px) */
.tour-thumbs .swiper-slide {
  height: 148.5px !important;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--tour-bg);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}

.tour-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tour-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}


/* ══════════════════════════════════════
   1200px ~ 1519px
   PC 레이아웃 유지, 메인만 flex-grow
══════════════════════════════════════ */
@media (max-width: 1519px) and (min-width: 1200px) {
  /* 슬라이더 전체 감싸는 영역 */
  .tour-slider-wrap {
    display: flex !important;
    flex-direction: row !important;
    gap: 25px;
    padding: 0 50px 100px; /* 패딩은 적절히 조절 */
    height: 600px; /* 전체 높이를 600px로 고정 (원하는 높이로 수정 가능) */
  }

  /* 왼쪽 큰 이미지 */
  .tour-main {
    flex: 1 !important;
    height: 100% !important; /* 부모 600px를 그대로 따라감 */
    width: auto !important;
    border-radius: 20px;
    overflow: hidden !important; /* 이미지가 아래로 밀려도 숨김 처리 */
  }

  .tour-main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 오른쪽 썸네일 영역 */
  .tour-thumbs {
    flex: 0 0 250px !important; /* 썸네일 너비 고정 */
    height: 100% !important;   /* 큰 이미지와 동일한 600px */
  }

  .tour-thumbs .swiper-slide {
    /* 썸네일 3개 고정: (전체높이 600px - 간격합계 36px) / 3 = 188px */
    height: calc((100% - 36px) / 3) !important; 
    width: 100% !important;
  }
}

/* ══════════════════════════════════════
   태블릿 (≤1199px)
   ★ 썸네일이 메인 아래로 내려와 가로 4개 배열
   피그마: gap-[25px], thumb gap-[5px], aspect-[275/148], rounded-[18px]
══════════════════════════════════════ */
@media (max-width: 1199px) {

  .tour-header { padding: 80px 40px; gap: 8px; }
  .tour-title  { font-size: 36px; }
  .tour-desc   { font-size: 36px; margin-top: 40px; word-break: keep-all; }

  /* 슬라이더: 세로 배치 */
  .tour-slider-wrap {
    flex-direction: column;
    align-items: stretch;
    padding: 0 40px 80px;
    gap: 25px;
  }

  /* 메인: 피그마 aspect-[1200/650] */
  .tour-main {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 650;
    overflow: hidden;          /* ← 명시 재선언 (height:auto 전환 후에도 유지) */
  }

  /* 뱃지: rounded-[8px] (피그마 태블릿) */
  .tour-room-badge {
    font-size: 20px;
    top: 30px;
    left: 30px;
    border-radius: 8px;
    padding: 4px 16px 5px;
  }

  /* ──────────────────────────────────────
     썸네일 컨테이너
     높이 = (사용가능너비 / 4슬라이드) × aspect(148/275)
     사용가능너비 = 100vw - 좌우패딩(40px×2) = 100vw - 80px
     → height = (100vw - 80px - gap합계15px) / 4 * 148 / 275
  ────────────────────────────────────── */
  .tour-thumbs {
    width: 100% !important;
    overflow: hidden;
    height: auto;
  }

  .tour-thumbs .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important; /* 가로 나열 강제 */
  }

  .tour-thumbs .swiper-slide {
    /* [수정] JS가 계산하는 50px를 무시하고 4개 배분 (간격 10px 기준) */
    width: calc((100% - 20px) / 4) !important; 
    height: auto !important;
    aspect-ratio: 176.25/94.85;
    flex-shrink: 0; /* 크기 줄어듦 방지 */
  }

  .tour-thumbs .swiper-slide-thumb-active {
    opacity: 1;
  }
}


/* ══════════════════════════════════════
   모바일 (≤767px)
   피그마: px-[20px], gap-[10px], rounded-[5px], 버튼 20×40px
══════════════════════════════════════ */
@media (max-width: 767px) {

  .tour-header { padding: 60px 20px 50px; gap: 6px; }

  .tour-en-label { font-size: 14px; letter-spacing: 0.2em; }
  .tour-title    { font-size: 36px; }
  .tour-vline    { height: 24px; margin-top: 10px; }

  .tour-desc {
    font-size: 26px;
    line-height: 1.385;
    margin-top: 80px;
    word-break: keep-all;
  }

  .tour-ci { width: 42px; height: 40px; }

  .tour-slider-wrap {
    flex-direction: column;
    align-items: stretch;
    padding: 0 20px 60px;
    gap: 10px;
  }

  .tour-main {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 650;
    overflow: hidden;
    border-radius: 20px;
  }

  .tour-room-badge {
    font-size: 16px;
    top: 20px;
    left: 20px;
    border-radius: 6px;        /* 피그마 모바일: rounded-[6px] */
    padding: 3px 15px 4px;
  }

  /* 버튼: w-[20px] h-[40px] (피그마 모바일) */
  .tour-nav-btn { width: 20px; height: 40px; }
  .tour-nav-btn svg { width: 8px; height: 14px; }

  /* 썸네일 높이 재계산
     사용가능너비 = 100vw - 좌우패딩(20px×2) = 100vw - 40px */
  .tour-thumbs {
    height: calc((100vw - 40px - 15px) / 4 * 148 / 275);
  }

  /* rounded-[5px] (피그마 모바일) */
  .tour-thumbs .swiper-slide {
    border-radius: 5px;
  }
}

/* ==========================================================
   이음이비인후과 — 진료안내 섹션 스타일
   파일: /resource/css/sub2-1.css

   브레이크포인트 구조
   PC  ≥1900px : 피그마 오리지널 (700 + 800, padding 200px)
   PC  1520~1899px : fluid (이미지 grow + card clamp)
   PC  1200~1519px : fluid (카드 축소, 패딩 축소)
   태블릿 ≤1199px : 세로 배치, padding 80px
   모바일  ≤767px : padding 20px

   ※ PC 구간은 Grid 로 통일 → 이미지·카드 높이 강제 동기화
   ========================================================== */


/* ══════════════════════════════════════
   색상 변수
══════════════════════════════════════ */
:root {
  --info-point: #00a8c6;
  --info-main:  #0a2a43;
  --info-sub:   #0f4c81;
  --info-bg:    #eaf3f8;
  --info-font1: #282828;
}


/* ══════════════════════════════════════
   섹션
══════════════════════════════════════ */
.info-section { width: 100%; }


/* ══════════════════════════════════════
   헤더 영역 (공통 베이스)
══════════════════════════════════════ */
.info-header {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  padding:        100px 200px 195px;
  text-align:     center;
}

.info-en-label {
  font-family:    'Libre Caslon Text', Georgia, serif;
  font-style:     italic;
  font-weight:    400;
  font-size:      22px;
  line-height:    1;
  letter-spacing: 0.2em;
  color:          var(--info-point);
  margin:         0;
}

.info-title {
  font-family:    'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  font-weight:    600;
  font-size:      56px;
  line-height:    1.3;
  letter-spacing: -0.03em;
  color:          #111;
  margin:         0;
}

.info-vline-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            30px;
  margin-top:     30px;
}

.info-vline {
  display:          block;
  width:            1px;
  height:           30px;
  background-color: #ddd;
  flex-shrink:      0;
}

.info-desc {
  font-family:    'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  font-weight:    400;
  font-size:      45px;
  line-height:    1.284;
  color:          #222;
  margin:         0;
  white-space:    nowrap;
}


/* ══════════════════════════════════════
   카드 래퍼 (베이스 — PC Grid 로 덮어씀)
══════════════════════════════════════ */
.info-card-wrap {
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
  padding:        0 200px 100px;
}


/* ── 이미지 ──────────────────────────── */
.info-img-wrap {
  flex:          0 0 700px;
  margin:        0;
  overflow:      hidden;
  border-radius: 20px 0 0 20px;
  line-height:   0;
}

.info-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}


/* ── 진료 정보 카드 ──────────────────── */
.info-card-body {
  flex:             0 0 800px;
  height:           538px;
  background-color: var(--info-bg);
  border-radius:    0 20px 20px 0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.info-card-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            50px;
  width:          100%;
  max-width:      600px;
  padding:        0 20px;
  box-sizing:     border-box;
}

.info-phone-group {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            26px;
  width:          100%;
  max-width:      445px;
}

.info-badge {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  background-color: var(--info-point);
  color:            #fff;
  font-family:      'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  font-weight:      700;
  font-size:        22px;
  letter-spacing:   -0.05em;
  padding:          9px 25px 10px;
  border-radius:    50px;
  line-height:      1;
  white-space:      nowrap;
}

.info-phone-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  width:          100%;
  text-align:     center;
}

.info-phone {
  font-family:    'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  font-weight:    700;
  font-size:      56px;
  color:          var(--info-main);
  letter-spacing: -0.05em;
  line-height:    1;
  margin:         0;
  width:          100%;
  text-align:     center;
  white-space:    nowrap;
}

.info-phone a {
  color:           inherit;
  text-decoration: none;
}

.info-phone-sub {
  font-family:    'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  font-weight:    400;
  font-size:      18px;
  color:          var(--info-font1);
  letter-spacing: -0.05em;
  text-align:     center;
  margin:         0;
  width:          100%;
}

.info-hdivider {
  border:      none;
  border-top:  1px solid #dadada;
  width:       100%;
  margin:      0;
  flex-shrink: 0;
}

.info-hours {
  display:         flex;
  flex-direction:  row;
  gap:             150px;
  align-items:     flex-start;
  justify-content: center;
  width:           100%;
}

.info-hours-col {
  display:        flex;
  flex-direction: column;
  gap:            30px;
  flex-shrink:    0;
}

.info-hours-day {
  font-family:    'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  font-weight:    700;
  font-size:      24px;
  color:          var(--info-sub);
  letter-spacing: -0.05em;
  line-height:    1;
  margin:         0;
}

.info-hours-list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin:         0;
  padding:        0;
}

.info-hours-row {
  display:     flex;
  gap:         13px;
  align-items: center;
}

.info-hours-row dt {
  font-family:    'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  font-weight:    700;
  font-size:      18px;
  color:          var(--info-font1);
  letter-spacing: -0.05em;
  white-space:    nowrap;
}

.info-hours-row dd {
  font-family:    'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  font-weight:    400;
  font-size:      18px;
  color:          var(--info-font1);
  margin:         0;
  white-space:    nowrap;
}

.info-hours-row time {
  font:  inherit;
  color: inherit;
}


/* ══════════════════════════════════════════════════════════
   PC 공통 (≥1200px) — Grid 전환 + 이미지 absolute 채움
   이미지·카드 높이 강제 동기화
══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {

  .info-card-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(500px, 40vw, 800px);
    align-items: stretch;
    gap: 0;
    padding: 0 clamp(40px, 5vw, 200px) clamp(60px, 5vw, 100px);
  }

  .info-img-wrap {
    position:      relative;
    width:         100%;
    height:        100%;
    min-height:    0;
    margin:        0;
    overflow:      hidden;
    aspect-ratio:  auto;
    border-radius: 20px 0 0 20px;
    flex:          unset;
  }

  .info-img-wrap picture {
    position: absolute;
    inset:    0;
    display:  block;
    width:    100%;
    height:   100%;
  }

  .info-img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
  }

  .info-card-body {
    flex:       unset;
    height:     auto;
    min-height: 538px;
  }

  .info-header {
    padding:
      clamp(60px, 5vw, 100px)
      clamp(40px, 8vw, 200px)
      clamp(70px, 10vw, 195px);
  }

  .info-desc {
    white-space: normal;
    word-break:  keep-all;
  }
}


/* ══════════════════════════════════════════════════════════
   1200~1519px : 중형 PC (카드 축소, 패딩 축소, 폰트 fluid)
══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) and (max-width: 1519px) {

  .info-card-wrap {
    grid-template-columns: minmax(0, 1fr) clamp(480px, 38vw, 540px);
    padding: 0 clamp(40px, 4vw, 80px) clamp(60px, 6vw, 80px);
  }

  .info-card-body { min-height: 500px; }

  .info-card-inner {
    max-width: 480px;
    padding:   30px 20px;
  }

  .info-title {
    font-size:   clamp(40px, 3.4vw, 52px);
    line-height: 1.25;
  }

  .info-desc {
    font-size:   clamp(26px, 2.4vw, 36px);
    line-height: 1.3;
  }

  .info-en-label { font-size: clamp(16px, 1.4vw, 22px); }
  .info-phone    { font-size: clamp(38px, 3.4vw, 52px); }
  .info-badge    { font-size: clamp(18px, 1.5vw, 22px); }

  .info-hours     { gap: clamp(40px, 5vw, 120px); }
  .info-hours-day { font-size: clamp(20px, 1.7vw, 24px); }

  .info-hours-row dt,
  .info-hours-row dd { font-size: clamp(16px, 1.3vw, 18px); }
}


/* ══════════════════════════════════════════════════════════
   1520~1899px : 큰 PC (fluid)
══════════════════════════════════════════════════════════ */
@media (min-width: 1520px) and (max-width: 1899px) {

  .info-card-wrap {
    grid-template-columns: minmax(0, 1fr) clamp(620px, 42vw, 800px);
    padding: 0 clamp(80px, 8vw, 200px) clamp(70px, 6vw, 100px);
  }

  .info-header {
    padding:
      clamp(70px, 5.5vw, 100px)
      clamp(80px, 8vw, 200px)
      clamp(110px, 10vw, 195px);
  }

  .info-title { font-size: clamp(44px, 3.4vw, 56px); }
  .info-desc  { font-size: clamp(32px, 2.5vw, 45px); line-height: 1.3; }
  .info-phone { font-size: clamp(44px, 3.6vw, 56px); }
  .info-hours { gap: clamp(70px, 8vw, 150px); }
}


/* ══════════════════════════════════════════════════════════
   1900px 이상 : 피그마 오리지널 (700 + 800)
══════════════════════════════════════════════════════════ */
@media (min-width: 1900px) {

  .info-card-wrap {
    grid-template-columns: 700px 800px;
    justify-content: center;
    padding: 0 200px 100px;
  }
}


/* ══════════════════════════════════════════════════════════
   태블릿 (≤1199px) — 세로 배치
══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {

  .info-header {
    padding: 90px 80px 80px;
    gap:     8px;
  }

  .info-title {
    font-size:      36px;
    line-height:    50px;
    letter-spacing: 0;
  }

  .info-desc {
    font-size:   36px;
    line-height: 46px;
    white-space: normal;
    word-break:  keep-all;
  }

  .info-card-wrap {
    flex-direction: column;
    padding:        0 80px 80px;
  }

  .info-img-wrap {
    flex:          none;
    width:         100%;
    height:        auto;
    aspect-ratio:  700 / 538;
    border-radius: 20px 20px 0 0;
  }

  .info-card-body {
    flex:          none;
    width:         100%;
    height:        auto;
    min-height:    538px;
    border-radius: 0 0 20px 20px;
  }

  .info-card-inner {
    max-width: 500px;
    padding:   0;
  }

  .info-hours { gap: 100px; }
}


/* ══════════════════════════════════════════════════════════
   모바일 (≤767px)
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .info-header {
    padding: 50px 20px 30px;
    gap:     6px;
  }

  .info-en-label {
    font-size:      14px;
    letter-spacing: 0.2em;
  }

  .info-vline-wrap { margin-top: 20px; gap: 20px; }
  .info-vline      { height: 24px; }

  .info-desc {
    font-size:   26px;
    line-height: 36px;
    word-break:  keep-all;
  }

  .info-desc br { display: none; }

  .info-card-wrap { padding: 0 20px 60px; }
  .info-card-body { min-height: 480px; }

  .info-card-inner {
    max-width: 100%;
    padding:   30px 20px;
  }

  .info-badge {
    font-size:      20px;
    letter-spacing: -0.05em;
  }

  .info-phone {
    font-size:      32px;
    letter-spacing: -0.05em;
  }

  .info-phone-sub { font-size: 16px; }

  .info-hours {
    flex-direction:  column;
    gap:             40px;
    padding:         0 20px;
    justify-content: flex-start;
    width:           100%;
  }

  .info-hours-col { gap: 10px; }

  .info-hours-day {
    font-size:      22px;
    letter-spacing: -0.05em;
  }

  .info-hours-row dt,
  .info-hours-row dd { font-size: 19px; }
}

/* 애니메이션 */

/* 공통 reveal 스타일 */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
  }
  
  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }
  
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }

/* 섹션별 특화 애니메이션 */
.section-about__img.reveal { transform: translateX(-30px); opacity: 0; }
.section-about__img.reveal.active { transform: translateX(0); opacity: 1; }

.section-about__text.reveal { transform: translateX(30px); opacity: 0; }
.section-about__text.reveal.active { transform: translateX(0); opacity: 1; }

  /* 의료진 사진 전용 (왼쪽에서 살짝 슬라이드) */
  .doctor-photo.reveal {
    transform: translateX(-40px);
    opacity: 0;
  }
  .doctor-photo.reveal.active {
    transform: translateX(0);
    opacity: 1;
  }
  
  /* 의료진 정보 전용 (오른쪽에서 살짝 슬라이드) */
  .doctor-info.reveal {
    transform: translateX(40px);
    opacity: 0;
  }
  .doctor-info.reveal.active {
    transform: translateX(0);
    opacity: 1;
  }
  
  /* 약력 리스트 순차 등장 (Stagger) */
  .career-list li {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease-out;
  }
  
  .doctor-card.active .career-list li {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* 약력 리스트 딜레이 (최대 8개 항목 기준) */
  .doctor-card.active .career-list li:nth-child(1) { transition-delay: 0.3s; }
  .doctor-card.active .career-list li:nth-child(2) { transition-delay: 0.4s; }
  .doctor-card.active .career-list li:nth-child(3) { transition-delay: 0.5s; }
  .doctor-card.active .career-list li:nth-child(4) { transition-delay: 0.6s; }
  .doctor-card.active .career-list li:nth-child(5) { transition-delay: 0.7s; }
  .doctor-card.active .career-list li:nth-child(6) { transition-delay: 0.8s; }
  .doctor-card.active .career-list li:nth-child(7) { transition-delay: 0.9s; }
  .doctor-card.active .career-list li:nth-child(8) { transition-delay: 1.0s; }

  /* 장비 카드의 순차적 지연 (카테고리 전환 시 효과적) */
.equip-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  
  /* 필터링 후 보여질 때의 애니메이션 클래스 */
  .equip-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* 헤더 텍스트 애니메이션 */
  .equip-header__title, .equip-header__desc {
    transition-delay: 0.1s;
  }
  
  /* 탭 버튼 클릭 피드백 */
  .equip-filter__btn {
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
  }
  .equip-filter__btn:active {
    transform: scale(0.95);
  }


  
  /* ============================================
   진료과목 공통 — 진단방법 2×2 카드 리스트
   (sleep, hearing, dizziness, tinnitus 등 공통 사용)
============================================ */
.diag-section {
  padding: 100px 0;
}

.diag-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.diag-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 40px;
  background: #f5f5f5;
  border-radius: 100px;
  min-height: 100px;
}

.diag-item--active {
  background: #163b7a;
}

.diag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.diag-txt {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.diag-name {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.diag-name--dark {
  color: #222;
}

.diag-desc {
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.diag-desc--dark {
  color: #666;
}

/* ── 순차 페이드인 ─────────────────── */
.diag-item.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: calc(var(--i, 0) * 0.15s);
}

.diag-item.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ── 반응형 ─────────────────── */
@media (max-width: 1024px) {
  .diag-section {
    padding: 80px 20px;
  }
  .diag-item {
    padding: 28px 32px;
  }
  .diag-name {
    font-size: 22px;
  }
  .diag-desc {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .diag-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .diag-item {
    padding: 24px 28px;
    border-radius: 60px;
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .diag-section {
    padding: 60px 16px;
  }
  .diag-item {
    padding: 20px 24px;
    gap: 14px;
    border-radius: 50px;
  }
  .diag-icon {
    width: 32px;
    height: 32px;
  }
  .diag-icon img {
    width: 32px;
    height: auto;
  }
  .diag-name {
    font-size: 20px;
  }
  .diag-desc {
    font-size: 16px;
    line-height: 1.45;
  }
}

/* 접근성 — 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
  .diag-item.reveal {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

  /* ============================================
   진료과목 공통 — 진단방법 2×2 카드 리스트 끝
   (sleep, hearing, dizziness, tinnitus 등 공통 사용)
============================================ */