/* Legacy plugins for 2026 layout
 * - Global: modal / dim / loading / drop-backdrop (outside #baseBody)
 * - Scoped: remaining rules under #baseBody (header / footer / sitemap excluded)
 */

/* ui modal dialog */
/* 1/3 : 팝업준비 */
.ui-modal-ready .ui-modal.ps-bottom,
.ui-modal-ready .ui-modal.ps-page{position:fixed;}
.ui-modal-ready .ui-modal.ps-bottom .ui-modal-header,
.ui-modal-ready .ui-modal.ps-page .ui-modal-header{position:relative;}
.ui-modal-ready .ui-modal.ps-page .ui-modal-cont{padding:0 0 30px;}
.ui-modal-ready .ui-modal.ps-page .ui-modal-cont.type-progress{ padding-top:98px; }
.ui-modal-ready .ui-modal.ps-page .ui-modal-cont .ui-modal-progress{ position:relative; }
.ui-modal-ready .ui-m.fixed-bottom{padding-bottom:0 !important}

/* 2/3 : 팝업모션 */
.ui-modal-ing .ui-modal.ps-page{top:0}
.ui-modal-ing .ui-modal.ps-bottom .ui-modal-header,
.ui-modal-ing .ui-modal.ps-page .ui-modal-header{position:relative;}
.ui-modal-ing .ui-modal.ps-page .ui-modal-cont{padding:0 0 30px;}
.ui-modal-ing .ui-modal.ps-page .ui-modal-cont.type-progress{ padding-top:98px; }
.ui-modal-ing .ui-modal.ps-page .ui-modal-cont .ui-modal-progress{ position:relative; }
.ui-modal-ing .ui-m.fixed-bottom{padding-bottom:0 !important}

/* 3/3 : 팝업 완료 */
.ui-modal-end #baseWrap{position:fixed; }
.ui-modal-end .ui-modal.ps-page{position:absolute;}
.ui-modal-end .ui-modal.ps-page .ui-modal-header{position:fixed;}
.ui-modal-end .ui-modal.ps-page .ui-modal-cont{padding:60px 0 30px;}
.ui-modal-end .ui-modal.ps-page .ui-modal-cont.fixed-bottom{padding-bottom:95px;}
.ui-modal-end .ui-modal.ps-page .ui-modal-cont.type-progress{ padding-top:98px; }
.ui-modal-end .ui-modal.ps-page .ui-modal-cont .ui-modal-progress{ position:fixed; z-index:10;}
.ui-modal-end .ui-m.fixed-bottom{padding-bottom:0 !important}
.ui-modal-end .ui-modal.ps-page .ui-modal-footer{position:fixed; bottom:0; width:100%;}
.ui-modal-end .ui-modal.page-insuinfo .btn-close{position:fixed}
.ui-modal-end .ui-modal.page-insuinfo.type-full .ui-modal-cont{padding-top:0}

.ui-modal-ready .ui-fixed-top .ui-floating-wrap,
.ui-modal-ing .ui-fixed-top .ui-floating-wrap{position:relative !important; top:0 !important}
.ui-modal-ing .page-insuinfo-tit .ui-fixed-top .ui-modal-tit{padding:20px 0}
.ui-modal-ing .page-insuinfo-tit{height:326px}

/* 1/3 : 팝업준비 */
.ui-modal-ready.ui-d .ui-modal.ps-bottom,
.ui-modal-ready.ui-d .ui-modal.ps-page{position:fixed;}
.ui-modal-ready.ui-d .ui-modal.ps-bottom .ui-modal-header,
.ui-modal-ready.ui-d .ui-modal.ps-page .ui-modal-header{position:relative;}
.ui-modal-ready.ui-d .ui-modal.ps-page .ui-modal-cont{padding:0 0 30px;}
.ui-modal-ready.ui-d .ui-m.fixed-bottom{padding-bottom:0 !important}
.ui-modal-ready.ui-d body{overflow-y:scroll !important}

