@charset "utf-8";

/*
 * Jung Common Responsive CSS v3.0
 * Mobile first / breakpoint: 768px, 1024px
 * Project-specific colors and layouts should override the variables below.
 */

:root {
  --color-primary: #1687a7;
  --color-primary-hover: #106b85;
  --color-text: #25313c;
  --color-muted: #667784;
  --color-border: #dce3e8;
  --color-surface: #fff;
  --color-bg: #f4f7f9;
  --color-danger: #c83b46;
  --focus-ring: 0 0 0 3px rgb(22 135 167 / 25%);
  --radius-sm: 6px;
  --radius-md: 12px;
  --shadow-card: 0 8px 24px rgb(34 51 63 / 8%);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --container-width: 1200px;
}

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

html {
  color: var(--color-text);
  background: var(--color-bg);
  font-family: Pretendard, Poppins, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body { margin: 0; min-width: 320px; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { color: inherit; font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; text-decoration: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* page */
.container {
  width: min(100% - 2rem, var(--container-width));
  margin-inline: auto;
}

.section { padding-block: var(--space-5); }
.section + .section { border-top: 1px solid var(--color-border); }

/*
 * Core layout
 * Mobile: vertical cards
 * Tablet and up: horizontal cards
 */
.conBox {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--con-gap, var(--space-4));
}

.conCard {
  min-width: 0;
  flex: 1 1 0;
}

.conBox--wrap { flex-wrap: wrap; }
.conBox--no-gap { --con-gap: 0; }
.conBox--gap-sm { --con-gap: var(--space-2); }
.conBox--gap-lg { --con-gap: var(--space-5); }
.conBox--center { align-items: center; justify-content: center; }
.conBox--stretch { align-items: stretch; }
.conBox--always-row { flex-direction: row; }
.conBox--reverse-mobile { flex-direction: column-reverse; }

.conCard--auto { flex: 0 0 auto; }
.conCard--full { flex: 0 0 100%; }

/* reusable surface */
.card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* typography */
.title { margin: 0 0 var(--space-2); font-size: clamp(1.5rem, 5vw, 2.25rem); line-height: 1.2; }
.subTitle { margin: 0 0 var(--space-3); font-size: 1.125rem; line-height: 1.35; }
.description { margin: 0; color: var(--color-muted); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-muted); }
.text-danger { color: var(--color-danger); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* forms */
.formGroup { display: grid; gap: var(--space-2); }
.formLabel { font-size: .875rem; font-weight: 600; }
.formLabel .required { color: var(--color-danger); }
.formControl {
  width: 100%;
  min-height: 44px;
  padding: .625rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.formControl::placeholder { color: #8b98a2; }
.formControl:focus { border-color: var(--color-primary); outline: none; box-shadow: var(--focus-ring); }
textarea.formControl { min-height: 120px; resize: vertical; }

/* buttons */
.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: .625rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { background: var(--color-primary-hover); }
.btn:active { transform: translateY(1px); }
.btn--outline { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text); }
.btn--outline:hover { background: var(--color-bg); }
.btn--danger { background: var(--color-danger); }
.btn--block { width: 100%; }

/* responsive table: wrap with .tableScroll */
.tableScroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--color-surface); }
.table th, .table td { padding: .75rem; border-bottom: 1px solid var(--color-border); text-align: left; }
.table th { background: var(--color-bg); font-size: .875rem; white-space: nowrap; }

/* small utilities */
.hidden { display: none !important; }
.w100 { width: 100% !important; }
.m0 { margin: 0 !important; }
.mt2 { margin-top: var(--space-2) !important; }
.mt4 { margin-top: var(--space-4) !important; }
.mb2 { margin-bottom: var(--space-2) !important; }
.mb4 { margin-bottom: var(--space-4) !important; }
.p0 { padding: 0 !important; }
.p4 { padding: var(--space-4) !important; }

@media (min-width: 768px) {
  .section { padding-block: var(--space-6); }
  .conBox { flex-direction: row; }
  .conBox--reverse-mobile { flex-direction: row; }
  .conBox--vertical { flex-direction: column; }
  .conCard--25 { flex: 0 0 calc(25% - var(--con-gap, var(--space-4))); }
  .conCard--33 { flex: 0 0 calc(33.333% - var(--con-gap, var(--space-4))); }
  .conCard--50 { flex: 0 0 calc(50% - (var(--con-gap, var(--space-4)) / 2)); }
  .btn--block-mobile { width: auto; }
}

@media (min-width: 1024px) {
  .card { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}



/* custom */
.radius0  { --radius-sm: 0;    --radius-md: 0; }
.radius5  { --radius-sm: 5px;  --radius-md: 5px; }
.radius10 { --radius-sm: 10px; --radius-md: 10px; }
.radius15 { --radius-sm: 15px; --radius-md: 15px; }
.radius20 { --radius-sm: 20px; --radius-md: 20px; }
.radius25 { --radius-sm: 25px; --radius-md: 25px; }
.radius30 { --radius-sm: 30px; --radius-md: 30px; }
.radius35 { --radius-sm: 35px; --radius-md: 35px; }
.radius40 { --radius-sm: 40px; --radius-md: 40px; }
.radius45 { --radius-sm: 45px; --radius-md: 45px; }
.radius50 { --radius-sm: 50px; --radius-md: 50px; }

/* size */
.size10{width:10px;height:10px;display:inline-block;min-width:10px;vertical-align: middle;}
.size11{width:11px;height:11px;display:inline-block;min-width:11px;vertical-align: middle;}
.size12{width:12px;height:12px;display:inline-block;min-width:12px;vertical-align: middle;}
.size13{width:13px;height:13px;display:inline-block;min-width:13px;vertical-align: middle;}
.size14{width:14px;height:14px;display:inline-block;min-width:14px;vertical-align: middle;}
.size15{width:15px;height:15px;display:inline-block;min-width:15px;vertical-align: middle;}
.size20{width:20px;height:20px;display:inline-block;min-width:20px;vertical-align: middle;}
.size23{width:23px;height:23px;display:inline-block;min-width:23px;vertical-align: middle;}
.size25{width:25px;height:25px;display:inline-block;min-width:25px;vertical-align: middle;}
.size30{width:30px;height:30px;display:inline-block;min-width:30px;vertical-align: middle;}
.size35{width:35px;height:35px;display:inline-block;min-width:35px;vertical-align: middle;}
.size40{width:40px;height:40px;display:inline-block;min-width:40px;vertical-align: middle;}
.size45{width:45px;height:45px;display:inline-block;min-width:45px;vertical-align: middle;}
.size50{width:50px;height:50px;display:inline-block;min-width:50px;vertical-align: middle;}
.size60{width:60px;height:60px;display:inline-block;min-width:60px;vertical-align: middle;}
.size70{width:70px;height:70px;display:inline-block;min-width:70px;vertical-align: middle;}
.size80{width:80px;height:80px;display:inline-block;min-width:80px;vertical-align: middle;}
.size90{width:90px;height:90px;display:inline-block;min-width:90px;vertical-align: middle;}
.size100{width:100px;height:100px;display:inline-block;min-width:100px;vertical-align: middle;}
.size150{width:150px;height:150px;display:inline-block;min-width:150px;vertical-align: middle;}
.size200{width:200px;height:200px;display:inline-block;min-width:200px;vertical-align: middle;}


/* jungAjaxPop css */
#jungLoader{width:100%;height:100vh;position:fixed;left:0px;top:0px;z-index:999;text-align:Center;padding-top:30%;background:rgba(88, 88, 88, 0.0);
	-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}
/* loader  */
.loader, .loader:after {display:block;;border-radius: 50%;width: 4em;height: 4em;z-index:8;}
.loader {margin: 60px auto;font-size: 10px;position: relative;text-indent: -9999em;-webkit-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;animation: load8 1.1s infinite linear;
	border-left: 0.6em solid #ddd;
	border-top: 0.6em solid rgba(255, 255, 255, 0.4);border-right: 0.6em solid rgba(255, 255, 255, 0.4); border-bottom: 0.6em solid rgba(255, 255, 255, 0.4);
}
@-webkit-keyframes load8 {
	0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {   -webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes load8 {
	0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
/* ***************************** */
/* alertBox css */
div#alertBox{position:absolute;z-index:999999;height:100%;width:100%;}
div#alertBox .alertBg , .alertBg{position:fixed;width:100%;height:100vh;background:rgba(0, 0, 0, 0.3);top:0;left:0;z-index:50;}
div#alertBox .alertCon{position:relative;background:white;z-index:55;border:0px solid #888;border-radius:10px;padding:20px;}
div#alertBox .alertCon #jungAlertBoxMsg{word-break:break-all;/*자동으로 줄 바꿈 */color:#444;}

/* confirmBox css */
div#confirmBox{position:absolute;z-index:999999;}
div#confirmBox .closePopIcon{position:absolute;right:5px;top:0px;}
div#confirmBox .alertBg , .popBg{position:fixed;width:100%;height:100vh;background:rgba(0, 0, 0, 0.7);top:0;left:0;z-index:999;}
div#confirmBox .alertCon , .popCon{position:relative;background:white;z-index:9999;border:1px solid #888;border-radius:10px;padding:10px;min-width:250px;}
div#confirmBox #confirmBoxMark{height:50px;}
div#confirmBox #confirmMsg{color:#000;line-height:1.2;margin-bottom:10px;}
div#confirmBox .confirmBtnOk{color:#fff;border-radius:5px;background:#2ab2da;border:0px;cursor:pointer;margin-right:5px;}
div#confirmBox .confirmBtnCancel{color:#fff;border-radius:5px;background:#000;border:0px;cursor:pointer;}

div.jungPopHtml{position:absolute;margin:0 auto;width:100%;text-align:Center;z-index:9;}

img.icon_alert{width:50px;height:50px;}
.svgRed{filter:  invert(11%) sepia(91%) saturate(6755%) hue-rotate(1deg) brightness(115%) contrast(115%);opacity:0.7;}
.svgGreen{filter: invert(67%) sepia(85%) saturate(4281%) hue-rotate(86deg) brightness(97%) contrast(130%);;opacity:0.7;}
.svgYellow{filter: invert(89%) sepia(28%) saturate(3319%) hue-rotate(359deg) brightness(103%) contrast(100%);opacity:0.7;}

.jung-confirm-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5);
    display: flex; justify-content: center; align-items: center; z-index: 9999; }
.jung-confirm-box { background: white; border-radius: 8px; padding: 20px 30px 20px 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    max-width: 320px; text-align: center; }
.jung-confirm-msg { margin-bottom: 15px; font-size: 0.9rem;  }
.jung-confirm-btns button { margin: 0 10px; padding: 6px 14px; font-size: 13px; cursor: pointer; border:0px; }


/*icon */
.icon { background-color: currentColor; mask-repeat: no-repeat; mask-position: center;
	mask-size: 60% 60%;	-webkit-mask-repeat: no-repeat;	-webkit-mask-position: center;-webkit-mask-size: 60% 60%; }
.icon_f { background-color: currentColor; mask-repeat: no-repeat; mask-position: center;
		mask-size: 100% 100%;	-webkit-mask-repeat: no-repeat;	-webkit-mask-position: center;-webkit-mask-size: 100% 100%; }

.jungModal { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%) translateY(20px); background: #333;
  color: #fff; padding: 12px 24px 8px 24px; border-radius: 10px; font-size: 0.9rem; opacity: 0; z-index: 9999; transition: opacity 0.3s ease, transform 0.3s ease; }
.jungModal.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.modalContent { display: inline-flex; align-items: center; gap: 4px; }
.jungModal.err { background-color: #e74c3c; }   /* 빨강 */
.jungModal.war { background-color: #f39c12; }    /* 노랑 */
.jungModal.suc { background-color: #2ecc71; } /* 초록 */

.icon_check { mask-image: url('/img/svg/icon_check.svg'); -webkit-mask-image: url('/img/svg/icon_check.svg'); }
.icon_question { mask-image: url('/img/svg/icon_question.svg');	-webkit-mask-image: url('/img/svg/icon_question.svg'); }
.icon_triangle { mask-image: url('/img/svg/icon_triangle.svg');	-webkit-mask-image: url('/img/svg/icon_triangle.svg'); }


/* etc */
.m1{margin:1px !important;}.m2{margin:2px !important;}.m3{margin:3px !important;}.m4{margin:4px !important;}.m5{margin:5px !important;}.m10{margin:10px !important;}.m15{margin:15px !important;}.m20{margin:20px !important;}.m25{margin:25px;}.m30{margin:30px !important;}.m40{margin:40px !important;}.m50{margin:50px !important;}
.ml0{margin-left:0px !important;}.ml1{margin-left:1px !important;}.ml2{margin-left:2px !important;}.ml3{margin-left:3px !important;}.ml4{margin-left:4px !important;}.ml5{margin-left:5px;}.ml10{margin-left:10px !important;}.ml15{margin-left:15px !important;}.ml20{margin-left:20px !important;}.ml30{margin-left:30px !important;}.ml40{margin-left:40px !important;}.ml50{margin-left:50px !important;}
.mr0{margin-right:0px !important;}.mr1{margin-right:1px !important;}.mr2{margin-right:2px !important;}.mr3{margin-right:3px !important;}.mr4{margin-right:4px !important;}.mr5{margin-right:5px;}.mr10{margin-right:10px !important;}.mr15{margin-right:15px !important;}.mr20{margin-right:20px !important;}.mr30{margin-right:30px !important;}.mr40{margin-right:40px !important;}.mr50{margin-right:50px !important;}
.mt0{margin-top:0px !important;}.mt1{margin-top:1px !important;}.mt2{margin-top:2px !important;}.mt3{margin-top:3px !important;}.mt4{margin-top:4px !important;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt15{margin-top:15px !important;}.mt20{margin-top:20px !important;}.mt30{margin-top:30px !important;}.mt40{margin-top:40px !important;}.mt50{margin-top:50px !important;}
.mb0{margin-bottom:0px !important;}.mb1{margin-bottom:1px !important;}.mb2{margin-bottom:2px !important;}.mb3{margin-bottom:3px !important;}.mb4{margin-bottom:4px !important;}.mb5{margin-bottom:5px !important;}.mb10{margin-bottom:10px !important;}.mb15{margin-bottom:15px !important;}.mb20{margin-bottom:20px !important;}.mb30{margin-bottom:30px !important;}.mb40{margin-bottom:40px !important;}.mb50{margin-bottom:50px !important;}
.p1{padding:1px !important;}.p2{padding:2px !important;}.p3{padding:3px !important;}.p4{padding:4px !important;}.p5{padding:5px !important;}.p10{padding:10px !important;}.p15{padding:15px !important;}.p20{padding:20px !important;}.p30{padding:30px !important;}.p40{padding:40px !important;}.p15{padding:15px !important;}.p20{padding:20px !important;}.p30{padding:30px !important;}.p40{padding:40px !important;}.p50{padding:50px !important;}
.pl1{padding-left:1px !important;}.pl2{padding-left:2px !important;}.pl3{padding-left:3px !important;}.pl4{padding-left:4px !important;}.pl5{padding-left:5px !important;}
.pl10{padding-left:10px !important;}.pl20{padding-left:20px !important;}.pl30{padding-left:30px !important;}.pl40{padding-left:40px !important;}.pl50{padding-left:50px !important;}
.pr1{padding-right:1px !important;}.pr2{padding-right:2px !important;}.pr3{padding-right:3px !important;}.pr4{padding-right:4px !important;}.pr5{padding-right:5px !important;}
.pr10{padding-right:10px !important;}.pr20{padding-right:20px !important;}.pr30{padding-right:30px !important;}.pr40{padding-right:40px !important;}.pr50{padding-right:50px !important;}
.pt1{padding-top:1px !important;}.pt2{padding-top:2px !important;}.pt3{padding-top:3px !important;}.pt4{padding-top:4px !important;}.pt5{padding-top:5px !important;}
.pt10{padding-top:10px !important;}.pt20{padding-top:20px !important;}.pt30{padding-top:30px !important;}.pt40{padding-top:40px !important;}.pt50{padding-top:50px !important;}
.pb1{padding-bottom:1px !important;}.pb2{padding-bottom:2px !important;}.pb3{padding-bottom:3px !important;}.pb4{padding-bottom:4px !important;}.pb5{padding-bottom:5px !important;}
.pb10{padding-bottom:10px !important;}.pb20{padding-bottom:20px !important;}.pb30{padding-bottom:30px !important;}.pb40{padding-bottom:40px !important;}.pb50{padding-bottom:50px !important;}

.noP{padding:0px !important;}
.noM{margin:0px !important;}

/* color */
.white{color:#fff !important;}
.red{color:red !important;;}
.green{color:green !important;}
.blue{color:#2563eb !important; }
.light-blue{color:#60a5fa !important; }

.bgWhite{background:#fff !important;color:#000;border:1px solid #ddd !important;}
.bgBlack{background:#000 !important;;color:#fff;}
.bgRed{background:red !important;;color:#fff;}
.bgYellow{background:#e9db45 !important;;color:#fff;}
.bgOrange{background:#e99645 !important;;color:#fff;}
.bgGreen{background:#28a745 !important;;color:#fff;}
.bgBlue{background:#2ab2da !important;;color:#fff;}


.fw1{font-weight:100 !important;}.fw2{font-weight:200 !important;}.fw3{font-weight:300 !important;}.fw4{font-weight:400 !important;}
.fw5{font-weight:500 !important;}.fw6{font-weight:600 !important;}.fw7{font-weight:700 !important;}.fw8{font-weight:800 !important;}