@charset "UTF-8";

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

::-webkit-scrollbar{width:6px; height:6px;}
::-webkit-scrollbar-thumb{background-color:#89909e; border:1px solid transparent; border-radius:2px;}

:root{
    --reco-shadow:4px 4px 12px 0 rgba(0, 0, 0, 0.05);
    --reco-blue:#0D99FF;
}

.reco-btn{border:1px solid #ddd; background:#fff}
.reco-btn.lg{height:60px; font-size:var(--font-20); padding:0 36px}
.reco-btn.md{height:40px; padding:0 20px;}
.reco-btn.sm{height:32px; padding:0 15px; font-size:var(--font-14);}
.reco-blue{border:none; background:var(--reco-blue); color:#fff}

/* 추천연수 온보딩 */
.recommend-page > div{padding-left:10px; padding-right:10px;}

/* onboardingBlank.vm / resultBlank.vm 인라인 <style> 이관 — 단독 문서(DOCTYPE/html/body 직접 구성)라
   html/body 리셋 필요. 두 화면이 overflow 처리가 달라 html·body에 각각 클래스로 구분 */
html.reco-onboarding-page, body.reco-onboarding-page{height:100%; margin:0;}
body.reco-onboarding-page{overflow:hidden; display:flex; flex-direction:column;}

html.reco-result-page, body.reco-result-page{height:100%; margin:0;}
/* 결과화면은 퍼블처럼 body/html 자체가 스크롤되는 방식(내부 div 스크롤 아님) */
body.reco-result-page{overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column;}

.recommend-banner-swiper{width:100% !important; max-width:100% !important; min-width:0 !important;} /* 컨테이너 폭 초과해서 넓어지는 문제 */
.recommend-banner-swiper{overflow-x:hidden !important; overflow-y:visible !important;} /* 가로만 클리핑 — 세로까지 잘려 페이지네이션이 안 보이던 문제 */
.recommend-banner-swiper .swiper-wrapper{flex-wrap:nowrap !important;} /* 슬라이드가 줄바꿈되며 생기던 세로 스크롤 */
.recommend-banner-swiper .swiper-wrapper{height:auto !important;} /* wrapper가 부모 높이(100%)를 따라가며 생기던 빈 공간 */
.recommend-pagination{position:relative; z-index:2;} /* static이라 카드(positioned) 뒤로 깔려 안 보이던 문제 */
#result-list-block{height:auto; min-height:0;} /* 결과 카드 개수(1~5개)가 가변이라 목록 박스 높이 자동으로 변경 */

.recommend-course{padding-top:var(--gap-40); flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
.recommend-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;}
.recommend-course::before{content:''; position:fixed; top:0; left:0; width:100%; height:800px; background:radial-gradient(ellipse 145% 65% at 50% -2%,#0085FF 5%,rgba(57,200,255,0) 58%),radial-gradient(ellipse 100% 58% at 50% 10%,#37C6FF 15%,rgba(55,198,255,0) 70%),radial-gradient(ellipse 115% 55% at 50% 18%,#5BBEFF 0%,rgba(121,193,255,0) 90%),radial-gradient(ellipse 125% 45% at 50% 5%,#FFF 3%,rgba(55,198,255,0) 68%),#FFF; pointer-events:none; z-index:-1;}

.recommend-inner{padding-left:20px; padding-right:20px; max-width:1280px; width:100%; margin:0 auto; position:relative;}
.recommend-inner.small{max-width:660px;}
.recommend-inner.medium{max-width:880px;}

.recommend-intro .icon{width:70px; background:rgba(255, 255, 255, 0.15); border:1px solid rgba(255, 255, 255, 0.20);}
.recommend-intro button{background:rgba(255, 255, 255, 0.15);}
.step-bar{background:rgba(255, 255, 255, 0.70); box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.05);}
.step-bar-fill{background:#1880D4; position:absolute; top:0; left:0; height:100%; transition:width .4s ease;}

.reco-wrap{padding-top:var(--gap-60)}
.reco-content{display:none; flex-direction:column; padding-bottom:var(--gap-60);}
.reco-content.is-active{display:flex;}

@keyframes recoFadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
.reco-chat{opacity:0; transform:translateY(10px);}
.reco-chat.is-enter{animation:recoFadeUp .45s ease forwards;}

.reco-chat .icon{border:1px solid #D6EDFF; background:#90D3FF}
.reco-chat .chat-text{padding:var(--gap-20) var(--gap-40) var(--gap-20) var(--gap-20); background:rgba(10, 160, 235, 0.94); border:1px solid rgba(255, 255, 255, 0.49); box-shadow:var(--reco-shadow); border-radius:12px 12px 12px 0; color:#fff; min-height:66px;}
.reco-chat .chat-text.text-black{color:var(--black); border:1px solid rgba(16, 163, 236, 0.30); background:rgba(19, 164, 236, 0.05);}

.chat-loading{display:flex; align-items:center; gap:5px; height:24px;}
.chat-loading span{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.9); animation:chatDotBounce 1.2s ease-in-out infinite;}
.reco-chat .chat-text.text-black .chat-loading span{background:rgba(0, 0, 0, 0.9);}
.chat-loading span:nth-child(2){animation-delay:.15s;}
.chat-loading span:nth-child(3){animation-delay:.3s;}
@keyframes chatDotBounce{0%,80%,100%{transform:translateY(0); opacity:.45} 40%{transform:translateY(-5px); opacity:1}}

.reco-step-content{opacity:0; transform:translateY(10px); pointer-events:none;}
.reco-step-content.is-enter{animation:recoFadeUp .45s ease forwards; pointer-events:auto;}
.step2-item.reco-step-content{transform:none;}
.step2-item.reco-step-content.is-enter{animation:recoFadeIn .45s ease forwards;}
@keyframes recoFadeIn{from{opacity:0}to{opacity:1}}

.reco-check label{background:var(--white); border:1px solid rgba(0, 0, 0, 0.10); box-shadow:var(--reco-shadow); outline:1px solid transparent; cursor:pointer;}
.reco-check label:hover,
.reco-check label.is-checked{outline:1px solid rgba(24, 128, 212, 0.50); border-color:rgba(24, 128, 212, 0.50); background:rgba(255, 255, 255, 0.10);}
.reco-check .txt,
.reco-check label.is-checked .txt{color:var(--gray7);}
.reco-check.is-checked label{background:rgba(255, 255, 255, 0.20);}
.reco-check.is-checked .tit{color:var(--gray9);}
.reco-check.is-checked .txt{color:var(--grayb);}
.reco-check label.is-checked .tit{color:var(--black);}

.step-next{display:none;}
.step-next.is-show{display:block;}
.reco-step-content:not(.recommend-footer), .step-next{margin-left:50px;}

.step2-item{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px;}
.step2-item.is-checked label{opacity:0.2;}
.step2-item label{display:block; cursor:pointer; border:2px solid transparent; transition:border-color .2s ease, box-shadow .2s ease;}
.step2-item label:hover{outline:none; border-color:transparent; background:none;}
.step2-item.is-checked label.is-checked{border-color:rgba(24, 128, 212, 0.50); opacity:1;}

.recommend-footer{padding:var(--gap-30) 0; margin-top:var(--gap-60);}
.recommend-footer::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100dvw; height:1px; background:#ddd;}
.recommend-footer.is-show{display:flex;}
.recommend-footer.reco-step-content{transform:none;}
.recommend-footer.reco-step-content.is-enter{animation:recoFadeIn .45s ease forwards;}


/* 결과 페이지 */
.recommend-result{padding-top:var(--gap-60);}
.recommend-result .result-complete-view{display:none;}
.recommend-result.is-complete{background:var(--white)}
.recommend-result.is-complete .result-loading-view{display:none;}
.recommend-result.is-complete .result-complete-view{display:flex; animation:recoFadeUp .45s ease forwards;}
.recommend-searching .icon{width:150px; background:rgba(54, 198, 255, 0.13);}
@keyframes resultIconOrbit{from{transform:rotate(0deg) translateX(8px) rotate(0deg)} to{transform:rotate(360deg) translateX(8px) rotate(-360deg)}}
.recommend-searching .result-icon-orbit{transform-origin:center; animation:resultIconOrbit 2.8s linear infinite;}
.loading-bar{background:rgba(0, 0, 0, 0.10); box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.05);}
.loading-bar-fill{position:absolute; top:0; left:0; width:0; height:100%; background:linear-gradient(90deg, #307799 0%, #50C6FF 37.02%); transition:width 8s linear;}
.loading-step{opacity:0; transform:translateY(10px);}
.loading-step.is-enter{animation:recoFadeUp .45s ease forwards;}
.loading-step-label{font-size:var(--font-16); transition:font-size .25s ease, font-weight .25s ease;}
.loading-step.is-loading .loading-step-label{font-size:var(--font-18);}
.loading-step .loading-ok{display:none; flex-shrink:0;}
.loading-step.is-loading .loading-circle,
.loading-step.is-done .loading-circle{display:none;}
.loading-step.is-loading .loading-ok,
.loading-step.is-done .loading-ok{display:block;}

.recommend-banner-swiper{overflow:hidden;}
.recommend-banner-swiper .item{padding:var(--gap-30); background:#F4F4F4; display:grid; grid-template-columns:80px auto;}
.recommend-pagination{margin-top:var(--gap-30);}
.recommend-pagination .swiper-pagination-bullet{width:14px; height:14px; background:rgba(0, 0, 0, 0.10); opacity:1; margin:0 !important}
.recommend-pagination .swiper-pagination-bullet-active{background:#50C6FF;}

.recommend-complete{background:#F4FCFF; position:relative; padding:58px}
.recommend-complete::before{content:''; position:absolute; inset:0; padding:8px; border-radius:24px; background:linear-gradient(135deg, rgba(202, 255, 249, 1), rgba(62, 179, 234, 1)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;}

.recommend-item{padding:var(--gap-24); background:var(--white); box-shadow:var(--reco-shadow); border:1px solid rgba(221, 221, 221, 0.50); height:214px;}
.recommend-item.no-list{padding-top:20px; padding-bottom:20px;}
.recommend-item label{background:#F4F4F4; color:#4181D4;}


/* 연수 찾기 */
.recommend-page-top{padding-top:var(--gap-50); padding-bottom:var(--gap-50);}
.recommend-page-top::before{content:''; position:absolute; z-index:-1; top:0; bottom:0; left:50%; transform:translate(-50%); width:100dvw; background: radial-gradient(75.55% 164.53% at 47.71% 20.04%, #37C6FF 23.41%, rgba(55, 198, 255, 0.00) 67.31%), radial-gradient(44.34% 110.21% at 50% 31.21%, #5BBEFF 0%, rgba(121, 193, 255, 0.00) 100%), radial-gradient(263.14% 149.68% at 50% -2.81%, #0085FF 18.53%, rgba(57, 200, 255, 0.00) 51.36%), radial-gradient(71.48% 176.22% at 50% 10.67%, #FFF 8.17%, rgba(55, 198, 255, 0.00) 68.75%), #76D4FF;}

.recommend-page-top label{background:rgba(10, 160, 235, 0.40); background-blend-mode:multiply; box-shadow:var(--reco-shadow);}
.recommend-page-top .reco-btn.lg{color:#297EC4}

.recommend-page-tab::before{content:''; position:absolute; bottom:0; left:50%; transform:translate(-50%); width:100dvw; height:1px; background:#ddd;}
.recommend-page-tab div{width:100%; text-align:center;}
.recommend-page-tab button{position:relative; padding:0 var(--gap-20); height:70px; font-size:var(--font-20); font-weight:500; color:var(--black3);}
.recommend-page-tab .active button{color:var(--reco-blue);}
.recommend-page-tab .active button::before{content:''; position:absolute; bottom:0; left:0; right:0; height:4px; background:var(--reco-blue);}

.recommend-cate button{border-radius:100px; border:1px solid #ddd; padding:0 var(--gap-10); height:40px; background:var(--white); color:var(--black3); font-weight:500; min-width:80px;}
.recommend-cate button.active{background:var(--reco-blue); color:#fff; border-color:var(--reco-blue);}
.recommend-cate,
.recommend-subject-tab{overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; min-width:0; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-behavior:smooth; cursor:grab; touch-action:pan-x;}
.recommend-cate::-webkit-scrollbar,
.recommend-subject-tab::-webkit-scrollbar{display:none;}
.recommend-cate.is-dragging,
.recommend-subject-tab.is-dragging{cursor:grabbing; user-select:none;}
.recommend-cate.is-dragging button,
.recommend-subject-tab.is-dragging button{pointer-events:none;}
.recommend-cate button{flex-shrink:0; white-space:nowrap;}
.recommend-best .flex.column,
.recommend-mandatory .flex.column{min-width:0; max-width:100%;}

.reco-bg::before{content:''; position:absolute; top:0; left:50%; transform:translate(-50%); width:100dvw; height:100%; background:#F5F7FA; z-index:-1;}
.recommend-list{display:grid; gap:20px;}
.recommend-list .img{display:block; border-radius:16px 16px 0 0; overflow:hidden;}
.recommend-list .box{border-radius:0 0 16px 16px; border:1px solid #ddd; border-top:none; background:var(--white); padding:15px 20px}
.recommend-list img{transition:transform .35s ease;}
.recommend-list .item:hover img{transform:scale(1.05);}
.recommend-list .tit{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:42px;}
.recommend-list .cate{color:#1A6FD4}
.recommend-list .info{color:#94A3B8}
.recommend-list .btn-heart{position:absolute; top:15px; right:20px; background:transparent; border:none;}
.recommend-list .btn-heart path{stroke:#484748; fill:transparent; transition:stroke 0.2s ease, fill 0.2s ease;}
.recommend-list .btn-heart.active path{stroke:#FF6B57; fill:#FF6B57;}
.recommend-list.no-list{min-height:290px;}

.recommend-subject::before{content:''; position:absolute; top:0; left:50%; transform:translate(-50%); width:100dvw; height:350px; background:#54D5C1; z-index:-1;}
.recommend-subject-tab button{flex:1 1 0; width:auto; min-width:120px; flex-shrink:0; white-space:nowrap; padding:15px 10px; background:var(--white); color:var(--black3);}
.recommend-subject-tab button.active{background:var(--reco-blue); color:var(--white);}

.recommend-history-list{display:grid; grid-template-columns:1fr 3fr; gap:20px; align-items:stretch;}
.recommend-history-list .history-info{padding:20px; background:#A2E1FF}
.recommend-history-list .history-info .font-14{color:#15507B}
.recommend-history-list .history-swiper-wrap{min-width:0;}
.recommend-history-list .recommend-history-swiper{display:block; overflow:hidden;}
.recommend-history-list .recommend-history-swiper .swiper-slide{height:auto;}
.recommend-history-list .recommend-history-swiper .item{height:100%;}
.recommend-history-list .recommend-history-swiper.no-list{position:relative;}
.recommend-history-list .recommend-history-swiper.no-list #historyCourseSwiperWrapper{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; display:flex; justify-content:center;}
.recommend-arrow{position:absolute; top:50%; transform:translateY(-50%); width:43px; background:rgba(0, 0, 0, 0.20); z-index:2;}
.recommend-arrow.swiper-button-disabled{background:rgba(0, 0, 0, 0.05); pointer-events:none;}
.recommend-prev{left:-43px;}
.recommend-next{right:-43px;}

.recommend-mandatory .content{padding:20px; background:#F5F7FA; min-width:0;}
.mandatory-swiper1{display:block; overflow:hidden;}
.recommend-mandatory .recommend-list .img{border-radius:16px;}
.recommend-mandatory .recommend-cate{margin:0 -20px; padding:0 20px;}
.mandatory-swiper1.recommend-list .box{padding:15px 0 0; background:none; border:none}
.mandatory-swiper1.recommend-list .btn-heart{right:0;}
.mandatory-swiper1 .swiper-slide{height:auto;}
.mandatory-swiper1 .item{height:100%; min-width:0;}
.mandatory-swiper1 .box,
.mandatory-swiper1 .box > a{min-width:0;}
.mandatory-swiper1 .tit{min-width:0; max-width:100%;}
.mandatory-pagination{margin-top:auto;}
.mandatory-pagination .swiper-pagination-bullet{width:14px; height:14px; background:rgba(0, 0, 0, 0.10); opacity:1; margin:0 !important;}
.mandatory-pagination .swiper-pagination-bullet-active{background:#50C6FF;}
.mandatory-swiper2{display:block; overflow:hidden;}
.mandatory-swiper2 .swiper-slide{height:auto;}
.mandatory-swiper2.recommend-list .item{display:grid; grid-template-columns:130px minmax(0, 1fr); gap:20px; min-width:0;}
.mandatory-swiper2.recommend-list .box{padding:0; background:none; border:none; min-width:0;}
.mandatory-swiper2.recommend-list .box > a{padding-right:28px; min-width:0;}
.mandatory-swiper2.recommend-list .btn-heart{top:0; right:0;}
.mandatory-swiper2 .tit{min-width:0; max-width:100%;}

.lifecycle-login{background:url('../images/recommend/lifecycle_login_bg.png') no-repeat center center; background-size:100% auto; border:1px solid #ddd; padding:var(--gap-30);}
.lifecycle-login .icon{width:96px; background:rgba(255, 255, 255, 0.21)}
.lifecycle-login .reco-btn{border:none; color:var(--reco-blue); padding:0 40px; box-shadow:var(--reco-shadow);}

.custom-select{position:relative; width:140px;}
.custom-select.active .select-list{display:block;}
.select-label{width:100%; padding:0 15px; height:40px; font-size:15px; color:#333; display:flex; align-items:center; border:1px solid #999; border-radius:5px; cursor:pointer; position:relative;}
.select-label::before{content:''; position:absolute; top:50%; right:15px; transform:translateY(-50%) rotate(45deg); width:6px; height:6px; border-right:2px solid #666; border-bottom:2px solid #666; margin-top:-2px;}
.select-list{position:absolute; top:calc(100% - 1px); left:0; width:100%; border-radius:5px; padding:7px; background:#fff; border:1px solid #999; display:none; z-index:10;}
.select-list li{padding:0 10px; line-height:28px; border-radius:5px; font-size:15px; color:#333; cursor:pointer;}
.select-list li.selected{background:#f5f5f6}

/* 로그인 추가 */
.my-recommend-history .history-btn{border:1px solid rgba(255, 255, 255, 0.50); background:rgba(255, 255, 255, 0.20); box-shadow:2px 2px 8px 0 rgba(0, 0, 0, 0.10); padding:0 16px; color:var(--white)}
.my-recommend-history .arrow{transform:rotate(180deg);}
.my-recommend-history .history-btn.active .arrow{transform:rotate(0);}

.responsive-modal{display:none; z-index:999;}
.modal-md .pop-box{max-width:670px;}
.modal-lg .pop-box{max-width:860px;}
.responsive-modal:not(.responsive-bottom){position:fixed; inset:0; width:100%; height:100%; transform:none; background:rgba(0,0,0,.3);}
.responsive-modal:not(.responsive-bottom).active{display:block;}
.responsive-modal.active{display:block;}
.responsive-modal-handle{display:none;}
.responsive-modal:not(.responsive-bottom) .pop-box{position:fixed; top:50%; left:50%; right:auto; bottom:auto; transform:translate(-50%, -50%); width:calc(100% - 40px); margin:0; background:var(--white); border-radius:12px; max-height:90dvh;}
.responsive-modal:not(.pd0) .pop-box{padding:20px 20px 30px; display:flex; flex-direction:column; gap:20px; overflow:hidden;}
.responsive-modal .pop-con{overflow-y:auto; flex:1; min-height:0;}
.responsive-modal:not(.responsive-bottom) .pop-tit{padding-bottom:20px; position:relative; line-height:1;}
.responsive-modal:not(.responsive-bottom) .pop-tit::before{content:''; position:absolute; bottom:0; left:-30px; right:-30px; height:1px; background:#ddd;}
.responsive-modal .pop-btn{display:flex; align-items:center; justify-content:center; gap:10px;}
.responsive-modal .pop-btn.border-top{border-top:1px solid #ddd; padding:0;}
.responsive-modal .pop-btn button{min-width:150px;}
.responsive-bottom{position:absolute; top:calc(100% + 10px); right:0; width:250px; white-space:nowrap; box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.10); background:#fff;}
.responsive-bottom.lg{width:max-content;}
.responsive-bottom .pop-tit{padding:15px 15px 10px; font-size:13px; color:#94A3B8}

.modal-tab .box-input label{background:#F2F2F2; color:#777; border-color:#f2f2f2}

.history-item .item{padding:10px 15px; color:inherit;}
.history-item .item.active{background:rgba(111, 209, 255, 0.20);}

.my-recommend-swiper.recommend-list{display:block; overflow:hidden; padding:5px 0}
.my-recommend-swiper .swiper-wrapper{align-items:center;}
.my-recommend-swiper .swiper-slide{height:auto; flex-shrink:0; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.10); border-radius:16px;}
.my-recommend-swiper .swiper-slide .item{width:100%; transition:opacity .35s ease;}
.my-recommend .my-recommend-prev{left:-43px;}
.my-recommend .my-recommend-next{left:auto; right:-43px;}
.my-recommend-pagination{position:relative; margin-top:var(--gap-30);}
.my-recommend-pagination.swiper-pagination-bullets{position:relative; left:auto; width:auto; bottom:auto;}

.lifecycle-list{width:100%; min-width:0;}
.lifecycle-item{padding:14px 5px 5px; margin:0 -5px}
.lifecycle-item .item{flex:1; min-width:0; padding:12px; background:var(--white); box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.10); color:#333;}
.lifecycle-item .flexcenter{background:#F5F7FA}
.lifecycle-item .tit{margin:12px 0 7px}
.lifecycle-item .year{color:#94A3B8}
.lifecycle-item .active{background: linear-gradient(149deg, #0D99FF -6.64%, #0056D7 56.73%); padding:28px 12px 16px; color:var(--white); position:relative;}
.lifecycle-item .active::before{content:'현재 위치'; position:absolute; top:-14px; max-width:130px; width:70%; left:50%; transform:translateX(-50%); border-radius:100px; background:#FF6B2B; font-size:14px; font-weight:500; display:flex; align-items:center; justify-content:center; height:28px;}
.lifecycle-item .active .flexcenter{background:rgba(245, 247, 250, .2);}
.lifecycle-item .active .year{color:#CFDBED;}
.lifecycle-info{padding:20px; background:#0086E8; color:var(--white)}
.lifecycle-info > div{width:calc(100% - 210px)}
.lifecycle-info strong{color:#FFE83A}
.lifecycle-info-btn{position:absolute; top:50%; transform:translateY(-50%); right:20px; z-index:999;}
.lifecycle-info-btn > button{box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.10); width:190px}
.lifecycle-info-btn > button:nth-child(1){border: 1px solid rgba(255, 255, 255, 0.50); background: rgba(255, 255, 255, 0.20); color:var(--white)}
.lifecycle-info-btn > button:nth-child(2){background:var(--white); color:#0086E8}

.box-input input{display:none;}
.box-input label{border:1px solid #ddd;}
.lifecycle-set .box-input label{width:135px;}
.box-input input:checked + label{background:#0086E8 !important; color:#fff !important; border-color:#0086E8 !important}

.pop-info-box{padding:10px 20px}
.pop-info-box.blue{border-left: 3px solid #0D99FF; background:#EEF8FF;}
.pop-info-box.purple{border-left: 3px solid #CB7BEA; background:#F3F0FD;}
.roadmap-reco .item{background:#F5F7FA; padding:15px 20px; border:1px solid #F5F7FA; position:relative;}
.roadmap-reco .item.active{border-color:#ddd; background:#EEF8FF;}
.roadmap-reco .item.active::before{content:'추천'; display:flex; align-items:center; justify-content:center; width:38px; height:22px; border-radius:6px; font-size:14px; font-weight:500; color:#fff; background:#8AC6F2; position:absolute; top:10px; right:10px}

.explain-box .item{padding:18px 20px; background:#F8F8F8}
.desc-box .tit{background:#F9F9F9; padding:10px 15px; border-radius:8px 8px 0 0;}
.desc-box .txt{padding:15px}
.dot-list li{position:relative; padding-left:15px;}
.dot-list li::before{content:'ㆍ'; position:absolute; left:0; left:0;}
.caution-box{padding:18px 20px}
.caution-box.orange{border:1px solid #F58320; background:#FFF6EE;}

#container{margin-top:0; max-width:1260px;}
.my-recommend:not(.ready){visibility:hidden;}
.recommend-list .item.skeleton{background:#f2f2f2; border-radius:16px; aspect-ratio:1/1.15; animation:reco-skeleton-pulse 1.2s ease-in-out infinite;}
@keyframes reco-skeleton-pulse{0%,100%{opacity:1;} 50%{opacity:.5;}}
#container .lnb-menu-content{display:none !important;}
#header.fix{top:-100%;}
#recommendPageTab.is-sticky{position:fixed; top:0; left:0; right:0; margin:0 auto; max-width:1260px; width:100%; z-index:50;}
#recommendPageTab.is-sticky::after{content:''; position:absolute; z-index:-1; top:0; bottom:0; left:50%; transform:translate(-50%); width:100dvw; background:var(--white); box-shadow:0 2px 8px rgba(0,0,0,.08);}
#recommendPageTab.is-sticky button{height:50px;}
#recommendPageTabPlaceholder{display:none;}

@media (max-width: 767px) {
    .reco-btn.lg{padding:0; height:50px;}

    .recommend-course{font-size:14px; padding-top:40px;}
    .recommend-course::before{height:90dvh;}

    .recommend-top .icon{width:50px;}
    .recommend-top .icon svg{width:24px}
    .recommend-top button{height:30px; font-weight:500;}

    .reco-chat .chat-text{min-height:50px;}

    .step2-item{grid-template-columns:repeat(2, 1fr);}

    .recommend-searching .icon{width:80px;}
    .recommend-searching .icon svg{width:36px}
    @keyframes resultIconOrbit{from{transform:rotate(0deg) translateX(4px) rotate(0deg)} to{transform:rotate(360deg) translateX(4px) rotate(-360deg)}}

    .recommend-complete{margin:0 -20px; padding:26px; font-size:14px;}
    .recommend-complete::before{border-radius:0; padding:6px}
    .recommend-item{height:auto;}
    .recommend-item.no-list{flex-direction:column; text-align:center; gap:10px;}
    .recommend-item.no-list img{width:80px;}


    /* 추천연수 */
    .recommend-btn, .my-recommend-history{position:absolute; top:14px; right:10px;}
    .recommend-btn .reco-btn{font-size:14px; height:36px; font-weight:500; gap:4px; padding:0 10px}
    .recommend-page-top{height:auto;}
    .recommend-page-top .reco-btn svg{width:18px;}

    .recommend-page-tab{padding:0 !important}
    .recommend-page-tab div{width:auto;}
    .recommend-page-tab button{height:45px; font-size:14px; white-space:nowrap;}

    .recommend-cate,
    .recommend-subject-tab{margin:0 -10px; padding:0 10px;}
    .recommend-cate button{height:34px; min-width:70px;}
    .recommend-subject-tab button{min-width:130px;}
    .recommend-mandatory .recommend-cate{margin:0 -10px; padding:0 10px;}

    .recommend-list{grid-template-columns:repeat(2, 1fr); gap:10px;}
    .recommend-list .img{border-radius:10px 10px 0 0;}
    .recommend-list .box{border-radius:0 0 10px 10px; padding:10px}
    .recommend-list .btn-heart{top:10px; right:10px}
    .reco-blt{height:20px; font-size:10px;}
    .recommend-list.no-list{grid-template-columns:1fr; text-align:center; min-height:auto;}

    .recommend-history-list{grid-template-columns:repeat(2, 1fr); gap:10px}
    .recommend-history-list .history-info{padding:20px 10px}
    .recommend-history-list .history-info img{display:none;}
    .recommend-history-list .recommend-history-swiper{margin:0 -10px; padding:0 10px}
    .recommend-history-list .recommend-history-swiper.no-list{min-height:220px;} /* .recommend-list.no-list{min-height:auto}보다 더 구체적으로 복원 */
    .recommend-history-list .recommend-history-swiper.no-list img{display:none;}
    .recommend-history-list .recommend-history-swiper.no-list .flex.column{text-align:center; align-items:center;}
    .recommend-arrow{display:none;}

    .recommend-mandatory .grid{display:flex; flex-direction:column;}
    .recommend-mandatory .content{padding:20px 10px}

    .mandatory-swiper1.recommend-list .item{display:grid; grid-template-columns:130px minmax(0, 1fr); gap:10px}
    .mandatory-swiper1.recommend-list .box{padding:0}
    .mandatory-swiper1.recommend-list .btn-heart{top:0}
    .mandatory-swiper2.recommend-list .item{gap:10px;}
    .mandatory-pagination .swiper-pagination-bullet{width:10px; height:10px;}

    .lifecycle-login{background-image:url('../images/recommend/lifecycle_login_bg_mo.png'); height:65dvh; justify-content:center; text-align:center;}

    /* 로그인 추가 */
    .my-recommend-history .history-btn{padding:0 10px; height:34px;}
    .my-recommend-swiper .swiper-wrapper{align-items:flex-start;}
    .my-recommend-swiper .swiper-slide .item{opacity:1 !important;}
    .my-recommend-swiper.recommend-list{margin:0 -10px; padding:0 10px;}

    .responsive-modal{position:fixed !important; top:0 !important; left:0 !important; right:0; bottom:0; width:100% !important; transform:none !important; max-width:none !important; white-space:normal !important; border-radius:0; background:rgba(0, 0, 0, 0.5) !important; z-index:1000; box-shadow:none !important;}
    .responsive-modal.responsive-bottom,
    .responsive-modal.responsive-bottom.lg{top:0 !important; right:0 !important; left:0 !important; bottom:0 !important; width:100% !important; max-width:none !important;}
    .responsive-modal.active{display:block;}
    .responsive-modal .pop-box,
    .responsive-modal:not(.responsive-bottom) .pop-box,
    .responsive-modal:not(.pd0) .pop-box{position:absolute; top:auto; left:0; right:0; bottom:0; width:100%; max-width:none; max-height:90dvh; margin:0; border-radius:26px 26px 0 0; transform:translateY(100%); transition:transform .3s ease; background:var(--white); overflow:hidden; display:flex; flex-direction:column; touch-action:none; will-change:transform; padding:0 15px 15px ; gap:15px}
    .responsive-modal.pd0 .pop-box{padding:0 !important; gap:0 !important}
    .responsive-modal.pd0 .pop-tit{padding:15px}
    .responsive-modal .pop-close{display:none;}
    .responsive-modal.active .pop-box,
    .responsive-modal.active:not(.responsive-bottom) .pop-box{transform:translateY(0) !important;}
    .responsive-modal .responsive-modal-handle{display:block; width:40px; height:4px; border-radius:100px; background:rgba(0, 0, 0, 0.20); margin:10px auto 0; flex-shrink:0; border:none; padding:0; cursor:grab;}
    .responsive-modal:not(.responsive-bottom) .pop-tit, .responsive-modal .pop-tit{padding:0 0 15px; position:relative; line-height:1; font-size:inherit; color:inherit;}
    .responsive-modal .pop-tit::before{content:''; position:absolute; bottom:0; left:-15px; right:-15px; height:1px; background:#ddd;}
    .responsive-modal .pop-con{overflow-y:auto; flex:1;}
    .mo-pop-border{border-bottom:1px solid #ddd; padding:0 15px 15px; margin:0 -15px}
    .responsive-modal .pop-btn button{width:100%}

    .lifecycle-item{padding:14px 10px 5px; margin:0 -10px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
    .lifecycle-item::-webkit-scrollbar{display:none;}
    .lifecycle-item .item{flex:0 0 auto; min-width:110px; width:auto;}
    .lifecycle-item .tit{margin:10px 0 5px}

    .lifecycle-info-warp{display:flex; flex-direction:column; gap:20px;}
    .lifecycle-info > div{width:100%}
    .lifecycle-info-btn{position:relative; top:0; transform:none; right:0; flex-direction:row; margin-bottom:20px;}
    .lifecycle-info-btn button{height:40px; color:#0086E8 !important; background:#fff !important; font-weight:bold;}

    .recommend-page-top label{font-size:12px;}

    .recommend-top-blt{height:70px}

    .lifecycle-set{flex-direction:column;}
    .lifecycle-set .bold{display:none;}
    .lifecycle-set .set, .lifecycle-set .box-input label{width:100%;}
    .lifecycle-set .set{display:none;}
    .lifecycle-set .set.active{display:flex;}

    .explain-box{grid-template-columns:1fr;}
    .explain-box .item{padding:10px}
    .desc-box{border:none; gap:10px;}
    .desc-box .tit{border:none; border-radius:0; padding:0;}
    .desc-box .txt{padding:0}
    .caution-box{padding:10px;}

    #recommendPageTab.is-sticky button{height:48px;}
}