@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 — [W-02 해제 · 2026-09-17 마크업 재작업] 최종 시안 `1:400`(원테크솔루션_00_Main_1)
 `get_variable_defs(1:400)` 리터럴로 전면 교체. 앞서 쓴 `1:89`·`1:133`·`1:211`(#0157d6·
 #132132·#1b3350)은 전부 「Plan」 와이어프레임 노드였다 — 폐기 대상(01_해석서 §10 판정①).
 Primary/Blue1 #0000FF · Primary/Blue2 #00237C · Primary/Blue3 #72D2FF. */
	--c-primary:#0000ff;                 /* Figma Primary/Blue1 — get_variable_defs(1:400) */
	--c-primary-dark:#00237c;            /* Figma Primary/Blue2 — get_variable_defs(1:400) */
	--c-primary-light:#72d2ff;           /* Figma Primary/Blue3 — 히어로 강조 텍스트·CTA 강조 라인에 사용 */

	/* [정정 2026-09-17] --c-navy-strip 은 폐기 — 「전국 점검 가능 띠」는 최종 시안에서 별도
 섹션 배경이 아니라 히어로 이미지 위에 겹친 반투명 띠(get_design_context(1:400) Bar,
 node 1:814, rgba(1,66,139,.6))다. 구조 재편은 이번 판에서 보류(§ 최종 시안 반영 참조) —
 당장은 색만 리터럴로 맞춘다. */
	--c-navy-strip:rgba(1,66,139,.6);    /* Figma node 1:814 Bar 배경 — get_design_context(1:400) */
	/* [정정 2026-09-17] --c-navy-cta 도 폐기 — CTA 배너(node 7:680, 11:408 「04」)는 평면 남색이
 아니라 배경 이미지 + rgba(0,25,90,.3) 남색 오버레이다. 이미지 자체는 FIG-06 TODO(디자인
 요청)로 남기고, 오버레이 색만 리터럴로 확보했다. */
	--c-navy-cta-overlay:rgba(0,25,90,.3); /* Figma node 7:680 오버레이 — get_design_context(1:400) */
	--c-white-30:#ffffff4d;              /* Figma variable W/30 — get_variable_defs(1:89), 1:400 미재확인(TODO) */
	/* [지적2 대응 · HTM-06 4.5:1] 다크 배경 전용 변형. --c-primary(#0000ff)를 dark bg(#0b0b0b)
 위에 그대로 쓰면 대비 미달 — 밝기만 올린 동일 색상 계열(Blue3 #72d2ff 재사용, 재계산 필요 —
 구현 완료 · 검증 미완료). 다크 배경 위의 텍스트/링크 용도로만 쓴다. */
	--c-primary-on-dark:#72d2ff;

	/* [원테크 · 2026-09-17 인터랙션] 폼 검증 상태 전용 — TODO(디자인 요청): 피그마 Design 페이지
 접근 차단(§5)으로 원테크 시안에 지정된 에러 색값을 확인하지 못했다. WCAG AA 통과하는
 관용 semantic red(대비 4.5:1↑, 흰 배경 기준)를 자리값으로 둔다. */
	--c-danger:#d92d20;

	/* Text — [원테크 · 2026-09-17 리터럴] Figma get_variable_defs(1:89): Gray/900 #222222 ·
 Gray/700 #666666 · T/999 #999999. --c-text 만 골격 기본값(#111)과 달라 교체했다 —
 나머지 둘은 우연히 골격 기본값과 이미 같은 값이라 그대로 둔다(반올림한 것이 아니다). */
	--c-text:#222;
	--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 — [원테크 · 2026-09-17 리터럴] Figma variable Line/01 #dddddd 와 이미 일치 */
	--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 — [CSS-06] */
	--w-doc:1920px;
	--w-max:1800px;   /* 컨테이너 절대 상한 — 초과 금지 (CSS-06) */
	--w-layout:1790px;
	--w-content:1470px;
	--w-narrow:1310px;
	--pad-side:15px;
	--h-header:86px;   /* [W-06 재작업 · G-14] Figma get_design_context(1:400) node 13:543 실측 — 헤더 86px(기존 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; /* 대형 키비주얼 */
}
/* 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;}
td, th{vertical-align: middle;}

*,*: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;padding-left:var(--pad-side);padding-right:var(--pad-side);margin:0 auto;}
.container--narrow{max-width:var(--w-narrow);height:inherit;}

#header .container,
#footer .container{max-width:var(--w-layout) !important;}   /* 코어 스타일 오버라이드 목적 */
#main   .container,
#sub    .container{max-width:var(--w-content);}
#main   .container--narrow,
#sub    .container--narrow{max-width:var(--w-narrow);}   /* 위 #sub .container(1,1,0) 가 .container--narrow(0,1,0) 를 이겨 좁은 폭이 안 먹던 결함 — 같은 특이성으로 뒤에서 되돌린다 */
/* .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;}


select.input {padding-right:40px; background:#fff url('../img/layout/select.png') right 14px center no-repeat; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
select.input::-ms-expand {display:none;}
input[type=file].input {padding:0;}



/* 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:0;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:var(--c-primary);background:var(--c-primary);}
.checkbox input:checked + label:after{
	content:'';position:absolute;top:6px;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);}

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