/* =========================================================
   홈 전용 — 섹션 스냅 스크롤 메인 (HERO / WHY / TREATMENTS / DIRECTIONS)
   톤앤매너: 아이보리 배경 + 네이비 헤드라인 + 코퍼 포인트
   ========================================================= */

:root {
    /* 260902 UI 시안 팔레트 */
    --h-ivory:   #f5f6f8;   /* 기본 배경 */
    --h-ivory-2: #e5e8ef;
    --h-navy:    #273e5e;   /* 제목 */
    --h-navy-d:  #0d1b2e;   /* 어두운 배경 */
    --h-card-d:  #16273a;   /* 어두운 배경 카드 */
    --h-copper:  #c1907e;   /* 기본 로즈골드 (밝은 배경) */
    --h-copper-l:#d6ab9c;   /* 밝은 로즈골드 (어두운 배경) */
    --h-blue:    #5a90e0;   /* 포인트 파랑 */
    --h-peach-1: #e5e8ef;
    --h-peach-2: #f5f6f8;
    --h-body:    #414042;
    --h-label:   #5a90e0;
    --h-eyebrow: #808285;
    --h-line:    #d9dee7;
    --h-card:    #ffffff;
    --h-mono: inherit;
}

/* ---------- 헤더: 홈은 로고(좌) + 햄버거(우)만 ---------- */
/* PC(1025px+) 는 헤더 GNB 가 메뉴를 담당하므로 이 규칙은 태블릿 이하에만 적용 */
@media (max-width: 1024px) {
    .site-header:not(.site-header--sub) .utilnav__link,
    .site-header:not(.site-header--sub) .utilnav__user,
    .site-header:not(.site-header--sub) .utilnav__phone,
    .site-header:not(.site-header--sub) .hsocial { display: none !important; }
    .site-header:not(.site-header--sub) .hamburger--header { display: inline-flex !important; }
}

/* 홈 진입 상태(0번 헤더) — 헤더가 히어로 사진 위에 얹힌다.
   시안 0910 p7 기준:
     1. 원본 사진
     2. 사진 상단 블러 — 헤더 높이 2배 구간
     3. 검정 세로 그라데이션, 같은 구간
     4. 맨 위에 흰색 로고 + 햄버거
   2 는 히어로 쪽(.hero-band__blur), 3 은 헤더의 ::after 가 맡는다. */
:root { --hgb-h: 160px; }   /* 상단 블러·딤 구간 높이 */
@media (max-width: 640px) { :root { --hgb-h: 120px; } }

body.is-home .site-header:not(.is-scrolled) {
    background: transparent;
    box-shadow: none;
}
/* 상단 그라데이션 블러 — 사진을 한 벌 더 깔고 직접 흐린다.
   backdrop-filter 를 쓰지 않는 이유: 헤더가 position:fixed 라 사파리가
   배경을 못 잡고 필터를 통째로 무시하는 일이 잦다. 화면에 아무것도
   안 나오던 원인이 이것이었다. 일반 filter: blur() 는 그런 사정이 없다.

   .hero-band__blur 는 원본 슬라이드와 inset:0 으로 똑같이 겹쳐 놓는다.
   높이를 따로 주지 않아야 object-fit:cover 결과가 원본과 정확히 맞는다.
   잘라내는 일은 마스크가 한다 — 위는 그대로, --hgb-h 지점에서 완전히
   사라져 그 아래는 원본의 선명한 사진이 보인다. */
.hero-band__blur {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0,
        #000 calc(var(--hgb-h) * .34),
        transparent var(--hgb-h));
            mask-image: linear-gradient(to bottom,
        #000 0,
        #000 calc(var(--hgb-h) * .34),
        transparent var(--hgb-h));
}
.hero-band__blur img {
    filter: blur(26px);
    /* 블러는 가장자리 바깥에서 투명을 끌어와 테두리를 비치게 만든다.
       살짝 키워서 그 구간을 화면 밖으로 밀어낸다. */
    transform: scale(1.08);
}

/* 검정 딤 34% → 0%. 헤더의 ::after 라 블러 '위', 로고·햄버거 '아래'다.
   시안 문구는 10% 였지만 같은 시안의 예시 그림은 훨씬 진했고, 10% 로는
   화면에서 구간 자체가 보이지 않았다. 그림 쪽에 맞춘다 (요청 260911). */
body.is-home .site-header:not(.is-scrolled)::after {
    content: ''; position: absolute; z-index: 0;
    left: 0; right: 0; top: 0; height: var(--hgb-h);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 100%);
}

/* 시안 p8 은 "헤더에 마우스 올라가면 1번 헤더로" 였지만, 실제로 써 보니
   햄버거를 누르는 순간 포인터가 헤더 위에 있어 바가 흰색으로 굳었다.
   스크롤 전에는 투명을 유지하는 쪽으로 되돌린다 (요청 260911). */

