@import"https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Poppins:wght@300;400;500;600;700&display=swap";:root{--primary-color: #6C63FF;--secondary-color: #8D8BEE;--accent-color: #00C4CC;--text-color: #333;--light-text-color: #666;--background-light: #F7F8FC;--background-dark: #2F3645;--card-bg: #FFFFFF;--border-color: #E0E0E0;--shadow-light: rgba(0, 0, 0, .08);--shadow-medium: rgba(0, 0, 0, .12)}body{font-family:Poppins,Noto Sans KR,sans-serif;line-height:1.6;margin:0;padding:0;background:var(--background-light);color:var(--text-color);scroll-behavior:smooth}a{text-decoration:none;color:var(--primary-color);transition:color .3s ease}a:hover{color:var(--secondary-color)}header{background:var(--background-dark);color:#fff;padding:.8rem 20px;box-shadow:0 4px 15px var(--shadow-medium);position:sticky;top:0;z-index:1000;display:flex;justify-content:space-between;align-items:center}header h1{margin:0;font-size:2.2rem;letter-spacing:1px;font-weight:700;color:#fff}.hamburger-menu-button{display:none;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;padding:5px 10px;z-index:1001}.main-nav{margin-top:0}.main-nav ul{padding:0;list-style:none;margin:0;display:flex;justify-content:flex-end;gap:20px}.main-nav ul li a{color:#fff;font-weight:500;font-size:1rem;padding:6px 12px;border-radius:5px;transition:background .3s ease,color .3s ease}.main-nav ul li a:hover{background:var(--primary-color);color:#fff}main{padding:40px 30px;max-width:1400px;margin:auto}section{background:var(--card-bg);padding:50px;margin-bottom:40px;border-radius:15px;box-shadow:0 8px 25px var(--shadow-light)}section h2{font-size:2.8rem;color:var(--primary-color);text-align:center;margin-bottom:40px;position:relative;font-weight:700}section h2:after{content:"";position:absolute;bottom:-15px;left:50%;transform:translate(-50%);width:80px;height:5px;background:var(--accent-color);border-radius:3px}#hero{background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);color:#fff;padding:100px 30px;text-align:center;margin-bottom:40px;border-radius:15px;box-shadow:0 10px 30px var(--shadow-medium)}#hero h2{font-size:4rem;margin-top:0;margin-bottom:25px;color:#fff;font-weight:800;letter-spacing:-1px}#hero h2:after{background:#fff}#hero p{font-size:1.4rem;max-width:900px;margin:0 auto 40px;line-height:1.8;color:#e6e6e6}.button{display:inline-block;background:var(--accent-color);color:var(--background-dark);border:none;padding:18px 45px;cursor:pointer;font-size:1.3rem;font-weight:700;border-radius:50px;text-decoration:none;transition:background .3s ease,transform .3s ease,box-shadow .3s ease;box-shadow:0 5px 15px #00c4cc66}.button:hover{background:#00a9b0;transform:translateY(-5px);box-shadow:0 8px 20px #00c4cc99}.course-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:35px;margin-top:35px}.course-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:15px;overflow:hidden;box-shadow:0 6px 20px var(--shadow-light);padding:25px;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}.course-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px var(--shadow-medium)}.course-card img{max-width:100%;height:200px;object-fit:cover;border-radius:10px;margin-bottom:20px;box-shadow:0 4px 10px #0000001a}.course-card h3{font-size:1.6rem;margin-top:0;margin-bottom:12px;color:var(--primary-color);min-height:60px;font-weight:600}.course-card p{font-size:1rem;color:var(--light-text-color);margin-bottom:12px;flex-grow:1}.course-card strong{color:var(--text-color)}.course-card .price{font-weight:700;color:#ff6b6b;font-size:1.3rem;margin-bottom:20px}.course-card .link{display:block;background:var(--accent-color);color:var(--background-dark);padding:12px 20px;text-decoration:none;border-radius:8px;text-align:center;font-weight:600;transition:background .3s ease,transform .3s ease;margin-top:auto}.course-card .link:hover{background:#00a9b0;transform:translateY(-2px)}.roadmap-category-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:35px;margin-top:35px}.roadmap-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:15px;overflow:hidden;box-shadow:0 6px 20px var(--shadow-light);cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;text-align:center;padding-bottom:25px;display:flex;flex-direction:column}.roadmap-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px var(--shadow-medium)}.roadmap-card img{width:100%;height:180px;object-fit:cover;border-bottom:1px solid var(--border-color);margin-bottom:20px;filter:brightness(.95)}.roadmap-card h3{font-size:1.8rem;color:var(--primary-color);margin:0 20px 15px;font-weight:700}.roadmap-card p{font-size:1rem;color:var(--light-text-color);padding:0 20px;margin-bottom:15px;flex-grow:1}#roadmap-detail{background:var(--card-bg);padding:50px;border-radius:15px;box-shadow:0 8px 25px var(--shadow-light);margin-top:40px}#roadmap-detail h3{color:var(--primary-color);font-size:2.5rem;margin-bottom:25px;text-align:center;font-weight:700}#roadmap-detail-description{font-size:1.15rem;color:var(--light-text-color);margin-bottom:50px;line-height:1.8;text-align:center;max-width:1000px;margin-left:auto;margin-right:auto}.roadmap-section{margin-bottom:60px;border-left:6px solid var(--primary-color);padding-left:30px;position:relative;padding-bottom:15px}.roadmap-section:before{content:"🚀";position:absolute;left:-25px;top:-5px;font-size:2rem;color:var(--accent-color);background:var(--card-bg);padding-right:10px}.roadmap-section h4{font-size:2rem;color:var(--text-color);margin-bottom:30px;font-weight:600;line-height:1.3}.roadmap-course-item{display:flex;align-items:flex-start;margin-bottom:35px;padding:25px;border:1px solid var(--border-color);border-radius:12px;background:var(--background-light);transition:background .2s ease,box-shadow .2s ease;box-shadow:0 4px 15px var(--shadow-light)}.roadmap-course-item:hover{background:#eef2f9;box-shadow:0 6px 20px var(--shadow-medium)}.roadmap-course-item img{width:140px;height:80px;object-fit:cover;border-radius:8px;margin-right:25px;flex-shrink:0;box-shadow:0 2px 8px #0000001a}.roadmap-course-info{flex-grow:1}.roadmap-course-info h5{font-size:1.4rem;margin-top:0;margin-bottom:10px;color:var(--primary-color);font-weight:600}.roadmap-course-info p{font-size:1rem;color:var(--light-text-color);margin-bottom:10px}.roadmap-course-info .skills{font-size:.9rem;color:#888;margin-bottom:15px;display:flex;flex-wrap:wrap;gap:8px}.roadmap-course-info .skills span{background:#ebf2fa;color:var(--primary-color);padding:5px 12px;border-radius:20px;font-weight:500;border:1px solid var(--secondary-color)}.roadmap-course-item a{display:inline-block;background:var(--accent-color);color:var(--background-dark);padding:10px 22px;text-decoration:none;border-radius:8px;font-size:1rem;margin-top:15px;transition:background .3s ease,transform .3s ease;font-weight:600}.roadmap-course-item a:hover{background:#00a9b0;transform:translateY(-2px)}#backToRoadmaps{background:#a0a0a0;color:#fff;border:none;padding:15px 30px;border-radius:8px;cursor:pointer;font-size:1.1rem;margin-bottom:40px;transition:background .3s ease,transform .3s ease;display:block;margin-left:auto;margin-right:auto;font-weight:500}#backToRoadmaps:hover{background:#888;transform:translateY(-3px)}#about p{font-size:1.15rem;text-align:center;max-width:900px;margin:25px auto;line-height:1.8;color:var(--light-text-color)}footer{text-align:center;padding:30px;background:var(--background-dark);color:#b0b8c0;margin-top:50px;font-size:.95rem;box-shadow:0 -4px 15px #0000001a}#notes .section-description{font-size:1.15rem;color:var(--light-text-color);text-align:center;margin-bottom:40px;max-width:800px;margin-left:auto;margin-right:auto}.notes-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:35px;margin-top:35px}.note-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:15px;overflow:hidden;box-shadow:0 6px 20px var(--shadow-light);transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column}.note-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px var(--shadow-medium)}.note-card img{width:100%;height:200px;object-fit:cover;border-bottom:1px solid var(--border-color);margin-bottom:20px;border-radius:10px 10px 0 0}.note-card-content{padding:25px;flex-grow:1;display:flex;flex-direction:column}.note-card h3{font-size:1.6rem;margin-top:0;margin-bottom:12px;color:var(--primary-color);min-height:60px;font-weight:600}.note-card p{font-size:1rem;color:var(--light-text-color);margin-bottom:12px;flex-grow:1}.note-card .meta{font-size:.9rem;color:#999;margin-bottom:15px}.note-card .read-more{display:inline-block;background:var(--accent-color);color:var(--background-dark);padding:10px 20px;text-decoration:none;border-radius:8px;text-align:center;font-weight:600;transition:background .3s ease,transform .3s ease;margin-top:auto}.note-card .read-more:hover{background:#00a9b0;transform:translateY(-2px)}.notes-controls{text-align:center;margin-bottom:30px}.category-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:20px}.filter-button{background:#eef2f9;color:var(--primary-color);border:1px solid var(--primary-color);padding:10px 18px;border-radius:25px;cursor:pointer;font-size:.95rem;font-weight:500;transition:background .3s ease,color .3s ease,transform .2s ease}.filter-button:hover{background:var(--primary-color);color:#fff;transform:translateY(-2px)}.filter-button.active{background:var(--primary-color);color:#fff;font-weight:600;box-shadow:0 4px 10px #6c63ff4d}.load-more-container{text-align:center;margin-top:40px}.load-more-container .button{padding:15px 30px;font-size:1.1rem;background:var(--accent-color);color:var(--background-dark);border:none;cursor:pointer;font-weight:700;border-radius:50px;text-decoration:none;transition:background .3s ease,transform .3s ease,box-shadow .3s ease;box-shadow:0 5px 15px #00c4cc66;display:block;width:fit-content;margin:0 auto}.load-more-container .button:hover{background:#00a9b0;transform:translateY(-5px);box-shadow:0 8px 20px #00c4cc99}@media (max-width: 1024px){main{padding:30px 20px}section{padding:40px}#hero h2{font-size:3.2rem}.course-card img{height:180px}}@media (max-width: 768px){nav ul{flex-direction:column;gap:15px;margin-top:15px}nav ul li a{font-size:1rem;padding:6px 12px}main{padding:20px 15px}section{padding:30px}section h2{font-size:2.2rem;margin-bottom:25px}#hero{padding:35px 20px}#hero h2{font-size:1.4rem}#hero p{font-size:.6rem;margin-bottom:15px}.button{padding:15px 30px;font-size:.5rem}.course-list,.roadmap-category-list{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}.course-card h3{font-size:1.4rem;min-height:auto}.roadmap-card h3{font-size:1.6rem}#roadmap-detail{padding:30px}#roadmap-detail h3{font-size:2rem}#roadmap-detail-description{font-size:1.05rem;margin-bottom:30px}.roadmap-section{padding-left:20px}.roadmap-section:before{left:-18px;font-size:1.8rem}.roadmap-section h4{font-size:1.6rem}.roadmap-course-item{flex-direction:column;align-items:center;text-align:center;padding:20px}.roadmap-course-item img{margin-right:0;margin-bottom:15px;width:100px;height:60px}.roadmap-course-info h5{font-size:1.2rem}#backToRoadmaps{padding:12px 25px;font-size:1rem}#about p{font-size:1rem}#notes .section-description{font-size:1rem;margin-bottom:30px}.note-card img{height:160px}.note-card h3{font-size:1.4rem;min-height:auto}.note-card-content{padding:20px}header{align-items:center;justify-content:space-between;padding:.8rem 15px;height:60px}header h1{text-align:left;margin-bottom:0;font-size:1.5rem;flex-grow:1;padding-left:10px}.hamburger-menu-button{display:block}.main-nav{position:fixed;top:0;left:-100%;width:70%;max-width:300px;height:100%;background:var(--background-dark);box-shadow:2px 0 10px #0000004d;transition:left .3s ease-out;z-index:999;overflow-y:auto;padding-top:20px}.main-nav.active{left:0}.main-nav ul{flex-direction:column;align-items:flex-start;padding:20px;gap:15px;width:100%}.main-nav ul li a{font-size:1.1rem;padding:10px 0;width:100%;text-align:left;border-radius:0}.main-nav ul li a:hover{background:none;color:var(--accent-color)}.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:998}.overlay.active{display:block}.category-filter{gap:8px}.filter-button{padding:8px 15px;font-size:.85rem}}@media (max-width: 480px){header{padding:1rem 0}header h1{font-size:1.3rem;padding-left:10px}.hamburger-menu-button{font-size:1.8rem}.main-nav{width:80%}.main-nav ul li a{font-size:.9rem}.note-card img{height:140px}.note-card h3{font-size:1.2rem}.note-card p{font-size:.9rem}nav ul li{margin:8px 0}main{padding:15px 10px}section{padding:20px}section h2{font-size:1.3rem}#hero{padding:25px 15px}#hero h2{font-size:1.1rem}#hero p{font-size:.6rem}.button{padding:5px 20px;font-size:.45rem}.course-card,.roadmap-card{padding:15px;margin-bottom:20px}.course-card h3,.roadmap-card h3{font-size:1.1rem}#roadmap-detail{padding:20px}#roadmap-detail h3{font-size:1.6rem}#roadmap-detail-description{font-size:.95rem}.roadmap-section h4{font-size:1.4rem}.roadmap-course-info h5{font-size:1.1rem}.roadmap-course-info p{font-size:.9rem}.roadmap-course-item a{padding:8px 15px;font-size:.9rem}#backToRoadmaps{padding:10px 20px;font-size:.95rem}.category-filter{justify-content:flex-start;overflow-x:auto;white-space:nowrap;padding-bottom:10px}.filter-button{flex-shrink:0}}