:root {
  --fees-navy: #082f61;
  --fees-navy-deep: #061f43;
  --fees-blue: #0875e1;
  --fees-blue-soft: #eaf4ff;
  --fees-line: #dce6f1;
  --fees-ink: #172a42;
  --fees-muted: #637287;
}

.page-medical-fees { background: #f5f8fc; }

.sub-visual--medical-fees .sub-visual-inner { position: relative; overflow: hidden; }
.sub-visual--medical-fees .sub-visual__brand-gradient {
  height: 380px;
  background: linear-gradient(90deg, rgba(4,25,57,.9), rgba(5,39,82,.68) 44%, rgba(5,37,75,.12) 78%),
    url('/assets/img/sub/medical-fees-hero.png?ver=20260812d') center 54% / cover no-repeat;
}
.sub-visual--medical-fees .sub-visual__copy {
  position: absolute; z-index: 2; top: 50%; left: 50%; width: calc(100% - 80px);
  transform: translate(-50%,-50%); color: #fff;
}
.sub-visual--medical-fees .sub-visual__eyebrow { margin-bottom: 18px; font-size: .78rem; font-weight: 700; letter-spacing: .28em; color: #77baff; }
.sub-visual--medical-fees .sub-visual__copy h2 { font-size: 3rem; font-weight: 700; line-height: 1.2; letter-spacing: -.045em; }

.medical-fees-article { box-sizing: border-box; margin: 0 auto; padding: 88px 20px 120px; color: var(--fees-ink); }
.medical-fees-heading { margin: 0 auto 42px; text-align: center; }
.medical-fees-kicker { margin-bottom: 12px; font-size: .78rem; font-weight: 800; letter-spacing: .22em; color: var(--fees-blue); }
.medical-fees-heading h1 { font-size: 3rem; font-weight: 350; line-height: 1.3; letter-spacing: -.055em; }
.medical-fees-heading h1 strong { font-weight: 800; color: var(--fees-blue); }
.medical-fees-heading > p:last-child { max-width: 920px; margin: 18px auto 0; font-size: .96rem; line-height: 1.75; color: var(--fees-muted); word-break: keep-all; }

.medical-fees-panel { padding: 34px; border: 1px solid #e1eaf4; border-radius: 22px; background: linear-gradient(145deg,#fff,#f6faff); box-shadow: 0 18px 48px rgba(17,50,88,.08); }
.medical-fees-search { display: grid; grid-template-columns: 170px minmax(260px,1fr) 116px; gap: 10px; max-width: 820px; margin: 0 auto 28px; }
.medical-fees-search select, .medical-fees-search input, .medical-fees-search button { box-sizing: border-box; width: 100%; height: 56px; border-radius: 10px; font: inherit; }
.medical-fees-search select, .medical-fees-search input { border: 1px solid #cfdae7; background: #fff; color: var(--fees-ink); outline: 0; }
.medical-fees-search select { padding: 0 18px; }
.medical-fees-search input { padding: 0 20px; }
.medical-fees-search select:focus, .medical-fees-search input:focus { border-color: var(--fees-blue); box-shadow: 0 0 0 4px rgba(8,117,225,.12); }
.medical-fees-search button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: linear-gradient(135deg,var(--fees-navy),var(--fees-blue)); box-shadow: 0 10px 22px rgba(5,68,134,.2); font-weight: 750; color: #fff; cursor: pointer; transition: .2s; }
.medical-fees-search button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(5,68,134,.28); }

.medical-fees-tabs { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; }
.medical-fees-tabs a { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--fees-line); border-radius: 10px; background: #fff; font-size: .9rem; font-weight: 650; color: #4e5f73; transition: .2s; }
.medical-fees-tabs a:hover { border-color: #8ac3fa; color: var(--fees-blue); transform: translateY(-1px); }
.medical-fees-tabs a.active { border-color: var(--fees-navy); background: linear-gradient(135deg,var(--fees-navy-deep),var(--fees-navy)); box-shadow: 0 10px 22px rgba(6,47,97,.18); color: #fff; }

.medical-fees-result-summary { display: flex; align-items: center; justify-content: space-between; margin: 40px 4px 14px; color: var(--fees-muted); }
.medical-fees-result-summary strong { margin-right: 3px; font-size: 1.15rem; color: var(--fees-blue); }
.medical-fees-scroll-guide { display: none; font-size: .82rem; }

.medical-fees-table-wrap { overflow-x: auto; border: 1px solid var(--fees-line); border-radius: 16px; background: #fff; box-shadow: 0 16px 42px rgba(20,54,92,.08); scrollbar-color: #9abce0 #edf3f9; scrollbar-width: thin; }
.medical-fees-table-wrap:focus-visible { outline: 3px solid rgba(8,117,225,.3); outline-offset: 3px; }
.medical-fees-table { width: 100%; min-width: 1180px; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: center; }
.medical-fees-table th, .medical-fees-table td { vertical-align: middle; }
.medical-fees-table thead th { padding: 15px 8px; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.16); background: var(--fees-navy); font-size: .82rem; font-weight: 750; line-height: 1.35; color: #fff; }
.medical-fees-table thead tr:nth-child(2) th { background: #124b83; color: #eaf4ff; }
.medical-fees-table tbody th, .medical-fees-table tbody td { box-sizing: border-box; height: 64px; padding: 12px 9px; border-right: 1px solid #e4ebf3; border-bottom: 1px solid #e4ebf3; background: #fff; font-size: .82rem; line-height: 1.55; color: #35465a; word-break: keep-all; transition: background-color .18s; }
.medical-fees-table tbody th { background: #eef5fd; font-weight: 700; color: #21476f; }
.medical-fees-table tbody tr:nth-child(even) th, .medical-fees-table tbody tr:nth-child(even) td { background: #f8fbff; }
.medical-fees-table tbody tr:hover th, .medical-fees-table tbody tr:hover td { background: #eaf4ff; }
.medical-fees-table .medical-fees-name { text-align: left; font-weight: 650; color: #203b5b; }
.medical-fees-table .medical-fees-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.medical-fees-empty { height: 160px !important; color: var(--fees-muted) !important; }
.medical-fees-pagination { margin-top: 38px; text-align: center; }

@media (max-width: 1024px) {
  .sub-visual--medical-fees .sub-visual__brand-gradient { height: 300px; }
  .medical-fees-article { padding-top: 68px; }
  .medical-fees-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .medical-fees-scroll-guide { display: block; }
}

@media (max-width: 640px) {
  .sub-visual--medical-fees .sub-visual__brand-gradient { height: 220px; background-position: 62% center; }
  .sub-visual--medical-fees .sub-visual__copy { width: calc(100% - 40px); }
  .sub-visual--medical-fees .sub-visual__eyebrow { margin-bottom: 10px; font-size: .62rem; letter-spacing: .2em; }
  .sub-visual--medical-fees .sub-visual__copy h2 { font-size: 1.8rem; }
  .medical-fees-article { padding: 52px 15px 90px; }
  .medical-fees-heading { margin-bottom: 28px; }
  .medical-fees-kicker { font-size: .66rem; }
  .medical-fees-heading h1 { font-size: 2rem; }
  .medical-fees-heading > p:last-child { margin-top: 12px; font-size: .86rem; }
  .medical-fees-panel { padding: 20px 16px; border-radius: 16px; }
  .medical-fees-search { grid-template-columns: 1fr 84px; gap: 8px; margin-bottom: 20px; }
  .medical-fees-search select { grid-column: 1 / -1; }
  .medical-fees-search select, .medical-fees-search input, .medical-fees-search button { height: 50px; font-size: .86rem; }
  .medical-fees-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .medical-fees-tabs a { min-height: 46px; font-size: .82rem; }
  .medical-fees-result-summary { display: block; margin-top: 28px; }
  .medical-fees-scroll-guide { margin-top: 8px; }
  .medical-fees-table { min-width: 1060px; }
}