body.is-home .site-header:not(.is-scrolled) .site-header__inner { color: #fff; }
body.is-home .site-header:not(.is-scrolled) .hamburger--header span { background: #fff; }
body.is-home .site-header:not(.is-scrolled) .brand__img--brand { opacity: 0; }
body.is-home .site-header:not(.is-scrolled) .brand__img--light  { opacity: 1; }

/* 햄버거 — 세 줄 굵기 동일 */
body.is-home .hamburger--header span { height: 2px; }

/* 스크롤하면 흰 바 + 2톤 브랜드 로고로 돌아온다 (어두워지는 바는 라미·미백만) */
body.is-home .site-header.is-scrolled { background: #fff; box-shadow: 0 2px 14px rgba(17, 24, 39, .06); }
body.is-home .site-header.is-scrolled .site-header__inner { color: #1f2937; }
body.is-home .site-header.is-scrolled .hamburger--header span { background: #4A4C4D; }

/* 홈은 자체 알약 CTA를 쓰므로 사이트 전역 우측 플로팅 독은 숨김 */
.fdock { display: none; }

/* ---------- 스냅 스크롤 ---------- */
body.is-home { background: var(--h-ivory); }   /* #f5f6f8 — 시안 기본 배경 */
/* mandatory 는 손을 떼는 즉시 다음 섹션으로 낚아채서 스크롤이 딱딱하다.
   proximity 로 두면 경계 근처에서만 맞춰 주고 중간에서는 자유롭게
   멈춘다 — 시안 p8 "좀 더 부드럽고 좀 느리게" 에 대한 답이다.
   (scroll-behavior:smooth 의 속도는 CSS 로 정할 수 없다. JS 로 휠을
    가로채면 기기마다 감도가 어긋나고 접근성도 나빠져서 쓰지 않았다.) */
html.home-snap {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    scroll-padding-top: 0;
}
.hsec {
    position: relative;
    scroll-snap-align: start;
    /* always 는 한 번에 한 섹션씩 강제로 멈춰 세운다 — proximity 와 함께
       쓰면 부드럽게 흘러가려는 것을 다시 붙잡는다 */
    /* 앵커·인디케이터로 이동했을 때 섹션 제목이 고정 헤더에 가리지 않도록 */
    scroll-margin-top: var(--header-h);
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    /* 좌우 여백을 헤더와 같은 값으로 — 로고·햄버거가 놓인 끝선에 본문이
       맞아떨어진다 (헤더: clamp(20px, 3.2vw, 56px)). */
    padding: calc(var(--header-h) + 28px) clamp(20px, 3.2vw, 56px) clamp(96px, 12vh, 124px);
    background: #ffffff;
    overflow: hidden;
}
/* 섹션마다 1240px 틀에 가둬 두면 여백이 헤더 끝선과 어긋난다.
   틀을 풀고 .hsec 의 좌우 여백(= 헤더와 동일)만 쓰게 한다. */
.hsec__inner { width: 100%; max-width: none; margin: 0 auto; }
.site-footer-b, .site-footer { scroll-snap-align: end; }

/* 섹션 사이 얇은 구분선 */
/* 섹션 사이 구분선 제거 — 배경색이 이어지는 게 시안 규칙이라 선이 겉돌았다 */

/* ---------- 공통 섹션 헤더 ---------- */
.hhead { margin-bottom: clamp(20px, 2.4vw, 34px); }
.heyebrow {
    display: inline-flex; align-items: center;
    font-family: var(--h-mono);
    font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--h-eyebrow);
    margin-bottom: 16px;
}
/* eyebrow 좌측 장식 라인 제거 (260903) */
.htitle {
    margin: 0;
    font-size: clamp(32px, 5.6vw, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15;
    color: var(--h-navy);
}
.hsub { margin: 16px 0 0; font-size: clamp(15px, 1.35vw, 17px); font-weight: 400; line-height: 1.6; color: var(--h-body); }

/* 좌 제목 / 우 설명 배치 */
/* 260903 — 영문/타이틀/설명을 세로로 쌓아 전 섹션 동일 규격 */
.hhead--split { display: block; }
.hhead--split .hsub { margin: 16px 0 0; max-width: none; text-align: left; }

/* ---------- 1. 히어로 — 기획안 레이아웃(상단 밴드 + 대표진료 3카드) ---------- */
/* 헤더는 히어로 사진 위에 얹힌다 — 사진이 헤더 뒤까지 올라온다.
   사진(87%) + 카피(나머지) 로 정확히 한 화면을 채운다. */
.hsec--hero { padding: 0; justify-content: flex-start; background: var(--h-ivory); display: flex; flex-direction: column; overflow: hidden; }

/* 상단 배너 — 사진이 영역을 가득 채우고 3초마다 넘어간다 */
/* 배너 — 사진만 담는다. 카피는 아래 .hero-intro 로 빠졌다.
   사진이 한 화면의 87%, 남는 13% 를 카피가 쓴다 (요청 260911). */
.hero-band {
    position: relative; overflow: hidden; isolation: isolate;
    width: 100%;
    flex: 0 0 auto; height: 87svh; min-height: 300px;
    background: #0d1b2e;
}
/* 사진은 원본 그대로 둔다 — 전체에 깔던 딤(veil)을 걷어냈다.
   어둡게 하는 곳은 헤더 구간(.hgb + 헤더 ::after) 하나뿐이다.
   (요청 260911) */
.hero-band__veil { display: none; }
.hero-band__slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity 1.1s ease;
}
.hero-slide.is-active { opacity: 1; }
/* 확대 애니메이션을 걷어냈다 (요청 260911 — 원본 화질 그대로).
   scale 로 천천히 줄어드는 연출은 브라우저가 이미지를 한 번 굽고
   그 결과를 늘려 쓰게 만든다. 3000px 판을 줘도 화면에서는 뭉개져
   보였고, 기기·브라우저마다 정도가 달라 결과가 들쭉날쭉했다. */
.hero-slide img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 사진 위 딤 — 좌측 텍스트 가독성 확보 */
/* 사진 밖 카피 — 기본 배경(#F5F6F8) 위 어두운 글씨.
   사진과 합쳐 한 화면이 되도록 남는 높이를 채운다. */
.hero-intro {
    position: relative; z-index: 2;
    width: 100%;
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center;
    background: var(--h-ivory);
    padding: clamp(18px, 2.4vh, 34px) 0;
}
.hero-intro__inner {
    width: 100%; max-width: none; margin: 0 auto;
    padding: 0 clamp(20px, 3.2vw, 56px);
}
.hero-intro__title {
    margin: 0;
    font-size: clamp(24px, min(3.4vw, 4.6vh), 46px); font-weight: 700; letter-spacing: -.04em; line-height: 1.24;
    color: var(--h-navy-d);
}
.hero-intro__lead {
    margin: clamp(8px, 1.2vh, 16px) 0 0;
    font-size: clamp(14px, min(1.25vw, 1.9vh), 19px); line-height: 1.6; font-weight: 400;
    color: var(--h-body);
}
/* 대표진료 */
/* 대표진료 — 이제 자기 섹션(.hsec--feat)을 갖는다.
   섹션이 패딩과 세로 가운데 정렬을 맡으므로 여기서는 폭만 잡는다. */
.hsec--feat { padding-bottom: clamp(96px, 12vh, 124px); }
.hero-feat {
    width: 100%; max-width: none; margin: 0 auto;
    flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column;
}
/* 다른 섹션 제목(.htitle)과 같은 크기로 통일 (요청 260911) */
.hero-feat__k {
    margin: 0 0 clamp(16px, 2.4vh, 32px);
    font-size: clamp(32px, min(5.6vw, 6vh), 44px); font-weight: 700;
    letter-spacing: -.035em; line-height: 1.15; color: var(--h-navy);
}
/* PC 는 2열 2행 —
     임플란트    아이언플란트
     라미네이트   치아미백
   ($FEATURED 순서 그대로, 행 우선으로 채워진다)
   4열로 늘어놓았을 때보다 카드 하나가 커진다. */
.fgrid {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 1.8vw, 26px);
    width: 100%; max-width: none; margin: 0 auto;
    justify-content: center; align-content: center;
}
/* 사진 카드에서 아이콘 카드로 (260910).
   아래 '왜 아이언치과인가' 카드(.wcard)와 같은 규격을 쓴다 —
   같은 화면에 두 종류의 카드 문법이 섞이지 않게 한다. */
.fcard {
    /* 카드 안(아이콘·제목·더보기)은 가로세로 모두 가운데로 모은다.
       .hero-feat 에 걸린 text-align:center 는 flex 정렬에 묻혀 있었다. */
    position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    /* 화면 '높이' 에도 연동한다 — 이 섹션은 100vh 라, 폭만 보고 키우면
       낮은 노트북에서 카드가 잘린다. */
    padding: clamp(30px, min(5.4vw, 7.2vh), 82px) 24px clamp(26px, min(5vw, 6.6vh), 74px);
    border-radius: 26px; border: 1px solid #e5e8ef; background: #ffffff;
    box-shadow: 0 8px 22px rgba(217, 222, 231, .55);
    transition: transform .3s ease, box-shadow .3s ease;
}
.fcard:hover { box-shadow: 0 20px 40px rgba(190, 199, 214, .85); }
.fcard__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(56px, min(7.4vw, 9.6vh), 112px); height: clamp(56px, min(7.4vw, 9.6vh), 112px);
    border-radius: clamp(17px, 2.3vw, 32px);
    background: var(--h-ivory);
    /* 시안 p1 의 아이언 골드(#C1907E) — p2 카드의 치아 아이콘 색이다 */
    color: var(--h-copper); margin-bottom: 18px;
}
.fcard__ico svg { width: clamp(25px, min(3.3vw, 4.3vh), 50px); height: clamp(25px, min(3.3vw, 4.3vh), 50px); }
.fcard__body {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.fcard__t {
    margin: 0; font-size: clamp(19px, min(2.8vw, 3.6vh), 38px); font-weight: 700; letter-spacing: -.03em;
    color: var(--h-navy);
}
/* 문구 없이 셰브론만 — 시안 p2 */
.fcard__more {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 2px; color: var(--h-copper);
}
.fcard__more svg { width: clamp(16px, 1.4vw, 20px); height: clamp(16px, 1.4vw, 20px); color: currentColor; }

/* 하단 그라데이션 페이드 + 고정 알약 CTA */
/* 화면 하단을 덮던 크림색 그라데이션 제거 (요청 260911).
   예약·상담 버튼이 따라다닐 때 사진 위에 흰 띠가 얹혀 보였다. */
.home-bottom-dim { display: none; }
.home-hero__pills {
    position: fixed; z-index: 40;
    /* 헤더·본문과 같은 끝선에 맞춘다 (요청 260911).
       1240px 틀 기준이라 1440 화면에서 100px 이나 안쪽에 있었다. */
    right: clamp(20px, 3.2vw, 56px);
    bottom: 34px;
    /* 두 버튼 너비를 같게 — 컨테이너 폭을 잡고 1:1 로 나눈다 (260904) */
    width: min(400px, calc(100vw - var(--gutter) * 2));
    display: flex; gap: 12px;
}
.hpill {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 0 18px; height: 54px; border-radius: 100px;
    font-size: 15px; font-weight: 700; letter-spacing: -.02em;
    border: 1px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hpill__label { white-space: nowrap; }
/* 각 채널 키컬러 — 하단 고정 CTA(.mcta)와 동일 */
.hpill--naver {
    background: #03C75A; color: #fff;
    box-shadow: 0 12px 28px rgba(3, 199, 90, .3);
}
.hpill--kakao {
    background: #FEE500; color: #3C1E1E;
    box-shadow: 0 12px 28px rgba(214, 192, 0, .34);
}
.hpill:hover { transform: translateY(-2px); }
.hpill__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; flex: none;
}
.hpill__ico img, .hpill__ico svg { width: 100%; height: 100%; display: block; }
/* 네이버 아이콘은 흰색 단색 — 초록 배경 위에 그대로 얹는다.
   카카오는 노란 배경용 다크 컬러(#3C1E1E) 아이콘 파일을 쓴다. */
.hpill--naver .hpill__ico,
.hpill--kakao .hpill__ico { background: transparent; padding: 0; }

/* ---------- 2. WHY IRON ---------- */
/* 4장을 한 줄로 두되, 본문 틀(1240px)에 갇혀 양옆이 너무 비어 보였다.
   이 섹션만 틀을 풀어 화면 가장자리 가까이까지 쓴다 — 여백은 조금만.
   (요청 260911) */
.wgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 26px); }
.wcard {
    position: relative; padding: clamp(34px, 3.2vw, 56px) clamp(28px, 2.6vw, 44px) clamp(36px, 3.4vw, 58px);
    border-radius: 22px; border: 1px solid #e5e8ef;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(217, 222, 231, .55);
    transition: transform .3s ease, box-shadow .3s ease;
}
.wcard__no {
    position: absolute; top: 22px; right: 24px;
    font-family: var(--h-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em;
    color: rgba(185, 133, 108, .5);
}
.wcard__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(58px, 5.4vw, 84px); height: clamp(58px, 5.4vw, 84px);
    border-radius: clamp(17px, 1.7vw, 24px);
    background: #f5f6f8;
    color: var(--h-label); margin-bottom: 18px;
}
.wcard__ico svg { width: clamp(26px, 2.5vw, 38px); height: clamp(26px, 2.5vw, 38px); }
.wcard__t { margin: 0 0 12px; font-size: clamp(19px, 1.9vw, 29px); font-weight: 700; letter-spacing: -.03em; line-height: 1.32; color: var(--h-navy); }
.wcard__d { margin: 0; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.62; color: var(--h-body); }

/* ---------- 3. 진료과목 ---------- */
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tcard {
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 18px; border: 1px solid #e5e8ef; background: var(--h-card);
    box-shadow: 0 8px 22px rgba(217, 222, 231, .55);
    transition: transform .3s ease, box-shadow .3s ease;
}
.tcard:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(190, 199, 214, .85); }
.tcard__media {
    position: relative; aspect-ratio: 4 / 3;
    background: #f5f6f8;
    display: flex; align-items: center; justify-content: center;
}
.tcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tcard__media .img-ph { display: none; }
.tcard__media svg { width: 34px; height: 34px; color: #d6ac9d; }
.tcard__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.tcard__t { margin: 0 0 7px; font-size: clamp(18px, 2vw, 19px); font-weight: 700; letter-spacing: -.03em; color: var(--h-navy); }
.tcard__d { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--h-body); flex: 1; }
.tcard__more {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; color: var(--h-copper);
}
.tcard__more svg { width: 13px; height: 13px; transition: transform .25s ease; }
.tcard:hover .tcard__more svg { transform: translateX(3px); }

