@charset "utf-8";
/* [P-03] responsive.css 는 main.css/sub.css/board.css 의 반응형을 전부 포함한다.
   main/sub/board 는 자체 @media 를 두지 않는다. 2026-09-04 골격 반응형 분리.
   구간 구분 주석(「layout : responsive」「main : responsive」「sub : responsive」)을
   유지한다 — 어느 파일에서 옮겨온 규칙인지 다음 사람이 바로 읽을 수 있어야 한다.

   [반응형·접근성 담당 재작성 2026-09-16] 골격 원본의 「main : responsive」구간은 이 프로젝트 실제
   클래스(.sec2~.sec7 BEM)와 맞지 않는 옛 골격 셀렉터(.sec2 .item · .card-list__item ·
   .latest-list 등)였다 — 실제로 안 걸리는 죽은 규칙이었고, 그중 `.sec2,.sec3,.sec5{padding}`·
   `#main .section-header h2{font-size}` 두 줄만 실제 요소에 걸려 있었는데 각각
   ① 고정 높이(overflow:hidden) 섹션 안 콘텐츠를 아래로 밀어 잘라내고
   ② id 특이도로 본문 30px 제목을 오히려 44px 로 키우는 역방향 버그였다(실측 — 1420/1401 폭
   docHeight 6700→6672 로 변화). 아래는 실제 BEM 구조 기준으로 다시 썼다.

   경계 체계 정리(담당 간 조율 03:1x 지시 대응) — 이 파일에는 이미 세 갈래 경계가 있었다
   (reset.css:192 컨테이너 패딩 · layout.css:167 푸터 두 칸 · layout.css:31/43/92 GNB·로고·
   유틸 절대좌표, 전부 1439/1440) 대 스킬 표준 작성 폭(1400/1280/1024/768/480, 이 파일
   「layout : responsive」구간 골격 원본). **구조적 안전장치(넘침·소실·겹침 방지)는 이미 자리
   잡은 1439/1440 경계에 맞춘다** — 1401~1439 「사이 폭」이 두 체계 어느 쪽에도 안 걸려
   본문 섹션(.sec2·.sec3·.sec5·.sec7)이 원본 1920 절대좌표·고정폭 그대로 노출되는 틈이었다
   (실측 §아래). **시각 미세조정(글자 크기·간격 등 취향 값)은 스킬 표준 1400/1280/1024/768/480
   을 그대로 쓴다** — 두 체계를 억지로 하나로 합치면 이미 검증된 1439/1440 절대좌표 규칙
   (구조 담당 담당·1920 근거)을 건드리게 된다. 근거·실측은 보고서 §「경계 판단」에 적는다.

   [실측 추가 — 나선폭 1439] `window.matchMedia('(max-width:1439px)')` 를 실제 뷰포트폭
   1439(=window.innerWidth 1439 그대로) 에서 재니 **false** 였다(`(max-width:1440px)` 는
   true). `document.documentElement.clientWidth` 는 1424 로 정수라 스크롤바(15) 를 뺀 값은
   맞는데, 미디어 쿼리 폭 판정 자체가 정수 경계에서 엄격하게 안 맞는 사례를 이 실행 환경에서
   실측했다(윈도우 배율 125%/150% 같은 실제 사용자 환경에서도 같은 종류의 소수점 폭이 난다 —
   일하는 규칙 13, 원인은 도구·배율 중 어느 쪽인지 확정하지 않고 「관측」으로만 적는다).
   그 결과 `max-width:1439px` 로 쓴 구조적 안전장치 7곳이 **나선폭 1439 정확히에서 전부
   빠지고 main.css 원본 고정값이 그대로 드러나** 375/900 등에서는 0이던 가로 넘침이
   1439 에서만 15px 재발했다 — 아래 7개 블록을 전부 `max-width:1440px` 로 넓혀 이 틈을
   닫았다(1440 은 GNB·로고·헤더유틸 `min-width:1440px` 절대좌표와 다른 속성(레이아웃 흐름·폭)만
   건드려 충돌하지 않는다 — sec7 은 1440 에서도 2단(874+72+493=1439)이 1px 여유로만 맞던
   자리라 안전장치가 넓어져도 손해가 없다). */

/* ═════════════════════════════════════════════
   layout : responsive      (헤더·GNB·푸터·퀵버튼 — 원본 responsive.css)
═════════════════════════════════════════════ */
/* [퍼피-5 2차 V2-03 반영] #gnb{display:none} 뒤 #header .container 에 흐름 높이 기여자가
   없어 height:auto→0 이 되고, .logo·.head-util 의 top:50%+translateY(-50%) 가 0 을 중심으로
   잡혀 ≤1024 전 구간·1025~1439 로 위로 잘렸다(로고 y −31.6~−3.5). 폭 구분 없이 컨테이너
   자체 높이를 헤더 높이로 고정한다(#header 는 항상 height:var(--h-header) 로 정의값을 갖는다 —
   퍼센트/오토 충돌 없음). */
#header .container{height:100%;}

/* [퍼피-5 2차 V2-07] #header .logo{left:0}·.head-util{right:0}(layout.css ≥1440) 는 컨테이너
   자기 padding-box 기준이라, 컨테이너가 1792 이하로(뷰포트<1792) 줄어 가운데정렬 여백이
   사라지면 화면 끝에 그대로 붙는다(1600·1700 x0 · 1800 x4). 자연 여백(뷰포트≥1792일 때만
   생기는 (100vw-1792px)/2)에 최소 15px 바닥을 깐다 — 1920 은 자연값(64)이 이미 15 를
   넘어 그대로 유지(값 변경 없음), 1440~1791 만 15px 로 보정된다. */
