/* ===========================================
   충남미래교육원격평생교육원 — Premium Design v3
   =========================================== */

/* ===== TOKENS ===== */
:root {
  /* brand */
  --brand: #6c5ce7;
  --brand-dark: #5a4bd1;
  --brand-deeper: #4834d4;
  --brand-light: #a29bfe;
  --brand-bg: #f0edff;
  --brand-bg2: #ece9ff;

  /* accent */
  --accent: #00cec9;
  --accent-dark: #00b5b1;

  /* semantic */
  --success: #00b894;
  --danger: #d63031;
  --warning: #fdcb6e;
  --info: #74b9ff;

  /* neutrals */
  --n0: #ffffff;
  --n50: #f7f8fc;
  --n100: #eef0f6;
  --n200: #dfe2ed;
  --n300: #c5c9db;
  --n400: #9a9fbf;
  --n500: #6e7394;
  --n600: #4d5170;
  --n700: #353856;
  --n800: #23253b;
  --n900: #141525;

  /* surfaces */
  --surface: #ffffff;
  --surface-dim: #f7f8fc;
  --surface-bright: #ffffff;
  --page-bg: #f4f5fb;

  /* radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 9999px;

  /* shadows */
  --sh-xs: 0 1px 2px rgba(20,21,37,.04);
  --sh-sm: 0 2px 8px rgba(20,21,37,.06);
  --sh-md: 0 4px 20px rgba(20,21,37,.08);
  --sh-lg: 0 8px 40px rgba(20,21,37,.10);
  --sh-xl: 0 16px 56px rgba(20,21,37,.14);
  --sh-brand: 0 4px 24px rgba(108,92,231,.25);
  --sh-brand-lg: 0 8px 40px rgba(108,92,231,.3);

  /* timing */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif;
  color:var(--n800);
  background:var(--page-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
::selection{background:var(--brand-bg);color:var(--brand-dark)}

.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.fade-up{animation:fadeUp .6s var(--ease) both}

/* ===== HEADER ===== */
.header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid rgba(108,92,231,.08);
  transition:box-shadow .3s var(--ease);
}
.header.scrolled{box-shadow:var(--sh-md)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1180px;margin:0 auto;padding:0 24px;height:68px;
}

/* logo */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{
  width:38px;height:38px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  border-radius:12px;
  display:grid;place-items:center;
  box-shadow:0 2px 12px rgba(108,92,231,.35);
  transition:transform .3s var(--ease-bounce);
}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.05)}
.logo-name{font-size:1.08rem;font-weight:800;color:var(--n900);letter-spacing:-.02em}
.logo-name em{font-style:normal;color:var(--brand);font-weight:700;margin-left:1px}

/* nav */
.nav{display:flex;align-items:center;gap:6px}
.nav-links{display:flex;gap:2px}
.nav-links a{
  padding:8px 16px;border-radius:var(--r-sm);
  color:var(--n500);font-weight:600;font-size:.88rem;
  transition:all .2s var(--ease);position:relative;
}
.nav-links a:hover{color:var(--brand);background:var(--brand-bg)}
.nav-links a.active{color:var(--brand);background:var(--brand-bg)}
.nav-badge-admin{
  background:linear-gradient(135deg,#fff3cd,#ffeaa7)!important;
  color:#e17055!important;font-weight:700!important;
}
.nav-auth{display:flex;gap:8px;align-items:center;margin-left:16px;padding-left:16px;border-left:1.5px solid var(--n100)}
.user-chip{display:flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;background:var(--n50);border-radius:var(--r-full);font-size:.85rem;font-weight:600;color:var(--n600)}
.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:700}

.mobile-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--n500);padding:8px;border-radius:var(--r-sm)}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 24px;border-radius:var(--r-sm);
  font-size:.88rem;font-weight:700;border:none;cursor:pointer;
  transition:all .25s var(--ease);font-family:inherit;white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.15),transparent);pointer-events:none;opacity:0;transition:opacity .2s}
