﻿/* 이펙터 · 2026-10 제작 · 병원 안내·연구 페이지 스타일 */

.hi-page {
  --hi-sec: 4rem;
  --hi-gap: 2rem;
  --hi-r: 1.5rem;
  --hi-r-img: 1.25rem;
  --hi-muted: #5d5d5d;
  --hi-blue: #4d6c88;
  --hi-soft: #f4f4f4;
  --hi-card: #f9f9f9;
  --hi-line: #acacac;
  --hi-hero-h: 30rem;
  --hi-h2: 1.625rem; --hi-sub: 1rem;
  padding-bottom: 0;
}
@media (min-width: 576px) { .hi-page { --hi-hero-h: 34rem; --hi-h2: 1.875rem; --hi-sub: 1.0625rem; } }
@media (min-width: 768px) { .hi-page { --hi-sec: 5rem; --hi-hero-h: 40rem; --hi-h2: 2.125rem; --hi-sub: 1.125rem; } }
@media (min-width: 992px) { .hi-page { --hi-sec: 7.5rem; --hi-hero-h: 48rem; --hi-h2: 2.5rem; --hi-sub: 1.1875rem; } }
@media (min-width: 1400px) { .hi-page { --hi-hero-h: 62.5rem; --hi-h2: 2.625rem; } }

