@charset "utf-8";
/* sub.css는 서브 페이지 전용 스타일 정의 */
/* 이 파일은 자체 @media 블록을 두지 않는다 — 반응형은 responsive.css 「sub : responsive」
 구간(css/responsive.css)으로 이관됐다. 2026-09-04 골격 반응형 분리. */

/* ─────────────────────────────────────────────
 sub token : S [COL-01 · TYP-05]
 서브 페이지 시안(Sub_01 CEO Message · node 902:427)에서 실측한 값 중 reset.css 표준 토큰에
 없는 것만 선언한다. 리터럴을 개별 규칙에 직접 쓰지 않고 var 로만 쓴다(반올림·통일하지
 않는다). reset.css 의 :root 로 옮기는 것이 정위치이나 이번 회차는 reset.css 를 고치지 않아
 이 파일에 둔다 — 옮길 때는 이 블록을 통째로 옮기면 된다.
───────────────────────────────────────────── */
:root{
	--c-text-strong:#333;                                /* 시안 텍스트 #333 (Tit · 대표이사 서명) */
	--fs-sub-slogan:60px; --lh-sub-slogan:74px;          /* S-Slogan · node 902:161 (P-SB/60) */
	--fs-sub-sec:54px;    --lh-sub-sec:64px;             /* S-Top 제목 · node 902:369 (P-SB/54) */
	--fs-sub-tit:40px;    --lh-sub-tit:56px;             /* Tit 제목 · node 902:439 (P-SB/40) */
	--fs-sub-sign:22px;   --lh-sub-sign:36px;            /* 대표이사 서명 · node 902:442 (P-SB/22) */
	--r-xl:30px;                                         /* Img 모서리 · node 902:443 */
	--h-visual:480px;     /* Sub_Visual 에서 고정 헤더(--h-header)를 뺀 보이는 높이 — 시안 560 = 헤더 80 + 480 */
	--h-lnb:54px;         /* 2depth 탭 높이 · node 902:449 */
	--m-lnb:36px;         /* 2depth 탭 아래 여백 · Sub_Visual 하단(560) − 탭 하단(524) */
	/* s2_2 R&D / Lab(node 982:1275)에서 실측한 값 중 위에도 reset.css 에도 없는 것 */
	--c-cat-off:rgba(153,153,153,.6);       /* 3depth_Off 글자 #999 60% · node I982:1297;972:1012 */
	--c-field-ph:rgba(153,153,153,.5);      /* 검색 placeholder #999 50% · node 982:1291 */
	--c-btn-line:rgba(0,81,198,.6);         /* Btn_2 테두리 #0051c6 60% · node I982:1279;982:1105 */
	--w-block:1600px;                       /* Block 폭 — 시안 이 프레임만 1600 @160(다른 서브 1440 @240) — 시안 값 그대로 */
	--r-pic:16px;                           /* 목록 이미지 모서리 · node I982:1279;982:1106 */
	--fs-list-sub:14px; --lh-list-sub:20px; /* 부제·placeholder·정렬 글자 · P-M/14 */
}
/* sub token : E */

#sub{padding-top:var(--h-header);}

/* ─────────────────────────────────────────────
 page-header : S [DIR-03] .typeN 으로 배경 교체
 시안(Sub_Visual 1920×560)은 이미지가 화면 맨 위(y0)부터 깔리고 그 위를 헤더 80px 이 덮는다.
 #sub 의 padding-top(=헤더 높이) 만큼 음수 마진으로 끌어올려 이미지가 헤더 뒤까지 이어지게
 하고(헤더가 숨어도 흰 띠가 안 보인다), 같은 높이만큼 padding-top 으로 내용을 되내린다 —
 보이는 높이는 --h-visual 하나가 정한다.
───────────────────────────────────────────── */
/* [지적7 대응] 빈 url 제거 — background 단일 shorthand 대신 개별 속성으로 분리해
 문법적으로 항상 유효하게 만들었다. .typeN 을 빠뜨린 신규 서브페이지가 생겨도 솔리드
 색상이 안전한 fallback 으로 남는다(빈 배경 아님). */
