@charset "utf-8";
/* layout.css는 전체적인 스타일 정의 */
/* INPIAD Publishing Standard v1.3 — 헤더 / GNB(BEM+.is-open 드롭다운) / 푸터 / 사이트맵(BEM) / 퀵버튼 */

#wrapper{position:relative;}

/* ─────────────────────────────────────────────
   header : S
───────────────────────────────────────────── */
/* [결정-05·22·확인 사항 1] 고정형 · 투명 배경 전 구간 — 스크롤·서브 반전 상태는 피그마에
   없어 만들지 않는다(FIG-06). 흰 섹션 위에서 흰 GNB 가 안 보이는 것은 알려진 확인 사항이다. */
#header{
	position:fixed;top:0;left:0;width:100%;height:var(--h-header);
	z-index:var(--z-header);
	background:transparent;
	transition: all .2s linear;
}
#header.hactive {background: linear-gradient(to bottom,rgba(0, 0, 0, .4) 0%,rgba(0, 0, 0, .32) 20%,rgba(0, 0, 0, .22) 45%,rgba(0, 0, 0, .14) 70%,rgba(0, 0, 0, 0) 100%);}
/* [V-01 정정 · 퍼피-5 반려 03:5x · 지휘자 03:56 재확인] R3-A1(.gnb__item 을 1440px↑ 에서
   position:absolute 로 바꾼 것)이 #gnb > ul 의 마지막 flow 높이 기여자를 없애 #header .container
   가 콘텐츠 기준 height:0 으로 무너졌다 — .logo{bottom:0} 등 절대배치 자식이 "컨테이너 자기
   테두리"를 0 으로 읽어 y −82(로고 자기 높이만큼 위)로 튕겨나갔다. [재발: 번질 곳 누락 —
   R3-A1 을 고칠 때 그 컨테이너를 참조하는 다른 자식(.logo/.head-util)의 높이 전제를 안 쟀다]
   컨테이너 자기 높이를 헤더 높이에 명시로 고정해 무너지지 않게 한다. 1440px 미만은 로고 등이
   여전히 top:50%/센터링이라 이 문제가 없고, GNB 도 position:relative(flow)라 그대로 둔다. */
@media (min-width:1440px){
	#header .container{height:100%;}
}

/* 스크롤 시 헤더 숨김 — js/custom/header-scroll 의 「CSS 계약」 구현.
   JS 가 스크롤 임계값에서 `.scrolled` 와 `data-header-mode` 를 붙이지만
   그 상태를 받는 규칙이 없어 헤더가 투명한 채 고정돼 본문을 가리고 있었다. */
#header[data-header-mode="hide"].scrolled{transform:translateY(-100%);}
#header[data-header-mode="shrink"].scrolled{height:var(--h-header-shrink,64px);background:var(--c-header-bg,#fff);}

/* logo — [HTM-04] 메인은 h1. 피그마 로고 117×83 그대로(비율 유지, 좌우 64px 실측) */
#header .logo{position:absolute;top:50%;left:var(--pad-header);transform:translateY(-50%);font-size:0;}
#header .logo a{display:inline-block;}
#header .logo img{width:117px;height:auto;}
#header .logo .sub-logo {display: none;}

body#sub #header .logo img {display: none;}
body#sub #header .logo .sub-logo {display: block;}

/* [P1-01 재작업 · 노드 625:2120 실측 — 09-16 02:1x] 1440px 이상은 #footer 와 같은 원리 —
   #header .container 가 max-width:1792(!important)+margin:auto 로 이미 페이지 좌우 64px 를
   센터링으로 만들어 두는데, .logo/.head-util 이 컨테이너 자기 테두리 기준 left/right 에
   --pad-header(64) 를 한 번 더 더해 x128 로 어긋났다([재발] LESSONS §9 자산 함정과 다른
   레이아웃 함정 — figma-asset-extraction-traps.md 에는 없는 「컨테이너 padding 이중 적용」 유형,
   footer 는 이미 이 계산을 반영해 고쳐져 있었다(위 footer 주석 참조), header 만 누락).
   1439px 이하(반응형·접근성 담당 구간)는 컨테이너가 --pad-side 흐름 패딩으로 바뀌어 이 이중적용이
   없으므로 건드리지 않는다 — 이 블록은 1440px 이상에서만 적용한다. */
@media (min-width:1440px){
	#header .logo{left:0;top:20px;bottom:0;transform:none;}
}

