@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 — 프로젝트마다 이 2줄만 교체한다.
 [결정 피그마 값 우선] Figma 캔버스 실측(픽셀 샘플링, 작업 문서 대상 프레임
 · node ID 미확보라 get_variable_defs 조회 불가 — 정확한 변수값은 아니고 렌더 픽셀
 색상이다. USP 활성 탭 텍스트/커넥터 라인 실측 #0051c6, "View More" 텍스트 실측 #0036aa.
 TODO(디자인 요청): node ID 확보 후 Figma 컬러 변수로 재확인·교체. */
	--c-primary:#0051c6;
	--c-primary-dark:#0036aa;
	/* [지적2 대응 · HTM-06 4.5:1] 다크 배경 전용 변형. --c-primary(#0157d6)를 dark bg(#0b0b0b)
 위에 그대로 쓰면 실측 3.13:1 로 AA 미달 — 밝기만 올린 동일 색상 계열. dark bg(#0b0b0b) 대비
 6.88:1(계산: relative luminance 공식). 다크 배경 위의 텍스트/링크 용도로만 쓴다. */
	--c-primary-on-dark:#679ae6;

	/* Text */
	--c-text:#111;
	--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 — [CSS-06] */
	--w-doc:1920px;
	--w-max:1800px;   /* 컨테이너 절대 상한 — 초과 금지 (CSS-06) */
	--w-layout:1790px;
	--w-content:1470px;
	--w-narrow:1310px;
	--pad-side:15px;
	--h-header:80px;   /* [반응형 · 결정] Figma 헤더 노드 877:221 실측 1920×80 — 골격 기본값
 90px 는 시안 값이 없을 때만 쓰는 기본값이라 리터럴로 교체(반올림 아님).
 연쇄 영향 확인 — #main/#sub padding-top·.gnb__link line-height·
 .logo/.head-util top:50%·.gnb__mega top:100% 전부 var(--h-header) 또는
 %기반이라 값 하나만 바뀌면 전부 따라간다(하드코딩 90px 잔재 0건, css/js
 전수 grep 확인). 1024px 이하 70px·480px 이하 60px 는 Figma 폭별 프레임이
 없어(작업 문서 — 1920 단일 폭) 규칙 기본값 그대로 유지. */

	/* 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] 이 프로젝트 히어로 제목은 시안 글자 폭(528px) 역산 실측값이 표준
 스케일(68px)과 달라 별도 토큰으로 둔다 — main.css 에 리터럴 직기입하지 않는다. */
	--fs-hero-tit:60px;

	/* [결정 피그마 값 우선 · 실측 확정] node 15:252(About us) get_design_context 정밀 조회값.
 TYP-05 는 font-size 리터럴 직기입을 금지하므로, 표준 스케일과 다른 이 프로젝트 실측값을
 토큰으로 선언해 var 로만 쓴다 — 반올림해 표준 토큰에 끼워맞추지 않는다. */
	--fs-about-label:22px; --lh-about-label:36px;   /* P-SB/22 */
	--fs-about-tit:54px;   --lh-about-tit:64px;     /* P-SB/54 */
	--fs-about-desc:20px;  --lh-about-desc:30px;    /* P-R/20 */
	--fs-btn:16px;         --lh-btn:30px;           /* Btn 컴포넌트 'View More' P-SB/16 */

	/* [결정 실측 확정] node 15:266(SOLUTION)·15:314(Contact us) 정밀 조회값 */
	--fs-tab:28px;         --lh-tab:38px;           /* SOLUTION 탭 목록 · Download/Board 라벨 */

	/* [결정 실측 확정] node 15:323(M_visual) 정밀 조회값 */
	--fs-scroll:14px;      --lh-scroll:20px;        /* 히어로 "SCROLL" 세로 텍스트 */
}
/* 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;}

/* [퓨어앤케이 전용 · QA-RWD] main-about 의 배경 장식 이미지(--4·--6)는 Figma 원본 자체가
 1920 프레임 가장자리 밖으로 살짝 번지는 의도된 풀블리드다(node 15:259 left:-72px ·
 21:801 우측 초과 — get_design_context 실측). 디자인을 그대로 살리면서 가로 스크롤바만
 막는다 — 콘텐츠를 자르거나 값을 반올림하지 않는다(결정). */
html{scroll-behavior:smooth;overflow-x:hidden;}
/* Lenis 연동 [JSR-02· 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;}   /* 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;}
/* 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 */