@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; }
ul,li{list-style: none;padding:0;margin:0px;}
html {
	height:100vh;
  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;height:100vh; font-size:14px;}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { color: inherit; font: inherit; }
h1, h2, h3, h4, h5, h6, p{margin:0;padding:0;border:0;}
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
 */
 .conBoxV{display:flex;flex-direction:column;flex-grow: 1;}
.conBox {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--con-gap, var(--space-4));
}
.conCardV{flex-direction: column;flex-grow: 1;}
.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); }
/* 기존 .formControl과 함께 사용 */
.formControl--soft { min-height: 50px; padding: .75rem .875rem; border-radius: 10px;
  background: var(--color-bg); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.formControl--soft:focus { background: var(--color-surface); }


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:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.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%; }

.jungBtnZ {
    transition: transform 0.2s ease;
    cursor: pointer;
    border: 0px;
}
.btnTrans {
    background-color: transparent;
    border: 0px;
    cursor: pointer;
}


/* 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; }

#dockerContainerList .dockerImageText {
    display: block;
    width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Docker CPU / Memory 게이지 */
#dockerContainerList .dockerUsage {
    width: 160px;
    --usage-fill: linear-gradient(90deg, #bfdbfe, #60a5fa);
}

#dockerContainerList .dockerUsage[data-type="memory"] {
    --usage-fill: linear-gradient(90deg, #a7f3d0, #34d399);
}

#dockerContainerList .dockerUsage[data-level="warn"] {
    --usage-fill: linear-gradient(90deg, #fde68a, #fbbf24);
}

#dockerContainerList .dockerUsage[data-level="high"] {
    --usage-fill: linear-gradient(90deg, #fecaca, #f87171);
}

#dockerContainerList .dockerUsageRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

#dockerContainerList .dockerUsageTrack {
    position: relative;
    height: 24px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2f7;
    box-shadow: inset 0 1px 3px rgb(15 23 42 / 8%);
}

#dockerContainerList .dockerUsageFill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--usage-fill);
    border-radius: inherit;
}

#dockerContainerList .dockerUsagePercent {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #25313c;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#dockerContainerList .dockerUsageLimit {
    white-space: nowrap;
    color: var(--color-text);
    font-size: 11px;
    font-weight: 600;
}

#dockerContainerList .dockerUsageDetail {
    margin-top: 6px;
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

/* small utilities */
.hidden { display: none !important; }
.w100 { width: 100% !important; }




/* 기본: 1023px 이하 모바일 */

.row { display: flex; flex-wrap: wrap; }
.col-2, .col-3, .col-4, .col-6, .col-9, .col-12 {
    width: 100%;
}

#page-location { font-size: 0.8rem; padding: 5px; }

/* 1024px 이상 PC */
@media (min-width: 1024px) {
    .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; }
    .card { padding: var(--space-5); }

    .col-2 { width: 20%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.333%; }
    .col-6 { width: 50%; }
    .col-9 { width: 75%; }
    .col-12 { width: 100%; }

    #page-location { font-size: 0.9rem; padding: 10px 15px; }
}





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


.input-wrap { position: relative; min-width: 0; width: 100%; }
.input-wrap > .formControl { padding-right: calc(44px * var(--input-actions, 1) + 8px); }
.input-actions { position: absolute; top: 0; right: 4px; bottom: 0; display: flex; align-items: center; }
.input-action { display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-muted); cursor: pointer;
}
.input-action:hover { color: var(--color-text); background: rgb(37 49 60 / 5%); }
.input-action:disabled { opacity: .4; cursor: not-allowed; }
.input-action[hidden] { display: none; }
.input-action svg { width: 18px; height: 18px; pointer-events: none; }

.switch { position: relative; display: inline-block; width: 43px; height: 21px; }
.switch input { opacity: 0; width: 0; height: 0; }
input:checked + .slider { background-color: #2ab2da; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; transition: 0.3s; border-radius: 34px; }
input:checked + .slider::before { transform: translateX(22px); }
.slider::before { position: absolute; content: ""; height: 15px; width: 15px; left: 3px;
    top: 3px; background-color: white; transition: 0.3s; border-radius: 50%; }

/* 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;}


/* align-items: center;justify-content: center; */
.hAlign{display:flex;text-align:center !important;justify-content: center;}
.vAlign{display:flex;vertical-align:middle !important;align-items: center;}
.vAlignC{vertical-align:middle !important; align-items: center;} .vAlignT{vertical-align:top !important;align-items: start;} .vAlignB{vertical-align:bottom !important;align-items: flex-end;}
.hAlignL{text-align:left !important;justify-content:flex-start;} .hAlignR{text-align:right !important;justify-content:flex-end;} .hAlignC{text-align:center !important;justify-content: center !important;}


/* 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; }


.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_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%;
}
.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'); }


/* jungHtml.js */
dialog.jung-popup {
  width: min(var(--popup-width, 400px), calc(100% - 2rem));
  max-width: none; max-height: calc(100dvh - 2rem); margin: auto;
  padding: 0; overflow: auto; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface);
  color: var(--color-text); box-shadow: var(--shadow-card);
}
dialog.jung-popup::backdrop { background: rgb(0 0 0 / 50%); }
.jung-popup-header { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--color-border);
}
.jung-popup-title { margin: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
.jung-popup-close { flex: 0 0 auto; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent;
}
.jung-popup-close:hover { background: var(--color-bg); }
.jung-popup-body { padding: 1rem; }

/* font-size */
.fs07{font-size:0.7rem !important;}.fs08{font-size:0.8rem !important;}.fs09{font-size:0.9rem !important;}.fs10{font-size:1.0rem !important;}
.fs11{font-size:1.1rem !important;}.fs12{font-size:1.2rem !important;}.fs13{font-size:1.3rem !important;}.fs14{font-size:1.4rem !important;}
.fs15{font-size:1.5rem !important;}.fs16{font-size:1.6rem !important;}.fs17{font-size:1.7rem !important;}.fs18{font-size:1.8rem !important;}
.fs19{font-size:1.9rem !important;}.fs20{font-size:2.0rem !important;}.fs30{font-size:3.0rem !important;}.fs40{font-size:4.0rem !important;}

.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;}