/* gnb — [CSS-04] 9항목, 654 실측 gap. 피그마 txt 프레임 x378~1486(1108 폭) w header 1920 기준 */
#gnb{width:100%;padding:0 260px 0 260px;}
#gnb > ul{display:flex;justify-content:center;gap:0 65px;}
/* [R3-A1 재작업 2차 · 지휘자 20분 조건] 간격 80 고정 1개 값으로는 항목마다 실제 렌더 텍스트폭이
   Figma 박스폭과 1px 안팎씩 달라 5~9번이 최대 -7.5px 까지 누적했다 — 게이트 ±2 미달.
   노드 I625:2120;557:3413~3421 9개 x 를 각각 다시 읽어 항목별 절대좌표로 고정한다(간격을
   맞추는 게 아니라 각자의 목표 x 자체를 박는다 — 폭 차이가 있어도 누적이 안 생긴다).
   기준: 컨테이너 자기 테두리(페이지 x64) = 0 → left = 노드x - 64. 1440px 미만은 손대지 않는다. */
@media (min-width:1440px){
	#gnb{width:auto;padding:0;}
	#gnb > ul{justify-content:flex-start;gap:0;position:relative;height:100%;}
	.gnb__item{position:absolute;top:0;height:100%;}
}
/* [반응형·접근성 담당 · 지휘자 마무리 지시 ①] 위 9개 절대 x 는 1920 시안 노드값 그대로다 —
   1440~1919 에서 컨테이너가 1792px 상한(--w-layout) 아래로 줄면 이 고정 px 가 우측 항목을
   밀어내 언어pill 과 겹친다(1600 실측 −3.7px). 1920 결과(문서 6701·GNB x)는 절대 안 바꾼다는
   전제라 **고정 px 는 min-width:1920px 로 좁히고**, 1440~1919 는 같은 순서·같은 항목을
   content-box 폭(1920 기준 1664px = 1792−64×2) 대비 %로 재계산해 비례로만 줄인다(새 모양 0,
   1792px 이상(≈1807px 뷰포트 이상)에서는 컨테이너 자체가 1792 로 상한 걸려 % 값이 px 값과
   사실상 같아진다 — 겹침 재발 구간은 1440~1791 뿐이었다). */
@media (min-width:1440px) and (max-width:1919px){
	.gnb__item:nth-child(1){left:18.8401%;}
	.gnb__item:nth-child(2){left:26.9531%;}
	.gnb__item:nth-child(3){left:35.0661%;}
	.gnb__item:nth-child(4){left:43.1791%;}
	.gnb__item:nth-child(5){left:49.6695%;}
	.gnb__item:nth-child(6){left:57.7825%;}
	.gnb__item:nth-child(7){left:65.8954%;}
	.gnb__item:nth-child(8){left:74.0084%;}
	.gnb__item:nth-child(9){left:82.1214%;}
}
@media (min-width:1920px){
	.gnb__item:nth-child(1){left:313.5px;}   /* 병원소개  557:3413 x377.5 */
	.gnb__item:nth-child(2){left:448.5px;}   /* 지방이식  557:3414 x512.5 */
	.gnb__item:nth-child(3){left:583.5px;}   /* 지방흡입  557:3415 x647.5 */
	.gnb__item:nth-child(4){left:718.5px;}   /* 거상      557:3416 x782.5 */
	.gnb__item:nth-child(5){left:826.5px;}   /* 보험수술  557:3417 x890.5 */
	.gnb__item:nth-child(6){left:961.5px;}   /* 미용시술  557:3418 x1025.5 */
	.gnb__item:nth-child(7){left:1096.5px;}  /* 인사이트  557:3419 x1160.5 */
	.gnb__item:nth-child(8){left:1231.5px;}  /* 성형정보  557:3420 x1295.5 */
	.gnb__item:nth-child(9){left:1366.5px;}  /* 상담예약  557:3421 x1430.5 */
}
.gnb__item{position:relative;}
/* [R3-A1 버그 정정 · 03:1x 재개 — 지휘자 r4 "더 벌어짐" 실측으로 발견]
   위 43~56행 @media 블록의 `.gnb__item{position:absolute}` 가 바로 이 아래(같은 specificity)
   `position:relative` 뒤에 와서 **캐스케이드에서 졌다** — 그 결과 left 값이 절대좌표가 아니라
   자기 flow 위치에서의 상대 오프셋으로 더해져 항목마다 이전 항목 폭만큼 더 벌어졌다(끊긴 세션
   재개 중 발견 — 파일을 다시 읽어 확인, 기억에 의존하지 않음). 이 규칙 뒤에 다시 덮어써 순서를 이긴다. */
@media (min-width:1440px){
	.gnb__item{position:absolute;}
}
/* [F-07 정정 · coord-diff --tol=2 재실행] line-height 20→24(150%, 노드 실측) 로 고치면
   중심이 63+2=65 로 밀려 padding-top 53→51 로 보정(51+12=63 유지). */
.gnb__link{
	display:block;height:100%;padding-top:51px;font-size:var(--fs-16);font-weight:500;line-height:24px;
	color:#fff;letter-spacing:-.02em;white-space:nowrap;
	transition:color var(--t-base) linear;
}
/* [결정-30] 1단 hover = 네이비(피그마 653:2491 짝) · 현재 페이지 표시(.is-active)는 메인에 없음(확인 사항) */
.gnb__item:hover > .gnb__link{color:var(--c-primary);font-weight:700;}