/* 2/3 : 팝업모션 */
.ui-modal-ing.ui-d.is-scroll #baseWrap{position:fixed; width:calc(100% - 17px)}
.ui-modal-ing.ui-d.is-scroll .view-aside-tooltip .tooltip-side{margin-right:17px}
/* .ui-modal-ing.ui-d.is-scroll .base-header{padding-right:17px} */
.ui-modal-ing.ui-d.is-scroll .wrap-top{margin-right:17px}
.ui-modal-ing.ui-d .ui-modal.ps-page{top:0}
.ui-modal-ing.ui-d .ui-modal.ps-bottom .ui-modal-header,
.ui-modal-ing.ui-d .ui-modal.ps-page .ui-modal-header{position:relative;}
.ui-modal-ing.ui-d .ui-modal.ps-page .ui-modal-cont{padding:0 0 30px;}
.ui-modal-ing.ui-d .ui-m.fixed-bottom{padding-bottom:0 !important}

/* 3/3 : 팝업 완료 */
.ui-modal-end.ui-d.is-scroll #baseWrap{position:fixed; width:calc(100% - 17px)}
.ui-modal-end.ui-d.is-scroll .view-aside-tooltip .tooltip-side{margin-right:17px}
/* .ui-modal-end.ui-d.is-scroll .base-header{padding-right:17px} */
.ui-modal-end.ui-d.is-scroll .wrap-top{margin-right:17px}
.ui-modal-end.ui-d .ui-modal.ps-page{position:absolute;}
.ui-modal-end.ui-d .ui-modal.ps-page .ui-modal-header{position:fixed;}
.ui-modal-end.ui-d .ui-modal.ps-page .ui-modal-cont{padding:70px 0 30px;}
.ui-modal-end.ui-d .ui-modal.ps-page .ui-modal-cont.fixed-bottom{padding-bottom:95px;}
.ui-modal-end.ui-d .ui-m.fixed-bottom{padding-bottom:0 !important}
.ui-modal-end.ui-d .ui-modal.ps-page .ui-modal-footer{position:fixed; bottom:0; width:100%;}



