:root {
    --hufs: #00205b;
    --hufs-2: #123a7d;
    --accent: #c8102e;
    --ink: #1d2430;
    --muted: #5b6473;
    --line: #e3e7ee;
    --bg: #f5f7fa;
    --card: #fff;
    --radius: 12px;
    --shadow: 0 4px 20px rgba(0, 32, 91, 0.05);
    --shadow-hover: 0 8px 30px rgba(0, 32, 91, 0.08);

    /* 2027 개편 이수체계 테마 변수 */
    --navy: #122B54;
    --navy-2: #1B3A6B;
    --cink: #22304a;
    --cmuted: #66738c;
    --ccard: #fff;
    --cline: #dde4ef;
    --ai: #7A2FB5;
    --ai-bg: #F5EDFC;
    --ai-line: #DCC3F0;
    --scc: #1D5FBF;
    --sc-bg: #EAF2FD;
    --sc-line: #BFD6F5;
    --hwc: #C75612;
    --hw-bg: #FCF0E6;
    --hw-line: #F0CFB0;
    --req: #8a6d00;
    --req-bg: #FFF3C4;
    --core: #5b4a9e;
    --core-bg: #E9E4F8;
    --ge: #5a6472;
    --ge-bg: #EDF0F4;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: "Outfit", "Noto Sans KR", sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.6;
    font-size: 15px;
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
  }

  /* Header */
  header {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  }

  .head-wrap {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    flex: 0 0 auto;
    cursor: pointer;
  }

  .brand .mark {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--hufs);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .5px;
  }

  .brand .txt b {
    display: block;
    font-size: 18px;
    color: var(--hufs);
    letter-spacing: -.5px;
  }

  .brand .txt span {
    display: block;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .6px;
    font-weight: 600;
  }

  .nav-right {
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--hufs-2);
  }

  /* Main Container */
  main {
    min-height: 80vh;
  }

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

  .pagehead {
    background: linear-gradient(135deg, var(--hufs), var(--hufs-2));
    color: #fff;
    padding: 50px 0 45px;
    position: relative;
    overflow: hidden;
  }

  .pagehead::after {
    content: "AI · ROBOTICS";
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 80px;
    font-weight: 900;
    color: rgba(255, 255, 255, .03);
    z-index: 1;
    letter-spacing: -2px;
    pointer-events: none;
  }

  .pagehead h1 {
    font-size: 32px;
    letter-spacing: -.5px;
    position: relative;
    z-index: 2;
  }

  .breadcrumb {
    margin-top: 10px;
    font-size: 13.5px;
    color: #b9c6e0;
    position: relative;
    z-index: 2;
  }

  .breadcrumb a:hover {
    color: #fff;
  }

  .breadcrumb span {
    margin: 0 8px;
    opacity: .6;
  }

  /* Content Styling */
  .content {
    background: transparent;
    padding: 30px 0 60px;
    margin: 0;
    box-shadow: none;
  }

  .content-title {
    font-size: 24px;
    color: var(--hufs);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--hufs);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .content-title::before {
    content: "";
    width: 6px;
    height: 24px;
    background: var(--accent);
    border-radius: 3px;
  }

  .content-desc {
    font-size: 15px;
    color: #39424f;
    margin-bottom: 30px;
    line-height: 1.7;
  }

  .placeholder-badge {
    display: inline-block;
    background: #fff4e5;
    color: #b26a00;
    border: 1px solid #ffd699;
    font-size: 11.5px;
    padding: 3px 12px;
    border-radius: 20px;
    margin-left: 10px;
    vertical-align: middle;
    font-weight: 600;
  }

  .note {
    background: #eef2f8;
    border-left: 4px solid var(--hufs);
    padding: 15px 18px;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: #39424f;
    margin: 20px 0;
  }

  /* ===== 2027 개편 이수체계 (독립 네임스페이스 cx-) ===== */
  .cx-root {
    color: var(--cink);
    font-size: 14px;
  }

  .cx-axes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 24px 0;
  }

  .cx-axis-pill {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid var(--cline);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .cx-axis-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
  }

  .cx-axis-pill .cx-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
  }

  .cx-axis-pill span {
    display: block;
    width: 100%;
  }

  .cx-axis-pill small {
    display: block;
    font-weight: 400;
    font-size: 11.5px;
    color: var(--cmuted);
    margin-top: 4px;
    line-height: 1.4;
  }

  .cx-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 15px;
  }

  .cx-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    font-size: 12.5px;
    color: var(--cmuted);
  }

  .cx-lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .cx-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 8px;
    line-height: 1.4;
  }

  .cx-tag.req { background: var(--req-bg); color: var(--req); }
  .cx-tag.core { background: var(--core-bg); color: var(--core); }
  .cx-tag.ge { background: var(--ge-bg); color: var(--ge); }
  .cx-tag.new { background: #E4F4E9; color: #177A3E; }
  .cx-tag.chg { background: #E7F0FC; color: #1D5FBF; }
  .cx-tag.mov { background: #FDECEC; color: #B4232A; }
  .cx-tag.tbd { background: #fff; color: #B4232A; border: 1px dashed #E39399; }

  .cx-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    user-select: none;
  }

  .cx-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--navy);
    cursor: pointer;
  }

  .cx-scroll {
    overflow-x: auto;
    padding-bottom: 10px;
    margin-top: 15px;
    border: 1px solid var(--cline);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.02);
  }

  /* Custom Scrollbar */
  .cx-scroll::-webkit-scrollbar {
    height: 8px;
  }
  .cx-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
  }
  .cx-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }
  .cx-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

  table.cx-cur {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 1180px;
    background: var(--ccard);
  }

  table.cx-cur th, table.cx-cur td {
    border-right: 1px solid var(--cline);
    border-bottom: 1px solid var(--cline);
    vertical-align: top;
  }

  table.cx-cur th:last-child, table.cx-cur td:last-child {
    border-right: none;
  }

  .cx-cur tr.cx-yr th {
    background: var(--navy);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 6px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .cx-cur tr.cx-sem th {
    background: #EDF2FA;
    color: var(--navy-2);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 6px;
    text-align: center;
  }

  .cx-cur th.cx-trackhead {
    background: #fff;
  }

  .cx-cur td.cx-track {
    width: 118px;
    min-width: 118px;
    padding: 14px 10px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
  }

  .cx-cur td.cx-track small {
    display: block;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .03em;
    margin-top: 6px;
    opacity: .75;
  }

  .cx-cur td.cx-track.t-ai { background: var(--ai-bg); color: var(--ai); box-shadow: inset 4px 0 0 var(--ai); }
  .cx-cur td.cx-track.t-sc { background: var(--sc-bg); color: var(--scc); box-shadow: inset 4px 0 0 var(--scc); }
  .cx-cur td.cx-track.t-hw { background: var(--hw-bg); color: var(--hwc); box-shadow: inset 4px 0 0 var(--hwc); }
  .cx-cur td.cx-track.t-cap { background: #EDF1F8; color: var(--navy); box-shadow: inset 4px 0 0 var(--navy); }

  .cx-cur td.cx-cell {
    padding: 10px 8px;
    min-width: 128px;
  }

  .cx-course {
    border: 1.5px solid var(--cline);
    border-radius: 9px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  }

  .cx-course:last-child {
    margin-bottom: 0;
  }

  .cx-course:hover {
    transform: scale(1.02);
  }

  .cx-course .cx-tags {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
  }

  .cx-course .cx-old {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--cmuted);
    margin-top: 4px;
    line-height: 1.3;
  }

  .cx-cur tr[data-track="ai"] .cx-course { border-color: var(--ai-line); background: #FDFBFF; }
  .cx-cur tr[data-track="sc"] .cx-course { border-color: var(--sc-line); background: #FBFDFF; }
  .cx-cur tr[data-track="hw"] .cx-course { border-color: var(--hw-line); background: #FFFDFB; }
  .cx-cur tr[data-track="cap"] .cx-course { border-color: #C7D3E8; background: #FBFCFE; }

  .cx-course.tbd {
    border-style: dashed;
    background: repeating-linear-gradient(45deg, #fff, #fff 6px, #FBF5F5 6px, #FBF5F5 12px);
  }

  .cx-root.hide-tbd .cx-course.tbd {
    opacity: .28;
    filter: grayscale(.6);
  }

  .cx-note {
    font-size: 13px;
    color: var(--cmuted);
    margin: 15px 2px 0;
  }

  .cx-note b {
    color: #44506a;
  }

  .cx-sec {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
  }

  .cx-sec h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }

  .cx-sec h2::before {
    content: "";
    width: 6px;
    height: 22px;
    border-radius: 3px;
    background: var(--navy);
  }

  .cx-lead {
    margin: 8px 0 20px;
    font-size: 14px;
    color: #44506a;
    max-width: 920px;
  }

  .cx-sylg {
    margin-top: 35px;
  }

  .cx-sylg h3 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .cx-sylg h3 .cx-dot {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
  }

  .cx-gdesc {
    font-size: 13px;
    color: var(--cmuted);
    margin-bottom: 15px;
  }

  .cx-sylgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
  }

  .cx-syl {
    background: #fff;
    border: 1px solid var(--cline);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .cx-syl:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
  }

  .cx-syl .cx-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }

  .cx-syl .cx-head b {
    font-size: 15px;
    color: var(--navy);
  }

  .cx-syl.g-ai { border-top: 3px solid var(--ai); }
  .cx-syl.g-sc { border-top: 3px solid var(--scc); }
  .cx-syl.g-hw { border-top: 3px solid var(--hwc); }
  .cx-syl.g-cap { border-top: 3px solid var(--navy); }

  .cx-kws {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
  }

  .cx-kw {
    font-size: 11px;
    background: #F0F3F9;
    color: #3c4a66;
    border: 1px solid #E1E7F1;
    border-radius: 5px;
    padding: 2px 7px;
    line-height: 1.4;
  }

  .cx-syl p {
    font-size: 12.5px;
    color: var(--cmuted);
    line-height: 1.5;
  }

  .cx-pos {
    white-space: nowrap;
    color: var(--cmuted);
    font-size: 12px;
  }

  .cx-pos b {
    color: var(--cink);
  }

  .cx-principle {
    background: #f8fafc;
    border: 1px solid var(--cline);
    border-left: 4px solid var(--navy);
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 14px;
    color: #3a4763;
    margin-top: 20px;
    line-height: 1.6;
  }

  .cx-tbl-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cink);
    margin: 30px 0 12px;
  }

  table.cx-map {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--cline);
    border-radius: 12px;
    overflow: hidden;
    font-size: 13.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.01);
  }

  table.cx-map th {
    background: #EDF2FA;
    color: var(--navy-2);
    font-weight: 700;
    padding: 10px 14px;
    text-align: left;
    font-size: 13px;
    border-bottom: 1px solid var(--cline);
  }

  table.cx-map td {
    padding: 10px 14px;
    border-bottom: 1px solid #EAEFF6;
    vertical-align: top;
    line-height: 1.6;
  }

  table.cx-map tr:last-child td {
    border-bottom: none;
  }

  .cx-map .cx-arrow {
    color: #9aa6bc;
    padding: 0 4px;
    font-weight: bold;
  }

  .cx-cohort {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 15px;
  }

  .cx-cohort .cx-card {
    background: #fff;
    border: 1px solid var(--cline);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .cx-cohort .cx-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
  }

  .cx-cohort .cx-card h4 {
    font-size: 15px;
    color: var(--navy);
    margin-bottom: 8px;
    font-weight: 700;
  }

  .cx-cohort .cx-card p {
    font-size: 13px;
    color: #44506a;
    line-height: 1.55;
  }

  .cx-foot {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid var(--cline);
    font-size: 12px;
    color: var(--cmuted);
  }

  /* SVGs and drawing */
  .cxgw {
    position: relative;
    min-width: 1180px;
    background: #fff;
  }

  .cxgw table.cx-cur {
    position: relative;
    z-index: 1;
    background: transparent;
  }

  .cx-svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
  }

  .cxgw .cx-course {
    transition: opacity .12s, box-shadow .12s, border-color .12s, transform .12s;
  }

  .cx-svg path.ce {
    fill: none;
    stroke: #9aa6bc;
    stroke-width: 1.5;
    marker-end: url(#cah);
    transition: stroke .12s, stroke-width .12s, opacity .12s;
  }

  .cxgw.dim .cx-svg path.ce {
    opacity: .1;
  }

  .cx-svg path.ce.on {
    stroke: #B4232A;
    stroke-width: 2.6;
    marker-end: url(#cahon);
    opacity: 1 !important;
  }

  .cxgw.dim .cx-course {
    opacity: .28;
  }

  .cxgw.dim .cx-course.on {
    opacity: 1;
    box-shadow: 0 0 0 2.5px #B4232A;
    border-color: #B4232A;
  }

  /* Footer */
  footer {
    background: #0c1a34;
    color: #9fb0cf;
    font-size: 13px;
    margin-top: 40px;
  }

  .foot-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
  }

  footer b {
    color: #fff;
    font-size: 15px;
    letter-spacing: .5px;
  }

  footer .addr {
    margin-top: 10px;
    line-height: 1.8;
  }

  footer .flinks {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  footer .flinks a:hover {
    color: #fff;
  }

  .copy {
    border-top: 1px solid #1c2c4c;
    text-align: center;
    padding: 14px;
    color: #67789b;
    font-size: 12px;
  }

  /* Responsive styling */
  @media(max-width:920px) {
    .cx-axes {
      grid-template-columns: 1fr;
    }
    .content {
      padding: 24px 20px;
    }
  }