@charset "utf-8";
/* reset.css는 브라우저 리셋 · 디자인 토큰 · 폼 컴포넌트 · 공통 유틸 정의 */
/* INPIAD Publishing Standard v1.3 (INPIAD-PUB-STD-001) — CSS-06/COL-01 v1.2 반영 */

/* ─────────────────────────────────────────────
   design token : S      [COL-01]
   ※ 컬러·라운드·모션·z-index는 전부 여기서만 선언한다.
      개별 CSS 파일에서 값을 직접 기입하지 않는다.
───────────────────────────────────────────── */
:root{
	/* Brand — 채움과비움외과의원(피그마 실측 페인트 스타일 p2/p3) */
	--c-primary:#1b2d55;
	--c-primary-dark:#13203d;
	--c-accent:#edb629;
	/* 진료 철학 「균형」pill 전용 — 다른 3개 pill 과 다른 실측 골드(회장님 「똑같이」지시 · 확인 사항 아님, 노드 557:3566 실측) */
	--c-philo-gold:#e0b442;
	--c-primary-on-dark:#679ae6;
	/* 서브 2단메뉴 선택 pill — 브랜드 네이비(--c-primary)와 다른 별도 실측값(피그마 노드 809:10439
 fill 실측 피그마 값 우선 · 15:2x 전달). 반올림·통일하지 않는다. */
	--c-pill-active:#6423b8;

	/* Text */
	--c-text:#111;
	/* 서브 제목류 전용 실측값(노드 582:911·582:715) — --c-text(#111)와 소수 다름, G-14 원칙대로 별도 유지 */
	--c-text-alt:#1e1e1e;
	--c-text-agenda:#3a3a3a;
	--c-text-sub:#666;
	--c-text-weak:#999;
	--c-text-invert:#fff;
	--c-text-on-dark:rgba(255,255,255,.6);
	/* [지적2 대응 · HTM-06 4.5:1] 버튼 전용 회색. --c-text-weak(#999)는 흰 글자 기준 2.85:1로
	   AA 미달이라 placeholder 등 텍스트 색상 용도와 버튼 배경 용도를 분리했다 — 공용 토큰인
	   --c-text-weak 자체는 건드리지 않는다(다른 곳에서 쓰는 값이 흔들리면 안 되므로).
	   기본 5.74:1 / hover 8.45:1 (화이트 글자 기준, 계산 확인). */
	--c-btn-gray:#666666;
	--c-btn-gray-dark:#4d4d4d;

	/* Line */
	--c-line:#ddd;
	--c-line-weak:#eee;
	--c-line-strong:#ccc;

	/* Background */
	--c-bg:#fff;
	--c-bg-weak:#f8f8f8;
	--c-bg-dark:#0b0b0b;

	/* Radius */
	--r-sm:5px;
	--r-md:10px;
	--r-lg:20px;
	--r-pill:100px;

	/* Motion */
	--t-fast:.15s;
	--t-base:.2s;
	--t-slow:.3s;
	--t-overlay:.6s;

	/* Layer */
	--z-header:100;
	--z-quick:80;
	--z-sitemap:1111;

	/* Layout — [2026-09-16 회장님 지시 「피그마에 값이 있으면 그대로」]
	   본문 컨테이너는 규칙 상한(1800·15px)이 아니라 1920 기준 피그마 노드 경계 그대로다.
	   본문 x240~1680 = 1440(대부분 섹션 공통 실측) · 헤더는 좌우 64px(로고 x64 · 유틸 우측 여백 63px 실측).
	   1440px 폭에서 패딩 0 인 이유 — 1920 에서 centering(auto margin) 만으로 좌우 240px 여백이
	   그대로 나온다(1920-1440=480, 480/2=240). 1439px 이하 안전 여백은 main.css 쪽 전환 구간에서만 둔다. */
	--w-doc:1920px;
	--w-max:1800px;   /* 규칙 상한 — 좁은 폭 대비용, 1920 실측값이 우선한다 */
	--w-layout:1792px; /* 헤더·푸터 — 1920 - 64*2 */
	--w-content:1440px; /* 본문 섹션 — 피그마 x240~1680 실측 */
	--w-narrow:1310px;
	--pad-side:15px;    /* 좁은 폭 폴백(1439px 이하) 전용 — 1920/1440 실측 구간에는 적용하지 않는다 */
	--pad-header:64px;  /* 헤더·푸터 좌우 여백 — 피그마 실측(로고 x64 · 우측 유틸 63px) */
	--h-header:104px;   /* 피그마 625:2120 실측(90px 규칙 기본값 대신) */

	/* Typography Scale — [TYP-05] INPIAD Typography Guide v1.0 (Desktop)
	   값은 가이드의 "기준값(최소값)"이다. 프로젝트 성격에 따라 최대 +2px 까지 올릴 수 있다.
	   line-height 는 고정값이다 — 크기를 올려도 함께 올리지 않는다. */

	/* 본문·UI */
	--fs-caption:13px;   --lh-caption:20px;    /* 주석·저작권·작은 정보 */
	--fs-label:15px;     --lh-label:22px;      /* 카테고리·날짜·라벨 */
	--fs-body-s:16px;    --lh-body-s:24px;     /* 보조 설명 */
	--fs-body:18px;      --lh-body:28px;       /* 기본 본문 ★ */
	--fs-body-l:20px;    --lh-body-l:32px;     /* 강조 본문·리드문 */
	--fs-button:17px;    --lh-button:22px;     /* CTA·일반 버튼 */
	--fs-gnb:18px;       --lh-gnb:24px;        /* 메인 내비게이션 */

	/* 제목 */
	--fs-card-tit:26px;  --lh-card-tit:36px;   /* 카드·리스트 제목 */
	--fs-head-s:28px;    --lh-head-s:38px;     /* 콘텐츠 제목 */
	--fs-head-m:36px;    --lh-head-m:46px;     /* 소섹션 제목 */
	--fs-head-l:52px;    --lh-head-l:64px;     /* 섹션 핵심 제목 */
	/* [TYP-05 · 2026-09-11] 골격 CSS가 실제로 쓰는 중간 크기 — 직접 기입을 토큰으로 흡수.
	   xs·sm·ms·ml 4개는 앞서 진행한 프로젝트 사례와 이름·값을 맞췄다 — 골격과 프로젝트가
	   같은 이름을 쓰게 하기 위해서다. 2xs·lg 2개는 이 골격 전용 추가다 — body-l(20)~
	   head-m(36)~head-l(52) 사이에 실사용 값이 더 있었다. line-height 는 두지 않는다 —
	   대응 selector 가 자체 line-height 를 직접 지정하는 관용구를 그대로 따른다. */
	--fs-head-2xs:22px; --fs-head-xs:24px; --fs-head-sm:30px; --fs-head-ms:32px;
	--fs-head-ml:44px;  --fs-head-lg:48px;

	/* 메인 비주얼 */
	--fs-display-s:68px; --lh-display-s:80px;  /* 일반 메인비주얼 */
	--fs-display-m:80px; --lh-display-m:92px;  /* 브랜드형 메인 */
	--fs-display-l:96px; --lh-display-l:104px; /* 대형 키비주얼 */

	/* 채움과비움 프로젝트 전용 — 피그마 실측 값 그대로(TYP-05 14단 기존 토큰과 값이 안 맞아 새로 추가.
 요청「피그마와 똑같이」 지시 · 작업 문서 참조) */
	--fs-14:14px;  --lh-14:22px;   /* c14(m) 160% */
	--fs-15:15px;  --lh-15:19px;   /* 진료시간 행 */
	--fs-16:16px;  --lh-16:24px;   /* body16(m) 150% */
	--fs-18:18px;  --lh-18:31px;   /* body18(R/b) 170% */
	--fs-20:20px;  --lh-20:32px;   /* body_20(m) */
	--fs-22:22px;  --lh-22:33px;   /* T22(B) 150% */
	--fs-28:28px;  --lh-28:34px;   /* 과정카드 hover 이름 */
	--fs-30:30px;  --lh-30:45px;   /* title 컴포넌트 */
	--fs-42:42px;  --lh-42:63px;   /* T42(sB) 150% */
	--fs-52:52px;  --lh-52:57px;   /* Poppins SemiBold display */
}
/* design token : E */

