/* ==========================================================================
   동래성모안과 — Reset / Base / Layout / Components
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd,
figure, figcaption, blockquote, fieldset, legend { margin: 0; padding: 0; }

ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }

a { color: inherit; text-decoration: none; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Base ----------------------------------------------------------------- */
body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
  background: var(--color-bg);
  word-break: keep-all;          /* 한글 단어 단위 줄바꿈 */
  overflow-wrap: break-word;
}

:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  padding: 12px 20px; background: var(--color-primary-deep); color: #fff;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout helpers ------------------------------------------------------- */
.container      { width: 100%; max-width: var(--container-base); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
.container-text { width: 100%; max-width: var(--container-text); margin: 0 auto; padding: 0 var(--gutter); }

.section    { padding: var(--section-pad) 0; }
.section-lg { padding: var(--section-pad-lg) 0; }
.section-alt   { background: var(--color-bg-alt); }
.section-light { background: var(--color-primary-light); }
.section-ink   { background: var(--color-ink); color: var(--color-text-invert); }

/* --- Section heading ------------------------------------------------------ */
.sec-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: var(--sp-2);
}
.section-ink .sec-label { color: var(--color-primary); }

.sec-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.sec-desc {
  margin-top: var(--sp-3);
  color: var(--color-text-sub);
  line-height: var(--lh-loose);
}
.section-ink .sec-desc { color: rgba(255, 255, 255, 0.72); }

