.main .Tit {font-size: 2.5rem; color:var(--pointcolor); text-align: center; font-weight: 300;}

/* button */
.raonBtn {position: relative; display: inline-block; width: auto; height: auto; background-color: transparent; border: none; cursor: pointer; margin: 3rem auto 0; min-width: 20rem;}
.raonBtn:before, .raonBtn:after { position: absolute; content: ""; }
.raonBtn:before {background-color: var(--pointcolor); transition: 0.3s ease-out;top: 0; left: 0; right: 0; height: 100%; width: 100%;}
.raonBtn span {position: relative; display: inline-block; font-size: 1.125rem; top: 0; left: 0; width: 100%; padding: .7rem 2rem; transition: 0.3s;color: rgb(255, 255, 255); border: 1px solid var(--pointcolor); transition: 0.2s 0.1s;}
.raonBtn span:hover {transition: 0.2s 0.1s;}
.raonBtn:hover:before {height: 0%;}

/* =========== #sidebar =========== */
#sideBar{display: none;}

@media (width<=990px) {
    #sideBar{display: flex;}
    
}
/* =========== Notice-bar =========== */
.notice-bar { background-color: var(--pointcolor ); color: #ffffff; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; width: 100%; } 
.notice-container { height: 40px; overflow: hidden; position: relative; width: 100%; max-width: 1200px; padding: 0 20px; /* 모바일에서 양옆 여백 확보 */}
.rolling-list { position: absolute; width: 100%; transition: transform 0.5s ease-in-out; } 
.rolling-list .rolling-item { height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; } 
.rolling-list .rolling-item .badge { background-color: rgba(0, 0, 0, 0.1); padding: 2px 8px; border-radius: 4px; font-size: 12px; flex-shrink: 0; }
.rolling-list .rolling-item .text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 

/* intro */
#intro {height: calc(100vh - 2rem); position: relative;}
#intro .container {height: 100%; display: flex; align-items: center; justify-content: center;}

#intro .search_wrap {display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .7rem 1rem; border: 1px solid var(--pointcolor); max-width: 37.5rem; width: 90%; margin-left: auto; margin-right: auto;}
#intro .search_wrap input {width: 80%; background-color: transparent; border: none; color: var(--white, #fff);}
#intro .search_wrap input::placeholder {font-size: 1rem;}
#intro .search_wrap input:-webkit-autofill,
#intro .search_wrap input:-webkit-autofill:hover,
#intro .search_wrap input:-webkit-autofill:focus { -webkit-text-fill-color: var(--white, #fff); caret-color: var(--white, #fff); transition: background-color 9999s ease-out;}
#intro .search_wrap .searchImg {width: 1.25rem;}
#intro .search_btn {padding: .5rem 1.5rem; background-color: var(--pointcolor); color: var(--white, #fff); font-size: 1rem;}

/* solution */
#solution {background-color: #141413;}
#solution .Inner {max-width: 1180px; margin: auto; width: 100%;}
#solution .box {--border-angle: 0deg;display: flex; flex-direction: column; padding: 3.5rem 2.5rem; aspect-ratio: 12 / 14; cursor: pointer; display: flex; flex-direction: column; gap: 8rem; border: 1px solid transparent; background: linear-gradient(#141413, #141413) padding-box, conic-gradient(from var(--border-angle), var(--pointcolor) 0deg, #fff 180deg, var(--pointcolor) 360deg) border-box;}
#solution .box > img {width: 3.3rem; margin-left: auto; transition: transform 0.45s cubic-bezier(.22, .61, .36, 1);}
#solution .box:hover {animation: solutionBorderRotate 2s linear infinite;}
#solution .box:hover > img {transform: translateY(-8px) scale(1.1);}
@property --border-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes solutionBorderRotate {to {--border-angle: 360deg;}}
@media(max-width:768px) {
    #solution .box {justify-content: space-between; padding: 2.5rem 1rem; gap: 3rem; aspect-ratio: 12 / 13; max-height: 300px;}
}

/* plan */
#plan .priceList .box {padding: 2rem 2rem; border: 1px solid var(--gray); display: flex; flex-direction: column; gap: 3rem; position: relative; transition: all 0.3s;}
#plan .priceList .box:after {content:''; width: calc(100% + 2px); height: .5rem; background-color: transparent; position: absolute; top: -.5rem; left: -1px; transition: all 0.3s;}
#plan .priceList .box.on,#plan .priceList .box:hover {border-color: var(--pointcolor);}
#plan .priceList .box.on:after,#plan .priceList .box:hover:after {background-color: var(--pointcolor);}
#plan .plan_name {font-family: var(--pointfont); font-size: 1.875rem;}
#plan .plan_Btn {text-align: center; width: 100%; padding: .5rem 1rem; text-align: center; font-size: 1rem; display: block; background-color: rgba(255,79,3,.5); color: #fff; transition: all 0.5s;}
#plan .plan_Btn.free {background-color: var(--gray);}
#plan .plan_Btn:hover {background-color: var(--pointcolor);}

#plan .won span {font-family: var(--mainfont);}

#plan .day_wrap {display: flex; justify-content: space-between;}
#plan .day_wrap select {background-color: var(--black,#000); color: var(--white, #fff); border: none; font-size: 1rem;}

#plan .marker {display: none; width: 1.375rem;}
#plan .marker.on {display: block; position: absolute; top: -.2rem; right: 1rem;}

#plan .planTB {width: 100%; border-radius: 1.875rem 1.875rem 0 0; border: 1px solid var(--gray); font-size: 1rem; text-align: center; padding: 0 2rem; border-spacing: 0; table-layout: fixed;}
#plan .planTB th {padding: 1rem; border-bottom: 1px solid var(--gray); font-weight: 500;}
#plan .planTB td {padding: .5rem 1rem; border-bottom: 1px solid var(--gray);}
#plan .planTB tr td:first-child {text-align: left; padding-left: 2rem;}
#plan .planTB tr:last-child td {border-bottom: none; color: var(--light-gray);}

#plan .planTB .check {color: var(--pointcolor);}
#plan .planTB .infoBtn {position: relative; padding-right: 1.5rem; width: fit-content; margin: auto; opacity: .5; font-size: .875rem; cursor: pointer;}
#plan .planTB .infoBtn:hover {opacity: 1;}

#plan .hiddenBox {background-color: #141413; padding: 1rem; position: absolute; font-size: .875rem; color: var(--light-gray); top: 2.5rem; left: 0; right: 0; margin: auto; max-width: 15rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1), visibility .3s;}
#plan .hiddenBox:after {content: ''; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: .8125rem; height: 11px; background-color: #141413; display: block; position: absolute; top: -11px; left: 0; right: 0; margin: auto;}
#plan .hiddenBox.on {opacity: 1; visibility: visible; transform: translateY(0);}


/* planTB 반응형  */
#plan .planMobile { display: none;}
#plan .planMobile .pmTabs {position: sticky; top: var(--stickyTop,3em); background:#0a0a0a}
#plan .planMobile .pmTabs li{padding:0.5em; cursor: pointer;}
#plan .planMobile .pmTabs li.on { background:var(--pointcolor) ; }

#plan .planMobile .pmList { list-style: none; margin: 0; padding: 0; border-top: 1px solid #555; border-bottom: 1px solid #555; }
#plan .planMobile .pmList li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0.6em 0.5em; font-size: 0.85em; }
#plan .planMobile .pmList li + li { border-top: 1px dashed #bbb; }
#plan .planMobile .pmList li .val {color:var(--pointcolor) }
#plan .planMobile .pmList li.off { color: #aaa; }
#plan .planMobile .pmList li.off .val { color: #aaa; }
#plan .planMobile .pmNote { margin-top: 10px; text-align: center; }
#plan .planMobile .pmNote .hiddenBox{opacity: 1; visibility: visible; transform: translateY(0);}
#plan .planMobile .infoBtn { font-size:1rem}   

@media (width <= 990px) {
    #plan .planTB { display: none; }     
    #plan .planMobile { display: block; border: 1px solid var(--gray); padding:1em; display: flex; flex-direction: column; }   
}