.tcta {
    display: flex; flex-direction: column; justify-content: center;
    border-radius: 18px; padding: 32px 28px;
    background: var(--h-card-d);
    box-shadow: 0 18px 40px rgba(28, 43, 66, .2);
}
.tcta__t { margin: 0 0 14px; font-size: clamp(21px, 2.4vw, 22px); font-weight: 700; letter-spacing: -.035em; line-height: 1.35; color: #fff; }
.tcta__d { margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .62); }
.btn-copper {
    align-self: flex-start;
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 24px; border-radius: 100px;
    background: var(--h-copper); color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: -.02em;
    transition: background .2s ease, transform .2s ease;
}
.btn-copper:hover { background: #a97258; transform: translateY(-2px); }

/* ---------- 4. 오시는길 ---------- */
.dirwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 26px; align-items: start; }

.hmap {
    position: relative; border-radius: 18px; overflow: hidden;
    border: 1px solid #e5e8ef; background: #e9ecef;
    aspect-ratio: 16 / 13;
    display: flex; flex-direction: column;
}
.hmap iframe { flex: 1 1 auto; width: 100%; border: 0; display: block; min-height: 0; filter: saturate(.92) contrast(1.02); }
.hmap__bar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 13px 16px; background: #fff; border-top: 1px solid var(--h-line);
}
.hmap__addr {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: -.02em; color: var(--h-navy);
}
.hmap__addr svg { width: 15px; height: 15px; color: var(--h-copper); flex: none; }
.hmap__acts { display: inline-flex; gap: 8px; }
.hmap__btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 14px; border-radius: 100px; cursor: pointer;
    border: 1px solid #e5e8ef; background: #fff;
    font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: -.02em; color: var(--h-navy);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hmap__btn:hover { background: #fdf6f1; border-color: rgba(185, 133, 108, .4); transform: translateY(-1px); }
.hmap__btn--naver { background: var(--h-navy); border-color: var(--h-navy); color: #fff; }
.hmap__btn--naver:hover { background: #2d425f; border-color: #2d425f; }

.dirlist { display: flex; flex-direction: column; gap: 14px; }
.dirrow {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 18px 20px; border-radius: 14px;
    border: 1px solid #e5e8ef;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(217, 222, 231, .7);
}
.dirrow__ico {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: #f5f6f8; color: var(--h-label);
}
.dirrow__ico svg { width: 19px; height: 19px; }
.dirrow__k {
    display: block; font-family: var(--h-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: var(--h-label); margin-bottom: 4px;
}
.dirrow__v { display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -.02em; line-height: 1.55; color: var(--h-body); }

.hhours {
    margin-top: 4px; padding: 26px 28px 24px; border-radius: 16px;
    background: var(--h-card-d);
    box-shadow: 0 18px 40px rgba(28, 43, 66, .2);
}
.hhours__k {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--h-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .55); margin-bottom: 18px;
}
.hhours__k svg { width: 13px; height: 13px; }
.hhours__list { list-style: none; margin: 0 0 22px; padding: 0; }
.hhours__list li {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 13.5px;
}
.hhours__list li:last-child { border-bottom: 0; }
.hhours__list dt, .hhours__list .k { color: rgba(255, 255, 255, .72); font-weight: 500; }
.hhours__list .v { font-family: var(--h-mono); font-weight: 600; color: #fff; letter-spacing: -.01em; }
.hhours__list li.is-off .v { color: rgba(255, 255, 255, .62); font-family: inherit; }
.hhours__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 22px; border-radius: 100px;
    background: #fff; color: var(--h-navy); font-size: 13.5px; font-weight: 700; letter-spacing: -.02em;
    font-family: var(--h-mono);
    transition: transform .2s ease;
}
.btn-ghost:hover { transform: translateY(-2px); }
.btn-ghost svg { width: 14px; height: 14px; color: var(--h-copper); }

/* 스냅이 걸리는 화면에서는 섹션 높이를 뷰포트로 고정 — 내용이 넘쳐 잘리지 않게 */
@media (min-width: 1025px) {
    .hsec { height: 100vh; height: 100svh; }
    /* 오시는길만 예외 — 내용(진료시간 묶음 886px)이 한 화면에 안 들어간다.
       height 로 못 박아 두면 남는 만큼 밖으로 밀려나 잘리고, 화면에서는
       푸터에 먹힌 것처럼 보인다. 내용만큼 자라게 둔다. */
    .hsec--dir { height: auto; padding-bottom: clamp(124px, 15vh, 168px); }
}

/* 스냅 섹션 안에서 그리드가 잘리지 않도록 남는 높이를 채운다 */
.hsec--treat .hsec__inner,
.hsec--dir .hsec__inner { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.hsec--treat .hhead, .hsec--dir .hhead { flex: 0 0 auto; }

.hsec--treat .tgrid {
    flex: 1 1 auto; min-height: 0;
    /* minmax(0, 1fr) 이면 화면이 낮을 때 행이 내용보다 작게 줄어든다. 그러면
       카드가 자기 행을 넘쳐 아래 행 카드와 겹친다(창 높이 900px 에서 재현).
       min-content 를 하한으로 두면 남는 높이는 채우되 내용 밑으로는 줄지 않는다. */
    grid-template-rows: repeat(2, minmax(min-content, 1fr));
}
.hsec--treat .tcard { min-height: 0; }
.hsec--treat .tcard__media { flex: 1 1 auto; min-height: 74px; aspect-ratio: auto; }
.hsec--treat .tcard__body { flex: 0 0 auto; }
.hsec--treat .tcard__d { min-height: calc(1.7em * 3); }   /* 카드마다 이미지 영역 높이 맞춤 */
.hsec--treat .tcta { min-height: 0; }

/* min-height:0 이면 내용보다 작게 눌린다. 진료시간 묶음이 886px 인데
   화면이 900px 미만이면 섹션(100vh) 밖으로 밀려나고, .hsec 의
   overflow:hidden 에 잘려 푸터에 먹힌 것처럼 보였다.
   min-content 로 두면 섹션이 내용만큼 늘어난다 (.hsec 는 min-height 라 가능). */
/* 이 섹션만 '한 화면에 억지로 우겨넣기'를 그만둔다.
   내용(진료시간 묶음)이 886px 이라 900px 미만 화면에서는 100vh 안에
   들어가지 않는다. flex 로 눌러 담다 보니 밖으로 밀려나 .hsec 의
   overflow:hidden 에 잘렸고, 화면에서는 푸터에 먹힌 것처럼 보였다.
   내용만큼 자라게 두면 섹션이 스스로 커진다 — .hsec 는 height 가 아니라
   min-height:100vh 라 이게 가능하다. */
/* 화면 하단에 고정된 크림색 딤(.home-bottom-dim, z-index:30)이 진료시간
   카드를 최대 164px 덮고 있었다. 그 딤은 마지막 섹션에서 숨기도록 JS 가
   있지만, 섹션이 화면보다 길어진 뒤로는 제때 걸리지 않는다.
   이 섹션을 딤 위(31), 플로팅 버튼(40) 아래에 둔다 — 사용자가 지적한
   "푸터 영역보다 위 z-index" 가 정확히 이 얘기였다. */
.hsec--dir { overflow: visible; position: relative; z-index: 31; }
.hsec--dir .hsec__inner { flex: 0 0 auto; min-height: 0; }
/* 지도와 오른쪽 열의 길이를 맞춘다(stretch).
   단, 지도 상자에 aspect-ratio 를 함께 주면 안 된다 — 세로로 늘어난
   만큼 비율을 지키려고 가로까지 커져서 옆 칸을 덮는다. 비율을 빼고
   높이만 100% 로 두면 폭은 칸 너비에 그대로 묶인다.
   안의 iframe 이 남는 높이를 채운다. */
.hsec--dir .dirwrap  { flex: 0 0 auto; min-height: 0; align-items: stretch; }
.hsec--dir .hmap     { width: 100%; height: 100%; aspect-ratio: auto; min-height: 240px; }
.hsec--dir .hmap iframe { flex: 1 1 auto; width: 100%; height: auto; aspect-ratio: auto; min-height: 0; }
.hsec--dir .dirlist  { height: auto; min-height: 0; }
.hsec--dir .dirrow { padding: 16px 20px; }
.hsec--dir .hhours { padding: 20px 24px 20px; }
.hsec--dir .hhours__list { margin-bottom: 16px; }
.hsec--dir .hhours__list li { padding: 7px 0; }
.hsec--dir .hhours { flex: 1 1 auto; display: flex; flex-direction: column; }
.hsec--dir .hhours__list { flex: 1 1 auto; min-height: 0; }

/* ---------- 스크롤 힌트 ---------- */
.hscroll {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-family: var(--h-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(34, 52, 79, .3);
}
.hscroll__bar { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(185, 133, 108, .7), rgba(185, 133, 108, 0)); }

/* ---------- 반응형 ---------- */
@media (max-width: 1180px) {
    .wgrid, .tgrid { grid-template-columns: repeat(2, 1fr); }
    .hsec { padding-top: calc(var(--header-h) + 20px); }
    /* 히어로는 사진이 헤더 뒤까지 올라와야 한다. 위 .hsec 규칙이 여기서도
       걸려 1025~1180px 구간에서만 히어로가 116px 내려가 있었다.
       (해제가 1024px 블록에만 있어서 그 사이가 비어 있었다.) */
    .hsec--hero { padding-top: 0; }
    /* 2열이 되면 항목 6개에 3행이 필요하다. 2행 고정을 여기서 푼다.
       (예전에는 1024px 에서야 풀려서 1025~1180px 구간이 비어 있었다.) */
    .hsec--treat .tgrid { grid-template-rows: none; }
    .hsec--treat .tcard__media { aspect-ratio: 4 / 3; flex: 0 0 auto; min-height: 0; }
}

/* 태블릿 이하 — 스냅 해제, 히어로 2단 → 1단 */
@media (max-width: 1024px) {
    html.home-snap { scroll-snap-type: none; }
    .hsec {
        height: auto; min-height: 0;
        padding-top: calc(var(--header-h) + 40px);
        padding-bottom: 64px;
    }
    /* 히어로는 밴드/대표진료가 자체 여백을 갖는다 — 섹션 패딩이 겹치면 헤더 밑이 비어 보인다 */
    .hsec--hero { height: auto; min-height: 0; padding: 0; }

    .hero-band { height: 86svh; min-height: 300px; }

    .hsec--feat { padding-bottom: 40px; }
    /* 폭 제한은 이미 없다 — 열 수도 위에서 2 로 정해져 있다 */
    .fcard { padding: 22px 20px 22px; }

    .dirwrap { grid-template-columns: 1fr; }
    .hsec--dir .hmap { height: auto; aspect-ratio: 16 / 12; min-height: 0; }
    .hsec--dir .dirlist { height: auto; }
    .hhead--split .hsub { text-align: left; margin: 14px 0 0; max-width: none; }

    /* 스냅용 높이 채우기 규칙 해제 */
    .hsec--treat .hsec__inner, .hsec--dir .hsec__inner { display: block; }
    .hsec--treat .tgrid { grid-template-rows: none; }
    .hsec--treat .tcard__media { aspect-ratio: 4 / 3; flex: 0 0 auto; min-height: 0; }
}

/* 모바일 */
@media (max-width: 640px) {
    /* (.home-hero__pills 숨김은 아래 768px 규칙에서 처리) */
    .home-bottom-dim { display: none; }
    .hscroll { display: none; }

    /* 히어로 높이 — 화면의 68% (요청 260911) */
    /* 하단 고정 CTA(.mcta, 53px)가 카피를 가렸다. 사진을 그만큼 줄이고
       카피 아래에 그 자리를 비워 사진+카피가 한 화면에 온전히 들어가게 한다. */
    .hero-band { height: 78svh; min-height: 260px; }
    /* 히어로와 대표진료 사이 간격. .hsec 공통 상단 여백이
       헤더높이+40 = 104px 라 너무 벌어져 있었다. */
    .hsec--feat { padding-top: 26px; }
    .hero-intro { padding: 14px 0 calc(66px + env(safe-area-inset-bottom)); }
    .hero-intro__lead { margin-top: 8px; line-height: 1.55; }

    .hsec--feat { padding-bottom: 24px; }
    .fgrid { grid-template-columns: 1fr; gap: 14px; }
    .fcard { padding: 20px 18px 20px; }
    .fcard__ico { width: 46px; height: 46px; margin-bottom: 14px; }

    .wgrid, .tgrid { grid-template-columns: 1fr; gap: 14px; }
    .wcard { padding: 22px 20px 24px; }
    .wcard__ico { width: 46px; height: 46px; margin-bottom: 16px; }
    .hsec--treat .tcard { flex-direction: row; align-items: center; }
    .hsec--treat .tcard__media { width: 116px; flex: 0 0 116px; aspect-ratio: 1; }
    .hsec--treat .tcard__d { min-height: 0; margin-bottom: 12px; }
    .tcta { padding: 24px 22px; }

    /* 오시는길 — 지도를 1:1 로 (요청 260911).
       aspect-ratio 를 .hmap 에 걸면 지도와 정보바가 그 비율을 나눠 갖는다.
       정보바가 세로로 쌓이는 모바일에서는 지도가 그만큼 눌려 협소했다.
       비율은 iframe 에만 주고, 정보바는 그 아래 제 높이를 갖게 한다. */
    .hsec--dir .hmap { aspect-ratio: auto; height: auto; min-height: 0; }
    .hsec--dir .hmap iframe { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 1 / 1; }
    .hmap__bar {
        flex-direction: column; align-items: stretch; gap: 12px;
        padding: 16px;
    }
    .hmap__addr { font-size: 14px; line-height: 1.5; align-items: flex-start; }
    .hmap__addr svg { margin-top: 2px; }
    .hmap__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .hmap__btn { height: 42px; font-size: 13.5px; }
    .dirrow { padding: 14px 16px; gap: 12px; }
    .hhours__acts { flex-direction: column; }
    .hhours__acts > * { width: 100%; }
}

/* 낮은 화면에서 스냅 섹션이 잘리지 않도록 여백 축소 */
@media (min-width: 1025px) and (max-height: 820px) {
    .hhead { margin-bottom: 26px; }
    .wcard { padding: 22px 20px 24px; }
    .wcard__ico { margin-bottom: 18px; width: 46px; height: 46px; }
    .tcard__body { padding: 18px 18px 20px; }
    .hsec { padding-bottom: 40px; }
    /* 오시는길은 예외 — 이 섹션은 한 화면에 우겨넣지 않고 내용만큼
       자라므로, 여백을 40px 로 조이면 푸터에 바짝 붙는다. */
    .hsec--dir { padding-bottom: clamp(96px, 13vh, 140px); }
}

/* =========================================================
   고급 인터랙션
   ========================================================= */

/* ---------- 섹션 진입 스태거 리빌 (느리고 부드럽게) ---------- */
.js-reveal, [data-rv] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s),
        transform 1.05s cubic-bezier(.16, 1, .3, 1) var(--d, 0s),
        filter 1s ease var(--d, 0s);
    filter: blur(4px);
    will-change: opacity, transform;
}
.hsec.is-in .js-reveal,
.hsec.is-in [data-rv] { opacity: 1; transform: none; filter: none; }

/* 섹션 헤더는 살짝 먼저, 카드는 순차로 */
.hsec.is-in .hhead .heyebrow { animation: eyebrowIn 1.1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes eyebrowIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ---------- 카드 3D 틸트 + 커서 스포트라이트 ---------- */
.tcard, .dirrow {
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(0);
    transition: transform .55s cubic-bezier(.16, 1, .3, 1), box-shadow .55s ease;
}
.tcard:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
}
.tcard::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(185, 133, 108, .13), transparent 62%);
    opacity: 0; transition: opacity .5s ease;
}
.wcard, .tcard, .fcard { position: relative; }
.tcard:hover::after { opacity: 1; }

