@charset "utf-8";

/* ============================================================
   price.css — 비급여 수가표 · 제증명 수수료 (#price-page)

   마크업 : sections/price/
   ============================================================ */

#price-page {
  --one-space-lg: 82px;      /* 섹션 상하 여백이 아니다 — 그건 ui.css 가 --one-space-xl 로 덮는다. 리스트 줄 간격 등에만 남아 있는 값 */
  --one-tbl-w: 900px;        /* 표 이미지 최대 폭 — 1열로 접혔을 때. A4 세로라 너무 넓으면 글자가 커진다 */
  --one-tit: #5f5449;        /* 제목 갈색 — 다른 서브 페이지와 같은 값 */
}

/* common.css 의 margin-bottom:100px 이 과하다 — 다른 페이지와 같은 값으로 */
/* 제목 갈색 — Astra 가 h1·h2 에 자기 색을 뿌려서 시안과 달라진다 */

#price-page .price-inr {
  font-size: var(--one-body);
}
#price-page .tit-color {
  color: var(--one-tit);
}

/* 캡션 — 캡션 크기(15)가 제목 옆에서 작다. 본문 크기로 한 단계 위 */
#price-page .sec-hd .cp-txt {
  font-size: var(--one-body);
}

#price-page .sec-hd {
  margin-bottom: var(--one-gap-xl);
}

/* ============================
   01 표 나열
============================ */

/* 바로가기 버튼 — 모바일(639 이하)에서만 보인다 */
#price-page .tbl-nav {
  display: none;
  justify-content: center;
  padding-bottom: var(--one-space-s);
}

/* 바로가기 버튼 — 메인 컬러(남색) 대신 페이지 갈색 */
#price-page .tbl-nav .btn-outline {
  border-color: var(--one-tit);
  color: var(--one-tit);
}

#price-page .tbl-nav .btn-outline:hover {
  background-color: var(--one-tit);
  color: var(--white-color);
}

/* 비급여 수가표 좌 · 제증명 수수료 우 — 두 표를 나란히 */
#price-page .sec-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--one-gap-xl);
  align-items: start;
}

#price-page .tbl-item {
  min-width: 0;
}


/* 앵커로 올 때 헤더 아래에 제목이 걸리지 않게 */
#price-page .tbl-tit {
  padding-bottom: var(--one-gap-lg);
  color: var(--sub-color01);
  scroll-margin-top: var(--one-space-s);
}

#price-page .tbl-item img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gray-color03);
}


/* ============================
   반응형 — 태블릿 (max-width: 1024px)
============================ */

@media all and (max-width: 1024px) {
  /* 두 표가 좁아져 글자를 못 읽는다 — 세로로 쌓는다 */
  #price-page .sec-body {
    grid-template-columns: 1fr;
    gap: var(--one-space-r);
  }

  #price-page .tbl-item {
    width: 100%;
    max-width: var(--one-tbl-w);
    margin: 0 auto;
  }
}


/* ============================
   반응형 — 모바일 (max-width: 639px)
============================ */

@media all and (max-width: 639px) {
  #price-page .tbl-nav {
    display: flex;
    padding-bottom: var(--one-gap-xxl);
  }

  #price-page .tbl-item img {
    border: 0;   /* 좁은 화면에서 테두리가 답답하다 */
  }

  #price-page .price-tit {
    margin-bottom: -35px;
  }
}