.page-header{
	position:relative;width:100%;
	margin-top:calc(var(--h-header) * -1);/* padding-top:var(--h-header); */
	height:calc(var(--h-header) + var(--h-visual));
	background-color:var(--c-text-strong);background-position:50% 50%;background-repeat:no-repeat;background-size:cover;
}
.page-header:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);}
.page-header.type1{
	background-image:url(../img/sub/bg_s101.jpg);
}
/* type2 = SOLUTION 비주얼 — 시안 Sv-02(node 982:1316)를 1920×560 으로 내보낸 렌더(검정 20% 덮개 포함). */
.page-header.type2{
	background-image:url(../img/sub/bg_s201.jpg);
}

.page-header.type3{
	background-image:url(../img/sub/bg_s301.jpg);
}
/* type1·type2 배경은 시안 Sv-01·Sv-02 의 렌더(검정 20% 덮개 포함)를 그대로 내보낸 것이라 덮개를
 CSS 로 한 번 더 얹지 않는다 — 이중으로 어두워진다. type3 도 같은 방식으로 내려오는 대분류라 같은 규칙에 묶어 둔다. */
.page-header.type1:after,
.page-header.type2:after,
.page-header.type3:after{content:none;}
/* type3(INFORMATION)·type4 는 시안 이미지가 없어 배경 이미지를 선언하지 않는다 — 골격 견본(s-visual03·04.jpg)을
 그대로 걸어 두면 이 클래스를 쓰는 서브가 생길 때 견본 이미지가 그대로 뜬다. 시안이 오면(Sv-03 node 982:1318 자산 있음)
 그때 .type1·.type2 처럼 bg_s30N 렌더로 정의한다. 그전까지는 위 .page-header 의 단색(--c-text-strong)이 안전한 대체다. */
/* 슬로건(h1)은 헤더 아래 ~ 2depth 탭 위 영역의 세로 중앙(시안 y238~312 → 중심 275 = (80+470)/2) */
.page-header > .container{
	 padding-top:var(--h-header);
	position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100%;
	padding-bottom:calc(var(--h-lnb) + var(--m-lnb));
}
.page-header h1{
	font-size:var(--fs-sub-slogan);font-weight:600;line-height:var(--lh-sub-slogan);
	color:var(--c-text-invert);letter-spacing:-1.8px;text-align:center;
}
/* Splitting.js 글자 모션 — 골격 견본용이다. 이 프로젝트의 서브는 splitting 을 로드하지 않는다
 (시안·메모에 없는 연출). 다른 서브 유형이 쓸 때만 동작한다. */
.page-header .container.motion h1.chars .char{
	animation:textAni 1.5s both;animation-delay:calc(.06s * var(--char-index));
}
@keyframes textAni{ from{opacity:0;transform:translateY(40%);} to{opacity:1;transform:translateY(0);} }
/* page-header : E */

/* ─────────────────────────────────────────────
 lnb : S
───────────────────────────────────────────── */
.lnb{border-bottom:1px solid var(--c-line);background:var(--c-bg);}
.lnb ul{display:flex;}
.lnb ul li{width:1%;flex:1 1 auto;}
.lnb ul li a{
	display:flex;align-items:center;justify-content:center;height:68px;padding:5px;
	font-size:var(--fs-body);color:var(--c-text-weak);text-align:center;
	transition:all var(--t-slow) linear;
}
/* [STA-01] LNB 현재 위치는 .is-active + aria-current="page" 병행 */
.lnb ul li.is-active a{color:var(--c-text);font-weight:600;box-shadow:inset 0 -3px 0 var(--c-primary);}
.lnb ul li a:hover{color:var(--c-text);}
.lnb .btn-drop{display:none;}

/* 2depth 탭 — 시안(node 902:448): Sub_Visual 하단에 겹쳐 놓인 알약 2개(각 715×54, 사이 10).
 활성 = 파랑 채움 · SemiBold / 비활성 = 흰색 20% + 배경 블러 · Medium. 골격 .lnb(흰 바 + 밑줄
 표시)와 모양이 달라 .page-header 안에 있을 때만 덮어쓴다(board 견본의 .lnb 는 그대로). */