@media (min-width:1440px) and (max-width:1919px){
	:root{--hdr-margin:calc((100vw - 1792px) / 2);}
	#header .logo{left:calc(max(15px, var(--hdr-margin)) - max(0px, var(--hdr-margin)));}
	#header .head-util{right:calc(max(15px, var(--hdr-margin)) - max(0px, var(--hdr-margin)));}
	/* [퍼피-5 2차 V2-04] .sec2__txt(main.css min-width:420px)가 1920 시안 노드폭(548px, R3-A2)
	   보다 좁아지는 구간에서 h2 가 2줄→3줄로 접혀 리드 문단과 겹친다(1600·1700 실측). 새 요소·
	   문구 변경 없이 1920 자연폭(548)을 이 구간 하한으로 고정 — 1920 은 이 규칙권 밖(그대로). */
	.sec2__txt{min-width:548px;}
}
/* [지휘자 04:5x 지시 · 퀵메뉴↔본문] .quick(fixed;right:0;width112) 가 컨테이너(1440, ≥1440
   에서 padding0+auto센터링) 여백이 112px 보다 작은 구간(1440~1663 대략)에서 본문 우측
   끝(sec5 세로 리스트 등)을 덮는다(1600 TOP 버튼×부제 453px² 겹침 실측). 슬라이더 카드
   (.sec4__item·.sec6__item, 화면 밖으로 이어지는 설계)는 제외 대상이라 손대지 않는다 —
   본문 컨테이너에만 퀵메뉴 폭만큼 우측 여백을 더해 겹침 자체를 없앤다(새 모양 0, 좌우
   비대칭은 감수). */
/* [퍼피-2 1440·1441 x0 붙음 대응 — 지휘자 05:0x 지시] #main .container 는 max-width:1440
   +padding:0(reset.css, 무조건) 이라 뷰포트가 정확히 1440~1469 사이일 때 auto 센터링
   여백이 15px 에 못 미친다(1440 자체는 0). section-header 같은 정상흐름 텍스트가 그 여백만
   그대로 받아써 x0 로 붙는다. 자연 여백이 15px 를 채울 때까지만(1470 부근) 부족분을
   padding 으로 보충 — 1470 이후는 자연 센터링이 이미 15 를 넘어 0 으로 사라진다(1920 은
   240 이라 전혀 안 걸림).
   [실측 — 폭 스윕 재실행에서 발견] `#main .container` 전체에 걸면 `.sec7 > .container`
   (874+72+493=1439, 여유 0px 로 딱 맞춘 flex 2단)도 같이 패딩을 받아 **1440·1441 에서
   scrollWidth 1454(14px 넘침)** 가 났다 — sec7 은 이 지시에 있는 7곳(진료철학·sec4·sec5·
   sec6__head)에 없다. `#main .container` 대신 **그 4곳만** 선택해 sec7 은 그대로 둔다. */
/* [지휘자 05:4x 정정 지시 — 실제 원인] 위 규칙이 계산값에 안 걸린 진짜 이유 — `reset.css`
   의 `#main .container{padding-left:0;padding-right:0}` 가 **id(#main, body 의 id)+class**
   특이도라 내 `.sec3 > .container`(class 만, id 없음) 보다 항상 이긴다(문서 순서와 무관 —
   id 가 class 개수를 이긴다). `#main` 을 앞에 붙여 같은 층(id+class)으로 맞추고 자식결합자
   까지 더해 확실히 이기게 한다. */
@media (min-width:1440px) and (max-width:1919px){
	:root{--main-margin:calc((100vw - 1440px) / 2);}
	#main .sec3 > .container,
	#main .sec4 > .container,
	#main .sec5 > .container,
	#main .sec6 > .container{padding-left:max(0px, calc(15px - max(0px, var(--main-margin))));padding-right:max(0px, calc(15px - max(0px, var(--main-margin))));}
}
/* [퍼피-2 · CSS-05 위반 제거 06:4x] 위 4행의 `!important` 2곳을 지웠다 — `#main .secN > .container`
   (id1+class2)는 `reset.css` `#main .container{padding:0}`(id1+class1)보다 특이도가 이미 높아
   `!important` 없이도 이긴다. 지운 뒤 1439·1440·1441(모션 끔·켬 6폭) `.sec3/.sec4/.sec6 > .container`
   padding·h2 x 계산값 — 지우기 전과 완전 동일(15px/15px/14.5px+margin0.5px · h2 x15). CSS-05는
   그누보드 코어 오버라이드 외 `!important` 사용을 금지한다(rules.md §CSS-05) — 이건 코어 오버라이드가
   아니라 같은 프로젝트 CSS 안 특이도 다툼이라 해당 사유가 없었다.

   [퍼피-2 · 1590~1680 padding-right:130px 죽은 규칙 제거] 이 규칙은 `#main .container`(id1+class1)
   전체를 겨냥했지만 목적한 대상(sec5 미용시술 부제↔TOP 겹침)은 위 블록의 `#main .sec5 > .container`
   (id1+class2, 특이도 더 높음)가 `!important` 유무와 무관하게 항상 이겨 **한 번도 적용된 적이 없다**
   (실측 06:4x — sec5 pr 1590~1680 전 구간 0px, !important 제거 전/후 동일). 실제로 이 규칙을 받은
   것은 sec2·sec7(같은 특이도라 파일 순서로 이김, pr 130px)뿐인데, 퍼피-5 3차 P5R3-13이 캡처 대조로
   "sec2·sec7 배치 차 안 보임"(시각 영향 0)을 확인했다 — 목적도 못 이루고 부작용도 없는 죽은 규칙이라
   삭제한다. 삭제 뒤 width-sweep(1590~1919 포함 56폭)에서 sec2·sec7 신규 겹침·가림 0건 확인(아래
   보고서 §2). 1600~1920 퀵메뉴가 영상/과정 슬라이더 4번째 카드 글자 일부를 지나가는 것은 결정-39
   설계상 허용 항목이라 이 삭제와 무관하다. */