/* ─────────────────────────────────────────────
   reset : S
───────────────────────────────────────────── */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,
label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,
section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
*,*:before,*:after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
/* Lenis 연동 [JSR-02·MOT-01 · 2026-09-08] — Lenis 가 초기화되면 <html> 에 .lenis-smooth 가
   자동으로 붙는다(js/lib/lenis.min.js 자체 동작). 그 상태에서는 네이티브 scroll-behavior:
   smooth 를 꺼야 한다 — Lenis 자체 이징과 네이티브 스무스 스크롤이 동시에 걸리면 이중 감속
   으로 버벅인다. lenis.min.js 를 로드하지 않는 페이지에는 이 규칙이 걸리지 않는다(선택자가
   .lenis-smooth 클래스 존재를 전제하므로). */
html.lenis-smooth{scroll-behavior:auto;}
body{
	max-width:var(--w-doc);
	margin:0 auto;
	background:var(--c-bg);
}
body,input,textarea,select,button,table{
	font-family:'Pretendard','Open Sans','Noto Sans SC',AppleGothic,helvetica,sans-serif;
	font-size:var(--fs-body-s);
	line-height:1;
	color:var(--c-text);
	word-break:keep-all;          /* [TYP-01] 한글 단어 잘림 방지 — 삭제 금지 */
	-webkit-text-size-adjust:none;
}
h1,h2,h3,h4,h5,h6,strong,th,.bold{font-weight:700;}
.semibold{font-weight:500;}      /* 명칭과 값이 다르나 기존 사이트 호환을 위해 유지 */

ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
img{max-width:100%;vertical-align:top;border:0;}
a{color:inherit;text-decoration:none;}   /* [FBD-12] display:block 전역 지정 금지 */
/* [FBD] button 은 위 리셋 목록에 없다. padding 을 지우지 않으면 브라우저 기본값(크롬 1px 6px)이
   남고, box-sizing:border-box 라 내용 폭이 좌우 12px 깎인다. 막대를 width:100% 로 그린
   햄버거·닫기 버튼이 화면에서 사라진다 — getComputedStyle 로는 visibility:visible·width 정상이라
   숫자 검사로 절대 안 잡힌다. 눈대조로만 보인다(실측 2026-08-29 사례). */