.page-header .lnb{position:absolute;left:0;bottom:var(--m-lnb);z-index:2;width:100%;border:0;background:none;}
.page-header .lnb ul{gap:10px;}
.page-header .lnb ul li{width:auto;flex:1 1 0;min-width:0;}
.page-header .lnb ul li a{
	height:var(--h-lnb);padding:0 12px;border-radius:var(--r-pill);
	background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(7.5px);backdrop-filter:blur(7.5px);
	font-size:var(--fs-body);font-weight:500;line-height:30px;letter-spacing:-.54px;color:var(--c-text-invert);
}
.page-header .lnb ul li.is-active a{background:var(--c-primary);box-shadow:none;color:var(--c-text-invert);}
.page-header .lnb ul li a:hover{color:var(--c-text-invert);}
/* lnb : E */

/* ─────────────────────────────────────────────
 sub common : S
───────────────────────────────────────────── */
.real-cont{padding:120px 0 180px;}
/* S-Top(시안 컴포넌트 node 902:375) — 알약 트랙(50×14 #eee) + 파랑 점(10×10, 트랙 안 왼쪽) +
 제목(54/64 SemiBold). 트랙과 점은 빈 요소를 두지 않고 h2 의 ::before/::after 로 그린다(HTM-07). */
#sub .section-header{margin-bottom:60px;text-align:center;}   /* [FBD-03] #sub 네임스페이스 */
#sub .section-header h2{
	position:relative;padding-top:38px;font-size:var(--fs-sub-sec);font-weight:600;line-height:var(--lh-sub-sec);
	color:var(--c-text);letter-spacing:-1.62px;
}
#sub .section-header h2:before{
	content:'';position:absolute;top:0;left:50%;width:50px;height:14px;margin-left:-25px;
	border-radius:var(--r-pill);background:var(--c-line-weak);
}
#sub .section-header h2:after{
	content:'';position:absolute;top:2px;left:50%;width:10px;height:10px;margin-left:-23px;
	border-radius:50%;background:var(--c-primary);
}
#sub .section-header p{margin-top:24px;font-size:var(--fs-body);line-height:1.8;color:var(--c-text-sub);letter-spacing:-.54px;}

.article-header{margin-bottom:32px;}
.article-header h3{font-size:var(--fs-head-sm);font-weight:700;line-height:1.4;color:var(--c-text);letter-spacing:-.9px;}

article ~ article{margin-top:100px;}
/* sub common : E */

/* ─────────────────────────────────────────────
 s1_1 : S ABOUT US > CEO Message [DIR-03] /s1/s1_1.html ↔ .s1_1 ↔ bg_s101 · img_s10101
 시안 node 902:427 의 Block(y892~1882): 왼쪽 Tit(y902) · Txt(y1140, 폭 696) / 오른쪽 Img(640×770) +
 회색 띠(y1098~) + Img 하단에 걸친 로고(552×110). 세로 치수는 Block 상단(y892) 기준.
───────────────────────────────────────────── */
.real-cont.s1_1{padding:130px 0 0;}                     /* S-Top 상단 y690 = Sub_Visual 하단(560) + 130 */
#sub .s1_1 .section-header{margin-bottom:100px;}        /* S-Top 하단 y792 → Block 상단 y892 */

.s1_1 .arti01{position:relative;padding-bottom:220px;}  /* Img 하단 y1662 → 푸터 y1882 */
/* 회색 띠: Block 상단에서 206px 아래(y1098)부터 푸터까지 전폭. 빈 요소 대신 가상요소(HTM-07). */
.s1_1 .arti01:before{content:'';position:absolute;top:206px;right:0;bottom:0;left:0;background:var(--c-bg-weak);}
.s1_1 .arti01 .container{display:flex;justify-content:space-between;align-items:flex-start;}