/* [F-05 정정 · 퍼피-5 03:5x 반려] top 94(calc 94)→106 고정 · padding 30→23(패널 높이 438→388,
   9항목 기준 역산 23×2+38×9=388) — marker(:before) 의 상대 top:-12px 는 그대로 둬도 106-12=94 로
   자동으로 목표값(94)에 맞는다(패널만 옮기면 표식은 따라온다, 그래서 :before 는 안 고쳤다). */
.gnb__submenu{
	position:absolute;top:106px;left:50%;transform:translateX(-50%);
	width:224px;padding:23px 0;opacity:0;visibility:hidden;
	background:var(--c-primary);border-radius:var(--r-lg);
	transition:all var(--t-base) linear;
}
/* [H-3] 위쪽 24px 원형 표식 — 654 dropdown_indicator.png 그대로 */
.gnb__submenu:before{
	content:'';position:absolute;left:50%;top:-12px;width:24px;height:24px;margin-left:-12px;
	background:url('../images/main/ico_dropdown_top.png') center/contain no-repeat;
}
.gnb__item:hover > .gnb__submenu,
.gnb__item.is-open > .gnb__submenu{opacity:1;visibility:visible;}
/* [F-05 정정] 항목 간격(줄 높이) 42→38 · weight 400(미지정 상속)→500 명시 */
.gnb__submenu-link{
	display:block;padding:7px 30px;font-size:var(--fs-16);font-weight:500;line-height:1.5;text-align:center;
	color:#fff;white-space:nowrap;
	transition:color var(--t-base) linear;
}
/* [H-10·결정-30] 드롭다운 항목 hover = 골드(피그마 653:2491 첫 항목 색 = hover 캡처로 확인) */
.gnb__submenu-link:hover{color:var(--c-accent);}

/* head-util : 언어 pill + 햄버거 */
#header .head-util{position:absolute;top:50%;right:var(--pad-header);transform:translateY(-50%);display:flex;align-items:center;gap:23px;}
/* [P1-01/03 재작업 · 노드 625:2120 안 Frame 1359 실측 x1683 y37 174×52 — 09-16 02:1x]
   위 .logo 블록과 같은 이중적용 함정 · Frame1359 y37 은 헤더 안 세로 중앙(26)이 아니라
   고정값이라 top:50% 센터링으로는 안 나온다. 1440px 이상에서만 덮는다(반응형은 반응형·접근성 담당). */
@media (min-width:1440px){
	#header .head-util{right:0;top:37px;transform:none;}
}

.lang{position:relative;}
/* [P1-03 재작업 · Lang 노드 I625:2120;681:734 실측 x1682.5 y43.03 99×40] globe(20×20)-gap4-
   텍스트+화살표(53×32) · 좌 10 / 우 12 padding 으로 99 폭 재현. 간격 4px 는 기존 10px 오기. */