.sec-head        { margin-bottom: var(--sp-6); }
.sec-head-center { text-align: center; }
.sec-head-center .sec-desc { max-width: 760px; margin-left: auto; margin-right: auto; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;                 /* 중장년 터치 영역 확보 */
  padding: 13px 26px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.btn-primary   { background: var(--color-primary-deep); color: #fff; }
.btn-primary:hover   { background: var(--color-primary-darker); }
.btn-secondary { border: 1px solid var(--color-primary-deep); color: var(--color-primary-deep); }
.btn-secondary:hover { background: var(--color-primary-deep); color: #fff; }
.btn-ghost     { border: 1px solid var(--color-line-mid); color: var(--color-text); }
.btn-ghost:hover     { border-color: var(--color-text); }
.btn-on-dark   { background: #fff; color: var(--color-primary-deep); }
.btn-on-dark:hover   { background: var(--color-primary-light); }
.btn-outline-light { border: 1px solid rgba(255,255,255,0.5); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,0.14); border-color: #fff; }
.btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.btn-text {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-primary-deep);
}
.btn-text .arrow { transition: transform var(--transition); }
.btn-text:hover .arrow { transform: translateX(5px); }

/* --- Card ----------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-base);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.card:hover { box-shadow: var(--shadow-card); border-color: transparent; }
.card-body  { padding: var(--sp-4) var(--sp-3); }

.ratio { position: relative; width: 100%; background: var(--color-bg-alt); overflow: hidden; }
.ratio::before { content: ""; display: block; }
.ratio-4x3::before  { padding-top: 75%; }
.ratio-3x2::before  { padding-top: 66.666%; }
.ratio-16x9::before { padding-top: 56.25%; }
.ratio-1x1::before  { padding-top: 100%; }
.ratio-3x4::before  { padding-top: 133.333%; }
.ratio > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.card:hover .ratio > img { transform: scale(1.04); }

/* 이미지가 아직 없는 자리 — 무엇을 넣어야 하는지 화면에 표시 */
.ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  font-size: var(--fs-xs); font-weight: 600; color: var(--color-primary-muted);
  background: repeating-linear-gradient(45deg,
    var(--color-primary-light), var(--color-primary-light) 12px,
    #fff 12px, #fff 24px);
  border: 1px dashed var(--color-primary);
}

/* --- 학회 안내 티커 (헤더 위 고정) ------------------------------------------
   원장 자격을 첫 화면에서 알리는 바. 문구는 사실만 적어야 합니다.      */
.ticker {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  height: var(--ticker-h);
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: content-box;
}
.ticker-item {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 var(--gutter);
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.3;
  opacity: 0; transform: translateY(100%);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.ticker-item.is-active { opacity: 1; transform: none; }
.ticker-item.is-out    { opacity: 0; transform: translateY(-100%); }

.ticker-item.is-light { background: var(--color-primary-light); color: var(--color-text); }
.ticker-item.is-dark  { background: var(--color-ink);           color: #fff; }

.ticker-org {
  display: inline-flex; align-items: center; gap: 8px;
  padding-right: 14px; border-right: 1px solid currentColor;
  font-weight: 700; letter-spacing: var(--ls-tight); white-space: nowrap;
  opacity: 0.85;
}
.ticker-item strong { font-weight: 700; color: var(--color-primary-deep); }
.ticker-item.is-dark strong { color: var(--color-primary); }
.ticker-txt { text-align: center; }

@media screen and (max-width: 768px) {
  .ticker-item { font-size: 12px; gap: 9px; }
  .ticker-org { display: none; }          /* 좁은 화면에서는 문구만 */
}

/* --- Header --------------------------------------------------------------- */
.header {
  position: fixed; top: var(--ticker-h); left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--color-line);
  transition: background-color var(--transition), border-color var(--transition);
}
.header-inner {
  display: flex; align-items: center; gap: var(--sp-5);
  height: 100%;
  max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter);
}
.logo {
  display: flex; align-items: center; gap: 9px;
  font-size: 19px; font-weight: 700; letter-spacing: var(--ls-tight);
  flex-shrink: 0;
}
.logo-img { display: block; height: var(--logo-h); width: auto; }
.logo-img-white { display: none; }
/* 어두운 히로 위에서는 글자를 흰색으로 바꾼 로고를 씁니다 */
.header-transparent:not(.is-scrolled):not(.nav-open) .logo-img { display: none; }
.header-transparent:not(.is-scrolled):not(.nav-open) .logo-img-white { display: block; }

.gnb { display: flex; gap: 2px; margin-left: auto; }
.gnb > li { position: relative; }
.gnb > li > a {
  display: flex; align-items: center;
  height: var(--header-h); padding: 0 15px;
  font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap;
  transition: color var(--transition);
}
.gnb > li > a:hover,
.gnb > li > a[aria-current="page"],
.gnb > li.is-active > a { color: var(--color-primary-deep); }

/* 대메뉴 하단 활성 표시 */
.gnb > li > a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 0;
  height: 2px; background: var(--color-primary);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--transition);
}
.gnb > li:hover > a::after,
.gnb > li.is-active > a::after { transform: scaleX(1); }

/* --- 서브메뉴 (데스크탑 드롭다운) ----------------------------------------- */
.gnb .sub {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 190px; padding: 10px;
  background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius-base); box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.gnb > li:hover .sub,
.gnb > li:focus-within .sub {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.gnb .sub a {
  display: flex; align-items: center;
  min-height: 44px; padding: 0 14px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  color: var(--color-text);
  transition: background-color var(--transition), color var(--transition);
}
.gnb .sub a:hover,
.gnb .sub a[aria-current="page"] {
  background: var(--color-primary-light); color: var(--color-primary-deep); font-weight: 600;
}
.sub-toggle { display: none; }

.header-cta { display: flex; gap: 8px; flex-shrink: 0; }
.header-cta .btn { min-height: 42px; padding: 9px 20px; font-size: var(--fs-xs); }

.nav-toggle { display: none; width: 44px; height: 44px; margin-left: auto; }
.nav-toggle span {
  display: block; width: 22px; height: 2px; margin: 5px auto;
  background: var(--color-text); transition: transform var(--transition), opacity var(--transition);
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 밝은 히로 위에 얹히는 투명 헤더 (메인 전용).
   히로 배경이 밝으므로 글자색은 기본(진한색)을 그대로 씁니다.
   스크롤을 내리면 흰 배경으로 바뀝니다.                                   */
.header-over:not(.is-scrolled):not(.nav-open) {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
}

/* 어두운 배경 위에 얹히는 투명 헤더 (흰 글자) */
.header-transparent:not(.is-scrolled):not(.nav-open) {
  background: transparent; border-color: transparent;
}
.header-transparent:not(.is-scrolled):not(.nav-open) .logo,
.header-transparent:not(.is-scrolled):not(.nav-open) .gnb > li > a { color: #fff; }
.header-transparent:not(.is-scrolled):not(.nav-open) .nav-toggle span { background: #fff; }
/* 어두운 배경 위에서는 진한 버튼이 묻히므로 흰 버튼으로 뒤집습니다 */
.header-transparent:not(.is-scrolled):not(.nav-open) .header-cta .btn-primary {
  background: var(--color-text-invert); color: var(--color-primary-deep);
}
.header-transparent:not(.is-scrolled):not(.nav-open) .header-cta .btn-primary:hover {
  background: var(--color-primary-light);
}

/* 대메뉴가 9개라 1280px 이하에서는 글자·간격·로고를 조금 줄입니다
   (1025px 에서 진료예약 버튼까지 한 줄에 들어가야 합니다) */
@media screen and (max-width: 1280px) and (min-width: 1025px) {
  .gnb > li > a { padding: 0 7px; font-size: var(--fs-xs); }
  .gnb > li > a::after { left: 7px; right: 7px; }
  .header-inner { gap: var(--sp-3); }
}

@media screen and (max-width: 1024px) {
  .gnb {
    position: fixed; top: calc(var(--header-h) + var(--ticker-h)); left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: var(--sp-2) var(--gutter) var(--sp-6);
    background: #fff; border-bottom: 1px solid var(--color-line);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
    max-height: calc(100vh - var(--header-h) - var(--ticker-h)); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-open .gnb { transform: none; opacity: 1; pointer-events: auto; }

  .gnb > li { border-bottom: 1px solid var(--color-line); }
  .gnb > li > a {
    height: 58px; padding: 0; font-size: var(--fs-body);
    color: var(--color-text) !important;
  }
  .gnb > li > a::after { display: none; }

  /* 모바일에서는 드롭다운 대신 아코디언 */
  .gnb > li:has(.sub) > a { pointer-events: none; }
  .sub-toggle {
    display: grid; place-items: center;
    position: absolute; top: 0; right: 0; width: 58px; height: 58px;
    font-size: 20px; color: var(--color-text-sub);
    transition: transform var(--transition);
  }
  .sub-toggle[aria-expanded="true"] { transform: rotate(45deg); }

  .gnb .sub {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; padding: 0 0 var(--sp-2);
    border: 0; border-radius: 0; box-shadow: none;
    display: none;
  }
  .sub-toggle[aria-expanded="true"] + .sub { display: block; }
  .gnb .sub a { min-height: 48px; padding: 0 14px; color: var(--color-text-sub); }

  .header-cta { display: none; }
  .nav-toggle { display: block; }
}

/* --- Quick side menu ------------------------------------------------------
   네이버예약 · 블로그 · TOP 세 칸. 아이콘은 인라인 SVG (currentColor = 진한 민트). */
.quick {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 90;
  display: flex; flex-direction: column;
  width: var(--quick-w); padding: 6px;
  background: linear-gradient(180deg, var(--color-bg), var(--color-primary-light));
  border: 1px solid var(--color-quick-line);
  border-radius: var(--radius-quick); box-shadow: var(--shadow-quick);
}
.quick a, .quick button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 92px; padding: 10px 2px;
  font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; letter-spacing: -0.02em;
  color: var(--color-text);
  border-radius: calc(var(--radius-quick) - 8px);
  transition: background-color var(--transition), color var(--transition);
}
/* 칸 사이 가는 선 — 양 끝을 비워 알약 안에 떠 있게 */
.quick a + a::before, .quick a + button::before {
  content: ""; position: absolute; top: 0; left: 10px; right: 10px;
  border-top: 1px solid var(--color-quick-line);
}
.quick-ico {
  width: 40px; height: 40px; color: var(--color-primary-deep);
  transition: transform var(--transition) var(--ease);
}
.quick-ico .q-fill { fill: var(--color-primary); }
.quick-ico .q-soft { fill: var(--color-primary); opacity: 0.35; }
.quick-ico .q-line { stroke: var(--color-primary); opacity: 0.75; }
.quick-ico .q-naver { fill: var(--color-naver); stroke: var(--color-bg); }
.quick-ico .q-mark { stroke: var(--color-bg); }
.quick a:hover, .quick button:hover { background: var(--color-primary-tint); color: var(--color-primary-deep); }
.quick a:hover .quick-ico, .quick button:hover .quick-ico { transform: translateY(-3px); }
.quick .quick-top { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.06em; }

@media screen and (max-width: 768px) {
  .quick {
    top: auto; bottom: 0; left: 0; right: 0; transform: none;
    width: auto; flex-direction: row; padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-radius: 0; border: 0; border-top: 1px solid var(--color-quick-line);
    box-shadow: var(--shadow-quick-bar);
  }
  .quick a, .quick button { flex: 1; flex-direction: row; gap: 8px; min-height: 56px; border-radius: 0; }
  .quick a + a::before, .quick a + button::before {
    top: 12px; bottom: 12px; left: 0; right: auto; border-top: 0;
    border-left: 1px solid var(--color-quick-line);
  }
  .quick-ico { width: 26px; height: 26px; }
  body { padding-bottom: 56px; }
}

/* --- Common CTA band ------------------------------------------------------ */
.cta-band {
  background: var(--color-ink); color: #fff;
  padding: var(--sp-7) 0; text-align: center;
}
.cta-band h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--ls-tight); }
.cta-band p  { margin-top: var(--sp-2); color: rgba(255,255,255,0.72); }
.cta-band .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); }

/* --- Footer --------------------------------------------------------------- */
.footer {
  background: var(--color-bg-alt);
  padding: var(--sp-5) 0 var(--sp-4);
  font-size: var(--fs-xs); color: var(--color-text-sub);
}
.footer-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-line-mid);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-left: auto; }
.footer-links a { font-weight: 600; color: var(--color-text); }
.footer-links a:hover { color: var(--color-primary-deep); }
.footer-links .is-strong { color: var(--color-primary-deep); }
/* 아래 한 줄: 왼쪽 사업자 정보 / 오른쪽 진료시간 */
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--sp-4) var(--sp-6);
}
.footer-info { flex: 1 1 320px; min-width: 0; }
.footer-info p { line-height: var(--lh-loose); }