@media (max-width:1600px){
	.quick{width:100px;}
	#header .logo {left: 15px;}
	#header .head-util {right: 15px;}
}

/* [반응형·접근성 담당 · 담당 간 조율 03:1x 지시 ②] GNB 겹침 실측 — 1420px 폭에서 옛 골격 기본값
   (padding 0 260px · gap 65px) 그대로면 마지막 항목(상담예약, x1138~1192)이 언어pill(x1172~)
   과 19.4px 겹친다. 1439/1440 경계 체계에 맞춰 여기서도 1439 까지 적용한다(1401~1439
   사이 폭이 어느 쪽 경계에도 안 걸리던 지점 — §머리말 「경계 판단」). */
@media (max-width:1439px){
	#gnb{padding:0 180px;}
	#gnb > ul{gap:40px;}
	.gnb__link{font-size:var(--fs-body);}
	#footer .inner{gap:40px;}
	#footer .ft_logo{flex:0 0 200px;}
}

@media (max-width:1280px){
	/* 데스크톱 기준 분기 — GNB 간격·폰트 2차 조정 (RWD-01). 1024 이하에서 GNB 자체가
	   숨으므로 이 구간은 1281~1439 폭 미세조정만 */
}
/* [퍼피-5 2차 V2-02] padding180·gap40 은 1300 이하에서 여전히 부족해 실측 겹침(1100 −59.8 ·
   1300 −7.8, 재실측치)이 났다 — 1300 이하 구간은 좌우 padding·gap 을 크게 줄인다(글자·순서
   변경 없음, 폭만 더 준다). */
@media (max-width:1300px){
	#gnb{padding:0 40px;}
	#gnb > ul{gap:16px;}
}
@media (max-width:1150px){
	#gnb{padding:0 20px;}
	#gnb > ul{gap:8px;}
}
@media (max-width:1050px){
	#gnb{padding:0 8px;}
	#gnb > ul{gap:2px;}
	.gnb__link{font-size:var(--fs-label);}
}
/* 옛 골격 `@media(max-width:1200px){gap:28px}` 는 위 1300 규칙(16px)을 1200 이하에서
   다시 28 로 늘려 1100 폭 겹침(−59.8)을 되살리므로 제거했다 — 16px 로 1300~1025 전 구간 통일. */

@media (max-width:1024px){
	/* [RWD-01] PC ↔ 모바일 분기점 : GNB 숨김, 사이트맵이 모바일 메뉴 역할 */
	:root{--h-header:70px;}
	#gnb{display:none;}
	#header .logo img{width:90px;height:auto;}   /* [반응형·접근성 담당] 옛 값 140px 는 70px 헤더에서 오히려
		로고(82px 높이)가 헤더보다 커지는 역방향 값이었다 — 헤더 높이에 맞춰 축소 */

	#footer{padding:60px 0;}
	#footer .inner{flex-wrap:wrap;gap:30px;}
	#footer .ft_logo{flex:0 0 auto;}
	#footer .right{width:100%;flex:0 0 100%;}
}

@media (max-width:768px){
	
	#footer .terms > ul{flex-wrap:wrap;gap:12px 32px;}
	#footer .info__row{gap:6px 20px;}   /* [반응형·접근성 담당] 옛 `.info ul` 은 이 프로젝트에 없는 죽은
		셀렉터(P1-14 재작업으로 `.info__row`+`<span>` 구조로 바뀜) — 실제 클래스로 교체 */
	#footer .info__row span,
	#footer .info__row a{font-size:var(--fs-label);}

	.quick{width:50px;}
	.quick__item {height: 50px;}
	.quick__item span {display: none;}
	.quick__item a img {max-width: 25px; display: block; height: 25px;}
	.quick__top {font-size: 14px; height: 38px;}
	.quick__item--faq:before {height: 187px;}
	/* .btn-top{width:44px;height:44px;} */

	#footer .terms > ul > li:not(:last-child):after {right: -16px;}
}

@media (max-width:480px){
	:root{--h-header:60px;}
	#header .logo img{width:76px;height:auto;}
	#footer{padding:40px 0;}
	#footer .info__row{flex-direction:column;gap:6px;}
	#footer .copyright{font-size:var(--fs-caption);}
	.quick {bottom: 50px;}
	
}

