@charset "utf-8";
/* ==========================================================
   소상공인 상생보험 모바일웹 레이아웃
   - 기준 : Figma 시안 (412px) / 1rem = 10px (html 62.5%)
   - 컬러 : V5 COLOR 팔레트 / 텍스트 : Text Style Guide 14 Styles
   - 구성 : 공통 토큰 / 베이스 / 헤더 / 푸터 / 하단 네비게이션
   ========================================================== */

:root {
	--transition-custom: all 0.4s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out; /* data-scroll */
	
	/* ---------- V5 COLOR : ORANGE ---------- */
	--o50:  #FFF4ED;
	--o100: #FFE6D5;
	--o200: #FFC9A8;
	--o300: #FFA26F;
	--o400: #FF853D;
	--o500: #FF6828;
	--o600: #F04C18;
	--o700: #D83B10;
	--o800: #B42E0D;
	--o900: #7C210D;

	/* ---------- V5 COLOR : NEUTRAL ---------- */
	--n0:   #FFFFFF;
	--n50:  #F7F7F8;
	--n100: #EFEFF1;
	--n200: #DEDFE2;
	--n300: #BCBEC3;
	--n400: #9A9DA3;
	--n500: #6B6F76;
	--n600: #555960;
	--n700: #3D4147;
	--n800: #272C31;
	--n900: #11161B;

	/* ---------- 시맨틱 컬러 ---------- */
	--color-point: var(--o500);
	--color-txt: var(--n900);
	--color-txt-sub: var(--n500);
	--color-txt-gray: var(--n400);
	--color-bg-gray: var(--n50);
	--color-line: var(--n100);
	--color-blue: #3C5FFF; /* Blue/500 */
	--header-line: rgba(17, 22, 27, 0.15);

	/* ---------- 텍스트 스타일 (Text Style Guide 14 Styles) ----------
	   Heading/01 : Bold 3.2rem / LH 140% / LS -3%
	   Heading/02 : SemiBold 3rem / LH 120% / LS -3%
	   Heading/03 : Bold 2.8rem / LH 140% / LS -3%
	   Heading/04 : Bold 2.2rem / LH 120% / LS -3%
	   Heading/05 : Bold 2rem / LH 120% / LS -3%
	   Body/01 : SemiBold 1.8rem / LH 140% / LS -3%
	   Body/02 : Bold 1.8rem / LH 140% / LS -3%
	   Body/03 : SemiBold 1.6rem / LH 140% / LS -3%
	   Body/04 : Medium 1.6rem / LH 150% / LS -3%
	   Body/05 : Regular 1.6rem / LH 150% / LS -3%
	   Body/06 : Bold 1.6rem / LH 140% / LS -3%
	   Caption/01 : Medium 1.4rem / LH 140% / LS -3%
	   Caption/02 : Bold 1.4rem / LH 140% / LS -3%
	   Caption/03 : SemiBold 1.2rem / LH 100% / LS -3%
	---------------------------------------------------------- */
	--font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
	--ls-base: -0.03em;
}

/* ==========================================================
   base
   ========================================================== */
* { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--font-family);
	color: var(--color-txt);
	background: #E9E9EB;
	font-size: 1.6rem;
	line-height: 1.5;
	letter-spacing: var(--ls-base);
	word-break: keep-all;
}
img { max-width: 100%; vertical-align: top; border: 0; }
button { font-family: inherit; background: none; border: 0; cursor: pointer; color: inherit; letter-spacing: var(--ls-base); }
em, address { font-style: normal; }
.blind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* accessibility */
.cm-accessibility a {
	position: absolute;
	left: 0;
	top: -10rem;
	z-index: 999;
	padding: 1rem 1.6rem;
	background: var(--n900);
	color: var(--n0);
	font-size: 1.4rem;
}
.cm-accessibility a:focus { top: 0; }

/* ==========================================================
   텍스트 스타일 유틸 클래스
   ========================================================== */
