@charset "utf-8";

/* modal */
.ws-modal-open,
.ws-modal-open body { overflow: hidden; }

.ws-modal-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; overflow: hidden; background: #fff; opacity: 0; transition: opacity 0.25s ease;}
.ws-modal-wrap.ws-modal-visible { opacity: 1; }
.ws-modal-wrap.ws-modal-leave { opacity: 0; }

.ws-modal-outer {position:relative; flex:0 0 auto; width:100%; max-height:100%; overflow:auto; -ms-overflow-style:none;/* IE and Edge *//*  scrollbar-width:none; *//* Firefox */}
.ws-modal-outer::webkit-scrollbar {display:none;}

.ws-modal-inner { position: relative; width: 100%; max-width: 860px; margin: 0 auto; background: #fff; overflow: hidden; opacity: 0; transform: scale(0.85); transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s; padding:var(--space-50) var(--space-container) var(--space-70); border-radius:0; }
.ws-modal-wrap.ws-modal-visible .ws-modal-inner { opacity: 1; transform: scale(1); }
.ws-modal-wrap.ws-modal-leave .ws-modal-inner { opacity: 0; transform: scale(0.85); transition-delay: 0s; }
.ws-modal-close { display: inline-block; width: 33px; height: 33px; background: url(../images/common/modal-close.svg) center no-repeat; background-size: contain; border: none; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }

.modal-head {display: flex; align-items: center; justify-content: center; position:relative; width:100%; height:50px;}
.modal-logo {width:124px;}
.modal-content {width:100%; margin-top:var(--space-90);}

/* IR 일정 상세 */
.schedule-modal-body {margin: 0 var(--space-20);}
.schedule-modal-summary {display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-40);}
.schedule-modal-date {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0px; width:70px; height:70px; border:1px solid #e5e5ea; background:#f8f8f8; text-align:center;}
.schedule-modal-date strong {color:#151515; font-family:'Roboto', sans-serif; font-size:var(--font-size-22); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.schedule-modal-date em {color:#46464a; font-family:'Roboto', sans-serif; font-size:var(--font-size-12); font-weight:500; font-style:normal; line-height:1.3em; letter-spacing:-.03em;}
.schedule-modal-title {display:flex; flex-direction:column; gap:6px;}
.schedule-modal-title .category {color:#707070; font-size:var(--font-size-15); font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
.schedule-modal-title h2 {color:#151515; font-size:var(--font-size-22); font-weight:700; line-height:1.5em; letter-spacing:-.03em;}
.schedule-modal-info {margin-top:var(--space-80);}
.schedule-modal-info > dl {display:flex; gap:var(--space-20); min-height:110px;}
.schedule-modal-info dt {flex:0 0 18%; max-width: 130px; padding-top:var(--space-20); border-top:1px solid #151515; color:#151515; font-size:var(--font-size-16); font-weight:500; line-height:1.5em; letter-spacing:-.03em;}
.schedule-modal-info dd {flex:1; min-width:0; padding-top:var(--space-20); border-top:1px solid #e5e5ea; color:#46464a; font-size:var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
.schedule-modal-info dd p + p {margin-top:var(--space-24);}
.schedule-modal-nav {margin-top:var(--space-60); border-top:1px solid #cedde0;}
.schedule-modal-nav a {display:flex; align-items:center; padding:var(--space-27) var(--space-20); border-bottom:1px solid #cedde0;}
.schedule-modal-nav .direction {display:flex; flex:0 0 22%; max-width: 130px; align-items:center; gap:var(--space-30); color:#555; font-size:var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
.schedule-modal-nav .direction:before {content:""; display:block; width:12px; height:7px; background:url("/images/common/list-arrow.svg") no-repeat center / contain;}
.schedule-modal-nav .prev .direction:before {transform:rotate(180deg);}
.schedule-modal-nav .subject {flex:1; min-width:0; overflow:hidden; color:#1b1d20; font-size:var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-.03em; text-overflow:ellipsis; white-space:nowrap;}

/* 게시판 상세 */
.board-modal-content {margin-top:var(--space-90);}
.board-modal-title {padding:0 var(--space-20) var(--space-40); border-bottom:1px solid #cedde0;}
.board-modal-title h2 {color:#151515; font-size:var(--font-size-22); font-weight:700; line-height:1.5em; letter-spacing:-.03em;}
.board-modal-title p {margin-top:var(--space-30); color:#707070; font-size:var(--font-size-15); font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
.board-modal-body {padding:var(--space-60) var(--space-20);}
.board-modal-editor .img {margin-top: var(--space-20);}
.board-modal-files {display:flex; align-items:center; margin-top:var(--space-30); padding:var(--space-40) var(--space-20); background:#f6f6f8;}
.board-modal-files strong {display:flex; flex:0 0 20%; max-width: 108px; align-items:center; color:#151515; font-size:var(--font-size-16); font-weight:500; line-height:1.5em; letter-spacing:-.03em;}
.board-modal-files strong:after {content:""; width:1px; height:20px; margin-left:auto; margin-right:18px; background:#cedde0;}
.board-modal-files ul {display:flex; flex-direction:column; gap:var(--space-20);}
.board-modal-files a {display:flex; align-items:center; gap:10px; color:#46464a; font-size:var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
.board-modal-files a:before {content:""; display:block; width:16px; height:16px; background:url("/images/common/icon-download.svg") no-repeat center / contain;}
.board-modal-nav {margin-top:0;}

/* 반응형 */
@media (max-width: 1024px) {
    .ws-modal-close {width: 28px; height: 28px; right: 10px;}
    .schedule-modal-date {width: 60px; height: 60px;}
    .schedule-modal-date strong {font-size: var(--font-size-18);}
}
@media (max-width: 640px) {
    .modal-logo {width: 100px;}
    .schedule-modal-date {width: 50px; height: 50px;}
    .schedule-modal-nav .direction:before {width: calc(12px / 1.2); height: calc(7px / 1.2); }
    .board-modal-files {flex-direction: column; align-items:flex-start; gap: 15px;}
}