/* 왼쪽 열 — Tit(y902, 158) → 80 → Txt(y1140, 522) : 위 10 + 158 + 80 + 522 = 770 = Img 높이 */
.s1_1 .arti01__cont{flex:0 0 696px;padding-top:10px;}
.s1_1 .arti01__eyebrow{font-size:var(--fs-body-s);font-weight:600;line-height:36px;color:var(--c-text-weak);letter-spacing:-.48px;}
.s1_1 .arti01__tit{margin-top:10px;font-size:var(--fs-sub-tit);font-weight:600;line-height:var(--lh-sub-tit);color:var(--c-text-strong);letter-spacing:-1.2px;}
.s1_1 .arti01__tit strong{font-weight:inherit;color:var(--c-primary);}   /* 「퓨어앤케이」만 파랑(시안 텍스트 구간) */
.s1_1 .arti01__txt{margin-top:80px;}
.s1_1 .arti01__txt p{font-size:var(--fs-body);line-height:30px;color:var(--c-text-sub);letter-spacing:-.54px;}
.s1_1 .arti01__txt p + p{margin-top:30px;}               /* 시안 문단 사이 빈 줄 1개 = 30 */
.s1_1 .arti01__txt .arti01__sign{margin-top:36px;font-size:var(--fs-sub-sign);font-weight:600;line-height:var(--lh-sub-sign);color:var(--c-text-strong);letter-spacing:-.66px;}

/* 오른쪽 열 — Img 640×770(모서리 30) + 로고(x+44, y+700, 552×110; 하단 40px 이 Img 밖으로 나온다).
 로고 위치·크기는 Img 기준 %(44/640 · 700/770 · 552/640)로 줘서 Img 가 줄어도 같이 줄어든다. */
.s1_1 .arti01__fig{position:relative;flex:0 0 640px;width:640px;aspect-ratio:640/770;}   /* 시안 640×770 */
.s1_1 .arti01__fig picture{display:block;}
.s1_1 .arti01__fig img.arti01__img{display:block;width:100%;height:auto;border-radius:var(--r-xl);}
.s1_1 .arti01__fig img.arti01__logo{position:absolute;top:90.9091%;left:6.875%;width:86.25%;height:auto;}
/* s1_1 : E */

/* ─────────────────────────────────────────────
 s1_2 : S ABOUT US > Contact Us [DIR-03] /s1/s1_2.html ↔ .s1_2 ↔ bg_s101(재사용) · ico_s10201·ico_s10202
 시안 node 982:1242 (1920×2114). 세로 치수는 Block 상단(y892) 기준: Map 460 → 40 → Txt/Btn(y1392, 152) → 하단 180 → 푸터(y1724).
 토큰은 reset.css · 위 sub token 값을 쓴다(리터럴 직접 기입은 시안 값이 토큰에 없는 것만).
───────────────────────────────────────────── */
.real-cont.s1_2{padding:130px 0 180px;}                 /* S-Top 상단 y690 = Sub_Visual 하단(560) + 130 · Block 하단 y1544 → 푸터 y1724 = 180 */
#sub .s1_2 .section-header{margin-bottom:100px;}        /* S-Top 하단 y792 → Block 상단 y892 */

/* Map 1440×460 · #111 · r30 (982:1262) — 안쪽은 카카오맵 지도퍼가기가 채운다(댓글) */
.s1-2-map{position:relative;height:460px;border-radius:var(--r-xl);background:var(--c-text);overflow:hidden;}
.s1-2-map .root_daum_roughmap{width: calc(100% + 2px) !important; margin-left: -1px; }
.s1-2-map .root_daum_roughmap .wrap_map{height: 462px !important; margin-top: -1px !Important;}

/* Txt 583×152 @240 / Btn 356×58 @1324 — 둘 다 y1392(Map 하단 1352 + 40) */
.s1-2-info{display:flex;justify-content:space-between;align-items:flex-start;margin-top:40px;}
.s1-2-txt{flex:1 1 0;min-width:0;display:grid;grid-template-columns:auto 1fr;column-gap:20px;}
.s1-2-txt__row{display:contents;}
.s1-2-txt dt,
.s1-2-txt dd{font-size:var(--fs-body);line-height:38px;letter-spacing:-.54px;}
.s1-2-txt dt{font-weight:600;color:var(--c-text);}
.s1-2-txt dd{color:var(--c-text-sub);}
.s1-2-txt dd a{color:inherit;}