/* 4줄로 세우면 푸터가 길어지므로 2열 × 2줄로 접어 둡니다.
   dl 의 4칸 = [요일][시간][요일][시간] 이라 한 줄에 두 쌍이 들어갑니다. */
.footer-hours { flex: 0 0 auto; margin-left: auto; text-align: right; }
.fh-title {
  font-size: var(--fs-sm); font-weight: 700; color: var(--color-text);
  letter-spacing: var(--ls-tight); margin-bottom: 6px;
}
.footer-hours dl {
  display: grid; grid-template-columns: repeat(4, max-content);
  column-gap: 10px; row-gap: 4px;
  justify-content: end;
}
.footer-hours dt { font-weight: 600; color: var(--color-text); text-align: right; }
.footer-hours dd { color: var(--color-text-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.footer-hours dd:nth-of-type(odd) { padding-right: var(--sp-3); }  /* 두 쌍 사이 간격 */
.footer-hours .is-off { color: var(--color-alert); }
.fh-note { margin-top: 6px; color: var(--color-text-weak); }

@media screen and (max-width: 860px) {
  /* 좁아지면 4칸이 넘치므로 다시 2칸(4줄)으로 되돌립니다 */
  .footer-hours dl { grid-template-columns: repeat(2, max-content); }
  .footer-hours dd:nth-of-type(odd) { padding-right: 0; }
}
@media screen and (max-width: 560px) {
  /* 좁은 화면에서는 오른쪽 정렬이 어색하므로 왼쪽으로 붙입니다 */
  .footer-hours { margin-left: 0; text-align: left; }
  .footer-hours dl { justify-content: start; }
  .footer-hours dt { text-align: left; }
}

.footer-copy { margin-top: var(--sp-3); color: var(--color-text-weak); }

/* --- Scroll reveal --------------------------------------------------------
   기본값은 "보임" 입니다. JS가 살아있을 때만(<html class="js">) 숨겼다가
   등장시킵니다. 스크립트가 실패해도 본문이 사라지지 않게 하기 위함입니다. */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   여러 페이지에서 함께 쓰는 블록
   (메인 · 병원소개 · 의료진 · 둘러보기 등에서 공용)
   ========================================================================== */

/* --- 실적 숫자 (다크 섹션) ------------------------------------------------ */
.numbers { text-align: center; }
.numbers-label { font-size: var(--fs-sm); color: rgba(255,255,255,0.6); }
.numbers-main {
  margin-top: var(--sp-2);
  font-size: clamp(44px, 7vw, 92px); font-weight: 800;
  letter-spacing: var(--ls-tight); line-height: 1.1;
}
.numbers-main .unit { font-size: 0.42em; font-weight: 600; margin-left: 0.2em; }
.numbers-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
  max-width: 880px; margin: var(--sp-6) auto 0;
}
.numbers-list li {
  padding: var(--sp-4) var(--sp-2);
  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-base);
}
.numbers-list .n { display: block; font-size: var(--fs-h3); font-weight: 700; }
.numbers-list .t { display: block; margin-top: 6px; font-size: var(--fs-xs); color: rgba(255,255,255,0.62); }