/* [퍼피-5 2차 V2-06 · 지휘자 승인 · 05:0x 결정-37 확장] 고정(position:fixed) 퀵메뉴가
   본문 글자·부제를 가린다(375 29줄·540 28줄 · 601~1599 폭스윕 재확인 1024 8곳·1280 6·1440 9·
   1480 7). 시안도 1920 한 폭에서 퀵메뉴가 페이지 맨 아래 푸터 옆에 그려져 있다 — 새 모양 0
   으로 "같은 모양 그대로 고정을 풀고 푸터 바로 위 흐름 배치"한다. 원래 ≤600 만이었으나
   지휘자 지시로 **≤1599 까지 확장**(1600 이상은 그대로 fixed 로 띄운다 — 그 폭의 겹침은
   위 §112px 여백 규칙으로 별도 대응). HTML 순서는 footer→quick(못 바꿈, 구조 담당 소관
   아님) 이라 #wrapper 를 flex 로 바꿔 order 로만 시각 순서를 main→quick→footer 로 되돌린다
   (#header·.sitemap 은 position:fixed 라 order 영향 없음). 폭·내부 목록(TOP 포함) 모양은
   그대로, 위치만 고정→흐름. */
/* @media (max-width:1599px){
	#wrapper{display:flex;flex-direction:column;}
	#container{order:1;}
	.quick{order:2;position:static;margin:24px auto;bottom:auto;right:auto;}
	#footer{order:3;}
} */

/* ═════════════════════════════════════════════
   header/hero : 구조적 안전장치 — 1439/1440 경계
═════════════════════════════════════════════ */
/* [반응형·접근성 담당 · 담당 간 조율 03:1x 지시 ①] .sec2__txt 는 이제 main.css 에서 min-width:420px 절대좌표다
   (구조 담당 「R3-A2」 재작업). left:58.906%(=.sec2 폭 기준) + min-width420 은
   .sec2 폭(W) × 0.58906 + 420 > W 가 되는 지점(계산상 W≈1022px, 실측은 아래 폭별 표에서
   1024 이하 전부 재확인)부터 본문 밖으로 밀려난다 — 1439 이하 전 구간에서 흐름 배치로
   되돌린다(새 요소 없음 · 재배치만, FIG-06 예외). */