.dim,
.modal-backdrop{display:none; opacity:0; position:fixed; top:0; left:0; z-index:0; width:100%; height:200%; background-color:rgba(0,0,0,1);}
.modal-open{overflow:hidden; padding:0;}
.dim-dropdown .dim{display:block;opacity: 1;}
.dim-dropdown .base-body{z-index: auto;}
.ui-modal.type-large{ width:710px; }
.ui-modal.type-Xlarge{ width:1040px; }
.ui-modal.type-system,
.ui-modal.type-small{ width:344px; }
.ui-modal{display:none; opacity:0; position:fixed; z-index:1; height:auto; padding:0; }
.ui-modal.type-full{width:100%; height:100%; padding:0;}
.ui-modal.type-select .lb-radio,
.ui-modal.type-select .lb-check{margin:0; border-bottom:1px solid #ddd; padding:20px; width:100%;}
.ui-modal.ps-page{max-height:100%;}
.ui-modal.ps-bottom{padding:0; background:#fff; width:100%; }
.ui-modal.ps-bottom .ui-modal-cont.type-half{ max-height:400px !important;}
.ui-modal.ps-bottom .ui-modal-cont{max-height:300px; overflow-y:auto; z-index:2;}
.ui-modal.ps-bottom.type-select .ui-modal-cont{max-height:500px; overflow-y:auto; z-index:2;}
.ui-modal.ps-bottom .h2{font-size:22px;}
.ui-modal.ps-bottom .h2:first-child{margin-top:20px;}
.ui-modal.ps-page .ui-modal-cont{/*z-index:2;*/ overflow:hidden}
/* .ui-modal.ps-center {min-width:100%; }
.ui-modal.ps-center .wrap-inner { padding-left:25px; padding-right:25px; font-size:15px; } */

.ui-modal.show{display:block; left:50%;}
.ui-modal .btn-close{position:absolute; top:18px; right:18px; z-index:101;}
.ui-modal-wrap{width:100%; height:100%; position:relative; top:0; left:0; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,0.2);}
.ui-modal-header{width:100%; position:relative; border:0; top:0; left:0; z-index:1; height:50px; padding:25px 24px 0; max-height:100%; background:#fff}
.ui-modal-header .ui-modal-tit{font-size:18px; text-align:left;  width:100%; height:100%;  display:block; font-weight:500}
.ui-modal.type-large .ui-modal-cont .inner-wrap{ max-height:404px; }
.ui-modal.type-system .ui-modal-cont .inner-wrap,
.ui-modal.type-small .ui-modal-cont .inner-wrap{ max-height:104px; }
.ui-modal.type-system .ui-modal-cont{text-align:center;}
.ui-modal-cont{position:relative; top:0; left:0; height:auto; overflow:auto; width:100%; margin:0; padding:24px 24px 0; background-color:#fff;}
.ui-modal-footer{position:absolute; bottom:0; left:0; width:100%; z-index:3; text-align:center; margin:0; padding:24px 24px 50px; background:#fff;}
.ui-modal-footer .btn-txt{font-weight:400; font-size:14px; color:#ccc; border-bottom:0; margin-right:30px}
.ui-modal-footer .btn-wrap-fixed{position:relative;}
.ui-modal.ps-bottom .ui-modal-footer{position:relative}
.ui-modal.type-system .ui-modal-footer button{margin:0 4px}
.ui-modal-footer button{margin:0 5px }

.base-layer{transition:background-color 0.3s ease-in; top:0; left:0;}

.ui-modal.ps-page .ui-modal-header{padding:21px 70px 0; min-height:60px; z-index:3; background:#fff;}
.ui-modal.ps-page .ui-modal-header.row-2{ padding: 14px 70px; }
.ui-modal.ps-page .ui-modal-header .ui-modal-tit{text-align:center; font-size:15px;}
.ui-modal.ps-page .ui-modal-header .btn-txt{position:absolute; top:20px; color:#ccc; border-bottom:0;}
.ui-modal.ps-page .ui-modal-header .btn-txt.n1{left:32px;}
.ui-modal.ps-page .ui-modal-header .btn-txt.n2{right:18px;}
.ui-modal.ps-page .ui-modal-header .n2{right:20px}
.ui-modal.page-insuinfo .ui-modal-cont{background:#f1f1f1 !important;}

.page-insuinfo-tit .ui-fixed-top .ui-modal-tit{padding:20px 32px}

.page-insuinfo-tit,
.ui-modal.page-insuinfo .ui-modal-wrap .modal-header{background-color:#00358e; color:#fff; }
.ui-modal.page-insuinfo .ui-modal-wrap .modal-header{ z-index:3;width:100%; height:0;}
.ui-modal.page-insuinfo .ui-modal-wrap .modal-header .btn-txt{color:transparent; position:absolute; top:15px; right:32px}
.ui-modal.page-insuinfo .ui-modal-wrap .modal-header .btn-txt:before,
.ui-modal.page-insuinfo .ui-modal-wrap .modal-header .btn-txt:after{background:#fff;}

.page-insuinfo-tit{padding:67px 32px 26px; min-height:230px; width:100%;}
.page-insuinfo-tit .tit{font-size:25px; font-weight:700;}
.page-insuinfo-tit .state{display:inline-block; background-color:red; height:17px; font-size:12px; padding:2px 10px 0; text-align:center; line-height:1; border-radius:8px; vertical-align:middle; font-weight:400}
.page-insuinfo-tit .stocknum{font-size:15px; margin-top:18px}
.page-insuinfo-tit .btn-wrap{text-align:left; margin-top:50px}
.page-insuinfo-tit .btn-base{border-color:#779bd8; background-color:transparent; color:#fff; margin:0}
.page-insuinfo-tit .premium{color:#ff9d03; overflow:hidden; margin-top:25px;}
.page-insuinfo-tit .premium span{display:inline-block; font-size:16px;}
.page-insuinfo-tit .premium strong{display:block; float:right; font-size:30px; font-weight:700;}
.page-insuinfo-tit .premium strong em{vertical-align: middle;}
.page-insuinfo-tit .premium b{font-size: 16px; vertical-align: middle;}
.ui-modal.page-insuinfo .date{display:block; top:26px; font-weight:400; color:#84aae9; font-size:13px; position:absolute; left:32px;}
.ui-modal.page-insuinfo .btn-close:after,
.ui-modal.page-insuinfo .btn-close:before{background:#fff;}
#baseBody .ui-floating-wrap{transform: translateZ(0);}
#baseBody .ui-tab .ui-tab-btns{margin:0; padding: 0 32px;border-bottom: 1px solid #ccc;}


#baseBody .ui-tab.type-base .ui-tab-btns{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-lines: single; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: 10px 0 0;}
#baseBody .ui-tab.type-base .ui-tab-btn{ -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1; }

#baseBody .w-n2 .ui-tab-btn{width:50%  !important;}
#baseBody .w-n3 .ui-tab-btn{width:33.33%  !important;}
#baseBody .w-n3 .ui-tab-btn:nth-child(2){width:33.34%  !important;}

.modal-system .ui-modal-cont{text-align:center; padding:20px; font-size:16px;}
.modal-system .btn-wrap{margin-top:20px;}
.modal-system .ui-modal-cont:before{content:""; display:inline-block; width:50px; height:50px; background:url(/netiveUI/common/img/common/ico_modal.png) no-repeat -25px -25px; margin-bottom:20px;}

.modal-system .system-type-a:before{background-position:-25px -25px;}
.modal-system .system-type-b:before{background-position:-125px -25px;}
.modal-system .system-type-c:before{background-position:-225px -25px;}

/* Password modal (#modalPassword) — 2026 renewal
 * #baseLayer 에 렌더되므로 #baseBody 스코프 밖. 댓글 수정/삭제 비밀번호 확인용.
 */
 #modalPassword { width: 400px; max-width: calc(100vw - 32px); overflow: visible; color: var(--color-text-500); }
 #modalPassword .ui-modal-wrap { overflow: hidden; border-radius: 16px; box-shadow: 0 12px 40px rgba(19, 20, 22, 0.16); background-color: var(--color-solid-white); }
 #modalPassword .ui-modal-header { height: auto; padding: 32px 48px 0 32px; background-color: transparent; }
 #modalPassword .hide,
 #modalPassword .form-label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
 #modalPassword .ui-modal-tit.hide { position: static !important; display: block; width: auto !important; height: auto !important; overflow: visible; margin: 0 0 8px; clip: auto; clip-path: none; white-space: normal; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--color-text-600); }
 #modalPassword .ui-modal-header > p { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--color-text-400); word-break: keep-all; }
 #modalPassword .ui-modal-footer { position: absolute; top: 16px; right: 16px; bottom: auto; left: auto; z-index: 2; width: auto; margin: 0; padding: 0; text-align: right; background-color: transparent; }
 #modalPassword .ui-modal-footer button { margin: 0; }
 #modalPassword .btn-close { display: flex; position: relative; top: 0; right: 0; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background-color: transparent; cursor: pointer; }
 #modalPassword .btn-close:hover,
 #modalPassword .btn-close:focus-visible { background-color: var(--color-solid-100); }
 #modalPassword .btn-close::before,
 #modalPassword .btn-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; background-color: var(--color-text-500); }
 #modalPassword .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
 #modalPassword .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
 #modalPassword .ui-modal-cont { padding: 24px 32px 32px; background-color: transparent; }
 #modalPassword .inner-wrap { display: flex; flex-direction: column; gap: 16px; }
 #modalPassword .inner-wrap > div { display: flex; flex-direction: column; float: none; width: 100%; margin: 0; line-height: 1.4; }
 #modalPassword .inner-wrap p { float: none; width: auto; margin: 0 0 8px; font-size: 14px; font-weight: 600; text-align: left; color: var(--color-text-500); }
 #modalPassword .inp-base { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--color-line-200); border-radius: 8px; font-size: 16px; font-weight: 500; color: var(--color-text-600); background-color: var(--color-solid-100); -webkit-appearance: none; appearance: none; }
 #modalPassword .inp-base::placeholder { font-weight: 400; color: var(--color-text-300); }
 #modalPassword .inp-base:hover,
 #modalPassword .inp-base:focus-visible { border-color: var(--color-line-400); outline: none; }
 #modalPassword .btn-base-imp { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 24px; border: 0; border-radius: 8px; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--color-solid-white); background-color: var(--color-primary-400); cursor: pointer; transition: background-color 0.15s ease; }
 #modalPassword .btn-base-imp:hover,
 #modalPassword .btn-base-imp:focus-visible { border: 0; color: var(--color-solid-white); background-color: var(--color-primary-500); }

@media (max-width: 768px) {
    #modalPassword { width: calc(100% - 32px); }
    #modalPassword .ui-modal-header { padding: 24px 44px 0 24px; }
    #modalPassword .ui-modal-cont { padding: 20px 24px 24px; }
}