/* [V-06 정정 · 퍼피-5 03:5x 반려 · 노드 681:734 실측] 테두리 누락 — stroke #fff@0.3 1px, r100(완전 pill) */
.lang__trigger{display:flex;align-items:center;gap:4px;height:40px;padding:0 12px 0 10px;font-family:'Poppins',sans-serif;border:1px solid rgba(255,255,255,.3);border-radius:100px;}
/* [F-07 정정] 노드 I625:2120;681:740 실측 letter-spacing -3%(-.03em) · line-height 32px */
.lang__current{font-size:var(--fs-16);font-weight:500;color:#fff;letter-spacing:-.03em;line-height:32px;}
/* [P5R3-10 정정 · 지휘자 06:4x · 노드 681:739 `get_design_context` 원문 재조회] 트리거 내부는
   globe→(텍스트+화살표) 사이만 gap 4px 이고, 텍스트→화살표 사이는 별도 그룹(Frame181)이 gap 10px 로
   더 벌려 잡는다 — 기존엔 `.lang__trigger{gap:4px}` 하나로 전부 4px 처리해 폭이 93.9(시안 99, dx +4.5)로
   좁게 나왔다(4+11+12+20+4+32+4+11=... 10 이어야 할 자리가 4 라 −6, 실측 −5.1 근사). HTML 구조를 바꾸지
   않고 화살표에만 margin-left 6px 를 더해 4+6=10 을 재현 — 폭이 99 에 가까워지면 head-util 안에서 pill
   왼쪽 끝도 오른쪽(햄버거 고정) 기준으로 자연히 좌측으로 이동해 x 오차(+4.5)도 함께 줄어든다(오른쪽
   끝은 그대로 유지되므로 — 계산: 93.9+5.1=99, x 1687.1−5.1=1682.0 ≈ 시안 1682.5). */
.lang__arrow{display:block;width:11px;height:6px;margin-left:6px;background:url('../images/main/ico_lang_arrow.svg') center/contain no-repeat;}
/* [P5R3-09 정정 · 지휘자 06:4x · 노드 681:1515(Lang, 99×108)+681:1539(Frame1600, 77×96, 3줄×32)
   `get_design_context`·`get_metadata` 원문 재조회 — 지워 보기 전 값과 대조] 이전 값(배경 남색 채움 ·
   border-radius 0 0 20 20 · border-top:0)은 근거 없는 창작이었다 — 681:1515 는 `border` 클래스만
   있고 `bg-*` 클래스가 없다(681:734 닫힌 pill 도 동일 — 배경 없음 확인 대조군). 실제: 전체 투명(배경
   없음) · 모서리 4곳 전부 20px(붙은 반쪽 라운드 아님) · 테두리 1px rgba(255,255,255,.3) 그대로.
   안쪽 여백은 677:1539 offset 로 역산 — 좌우 11px(2126−2115) · 위 4px(237−233) · 아래 8px(341−333,
   비대칭). */
/* [P5R4-01 정정 · 노드 681:1515(99×108, 한 상자)+681:1539 재확인 — 4차 반려] 이전(44px 틈 + 별도
   상자)은 트리거(99×40)와 목록(99×108)이 두 덩어리로 남아 열림 전체 높이가 40+44+108=192(육안상
   보정 후 154, +46)였다 — 시안은 트리거 자체가 그 상자의 첫 줄로 흡수되는 **한 상자**다. list 를
   top:0 으로 옮겨 트리거와 같은 자리에서 시작시키고(아래 트리거 흡수 규칙과 짝), 새 모양은 만들지
   않는다(FIG-06) — list 는 이미 padding 4/0/8 + 32px×3줄 = 108 로 시안과 일치, 위치만 겹쳤다. */
.lang__list{position:absolute;left:0;right:auto;top:0;width:99px;padding:4px 0 8px;border:1px solid rgba(255,255,255,.3);border-radius:20px;background:transparent;opacity:0;visibility:hidden;transition:all var(--t-base) linear;}
.lang[data-open] .lang__list,
.lang.is-open .lang__list{opacity:1;visibility:visible;}
/* [P5R4-01] 열릴 때 트리거는 사라지지 않고(클릭 토글 유지) 자기 테두리·내용만 숨어 list 의 첫 줄
   (KOR·globe·화살표 — 트리거와 동일 자산) 아래 깔린다. 첫 줄 히트영역은 pointer-events:none 으로
   비워 클릭이 그 아래 실제 trigger 버튼에 그대로 도달하게 한다 — main.js 토글 로직(퍼피-4 소관)
   불변, CSS 만으로 흡수한다. */
.lang[data-open] .lang__trigger,
.lang.is-open .lang__trigger{border-color:transparent;}
.lang[data-open] .lang__trigger>*,
.lang.is-open .lang__trigger>*{opacity:0;}
.lang__list li:first-child{pointer-events:none;}
.lang__list a{display:flex;align-items:center;gap:4px;height:32px;padding:0 12px;font-family:'Poppins',sans-serif;font-size:var(--fs-16);font-weight:500;color:#fff;white-space:nowrap;}
.lang__list a img{display:block;width:20px;height:20px;}
/* [P5R3-09 정정] 첫 줄(KOR·현재 위치) 화살표 — `get_design_context(681:1523)` 로 확인: KOR 줄 표식은
   닫힘 트리거의 화살표(681:741)와 **완전히 같은 노드**(둘 다 `rotate-90` 래퍼 하나만, 크기 11×6 동일) —
   추가 회전 없이 그대로 재사용해야 하는데 이전엔 -90deg 를 더 돌려 눕혀(옆으로 꺾인 「>」, FIG-06
   피그마에 없는 모양) 결과가 달랐다. 회전 제거 + 텍스트-화살표 간격 10px(4px gap + margin 6px, 트리거와
   같은 계산) + 불투명도 100%(노드에 opacity 클래스 없음 — 임의로 넣은 .6 도 제거). */
.lang__list-arrow{display:block;width:11px;height:6px;margin-left:6px;background:url('../images/main/ico_lang_arrow.svg') center/contain no-repeat;}

/* [P1-03 재작업 · 「40_Icon」 노드 I625:2120;557:3426 실측 52×52 탭 영역] 기존 40×28 은
   Frame 3(선 영역, 52×26)만 반영해 탭 히트 영역이 좁았다 — 52×52 로 확장, 선은 flex 중앙 정렬.
   [V-06 정정 · 퍼피-5 03:5x 반려] 자식 Rectangle 4/5/6 실측 — 위/아래 32×2 흰색(x offset10,
   가운데 정렬) · 가운데만 52×2 **골드**(전체 폭, `#edb629`) · 줄 사이 간격 10px(2+10+2+10+2=26=
   Frame3 높이) — CSS span 으로 임의로 그린 게 아니라 벡터 값 그대로 재현한 것으로 교체. */
.btn-nav{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:52px;height:52px;}
.btn-nav > span{
	display:block;width:32px;height:2px;border-radius:var(--r-sm);
	background:#fff;transition:all var(--t-fast) linear;
}
.btn-nav > span:nth-child(2){width:52px;background:var(--c-accent);}
/* [V-06 정정 · 지휘자 04:1x FIG-06] 피그마엔 햄버거 hover 모양이 없다 — 모양 변화 없음으로 정리(규칙 그대로). */
/* header : E */

/* ─────────────────────────────────────────────
   footer : S
───────────────────────────────────────────── */
/* [P1-14 재작업 · 노드 557:3584 실측(get_design_context) — 09-16 02:0x]
   배경 #58595b(캡처 대조 확인, 이전 실측 유지) · 전체 높이 308 고정(피그마 컴포넌트 실높이,
   80px 0 패딩 흐름이 아니다) · 로고·본문 블록 둘 다 컨테이너 자기 테두리(border box) 기준
   절대좌표 — 컨테이너 padding(64) 은 절대배치 자식에는 적용되지 않으므로 페이지 절대좌표에서
   컨테이너 왼쪽 테두리(1920 안에서 64) 를 뺀 값을 그대로 쓴다.
   로고 abs x172,y70 → 172-64=108 · 본문 abs x470,y67 → 470-64=406 */
#footer{position:relative;height:308px;background:#58595b;}
#footer .container{height:100%;}
#footer .inner{position:static;}
#footer .ft_logo{position:absolute;left:108px;top:50%;width:172px; transform: translateY(-50%);}
#footer .ft_logo img{width:100%;height:auto;display:block;}
#footer .right{position:absolute;left:406px;top:67px;width:791px;}

/* [P1-14] 이용약관 행 — gap28(기존42 오기) · 구분선 rgba(217,217,217,.4)(기존 255,255,255,.3 오기) ·
   본문(txt) 블록과 gap36(기존 margin-bottom:24 오기) */
#footer .terms > ul{display:flex;gap:0 57px;margin-bottom:36px;}   /* [P5R3-06 정정 · 노드 I557:3584;54:4489~4493 실측] 항목 x0-109·166-288·345-461 — 텍스트 끝~다음 텍스트 시작 간격이 정확히 57(109→166, 288→345)이었다. R6 의 55 는 2px 부족해 dx −2.9(이메일)·−5.3(비급여) 로 누적됐다(재발 H1). margin-bottom 도 60(txt 프레임 시작)−24(이용약관 h24)=36 이 노드 그대로인데 R6 이 44.7 로 과보정해 정보 줄 전체 dy+8 이 났다 — 36 으로 되돌린다(1차 −8.7 은 다른 원인이었던 것으로 보임 — 이번 실측은 36 이 정확히 일치) */
#footer .terms > ul > li{position:relative;}
#footer .terms > ul > li:not(:last-child):after{
	content:'';position:absolute;top:50%;right:-28px;transform:translateY(-50%);
	width:1px;height:14px;background:rgba(217,217,217,.4);
}   /* [P5R3-06 정정] 노드 Rectangle17/18 실측 — 텍스트 끝에서 28px(109→137, 288→316). 27→28 */
#footer .terms a,
#footer .terms button{
	font-size:var(--fs-body-s);line-height:1.5;font-weight:500;color:#fff;letter-spacing:-.02em;
	transition:color var(--t-base) linear;
}
#footer .terms a:hover,
#footer .terms button:hover{color:var(--c-accent);}