@media screen and (max-width: 768px) {
  .numbers-list { grid-template-columns: 1fr; }
}


/* --- 층별 공간 (4F/5F) ---------------------------------------------------- */
.floor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.floor-item figure { border-radius: var(--radius-base); overflow: hidden; }
.floor-item h3 { margin-top: var(--sp-3); font-size: var(--fs-h3); font-weight: 700; }
.floor-item h3 .fl {
  display: inline-block; margin-right: 10px; padding: 3px 12px;
  font-size: var(--fs-xs); font-weight: 700; vertical-align: middle;
  color: var(--color-primary-deep); background: var(--color-primary-light);
  border-radius: var(--radius-pill);
}
.floor-item p { margin-top: 8px; color: var(--color-text-sub); font-size: var(--fs-sm); }

@media screen and (max-width: 768px) { .floor-grid { grid-template-columns: 1fr; } }


/* --- 진료시간 · 오시는 길 ------------------------------------------------- */
.visit-grid { display: grid; grid-template-columns: 380px 1fr; gap: var(--sp-6); align-items: start; }
.hours { width: 100%; }
.hours th, .hours td { padding: 15px 4px; border-bottom: 1px solid var(--color-line); text-align: left; }
.hours th { font-weight: 600; width: 40%; }
.hours td { color: var(--color-text-sub); }
.hours tr.is-off td, .hours tr.is-off th { color: var(--color-alert); }
.hours-note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--color-text-weak); line-height: var(--lh-loose); }

