@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:rgba(0,0,0,.6); opacity:0; transition:opacity .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%; padding:20px; overflow:auto; -ms-overflow-style:none; scrollbar-width:none;}
.ws-modal-outer::-webkit-scrollbar {display:none;}

.ws-modal-inner {position:relative; width:100%; max-width:600px; margin:0 auto; background:#fff; overflow:hidden; border-radius:12px; box-shadow:0 24px 30px rgba(12, 26, 42, .5); opacity:0; transform:scale(.85); transition:opacity .25s ease .05s, transform .25s ease .05s;}
.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(.85); transition-delay:0s;}
.ws-modal-close {position:relative; display:inline-block; width:18px; height:18px; background:none; border:none; cursor:pointer;}
.ws-modal-close:before, .ws-modal-close:after {content:""; position:absolute; top:50%; left:50%; width:18px; height:2px; background:#fff;}
.ws-modal-close:before {transform:translate(-50%, -50%) rotate(45deg);}
.ws-modal-close:after {transform:translate(-50%, -50%) rotate(-45deg);}

.ws-modal-head {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:17px 30px; background:#121212; color:#fff;}
.ws-modal-head h2 {font-size:var(--font-size24); font-weight:700; line-height:1.3em;}

#BoothDetail .ws-modal-outer, #ProgramDetail .ws-modal-outer {display:flex; align-items:center; height:100%; overflow:hidden;}
#BoothDetail .ws-modal-inner, #ProgramDetail .ws-modal-inner {display:flex; flex-direction:column; max-width:800px; max-height:100%; overflow:hidden;}
#BoothDetail .ws-modal-head, #ProgramDetail .ws-modal-head {flex:none; min-height:76px; padding:16px 28px; background:var(--grad-brand); text-align:center;}
#BoothDetail .ws-modal-head h2, #ProgramDetail .ws-modal-head h2 {flex:1 1 auto; min-width:0; margin:0; overflow:hidden; color:#fff; font-size:clamp(20px, 1.45vw, 24px); font-weight:800; line-height:1.35em; letter-spacing:-.03em; white-space:nowrap; text-overflow:ellipsis;}
#BoothDetail .ws-modal-body, #ProgramDetail .ws-modal-body {flex:1 1 auto; min-height:0; overflow-y:auto; padding:32px 28px; background:#fff;}
#BoothDetail .ws-modal-visual, #ProgramDetail .ws-modal-visual {overflow:hidden; margin-bottom:32px; border:1px solid var(--border-color); border-radius:24px; aspect-ratio:16 / 9; background:var(--bg-soft);}
#BoothDetail .ws-modal-visual img, #ProgramDetail .ws-modal-visual img {display:block; width:100%; height:100%; object-fit:cover;}
#BoothDetail .ws-modal-sec + .ws-modal-sec, #ProgramDetail .ws-modal-sec + .ws-modal-sec {margin-top:44px;}
#BoothDetail .ws-modal-sec h3, #ProgramDetail .ws-modal-sec h3 {display:flex; align-items:center; gap:10px; margin:0; padding-bottom:14px; border-bottom:1px solid var(--line-strong, #1A222B); color:var(--color-text-primary); font-size:20px; font-weight:700; line-height:1.35em;}
#BoothDetail .ws-modal-sec h3:before, #ProgramDetail .ws-modal-sec h3:before {content:""; flex:none; width:8px; height:8px; border-radius:4px; background:var(--color-brand);}
#BoothDetail .ws-modal-sec p, #ProgramDetail .ws-modal-sec p {margin:16px 0 0; padding-left:18px; color:var(--color-text-secondary); font-size:15px; font-weight:400; line-height:1.65em;}
#BoothDetail .ws-modal-info, #ProgramDetail .ws-modal-info {margin:0;}
#BoothDetail .ws-modal-info > div, #ProgramDetail .ws-modal-info > div {display:grid; grid-template-columns:minmax(96px, 130px) minmax(0, 1fr); gap:14px; padding:14px 0; border-bottom:1px solid #ddd;}
#BoothDetail .ws-modal-info dt, #ProgramDetail .ws-modal-info dt {padding-left:18px; color:var(--color-text-tertiary); font-size:14px; font-weight:700; line-height:1.5em;}
#BoothDetail .ws-modal-info dd, #ProgramDetail .ws-modal-info dd {color:var(--color-text-secondary); font-size:14px; font-weight:400; line-height:1.65em;}
#BoothDetail .ws-modal-foot, #ProgramDetail .ws-modal-foot {flex:none; display:flex; justify-content:center; padding:24px 28px 32px; background:#fff;}
#BoothDetail .ws-modal-btn, #ProgramDetail .ws-modal-btn {display:inline-flex; align-items:center; justify-content:center; min-width:140px; min-height:58px; padding:0 24px; border:1px solid var(--border-color); border-radius:8px; background:#fff; color:var(--color-text-primary); font-size:15px; font-weight:600; line-height:1em; cursor:pointer; transition:.3s;}
#BoothDetail .ws-modal-btn:hover, #ProgramDetail .ws-modal-btn:hover {background:#242424; color:#fff; border-color:#242424;}

/* 반응형 */
@media (max-width: 1024px) {
	.ws-modal-outer {padding:16px;}
	.ws-modal-inner {border-radius:10px;}
	.ws-modal-head {padding:14px 20px;}
	.ws-modal-head h2 {font-size:18px;}
	.ws-modal-close {width:16px; height:16px;}
	.ws-modal-close:before, .ws-modal-close:after {width:16px;}
	#BoothDetail .ws-modal-inner, #ProgramDetail .ws-modal-inner {max-width:100%;}
	#BoothDetail .ws-modal-head, #ProgramDetail .ws-modal-head {min-height:64px; padding:14px 20px;}
	#BoothDetail .ws-modal-head h2, #ProgramDetail .ws-modal-head h2 {font-size:18px; white-space:normal;}
	#BoothDetail .ws-modal-body, #ProgramDetail .ws-modal-body {padding:24px 20px 8px;}
	#BoothDetail .ws-modal-visual, #ProgramDetail .ws-modal-visual {margin-bottom:20px; border-radius:16px;}
	#BoothDetail .ws-modal-sec + .ws-modal-sec, #ProgramDetail .ws-modal-sec + .ws-modal-sec {margin-top:28px;}
	#BoothDetail .ws-modal-sec h3, #ProgramDetail .ws-modal-sec h3 {gap:8px; padding-bottom:12px; font-size:17px;}
	#BoothDetail .ws-modal-sec h3:before, #ProgramDetail .ws-modal-sec h3:before {width:6px; height:6px;}
	#BoothDetail .ws-modal-sec p, #ProgramDetail .ws-modal-sec p {margin-top:12px; padding-left:14px; font-size:14px;}
	#BoothDetail .ws-modal-info > div, #ProgramDetail .ws-modal-info > div {grid-template-columns:1fr; gap:4px; padding:12px 0;}
	#BoothDetail .ws-modal-info dt, #ProgramDetail .ws-modal-info dt {padding-left:14px; font-size:13px;}
	#BoothDetail .ws-modal-info dd, #ProgramDetail .ws-modal-info dd {font-size:13px;}
	#BoothDetail .ws-modal-foot, #ProgramDetail .ws-modal-foot {padding:16px 20px 20px;}
	#BoothDetail .ws-modal-btn, #ProgramDetail .ws-modal-btn {min-width:120px; min-height:48px; font-size:14px;}
}

@media (max-width: 640px) {
	.ws-modal-wrap {height:100%; height:100dvh;}
	.ws-modal-outer {padding:10px;}
	.ws-modal-inner {border-radius:10px;}
	.ws-modal-head {padding:12px 16px;}
	.ws-modal-head h2 {font-size:16px;}
	#BoothDetail .ws-modal-outer, #ProgramDetail .ws-modal-outer {padding:10px;}
	#BoothDetail .ws-modal-head, #ProgramDetail .ws-modal-head {min-height:52px; padding:12px 16px;}
	#BoothDetail .ws-modal-head h2, #ProgramDetail .ws-modal-head h2 {font-size:16px;}
	#BoothDetail .ws-modal-body, #ProgramDetail .ws-modal-body {padding:16px 16px 8px;}
	#BoothDetail .ws-modal-visual, #ProgramDetail .ws-modal-visual {margin-bottom:16px; border-radius:12px;}
	#BoothDetail .ws-modal-sec + .ws-modal-sec, #ProgramDetail .ws-modal-sec + .ws-modal-sec {margin-top:22px;}
	#BoothDetail .ws-modal-sec h3, #ProgramDetail .ws-modal-sec h3 {gap:6px; padding-bottom:10px; font-size:15px;}
	#BoothDetail .ws-modal-sec p, #ProgramDetail .ws-modal-sec p {margin-top:10px; padding-left:0; font-size:13px;}
	#BoothDetail .ws-modal-info > div, #ProgramDetail .ws-modal-info > div {padding:10px 0;}
	#BoothDetail .ws-modal-info dt, #ProgramDetail .ws-modal-info dt {padding-left:0; font-size:12px;}
	#BoothDetail .ws-modal-info dd, #ProgramDetail .ws-modal-info dd {font-size:13px;}
	#BoothDetail .ws-modal-foot, #ProgramDetail .ws-modal-foot {padding:12px 16px 16px;}
	#BoothDetail .ws-modal-btn, #ProgramDetail .ws-modal-btn {width:100%; min-width:0; min-height:46px; font-size:14px;}
}