/* [P1-14] 정보 두 행 구조 — 행 안 gap30 · 행간 gap4 · 전체 opacity .6(흰 글자, 첫 줄만
   진하지 않다 — 기존 「첫 줄은 불투명 100%」 가정이 오기였다) */
#footer .info{display:flex;flex-direction:column;gap:4px;}
#footer .info__row{display:flex;flex-wrap:wrap;gap:8px 30px;}
#footer .info__row span,
#footer .info__row a{
	font-size:var(--fs-body-s);font-weight:500;line-height:1.5;color:rgba(255,255,255,.6);letter-spacing:-.02em;
}
/* [지휘자 08:4x 정정 · 노드 I557:3584;54:4497~4500 실측] gap(30) 자체는 노드와 이미 일치하는데
   앞 글자(상호명)의 실제 렌더 폭이 노드 177 보다 좁아(172.9) 뒤 항목이 gap 누적으로 차례로
   왼쪽에 밀린다(dx −4.1→−5→−5.4). 글자 렌더 폭은 바꿀 수 없으니 이 행(1행 4항목)만 flow(gap)
   대신 노드 절대 x(0·207·474·706, `.right`=Frame1233 기준 · `.right` 폭 791 은 1440px↑ 전 구간
   고정이라 스케일 없이 그대로 쓴다 — ≤1439 는 아래 기존 flow 안전장치가 그대로 이긴다). */