.visit-map { border-radius: var(--radius-base); overflow: hidden; background: var(--color-bg-alt); }
.visit-addr { margin-top: var(--sp-3); font-weight: 600; }
.visit-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); }
.visit-ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-top: var(--sp-4); }
.visit-ways li {
  padding: 14px 16px; font-size: var(--fs-sm);
  background: var(--color-bg-soft); border-radius: var(--radius-sm);
}
.visit-ways strong { display: block; margin-bottom: 4px; font-size: var(--fs-xs); color: var(--color-primary-deep); }

@media screen and (max-width: 1024px) { .visit-grid { grid-template-columns: 1fr; } }
@media screen and (max-width: 768px)  { .visit-ways { grid-template-columns: 1fr; } }

/* TUNE:VISIT */
:root {
  --visit-pillar-w:  404px;
  --visit-pillar-x:  -88px;
  --visit-pillar-y:  100px;
}
/* /TUNE:VISIT */

/* ==========================================================================
   오시는 길 — 노선도형 (메인 하단 · 오시는 길 페이지 공용)
   ========================================================================== */
:root {
  /* 부산 도시철도 노선색 */
  --subway-1: #F06A00;
  --subway-2: #81BF48;
  --subway-3: #BB8C00;
  --subway-dh: #0054A6;   /* 동해선 */
  --subway-gh: #8652A1;   /* 부산김해경전철 */
}

.visit2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }

.visit2-title { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--ls-tight); }
.visit2-addr  { margin-top: var(--sp-3); font-size: var(--fs-lg); }
.visit2-addr b { font-weight: 700; border-bottom: 2px solid var(--color-primary); padding-bottom: 1px; }
.visit2-note  { margin-top: 10px; font-size: var(--fs-sm); color: var(--color-text-sub); }

.visit2-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
.vbtn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 46px; padding: 0 20px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 700;
  transition: filter var(--transition);
}
.vbtn:hover { filter: brightness(0.94); }
.vbtn .ic { width: 17px; height: 17px; display: grid; place-items: center; font-size: 11px; font-weight: 800; border-radius: 3px; }
.vbtn.is-naver { background: #03C75A; color: #fff; }
.vbtn.is-naver .ic { background: #fff; color: #03C75A; }
.vbtn.is-kakao { background: #FEE500; color: #1A1A1A; }
.vbtn.is-kakao .ic { background: #1A1A1A; color: #FEE500; }
.vbtn.is-tel   { background: var(--color-ink); color: #fff; }

/* --- 노선도 --------------------------------------------------------------- */
.route { margin-top: var(--sp-6); }
.route-head { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-tight); }
.route-head em { font-style: normal; color: var(--color-primary-deep); }
.route-sub  { margin-top: 8px; font-size: var(--fs-sm); color: var(--color-text-sub); }

.route-list { margin-top: var(--sp-4); }
.route-list > li {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 0;
}
.route-list > li + li { border-top: 1px dashed var(--color-line); }

.stop {
  flex-shrink: 0;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font-size: 12px; font-weight: 700; line-height: 1.15;
  background: #fff; border: 3px solid var(--color-line-mid);
  word-break: keep-all;
}
.stop.s1  { border-color: var(--subway-1);  color: var(--subway-1); }
.stop.s2  { border-color: var(--subway-2);  color: var(--subway-2); }
.stop.s3  { border-color: var(--subway-3);  color: var(--subway-3); }
.stop.sdh { border-color: var(--subway-dh); color: var(--subway-dh); }
.stop.sgh { border-color: var(--subway-gh); color: var(--subway-gh); }
.stop.is-goal {
  background: var(--color-primary-deep); border-color: var(--color-primary-deep); color: #fff;
}

/* 노선 구간 — 점선 막대 + 끝에 화살촉 */
.seg { flex: 1 1 0; min-width: 26px; height: 9px; border-radius: 5px; position: relative; }
.seg::before {
  content: ""; position: absolute; inset: 0; border-radius: 5px;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 1.6px, transparent 1.7px);
  background-size: 11px 9px; background-position: center;
}
.seg.l1  { background: var(--subway-1); }
.seg.l2  { background: var(--subway-2); }
.seg.l3  { background: var(--subway-3); }
.seg.ldh { background: var(--subway-dh); }
.seg.lgh { background: var(--subway-gh); }
.seg.is-last::after {
  content: ""; position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
  border-left: 11px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.seg.l1.is-last  { color: var(--subway-1); }
.seg.l2.is-last  { color: var(--subway-2); }
.seg.ldh.is-last { color: var(--subway-dh); }
.seg.lgh.is-last { color: var(--subway-gh); }

.dur {
  flex-shrink: 0; margin-left: 6px;
  min-width: 86px; padding: 8px 12px; text-align: center;
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--color-bg-alt); border-radius: var(--radius-sm);
}
.route-note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--color-text-weak); line-height: var(--lh-loose); }

/* --- 지도 / 사진 ---------------------------------------------------------- */
.visit2-side { display: grid; gap: var(--sp-3); position: sticky; top: calc(var(--header-h) + var(--ticker-h) + 20px); }
.visit2-map { border-radius: var(--radius-base); overflow: hidden; background: var(--color-bg-alt); }
.visit2-ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.visit2-ways li {
  padding: 14px 16px; font-size: var(--fs-sm);
  background: var(--color-bg-soft); border-radius: var(--radius-sm);
}
.visit2-ways strong { display: block; margin-bottom: 4px; font-size: var(--fs-xs); color: var(--color-primary-deep); }

@media screen and (max-width: 1024px) {
  .visit2 { grid-template-columns: 1fr; gap: var(--sp-5); }
  .visit2-side { position: static; }
}
@media screen and (max-width: 560px) {
  .stop { width: 50px; height: 50px; font-size: 11px; border-width: 2px; }
  .dur { min-width: 68px; padding: 7px 8px; }
  .route-list > li { gap: 5px; }
  .visit2-ways { grid-template-columns: 1fr; }
}

/* ==========================================================================
   오시는 길 — 노선도형 (메인 하단 · 오시는 길 페이지 공용)
   ========================================================================== */
:root {
  /* 부산 도시철도 노선색 */
  --subway-1: #F06A00;
  --subway-2: #81BF48;
  --subway-3: #BB8C00;
  --subway-dh: #0054A6;   /* 동해선 */
  --subway-gh: #8652A1;   /* 부산김해경전철 */
}

.visit2 {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.46fr) minmax(0, 1.05fr);
  gap: var(--sp-5); align-items: start;
}
.visit2-info { align-self: start; }