.tx-heading01 { font-size: 3.2rem; font-weight: 700; line-height: 1.4; }
.tx-heading02 { font-size: 3rem; font-weight: 600; line-height: 1.2; }
.tx-heading03 { font-size: 2.8rem; font-weight: 700; line-height: 1.4; }
.tx-heading04 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; }
.tx-heading05 { font-size: 2rem; font-weight: 700; line-height: 1.2; }
.tx-body01 { font-size: 1.8rem; font-weight: 600; line-height: 1.4; }
.tx-body02 { font-size: 1.8rem; font-weight: 700; line-height: 1.4; }
.tx-body03 { font-size: 1.6rem; font-weight: 600; line-height: 1.4; }
.tx-body04 { font-size: 1.6rem; font-weight: 500; line-height: 1.5; }
.tx-body05 { font-size: 1.6rem; font-weight: 400; line-height: 1.5; }
.tx-body06 { font-size: 1.6rem; font-weight: 700; line-height: 1.4; }
.tx-caption01 { font-size: 1.4rem; font-weight: 500; line-height: 1.4; }
.tx-caption02 { font-size: 1.4rem; font-weight: 700; line-height: 1.4; }
.tx-caption03 { font-size: 1.2rem; font-weight: 600; line-height: 1; }

/* ==========================================================
   layout
   ========================================================== */
#wrap {
	position: relative;
	max-width: 48rem;
	min-height: 100vh;
	margin: 0 auto;
	background: var(--n0);
	padding-bottom: 7.2rem; /* fixed bottom nav */
	overflow-x: clip; /* hidden 사용 시 position:sticky가 동작하지 않음 */
}

/* ==========================================================
   header (탑 앱 바)
   ========================================================== */
#mHeader {
	position: relative;
	z-index: 100;
	background: var(--n0);
	border-bottom: 1px solid var(--header-line);
	transition: border-bottom-color .2s;
}
#mHeader.sticky-header { position: sticky; top: 0; z-index: 110; }
/* 컨텐츠 탭이 헤더에 붙은 상태 : 보더를 흰색으로 → 헤더+탭 한 덩어리 */
#mHeader.tab-attached { border-bottom-color: var(--n0); }

/* 기관 로고 */
.header-logo-bar {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	height: 4.8rem;
	padding: 0 2.4rem;
}
.header-logo-bar .logo-item { display: flex; }
.header-logo-bar .logo-item.gwangju img { width: 9.3rem; height: 2.4rem; }
.header-logo-bar .logo-item.gjtep img { width: 11.7rem; height: 2rem; object-fit: contain; }
.header-logo-bar .logo-divider { width: 1px; height: 1.4rem; background: var(--n200); }

/* 홈 타이틀바 : Body/01 */
.header-title-bar { display: flex; align-items: center; height: 4.8rem; padding: 0 2.4rem; }
.header-title-bar h1 { font-size: 1.8rem; font-weight: 600; line-height: 1.4; }

/* 서브 타이틀바 (뒤로가기) : Body/01 */
.header-sub-bar {
	display: flex;
	align-items: center;
	height: 4.8rem;
	padding: 0 1.6rem;
	background: var(--n0);
}
.header-sub-bar .back-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.6rem;
	height: 3.6rem;
	position: relative;
}
.header-sub-bar .back-btn:before{position: absolute; top: 0; left: -0.6rem; width: 100%; height: 100%; border-radius: 100%; background: var(--n50); content: ''; opacity: 0; transition: opacity .2s;}
.header-sub-bar .back-btn:active:before {opacity: 0.3; background: var(--n100);}
@media (hover: hover) {
	.header-sub-bar .back-btn:hover:before { opacity: 1; }
}
.header-sub-bar .back-btn img {position: relative; z-index: 1; width: 2rem; height: 2rem; }
.header-sub-bar h1 { font-size: 1.8rem; font-weight: 600; line-height: 1.4; }

/* 전체메뉴 열기 버튼 (타이틀바/서브바 우측 공통) */
#mHeader .all-menu-btn {
	position: absolute;
	right: 1.2rem;
	top: 5.4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	transition: background .2s;
}
#mHeader .all-menu-btn span {
	display: block;
	width: 2rem;
	height: 2px;
	border-radius: 2px;
	background: var(--n900);
}
#mHeader .all-menu-btn:active { background: var(--n100); }
@media (hover: hover) {
	#mHeader .all-menu-btn:hover { background: var(--n50); }
}

/* ==========================================================
   전체메뉴
   ========================================================== */