@media (min-width:1440px){
	#footer .info__row:first-child{position:relative;height:24px;}
	#footer .info__row:first-child span{position:absolute;top:0;}
	#footer .info__row:first-child span:nth-child(1){left:0;}
	#footer .info__row:first-child span:nth-child(2){left:207px;}
	#footer .info__row:first-child span:nth-child(3){left:474px;}
	#footer .info__row:first-child span:nth-child(4){left:706px;}
}
#footer .copyright{
	margin-top:32px;font-size:var(--fs-body-s);line-height:1.5;font-weight:500;
	color:rgba(255,255,255,.6);letter-spacing:-.02em;
}
/* [번질 곳 · 1440 미만 안전장치] 위 절대좌표(left108/406 등)는 1920 실측값이라 1792 컨테이너가
   줄어드는 1439px 이하에서는 그대로 두면 가로 넘침이 난다(실측 — 768/375 에서 scrollW 1454).
   반응형·접근성 담당인 실제 반응형 값은 만들지 않고, 그 폭까지는 골격 기본(flex 두 칸)으로 되돌려
   최소한 넘치지 않게만 막는다 — 최종 반응형 수치는 반응형·접근성 담당 몫이다. */
@media (max-width:1439px){
	#footer{height:auto;padding:60px 0;}
	#footer .container{height:auto;}
	#footer .inner{display:flex;flex-wrap:wrap;gap:30px;}
	#footer .ft_logo{position:static;left:auto;top:auto;width:117px;flex:0 0 117px;}
	#footer .right{position:static;left:auto;top:auto;width:auto;flex:1 1 260px;min-width:0;}
}
/* footer : E */

/* ─────────────────────────────────────────────
 quick : S — Quick_M_Hover 557:3585 그대로 · 접힘/펼침 없음 · 우측 고정
───────────────────────────────────────────── */
/* [P1-15 재작업 · 노드 557:3585] 뷰포트 세로가운데 고정 → 화면 하단 기준 고정으로 교체.
   문서높이 6701(목표) 기준 컴포넌트 bottom = 6701-(6064+465) = 172px. position:fixed 라
   스크롤 위치와 무관하게 항상 이 값이 유지된다 — 1920×940 검증 폭에서 화면y = 940-172-465
   = 303 이 되어 04_ 지적표 수정안과 일치. 다른 뷰포트 높이의 거동은 반응형·접근성 담당 범위. */