/* 지하철 출구 기둥 (배경 투명 PNG)
   크기·위치는 위 :root 의 --visit-pillar-* 로 조절합니다.
   ?tune=1 패널에서 실시간으로 바꾸고 저장할 수 있습니다. */
.visit2-pillar { align-self: end; overflow: visible; }
.visit2-pillar img {
  width: var(--visit-pillar-w);
  max-width: none; height: auto;
  transform: translate(var(--visit-pillar-x), var(--visit-pillar-y));
}

.visit2-title { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--ls-tight); }
.visit2-addr  { margin-top: var(--sp-3); font-size: var(--fs-lg); }
.visit2-addr b { font-weight: 700; border-bottom: 2px solid var(--color-primary); padding-bottom: 1px; }
.visit2-note  { margin-top: 10px; font-size: var(--fs-sm); color: var(--color-text-sub); }

.visit2-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
.vbtn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 46px; padding: 0 20px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 700;
  transition: filter var(--transition);
}
.vbtn:hover { filter: brightness(0.94); }
.vbtn .ic { width: 17px; height: 17px; display: grid; place-items: center; font-size: 11px; font-weight: 800; border-radius: 3px; }
.vbtn.is-naver { background: #03C75A; color: #fff; }
.vbtn.is-naver .ic { background: #fff; color: #03C75A; }
.vbtn.is-kakao { background: #FEE500; color: #1A1A1A; }
.vbtn.is-kakao .ic { background: #1A1A1A; color: #FEE500; }
.vbtn.is-tel   { background: var(--color-ink); color: #fff; }

/* --- 노선도 --------------------------------------------------------------- */
.route { margin-top: var(--sp-6); }
.route-head { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-tight); }
.route-head em { font-style: normal; color: var(--color-primary-deep); }
.route-sub  { margin-top: 8px; font-size: var(--fs-sm); color: var(--color-text-sub); }

.route-list { margin-top: var(--sp-4); }
.route-list > li {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 0;
}
.route-list > li + li { border-top: 1px dashed var(--color-line); }

.stop {
  flex-shrink: 0;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font-size: 12px; font-weight: 700; line-height: 1.15;
  background: #fff; border: 3px solid var(--color-line-mid);
  word-break: keep-all;
}
.stop.s1  { border-color: var(--subway-1);  color: var(--subway-1); }
.stop.s2  { border-color: var(--subway-2);  color: var(--subway-2); }
.stop.s3  { border-color: var(--subway-3);  color: var(--subway-3); }
.stop.sdh { border-color: var(--subway-dh); color: var(--subway-dh); }
.stop.sgh { border-color: var(--subway-gh); color: var(--subway-gh); }
.stop.is-goal {
  background: var(--color-primary-deep); border-color: var(--color-primary-deep); color: #fff;
}

/* 노선 구간 — 점선 막대 + 끝에 화살촉 */
.seg { flex: 1 1 0; min-width: 26px; height: 9px; border-radius: 5px; position: relative; }
.seg::before {
  content: ""; position: absolute; inset: 0; border-radius: 5px;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 1.6px, transparent 1.7px);
  background-size: 11px 9px; background-position: center;
}
.seg.l1  { background: var(--subway-1); }
.seg.l2  { background: var(--subway-2); }
.seg.l3  { background: var(--subway-3); }
.seg.ldh { background: var(--subway-dh); }
.seg.lgh { background: var(--subway-gh); }
.seg.is-last::after {
  content: ""; position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
  border-left: 11px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.seg.l1.is-last  { color: var(--subway-1); }
.seg.l2.is-last  { color: var(--subway-2); }
.seg.ldh.is-last { color: var(--subway-dh); }
.seg.lgh.is-last { color: var(--subway-gh); }

.dur {
  flex-shrink: 0; margin-left: 6px;
  min-width: 86px; padding: 8px 12px; text-align: center;
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--color-bg-alt); border-radius: var(--radius-sm);
}
.route-note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--color-text-weak); line-height: var(--lh-loose); }

/* --- 지도 / 사진 ---------------------------------------------------------- */
.visit2-side { display: grid; gap: var(--sp-3); position: sticky; top: calc(var(--header-h) + var(--ticker-h) + 20px); }
.visit2-map { border-radius: var(--radius-base); overflow: hidden; background: var(--color-bg-alt); }
.visit2-ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.visit2-ways li {
  padding: 14px 16px; font-size: var(--fs-sm);
  background: var(--color-bg-soft); border-radius: var(--radius-sm);
}
.visit2-ways strong { display: block; margin-bottom: 4px; font-size: var(--fs-xs); color: var(--color-primary-deep); }

/* 명륜역 기둥 사진(투명 PNG)이 translate 로 밀려 폰에서 가로 스크롤이 생기지 않게.
   clip 은 스크롤 상자를 만들지 않아 .visit2-side 의 sticky 가 그대로 동작합니다. */
section:has(> .container-wide > .visit2) { overflow-x: clip; }

/* 지도 자리 — 건물 사진 배경 + 네이버 지도 링크 카드.
   사진이 밝아 흰 글자가 묻히지 않도록 히로와 같은 어두운 막(--hero-scrim-rgb)을 깝니다. */
.visit2-photo > img { object-position: center 30%; }
.visit2-photo-link {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  padding: var(--sp-3); text-align: center; color: var(--color-text-invert);
  background: linear-gradient(rgba(var(--hero-scrim-rgb), 0.45), rgba(var(--hero-scrim-rgb), 0.7));
  transition: background-color var(--transition);
}
.visit2-photo-link strong { font-size: var(--fs-h3); font-weight: 700; }
.visit2-photo-link > span:not(.vbtn) { font-size: var(--fs-body); }
.visit2-photo-link .vbtn { margin-top: var(--sp-2); }
.visit2-photo-link:hover .vbtn { filter: brightness(0.94); }
.visit2-photo:hover > img { transform: scale(1.04); }
.visit2-note b { font-weight: 700; color: var(--color-text); }

@media screen and (max-width: 1199px) and (min-width: 1025px) {
  .visit2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .visit2-info   { grid-column: 1; grid-row: 1; }
  .visit2-side   { grid-column: 2; grid-row: 1 / 3; }
  .visit2-pillar { grid-column: 1; grid-row: 2; max-width: 200px; }
}
@media screen and (max-width: 1024px) {
  .visit2 { grid-template-columns: 1fr; gap: var(--sp-5); }
  .visit2-side { position: static; }
  .visit2-pillar { max-width: 190px; margin: 0 auto; }
}
@media screen and (max-width: 560px) {
  .stop { width: 50px; height: 50px; font-size: 11px; border-width: 2px; }
  .dur { min-width: 68px; padding: 7px 8px; }
  .route-list > li { gap: 5px; }
  .visit2-ways { grid-template-columns: 1fr; }
}
/* 환승이 두 번인 줄(정류장 4개)이 좁은 폰에서 넘치지 않게 */
@media screen and (max-width: 480px) {
  .stop { width: 46px; height: 46px; }
  .seg { min-width: 14px; }
  .dur { min-width: 0; margin-left: 2px; }
}

/* --- 4. 진료과목 — 가운데 카드 + 좌우로 걸쳐 보이는 캐러셀 --------------------
   트랙을 화면 한가운데(margin-left:50%)에서 시작시킨 뒤,
   "앞 카드들의 폭 + 현재 카드의 절반" 만큼 왼쪽으로 당겨 --i 번 카드를 중앙에 둡니다.
   JS 는 --i 만 바꾸고 계산은 전부 CSS 가 합니다.

   옆 카드가 드러나는 폭 = (화면폭 - --dept-card-w) / 2 - --dept-gap
   더 드러내고 싶으면 --dept-card-w 를 줄이세요.                              */
.dept-carousel {
  /* 66vw 라 화면이 커져도 옆 카드 노출 비율(약 22%)이 대체로 유지됩니다.
     1080px 은 카드가 지나치게 커지지 않게 막는 상한입니다. */
  --dept-card-w: min(1080px, 66vw);
  --dept-gap:    var(--sp-4);
  position: relative;
}
.dept-stage { overflow: hidden; padding: var(--sp-2) 0 var(--sp-5); }
.dept-track {
  display: flex; gap: var(--dept-gap);
  margin-left: 50%;
  transform: translateX(calc(-1 * (
    var(--i, 0) * (var(--dept-card-w) + var(--dept-gap)) + var(--dept-card-w) / 2
  )));
  transition: transform 0.7s var(--ease);
}

.dept-card {
  flex: 0 0 var(--dept-card-w);
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  align-items: center; gap: var(--sp-5);
  padding: var(--sp-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  /* 비활성 카드는 뒤로 물러나 보이게 합니다 */
  opacity: 0.4; transform: scale(0.93);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
              box-shadow var(--transition);
  cursor: pointer;
}
.dept-card.is-active {
  opacity: 1; transform: none;
  box-shadow: var(--shadow-card);
  cursor: default;
}
/* 비활성 카드의 링크는 누를 수 없게 합니다 — 카드를 누르면 그 카드로 넘어갑니다 */
.dept-card:not(.is-active) .btn-text { pointer-events: none; }

.dept-card-media {
  aspect-ratio: 1 / 1; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-bg-alt);
}
.dept-card-media img { width: 100%; height: 100%; object-fit: cover; }

/* 과목 이름이 카드의 큰 타이틀입니다 */
.dept-card-body h3 {
  margin-top: 6px;
  font-size: clamp(30px, 2.9vw, 46px); font-weight: 700;
  letter-spacing: var(--ls-tight); line-height: var(--lh-tight);
}
/* .dept-card-body p 보다 특정도가 높아야 색·여백이 먹습니다 */
.dept-card-body .dept-lead {
  margin-top: var(--sp-2);
  font-size: var(--fs-lg); font-weight: 600;
  color: var(--color-primary-deep); line-height: var(--lh-tight);
}
.dept-card-body p { margin-top: var(--sp-3); color: var(--color-text-sub); line-height: var(--lh-loose); }
.dept-card-body .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); }
.dept-card-body .tags span {
  padding: 6px 14px; font-size: var(--fs-xs); font-weight: 600;
  color: var(--color-primary-deep); background: var(--color-primary-light);
  border-radius: var(--radius-pill);
}
.dept-card-body .btn-text { margin-top: var(--sp-4); }