.btn:hover::after{opacity:1}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;box-shadow:var(--sh-brand)}
.btn-primary:hover{box-shadow:var(--sh-brand-lg);transform:translateY(-1px)}
.btn-secondary{background:var(--n100);color:var(--n700)}
.btn-secondary:hover{background:var(--n200)}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;box-shadow:0 4px 20px rgba(0,206,201,.3)}
.btn-accent:hover{box-shadow:0 6px 28px rgba(0,206,201,.4);transform:translateY(-1px)}
.btn-danger{background:var(--danger);color:#fff}
.btn-ghost{background:transparent;color:var(--n500)}
.btn-ghost:hover{background:var(--n50);color:var(--n700)}
.btn-outline{background:transparent;border:2px solid var(--brand);color:var(--brand)}
.btn-outline:hover{background:var(--brand);color:#fff;box-shadow:var(--sh-brand)}
.btn-white{background:#fff;color:var(--n800);box-shadow:var(--sh-sm);border:1px solid rgba(255,255,255,.3)}
.btn-white:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.btn-sm{padding:7px 16px;font-size:.82rem;border-radius:var(--r-sm)}
.btn-lg{padding:15px 36px;font-size:.95rem;border-radius:14px}
.btn-block{display:flex;width:100%}

/* ===== HERO ===== */
.hero{
  position:relative;overflow:hidden;
  background:var(--n900);
  padding:100px 0 90px;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 100%, rgba(108,92,231,.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(0,206,201,.2) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(108,92,231,.1) 0%, transparent 50%);
}
.hero-grid-overlay{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:60px 60px;
}
.hero .container{position:relative;z-index:2;text-align:center}
.hero-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 20px 8px 8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-full);
  font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);
  margin-bottom:28px;
  backdrop-filter:blur(12px);
}
.hero-chip-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  animation:pulse 2s ease infinite;
  margin-left:4px;
}
.hero h1{
  font-size:3.6rem;font-weight:900;
  color:#fff;line-height:1.2;letter-spacing:-.04em;
  margin-bottom:20px;
}
.hero h1 .gradient-text{
  background:linear-gradient(135deg,var(--brand-light),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero p{
  font-size:1.12rem;color:rgba(255,255,255,.55);
  max-width:480px;margin:0 auto 40px;line-height:1.8;
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:56px}

.hero-features{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:800px;margin:0 auto;
}
.hero-feature{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md);padding:20px 16px;
  backdrop-filter:blur(12px);
  text-align:center;transition:all .3s var(--ease);
}
.hero-feature:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);transform:translateY(-4px)}
.hero-feature-icon{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;margin:0 auto 12px;
}
.hero-feature-icon.c1{background:linear-gradient(135deg,#6c5ce7,#a29bfe)}
.hero-feature-icon.c2{background:linear-gradient(135deg,#e17055,#fab1a0)}
.hero-feature-icon.c3{background:linear-gradient(135deg,#00cec9,#81ecec)}
.hero-feature-icon.c4{background:linear-gradient(135deg,#fdcb6e,#ffeaa7)}
.hero-feature-icon i,.hero-feature-icon [data-lucide]{color:#fff;width:22px;height:22px}
.hero-feature h4{color:#fff;font-size:.88rem;font-weight:700;margin-bottom:4px}
.hero-feature p{color:rgba(255,255,255,.4);font-size:.78rem;margin:0}

/* ===== SECTIONS ===== */
.section{padding:88px 0}
.section-header{text-align:center;margin-bottom:52px}
.section-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;
  background:var(--brand-bg);color:var(--brand);
  border-radius:var(--r-full);
  font-size:.76rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:14px;
}
.section-title{
  font-size:2.2rem;font-weight:900;
  color:var(--n900);letter-spacing:-.03em;
  margin-bottom:12px;
}
.section-desc{color:var(--n400);font-size:1rem;max-width:480px;margin:0 auto}

/* ===== STATS ===== */
.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin-top:-52px;position:relative;z-index:3;
}
.stat-card{
  background:var(--surface);
  border-radius:var(--r-lg);padding:32px 24px;
  text-align:center;
  box-shadow:var(--sh-md);border:1px solid var(--n100);
  transition:all .3s var(--ease);
}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.stat-num{
  font-size:2.8rem;font-weight:900;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;line-height:1.1;margin-bottom:4px;
}
.stat-label{color:var(--n400);font-size:.88rem;font-weight:500}

/* ===== COURSE CARDS ===== */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}
.course-card{
  background:var(--surface);
  border-radius:var(--r-lg);
  border:1px solid var(--n100);
  overflow:hidden;
  transition:all .4s var(--ease);
  display:block;color:inherit;
}
.course-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--sh-xl);
  border-color:transparent;
}
.course-thumb{
  height:200px;position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.course-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.3));
}
.course-thumb.coding{background:linear-gradient(135deg,#667eea,#764ba2)}
.course-thumb.ai{background:linear-gradient(135deg,#f093fb,#f5576c)}
.course-thumb.curriculum{background:linear-gradient(135deg,#4facfe,#00f2fe)}
.course-thumb.cert{background:linear-gradient(135deg,#43e97b,#38f9d7)}
.course-thumb-icon{
  width:72px;height:72px;border-radius:20px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  display:grid;place-items:center;
  position:relative;z-index:1;
  transition:transform .4s var(--ease-bounce);
}
.course-card:hover .course-thumb-icon{transform:scale(1.1) rotate(-3deg)}
.course-thumb-icon i,.course-thumb-icon [data-lucide]{color:#fff;width:32px;height:32px}
.course-badge{
  position:absolute;top:16px;z-index:2;
  padding:5px 14px;border-radius:var(--r-sm);
  font-size:.72rem;font-weight:800;letter-spacing:.03em;
}
.badge-free{left:16px;background:var(--success);color:#fff}
.badge-level{right:16px;background:rgba(0,0,0,.3);color:#fff;backdrop-filter:blur(8px)}
.course-body{padding:24px}
.course-body .cat{font-size:.76rem;color:var(--brand);font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.course-body h3{font-size:1.1rem;font-weight:800;color:var(--n900);line-height:1.4;margin-bottom:8px;letter-spacing:-.01em}
.course-body .desc{font-size:.86rem;color:var(--n400);line-height:1.6;margin-bottom:20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.course-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:16px;border-top:1px solid var(--n100);
}
.course-foot .dur{font-size:.82rem;color:var(--n400);display:flex;align-items:center;gap:4px}
.course-foot .dur i,.course-foot .dur [data-lucide]{width:14px;height:14px}
.course-foot .price{font-size:1.15rem;font-weight:900;color:var(--n900)}
.course-foot .price.free{color:var(--success)}

/* ===== FILTER ===== */
.filter-bar{display:flex;gap:8px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.filter-btn{
  padding:9px 22px;border-radius:var(--r-full);
  background:var(--surface);border:1.5px solid var(--n200);
  color:var(--n500);font-weight:600;font-size:.86rem;
  cursor:pointer;transition:all .25s var(--ease);font-family:inherit;
}
.filter-btn:hover{border-color:var(--brand);color:var(--brand)}
.filter-btn.active{
  background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:var(--sh-brand);
}

/* ===== NOTICES ===== */
.notice-card{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);border:1px solid var(--n100);overflow:hidden;
}
.notice-list{list-style:none}
.notice-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 28px;border-bottom:1px solid var(--n50);
  transition:background .2s;
}
.notice-item:last-child{border-bottom:none}
.notice-item:hover{background:var(--n50)}
.notice-item a{color:var(--n700);font-weight:500;font-size:.92rem}
.notice-item a:hover{color:var(--brand)}
.notice-item .date{color:var(--n400);font-size:.8rem;white-space:nowrap;margin-left:20px}
.pinned{font-weight:700}
.pinned::before{
  content:"NOTICE";display:inline-block;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;
  font-size:.6rem;font-weight:800;padding:3px 10px;border-radius:4px;
  margin-right:12px;vertical-align:middle;letter-spacing:.06em;
}

/* ===== PAGE HEADER ===== */
.page-header{
  background:var(--n900);color:#fff;
  padding:56px 0;text-align:center;
  position:relative;overflow:hidden;
}
.page-header::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 30% 120%, rgba(108,92,231,.4) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 80% 0%, rgba(0,206,201,.15) 0%, transparent 50%);
}
.page-header h1{font-size:2rem;font-weight:900;position:relative;letter-spacing:-.02em;margin-bottom:6px}
.page-header p{opacity:.5;position:relative;font-size:.92rem}

/* ===== FORMS ===== */
.form-container{
  max-width:460px;margin:56px auto;
  background:var(--surface);padding:48px 40px;
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);
  border:1px solid var(--n100);
}
.form-container h2{font-size:1.5rem;font-weight:900;text-align:center;color:var(--n900);margin-bottom:6px;letter-spacing:-.02em}
.form-subtitle{text-align:center;color:var(--n400);font-size:.88rem;margin-bottom:32px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:.82rem;font-weight:700;color:var(--n600);margin-bottom:8px}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:13px 16px;
  border:1.5px solid var(--n200);border-radius:var(--r-sm);
  font-size:.9rem;font-family:inherit;
  background:var(--n50);color:var(--n800);
  transition:all .25s var(--ease);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 4px var(--brand-bg);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--n300)}
.form-group textarea{resize:vertical;min-height:130px}

.alert{padding:14px 18px;border-radius:var(--r-sm);margin-bottom:20px;font-size:.86rem;font-weight:600}
.alert-error{background:#fef2f2;color:var(--danger);border:1px solid #fecaca}
.alert-success{background:#ecfdf5;color:var(--success);border:1px solid #a7f3d0}
.alert-info{background:var(--brand-bg);color:var(--brand);border:1px solid #c7d2fe}

/* ===== COURSE DETAIL ===== */
.course-detail{padding:48px 0}
.course-detail-grid{display:grid;grid-template-columns:1fr 380px;gap:32px}
.detail-section{
  background:var(--surface);padding:32px;
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  border:1px solid var(--n100);margin-bottom:24px;
}
.detail-section h2{font-size:1.2rem;font-weight:800;margin-bottom:16px;color:var(--n900);display:flex;align-items:center;gap:8px}
.detail-section h2 i,.detail-section h2 [data-lucide]{width:20px;height:20px;color:var(--brand)}
.detail-section p{color:var(--n500);line-height:1.85}
.course-sidebar{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);border:1px solid var(--n100);
  padding:32px;position:sticky;top:88px;height:fit-content;
}
.sidebar-price{font-size:2.2rem;font-weight:900;color:var(--n900);margin-bottom:24px;letter-spacing:-.03em}
.sidebar-price.free{color:var(--success)}
.sidebar-info{list-style:none;margin-bottom:24px}
.sidebar-info li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--n100);font-size:.88rem;color:var(--n400)}
.sidebar-info li:last-child{border-bottom:none}
.sidebar-info li strong{color:var(--n800);font-weight:700}

/* curriculum */
.curriculum-list{list-style:none}
.curriculum-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;border:1.5px solid var(--n200);
  border-radius:var(--r-sm);margin-bottom:8px;
  background:var(--surface);transition:all .25s var(--ease);
}
.curriculum-item:hover{border-color:var(--brand);background:var(--brand-bg);transform:translateX(4px)}
.curriculum-num{
  width:34px;height:34px;border-radius:10px;
  background:var(--brand-bg);color:var(--brand);
  display:grid;place-items:center;font-weight:800;font-size:.82rem;flex-shrink:0;
}
.curriculum-title{flex:1;font-weight:500;font-size:.9rem}
.curriculum-duration{color:var(--n400);font-size:.8rem}

/* ===== MYPAGE ===== */
.mypage-grid{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:40px 0}
.mypage-sidebar{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);border:1px solid var(--n100);
  padding:28px;height:fit-content;
}
.mypage-sidebar h3{font-size:1rem;font-weight:800;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--brand);color:var(--n900)}
.mypage-menu{list-style:none}
.mypage-menu li a{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px;border-radius:var(--r-sm);
  color:var(--n500);font-weight:600;font-size:.88rem;
  transition:all .2s var(--ease);
}
.mypage-menu li a:hover{background:var(--n50);color:var(--n700)}
.mypage-menu li a.active{background:var(--brand-bg);color:var(--brand)}

.enrollment-card{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);border:1px solid var(--n100);
  padding:24px;margin-bottom:16px;transition:all .25s var(--ease);
}
.enrollment-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.enrollment-card h4{font-size:1rem;font-weight:800;margin-bottom:4px;color:var(--n900)}
.enrollment-card .meta{font-size:.8rem;color:var(--n400);margin-bottom:10px}

.progress-bar{height:8px;background:var(--n100);border-radius:4px;overflow:hidden;margin-top:10px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--accent));border-radius:4px;transition:width .6s var(--ease)}
.progress-text{font-size:.78rem;color:var(--n400);margin-top:6px}

/* learn */
.learn-layout{display:grid;grid-template-columns:320px 1fr;gap:32px;padding:32px 0}
.learn-sidebar{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-sm);border:1px solid var(--n100);padding:24px;height:fit-content}
.lesson-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;transition:all .2s var(--ease)}
.lesson-item:hover{background:var(--n50)}
.lesson-item.completed{opacity:.5}
.lesson-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--n300);flex-shrink:0;transition:all .2s}
.lesson-item.completed .lesson-check{background:var(--success);border-color:var(--success)}

