@charset "utf-8";

/* 내용관리 */
#ctt {margin:0;padding:0;background:#fff}
.ctt_admin {text-align:right; width: 1400px; margin: 0 auto}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:0;text-align:center;font-family:"Noto Sans KR",sans-serif;}
#ctt_con img {max-width:100%;height:auto;}

/* ==========================================================================
   레진/인레이 (sub512) — 반응형
   메인·제목·소제목(.ii-subtitle)의 공통 모양은 /css/wd_imp_info.css
   두 표는 실제 <table> 로 두고, 860px 이하에서는 행마다 카드 형태로 세로 배치한다.
   ========================================================================== */
.s512 {--c1:#00b4c8;--c2:#0064d2;--c3:#6aaaff;font-family:"Noto Sans KR",sans-serif;color:#333;letter-spacing:-.03em;}
.s512 *, .s512 *::before, .s512 *::after {box-sizing:border-box;word-break:keep-all;}
.s512 table {width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;text-align:left;}
.s512 :where(th,td) {padding:0;font-weight:inherit;vertical-align:middle;}
.s512-sr {position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* 체크 목록 (아이콘은 행 색상에 맞춘 check01~04.png) */
.s512-check {margin:0;padding:0;list-style:none;}
.s512-check li {position:relative;padding-left:1.55em;font-size:clamp(14px,1.15vw,22px);line-height:1.6;color:#333;}
.s512-check li + li {margin-top:.15em;}
.s512-check li::before {content:"";position:absolute;left:0;top:.33em;width:1.1em;height:1em;background:var(--check) no-repeat left center / contain;}

/* ---------- 레진&인레이 종류 ---------- */
.s512-types {padding:clamp(60px,4.7vw,90px) 20px clamp(60px,4.2vw,80px);background:#f7fbfe;}
.s512-types__table {max-width:1200px;margin:clamp(36px,3.4vw,65px) auto 0;border-spacing:0 20px !important;}
.s512-col-kind {width:16.5%;} .s512-col-pro {width:45%;} .s512-col-target {width:38.5%;}
.s512-types__table th[scope="row"] {background:#888 no-repeat center / cover;font-size:clamp(20px,1.56vw,30px);font-weight:500;color:#fff;text-align:center;}
.s512-types__table td {padding:clamp(20px,1.8vw,34px) clamp(16px,1.6vw,30px);background:#fff;box-shadow:0 0 0 1px #eceef2 inset;}
.s512-types__table td + td {border-left:4px solid #f7fbfe;}
.s512-types__table td {display:table-cell;}
.s512-types__lbl {float:left;width:clamp(76px,5.8vw,110px);font-size:clamp(18px,1.56vw,30px);font-weight:500;line-height:1.2;}
.s512-types__table td .s512-check {overflow:hidden;}
.s512-types__row--1 .s512-types__lbl {color:var(--c1);}
.s512-types__row--2 .s512-types__lbl {color:var(--c2);}
.s512-types__row--3 .s512-types__lbl {color:var(--c3);}
.s512-types__row--1 th {background-color:var(--c1) !important;}
.s512-types__row--2 th {background-color:var(--c2) !important;}
.s512-types__row--3 th {background-color:var(--c3) !important;}

/* ---------- 재료별 비교 ---------- */
.s512-cmp {padding:clamp(60px,4.7vw,90px) 20px clamp(60px,4.7vw,90px);background:#f4f4f5;}
.s512-cmp__table {max-width:1200px;margin:clamp(36px,3.4vw,65px) auto 0;}
.s512-cmp__table thead th {height:clamp(56px,4.9vw,94px);background:#949a9e;font-size:clamp(17px,1.46vw,28px);font-weight:700;color:#fff;text-align:center;letter-spacing:.3em;}
.s512-cmp__table thead th.is-pro {background:#6aaaff;color:#fff34a;}
.s512-cmp__table tbody th {width:21%;font-size:clamp(17px,1.46vw,28px);font-weight:400;color:#555;text-align:center;}
.s512-cmp__table tbody td {padding:clamp(20px,2vw,38px) clamp(16px,2.4vw,46px);}
.s512-cmp__table tbody tr:nth-child(odd) :where(th,td) {background:#f4f4f5;}
.s512-cmp__table tbody tr:nth-child(even) :where(th,td) {background:#e6e6e7;}
.s512-cmp__table .is-pro {width:40%;border-left:6px solid #6aaaff;border-right:6px solid #6aaaff;}
.s512-cmp__table tbody tr:last-child .is-pro {border-bottom:6px solid #6aaaff;}
.s512-cmp__table td.is-pro .s512-check li {color:#4a90e8;}
.s512-cmp__table tbody :where(th,td) + :where(th,td) {box-shadow:-4px 0 0 #fff;}
.s512-cmp__table thead th + th {box-shadow:-4px 0 0 #fff;}

/* ==========================================================================
   모바일 — 표를 행 단위 카드로
   ========================================================================== */
@media screen and (max-width:860px) {
	.s512 .pc {display:none;}
	.s512 table, .s512 tbody, .s512 tr, .s512 th, .s512 td {display:block;width:100% !important;}
	.s512 thead, .s512 colgroup {display:none;}

	/* 종류: 색 라벨 → 장점 → 시술대상 */
	.s512-types__table {border-spacing:0 !important;}
	.s512-types__row + .s512-types__row {margin-top:18px;}
	.s512-types__table th[scope="row"] {padding:12px;font-size:19px;}
	.s512-types__table td {padding:18px 16px;}
	.s512-types__table td + td {border-left:0;border-top:1px solid #eceef2;}
	.s512-types__lbl {float:none;display:block;width:auto;margin-bottom:8px;font-size:17px;}

	/* 재료 비교: 재료 이름 → 장점 → 단점 (항목 이름을 앞에 붙인다) */
	.s512-cmp__table tbody tr {background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05);}
	.s512-cmp__table tbody tr + tr {margin-top:16px;}
	.s512-cmp__table tbody tr :where(th,td) {background:#fff !important;box-shadow:none !important;}
	.s512-cmp__table tbody th {padding:12px;background:#949a9e !important;font-weight:700;color:#fff;}
	.s512-cmp__table tbody td {padding:16px;}
	.s512-cmp__table tbody td::before {content:attr(data-label);display:block;margin-bottom:6px;font-size:15px;font-weight:700;color:#555;}
	.s512-cmp__table .is-pro {border:0 !important;}
	.s512-cmp__table td.is-pro::before {color:#4a90e8;}
	.s512-cmp__table td + td {border-top:1px solid #eee;}
}