@media (max-width:1439px){
	.m-visual{height:700px;}
	.visual__scroll{top:auto;bottom:60px;}

	.sec2{height:auto;padding:70px 0 60px;}
	.sec2 > .container{position:relative;z-index:1;display:flex;flex-direction:column; gap: 40px;}
	.sec2__txt {text-align: center;}
	.sec2__sign {justify-content: center;}
	/* [지휘자 마무리 지시 ② 2차 — 사진과 완전히 같은 자리에 겹치면 사진(z-index:1)이 위에
	   그려져 텍스처가 0px 보인다("display:none 과 결과가 같다" — 지휘자 지적, FIG-06 반대방향
	   그대로였다). 1920 시안 실측 관계(텍스처판 x0~832·전체높이 vs 사진 x170~1006 y195~662,
	   전체높이886) — **텍스처판이 사진보다 왼쪽·위·아래로 더 크게 깔리고, 사진 오른쪽은
	   판 밖으로 나간다**(좌 170·상 195·하 224 노출, 우측 노출 0 — 판·사진 폭은 832 vs 836로
	   거의 같고 판이 왼쪽으로 시프트된 관계다). 이 관계를 photo 폭 기준 비율로 재구성해
	   재배치(새 모양 0) — photo 의 폭·중앙정렬 공식과 같은 값을 커스텀 프로퍼티로 .sec2 에
	   두고(형제라 box 가 pic 을 직접 참조 못해 같은 식을 복제), box 를 그 값 기준으로
	   왼쪽 15%·위 20px·아래 28px 크게 깐다(우측은 그대로 둬 사진이 넘치게 한다). */
	/* [퍼피-5 2차 V2-05 — 원인 확인됨] 커스텀 프로퍼티는 값을 미리 계산해 담아두지 않고
	   "쓰이는 자리의 문법대로" 다시 해석된다 — `--photo-w` 안의 `100%` 를 `width`(가로 기준)
	   에서 쓰면 맞지만 같은 변수를 `height`(세로 기준) 안에서 쓰면 그 100% 가 부모 "높이"
	   기준으로 다시 풀려 사진 폭이 좁아져도 텍스처판 높이가 그대로 480 기준(316px)으로
	   남았다(375 폭 사진은 345 로 좁아지는데 판은 그대로 커서 아래 노출이 103 으로 부풀고,
	   글자 겹침 실측까지 났다). 가로·세로 어디서 써도 값이 안 바뀌는 `vw`(뷰포트 폭 단위)로
	   바꿔 이 문제를 근본적으로 없앤다. */
	.sec2{
		--photo-w:min(480px,calc(100vw - 30px));
		--photo-left:max(15px,calc(50vw - 240px));
	}
	.sec2__box{
		top:50px;left:calc(var(--photo-left) - (var(--photo-w) * 0.15));
		transform:none;max-width:none;
		width:var(--photo-w);height:calc(var(--photo-w) * 0.5586 + 48px);
		aspect-ratio:auto;
	}
	.sec2__pic{position:relative;left:auto;top:auto;width:100%;max-width:480px;margin:0 auto;}
	.sec2__txt{position:relative;left:auto;top:auto;width:100%;min-width:0;margin-top:32px;}
	.sec2__eyebrow,
	.sec2__txt h2,
	.sec2__lead,
	.sec2__sign{position:static;top:auto;left:auto;width:auto;}
	.sec2__txt h2{margin-top:12px;font-size:var(--fs-head-lg);line-height:1.2;}
	.sec2__lead{margin-top:18px;}
	.sec2__sign{margin-top:24px;height:auto;}

	/* [담당 간 조율 03:1x 지시 ①] 서명 줄(P1-05, R3-A2 절대좌표)도 같은 흐름 배치 대상 —
	   구조 담당 가 이 구간을 03:1x 에 다시 고쳐(병원명·「원장」·서명 이미지 3개를 각각
	   .sec2__sign 기준 절대좌표로 세분화) eyebrow/h2 위로 겹치는 것을 재실측(375폭
	   스크롤 650 캡처)으로 확인했다 — 손자 요소까지 전부 흐름으로 되돌린다. */
	.sec2__sign-hospital,
	.sec2__sign-name{position:static;top:auto;left:auto;}
	.sec2__sign{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
	.sec2__sign-name{display:flex;align-items:center;gap:8px;}
}

@media (max-width:1024px){
	.m-visual{height:560px;}
	.visual__scroll{bottom:36px;}
	.sec2{padding:60px 0 50px;}
	.sec2__box{top:40px;}   /* .sec2 padding-top 70→60 이 되며 위 노출(20px 고정)도 60-20=40 로 갱신 */
	.sec2__txt h2{font-size:var(--fs-head-ml);}
}

@media (max-width:768px){
	.m-visual{height:480px;}
	.sec2__txt h2{font-size:26px;}
	.sec2__lead p {font-size: 20px;}
	.sec2__lead p + p br {display: none;}

	.sec3 .section-header h2 {font-size: 26px;}
	.sec3 .section-header p {font-size: 20px;}
}

@media (max-width:480px){
	.m-visual{height:420px;}
	.visual__scroll{display: none;}
	.sec2__txt h2{font-size:22px;}
	.sec2__lead p {font-size: 18px;}
	.sec2__lead p br {display: none;}
	.sec2__lead p + p {font-size: 16px;}
}

/* ═════════════════════════════════════════════
   main : responsive      [반응형·접근성 담당 재작성 — 실제 .sec2~.sec7 BEM 기준]
═════════════════════════════════════════════ */

/* ── sec3 진료 철학 — list 가 .container 안에서 절대(right:0) 라 container 가 좁아지면
   section-header(max-width:530) 와 겹친다(1336px 미만에서 실측 겹침 확인) ── */
@media (max-width:1439px){
	.sec3{height:auto;overflow:visible;padding:70px 0;}
	.sec3 > .container{padding-top:0;display:flex;flex-direction:column;gap:40px;}
	.sec3__list{position:static;right:auto;top:auto;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;}
}
@media (max-width:1024px){
	.sec3{padding:60px 0;}
}
@media (max-width:768px){
	.sec3{padding:50px 0;}
	.sec3__list{gap:16px;}
	.sec3__item{height:auto;min-height:270px;padding:20px; flex-wrap: wrap; justify-content: center; gap: 0;}
	.sec3__item-txt {text-align: center; width: 100%;}
	.sec3__item-txt strong {font-size: 18px;}
	.sec3__item-txt p {font-size: 16px;}
}
@media (max-width:480px){
	.sec3{padding:40px 0;}
	.sec3__list{grid-template-columns:1fr;}
	.sec3__item{gap:16px;}
	.sec3 .section-header h2 {font-size: 22px;}
	.sec3 .section-header p {font-size: 18px;}
	.sec3__item {min-height: auto;}
}

/* ── sec4 과정·시술 — 카드(고정 450×600)는 Swiper 가 가로 스크롤로 처리한다(섹션 자체
   overflow:hidden 이라 문서 가로 넘침은 없음, FIG-06: 새 레이아웃을 만들지 않고 그대로 슬라이드).
   여기서는 제목 nowrap 이 좁은 폭에서 텍스트를 잘라내는 것만 고친다(FIG-07 — 문구를 줄이지
   않고 레이아웃/줄바꿈으로 푼다) 와 좌측 첫 카드가 컨테이너 패딩과 어긋나지 않게 정렬한다. ── */
@media (max-width: 1600px){
	.sec4__nav {display: flex;}
}   

@media (max-width:1439px){
	.sec4 .section-header h2{white-space:normal;max-width:600px;}
	.sec4__list{padding-left:var(--pad-side);}
	.sec4__nav{padding-right:var(--pad-side);}
}
@media (max-width:1024px){
	
	.sec4__deco{width:38%;}
}
@media (max-width:768px){
	.sec4 .section-header h2 {font-size: 26px;}
	.sec4 .section-header > p{font-size:var(--fs-16);}
	.sec4__desc p{font-size:var(--fs-16);}
	.sec4__item{height:440px;}
	.sec4__item-pic{width:100%;height:340px;}
	.sec4__item-icon{left:50%; transform: translateX(-50%); top:210px;width:72px;height:72px;}
	.sec4__item-icon img{width:40px;}
	.sec4__item-tit{width:auto;left:16px;right:96px;top:44px;font-size:var(--fs-18);}
	.sec4__item:hover .sec4__item-tit--hover,
	.sec4__item-tit--hover{top:190px;}
	
}
@media (max-width:480px){
	.sec4 {padding-top: 100px;}
	.sec4 .section-header h2 {font-size: 22px;}
	.sec4__item{height:380px;}
	.sec4__item-pic{height:290px;}
}

/* ── sec5 미용시술 — 왼쪽 740px 고정 feature 가 flex 행에서 줄지 않아(flex:0 0 740),
   본문 컨테이너가 740px 아래로 좁아지면 오른쪽 세로 슬라이더가 밀려 폭 0 이 된다
   (실측 768px 폭 sliderLeft=sliderRight=755 — 미용시술 목록이 완전히 사라짐).
   새 요소 없이 세로 스택으로만 재배치한다(FIG-06 예외). ── */
@media (max-width:1439px){
	.sec5{margin-top:100px;}
	.sec5__body{flex-direction:column;height:auto;}
	.sec5__feature{width:100%;flex:0 0 auto;height:360px;}
	.sec5__slider{width:100%;flex:0 0 auto;height:420px;}
	.sec5__list{transform:translateY(-216px);}   /* [P5인계 반영 · 반응형 10:5x 재계산]
 인터랙션가 css/main.css 의 .sec5__item/.sec5__item-pic pitch 283→284 로 정정(작업 문서)한
 뒤 이 파일의 옛 값(-158.5px = -(1×283)+(420-283)/2)이 283 기준으로 남아 인계됐다.
 새 값 = -(1×284)+(420-284)/2 = -284+68 = -216. 이 값은 no-JS 정적 폴백일 뿐이고(§Swiper 초기화 후
 JS 가 즉시 대체 — domcontentloaded 직후 실측해도 이미 JS 인라인 transform 이 같은 값으로 덮여 있음,
 1024/900/1300 폭 3곳 재현), 시각 결과는 JS 가 결정한다. */
}
@media (max-width:1024px){
	.sec5{margin-top:80px;}
	.sec5__feature{height:300px;}
}
@media (max-width:768px){
	.sec5{margin-top:60px;}
	.sec5 .section-header h2 {font-size: 26px;}
	.sec5__feature{height:260px;}
	.sec5__feature-txt{padding:0 24px;gap:12px;}
	.sec5__feature-txt h3{font-size:var(--fs-18);}
	.sec5__feature-txt p{font-size:var(--fs-16);}
	.sec5__slider{height:320px;}
	.sec5__list{transform:translateY(-88.5px);}   /* -(1×195)+(320-195)/2 — 아래 item 축소값 기준 */
	.sec5__item{gap:20px;height:195px; display: flex; align-items: center;}
	.sec5__item-pic{flex:0 0 180px;width:180px;height:161px;}
	.sec5__item-col{gap:24px;}
	.sec5__item-arrow{width:60px;}
	.sec5__item a {gap: 20px;}
	.sec5__item-txt p br {display: none;}
	.sec5__item-txt strong {font-size: 18px;}
	.sec5__item-txt p {font-size: 16px;}
}
@media (max-width:480px){
	.sec5 .section-header h2 {font-size: 22px;}
	.sec5 .section-header p {font-size: 18px;}
	.sec5__feature{height:220px;}
	.sec5__slider{height:280px;}
	.sec5__item{gap:14px;height:170px;}
	.sec5__item-pic{flex:0 0 140px;width:140px;height:126px;}
	.sec5__item-txt strong{font-size:var(--fs-18);}
	.sec5__item-txt p{font-size:var(--fs-14);}
	.sec5__item-arrow{width:48px;}
}
/* [P5R4-03 · 퍼피-5 4차 지적 · 원인 확정 — 실측(지워보기 아닌 대조군 측정)]
   375/480 은 정상인데 320~340 만 겹친다 — 문구는 바꾸지 않는다(FIG-07). 원인은 "보톡스" 항목의
   설명문(item-txt p)이 이 좁은 폭에서만 4줄로 줄바꿈돼(.sec5__item-col scrollHeight 178px) 고정
   height:170px 인 .sec5__item 을 8px 넘친다 — overflow:visible 이라 다음 슬라이드 쪽으로 텍스트가
   번져 "사진 아래 가장자리에 반쯤 잘려 겹침"으로 보인다(실측: 320·330·340 폭 maxColScrollH=178,
   350·360·375 폭은 154 로 3줄에서 멈춤 — 340/350 경계에서 줄바꿈 여부가 갈림. Swiper
   slidesPerView:'auto' 는 이 실측 높이를 그대로 읽으므로(js/main.js:243~261, 파일 미변경)
   item 높이만 늘리면 JS 쪽 손질 없이 겹침이 없어진다). 새 요소 없이 기존 슬롯 높이만 키운다(FIG-06). */
@media (max-width:340px){
	.sec5__slider{height:300px;}
	.sec5__item{height:184px;}
}

/* ── sec6 영상/미디어 — 슬라이더가 .container 밖(1920 풀블리드)이라 왼쪽 여백이
   1920 컨테이너 거터(240px) 고정값이다. 1439 이하는 container 자체가 --pad-side(15px)
   흐름 패딩으로 바뀌므로 슬라이더 좌측 들여쓰기도 같은 기준으로 맞춘다. ── */
@media (max-width:1439px){
	.sec6{margin-top:100px;}
	.sec6 > .container{padding-left:var(--pad-side);padding-right:var(--pad-side);}
	.sec6__slider{margin-left:var(--pad-side);}
}
@media (max-width:1024px){
	.sec6{margin-top:80px;}
}
@media (max-width:768px){
	.sec6{margin-top:60px;}
	.sec6 .section-header h2{font-size:var(--fs-head-s);}
	.sec6__nav-btn{width:44px;height:44px;}
	.sec6__item{flex:0 0 300px;width:300px;height:auto;}
	.sec6__item-tit{font-size:var(--fs-16);}
}
@media (max-width:480px){
	.sec6__item{flex:0 0 240px;width:240px;height:auto;}
	/* [지휘자 05:4x 지시 ② — geom-snap-hf.js 320폭 발견] .sec6__head 가
	   flex(space-between)인데 title+장식바(80+gap32=112)+nav(44+12+44=100) 합이
	   컨테이너 폭(320 에서 290)보다 커도 아무 것도 안 줄어 next 버튼이 화면 밖으로
	   34px 밀려났다(scrollWidth 는 .sec6{overflow:hidden} 에 가려 320 그대로라 폭
	   스윕에는 안 잡혔다 — 보이는 잘림 전용 도구에서만 나왔다). 장식바·nav 를 줄인다
	   (문구·모양 변경 없음, 크기만). */
	.sec6 .section-header{gap:16px;}
	.sec6 .section-header h2 {font-size: 22px;}
	.sec6 .section-header:after{flex:0 0 32px;width:32px;}
	.sec6__nav{gap:8px;}
	.sec6__nav-btn{width:36px;height:36px;}
	.sec6__nav-btn img{width:16px;height:16px;}
	.sec6__item-date {font-size: 14px;}
}

/* ── sec7 오시는 길 — map(874 고정)+info(493 고정) 합계 1439px 를 좁은 컨테이너가 못 받아
   main.css 원본 그대로 두면 겹친다. layout.css 의 1439 이하 안전장치(flex 유동폭)는
   진료시간 행(dd, nowrap)이 필요로 하는 최소폭(dt77+gap20+dd약160=약260px)을 여전히
   못 만족해 375px 에서 140px 넘침이 났다(구조 담당 인계 §3 실측) — 유동폭이 아니라
   지도 위·정보 아래 완전 스택으로 바꿔 info 가 컨테이너 전체 폭을 받게 한다. ── */
@media (max-width:1439px){
	.sec7{margin-top:100px;padding:50px 0;}
	.sec7 > .container{flex-direction:column;gap:32px;}
	.sec7__map{flex:0 0 auto;width:100%;}
	.sec7__info{flex:0 0 auto;width:100%;padding-top:0;}
}
@media (max-width:1024px){
	.sec7{margin-top:80px;}
}
@media (max-width:768px){
	.sec7{margin-top:60px;padding:40px 0;}
	.sec7__info .section-header h2{font-size: 26px;}
	.sec7__tel a{font-size:var(--fs-22);}
}
@media (max-width:480px){
	/* [방어값 · 실측상 불필요] 260px 요구폭은 480 컨테이너(450)에서도 여유가 있으나
	   글자 확대(브라우저 200%)·초소형 기기 대비 줄바꿈 허용은 남겨 둔다(FIG-07 — 문구는
	   그대로, nowrap 만 해제) */
	.sec7__hours-row{flex-wrap:wrap;gap:4px 20px;}
	.sec7__hours-row dd{white-space:normal;}
	.sec7__info .section-header h2 {font-size: 22px;}
	.sec7__hours h3 {font-size: 18px;}
}

/* ═════════════════════════════════════════════
   sub : responsive      [P-03 이관 · 원본 css/sub.css]
═════════════════════════════════════════════ */
@media (max-width:1400px){
	.real-cont{padding:100px 0 140px;}
	.page-header{height:420px;}
	.page-header h1{font-size:var(--fs-head-lg);letter-spacing:-1.44px;}
	#sub .section-header h2{font-size:var(--fs-head-m);letter-spacing:-1.08px;}
	.s1_1 .arti01{gap:40px;}
}

@media (max-width:1280px){
	/* 데스크톱 기준 분기 — 컨테이너 2차 축소 (RWD-01) */
}
@media (max-width:1024px){
	.real-cont{padding:70px 0 100px;}
	.page-header{height:340px;}
	.page-header h1{font-size:var(--fs-head-m);letter-spacing:-1.08px;}
	.lnb ul{overflow-x:auto;-webkit-overflow-scrolling:touch;}
	.lnb ul li{flex:0 0 auto;}
	.lnb ul li a{height:56px;padding:0 20px;font-size:var(--fs-body-s);white-space:nowrap;}
	#sub .section-header{margin-bottom:40px;}
	#sub .section-header h2{font-size:var(--fs-head-sm);padding-top:20px;letter-spacing:-.9px;}
	#sub .section-header p{font-size:var(--fs-button);margin-top:16px;}
	.article-header h3{font-size:var(--fs-head-xs);}
	article ~ article{margin-top:70px;}
	.s1_1 .arti01{flex-direction:column;gap:28px;}
	.s1_1 .arti01 .img-box{flex:0 0 auto;width:100%;}
	.s1_1 .arti01 .txt-box{width:100%;}
	.s1_1 .arti02 ul li{flex:0 0 calc(50% - 10px);}
}

@media (max-width:768px){
	.real-cont{padding:50px 0 80px;}
	.page-header{height:260px;}
	.page-header h1{font-size:var(--fs-head-s);letter-spacing:-.84px;}
	#sub .section-header h2{font-size:var(--fs-head-xs);letter-spacing:-.72px;}
	.article-header h3{font-size:var(--fs-body-l);}
	.s1_1 .arti01 .txt-box {padding-left: 0;}
	.s1_1 .arti01 .txt-box p{font-size:var(--fs-body-s);line-height:1.8;}
	.s1_1 .arti02 ul li{padding:24px;}
	.s1_1 .arti02 p {font-size: 22px;}
	.s1_1 .arti02 .quote-mark {font-size: 80px; line-height: .8; margin-bottom: 0;}
	.s1_1 .arti03 h2 {font-size: 32px;}
	.s1_1 .arti01 .txt-box .name {font-size: 32px;}
}

@media (max-width:480px){
	.page-header{height:200px;}
	.page-header h1{font-size:var(--fs-head-xs);letter-spacing:-.72px;}
	.lnb ul li a{height:48px;padding:0 14px;font-size:var(--fs-label);}
	#sub .section-header h2{font-size:var(--fs-head-2xs);}
	.s1_1 .arti02 ul{gap:12px;}
	.s1_1 .arti02 ul li{flex:0 0 100%;padding:20px;}
	article ~ article{margin-top:50px;}
	.s-title .line {margin-top: 30px;}
	.s1_1 .arti01 .txt-box .career-list li {font-size: 16px;}
	.s1_1 .arti01 .txt-box .role {margin-top: 10px;}
	.s1_1 .arti01 .txt-box .career {margin-top: 15px;}
	.s1_1 .arti01 .txt-box .lead {margin-top: 50px; font-size: 16px;}
	.s1_1 .arti02 p {font-size: 20px;}
	.s1_1 .arti02 .quote-mark {font-size: 60px;}
	.s1_1 .arti03 h2 {font-size: 26px;}
	.s1_1 .arti03 p {font-size: 18px;}
	.s1_1 .arti03 p br {display: none;}
}

/* ═════════════════════════════════════════════
   sub 공통 골격 2 — 서브 비주얼(722px 절대좌표)·2단메뉴·s-title
   [반응형·접근성 담당(퍼피-2) 2026-09-24 신설] `.page-header.type1~4 h1`·`.lnb`·`.lede`가
   전부 1920 캔버스 절대좌표(px 고정)로 짜여 있어 1439 이하 전 폭에서 문서 밖으로 넘친다
   (`.lnb{width:1440px;left:240px}`는 뷰포트<1695 부터 필연 초과). 기준선 실측(168조합)
   전건이 이 두 요소 때문에 넘침이었다 — 위 §450~497 옛 「sub : responsive」 구간은 이
   절대좌표 구조가 생기기 전(구 `.page-header{height}`만 있던 시절) 값이라 새 구조를
   못 잡는다. 새 요소 없이 흐름 배치로 되돌린다(FIG-06 예외 — 재배치). 1920 값(§sub.css
   107~141)은 건드리지 않는다.

   [나선폭 1439 재발 — 실측] `.lnb{width:1440px}` 절대좌표는 `max-width:1439px`로 걸면
   정확히 뷰포트 1440에서 이 미디어쿼리가 안 걸려(1440은 1439 이하가 아니다) `.lnb`만
   원본값 그대로 남아 240px 넘침이 재발했다(1440폭 6요소 격리 실측 — `.lnb` display:none
   시 scrollWidth 1680→1440, 그 외 `#gnb`·`.quick`·`#header` 격리는 변화 0). 이 파일
   §25~36에 이미 기록된 같은 유형이라 여기서도 `max-width:1440px`로 맞춘다.
═════════════════════════════════════════════ */
@media (max-width:1600px){
	/* 히어로 — 절대좌표 제목을 흐름으로. 원문 변경 없음(FIG-07) */
	.page-header.type1,
	.page-header.type2,
	.page-header.type3,
	.page-header.type4{
		height:auto;min-height:420px;
		padding:300px var(--pad-side) 100px;
		margin-top:calc(-1 * var(--h-header));
	}
	.page-header .container{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:100%;max-width:1440px;margin:0 auto;}
	.page-header h1{
		position:static;
		font-size:clamp(32px, 5vw, 79px);
		line-height:1.2;
		white-space:normal;
		max-width:100%;
	}
	.page-header.type2 .lede{
		position:static;
		margin-top:16px;max-width:100%;
	}
	/* 2단메뉴 — 1440 고정폭 절대좌표를 흐름 폭 100%로 */
	.lnb{
		position:static;left:auto;top:auto;width:100%;
		margin-top:32px;
	}
	.lnb ul{gap:8px;flex-wrap:wrap;}
	.lnb ul li a{padding:0 24px;font-size:var(--fs-body-s);}
}
@media (max-width:768px){
	.page-header.type1,
	.page-header.type2,
	.page-header.type3,
	.page-header.type4{min-height:320px !important; height: 100% !important; padding:100px var(--pad-side) 70px;}
	.page-header h1{font-size:clamp(26px, 7vw, 48px);}
	.lnb ul li a{height:44px;padding:0 16px;}
}
@media (max-width:480px){
	
	.lnb ul{gap:6px;}
	.lnb ul li a{height:40px;padding:0 12px;font-size:var(--fs-label);}
}

/* s-title — 1920 값(48px/57px·nowrap) 확정, 하위 폭은 줄바꿈 허용 + clamp 축소만
   (`TYP-05` — 상위 구간 오버라이드 없음, 하위부터 순서대로 잰다) */
@media (max-width:1440px){
	.s-title h2{white-space:normal;font-size:clamp(28px, 4.2vw, 48px);line-height:1.25;}
}
@media (max-width:768px){
	.s-title h2{font-size:clamp(24px, 6vw, 34px);}
	.s-title .eyebrow{font-size:14px;}
}