@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ============== RESET ============== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    font-family:'Pretendard',sans-serif;
    font-size:16px; line-height:1.6;
    color:var(--c-text);
    background:var(--c-bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
img { max-width:100%; vertical-align:middle; display:block; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select { font-family:inherit; font-size:inherit; }

/* ============== VARIABLES ============== */
:root {
    --c-primary:#1f2a5e;     /* 인디고 네이비 */
    --c-primary-dk:#141a3d;
    --c-accent:#b8985a;      /* 무광 골드 */
    --c-accent-dk:#9a7e44;
    --c-bg:#ffffff;          /* 화이트 */
    --c-bg-soft:#f3eee6;
    --c-line:#e2dccf;
    --c-line-dark:#1f2a5e;
    --c-text:#2a2a2e;
    --c-text-soft:#6a6a72;
    --c-text-light:#9a9aa2;
    --c-white:#ffffff;
    --c-danger:#b14a3a;

    --serif:'Pretendard','Apple SD Gothic Neo',sans-serif;
    --sans:'Pretendard','Apple SD Gothic Neo',sans-serif;

    --header-h:96px;
    --header-h-mo:64px;
    --max-w:1280px;
    --radius:2px;
    --shadow-sm:0 1px 3px rgba(20,26,61,.06);
    --shadow-md:0 8px 24px rgba(20,26,61,.08);
    --shadow-lg:0 20px 60px rgba(20,26,61,.12);
    --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============== UTILITY ============== */
.container { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.section { padding:96px 0; }
.section-title {
    font-family:var(--serif);
    font-size:42px;
    font-weight:700;
    letter-spacing:-0.02em;
    color:var(--c-primary);
    margin-bottom:8px;
    line-height:1.2;
}
.section-title .accent { color:var(--c-accent); }
.section-sub {
    font-size:14px;
    letter-spacing:.3em;
    color:var(--c-accent);
    text-transform:uppercase;
    margin-bottom:16px;
    font-weight:600;
}
.section-desc { color:var(--c-text-soft); font-size:16px; }
.section-head { margin-bottom:56px; }
.section-head.center { text-align:center; }
.section-head .line {
    width:48px; height:2px; background:var(--c-accent);
    margin:24px auto 0;
}

.btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px;
    padding:14px 32px;
    font-size:14px; font-weight:600;
    letter-spacing:.05em;
    border:1px solid var(--c-primary);
    background:var(--c-primary);
    color:var(--c-white);
    transition:all .35s var(--ease);
    cursor:pointer;
}
.btn:hover { background:var(--c-primary-dk); border-color:var(--c-primary-dk); transform:translateY(-1px); }
.btn--ghost { background:transparent; color:var(--c-primary); }
.btn--ghost:hover { background:var(--c-primary); color:var(--c-white); }
.btn--gold { background:var(--c-accent); border-color:var(--c-accent); }
.btn--gold:hover { background:var(--c-accent-dk); border-color:var(--c-accent-dk); }
.btn--sm { padding:10px 20px; font-size:15px; }
.btn--block { width:100%; }

/* ============== HEADER ============== */
.site-header {
    position:fixed; top:0; left:0; right:0;
    background:#ffffff;
    border-bottom:1px solid transparent;
    z-index:100;
    transition:all .3s var(--ease);
}
.site-header.scrolled {
    background:#ffffff;
    border-bottom-color:var(--c-line);
    box-shadow:var(--shadow-sm);
}
.header-top { height:var(--header-h); }
.header-inner {
    max-width:var(--max-w); margin:0 auto;
    height:100%; padding:0 32px;
    display:flex; align-items:center; justify-content:space-between;
    gap:32px;
}

.site-logo a {
    display:flex; align-items:center; gap:12px;
}
.logo-mark {
    width:46px; height:46px;
    display:flex; align-items:center; justify-content:center;
    background:var(--c-primary);
    color:var(--c-accent);
    border:1px solid var(--c-primary);
}
.logo-mark svg { width:26px; height:26px; }
.logo-text {
    font-family:var(--serif);
    font-size:18px; font-weight:700;
    color:var(--c-primary);
    letter-spacing:-.02em;
    line-height:1.2;
    display:block;
}
.logo-en {
    font-size:10px; color:var(--c-text-soft);
    letter-spacing:.08em;
    display:block;
    margin-top:2px;
}
.logo-img {
    height: 65px;
    width:auto;
    display:block;
}

/* GNB */
.gnb { flex:1; }
.gnb-list { display:flex; justify-content:center; gap:4px; }
.gnb-item { position:relative; }
.gnb-link {
    display:block;
    padding:12px 22px;
    font-size:16px; font-weight:600;
    color:var(--c-text);
    letter-spacing:-.01em;
    position:relative;
    transition:color .25s;
}
.gnb-link::before {
    content:''; position:absolute;
    bottom:0; left:50%; width:0; height:2px;
    background:var(--c-accent);
    transition:all .3s var(--ease);
    transform:translateX(-50%);
}
.gnb-link:hover { color:var(--c-primary); }
.gnb-link:hover::before { width:24px; }
.gnb-item--highlight .gnb-link {
    color:var(--c-accent);
}
.gnb-item--highlight .gnb-link::after {
    content:''; position:absolute;
    top:14px; right:8px;
    width:5px; height:5px;
    background:var(--c-accent);
    border-radius:50%;
}

.sub-menu {
    position:absolute; top:100%; left:50%;
    transform:translateX(-50%) translateY(8px);
    min-width:160px;
    background:var(--c-white);
    border:1px solid var(--c-line);
    box-shadow:var(--shadow-md);
    padding:8px 0;
    opacity:0; visibility:hidden;
    transition:all .25s var(--ease);
}
.gnb-item:hover .sub-menu {
    opacity:1; visibility:visible;
    transform:translateX(-50%) translateY(0);
}
.sub-menu li a {
    display:block;
    padding:10px 20px;
    font-size:15px;
    color:var(--c-text-soft);
    transition:all .2s;
    white-space:nowrap;
    text-align:center;
}
.sub-menu li a:hover {
    background:var(--c-bg-soft);
    color:var(--c-primary);
}

/* 3-DEPTH SUB-MENU (PC) */
.sub-menu li.has-3depth { position:relative; }
.sub-menu li.has-3depth > a { position:relative; }
.sub-menu li.has-3depth > a .arr {
    position:absolute; right:10px; top:50%;
    transform:translateY(-50%);
    font-style:normal; font-size:16px; line-height:1;
    color:var(--c-text-light);
    transition:color .2s;
}
.sub-menu li.has-3depth:hover > a .arr { color:var(--c-primary); }
.sub-menu-3 {
    position:absolute; top:-9px; left:100%;
    min-width:170px;
    background:var(--c-white);
    border:1px solid var(--c-line);
    box-shadow:var(--shadow-md);
    padding:8px 0;
    opacity:0; visibility:hidden;
    transform:translateX(8px);
    transition:all .25s var(--ease);
}
.sub-menu li.has-3depth:hover > .sub-menu-3 {
    opacity:1; visibility:visible; transform:translateX(0);
}
.sub-menu-3 li a {
    display:block;
    padding:10px 20px;
    font-size:15px;
    color:var(--c-text-soft);
    white-space:nowrap;
    text-align:center;
    transition:all .2s;
}
.sub-menu-3 li a:hover { background:var(--c-bg-soft); color:var(--c-primary); }

/* "준비중" 비활성 메뉴 (자탐 카페) */
.gnb-link--soon {
    cursor:default;
    color:var(--c-text-light);
    display:flex; align-items:center; gap:6px;
}
.gnb-link--soon::before { content:none; }
.gnb-link--soon em {
    font-style:normal;
    font-size:10px; font-weight:700;
    color:var(--c-accent);
    border:1px solid var(--c-accent);
    border-radius:10px;
    padding:1px 6px;
    letter-spacing:0;
}

/* HEADER UTIL */
.header-utils { display:flex; align-items:center; gap:16px; }
.util-link {
    font-size:15px;
    color:var(--c-text-soft);
    transition:color .2s;
    position:relative;
    display:flex; align-items:center;
}
.util-link:hover { color:var(--c-primary); }
.util-cart { position:relative; }
.cart-count {
    position:absolute;
    top:-6px; right:-8px;
    min-width:16px; height:16px;
    padding:0 4px;
    background:var(--c-accent);
    color:var(--c-white);
    font-size:10px; font-weight:700;
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
}
.hamburger {
    display:none;
    width:32px; height:32px;
    flex-direction:column; justify-content:center;
    gap:6px;
}
.hamburger span {
    display:block; width:22px; height:2px;
    background:var(--c-primary);
    transition:all .3s;
}

/* MOBILE MENU */
.mobile-menu {
    position:fixed; top:0; right:-100%;
    width:320px; max-width:85vw; height:100vh;
    background:var(--c-bg);
    z-index:200;
    transition:right .4s var(--ease);
    overflow-y:auto;
    box-shadow:var(--shadow-lg);
}
.mobile-menu.active { right:0; }
.mobile-overlay {
    position:fixed; inset:0;
    background:rgba(20,26,61,.5);
    z-index:150;
    opacity:0; visibility:hidden;
    transition:all .3s;
}
.mobile-overlay.active { opacity:1; visibility:visible; }
.mobile-menu-inner { padding:0 0 40px; }
.mobile-menu-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px;
    border-bottom:1px solid var(--c-line);
    background:var(--c-primary);
    color:var(--c-white);
}
.mobile-menu-title {
    font-family:var(--serif);
    font-size:18px; font-weight:700;
    letter-spacing:.4em;
}
.mobile-close {
    color:var(--c-white);
    font-size:32px;
    line-height:1; width:32px; height:32px;
}
.mobile-nav { padding:8px 0; }
.mobile-nav > li { border-bottom:1px solid var(--c-line); }
.mobile-nav > li.mobile-highlight .mobile-nav-toggle {
    color:var(--c-accent);
}
.mobile-nav-toggle {
    display:flex; align-items:center; justify-content:space-between;
    width:100%;
    padding:18px 24px;
    font-family:var(--serif);
    font-size:17px; font-weight:700;
    color:var(--c-primary);
    text-align:left;
}
.mobile-nav-toggle i {
    font-style:normal;
    font-size:20px;
    color:var(--c-text-light);
    transition:transform .3s;
}
.mobile-nav-toggle.open i { transform:rotate(45deg); color:var(--c-accent); }
.mobile-nav > li > ul {
    max-height:0;
    overflow:hidden;
    background:var(--c-bg-soft);
    transition:max-height .35s var(--ease);
}
.mobile-nav > li.open > ul { max-height:800px; }
.mobile-nav > li > ul a {
    display:block;
    padding:12px 36px;
    font-size:14px;
    color:var(--c-text-soft);
    border-top:1px solid var(--c-line);
}
.mobile-nav > li > ul a:hover { color:var(--c-primary); }

/* 모바일 3뎁스 (온라인/오프라인 과정) */
.mobile-sub > ul {
    max-height:0; overflow:hidden;
    background:var(--c-bg);
    transition:max-height .35s var(--ease);
}
.mobile-sub.open > ul { max-height:400px; }
.mobile-nav-toggle--sub {
    display:flex; align-items:center; justify-content:space-between;
    width:100%;
    padding:14px 36px;
    font-size:15px; font-weight:600;
    color:var(--c-primary);
    text-align:left;
    border-top:1px solid var(--c-line);
}
.mobile-sub > ul a { padding-left:52px; }

/* 모바일 "준비중" 비활성 메뉴 */
.mobile-nav-toggle--soon {
    display:flex; align-items:center; gap:8px;
    width:100%;
    padding:18px 24px;
    font-family:var(--serif);
    font-size:17px; font-weight:700;
    color:var(--c-text-light);
    text-align:left;
    cursor:default;
}
.mobile-nav-toggle--soon em {
    font-style:normal;
    font-size:11px; font-weight:700;
    color:var(--c-accent);
    border:1px solid var(--c-accent);
    border-radius:10px;
    padding:1px 7px;
}
.mobile-menu-foot {
    margin-top:24px;
    padding:0 24px;
    display:flex; gap:8px;
}
.mobile-util {
    flex:1; padding:14px;
    text-align:center;
    border:1px solid var(--c-primary);
    color:var(--c-primary);
    font-size:14px; font-weight:600;
}
.mobile-util:last-child {
    background:var(--c-primary); color:var(--c-white);
}

/* ============== FOOTER ============== */
.site-footer {
    background:var(--c-primary);
    color:rgba(255,255,255,.7);
    margin-top:120px;
    position:relative;
}
.footer-top {
    padding:72px 0 56px;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-inner {
    max-width:var(--max-w);
    margin:0 auto; padding:0 32px;
}
.footer-top .footer-inner {
    display:grid;
    grid-template-columns:1.4fr 2fr;
    gap:64px;
}
.footer-logo {
    display:flex; align-items:center; gap:14px;
    margin-bottom:24px;
}
.f-logo-mark {
    width:50px; height:50px;
    display:flex; align-items:center; justify-content:center;
    background:transparent;
    color:var(--c-accent);
    border:1px solid var(--c-accent);
}
.f-logo-mark svg { width:28px; height:28px; }
.f-logo-img {
    height:50px;
    width:auto;
    display:block;
    filter: invert(1);
}
.footer-logo strong {
    display:block;
    font-family:var(--serif);
    font-size:18px;
    color:var(--c-white);
    margin-bottom:2px;
}
.footer-logo span {
    font-size:11px;
    letter-spacing:.05em;
    color:rgba(255,255,255,.5);
}
.footer-desc {
    font-size:14px; line-height:1.8;
    margin-bottom:24px;
}
.footer-sns { display:flex; gap:8px; }
.footer-sns a {
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.2);
    font-size:11px; font-weight:700;
    letter-spacing:.05em;
    color:rgba(255,255,255,.7);
    transition:all .25s;
}
.footer-sns a:hover {
    background:var(--c-accent); border-color:var(--c-accent);
    color:var(--c-primary);
}
.footer-nav-wrap {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:32px 24px;
}
.footer-col .f-soon {
    font-size:15px;
    color:rgba(255,255,255,.4);
}
.footer-col h4 {
    font-family:var(--serif);
    font-size:15px;
    color:var(--c-white);
    margin-bottom:18px;
    padding-bottom:12px;
    position:relative;
}
.footer-col h4::after {
    content:''; position:absolute;
    bottom:0; left:0; width:18px; height:1px;
    background:var(--c-accent);
}
.footer-col li { margin-bottom:10px; }
.footer-col a {
    font-size:15px;
    color:rgba(255,255,255,.6);
    transition:color .2s;
}
.footer-col a:hover { color:var(--c-accent); }

.footer-bottom { padding:32px 0; }
.footer-info { margin-bottom:16px; }
.info-row {
    display:flex; flex-wrap:wrap;
    gap:0 18px;
    font-size:12px;
    color:rgba(255,255,255,.5);
    margin-bottom:6px;
}
.info-row span { position:relative; }
.info-row span:not(:last-child)::after {
    content:''; position:absolute;
    right:-10px; top:50%; transform:translateY(-50%);
    width:1px; height:10px;
    background:rgba(255,255,255,.2);
}
.info-row strong { color:rgba(255,255,255,.8); font-weight:600; }
.footer-policy {
    display:flex; gap:18px;
    margin-bottom:12px;
}
.footer-policy a {
    font-size:12px;
    color:rgba(255,255,255,.6);
}
.footer-policy a.emp { color:var(--c-white); font-weight:600; }
.copyright {
    font-size:11px;
    color:rgba(255,255,255,.4);
    letter-spacing:.05em;
}

.to-top {
    position:fixed; right:24px; bottom:24px;
    width:48px; height:48px;
    background:var(--c-primary);
    color:var(--c-accent);
    border:1px solid var(--c-accent);
    font-size:18px;
    z-index:50;
    opacity:0; visibility:hidden;
    transform:translateY(8px);
    transition:all .3s;
}
.to-top.show { opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover { background:var(--c-accent); color:var(--c-primary); }

/* ============== SUB PAGE COMMON ============== */
.sub-visual {
    margin-top:var(--header-h);
    height:380px;
    background:#0a0e23 var(--sv-bg, none) 50% 50% / cover no-repeat;
    color:var(--c-white);
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    position:relative;
    overflow:hidden;
    animation:svPan 32s ease-in-out infinite alternate;
}
.sub-visual::before {
    content:''; position:absolute; inset:0;
    background:
        linear-gradient(180deg, rgba(8,12,32,.62) 0%, rgba(8,12,32,.48) 50%, rgba(8,12,32,.78) 100%);
}
.sub-visual::after {
    content:''; position:absolute; inset:-12%;
    background-image:
        radial-gradient(circle 70px at 18% 28%, rgba(255,225,170,.16), transparent 72%),
        radial-gradient(circle 90px at 78% 72%, rgba(220,235,255,.14), transparent 72%),
        radial-gradient(circle 55px at 48% 18%, rgba(255,250,220,.12), transparent 72%),
        radial-gradient(circle 80px at 30% 82%, rgba(255,235,200,.12), transparent 72%),
        radial-gradient(circle 65px at 88% 30%, rgba(180,210,240,.13), transparent 72%),
        radial-gradient(ellipse 45% 35% at 22% 38%, rgba(255,200,140,.20) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 78% 62%, rgba(150,200,255,.16) 0%, transparent 70%);
    filter:blur(10px);
    pointer-events:none;
    mix-blend-mode:screen;
    animation:svGlowDrift 16s ease-in-out infinite alternate;
    will-change:transform, opacity;
}
@keyframes svPan {
    0%   { background-position:42% 45%; }
    50%  { background-position:58% 50%; }
    100% { background-position:50% 58%; }
}
@keyframes svGlowDrift {
    0%   { transform:translate3d(-3%,-2%,0) scale(1)    rotate(0deg);  opacity:.85; }
    50%  { transform:translate3d(3%,2%,0)   scale(1.06) rotate(3deg);  opacity:1; }
    100% { transform:translate3d(-1%,3%,0)  scale(1.03) rotate(-2deg); opacity:.9; }
}
@media (prefers-reduced-motion:reduce) {
    .sub-visual, .sub-visual::after { animation:none; }
}
.sub-visual-inner { position:relative; z-index:2; padding:0 24px; }
.sub-visual .eyebrow {
    display:inline-block;
    font-size:12px;
    letter-spacing:.45em;
    color:var(--c-accent);
    font-weight:700;
    margin-bottom:18px;
    padding-bottom:14px;
    position:relative;
    text-transform:uppercase;
}
.sub-visual .eyebrow::after {
    content:''; position:absolute;
    left:50%; bottom:0;
    transform:translateX(-50%);
    width:40px; height:1px;
    background:var(--c-accent);
}
.sub-visual h2 {
    font-family:var(--serif);
    font-size:52px; font-weight:800;
    letter-spacing:-.025em;
    line-height:1.15;
    margin-bottom:18px;
    color:var(--c-white);
}
.sub-visual .breadcrumb {
    font-size:15px;
    letter-spacing:.08em;
    color:rgba(255,255,255,.65);
    font-weight:500;
}
.sub-visual .breadcrumb span { color:var(--c-accent); margin:0 6px; }

/* ============== RESPONSIVE ============== */
@media (max-width:1100px) {
    .gnb-link { padding:12px 14px; font-size:14px; }
    .logo-en { display:none; }
}
@media (max-width:960px) {
    :root { --header-h:var(--header-h-mo); }
    .header-inner { padding:0 20px; }
    .gnb { display:none; }
    .util-login { display:none; }
    .hamburger { display:flex; }
    .logo-mark { width:38px; height:38px; font-size:16px; }
    .logo-text { font-size:15px; }
    .logo-img { height:38px; }

    .section { padding:64px 0; }
    .section-title { font-size:30px; }
    .section-head { margin-bottom:40px; }

    .footer-top .footer-inner { grid-template-columns:1fr; gap:40px; }
    .footer-nav-wrap { grid-template-columns:repeat(2, 1fr); gap:24px; }

    .sub-visual { height:280px; }
    .sub-visual h2 { font-size:34px; }
    .sub-visual .eyebrow { font-size:11px; letter-spacing:.35em; margin-bottom:14px; }
}
@media (max-width:600px) {
    .container { padding:0 20px; }
    .footer-inner { padding:0 20px; }
    .info-row { gap:0; flex-direction:column; }
    .info-row span:not(:last-child)::after { display:none; }
    .footer-policy { flex-wrap:wrap; gap:12px; }
    .section-title { font-size:26px; }
    .sub-visual { height:240px; }
    .sub-visual h2 { font-size:26px; }
    .to-top { width:42px; height:42px; right:16px; bottom:16px; }
}

/* ===== 3뎁스 네비 (강의별) ===== */
.depth3-wrap { background:var(--c-bg-soft); border-bottom:1px solid var(--c-line); }
.depth3 { display:flex; justify-content:center; gap:10px; padding:14px 0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.depth3::-webkit-scrollbar { display:none; }
.depth3:empty { display:none; }
.depth3 a {
    flex:0 0 auto; padding:9px 20px; border-radius:999px;
    font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;
    color:var(--c-text-soft); background:var(--c-white); border:1px solid var(--c-line);
    transition:color .18s, background .18s, border-color .18s;
}
.depth3 a:hover { color:var(--c-primary); border-color:var(--c-accent); }
.depth3 a.active { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.depth3-wrap:has(.depth3:empty) { display:none; }
@media (max-width:600px) { .depth3 { padding:12px 0; gap:8px; } .depth3 a { padding:8px 16px; font-size:13.5px; } }