/* '왜 아이언치과인가' 카드도 대표진료와 같은 반응으로 —
   커서를 따라다니는 미색 스포트라이트 대신 들림 + 고른 딤만 (요청 260911) */
/* 이 카드는 링크가 아니라 설명 블록(<article>)이다. 들림·딤·누름 반응이
   있으면 누를 수 있는 것처럼 보인다. 반응을 두지 않는다 (요청 260911). */

/* 대표진료 카드는 커서를 따라다니는 미색 스포트라이트 대신
   '살짝 들림 + 카드 전체가 고르게 어두워짐' 만 쓴다. 3D 틸트도 빼서
   반응을 이 둘로 한정한다(틸트 제외는 home.js 의 대상 목록에서). */
.fcard {
    transform: translateY(0);
    transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease;
}
.fcard::after {
    content: ''; position: absolute; inset: 0; z-index: 3;
    border-radius: inherit; pointer-events: none;
    background: rgba(13, 27, 46, .05);
    opacity: 0; transition: opacity .28s ease;
}
.fcard:hover { transform: translateY(-6px); }
.fcard:hover::after { opacity: 1; }
/* 누를 때는 들림이 되돌아오면서 딤이 조금 더 짙어진다 */
.fcard:active { transform: translateY(-2px); transition-duration: .1s; }
.fcard:active::after { background: rgba(13, 27, 46, .09); opacity: 1; transition-duration: .1s; }