.s1-2-btns{flex:0 0 auto;display:flex;gap:8px;}
.s1-2-btns__btn{
	display:flex;align-items:center;justify-content:space-between;width:174px;height:58px;padding:0 24px;
	border-radius:var(--r-pill);color:var(--c-text-invert);
	font-size:var(--fs-body);font-weight:600;line-height:28px;letter-spacing:-.54px;white-space:nowrap;
}
.s1-2-btns__btn--map{background:var(--c-primary);}
.s1-2-btns__btn--print{background:var(--c-text);}
.s1-2-btns__ico{flex:0 0 20px;width:20px;height:20px;transition:transform var(--t-base) linear;}
/* [댓글 「지도 버튼, 바운스 효과」 · 잠정] 값 지시가 없어 이 프로젝트 모든 버튼 hover 어휘(메모 「버튼 내 아이콘 우측 8px 이동」 ·
 main.css .btn-fill__ico = translateX(8px) · .2s linear)를 두 버튼 아이콘에 그대로 쓴다. 버튼·글자는 움직이지 않는다. */
.s1-2-btns__btn:hover .s1-2-btns__ico{transform:translateY(-3px);}
/* [고도화 2차 · 폭별 점검 · 접근성] 카카오 지도 라이브러리가 확대·축소·초기화 버튼에 outline:none 을 걸어 키보드 초점이 보이지 않았다(Tab 실측 — 3개 버튼 outline:none).
 프로젝트 전역 초점 링(reset.css :focus-visible 2px primary)을 지도 안쪽 버튼·링크에도 적용한다 — 새 모양이 아니라 기존 규칙의 적용 범위. 지도 박스가 overflow:hidden 이라 링은 안쪽(-2px)에 그린다. */
#container .s1-2-map .root_daum_roughmap button:focus-visible,
#container .s1-2-map .root_daum_roughmap a:focus-visible{outline:2px solid var(--c-primary);outline-offset:-2px;}   /* 라이브러리 CSS 의 outline:none 보다 특이도를 높여 이긴다(!important 없이 실측 확인) */
/* s1_2 : E */

/* ─────────────────────────────────────────────
 s2_2 : S SOLUTION > R&D / Lab [DIR-03] /s2/s2_2.html ↔ .s2_2 ↔ bg_s201 · img_s20201 · ico_s20201~04
 시안 node 982:1275 「Sub_02_SOLUTION_01_List」 1920×2124. 클래스 접두 .s2-2-
 시안 y(1920): S-Top 690 → Block 892(+100) → 3depth 46×7 · Top 42 → List 964(+30) → 카드 280 ×2행 +30 → 1554 → 푸터 1734(+180)
───────────────────────────────────────────── */
.real-cont.s2_2{padding:130px 0 180px;}                    /* S-Top 상단 y690 = Sub_Visual 하단(560) + 130 · Block 하단 → 푸터 180 */
#sub .s2_2 .section-header{margin-bottom:100px;}           /* S-Top 하단 y792 → Block 상단 y892 */

/* Block 폭 1600 = 컨테이너 폭(1600 + 좌우 padding 15×2). reset.css 의 #sub .container(1470)와 같은 특이성이고 이 파일이 뒤라 이긴다 */
#sub .container--wide{max-width:calc(var(--w-block) + var(--pad-side) * 2);}
.s2-2-block{display:flex;align-items:flex-start;}

/* ── 3depth : 시안 컴포넌트 3depth_Off / 3depth_On (node 982:1296 · 세로 목록 gap 0 · 항목 높이 46) ──
 Off : 글자 #999 60% SemiBold 18/30 · 패딩 8/0 / On : #0051c6 알약 r50 · 흰 글자 · 패딩 8/20 · 글자 뒤 8 + 60 에 `>` 6×10.
 hover · 키보드 포커스 · 선택(.is-active)이 같은 On 모양이다(댓글 「컴포넌트 확인하여 마우스오버 효과」). */
.s2-2-side{flex:0 0 280px;}                                /* 3depth x160 → 목록 x440 */
.s2-2-cat__list > li > a{
	padding: 8px 20px;
	width: 100%;
	max-width:240px;
	display:flex;align-items:center;/* width:fit-content; */height:46px;;border-radius:var(--r-pill);
	font-size:13px;font-weight:600;line-height:1.5;letter-spacing:-.54px;color:#666;text-align:left;
	transition:padding var(--t-base) linear,background-color var(--t-base) linear,color var(--t-base) linear;
	justify-content: space-between;

}
.s2-2-cat__list > li > a:after{                                      /* 3depth `>` — 빈 요소 대신 가상요소(HTM-07) */
	content:'';flex:0 0 auto;width:0;height:10px;margin-left:0;opacity:0;
	background:url(../img/sub/ico_s20204.svg) no-repeat 50% 50%;background-size:6px 10px;
	transition:width var(--t-base) linear,margin var(--t-base) linear,opacity var(--t-base) linear;
}
/*   .s2-2-cat__btn:hover,
.s2-2-cat__btn:focus-visible,  */
.s2-2-cat__list > li > a#bo_cate_on{padding:8px 20px;background-color:var(--c-primary);color:var(--c-text-invert);}
/*  .s2-2-cat__btn:hover:after,
.s2-2-cat__btn:focus-visible:after,  */
.s2-2-cat__list > li > a#bo_cate_on:after{width:6px;opacity:1;}   /* 글자 뒤 gap 8 + `>` 프레임 좌패딩 60 */