.ls01{letter-spacing:0.1px !important;}.ls02{letter-spacing:0.2px !important;}.ls03{letter-spacing:0.3px !important;}
.ls04{letter-spacing:0.4px !important;}.ls05{letter-spacing:0.5px !important;}.ls0{letter-spacing:0px !important;}
.ls-01{letter-spacing:-0.1px !important;}.ls-02{letter-spacing:-0.2px !important;}.ls-03{letter-spacing:-0.3px !important;}
.ls-04{letter-spacing:-0.4px !important;}.ls-05{letter-spacing:-0.5px !important;}


.t-opacity1 { --tw-text-opacity: 0.1 !important; } .t-opacity2 { --tw-text-opacity: 0.2 !important; } .t-opacity3 { --tw-text-opacity: 0.3 !important; }
.t-opacity4 { --tw-text-opacity: 0.4 !important; } .t-opacity5 { --tw-text-opacity: 0.5 !important; } .t-opacity6 { --tw-text-opacity: 0.6 !important; }
.t-opacity7 { --tw-text-opacity: 0.7 !important; } .t-opacity8 { --tw-text-opacity: 0.8 !important; } .t-opacity9 { --tw-text-opacity: 0.9 !important; }
.t-opacity10 { --tw-text-opacity: 1 !important; }

.opacity1{ opacity : 0.1 !important;}.opacity2{ opacity : 0.2 !important;}.opacity3{ opacity : 0.3 !important;}.opacity4{ opacity : 0.4 !important;}
.opacity5{ opacity : 0.5 !important;}.opacity6{ opacity : 0.6 !important;}.opacity7{ opacity : 0.7 !important;}.opacity8{ opacity : 0.8 !important;}
.opacity9{ opacity : 0.9 !important;}.opacity10{ opacity : 1 !important;}

.red{color:red !important;}
.blue{--tw-text-opacity: 1; color:rgb(42 178 218 / var(--tw-text-opacity)); }
.darkGray{--tw-text-opacity: 1; color: rgb(136 136 136 / var(--tw-text-opacity)); }
.white{--tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); }

.bgBlack{background-color: #000;}

/* stroke color */
.stroke_white {filter: brightness(0) invert(1); /* 흰색 */}
.stroke_black {filter: brightness(0); /* 검정색 */}


.noP{padding:0px !important;}
.noM{margin:0px !important;}
.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;}

/* 페이지 위치 표시 (Breadcrumb) */
#page-location { font-size: 0.9rem; 
	font-weight: 400; background: rgba(34, 52, 72, 0.6); backdrop-filter: blur(6px);
	border-radius: 6px;	box-shadow: 0 2px 10px rgba(0,0,0,0.15); margin: 10px 0px 10px 0px;
	padding:10px 15px;	letter-spacing: 0.3px; }
/* breadcrumb 화살표 */
#page-location span { display: inline-block; margin: 0 6px;	color: var(--color-nav-mainLight); font-weight: 300; }
/* 현재 페이지 강조 */
#page-location .active { color: var(--color-nav-main); font-weight: 600; }
/* 링크 스타일 */
#page-location a { color: #ccc; text-decoration: none; transition: color 0.3s; }
#page-location a:hover { color: var(--color-nav-main); }

#layout_level::before{content:"(";margin:0 3px;}
#layout_level::after{content:")";margin:0 3px;}
/* 반응형 대응 */
@media (max-width: 768px) {
	#page-location { font-size: 0.8rem;	padding: 5px 5px;	}
}

.jungInput{display:block;width:100%;border:1px solid #ddd;padding:4px 6px;font-size:1.0rem;border-radius:3px;}
.jungInput:read-only{background-color:#ccc;cursor: inherit;outline:none;}
.jungInput:focus { border: 1px solid #2ab2da; outline: none; }

.jungTextarea{display:block;width:100%;border:1px solid #ddd;padding:10px 12px;font-size:1.0rem;border-radius:3px;resize: none;}
.jungSelectBox {border: 1px solid #bbb;background: #f5f5f5; font-size: 1rem; font-weight: 400; }
.jungSelectBox::-webkit-scrollbar { width: 0px; /* 스크롤 바 너비 */ }
.jungSelect {border: 1px solid #bbb;background: #f5f5f5; font-size: 1rem; font-weight: 400;padding:4px 6px;}