/* ==================================================================
 /shared/common.css
 - prd, admin, style guide에서 공통 css (재사용성이 높은 코드 단위로 포함)
 - ex) reset, foundation, components
================================================================== */

/* =================================
 Reset
================================= */

* { margin:0; padding:0; font:inherit; color:inherit; } 
*, :after, :before { box-sizing:border-box; } 
:root { -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; text-size-adjust:100%; cursor:default; overflow-wrap:break-word; word-break:break-word; tab-size:4 } 
html, body { height:100%; font-size:16px; line-height:1.1; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; letter-spacing:-0.5px; } 
ol, ul { list-style:none } 
img, picture, video, canvas { display: block; max-width:100%; } 
svg { width: 100%; height: 100%; } 
button { background:none; border:0; cursor:pointer; } 
a { text-decoration:none; } 
table { border-collapse:collapse; border-spacing:0; } 
body { background-color: #fff; } 



/* =================================
 Foundation
================================= */

:root { 
    --primary600:#002E73; 
    --primary500:#4169E1; 
    --primary400:#1E90FF; 
    --sec600:#1A56AC; 
    --sec500:#4682B4; 
    --sec400:#20B2AA; 
    --gray800:#24272D; 
    --gray600:#495057; 
    --gray500:#ADB5BD; 
    --gray400:#CED4DA; 
    --gray300:#E9ECEF; 
    --accent600:#C62828; 
    --accent500:#E53935; 
    --accent400:#FF6347; 
    --accent300:#FF9800; 
    --accent200:#FFC107; 
    --accent100:#4CAF50; 
    --txtBg600:#050505; 
    --txtBg500:#495057; 
    --txtBg200:#F8F9FA; 
    --txtBg100:#fff; 
    --spacing1:4px; 
    --spacing2:8px; 
    --spacing3:12px; 
    --spacing4:16px; --spacing5:24px; --spacing6:32px; --spacing7:48px; --spacing8:56px; --spacing9:80px; --spacing10:96px; } 

.cPrimary600 { color:var(--primary600); } 
.cPrimary500 { color:var(--primary500); } 
.cPrimary400 { color:var(--primary400); } 
.cSec600 { color:var(--sec600); } 
.cSec500 { color:var(--sec500); } 
.cSec400 { color:var(--sec400); } 
.cGray600 { color:var(--gray600); } 
.cGray500 { color:var(--gray500); } 
.cGray400 { color:var(--gray400); } 
.cGray300 { color:var(--gray300); } 
.cAccent600 { color:var(--accent600); } 
.cAccent500 { color:var(--accent500) !important; } 
.cAccent400 { color:var(--accent400); } 
.cAccent300 { color:var(--accent300); } 
.cAccent200 { color:var(--accent200); } 
.cAccent100 { color:var(--accent100); } 
.cTxtBg600 { color:var(--txtBg600); } 
.cTxtBg500 { color:var(--txtBg500); } 
.cTxtBg200 { color:var(--txtBg200); } 
.cTxtBg100 { color:var(--txtBg100); } 

.stPrimary600 { stroke:var(--primary600); } 
.stPrimary500 { stroke:var(--primary500); } 
.stPrimary400 { stroke:var(--primary400); } 
.stSec600 { stroke:var(--sec600); } 
.stSec500 { stroke:var(--sec500); } 
.stSec400 { stroke:var(--sec400); } 
.stGray600 { stroke:var(--gray600); } 
.stGray500 { stroke:var(--gray500); } 
.stGray400 { stroke:var(--gray400); } 
.stGray300 { stroke:var(--gray300); } 
.stAccent600 { stroke:var(--accent600); } 
.stAccent500 { stroke:var(--accent500); } 
.stAccent400 { stroke:var(--accent400); } 
.stAccent300 { stroke:var(--accent300); } 
.stAccent200 { stroke:var(--accent200); } 
.stAccent100 { stroke:var(--accent100); } 
.stTxtBg600 { stroke:var(--txtBg600); } 
.stTxtBg500 { stroke:var(--txtBg500); } 
.stTxtBg200 { stroke:var(--txtBg200); } 
.stTxtBg100 { stroke:var(--txtBg100); } 

.bgPrimary600 { background-color:var(--primary600); } 
.bgPrimary500 { background-color:var(--primary500); } 
.bgPrimary400 { background-color:var(--primary400); } 
.bgSec600 { background-color:var(--sec600); } 
.bgSec500 { background-color:var(--sec500); } 
.bgSec400 { background-color:var(--sec400); } 
.bgGray600 { background-color:var(--gray600); } 
.bgGray500 { background-color:var(--gray500); } 
.bgGray400 { background-color:var(--gray400); } 
.bgGray300 { background-color:var(--gray300) !important; } 
.bgAccent600 { background-color:var(--accent600); } 
.bgAccent500 { background-color:var(--accent500); } 
.bgAccent400 { background-color:var(--accent400); } 
.bgAccent300 { background-color:var(--accent300); } 
.bgAccent200 { background-color:var(--accent200); } 
.bgAccent100 { background-color:var(--accent100); } 
.bgTxtBg600 { background-color:var(--txtBg600); } 
.bgTxtBg500 { background-color:var(--txtBg500); } 
.bgTxtBg200 { background-color:var(--txtBg200); } 
.bgTxtBg100 { background-color:var(--txtBg100); } 

.t1 { font-size:32px; line-height:1.375; } 
.t2 { font-size:28px; line-height:1.357; } 
.t3 { font-size:26px; line-height:1.46; } 
.t4 { font-size:24px; line-height:1.58; } 
.t5 { font-size:22px; line-height:1.545; } 
.t6 { font-size:20px; line-height:1.6; } 
.t7 { font-size:18px; line-height:1.56; } 
.t8 { font-size:16px; line-height:1.625; } 
.t9 { font-size:14px; line-height:1.57; } 
.t10 { font-size:12px; line-height:1.5; } 
.t11 { font-size:11px; line-height:1.45; } 

.fw300 { font-weight: 300; } 
.fw400 { font-weight: 400; } 
.fw700 { font-weight: 700; } 
/* 20251028 추가 KEJ */
.fw800 { font-weight: 800; }  

.tAlignC { text-align: center !important; } 
.tAlignL { text-align: left !important; } 
.tAlignR { text-align: right !important; } 

.mtSp1 { margin-top: var(--spacing1); } 
.mtSp2 { margin-top: var(--spacing2); } 
.mtSp3 { margin-top: var(--spacing3); } 
.mtSp4 { margin-top: var(--spacing4); } 
.mtSp5 { margin-top: var(--spacing5); } 
.mtSp6 { margin-top: var(--spacing6); } 
.mtSp7 { margin-top: var(--spacing7); } 
.mtSp8 { margin-top: var(--spacing8); } 
.mtSp9 { margin-top: var(--spacing9); } 

.mrSp1 { margin-right: var(--spacing1); } 
.mrSp2 { margin-right: var(--spacing2); } 
.mrSp3 { margin-right: var(--spacing3); } 
.mrSp4 { margin-right: var(--spacing4); } 
.mrSp5 { margin-right: var(--spacing5); } 
.mrSp6 { margin-right: var(--spacing6); } 
.mrSp7 { margin-right: var(--spacing7); } 
.mrSp8 { margin-right: var(--spacing8); } 
.mrSp6 { margin-right: var(--spacing6); } 
.mrSpAuto { margin-right: auto; } 

.mlSp1 { margin-left: var(--spacing1); } 
.mlSp2 { margin-left: var(--spacing2); } 
.mlSp3 { margin-left: var(--spacing3); } 
.mlSp4 { margin-left: var(--spacing4); } 
.mlSp5 { margin-left: var(--spacing5); } 
.mlSp6 { margin-left: var(--spacing6); } 
.mlSp7 { margin-left: var(--spacing7); } 
.mlSp8 { margin-left: var(--spacing8); } 
.mlSp6 { margin-left: var(--spacing6); } 
.mlSpAuto { margin-left: auto; } 

.mbSp1 { margin-bottom: var(--spacing1); } 
.mbSp2 { margin-bottom: var(--spacing2); } 
.mbSp3 { margin-bottom: var(--spacing3); } 
.mbSp4 { margin-bottom: var(--spacing4); } 
.mbSp5 { margin-bottom: var(--spacing5); } 
.mbSp6 { margin-bottom: var(--spacing6); } 
.mbSp7 { margin-bottom: var(--spacing7); } 
.mbSp8 { margin-bottom: var(--spacing8); } 
.mbSp9 { margin-bottom: var(--spacing9); } 

.p0 { padding:0 !important; } 

[class^="ico"] { flex-shrink: 0; } 
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.tUnderline { text-decoration: underline; } 
.noData { padding: 18px 0; font-size: 18px; line-height: 1.56; color: var(--gray500); font-weight: 700; text-align: center; } 



/* Display */
.flex { display: flex; } 
.inlineFlex { display: inline-flex; } 



/* Direction */
.flexRow { flex-direction: row; } 
.flexCol { flex-direction: column; } 



/* Wrap */
.flexWrap { flex-wrap: wrap; } 
.flexNowrap { flex-wrap: nowrap; } 



/* Align Items (수직 정렬) */
.itemsStart { align-items: flex-start; } 
.itemsCenter { align-items: center; } 
.itemsEnd { align-items: flex-end; } 
.itemsStretch { align-items: stretch; } 



/* Justify Content (수평 정렬) */
.justifyStart { justify-content: flex-start; } 
.justifyCenter { justify-content: center; } 
.justifyEnd { justify-content: flex-end; } 
.justifyBetween { justify-content: space-between; } 
.justifyAround { justify-content: space-around; } 
.justifyEvenly { justify-content: space-evenly; } 

.flexShrink0 { flex-shrink: 0; } 
.flexShrink1 { flex-shrink: 1; } 
.flexGrow0 { flex-grow: 0; } 
.flexGrow1 { flex-grow: 1; } 



/* Gap */
.colGap4 { column-gap: 4px; } 
.colGap8 { column-gap: 8px; } 
.colGap16 { column-gap: 16px; } 
.colGap16 { column-gap: 16px; } 
.rowGap4 { row-gap: 4px; } 
.rowGap8 { row-gap: 8px; } 
.rowGap12 { row-gap: 12px; } 
.rowGap16 { row-gap: 16px; } 



/* =================================
 Components
================================= */



/* -- Accordion -------------------- */
.accordionWrap { border-top: solid 1px var(--txtBg600); } 
.accordionWrap .accordionItem { border-bottom: 1px solid #ddd; } 
.accordionWrap .accordion { display: flex; justify-content: space-between; background: var(--txtBg100); color: #333; padding: 1rem; width: 100%; border: none; cursor: pointer; font-size: 16px; } 
.accordionWrap .accordion .icoQuestion,
.accordionWrap .accordion .icoArrowDown { flex-shrink: 0; height: 24px; } 
.accordionWrap .accordion .icoQuestion .icon > * { stroke: inherit; } 
.accordionWrap .accordion .text { display: flex; align-items: center; flex-grow: 1; text-align: left; margin-left: 8px; color: var(--txtBg600); font-size:18px; line-height:1.56; } 
.accordionWrap .accordion .arrow { margin-left: 8px; transition: transform 0.3s ease; } 
.accordionWrap .accordion[aria-expanded="true"] .arrow { transform: rotate(180deg); } 
.accordionWrap .accordionPanel { overflow: hidden; max-height: 0; } 
.accordionWrap .accordionPanel .panel { display: flex; column-gap: 10px; padding: 16px 36px; background: var(--txtBg200); color:var(--txtBg600); font-size:16px; line-height:1.625; } 
.accordionWrap .accordionPanel .panel .icoAnswer { width: 24px; height: 24px; } 
.accordionWrap .accordionPanel.open { max-height: 500px; /* 충분히 큰 값 (콘텐츠 크기에 따라 조절) */ } 



/* -- Breadcrumbs -------------------- */
.breadcrumbs { display: flex; flex-wrap: wrap; justify-content: flex-end; } 
.breadcrumbs li { display: flex; align-items: center; font-size:14px; line-height:1.57; color: var(--txtBg500); } 
.breadcrumbs li + li::before { display: inline-block; width: 8px; height: 8px; margin: 0 10px; background: url(./icons/icon-arrow_right.svg) no-repeat center / contain; content: ''; } 
.breadcrumbs a { color: inherit; text-decoration: none; } 
.breadcrumbs strong { font-weight: bold; color: #222; } 



/* -- Buttons -------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; min-width:76px; height: 48px; padding:0 24px; font-size: 16px; line-height: 1.625; border: none; border-radius: 10px; cursor: pointer; fill:currentColor; stroke: currentColor; } 
.btn.disabled { background-color: var(--gray300); color:var(--txtBg500); border-width:0; cursor: not-allowed; } 
.btn [class^="ico"] { width: 24px; height: 24px; } 
.btn .icon * { fill:inherit; stroke: inherit; } 
.btnPrimary { background-color: var(--primary500); color: var(--txtBg100); } 
.btnPrimary:hover:not(.disabled) { background-color: var(--primary600); } 
.btnPrimaryOutline { background-color: var(--txtBg100); color: var(--primary500); border:solid 1px currentColor; } 
.btnPrimaryOutline:hover { background-color: var(--gray300); } 
.btnSecondary { background-color: var(--gray400); color: var(--txtBg600); } 
.btnSecondary:hover:not(.disabled) { background-color: var(--gray500); } 
.btnSecondaryOutline { background-color: var(--txtBg100); color: var(--gray600); border:solid 1px currentColor; } 
.btnSecondaryOutline:hover { background-color: var(--gray300); } 
.btnTxt { display:inline-flex; align-items: center; gap:4px; height:26px; font-size:16px; line-height:1.625; } 
.btnTxt:hover { color:var(--primary600) } 
.btnTxt [class^="ico"] { width:16px; height:16px; font-size: 0; } 
.btnTxt:hover .icon * { fill: var(--primary600); stroke:var(--primary600); } 
.btnTxtLine { height:22px; font-size:16px; line-height:1.375; } 
.btnTxtLine:hover { text-decoration:underline; } 



/* -- Link -------------------- */
.linkBtn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border:solid 1px var(--gray400); border-radius: 10px; font-weight: 300; color:var(--txtBg500) } 
.linkTxt { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 2px; font-weight: 300; color:var(--txtBg500) } 
.linkTxt:hover { border-bottom: solid 1px var(--txtBg600); } 
.linkTxt .icon { width: 18px; } 



/* -- Input Text -------------------- */
input[type=text] { width: 100%; height: 48px; padding: 0 24px; border-radius: 4px; border:solid 1px var(--gray400); outline: none; font-size: 16px; line-height: 26px; color: var(--txtBg500) } 
table .inputTextWrap { width: 100%; max-width: 400px; min-width: 400px; } 
table .inputTextWrap.full { max-width: 100%; } 
input[type=text]::placeholder { color: var(--gray400); } 
input[type=text]:not([disabled]):hover { border-color:var(--primary600); } 



/* -- Checkbox -------------------- */
input[type="checkbox"] { display: none; } 
.checkbox { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; position: relative; padding-left: 22px; font-size:16px; line-height:1.625; } 
.checkbox::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 4px; background-color: var(--txtBg100); border:solid 1px var(--gray400); transition: all 0.2s ease; background-repeat: no-repeat; background-position: center; background-size: 12px; } 
input[type="checkbox"]:checked + label::before,
input[type="checkbox"]:checked::before { background-color: var(--primary500); border:solid 1px var(--primary500); background-image: url("./icons/icon-checkbox_on.svg"); } 

input[type="checkbox"].checkbox { display: inline-block; } 



/* -- Radio -------------------- */
input[type="radio"] { display: none; } 
.radio { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; cursor: pointer; user-select: none; position: relative; padding-left: 22px; font-size:16px; line-height:1.625; } 
.radio::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 50%; box-sizing: border-box; background-color: #fff; transition: all 0.2s ease; } 
input[type="radio"]:checked + label::before { border-color: var(--primary500); background-color: var(--primary500); background-image: radial-gradient(white 0%, white 33%, transparent 33.1%); } 



/* -- Dropdown -------------------- */
.selectWrapper { position: relative; } 
.selectWrapper select { appearance: none; -webkit-appearance: none; -moz-appearance: none; height:48px; padding: 10px 56px 10px 24px; font-size: 16px; line-height: 1.5; color: #333; background-color: var(--txtBg100); border: 1px solid var(--gray400); border-radius: 4px; background-image: url('./icons/icon-arrow_down.svg'); background-repeat: no-repeat; background-position:calc(100% - 16px) 50%; background-size: 24px 24px; cursor: pointer; } 
.selectWrapper select:focus { outline: none; border-color: var(--primary600); background-image: url('./icons/icon-arrow_up.svg'); } 
.selectWrapper select option { font-size: 14px; color: var(--txtBg600); } 



/* -- Date Picker -------------------- */
.datepickrGroup { margin-right: 40px; } 
.datepickrWrap { display: flex; align-items: center; height:48px; } 
table .datepickrWrap { width:149px; } 
.datepickrWrap input { width: 228px; height: 100%; border-radius: 10px 0 0 10px; padding: 0 8px 0 12px; background-color: var(--txtBg200); } 
.datepickrWrap input:hover { border-color: var(--gray400); } 
.datepickrWrap .btnCal { display:inline-flex; align-items: center; justify-content: center; width: 45px; height: 100%; border-radius: 0 10px 10px 0; border-color: var(--gray400); border-width: 1px 1px 1px 0; border-style: solid; background-color: var(--gray400); } 
.datepickrWrap .btnCal [class^="ico"] { width: 24px; height: 24px; } 
.flatpickr-calendar { margin-top: 8px; font-size: 16px; width: auto !important;min-width: 0; padding: 8px 16px; box-shadow: none; border: solid 1px var(--gray400); } 
.flatpickr-calendar:before, 
.flatpickr-calendar:after { display: none; } 
.flatpickr-calendar .flatpickr-months { position: relative; margin-bottom: 8px; } 
.flatpickr-calendar .flatpickr-months .flatpickr-month { height: 26px; } 
.flatpickr-calendar .flatpickr-current-month { display: flex; align-items: center; height: 100%; padding-top: 0; font-size: 16px; } 
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background-color: var(--txtBg200); } 
.flatpickr-calendar .flatpickr-current-month .numInputWrapper { height: 100%; flex-grow: 1; } 
.flatpickr-calendar .flatpickr-current-month input.cur-year { height: 100%; } 
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month, 
.flatpickr-calendar .flatpickr-months .flatpickr-next-month { top: 50%; width: 16px; height: 16px; padding: 0; transform: translateY(-50%); } 
.flatpickr-calendar .flatpickr-weekdays .flatpickr-weekdaycontainer { gap: 0 8px; } 
.flatpickr-calendar .dayContainer { display: grid;  grid-template-columns: repeat(7, 1fr); gap: 4px 8px; width: 100%; min-width: unset; } 
.flatpickr-calendar span.flatpickr-weekday { font: inherit; } 
.flatpickr-calendar .flatpickr-days { width: 100%; } 
.flatpickr-calendar .flatpickr-day { width: 26px; height: 26px; line-height: 26px; border-radius: 4px; font-weight: 300; flex-basis: auto; } 
.flatpickr-calendar .flatpickr-day.selected, 
.flatpickr-calendar .flatpickr-day.startRange, 
.flatpickr-calendar .flatpickr-day.endRange, 
.flatpickr-calendar .flatpickr-day.selected.inRange, 
.flatpickr-calendar .flatpickr-day.startRange.inRange, 
.flatpickr-calendar .flatpickr-day.endRange.inRange, 
.flatpickr-calendar .flatpickr-day.selected:focus, 
.flatpickr-calendar .flatpickr-day.startRange:focus, 
.flatpickr-calendar .flatpickr-day.endRange:focus, 
.flatpickr-calendar .flatpickr-day.selected:hover, 
.flatpickr-calendar .flatpickr-day.startRange:hover, 
.flatpickr-calendar .flatpickr-day.endRange:hover, 
.flatpickr-calendar .flatpickr-day.selected.prevMonthDay, 
.flatpickr-calendar .flatpickr-day.startRange.prevMonthDay, 
.flatpickr-calendar .flatpickr-day.endRange.prevMonthDay, 
.flatpickr-calendar .flatpickr-day.selected.nextMonthDay, 
.flatpickr-calendar .flatpickr-day.startRange.nextMonthDay, 
.flatpickr-calendar .flatpickr-day.endRange.nextMonthDay { background-color: var(--primary500); border-color: var(--primary500); } 
.flatpickr-calendar .flatpickr-day.inRange, 
.flatpickr-calendar .flatpickr-day.prevMonthDay.inRange, 
.flatpickr-calendar .flatpickr-day.nextMonthDay.inRange, 
.flatpickr-calendar .flatpickr-day.today.inRange, 
.flatpickr-calendar .flatpickr-day.prevMonthDay.today.inRange, 
.flatpickr-calendar .flatpickr-day.nextMonthDay.today.inRange, 
.flatpickr-calendar .flatpickr-day:hover, 
.flatpickr-calendar .flatpickr-day.prevMonthDay:hover, 
.flatpickr-calendar .flatpickr-day.nextMonthDay:hover, 
.flatpickr-calendar .flatpickr-day:focus, 
.flatpickr-calendar .flatpickr-day.prevMonthDay:focus, 
.flatpickr-calendar .flatpickr-day.nextMonthDay:focus { background-color: var(--gray400); } 
.flatpickr-calendar .flatpickr-day.today { border-color:var(--primary500) } 
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months { min-width:95px; height: 100%; margin-right: 8px; padding-right: 8px; text-align: right; } 



/* -- Download File Link -------------------- */
.linkDownload { display:inline-block; height: 26px; color:var(--primary600); border-bottom:solid 1px currentColor; font-size:16px; line-height:1.625; } 



/* -- InfoBox -------------------- */
.infoBox { background-color: var(--txtBg200); padding: 24px; } 



/* -- Upload File Button -------------------- */
.fileUpload { display: flex; align-items: center; height: 48px; } 
.fileUpload .btnFile { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; height: 100%; width: 106px; margin-right: var(--spacing2); padding: 6px 14px; background-color: var(--gray400); border-radius: 10px; color: var(--txtBg600); font-size:16px; line-height:1.625; border: none; cursor: pointer; } 
.fileUpload .fileName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 202px; height: 100%; padding: 0 24px; font-size: 16px; line-height: 48px; color: var(--gray400); border:solid 1px var(--gray400); border-radius: 10px 0 0 10px; } 
.fileUpload .fileName.full { width: 100%; } 
.fileUpload .fileName.on { color: var(--primary600); } 
.fileUpload .btnDelete { width: 48px; height: 100%; flex-shrink: 0; padding: 6px 12px; border:solid 1px var(--gray400); border-radius: 0 10px 10px 0; cursor: pointer; background-color:var(--gray400); background-image: url('icons/icon-close.svg'); background-position: center; background-size: 24px 24px; background-repeat: no-repeat; font-size:0; } 



/* -- Paging -------------------- */
.paging { display: flex; justify-content: center; align-items: center; } 
.paging button { background-color: #fff; color: #333; min-width: 50px; height: 50px; font-size:16px; line-height:1.625; cursor: pointer; border-radius: 10px; transition: all 0.2s; } 
.paging .active { background-color: var(--primary500); color: var(--txtBg100); font-weight: bold; } 
.paging .btnFirst,
.paging .btnLast,
.paging .btnPrev,
.paging .btnNext { min-width: unset; width: 24px; height: 24px; font-size: 16px; } 
.paging button.disabled .icon * { fill: var(--gray400); stroke: var(--gray400); } 
.paging .btnFirst,
.paging .btnPrev { margin-right: 8px; } 
.paging .btnLast,
.paging .btnNext { margin-left: 8px; } 
.paging .page { position: relative; } 
.paging .page + .page:before { position: absolute; top: 50%; left: 0; display:inline-block; width: 1px; height: 14px; margin-top: -7px; background-color: var(--gray400); content: ''; } 
.paging .page.active + .page:before { display:none } 



/* -- Pop -------------------- */
.popWrap { display: flex; flex-direction: column; height: 100vh; } 
.popWrap .popHeader { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background-color: var(--gray600); } 
.popWrap .popHeader h2 { font-size:24px; font-weight: 700; line-height:1.58; color: var(--txtBg200); } 
.popWrap .popHeader .btnClose { width: 32px; height: 32px; } 
.popWrap .popHeader .btnClose svg { width: 100%; height: 100%; fill: var(--txtBg200); stroke: var(--txtBg200); } 
.popWrap .popHeader .btnClose * { stroke: inherit; } 
.popWrap .popBody { flex-grow: 1; padding: 24px 32px; overflow-y: auto;} 


/* -- Textarea -------------------- */
.textareaWrapper { overflow: hidden; width: 100%; min-height: 100px; padding:16px 20px; border-radius: 10px; border: 1px solid var(--gray400); } 
.textareaWrapper textarea { width: 100%; height: 100%; padding: 0; resize: none; overflow: auto; border: none; font-size:16px; line-height:1.625; font-weight: 300; color:var(--txtBg500); outline: unset; } 
.textareaWrapper textarea::placeholder { color: var(--gray400); } 
.textareaWrapper textarea::-webkit-scrollbar { width: 6px; position:relative; right:8px; } 
.textareaWrapper textarea::-webkit-scrollbar-track { background: var(--txtBg100); border-radius: 4px; } 
.textareaWrapper textarea::-webkit-scrollbar-thumb { background: var(--gray300); border-radius: 50px; } 
.textareaWrapper textarea::-webkit-scrollbar-thumb:hover { background: var(--gray300); } 



/* -- Table -------------------- */
.tableWrap { width: 100%; position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; } 
.tableWrap .sub { margin-top: 8px; font-size: 16px; line-height:1.625; color: var(--txtBg600); font-weight: 400; } 
.tableBasic { width: 100%; /* table-layout: fixed; */
 border-collapse: collapse; letter-spacing: 1px; border-top: solid 1px var(--gray600); letter-spacing: -0.5px; } 
.tableBasic thead,
.tableBasic tfoot { background-color: var(--txtBg200); } 
.tableBasic th, 
.tableBasic td { padding: 16px 24px; border-style: solid; border-color: var(--gray400); border-width: 0 0 1px 1px; text-align: center; white-space: nowrap; } 
.tableBasic th { font-weight: 700; font-size:20px; line-height:1.6; background-color: var(--txtBg200); } 
.tableBasic th:first-child,
.tableBasic td:first-child { border-left-width: 0; } 
.tableBasic td { font-size:18px; line-height:1.56; } 
.tableBasic.type2 th { padding: 8px 24px; } 
.tableBasic.type2 td { padding: 4px 24px; } 
.tableBasic input[type=text] { min-width: unset; width: 100%; } 
.tableBasic tfoot th { text-align: right; } 
.tableBasic tfoot td { font-weight: bold; } 
.formTableVertical { width: 100%; table-layout: fixed; border-collapse: collapse; letter-spacing: 1px; border-top: solid 1px var(--gray600); letter-spacing: -0.5px; } 
.formTableVertical thead,
.formTableVertical tfoot { background-color: var(--txtBg200); } 
.formTableVertical th, 
.formTableVertical td { padding: 18px 24px; border-style: solid; border-color: var(--gray400); border-width: 0 0 1px 1px; text-align: left; } 
.formTableVertical th { font-weight: 700; font-size:20px; line-height:1.6; background-color: var(--txtBg200); } 
.formTableVertical th:first-child,
.formTableVertical td:first-child { border-left-width: 0; } 
.formTableVertical th .sub { margin-top: 4px; font-size:16px; line-height:1.625; color: var(--primary600); font-weight: 400; } 
.formTableVertical td { font-size:18px; line-height:1.56; text-align: left; } 
.formTableVertical input[type=text] { min-width: unset; width: 100%; } 
.formTableVertical tfoot th { text-align: right; } 
.formTableVertical tfoot td { font-weight: bold; } 
table.tableBasic table th,
table.formTableVertical table th
table.tableBasic table td,
table.formTableVertical table td { text-align: center; } 
.tableWrap.hasXScroll { width: 1136px; padding-bottom: 16px; } 
.tableWrap.hasXScroll .tableBasic { table-layout: auto; white-space: nowrap; } 
.popWrap .tableWrap.hasXScroll { width: 100%; } 
table .tableWrap.hasXScroll { width: 100%; } 
/* .tableWrap::-webkit-scrollbar { height: 6px; margin-top: 6px; }  */
.tableWrap::-webkit-scrollbar { height: 28px; margin-top: 6px; } /* 20251029 스크롤 두께 수정요청  */
/* .tableWrap::-webkit-scrollbar-thumb { background: var(--gray300); border-radius: 50px; }  */
.tableWrap::-webkit-scrollbar-thumb { background: var(--gray400); border-radius: 50px; } /* 20251029 색상변경 */
.tableWrap::-webkit-scrollbar-track { background: var(--bgTxt100); } 
table .tableBasic th,
table .tableBasic td { text-align: center; } 



/* -- Tab -------------------- */
.tabWrapper { max-width: 100%; } 
.tabList { display: inline-flex; justify-content: center; width: 100%; list-style: none; margin: 0; border-bottom: solid 1px var(--gray400) } 
.tabItem button { position: relative; background: none; border: none; padding: 12px 32px; font-size:20px; line-height:1.6; color: var(--gray600); cursor: pointer; white-space: nowrap; } 
.tabItem button::before { display:inline-block; position: absolute; bottom: -1px; left: 0; width: 100%; border-bottom: 4px solid transparent; transition: 0.2s; content:''; } 
.tabItem.active button { color: var(--primary500); font-weight: bold; } 
.tabItem.active button::before { color: var(--primary500); border-color: var(--primary500); } 
.tabContentWrapper .tabContent { display: none; } 
.tabContentWrapper .tabContent.active { display: block; } 
.scBarWrapper .tabList { justify-content: flex-start; column-gap: 8px; border-bottom: 0; } 
.scBarWrapper .tabItem button { width: 128px; min-height: 38px; padding: 8px 16px; font-size:14px; line-height:1.57; background-color: var(--gray300); color: var(--txtBg500); cursor: pointer; white-space: wrap; border-radius: 10px; font-weight: 400; } 
.scBarWrapper .tabItem.active button { background-color: var(--gray600); color: var(--txtBg100); } 
.scBarWrapper .tabItem button::before { display: none; } 



/* -- Tooltip -------------------- */
.tooltipBox { position: fixed; background-color: #fff; border: 1px solid #ddd; padding: 24px 32px; border-radius: 24px; box-shadow: 4px 4px 20px rgba(0,0,0,0.15); z-index: 9999; display: none; min-width: 240px; } 
.tooltipBox::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); display: inline-block; width: 18px; height: 16px; background: url('/resources/static/shared/images/ico_tail.png')no-repeat center center; } 
.tooltipBox .tooltipTitle { display: flex; align-items: center; justify-content: flex-start; column-gap: 4px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: solid 1px var(--gray400); } 



/* -- List -------------------- */
.listBullet { font-size:16px; line-height:1.625; color:var(--txtBg600); } 
.listBullet > li { position: relative; padding-left: 13px; } 
.listBullet > li::before { display:inline-block; position: absolute; top: 10px; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: currentColor; content:''; } 
.listBullet li.t3::before { top: 14px; } 
.listBullet li.t6::before { top: 14px; } 
.listBullet li.t7::before { top: 10px; } 
.listBullet li.t8::before { top: 10px; } 
.listBullet li + li { margin-top: 8px; } 

.listNumber { list-style: none; counter-reset: item; padding-left: 0; font-size:16px; line-height:1.625; } 
.listNumber li { position: relative; counter-increment: item; padding-left: 28px; } 
.listNumber li + li { margin-top: 8px; } 
.listNumber li::before { position: absolute; content: counter(item) ". "; left: 0; } 
.listNumber .num { display:inline-block; margin-right: 16px; } 



/* -- Message with Icon -------------------- */
.messageWrap { display: flex; flex-direction: column; justify-content: center; row-gap: 16px; text-align: center; background: var(--txtBg200); padding: 24px; } 
.messageWrap .message { font-size:20px; line-height:1.6; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 8px; font-weight: 700; } 
.messageWrap .message > [class^="ico"] { display: inline-block; width: 48px; height: 48px; } 
.messageWrap .message > [class^="ico"] .icon { width: 100%; height: 100%; } 
.messageWrap .message > [class^="ico"] .icon * { stroke: inherit; } 
.messageWrap .message .text { display: block; } 
.messageWrap .subText { font-size:18px; line-height:1.56; } 



/* -- Modal -------------------- */
.modalOverlay { display: none; /* 기본은 숨김 */
 position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 1000; } 
.modalOverlay.active { display: flex; } 
.modal { background: #fff; width: 90%; max-width: 560px; border-radius: 24px; overflow: hidden; animation: fadeIn 0.3s ease; } 
.modalHeader { position: relative; padding: 24px 32px; background: var(--primary600); font-weight: 700; font-size:28px; line-height:1.357; color: var(--txtBg100); } 
.modalHeader .btnModalClose { position: absolute; top: 27px; right: 32px; width: 32px; height: 32px; cursor: pointer; fill: var(--txtBg100); stroke: var(--txtBg100); font-size: 0; } 
.modalHeader .btnModalClose svg { width: 100%; height: 100%; } 
.modalHeader .btnModalClose * { fill: inherit; stroke: inherit; } 
.modalBody { padding: 24px 32px 8px; text-align: center; } 
.modalFooter { display: flex; justify-content: center; column-gap: 8px; padding: 24px 32px; } 
@keyframes fadeIn { 
 from { opacity: 0; transform: translateY(-10px); } 
 to { opacity: 1; transform: translateY(0); } 
 }



/* -- Mobile responsive -------------------- */
@media (max-width: 1024px) { /* -- nodata(M) -------------------- */
    .noData { padding: 8px 0; font-size:16px; line-height:1.625; } 


    /* -- Accordion(M) -------------------- */
    .accordionWrap { } 
    .selectWrapper { width: 100%; flex-shrink: 0; } 
    .selectWrapper.full { width: 100%; flex-shrink: 0; } 
    .selectWrapper select { width: 100%; height: 40px; padding: 8px 56px 8px 24px; background-position:calc(100% - 16px) 50%; font-size:14px; line-height:1.57; letter-spacing: -0.05em; background-size: 16px;} 
    .accordionWrap .accordion .text { font-size:16px; line-height:1.625; } 
    .accordionWrap .accordionPanel .panel { font-size:14px; line-height:1.57; } 


    /* -- Buttons(M) -------------------- */
    .btn [class^="ico"] { width: 18px; height: 18px; } 
    .btnTxt [class^="ico"] { width: 12px; height: 12px; } 


    /* -- Breadcrumbs(M) -------------------- */
    .breadcrumbs { justify-content: flex-start; padding-left: 16px; } 


    /* -- Checkbox(M) -------------------- */
    .checkbox { font-size: 12px; line-height:1.5; } 
    input[type="checkbox"].checkbox { position:relative; top:1px; left: 1px; } 
    input[type="checkbox"].checkbox::before { top: -1px; left: -1px; transform: translateY(0); } 


    /* -- Datepicker(M) -------------------- */
    .datepickrGroup { margin-right: 0; } 
    .datepickrGroup .datepickrWrap { width: 50%; } 
    .datepickrWrap input[type=text] { padding: 0 4px 0 8px; font-size:12px; line-height:1.5; letter-spacing: -0.5px; } 
    .datepickrWrap .btnCal { height: 40px; } 
    .datepickrWrap .btnCal [class^="ico"] { width: 18px; } 
    table .datepickrWrap { width: 114px; height: 40px; } 
    

    /* -- Input Text(M) -------------------- */
    input[type=text] { min-height: 34px; height: 40px; padding: 0 16px; font-size:14px; line-height:1.57; } 
    table .inputTextWrap { min-width: 100px; }  


    /* -- Radio(M) -------------------- */
    .radio { font-size:12px; line-height:1.5; flex-shrink: 0; } 


    /* -- Tab(M) -------------------- */
    .tabWrapper { position: relative; } 
    .tabList { overflow-x: auto; overflow-y: hidden; width: 100vw; margin: 0 -16px; padding: 0 32px 0 16px; } 
    .tabList::before { position: absolute; top: 0; right: -16px; z-index: 10; display: inline-block; width: 32px; height: 56px; background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100%); pointer-events: none; content: ''; } 
    .tabItem button { font-size:16px; line-height:1.625; padding: 12px 8px; } 


    /* -- Paging(M) -------------------- */
    .paging { } 
    .paging button { min-width: 40px; width: 40px; height: 40px; border-radius: 4px; } 
    .paging .active { } 
    .paging .btnFirst, 
    .paging .btnLast, 
    .paging .btnPrev, 
    .paging .btnNext { width: 16px; height: 16px; } 
    .paging .btnFirst svg, 
    .paging .btnLast svg, 
    .paging .btnPrev svg, 
    .paging .btnNext svg { height: 100%; } 


    /* -- Pop(M) -------------------- */
    .popWrap .popHeader { padding: 8px 16px; } 
    .popWrap .popHeader h2 { font-size:24px; line-height:1.58; } 
    .popWrap .popBody { padding: 16px; } 


    /* -- Textarea -------------------- */
    .textareaWrapper textarea::placeholder { font-size:12px; line-height:1.5; } 


    /* -- Upload File Button(M) -------------------- */
    .fileUpload { height: 40px; } 
    .fileUpload .btnFile { width: 98px;font-size: 14px; margin-right: var(--spacing1); } 
    .fileUpload .fileName { min-width: unset; padding: 0 5px; font-size:11px; line-height: 40px; } 
    .fileUpload .btnDelete { width: 44px; }  


    /* -- Buttons(M) -------------------- */
    .btn { height: 40px; font-size:14px; line-height:1.57; } 


    /* -- Table(M) -------------------- */
    .tableWrap { overflow-x: auto; width: calc(100vw - 32px); /*padding-bottom: 12px; */ } 
    .tableWrap .sub { font-size: 11px; line-height: 1.45; white-space: wrap; word-break: keep-all; } 
    .tableBasic th { font-size:12px; line-height:1.5; } 
    .tableBasic td { font-size:12px; line-height:1.5; } 
    .fullConts.subPage .tableBasic th, 
    .fullConts.subPage .tableBasic td { font-size:12px; line-height:1.5; } 
    .tableBasic th, 
    .tableBasic td { height: 34px; padding: 8px 16px; } 
    .tableBasic .inputTextWrap { flex: 1; width: 100%; max-width: 400px; } 
    .tableBasic .inputTextWrap.full { max-width: 100%; } 
    .tableBasic input[type=text]::placeholder { font-size:12px; line-height:1.5; } 
    .formTableVertical th { font-size:12px; line-height:1.5; word-break: keep-all; } 
    .formTableVertical td { font-size:12px; line-height:1.5; } 
    .formTableVertical th, 
    .formTableVertical td { height: 34px; padding: 8px 16px; } 
    .formTableVertical .inputTextWrap { flex-grow: 1; width: 100%; max-width: 400px; } 
    .formTableVertical .inputTextWrap.full { max-width: 100%; } 
    .formTableVertical input[type=text]::placeholder { font-size:12px; line-height:1.5; } 

    .tableWrap.hasXScroll,
    .popWrap .tableWrap.hasXScroll { width: calc(100vw - 16px * 2); padding-bottom: 13px; } 
    .tableWrap.hasXScroll .tableBasic { margin-bottom: 0 !important; } 
    /* .tableWrap::-webkit-scrollbar { height: 4px; }  */
    .tableWrap::-webkit-scrollbar { height: 15px; }


    /* -- Tab(M) -------------------- */
    .scBarWrapper .tabItem button { width: 76px; min-width:fit-content;min-height: 34px; font-size:12px; line-height:1.5; letter-spacing: -0.5px; } 

    
    /* -- Tooltip(M) -------------------- */
    .tooltipBox { padding: 24px; } 
    .tooltipBox .tooltipTitle { font-size:16px; line-height:1.625; } 
    .tooltipBox .listBullet > li::before { top: 6px; } 


    /* -- List(M) -------------------- */
    .listBullet { font-size: 12px; line-height: 1.5; } 
    .listBullet > li { font-size: 12px;padding-left: 8px; } 
    .listBullet > li::before { top: 7px !important; } 

    .listNumber { font-size:12px; line-height:1.5; } 
    .listNumber li { padding-left: 16px; } 


    /* -- Message with Icon(M) -------------------- */
    .messageWrap { row-gap: 8px; } 
    .messageWrap .message { row-gap: 8px; font-size:16px; line-height:1.625; } 
    .messageWrap .subText { font-size:12px; line-height:1.5; } 


    /* -- Modal(M) -------------------- */
    .modalOverlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 1000; } 
    .modalOverlay.active { display: flex; } 
    .modal { background: #fff; width: 91.11%; max-width: 560px; border-radius: 24px; overflow: hidden; animation: fadeIn 0.3s ease; } 
    .modalHeader { padding: 16px 24px; font-size:24px; line-height:1.58; } 
    .modalHeader .btnModalClose { top:23px; right: 24px; width: 24px; height: 24px; } 
    .modalBody { padding: 24px 24px 8px; } 
    .modalBody .t6 { font-size: 16px; line-height:1.625; } 
    .modalBody .t4 { font-size: 20px; line-height:1.6; } 
    .modalBody .mtSp4 { margin-top: 24px; } 
    .modalBody .mbSp2 { margin-bottom: 4px; } 
    .modalBody .mbSp4 { margin-bottom: 8px; } 
    .modalFooter { padding: 8px 24px 24px; } 
    @keyframes fadeIn { 
        from { opacity: 0; transform: translateY(-10px); } 
        to { opacity: 1; transform: translateY(0); } 
    } 
 }