/* ── Top : Total + 검색 + 정렬 (node 982:1283 · 높이 42 · 아래 정렬) ── */
.s2-2-main{flex:1 1 0;min-width:0;max-width:1320px;}        /* x440 · 폭 1320 */
.s2-2-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;min-height:42px; margin-bottom: 30px;}
.s2-2-top__total{font-size:var(--fs-body-s);font-weight:600;line-height:22px;color:var(--c-text-sub);letter-spacing:-.48px;}
.s2-2-top__total strong{font-weight:inherit;color:var(--c-primary);}   /* 숫자만 파랑(시안 텍스트 구간) */
.s2-2-top__form{display:flex;gap:4px;}                       /* Search 260 + 4 + Select 146 = 410 */

.s2-2-field{position:relative;width:260px;height:42px;}
.s2-2-field__input{
	outline:none;
	display:block;width:100%;height:100%;padding:0 52px 0 19px;border:1px solid var(--c-text-sub);border-radius:var(--r-pill);   /* 글자 x+20 = 테두리 1 + 19 */
	background:var(--c-bg);font-size:var(--fs-list-sub);font-weight:500;line-height:var(--lh-list-sub);letter-spacing:-.42px;color:var(--c-text-strong);
}
.s2-2-field__input::placeholder{color:var(--c-field-ph);opacity:1;}
.s2-2-field__btn{
	position:absolute;top:0;right:0;width:60px;height:100%;                                  /* 아이콘 18×18 은 오른쪽에서 16 · 위에서 12 */
	background:url(../img/sub/ico_s20202.svg) no-repeat right 16px center;background-size:18px 18px;
}
.s2-2-sort{
	display:block;width:146px;height:42px;padding:0 35px 0 19px;border:1px solid var(--c-text-sub);border-radius:var(--r-pill); background: #fff;
	background:var(--c-bg) url(../img/sub/ico_s20203.svg) no-repeat right 15px center;background-size:10px 6px;   /* `>` 10×6 은 테두리 밖에서 오른쪽 16 */
	font-size:var(--fs-list-sub);font-weight:500;line-height:var(--lh-list-sub);letter-spacing:-.42px;color:var(--c-text-strong);cursor:pointer;
	outline:none;
}


.s2-2-sort:focus{
	background-image:url(../img/sub/ico_s20203-rotate.svg);
}

/* .s2-2-sort:focus:not(:active){
	background-image:url(../img/sub/ico_s20203.svg);
} */

/* ── List : 2열 645×280 gap 30 · 카드 r30 (node 982:1278) ── */
.s2-2-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:30px;}   /* Top 하단 y934 → List y964 */
.s2-2-card{
	display:flex;gap:42px;height:100%;min-height:280px;padding:29px;border:1px solid var(--c-line);border-radius:var(--r-xl);background:var(--c-bg);   /* 이미지 x+30 = 테두리 1 + 29 */
	transition:border-color var(--t-base) linear;
}
.s2-2-card__pic{flex:0 0 220px;width:220px;height:220px;border-radius:var(--r-pic);overflow:hidden;isolation:isolate;}
.s2-2-card__pic picture{display:block;width:100%;height:100%;}
.s2-2-card__pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) linear;}   /* 이미지 .3s — 규칙 기본값(시안·댓글에 시간 없음) */