button{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;}
input,select,textarea{border-radius:0;-webkit-appearance:none;appearance:none;}
address,em,i{font-style:normal;}
caption,legend{overflow:hidden;position:absolute;width:0;height:0;font-size:0;line-height:0;}

/* 포커스 — [HTM-06] outline 제거 금지 */
:focus{outline:none;}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;}

/* 모션 최소화 요구 대응 — [L3] */
@media (prefers-reduced-motion:reduce){
	*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
/* reset : E */

/* ─────────────────────────────────────────────
   layout base : S      [CSS-06]
───────────────────────────────────────────── */
.container{position:relative;margin:0 auto;}
.container--narrow{max-width:var(--w-narrow);height:inherit;}

/* [2026-09-16 회장님 지시] 1920/1440 구간은 padding 0 + max-width 로 정확한 실측 여백을 낸다.
   1439px 이하(반응형·접근성 담당 구간)에서만 규칙 기본 padding(15px)을 되살린다. */
/* [P5R4-05 · 퍼피-2 11:0x 원인 확정 — 지워보기 + geom-diff 대조군으로 2차 확인]
   1차 시도(폐기) — `!important` 없이 지워보니 #header .container 가 1792 가 아니라 1440 이 됐다.
   원인은 `<body id="main">`(index.html:46, 허용 ID 6개 중 #main/#sub 는 body 가 쓴다)라 #header·#footer
   가 전부 그 body 의 자손이 되어 `#main .container`(id1+class1) 와 `#header .container`(id1+class1)의
   **특이도가 완전히 같고**, 소스 순서상 `#main .container` 가 아래라 항상 이겼기 때문이다.
   1차로 두 규칙 전체(`max-width`+`padding-left/right` 셋 다) 순서만 맞바꿨더니 max-width 는 1792 로
   되돌아왔지만 **`대조_퍼피2/geom_diff_p2.md` 게이트 대조에서 1440·1920 폭에 의도 밖 이동 85·87건**이
   새로 잡혔다 — `#gnb>ul>li.gnb__item` 9개가 dx+64, `#footer .inner` 가 dx+64·dw−128. 원인 확인(지워
   보기): `padding-left/right:var(--pad-header)` 도 같은 동률 특이도라 예전엔 `#main .container{padding:0}`
   에 항상 졌다 — 즉 **이 padding 선언은 처음부터 한 번도 적용된 적 없는 죽은 코드**였고, GNB·footer
   내부 요소들의 절대좌표는 전부 "패딩 0" 상태를 전제로 이미 보정돼 있었다(layout.css:33~40 "컨테이너
   padding 이중 적용" 코멘트가 이걸 가리킨다). 순서를 통째로 바꾸면 죽어있던 padding 이 처음으로
   살아나 그 보정과 충돌해 새 겹침을 만든다 — **max-width 만 재정렬 대상으로 남기고 padding-left/right
   는 그대로 죽은 채로 둔다(선언 자체를 지운다 — 어차피 한 번도 안 먹었다).** */
#main   .container,
#sub    .container{max-width:var(--w-content);padding-left:0;padding-right:0;}
#main   .container--narrow,
#sub    .container--narrow{max-width:var(--w-narrow);}
#header .container,
#footer .container{max-width:var(--w-layout);}

@media (max-width:1439px){
	#header .container,#footer .container{padding-left:var(--pad-side);padding-right:var(--pad-side);}
	#main .container,#sub .container{padding-left:var(--pad-side);padding-right:var(--pad-side);}
}
/* .contain 은 v1.2 에서 폐기 — .container--narrow 사용 */
/* layout base : E */

/* ─────────────────────────────────────────────
   utility : S
───────────────────────────────────────────── */
.blind,.sound_only{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0,0,0,0);white-space:nowrap;}
.clearfix:after{content:'';display:block;clear:both;}
.pointer{cursor:pointer;}
.en{font-family:'Poppins','Pretendard',sans-serif;}   /* [TYP-01] 숫자·영문 제목 전용 — 한글 본문에 섞지 않는다 */
.tar{text-align:right;}
.tac{text-align:center;}
.mo{display:none;}               /* 모바일 전용 요소 — 1024px 이하에서 노출 */
.skip-nav{position:absolute;top:-100px;left:0;z-index:9999;}
.skip-nav:focus{top:0;padding:10px 20px;background:var(--c-primary);color:#fff;}
/* utility : E */

/* ─────────────────────────────────────────────
   form component : S      [BRD-03]
   ※ 프로젝트마다 새로 만들지 않고 이 컴포넌트를 그대로 사용한다.
───────────────────────────────────────────── */
.input{
	width:100%;height:56px;padding:10px 16px;
	border:1px solid var(--c-line);background:var(--c-bg);
	font-size:var(--fs-body-s);color:var(--c-text);
	transition:border-color var(--t-base) linear;
}
.input:focus{border-color:var(--c-primary);}
.input::placeholder{color:var(--c-text-weak);}
textarea.input{height:180px;line-height:1.6;resize:vertical;}

.radiobox,.checkbox{position:relative;display:inline-flex;align-items:center;}
.radiobox input,.checkbox input{position:absolute;width:0;height:0;opacity:0;}
.radiobox label,.checkbox label{
	position:relative;padding-left:30px;cursor:pointer;
	font-size:var(--fs-body-s);line-height:22px;color:var(--c-text-sub);
}
.radiobox label:before,.checkbox label:before{
	content:'';position:absolute;top:5px;left:0;width:22px;height:22px;
	border:1px solid var(--c-line);background:var(--c-bg);
}
.radiobox label:before{border-radius:50%;}
.checkbox label:before{border-radius:var(--r-sm);}
.radiobox input:checked + label:before,
.checkbox input:checked + label:before{border-color:#6423b8;background:#6423b8;}
.checkbox input:checked + label:after{
	content:'';position:absolute;top:11px;left:6px;width:10px;height:6px;
	border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}
.radiobox input:checked + label:after{
	content:'';position:absolute;top:7px;left:7px;width:8px;height:8px;border-radius:50%;background:#fff;
}
.radiobox input:focus-visible + label:before,
.checkbox input:focus-visible + label:before{outline:2px solid var(--c-primary);outline-offset:2px;}

/* .file_wr{position:relative;display:flex;gap:8px;}
.file_wr input[type=file]{position:absolute;width:0;height:0;opacity:0;}
.file_wr label{
	display:inline-flex;align-items:center;padding:0 24px;height:56px;
	background:var(--c-text);color:#fff;font-size:var(--fs-body-s);cursor:pointer;white-space:nowrap;
	transition:background var(--t-base) linear;
}
.file_wr label:hover{background:var(--c-primary);} */

/* 파일업로드 */
.file_wr {position:relative; padding-right:140px;}
.file_wr label {width:136px; height:50px; border:1px solid #ddd; background:#fff; font-size:18px; color:#666; text-align:center; position:absolute; right:0; top:50%; margin-top:-25px; cursor:pointer; transition:all 0.6s;}
.file_wr label:hover {background:#000; border-color:#000;}
.file_wr label:before {content:'파일첨부'; line-height:48px; color:#000; transition:all 0.6s;}
.file_wr label:hover:before {color:#fff;}
.file_wr input[type="file" i] {width:270px; border-bottom:1px solid #ddd; line-height:49px; font-size:20px; color:#acacac; padding:0 10px; cursor:pointer;}
.file_wr input[type="file" i]::-webkit-file-upload-button {display:none;}

@media (max-width: 1024px){
	.file_wr label {font-size: 16px;}
	.file_wr input[type="file" i] {font-size: 16px;}
}

@media (max-width:640px){
	.file_wr {padding-right:100px;}
	.file_wr label {width:80px; height:40px; font-size:14px; margin-top:-20px;}
	.file_wr label:before {line-height:38px;}
	.file_wr input[type="file" i] {width:200px; line-height:39px; font-size:14px;}
}


/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {position:relative}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;width:40px;height:40px;background:url('../../../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:0;vertical-align:top}
#captcha #captcha_info {display:block;margin:3px 0 5px;font-size:0.95em;letter-spacing:-0.1em}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {display:block;margin:0 0 5px}



.req{color:var(--c-primary);}
/* form component : E */