*,
*::before,
*::after { box-sizing: border-box; } 

html, body { height: 100%; } 

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } 

body, h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; } 

ul, ol { list-style: none; margin: 0; padding: 0; margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0; } 
li { list-style: none; margin: 0; padding: 0; } 

img, svg, video, canvas { display: block; max-width: 100%; height: auto; } 

table { border-collapse: collapse; border-spacing: 0; } 

button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; padding: 0; } 

a { color: inherit; text-decoration: none; } 

/* 포커스 기본 가시성만 유지 */
:focus-visible { outline: 2px solid #0000; outline-offset: 2px; } 

/* 레이아웃 흔들림 방지(가능 브라우저) */
html { scrollbar-gutter: stable; } 
/* ===============================
 1) Design Tokens (Colors & Gradients)
 =============================== */
:root { 
  /* Base Colors */
 --primary-light: #9CEAE2; 
 --primary: #53C3B4; 
 --primary-dark: #09ACBE; 
 --secondary1: #2443A2; 
 --error: #FF3257; 
 --positive: #00BCF8; 
 --nagative: #FF8A00; 

 /* 원문 표기 유지 */
 --green_bg: #EAF6F4; 
 --orange-bg: #FFF4DD; 
 --pink-bg: #FFF7F8; 
 --gray-line: #B4C7E0; 
 --gray-bg: #F6FAFF; 
 --green_bg: #EAF6F4; 

 /* Gradients */
 --point-gra: linear-gradient(156deg, #818AF5 8.88%, #606BE2 84.56%); 
 --main-gra: linear-gradient(139deg, #36D0BE 9.21%, #00B0C0 76.66%); 
 --gra2: linear-gradient(156deg, #F2748C 8.88%, #DD516C 84.56%); 
 --point-gra2: linear-gradient(156deg, #F2748C 8.88%, #DD516C 84.56%); 

 /* Optional semantic aliases */
 --brand: var(--secondary1); 
 --success: var(--positive); 
 --warning: var(--nagative); 
 --danger: var(--error); 

 /* Surface & text (기본 UI용) */
 --bg: #F5F6F8; 
 --surface: #FFFFFF; 
 --text: #333; 
 --text-muted: #6B7280; 
 --whtie: #fff; 
 --gray1: #FAFAFA; 
 --gray2: #F7F7F7; 
 --gray3: #EEE; 
 --gray4: #E4E4E4; 
 --gray5: #DADADA; 
 --gray6: #BDBDBD; 
 --gray7: #999; 
 --gray8: #666; 
 --gray9: #333; 
 --black: #181818; 

 /* Layout */
 --wrap-max: 1440px; 
} 

/* 배경/경계 유틸 (선택) */
.bg-primary { background: var(--primary); } 
.bg-primary-light { background: var(--primary-light); } 
.bg-primary-dark { background: var(--primary-dark); } 
.bg-secondary1 { background: var(--secondary1); } 
.bg-gray-bg { background: var(--gray-bg); } 
.bg-green { background: var(--green_bg); } 
.bg-point-gra { background: var(--point-gra); } 
.bg-main-gra { background: var(--main-gra); } 
.bg-gra2 { background: var(--gra2); } 
.border-gray { border: 1px solid var(--gray-line); } 

/* =====================================================
 Utility Classes (Spacing / Display / Text helpers)
===================================================== */

/* --- Display --- */
.hide { display: none !important; } 
.show { display: block !important; } 

/* --- Spacing Scale (px) --- */
/* 필요 시 확장 가능: 0, 2, 4, 8, 12, 16, 20, 24 ... */

:root { --space-0: 0; 
  --space-2: 2px; 
  --space-4: 4px; 
  --space-8: 8px; 
  --space-12: 12px; 
  --space-16: 16px;  
  --space-20: 20px; 
  --space-24: 24px; 
  --space-30: 30px; 
  --space-32: 32px; 
  --space-40: 40px; 
  --space-60: 60px; 
} 

/* --- Margin --- */
.m0 { margin: var(--space-0) !important; } 
.m2 { margin: var(--space-2) !important; } 
.m4 { margin: var(--space-4) !important; } 
.m8 { margin: var(--space-8) !important; } 
.m12 { margin: var(--space-12) !important; } 
.m16 { margin: var(--space-16) !important; } 
.m20 { margin: var(--space-20) !important; } 
.m24 { margin: var(--space-24) !important; } 

.mt0 { margin-top: var(--space-0) !important; } 
.mt4 { margin-top: var(--space-4) !important; } 
.mt8 { margin-top: var(--space-8) !important; } 
.mt12 { margin-top: var(--space-12) !important; } 
.mt16 { margin-top: var(--space-16) !important; } 
.mt20 { margin-top: var(--space-20) !important; } 
.mt24 { margin-top: var(--space-24) !important; } 
.mt30 { margin-top: var(--space-30) !important; } 
.mt32 { margin-top: var(--space-32) !important; } 
.mt40 { margin-top: var(--space-40) !important; } 
.mt60 { margin-top: var(--space-60) !important; } 

.mr4 { margin-right: var(--space-4) !important; } 
.mr8 { margin-right: var(--space-8) !important; } 
.mr12 { margin-right: var(--space-12) !important; } 
.mr16 { margin-right: var(--space-16) !important; } 

.mb4 { margin-bottom: var(--space-4) !important; } 
.mb8 { margin-bottom: var(--space-8) !important; } 
.mb12 { margin-bottom: var(--space-12) !important; } 
.mb16 { margin-bottom: var(--space-16) !important; } 
.mb20 { margin-bottom: var(--space-20) !important; } 
.mb24 { margin-bottom: var(--space-24) !important; } 
.mb30 { margin-bottom: var(--space-30) !important; } 
.mb32 { margin-bottom: var(--space-32) !important; } 
.mb40 { margin-bottom: var(--space-40) !important; } 
.mb60 { margin-bottom: var(--space-60) !important; } 

.ml4 { margin-left: var(--space-4) !important; } 
.ml8 { margin-left: var(--space-8) !important; } 
.ml12 { margin-left: var(--space-12) !important; } 
.ml16 { margin-left: var(--space-16) !important; } 

/* --- Padding --- */
.p0 { padding: var(--space-0) !important; } 
.p4 { padding: var(--space-4) !important; } 
.p8 { padding: var(--space-8) !important; } 
.p12 { padding: var(--space-12) !important; } 
.p16 { padding: var(--space-16) !important; } 

.pt4 { padding-top: var(--space-4) !important; } 
.pt8 { padding-top: var(--space-8) !important; } 
.pt12 { padding-top: var(--space-12) !important; } 
.pt16 { padding-top: var(--space-16) !important; } 

.pr4 { padding-right: var(--space-4) !important; } 
.pr8 { padding-right: var(--space-8) !important; } 
.pr12 { padding-right: var(--space-12) !important; } 
.pr16 { padding-right: var(--space-16) !important; } 

.pb4 { padding-bottom: var(--space-4) !important; } 
.pb8 { padding-bottom: var(--space-8) !important; } 
.pb12 { padding-bottom: var(--space-12) !important; } 
.pb16 { padding-bottom: var(--space-16) !important; } 

.pl4 { padding-left: var(--space-4) !important; } 
.pl8 { padding-left: var(--space-8) !important; } 
.pl12 { padding-left: var(--space-12) !important; } 
.pl16 { padding-left: var(--space-16) !important; } 

.df { display: flex; } 
.df-ac { display: flex; align-items: center; } 
.df-ac-jc { display: flex; align-items: center; justify-content: center; } 
.df-ac-sb { display: flex; align-items: center; justify-content: space-between; } 
.df-ac-fe { display: flex; align-items: center; justify-content: flex-end;} 

.g4 { gap: 4px; } 
.g6 { gap: 6px; } 
.g8 { gap: 8px; } 
.g10 { gap: 10px; } 
.g16 { gap: 16px; } 
.g20 { gap: 20px; } 
.g24 { gap: 24px; } 

.tac { text-align: center !important; } 
.tal { text-align: left !important; } 
.tar { text-align: right !important; } 

.w100p { width: 100%; } 
.cursorDefault { cursor: default !important; }


/* ===============================
 2) Typography (NanumBarunGothic)
 =============================== */

 @font-face { font-family: 'NanumGothic'; font-style: normal; font-weight: 400; src: url('/css/font/NanumBarunGothicLight.ttf') format('truetype'); } 

@font-face { font-family: 'NanumGothic'; font-style: normal; font-weight: 600; src: url('/css/font/NanumBarunGothicBold.ttf') format('truetype'); } 

@font-face { font-family: 'NanumGothic'; font-style: normal; font-weight: 700; src: url('/css/font/NanumBarunGothicBold.ttf') format('truetype'); } 

@font-face { font-family: 'NanumGothic'; font-style: normal; font-weight: 300; src: url('/css/font/NanumBarunGothicUltraLight.ttf') format('truetype'); } 

:root { --font-base: "NanumBarunGothic" } 

body { font-family: var(--font-base); font-size: 14px; /* 기본 14px 베이스 */
 line-height: 1.5; color: var(--text); } 

/* Headline1 (h1) — 22px/100%, -0.44px */
h1, .headline1 { font-family: var(--font-base); font-size: 1.375rem; /* 22px */
 font-weight: 600; line-height: 1; /* 22px */
 letter-spacing: -0.44px; } 

/* Headline2 (h2) — 20px/100%, -0.4px */
h2, .headline2 { font-size: 1.25rem; /* 20px */
 font-weight: 600; line-height: 1; /* 20px */
 letter-spacing: -0.4px; } 

/* Headline3 (h3) — 18px/100%, -0.36px */
h3, .headline3 { font-size: 1.125rem; /* 18px */
 font-weight: 600; line-height: 1; /* 18px */
 letter-spacing: -0.36px; } 

h3, .headline3.mark { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 18px; font-weight: 600; line-height: 100%; letter-spacing: -0.36px; margin: 0; } 
.headline3.mark::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; /* 타이틀과 아이콘 간격 */ margin-bottom: 2px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path d='M13 9C13 6.79086 11.2091 5 9 5C6.79086 5 5 6.79086 5 9C5 11.2091 6.79086 13 9 13V18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18V13C11.2091 13 13 11.2091 13 9Z' fill='url(%23paint0_linear_577_1974)'/><defs><linearGradient id='paint0_linear_577_1974' x1='4.09091' y1='4.09091' x2='18' y2='18' gradientUnits='userSpaceOnUse'><stop offset='0.163462' stop-color='%2309ACBE'/><stop offset='1' stop-color='%236C8BE8'/></linearGradient></defs></svg>") no-repeat center/contain; vertical-align: middle; }

/* Headline4 (h4) — 16px/100%, -0.32px */
h4, .headline4 { font-size: 1rem; /* 16px */
 font-weight: 400; line-height: 1; /* 16px */
 letter-spacing: -0.32px; } 

/* Headline5 (h5) — 14px/100%, -0.28px */
h5, .headline5 { font-size: 0.875rem; /* 14px */
 font-weight: 600; line-height: 1; /* 14px */
 letter-spacing: -0.28px; } 

/* span */


/* Body1 — 17px/130%, -0.3px */
.body1 { /* body1 */
 font-family: NanumBarunGothic; font-size: 17px; font-style: normal; font-weight: 400; line-height: 130%; /* 22.1px */
 letter-spacing: -0.34px; } 

/* Body2 — 16px/130%, -0.14px */
.body2 { /* body2 */
 font-family: NanumBarunGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; /* 20.8px */
 letter-spacing: -0.16px; } 

.fw400 { font-weight: 400 !important; } 
.fw600 { font-weight: 600 !important; } 
/* 보조 텍스트 */
.text-muted { color: var(--text-muted); } 

/* 스크롤 바 */

/* Chromium/WebKit (Chrome/Edge/Safari) */
*::-webkit-scrollbar { width: 8px; height: 8px; } 
*::-webkit-scrollbar-track { background: var(--gray2, #F7F7F7); } 
*::-webkit-scrollbar-thumb { background: var(--gray4, #E4E4E4); border-radius: 0; } 
*::-webkit-scrollbar-corner { background: var(--gray2, #F7F7F7); } 

/* 화살표(증감 버튼) 제거 */
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; } 
/* ===============================
 3) 레이아웃 유틸(셀렉트)
 =============================== */

/* 트리거 버튼 */
.ui-select { position: relative; width: 100%; } 
.ui-select-button { width: 100%; min-height: 42px; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; border-radius: 4px; border: 1px solid var(--gray6, #BDBDBD); background: var(--whtie, #FFF); color: var(--gray9, #333); font-size: 16px; line-height: 1; cursor: pointer; } 
.popup .ui-select-button { gap: 10px; padding: 10px 12px; } 

/* 오른쪽 화살표 (지정 SVG 사용) */
.ui-select-button::after { content: ""; width: 16px; height: 16px; /* 네가 준 svg size에 맞춤 */
 flex: 0 0 auto; background: currentColor; /* fill 색상은 currentColor */
 opacity: .8; -webkit-mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M4.94 5.53003L8 8.58336L11.06 5.53003L12 6.47003L8 10.47L4 6.47003L4.94 5.53003Z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M4.94 5.53003L8 8.58336L11.06 5.53003L12 6.47003L8 10.47L4 6.47003L4.94 5.53003Z'/></svg>") center/contain no-repeat; transition: transform .2s ease; } 


/* 상태 */
.ui-select:focus-within .ui-select-button { border-color: var(--primary, #53C3B4); } 
.ui-select.error .ui-select-button { border-color: var(--error, #FF3257); } 
.ui-select.off { cursor: not-allowed; } 
.ui-select.off .ui-select-button,
.ui-select[aria-disabled="true"] .ui-select-button { background: var(--gray2, #F7F7F7); border-color: var(--gray6, #BDBDBD); color: var(--gray6, #BDBDBD); cursor: not-allowed; pointer-events: none; } 

/* 열림 시 화살표 회전 */
.ui-select[aria-expanded="true"] .ui-select-button::after { transform: rotate(180deg); } 

/* 옵션 목록 */
.ui-select-list { position: absolute; left: 0; right: 0; top: 42px; z-index: 1000; border-radius: 4px; border: 1px solid var(--gray6, #BDBDBD); background: var(--whtie, #FFF); color: var(--gray9, #333); font-size: 14px; line-height: 1; max-height: 280px; overflow: auto; background-clip: content-box; /* 스크롤바와 4px 간격 */ } 


/* 옵션 */
.ui-select-option { min-height: 40px; font-size: 16px; padding: 10px 16px; cursor: pointer; } 
.ui-select-option:hover { background: var(--gray2, #F7F7F7); } 
.ui-select-option[aria-selected="true"] { font-weight: 600; } 


/* =========================
 Input 기본 스타일
 ========================= */
.inp { display: block; width: 100%; min-height: 42px; max-height: 42px; padding: 10px 16px; border: 1px solid var(--gray6, #BDBDBD); border-radius: 4px; background: var(--whtie, #FFF); color: var(--gray9, #333); font-size: 16px; line-height: 1; /* 100% = 14px */
 -webkit-appearance: none; appearance: none; } 

/* placeholder */
.inp::placeholder { color: var(--gray6, #BDBDBD); opacity: 1; } 

/* focus */
.inp:focus { outline: 0; border-color: var(--primary, #53C3B4); background: var(--whtie, #FFF); } 

/* disabled */
.inp[disabled],
.inp.is-disabled { background: var(--gray2, #F7F7F7); border-color: var(--gray6, #BDBDBD); color: var(--gray6, #BDBDBD); cursor: not-allowed; } 
.inp:read-only { border-radius: 4px; border: 1px solid var(--gray6, #BDBDBD); background: var(--gray2, #F7F7F7); } 

/* error */
.inp.error,
.inp[aria-invalid="true"] { border-color: var(--error, #FF3257); } 

/* 숫자/검색 브라우저 기본 버튼 제거 */
.inp[type="number"]::-webkit-outer-spin-button,
.inp[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 
.inp[type="number"] { -moz-appearance: textfield; } 
.inp[type="search"]::-webkit-search-decoration,
.inp[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } 

/* 인풋 캘린더 */
.ui-date { position: relative; display: inline-block; width: 100%; min-height: 42px; } 

.ui-date .date { display: block; width: 100%; min-height: 42px; padding: 10px 40px 10px 16px; /* 오른쪽 공간 확보 */
 border: 1px solid var(--gray6, #BDBDBD); border-radius: 4px; background: var(--whtie, #FFF); color: var(--gray9, #333); font-size: 16px; line-height: 1; font-weight: 600; -webkit-appearance: none; appearance: none; } 

/* 브라우저 기본 아이콘은 보이지 않지만 클릭 가능하게 */
.ui-date .date::-webkit-calendar-picker-indicator { position: absolute; right: 12px; width: 16px; height: 16px; opacity: 0; /* 안 보이게 */
 cursor: pointer; /* 클릭 가능 유지 */
 z-index: 1; } 

/* 커스텀 아이콘 */
.ui-date::after { content: ""; position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; transform: translateY(-50%); background: currentColor; opacity: .9; -webkit-mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' fill-rule='evenodd' clip-rule='evenodd' d='M5.33337 0.666748C5.70156 0.666748 6.00004 0.965225 6.00004 1.33341V2.00008H10V1.33341C10 0.965225 10.2985 0.666748 10.6667 0.666748C11.0349 0.666748 11.3334 0.965225 11.3334 1.33341V2.00008H12.6667C13.7713 2.00008 14.6667 2.89551 14.6667 4.00008V13.3334C14.6667 14.438 13.7713 15.3334 12.6667 15.3334H3.33337C2.2288 15.3334 1.33337 14.438 1.33337 13.3334V4.00008C1.33337 2.89551 2.2288 2.00008 3.33337 2.00008H4.66671V1.33341C4.66671 0.965225 4.96518 0.666748 5.33337 0.666748ZM4.66671 3.33341H3.33337C2.96518 3.33341 2.66671 3.63189 2.66671 4.00008V6.00008H13.3334V4.00008C13.3334 3.63189 13.0349 3.33341 12.6667 3.33341H11.3334V4.00008C11.3334 4.36827 11.0349 4.66675 10.6667 4.66675C10.2985 4.66675 10 4.36827 10 4.00008V3.33341H6.00004V4.00008C6.00004 4.36827 5.70156 4.66675 5.33337 4.66675C4.96518 4.66675 4.66671 4.36827 4.66671 4.00008V3.33341ZM13.3334 7.33342H2.66671V13.3334C2.66671 13.7016 2.96518 14.0001 3.33337 14.0001H12.6667C13.0349 14.0001 13.3334 13.7016 13.3334 13.3334V7.33342Z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' fill-rule='evenodd' clip-rule='evenodd' d='M5.33337 0.666748C5.70156 0.666748 6.00004 0.965225 6.00004 1.33341V2.00008H10V1.33341C10 0.965225 10.2985 0.666748 10.6667 0.666748C11.0349 0.666748 11.3334 0.965225 11.3334 1.33341V2.00008H12.6667C13.7713 2.00008 14.6667 2.89551 14.6667 4.00008V13.3334C14.6667 14.438 13.7713 15.3334 12.6667 15.3334H3.33337C2.2288 15.3334 1.33337 14.438 1.33337 13.3334V4.00008C1.33337 2.89551 2.2288 2.00008 3.33337 2.00008H4.66671V1.33341C4.66671 0.965225 4.96518 0.666748 5.33337 0.666748ZM4.66671 3.33341H3.33337C2.96518 3.33341 2.66671 3.63189 2.66671 4.00008V6.00008H13.3334V4.00008C13.3334 3.63189 13.0349 3.33341 12.6667 3.33341H11.3334V4.00008C11.3334 4.36827 11.0349 4.66675 10.6667 4.66675C10.2985 4.66675 10 4.36827 10 4.00008V3.33341H6.00004V4.00008C6.00004 4.36827 5.70156 4.66675 5.33337 4.66675C4.96518 4.66675 4.66671 4.36827 4.66671 4.00008V3.33341ZM13.3334 7.33342H2.66671V13.3334C2.66671 13.7016 2.96518 14.0001 3.33337 14.0001H12.6667C13.0349 14.0001 13.3334 13.7016 13.3334 13.3334V7.33342Z'/></svg>") center/contain no-repeat; } 

/* testarea */
textarea { min-height: 100px; resize: vertical; display: flex; width: 100%; padding: 10px 0 10px 16px; overflow: auto; border-radius: 4px; border: 1px solid var(--gray6, #BDBDBD); background: var(--whtie, #FFF); } 
/* =========================
 Button Base
========================= */
.btn { display: flex; justify-content: center; align-items: center; gap: 6px; border-radius: 4px; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; transition: background .2s ease, border-color .2s ease; vertical-align: middle; /* baseline 보정 */
 white-space: nowrap; /* 줄바꿈 방지 */ } 

/* =========================
 Color Variants
========================= */

/* Primary */
.btn-primary { background: var(--primary, #53C3B4); color: #fff; border: none; } 
.btn-primary:hover { background: #2CB6BF; } 
.btn-primary:active { background: var(--primary-dark, #09ACBE); } 
.btn-primary:focus { outline: none; } 
.btn-primary:disabled,
.btn-primary.is-disabled { background: var(--gray5, #DADADA); color: #fff; cursor: not-allowed; } 

/* Primary Dark */
.btn-primary-dark { background: var(--primary-dark, #09ACBE); color: #fff; border: none; } 

/* Secondary1 */
.btn-second1 { background: var(--secondary1, #2443A2); color: #fff; border: none; } 
.btn-second1:disabled,
.btn-second1.is-disabled { background: var(--gray5, #DADADA); color: #fff; cursor: not-allowed; } 

/* Secondary2 (outlined) */
.btn-second2 { border: 1px solid var(--gray7, #999); background: #fff; color: var(--gray9, #333); } 
.btn-second2:disabled,
.btn-second2.is-disabled { background: var(--gray5, #DADADA); border-color: var(--gray5, #DADADA); color: #fff; cursor: not-allowed; } 

/* =========================
 Size Variants
========================= */

/* Large */
.end-btn-wrap { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; } 
.btn-lg { min-width: 140px; max-width: 140px; height: 49px; padding: 12px; } 


/* Small */
/* =========================
 Button Base
========================= */
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 6px; border-radius: 4px; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; transition: background .2s ease, border-color .2s ease; } 


/* 사이즈 */
.btn-lg { min-width: 140px; height: 49px; padding: 12px; font-size: 17px; font-weight: 600; line-height: 17px; } 
.btn-md { min-width: 120px; height: 42px; padding: 12px 0; color: var(--whtie, #FFF); font-size: 16px; font-weight: 600; line-height: 100%; /* 16px */ } 
.btn-sm { height: 34px; padding: 9px 16px; font-size: 16px; font-weight: 400; line-height: 100%; /* 16px */ } 

/* 컬러 타입 */
.btn-primary { background: var(--primary, #53C3B4); color: #fff; border: none; } 
.btn-second1 { background: var(--secondary1, #2443A2); color: #fff; border: none; } 
.btn-second2 { background: #fff; border: 1px solid var(--gray7, #999); color: var(--gray9, #333); } 

/* =========================
 Icon Buttons (btn-sm 전용)
 ::before는 아이콘 클래스 붙였을 때만 보임
========================= */
.btn-sm::before { content: none; display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; } 

/* --- 단색 아이콘 (mask + currentColor) --- */
.btn-plus::before,
.btn-del::before,
.btn-add::before,
.btn-talk::before,
.btn-chk::before,
.btn-save::before,
.btn-list::before { content: ""; background: currentColor; } 

/* 추가 (+) */
.btn-plus::before { -webkit-mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M12.6667 8.66683H8.66671V12.6668H7.33337V8.66683H3.33337V7.3335H7.33337V3.3335H8.66671V7.3335H12.6667V8.66683Z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M12.6667 8.66683H8.66671V12.6668H7.33337V8.66683H3.33337V7.3335H7.33337V3.3335H8.66671V7.3335H12.6667V8.66683Z'/></svg>") center/contain no-repeat; } 

/* 삭제 */
.btn-del::before { -webkit-mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M10.6667 6V12.6667H5.33337V6H10.6667ZM9.66671 2H6.33337L5.66671 2.66667H3.33337V4H12.6667V2.66667H10.3334L9.66671 2ZM12 4.66667H4.00004V12.6667C4.00004 13.4 4.60004 14 5.33337 14H10.6667C11.4 14 12 13.4 12 12.6667V4.66667Z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M10.6667 6V12.6667H5.33337V6H10.6667ZM9.66671 2H6.33337L5.66671 2.66667H3.33337V4H12.6667V2.66667H10.3334L9.66671 2ZM12 4.66667H4.00004V12.6667C4.00004 13.4 4.60004 14 5.33337 14H10.6667C11.4 14 12 13.4 12 12.6667V4.66667Z'/></svg>") center/contain no-repeat; } 

/* 등록 */
.btn-add::before { -webkit-mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M9.37248 6.01333L9.98581 6.62667L3.94581 12.6667H3.33248V12.0533L9.37248 6.01333ZM11.7725 2C11.6058 2 11.4325 2.06667 11.3058 2.19333L10.0858 3.41333L12.5858 5.91333L13.8058 4.69333C14.0658 4.43333 14.0658 4.01333 13.8058 3.75333L12.2458 2.19333C12.1125 2.06 11.9458 2 11.7725 2ZM9.37248 4.12667L1.99915 11.5V14H4.49915L11.8725 6.62667L9.37248 4.12667Z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M9.37248 6.01333L9.98581 6.62667L3.94581 12.6667H3.33248V12.0533L9.37248 6.01333ZM11.7725 2C11.6058 2 11.4325 2.06667 11.3058 2.19333L10.0858 3.41333L12.5858 5.91333L13.8058 4.69333C14.0658 4.43333 14.0658 4.01333 13.8058 3.75333L12.2458 2.19333C12.1125 2.06 11.9458 2 11.7725 2ZM9.37248 4.12667L1.99915 11.5V14H4.49915L11.8725 6.62667L9.37248 4.12667Z'/></svg>") center/contain no-repeat; } 

/* 상담 */
.btn-talk::before { -webkit-mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M13.3334 1.3335H2.66671C1.93337 1.3335 1.33337 1.9335 1.33337 2.66683V14.6668L4.00004 12.0002H13.3334C14.0667 12.0002 14.6667 11.4002 14.6667 10.6668V2.66683C14.6667 1.9335 14.0667 1.3335 13.3334 1.3335ZM13.3334 10.6668H4.00004L2.66671 12.0002V2.66683H13.3334V10.6668Z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M13.3334 1.3335H2.66671C1.93337 1.3335 1.33337 1.9335 1.33337 2.66683V14.6668L4.00004 12.0002H13.3334C14.0667 12.0002 14.6667 11.4002 14.6667 10.6668V2.66683C14.6667 1.9335 14.0667 1.3335 13.3334 1.3335ZM13.3334 10.6668H4.00004L2.66671 12.0002V2.66683H13.3334V10.6668Z'/></svg>") center/contain no-repeat; } 

/* 체크 */
.btn-chk::before { -webkit-mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M5.86339 10.5831L3.08339 7.80312L2.13672 8.74312L5.86339 12.4698L13.8634 4.46979L12.9234 3.52979L5.86339 10.5831Z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M5.86339 10.5831L3.08339 7.80312L2.13672 8.74312L5.86339 12.4698L13.8634 4.46979L12.9234 3.52979L5.86339 10.5831Z'/></svg>") center/contain no-repeat; } 

/* 저장 */
.btn-save::before { -webkit-mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M12.6667 8V12.6667H3.33333V8H2V12.6667C2 13.4 2.6 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V8H12.6667ZM8.66667 8.44667L10.3933 6.72667L11.3333 7.66667L8 11L4.66667 7.66667L5.60667 6.72667L7.33333 8.44667V2H8.66667V8.44667Z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M12.6667 8V12.6667H3.33333V8H2V12.6667C2 13.4 2.6 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V8H12.6667ZM8.66667 8.44667L10.3933 6.72667L11.3333 7.66667L8 11L4.66667 7.66667L5.60667 6.72667L7.33333 8.44667V2H8.66667V8.44667Z'/></svg>") center/contain no-repeat; } 

/* 목록 */
.btn-list::before { -webkit-mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M2 8.6665H3.33333V7.33317H2V8.6665ZM2 11.3332H3.33333V9.99984H2V11.3332ZM2 5.99984H3.33333V4.6665H2V5.99984ZM4.66667 8.6665H14V7.33317H4.66667V8.6665ZM4.66667 11.3332H14V9.99984H4.66667V11.3332ZM4.66667 4.6665V5.99984H14V4.6665H4.66667Z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M2 8.6665H3.33333V7.33317H2V8.6665ZM2 11.3332H3.33333V9.99984H2V11.3332ZM2 5.99984H3.33333V4.6665H2V5.99984ZM4.66667 8.6665H14V7.33317H4.66667V8.6665ZM4.66667 11.3332H14V9.99984H4.66667V11.3332ZM4.66667 4.6665V5.99984H14V4.6665H4.66667Z'/></svg>") center/contain no-repeat; } 

/* --- 다색 아이콘 (엑셀만 예외, background-image 사용) --- */
.btn-exel::before { content: ""; display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; background: none; background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M8.05293 1.33864C8.70839 1.28421 9.20761 1.66619 9.33167 2.28837L9.33301 13.6751C9.24818 14.2758 8.7389 14.6962 8.11093 14.6652C6.22065 14.2353 4.20565 14.0131 2.33146 13.5502C1.7635 13.4101 1.43057 13.1138 1.33468 12.535L1.33301 3.49135C1.38229 3.0168 1.69779 2.61853 2.17053 2.48392L8.05293 1.33864ZM4.54662 5.23242H3.17467L4.60596 8.00829L3.04056 10.7623H4.37898C4.66665 10.0345 5.11424 9.36705 5.33284 8.61515L6.33632 10.7623H7.62445L6.12074 7.98123L7.59092 5.23242H6.36951C6.02719 5.92826 5.64398 6.61237 5.39922 7.34699L4.54595 5.23242H4.54662Z' fill='%23333'/><path d='M9.99976 13.333V11.7111H11.1573V10.6508H9.99976V9.5905H11.1573V8.53018H9.99976V7.46985H11.1573V6.40953H9.99976V5.34921H11.1573V4.28888H9.99976V2.66699H13.6259C14.1209 2.66699 14.6883 3.25606 14.6658 3.71044L14.6641 12.3508C14.6491 12.7827 14.1012 13.3337 13.6259 13.3337H9.99976V13.333ZM12.3493 5.34858H12.9112C12.9238 5.34858 13.1237 5.29796 13.1514 5.28796C13.558 5.13858 13.5952 4.61889 13.2517 4.38201C13.2264 4.36451 13.0913 4.28826 13.0814 4.28826H12.3493V5.34858ZM12.3493 7.46923H13.0132C13.063 7.46923 13.2725 7.35673 13.3213 7.31454C13.5737 7.0961 13.5236 6.66141 13.2333 6.48797C13.2066 6.47203 13.0616 6.40859 13.0473 6.40859H12.3493V7.46923ZM12.3493 9.59019H13.0473C13.0613 9.59019 13.2063 9.52675 13.2333 9.51081C13.5236 9.33768 13.5741 8.90268 13.3213 8.68424C13.2725 8.64205 13.0634 8.52955 13.0132 8.52955H12.3493V9.59019ZM12.3493 11.7111H13.0814C13.0913 11.7111 13.2264 11.6349 13.2517 11.6174C13.5952 11.3805 13.558 10.8608 13.1514 10.7114C13.1237 10.7011 12.9235 10.6508 12.9112 10.6508H12.3493V11.7111Z' fill='%231C773A'/></svg>"); background-repeat: no-repeat; background-position: center; background-size: contain; } 

/* =========================
 Second2 버튼 상태
========================= */
.btn-second2:disabled { border-radius: 4px; border: 1px solid var(--gray6, #BDBDBD); background: #FFF; color: var(--gray6, #BDBDBD); cursor: not-allowed; } 
.btn-second2:disabled::before { background: var(--gray6, #BDBDBD); /* 아이콘도 회색 */ } 

.btn-second2:focus { border-radius: 4px; border: 1px solid var(--gray7, #999); background: var(--green_bg, #EAF6F4); } 

.btn-second2:active { border-radius: 4px; border: 1px solid var(--gray7, #999); background: #E0EDEC; } 

.btn-second2:hover:not(:disabled) { border-radius: 4px; border: 1px solid var(--gray7, #999); background: var(--green_bg, #EAF6F4); } 

/* =========================
 Checkbox
========================= */
.ui-checkbox-wrap { display: flex; gap: 20px; flex-wrap: wrap; } 
.grid-table th .ui-checkbox-wrap { justify-content: center; } 
.grid-table td .ui-checkbox-wrap { justify-content: center; } 
.ui-checkbox { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } 
.ui-checkbox .ui-checkbox-label { word-break: keep-all; } 
/* 실제 체크박스 숨김 */
.ui-checkbox input[type="checkbox"] { display: none; } 

/* 체크박스 박스 */
.ui-checkbox-box { display: flex; justify-content: center; align-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--white, #FFF); border: 1px solid var(--gray6, #BDBDBD); box-sizing: border-box; } 

/* 체크된 상태 */
.ui-checkbox input[type="checkbox"]:checked + .ui-checkbox-box { background: var(--primary, #53C3B4); border-color: var(--primary, #53C3B4); } 

/* 체크마크 아이콘 삽입 */
.ui-checkbox input[type="checkbox"]:checked + .ui-checkbox-box::before { content: ""; display: block; width: 14px; height: 10px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'><path d='M12.3334 1L5.00002 8.33333L1.66669 5' stroke='%23F5F5F5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; } 
/* 체크박스 박스 */
.ui-checkbox-box { display: flex; justify-content: center; align-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--white, #FFF); border: 1px solid var(--gray6, #BDBDBD); box-sizing: border-box; position: relative; /* 아이콘 위치 고정용 */ } 

/* 체크마크 아이콘 자리 항상 확보 */
.ui-checkbox-box::before { content: ""; position: absolute; width: 14px; height: 10px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'><path d='M12.3334 1L5.00002 8.33333L1.66669 5' stroke='%23F5F5F5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; opacity: 0; /* 기본은 숨김 */
 transition: opacity .15s ease-in-out; } 

/* 체크 상태일 때만 아이콘 보이기 */
.ui-checkbox input[type="checkbox"]:checked + .ui-checkbox-box::before { opacity: 1; } 

/* =========================
 Radio
========================= */
.radio-wrap { display: flex; gap: 8px 20px; flex-wrap: wrap; } 

.ui-radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 16px; } 

/* 실제 라디오 숨김 */
.ui-radio input[type="radio"] { display: none; } 

/* 라디오 기본 원 */
.ui-radio-box { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--gray6, #BDBDBD); background: var(--white, #FFF); position: relative; /* inner dot 위치 고정 */
 box-sizing: border-box; } 

/* 체크된 상태의 inner dot */
.ui-radio-box::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--primary, #53C3B4); transform: translate(-50%, -50%); opacity: 0; transition: opacity .15s ease-in-out; } 

/* 체크된 경우 inner dot 보이게 */
.ui-radio input[type="radio"]:checked + .ui-radio-box::after { opacity: 1; } 

/* =========================
 Arrow Buttons
========================= */
.arrow-btn { width: 23px; height: 25px; display: inline-flex; justify-content: center; align-items: center; background: none; border: none; padding: 0; cursor: pointer; position: relative; } 

.arrow-btn .arrow-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } 

/* 기본 */
.arrow-btn::before { content: ""; display: block; width: 23px; height: 25px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='23' height='25' viewBox='0 0 23 25' fill='none'><path d='M23 11.5V13.5C23 14.0521 22.8307 14.5234 22.4922 14.9141C22.1536 15.3047 21.7135 15.5 21.1719 15.5H10.1719L14.75 20.0938C15.1458 20.4688 15.3438 20.9375 15.3438 21.5C15.3438 22.0625 15.1458 22.5312 14.75 22.9062L13.5781 24.0938C13.1927 24.4792 12.724 24.6719 12.1719 24.6719C11.6302 24.6719 11.1562 24.4792 10.75 24.0938L0.578125 13.9062C0.192708 13.5208 0 13.0521 0 12.5C0 11.9583 0.192708 11.4844 0.578125 11.0781L10.75 0.921875C11.1458 0.526042 11.6198 0.328125 12.1719 0.328125C12.7135 0.328125 13.1823 0.526042 13.5781 0.921875L14.75 2.07812C15.1458 2.47396 15.3438 2.94792 15.3438 3.5C15.3438 4.05208 15.1458 4.52604 14.75 4.92188L10.1719 9.5H21.1719C21.7135 9.5 22.1536 9.69531 22.4922 10.0859C22.8307 10.4766 23 10.9479 23 11.5Z' fill='%23E4E4E4'/></svg>") center/contain no-repeat; } 

/* hover */
.arrow-btn:hover::before { background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='23' height='25' viewBox='0 0 23 25' fill='none'><path d='M23 11.5V13.5C23 14.0521 22.8307 14.5234 22.4922 14.9141C22.1536 15.3047 21.7135 15.5 21.1719 15.5H10.1719L14.75 20.0938C15.1458 20.4688 15.3438 20.9375 15.3438 21.5C15.3438 22.0625 15.1458 22.5312 14.75 22.9062L13.5781 24.0938C13.1927 24.4792 12.724 24.6719 12.1719 24.6719C11.6302 24.6719 11.1562 24.4792 10.75 24.0938L0.578125 13.9062C0.192708 13.5208 0 13.0521 0 12.5C0 11.9583 0.192708 11.4844 0.578125 11.0781L10.75 0.921875C11.1458 0.526042 11.6198 0.328125 12.1719 0.328125C12.7135 0.328125 13.1823 0.526042 13.5781 0.921875L14.75 2.07812C15.1458 2.47396 15.3438 2.94792 15.3438 3.5C15.3438 4.05208 15.1458 4.52604 14.75 4.92188L10.1719 9.5H21.1719C21.7135 9.5 22.1536 9.69531 22.4922 10.0859C22.8307 10.4766 23 10.9479 23 11.5Z' fill='%23DADADA'/></svg>"); } 

/* pressed */
.arrow-btn:active::before { background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='23' height='25' viewBox='0 0 23 25' fill='none'><path d='M23 11.5V13.5C23 14.0521 22.8307 14.5234 22.4922 14.9141C22.1536 15.3047 21.7135 15.5 21.1719 15.5H10.1719L14.75 20.0938C15.1458 20.4688 15.3438 20.9375 15.3438 21.5C15.3438 22.0625 15.1458 22.5312 14.75 22.9062L13.5781 24.0938C13.1927 24.4792 12.724 24.6719 12.1719 24.6719C11.6302 24.6719 11.1562 24.4792 10.75 24.0938L0.578125 13.9062C0.192708 13.5208 0 13.0521 0 12.5C0 11.9583 0.192708 11.4844 0.578125 11.0781L10.75 0.921875C11.1458 0.526042 11.6198 0.328125 12.1719 0.328125C12.7135 0.328125 13.1823 0.526042 13.5781 0.921875L14.75 2.07812C15.1458 2.47396 15.3438 2.94792 15.3438 3.5C15.3438 4.05208 15.1458 4.52604 14.75 4.92188L10.1719 9.5H21.1719C21.7135 9.5 22.1536 9.69531 22.4922 10.0859C22.8307 10.4766 23 10.9479 23 11.5Z' fill='%2353C3B4'/></svg>"); } 

/* 오른쪽 화살표 (좌우 반전) */
.right-arrow-btn::before { transform: scaleX(-1); } 

/* =========================
 Pagination
========================= */
.pagination { display: flex; justify-content: center; align-items: center; } 

/* 공통 버튼 */
.page-btn { width: 30px; height: 30px; padding: 0; font-size: 14px; font-weight: 400; line-height: 14px; color: var(--gray7, #999); border: none; background: none; cursor: pointer; display: flex; justify-content: center; align-items: center; } 

/* 현재 페이지 */
.page-btn.active { border-radius: 4px; background: var(--primary-dark, #09ACBE); color: var(--white, #FFF); font-weight: 600; } 

/* 시각적 숨김 텍스트 */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } 

/* ====== 화살표 아이콘 ====== */

/* 맨처음 */
.page-btn.first::before { content: ""; width: 11px; height: 12px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='12' viewBox='0 0 11 12' fill='none'><path d='M9.75 1.5L5.25 6L9.75 10.5' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M5.5 1.5L1 6L5.5 10.5' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; } 

/* 이전 */
.page-btn.prev::before { content: ""; width: 6px; height: 12px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='12' viewBox='0 0 6 12' fill='none'><path d='M5.25 1.5L0.75 6L5.25 10.5' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; } 

/* 다음 = 이전 반전 */
.page-btn.next::before { content: ""; width: 6px; height: 12px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='12' viewBox='0 0 6 12' fill='none'><path d='M5.25 1.5L0.75 6L5.25 10.5' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; transform: scaleX(-1); } 

/* 맨끝 = 맨처음 반전 */
.page-btn.last::before { content: ""; width: 11px; height: 12px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='12' viewBox='0 0 11 12' fill='none'><path d='M9.75 1.5L5.25 6L9.75 10.5' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M5.5 1.5L1 6L5.5 10.5' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; transform: scaleX(-1); } 


/* =========================
 Tab Menu
========================= */
.tab-menu { display: flex; width: 100%; align-items: center; gap: 28px; border-bottom: 1px solid var(--gray6, #BDBDBD); } 

.tab-btn { display: flex; padding-bottom: 14px; justify-content: center; align-items: center; gap: 10px; color: var(--gray6, #BDBDBD); background: none; border: none; cursor: pointer; font-family: NanumBarunGothic; font-size: 20px; font-weight: 600; line-height: 100%; /* 20px */
 letter-spacing: -0.4px; } 

.tab-btn.active { border-bottom: 2px solid var(--gray9, #333); color: var(--gray9, #333); } 

/* 컨텐츠와 탭 사이 간격 */
.tab-content { margin-top: 20px; } 

/* =========================
 Header Menu
========================= */
.ui-header.dummy { height: 142px; } 
.ui-header { width: 100%; } 

/* 상단 영역 */
.header-top { width: 100%; border-bottom: 1px solid var(--gray5, #DADADA); } 

.header-inner { width: 100%; max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; /* 여백은 프로젝트 맞게 조정 */ } 
.header-bottom .header-inner { padding: 0; } 

@media (max-width: 1440px){
  .header-inner{padding: 20px 16px;}
}
@media (max-width: 1024px){
 .header-top .header-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; } 
 .header-bottom .header-inner { padding: 0 20px; } 
 }

.header-left { display: flex; align-items: center; gap: 15px; } 

.header-logo { height: 24px; /* 로고 크기 맞게 */ } 

.header-title { color: var(--black, #181818); text-align: center; font-family: NanumBarunGothic; font-size: 21px; font-style: normal; font-weight: 400; line-height: 100%; /* 21px */ } 

.header-right { display: flex; align-items: center; } 

/* 세션 만료시간 */
.session-time { margin-right: 8px; color: var(--secondary1, #2443A2); font-family: NanumBarunGothic; font-size: 14px; font-weight: 400; line-height: 100%; letter-spacing: -0.28px; } 

/* 연장하기 버튼 */
.header-right .btn { margin-right: 20px; padding:0 10px; font-family: NanumBarunGothic; font-size: 14px; font-weight: 400; line-height: 100%; letter-spacing: -0.28px; height:26px;} 

/* 사용자 영역 */
.user-wrap { display: flex; align-items: center; gap: 10px; } 

/* 사용자명 */
.user-wrap .user-name { color: var(--primary-dark, #09ACBE); font-family: NanumBarunGothic; font-size: 15px; font-weight: 600; line-height: 100%; } 

.user-wrap > *:not(:first-child)::before { content: ""; display: inline-block; width: 1px; height: 14px; background-color: var(--gray6, #BDBDBD); margin-right: 20px; /* divider 뒤쪽 간격 */
 vertical-align: middle; } 

/* 로그아웃, 사용자정보변경 링크 */
.header-link { color: var(--primary-dark, #09ACBE); font-family: NanumBarunGothic; font-size: 15px; font-style: normal; font-weight: 600; line-height: 100%; /* 15px */
 text-decoration: none; } 

.header-link:hover { text-decoration: underline; } 
.user-wrap .header-link { display: block; } 
.login .user-wrap .header-link.login-link { display: none; } 
.user-wrap .login-link.join-link { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 14px; font-weight: 400; line-height: 100%; text-decoration: none; } 

.login .user-wrap .user-name { display: block; } 

.user-wrap .user-name { display: none; } 
.user-wrap .logout { display: none; } 
.user-wrap .user-link { display: none; } 
.user-wrap .login-link::before { content: none; } 
.user-wrap .join-link::before { content: ""; display: inline-block; width: 1px; height: 14px; background-color: var(--gray6, #BDBDBD); margin-right: 10px; /* divider 뒤쪽 간격 */
 vertical-align: middle; } 

.session-time { display: none; } 
.header-right .btn { display: none; } 
.header-right .ui-select { display: none; } 
.login.header-right .ui-select { width: inherit; display: block;} 
/* 디폴트 */
.header-right .ui-select .ui-select-button { gap: 4px; min-height: 24px; max-height: 24px; padding: 0; border: none; color: var(--primary-dark, #09ACBE); font-family: NanumBarunGothic; font-size: 15px; font-style: normal; font-weight: 600; line-height: 100%; /* 15px */ } 
.header-right .ui-select .ui-select-button::after { width: 24px; height: 24px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M10 5.5L5 0.5L0 5.5L10 5.5Z' fill='%2309ACBE'/></svg>") center/contain no-repeat; background-size: 16px; -webkit-mask:inherit; mask: inherit; } 

/* 노숙인 디자인 컬러변경 */
.homeless-body .header-right .ui-select .ui-select-button { gap: 4px; min-height: 24px; max-height: 24px; padding: 0; border: none; color: var(--primary-, #E55F79); font-family: NanumBarunGothic; font-size: 15px; font-style: normal; font-weight: 600; line-height: 100%; /* 15px */ } 
.homeless-body .header-right .ui-select .ui-select-button::after { width: 24px; height: 24px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M7 9.5L12 14.5L17 9.5H7Z' fill='%23E55F79'/></svg>") center/contain no-repeat; background-size: 24px; -webkit-mask:inherit; mask: inherit; } 

.login .session-time { display: block; } 
.login.header-right .btn { display: block; } 

.login .user-wrap .logout { display: block; } 
.login .user-wrap .user-link { display: block; } 
.login .user-wrap .login-link { display: none; } 
.login .user-wrap .login-link { display: block; color: var(--primary-dark, #09ACBE); font-family: NanumBarunGothic; font-size: 14px; font-weight: 600; line-height: 100%; } 
.login .user-wrap .login-link.join-link { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 14px; font-weight: 400; line-height: 100%; text-decoration: none; } 


/* 하단 영역 */
.header-bottom { width: 100%; border-bottom: 1px solid var(--gray5, #DADADA); } 

/* 하단 메뉴 */
.gnb { width:100%; z-index:99; } 
.gnb .depth1 { position:relative; display: flex; } 
.gnb .depth1>li { margin:0; position: relative; display:inline-block; vertical-align:top; width: 100%; /* max-width: 240px; */} 
.gnb .depth1>li>a { display: block; padding: 24px 0; position:relative; color: var(--gray9, #333); text-align: left; font-size: 18px; font-weight: 600; line-height: 100%; /* 18px */ } 
.gnb .depth1>li>a:hover { color: var(--secondary1, #2443A2); font-weight: 600; line-height: 100%; /* 18px */ } 

.gnb .depth1>li.on>a { color: var(--secondary1, #2443A2); font-size: 18px; font-weight: 600; line-height: 100%; /* 18px */ } 
.gnb .depth1>li.on>a::after { content:''; display:block; width:100%; height:3px; position:absolute; bottom:0; left:0; } 
/* .gnb .depth1>li.on .depth2 { background:#fafafa; }  */
#header.on .gnb .depth1>li>a, #header.scroll .gnb .depth1>li>a { color: #000; } 
.gnb .depth2 { height: 0px; overflow: hidden; position: absolute; width: 100%; background: #fff; border-top: 1px solid var(--gray4, #E4E4E4); z-index: 9999; } 
.gnb .depth2::after { content: ''; position: absolute; } 
.gnb .depth2 li:nth-of-type(1) { } 
.gnb .depth2 li .link-depth2 { display:block; margin-top: 28px; width:100%; height:100%; color: var(--gray9, #333); font-size: 15px; font-weight: 400; line-height: 130%; /* 19.5px */ letter-spacing: -0.3px; text-align: left; } 
.gnb .depth2 li .link-depth2:first-child { margin-top: 0; } 
.gnb .depth2 li .link-depth2:hover { color:#0084e5 !important; font-weight:bold; } 
.gnb .depth2 li .link-depth2+.link-depth3 { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 16px; font-style: normal; font-weight: 600; line-height: 130%; /* 20.8px */ letter-spacing: -0.32px; } 
.gnb .depth2 li .link-depth3:first-child { margin-top: 10px; } 
.gnb .depth2 li .link-depth3 { display:block; margin-top: 16px; width:100%; height:100%; color: var(--gray8, #666); font-size: 15px; font-weight: 600; line-height: 130%; /* 19.5px */ letter-spacing: -0.3px; text-align: left; } 
.gnb .depth2 li .link-depth3:hover { color: var(--primary-dark, #09ACBE); } 

.gnb_bg { position: absolute; } 

.ui-header.on .depth1 { } 
.ui-header.on .depth2 { padding: 20px 0; } 
.ui-header.on .depth1::before { position:absolute; content:''; right:-100vw; left:-100vw; top:100%; height:var(--menu-bg-height,230px); border-top:1px solid #ececec; z-index:-1; background:#FFF; box-shadow:0 13px 20px 0 rgba(0,0,0,0.05); } 


/* =====================================================
 햄버거 버튼 (.btn_gnb)
 - 1024px 이하에서만 노출
 - 기본: 햄버거 아이콘
 - .on 클래스 추가 시: 닫기 아이콘
===================================================== */

.btn_gnb { display: none; width: 28px; height: 28px; background: none; border: none; padding: 0; cursor: pointer; position: relative; text-indent: -9999px; /* 라벨 숨김 */
 overflow: hidden; } 

.btn_gnb::before { content: ""; display: block; width: 28px; height: 28px; background: no-repeat center/contain; background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'><path d='M3.5 21H24.5V18.6667H3.5V21ZM3.5 15.1667H24.5V12.8333H3.5V15.1667ZM3.5 7V9.33333H24.5V7H3.5Z' fill='%23333'/></svg>"); transition: background-image 0.2s ease; } 

.btn_gnb.on::before { background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'><path d='M22.1668 7.4785L20.5218 5.8335L14.0002 12.3552L7.4785 5.8335L5.8335 7.4785L12.3552 14.0002L5.8335 20.5218L7.4785 22.1668L14.0002 15.6452L20.5218 22.1668L22.1668 20.5218L15.6452 14.0002L22.1668 7.4785Z' fill='%23333'/></svg>"); } 

@media (max-width: 1024px){
 .btn_gnb { display: inline-block; } 
 .ui-header.on .depth1::before { right: -45px; } 
 }

/* =========================
 Footer
========================= */
.footer { padding: 40px 0; background: var(--gray1, #FAFAFA); } 
.footer .cont-wrap { display: flex; align-items: flex-start; gap: 60px; width: 100%; max-width: var(--wrap-max); margin: 0 auto; } 
.footer .cont-wrap .l-box { display: flex; flex-direction: column; align-items: center; gap: 20px; } 
.footer .cont-wrap .l-box img { } 
.footer .cont-wrap .l-box h3 { } 
.footer .cont-wrap .r-box { display: flex; flex-direction: column; gap: 10px; } 
.footer .cont-wrap .r-box .link { color: #E7617B; font-size: 14px; font-weight: 400; line-height: 100%; /* 14px */ letter-spacing: -0.28px; } 
.footer .cont-wrap .r-box ul p { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 13px; font-style: normal; font-weight: 400; line-height: 150%; /* 19.5px */ letter-spacing: -0.26px; } 
.footer .cont-wrap .r-box .list-txt { display: flex; gap: 10px; } 
.footer .cont-wrap .r-box .copy-t { color: var(--gray7, #999); font-family: NanumBarunGothic; font-size: 13px; font-style: normal; font-weight: 400; line-height: 150%; /* 19.5px */ letter-spacing: -0.26px; } 
.footer { } 
@media (max-width: 1440px){
  .footer{padding: 40px 16px;}
}
@media (max-width: 1024px){
 .footer .cont-wrap { gap: 40px; } 
 }

/* =====================================================
 팝업 (Modal Popup)
 - 구조: .popup-backdrop > .popup > .popup-title / .popup-content / .popup-actions
 - 상태: 기본 중앙 정렬 모달, 타이틀/버튼 고정, 컨텐츠만 스크롤
 - 특징: border-radius 16px / 배경 반투명 / 버튼영역 gap 8px
 - 반응형: 뷰포트 크기에 따라 width 축소, 모바일은 꽉 채움
===================================================== */
/* 모달 팝업이 생성될 시점에 body태그에 popup-open 클래스 추가 */
body.popup-open { overflow: hidden; } 
/* 팝업 뒷배경 */
.popup-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.20); display: flex; justify-content: center; align-items: center; z-index: 1000; } 

/* 팝업 본체 */
.popup { border-radius: 16px; border: 1px solid var(--gray4, #E4E4E4); background: #FFF; width: 1100px; max-height: 90vh; /* 뷰포트 기준 최대 높이 */
 padding: 40px; display: flex; flex-direction: column; } 

/* 타이틀 */
.popup-title { margin-bottom: 20px; color: var(--gray9, #333); /* h1 */
 font-family: NanumBarunGothic; font-size: 22px; font-weight: 600; line-height: 100%; /* 22px */
 letter-spacing: -0.44px; } 

/* 컨텐츠 (스크롤 구간) */
.popup-content { flex: 1; overflow-y: auto; } 

/* 하단 버튼 영역 */
.popup-actions { margin-top: 30px; display: flex; justify-content: center; gap: 8px; } 

/* =====================================================
 반응형 대응
===================================================== */

/* 태블릿 (1024px 이하) */
@media (max-width: 1024px){
 .popup { width: 90%; /* 좌우 여백 확보 */
 padding: 30px; /* 여백 축소 */ } 

 .popup-title { font-size: 20px; } 
 }

/* 모바일 (768px 이하) */
@media (max-width: 768px){
 .popup { width: 98%; height: 98%; max-height: 100vh; padding: 16px; } 

 .popup-title { font-size: 18px; } 

 .popup-actions { gap: 12px; } 
 }




.container { max-width: var(--wrap-max); margin-inline: auto; display: flex; gap: 60px; margin: 0 auto; margin-top: 50px; margin-bottom: 100px; } 
/* =====================================================
 사이드메뉴 (container 연동 + 토글 + 3뎁스 완성본)
===================================================== */
.side { width:220px; min-width:220px; max-width:220px; margin-top: -50px; background:#fff; position:relative; transition:width .4s ease,min-width .4s ease,max-width .4s ease; } 
.container.side-collapsed { gap:45px; } 
.container.side-collapsed .side { width:26px; min-width:26px; max-width:26px; border:none; overflow:hidden; } 
.container.side-collapsed .side .side-header { padding: 0; height: 61px; position: initial; background: transparent; } 
.container.side-collapsed .side .side-menu { display: none; } 
.container.side-collapsed .side .side-title { display: none; } 
.container.side-collapsed .side { } 
/* open 상태 (container 닫힘 시 버튼만 남음) */
.side.collapsed .side-toggle { position: inherit; max-width: 100px; height: 26px; width: 61px; padding: 0 13px; white-space: nowrap; margin-top: -1px; } 
.side.collapsed .side-toggle::after { transform:rotate(90deg); } 
/* 헤더 */
.side-header { position:relative; display:flex; justify-content:center; align-items:center; height:110px; padding:30px 10px; background:var(--secondary1,#2443A2); } 
.side-title { color:#fff; font-family:NanumBarunGothic; font-size:22px; font-weight:600; letter-spacing:-0.44px; } 

/* 닫기/열기 버튼 */
.side-toggle { position:absolute; width: 61px; height: 26px; transform: rotate(90deg); top: 17px; right: -43px; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:4px; padding:3px 8px; border:none; border-radius:0 8px 0 0; background:var(--secondary1,#2443A2); color:#fff; font-family:NanumBarunGothic; font-size:13px; font-weight:600; line-height:100%; cursor:pointer; transition:all .3s ease; } 
.side-toggle::after { content:""; display:inline-block; width:6px; height:10px; background:url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'><path d='M5.08329 0.833496L0.916626 5.00016L5.08329 9.16683V0.833496Z' fill='white'/></svg>") center/contain no-repeat; transition:transform .3s ease; transform: rotate(-90deg); } 



/* 2뎁스 */
.side-menu { border-left:1px solid var(--gray4,#E4E4E4); border-right:1px solid var(--gray4,#E4E4E4); } 
.side-menu>li>a { display:flex; height:56px; padding:20px; align-items:center; color:var(--gray9,#333); font-family:NanumBarunGothic; font-size:18px; font-weight:400; line-height:100%; letter-spacing:-0.36px; border-bottom:1px solid var(--gray4,#E4E4E4); background:#fff; transition:.3s; } 
.side-menu>li>a:hover { color:var(--secondary1,#2443A2); } 
.side-menu>li>a.active { border:1px solid var(--secondary1,#2443A2); color:var(--secondary1,#2443A2); } 

/* 3뎁스 아이콘 + 애니메이션 */
.side-menu>li.has-depth { position:relative; } 
.side-menu>li.has-depth .depth2-toggle { position:absolute; top:16px; right:16px; width:24px; height:24px; border:none; background:url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M19 11H13V5H11V11H5V13H11V19H13V13H19V11Z' fill='%23E4E4E4'/></svg>") center/contain no-repeat; cursor:pointer; transition:.2s; } 
.side-menu>li.has-depth.open .depth2-toggle { background:url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M5 12C5 11.7348 5.10536 11.4804 5.29289 11.2929C5.48043 11.1054 5.73478 11 6 11H18C18.2652 11 18.5196 11.1054 18.7071 11.2929C18.8946 11.4804 19 11.7348 19 12C19 12.2652 18.8946 12.5196 18.7071 12.7071C18.5196 12.8946 18.2652 13 18 13H6C5.73478 13 5.48043 12.8946 5.29289 12.7071C5.10536 12.5196 5 12.2652 5 12Z' fill='%232443A2'/></svg>") center/contain no-repeat; } 

/* 3뎁스 내용 */
.depth3 { display:flex; flex-direction:column; gap:28px; max-height:0; overflow:hidden; padding:0; transition:max-height .3s ease,padding .3s ease; } 
.side-menu>li.has-depth.open .depth3 { padding:28px 0; max-height:400px; background: var(--gray1, #FAFAFA); border-bottom: 1px solid var(--gray4, #E4E4E4); } 
.depth3 li a { display:flex; align-items:center; gap:10px; padding:0 20px; height:15px; color:var(--gray9,#333); font-family:NanumBarunGothic; font-size:16px; font-weight:400; line-height:130%; letter-spacing:-0.16px; } 
.depth3 li a::before { content:""; display:inline-block; width:4px; height:4px; background:url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5' fill='none'><circle cx='2' cy='2.5' r='2' fill='%23BDBDBD'/></svg>") center/contain no-repeat; } 
.depth3 li a.active { color:var(--secondary1,#2443A2); } 
.depth3 li a.active::before { background:url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5' fill='none'><circle cx='2' cy='2.5' r='2' fill='%232443A2'/></svg>") center/contain no-repeat; } 

.container .content{width: 100%; min-width: 0; max-width: 1160px;}
.container.side-collapsed .content{max-width: 1400px;}
.headline-wrap{display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px;}
@media (max-width: 1024px){
  
  .side { display: none; } 
  .container .content { width: calc(100% - 40px); margin: 0 auto; } 
 }
/* =====================================================
 네비게이션 (Breadcrumb)
 - 구조: 홈아이콘 > 화살표 > 1뎁스 > 화살표 > 2뎁스
 - 상태: 단순 경로 표출용, 링크 아님
===================================================== */
.breadcrumb { display: flex; align-items: center; gap: 6px; } 

/* 홈 아이콘 */
.icon-home { display: inline-block; width: 18px; height: 18px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16' fill='none'><path d='M0.53125 9.5106L8.98118 1.06067L17.4311 9.5106' stroke='%23666666' stroke-width='1.5'/><path d='M4.27734 6.18738V15.0605H13.8512V6.18738' stroke='%23666666' stroke-width='1.5'/></svg>") center/contain no-repeat;} 

/* 화살표 */
.arrow { display: inline-block; width: 16px; height: 16px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M6.46979 4L5.52979 4.94L8.58312 8L5.52979 11.06L6.46979 12L10.4698 8L6.46979 4Z' fill='%23BDBDBD'/></svg>") no-repeat center/contain; } 

/* 1뎁스 */
.breadcrumb .depth1 { color: var(--gray8, #666); font-family: NanumBarunGothic; font-size: 14px; font-weight: 400; line-height: 100%; } 

/* 2뎁스 */
.breadcrumb .depth2 { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 14px; font-weight: 400; line-height: 100%; } 


/* =====================================================
 조회 영역 (Search Area)
 - 구조: .search-area > .search-grid > .search-item
 - 특징: 3열 Grid + span 클래스 대응
===================================================== */
.search-area-wrap { margin-bottom: 20px; } 

.search-area { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 4px; border: 1px solid var(--gray6, #BDBDBD); background: var(--gray2, #F7F7F7); margin: 20px 0; } 
.popup .search-area { margin-top: 0; margin-bottom: 12px; } 
.popup .search-area-wrap { margin-bottom: 30px; } 
.search-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 30px; /* row-gap, col-gap */ } 
/* [팝업] 2열 전용 행 */
.popup .search-grid { grid-template-columns: repeat(2, 1fr); } 
.search-item { display: flex; align-items: center; gap: 12px; } 

/* grid span 대응 */
.search-item.span-1 { grid-column: span 1; } 
.search-item.span-2 { grid-column: span 2; } 
.search-item.span-3 { grid-column: span 3; } 

.search-label { width: 104px; color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 16px; font-weight: 600; line-height: 100%; flex-shrink: 0; } 
.popup .search-label { word-break: keep-all; color: var(--gray9, #333); /* h5 */
 font-family: NanumBarunGothic; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 14px */
 letter-spacing: -0.28px; } 

/* 주민번호 wrap */
.rrn-wrap { display: flex; align-items: center; gap: 2px; flex: 1; } 

.rrn-dash { margin: 0 2px; color: var(--gray7, #999); font-size: 1px; } 

/* 조회 버튼 */
.action-btn-wrap { display: flex; align-items: center; justify-content: space-between; } 
.search-action { display: flex; justify-content: flex-end; gap: 8px; } 
/* 라벨내용이 길 경우의 조회영역 type */
.search-area-wrap.type02 .search-label{width: 120px;}
/* =====================================================
 그리드 레이아웃
 - 구조: .grid-wrap > title / toolbar / table / pagination
 - 특징: sbgrid 사용으로 수정 가능성 있음, 커스텀 버튼/셀렉트/페이지네이션 사용
===================================================== */
.grid-wrap { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; } 
.popup .grid-wrap { margin-top: 0; } 
.grid-title-wrap { display: flex; align-items: center; gap: 8px; } 
.grid-title-wrap span { color: var(--error, #FF3257); } 
.grid-title { color: var(--gray9, #333); /* h2 */
 font-family: NanumBarunGothic; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */
 letter-spacing: -0.4px; } 
.grid-desc { color: var(--gray9, #333); font-size: 16px; font-weight: 400; line-height: 130%; } 
/* 툴바 */
.grid-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; } 

.grid-info { display: flex; align-items: center; gap: 10px; } 

.grid-info p { display: inline-block; /* 기본 블록 성격 제거 */
 margin: 0; /* p 기본 마진 제거 */
 white-space: nowrap; /* 강제로 한 줄 유지 */
 color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } 

.grid-info .count { color: var(--primary, #53C3B4); font-family: NanumBarunGothic; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 14px */ } 

.grid-actions { display: flex; gap: 6px; } 
.grid-info .ui-select-button { min-height: 34px; gap:10px; } 
/* =====================================================
 그리드 테이블 (수정본)
 - 세로 보더 유지
 - 긴 텍스트 ... 처리
===================================================== */
.grid-wrap+.grid-wrap { margin-top: 40px; } 
.grid-table { width: 100%; border-collapse: collapse; background: #fff; table-layout: fixed; /* 기본: 균등 배분 */
 overflow-x: auto; } 

.grid-table tr { border-bottom: 1px solid var(--gray5, #DADADA);; } 

.grid-table th, .grid-table td { height: 46px; padding: 0 10px; line-height: 14px; text-align: center; font-size: 14px; color: var(--gray9, #333); border: 1px solid var(--gray6, #BDBDBD); white-space: nowrap; /* 줄바꿈 방지 */
 overflow: hidden; /* 넘치는 부분 숨김 */
 text-overflow: ellipsis; /* ... 처리 */ } 
.grid-table td:first-child { border-left: none; } 
.grid-table td:last-child { border-right: none; } 
.grid-table td { padding: 6px 10px; } 
.grid-table td .radio-wrap { justify-content: center; } 
/* 셀렉트 들어간 td는 오버플로우 풀기 */
.grid-table td:has(.ui-select) { overflow: visible; } 

/* 그리드 헤더 */
.grid-table th {height: 52px; background: var(--gray2, #F7F7F7); font-weight: 600; overflow: inherit; text-overflow: inherit; } 
.grid-table th:first-child, 
.grid-table th:last-child { border-left: none; border-right: none; } 

/* 행 hover / focus */
.grid-table tbody tr:hover { background: var(--gray1, #FAFAFA); } 
.grid-table tbody tr:focus { background: var(--primary-light, #9CEAE2); outline: none; /* 포커스 테두리 제거 */ } 

/* 소계 / 합계 */
.grid-table .subtotal td { background: var(--orange-bg, #FFF4DD); font-weight: 600; height: 46px; } 
.grid-table .total td { background: var(--green_bg, #EAF6F4); font-weight: 600; height: 46px; } 

/* 소계/합계 라벨/값 분리 */
.grid-table .label { text-align: left; } 
.grid-table .value { text-align: right; } 
/* 1024px 이하: 기본 그리드만 줄바꿈 허용 */
@media (max-width: 1024px){
 .grid-table:not(.scroll-x) { table-layout: auto; /* 내용 기반 */
 width: 100%; /* 화면에 맞춤 */
 min-width: 1200px; } 

 .grid-table:not(.scroll-x) th,
 .grid-table:not(.scroll-x) td { text-overflow: unset; /* ... 해제 */
 overflow: visible; } 

 /* 스크롤형은 유지 */
 .grid-table.scroll-x { width: auto; min-width: 100%; table-layout: auto; } 
 }



/* =====================================================
 그리드 테이블 - 가로 스크롤 타입
 - 열이 많아질 경우 사용
 - 각 th에 개별 width 지정 필수
===================================================== */

.grid-table.scroll-x { width: auto; /* th width 기준으로 확장 */
 min-width: 100%; table-layout: auto; /* th width 반영 */
 border-collapse: collapse; background: #fff; } 


.grid-table-wrap { border-top: 1px solid var(--gray9, #333); border-bottom: 1px solid var(--gray9, #333); overflow-x: auto; /* 스크롤 발생 컨테이너 */ } 

.grid-table.row-type th { border: 1px solid var(--gray5, #DADADA); } 
.grid-table.row-type th:first-child,.grid-table.row-type th:last-child { border-right: none; border-left: none; } 

/* =====================================================
 입력폼 테이블
 - 구조: .form-wrap > header + table
 - 특징: 세로선 없음, border-bottom만
===================================================== */

.form-wrap { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; } 

.form-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; } 

.form-header .form-title-wrap { display: flex; align-items: center; gap: 8px; } 

/* 타이틀 */
.form-title { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 18px; font-weight: 600; line-height: 100%; letter-spacing: -0.36px; margin: 0; } 

.form-desc { color: var(--gray9, #333); font-size: 16px; font-weight: 400; line-height: 130%; } 
.form-desc span { color: var(--error, #FF3257); } 

/* 버튼 그룹 */
.form-actions { display: flex; gap: 6px; } 

/* 테이블 */
.form-table-wrap {overflow-x: auto; border-top: 1px solid var(--gray9, #333); border-bottom: 1px solid var(--gray9, #333); } 
.form-table { table-layout: fixed; width: 100%; border-collapse: collapse; background: #fff; } 
.form-table th, .form-table td { padding: 10px; text-align: left; font-size: 16px; color: var(--gray9, #333); vertical-align: middle; word-break: keep-all; border: 1px solid var(--gray6, #BDBDBD); } 

.form-table th { padding: 10px 14px; font-weight: 600; background: var(--gray2, #F7F7F7); width: 160px; } 
.form-table th:first-child { border-left: none; } 
.form-table th:last-child { border-right: none; } 
.form-table td:first-child { border-left: none; } 
.form-table td:last-child { border-right: none; } 
.form-table td { padding: 6px 10px; background: #fff; } 
.form-table td .btn.btn-sm { padding: 12px 16px; justify-content: center; align-items: center; gap: 6px; height: 43px; font-family: NanumBarunGothic; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } 
/* 필수 표시 */
.req::before { content: '*'; margin-right: 2px; color: var(--error, #FF3257); /* h5 */ font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; /* 14px */ letter-spacing: -0.28px; } 
/* 인풋류 기본 폭 */
.form-table .inp { width: 100%; min-height: 42px; max-height: 42px; padding: 10px; border: 1px solid var(--gray6, #BDBDBD); border-radius: 4px; font-size: 16px; } 
.form-table-wrap+.form-table-wrap { margin-top: 40px; } 
.form-table-wrap+.grid-wrap { margin-top: 40px; } 
.form-wrap+.grid-wrap { margin-top: 40px; } 
.form-wrap+.form-wrap { margin-top: 40px; } 
/* date, select 같은 컴포넌트 조합 대응은 기존 ui-select, .ui-date 등과 동일 */
@media (max-width: 1024px){
 .form-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } 

 .form-table { width: auto; /* 테이블 크기 확장 */
 min-width: 1200px; /* 최소 가로폭 확보 */
 table-layout: auto; /* colgroup 너비 반영 */ } 
 }
.form-table td .grid-wrap { margin: 0; } 
.form-table td .grid-table-wrap { border: 1px solid var(--gray6, #BDBDBD); border-left: none; border-right: none; } 
.form-table td .grid-wrap th { padding: 16px 8px; background: var(--whtie); color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; /* 14px */ } 
.form-table td .grid-wrap td { padding: 16px 8px; background: var(--whtie); color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } 
.form-table td { } 


/* 공통 타이틀 아이콘 */
.form-title::before,
.grid-title::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; /* 타이틀과 아이콘 간격 */ margin-bottom: 2px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path d='M13 9C13 6.79086 11.2091 5 9 5C6.79086 5 5 6.79086 5 9C5 11.2091 6.79086 13 9 13V18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18V13C11.2091 13 13 11.2091 13 9Z' fill='url(%23paint0_linear_577_1974)'/><defs><linearGradient id='paint0_linear_577_1974' x1='4.09091' y1='4.09091' x2='18' y2='18' gradientUnits='userSpaceOnUse'><stop offset='0.163462' stop-color='%2309ACBE'/><stop offset='1' stop-color='%236C8BE8'/></linearGradient></defs></svg>") no-repeat center/contain; vertical-align: middle; } 
.form-title { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 18px; font-weight: 600; line-height: 100%; letter-spacing: -0.36px; margin: 0; } 
.form-title::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; /* 타이틀과 아이콘 간격 */ margin-bottom: 2px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path d='M13 9C13 6.79086 11.2091 5 9 5C6.79086 5 5 6.79086 5 9C5 11.2091 6.79086 13 9 13V18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18V13C11.2091 13 13 11.2091 13 9Z' fill='url(%23paint0_linear_577_1974)'/><defs><linearGradient id='paint0_linear_577_1974' x1='4.09091' y1='4.09091' x2='18' y2='18' gradientUnits='userSpaceOnUse'><stop offset='0.163462' stop-color='%2309ACBE'/><stop offset='1' stop-color='%236C8BE8'/></linearGradient></defs></svg>") no-repeat center/contain; vertical-align: middle; }
/* =====================================================
 2-컬럼 레이아웃 (공통)
 - 구조: .layout > .col.left + .col.right
 - 상태: layout-5-5 / layout-6-4 / layout-4-6 / layout-7-3 / layout-3-7
===================================================== */

.layout { display: flex; } 

.layout .col { } 

/* --- 비율 --- */
.layout-5-5 .left,
.layout-5-5 .right { flex: 5; } 

.layout-6-4 .left { flex: 6; } 
.layout-6-4 .right { flex: 4; } 

.layout-4-6 .left { flex: 4; } 
.layout-4-6 .right { flex: 6; } 

.layout-7-3 .left { flex: 7; } 
.layout-7-3 .right { flex: 3; } 

.layout-3-7 .left { flex: 3; } 
.layout-3-7 .right { flex: 7; } 

/* 그리드 데이터 이동 화살표 버튼 */
.layout-5-5 .center { display: flex; flex-direction: column; justify-content: center; gap: 20px; } 

/* --- gap 컨텍스트별 --- */
.content .layout { gap: 40px; } 
.popup-backdrop .layout { gap: 30px; } 

/* 반응형: 1024px 이하 → 세로로 */
@media (max-width: 1024px){
 .layout { gap: 20px; /* 모바일 기본 gap */ } 
 .layout .left,
 .layout .right { } 
 }


/* =====================================================
 조합 컴포넌트
 - 특징: 주소찾기, 파일첨부 등 복합 컴포넌트 스타일
===================================================== */
/* 주소찾기 */
.addr-wrap { display: flex; flex-direction: column; gap: 10px; width: 100%; } 
.addr-wrap p { display: inline-flex; align-items: center; white-space: nowrap; color: var(--gray9, #333); /* table td */ font-family: NanumBarunGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 100%; /* 16px */ letter-spacing: -0.16px; } 
.addr-wrap .top-wrap { display: flex; gap: 6px; } 
.addr-wrap .top-wrap .addr1 { width: 100%; max-width: 206px; } 
/* 이메일 */
.email-wrap { display: flex; align-items: center; gap: 6px; } 
/* 캘린더 ~ 캘린더 */
.date-wrap { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; } 
.date-wrap .ui-date { flex: 1; min-width: 0; } 

/* 그리드 툴바 분류링크 
** Ex) 전체, ㄱ,ㄴ,ㄷ,ㄹ · · ·
*/
.list-btn-wrap { display: flex; align-items: center; gap: 20px; height: 34px; } 
.list-btn-wrap .all { color: var(--gray8, #666); font-family: NanumBarunGothic; font-size: 18px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } 

.list-btn-wrap .list-wrap { display: flex; align-items: center; gap: 2px; } 
.list-btn-wrap .list-wrap a { color: var(--gray8, #666); font-family: NanumBarunGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 100%; /* 16px */ } 
.list-btn-wrap .list-wrap a.active { color: var(--gray9, #333); /* h3 */ font-family: NanumBarunGothic; font-size: 18px; font-style: normal; font-weight: 600; line-height: 100%; /* 18px */ letter-spacing: -0.36px; } 
.list-btn-wrap .list-wrap a:hover { font-weight: bold; } 

/*  링크 리스트
*   Ex) 메세지 리스트, 새창 바로가기 링크
*/

/* 상위 더미 박스 */
.link-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid var(--gray6, #BDBDBD);
  background: var(--gray2, #F7F7F7);
  border-radius: 6px;
}

.link-list .item{display: flex; align-items: center; gap: 10px;}

/* 설명 텍스트 */
.link-list .link-desc {
  color: var(--gray9, #333);
  font-family: NanumBarunGothic;
  font-size: 16px;
  font-weight: 400;
  line-height: 130%; /* 20.8px */
  letter-spacing: -0.16px;
  margin: 0;
}

/* 버튼 */
.btn-link {
  display: flex;
  height: 34px;
  padding: 8px 14px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  border: 1px solid var(--gray7, #999);
  background: #FFF;
  color: var(--gray9, #333);
  font-family: NanumBarunGothic;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-link:hover {
  border-color: var(--primary, #09ACBE);
  color: var(--primary-dark, #09ACBE);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}


/* 아이콘 (data URI svg 삽입) */
.ico-link {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path d='M14.25 14.25H3.75V3.75H9V2.25H3.75C2.9175 2.25 2.25 2.925 2.25 3.75V14.25C2.25 15.075 2.9175 15.75 3.75 15.75H14.25C15.075 15.75 15.75 15.075 15.75 14.25V9H14.25V14.25ZM10.5 2.25V3.75H13.1925L5.82 11.1225L6.8775 12.18L14.25 4.8075V7.5H15.75V2.25H10.5Z' fill='%23333333'/></svg>") center/contain no-repeat;
}



/* =====================================================
 법인시설지원 시스템 메인
 
===================================================== */
/* S : Defualt Main */
.main-wrap { display: flex; justify-content: space-between; gap: 50px; width: 100%; max-width: 1440px; margin: 0 auto; margin-top: 50px; margin-bottom: 50px; } 

.main-wrap .l-box, .r-box { display: flex; flex-direction: column; gap: 50px; } 
.main-wrap .l-box { justify-content: space-between; width: 100%; max-width: 790px; } 
.main-title { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 22px; font-weight: 600; line-height: 100%; letter-spacing: -0.44px; margin-bottom: 20px; } 
.menu-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 12px; } 
.menu-item { display: flex; padding: 24px 20px; flex-direction: column; justify-content: center; align-items: center; gap: 20px; min-height: 153px; border-radius: 16px; border: 1px solid var(--gray5, #DADADA); background: #F7F7F7; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 18px; font-weight: 400; line-height: 100%; letter-spacing: -0.36px; text-decoration: none; transition: all .2s ease; } 
.menu-item:hover { background: #FFF; border-color: var(--primary, #53C3B4); color: var(--primary-dark, #09ACBE); box-shadow: 0 4px 8px rgba(0,0,0,0.05); } 

.board-tab-wrap { display: flex; flex-direction: column; gap: 8px; } 
.board-tab-header { display: flex; justify-content: space-between; align-items: center; } 
.main-wrap .tab-buttons { display: flex; gap: 12px; } 
.main-wrap .tab-btn { display: flex; width: 180px; height: 59px; padding: 20px 21px; justify-content: center; align-items: center; gap: 10px; color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 20px; font-weight: 600; line-height: 100%; letter-spacing: -0.4px; border: none; border-radius: 16px; background: transparent; cursor: pointer; transition: all .2s ease; } 
.main-wrap .tab-btn.active { color: var(--white, #FFF); background: var(--point-gra, linear-gradient(156deg, #818AF5 8.88%, #606BE2 84.56%)); } 
.main-wrap .btn-more { color: var(--gray7, #999); font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 130%; letter-spacing: -0.16px; text-decoration: none; transition: color .2s ease; } 
.main-wrap .btn-more:hover { color: var(--gray9, #333); } 
.main-wrap .board-tab-content { border-top: 1px solid var(--gray7, #999); /* border-bottom: 1px solid var(--gray7, #999); */} 
.main-wrap .board-list { list-style: none; margin: 0; padding: 0; } 
.main-wrap .board-item { display: flex; padding: 14px 20px; justify-content: space-between; align-items: center; color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 130%; letter-spacing: -0.16px; text-decoration: none; border-radius: 0; transition: background .2s ease, border-radius .2s ease; } 
.main-wrap .board-item:hover { border-radius: 16px; background: var(--green_bg, #EAF6F4); } 
.main-wrap .board-item .title { display: inline-flex; align-items: center; gap: 8px; } 
.main-wrap .board-item.new .title::after { content: ""; display: inline-block; width: 11px; height: 12px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='12' viewBox='0 0 11 12' fill='none'><path d='M0.936 11.67V1.075H2.912L8.203 7.445V0.945H10.569V11.54H8.593L3.302 5.17V11.67H0.936Z' fill='%23ED6C85'/></svg>") center/contain no-repeat; } 

.board-tab-content { display: none; border-top: 1px solid var(--gray7, #999); /* border-bottom: 1px solid var(--gray7, #999);*/} 
.board-tab-content.active { display: block; } 

.status-wrap { display: flex; flex-direction: column; gap: 20px; } 
.status-header { display: flex; justify-content: space-between; align-items: center; } 
.status-title { display: flex; align-items: baseline; gap: 8px; color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 22px; font-weight: 600; line-height: 100%; letter-spacing: -0.44px; } 
.status-title span { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 130%; letter-spacing: -0.16px; } 
.btn-more { color: var(--gray7, #999); font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 130%; letter-spacing: -0.16px; text-decoration: none; } 
.status-table { width: 100%; border-collapse: collapse; } 
.status-table th, .status-table td { text-align: center; } 
.status-table thead th { height: 50px; border-top: 1px solid var(--gray9, #333); border-bottom: 1px solid var(--gray5, #DADADA); background: var(--green_bg, #EAF6F4); color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 16px; font-weight: 600; line-height: 100%; letter-spacing: -0.32px; } 
.status-table thead th.sun { color: #F9558C; } 
.status-table thead th.sat { color: #016AEB; } 
.status-table tbody th { border-bottom: 1px solid var(--gray5, #DADADA); font-family: NanumBarunGothic; font-size: 16px; font-weight: 600; color: var(--gray9, #333); } 
.status-table tbody td { height: 46px; border-bottom: 1px solid var(--gray5, #DADADA); font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 14px; letter-spacing: -0.32px; color: var(--gray9, #333); } 
.ui-select.type-status { position: relative; display: flex; align-items: center; justify-content: center; } 
.ui-select.type-status .ui-select-button { display: flex; width: 90px; justify-content: space-between; align-items: flex-start; min-height: 32px; max-height: 32px; border-radius: 16px; border: 1px solid var(--gray5, #DADADA); background: #FFF; color: var(--gray9, #333); text-align: center; font-size: 14px; font-style: normal; font-weight: 600; line-height: 14px; letter-spacing: -0.28px; } 
.ui-select.type-status .ui-select-button::after { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M10.5 2.50001L1.50002 2.50001C1.4089 2.50029 1.31958 2.52543 1.24168 2.5727C1.16378 2.61997 1.10025 2.68759 1.05792 2.76828C1.01559 2.84898 0.996076 2.93969 1.00147 3.03065C1.00686 3.12161 1.03696 3.20938 1.08852 3.28451L5.58852 9.78451C5.77502 10.054 6.22402 10.054 6.41102 9.78451L10.911 3.28451C10.9631 3.20954 10.9937 3.12172 10.9993 3.03061C11.005 2.9395 10.9856 2.84857 10.9433 2.7677C10.9009 2.68684 10.8372 2.61913 10.759 2.57194C10.6809 2.52474 10.5913 2.49986 10.5 2.50001Z' fill='%23333333'/></svg>") center/contain no-repeat; -webkit-mask:inherit; mask: inherit; } 
.status-table+.status-table thead th { border-top: none; } 

.system-call { display: flex; height: 180px; padding: 0 50px; justify-content: space-between; align-items: center; border-radius: 16px; background: linear-gradient(135deg, #2443A2 0%, #1C74C8 100%); text-decoration: none; } 
.call-texts { display: flex; flex-direction: column; gap: 20px; } 
.call-texts img { display: block; height: auto; } 
.call-texts .txt-img1 { width: 131px; height: 21px; } 
.call-texts .txt-img2 { width: 364px; height: 32px; } 
.call-icon { width: 80px; height: auto; } 

@media (max-width: 1440px){
 .main-wrap { width: calc(100% - 40px); } 
 }
@media (max-width: 1024px){
 .main-wrap { flex-direction: column; gap: 40px; } 
 .main-wrap .l-box { max-width: inherit; } 
 }
/* E : Defualt Main */

/* S : 로그인  */

/* 로그인 섹션 기본 구조 */
.login-section { padding: 50px 0; border-radius: 16px; border: 1px solid var(--gray5, #DADADA); background: #F7F7F7; width: 100%; max-width: 1440px; margin: 0 auto;}
.login-section .cont-wrap{display: flex; flex-direction: column; align-items: flex-start; padding: 0 50px; gap: 40px; width: 100%; max-width: 600px; margin: 0 auto;}

/* 타이틀 */
.login-section .login-title { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 24px; font-weight: 600; line-height: 100%; letter-spacing: -0.48px;}

/* 로그인 박스 */
.login-section .login-box { display: flex; align-items: center; justify-content: center; gap: 20px;}
.login-section .login-box .login-item-wrap{ display: flex; gap: 8px;}
.login-section .login-lock { width: 80px; height: 87px;}
.login-section .login-inputs { display: flex; flex-direction: column; gap: 8px;}
.login-section .login-inputs .input-text { display: flex; width: 100%; max-width: 184px; height: 46px; padding: 11px 20px; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid var(--gray6, #BDBDBD); background: #FFF; font-size: 15px; color: var(--gray9, #333);}
.login-section .login-buttons { display: flex; gap: 8px;}

.btn-login,
.btn-cert { display: flex; width: 100px; height: 100px; padding: 11px 20px; justify-content: center; align-items: center; border-radius: 8px; color: #FFF; font-family: NanumBarunGothic; font-weight: 400; font-size: 16px; line-height: 130%; cursor: pointer; transition: opacity 0.2s ease;}
.login-section .btn-login { background: linear-gradient(139deg, #36D0BE 9.21%, #00B0C0 76.66%);}
.login-section .btn-cert { background: linear-gradient(156deg, #F2748C 8.88%, #DD516C 84.56%);}
.login-section .btn-login:hover,
.login-section .btn-cert:hover { opacity: 0.85;}


/* 회원가입/안내 */
.login-section .login-links { display: flex; flex-direction: column; align-items: flex-start; gap: 20px;}

.login-section .link-top { display: flex; align-items: center; gap: 20px; font-size: 14px; color: var(--gray9, #333); margin-left: 100px;}
.login-section .link-top a { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */}
.login-section .link-top a:hover { color: var(--primary-dark, #09ACBE);}
.main-wrap.support .login-links .divider { position: inherit; width: 0; height: 17px; border-left: 1px solid var(--gray6, #BDBDBD); flex-shrink: 0;}

.login-section .link-bottom { list-style: none; margin: 0; padding: 0; font-size: 14px; color: #222; font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ text-align: left;}
.login-section .link-bottom li{margin-bottom: 8px;}
.login-section .link-bottom li:last-child{margin-bottom: 0;}
.login-section .link-bottom a { color: var(--primary-dark, #09ACBE); font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;}

/* ----------------------------- */
/* 반응형 */
@media (max-width: 768px) { 
  .login-box {
    flex-direction: column;
    gap: 24px;
  }

  .login-buttons {
    flex-direction: row;
    gap: 12px;
  }
}
/* E: 로그인  */

/* S : 로그인 Type02 */
.login-section.type02 {padding: 50px 0; border-radius: 16px; border: 1px solid var(--gray5, #DADADA); background: #F7F7F7; width: 100%; max-width: 1440px; margin: 0 auto; margin-top: 120px; margin-bottom: 190px;}
.login-section.type02 .cont-wrap{display: flex; flex-direction: column; align-items: flex-start; padding: 0; gap: 40px; width: 100%; max-width: 612px; margin: 0 auto;}

/* 타이틀 */
.login-section.type02 .login-title { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 24px; font-weight: 600; line-height: 100%; letter-spacing: -0.48px;}

/* 로그인 박스 */
.login-section.type02 .login-box { display: flex; align-items: center; justify-content: flex-start; gap: 20px; width: 100%;}
.login-section.type02 .login-box .login-item-wrap{ display: flex; gap: 8px;}
.login-section.type02 .login-lock { width: 120px; height: 130px;}
.login-section.type02 .login-inputs { display: flex; flex-direction: column; gap: 8px; width: 300px;}
.login-section.type02 .login-inputs .ui-select-button{ display: flex; width: 100%; max-width: inherit; height: 46px; padding: 11px 20px; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid var(--gray6, #BDBDBD); background: #FFF; font-size: 15px; color: var(--gray9, #333);}
.login-section.type02 .login-inputs .input-text { display: flex; width: 100%; max-width: inherit; height: 46px; padding: 11px 20px; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid var(--gray6, #BDBDBD); background: #FFF; font-size: 15px; color: var(--gray9, #333);}
.login-section.type02 .login-buttons { display: flex; gap: 8px;}

.btn-login,
.btn-cert { display: flex; width: 100px; height: 100px; padding: 11px 20px; justify-content: center; align-items: center; border-radius: 8px; color: #FFF; font-family: NanumBarunGothic; font-weight: 400; font-size: 16px; line-height: 130%; cursor: pointer; transition: opacity 0.2s ease;}
.login-section.type02 .btn-login { background: linear-gradient(139deg, #36D0BE 9.21%, #00B0C0 76.66%);}
.login-section.type02 .btn-cert {width: 154px; height: 154px; background: linear-gradient(156deg, #F2748C 8.88%, #DD516C 84.56%); color: #FFF; font-family: NanumBarunGothic; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ letter-spacing: -0.4px;}
.login-section.type02 .btn-login:hover,
.login-section.type02 .btn-cert:hover { opacity: 0.85;}


/* 회원가입/안내 */
.login-section.type02 .login-links { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; width: 100%;}

.login-section.type02 .link-top { display: flex; align-items: center; gap: 20px; font-size: 14px; color: var(--gray9, #333);}
.login-section.type02 .link-top a { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */}
.login-section.type02 .link-top a:hover { color: var(--primary-dark, #09ACBE);}
.main-wrap.support .login-links .divider { position: inherit; width: 0; height: 17px; border-left: 1px solid var(--gray6, #BDBDBD); flex-shrink: 0;}

.login-section.type02 .link-bottom { list-style: none; margin: 0; padding: 0; font-size: 14px; color: #222; font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ text-align: left;}
.login-section.type02 .link-bottom li{margin-bottom: 8px;}
.login-section.type02 .link-bottom li:last-child{margin-bottom: 0;}
.login-section.type02 .link-bottom a { color: var(--primary-dark, #09ACBE); font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;}
/* ----------------------------- */
/* 반응형 */
@media (max-width: 768px) { 
  .login-section.type02{padding: 50px 24px; margin-top: 32px; margin-bottom: 32px;}
  .login-section.type02 .login-inputs{width: inherit;}
  .login-section.type02 .link-top{justify-content: center; flex-wrap: wrap; width: 100%;}
}
/* E : 로그인 Type02 */

/* S : 노숙인지원시스템 메인 */

.homeless.main-wrap { display: flex; justify-content: space-between; gap: 50px; width: 100%; max-width: 1440px; margin: 0 auto; margin-top: 50px; margin-bottom: 100px; } 

.homeless.main-wrap .l-box, .r-box { display: flex; flex-direction: column; gap: 50px; } 
.homeless.main-wrap .l-box { justify-content: space-between; width: 100%; max-width: 790px; } 
.homeless .main-title { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 22px; font-weight: 600; line-height: 100%; letter-spacing: -0.44px; margin-bottom: 20px; } 
.homeless .menu-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 12px; } 
.homeless .menu-item { display: flex; padding: 24px 20px; flex-direction: column; justify-content: center; align-items: center; gap: 20px; min-height: 153px; border-radius: 16px; border: 1px solid var(--gray5, #DADADA); background: #F7F7F7; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 18px; font-weight: 400; line-height: 100%; letter-spacing: -0.36px; text-decoration: none; transition: all .2s ease; } 
.homeless .menu-item:hover { background: #FFF; border-color: var(--primary, #53C3B4); color: var(--primary-dark, #09ACBE); box-shadow: 0 4px 8px rgba(0,0,0,0.05); } 

.homeless .board-tab-wrap { display: flex; flex-direction: column; gap: 8px; min-height: 313px; border-bottom: 1px solid var(--gray7, #999);} 
.homeless .board-tab-header { display: flex; justify-content: space-between; align-items: center; } 
.homeless.main-wrap .tab-buttons { display: flex; gap: 12px; } 
.homeless.main-wrap .tab-btn { display: flex; width: 180px; height: 59px; padding: 20px 21px; justify-content: center; align-items: center; gap: 10px; color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 20px; font-weight: 600; line-height: 100%; letter-spacing: -0.4px; border: none; border-radius: 16px; background: transparent; cursor: pointer; transition: all .2s ease; } 
.homeless.main-wrap .tab-btn.active { color: var(--white, #FFF); background: var(--point-gra2, linear-gradient(156deg, #F2748C 8.88%, #DD516C 84.56%)); } 
.homeless.main-wrap .btn-more { color: var(--gray7, #999); font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 130%; letter-spacing: -0.16px; text-decoration: none; transition: color .2s ease; } 
.homeless.main-wrap .btn-more:hover { color: var(--gray9, #333); } 
.homeless.main-wrap .board-tab-content { border-top: 1px solid var(--gray7, #999); /* border-bottom: 1px solid var(--gray7, #999); */} 
.homeless.main-wrap .board-list { list-style: none; margin: 0; padding: 0; } 
.homeless.main-wrap .board-item { display: flex; padding: 14px 20px; justify-content: space-between; align-items: center; color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 130%; letter-spacing: -0.16px; text-decoration: none; border-radius: 0; transition: background .2s ease, border-radius .2s ease; } 
.homeless.main-wrap .board-item:hover { border-radius: 16px; background: #FFF2F4; } 
.homeless.main-wrap .board-item .title { display: inline-flex; align-items: center; gap: 8px; } 
.homeless.main-wrap .board-item.new .title::after { content: ""; display: inline-block; width: 11px; height: 12px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='12' viewBox='0 0 11 12' fill='none'><path d='M0.936 11.67V1.075H2.912L8.203 7.445V0.945H10.569V11.54H8.593L3.302 5.17V11.67H0.936Z' fill='%23ED6C85'/></svg>") center/contain no-repeat; } 

.homeless .board-tab-content { display: none; border-top: 1px solid var(--gray7, #999); /* border-bottom: 1px solid var(--gray7, #999);*/ } 
.homeless .board-tab-content.active { display: block; } 

.homeless .status-wrap { display: flex; flex-direction: column; gap: 20px; } 
.homeless .status-header { display: flex; justify-content: space-between; align-items: center; } 
.homeless .status-title { display: flex; align-items: baseline; gap: 8px; color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 22px; font-weight: 600; line-height: 100%; letter-spacing: -0.44px; } 
.homeless .status-title span { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 130%; letter-spacing: -0.16px; } 
.homeless .btn-more { color: var(--gray7, #999); font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 130%; letter-spacing: -0.16px; text-decoration: none; } 
.homeless .status-table { width: 100%; border-collapse: collapse; } 
.homeless .status-table th, .status-table td { text-align: center; } 
.homeless .status-table thead th { height: 50px; border-top: 1px solid var(--gray9, #333); border-bottom: 1px solid var(--gray5, #DADADA); background: var(--pink-bg, #FFF7F8); color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 16px; font-weight: 600; line-height: 100%; letter-spacing: -0.32px; } 
.homeless .status-table thead th.sun { color: #F9558C; } 
.homeless .status-table thead th.sat { color: #016AEB; } 
.homeless .status-table tbody th { border-bottom: 1px solid var(--gray5, #DADADA); font-family: NanumBarunGothic; font-size: 16px; font-weight: 600; color: var(--gray9, #333); } 
.homeless .status-table tbody td { height: 46px; border-bottom: 1px solid var(--gray5, #DADADA); font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 14px; letter-spacing: -0.32px; color: var(--gray9, #333); } 
.homeless .ui-select.type-status { position: relative; display: flex; align-items: center; justify-content: center; } 
.homeless .ui-select.type-status .ui-select-button { display: flex; width: 90px; justify-content: space-between; align-items: flex-start; min-height: 32px; max-height: 32px; border-radius: 16px; border: 1px solid var(--gray5, #DADADA); background: #FFF; color: var(--gray9, #333); text-align: center; font-size: 14px; font-style: normal; font-weight: 600; line-height: 14px; letter-spacing: -0.28px; } 
.homeless .ui-select.type-status .ui-select-button::after { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M10.5 2.50001L1.50002 2.50001C1.4089 2.50029 1.31958 2.52543 1.24168 2.5727C1.16378 2.61997 1.10025 2.68759 1.05792 2.76828C1.01559 2.84898 0.996076 2.93969 1.00147 3.03065C1.00686 3.12161 1.03696 3.20938 1.08852 3.28451L5.58852 9.78451C5.77502 10.054 6.22402 10.054 6.41102 9.78451L10.911 3.28451C10.9631 3.20954 10.9937 3.12172 10.9993 3.03061C11.005 2.9395 10.9856 2.84857 10.9433 2.7677C10.9009 2.68684 10.8372 2.61913 10.759 2.57194C10.6809 2.52474 10.5913 2.49986 10.5 2.50001Z' fill='%23333333'/></svg>") center/contain no-repeat; -webkit-mask:inherit; mask: inherit; } 
.homeless .status-table+.status-table thead th { border-top: none; } 

.homeless .system-call { display: flex; height: 170px; padding: 0 50px; justify-content: space-between; align-items: center; border-radius: 16px; background: linear-gradient(135deg, #2443A2 0%, #1C74C8 100%); text-decoration: none; } 
.homeless .call-texts { display: flex; flex-direction: column; gap: 20px; } 
.homeless .call-texts img { display: block; height: auto; } 
.homeless .call-texts .txt-img1 { width: 131px; height: 21px; } 
.homeless .call-texts .txt-img2 { width: 364px; height: 32px; } 
.homeless .call-icon { width: 80px; height: auto; } 

@media (max-width: 1440px){
 .homeless.main-wrap { width: calc(100% - 40px); } 
 }
@media (max-width: 1024px){
 .homeless.main-wrap { flex-direction: column; gap: 40px; } 
 .homeless.main-wrap .l-box { max-width: inherit; gap: 40px; } 
 }
/* E : 노숙인지원시스템 메인 */

/* S : 법인시설지원시스템 메인 */
.main-wrap.support .content-wrap { display: flex; flex-direction: column; justify-content: space-between; gap: 50px; width: 100%; max-width: 1440px; } 

.main-wrap.support .sec-top,
.main-wrap.support .sec-bottom { display: grid; grid-template-columns: 1fr 0.68fr; /* 왼쪽 830 / 오른쪽 560 비율 */
 gap: 50px; align-items: start; } 

/* 상단 영역 */

/* 1-1 */
.main-wrap.support .my-status h1,
.main-wrap.support .quick-menu h1 { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 22px; font-weight: 600; letter-spacing: -0.44px; margin-bottom: 20px; } 

.main-wrap.support .tb-wrap{}
.main-wrap.support .tb-wrap.adm-tb-wrap{display: none;}
.adm .main-wrap.support .tb-wrap.adm-tb-wrap{display: block;}
.main-wrap.support .tb-wrap{margin-bottom: 28px;}
.main-wrap.support .tb-wrap:last-child{margin-bottom: 0;}
.main-wrap.support .tbl-basic { width: 100%; border-collapse: collapse; margin-bottom: 28px; border-bottom: 1px solid var(--gray5, #DADADA); } 
.main-wrap.support .tbl-basic:last-child { margin-bottom: 0; } 
.main-wrap.support .tbl-basic thead tr { background: linear-gradient(90deg, #02A4C1 0%, #1BC1CA 100%); height: 55px; } 
.main-wrap.support .tbl-basic th { color: #fff; font-size: 15px; font-weight: 600; text-align: center; border: 1px solid #3ad0df; } 
.main-wrap.support .tbl-basic td { border: 1px solid var(--gray5, #DADADA); text-align: center; height: 55px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 15px; font-style: normal; font-weight: 400; line-height: 14px; /* 100% */ letter-spacing: -0.28px; } 

/* 1-2 메뉴바로가기 */

.main-wrap.support .menu-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 12px; } 
.main-wrap.support .menu-item { display: flex; padding: 24px 20px; flex-direction: column; justify-content: center; align-items: center; gap: 18px; min-height: 142px; max-height: 142px; border-radius: 16px; border: 1px solid var(--gray5, #DADADA); background: #F7F7F7; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 100%; letter-spacing: -1.3px; text-decoration: none; transition: all .2s ease; } 
.main-wrap.support .menu-item:hover { background: #FFF; border-color: var(--primary, #53C3B4); color: var(--primary-dark, #09ACBE); box-shadow: 0 4px 8px rgba(0,0,0,0.05); } 

/* 하단 영역 */

/* 2-1 공지사항 탭 */
.main-wrap.support .board-tab-wrap { gap: 20px; border-bottom: 1px solid var(--gray7, #999);} 
.main-wrap.support .tab-btn{height: 54px;}
.main-wrap.support .tab-btn.active { color: var(--white, #FFF); background: var(--point-gra2, linear-gradient(156deg, #F2748C 8.88%, #DD516C 84.56%)); } 
.main-wrap.support .board-item { } 
.main-wrap.support .board-item:hover { border-radius: 16px; background: #FFF2F4; } 

/* 2-2 공시 링크 + 문의 */
.main-wrap.support .link-area { display: flex; flex-direction: column; gap: 16px; } 
.main-wrap.support .link-box { position: relative; height: 95px; display: flex; align-items: center; justify-content: center; gap: 97px; padding: 20px 0; border: 1px solid var(--gray5, #DADADA); border-radius: 16px; }  
.main-wrap.support .link-item { display: flex; align-items: center; gap: 16px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ letter-spacing: -0.48px; } 
.main-wrap.support .link-item:hover { transition: all .2s ease; color: var(--primary-dark, #09ACBE); } 
.main-wrap.support .link-item:hover img { transition: all .2s ease; transform: rotate(-10deg); } 
.main-wrap.support .link-item img { } 
.main-wrap.support .divider { position: absolute; width: 0; height: 100%; border-left: 1px solid var(--gray5, #DADADA); } 
.main-wrap.support .inquiry-box { background: #f9f9f9; border-radius: 16px; padding: 30px; text-align: center; } 
.main-wrap.support .inquiry-box p { font-size: 16px; color: var(--gray7, #555); margin-bottom: 6px; } 
.main-wrap.support .inquiry-box strong { font-size: 24px; font-weight: 700; color: var(--primary-dark, #008DA3); } 
.main-wrap.support .system-call { height: 160px; background: #203D7B; } 


/* ----------------------- */
/* 반응형 */
@media (max-width: 1240px){
 .main-wrap.support .link-box { gap: 32px; } 
 }
@media (max-width: 1043px){
 .main-wrap.support .link-box { gap: 16px; } 
 }
@media (max-width: 1024px){
 .main-wrap.support { margin-top: 40px; } 
 .main-wrap.support .sec-top, .sec-bottom { flex-direction: column; } 
 .main-wrap.support .quick-menu ul { grid-template-columns: repeat(2, 1fr); } 
 
 .main-wrap.support .sec-top,
 .main-wrap.support .sec-bottom { grid-template-columns: 1fr; /* 한 줄 */
 gap: 40px; } 
 .main-wrap.support .link-area { display: grid; grid-template-columns: repeat(2, 1fr); } 
 .main-wrap.support .divider{position: inherit;}
 .main-wrap.support .link-box {justify-content: space-between; max-height: 160px; width: 100%; height: auto; padding: 30px; } 
 }
 @media (max-width: 946px){
   .main-wrap.support .link-area{grid-template-columns: repeat(1, 2fr);}
   .main-wrap.support .link-box{justify-content: center; gap: 45px;}
   .main-wrap.support .link-item{width: 100%; justify-content: center;}
 }

/* E : 법인시설지원시스템 메인 */
/* S : 법인시설지원시스템 시설관리,담당자 */
.main-wrap.facility .content-wrap { display: flex; flex-direction: column; justify-content: space-between; gap: 50px; width: 100%; max-width: 1440px; } 

.main-wrap.facility .sec-top{ display: grid; grid-template-columns: 1fr 1.48fr; gap: 50px; align-items: start; } 
.main-wrap.facility .sec-bottom { display: grid; grid-template-columns: 1fr 0.68fr; /* 왼쪽 830 / 오른쪽 560 비율 */ gap: 50px; align-items: start; } 

/* 상단 영역 */

/* 1-1 */
.main-wrap.facility .my-status h1, .main-wrap.facility .quick-menu h1 { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 22px; font-weight: 600; letter-spacing: -0.44px; margin-bottom: 12px; } 

.main-wrap.facility .tb-wrap{}
.main-wrap.facility .tb-wrap.adm-tb-wrap{display: none;}
.adm .main-wrap.facility .tb-wrap.adm-tb-wrap{display: block;}
.main-wrap.facility .tb-wrap{margin-bottom: 28px;}
.main-wrap.facility .tb-wrap:last-child{margin-bottom: 0;}
.main-wrap.facility .tbl-basic { width: 100%; border-collapse: collapse; margin-bottom: 28px; border-bottom: 1px solid var(--gray5, #DADADA); } 
.main-wrap.facility .tbl-basic:last-child { margin-bottom: 0; } 
.main-wrap.facility .tbl-basic thead tr { background: linear-gradient(90deg, #02A4C1 0%, #1BC1CA 100%); height: 42px; } 
.main-wrap.facility .tbl-basic th { color: #fff; font-size: 14px; font-weight: 600; text-align: center; border: none; } 
.main-wrap.facility .tbl-basic td { border: 1px solid var(--gray5, #DADADA); text-align: center; height: 42px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 14px; /* 100% */ letter-spacing: -0.28px; } 
.main-wrap.facility .tb-wrap.type02 .tbl-basic thead tr {height: 37px; } 
.main-wrap.facility .tb-wrap.type02 .tbl-basic th {border: 1px solid #fff; } 

/* 1-2 메뉴바로가기 */

.main-wrap.facility .menu-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 12px; } 
.main-wrap.facility .menu-item { display: flex; padding: 24px 20px; flex-direction: column; justify-content:center; align-items: center; gap: 18px; min-height: 142px; max-height: 142px; border-radius: 16px; border: 1px solid var(--gray5, #DADADA); background: #F7F7F7; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 100%; letter-spacing: -2px; text-decoration: none; transition: all .2s ease; } 
.main-wrap.facility .menu-item:hover { background: #FFF; border-color: var(--primary, #53C3B4); color: var(--primary-dark, #09ACBE); box-shadow: 0 4px 8px rgba(0,0,0,0.05); } 

.main-wrap.facility .sec-top .cont-wrap{display: flex; gap: 50px;}
.main-wrap.facility .link-menu{display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 220px; margin-top: 34px;}
.main-wrap.facility .link-menu .link{position: relative; display: flex; height: 142px; padding: 0 40px; flex-direction: column; justify-content: center; align-items: flex-start; border-radius: 16px 36px 16px 16px; background: var(--point-gra2, linear-gradient(156deg, #F2748C 8.88%, #DD516C 84.56%)); color: var(--whtie, #FFF); font-size: 25px; font-weight: 600; line-height: 150%; /* 37.5px */ letter-spacing: -0.5px;}
.main-wrap.facility .link-menu .link::after {position: absolute; content: ''; top: 25px; right: 24px; width: 18px; height: 18px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M10.5 10.5V18H7.5V10.5H0V7.5H7.5V0H10.5V7.5H18V10.5H10.5Z' fill='%23FFC9D4'/></svg>") center/contain no-repeat;}

.main-wrap.facility .link-menu .link:nth-child(2){border-radius: 16px 36px 16px 16px; background: linear-gradient(116deg, #00ADC0 10.04%, #0CBFB6 100%);}
.main-wrap.facility .link-menu .link:nth-child(2)::after{  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M10.5 10.5V18H7.5V10.5H0V7.5H7.5V0H10.5V7.5H18V10.5H10.5Z' fill='%23B7F7F7'/></svg>") center/contain no-repeat;}

/* 하단 영역 */

/* 2-1 공지사항 탭 */
.main-wrap.facility .board-tab-wrap { gap: 20px; border-bottom: 1px solid var(--gray7, #999);} 
.main-wrap.facility .tab-btn{height: 54px;}
.main-wrap.facility .tab-btn.active { color: var(--white, #FFF); background: var(--point-gra2, linear-gradient(156deg, #F2748C 8.88%, #DD516C 84.56%)); } 
.main-wrap.facility .board-item { } 
.main-wrap.facility .board-item:hover { border-radius: 16px; background: #FFF2F4; } 

/* 2-2 공시 링크 + 문의 */
.main-wrap.facility .link-area { display: flex; flex-direction: column; gap: 16px; } 
.main-wrap.facility .link-box { position: relative; height: 95px; display: flex; align-items: center; justify-content: center; gap: 97px; padding: 20px 0; border: 1px solid var(--gray5, #DADADA); border-radius: 16px; }  
.main-wrap.facility .link-item { display: flex; align-items: center; gap: 16px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ letter-spacing: -0.48px; } 
.main-wrap.facility .link-item:hover { transition: all .2s ease; color: var(--primary-dark, #09ACBE); } 
.main-wrap.facility .link-item:hover img { transition: all .2s ease; transform: rotate(-10deg); } 
.main-wrap.facility .link-item img { } 
.main-wrap.facility .divider { position: absolute; width: 0; height: 100%; border-left: 1px solid var(--gray5, #DADADA); } 
.main-wrap.facility .inquiry-box { background: #f9f9f9; border-radius: 16px; padding: 30px; text-align: center; } 
.main-wrap.facility .inquiry-box p { font-size: 16px; color: var(--gray7, #555); margin-bottom: 6px; } 
.main-wrap.facility .inquiry-box strong { font-size: 24px; font-weight: 700; color: var(--primary-dark, #008DA3); } 
.main-wrap.facility .system-call { height: 160px; background: #203D7B; } 

/* ----------------------- */
/* 반응형 */
@media (max-width: 1240px){
 .main-wrap.facility .link-box { gap: 32px; } 
 }
@media (max-width: 1043px){
 .main-wrap.facility .link-box { gap: 16px; } 
 }
@media (max-width: 1024px){
 .main-wrap.facility { margin-top: 40px; } 
 .main-wrap.facility .sec-top, .sec-bottom { flex-direction: column; } 
 .main-wrap.facility .quick-menu ul { grid-template-columns: repeat(2, 1fr); } 
 
 .main-wrap.facility .sec-top,
 .main-wrap.facility .sec-bottom { grid-template-columns: 1fr; /* 한 줄 */
 gap: 40px; } 
 .main-wrap.facility .link-area { display: grid; grid-template-columns: repeat(2, 1fr); } 
 .main-wrap.facility .divider{position: inherit;}
 .main-wrap.facility .link-box {justify-content: space-between; max-height: 160px; width: 100%; height: auto; padding: 30px; } 
 }
 @media (max-width: 946px){
   .main-wrap.facility .link-area{grid-template-columns: repeat(1, 2fr);}
   .main-wrap.facility .link-box{justify-content: center; gap: 45px;}
   .main-wrap.facility .link-item{width: 100%; justify-content: center;}
 }


/* E : 법인시설지원시스템 시설관리,담당자 */

/* S : 법인시설지원시스템 기능보강팀 */
.main-wrap.function .content-wrap { display: flex; flex-direction: column; justify-content: space-between; gap: 50px; width: 100%; max-width: 1440px; } 

.main-wrap.function .sec-top,
.main-wrap.function .sec-bottom { display: grid; grid-template-columns: 1fr 0.68fr; /* 왼쪽 830 / 오른쪽 560 비율 */
 gap: 50px; align-items: start; } 

/* 상단 영역 */

/* 1-1 */
.main-wrap.function .my-status h1,
.main-wrap.function .quick-menu h1 { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 22px; font-weight: 600; letter-spacing: -0.44px; margin-bottom: 20px; } 

.main-wrap.function .tb-wrap{}
.adm .main-wrap.function .tb-wrap.adm-tb-wrap{display: block;}
.main-wrap.function .tb-wrap.adm-tb-wrap{display: none;}
.main-wrap.function .tb-wrap{margin-bottom: 28px;}
.main-wrap.function .tb-wrap:last-child{margin-bottom: 0;}
.main-wrap.function .tbl-basic { width: 100%; border-collapse: collapse; margin-bottom: 28px; border-bottom: 1px solid var(--gray5, #DADADA); } 
.main-wrap.function .tbl-basic:last-child { margin-bottom: 0; } 
.main-wrap.function .tbl-basic thead tr { background: linear-gradient(90deg, #02A4C1 0%, #1BC1CA 100%); height: 43px; } 
.main-wrap.function .tbl-basic th { color: #fff; font-size: 15px; font-weight: 600; text-align: center; border: 1px solid #3ad0df; } 
.main-wrap.function .tbl-basic td { border: 1px solid var(--gray5, #DADADA); text-align: center; height: 42px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 15px; font-style: normal; font-weight: 400; line-height: 14px; /* 100% */ letter-spacing: -0.28px; } 

/* 1-2 메뉴바로가기 */

.main-wrap.function .menu-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 12px; } 
.main-wrap.function .menu-item { display: flex; padding: 24px 20px; flex-direction: column; justify-content: center; align-items: center; gap: 18px; min-height: 142px; max-height: 142px; border-radius: 16px; border: 1px solid var(--gray5, #DADADA); background: #F7F7F7; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 100%; letter-spacing: -1.3px; text-decoration: none; transition: all .2s ease; } 
.main-wrap.function .menu-item:hover { background: #FFF; border-color: var(--primary, #53C3B4); color: var(--primary-dark, #09ACBE); box-shadow: 0 4px 8px rgba(0,0,0,0.05); } 

/* 하단 영역 */

/* 2-1 공지사항 탭 */
.main-wrap.function .board-tab-wrap { gap: 20px; border-bottom: 1px solid var(--gray7, #999);} 
.main-wrap.function .tab-btn{height: 54px;}
.main-wrap.function .tab-btn.active { color: var(--white, #FFF); background: var(--point-gra2, linear-gradient(156deg, #F2748C 8.88%, #DD516C 84.56%)); } 
.main-wrap.function .board-item { } 
.main-wrap.function .board-item:hover { border-radius: 16px; background: #FFF2F4; } 

/* 2-2 공시 링크 + 문의 */
.main-wrap.function .link-area { display: flex; flex-direction: column; gap: 16px; } 
.main-wrap.function .link-box { position: relative; height: 95px; display: flex; align-items: center; justify-content: center; gap: 97px; padding: 20px 0; border: 1px solid var(--gray5, #DADADA); border-radius: 16px; }  
.main-wrap.function .link-item { display: flex; align-items: center; gap: 16px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ letter-spacing: -0.48px; } 
.main-wrap.function .link-item:hover { transition: all .2s ease; color: var(--primary-dark, #09ACBE); } 
.main-wrap.function .link-item:hover img { transition: all .2s ease; transform: rotate(-10deg); } 
.main-wrap.function .link-item img { } 
.main-wrap.function .divider { position: absolute; width: 0; height: 100%; border-left: 1px solid var(--gray5, #DADADA); } 
.main-wrap.function .inquiry-box { background: #f9f9f9; border-radius: 16px; padding: 30px; text-align: center; } 
.main-wrap.function .inquiry-box p { font-size: 16px; color: var(--gray7, #555); margin-bottom: 6px; } 
.main-wrap.function .inquiry-box strong { font-size: 24px; font-weight: 700; color: var(--primary-dark, #008DA3); } 
.main-wrap.function .system-call { height: 160px; background: #203D7B; } 

/* ----------------------- */
/* 반응형 */
@media (max-width: 1240px){
 .main-wrap.function .link-box { gap: 32px; } 
 }
@media (max-width: 1043px){
 .main-wrap.function .link-box { gap: 16px; } 
 }
@media (max-width: 1024px){
 .main-wrap.function { margin-top: 40px; } 
 .main-wrap.function .sec-top, .sec-bottom { flex-direction: column; } 
 .main-wrap.function .quick-menu ul { grid-template-columns: repeat(2, 1fr); } 
 
 .main-wrap.function .sec-top,
 .main-wrap.function .sec-bottom { grid-template-columns: 1fr; /* 한 줄 */
 gap: 40px; } 
 .main-wrap.function .link-area { display: grid; grid-template-columns: repeat(2, 1fr); } 
 .main-wrap.function .divider{position: inherit;}
 .main-wrap.function .link-box {justify-content: space-between; max-height: 160px; width: 100%; height: auto; padding: 30px; } 
 }
 @media (max-width: 946px){
   .main-wrap.function .link-area{grid-template-columns: repeat(1, 2fr);}
   .main-wrap.function .link-box{justify-content: center; gap: 45px;}
   .main-wrap.function .link-item{width: 100%; justify-content: center;}
 }

/* E : 법인시설지원시스템 기능보강팀 */

/* S : 법인시설지원시스템 재단관리자 */
.main-wrap.evaluation .content-wrap { display: flex; flex-direction: column; justify-content: space-between; gap: 50px; width: 100%; max-width: 1440px; } 

.main-wrap.evaluation .sec-top,
.main-wrap.evaluation .sec-bottom { display: grid; grid-template-columns: 1fr 0.68fr; /* 왼쪽 830 / 오른쪽 560 비율 */
 gap: 50px; align-items: start; } 

/* 상단 영역 */

/* 1-1 */
.main-wrap.evaluation .my-status h1,
.main-wrap.evaluation .quick-menu h1 { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 22px; font-weight: 600; letter-spacing: -0.44px; margin-bottom: 20px; } 

.main-wrap.evaluation .tb-wrap{}
.adm .main-wrap.evaluation .tb-wrap.adm-tb-wrap{display: block;}
.main-wrap.evaluation .tb-wrap.adm-tb-wrap{display: none;}
.main-wrap.evaluation .tb-wrap{margin-bottom: 28px;}
.main-wrap.evaluation .tb-wrap:last-child{margin-bottom: 0;}
.main-wrap.evaluation .tbl-basic { width: 100%; border-collapse: collapse; margin-bottom: 28px; border-bottom: 1px solid var(--gray5, #DADADA); } 
.main-wrap.evaluation .tbl-basic:last-child { margin-bottom: 0; } 
.main-wrap.evaluation .tbl-basic thead tr { background: linear-gradient(90deg, #02A4C1 0%, #1BC1CA 100%); height: 43px; } 
.main-wrap.evaluation .tbl-basic th { color: #fff; font-size: 15px; font-weight: 600; text-align: center; border: 1px solid #3ad0df; } 
.main-wrap.evaluation .tbl-basic td { border: 1px solid var(--gray5, #DADADA); text-align: center; height: 42px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 15px; font-style: normal; font-weight: 400; line-height: 14px; /* 100% */ letter-spacing: -0.28px; } 

/* 1-2 메뉴바로가기 */

.main-wrap.evaluation .menu-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 12px; } 
.main-wrap.evaluation .menu-item { display: flex; padding: 24px 20px; flex-direction: column; justify-content: center; align-items: center; gap: 18px; min-height: 142px; max-height: 142px; border-radius: 16px; border: 1px solid var(--gray5, #DADADA); background: #F7F7F7; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 100%; letter-spacing: -1.3px; text-decoration: none; transition: all .2s ease; } 
.main-wrap.evaluation .menu-item:hover { background: #FFF; border-color: var(--primary, #53C3B4); color: var(--primary-dark, #09ACBE); box-shadow: 0 4px 8px rgba(0,0,0,0.05); } 

/* 하단 영역 */

/* 2-1 공지사항 탭 */
.main-wrap.evaluation .board-tab-wrap { gap: 20px; border-bottom: 1px solid var(--gray7, #999);} 
.main-wrap.evaluation .tab-btn{height: 54px;}
.main-wrap.evaluation .tab-btn.active { color: var(--white, #FFF); background: var(--point-gra2, linear-gradient(156deg, #F2748C 8.88%, #DD516C 84.56%)); } 
.main-wrap.evaluation .board-item { } 
.main-wrap.evaluation .board-item:hover { border-radius: 16px; background: #FFF2F4; } 

/* 2-2 공시 링크 + 문의 */
.main-wrap.evaluation .link-area { display: flex; flex-direction: column; gap: 16px; } 
.main-wrap.evaluation .link-box { position: relative; height: 95px; display: flex; align-items: center; justify-content: center; gap: 97px; padding: 20px 0; border: 1px solid var(--gray5, #DADADA); border-radius: 16px; }  
.main-wrap.evaluation .link-item { display: flex; align-items: center; gap: 16px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ letter-spacing: -0.48px; } 
.main-wrap.evaluation .link-item:hover { transition: all .2s ease; color: var(--primary-dark, #09ACBE); } 
.main-wrap.evaluation .link-item:hover img { transition: all .2s ease; transform: rotate(-10deg); } 
.main-wrap.evaluation .link-item img { } 
.main-wrap.evaluation .divider { position: absolute; width: 0; height: 100%; border-left: 1px solid var(--gray5, #DADADA); } 
.main-wrap.evaluation .inquiry-box { background: #f9f9f9; border-radius: 16px; padding: 30px; text-align: center; } 
.main-wrap.evaluation .inquiry-box p { font-size: 16px; color: var(--gray7, #555); margin-bottom: 6px; } 
.main-wrap.evaluation .inquiry-box strong { font-size: 24px; font-weight: 700; color: var(--primary-dark, #008DA3); } 
.main-wrap.evaluation .system-call { height: 160px; background: #203D7B; } 

/* ----------------------- */
/* 반응형 */
@media (max-width: 1240px){
 .main-wrap.evaluation .link-box { gap: 32px; } 
 }
@media (max-width: 1043px){
 .main-wrap.evaluation .link-box { gap: 16px; } 
 }
@media (max-width: 1024px){
 .main-wrap.evaluation { margin-top: 40px; } 
 .main-wrap.evaluation .sec-top, .sec-bottom { flex-direction: column; } 
 .main-wrap.evaluation .quick-menu ul { grid-template-columns: repeat(2, 1fr); } 
 
 .main-wrap.evaluation .sec-top,
 .main-wrap.evaluation .sec-bottom { grid-template-columns: 1fr; /* 한 줄 */
 gap: 40px; } 
 .main-wrap.evaluation .link-area { display: grid; grid-template-columns: repeat(2, 1fr); } 
 .main-wrap.evaluation .divider{position: inherit;}
 .main-wrap.evaluation .link-box {justify-content: space-between; max-height: 160px; width: 100%; height: auto; padding: 30px; } 
 }
 @media (max-width: 946px){
   .main-wrap.evaluation .link-area{grid-template-columns: repeat(1, 2fr);}
   .main-wrap.evaluation .link-box{justify-content: center; gap: 45px;}
   .main-wrap.evaluation .link-item{width: 100%; justify-content: center;}
 }

/* E : 법인시설지원시스템 재단관리자 */

/* S : 법인시설지원시스템 인증팀 */
.main-wrap.certified .content-wrap { display: flex; flex-direction: column; justify-content: space-between; gap: 50px; width: 100%; max-width: 1440px; } 

.main-wrap.certified .sec-top,
.main-wrap.certified .sec-bottom { display: grid; grid-template-columns: 1fr 0.68fr; /* 왼쪽 830 / 오른쪽 560 비율 */
 gap: 50px; align-items: start; } 

/* 상단 영역 */

/* 1-1 */
.main-wrap.certified .my-status h1,
.main-wrap.certified .quick-menu h1 { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 22px; font-weight: 600; letter-spacing: -0.44px; margin-bottom: 20px; } 

.main-wrap.certified .tb-wrap{}
.adm .main-wrap.certified .tb-wrap.adm-tb-wrap{display: block;}
.main-wrap.certified .tb-wrap.adm-tb-wrap{display: none;}
.main-wrap.certified .tb-wrap{margin-bottom: 28px;}
.main-wrap.certified .tb-wrap:last-child{margin-bottom: 0;}
.main-wrap.certified .tbl-basic { width: 100%; border-collapse: collapse; margin-bottom: 28px; border-bottom: 1px solid var(--gray5, #DADADA); } 
.main-wrap.certified .tbl-basic:last-child { margin-bottom: 0; } 
.main-wrap.certified .tbl-basic thead tr { background: linear-gradient(90deg, #02A4C1 0%, #1BC1CA 100%); height: 43px; } 
.main-wrap.certified .tbl-basic th { color: #fff; font-size: 15px; font-weight: 600; text-align: center; border: 1px solid #3ad0df; } 
.main-wrap.certified .tbl-basic td { border: 1px solid var(--gray5, #DADADA); text-align: center; height: 42px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 15px; font-style: normal; font-weight: 400; line-height: 14px; /* 100% */ letter-spacing: -0.28px; } 

/* 1-2 메뉴바로가기 */

.main-wrap.certified .menu-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 12px; } 
.main-wrap.certified .menu-item { display: flex; padding: 24px 20px; flex-direction: column; justify-content: center; align-items: center; gap: 18px; min-height: 142px; max-height: 142px; border-radius: 16px; border: 1px solid var(--gray5, #DADADA); background: #F7F7F7; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 100%; letter-spacing: -1.3px; text-decoration: none; transition: all .2s ease; } 
.main-wrap.certified .menu-item:hover { background: #FFF; border-color: var(--primary, #53C3B4); color: var(--primary-dark, #09ACBE); box-shadow: 0 4px 8px rgba(0,0,0,0.05); } 

/* 하단 영역 */

/* 2-1 공지사항 탭 */
.main-wrap.certified .board-tab-wrap { gap: 20px; border-bottom: 1px solid var(--gray7, #999);} 
.main-wrap.certified .tab-btn{height: 54px;}
.main-wrap.certified .tab-btn.active { color: var(--white, #FFF); background: var(--point-gra2, linear-gradient(156deg, #F2748C 8.88%, #DD516C 84.56%)); } 
.main-wrap.certified .board-item { } 
.main-wrap.certified .board-item:hover { border-radius: 16px; background: #FFF2F4; } 

/* 2-2 공시 링크 + 문의 */
.main-wrap.certified .link-area { display: flex; flex-direction: column; gap: 16px; } 
.main-wrap.certified .link-box { position: relative; height: 95px; display: flex; align-items: center; justify-content: center; gap: 97px; padding: 20px 0; border: 1px solid var(--gray5, #DADADA); border-radius: 16px; }  
.main-wrap.certified .link-item { display: flex; align-items: center; gap: 16px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ letter-spacing: -0.48px; } 
.main-wrap.certified .link-item:hover { transition: all .2s ease; color: var(--primary-dark, #09ACBE); } 
.main-wrap.certified .link-item:hover img { transition: all .2s ease; transform: rotate(-10deg); } 
.main-wrap.certified .link-item img { } 
.main-wrap.certified .divider { position: absolute; width: 0; height: 100%; border-left: 1px solid var(--gray5, #DADADA); } 
.main-wrap.certified .inquiry-box { background: #f9f9f9; border-radius: 16px; padding: 30px; text-align: center; } 
.main-wrap.certified .inquiry-box p { font-size: 16px; color: var(--gray7, #555); margin-bottom: 6px; } 
.main-wrap.certified .inquiry-box strong { font-size: 24px; font-weight: 700; color: var(--primary-dark, #008DA3); } 
.main-wrap.certified .system-call { height: 160px; background: #203D7B; } 

/* ----------------------- */
/* 반응형 */
@media (max-width: 1240px){
 .main-wrap.certified .link-box { gap: 32px; } 
 }
@media (max-width: 1043px){
 .main-wrap.certified .link-box { gap: 16px; } 
 }
@media (max-width: 1024px){
 .main-wrap.certified { margin-top: 40px; } 
 .main-wrap.certified .sec-top, .sec-bottom { flex-direction: column; } 
 .main-wrap.certified .quick-menu ul { grid-template-columns: repeat(2, 1fr); } 
 
 .main-wrap.certified .sec-top,
 .main-wrap.certified .sec-bottom { grid-template-columns: 1fr; /* 한 줄 */
 gap: 40px; } 
 .main-wrap.certified .link-area { display: grid; grid-template-columns: repeat(2, 1fr); } 
 .main-wrap.certified .divider{position: inherit;}
 .main-wrap.certified .link-box {justify-content: space-between; max-height: 160px; width: 100%; height: auto; padding: 30px; } 
 }
 @media (max-width: 946px){
   .main-wrap.certified .link-area{grid-template-columns: repeat(1, 2fr);}
   .main-wrap.certified .link-box{justify-content: center; gap: 45px;}
   .main-wrap.certified .link-item{width: 100%; justify-content: center;}
 }

/* E : 법인시설지원시스템 인증팀 */

/* S : 법인시설지원시스템 메인 */
.main-wrap.main-defalt .content-wrap { display: flex; flex-direction: column; justify-content: space-between; gap: 50px; width: 100%; max-width: 1440px; } 

.main-wrap.main-defalt .sec-top{ display: grid; grid-template-columns: 0.915fr 1.52fr; gap: 50px; align-items: start; } 
.main-wrap.main-defalt .sec-bottom { display: grid; grid-template-columns: 1fr 0.68fr; /* 왼쪽 830 / 오른쪽 560 비율 */ gap: 50px; align-items: start; } 

/* 상단 영역 */

/* 1-1 */
.main-wrap.main-defalt .my-status h1, .main-wrap.main-defalt .quick-menu h1 { color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 22px; font-weight: 600; letter-spacing: -0.44px; margin-bottom: 20px; } 

.main-wrap.main-defalt .tb-wrap{}
.main-wrap.main-defalt .tb-wrap.adm-tb-wrap{display: none;}
.adm .main-wrap.main-defalt .tb-wrap.adm-tb-wrap{display: block;}
.main-wrap.main-defalt .tb-wrap{margin-bottom: 28px;}
.main-wrap.main-defalt .tb-wrap:last-child{margin-bottom: 0;}
.main-wrap.main-defalt .tbl-basic { width: 100%; border-collapse: collapse; margin-bottom: 28px; border-bottom: 1px solid var(--gray5, #DADADA); } 
.main-wrap.main-defalt .tbl-basic:last-child { margin-bottom: 0; } 
.main-wrap.main-defalt .tbl-basic thead tr { background: var(--main-gra, linear-gradient(139deg, #36D0BE 9.21%, #00B0C0 76.66%)); height: 39px; } 
.main-wrap.main-defalt .tbl-basic th { color: #fff; font-size: 15px; font-weight: 600; text-align: center; border: 1px solid #3ad0df; } 
.main-wrap.main-defalt .tbl-basic td { border: 1px solid var(--gray5, #DADADA); text-align: center; height: 37px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 15px; font-style: normal; font-weight: 400; line-height: 14px; /* 100% */ letter-spacing: -0.28px; } 
.main-wrap.main-defalt .tb-wrap.type02 .tbl-basic thead tr {height: 37px; } 
.main-wrap.main-defalt .tb-wrap.type02 .tbl-basic th {border: 1px solid #fff; } 

/* 1-2 메뉴바로가기 */

.main-wrap.main-defalt .menu-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } 
.main-wrap.main-defalt .menu-item { display: flex; padding: 24px 20px; flex-direction: column; justify-content:center; align-items: center; gap: 18px; min-height: 144px; max-height: 144px; border-radius: 16px; border: 1px solid var(--gray5, #DADADA); background: #F7F7F7; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 16px; font-weight: 400; line-height: 100%; letter-spacing: -2px; text-decoration: none; transition: all .2s ease; } 
.main-wrap.main-defalt .menu-item:hover { background: #FFF; border-color: var(--primary, #53C3B4); color: var(--primary-dark, #09ACBE); box-shadow: 0 4px 8px rgba(0,0,0,0.05); } 

.main-wrap.main-defalt .sec-top .cont-wrap{display: flex; gap: 50px;}
.main-wrap.main-defalt .menu-wrap{width: 100%;}
.main-wrap.main-defalt .link-menu-wrap{width: 100%; max-width: 296px;}
.main-wrap.main-defalt .link-menu{display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 16px;}
.main-wrap.main-defalt .link-menu .link{display: flex; width: 140px; height: 140px; padding: 11px 20px; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; background: var(--green_bg, #EAF6F4); text-align: center; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 17px; font-style: normal; font-weight: 400; line-height: 120%; /* 20.4px */ letter-spacing: -0.34px;}

/* 하단 영역 */

/* 2-1 공지사항 탭 */
.main-wrap.main-defalt .board-tab-wrap { gap: 20px; border-bottom: 1px solid var(--gray7, #999);} 
.main-wrap.main-defalt .tab-btn{width: 150px; height: 54px;}
.main-wrap.main-defalt .tab-btn.active { }
.main-wrap.main-defalt .board-item { } 
.main-wrap.main-defalt .board-item:hover { }

/* 2-2 공시 링크 + 문의 */
.main-wrap.main-defalt .link-area { display: flex; flex-direction: column; gap: 16px; } 
.main-wrap.main-defalt .link-box { position: relative; display: flex; align-items: center; justify-content: center; gap: 97px; padding: 53px 0; border: 1px solid var(--gray5, #DADADA); border-radius: 16px; } 
.main-wrap.main-defalt .link-item { display: flex; align-items: center; gap: 16px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ letter-spacing: -0.48px; } 
.main-wrap.main-defalt .link-item:hover { transition: all .2s ease; color: var(--primary-dark, #09ACBE); } 
.main-wrap.main-defalt .link-item:hover img { transition: all .2s ease; transform: rotate(-10deg); } 
.main-wrap.main-defalt .link-item img { } 
.main-wrap.main-defalt .divider { position: absolute; width: 0; height: 100%; border-left: 1px solid var(--gray5, #DADADA); } 
.main-wrap.main-defalt .inquiry-box { background: #f9f9f9; border-radius: 16px; padding: 30px; text-align: center; } 
.main-wrap.main-defalt .inquiry-box p { font-size: 16px; color: var(--gray7, #555); margin-bottom: 6px; } 
.main-wrap.main-defalt .inquiry-box strong { font-size: 24px; font-weight: 700; color: var(--primary-dark, #008DA3); } 
.main-wrap.main-defalt .system-call { height: 160px; background: #203D7B; } 

/* ----------------------- */
/* 반응형 */
@media (max-width: 1240px){
 .main-wrap.main-defalt .link-box { gap: 32px; } 
 }
@media (max-width: 1043px){
 .main-wrap.main-defalt .link-box { gap: 16px; } 
 }
@media (max-width: 1024px){
 .main-wrap.main-defalt { margin-top: 40px; } 
 .main-wrap.main-defalt .sec-top, .sec-bottom { flex-direction: column; } 
 .main-wrap.main-defalt .quick-menu ul { grid-template-columns: repeat(2, 1fr); } 
 
 .main-wrap.main-defalt .sec-top,
 .main-wrap.main-defalt .sec-bottom { grid-template-columns: 1fr; /* 한 줄 */
 gap: 40px; } 
 .main-wrap.main-defalt .link-area { display: grid; grid-template-columns: repeat(2, 1fr); } 
 .main-wrap.main-defalt .divider{position: inherit;}
 .main-wrap.main-defalt .link-box {justify-content: space-between; max-height: 160px; width: 100%; height: auto; padding: 30px; } 
 }
 @media (max-width: 946px){
   .main-wrap.main-defalt .link-area{grid-template-columns: repeat(1, 2fr);}
   .main-wrap.main-defalt .link-box{justify-content: center; gap: 45px;}
   .main-wrap.main-defalt .link-item{width: 100%; justify-content: center;}
 }


/* E : 법인시설지원시스템 메인 */

/* 법인시설지원시스템 이용안내 */
.info01-wrap{}
.info01-wrap .cont-title{color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ letter-spacing: -0.48px;}
.info01-wrap .cont-title span{color: var(--primary, #53C3B4); font-family: NanumBarunGothic; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; letter-spacing: -0.48px;}

/* 법인시설지원시스템 공시항목 */
.info02-wrap{}
.info02-wrap .form-table th{height: 52px;}
.info02-wrap .form-table td{height: 46px;}
.info02-wrap{}

/* S : 회원가입  */
.join-wraper {max-width: 1200px; padding: 50px 0; margin: 0 auto;}
.join-wraper .title-wrap{display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; margin-bottom: 40px;}
.join-wraper .title-wrap ul{display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 400px;}
.join-wraper .title-wrap ul li{position: relative; display: flex ; flex-direction: column; align-items: center; gap: 12px;}
.join-wraper .title-wrap ul li::after{position: absolute; content: ''; width: 117px; border-top: 1px solid #bdbdbd; top: 14px; z-index: -1; left: 25px;}
.join-wraper .title-wrap ul li.on::after{border-top: 1px solid #53C3B4;}
.join-wraper .title-wrap ul li:last-child::after{content: none;}
.join-wraper .title-wrap ul li h4{color: var(--gray7, #999); text-align: center; font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */}
.join-wraper .title-wrap ul li h4.on{color: var(--primary, #53C3B4); text-align: center; font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */}
.join-wraper .title-wrap ul li h4.active{color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; /* 14px */}
.join-wraper .cont-wrap{display: flex; flex-direction: column; gap: 30px;}
.join-wraper .cont-wrap .cont{}
.join-wraper .cont-wrap .cont .txt-area{display: flex; height: 234px; padding: 30px 12px 30px 20px; border: 1px solid var(--gray6, #BDBDBD); background: var(--gray2, #F7F7F7);}
.join-wraper .cont-wrap .cont .txt-area p{word-break: keep-all; overflow: auto;}
.join-wraper .headline3 .error{margin-left: 4px; color: var(--error, #FF3257); /* h3 */ font-family: NanumBarunGothic; font-size: 18px; font-style: normal; font-weight: 600; line-height: 100%; letter-spacing: -0.36px;}
.join-wraper .headline3.mark{margin-bottom: 20px;}
.join-wraper .tb-in-wrap{padding: 30px 20px; border: 1px solid var(--gray6, #BDBDBD); background: var(--gray2, #F7F7F7);}
.join-wraper .tb-in-wrap .sb-title{color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 13px; font-style: normal; font-weight: 300; line-height: 130%; /* 16.9px */ letter-spacing: -0.13px;}
.join-wraper .tb-in-wrap .form-table th{padding: inherit; height: 34px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ letter-spacing: -0.28px;}
.join-wraper .tb-in-wrap .form-table td{padding: 10px 20px; color: var(--gray9, #333); text-align: center; font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 130%; /* 18.2px */ letter-spacing: -0.14px;}
.join-wraper .tb-in-wrap .form-wrap{gap: 10px; margin-bottom: 0;}
.join-wraper .tb-in-wrap .form-title{color: var(--gray9, #333); /* span */ font-family: NanumBarunGothic; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */}
.join-wraper .tb-in-wrap .form-title::before{content: none;}
.join-wraper .tb-in-wrap {}
.join-wraper .error{color: var(--error, #FF3257);}
.join-wraper .prm-dark{color: var(--primary-dark, #09ACBE);}
.join-wraper .radio-wrap{justify-content: flex-end; margin-top: 10px;}
.join-wraper .form-table .radio-wrap{justify-content: flex-start; margin-top: 0;}
.join-wraper .step02-wrap{display: flex; padding: 40px 0; flex-direction: column; justify-content: center; align-items: center; gap: 40px; margin-bottom: 10px; border: 1px solid var(--gray6, #BDBDBD); background: var(--gray2, #F7F7F7);}
.join-wraper .step02-wrap .title{color: var(--gray9, #333); /* h3 */ font-family: NanumBarunGothic; font-size: 18px; font-style: normal; font-weight: 600; line-height: 100%; /* 18px */ letter-spacing: -0.36px;}
.join-wraper .step02-wrap ul{display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 741px;}
.join-wraper .step02-wrap ul li{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px;}
.join-wraper .step02-wrap ul li img{width: min-content;}
.join-wraper .step02-wrap ul li p{color: var(--gray9, #333); /* body2 */ font-family: NanumBarunGothic; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; /* 20.8px */ letter-spacing: -0.16px;}
.join-wraper .form-table th{height: 54px;}

.join-wraper .step04-wrap{display: flex ; flex-direction: column; align-items: center; padding: 40px 0; width: 100%;}
.join-wraper .step04-wrap .cont-wrap{display: flex; flex-direction: row; padding: 40px 0; align-items: center; gap: 30px; width: 100%; max-width: 340px; margin-bottom: 40px;}
.join-wraper .step04-wrap img{width: min-content;}
.join-wraper .step04-wrap h5{color: var(--gray9, #333); font-family: NanumBarunGothic; font-size: 22px; font-style: normal; font-weight: 400; line-height: 150%; /* 33px */ letter-spacing: -0.44px;}

/* E : 회원가입  */


/*배너 재작업 2025-12-16*/
.main-wrap .main-banner {
  display:flex;
  flex-direction: column;
  gap: 19px;
}
.main-wrap .main-banner li {
  border-radius:20px;
  width:100%;
  height:95px;
}
.main-wrap .main-banner li.mb01 {
  background: #18bbb6 url("/images/img/bn-ico1.svg") no-repeat 30px center;
  background-size:50px;
}
.main-wrap .main-banner li.mb02 {
  background: #2443a2 url("/images/img/bn-ico2.svg") no-repeat 30px center;
  background-size:50px;
}
.main-wrap .main-banner li > a {
  color:#fff;
  display:block;
  padding:14px 0 0 100px;
}
.main-wrap .main-banner li .tit {
  font-size:20px;
  font-weight:600;
}

.main-wrap .main-banner li .tit>span {
  color:#f5ff8f;
  margin-left:10px;
  font-size:18px;
  font-weight: 400;
}
.main-wrap .main-banner li .con {
  font-size:24px;
  font-weight:700;
  white-space: nowrap;
}
.main-wrap .main-banner li .con>span {
  font-size:16px;
  margin-left:10px;
}
/*법인시설 화면수정 12-18*/
.w50p {width: 50% !important}