/* ===== TABLES ===== */
.table-container{overflow-x:auto;border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);border:1px solid var(--n100)}
th,td{padding:14px 18px;text-align:left;font-size:.86rem}
th{background:var(--n50);font-weight:800;color:var(--n500);white-space:nowrap;text-transform:uppercase;font-size:.74rem;letter-spacing:.06em}
td{border-bottom:1px solid var(--n50);color:var(--n600)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--n50)}

/* ===== ADMIN ===== */
.admin-layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 68px)}
.admin-sidebar{background:var(--n900);padding:28px 0}
.admin-sidebar h3{color:rgba(255,255,255,.35);font-size:.7rem;padding:0 24px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.admin-menu{list-style:none}
.admin-menu li a{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,.5);font-weight:600;transition:all .2s;font-size:.88rem}
.admin-menu li a:hover{background:rgba(255,255,255,.06);color:#fff}
.admin-menu li a.active{background:rgba(108,92,231,.2);color:var(--brand-light)}
.admin-content{padding:36px 40px;background:var(--page-bg)}
.admin-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px}
.admin-card{
  background:var(--surface);padding:28px;border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);border:1px solid var(--n100);
  text-align:center;transition:all .25s var(--ease);
}
.admin-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.admin-card h4{color:var(--n400);font-size:.78rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.admin-card .num{
  font-size:2.2rem;font-weight:900;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ===== FAQ ===== */
.faq-item{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);border:1px solid var(--n100);
  margin-bottom:12px;overflow:hidden;
}
.faq-question{
  padding:22px 28px;font-weight:700;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  transition:all .2s;font-size:.95rem;color:var(--n800);
}
.faq-question:hover{background:var(--n50)}
.faq-question::after{
  content:"+";width:30px;height:30px;border-radius:50%;
  background:var(--n100);display:grid;place-items:center;
  font-size:1.2rem;color:var(--n400);transition:all .3s;flex-shrink:0;
}
.faq-item.open .faq-question::after{transform:rotate(45deg);background:var(--brand-bg);color:var(--brand)}
.faq-answer{padding:0 28px;max-height:0;overflow:hidden;transition:all .35s ease;color:var(--n500);line-height:1.85}
.faq-item.open .faq-answer{padding:0 28px 22px;max-height:500px}

/* ===== ABOUT ===== */
.about-section{text-align:center;padding:80px 0}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.about-card{
  background:var(--surface);padding:44px 28px;
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  border:1px solid var(--n100);transition:all .35s var(--ease);
}
.about-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.about-icon{
  width:72px;height:72px;border-radius:20px;
  display:grid;place-items:center;margin:0 auto 20px;
}
.about-icon i,.about-icon [data-lucide]{color:#fff;width:30px;height:30px}
.about-icon.coding{background:linear-gradient(135deg,#667eea,#764ba2)}
.about-icon.ai{background:linear-gradient(135deg,#f093fb,#f5576c)}
.about-icon.edu{background:linear-gradient(135deg,#4facfe,#00f2fe)}
.about-card h3{font-size:1.1rem;font-weight:800;margin-bottom:10px;color:var(--n900)}
.about-card p{color:var(--n400);font-size:.88rem;line-height:1.7}

.timeline{max-width:640px;margin:0 auto}
.timeline-item{display:flex;gap:20px;margin-bottom:24px}
.timeline-year{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;padding:8px 22px;border-radius:var(--r-full);font-weight:800;font-size:.88rem;white-space:nowrap;height:fit-content;box-shadow:var(--sh-brand)}
.timeline-content h4{font-weight:800;color:var(--n900);margin-bottom:4px}
.timeline-content p{color:var(--n400);font-size:.88rem}

/* ===== SEARCH ===== */
.search-box{display:flex;gap:8px;max-width:520px;margin:0 auto 32px}
.search-box input{
  flex:1;padding:13px 18px;
  border:1.5px solid var(--n200);border-radius:var(--r-sm);
  font-size:.9rem;background:var(--surface);font-family:inherit;
  transition:all .25s var(--ease);
}
.search-box input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-bg)}

/* ===== FOOTER ===== */
.footer{
  background:var(--n900);color:rgba(255,255,255,.45);
  padding:60px 0 0;margin-top:80px;
}
.footer-top{display:grid;grid-template-columns:1.5fr 2fr;gap:48px;padding-bottom:40px}
.footer-brand p{font-size:.85rem;line-height:1.9;margin-top:4px}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.footer h4{color:#fff;font-size:.85rem;margin-bottom:16px;font-weight:700}
.footer ul{list-style:none}
.footer ul li{margin-bottom:10px}
.footer ul li a,.footer ul li{color:rgba(255,255,255,.4);font-size:.84rem;transition:color .2s}
.footer ul li a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:20px 0;text-align:center}
.footer-bottom p{font-size:.78rem;color:rgba(255,255,255,.25)}

/* ===== BANNER SLIDER ===== */
.banner-slider{position:relative;overflow:hidden;height:220px}
.banner-track{display:flex;height:100%;transition:transform .5s var(--ease)}
.banner-slide{
  min-width:100%;height:100%;display:flex;align-items:center;
  position:relative;color:#fff;overflow:hidden;
}
.banner-slide h2{font-size:1.8rem;font-weight:900;margin-bottom:8px;letter-spacing:-.02em}
.banner-slide p{font-size:1rem;opacity:.75;max-width:500px}
.banner-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.banner-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;transition:all .3s}
.banner-dot.active{background:#fff;width:28px;border-radius:5px}
.banner-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  border:none;color:#fff;width:44px;height:44px;border-radius:50%;
  cursor:pointer;display:grid;place-items:center;transition:all .25s;
}
.banner-arrow:hover{background:rgba(255,255,255,.3)}
.banner-prev{left:16px}
.banner-next{right:16px}
@media(max-width:768px){
  .banner-slider{height:160px}
  .banner-slide h2{font-size:1.2rem}
  .banner-slide p{font-size:.85rem}
  .banner-arrow{display:none}
}

/* ===== KAKAO WIDGET ===== */
.kakao-widget{
  position:fixed;bottom:28px;right:28px;z-index:999;
  width:60px;height:60px;border-radius:50%;
  background:#FEE500;
  display:grid;place-items:center;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  transition:all .3s var(--ease);
}
.kakao-widget:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(0,0,0,.2)}

/* ===== EMPTY ===== */
.empty-state{text-align:center;padding:80px 20px;color:var(--n400)}
.empty-state p{font-size:1rem;margin-bottom:16px}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .course-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .course-detail-grid{grid-template-columns:1fr}
  .admin-cards{grid-template-columns:repeat(2,1fr)}
  .hero-features{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr}
}
@media(max-width:768px){
  .mobile-toggle{display:flex;align-items:center;justify-content:center}
  .nav{
    display:none;position:absolute;top:68px;left:0;right:0;
    background:rgba(255,255,255,.97);backdrop-filter:blur(24px);
    flex-direction:column;padding:16px;gap:8px;
    border-bottom:1px solid var(--n100);box-shadow:var(--sh-lg);
  }
  .nav.open{display:flex}
  .nav-links{flex-direction:column;width:100%}
  .nav-links a{padding:12px 16px;width:100%}
  .nav-auth{flex-direction:column;width:100%;margin-left:0;padding-left:0;border-left:none;padding-top:12px;border-top:1px solid var(--n100);margin-top:4px}
  .nav-auth a,.nav-auth .btn{width:100%;text-align:center}

  .hero{padding:60px 0 50px}
  .hero h1{font-size:2rem}
  .hero p{font-size:.95rem}
  .hero-features{grid-template-columns:repeat(2,1fr);gap:10px}
  .hero-feature{padding:16px 12px}

  .section{padding:48px 0}
  .section-title{font-size:1.5rem}
  .stats-row{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:-36px}
  .stat-card{padding:24px 16px}
  .stat-num{font-size:2rem}

  .course-grid{grid-template-columns:1fr}
  .mypage-grid{grid-template-columns:1fr}
  .learn-layout{grid-template-columns:1fr}
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{display:none}
  .admin-content{padding:20px 16px}
  .about-grid{grid-template-columns:1fr}
  .footer-links{grid-template-columns:1fr;gap:24px}
  .form-container{margin:24px 16px;padding:32px 24px;border-radius:var(--r-lg)}
  .page-header{padding:36px 0}
  .page-header h1{font-size:1.5rem}
}