@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;}

/* ==========================================================================
   증상별 교정치료 (sub222) — 반응형
   기존 PC 이미지(1920) 기준 크기를 clamp(모바일, PC/19.2 vw, PC) 로 이었다. 모바일 시안이 없어
   모바일은 1단 배치(글 → 그림, 장치 카드 세로)로 자연스럽게 정리했다.
   ========================================================================== */
.s222 {
	--navy:#1c3b72;
	--f-pill:clamp(19px,1.72vw,33px);
	--f-p:clamp(14px,1.04vw,20px);
	--f-dev-h:clamp(22px,2.24vw,43px);
	--f-dev-t:clamp(17px,1.3vw,25px);
	--f-dev-p:clamp(13.5px,.94vw,18px);
	--f-tab:clamp(13.5px,1.04vw,20px);
	font-family:"Noto Sans KR",sans-serif;
	text-align:left;
	color:#333;
	letter-spacing:-.03em;
	word-break:keep-all;
}
.s222 *, .s222 *::before, .s222 *::after {box-sizing:border-box;}
.s222 :where(h2,h3,h4,p,ul,figure) {margin:0;padding:0;}
.s222 p, .s222 h3, .s222 h4 {word-break:keep-all;} /* default.css 의 p{word-break:break-all} 로 단어 중간이 끊기지 않게 */
.s222 :where(ul) {list-style:none;}
.s222 b {font-weight:700;color:#111;}
.pc {display:inline;}

/* ---------- 메인 ---------- */
.s222-hero {display:flex;align-items:center;min-height:clamp(220px,24.4vw,468px);padding:40px 20px;background:#7aada6 no-repeat 50% 0 / cover;}
@media screen and (min-width:1521px) { .s222-hero {padding-top:112px;} } /* PC 헤더가 본문 위에 겹쳐 뜨는 만큼 */
.s222-hero__in {width:100%;max-width:1400px;margin:0 auto;}
.s222-hero__eng {font-size:clamp(11px,.83vw,16px);letter-spacing:.35em;color:rgba(255,255,255,.85);}
.s222-hero__title {margin-top:.3em !important;font-size:clamp(30px,2.86vw,55px);font-weight:300;line-height:1.2;color:#fff;text-align:left;text-shadow:0 2px 12px rgba(0,0,0,.12);}
.s222-hero__title b {font-weight:700;color:#fff;}

/* ---------- 탭 ---------- */
.s222-tabs {display:grid;grid-template-columns:repeat(6,1fr);max-width:1160px;margin:clamp(-36px,-1.9vw,-24px) auto 0;padding:0 20px;position:relative;z-index:1;}
.s222-tab {height:clamp(52px,3.75vw,72px);padding:0 6px;border:0;border-left:1px solid #e3e6ec;background:#fff;box-shadow:0 6px 16px rgba(28,59,114,.08);font:inherit;font-size:var(--f-tab);font-weight:500;color:#666;letter-spacing:-.03em;cursor:pointer;transition:background .2s,color .2s;}
.s222-tab:first-child {border-left:0;border-radius:8px 0 0 8px;}
.s222-tab:last-child {border-radius:0 8px 8px 0;}
.s222-tab:hover {color:var(--navy);}
.s222-tab.is-on {background:var(--navy);color:#fff;font-weight:700;}
.s222-tab:focus-visible {outline:2px solid #52c3ed;outline-offset:2px;}

/* ---------- 증상 설명 ---------- */
.s222-about {background:#f7f7f7;padding:clamp(50px,4.7vw,90px) 20px clamp(50px,4.7vw,90px);margin-top:clamp(-36px,-1.9vw,-24px);}
.s222-about__in {display:flex;align-items:center;justify-content:space-between;gap:30px;max-width:1120px;margin:0 auto;padding-top:clamp(20px,1.9vw,36px);}
.s222-about__txt {flex:1 1 auto;min-width:0;}
.s222-pill {display:inline-block;padding:.22em 1.9em;border-radius:2em;background:var(--navy);font-size:var(--f-pill);font-weight:300;line-height:1.3;color:#fff;}
.s222-pill b {color:#fff;}
.s222-about__txt p {margin-top:1.4em !important;font-size:var(--f-p);font-weight:300;line-height:1.6;color:#333;}
.s222-about__txt .s222-pill + p {margin-top:1.6em !important;}

/* 그림 — 원형 테두리·라벨이 이미지에 포함돼 있으므로 자르거나 늘리지 않고 원본 비율 그대로 */
.s222-about__fig {flex:none;max-width:100%;}
.s222-about__fig img {display:block;max-width:100%;height:auto;}

/* ---------- 적합한 교정장치 ---------- */
.s222-dev {background:#e7f0f9;padding:clamp(50px,4.2vw,80px) 20px clamp(60px,5.2vw,100px);text-align:center;}
.s222-dev__eng {font-size:clamp(11px,.83vw,16px);letter-spacing:.35em;color:#555;}
.s222-dev__title {margin-top:.35em !important;font-size:var(--f-dev-h);font-weight:300;line-height:1.3;color:#222;text-align:center;}
.s222-dev__title::after {content:"";display:block;width:26px;height:26px;margin:.5em auto 0;background:linear-gradient(to top right,transparent calc(50% - 1px),#222 calc(50% - 1px),#222 calc(50% + 1px),transparent calc(50% + 1px));} /* 기존 페이지와 같은 "\" 방향 사선 */
.s222-dev__list {display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.56vw,30px);max-width:1080px;margin:clamp(30px,2.6vw,50px) auto 0 !important;}
.s222-dev__list li {display:flex;flex-direction:column;background:#fff;box-shadow:0 4px 14px rgba(28,59,114,.07);}
.s222-dev__list img {display:block;width:100% !important;aspect-ratio:340 / 202;object-fit:cover;}
.s222-dev__txt {flex:1;padding:clamp(22px,2vw,38px) 14px clamp(26px,2.2vw,42px);}
.s222-dev__txt h4 {font-size:var(--f-dev-t);font-weight:500;color:var(--navy);text-align:center;}
.s222-dev__txt h4::after {content:"";display:block;width:24px;height:1px;margin:.8em auto 1em;background:var(--navy);}
.s222-dev__txt p {font-size:var(--f-dev-p);font-weight:300;line-height:1.55;color:#444;}

/* ==========================================================================
   반응형
   ========================================================================== */
@media screen and (max-width:860px) {
	.pc {display:none;}

	.s222-hero {min-height:clamp(200px,52vw,300px);padding:30px 20px;background-position:62% 0;}
	.s222-hero__title {font-size:clamp(26px,7vw,36px);}

	/* 탭: 3칸 × 2줄 */
	.s222-tabs {grid-template-columns:repeat(3,1fr);gap:6px;margin-top:-26px;padding:0 14px;}
	.s222-tab {height:48px;border-left:0;border-radius:8px !important;}

	.s222-about {margin-top:-26px;padding:56px 20px 50px;}
	.s222-about__in {flex-direction:column;align-items:stretch;gap:32px;padding-top:20px;}
	.s222-pill {padding:.25em 1.3em;}
	.s222-about__fig {align-self:center;}

	.s222-dev {padding:50px 16px 60px;}
	.s222-dev__list {grid-template-columns:1fr;gap:16px;max-width:420px;}
	.s222-dev__txt {padding:22px 20px 26px;}
}