:root{--bg:#f5f7fb;--card:#fff;--text:#172033;--muted:#64748b;--line:#dbe2ea;--brand:#2563eb;--brand2:#0f766e;--soft:#eef4ff;--shadow:0 12px 35px rgba(15,23,42,.08)}
[data-theme="dark"]{--bg:#0b1020;--card:#121a2d;--text:#e8eef8;--muted:#9ba9be;--line:#26324b;--brand:#7aa2ff;--brand2:#5eead4;--soft:#101c34;--shadow:0 12px 35px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,"Noto Sans KR",Arial,sans-serif;line-height:1.6}a{color:inherit}.container{max-width:1220px;margin:auto;padding:0 24px}.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--card) 93%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.top-inner{height:68px;display:flex;align-items:center;gap:18px}.brand{font-weight:850;text-decoration:none;font-size:18px}.brand span{color:var(--brand)}.nav{display:flex;gap:4px;margin-left:auto}.nav a,.btn{border:1px solid transparent;padding:9px 12px;border-radius:10px;text-decoration:none;font-size:14px}.nav a:hover,.btn:hover{background:var(--soft)}.theme{border:1px solid var(--line);background:var(--card);color:var(--text);padding:8px 11px;border-radius:10px;cursor:pointer}.hero{padding:56px 0 36px}.hero-box{position:relative;overflow:hidden;color:#fff;border-radius:24px;padding:56px 52px 44px;background:radial-gradient(120% 140% at 88% -20%,rgba(45,212,191,.30),transparent 55%),radial-gradient(110% 130% at 8% 0%,rgba(59,130,246,.42),transparent 58%),linear-gradient(168deg,#111c34 0%,#0b1220 100%);box-shadow:0 24px 60px -20px rgba(15,23,42,.55)}
.hero-box::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(255,255,255,.10)}
.hero-box::before{content:"";position:absolute;left:-10%;top:-60%;width:60%;height:160%;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,.07),transparent 60%);transform:rotate(8deg)}.hero h1{position:relative;font-size:clamp(23px,3vw,39px);line-height:1.32;margin:16px 0 0;letter-spacing:-.02em;font-weight:800;background:linear-gradient(180deg,#fff 30%,#c7d7f5);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .em{-webkit-text-fill-color:initial;color:initial;background:none;margin-left:.15em;letter-spacing:0}.hero-eyebrow{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.16em;color:rgba(226,240,255,.72)}
.hero-eyebrow::before{content:"";width:22px;height:1px;background:rgba(255,255,255,.45)}.metrics{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}.metric{padding:0 22px}
.metric+.metric{border-left:1px solid rgba(255,255,255,.12)}
.metric:first-child{padding-left:0}
.metric span{font-size:12.5px;color:rgba(226,240,255,.66);letter-spacing:.01em}.metric strong{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:4px;font-variant-numeric:tabular-nums}.section{padding:28px 0}.section-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:16px}.section h2{font-size:29px;margin:0}.muted{color:var(--muted)}.searchbar{display:flex;gap:10px}.searchbar input{width:min(520px,70vw);border:1px solid var(--line);background:var(--card);color:var(--text);padding:12px 14px;border-radius:12px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 5px 18px rgba(15,23,42,.035)}.course-card{display:flex;flex-direction:column;min-height:280px}.course-icon{font-size:32px}.badge{display:inline-flex;align-items:center;width:max-content;padding:4px 8px;border-radius:999px;background:var(--soft);color:var(--brand);font-size:12px;font-weight:800}.course-card h3{font-size:21px;margin:10px 0 6px}.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.tag{border:1px solid var(--line);border-radius:999px;padding:4px 8px;font-size:11px;color:var(--muted)}.card-footer{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:10px}.card-footer a{color:var(--brand);text-decoration:none;font-weight:800}.status-template{opacity:.72}.track{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}.path{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}.path span{background:var(--soft);border-radius:10px;padding:8px 10px;font-weight:700;font-size:13px}.path i{color:var(--muted)}.result{display:block;text-decoration:none;border-bottom:1px solid var(--line);padding:13px 3px}.result:last-child{border:0}.result small{color:var(--brand);font-weight:750}.result strong{display:block;margin-top:3px}.progress{height:8px;border-radius:999px;background:var(--line);overflow:hidden}.progress i{display:block;height:100%;background:var(--brand);width:0}.continue-box{display:none}.footer{border-top:1px solid var(--line);margin-top:35px;padding:30px 0 50px;color:var(--muted);font-size:13px}.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:16px}.chapter-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.chapter-link{border:1px solid var(--line);background:var(--card);padding:12px 14px;border-radius:12px;text-decoration:none}.chapter-link small{color:var(--brand);font-weight:800;display:block}.chapter-link:hover{border-color:var(--brand)}.course-hero{padding:40px 0 20px}.course-hero .card{padding:32px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.actions a{background:var(--brand);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:750}.actions a.secondary{background:var(--card);color:var(--text);border:1px solid var(--line)}.callout{border-left:4px solid var(--brand);background:var(--soft);padding:14px 16px;border-radius:10px}.code{background:#0b1220;color:#e5edf7;border-radius:14px;padding:16px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;white-space:pre}.toc-group{margin-bottom:18px}.toc-group h3{margin:0 0 8px;color:var(--brand)}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}.chapter-list{grid-template-columns:1fr}.nav{display:none}.metrics{grid-template-columns:1fr 1fr;row-gap:22px}.metric:nth-child(odd){padding-left:0}.metric:nth-child(3){border-left:0}}
@media(max-width:600px){.grid{grid-template-columns:1fr}.container{padding:0 16px}.hero{padding-top:24px}.hero-box{padding:32px 24px 28px;border-radius:20px}.metrics{margin-top:28px;padding-top:20px}.metric strong{font-size:25px}.section-head{display:block}.searchbar input{width:100%;margin-top:10px}}

/* 운영자 전용 요소. 기본은 숨기고, learning.js가 강사 세션일 때만 속성을 제거해 드러낸다.
   깜빡임 없이 감추기 위해 JS가 아니라 CSS로 먼저 숨긴다. */
[data-admin-only]{display:none!important}

/* 표 — app.css를 쓰는 교재·문서·대시보드 공통.
   자체 스타일을 가진 교재(spring-ai, oracle-db-sql, msa)와 같은 형태로 맞춘다. */
.table-wrap{overflow-x:auto;margin:16px 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{border:1px solid var(--line);padding:10px 12px;vertical-align:top;text-align:left;line-height:1.55}
th{background:var(--soft);font-weight:700;white-space:nowrap}
td code,th code{white-space:nowrap}
/* 좁은 화면에서는 표가 가로로 스크롤된다. 본문이 밀리지 않게 한다. */
@media(max-width:600px){
  table{font-size:13px}
  th,td{padding:8px 10px}
}

/* 폼 — 로그인 등 입력 화면 공통 */
.form{display:grid;gap:16px;margin-top:22px}
.field{display:grid;gap:7px}
.field>label{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.field .hint{font-size:12px;color:var(--muted);font-weight:400}
.field input{
  width:100%;box-sizing:border-box;
  padding:13px 14px;font-size:15px;line-height:1.4;
  color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-radius:11px;
  outline:none;transition:border-color .15s,box-shadow .15s,background .15s;
}
.field input::placeholder{color:var(--muted);opacity:.85}
.field input:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.field input:focus{
  border-color:var(--brand);background:var(--card);
  /* 두께가 아니라 그림자로 초점을 표시해 레이아웃이 밀리지 않는다 */
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);
}
/* 사용자가 입력을 시도한 뒤에만 오류 표시. 처음부터 빨갛게 만들지 않는다. */
.field input:user-invalid{border-color:#ef4444}
.field input:user-invalid:focus{box-shadow:0 0 0 3px color-mix(in srgb,#ef4444 18%,transparent)}

/* 비밀번호 보기/숨기기 */
.field .with-toggle{position:relative}
.field .with-toggle input{padding-right:52px}
.field .toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:12px;font-weight:700;padding:8px 10px;border-radius:8px;
}
.field .toggle:hover{color:var(--brand);background:var(--soft)}

.form .submit{
  width:100%;margin-top:4px;padding:13px 16px;
  font-size:15px;font-weight:700;color:#fff;
  background:var(--brand);border:0;border-radius:11px;cursor:pointer;
  transition:filter .15s,transform .05s;
}
.form .submit:hover:not(:disabled){filter:brightness(1.08)}
.form .submit:active:not(:disabled){transform:translateY(1px)}
.form .submit:disabled{opacity:.6;cursor:progress}

.form-msg{margin-top:12px;min-height:1.3em;font-size:13.5px;color:var(--muted)}
.form-msg.error{color:#ef4444;font-weight:600}

/* 과목 카탈로그 — 카테고리별 그룹 */
.cat-group{margin-top:26px}
.cat-group:first-child{margin-top:8px}
.cat-head{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.cat-head h3{margin:0;font-size:17px;letter-spacing:-.01em}
.cat-head .muted{font-size:12.5px}

/* 히어로 격언 — 방문할 때마다 다른 문구가 나온다 */
.hero-quote{position:relative;margin:18px 0 0;padding:0 0 0 clamp(30px,3.4vw,46px)}
.hero-quote::before{content:"\201C";position:absolute;left:-4px;top:clamp(-24px,-1.6vw,-10px);
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(72px,8vw,116px);line-height:1;
  color:rgba(255,255,255,.16);pointer-events:none}
.hero-quote .quote-text{margin:0;font-size:clamp(21px,2.7vw,35px);line-height:1.4;
  letter-spacing:-.02em;font-weight:800;word-break:keep-all;
  background:linear-gradient(180deg,#fff 30%,#c7d7f5);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero-quote .quote-by{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.hero-quote .quote-name{font-size:14.5px;font-weight:750;color:rgba(226,240,255,.94)}
.hero-quote .quote-name::before{content:"";display:inline-block;width:20px;height:1px;
  vertical-align:middle;margin-right:10px;background:rgba(255,255,255,.42)}
.hero-quote .quote-role{font-size:12px;font-weight:700;letter-spacing:.02em;
  color:rgba(226,240,255,.68);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:3px 9px}
@media(max-width:600px){
  .hero-quote{padding-left:0}
  .hero-quote::before{position:static;display:block;font-size:56px;height:34px}
}

/* 과목 카탈로그 — 카테고리 칩 */
.catbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.catchip-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--card);color:var(--text);border-radius:999px;padding:7px 14px;
  font-size:13px;font-weight:650;cursor:pointer;transition:border-color .12s,color .12s}
.catchip-btn span{font-size:11.5px;font-weight:700;color:var(--muted);
  background:var(--soft);border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.catchip-btn:hover{border-color:var(--brand);color:var(--brand)}
.catchip-btn.on{border-color:var(--brand);background:var(--brand);color:#fff}
.catchip-btn.on span{background:rgba(255,255,255,.24);color:#fff}
/* 카드가 한둘일 때 남은 칸을 늘려 채우지 않고 폭을 유지한다 */
.grid{justify-content:start}
.grid>*{min-width:0}
@media (max-width:1080px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.grid{grid-template-columns:1fr}}

/* 통합검색을 페이지 맨 위에 둔다. 상단 여백만 줄여 헤더에 붙인다 */
.search-top{padding:18px 0 6px}
.search-top .section-head{margin-bottom:12px}
.search-top + .hero,.container:has(.search-top) + .hero{padding-top:34px}