/* 클리핑 래퍼 : 패널이 화면(최대 48rem 프레임) 안쪽에서만 보이도록 */
#allMenuWrap {
	position: fixed;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 100%;
	max-width: 48rem;
	height: 100%;
	z-index: 250;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0s .3s;
}
#allMenuWrap.on {
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s 0s;
}
/* 패널 : 오른쪽에서 슬라이드 인 */
#allMenu {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--n0);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#allMenuWrap.on #allMenu { transform: translateX(0); }
#allMenu .all-menu-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 5.6rem;
	padding: 0 1.2rem 0 2.4rem;
	border-bottom: 1px solid var(--header-line);
}
#allMenu .all-menu-logo { display: flex; align-items: center; gap: 1.2rem; }
#allMenu .all-menu-logo .logo-item { display: flex; }
#allMenu .all-menu-logo .logo-item.gwangju img { width: 9.3rem; height: 2.4rem; }
#allMenu .all-menu-logo .logo-item.gjtep img { width: 11.7rem; height: 2rem; object-fit: contain; }
#allMenu .all-menu-logo .logo-divider { width: 1px; height: 1.4rem; background: var(--n200); }
#allMenu .all-menu-close-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.6rem;
	height: 3.6rem;
	font-size: 2.2rem;
	color: var(--n600);
	border-radius: 50%;
	transition: background .2s;
}
#allMenu .all-menu-close-btn:active { background: var(--n100); }
@media (hover: hover) {
	#allMenu .all-menu-close-btn:hover { background: var(--n50); }
}

#allMenu .all-menu-list { padding: 0.8rem 0 2.4rem; }
#allMenu .all-menu-list > li > a,
#allMenu .all-menu-list .all-menu-toggle-JS {
	/* Body/02 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 6rem;
	padding: 0 2.4rem;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--n900);
	text-align: left;
	transition: background .2s, color .2s;
}
#allMenu .all-menu-list > li > a:active,
#allMenu .all-menu-list .all-menu-toggle-JS:active { background: var(--n50); }
@media (hover: hover) {
	#allMenu .all-menu-list > li > a:hover,
	#allMenu .all-menu-list .all-menu-toggle-JS:hover { color: var(--color-point); }
}
#allMenu .all-menu-toggle-JS .arrow { font-size: 2rem; color: var(--n400); transition: transform .25s; }
#allMenu li.open .all-menu-toggle-JS .arrow { transform: rotate(180deg); }
#allMenu li.on .all-menu-toggle-JS { color: var(--color-point); }

#allMenu .all-menu-sub {
	display: none;
	padding: 0.8rem 0;
	background: var(--color-bg-gray);
}
#allMenu .all-menu-sub a {
	/* Body/04 */
	display: block;
	padding: 1.2rem 2.4rem;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--n500);
	transition: color .2s;
}
#allMenu .all-menu-sub a:active { color: var(--color-point); }
@media (hover: hover) {
	#allMenu .all-menu-sub a:hover { color: var(--color-point); }
}

/* ==========================================================
   공통 : 안내 문구 (Caption/01, Blue/500)
   ========================================================== */
.blue-note {
	margin-top: 0.8rem;
	color: var(--color-blue);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.4;
}

/* ==========================================================
   footer (하단 정보)
   ========================================================== */
#mFooter {
	position: relative;
	background: var(--color-bg-gray);
	padding: 4.8rem 2.4rem;
	z-index: 1;
}
#mFooter .footer-tit { font-size: 1.8rem; font-weight: 700; line-height: 1.4; } /* Body/02 */
#mFooter .footer-line { height: 1px; margin: 2.4rem 0; background: var(--n200); }
#mFooter .footer-info li { display: flex; gap: 0.8rem; align-items: center; font-size: 1.4rem; line-height: 1.4; }
#mFooter .footer-info li + li { margin-top: 0.8rem; }
#mFooter .footer-info strong { flex-shrink: 0; font-weight: 700; color: var(--n900); } /* Caption/02 */
#mFooter .footer-info span { flex: 1; font-weight: 500; color: var(--n500); } /* Caption/01 */

/* 카카오채널 배너 */
#mFooter .footer-kakao-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	height: 4.8rem;
	margin-top: 2rem;
	background: #FFDE00;
	border-radius: 1.2rem;
	font-size: 1.4rem;
	line-height: 1.4;
	color: var(--n900);
	transition: filter .2s, transform .2s;
}
#mFooter .footer-kakao-btn img {position: relative; top: -0.1rem; width: 2.4rem; height: 2.4rem; }
#mFooter .footer-kakao-btn strong { font-weight: 700; } /* Caption/02 */
#mFooter .footer-kakao-btn span { font-weight: 500; } /* Caption/01 */
#mFooter .footer-kakao-btn:active { transform: scale(0.98); }
@media (hover: hover) {
	#mFooter .footer-kakao-btn:hover { filter: brightness(0.96); }
}

