
:root{
  --bg:#f3f7fb;
  --bg-soft:#eef4fb;
  --panel:#ffffff;
  --panel2:#f8fbff;
  --panel3:#edf4ff;
  --text:#1f2937;
  --muted:#5b6472;
  --line:#d7e3f4;
  --accent:#2563eb;
  --accent-strong:#1d4ed8;
  --accent-soft:#dbeafe;
  --accent2:#0f766e;
  --warn:#b45309;
  --warn-bg:#fff7ed;
  --pink:#be185d;
  --pink-bg:#fdf2f8;
  --shadow:0 14px 34px rgba(37,99,235,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  background:linear-gradient(180deg,#f7fbff 0%, #f1f6fc 100%);
  color:var(--text);
  line-height:1.72;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:none;color:var(--accent-strong)}
.wrap{max-width:1180px;margin:0 auto;padding:28px 24px}
.hero{
  background:linear-gradient(180deg,#ffffff 0%, #eef5ff 100%);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 30px rgba(37,99,235,.06);
}
.hero .kicker{
  display:inline-block;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  margin-bottom:10px;
}
.hero h1{margin:0 0 12px;font-size:2.05rem;line-height:1.24;color:#0f172a}
.hero p{margin:0;color:var(--muted)}
.hero .subline{margin-top:10px;max-width:940px}
.hero .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hero .chip,.badge{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  background:var(--accent-soft);
  border:1px solid #bfdbfe;
  color:#1e3a8a;
  padding:5px 12px;
  border-radius:999px;
  font-size:.84rem;
  font-weight:700;
}
.badge.green,.chip.green{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.badge.warn,.chip.warn{background:var(--warn-bg);border-color:#fed7aa;color:var(--warn)}
.badge.pink,.chip.pink{background:var(--pink-bg);border-color:#fbcfe8;color:var(--pink)}
.nav-row{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 18px;
  border:1px solid #bcd0ee;
  border-radius:14px;
  background:#ffffff;
  color:#1e3a8a;
  font-weight:700;
  box-shadow:0 8px 18px rgba(30,64,175,.08);
}
.nav-link:hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:22px 0}
.meta .box,.card,.section-card,details,.callout{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.meta .box{padding:18px}
.notice{
  background:linear-gradient(180deg,#f8fbff 0%, #edf5ff 100%);
  border:1px solid #c7dbfb;
  padding:18px 20px;
  border-radius:18px;
  margin:20px 0;
  color:#1e3a8a;
  box-shadow:var(--shadow);
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{padding:18px;min-height:160px}
.card h3{margin:0 0 8px;font-size:1.06rem;line-height:1.45;color:#0f172a}
.small{font-size:.94rem;color:var(--muted)}
.kicker-num{display:inline-block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:8px}
.section-card{padding:20px;margin:18px 0}
.panel-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.panel{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 8px 20px rgba(15,23,42,.04)}
.panel h4{margin:0 0 8px;color:#0f172a}
.panel p{margin:8px 0 0}
.tree{margin:0;padding-left:18px}
.tree li{margin:8px 0}
.tree .node{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.tree .hint{color:var(--muted);font-size:.9rem}
details{padding:14px 16px;margin:12px 0;background:#ffffff}
summary{cursor:pointer;font-weight:700;color:#0f172a}
footer{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.breadcrumb{font-size:.93rem;color:var(--muted);margin:10px 0 18px}
.back{display:inline-block;margin-bottom:10px}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:.95rem;vertical-align:top}
th{background:#eff6ff;color:#1e3a8a}
code{background:#eff6ff;border:1px solid #dbeafe;padding:2px 6px;border-radius:8px}
ul,ol{padding-left:22px}
ol.steps{padding-left:0;list-style:none;counter-reset:step}
ol.steps li{counter-increment:step;padding:14px 14px 14px 56px;position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:16px;margin:10px 0}
ol.steps li:before{content:counter(step);position:absolute;left:14px;top:14px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#dbeafe;border:1px solid #93c5fd;color:#1e3a8a;font-weight:700}
.lead{font-size:1.05rem;color:#334155}
hr.soft{border:none;border-top:1px solid var(--line);margin:20px 0}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.related-card{display:block;padding:15px;border:1px solid var(--line);border-radius:16px;background:#ffffff;color:var(--text);box-shadow:0 8px 18px rgba(15,23,42,.04)}
.related-card h4{margin:0 0 6px;font-size:1rem;color:#0f172a}
.related-card p{margin:0;color:var(--muted);font-size:.92rem}
.callout{padding:18px 20px;background:linear-gradient(180deg,#f7fbff 0%, #eef5ff 100%)}
.callout h3{margin:0 0 8px;font-size:1.12rem;color:#0f172a}
.note{color:var(--muted);font-size:.9rem}
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media (max-width: 860px){.two-col{grid-template-columns:1fr}.wrap{padding:22px 16px}.hero h1{font-size:1.72rem}.nav-link{width:100%}}
blockquote{margin:0;padding:14px 16px;background:#f8fbff;border-left:4px solid var(--accent);border-radius:12px}
.section-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.section-header h2{margin:0}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stats .stat{background:var(--panel2);border:1px solid var(--line);padding:10px 12px;border-radius:12px;min-width:110px;box-shadow:0 8px 18px rgba(15,23,42,.04)}
.hero-note,.course-highlight,.track-grid,.track-card,.mini-links,.inline-list,.inline-pill{display:none}