.s2-2-card__body{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding-top:10px;}   /* Txt y+40 = 이미지 y+30 +10 */
.s2-2-card__tit{font-size:var(--fs-head-s);font-weight:500;line-height:var(--lh-head-s);color:var(--c-text-strong);letter-spacing:-.84px;transition:color var(--t-base) linear;}
.s2-2-card__sub{margin-top:2px;font-size:var(--fs-list-sub);font-weight:500;line-height:var(--lh-list-sub);color:var(--c-text-weak);letter-spacing:-.42px;transition:color var(--t-base) linear;}
.s2-2-card__desc{margin-top:10px;margin-bottom:22px;padding:8px 0;font-size:var(--fs-body);font-weight:400;line-height:30px;color:var(--c-text-sub);letter-spacing:-.54px;}   /* 시안 설명 박스 높이 76 = 2줄 60 + 위아래 8(글자는 박스 가운데) */

/* Btn_2 — Off : 화살표 x113 / On : 화살표 x121(+8). 버튼 폭 167×42 고정 · 글자 고정 · 화살표만 +8 (프로젝트 .btn-line 과 같은 방식·값) */
.s2-2-card__btn{
	display:inline-flex;align-items:center;gap:12px;width:167px;height:42px;margin-top:auto;padding:5px 27px 5px 25px;   /* 글자 x+26 = 테두리 1 + 25 */
	border:1px solid var(--c-btn-line);border-radius:var(--r-pill);
	font-size:var(--fs-btn);font-weight:600;line-height:var(--lh-btn);letter-spacing:-.48px;color:var(--c-primary-dark);white-space:nowrap;
}
.s2-2-card__btn img{width:26px;height:10px;transition:transform var(--t-base) linear;}   /* 화살표 이동 .2s — .btn-line 과 같은 값 */

/* List_On : 테두리·제목 #0051c6 · 부제 #333 · Btn_2 On(화살표 +8) · 이미지 scale 1.05(댓글) */
.s2-2-card:hover,
.s2-2-card:focus-within{border-color:var(--c-primary);}
.s2-2-card:hover .s2-2-card__tit,
.s2-2-card:focus-within .s2-2-card__tit{color:var(--c-primary);}
.s2-2-card:hover .s2-2-card__sub,
.s2-2-card:focus-within .s2-2-card__sub{color:var(--c-text-strong);}
.s2-2-card:hover .s2-2-card__pic img,
.s2-2-card:focus-within .s2-2-card__pic img{transform:scale(1.05);}
.s2-2-card:hover .s2-2-card__btn img,
.s2-2-card:focus-within .s2-2-card__btn img{transform:translateX(8px);}
/* s2_2 : E */
/* sub 반응형(1400·1280·1024·768·480)은 css/responsive.css 「sub : responsive」로 이관됐다.
 이 파일에서는 데스크톱 기준값만 정의한다. */

/* ─────────────────────────────────────────────
 popup page : S [CSS-06]
 ※ pop_*.html 전용. 별도 CSS 파일을 만들지 않는다 — 6분할을 깨지 않기 위해
 서브 계열 문서로 보고 sub.css 안에 둔다.
───────────────────────────────────────────── */
.popup{padding:40px 30px 60px;}
.popup__head{padding-bottom:20px;border-bottom:2px solid var(--c-text);}
.popup__head h1{font-size:var(--fs-head-s);line-height:var(--lh-head-s);}
.popup__body{padding-top:30px;font-size:var(--fs-body-s);line-height:var(--lh-body-s);color:var(--c-text-sub);}
.popup__body h2{margin:32px 0 12px;font-size:var(--fs-body-l);line-height:var(--lh-body-l);color:var(--c-text);}
.popup__body h2:first-child{margin-top:0;}
.popup__body p + p{margin-top:12px;}
.popup__body ul{margin-top:12px;}
.popup__body ul li{position:relative;padding-left:12px;}
.popup__body ul li:before{content:'';position:absolute;top:11px;left:0;width:3px;height:3px;border-radius:50%;background:var(--c-text-weak);}
.popup__foot{margin-top:40px;text-align:center;}
.popup__close{min-width:140px;height:52px;padding:0 24px;background:var(--c-text);color:var(--c-text-invert);font-size:var(--fs-button);line-height:var(--lh-button);transition:background var(--t-base) linear;}
.popup__close:hover,
.popup__close:focus-visible{background:var(--c-primary);}
/* popup page : E */