/* 카드 이미지 슬로우 줌 */
.tcard__media img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.tcard:hover .tcard__media img { transform: scale(1.06); }

/* 아이콘 · 화살표 */
.dirrow { transition: transform .5s cubic-bezier(.16, 1, .3, 1), border-color .4s ease; }
.dirrow:hover { border-color: rgba(185, 133, 108, .34); }

/* ---------- 마그네틱 CTA ---------- */
.hpill, .btn-copper, .btn-ghost {
    transform: translate(var(--tx, 0), var(--ty, 0));
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), background .3s ease, box-shadow .4s ease;
}
.hpill:hover { transform: translate(var(--tx, 0), calc(var(--ty, 0px) - 2px)); }
.btn-copper:hover, .btn-ghost:hover { transform: translate(var(--tx, 0), calc(var(--ty, 0px) - 2px)); }
.hmap__btn.is-done { background: var(--h-copper); border-color: var(--h-copper); color: #fff; }

/* ---------- 히어로 배너 ----------
   will-change 도 뺀다. 이미지를 별도 레이어로 올려 고정 해상도로
   굽게 만드는데, 그게 흐릿함의 나머지 절반이었다. 슬라이드 전환은
   .hero-slide 의 opacity 만으로 충분하다. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}

/* 하단 고정 CTA — 마지막 섹션에서는 페이드아웃 */
.home-hero__pills, .home-bottom-dim { transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.home-hero__pills.is-hidden { opacity: 0; transform: translateY(18px); pointer-events: none; }
.home-bottom-dim.is-hidden { opacity: 0; }

/* ---------- 우측 섹션 인디케이터 ---------- */
.hdots {
    position: fixed; z-index: 45; right: 22px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
}
.hdots__b {
    display: inline-flex; align-items: center; gap: 10px;
    background: none; border: 0; padding: 4px 0; cursor: pointer;
}
.hdots__b::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(34, 52, 79, .22);
    transition: background .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease;
}
.hdots__b:hover::after { background: rgba(185, 133, 108, .7); transform: scale(1.25); }
.hdots__b.is-on::after {
    background: var(--h-copper); transform: scale(1.45);
    box-shadow: 0 0 0 5px rgba(185, 133, 108, .16);
}
.hdots__t {
    font-family: var(--h-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--h-copper); opacity: 0; transform: translateX(8px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
    white-space: nowrap;
}
.hdots__b:hover .hdots__t, .hdots__b.is-on .hdots__t { opacity: 1; transform: none; }

@media (max-width: 1024px) { .hdots { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .js-reveal, [data-rv] { opacity: 1; transform: none; filter: none; transition: none; }
    .hsec.is-in .hhead .heyebrow { animation: none; }
    .fcard, .tcard, .dirrow, .hpill, .btn-copper, .btn-ghost { transition: none; transform: none; }
    html.home-snap { scroll-behavior: auto; }
}

/* 진료과목 카드 — 사진 + 좌상단 픽토그램 배지 */
.tcard__badge {
    position: absolute; z-index: 2; left: 12px; top: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 14px rgba(34, 52, 79, .16);
    color: var(--h-copper);
}
.tcard__badge svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
    .tcard__badge { width: 30px; height: 30px; left: 8px; top: 8px; }
    .tcard__badge svg { width: 16px; height: 16px; }
}

/* 새 아이콘 세트는 fill 기반 24x24 — 크기는 여기서 통제 */
.wcard__ico svg, .dirrow__ico svg, .hhours__k svg,
.hero-copy__tel svg, .hmap__addr svg, .btn-ghost svg, .tcard__more svg, .fcard__more svg { fill: currentColor; }

/* ---------- 대표진료 — 섹션 헤드는 가운데 정렬 유지 ---------- */
.hero-feat { text-align: center; }
.hero-feat__k { text-align: center; }

/* ---------- WHY IRON — 카드 센터형 (시안 260902, 대표진료와 통일) ---------- */
.wcard { text-align: center; display: flex; flex-direction: column; align-items: center; }
.wcard__ico { margin-left: auto; margin-right: auto; }
.wcard__no { display: none; }   /* 작은 번호 숨김 (260903) */

/* ---------- 진료과목 카드 — 이미지가 카드 좌측을 여백 없이 꽉 채움 (시안 260902) ---------- */
.hsec--treat .tcard { flex-direction: row; align-items: stretch; overflow: hidden; }
.hsec--treat .tcard__media {
    flex: 0 0 38%; width: 38%; aspect-ratio: auto; min-height: 100%;
    align-self: stretch; border-radius: 0;
}
.hsec--treat .tcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hsec--treat .tcard__body { flex: 1 1 auto; justify-content: center; padding: 20px 22px; }
.hsec--treat .tcta { flex-direction: column; }
@media (max-width: 640px) {
    .hsec--treat .tcard__media { flex: 0 0 40%; width: 40%; }
    .hsec--treat .tcard__body { padding: 16px 16px; }
}

/* ---------- 오시는길 HOURS — 주소·지하철·주차와 동일한 흰 카드 (시안 260902) ---------- */
.dirrow__col { display: block; flex: 1 1 auto; }
.dirrow--hours { align-items: flex-start; }
.hhours__list, .hhours__lunch { list-style: none; margin: 0; padding: 0; }
.hhours__list li, .hhours__lunch li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 5px 0; font-size: 14.5px; color: var(--h-body); border: 0;
}
.hhours__list .k, .hhours__lunch .k { font-weight: 500; color: var(--h-body); }
.hhours__list .v, .hhours__lunch .v { font-weight: 600; color: var(--h-navy); }
.hhours__list li.is-off .v { font-weight: 500; color: var(--h-body); }
.hhours__lunch {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid #e5e8ef;
}
.hhours__lunch .k::before { content: '점심 '; color: var(--h-eyebrow); }
.hhours__acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn-blue {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 42px; padding: 0 20px; border-radius: 10px;
    background: var(--h-blue); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.02em;
    transition: background .2s ease, transform .2s ease;
}
.btn-blue:hover { background: #4a80d2; transform: translateY(-1px); }
.btn-blue svg { width: 15px; height: 15px; fill: currentColor; }
@media (max-width: 640px) {
    .hhours__acts { flex-direction: column; }
    .hhours__acts > * { width: 100%; }
}

/* ---------- PC 진료과목 카드 — 이미지 배경 + 딤 + 하단 텍스트 (260903) ---------- */
@media (min-width: 1025px) {
    /* 대표진료 카드도 진료과목 카드와 같은 높이감으로 */
    .fcard { min-height: 260px; }
    .hsec--treat .tcard {
        position: relative; display: block; overflow: hidden;
        border: 0; border-radius: 16px; isolation: isolate;
        min-height: 260px;
        box-shadow: 0 12px 48px rgba(190, 199, 214, .32);
    }
    .hsec--treat .tcard__media {
        position: absolute; inset: 0; z-index: 0;
        width: 100%; height: 100%; flex: none; aspect-ratio: auto;
        border-radius: 0; background: #e5e8ef;
    }
    .hsec--treat .tcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    /* 하단으로 갈수록 짙어지는 딤 — 글씨 가독성 확보 */
    .hsec--treat .tcard::after {
        content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        /* 스포트라이트 규칙이 opacity:0 을 걸어둬서 명시적으로 되살린다 */
        opacity: 1;
        background: linear-gradient(180deg,
            rgba(13, 27, 46, 0) 22%,
            rgba(13, 27, 46, .18) 46%,
            rgba(13, 27, 46, .44) 72%,
            rgba(13, 27, 46, .66) 100%);
        transition: background .4s ease;
    }
    .hsec--treat .tcard:hover::after { opacity: 1; }
    .hsec--treat .tcard:hover::after {
        background: linear-gradient(180deg,
            rgba(13, 27, 46, .06) 16%,
            rgba(13, 27, 46, .28) 44%,
            rgba(13, 27, 46, .55) 70%,
            rgba(13, 27, 46, .78) 100%);
    }
    .hsec--treat .tcard__body {
        position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
        display: flex; flex-direction: column; align-items: flex-start;
        padding: 22px 24px 20px; gap: 6px; background: none;
    }
    .hsec--treat .tcard__t { color: #fff; font-size: clamp(19px, 2vw, 22px); text-shadow: 0 1px 10px rgba(13, 27, 46, .5); }
    .hsec--treat .tcard__d {
        color: rgba(255, 255, 255, .9); min-height: 0; margin: 0 0 8px;
        font-size: 14px; line-height: 1.55; text-shadow: 0 1px 8px rgba(13, 27, 46, .45);
    }
    .hsec--treat .tcard__more { color: #fff; text-shadow: 0 1px 8px rgba(13, 27, 46, .45); }
    .hsec--treat .tcard__more svg { color: #fff; }
    .hsec--treat .tcard:hover .tcard__media img { transform: scale(1.05); }
}

/* ---------- 모바일 — 각 섹션 카드 높이 통일 (260903) ---------- */
@media (max-width: 640px) {
    /* 1열 그리드에서 행 높이를 균등하게 → 가장 큰 카드에 맞춰 모두 같은 높이 */
    .fgrid, .wgrid, .tgrid { grid-auto-rows: 1fr; align-items: stretch; }
    .fcard, .wcard, .tcard, .tcta { height: 100%; }
    /* 내용이 적은 카드는 가운데로 모이게 */
    .wcard { justify-content: center; }
    .hsec--treat .tcard__body { justify-content: center; }
}

/* ---------- 카드 테두리 제거 — 그림자만으로 면 구분 (260903) ---------- */
.fcard, .wcard, .tcard, .tcta, .dirrow, .hmap { border: 0; }
.hmap__bar { border-top: 0; }
/* 테두리가 빠진 만큼 그림자를 살짝 또렷하게 */
/* 넓게 퍼지고 옅은 그림자 — blur 를 키우고 alpha 를 낮춤 (260903) */
.fcard, .wcard, .tcard {
    box-shadow: 0 10px 44px rgba(190, 199, 214, .34),
                0 2px 10px rgba(190, 199, 214, .16);
}
.fcard:hover, .tcard:hover {
    box-shadow: 0 20px 60px rgba(176, 188, 208, .4),
                0 4px 14px rgba(190, 199, 214, .18);
}
.dirrow {
    box-shadow: 0 8px 36px rgba(190, 199, 214, .28),
                0 2px 8px rgba(190, 199, 214, .12);
}
.hmap {
    box-shadow: 0 10px 44px rgba(190, 199, 214, .3),
                0 2px 10px rgba(190, 199, 214, .14);
}
@media (min-width: 1025px) {
    /* 이미지 배경 카드는 그림자만 유지 */
    .hsec--treat .tcard { border: 0; }
}


/* ---------- 하단 고정 CTA(.mcta)가 뜨는 폭에서는 알약 CTA 를 숨긴다 (260904) ---------- */
@media (max-width: 768px) {
    .home-hero__pills { display: none; }
}

/* =========================================================
   밝은 버전 기본 배경 (#F5F6F8)
   ---------------------------------------------------------
   기존에는 본문이 전부 흰색(#ffffff)이었다. 흰 카드가 흰 배경 위에
   놓여 카드 경계가 약했다. 기본 배경을 아이보리로 내리면 카드가
   떠 보이고 섹션 구분도 또렷해진다.

   #f5f6f8 은 이미 --h-ivory 로 "기본 배경"이라 정의돼 있던 값이라
   변수를 그대로 쓴다. 처음에는 모바일에만 걸었는데, 시안 0910 p4 가
   "기본 배경색 연속성 있게"라고 못박아 폭 제한을 없앴다.
   ========================================================= */
body.is-home .hsec { background: var(--h-ivory); }
/* 히어로는 사진이 헤더 뒤까지 꽉 차므로 아이보리를 깔지 않는다 */