.hi-hero { position: relative; display: flex; align-items: center; height: var(--hi-hero-h); overflow: hidden; background: #3a3a3a; color: #fff; }
.hi-hero-light { background: #ddd9cf; color: #111; }
.hi-hero-bg { position: absolute; inset: 0; }
.hi-hero-bg .img-ph { width: 100%; height: 100%; border: 0; background: transparent; }
.hi-hero-bg .img-ph::after { top: auto; bottom: 1rem; left: 1rem; transform: none; }
.hi-hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hi-hero-light .hi-hero-bg img { object-position: var(--hi-pos-m, 25% 50%); }
@media (min-width: 768px) { .hi-hero-light .hi-hero-bg img { object-position: 50% 50%; } }
.hi-tour-page .hi-hero-bg img { object-position: var(--hi-tour-pos-m, left center); }
@media (min-width: 992px) { .hi-tour-page .hi-hero-bg img { object-position: var(--hi-tour-pos, right center); } }
.hi-hero-light .hi-hero-bg .img-ph { background: transparent; }
.hi-hero .container { position: relative; z-index: 1; }
.hi-hero-kicker { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
.hi-hero-title { margin: 0; font-size: 2rem; font-weight: 600; line-height: 1.25; color: inherit; }
.hi-hero-desc { margin: 1.25rem 0 0; font-size: 1rem; font-weight: 400; line-height: 1.55; }
.hi-hero-desc a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; transition: text-decoration-color .25s; }
@media (hover: hover) { .hi-hero-desc a:hover { text-decoration-color: currentColor; } }
.hi-hero-desc a:focus-visible { text-decoration-color: currentColor; }
@media (min-width: 576px) { .hi-hero-kicker { font-size: 1.375rem; } .hi-hero-title { font-size: 2.5rem; } .hi-hero-desc { font-size: 1.125rem; } }
@media (min-width: 768px) { .hi-hero-kicker { font-size: 1.5rem; margin-bottom: 1rem; } .hi-hero-title { font-size: 2.75rem; } .hi-hero-desc { margin-top: 1.5rem; font-size: 1.25rem; } }
@media (min-width: 992px) { .hi-hero-kicker { font-size: 1.75rem; } .hi-hero-title { font-size: 3rem; } .hi-hero-desc { font-size: 1.375rem; } }
@media (min-width: 1400px) { .hi-hero-kicker { font-size: 1.875rem; margin-bottom: 1.25rem; } .hi-hero-title { font-size: 3.125rem; } .hi-hero-desc { margin-top: 1.5rem; font-size: 1.4375rem; } }

.hi-sec { padding-block: var(--hi-sec); }
.hi-head { text-align: center; }
.hi-h2 { margin: 0; font-size: var(--hi-h2); font-weight: 600; line-height: 1.3; color: var(--ss-ink); }
.hi-sub { margin: .75rem 0 0; font-size: var(--hi-sub); line-height: 1.5; color: var(--hi-muted); }
.hi-head + * { margin-top: 2.5rem; }
@media (min-width: 992px) { .hi-head + * { margin-top: 3rem; } }

.hi-rs { display: grid; gap: var(--hi-gap); }
.hi-rs-card { display: grid; gap: 1.5rem; padding: 1.5rem; border-radius: var(--hi-r); background: var(--hi-card); color: inherit; transition: background-color .25s; }
@media (hover: hover) { .hi-rs-card:hover { background: #f1f1f1; } }
.hi-rs-card:focus-visible { background: #f1f1f1; }
.hi-rs-pic { border-radius: var(--hi-r-img); overflow: hidden; }
.hi-rs-pic img, .hi-rs-pic .img-ph { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 0; }
.hi-rs-body { align-self: center; min-width: 0; }
.hi-rs-t { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: var(--ss-ink); }
.hi-rs-d { margin: .5rem 0 0; font-size: .9375rem; line-height: 1.55; color: var(--hi-muted); }
@media (min-width: 768px) {
  .hi-rs-card { grid-template-columns: 17.5rem 1fr; gap: 2rem; align-items: center; padding: 2rem; }
  .hi-rs-t { font-size: 1.375rem; } .hi-rs-d { font-size: 1rem; }
}
@media (min-width: 992px) {
  .hi-rs-card { grid-template-columns: 25rem 1fr; gap: 3rem; padding: 3rem 4rem; }
  .hi-rs-t { font-size: 1.5rem; } .hi-rs-d { font-size: 1.125rem; }
}

.hi-sf { display: grid; gap: 2.5rem var(--hi-gap); }
.hi-sf-pic { aspect-ratio: 7 / 5; border-radius: var(--hi-r-img); overflow: hidden; background: transparent; }
.hi-sf-pic img, .hi-sf-pic .img-ph { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.hi-sf-t { margin: 1.25rem 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--ss-ink); }
.hi-sf-d { margin: .5rem 0 0; font-size: .9375rem; line-height: 1.55; color: var(--hi-muted); }
@media (min-width: 768px) {
  .hi-sf { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; }
  .hi-sf-t { margin-top: 1.5rem; font-size: 1.25rem; } .hi-sf-d { font-size: 1.0625rem; }
}
@media (min-width: 992px) { .hi-sf { gap: 3rem; } .hi-sf-t { font-size: 1.375rem; } .hi-sf-d { font-size: 1.1875rem; } }

.hi-dev { background: var(--hi-soft); }
.hi-dev-slider:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: .5rem; border-radius: var(--hi-r); }
.hi-dev-swiper { overflow: hidden; border-radius: var(--hi-r); }
.hi-dev-slide { height: auto; }
.hi-dev-card { display: grid; height: 100%; overflow: hidden; border-radius: var(--hi-r); background: #fff; }
.hi-dev-nav { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.hi-dev-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--ss-ink); cursor: pointer; transition: color .2s; }
.hi-dev-btn:disabled { color: var(--ss-line-strong); cursor: default; }
.hi-dev-btn:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; border-radius: 50%; }
.hi-dev-arrow { width: 1.5rem; height: 1.5rem; background-color: currentColor; -webkit-mask: url(../../../icons/ico-arrow-long.svg) center / contain no-repeat; mask: url(../../../icons/ico-arrow-long.svg) center / contain no-repeat; }
.hi-dev-prev .hi-dev-arrow { transform: scaleX(-1); }
.hi-dev-count { min-width: 3.5rem; text-align: center; font-size: .875rem; font-weight: 700; line-height: 1; color: var(--ss-ink); }
@media (min-width: 768px) { .hi-dev-nav { margin-top: 2rem; } .hi-dev-count { font-size: 1rem; } }
.hi-dev-pic { display: flex; justify-content: center; align-items: flex-end; height: 16rem; background: #fff; }
.hi-dev-pic img { display: block; width: auto; max-width: 100%; height: 100%; max-height: 24.5rem; object-fit: contain; object-position: center bottom; filter: brightness(1.065); }
.hi-dev-pic .img-ph { display: block; width: 100%; height: 100%; border: 0; }
.hi-dev-body { min-width: 0; padding: 1.5rem; }
.hi-dev-t { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: var(--ss-ink); }
.hi-dev-d { margin: .5rem 0 0; font-size: .9375rem; line-height: 1.55; color: var(--hi-muted); }
.hi-dev-hash { margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid #b2b2b2; font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--hi-blue); }
.hi-dev-tags { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: 1rem 0 0; }
.hi-dev-tags li { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: .5rem; border: 1px solid var(--hi-line); background: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.3; text-align: center; color: var(--ss-ink); }
@media (min-width: 576px) { .hi-dev-tags { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) {
  .hi-dev-pic { height: 18rem; }
  .hi-dev-body { padding: 2rem 2.5rem 2.5rem; }
  .hi-dev-t { font-size: 1.375rem; } .hi-dev-d { font-size: 1rem; }
}
@media (min-width: 992px) {
  .hi-dev-card { grid-template-columns: 22rem 1fr; min-height: 24.375rem; }
  .hi-dev-pic { height: auto; }
  .hi-dev-body { align-self: center; padding: 2rem 3rem 2rem 0; }
  .hi-dev-tags { grid-template-columns: repeat(2, 9.0625rem); }
}
@media (min-width: 1400px) {
  .hi-dev-card { grid-template-columns: 29rem 1fr; min-height: 24.5rem; }
  .hi-dev-body { position: relative; z-index: 1; }
  .hi-dev-body { padding: 2rem 4rem 2rem 0; }
  .hi-dev-t { font-size: 1.5rem; } .hi-dev-d { font-size: 1.125rem; }
  .hi-dev-hash { margin-top: 2rem; padding-top: 2rem; font-size: 1.25rem; }
  .hi-dev-tags { grid-template-columns: repeat(4, 9.0625rem); }
  .hi-dev-tags li { min-height: 3.4375rem; }
}

.hi-clinic { position: relative; padding-block: var(--hi-sec); background: #fff; }
.hi-clinic-pic { overflow: hidden; border-radius: var(--hi-r-img); background: #ddd; aspect-ratio: 621 / 650; }
.hi-clinic-pic img, .hi-clinic-pic .img-ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.hi-clinic-pic .img-ph { border: 0; min-height: 17.5rem; }
.hi-clinic-txt { min-width: 0; }
.hi-clinic-h { margin: 0; font-size: 1.625rem; font-weight: 600; line-height: 1.35; color: var(--ss-ink); }
.hi-clinic-lead { margin: 1rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--hi-muted); }
.hi-info { margin: 2rem 0 0; }
.hi-info::before { content: ""; display: block; width: 7.875rem; height: 1px; margin-bottom: 2rem; background: var(--hi-line); }
.hi-info-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem 1rem; align-items: start; }
.hi-info-row + .hi-info-row { margin-top: 1.25rem; }
.hi-info-k { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--ss-ink); text-align: left; }
.hi-info-k svg { flex: none; width: 1.125rem; height: 1.125rem; }
button.hi-info-k { cursor: pointer; }
@media (hover: hover) { button.hi-info-k:hover span { text-decoration: underline; text-underline-offset: .25em; } }
.hi-info-v { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--ss-ink); }
.hi-info-tel { display: inline-block; font-size: 1.5rem; font-weight: 400; line-height: 1.4; letter-spacing: .01em; color: var(--ss-ink); }
.hi-hours { display: grid; grid-template-columns: auto 1fr; column-gap: 1.5rem; margin: 0; }
.hi-hours dt, .hi-hours dd { margin: 0; font-weight: 400; }
.hi-hours dt { white-space: nowrap; }
.hi-hours dd span { white-space: nowrap; }
.hi-info-note { margin: .5rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--hi-muted); }
.hi-info-pk { margin: 0; }
.hi-info-row:nth-child(3) { margin-top: 1.25rem; }
.hi-info-park { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--hi-blue); }
.hi-info-park svg { flex: none; width: 1.25rem; height: 1.25rem; }
@media (min-width: 768px) {
  .hi-clinic-h { font-size: 2rem; } .hi-clinic-lead { font-size: 1.0625rem; }
  .hi-info-k { font-size: 1.125rem; } .hi-info-v { font-size: 1.0625rem; } .hi-info-tel { font-size: 1.625rem; }
}
@media (min-width: 992px) {
  .hi-clinic-h { font-size: 2.5rem; line-height: 1.3; } .hi-clinic-lead { margin-top: 1.25rem; font-size: 1.125rem; }
  .hi-info { margin-top: 2rem; } .hi-info::before { margin-bottom: 2.5rem; }
  .hi-info-row { grid-template-columns: 9rem 1fr; }
  .hi-info-row + .hi-info-row { margin-top: .75rem; }
  .hi-info-row:nth-child(3) { margin-top: 1.5rem; }
  .hi-info-k { gap: .75rem; font-size: 1.25rem; } .hi-info-k svg { width: 1.25rem; height: 1.25rem; }
  .hi-info-v { font-size: 1.1875rem; line-height: 1.55; }
  .hi-info-tel { font-size: 1.75rem; line-height: 1.4; }
  .hi-hours { column-gap: 2.5rem; font-size: 1.125rem; }
  .hi-info-note { margin-top: .5rem; font-size: 1.0625rem; }
  .hi-info-park { margin-top: 1rem; font-size: 1.1875rem; } .hi-info-park svg { width: 1.5rem; height: 1.5rem; }
}
@media (min-width: 1400px) { .hi-hours dd { white-space: nowrap; } }

.hi-map { position: relative; overflow: hidden; background: #e9e6e0; aspect-ratio: 1300 / 501; }
.hi-map a { display: block; width: 100%; height: 100%; }
.hi-map img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hi-tour { overflow: hidden; }
.hi-tour-main { position: relative; display: grid; border-radius: 1.25rem; overflow: hidden; background: #e9e6e0; }
.hi-tour-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.hi-tour-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.hi-tour-slide.is-far { display: none; }
.hi-tour-slide img, .hi-tour-slide .img-ph { display: block; width: 100%; height: auto; aspect-ratio: 1310 / 787; object-fit: cover; border: 0; border-radius: 0; }
.hi-tour-ctl { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: rgba(17,17,17,.55); color: #fff; cursor: pointer; transition: background-color .25s; }
@media (hover: hover) { .hi-tour-ctl:hover { background: rgba(17,17,17,.8); } }
.hi-tour-ctl svg { width: 1rem; height: 1rem; }
.hi-tour-ctl .hi-ico-play { display: none; }
.hi-tour-ctl[aria-pressed="true"] .hi-ico-play { display: block; }
.hi-tour-ctl[aria-pressed="true"] .hi-ico-pause { display: none; }
.hi-tour-thumbs { --hi-th: 9.5rem; --hi-thgap: 1rem; margin-top: 1rem; }
.hi-tour-thumbs .swiper { overflow: visible; clip-path: inset(0 -100vw 0 0); }
.hi-tour-thumbs .swiper-slide { width: var(--hi-th); }
.hi-tour-thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 1rem; overflow: hidden; background: #e9e6e0; cursor: pointer; }
.hi-tour-thumb img, .hi-tour-thumb .img-ph { display: block; width: 100%; height: auto; aspect-ratio: 370 / 240; border: 0; border-radius: 0; object-fit: cover; }
.hi-tour-thumb::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px #111; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.hi-tour-thumb[aria-current="true"]::after { opacity: 1; }
.hi-tour-thumb:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }
.hi-tour-thumbs .swiper-scrollbar { position: static; width: 100%; height: 3px; margin-top: 2rem; border-radius: 0; background: #e5e5e5; }
.hi-tour-thumbs .swiper-scrollbar-drag { border-radius: 0; background: #111; cursor: grab; }
@media (min-width: 576px) { .hi-tour-thumbs { --hi-th: 12rem; } }
@media (min-width: 768px) { .hi-tour-main { border-radius: 1.5rem; } .hi-tour-thumbs { --hi-th: 14rem; --hi-thgap: 1.5rem; margin-top: 1.5rem; } .hi-tour-thumbs .swiper-scrollbar { margin-top: 2.5rem; } }
@media (min-width: 992px) { .hi-tour-main { border-radius: 1.875rem; } .hi-tour-thumbs { --hi-th: 17.5rem; --hi-thgap: 2rem; margin-top: 2rem; } .hi-tour-thumb { border-radius: 1.25rem; } .hi-tour-thumbs .swiper-scrollbar { margin-top: 4rem; } .hi-tour-ctl { right: 1.5rem; bottom: 1.5rem; } }
@media (min-width: 1400px) { .hi-tour-thumbs { --hi-th: 23.125rem; } }
@media (prefers-reduced-motion: reduce) { .hi-tour-slide, .hi-tour-slide.is-active { transition: none; } }

.hi-modal .ss-modal-box { width: 30rem; padding: 3.5rem 2rem 2.5rem; text-align: left; border-radius: 1.5rem; }
.hi-modal .ss-modal-title { font-size: 1.375rem; line-height: 1.4; }
.hi-modal .hi-info { margin-top: 1.5rem; padding-top: 1.5rem; }
.hi-modal .hi-info-row { grid-template-columns: 1fr; }
.hi-modal .hi-info-tel { font-size: 1.125rem; }

.hi-view-wrap { padding-block: 2.5rem 4rem; }
.hi-view { max-width: 62.5rem; margin-inline: auto; }
.hi-view-head { padding-bottom: 1.5rem; border-bottom: 1px solid var(--ss-line-strong); }
.hi-view-title { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.35; color: var(--ss-ink); }
.hi-view-meta { display: flex; align-items: center; gap: .625rem; margin: .75rem 0 0; font-size: .875rem; line-height: 1.5; color: #909090; }
.hi-view-sep { flex: none; width: 1px; height: 1rem; background: var(--ss-line-strong); }
.hi-view-body { padding-block: 2rem 3rem; border-bottom: 1px solid var(--ss-line-strong); }
.hi-editor { font-size: 1rem; line-height: 1.75; color: var(--ss-text); word-break: keep-all; }
.hi-editor p { margin: 0; }
.hi-editor p + p, .hi-editor figure + p, .hi-editor p + figure { margin-top: 1.5rem; }
.hi-editor figure { margin: 0; }
.hi-editor img, .hi-editor .img-ph { display: block; max-width: 100%; margin-inline: auto; }
.hi-view-pn { margin: 0; border-bottom: 1px solid var(--ss-line-strong); }
.hi-view-pn li { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: center; padding: 1rem .5rem; font-size: .9375rem; line-height: 1.5; }
.hi-view-pn li + li { border-top: 1px solid var(--ss-line); }
.hi-view-pn strong { font-weight: 600; color: var(--ss-ink); }
.hi-view-pn a, .hi-view-pn span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .hi-view-pn a:hover { text-decoration: underline; text-underline-offset: .25em; } }
.hi-view-pn .is-none { color: #909090; }
.hi-view-foot { display: flex; justify-content: center; margin-top: 2rem; }
.hi-btn-list { display: inline-flex; align-items: center; justify-content: center; min-width: 6.25rem; height: 3.375rem; padding: 0 1.5rem; border: 1px solid var(--ss-ink); border-radius: 1.875rem; background: var(--ss-white); font-size: 1rem; font-weight: 600; line-height: 1; color: var(--ss-ink); transition: background-color .25s, color .25s; }
.hi-btn-list:focus-visible { background: var(--ss-ink); color: var(--ss-white); }
@media (hover: hover) { .hi-btn-list:hover { background: var(--ss-ink); color: var(--ss-white); } }
@media (min-width: 768px) {
  .hi-view-wrap { padding-block: 3.5rem 5rem; }
  .hi-view-title { font-size: 2rem; } .hi-view-meta { font-size: 1rem; } .hi-view-head { padding-bottom: 1.75rem; }
  .hi-view-body { padding-block: 2.5rem 3.5rem; } .hi-view-pn li { padding: 1.25rem 1rem; font-size: 1rem; }
}
@media (min-width: 992px) { .hi-view-wrap { padding-block: 5rem 7.5rem; } .hi-view-title { font-size: 2.25rem; } .hi-view-foot { margin-top: 3rem; } }

.ss-attach { margin-top: 1.5rem; }
.ss-attach[hidden] { display: none; }
.ss-attach-t { margin: 0 0 .75rem; font-size: .9375rem; font-weight: 600; color: var(--ss-ink); }
.ss-attach-list { margin: 0; padding: 0; list-style: none; }
.ss-attach-list li + li { margin-top: .5rem; }
.ss-attach-a { font-size: .9375rem; color: var(--ss-text); text-decoration: underline; text-underline-offset: .2em; word-break: break-all; }
.ss-attach-a:hover { color: var(--ss-ink); }
.ss-attach-size { margin-left: .5rem; font-size: .875rem; color: var(--ss-weak); }
.hi-empty { margin: 0; padding: 5rem 0; text-align: center; font-size: 1rem; color: var(--ss-weak); }
.hi-empty[hidden] { display: none; }

.hi-tm { --tm-w: 11rem; --tm-r: 1.25rem; padding-block: var(--hi-sec); }
.hi-tm-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
.hi-tm-t { margin: 0; font-size: var(--hi-h2); font-weight: 600; line-height: 1.24; letter-spacing: -.02em; color: #000; }
.hi-tm-s { margin: 1rem 0 0; font-size: var(--hi-sub); font-weight: 400; line-height: 1.5; color: #5e5e5e; }
.hi-tm-swiper { overflow: hidden; }
.hi-tm-item { width: var(--tm-w); }
.hi-tm-pic { border-radius: var(--tm-r); overflow: hidden; background: #e0e0e0; }
.hi-tm-pic img, .hi-tm-pic .img-ph { display: block; width: 100%; height: auto; aspect-ratio: 283 / 343; object-fit: cover; border: 0; border-radius: 0; }
.hi-tm-pic .img-ph { background: #e0e0e0; }
.hi-tm-pic .img-ph::after { background: rgba(255, 255, 255, .7); font-size: .6875rem; max-width: 90%; text-align: center; white-space: normal; }
.hi-tm-cap { display: flex; align-items: baseline; gap: .4375rem; margin: 1rem 0 0; padding-left: .6875rem; line-height: 1.2; }
.hi-tm-no { font-size: 1.0625rem; font-weight: 600; color: #5f7fa6; }
.hi-tm-n { font-size: 1.125rem; font-weight: 500; letter-spacing: -.02em; color: #000; }
.hi-tm .hi-tm-bar.swiper-scrollbar { position: static; width: 100%; margin-top: 1rem; --swiper-scrollbar-size: .375rem; --swiper-scrollbar-bg-color: #e5e5e5; --swiper-scrollbar-drag-bg-color: #000; --swiper-scrollbar-border-radius: 0; --swiper-scrollbar-sides-offset: 0; --swiper-scrollbar-bottom: 0; }
.hi-tm .hi-tm-bar .swiper-scrollbar-drag { cursor: grab; }
.hi-tm .hi-tm-bar.swiper-scrollbar-lock { display: none; }
@media (min-width: 768px) { .hi-tm { --tm-w: 14rem; --tm-r: 1.5rem; } .hi-tm-grid { row-gap: 2rem; } }
@media (min-width: 992px) {
  .hi-tm { --tm-w: 17.6875rem; --tm-r: 1.875rem; }
  .hi-tm-grid { grid-template-columns: clamp(18rem, 41.2%, 33.4375rem) minmax(0, 1fr); align-items: center; row-gap: 4.875rem; }
  .hi-tm-bar { grid-column: 1 / -1; }
  .hi-tm .hi-tm-bar.swiper-scrollbar { margin-top: 0; }
  .hi-tm-head { padding-top: 1.1875rem; }
  .hi-tm-t { font-size: 2.625rem; }
  .hi-tm-s { margin-top: 2.1875rem; font-size: 1.1875rem; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) { .hi-rs-d { font-size: .75rem; } }

/* 1019 업체 답변: 진료안내 시안 개편 */
.hi-clinic-grid { display: grid; gap: 2.5rem; max-width: 78.125rem; margin-inline: auto; }
.hi-clinic-btns { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 2rem; }
.hi-btn-o { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .375rem 1.125rem; border: 1px solid var(--ss-ink); background: var(--ss-white); font-size: 1rem; font-weight: 400; line-height: 1.4; color: var(--ss-ink); transition: background-color .2s, color .2s; }
.hi-btn-o:focus-visible { background: var(--ss-ink); color: var(--ss-white); }
@media (hover: hover) { .hi-btn-o:hover { background: var(--ss-ink); color: var(--ss-white); } }
.hi-hours dt { color: var(--hi-muted); }
@media (min-width: 992px) {
  .hi-clinic-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 40.5rem); gap: 3rem; align-items: center; }
  .hi-clinic-btns { margin-top: 2.5rem; }
}

.hi-way { margin-top: 4rem; }
.hi-wayh { margin: 0 0 1.5rem; font-size: 1.375rem; font-weight: 600; line-height: 1.4; color: var(--ss-ink); }
.hi-way-grid { display: grid; gap: 1rem; }
.hi-way-grid + .hi-wayh { margin-top: 3rem; }
.hi-way-card { min-width: 0; padding: 1.5rem; border-radius: var(--hi-r-img); background: #f6f6f6; }
.hi-way-t { display: flex; align-items: center; gap: .625rem; margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: var(--ss-ink); }
.hi-way-t img { flex: none; display: block; width: auto; height: 1.5rem; }
.hi-way-b { margin-top: 1.25rem; }
.hi-way-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .625rem; }
.hi-way-row + .hi-way-row { margin-top: .5rem; }
.hi-way-row + .hi-way-note, .hi-way-note + .hi-way-row { margin-top: .75rem; }
.hi-way-note { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--hi-muted); }
.hi-tag { display: inline-flex; align-items: center; justify-content: center; min-height: 1.5rem; padding: .125rem .625rem; border-radius: .25rem; background: #666; font-size: .8125rem; font-weight: 700; line-height: 1.3; color: #fff; }
.hi-tag-l3 { background: #f77737; } .hi-tag-sbd { background: #b4273b; } .hi-tag-l7 { background: #737e00; }
.hi-tag-gan { background: #0c43b7; } .hi-tag-ji { background: #4fa130; } .hi-tag-red { background: #d91019; }
.hi-tag-t { font-size: .875rem; line-height: 1.5; color: var(--hi-muted); }
.hi-mapbtns { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1rem; }
.hi-mapbtn { display: inline-flex; align-items: stretch; height: 2rem; overflow: hidden; border-radius: 62.4375rem; color: #fff; }
.hi-mapbtn-i { display: grid; place-items: center; width: 2.25rem; background: #fff; }
.hi-mapbtn-i img { display: block; width: auto; height: 1.125rem; }
.hi-mapbtn b { display: flex; align-items: center; padding: 0 1rem 0 .625rem; font-size: .875rem; font-weight: 700; line-height: 1; }
.hi-mapbtn-naver b { background: #00db3d; }
.hi-mapbtn-kakao .hi-mapbtn-i { background: #fae100; } .hi-mapbtn-kakao b { background: #007dff; }
.hi-mapbtn-google b { background: #da2f2b; }
.hi-park-lead { margin: 0; font-size: .9375rem; font-weight: 700; line-height: 1.6; color: var(--hi-muted); }
.hi-park-list { margin: .5rem 0 0; padding: 0; list-style: none; font-size: .875rem; line-height: 1.7; color: var(--hi-muted); }
.hi-park-list li { position: relative; padding-left: .75rem; }
.hi-park-list li::before { content: "·"; position: absolute; left: 0; }
.hi-park-lead + .hi-park-list { margin-top: .75rem; }
@media (min-width: 768px) {
  .hi-way { margin-top: 5rem; }
  .hi-wayh { margin-bottom: 1.75rem; font-size: 1.625rem; }
  .hi-way-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .hi-way-grid + .hi-wayh { margin-top: 4.5rem; }
  .hi-way-card { padding: 2rem; } .hi-way-t { font-size: 1.375rem; } .hi-way-t img { height: 1.75rem; }
  .hi-tag { min-height: 1.75rem; padding: .125rem .75rem; font-size: .9375rem; } .hi-tag-t, .hi-way-note { font-size: .9375rem; }
  .hi-park-lead { font-size: 1rem; } .hi-park-list { font-size: .9375rem; }
}
@media (min-width: 992px) { .hi-way { margin-top: 7.5rem; } .hi-wayh { font-size: 1.75rem; } }

.hi-cta { position: relative; overflow: hidden; background: #f3f2f6; }
.hi-cta-bg img { display: block; width: 100%; height: auto; }
.hi-cta-box { padding-block: 2.5rem 3.5rem; }
.hi-cta-t { margin: 0; font-size: 1.625rem; font-weight: 500; line-height: 1.4; color: var(--ss-ink); }
.hi-cta-t::after { content: ""; display: block; width: 7.875rem; height: 1px; margin-top: 1.5rem; background: var(--hi-line); }
.hi-cta-d { margin: 0; padding-top: 1.5rem; font-size: 1rem; line-height: 1.7; color: var(--hi-muted); }
.hi-cta-btns { display: grid; gap: .875rem; margin-top: 2rem; max-width: 22rem; }
.hi-cta-b { display: flex; align-items: center; justify-content: center; height: 3.75rem; border: 1px solid #6a5e50; background: transparent; font-size: 1.25rem; line-height: 1; color: #6a5e50; transition: background-color .2s, color .2s; }
.hi-cta-b-fill { background: #6a5e50; color: #fff; }
.hi-cta-b:focus-visible { background: #6a5e50; color: #fff; }
@media (hover: hover) { .hi-cta-b:hover { background: #6a5e50; color: #fff; } .hi-cta-b-fill:hover { background: #594e42; border-color: #594e42; } }
@media (min-width: 992px) {
  .hi-cta { display: flex; align-items: center; min-height: 40rem; }
  .hi-cta-bg { position: absolute; inset: 0; }
  .hi-cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
  .hi-cta > .container { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
  .hi-cta-box { width: 29rem; padding: 4rem 1.5rem 4rem 0; }
  .hi-cta-t { font-size: 2.125rem; } .hi-cta-d { font-size: 1.125rem; }
  .hi-cta-btns { margin-top: 2.5rem; } .hi-cta-b { height: 4.375rem; font-size: 1.5rem; }
}
@media (min-width: 1400px) { .hi-cta { min-height: 46.875rem; } .hi-cta-t { font-size: 2.5rem; } .hi-cta-d { font-size: 1.1875rem; } .hi-cta-btns { max-width: 21.875rem; } }
@media (max-width: 575.98px) { .hi-info-row { grid-template-columns: 5.5rem 1fr; gap: .5rem .5rem; } .hi-hours { column-gap: .625rem; font-size: .9375rem; } .hi-info-tel { font-size: 1.375rem; } }

/* 1019 업체 답변: 진료안내 히어로 시네마틱 줌아웃(첫 진입 때 확대 상태에서 원래 구도로) */
@keyframes hi-zoomout { from { transform: scale(1.4); } to { transform: scale(1); } }
@keyframes hi-hero-in { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hi-info-page .hi-hero-bg img { transform-origin: 62% 50%; animation: hi-zoomout 2.8s cubic-bezier(.2, .6, .2, 1) .1s both; will-change: transform; }
  .hi-info-page .hi-hero .container { animation: hi-hero-in 1.4s cubic-bezier(.2, .6, .2, 1) 1.2s both; }
}