/* 좌우 화살표 — 활성 카드 바깥쪽 여백 위에 놓입니다 */
.dept-arrow {
  position: absolute; top: 50%; z-index: 2;
  width: 48px; height: 48px; display: grid; place-items: center;
  font-size: var(--fs-lg); line-height: 1;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-line-mid); border-radius: 50%;
  box-shadow: var(--shadow-float);
  transform: translateY(-50%);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.dept-arrow:hover {
  background: var(--color-primary-deep); border-color: var(--color-primary-deep);
  color: var(--color-text-invert);
}
.dept-arrow-prev { left: max(var(--gutter), calc(50% - var(--dept-card-w) / 2 - 24px)); }
.dept-arrow-next { right: max(var(--gutter), calc(50% - var(--dept-card-w) / 2 - 24px)); }

/* 현재 위치 점 — 캐러셀 아래 가운데.
   과목 이름은 카드 안 타이틀로 보이므로 여기는 위치만 알려 줍니다.
   점은 8px 이지만 버튼은 48px 이라 터치 영역은 충분합니다. */
.dept-dots { display: flex; justify-content: center; gap: 2px; margin-top: var(--sp-5); }
.dept-dots button {
  width: 48px; height: 48px; display: grid; place-items: center;
}
.dept-dots button::before {
  content: ""; display: block;
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--color-line-mid);
  transition: width var(--transition), background-color var(--transition);
}
.dept-dots button:hover::before { background: var(--color-text-weak); }
.dept-dots button[aria-selected="true"]::before {
  width: 28px; background: var(--color-primary-deep);
}

@media screen and (max-width: 1024px) {
  .dept-carousel { --dept-card-w: min(560px, 86vw); --dept-gap: var(--sp-3); }
  /* 좁아지면 좌우 2단이 들어가지 않으므로 사진을 위로 올립니다 */
  .dept-card { grid-template-columns: 1fr; gap: var(--sp-4); }
  .dept-card-media { aspect-ratio: 16 / 9; }
  .dept-card-body h3 { font-size: var(--fs-h3); }
}

@media screen and (max-width: 640px) {
  /* 화살표를 카드 바깥에 둘 자리가 없어 숨깁니다. 과목 이름 줄로 이동합니다. */
  .dept-arrow { display: none; }
  .dept-carousel { --dept-card-w: 84vw; }
}

@media (prefers-reduced-motion: reduce) {
  .dept-track { transition: none; }
  .dept-card { transition: none; }
}