.quick{position:fixed;right:-5px;bottom:172px;width:112px;z-index:var(--z-quick);}   /* [R6-F09] right 0→-5px — 노드 557:3585 자체가 x1813(화면 1920 기준 우측 5px 가 시안에서도 잘려 있다) */
.quick > ul{display:flex;flex-direction:column;}
.quick__item{height:93px;}
.quick__item a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:100%;text-align:center;}
.quick__item span{font-size:var(--fs-15);line-height:1.3;font-weight:500;}   /* [R6-F09] lh 1.25→1.3(130%, 노드 실측) */
.quick__item--kakao{background:var(--c-accent);border-radius:20px 0 0 20px;box-shadow:0 6px 16px rgba(0,0,0,.2);}   /* [R6-F09] 노드 1:3225 rounded-tl+bl · shadow */
.quick__item--kakao span{color:#222;}
/* [P5R3-08①③ 정정 · 노드 I557:3585 전 자식 get_design_context 실측] 전체 높이 471(93+6+97+115+116+44)
   이 시안 465 보다 6 커 y303 자리가 y297 로 밀렸던 원인 — FAQ 실제 높이는 97 이 아니라 91(흰 칸 시작
   1:3217 top 40.86%=190.0, 99 기준 91). 91 로 줄이면 93+6+91+115+116+44=465 로 정확히 맞고 bottom
   고정(172) 이 그대로라 y303 도 따라 맞는다(940−172−465=303). 반경도 20px 0 0 20px(양쪽 왼쪽 모서리)
   이던 것을 20px 0 0 0(위만)으로 — bottom-left 라운드는 실제로는 흰 칸(정사각 top)에 겹쳐 가려지는
   자리라 우리 구조(겹침 없는 개별 flow 블록)에서 그대로 살리면 시안에 없는 패인 모서리가 생긴다.
   자체 그림자는 위 ::before 로 옮겼으므로 제거. */
.quick__item--faq{position:relative;height:91px;margin-top:6px;background:var(--c-primary);border-radius:20px 0 0 0;}   /* [P5R3-08 정정] 97→91 · 20 0 0 20→20 0 0 0 · box-shadow 제거(::before 이관) · position:relative 는 아래 ::before(그림자) 기준점 — .quick 자신은 ≤1599 에서 responsive.css 가 position:static 으로 바꿔(결정-37 개정) 거기 앵커하면 그림자가 페이지 엉뚱한 자리로 튄다, li 는 그 구간에도 position 이 안 바뀌어 안전하다 */
.quick__item--faq span{color:#fff;}
/* [P5R3-08② 정정 · 노드 I557:3585;1:3216 get_design_context 실측] FAQ 배경(1:3216)은 카카오 아래
   전체(y99~465 · 흰 칸·TOP 뒤까지)를 덮는 하나의 남색 사각형이고 그림자(0 6px 16px rgba(0,0,0,.2))는
   이 사각형 하나에만 있다 — 흰 칸(1:3217)·TOP(1:3218)은 그 위에 겹쳐 그려져 자체 그림자가 없다.
   장식용 빈 요소를 새로 추가하지 않고(HTM-07) FAQ li 자신의 ::before 로 그 사각형을 재현한다 —
   li 자기 높이(91)보다 큰 366(=465-99)을 줘 overflow 를 아래로 흘려보내고(부모에 overflow:hidden
   없음, 안전 확인) 흰 칸·TOP 이 그 위에 겹쳐 칠해지므로 왼쪽·아래로 번지는 그림자만 보인다. */
.quick__item--faq:before{content:'';position:absolute;left:0;right:0;top:0;height:366px;border-radius:20px 0 0 20px;box-shadow:0 6px 16px rgba(0,0,0,.2);pointer-events:none;}   /* z-index 불필요 — 뒤에 오는 형제 li(edu·guide·top)가 문서 순서상 나중에 칠해져 자연히 이 여분(overflow) 을 덮는다 */
.quick__item--edu,
.quick__item--guide{background:#fff;}
.quick__item--edu{height:115px;}   /* [P1-15] 93→115 (Rectangle20 253px÷2, 반올림) */
.quick__item--guide{height:116px;border-radius:0;}   /* [P1-15] 93→116 — 5항목 합계 465(93+91+115+116+44) 를 맞춘다. [P5R3-08 정정] 노드 1:3217(흰 블록) 의 rounded-bl+br(bottom 40.86%~95.27%) 는 그 아래 TOP(1:3218, top90.54%~100%) 이 완전히 덮는 자리라 실제로는 안 보인다 — 우리 구조에서 그대로 살리면 시안에 없는 패인 모서리가 생겨 0(전부 각짐)으로 되돌린다 */
.quick__item--edu span,
.quick__item--guide span{color:#666;}
.quick__item--edu{position:relative;}
.quick__item--edu:after{content:'';position:absolute;left:20px;right:20px;bottom:0;height:1px;background:var(--c-line-weak);}
/* [P5R3-08③ 정정 · 노드 I557:3585;1:3224 실측] 성형·미용 라벨(2줄) 실측 dy+7.8(rendered 가 target 보다
   7.8 아래) — flex 중앙정렬 이론값과 달리 2줄 라벨의 실제 렌더 높이가 더 커 아래로 처졌다. 라벨(icon+span)
   전체를 위로 7.8 만 옮긴다(카카오·FAQ 는 91 로 높이를 고친 뒤 잔차가 ±2 안이라 손대지 않았다 — 번짐 없음). */
.quick__item--guide a{transform:translateY(-7.8px);}
.quick__top{position:static;width:100%;height:44px;border-radius:0 0 0 20px;background:var(--c-primary);
	font-size:var(--fs-16);font-weight:700;color:#fff;letter-spacing:0;}   /* [R6-F09] 반경 0→[0,0,0,20](노드 1:3218) · weight 400→700(Bold) · color 명시(#fff) — 네이비 위에서 안 보이던 문제 */
.quick__top:hover{background:var(--c-primary-dark);}
/* quick : E */

/* ─────────────────────────────────────────────
   sitemap : S
   ※ 1024px 이하에서 모바일 메뉴 역할을 겸한다.
───────────────────────────────────────────── */
.sitemap{
	position:fixed;top:0;right:0;width:0;height:0;max-width:100vw;max-height:100vh;
	z-index:var(--z-sitemap);overflow:hidden;visibility:hidden;
}
html.sitemap-opened{overflow:hidden;}
html.sitemap-opened .sitemap{width:100%;height:100%;visibility:visible;}
.sitemap:before{
	content:'';position:fixed;top:0;left:0;z-index:-1;width:100vw;height:100vh;
	background:var(--c-bg-dark);display:none;
}
html.sitemap-opened .sitemap:before{display:block;}

.site-wrap{position:relative;max-width:1830px;width:100%;height:100vh;margin:0 auto;padding:0 var(--pad-side);}
.site-wrap .head{display:flex;align-items:center;height:120px; position: relative;}
.site-wrap .head .logo img{width:117px;}

.sitemap-close{position:absolute;top:50%;right:var(--pad-side);transform:translateY(-50%);width:36px;height:36px;}
.sitemap-close:before,.sitemap-close:after{
	content:'';position:absolute;left:0;width:36px;height:2px;background:#fff;
	transition:all var(--t-overlay);
}
.sitemap-close:before{top:10px;}
.sitemap-close:after{bottom:10px;}
html.sitemap-opened .sitemap-close:before{top:50%;margin-top:-1px;transform:rotate(45deg);}
html.sitemap-opened .sitemap-close:after{bottom:50%;margin-bottom:-1px;transform:rotate(-45deg);}

.site-wrap .wrap{display:flex;height:calc(100vh - 120px);padding:60px 0;}
.site-wrap .info-wrap{flex:0 0 500px;display:flex;flex-direction:column;justify-content:space-between;padding-right:60px;}
.site-wrap .info .box{margin-bottom:40px;opacity:0;transform:translateX(60px);transition:all var(--t-overlay);}
html.sitemap-opened .site-wrap .info .box{opacity:1;transform:translateX(0);transition-delay:.1s;}
html.sitemap-opened .site-wrap .info .box:nth-child(2){transition-delay:.2s;}
.site-wrap .info .box h2{margin-bottom:16px;font-size:var(--fs-body);font-weight:700;color:#fff;}
.site-wrap .info .box dl{display:flex;margin-bottom:8px;font-size:var(--fs-body-s);line-height:1.6;}
.site-wrap .info .box dt{flex:0 0 80px;color:#fff;font-weight:500;}
.site-wrap .info .box dd{width:1%;flex:1 1 auto;color:#fff;}

/* [CSS-04] BEM: 블록 .nav-menu · 요소 __item/__link-wrap/__link/__submenu/__submenu-link.
   서브메뉴는 별도 열림 상태가 없다 — 사이트맵 전체가 열리면 함께 노출된다(단일 상태). */
.nav-menu{width:1%;flex:1 1 auto;padding-left:100px;overflow-y:auto;}
.nav-menu__item{margin-bottom:20px;}
.nav-menu__link-wrap{display:block;overflow:hidden;}
.nav-menu__link{
	display:inline-block;padding:0 5px;font-size: 35px;font-weight:500;line-height:1.2;
	color:#fff;transform:translateY(110%);transition:transform var(--t-overlay);
}
html.sitemap-opened .nav-menu__link{transform:translateY(0);transition-delay:.4s;}
.nav-menu__submenu {display: none;}
.nav-menu__submenu ul{display:flex;flex-wrap:wrap;padding:16px 0 0 5px;}
.nav-menu__submenu ul li{padding-right:40px;margin-bottom:12px;}
.nav-menu__submenu-link{
	font-size:var(--fs-body-l);line-height:1.5;color:var(--c-text-on-dark);
	transition:color var(--t-base) linear;
}
.nav-menu__submenu-link:hover{color:#fff;}
/* sitemap : E */

/* ─────────────────────────────────────────────
   sitemap : responsive      [RWD-01]
───────────────────────────────────────────── */
@media (max-width:1400px){
	.site-wrap .info-wrap{flex:0 0 400px;padding-right:40px;}
	.nav-menu{padding-left:60px;}
	.nav-menu__link{font-size:var(--fs-head-m);}
}
@media (max-width:1280px){
	/* 데스크톱 기준 분기 — 컨테이너 2차 축소 (RWD-01) */
}
@media (max-width:1024px){
	.site-wrap .wrap{flex-direction:column-reverse;height:calc(100vh - 100px);padding:30px 0;}
	.site-wrap .head{height:100px;}
	.nav-menu{width:100%;padding-left:0;}
	.nav-menu__link{font-size:var(--fs-card-tit);}
	.nav-menu__submenu-link{font-size:var(--fs-body-s);}
	.site-wrap .info-wrap{flex:0 0 auto;padding-right:0;}
	.site-wrap .info .box{margin-bottom:20px;}
}
@media (max-width:768px){
	.nav-menu__link{font-size:var(--fs-head-2xs);}
	.nav-menu__submenu ul li{padding-right:20px;margin-bottom:8px;}
	.site-wrap .info .box dl{font-size:var(--fs-label);}
	.site-wrap .info .box dt{flex:0 0 100px;}
}
@media (max-width:480px){
	.site-wrap .info-wrap{display:none;}
	.nav-menu__link{font-size:var(--fs-body-l);}
}

/* ─────────────────────────────────────────────
   header 반전 — 슬롯 단위로 한 번에 처리한다
   ※ 항목이 늘 때마다 반전 규칙을 따로 쓰지 않는다.
      골격 기본값은 로고·유틸에 밝은/어두운 반전 2상태를 두지만, 이 프로젝트는
      결정-22(FIG-06) 로 스크롤·서브 반전 상태를 만들지 않는다 — 헤더는 전 구간 투명 배경 +
      흰 로고/GNB/유틸 고정 1상태뿐이다. body.opened·body#sub 반전 규칙은 쓰지 않는다
      (H-6 「흰 섹션 위 GNB 안 보임」은 확인 사항으로만 남긴다 — 여기서 임의로 고치지 않는다).
───────────────────────────────────────────── */