@charset "utf-8";
/* ==========================================================================
   스마일라인소개 > 비급여진료안내 (/about/price/index)
   - 토큰·헤더/푸터는 site_layout.css
   - 이 파일의 선택자는 모두 .sl-price 접두사로 스코프 한정 (publish.md 3.4)
   - 표 스타일은 board.css(전역) 를 덮어야 하므로 .sl-price__table 하위로 명시한다
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 본문 영역
      ※ 히어로 밴드(.sl-subhero)와 그 안의 라벨·제목 서체는 site_layout.css 공통을
        그대로 쓴다 (다른 서브페이지와 동일)
   -------------------------------------------------------------------------- */
.sl-price {
	background: #fff;
	padding: 80px 20px 140px;
	box-sizing: border-box;
}
.sl-price__inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* 1-1. 고지 문구 박스 --------------------------------------------------- */
.sl-price__notice {
	margin: 0;
	padding: 32px 37px 33px;
	border: 1px solid rgba(43, 43, 40, .1);
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	line-height: 1.9;
	color: rgba(43, 43, 40, .7);
	box-sizing: border-box;
	text-wrap: pretty;
}

/* 1-2. 분류 탭 ---------------------------------------------------------- */
.sl-price__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 48px;
}
.sl-price__tab {
	padding: 16px 40px;
	border: 0;
	border-radius: 100px;
	background: var(--sl-cream);
	color: rgba(43, 43, 40, .55);
	font-family: inherit;
	font-size: var(--sl-text);
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	transition: background .2s ease, color .2s ease;
}
.sl-price__tab:hover { color: var(--sl-dark); }
.sl-price__tab.is-on {
	background: var(--sl-orange);
	color: #fff;
}
.sl-price__tab.is-on:hover { color: #fff; }
.sl-price__tab:focus-visible { outline: 2px solid var(--sl-orange); outline-offset: 2px; }

/* 1-3. 표 --------------------------------------------------------------- */
.sl-price__panel { display: none; margin-top: 48px; }
.sl-price__panel.is-on { display: block; }

.sl-price__subtitle {
	font-size: var(--sl-text);
	font-weight: 700;
	color: var(--sl-dark);
	margin: 0 0 18px;
}

.sl-price__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border-top: 2px solid var(--sl-dark);
}
/* 표 제목은 화면에 두지 않고 스크린리더에만 읽힌다 (탭 라벨과 중복) */
.sl-price__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.sl-price__col--name { width: 40%; }
.sl-price__col--fee  { width: 20%; }
.sl-price__col--note { width: 40%; }

.sl-price__table thead th {
	background: var(--sl-cream);
	padding: 18px 8px 19px;
	border-bottom: 1px solid rgba(43, 43, 40, .12);
	font-size: 14px;
	font-weight: 400;
	color: var(--sl-dark);
	text-align: left;
	vertical-align: middle;
}
.sl-price__table tbody th,
.sl-price__table tbody td {
	padding: 22px 8px 23px;
	border-bottom: 1px solid rgba(43, 43, 40, .1);
	font-size: 14px;
	font-weight: 400;
	color: var(--sl-dark);
	text-align: left;
	vertical-align: middle;
	background: transparent;
	word-break: keep-all;
}
.sl-price__table tbody tr:hover th,
.sl-price__table tbody tr:hover td { background: rgba(250, 247, 242, .6); }

/* tbody 공통 규칙(0,0,2,1)보다 특이도가 높아야 색이 적용된다 */
.sl-price__table td.sl-price__fee { color: var(--sl-orange); }
.sl-price__table td.sl-price__note {
	font-size: 13px;
	line-height: 1.7;
	color: rgba(43, 43, 40, .6);
}

/* --------------------------------------------------------------------------
   2. 반응형 (본문은 var(--sl-text) : PC 16px / 640 이하 14px — site_layout.css 타이포 기준)
      히어로 밴드의 반응형은 site_layout.css 가 담당한다
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.sl-price { padding: 56px 20px 80px; }
	.sl-price__notice { padding: 22px 24px; }
	.sl-price__tabs { margin-top: 32px; gap: 8px; }
	.sl-price__tab { padding: 14px 26px; font-size: 15px; }
	.sl-price__panel { margin-top: 32px; }

	.sl-price__table thead th { padding: 14px 6px; font-size: 13px; }
	.sl-price__table tbody th,
	.sl-price__table tbody td { padding: 16px 6px; font-size: 13px; }
	.sl-price__note { font-size: 12px; }
}

@media (max-width: 640px) {
	.sl-price { padding: 44px 16px 64px; }
	.sl-price__notice { padding: 18px 18px; font-size: 13px; line-height: 1.8; }
	.sl-price__tab { padding: 12px 20px; font-size: 14px; }

	/* 좁은 화면에서는 항목·비용을 먼저 읽히게 하고 비고 폭을 줄인다 */
	.sl-price__col--name { width: 42%; }
	.sl-price__col--fee  { width: 26%; }
	.sl-price__col--note { width: 32%; }
}