/* 약관 링크 */
#mFooter .footer-terms {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 2.4rem;
}
#mFooter .footer-terms a {
	/* Caption/01 */
	position: relative;
	padding: 0.4rem 1rem;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1;
	color: var(--n900);
	transition: color .2s;
}
#mFooter .footer-terms a + a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 0.2rem; height: 0.2rem; border-radius: 100%;
	background: var(--n300);
}
#mFooter .footer-terms a b { font-weight: 600; color: var(--n900); }
@media (hover: hover) {
	#mFooter .footer-terms a:hover { color: var(--n800); }
	#mFooter .footer-terms a:hover b { color: var(--n800); }
}

/* ==========================================================
   모달 레이어 팝업 (layer_popup.js)
   ========================================================== */
.modal-fixed-pop-wrapper {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 300;
	background: rgba(17, 22, 27, 0.6);
}
.modal-fixed-pop-wrapper .modal-inner-content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 4rem);
	max-width: 43.2rem;
}
.modal-loading {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3.6rem;
	height: 3.6rem;
	margin: -1.8rem 0 0 -1.8rem;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top-color: var(--n0);
	border-radius: 50%;
	animation: modalSpin .8s linear infinite;
}
@keyframes modalSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* 모달 컨텐츠 (etc/agreement.php, etc/privacy.php) */
.footer-modal-content {
	position: relative;
	background: var(--n0);
	border-radius: 2rem;
	padding: 2.4rem;
}
.footer-modal-content h1 {
	/* Heading/05 */
	padding-right: 3.6rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
}
.footer-modal-content .modal-close-btn {
	position: absolute;
	top: 1.4rem;
	right: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.6rem;
	height: 3.6rem;
	font-size: 2.2rem;
	color: var(--n600);
	border-radius: 50%;
	transition: background .2s;
}
.footer-modal-content .modal-close-btn:active { background: var(--n100); }
@media (hover: hover) {
	.footer-modal-content .modal-close-btn:hover { background: var(--n50); }
}
.footer-modal-content .footer-inner-box {
	margin-top: 1.6rem;
	max-height: 56vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.footer-modal-content .footer-inner {
	/* Caption/01 */
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--n500);
	line-height: 1.6;
}

/* ==========================================================
   하단 고정 네비게이션
   ========================================================== */
#bottomNav {
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 100%;
	max-width: 48rem;
	z-index: 200;
	display: flex;
	justify-content: space-between;
	padding: 0 2.4rem;
	background: var(--n0);
	border-top: 1px solid var(--header-line);
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
#bottomNav a {
	/* Caption/03 */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	width: 7.2rem;
	height: 7.2rem;
	padding-top: 1.4rem;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1;
	color: var(--color-txt-gray);
}
#bottomNav a.on { color: var(--color-point); }
#bottomNav a { transition: color .2s; }
#bottomNav a .nav-ico { transition: transform .2s; }
#bottomNav a:active .nav-ico { transform: scale(0.88); }
#bottomNav a.on .nav-txt{color: var(--color-point);}

@media (hover: hover) {
	#bottomNav a:hover { color: var(--n600); }
	#bottomNav a.on:hover { color: var(--color-point); }
}
#bottomNav .nav-ico {
	width: 2.4rem;
	height: 2.4rem;
}
#bottomNav .nav-ico.ico-home { background: url("../images/icon/nav_home.svg") center/cover no-repeat;}
#bottomNav a.on .nav-ico.ico-home { background: url("../images/icon/nav_home_on.svg") center/cover no-repeat;}
#bottomNav .nav-ico.ico-claim { background: url("../images/icon/nav_claim.svg") center/cover no-repeat;}
#bottomNav a.on .nav-ico.ico-claim { background: url("../images/icon/nav_claim_on.svg") center/cover no-repeat;}
#bottomNav .nav-ico.ico-status { background: url("../images/icon/nav_folder.svg") center/cover no-repeat;}
#bottomNav a.on .nav-ico.ico-status { background: url("../images/icon/nav_folder_on.svg") center/cover no-repeat;}
#bottomNav .nav-ico.ico-faq { background: url("../images/icon/nav_faq.svg") center/cover no-repeat;}
#bottomNav a.on .nav-ico.ico-faq { background: url("../images/icon/nav_faq_on.svg") center/cover no-repeat;}