*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #F4F6F9; overflow-x: clip; }
body {
    font-family: "Pretendard Variable", Pretendard, sans-serif !important;
    color: #2A2A2A;
    font-size: 14px;
    line-height: 22px;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
}

body,
body *,
body *::before,
body *::after {
    font-family: "Pretendard Variable", Pretendard, sans-serif !important;
}
a { color: #1A47D1; }
a:hover { color: #1438A6; }
@keyframes hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes scroll-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { [data-scroll-cue] { animation: none !important; } }
@keyframes ss-spin { to { transform: rotate(360deg); } }
@keyframes fam-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fam-track:hover { animation-play-state: paused !important; }
.fam-logo img { filter: grayscale(1); opacity: 0.55; transition: filter .25s ease, opacity .25s ease; }
.fam-logo:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fam-track, .fam-slow { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .ss-ring-spin { animation: none !important; } }


/* 반응형: 1023px 이하 햄버거 메뉴, 767px 이하 56px 헤더 */
:root { --gnb-h: 81px; }
.gnb-burger { display: none !important; }
html.gnb-menu-open { overflow: hidden; }
html.gnb-menu-open .fam-fab-wrap { display: none !important; }
@media (min-width: 1024px) { .gnb-drawer { display: none !important; } }
@media (max-width: 1023px) {
  .gnb-nav, .gnb-name, .gnb-div, .gnb-logout { display: none !important; }
  .gnb-burger { display: flex !important; }
  .gnb-bar { gap: 16px !important; }
  .gnb-right { gap: 0 !important; }
}
@media (max-width: 767px) {
  :root { --gnb-h: 57px; }
  .gnb-bar { height: 56px !important; padding: 0 4px 0 16px !important; }
  .gnb-logo-link { width: auto !important; }
  .gnb-logo { height: 28px !important; }
}

/* ===== 반응형 (태블릿 ≤1023px · 모바일 ≤767px) ===== */
@media (max-width: 1023px) {
  .hb { height: 560px !important; }
  .hb-h1 { font-size: 42px !important; margin-top: 28px !important; }
  .hb-eyebrow { font-size: 17px !important; line-height: 26px !important; }
  .hb-ctrl { margin-top: 40px !important; }
  .hb-quick { gap: 12px !important; }
  .hb-quick a { width: 132px !important; height: 128px !important; border-radius: 20px !important; gap: 14px !important; }
  .hb-scroll { display: none !important; }
  .hq-ul a { height: 120px !important; gap: 12px !important; }
  .hq-ul a > span:first-child { font-size: 36px !important; }
  .ha { grid-template-columns: minmax(0,1fr) !important; height: auto !important; }
  .ha > div:first-child { height: 360px; }
  .ha > nav { flex-direction: row !important; }
  .ha > nav > a { min-height: 88px; }
}
@media (max-width: 767px) {
  .mp-main { padding: 24px 16px 64px !important; gap: 48px !important; }
  .hb { height: 460px !important; }
  .hb-inner { padding: 57px 20px 0 !important; }
  .hb-quick { display: none !important; }
  .hb-eyebrow { font-size: 13px !important; line-height: 20px !important; }
  .hb-h1 { font-size: 28px !important; margin-top: 16px !important; }
  .hb-ctrl { margin-top: 32px !important; gap: 12px !important; }
  .hb-ctrl > span:nth-child(2) { width: 96px !important; }
  .hq-b { margin-top: -40px !important; }
  .hq-ul { grid-template-columns: repeat(3,minmax(0,1fr)) !important; padding: 0 !important; }
  .hq-ul li:nth-child(n+4) { border-top: 1px solid #E3E7ED; }
  .hq-ul li:nth-child(4) { border-left: 0 !important; }
  .hq-ul a { height: 96px !important; gap: 8px !important; }
  .hq-ul a > span:first-child { font-size: 30px !important; }
  .hq-ul a > span:last-child { font-size: 14px !important; line-height: 20px !important; }
  .ha > nav { flex-direction: column !important; }
  .mp-h2 { font-size: 18px !important; line-height: 27px !important; }
  .mp-sub { font-size: 13px !important; }
  .mp-cards { display: flex !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .mp-cards::-webkit-scrollbar { display: none; }
  .mp-card { flex: 0 0 260px; scroll-snap-align: start; }
  .fam-sec { gap: 24px !important; }
  .fam-eyebrow { font-size: 14px !important; line-height: 22px !important; }
  .fam-h2 { font-size: 22px !important; line-height: 32px !important; }
  .fam-p { font-size: 15px !important; line-height: 24px !important; }
  .fam-logo { width: 120px !important; height: 120px !important; }
  .fam-logo img { max-width: 84px !important; max-height: 30px !important; }
  .fam-slow { gap: 20px !important; padding-right: 20px !important; }
  .mp-2col { grid-template-columns: minmax(0,1fr) !important; gap: 48px !important; }
  .mp-notice { padding: 4px 16px !important; }
  .mp-banner { min-height: 220px !important; }
  .mp-banner-body { padding: 20px !important; }
  .mp-banner-title { font-size: 20px !important; line-height: 28px !important; }
  .fam-fab-wrap { right: 16px !important; bottom: 16px !important; }
  .fam-fab { width: 72px !important; height: 72px !important; }
  .fam-fab > svg { width: 72px; height: 72px; }
  .fam-fab > span { width: 28px !important; height: 28px !important; }
  .fam-nav { width: min(260px, calc(100vw - 32px)) !important; }
}

/* 원본 GNB 동작을 위한 추가 스타일 */
@keyframes gnb-panel { from {opacity:0;transform:translateY(-8px)} to {opacity:1;transform:translateY(0)} }
@keyframes gnb-drop { from {opacity:0;transform:translateY(-8px)} to {opacity:1;transform:translateY(0)} }
.gnb-header { position:fixed;top:calc(var(--gnb-offset, var(--gnb-h)) - var(--gnb-h));left:0;right:0;z-index:50;background:#fff;border-bottom:1px solid #E3E7ED;transition:top .25s ease,background-color .25s ease,border-color .25s ease; }
.gnb-header.is-clear {background:transparent;border-color:transparent;color:white}
.gnb-header.is-clear .gnb-logo {filter:brightness(0) invert(1)}
.gnb-header.is-clear .gnb-link,.gnb-header.is-clear .gnb-name,.gnb-header.is-clear .gnb-right,.gnb-header.is-clear .gnb-icon,.gnb-header.is-clear .gnb-logout-btn {color:white}
.gnb-header.is-clear .gnb-subname {color:rgba(255,255,255,.8)}
.gnb-header.is-clear .gnb-div {background:rgba(255,255,255,.4)}
.gnb-header.is-clear .gnb-dot {background:white;box-shadow:none}
.gnb-bar {position:relative;z-index:2;max-width:1348px;margin:auto;padding:0 24px;height:80px;display:flex;align-items:center;gap:32px}
.gnb-logo-link {display:flex;align-items:center;width:160px;flex-shrink:0}
.gnb-logo {height:45px;width:auto;display:block;transition:filter .25s}
.gnb-nav {flex:1 1 760px;max-width:800px;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(max-content,1fr));column-gap:8px;height:80px}
.gnb-menu-item {position:relative;min-width:0}
.gnb-link {display:flex;align-items:center;justify-content:center;height:80px;padding:0 8px;font-size:16px;font-weight:600;color:#4A5260;text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:color .25s}
.gnb-link.is-active {color:#1C59FE;font-weight:700;border-bottom-color:currentColor}
.gnb-right {margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:12px}
.gnb-icon {position:relative;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:inherit;text-decoration:none}
.gnb-icon:hover,.gnb-burger:hover {background:#F4F6F9}
.gnb-dot {position:absolute;top:10px;right:11px;width:8px;height:8px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 2px white}
.gnb-name {display:flex;flex-direction:column;white-space:nowrap;padding:0 4px;font-size:14px;line-height:20px;font-weight:600}
.gnb-subname {font-size:12px;line-height:18px;color:#666E7A;font-weight:400}
.gnb-div {width:1px;height:16px;background:#E3E7ED}
.gnb-logout-btn {height:32px;padding:0 12px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:14px;font-weight:500;color:inherit;cursor:pointer}
.gnb-logout-btn:hover {background:#F4F6F9}
.gnb-login-btn,.gnb-primary {border:0;background:#1C59FE;color:white;border-radius:7px;padding:10px 16px;font:inherit;cursor:pointer}
.gnb-burger {width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;align-items:center;justify-content:center;cursor:pointer}
.gnb-mega {position:absolute;left:0;right:0;top:80px;z-index:1;background:white;border-top:1px solid #E3E7ED;border-bottom:1px solid #E3E7ED;box-shadow:0 6px 16px rgba(16,24,40,.1);animation:gnb-panel .7s cubic-bezier(.16,1,.3,1) both}
.gnb-mega-heading {max-width:1348px;margin:auto;padding:28px 24px 0;font-size:20px;line-height:30px;font-weight:700;color:#2A2A2A}
.gnb-submenu {position:absolute;top:81px;left:0;right:0;list-style:none;margin:0;padding:20px 0 32px;display:flex;flex-direction:column;gap:2px;z-index:3}
.gnb-submenu li {animation:gnb-drop .6s cubic-bezier(.2,.7,.2,1) both}
.gnb-submenu a {display:flex;align-items:center;justify-content:center;height:36px;padding:0 8px;font-size:14px;font-weight:500;color:#4A5260;text-decoration:none;white-space:nowrap}
.gnb-submenu a:hover {color:#1C59FE!important}
.gnb-submenu a[aria-disabled=true] {color:#8A919C}
.gnb-overlay {position:fixed;inset:0;z-index:190;background:rgba(13,20,33,.48);display:flex;justify-content:flex-end}
.gnb-drawer {width:min(320px,86vw);height:100%;background:#fff;display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(16,24,40,.16);color:#2A2A2A}
.gnb-drawer-head {height:56px;flex-shrink:0;padding:0 4px 0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #E3E7ED;font-size:16px;font-weight:700}
.gnb-close {width:44px;height:44px;border:0;background:transparent;cursor:pointer}
.gnb-profile {padding:20px;display:flex;align-items:center;gap:12px;background:#F8F9FA;border-bottom:1px solid #E3E7ED}
.gnb-avatar {width:44px;height:44px;border-radius:50%;background:#E8EEFF;color:#1C59FE;display:grid;place-items:center;font-weight:700}
.gnb-drawer-list {flex:1;overflow-y:auto;list-style:none;margin:0;padding:0}
.gnb-drawer-list>li {border-bottom:1px solid #EEF0F3}
.gnb-drawer-toggle {width:100%;height:56px;padding:0 20px;border:0;background:transparent;font:inherit;font-size:16px;font-weight:600;color:#2A2A2A;display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-align:left}
.gnb-drawer-toggle.is-active {color:#1C59FE;font-weight:700}
.gnb-drawer-toggle svg {transition:transform .2s}
.gnb-drawer-sub {list-style:none;margin:0;padding:0 0 10px}
.gnb-drawer-sub a {height:44px;padding:0 20px 0 32px;display:flex;align-items:center;font-size:15px;color:#4A5260;text-decoration:none}
.gnb-drawer-foot {padding:16px 20px 24px;border-top:1px solid #E3E7ED}
.gnb-outline {border:1px solid #CBD1DA;background:white;color:#2A2A2A;border-radius:7px;padding:10px 16px;font:inherit;cursor:pointer}
.gnb-dialog-overlay {position:fixed;inset:0;z-index:200;background:rgba(13,20,33,.48);display:flex;align-items:center;justify-content:center;padding:16px}
.gnb-dialog {width:100%;max-width:400px;background:white;border-radius:16px;box-shadow:0 16px 40px rgba(16,24,40,.18);color:#2A2A2A}
.gnb-toast {position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:210;background:#2A2A2A;color:white;padding:12px 20px;border-radius:8px;box-shadow:0 6px 18px #0002;white-space:nowrap}
[hidden] {display:none!important}
@media(max-width:1023px) {.gnb-mega,.gnb-submenu {display:none!important}}
@media(max-width:767px) {.gnb-header .gnb-bar {height:56px}}
/* 원본 transparent / solid 상태 보완 */
.gnb-header.is-clear .gnb-link.is-active { color:#FFFFFF; border-bottom-color:#FFFFFF; }
.gnb-header.is-clear .gnb-icon:hover,.gnb-header.is-clear .gnb-burger:hover,.gnb-header.is-clear .gnb-logout-btn:hover {background:rgba(255,255,255,.16)}
.gnb-header:not(.is-clear) .gnb-link.is-active {color:#1C59FE;border-bottom-color:#1C59FE}
.gnb-header .gnb-submenu {box-sizing:border-box}
.gnb-header .gnb-mega {pointer-events:none}
.gnb-header .gnb-submenu {pointer-events:auto}
.gnb-header .gnb-logout-btn {font-weight:500}
.gnb-header.is-clear .gnb-logout-btn {color:#FFFFFF}
.gnb-header.is-clear .gnb-icon {color:#FFFFFF}
.gnb-header:not(.is-clear) .gnb-icon {color:#2A2A2A}
.gnb-header .gnb-mega-heading {pointer-events:none}
.gnb-overlay[hidden],.gnb-dialog-overlay[hidden] {display:none!important}


/* 메인페이지 추가 CSS - 기존 mico_school.css 맨 아래에 추가 (푸터 제외) */
.mp-main {max-width:1348px;margin:0 auto;padding:24px 24px 80px;display:flex;flex-direction:column;gap:80px}
.mp-hero-wrap {display:flex;flex-direction:column;gap:16px}

.hb {position:relative;width:100vw;margin:-24px 0 0 calc(50% - 50vw);height:721px;overflow:hidden;background:#0D1421}

.hb.hero-bridge-a {height:max(600px,calc(100vh - 153px))}

.hb-videos video,.ha-image>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.2s ease}
.hb-videos video.is-current,.ha-image>img.is-current {opacity:1}
.hb-shade,.hb-top-shade {position:absolute;inset:0;pointer-events:none}
.hb-shade {background:linear-gradient(90deg,rgba(8,12,20,.8) 0,rgba(8,12,20,.6) 45%,rgba(8,12,20,.4) 100%)}
.hb-top-shade {bottom:auto;height:180px;background:linear-gradient(180deg,rgba(8,12,20,.55),transparent)}
.hb-inner {position:relative;height:100%;max-width:1348px;margin:0 auto;padding:81px 24px 0;display:flex;align-items:center;justify-content:space-between;gap:40px}
.hb-copy {min-width:0;display:flex;flex-direction:column}
.hb-eyebrow {margin:0;font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.01em;color:#fff}
.hb-h1 {margin:40px 0 0;font-size:56px;line-height:1.36;font-weight:800;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.hb-ctrl {margin-top:64px;display:flex;align-items:center;gap:16px;color:#fff;font-size:16px;line-height:24px;font-weight:700}
.hb-progress {position:relative;width:160px;height:2px;display:block;background:rgba(255,255,255,.32);overflow:hidden}
.hb-progress>span {position:absolute;inset:0;background:white;transform-origin:left center}
.hb-buttons {margin-left:8px;display:flex;gap:8px}
.hb-buttons button,.ha-controls button {width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:transparent;color:white;display:grid;place-items:center;cursor:pointer;padding:0}
.hb-buttons button:hover {background:rgba(255,255,255,.16)}
.hb-quick {flex:none;display:flex;flex-direction:column;gap:16px}
.hb-quick a {width:160px;height:158px;border-radius:24px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(20px) saturate(140%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:#fff;text-decoration:none;transition:transform .6s cubic-bezier(.2,.7,.2,1),background .6s,border-color .6s,box-shadow .6s}
.hb-quick a:hover {transform:translateY(-4px);background:rgba(0,0,0,.8);border-color:rgba(255,255,255,.42);box-shadow:0 20px 24px -10px rgba(0,0,0,.45);color:#fff}

.material-symbols-rounded {font-family:"Material Symbols Rounded"!important;font-weight:normal!important;font-style:normal;font-size:40px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased}

.hb-quick .material-symbols-rounded {font-size:36px;font-variation-settings:"FILL" 0,"wght" 300}
.hb-quick a>span:last-child {font-size:15px;line-height:22px;font-weight:700}
.hb-scroll {position:absolute;left:50%;bottom:28px;transform:translateX(-50%);padding:8px 16px;border:0;background:transparent;color:white;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;opacity:.85}
.hb-scroll:hover {opacity:1}
.hb-scroll>span:first-child {font-size:10px;line-height:14px;font-weight:600;letter-spacing:.2em}
.hb-scroll-line {position:relative;width:1px;height:32px;background:rgba(255,255,255,.32);overflow:hidden}
.hb-scroll-line>span {position:absolute;inset:0;background:white;animation:scroll-cue 2s cubic-bezier(.65,0,.35,1) infinite}

.hq-a {width:100vw;margin:-16px 0 0 calc(50% - 50vw);background:#F4F6F9;border-bottom:1px solid #E3E7ED}
.hq-b {position:relative;z-index:2;margin-top:-80px;background:white;border-radius:16px;box-shadow:0 16px 40px rgba(16,24,40,.12);overflow:hidden}
.hq-ul {max-width:1348px;margin:0 auto;padding:0 24px;list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.hq-b .hq-ul {padding:8px 0}
.hq-ul a {height:152px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#2A2A2A;text-decoration:none;transition:color .3s}
.hq-b .hq-ul a {height:128px;gap:12px}
.hq-b .hq-ul li+li {border-left:1px solid #E3E7ED}
.hq-ul a:hover {color:#1C59FE}
.hq-ul .material-symbols-rounded {font-size:44px;font-variation-settings:"FILL" 0,"wght" 250}
.hq-b .hq-ul .material-symbols-rounded {font-size:40px}
.hq-ul a>span:last-child {font-size:15px;line-height:22px;font-weight:500}

.ha {display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,312px);gap:24px;height:400px}
.ha-image {position:relative;border-radius:12px;overflow:hidden;background:#0B1F5C}
.ha-image>img {object-position:right center;transition:opacity .6s}
.ha-shade {position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,22,64,.9),rgba(0,22,64,.72) 400px,transparent 680px),linear-gradient(0deg,rgba(0,22,64,.7),transparent 120px)}
.ha-copy {position:relative;height:100%;padding:40px;display:flex;flex-direction:column;justify-content:space-between}
.ha-eyebrow {font-size:12px;font-weight:700;letter-spacing:.08em;color:#B9CCFF}
.ha-copy h1 {font-size:32px;line-height:42px;color:#fff;margin:12px 0}
.ha-copy p {font-size:16px;line-height:26px;color:#DCE6FF;max-width:360px}
.ha-controls {display:flex;align-items:center;gap:10px;color:#8AABFF}
.ha-controls b {color:white}
.ha-links {display:flex;flex-direction:column;gap:12px}
.ha-links a {flex:1;display:flex;align-items:center;gap:16px;padding:0 20px;background:white;border:1px solid #E3E7ED;border-radius:12px;color:#2A2A2A;text-decoration:none}
.ha-links a:hover {border-color:#D5DAE1;box-shadow:0 1px 2px #10182810}
.ha-links .material-symbols-rounded {width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#EAF0FF;color:#1C59FE;font-size:28px}
.ha-links a>span:nth-child(2) {flex:1;display:flex;flex-direction:column;gap:2px}
.ha-links b {font-size:16px}
.ha-links small {font-size:13px;color:#666E7A}

.mp-section {display:flex;flex-direction:column;gap:16px;min-width:0}
.mp-2col > .mp-section {display:flex;flex-direction:column;gap:16px;min-width:0;align-items:stretch}
.mp-section-heading {display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.mp-2col > .mp-section > .mp-section-heading {display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;flex:none}
.mp-section-heading>div {display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mp-section-heading a {display:inline-flex;align-items:center;gap:2px;font-size:15px;font-weight:500;color:#4A5260;text-decoration:none}
.mp-2col .mp-section-heading > a {display:inline-flex;align-items:center;gap:2px;font-size:15px;font-weight:500;color:#4A5260;text-decoration:none;white-space:nowrap;flex:none}
.mp-section-heading a:hover {color:#2A2A2A}
.mp-2col .mp-section-heading > a:hover {color:#2A2A2A}
.mp-h2 {margin:0;font-size:22px;line-height:32px;font-weight:700}
.mp-sub {font-size:15px;color:#666E7A}
.mp-cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp((100% - 60px) / 4,(250px - (100% - 60px) / 4) * 9999,(100% - 20px) / 2),1fr));gap:20px}
.mp-required {grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

/* CourseCard: original ds/bundle.css component values mapped to converted HTML. */
.course-card {container-type:inline-size;min-width:0;display:flex;flex-direction:column;gap:0;overflow:hidden;padding:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:inherit;text-decoration:none;transition:box-shadow .15s,border-color .15s}
.course-card:hover {border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.course-thumb {position:relative;aspect-ratio:1.618 / 1;overflow:hidden;border-radius:0;background:var(--blue-50)}
.course-thumb img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s}
.course-card:hover .course-thumb img {transform:scale(1.035)}
.course-details {min-height:38.2cqw;padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.mico-card-badges {display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
.course-tag {position:static;display:inline-flex;align-items:center;height:var(--badge-sm);padding:0 var(--space-2);border-radius:var(--radius-sm);background:#FFFFFF;color:var(--blue-600);box-shadow:inset 0 0 0 1px var(--blue-300);font-size:12px;font-weight:700;line-height:1}
.course-status {display:inline-flex;align-items:center;height:var(--badge-sm);padding:0 var(--space-2);border-radius:var(--radius-sm);background:var(--gray-100);color:var(--gray-700);font-size:12px;font-weight:600;line-height:1}
.course-details h3 {margin:0;min-height:52px;font-size:18px;line-height:26px;font-weight:700;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mico-card-meta {display:flex;align-items:center;gap:var(--space-4);flex-wrap:nowrap;min-width:0;overflow:hidden;white-space:nowrap;margin-top:auto;font-size:13px;line-height:20px;color:var(--ink-muted)}
.mico-card-date,.mico-card-duration {display:inline-flex;align-items:center;gap:6px}

.fam-sec {width:100%;display:flex;flex-direction:column;align-items:center;gap:48px}
.fam-heading {display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.fam-eyebrow {font-size:17px;line-height:26px;font-weight:500;color:#4A5260}
.fam-h2 {margin:0;font-size:32px;line-height:44px;font-weight:700}
.fam-p {margin:0;font-size:17px;line-height:28px;color:#4A5260}
.fam-marquee {width:100vw;flex:none;overflow:hidden;padding:16px 0 24px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fam-slow {list-style:none;margin:0;padding:0 48px 0 0;display:flex;align-items:center;gap:48px;width:max-content;animation:fam-marquee 50s linear infinite}
.fam-logo {flex:0 0 auto;width:190px;height:190px;border-radius:50%;background:white;box-shadow:0 4px 16px rgba(16,24,40,.08);display:grid;place-items:center}
.fam-logo a {width:100%;height:100%;display:grid;place-items:center}
.fam-logo img {max-width:136px;max-height:44px;width:auto;height:auto;display:block}
.fam-logo:first-child img,.fam-logo:nth-child(10) img {max-height:64px}

.mp-2col {display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:24px;align-items:stretch}
.mp-notice {flex:1;list-style:none;margin:0;padding:4px 24px;display:flex;flex-direction:column;justify-content:center;background:#fff;border:1px solid #E3E7ED;border-radius:12px}
.mp-2col > .mp-section > .mp-notice {flex:1 1 auto;list-style:none;margin:0;padding:4px 24px;display:flex;flex-direction:column;justify-content:center;width:100%;min-width:0;background:#fff;border:1px solid #E3E7ED;border-radius:12px}
.mp-notice a {display:flex;align-items:center;gap:8px;padding:14px 0;color:#2A2A2A;text-decoration:none}
.mp-notice li+li a {border-top:1px solid #E3E7ED}
.mp-notice a:hover {color:#1A47D1}

.notice-badge {display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:4px;background:#EAF0FF;color:#1A47D1;font-size:12px;font-weight:700;flex-shrink:0}

.mp-notice li:first-child .notice-badge {background:#E5EAF4;color:#002060}

.notice-title {flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-notice li:first-child .notice-title {font-weight:600}

.mp-notice time {font-size:13px;color:#666E7A;flex-shrink:0}
.mp-banner {position:relative;flex:1;min-height:280px;border-radius:12px;overflow:hidden;background:#0B1F5C;display:flex;align-items:flex-end}
.mp-banner>img,.mp-banner-shade {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp-banner-shade {background:linear-gradient(0deg,rgba(0,22,64,.92),rgba(0,22,64,.6) 55%,rgba(0,22,64,.15))}
.mp-banner-body {position:relative;width:100%;padding:28px 32px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.mp-banner-title {margin:0;font-size:24px;line-height:34px;color:white}
.mp-banner-body p {margin:6px 0 0;font-size:15px;line-height:24px;color:#DCE6FF}
/* 연수원 안내 바로가기 버튼 */
.mp-banner .mp-banner-link {display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:104px;height:var(--control-md);padding:0 var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;flex-shrink:0;box-sizing:border-box}
.mp-banner .mp-banner-link:hover {background:var(--gray-25);border-color:var(--gray-400);color:var(--ink)}

.fam-fab-wrap {position:fixed;right:32px;bottom:32px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fam-fab {position:relative;width:104px;height:104px;padding:0;border:0;border-radius:50%;background:#002060;color:white;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,22,64,.28);cursor:pointer;transition:background-color .2s,transform .2s}
.fam-fab:hover {background:#1C59FE;transform:translateY(-2px)}
.fam-fab>svg {position:absolute;inset:0;animation:ss-spin 20s linear infinite}
.fam-fab>span {position:relative;width:36px;height:36px;border-radius:50%;background:white;color:#002060;display:grid;place-items:center;font-size:23px}
.fam-nav {width:240px;background:white;border:1px solid #E3E7ED;border-radius:12px;box-shadow:0 12px 32px rgba(16,24,40,.16);overflow:hidden}
.fam-nav-title {padding:14px 20px;border-bottom:1px solid #E3E7ED;font-size:14px;font-weight:700}
.fam-nav ul {list-style:none;margin:0;padding:6px 0}
.fam-nav a {display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;padding:0 20px;font-size:15px;font-weight:500;color:#2A2A2A;text-decoration:none}
.fam-nav a:hover {background:#F4F6F9;color:#1A47D1}

.mp-popup-overlay {position:fixed;inset:0;background:rgba(13,20,33,.48);display:flex;align-items:center;justify-content:center;padding:16px;z-index:300}
.mp-popup {width:100%;max-width:440px;background:white;border-radius:16px;box-shadow:0 16px 40px rgba(16,24,40,.18);overflow:hidden;display:flex;flex-direction:column}
.mp-popup-head {position:relative;background:#002060;overflow:hidden}
.mp-grid-pattern {position:absolute;inset:0;opacity:.25;background-image:linear-gradient(#8AABFF 1px,transparent 1px),linear-gradient(90deg,#8AABFF 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,#000,transparent)}
.mp-popup-head>div:last-child {position:relative;padding:28px 28px 24px}
.mp-popup-head span {font-size:12px;font-weight:700;letter-spacing:.08em;color:#8AABFF}
.mp-popup-head h2 {margin:6px 0 0;font-size:22px;line-height:32px;color:white}
.mp-popup-content {padding:24px 28px;display:flex;flex-direction:column;gap:16px}
.mp-popup-content p {margin:0;color:#4A5260}
.mp-popup-content dl {margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;padding:16px;border-radius:8px;background:#F4F6F9}
.mp-popup-content dt {color:#666E7A}
.mp-popup-content dd {margin:0;font-weight:600}
.mp-popup-detail {width:100%;height:40px;border:0;border-radius:6px;background:#EAF0FF;color:#1C59FE;font-weight:600;cursor:pointer}
.mp-popup-foot {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px 10px 24px;border-top:1px solid #E3E7ED;background:#F8F9FB}
.mp-popup-foot label {display:flex;align-items:center;gap:8px;cursor:pointer}
.mp-popup-foot input {width:18px;height:18px;margin:0;accent-color:#1C59FE}
.mp-popup-foot button {border:0;background:transparent;padding:8px 12px;cursor:pointer}

@media (max-width:1023px) {
.hb {height:560px}
.hb-h1 {font-size:42px;margin-top:28px}
.hb-eyebrow {font-size:17px;line-height:26px}
.hb-ctrl {margin-top:40px}
.hb-quick {gap:12px}
.hb-quick a {width:132px;height:128px;border-radius:20px;gap:14px}
.hb-scroll {display:none}
.hq-ul a {height:120px;gap:12px}
.hq-ul .material-symbols-rounded {font-size:36px}
.ha {grid-template-columns:minmax(0,1fr);height:auto}
.ha-image {height:360px}
.ha-links {flex-direction:row}
.ha-links a {min-height:88px}
.mp-cards {grid-template-columns:repeat(2,minmax(0,1fr))}
}


@media (max-width:767px) {
.mp-main {padding:24px 16px 64px;gap:48px}
.hb {height:460px}
.hb-inner {padding:57px 20px 0}
.hb-quick {display:none}
.hb-eyebrow {font-size:13px;line-height:20px}
.hb-h1 {font-size:28px;margin-top:16px}
.hb-ctrl {margin-top:32px;gap:12px}
.hb-progress {width:96px}
.hq-b {margin-top:-40px}
.hq-ul {grid-template-columns:repeat(3,minmax(0,1fr));padding:0}
.hq-ul li:nth-child(n/**/+4) {border-top:1px solid #E3E7ED}
.hq-ul li:nth-child(4) {border-left:0}
.hq-ul a {height:96px;gap:8px}
.hq-ul .material-symbols-rounded {font-size:30px}
.hq-ul a>span:last-child {font-size:14px;line-height:20px}
.ha-links {flex-direction:column}
.mp-h2 {font-size:18px;line-height:27px}
.mp-sub {font-size:13px}
.mp-cards {display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
.mp-cards::-webkit-scrollbar {display:none}
.mp-card {flex:0 0 260px;scroll-snap-align:start}
.fam-sec {gap:24px}
.fam-eyebrow {font-size:14px;line-height:22px}
.fam-h2 {font-size:22px;line-height:32px}
.fam-p {font-size:15px;line-height:24px}
.fam-logo {width:120px;height:120px}
.fam-logo img {max-width:84px;max-height:30px}
.fam-slow {gap:20px;padding-right:20px}
.mp-2col {grid-template-columns:minmax(0,1fr);gap:48px}
.mp-notice {padding:4px 16px}
.mp-banner {min-height:220px}
.mp-banner-body {padding:20px}
.mp-banner-title {font-size:20px;line-height:28px}
.fam-fab-wrap {right:16px;bottom:16px}
.fam-fab {width:72px;height:72px}
.fam-fab>svg {width:72px;height:72px}
.fam-fab>span {width:28px;height:28px}
.fam-nav {width:min(260px,calc(100vw - 32px))}
}


@media (max-width: 767px) { .ft-inner { padding: 32px 16px 112px !important; gap: 20px !important; } .ft-logo { height: 28px !important; } }

.hb-videos {position:absolute;inset:0;background:#0D1421}


/* 접근성 바로가기 메뉴: 평소 숨김 */
.skip_nav { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 키보드로 접근할 때만 표시 */
.skip_nav:focus-within { position: fixed; top: 0; left: 0; z-index: 99999; width: auto; height: auto; padding: 8px 12px; margin: 0; overflow: visible; clip: auto; background: #fff; }