@font-face { font-family: "Pretendard"; src: url("a/pv.woff2") format("woff2"); font-weight: 45 920; }
:root {
  --ink: #0F1115; --body: #3A3F47; --sub: #6A717C; --mute: #9AA1AC; --line: #E7E9EE;
  --paper: #FFFFFF; --mist: #F3F4F6; --black: #08090B; --night: #0B1A2E;
  --blue: #2A7DE1; --blue-hi: #5AA2FF; --blue-soft: rgba(42,125,225,.10);
  --gold: #C9A86A; --kakao: #FEE500;
  --r: 44px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Pretendard", sans-serif; background: var(--black); color: var(--body); word-break: keep-all; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
img { display: block; }

/* ===== 스택 패널: 섹션이 가로로 끊기지 않고 라운드로 겹쳐 올라옴 ===== */
.panel { position: relative; padding: 128px 0 136px; }
/* 라운딩은 큰 전환 지점(.sheet)에만 */
.panel.sheet { border-radius: var(--r) var(--r) 0 0; margin-top: calc(var(--r) * -1); box-shadow: 0 -24px 60px rgba(0,0,0,.22); z-index: 2; }
.panel.flush { padding-top: 0; }
.panel + .panel.p-paper:not(.sheet), .panel.p-mist + .panel.p-paper { border-top: 1px solid var(--line); }
.p-black + .p-night { background: linear-gradient(180deg, var(--black) 0%, #0D1E36 30%, var(--night) 60%, #070F1C 100%); }
.p-night + .p-black { background: linear-gradient(180deg, #070F1C 0%, var(--black) 22%); }
.p-black { background: var(--black); color: #fff; }
.p-night { background: radial-gradient(120% 90% at 50% 0%, #15335A 0%, var(--night) 55%, #070F1C 100%); color: #fff; }
.p-paper { background: var(--paper); }
.p-mist  { background: var(--mist); }
.panel > .wrap { position: relative; z-index: 2; }
.inset { border-radius: 28px; overflow: hidden; }

/* ===== 타이포 ===== */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 22px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.dark .eyebrow, .p-black .eyebrow, .p-night .eyebrow { color: var(--blue-hi); }
h1 { font-size: 60px; line-height: 1.22; font-weight: 700; letter-spacing: -0.035em; color: #fff; }
h2 { font-size: 46px; line-height: 1.3; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); }
.p-black h2, .p-night h2 { color: #fff; }
h2 em, h1 em { font-style: normal; color: var(--blue); }
.p-black h2 em, .p-night h2 em, h1 em { color: var(--blue-hi); }
h3 { font-size: 21px; line-height: 1.45; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.p-black h3, .p-night h3 { color: #fff; }
.lead { font-size: 19px; line-height: 1.75; color: var(--sub); margin-top: 20px; max-width: 720px; }
.p-black .lead, .p-night .lead { color: #A9B1BE; }
p { font-size: 16px; line-height: 1.8; color: var(--sub); }
.p-black p, .p-night p { color: #A9B1BE; }
b { font-weight: 650; color: var(--ink); }
.p-black b, .p-night b { color: #fff; }
.num { font-variant-numeric: tabular-nums; }
.center { text-align: center; } .center .lead { margin-left: auto; margin-right: auto; }
.mt { margin-top: 64px; } .mt-s { margin-top: 36px; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ===== 버튼 ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 30px; border-radius: 999px; font-size: 16px; font-weight: 650; white-space: nowrap; letter-spacing: -0.01em; }
.btn.primary { background: var(--blue); color: #fff; box-shadow: 0 10px 30px rgba(42,125,225,.35); }
.btn.ghost { border: 1px solid rgba(255,255,255,.32); color: #fff; }
.btn.ghost-d { border: 1px solid #CBD0D8; color: var(--ink); }
.btn .arr { font-weight: 400; opacity: .8; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 44px; }
.center .ctas { justify-content: center; }
.textlink { display: inline-flex; gap: 6px; margin-top: 40px; font-size: 15px; font-weight: 600; color: var(--blue); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.p-black .textlink, .p-night .textlink { color: #fff; }

/* ===== NAV ===== */
nav { position: sticky; top: 0; z-index: 50; height: 74px; background: rgba(8,9,11,.82); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.06); }
nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 14px; font-weight: 700; letter-spacing: .22em; color: #fff; }
.menu { display: flex; gap: 30px; font-size: 14.5px; color: #AEB5C0; }
.menu .on { color: #fff; font-weight: 650; }
.menu .new { position: relative; } .menu .new::after { content: "NEW"; position: absolute; top: -10px; right: -26px; font-size: 9px; font-weight: 800; color: var(--blue-hi); letter-spacing: .05em; }
.navr { display: flex; gap: 10px; align-items: center; }
.navr .login { font-size: 13.5px; color: #8E96A3; margin-right: 6px; }
nav .btn { height: 42px; padding: 0 20px; font-size: 14px; }

/* ===== 영상 자리 ===== */
.video { position: relative; overflow: hidden; border-radius: 28px; background: #000; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.video .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; }
.video .play::after { content: ""; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 6px; }
.video .vtag { position: absolute; left: 22px; top: 20px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #fff; background: rgba(0,0,0,.55); padding: 7px 12px; border-radius: 999px; }
.video .vcap { position: absolute; left: 24px; right: 24px; bottom: 22px; font-size: 14px; color: #E8ECF2; }
.vnote { margin-top: 12px; font-size: 13px; color: var(--mute); border-left: 2px solid var(--blue); padding-left: 10px; text-align: left; }
.p-black .vnote, .p-night .vnote { color: #7E8896; }

/* ===== 히어로 ===== */
.hero { padding: 0 !important; min-height: 860px; overflow: hidden; }
.hero .bg { position: absolute; inset: 0; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,11,.96) 0%, rgba(8,9,11,.75) 48%, rgba(8,9,11,.35) 100%), linear-gradient(0deg, var(--black) 0%, transparent 40%); }
.hero .wrap { padding-top: 150px; padding-bottom: 150px; }
.hero .kick { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: #CFD6E0; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 9px 16px; margin-bottom: 30px; }
.hero .kick i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-hi); }
.hero .lead { color: #C3CAD5; font-size: 20px; }
.hero .meta { display: flex; gap: 26px; margin-top: 56px; font-size: 14px; color: #8F98A6; }
.hero .meta b { display: block; font-size: 22px; color: #fff; margin-bottom: 2px; }
.hero .vlabel { position: absolute; right: 28px; bottom: 120px; font-size: 12px; color: #9AA4B2; letter-spacing: .04em; z-index: 3; }

/* ===== 로드맵 ===== */
.road { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin-top: 56px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); }
.road > div { padding: 0; background: #fff; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.road > div:first-child { border-left: 0; }
.road img { width: 100%; height: 220px; object-fit: cover; }
.road .t { padding: 30px 30px 34px; }
.road .when { font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: .04em; }
.road h3 { font-size: 24px; margin: 8px 0 10px; }
.road .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.road .chips span { font-size: 12.5px; color: var(--sub); background: var(--mist); padding: 5px 10px; border-radius: 999px; }
.road .after { background: var(--night); }
.road .after h3, .road .after b { color: #fff; } .road .after p { color: #A9B4C4; } .road .after .when { color: var(--blue-hi); }
.road .after .chips span { background: rgba(255,255,255,.08); color: #C7D0DC; }

/* ===== AI ===== */
.ai { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.split { display: grid; gap: 14px; margin-top: 34px; }
.split > div { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; padding: 20px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.split .who { font-size: 13px; font-weight: 700; color: var(--mute); }
.split .hand { background: var(--ink); border-color: var(--ink); } .split .hand .who { color: var(--blue-hi); } .split .hand b { color: #fff; } .split .hand p { color: #A9B1BE; }
.split b { display: block; font-size: 17px; } .split p { font-size: 14.5px; line-height: 1.6; }

/* ===== 직업 · 단가 ===== */
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.1); border-radius: 24px; overflow: hidden; margin-top: 56px; }
.perks div { background: rgba(10,26,46,.92); padding: 30px 28px; }
.perks .n { font-size: 12px; font-weight: 700; color: var(--blue-hi); }
.perks b { display: block; font-size: 18.5px; margin: 8px 0 6px; }
.perks p { font-size: 14.5px; line-height: 1.65; }
.rate { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 20px; margin-top: 20px; }
.rate > div { border-radius: 24px; padding: 30px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.rate small { font-size: 13px; color: #9EABBC; }
.rate .big { font-size: 42px; font-weight: 700; color: #fff; letter-spacing: -0.03em; margin-top: 6px; }
.rate .big span { font-size: 17px; color: #9EABBC; font-weight: 500; margin-left: 4px; }
.rate .note { font-size: 13px; color: var(--gold); margin-top: 10px; }
.rate ul { list-style: none; } .rate li { font-size: 14.5px; color: #C9D2DE; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .rate li:last-child { border-bottom: 0; }

/* ===== 갤러리 ===== */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.flow .col h4 { font-size: 13px; letter-spacing: .08em; color: var(--blue-hi); font-weight: 700; }
.flow .col h3 { margin: 6px 0 4px; }
.flow .col p { font-size: 14px; margin-bottom: 16px; }
.flow .gr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph { position: relative; border-radius: 14px; overflow: hidden; background: #111; }
.ph img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ph .lab { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 650; color: #fff; background: rgba(0,0,0,.66); padding: 4px 8px; border-radius: 6px; }
.ph .lab.mj { background: rgba(42,125,225,.9); }
.gal5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.gal6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }

/* ===== 인터뷰 ===== */
.quote { background: #fff; border-radius: 26px; padding: 34px 32px; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; min-height: 330px; }
.p-paper .quote { background: var(--mist); border-color: transparent; }
.quote .tg { font-size: 12.5px; font-weight: 700; color: var(--blue); margin-bottom: 14px; }
.quote blockquote { font-size: 16.5px; line-height: 1.85; color: var(--ink); }
.quote .who { display: flex; gap: 12px; align-items: center; margin-top: 24px; }
.quote .av { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.quote .who b { display: block; font-size: 15px; } .quote .who span { font-size: 13px; color: var(--mute); }
.reviews { display: flex; gap: 14px; margin-top: 36px; overflow: hidden; }
.reviews img { width: 180px; height: 354px; object-fit: cover; object-position: top; border-radius: 18px; border: 1px solid var(--line); flex: none; }
.rv-head { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 72px; }
.rv-head .badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: var(--ink); }
.rv-head .badge i { width: 22px; height: 22px; border-radius: 6px; background: #03C75A; color: #fff; font-style: normal; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* ===== 걱정 ===== */
.faqgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.faqgrid > div { background: #fff; border-radius: 22px; padding: 28px; border: 1px solid var(--line); }
.faqgrid .q { font-size: 17.5px; font-weight: 650; color: var(--ink); margin-bottom: 10px; }
.faqgrid .q::before { content: "Q"; display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 12.5px; font-weight: 800; align-items: center; justify-content: center; margin-right: 10px; vertical-align: 2px; }
.faqgrid p { font-size: 15px; }

/* ===== 약속 ===== */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.promise > div { border-radius: 24px; padding: 34px 30px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.promise .n { font-size: 44px; font-weight: 700; color: var(--blue-hi); letter-spacing: -0.03em; line-height: 1; }
.promise b { display: block; font-size: 19px; margin: 18px 0 8px; }

/* ===== 수료 후 ===== */
.year { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.tline { margin-top: 36px; border-left: 2px solid var(--line); padding-left: 28px; }
.tline > div { position: relative; padding-bottom: 28px; }
.tline > div::before { content: ""; position: absolute; left: -36px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
.tline .when { font-size: 13px; font-weight: 700; color: var(--blue); }
.tline b { display: block; font-size: 18px; margin: 4px 0; }
.tline p { font-size: 15px; }
.stat200 { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; }
.stat200 b { font-size: 76px; font-weight: 700; color: var(--blue); letter-spacing: -0.04em; line-height: 1; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mosaic .ph img { aspect-ratio: 4/3; }
.mosaic .ph:first-child { grid-column: 1 / -1; } .mosaic .ph:first-child img { aspect-ratio: 16/9; }

/* ===== 혜택 ===== */
.gifts { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; margin-top: 56px; }
.gift { border-radius: 24px; padding: 30px; background: #121418; border: 1px solid #22262D; }
.gift.hero-g { grid-row: span 2; background: linear-gradient(160deg, #1A1A17 0%, #0E0F11 70%); border-color: rgba(201,168,106,.35); display: flex; flex-direction: column; justify-content: space-between; }
.gift .tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--gold); border: 1px solid rgba(201,168,106,.45); border-radius: 999px; padding: 5px 11px; }
.gift b { display: block; font-size: 20px; margin: 16px 0 8px; color: #fff; }
.gift.hero-g b { font-size: 30px; line-height: 1.35; }
.gift .mach { height: 220px; border-radius: 18px; overflow: hidden; margin-top: 22px; } .gift .mach img { width: 100%; height: 100%; object-fit: cover; }
.gift p { font-size: 14.5px; color: #9CA4B1; }

/* ===== 가격 ===== */
.price { margin-top: 56px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.prow { display: grid; grid-template-columns: 1.1fr 1fr 1.7fr 1.2fr; align-items: center; padding: 30px 36px; border-top: 1px solid var(--line); }
.prow:first-child { border-top: 0; }
.prow.head { background: var(--mist); padding: 16px 36px; font-size: 12.5px; font-weight: 700; color: var(--mute); letter-spacing: .04em; }
.prow .nm b { font-size: 21px; display: block; } .prow .nm small { font-size: 13px; color: var(--mute); }
.prow .per { font-size: 15.5px; color: var(--ink); font-weight: 600; }
.prow .what { font-size: 14.5px; color: var(--sub); line-height: 1.65; }
.prow .amt { text-align: right; } .prow .amt b { font-size: 34px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; } .prow .amt small { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.prow.best { background: linear-gradient(90deg, #F7FAFF, #FFFFFF); } .prow.best .amt b { color: var(--blue); }
.chip { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: #7A5E2A; background: rgba(201,168,106,.18); padding: 4px 9px; border-radius: 6px; }
.payflow { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 14px; margin-top: 20px; }
.payflow > div { border-radius: 20px; background: var(--mist); padding: 22px 24px; }
.payflow small { font-size: 12.5px; color: var(--mute); font-weight: 600; }
.payflow b { display: block; font-size: 22px; margin-top: 4px; }
.payflow .x { background: var(--ink); } .payflow .x b, .payflow .x small { color: #fff; } .payflow .x p { color: #A9B1BE; font-size: 13.5px; margin-top: 6px; line-height: 1.6; }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.notes > div { border-radius: 20px; padding: 26px 28px; border: 1px solid var(--line); }
.notes h3 { font-size: 17px; margin-bottom: 10px; }
.notes li { list-style: none; font-size: 14.5px; color: var(--sub); padding: 5px 0 5px 18px; position: relative; }
.notes li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

/* ===== 신청 ===== */
.apply { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; counter-reset: s; }
.apply > div { border-radius: 24px; background: #fff; padding: 30px; border: 1px solid var(--line); }
.apply > div::before { counter-increment: s; content: "0" counter(s); display: block; font-size: 30px; font-weight: 700; color: var(--blue); letter-spacing: -0.02em; margin-bottom: 14px; }
.apply b { display: block; font-size: 19px; margin-bottom: 6px; }
.visit { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; margin-top: 20px; border-radius: 24px; overflow: hidden; background: var(--ink); }
.visit .t { padding: 34px 36px; } .visit .t b { color: #fff; font-size: 21px; display: block; margin-bottom: 8px; } .visit .t p { color: #A9B1BE; }
.visit .video { border-radius: 0; min-height: 240px; }
.faq { margin-top: 56px; border-top: 1px solid var(--ink); }
.faq div { padding: 22px 4px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; }
.faq b { font-size: 16.5px; } .faq i { font-style: normal; color: var(--mute); }
.faq p { grid-column: 1 / -1; font-size: 15px; }

/* ===== 마감 ===== */
.final { min-height: 640px; overflow: hidden; text-align: center; }
.final .ctas { justify-content: center; } .final .lead { margin-left: auto; margin-right: auto; }
.final .bg { position: absolute; inset: 0; } .final .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.final .bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 40%, rgba(8,9,11,.4), var(--black)); }
.locbar { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; border-top: 1px solid rgba(255,255,255,.1); text-align: left; }
.locbar div { padding: 24px 0 0; } .locbar small { font-size: 12px; color: #7F8896; letter-spacing: .06em; } .locbar b { display: block; font-size: 15px; margin-top: 4px; }
footer { background: #050506; color: #6E7684; font-size: 12.5px; line-height: 1.9; padding: 44px 0 50px; }
footer .wrap { display: flex; justify-content: space-between; gap: 40px; }
footer a { color: #A7AFBB; margin-right: 16px; }

/* ===== 서브 페이지 히어로 ===== */
.sub-hero { padding: 120px 0 150px !important; overflow: hidden; }
.sub-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 80% 0%, rgba(42,125,225,.22), transparent 60%); }
.crumb { font-size: 12.5px; color: #7E8896; letter-spacing: .14em; margin-bottom: 26px; }
.crumb b { color: var(--blue-hi); }
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; border-top: 1px solid rgba(255,255,255,.12); }
.statrow div { padding: 26px 0 0; } .statrow b { font-size: 40px; font-weight: 700; color: #fff; letter-spacing: -0.03em; } .statrow b em { font-style: normal; font-size: 18px; color: var(--blue-hi); margin-left: 3px; } .statrow span { display: block; font-size: 13.5px; color: #8F98A6; margin-top: 2px; }

/* 4개월 바 */
.bars { margin-top: 56px; }
.bars .row { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; margin-top: 12px; }
.bars .row b { font-size: 15.5px; } .bars .row small { display: block; font-size: 12.5px; color: var(--mute); font-weight: 500; }
.bars .cells { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
.bars i { height: 36px; border-radius: 5px; background: var(--mist); }
.bars i.a { background: #2A7DE1; } .bars i.b { background: #8BBCF5; } .bars i.c { background: var(--ink); }
.bars .scale { display: grid; grid-template-columns: 170px 1fr; gap: 20px; margin-top: 10px; }
.bars .scale div { display: grid; grid-template-columns: repeat(16, 1fr); font-size: 11px; color: var(--mute); text-align: center; }
.bars .phase { display: grid; grid-template-columns: 170px 1fr; gap: 20px; margin-bottom: 4px; }
.bars .phase div { display: grid; grid-template-columns: 8fr 8fr; font-size: 13px; font-weight: 700; }
.bars .phase span:first-child { color: var(--blue); } .bars .phase span:last-child { color: var(--ink); }
.legend { display: flex; gap: 20px; margin-top: 18px; font-size: 13px; color: var(--sub); }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* 클래스 카드 */
.cls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.cls .c { border-radius: 26px; border: 1px solid var(--line); background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.cls .c img { width: 100%; height: 200px; object-fit: cover; }
.cls .t { padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; }
.cls .when { font-size: 12.5px; font-weight: 700; color: var(--blue); }
.cls h3 { font-size: 24px; margin: 6px 0 4px; }
.cls dl { display: grid; grid-template-columns: 64px 1fr; row-gap: 8px; font-size: 14px; margin-top: 16px; }
.cls dt { color: var(--mute); } .cls dd { color: var(--ink); }
.cls .pr { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.cls .pr span { font-size: 12.5px; color: var(--mute); } .cls .pr b { font-size: 26px; font-weight: 700; color: var(--ink); }

/* 단계 행 */
.step { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.step:first-of-type { border-top: 0; }
.step.rev .pics { order: 2; }
.step .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.step .pics .ph:first-child { grid-column: 1 / -1; } .step .pics .ph:first-child img { aspect-ratio: 16/9; } .step .pics img { aspect-ratio: 4/3; }
.step .no { font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: .06em; }
.step h3 { font-size: 30px; margin: 8px 0 14px; letter-spacing: -0.02em; line-height: 1.35; }
.step li { list-style: none; font-size: 15.5px; color: var(--sub); padding: 6px 0 6px 18px; position: relative; }
.step li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 1.5px; background: var(--blue); }
.step .why { margin-top: 18px; font-size: 14.5px; color: var(--ink); background: var(--mist); border-radius: 14px; padding: 14px 18px; }
.step .new { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: var(--blue); border-radius: 5px; padding: 2px 6px; margin-left: 8px; vertical-align: 4px; }
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.phases div { border-radius: 14px; padding: 14px 16px; background: var(--mist); font-size: 13.5px; color: var(--sub); }
.phases b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 2px; }

/* 구조 비교 */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.compare > div { border-radius: 26px; padding: 34px; }
.compare .a { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.compare .b { background: linear-gradient(160deg, rgba(42,125,225,.22), rgba(42,125,225,.06)); border: 1px solid rgba(90,162,255,.45); }
.compare small { font-size: 12.5px; letter-spacing: .08em; color: #8F98A6; font-weight: 700; }
.compare .b small { color: var(--blue-hi); }
.compare h3 { font-size: 22px; margin: 6px 0 20px; }
.compare li { list-style: none; display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 14.5px; color: #B9C2CE; }
.compare li span { color: #7F8896; font-size: 13px; }
.compare .b li { color: #fff; }
.compare .res { margin-top: 18px; font-size: 15px; font-weight: 650; }
.compare .a .res { color: #8F98A6; } .compare .b .res { color: var(--blue-hi); }

/* 일정 */
.sched { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.sched > div { border-radius: 20px; padding: 24px; background: #fff; border: 1px solid var(--line); }
.sched small { font-size: 12px; font-weight: 700; color: var(--blue); }
.sched b { display: block; font-size: 17px; margin: 6px 0 2px; }
.sched p { font-size: 13.5px; }

/* 강사 */
.inst4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 64px; }
.inst4 .p { border-radius: 24px; overflow: hidden; position: relative; background: #111; }
.inst4 img { width: 100%; aspect-ratio: 3/4.2; object-fit: cover; object-position: top; filter: grayscale(.15); }
.inst4 .t { position: absolute; inset: auto 0 0 0; padding: 70px 20px 20px; background: linear-gradient(transparent, rgba(0,0,0,.9)); }
.inst4 b { display: block; font-size: 20px; color: #fff; } .inst4 span { font-size: 12px; letter-spacing: .1em; color: #AEB7C3; }
.prof { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start; }
.prof.rev { grid-template-columns: 1fr 380px; } .prof.rev .pp { order: 2; }
.prof .pp { border-radius: 28px; overflow: hidden; } .prof .pp img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top; }
.prof .role { font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: .04em; }
.prof h3 { font-size: 44px; margin: 6px 0 2px; letter-spacing: -0.03em; }
.prof .en { font-size: 13px; color: var(--mute); letter-spacing: .2em; }
.prof blockquote { margin: 26px 0; font-size: 19px; line-height: 1.7; color: var(--ink); font-weight: 500; padding-left: 20px; border-left: 2px solid var(--blue); }
.prof .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.prof .facts li { list-style: none; font-size: 14px; color: var(--sub); padding: 10px 0; border-bottom: 1px solid var(--line); }
.prof .more { margin-top: 16px; display: inline-flex; gap: 6px; font-size: 14px; font-weight: 650; color: var(--ink); border: 1px solid #CBD0D8; border-radius: 999px; padding: 10px 18px; }
.prof .works { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 26px; }
.prof .works img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.tl { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 56px; position: relative; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 46px; height: 1px; background: rgba(255,255,255,.2); }
.tl div { padding-right: 16px; } .tl .y { font-size: 28px; font-weight: 700; color: #fff; }
.tl i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-hi); margin: 10px 0 16px; box-shadow: 0 0 0 6px rgba(90,162,255,.18); }
.tl p { font-size: 13.5px; line-height: 1.6; }

/* 온라인 클래스 */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 56px; }
.tiers > div { border-radius: 24px; padding: 28px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.tiers .lv { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #8F98A6; }
.tiers b { display: block; font-size: 20px; margin: 8px 0 12px; }
.tiers li { list-style: none; font-size: 14px; color: #B9C2CE; padding: 6px 0; }
.tiers .on { background: linear-gradient(160deg, rgba(42,125,225,.25), rgba(42,125,225,.06)); border-color: rgba(90,162,255,.45); }
.tiers .on .lv { color: var(--blue-hi); }
.tiers .lock { float: right; font-size: 13px; }
.lib { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.lib .item { border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.lib .th { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #111; }
.lib .th img { width: 100%; height: 100%; object-fit: cover; }
.lib .th .kind { position: absolute; left: 12px; top: 12px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.6); padding: 4px 9px; border-radius: 999px; }
.lib .th .dur { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: #fff; background: rgba(0,0,0,.6); padding: 3px 7px; border-radius: 5px; }
.lib .t { padding: 18px 20px 20px; } .lib b { display: block; font-size: 15.5px; line-height: 1.45; } .lib small { font-size: 12.5px; color: var(--mute); }
.lib .locked .th img { filter: blur(3px) grayscale(.4); opacity: .55; }
.lib .locked .th::after { content: "🔒 교육생 전용"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; }
.ebook { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; border-radius: 28px; background: var(--mist); padding: 44px; margin-top: 40px; }
.ebook .cover { aspect-ratio: 3/4; border-radius: 10px 18px 18px 10px; background: linear-gradient(160deg, #0F2340, #08090B); color: #fff; padding: 34px 28px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 18px 22px 40px rgba(0,0,0,.25); }
.ebook .cover small { font-size: 11px; letter-spacing: .2em; color: var(--blue-hi); }
.ebook .cover b { font-size: 28px; line-height: 1.3; color: #fff; }
.ebook .cover span { font-size: 12px; color: #8F98A6; }

/* 모바일 하단 바 */
.mbar { display: none; }

@media (max-width: 600px) {
  :root { --r: 28px; }
  .wrap { padding: 0 20px; }
  .panel { padding: 88px 0 110px; }
  h1 { font-size: 36px; } h2 { font-size: 29px; } h3 { font-size: 19px; }
  .lead { font-size: 16px; } p { font-size: 15px; }
  .menu, .navr .login, nav .btn.ghost { display: none; }
  nav { height: 62px; } nav .btn { height: 38px; padding: 0 14px; font-size: 13px; }
  .hero { min-height: auto; } .hero .wrap { padding-top: 84px; padding-bottom: 120px; }
  .hero .lead { font-size: 16.5px; } .hero .meta { flex-wrap: wrap; gap: 18px 26px; } .hero .vlabel { display: none; }
  .ctas { flex-direction: column; } .ctas .btn { width: 100%; }
  .g2, .g3, .g4, .road, .ai, .perks, .rate, .flow, .faqgrid, .promise, .year, .gifts, .notes, .apply, .visit, .cls, .step, .compare, .sched, .prof, .prof.rev, .tiers, .lib, .ebook { grid-template-columns: 1fr; }
  .g4.inst4, .inst4 { grid-template-columns: 1fr 1fr; }
  .gift.hero-g { grid-row: auto; }
  .road > div { border-left: 0; border-top: 1px solid var(--line); }
  .prow.head { display: none; }
  .prow { grid-template-columns: 1fr auto; row-gap: 6px; padding: 22px 20px; }
  .prow .per, .prow .what { grid-column: 1 / -1; } .prow .amt { grid-column: 2; grid-row: 1; } .prow .amt b { font-size: 26px; }
  .payflow { grid-template-columns: 1fr 1fr; }
  .gal5, .gal6 { grid-template-columns: repeat(3, 1fr); }
  .reviews img { width: 140px; height: 275px; }
  .rv-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .locbar, .statrow { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .step.rev .pics, .prof.rev .pp { order: 0; }
  .bars .row, .bars .scale, .bars .phase { grid-template-columns: 1fr; gap: 6px; } .bars .scale > span, .bars .phase > span { display: none; } .bars i { height: 24px; }
  .tl { grid-template-columns: 1fr 1fr; row-gap: 26px; } .tl::before { display: none; }
  .prof .facts { grid-template-columns: 1fr; } .prof h3 { font-size: 34px; }
  .ebook { padding: 28px; } .ebook .cover { max-width: 220px; }
  footer .wrap { flex-direction: column; gap: 14px; } footer { padding-bottom: 110px; }
  .mbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(15,17,21,.92); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
  .mbar .btn { flex: 1; height: 48px; font-size: 14.5px; padding: 0 10px; }
  .mbar .kk { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--kakao); color: #191919; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
}

/* v6 추가 */
.ailine { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px; margin-top: 16px; }
.ailine > div { display: flex; gap: 14px; align-items: center; padding: 18px 22px; border-radius: 18px; background: var(--mist); }
.ailine .k { font-size: 12px; font-weight: 700; color: var(--mute); white-space: nowrap; }
.ailine b { font-size: 15.5px; display: block; } .ailine p { font-size: 13.5px; line-height: 1.5; }
.ailine .hand { background: var(--ink); } .ailine .hand b { color: #fff; } .ailine .hand p { color: #A9B1BE; } .ailine .hand .k { color: var(--blue-hi); }
.promise.light > div { background: #fff; border: 1px solid var(--line); }
.divider-gap { height: 96px; }
@media (max-width: 600px) { .ailine { grid-template-columns: 1fr; } .divider-gap { height: 64px; } }

/* ===== v7: 무료 진단 체크리스트 ===== */
.diag { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; align-items: start; }
.diag .opts { display: grid; gap: 12px; }
.diag label { display: flex; gap: 14px; align-items: center; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: #fff; font-size: 16.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.diag input { display: none; }
.diag .bx { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #B6BEC9; flex: none; position: relative; }
.diag input:checked + .bx { background: var(--blue); border-color: var(--blue); }
.diag input:checked + .bx::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.diag label:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.diag .res { position: sticky; top: 100px; border-radius: 26px; background: var(--ink); padding: 36px; min-height: 380px; display: flex; flex-direction: column; }
.diag .res small { font-size: 12px; letter-spacing: .14em; color: var(--blue-hi); font-weight: 700; }
.diag .res .out { margin-top: 18px; font-size: 22px; line-height: 1.6; color: #fff; font-weight: 600; min-height: 150px; }
.diag .res .out em { font-style: normal; color: var(--blue-hi); }
.diag .res .out::after { content: "▍"; color: var(--blue-hi); animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.diag .res .rec { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; color: #A9B1BE; }
.diag .res .rec b { color: #fff; }
.diag .res .ctas { margin-top: 18px; }
.diffs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 56px; }
.diffs > div { border-radius: 22px; padding: 28px 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.diffs .n { font-size: 34px; font-weight: 700; color: var(--blue-hi); line-height: 1; }
.diffs b { display: block; font-size: 17px; margin: 16px 0 8px; line-height: 1.4; }
.diffs p { font-size: 13.5px; line-height: 1.65; }
.diffs .hl5 { background: linear-gradient(160deg, rgba(42,125,225,.28), rgba(42,125,225,.06)); border-color: rgba(90,162,255,.45); }
.tiers3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 20px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.tiers3 > div { padding: 28px; background: rgba(255,255,255,.04); border-left: 1px solid rgba(255,255,255,.1); }
.tiers3 > div:first-child { border-left: 0; }
.tiers3 small { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #8F98A6; }
.tiers3 b { display: block; font-size: 30px; font-weight: 700; color: #fff; margin: 8px 0 4px; letter-spacing: -0.02em; }
.tiers3 b span { font-size: 15px; color: #9EABBC; font-weight: 500; }
.tiers3 p { font-size: 14px; }
.tiers3 .arrow { color: var(--blue-hi); }
.tnote { margin-top: 14px; font-size: 13px; color: var(--gold); }
.value { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; margin-top: 20px; border-radius: 22px; overflow: hidden; }
.value .l { background: var(--night); padding: 30px 34px; color: #fff; }
.value .l small { font-size: 12.5px; color: #9EABBC; }
.value .l b { display: block; font-size: 28px; color: #fff; margin-top: 6px; letter-spacing: -0.02em; }
.value .l b em { font-style: normal; color: var(--blue-hi); }
.value .r { background: var(--mist); padding: 30px 34px; }
.value .r p { font-size: 14.5px; line-height: 1.75; }
.stage { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; margin-top: 20px; border-radius: 22px; padding: 26px 30px; background: #fff; border: 1px solid var(--line); }
.stage b { font-size: 18px; } .stage p { font-size: 14.5px; }
@media (max-width: 600px) {
  .diag, .diffs, .tiers3, .value, .stage { grid-template-columns: 1fr; }
  .diag .res { position: static; min-height: 0; } .diag .res .out { font-size: 19px; min-height: 0; }
  .tiers3 > div { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
}

/* ===== v8: 상담 원문 반영 ===== */
.mission { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.mission blockquote { font-size: 40px; line-height: 1.38; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.mission blockquote em { font-style: normal; color: var(--blue-hi); }
.mission .by { margin-top: 22px; font-size: 14px; color: #8F98A6; }
.order { display: grid; gap: 12px; }
.order > div { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center; padding: 22px 26px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.order > div.on { background: linear-gradient(160deg, rgba(42,125,225,.28), rgba(42,125,225,.08)); border-color: rgba(90,162,255,.5); }
.order .n { font-size: 30px; font-weight: 800; color: var(--blue-hi); }
.order b { font-size: 19px; display: block; } .order p { font-size: 14.5px; margin-top: 4px; }
.ask4 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 56px; }
.ask4 > div { border: 1px solid var(--line); border-radius: 26px; padding: 34px 34px 30px; background: #fff; display: flex; flex-direction: column; }
.ask4 .q { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--blue); }
.ask4 h3 { font-size: 24px; margin: 8px 0 14px; }
.ask4 p { font-size: 15.5px; line-height: 1.7; }
.ask4 .go { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 650; color: var(--ink); }
.ask4 .sub { grid-column: 1 / -1; background: var(--mist); border: 0; padding: 22px 30px; font-size: 15px; color: var(--body); }
.steps5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 56px; }
.steps5 > div { background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; }
.steps5 img { width: 100%; height: 150px; object-fit: cover; }
.steps5 .t { padding: 20px 20px 24px; }
.steps5 .no { font-size: 12px; font-weight: 800; color: var(--blue); letter-spacing: .1em; }
.steps5 h3 { font-size: 17.5px; margin: 6px 0 8px; line-height: 1.4; }
.steps5 p { font-size: 13.8px; line-height: 1.65; }
.steps5 .hl { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.band { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr 1fr; border-radius: 18px; overflow: hidden; background: var(--ink); }
.band > div { padding: 18px 24px; color: #fff; font-size: 15px; font-weight: 650; border-right: 1px solid rgba(255,255,255,.1); }
.band small { display: block; font-size: 12px; color: var(--blue-hi); font-weight: 700; margin-bottom: 2px; }
.whyart { margin-top: 26px; padding: 26px 30px; border-radius: 20px; background: #fff; border-left: 4px solid var(--blue); font-size: 15.5px; line-height: 1.75; }
.whyart b { color: var(--ink); }
.mkt { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mkt > div { padding: 22px 24px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.mkt small { font-size: 12px; font-weight: 700; color: var(--blue-hi); letter-spacing: .06em; }
.mkt b { display: block; font-size: 17px; margin: 4px 0 6px; } .mkt p { font-size: 14px; line-height: 1.6; }
.chips7 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips7 span { font-size: 13px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.08); color: #D6DCE5; }
.cards6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.cards6 > div { background: #fff; border-radius: 20px; padding: 24px 24px 22px; border: 1px solid var(--line); }
.cards6 small { font-size: 12px; font-weight: 700; color: var(--blue); }
.cards6 b { display: block; font-size: 17.5px; color: var(--ink); margin: 4px 0 8px; } .cards6 p { font-size: 14.3px; line-height: 1.65; }
.cards6 .money { background: var(--ink); border-color: var(--ink); } .cards6 .money b { color: #fff; } .cards6 .money p { color: #A9B1BE; } .cards6 .money small { color: var(--blue-hi); }
.cards6 .money .big { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 6px 0 4px; } .cards6 .money .big span { font-size: 15px; font-weight: 600; color: #A9B1BE; }
.week { margin-top: 18px; display: grid; grid-template-columns: 110px repeat(3, 1fr); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #fff; font-size: 14.5px; }
.week > div { padding: 16px 18px; border-right: 1px solid var(--line); } .week > div:last-child { border-right: 0; }
.week .h { background: var(--mist); font-weight: 700; color: var(--ink); }
.week b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 3px; }
.judge { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.judge .flowc { display: grid; gap: 10px; margin-top: 8px; }
.judge .flowc > div { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); font-size: 15px; color: #C9D0DA; line-height: 1.6; }
.judge .flowc i { font-style: normal; font-size: 13px; font-weight: 800; color: var(--blue-hi); }
.thisyear { margin-top: 26px; padding: 24px 26px; border-radius: 20px; background: linear-gradient(160deg, rgba(42,125,225,.25), rgba(42,125,225,.06)); border: 1px solid rgba(90,162,255,.45); }
.thisyear small { font-size: 12px; font-weight: 700; color: var(--blue-hi); letter-spacing: .08em; }
.thisyear b { display: block; font-size: 20px; margin: 6px 0; } .thisyear p { font-size: 14.5px; }
.genres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.genres > div { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.05); font-size: 13px; color: #8F98A6; }
.genres b { display: block; font-size: 15.5px; color: #fff; }
.legal { margin-top: 56px; border-radius: 26px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.legal .row { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center; border-top: 1px solid rgba(255,255,255,.08); }
.legal .row:first-child { border-top: 0; }
.legal .row > div { padding: 22px 28px; font-size: 16px; }
.legal .row .b4 { color: #8F98A6; } .legal .row .af { color: #fff; font-weight: 650; background: rgba(42,125,225,.12); height: 100%; display: flex; align-items: center; }
.legal .row .ar { text-align: center; color: var(--blue-hi); font-weight: 800; padding: 0; }
.legal .row.h > div { font-size: 12px; font-weight: 700; letter-spacing: .12em; padding: 14px 28px; color: #8F98A6; } .legal .row.h .af { color: var(--blue-hi); }
.legalnote { margin-top: 18px; font-size: 13.5px; color: #7E8896; }
.legalhead { margin-top: 80px; padding-top: 64px; border-top: 1px solid rgba(255,255,255,.1); }
.kisu { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }
.kisu > div { border-radius: 24px; padding: 32px; background: #fff; border: 1px solid var(--line); }
.kisu .tag { font-size: 12px; font-weight: 700; color: var(--blue); letter-spacing: .08em; }
.kisu b { display: block; font-size: 22px; color: var(--ink); margin: 6px 0 14px; }
.kisu ol { padding-left: 18px; } .kisu li { font-size: 15px; line-height: 1.7; margin-bottom: 8px; }
.kisu .fork { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.kisu .fork span { font-size: 13.5px; padding: 10px 12px; border-radius: 12px; background: var(--mist); color: var(--ink); font-weight: 600; text-align: center; }
.kisu .fork .base { grid-column: 1 / -1; background: var(--ink); color: #fff; }
.dir { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 30px; }
.dir > div { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.dir img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.dir .t { padding: 12px 14px 14px; } .dir b { font-size: 13.5px; color: var(--ink); display: block; } .dir span { font-size: 12px; color: var(--mute); }
.dirfil { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.dirfil span { font-size: 13.5px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--body); font-weight: 600; }
.dirfil span.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.consent { margin-top: 16px; font-size: 13px; color: var(--mute); }
.where { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.where span { font-size: 14px; padding: 9px 16px; border-radius: 999px; background: var(--mist); color: var(--ink); font-weight: 650; }
@media (max-width: 600px) {
  .mission, .ask4, .steps5, .mkt, .cards6, .judge, .kisu, .band { grid-template-columns: 1fr; }
  .mission blockquote { font-size: 27px; }
  .steps5 img { height: 180px; }
  .band > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .week { grid-template-columns: 1fr; } .week > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .genres { grid-template-columns: 1fr 1fr; }
  .legal .row { grid-template-columns: 1fr; } .legal .row .ar { display: none; } .legal .row.h { display: none; }
  .legal .row > div { padding: 16px 20px; } .legal .row .b4::before { content: "전 · "; } .legal .row .af::before { content: "후 · "; color: var(--blue-hi); margin-right: 4px; }
  .dir { grid-template-columns: repeat(2, 1fr); }
  .kisu .fork { grid-template-columns: 1fr; }
}

/* ===== v9 · 최종 베스트 — 담백 · 고급 · 신뢰 ===== */
:root { --blue: #0047A0; --blue-hi: #7FB0FF; --blue-soft: rgba(0,71,160,.07); --gold: #B89B66; --paper: #FFFFFF; --mist: #F5F6F8; }
h2 { font-weight: 650; letter-spacing: -0.04em; }
.eyebrow { font-size: 12px; letter-spacing: .22em; gap: 12px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.btn.primary { box-shadow: none; border-radius: 2px; }
.btn.ghost, .btn.ghost-d { border-radius: 2px; }
.p-black { background: #0B0C0F; }
/* 왜 지금 */
.why3 { margin-top: 56px; border-top: 1px solid var(--ink); }
.why3 .row { display: grid; grid-template-columns: 90px 1fr 36px 1fr 36px 1fr 150px; align-items: center; border-bottom: 1px solid var(--line); padding: 26px 0; }
.why3 .row > div { font-size: 22px; font-weight: 600; color: var(--ink); text-align: center; letter-spacing: -0.02em; }
.why3 .row i { font-style: normal; color: var(--mute); text-align: center; font-size: 20px; }
.why3 .lab { font-size: 12px; letter-spacing: .2em; color: var(--sub); font-weight: 600; }
.why3 .res { text-align: right; font-size: 15px; color: var(--sub); }
.why3 .row:first-child > div { color: var(--mute); text-decoration: line-through; text-decoration-thickness: 1px; }
.why3 .now > div.ai { color: var(--sub); font-weight: 500; }
.why3 .now > div.hand { color: #fff; background: var(--blue); padding: 14px 0; }
.why3 .now .res { color: var(--blue); font-weight: 700; font-size: 17px; }
.why3note { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
.why3note > div { background: #fff; padding: 32px 34px; }
.why3note small, .chk .h span, .judge1 small, .legal1 small, .kisu1 b { font-size: 12px; letter-spacing: .16em; color: var(--blue); font-weight: 700; }
.why3note b { display: block; font-size: 21px; margin: 10px 0 10px; letter-spacing: -0.02em; }
.why3note p { font-size: 15.5px; line-height: 1.75; }
/* 체크리스트 */
.chk { margin-top: 52px; border-top: 1px solid var(--ink); }
.chk > div { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 22px 6px; border-bottom: 1px solid var(--line); font-size: 17px; }
.chk > div > span { color: var(--body); }
.chk > div > b { font-size: 17px; display: flex; align-items: center; gap: 14px; }
.chk i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; display: inline-grid; place-items: center; flex: none; }
.chk .h { padding: 14px 6px; }
/* 기수제 한 줄 */
.kisu1 { margin-top: 28px; display: flex; gap: 22px; align-items: baseline; padding: 22px 26px; background: #fff; border-left: 2px solid var(--blue); }
.kisu1 span { font-size: 15.5px; color: var(--body); }
/* 강사 4명 */
.tutor4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 52px; }
.tutor4 img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--mist); filter: grayscale(.15); }
.tutor4 b { display: block; font-size: 20px; margin-top: 16px; color: var(--ink); }
.tutor4 span b { display: inline; font-size: inherit; margin: 0; }
.tutor4 span { display: block; font-size: 13.5px; color: var(--sub); line-height: 1.6; margin-top: 4px; }
.judge1 { margin-top: 36px; display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.judge1 > b { font-size: 18px; } .judge1 span { color: var(--body); font-size: 15.5px; }
/* 맞는 사람 */
.fit2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.fit2 > div { background: #fff; padding: 34px 36px; border-top: 2px solid var(--line); }
.fit2 .yes { border-top-color: var(--blue); }
.fit2 h3 { font-size: 19px; margin-bottom: 16px; }
.fit2 .no h3 { color: var(--sub); }
.fit2 li { list-style: none; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--body); }
.fit2 li:last-child { border-bottom: 0; }
.fitnote { margin-top: 26px; font-size: 15.5px; color: var(--sub); }
/* 합법화 한 줄 */
.legal1 { margin-top: 48px; padding: 30px 34px; border: 1px solid rgba(255,255,255,.14); }
.legal1 small { color: var(--blue-hi); }
.legal1 b { display: block; font-size: 22px; margin: 10px 0 8px; }
.legal1 p { font-size: 14.5px; }
.cards6 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 600px) {
  .why3 .row { grid-template-columns: 44px 1fr 18px 1fr 18px 1fr; padding: 18px 0; }
  .why3 .row > div { font-size: 14px; } .why3 .row i { font-size: 13px; }
  .why3 .res { grid-column: 1 / -1; text-align: left; margin-top: 10px; padding-left: 44px; }
  .why3 .now > div.hand { padding: 10px 0; }
  .why3note, .fit2 { grid-template-columns: 1fr; }
  .why3note > div { padding: 24px 22px; }
  .chk > div { grid-template-columns: 1fr; gap: 8px; font-size: 15px; padding: 18px 2px; }
  .chk .h { display: none; } .chk > div > b { font-size: 15.5px; }
  .kisu1 { flex-direction: column; gap: 8px; }
  .tutor4 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .cards6 { grid-template-columns: 1fr; }
  .fit2 > div { padding: 26px 22px; }
}
/* v9.1 · NAS 사진 */
.hero .bg img { object-position: 60% 40%; }
.trustp { padding-top: 64px !important; padding-bottom: 64px !important; border-bottom: 1px solid var(--line); }
.trust5 { display: grid; grid-template-columns: 150px 1fr; gap: 44px; align-items: center; }
.trust5 > img { width: 150px; height: 150px; object-fit: cover; display: block; }
.trust5 .nums { display: grid; grid-template-columns: repeat(5,1fr); }
.trust5 .nums > div { padding: 4px 22px; border-left: 1px solid var(--line); }
.trust5 .nums b { display: block; font-size: 25px; letter-spacing: -0.03em; color: var(--blue); font-weight: 700; }
.trust5 .nums span { display: block; font-size: 13px; color: var(--sub); margin-top: 6px; line-height: 1.5; }
.judgeimg { margin-top: 44px; position: relative; }
.judgeimg img { width: 100%; height: 380px; object-fit: cover; display: block; filter: saturate(.85); }
.judgeimg span { position: absolute; left: 0; bottom: 0; background: rgba(11,12,15,.78); color: #fff; font-size: 12.5px; letter-spacing: .06em; padding: 8px 14px; }
.cards6 .wsc img { width: calc(100% + 56px); margin: -28px -28px 18px; height: 150px; object-fit: cover; display: block; }
@media (max-width: 600px) {
  .trust5 { grid-template-columns: 1fr; gap: 24px; } .trust5 > img { width: 100%; height: 200px; }
  .trust5 .nums { grid-template-columns: 1fr 1fr; gap: 18px 0; } .trust5 .nums > div { padding: 2px 14px; }
  .trust5 .nums > div:last-child { grid-column: 1 / -1; }
  .judgeimg img { height: 220px; }
}
.hero .bg img { opacity: .9; object-position: 70% 45%; }
.hero .bg::after { background: linear-gradient(90deg, rgba(8,9,11,.94) 0%, rgba(8,9,11,.72) 40%, rgba(8,9,11,.12) 75%, rgba(8,9,11,0) 100%), linear-gradient(0deg, rgba(11,12,15,.9) 0%, transparent 30%); }
.cards6 .wsc { overflow: hidden; }
.cards6 .wsc img { width: calc(100% + 48px); margin: -24px -24px 16px; }
@media (max-width: 600px) {
  .hero .bg img { opacity: .55; object-position: 72% 50%; }
  .hero .bg::after { background: linear-gradient(180deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,.85) 60%, rgba(11,12,15,1) 100%); }
  .why3 .row:first-child .res { text-decoration: none; }
}
.why3 .row .res { text-decoration: none !important; }
/* v10 · PC 전체판 — 글씨 한 단계 축소 */
h2 { font-size: 40px; }
.lead { font-size: 16.5px; }
.panel:not(.hero):not(.trustp) { padding-top: 112px; padding-bottom: 112px; }
.hero3 { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 860px; margin-top: 34px; border-top: 1px solid rgba(255,255,255,.18); }
.hero3 > div { padding: 18px 22px 4px 0; }
.hero3 > div + div { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.14); }
.hero3 small { font-size: 11.5px; letter-spacing: .16em; color: var(--blue-hi); font-weight: 700; }
.hero3 b { display: block; font-size: 18px; color: #fff; margin: 8px 0 6px; letter-spacing: -0.02em; }
.hero3 p { font-size: 13.5px; color: #B5BDC9; line-height: 1.6; }
@media (max-width: 600px) { .hero3 { grid-template-columns: 1fr; } .hero3 > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); } }
.hero3.h4 { grid-template-columns: repeat(4, 1fr); max-width: 1000px; }
.hero3.h4 b { font-size: 17px; }
/* v10.1 · 히어로 하단 띠 · 상단 ACADEMY/STUDIO */
.topbar { background: #000; height: 34px; border-bottom: 1px solid rgba(255,255,255,.08); }
.topbar .wrap { height: 100%; display: flex; align-items: center; gap: 14px; font-size: 11.5px; letter-spacing: .2em; font-weight: 600; }
.topbar a { color: #7E8896; text-decoration: none; cursor: pointer; } .topbar a.on { color: #fff; }
.topbar a.st:hover { color: #fff; } .topbar a i { font-style: normal; letter-spacing: 0; margin-left: 4px; }
.topbar span { color: #3A3F47; }
.hero { display: flex; flex-direction: column; }
.heroband { position: relative; z-index: 3; margin-top: auto; background: rgba(8,9,11,.72); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.1); }
.heroband .wrap { display: grid; grid-template-columns: repeat(7, auto); justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
.heroband .wrap > div { font-size: 12px; color: #9AA3B0; line-height: 1.5; padding: 0 14px; border-left: 1px solid rgba(255,255,255,.12); }
.heroband .wrap > div:first-child { padding-left: 0; border-left: 0; }
.heroband b { display: block; font-size: 15.5px; color: #fff; letter-spacing: -0.02em; margin-bottom: 2px; }
.hero .wrap { padding-bottom: 96px; }
@media (max-width: 600px) { .heroband .wrap { grid-template-columns: 1fr 1fr; gap: 14px 0; } .heroband .wrap > div:nth-child(odd) { padding-left: 0; border-left: 0; } }
.hero > .wrap { width: 100%; box-sizing: border-box; }
.hero .heroband .wrap { padding-top: 22px; padding-bottom: 22px; width: 100%; box-sizing: border-box; }
/* v10.2 · 최종 히어로 */
.hero h1 em { font-weight: 700; }
.heroans { margin-top: 22px; font-size: 18px; line-height: 1.7; color: #D5DAE2; }
.journey { display: flex; align-items: stretch; gap: 0; margin-top: 38px; max-width: 1040px; }
.journey > div { flex: 1; padding: 16px 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.journey > i { font-style: normal; color: var(--blue-hi); align-self: center; padding: 0 10px; font-size: 18px; }
.journey small { font-size: 11px; letter-spacing: .16em; color: var(--blue-hi); font-weight: 700; }
.journey b { display: block; font-size: 16.5px; color: #fff; margin: 7px 0 4px; letter-spacing: -0.02em; white-space: nowrap; }
.journey p { font-size: 12.5px; color: #AEB7C3; white-space: nowrap; }
.heromini { margin-top: 18px; display: flex; gap: 22px; font-size: 13.5px; color: #AEB7C3; }
.heromini b { color: #fff; }
.bluebar { position: relative; z-index: 3; margin-top: auto; background: var(--blue); display: flex; align-items: center; height: 56px; overflow: hidden; }
.bluebar .fix { flex: none; padding: 0 28px 0 max(28px, calc((100vw - 1120px) / 2 + 28px)); height: 100%; display: flex; align-items: center; background: #003A84; color: #fff; font-size: 14px; letter-spacing: -0.01em; position: relative; z-index: 2; box-shadow: 12px 0 18px rgba(0,58,132,.9); }
.bluebar .fix b { color: #fff; margin: 0 2px; }
.bluebar .mq { flex: 1; overflow: hidden; }
.bluebar .tr { display: inline-flex; white-space: nowrap; animation: mq 48s linear infinite; }
.bluebar .tr span { color: #fff; font-size: 14px; font-weight: 600; padding: 0 18px; }
.bluebar .tr i { font-style: normal; color: rgba(255,255,255,.45); font-size: 8px; align-self: center; }
.bluebar:hover .tr { animation-play-state: paused; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bluebar .tr { animation: none; } }
.hero .bg img { object-position: 60% 50%; }
@media (max-width: 600px) { .journey { flex-direction: column; } .journey > i { transform: rotate(90deg); padding: 4px 0; } .journey b, .journey p { white-space: normal; } .bluebar .fix { display: none; } }
/* v10.3 · 10점 히어로 — 나에게 맞는 졸업생 */
.hero10 { display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: end; margin-top: 8px; }
.heroans { margin-top: 26px; font-size: 15px; color: #AEB7C3; letter-spacing: .02em; }
.who4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; max-width: 520px; }
.who4 button { font: inherit; font-size: 15px; font-weight: 600; text-align: left; color: #D5DAE2; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); padding: 14px 16px; cursor: pointer; }
.who4 button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.jline { margin-top: 20px; font-size: 13px; color: #8F98A6; } .jline b { color: #D5DAE2; font-weight: 600; }
.hcards { position: relative; }
.hcard { display: none; background: rgba(12,14,18,.82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); }
.hcard.on { display: block; }
.hcard img { width: 100%; height: 210px; object-fit: cover; object-position: top; display: block; }
.hcard .b { padding: 20px 22px 22px; }
.hcard small { font-size: 11.5px; letter-spacing: .1em; color: var(--blue-hi); font-weight: 700; }
.hcard blockquote { margin: 10px 0 14px; font-size: 14px; line-height: 1.7; color: #E6EAF0; }
.hcard .who b { color: #fff; font-size: 15px; margin-right: 8px; } .hcard .who span { font-size: 12.5px; color: #8F98A6; }
.hcard .rec { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #AEB7C3; } .hcard .rec b { color: var(--blue-hi); }
@media (max-width: 600px) { .hero10 { grid-template-columns: 1fr; gap: 28px; } .who4 { grid-template-columns: 1fr; } }
.hero10 { align-items: center; margin-top: 0; }
.hero10 .hl h1 { margin-top: 26px; }
.heroans span { color: var(--blue-hi); font-size: 12.5px; margin-left: 6px; }
.hcard img { height: 170px; }
.hcard img { object-position: center 38%; }
/* v10.4 · 정원 · 선택 이유 */
.urgent { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; padding: 14px 18px; border: 1px solid rgba(127,176,255,.55); background: rgba(0,71,160,.18); max-width: 560px; }
.urgent .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FF5A5A; margin-top: 7px; box-shadow: 0 0 0 0 rgba(255,90,90,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,90,.6); } 70% { box-shadow: 0 0 0 9px rgba(255,90,90,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,90,0); } }
.urgent b { color: #fff; font-size: 15px; } .urgent p { font-size: 13px; color: #C5CCD7; margin-top: 3px; }
.hero10 .ctas { margin-top: 16px; }
.why4 { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.why4 small { font-size: 12px; letter-spacing: .12em; color: var(--blue-hi); font-weight: 700; }
.why4 .g { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
.why4 .g > div { padding-right: 18px; } .why4 .g > div + div { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.12); }
.why4 b { display: block; font-size: 30px; color: #fff; letter-spacing: -0.03em; font-weight: 700; }
.why4 span { display: block; font-size: 13px; color: #AEB7C3; margin-top: 4px; }
.hero > .wrap { padding-top: 110px; padding-bottom: 64px; }
@media (max-width: 600px) { .why4 .g { grid-template-columns: 1fr 1fr; gap: 16px 0; } .why4 .g > div:nth-child(3) { padding-left: 0; border-left: 0; } }
/* v10.5 · 조금 줄이기 + 세로 프로필 */
.urg1 { margin-top: 14px; font-size: 13.5px; color: #C5CCD7; display: flex; align-items: center; gap: 8px; }
.urg1 b { color: #fff; } .urg1 .dot { width: 7px; height: 7px; border-radius: 50%; background: #FF5A5A; animation: pulse 1.6s infinite; flex: none; }
.why4s { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; font-size: 13.5px; color: #AEB7C3; }
.why4s > b { color: var(--blue-hi); font-size: 12px; letter-spacing: .1em; margin-right: 6px; }
.why4s em { font-style: normal; color: #fff; font-weight: 700; font-size: 17px; margin-right: 4px; }
.hero10 { grid-template-columns: 1fr 540px; gap: 44px; }
.hcard.on { display: grid; grid-template-columns: 190px 1fr; }
.hcard img { width: 190px; height: 100%; min-height: 260px; aspect-ratio: 3/4; object-fit: cover; object-position: center 25%; }
.hcard .b { padding: 20px 22px; display: flex; flex-direction: column; }
.hcard blockquote { font-size: 13.5px; }
.hcard .rec { margin-top: auto; }
@media (max-width: 600px) { .hcard.on { grid-template-columns: 120px 1fr; } .hcard img { width: 120px; min-height: 180px; } }
/* v10.6 · 세로 카드 · 여백 */
.hero > .wrap { padding-top: 130px; padding-bottom: 80px; }
.hero10 { grid-template-columns: 1fr 400px; gap: 72px; align-items: center; }
.hero10 .hl h1 { margin-top: 30px; }
.heroans { margin-top: 34px; }
.who4 { margin-top: 14px; }
.hero10 .ctas { margin-top: 48px; }
.urg1 { margin-top: 18px; }
.hcard.on { display: block; }
.hcard img { width: 100%; height: auto; min-height: 0; aspect-ratio: 4/4.4; object-position: center 22%; }
.hcard .b { padding: 22px 24px 24px; display: block; }
.hcard blockquote { font-size: 14px; margin: 10px 0 14px; }
.hcard .rec { margin-top: 14px; }
.hcard .more { display: inline-block; margin-top: 12px; font-size: 12.5px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); }
.why4 { margin-top: 72px; padding-top: 28px; }
.why4 .g { margin-top: 18px; }
@media (max-width: 600px) { .hcard img { aspect-ratio: 4/4; } }
.hcard img { aspect-ratio: 1/1; object-position: center top; }
/* v10.7 */
.hero10 { align-items: start; }
.hero10 .hl { padding-top: 40px; }
.hero10 .hl h1 { margin-top: 26px; }
.hero10 .ctas { margin-top: 72px; }
.hero10 .ctas .btn { font-weight: 500; }
/* v10.8 · 카드 기준 정렬 */
.hero10 { align-items: stretch; }
.hero10 .hl { padding-top: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hero10 .hl > .kick { margin-top: 0; }
.hero10 .ctas { margin-top: auto; padding-top: 64px; }
.hero10 .urg1 { margin-bottom: 0; }
.hero10 .who4 { width: 520px; }
/* v10.9 · 3덩어리 균등 간격 */
.hero10 .hl { justify-content: space-between; }
.hero10 .ctas { margin-top: 0; padding-top: 0; display: flex; gap: 12px; }
.hero10 .ctas .btn { min-width: 200px; }
.hero10 .ctas .btn.primary { min-width: 220px; }
.hero10 .hg1 h1 { margin-top: 26px; }
.hero10 .hg2 .heroans { margin-top: 0; }
.urg1 .dot { width: 6px; height: 6px; animation: none; box-shadow: 0 0 0 3px rgba(255,90,90,.22); }
/* v10.10 · 카톡 버튼 · 버튼 폭 = 모집 줄 폭 */
.hero10 .hg3 { display: inline-flex; flex-direction: column; align-self: flex-start; }
.hero10 .ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.hero10 .ctas .btn { min-width: 0; height: 48px; padding: 0 14px; font-size: 15px; }
.btn.kakao { background: #FEE500; color: #191919; font-weight: 600; gap: 8px; border-radius: 2px; }
.btn.kakao svg { flex: none; }
.hsub { margin-top: 20px; font-size: 17px; color: #D5DAE2; letter-spacing: -0.01em; }
.hsub b { color: #fff; }
.hsub { color: #AEB7C3; font-size: 17px; line-height: 1.6; }
.hsub b { display: inline-block; margin-top: 4px; color: #fff; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
/* v10.11 */
.hsub { font-size: 18px; } .hsub b { display: inline; font-size: 18px; margin: 0 0 0 4px; }
.hero10 .hg1 h1 { font-size: 76px; line-height: 1.16; }
.hero .bg img { opacity: .6; }
/* v10.12 · 졸업생 보기 라벨 */
.hero10 .heroans { color: #7E8896; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.tapme { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(127,176,255,.16); color: var(--blue-hi); animation: tap 1.4s ease-in-out infinite; }
@keyframes tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .tapme { animation: none; } }
.tapme { background: none; width: auto; height: auto; border-radius: 0; }
/* v10.13 · 카드: 누구 → 결과 → 후기 */
.hcard .who b { font-size: 19px; } .hcard .who span { font-size: 13px; }
.hcard .res { margin-top: 6px; font-size: 15px; color: #D5DAE2; font-weight: 600; }
.hcard .res em { font-style: normal; color: var(--blue-hi); }
.hcard blockquote { margin: 14px 0 16px; color: #AEB7C3; }
.hcard img { aspect-ratio: 4/4.6; }
.hcard img { aspect-ratio: 1/1; }
/* v10.14 */
.hcard small { display: block; }
.hcard .who { margin-top: 8px; } .hcard .who b { font-size: 20px; margin: 0; }
.hcard .meta2 { margin-top: 3px; font-size: 13px; color: #8F98A6; } .hcard .meta2 em { font-style: normal; color: var(--blue-hi); }
/* v10.15 · 카드 높이 고정 · 이름 옆 메타 */
.hcard .who { display: flex; align-items: baseline; gap: 10px; }
.hcard .meta2 { margin: 0; font-size: 13px; }
.hcard blockquote { min-height: calc(14px * 1.7 * 4); }
.hcard .who { margin-top: 0; }
.hcard small.case { display: block; margin-top: 6px; letter-spacing: .04em; font-size: 12.5px; }
.hcard small.case { margin-top: 9px; }
.hcard blockquote { margin-top: 20px; }
/* v10.16 · 카드 고정 규격 */
.hcard .b { padding: 22px 24px 26px; }
.hcard small.case { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.hcard blockquote { margin: 14px 0 0; min-height: 0; height: calc(14px * 1.75 * 4); line-height: 1.75; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.hcard blockquote b { color: #fff; font-weight: 700; }
.hcard blockquote { height: calc(14px * 1.75 * 5); -webkit-line-clamp: 5; }
/* v10.17 · 이름 / 선 / 사례 간격 동일 */
.hcard .who { line-height: 1.2; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.hcard small.case { margin-top: 14px; padding-top: 0; border-top: 0; line-height: 1.2; }
.hcard blockquote { margin-top: 16px; }
.hcard blockquote { height: calc(14px * 1.75 * 4); -webkit-line-clamp: 4; }
.who4 button { padding: 12px 16px; }
.who4 { gap: 8px; }
/* v10.18 · 버튼 6개 간격 */
.hero10 .hg1 { padding-bottom: 46px; }
.hero10 .hg2 { padding-bottom: 46px; }
.hcards, .hcard.on { height: 100%; }
.hcard.on { display: flex; flex-direction: column; }
.hcard.on img { flex: none; }
.hcard.on .b { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* v10.19 · 성과 숫자 → 그만두는 이유 섹션 위 */
.why4.lt { margin: 0 0 96px; padding: 0 0 56px; border-top: 0; border-bottom: 1px solid var(--line); }
.why4.lt small { color: var(--blue); }
.why4.lt b { color: var(--ink); font-size: 44px; }
.why4.lt span { color: var(--sub); font-size: 14px; }
.why4.lt .g > div + div { border-left-color: var(--line); }
.hero > .wrap { padding-bottom: 110px; }
/* v10.20 · 성과 띠 분리 */
.panel.statband { padding-top: 64px !important; padding-bottom: 64px !important; background: #F5F6F8; }
.statband .why4.lt { margin: 0; padding: 0; border-bottom: 0; }
.statband + .panel.p-paper { border-top: 0; }
.panel.statband { background: #EBEEF2 !important; }
.panel.statband { background: #DFE3E9 !important; } .statband .why4.lt .g > div + div { border-left-color: #C9CFD8; }
.panel.statband { padding-top: 48px !important; padding-bottom: 48px !important; }
/* v10.21 · 슬로건 */
.bluebar .mq { padding-left: 0; }
.mission .mquote { margin-top: 20px; font-size: 17px; color: #D5DAE2; font-weight: 500; }
.fslogan { font-size: 14px; color: #fff; font-weight: 600; margin-bottom: 14px; letter-spacing: -0.01em; }
.bluebar .tr { animation-duration: 70s; }
.bluebar .tr { animation-duration: 60s; }
.bluebar .tr { animation-duration: 70s; }
.bluebar .tr { animation-duration: 64s; }
.bluebar .tr { animation-duration: 76s; }
.bluebar .tr { animation-duration: 50s; }
.why4.lt .w4h { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; margin: 8px 0 26px; }
/* v10.22 · 교육 성과 카운트업 */
.statband .why4.lt .g > div.txt b { font-size: 30px; line-height: 44px; }
.statband .g > div { transition: transform .6s ease, opacity .6s ease; }
.statband:not(.in) .g > div.txt { opacity: 0; transform: translateY(12px); }
.why4 b .cnt { display: inline !important; font-size: inherit !important; color: inherit !important; margin: 0 !important; font-weight: inherit; }
/* v10.23 · 모바일 히어로 정렬 */
@media (max-width: 600px) {
  .hero > .wrap { padding-top: 56px; padding-bottom: 56px; }
  .hero10 { display: flex; flex-direction: column; gap: 0; }
  .hero10 .hl { display: contents; }
  .hero10 .hg1 { order: 1; padding-bottom: 28px; }
  .hero10 .hg2 { order: 2; padding-bottom: 20px; }
  .hero10 .hcards { order: 3; height: auto; margin-bottom: 28px; }
  .hero10 .hg3 { order: 4; display: block; width: 100%; }
  .hero10 .hg1 h1 { font-size: 40px; line-height: 1.22; margin-top: 18px; }
  .hsub { font-size: 15px; line-height: 1.6; } .hsub b { display: block; font-size: 17px; margin: 4px 0 0; }
  .hero10 .heroans { font-size: 13.5px; }
  .who4 { grid-template-columns: 1fr 1fr; width: 100% !important; max-width: none; gap: 6px; }
  .who4 button { font-size: 13px; padding: 11px 10px; line-height: 1.35; }
  .hcard.on { display: block; height: auto; }
  .hcard.on img { aspect-ratio: 4/3; object-position: center 20%; }
  .hcard .b { padding: 18px 18px 20px; }
  .hcard .who { flex-wrap: wrap; gap: 4px 8px; } .hcard .who b { font-size: 18px; }
  .hcard blockquote { font-size: 13.5px; height: auto; -webkit-line-clamp: 5; max-height: calc(13.5px * 1.75 * 5); }
  .hero10 .ctas { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  .hero10 .ctas .btn { height: 50px; font-size: 14.5px; padding: 0 8px; }
  .urg1 { flex-wrap: wrap; font-size: 12.5px; line-height: 1.6; align-items: flex-start; }
  .urg1 .dot { margin-top: 7px; }
  .bluebar { height: 48px; } .bluebar .tr span { font-size: 13px; padding: 0 14px; }
  .panel.statband { padding-top: 40px !important; padding-bottom: 40px !important; }
  .why4.lt .w4h { font-size: 21px; margin-bottom: 20px; }
  .statband .why4 .g { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .statband .why4 .g > div { padding: 0 12px 0 0 !important; border-left: 0 !important; }
  .statband .why4.lt b { font-size: 32px; }
  .statband .why4.lt .g > div.txt b { font-size: 19px; line-height: 1.3; }
  .statband .why4.lt span { font-size: 12.5px; line-height: 1.5; }
}
.urg1 .ur i.sep { font-style: normal; }
@media (max-width: 600px) { .urg1 .ur { display: block; width: 100%; padding-left: 15px; } .urg1 .ur i.sep { display: none; } .urg1 { gap: 0 8px; } }
/* v10.24 · 수료 후 시스템 3칸 */
.statband .why4.three .g { grid-template-columns: repeat(3, 1fr); }
.statband .why4.three b { font-size: 52px; }
@media (max-width: 600px) { .statband .why4.three .g { grid-template-columns: repeat(3, 1fr); gap: 0; } .statband .why4.three b { font-size: 28px; } .statband .why4.three .g > div { padding-right: 8px !important; } }
/* v10.25 · 상단 고정 묶음 · ACADEMY/STUDIO 중앙 · 모바일 전체 메뉴 */
.hdr { position: sticky; top: 0; z-index: 70; }
.hdr nav { position: relative; top: auto; }
.topbar .wrap { justify-content: center; }
.burger { display: none; }
.mpanel { display: none; }
@media (max-width: 600px) {
  .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; margin-left: 8px; background: none; border: 0; padding: 0 8px; cursor: pointer; }
  .burger i { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
  body.mopen .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.mopen .burger i:nth-child(2) { opacity: 0; }
  body.mopen .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  nav .wrap { gap: 6px; } .navr { margin-left: auto; }
  .mpanel { display: block; position: absolute; left: 0; right: 0; top: 100%; background: rgba(8,9,11,.97); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.08); max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  body.mopen .mpanel { max-height: 520px; }
  .mpanel > a { display: block; padding: 16px 24px; font-size: 17px; color: #D5DAE2; border-bottom: 1px solid rgba(255,255,255,.06); }
  .mpanel > a.on { color: #fff; font-weight: 700; } .mpanel em { font-style: normal; font-size: 10px; color: var(--blue-hi); font-weight: 800; margin-left: 4px; }
  .mpanel .mp2 { display: flex; gap: 18px; padding: 16px 24px 22px; } .mpanel .mp2 a { font-size: 14px; color: #8F98A6; } .mpanel .mp2 a.st { margin-left: auto; color: #fff; letter-spacing: .1em; font-size: 12px; }
}
.panel.statband { background: #E7EAEF !important; } .statband .why4.lt .g > div + div { border-left-color: #D2D7DF; }
/* v10.26 */
.w4note { margin-top: 30px; text-align: center; font-size: 14.5px; color: var(--sub); }
.hdr { position: static; display: contents; }
.hdr nav { position: sticky; top: 0; }
.h5min { margin-top: 18px; font-size: 13.5px; color: #8F98A6; line-height: 1.6; }
.h5min b { color: #D5DAE2; font-weight: 600; }
@media (max-width: 600px) {
  nav .navr .btn.primary { display: none; }
  .mbar { left: 10px; right: 10px; bottom: calc(6px + env(safe-area-inset-bottom)); padding: 6px; }
  .mbar .btn { height: 44px; }
  .w4note { font-size: 13px; margin-top: 22px; line-height: 1.6; padding: 0 6px; }
  .h5min { font-size: 12.5px; }
}
.w4note { margin-top: 36px; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
@media (max-width: 600px) { .w4note { font-size: 16px; margin-top: 26px; } }
/* v10.27 · 로고 · 파란 상단 띠 · 하단 위젯 */
.logo { font-size: 16px; font-weight: 800; letter-spacing: .03em; color: #fff; white-space: nowrap; }
.logo b { font-weight: 400; color: #AEB7C3; margin-left: 4px; }
.topbar { background: var(--blue); border-bottom: 0; }
.topbar a { color: rgba(255,255,255,.6); } .topbar a.on { color: #fff; } .topbar span { color: rgba(255,255,255,.35); }
@media (max-width: 600px) {
  .logo { font-size: 14px; letter-spacing: .02em; }
  .mbar { left: 0; right: 0; bottom: 0; padding: 0; gap: 0; border-radius: 0; background: none; box-shadow: 0 -6px 20px rgba(0,0,0,.18); backdrop-filter: none; }
  .mbar .btn { flex: 1; height: calc(54px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-radius: 0; border: 0; font-size: 15.5px; }
  .mbar .btn.ghost { background: #0B0C0F; color: #fff; }
  .mbar .btn.primary { background: var(--blue); color: #fff; }
}
/* v10.28 · 모바일 히어로 압축 */
@media (max-width: 600px) {
  .hero > .wrap { padding-top: 32px; padding-bottom: 36px; }
  .hero10 .hg1 { padding-bottom: 20px; }
  .hero10 .hg1 h1 { font-size: 36px; line-height: 1.18; margin-top: 12px; }
  .hero10 .kick { font-size: 12px; padding: 6px 12px; }
  .hsub { margin-top: 12px; font-size: 14px; } .hsub b { font-size: 16px; margin-top: 2px; }
  .hero10 .hg2 { padding-bottom: 14px; }
  .hero10 .heroans { margin-bottom: 8px; }
  .who4 { margin-top: 8px; }
  .who4 button { padding: 10px 10px; font-size: 12.5px; }
  .hero10 .hcards { margin-bottom: 20px; }
  .hcard.on img { aspect-ratio: 16/10; object-position: center 22%; }
  .hcard .b { padding: 14px 16px 16px; }
  .hcard small.case { margin-top: 10px; }
  .hcard blockquote { margin-top: 10px; -webkit-line-clamp: 4; max-height: calc(13.5px * 1.75 * 4); }
  .hero10 .ctas .btn { height: 46px; }
  .urg1 { margin-top: 12px; }
}
.mbr { display: none; } @media (max-width: 600px) { .mbr { display: inline; } .w4note { line-height: 1.5; } }
.urg1 .urx { font-style: normal; }
@media (max-width: 600px) { .urg1 { flex-wrap: nowrap; white-space: nowrap; font-size: 12.5px; } .urg1 .ur { display: inline; width: auto; padding-left: 0; } .urg1 .ur i.sep { display: inline; } .urg1 .urx { display: none; } .urg1 .dot { margin-top: 0; } }
@media (max-width: 600px) { .urg1 { align-items: center; } .urg1 .dot { margin-top: 0 !important; align-self: center; } }
/* v10.29 · 수료 후 시스템 3칸 균등 · 가운데 정렬 */
.statband .why4.three { text-align: center; }
.statband .why4.three .w4h { margin-left: auto; margin-right: auto; }
.statband .why4.three .g { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; }
.statband .why4.three .g > div { padding: 0 16px !important; border-left: 1px solid #D2D7DF !important; }
.statband .why4.three .g > div:first-child { border-left: 0 !important; }
.statband .why4.three span { line-height: 1.55; margin-top: 8px; }
.w4note { color: #3A3F47; font-weight: 600; }
@media (max-width: 600px) { .statband .why4.three .g { grid-template-columns: repeat(3, 1fr); } .statband .why4.three .g > div { padding: 0 6px !important; } .statband .why4.three span { font-size: 11.5px; } }

/* v10.30 statband 다음 섹션 상단 여백 = statband 하단 여백 */
.panel.statband + .panel { padding-top: 48px !important; }
@media (max-width: 600px) { .panel.statband + .panel { padding-top: 40px !important; } }

/* v10.31 모바일 섹션 타이틀 32px */
@media (max-width: 600px) { h2 { font-size: 32px; } }

/* v10.32 비교표: 취소선 제거(회색만), 라벨 'AI 이전' 폭 */
.why3 .row:first-child > div { text-decoration: none !important; }
.why3 .row .lab { white-space: nowrap; }
@media (max-width: 600px) { .why3 .row { grid-template-columns: 54px 1fr 18px 1fr 18px 1fr; } }

/* v10.33 섹션 라벨: 선 제거, 한글 라벨 스타일(수료 후 시스템과 동일 계열) */
.eyebrow { gap: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; margin-bottom: 18px; }
.eyebrow::before { content: none !important; display: none !important; }

/* v10.34 히어로 카드 '졸업생 인터뷰' 꼬리표 */
.hcard { position: relative; }
.hcard .htag { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 5px 10px; line-height: 1.2; }
@media (max-width: 600px) { .hcard .htag { top: 10px; left: 10px; font-size: 11.5px; padding: 4px 9px; } }

/* v10.35 모바일: '왜 지금 배워야 할까' 섹션 한 화면에 들어오게 여백 축소 */
@media (max-width: 600px) {
  .why3 { margin-top: 26px; }
  .why3 .row { padding: 11px 0; }
  .why3note { margin-top: 18px; }
  .why3note > div { padding: 16px 18px; }
  .why3note b { margin: 6px 0 6px; font-size: 18px; }
  .why3note p { font-size: 14px; line-height: 1.6; }
  .panel.statband + .panel { padding-bottom: 40px !important; }
}

/* v10.36 모바일 하단 위젯 높이 54 → 46px */
@media (max-width: 600px) { .mbar .btn { height: calc(46px + env(safe-area-inset-bottom)) !important; font-size: 15px; } }


/* v10.38 statband 띠 느낌: 여백 축소 + 숫자 칸 확대 */
.panel.statband { padding-top: 36px !important; padding-bottom: 36px !important; }
.statband .why4.three .g { max-width: 1080px; }
.statband .why4.three b { font-size: 60px; }
.statband .why4.three span { font-size: 15px; }
@media (max-width: 600px) {
  .panel.statband { padding-top: 30px !important; padding-bottom: 30px !important; }
  .statband .why4.three b { font-size: 32px; }
  .statband .why4.three span { font-size: 12px; }
}
.statband .why4.three b { white-space: nowrap; }
@media (max-width: 600px) { .statband .why4.three b { font-size: 30px; letter-spacing: -0.03em; } }

/* v10.39 모바일 히어로 큰 제목 40px */
@media (max-width: 600px) { .hero10 .hg1 h1 { font-size: 40px !important; } }

/* v10.40 PC 섹션 메인 타이틀 46px (모바일 32px 유지) */
@media (min-width: 601px) { h2 { font-size: 46px; } }

/* v10.41 '왜 지금 배워야 할까' 간격·설명 크기 */
@media (min-width: 601px) {
  #whynow .lead { font-size: 18px; }
  #whynow .why3 { margin-top: 40px; }
  #whynow .why3 .row { grid-template-columns: 90px 1fr 36px 1fr 36px 1fr 210px; }
}
#whynow .why3 .res { white-space: nowrap; }

/* v10.42 '왜 지금' 표 세로선 + 선 진하게, 카드 외곽선 진하게, 카드 줄바꿈 정리 */
#whynow .why3 .row { border-bottom-color: #C5CBD4; align-items: stretch; }
#whynow .why3 .row > * { display: flex; align-items: center; justify-content: center; }
#whynow .why3 .lab { justify-content: flex-start; border-right: 1px solid #C5CBD4; margin-right: 16px; }
#whynow .why3 .res { justify-content: flex-end; border-left: 1px solid #C5CBD4; padding-left: 20px; margin-left: 16px; }
#whynow .why3 .row .hand { justify-content: center; }
#whynow .why3note { background: #BFC5CE; border-color: #BFC5CE; }
#whynow .why3note p { text-wrap: pretty; }
@media (min-width: 601px) { #whynow .why3 .row { grid-template-columns: 106px 1fr 36px 1fr 36px 1fr 236px; } }
@media (max-width: 600px) {
  #whynow .why3 .lab { margin-right: 8px; }
  #whynow .why3 .res { justify-content: flex-start; border-left: 0; margin-left: 0; padding-left: 62px; }
}
#whynow .why3 .row { padding: 0 !important; }
#whynow .why3 .row > * { padding-top: 24px; padding-bottom: 24px; }
#whynow .why3 .lab { letter-spacing: .06em; }
@media (max-width: 600px) {
  #whynow .why3 .row { grid-template-columns: 58px 1fr 16px 1fr 16px 1fr; }
  #whynow .why3 .row > * { padding-top: 12px; padding-bottom: 12px; }
  #whynow .why3 .lab { letter-spacing: 0; font-size: 11.5px; margin-right: 6px; }
  #whynow .why3 .res { padding-top: 0; padding-bottom: 12px; padding-left: 64px; margin-top: 0; }
}
@media (max-width: 600px) { #whynow .why3 .res { padding-top: 8px !important; } }

/* v10.43 '왜 지금' 표 재구성: 테두리, 라벨 배경, 결과 아래로 */
.why5 { margin-top: 40px; border: 1px solid #9AA2AE; background: #fff; }
.why5 .r { display: grid; grid-template-columns: 120px 1fr; }
.why5 .r + .r { border-top: 1px solid #C5CBD4; }
.why5 .lab { display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; border-right: 1px solid #C5CBD4; letter-spacing: 0; }
.why5 .old .lab { background: #EEF0F3; color: #6B7280; }
.why5 .now .lab { background: #E3ECF8; color: var(--blue); }
.why5 .body { padding: 22px 32px 20px; }
.why5 .eq { display: grid; grid-template-columns: 1fr 36px 1fr 36px 1fr; align-items: center; text-align: center; }
.why5 .eq span { font-size: 22px; font-weight: 600; padding: 10px 0; letter-spacing: -0.02em; }
.why5 .old .eq span { color: #9AA1AC; }
.why5 .eq i { font-style: normal; color: #9AA1AC; font-size: 20px; }
.why5 .eq .ai { color: var(--ink); }
.why5 .eq .hand { background: var(--blue); color: #fff; }
.why5 .res { margin: 14px 0 0; text-align: center; font-size: 16.5px; color: var(--sub); }
.why5 .old .res b { color: var(--ink); font-weight: 700; }
.why5 .now .res, .why5 .now .res b { color: var(--blue); font-weight: 700; }
@media (max-width: 600px) {
  .why5 { margin-top: 24px; }
  .why5 .r { grid-template-columns: 58px 1fr; }
  .why5 .lab { font-size: 12.5px; }
  .why5 .body { padding: 12px 10px 12px; }
  .why5 .eq { grid-template-columns: 1fr 16px 1fr 16px 1fr; }
  .why5 .eq span { font-size: 14.5px; padding: 8px 0; }
  .why5 .eq i { font-size: 13px; }
  .why5 .res { margin-top: 8px; font-size: 13.5px; }
}
.why5 .eq span { display: block; text-align: center !important; justify-content: center; margin: 0 !important; }
.why5 .body { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.why5 .eq { padding: 0 32px 18px; }
.why5 .res { margin: 0; padding: 14px 20px; border-top: 1px solid #C5CBD4; }
.why5 .now .res { background: #F4F7FC; }
@media (max-width: 600px) { .why5 .eq { padding: 0 10px 10px; } .why5 .res { padding: 10px 10px; } }

/* v10.44 '왜 지금' 표 → 카드 2개 분리, 라벨은 위 띠 */
.why5 { border: 0; background: none; display: grid; gap: 14px; }
.why5 .r { grid-template-columns: 1fr; border: 1px solid #9AA2AE; background: #fff; }
.why5 .r + .r { border-top: 1px solid #9AA2AE; }
.why5 .lab { justify-content: flex-start; border-right: 0; border-bottom: 1px solid #C5CBD4; padding: 10px 20px; font-size: 14px; }
.why5 .body { padding-top: 18px; }
@media (max-width: 600px) {
  .why5 { gap: 10px; }
  .why5 .r { grid-template-columns: 1fr; }
  .why5 .lab { padding: 7px 12px; font-size: 12.5px; }
  .why5 .body { padding-top: 12px; }
}

/* v10.45 '왜 지금' 카드 좌우 배치 + 사이 화살표 (PC·모바일) */
.why5 { grid-template-columns: 1fr 56px 1fr; gap: 0; align-items: stretch; }
.why5 .r { display: flex; flex-direction: column; }
.why5 .r .body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.why5 .arw { display: flex; align-items: center; justify-content: center; }
.why5 .arw span { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.why5 .eq { padding: 6px 20px 18px; grid-template-columns: 1fr 24px 1fr 24px 1fr; }
.why5 .eq span { font-size: 19px; padding: 9px 0; }
.why5 .res { font-size: 15.5px; padding: 14px 14px; }
@media (max-width: 600px) {
  .why5 { grid-template-columns: 1fr 28px 1fr; gap: 0; }
  .why5 .arw span { width: 24px; height: 24px; } .why5 .arw svg { width: 14px; height: 14px; }
  .why5 .lab { padding: 7px 10px; }
  .why5 .eq { display: flex; flex-direction: column; align-items: stretch; padding: 4px 10px 10px; gap: 0; }
  .why5 .eq span { font-size: 14px; padding: 6px 0; }
  .why5 .eq i { font-size: 12px; line-height: 1; padding: 1px 0; }
  .why5 .res { font-size: 12.5px; line-height: 1.5; padding: 9px 8px; word-break: keep-all; }
}

/* v10.46 '왜 지금' 카드 라벨: 가운데 + 진한 배경, 손 기술 블록 배경 제거 */
.why5 .lab { justify-content: center; border-bottom: 0; }
.why5 .old .lab { background: #8A919C; color: #fff; }
.why5 .now .lab { background: var(--blue); color: #fff; }
.why5 .eq .hand { background: none; color: var(--blue); font-weight: 800; }
.why5 .body, .why5 .eq { background: #fff; }
.why5 .res, .why5 .now .res { background: #F1F3F6; }

/* v10.47 모바일 '왜 지금' 카드 위아래 배치 + 아래 화살표 */
@media (max-width: 600px) {
  .why5 { grid-template-columns: 1fr; }
  .why5 .arw { padding: 8px 0; }
  .why5 .arw svg { transform: rotate(90deg); }
  .why5 .eq { display: grid; grid-template-columns: 1fr 16px 1fr 16px 1fr; align-items: center; padding: 6px 10px 10px; }
  .why5 .eq span { font-size: 15px; padding: 6px 0; }
  .why5 .eq i { font-size: 13px; }
  .why5 .res { font-size: 13.5px; padding: 10px 10px; }
  .why5 .res .mbr { display: none; }
}

/* v10.48 화살표: 원 없이 얇은 회색 */
.why5 .arw span { background: none !important; color: #8A919C; width: auto; height: auto; }
.why5 .arw svg { width: 28px; height: 28px; stroke-width: 1.6; }
@media (max-width: 600px) { .why5 .arw svg { width: 22px; height: 22px; } .why5 .arw { padding: 4px 0; } }

/* v10.49 '요즘 손님 / 현장에선' 카드 PC도 위아래 */
#whynow .why3note { grid-template-columns: 1fr; }

/* v10.50 '요즘 손님 / 현장에선' PC 가로형 (라벨·제목 | 본문) */
#whynow .why3note { margin-top: 28px; background: #D5DAE1; border-color: #D5DAE1; }
@media (min-width: 601px) {
  #whynow .why3note > div { display: grid; grid-template-columns: 300px 1fr; grid-template-areas: "s p" "b p"; column-gap: 40px; align-items: center; padding: 24px 32px; }
  #whynow .why3note small { grid-area: s; align-self: end; }
  #whynow .why3note b { grid-area: b; align-self: start; margin: 6px 0 0; font-size: 20px; }
  #whynow .why3note p { grid-area: p; margin: 0; padding-left: 40px; border-left: 1px solid #E3E7EC; font-size: 15.5px; line-height: 1.7; }
}
@media (min-width: 601px) { #whynow .why3note p { align-self: stretch; display: flex; align-items: center; } }

/* v10.51 카드 라벨 제거 → 제목 | 본문 */
@media (min-width: 601px) {
  #whynow .why3note > div { grid-template-columns: 360px 1fr; grid-template-areas: "b p"; }
  #whynow .why3note b { margin: 0; align-self: center; font-size: 19px; line-height: 1.45; }
}
@media (max-width: 600px) { #whynow .why3note b { margin: 0 0 6px; font-size: 17px; } }
@media (min-width: 601px) { #whynow .why3note p { max-width: none; } }
@media (min-width: 601px) { #whynow .why3note p { text-wrap: wrap; display: block; align-self: center; padding-top: 0; } #whynow .why3note > div { align-items: stretch; } }

/* v10.52 모바일: 설명 두 덩어리 테두리 제거, 구분선만 */
@media (max-width: 600px) {
  #whynow .why3note { background: none; border: 0; gap: 0; margin-top: 22px; }
  #whynow .why3note > div { background: none; padding: 14px 0; border-top: 1px solid #D5DAE1; }
  #whynow .why3note > div:last-child { border-bottom: 1px solid #D5DAE1; }
}

/* v10.53 3분 진단: 라운딩·그림자 제거, 연한 회색 배경 */
#diag.panel.sheet { border-radius: 0; margin-top: 0; box-shadow: none; background: #F5F6F8; border-top: 0; }

/* v10.54 PC '요즘은 손님이 / 현장에서는' 표 느낌 제거: 테두리 없는 2단 글 */
@media (min-width: 601px) {
  #whynow .why3note { background: none; border: 0; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 36px; }
  #whynow .why3note > div { display: block; background: none; padding: 20px 0 0; border-top: 1px solid #C5CBD4; }
  #whynow .why3note b { display: block; margin: 0 0 8px; font-size: 19px; }
  #whynow .why3note p { display: block; padding-left: 0; border-left: 0; font-size: 15.5px; line-height: 1.7; }
}

/* v10.55 PC: 끊김 없는 위아래 선 */
@media (min-width: 601px) {
  #whynow .why3note { border-top: 1px solid #C5CBD4; border-bottom: 1px solid #C5CBD4; padding: 22px 0; }
  #whynow .why3note > div { border-top: 0; padding-top: 0; }
}

/* v10.56 모바일 설명 글씨 키움 + 문장 단위 줄바꿈 */
@media (max-width: 600px) {
  #whynow .why3note b { font-size: 18px; letter-spacing: -0.03em; }
  #whynow .why3note p { font-size: 15.5px; line-height: 1.6; text-wrap: wrap; letter-spacing: -0.02em; }
}

/* v10.57 표 항목 글씨 키움 */
.why5 .eq span { font-size: 22px; }
@media (max-width: 600px) { .why5 .eq span { font-size: 16.5px; letter-spacing: -0.03em; } .why5 .eq { padding-left: 6px; padding-right: 6px; } }

/* v10.58 섹션 세로 여백 통일: PC 88 / 모바일 48 (히어로·띠 제외, 띠 다음 섹션 상단은 기존 유지) */
.panel:not(.hero):not(.statband):not(.flush) { padding-top: 88px !important; padding-bottom: 88px !important; }
.panel.statband + .panel { padding-top: 48px !important; }
@media (max-width: 600px) {
  .panel:not(.hero):not(.statband):not(.flush) { padding-top: 48px !important; padding-bottom: 48px !important; }
  .panel.statband + .panel { padding-top: 40px !important; }
}
#whynow.panel { padding-top: 48px !important; }
@media (max-width: 600px) { #whynow.panel { padding-top: 40px !important; } }

/* v10.59 히어로: 위 작은 문구 ↔ 메인 타이틀 간격 축소 (PC 32 / 모바일 22) */
.hero10 .kick { margin-bottom: 0 !important; }
.hero10 .hg1 h1 { margin-top: 2px !important; }
@media (max-width: 600px) { .hero10 .hg1 h1 { margin-top: -8px !important; } }
.hero10 .hg1 h1 { margin-top: 32px !important; }
@media (max-width: 600px) { .hero10 .hg1 h1 { margin-top: 22px !important; } }
.hero10 .who4 { margin-top: 0; }

/* v10.60 히어로 버튼: 눌러볼 수 있다는 신호 (순차 하이라이트 + hover) */
.who4 button { transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s ease; cursor: pointer; }
.who4 button.nudge { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); color: #fff; transform: translateY(-2px); }
@media (hover: hover) { .who4 button:not(.on):hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); color: #fff; } }

/* v10.61 진단 선택지: 모바일 한 줄 */
@media (max-width: 600px) {
  .diag { margin-top: 28px; }
  .diag .opts { gap: 8px; }
  .diag label { padding: 14px 12px; gap: 10px; font-size: 14px; letter-spacing: -0.04em; white-space: nowrap; border-radius: 14px; }
  .diag .bx { width: 20px; height: 20px; border-radius: 6px; }
}
#diag .diag { margin-top: 32px; }
@media (max-width: 600px) { #diag .diag { margin-top: 20px; } }

/* v10.62 AI 시대 카드 '타투 기술' 검정 */
.why5 .eq .hand { color: var(--ink) !important; }
.why5 .now .res { color: var(--sub); font-weight: 400; } .why5 .now .res b { color: var(--blue); font-weight: 700; }
@media (max-width: 600px) { .why5 .res .mbr { display: none; } }

/* v10.63 AI 시대 결과 칸: 연한 파랑 */
.why5 .now .res { background: #EAF0F9 !important; border-top-color: #C9D6EA; }

/* v10.64 카드: 제목 띠 더 진하게, 결과 칸 = 기존 제목색 + 흰 글씨 */
.why5 .old .lab { background: #5F6672 !important; color: #fff; }
.why5 .now .lab { background: #00337A !important; color: #fff; }
.why5 .old .res { background: #8A919C !important; color: #fff !important; border-top-color: #8A919C !important; }
.why5 .old .res b { color: #fff !important; }
.why5 .now .res { background: var(--blue) !important; color: #fff !important; border-top-color: var(--blue) !important; }
.why5 .now .res b { color: #fff !important; }

/* v10.65 AI 이전 결과 연하게, 카드 외곽선 제거 + 그림자 */
.why5 .old .res { background: #F1F3F6 !important; color: var(--sub) !important; border-top-color: #E3E7EC !important; }
.why5 .old .res b { color: var(--ink) !important; }
.why5 .r { border: 0 !important; box-shadow: 0 10px 30px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06); overflow: hidden; }

/* v10.66 카드 그림자: 사방으로 고르게 */
.why5 .r { box-shadow: 0 0 0 1px rgba(15,23,42,.05), 0 2px 22px rgba(15,23,42,.13) !important; }

/* v10.67 카드: 외곽 선 효과 제거, 사방 회색 그라데이션 그림자 */
.why5 .r { border: 0 !important; outline: 0; box-shadow: 0 0 36px 4px rgba(15,23,42,.11) !important; }
@media (max-width: 600px) { .why5 .r { box-shadow: 0 0 24px 2px rgba(15,23,42,.12) !important; } }

/* v10.68 이전처럼: 옅은 선 + 고른 그림자 */
.why5 .r, .why5 .r { box-shadow: 0 0 0 1px rgba(15,23,42,.05), 0 2px 22px rgba(15,23,42,.13) !important; }

/* v10.69 표 항목 세로 여백 위아래 동일 */
.why5 .body { padding-top: 0 !important; padding-bottom: 0 !important; }
.why5 .eq { padding-top: 22px !important; padding-bottom: 22px !important; }
.why5 .eq span { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.3; }
@media (max-width: 600px) { .why5 .eq { padding-top: 16px !important; padding-bottom: 16px !important; } }

/* v10.70 진단 선택지 6개, 한 줄에 2개 */
#diag .diag .opts { grid-template-columns: 1fr 1fr; gap: 10px; }
#diag .diag label { padding: 16px 16px; font-size: 15.5px; }
@media (max-width: 600px) {
  #diag .diag .opts { gap: 8px; }
  #diag .diag label { white-space: normal; padding: 12px 10px; gap: 8px; font-size: 14px; line-height: 1.35; letter-spacing: -0.03em; word-break: keep-all; }
  #diag .diag .bx { width: 18px; height: 18px; }
}

/* v10.71 진단 선택지: PC 한 줄에 하나, 모바일 두 개 */
@media (min-width: 601px) { #diag .diag .opts { grid-template-columns: 1fr; gap: 10px; } #diag .diag label { padding: 15px 20px; } }

/* v10.72 진단 리스트 ↔ 결과 간격 축소 */
#diag .diag { gap: 28px; }
@media (max-width: 600px) { #diag .diag { gap: 16px; } }

/* v10.73 진단 선택지: PC 긴 문구 / 모바일 짧은 문구 */
#diag .tmo { display: none; }
@media (max-width: 600px) { #diag .tpc { display: none; } #diag .tmo { display: inline; } }

/* v10.74 진단 섹션 각진 모서리로 통일 */
#diag .diag label, #diag .diag .res, #diag .diag .btn { border-radius: 0 !important; }
#diag .diag .bx { border-radius: 3px !important; }

/* v10.75 모바일 하단: 방문 예약 | 카톡 무료 상담 */
@media (max-width: 600px) { .mbar .btn.kakao { background: var(--kakao, #FEE500); color: #191919; gap: 6px; display: flex; align-items: center; justify-content: center; } }

/* v10.76 진단 선택지: 눌러볼 수 있다는 신호 + hover */
#diag .diag label { transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease, background .3s ease; cursor: pointer; }
#diag .diag label.nudge { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,71,160,.10); transform: translateY(-2px); }
@media (hover: hover) { #diag .diag label:hover { border-color: var(--blue); background: #F7F9FD; } }

/* v10.77 진단 결과: 같은 출발점 졸업생 줄 */
.diag .res .grad { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; color: #A9B1BE; }
.diag .res .grad b { color: #fff; font-weight: 600; }
.diag .res .grad + .rec { margin-top: 8px; padding-top: 0; border-top: 0; }

/* v10.78 진단 결과: 결론 문장 아래 간격 */
.diag .res .out .hd { display: block; font-weight: inherit; margin-bottom: 12px; }
.diag .res .out .hd { color: #fff !important; }

/* v10.79 상단 전환 바 한글화 */
.topbar .wrap { font-size: 12.5px; letter-spacing: .02em; }

/* v10.80 진단 PC: 결과 박스 높이 = 리스트 높이, 결과에 따라 늘지 않게 */
@media (min-width: 601px) {
  #diag .diag { align-items: stretch; }
  #diag .diag .res { position: relative; top: auto; min-height: 0; overflow: hidden; }
  #diag .diag .res .out { font-size: 19px; line-height: 1.6; min-height: 0; }
}

/* v10.81 진단 결과 문장 간격·단어 단위 줄바꿈 */
#diag .diag .res .out { word-break: keep-all; }
#diag .diag .res .out .sg { display: block; height: 10px; }
@media (min-width: 601px) {
  #diag .diag .res .out { font-size: 18px; line-height: 1.6; }
  #diag .diag .res .out .hd { font-size: 21px; line-height: 1.45; margin-bottom: 16px; }
}
@media (max-width: 600px) {
  #diag .diag .res .out .sg { height: 8px; }
  #diag .diag .res .out .hd { font-size: 20px; line-height: 1.45; margin-bottom: 14px; }
}
@media (min-width: 601px) and (max-width: 980px) { #diag .diag .res .out { font-size: 16px; } #diag .diag .res .out .hd { font-size: 18px; margin-bottom: 12px; } #diag .diag .res .out .sg { height: 8px; } }
@media (min-width: 601px) { #diag .diag .res { contain: size; } }
@media (max-width: 600px) { #diag .diag .res .out { font-size: 17px; line-height: 1.6; } #diag .diag .res .out .hd { font-size: 17.5px; letter-spacing: -0.03em; } }
@media (max-width: 600px) { #diag .diag .res .out .hd { font-size: 16px; letter-spacing: -0.045em; } #diag .diag .res .out { margin-bottom: 18px; } }
.diag .res .out .mbr { display: none; }
@media (max-width: 600px) { .diag .res .out .mbr { display: inline; } #diag .diag .res .out .hd { font-size: 18px; letter-spacing: -0.03em; } }
@media (min-width: 601px) and (max-width: 880px) { #diag .diag .res { padding: 30px; } #diag .diag .res .out { font-size: 15px; } #diag .diag .res .out .hd { font-size: 17px; } }

/* v10.82 Proof 상단 여백 = 진단 하단 여백 */
#proof { padding-top: 88px !important; }
@media (max-width: 600px) { #proof { padding-top: 48px !important; } }
#proof { padding-bottom: 88px !important; }
@media (max-width: 600px) { #proof { padding-bottom: 48px !important; } }
#proof .textlink { display: inline-block; }

/* v10.83 강사진 아래 심사·수상 블록 (심사위원 섹션 합침) */
.judge2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; margin-top: 40px; background: #F5F6F8; }
.judge2 .judgeimg { margin: 0 !important; border-radius: 0 !important; height: 100%; }
.judge2 .judgeimg img { height: 100%; object-fit: cover; border-radius: 0 !important; }
.judge2 .jc { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.judge2 .jc small { font-size: 13px; font-weight: 700; color: var(--blue); }
.judge2 .jc h3 { margin: 10px 0 0; font-size: 22px; line-height: 1.45; letter-spacing: -0.02em; word-break: keep-all; }
.judge2 .jc p { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: #5A6270; word-break: keep-all; }
.judge2 .yr { margin-top: 20px; padding: 16px 18px; background: #fff; border-left: 3px solid var(--blue); display: grid; gap: 4px; font-size: 14px; color: #3A404A; word-break: keep-all; }
.judge2 .yr b { font-size: 14.5px; color: #111; }
.judge2 .yr em { font-style: normal; font-weight: 700; color: var(--blue); }
.judge2 .textlink { margin-top: 18px; align-self: flex-start; }
@media (max-width: 860px) { .judge2 { grid-template-columns: 1fr; } .judge2 .judgeimg img { height: auto; } }
@media (max-width: 600px) { .judge2 { margin-top: 28px; } .judge2 .jc { padding: 24px 20px; } .judge2 .jc h3 { font-size: 19px; } .judge2 .jc p { font-size: 14.5px; } }

/* v10.84 작품 섹션 모바일: STEP당 2장 */
@media (max-width: 600px) { #proof .gr > *:nth-child(n+3) { display: none; } }
@media (max-width: 600px) { #proof .flow .col + .col { margin-top: 20px; } }

/* v10.85 작품 섹션: 열마다 각진 카드 · 사진 각지게 */
#proof .flow { gap: 16px; }
#proof .flow .col { background: #16191F; padding: 22px 20px 20px; border-top: 2px solid var(--blue-hi); }
#proof .flow .col h3 { margin: 0 0 4px; font-size: 19px; }
#proof .flow .col p { font-size: 13.5px; color: #9AA3B2; margin-bottom: 16px; }
#proof .ph, #proof .ph img { border-radius: 0 !important; }
#proof .ph .lab { border-radius: 2px; }
@media (max-width: 600px) {
  #proof .flow { gap: 12px; }
  #proof .flow .col + .col { margin-top: 0; }
  #proof .flow .col { padding: 18px 14px 14px; }
  #proof .flow .col h3 { font-size: 17px; }
}

/* v10.86 작품 카드: 상단 줄 제거, 단계별로 진해지는 색 (레벨업) */
#proof .flow .col { border-top: 0; }
#proof .flow .col:nth-child(1) { background: #1C2028; }
#proof .flow .col:nth-child(2) { background: #15305C; }
#proof .flow .col:nth-child(3) { background: #0047A0; }
#proof .flow .col:nth-child(2) p { color: #A9B8D3; }
#proof .flow .col:nth-child(3) p { color: rgba(255,255,255,.78); }

/* v10.87 작품 카드: 배경 통일, 제목 띠만 연한 파랑 → 진한 파랑 */
#proof .flow .col, #proof .flow .col:nth-child(n) { background: #16191F; padding: 0 0 16px; }
#proof .flow .col .chd { padding: 18px 20px 16px; margin-bottom: 16px; }
#proof .flow .col .chd p { margin: 0; color: rgba(255,255,255,.82) !important; }
#proof .flow .col:nth-child(1) .chd { background: #5C86C4; }
#proof .flow .col:nth-child(2) .chd { background: #2D64B3; }
#proof .flow .col:nth-child(3) .chd { background: #0047A0; }
#proof .flow .col .gr { padding: 0 16px; }
@media (max-width: 600px) {
  #proof .flow .col { padding-bottom: 12px; }
  #proof .flow .col .chd { padding: 14px 14px 12px; margin-bottom: 12px; }
  #proof .flow .col .gr { padding: 0 12px; }
}

/* v10.88 메뉴명 변경 후 줄바꿈 방지 */
.menu span { white-space: nowrap; }
@media (max-width: 1240px) { .menu { gap: 18px; font-size: 13.5px; } }
@media (max-width: 1100px) { .menu { gap: 14px; font-size: 13px; } nav .logo { white-space: nowrap; } }
/* 태블릿(601~1000px): 메뉴를 햄버거로 */
@media (min-width: 601px) and (max-width: 1000px) {
  .menu, nav .login { display: none !important; }
  .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; margin-left: 8px; background: none; border: 0; padding: 0 8px; cursor: pointer; }
  .burger i { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
  body.mopen .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.mopen .burger i:nth-child(2) { opacity: 0; }
  body.mopen .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .navr { margin-left: auto; }
  .mpanel { display: block; position: absolute; left: 0; right: 0; top: 100%; background: rgba(8,9,11,.97); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.08); max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  body.mopen .mpanel { max-height: 520px; }
  .mpanel > a { display: block; padding: 16px 28px; font-size: 17px; color: #D5DAE2; border-bottom: 1px solid rgba(255,255,255,.06); }
  .mpanel em { font-style: normal; font-size: 10px; color: var(--blue-hi); font-weight: 800; margin-left: 4px; }
  .mpanel .mp2 { display: flex; gap: 18px; padding: 16px 28px 22px; } .mpanel .mp2 a { font-size: 14px; color: #8F98A6; } .mpanel .mp2 a.st { margin-left: auto; color: #fff; font-size: 12px; }
}

/* v10.89 작품 카드: 사진 4장을 간격 없이 카드 끝까지 */
#proof .flow .col, #proof .flow .col:nth-child(n) { padding: 0; background: transparent; }
#proof .flow .col .chd { margin-bottom: 0; }
#proof .flow .col .gr { padding: 0; gap: 0; }
@media (max-width: 600px) {
  #proof .flow .col, #proof .flow .col:nth-child(n) { padding: 0; }
  #proof .flow .col .chd { margin-bottom: 0; }
  #proof .flow .col .gr { padding: 0; }
}

/* v10.90 작품 카드: 사진 경계 1px, 띠 색 한 단계 진하게 */
#proof .flow .col .gr { gap: 1px; background: #0B0C0E; }
#proof .flow .col:nth-child(1) .chd { background: #3F6CB0; }
#proof .flow .col:nth-child(2) .chd { background: #1D52A3; }
#proof .flow .col:nth-child(3) .chd { background: #003A86; }

/* v10.92 작품 라벨: 전공자 검정, 비전공자는 카드 색 배경 + 흰 글씨 */
.ph .lab, .ph .lab.mj { background: rgba(0,0,0,.7); color: #fff; }
.ph .lab.nm { background: #0047A0; color: #fff; }
#proof .flow .col:nth-child(1) .lab.nm { background: #3F6CB0; }
#proof .flow .col:nth-child(2) .lab.nm { background: #1D52A3; }
#proof .flow .col:nth-child(3) .lab.nm { background: #003A86; }

/* v10.93 모바일 전용: 상단 무료 진단 버튼, 히어로 상담 버튼 숨김, 기수 모집 문구 → 하단 바 */
.ndiag, .mbu { display: none; }
@media (max-width: 600px) {
  .ndiag { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; margin-left: auto; border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-decoration: none; }
  .hero .hg3 .ctas .btn.kakao { display: none; }
  .hero .hg3 .ctas .btn { flex: 1 1 100%; }
  .hero .urg1 { display: none; }
  .mbar { flex-wrap: wrap; border-radius: 18px; row-gap: 6px; }
  .mbar .mbu { display: flex; align-items: center; justify-content: center; gap: 6px; flex-basis: 100%; margin: 2px 0 0; font-size: 12px; color: #C9D0DA; letter-spacing: -0.01em; }
  .mbar .mbu b { color: #fff; font-weight: 700; }
  .mbar .mbu .dot { width: 6px; height: 6px; border-radius: 50%; background: #FF5A5A; box-shadow: 0 0 0 3px rgba(255,90,90,.22); }
}
@media (max-width: 600px) { .mbar { border-radius: 0; row-gap: 0; } .mbar .mbu { margin: 0; height: 28px; background: #16191F; border-top: 1px solid rgba(255,255,255,.08); } }
/* v10.94 모바일 하단 바: 버튼을 한 판 위에, 기수 모집 문구는 맨 아래 */
@media (max-width: 600px) {
  .mbar { background: #0B0C0F; padding: 8px 10px 0; column-gap: 8px; box-shadow: 0 -8px 24px rgba(0,0,0,.25); border-top: 1px solid rgba(255,255,255,.06); }
  .mbar .btn { height: 44px !important; padding-bottom: 0 !important; border-radius: 6px !important; font-size: 15px; }
  .mbar .btn.ghost { background: #23272F !important; color: #fff; }
  .mbar .mbu { order: 2; height: auto; background: none; border-top: 0; padding: 7px 0 calc(7px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) { .mbar .btn.ghost { background: var(--blue) !important; color: #fff; } .mbar { background: #000; } }
@media (max-width: 600px) { .mbar { padding: 0; column-gap: 0; border-top: 0; } .mbar .btn { height: 48px !important; border-radius: 0 !important; } }
/* v10.95 모바일: 히어로 진단 버튼 숨김 (상단 메뉴에 있음) */
@media (max-width: 600px) { .hero .hg3 .ctas { display: none; } }
/* v10.96 작품 카드 설명 글씨 키움 */
#proof .flow .col .chd h3 { margin-bottom: 6px; }
#proof .flow .col .chd p { font-size: 15px; color: rgba(255,255,255,.92) !important; }
@media (max-width: 600px) { #proof .flow .col .chd p { font-size: 14px; } }
/* v10.97 작품 카드: 띠 아래 회색 선, 사진 외곽 회색 테두리 */
#proof .flow .col .chd { border-bottom: 1px solid #4A505B; }
#proof .flow .col .gr { border: 1px solid #4A505B; border-top: 0; background: #4A505B; }
/* v10.98 띠 안: 제목 아래 선 (띠 아래 선은 제거) */
#proof .flow .col .chd { border-bottom: 0; }
#proof .flow .col .chd h3 { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.28); }
/* v10.99 사진 사이·카드 전체 외곽은 검정 선 */
#proof .flow .col .gr { border: 0; background: #000; }
#proof .flow .col { border: 1px solid #000; }
/* v11.00 작품: 설명-카드 간격 축소, 모바일 카드 간격 확대 */
#proof .flow { margin-top: 36px; }
@media (max-width: 600px) { #proof .flow { margin-top: 24px; gap: 20px; } }
/* v11.01 졸업생: 설명-카드 간격 축소 */
#grads .g3.mt { margin-top: 32px !important; }
@media (max-width: 600px) { #grads .g3.mt { margin-top: 22px !important; } }

/* v11.02 졸업생 인터뷰: 슬라이드 카드 (상황 태그 · Q · 답변 · 이름) */
#grads .ivs { position: relative; margin-top: 32px; }
#grads .ivnav { position: absolute; right: 0; top: -60px; display: flex; gap: 8px; }
#grads .ivnav button { width: 40px; height: 40px; border: 1px solid #C9CFD8; background: #fff; font-size: 16px; cursor: pointer; color: #111; }
#grads .ivnav button:hover { border-color: var(--blue); color: var(--blue); }
#grads .ivtrack { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); column-gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
#grads .ivtrack::-webkit-scrollbar { display: none; }
#grads .ivc { scroll-snap-align: start; background: #F5F6F8; padding: 28px 26px 24px; display: flex; flex-direction: column; }
#grads .ivc .tg { font-size: 12.5px; font-weight: 700; color: var(--blue); }
#grads .ivc .q { margin: 14px 0 0; font-size: 16px; font-weight: 800; color: #111; }
#grads .ivc blockquote { margin: 10px 0 0; font-size: 15px; line-height: 1.75; color: #3A404A; word-break: keep-all; flex: 1; }
#grads .ivc blockquote b { color: #111; font-weight: 700; }
#grads .ivc .who { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #DDE1E7; }
#grads .ivc .who .av { width: 34px; height: 34px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }
#grads .ivc .who b { display: block; font-size: 14.5px; color: #111; }
#grads .ivc .who small { font-size: 12.5px; color: #7A8291; }
#grads .rvlinks { display: inline-flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 600px) {
  #grads .ivs { margin-top: 22px; margin-right: -20px; }
  #grads .ivnav { display: none; }
  #grads .ivtrack { grid-auto-columns: 84%; column-gap: 12px; padding-right: 20px; }
  #grads .ivc { padding: 22px 20px 20px; }
  #grads .ivc blockquote { font-size: 14.5px; }
  #grads .rv-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  #grads .rvlinks { gap: 14px; }
}

/* v11.03 졸업생 인터뷰: 사진 카드 · 자동 넘김 · 점 표시 · 양옆 화살표 */
#grads .ivc { padding: 0; background: #F5F6F8; }
#grads .ivc .ivimg { aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
#grads .ivc .ivimg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
#grads .ivc .ivb { padding: 22px 24px 22px; display: flex; flex-direction: column; flex: 1; }
#grads .ivs > .ivp, #grads .ivs > .ivn { position: absolute; top: 34%; z-index: 3; width: 44px; height: 44px; border: 0; background: rgba(17,17,17,.78); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
#grads .ivs > .ivp { left: -22px; } #grads .ivs > .ivn { right: -22px; }
#grads .ivs > .ivp:hover, #grads .ivs > .ivn:hover { background: var(--blue); }
#grads .ivdots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
#grads .ivdots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #C9CFD8; cursor: pointer; }
#grads .ivdots button.on { background: var(--blue); width: 22px; border-radius: 4px; }
@media (max-width: 600px) {
  #grads .ivs > .ivp, #grads .ivs > .ivn { display: none; }
  #grads .ivc .ivb { padding: 18px 18px 18px; }
  #grads .ivdots { margin-top: 16px; padding-right: 20px; }
}

/* v11.04 졸업생 인터뷰 카드: 어두운 박스, 이름 한 줄 */
#grads .ivc { background: #1A1D23; }
#grads .ivc .tg { color: #8DB8FF; }
#grads .ivc .q { color: #fff; }
#grads .ivc blockquote { color: #C3CAD5; }
#grads .ivc blockquote b { color: #fff; }
#grads .ivc .who { display: block; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13.5px; color: #8F98A6; }
#grads .ivc .who b { display: inline; font-size: 14px; color: #fff; }

/* v11.05 졸업생 인터뷰 카드 = 히어로 카드 톤 (사진 위 파란 태그 → 이름 줄 → 구분선 → Q · 답변) */
#grads .ivc { background: #14171C; border: 1px solid rgba(0,0,0,.08); }
#grads .ivc .ivimg { position: relative; }
#grads .ivc .ivtag { position: absolute; top: 12px; left: 12px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; line-height: 1.3; }
#grads .ivc .ivb { padding: 20px 22px 22px; }
#grads .ivc .who { order: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0 0 14px; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 12.5px; color: #8F98A6; }
#grads .ivc .who b { font-size: 17px; color: #fff; }
#grads .ivc .who em { font-style: normal; color: var(--blue-hi); }
#grads .ivc .q { margin-top: 14px; font-size: 15px; }
#grads .ivc blockquote { margin-top: 8px; font-size: 14.5px; color: #C9D0DA; }
#grads .ivc .tg { display: none; }
@media (max-width: 600px) { #grads .ivc .ivtag { top: 10px; left: 10px; font-size: 11.5px; padding: 4px 9px; } #grads .ivc .ivb { padding: 18px 18px 20px; } }
/* v11.06 슬라이드 위치: 점 대신 숫자 */
#grads .ivdots { gap: 6px; align-items: baseline; font-size: 14px; color: #8F98A6; letter-spacing: .04em; }
#grads .ivdots b { color: #111; font-size: 15px; font-weight: 800; }

/* v11.07 히어로 카드 = 졸업생 인터뷰 카드 (Q 줄 추가, 글자 맞춤) / 모바일 슬라이드 옆 카드 덜 보이게 */
.hcard .who { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.hcard .hq { margin: 14px 0 0; font-size: 15px; font-weight: 800; color: #fff; }
.hcard blockquote { margin-top: 8px !important; }
#grads .ivc .q { font-size: 15px; }
@media (max-width: 600px) {
  .hcard .hq { font-size: 14px; margin-top: 12px; }
  #grads .ivtrack { grid-auto-columns: 91%; column-gap: 10px; }
}

/* v11.08 네이버 후기: 크게, 가로로 넘기기, 링크는 아래로 */
#grads .rvs { position: relative; margin-top: 20px; }
#grads .reviews { margin-top: 0; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
#grads .reviews::-webkit-scrollbar { display: none; }
#grads .reviews img { width: calc((100% - 32px) / 3); height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; border: 1px solid #DDE1E7; scroll-snap-align: start; }
#grads .rvs > .rvp, #grads .rvs > .rvn { position: absolute; top: 40%; z-index: 3; width: 44px; height: 44px; border: 0; background: rgba(17,17,17,.78); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
#grads .rvs > .rvp { left: -22px; } #grads .rvs > .rvn { right: -22px; }
#grads .rvs > .rvp:hover, #grads .rvs > .rvn:hover { background: var(--blue); }
#grads .rvfoot { margin-top: 24px; display: flex; justify-content: center; }
#grads .rvfoot .rvlinks { gap: 28px; }
@media (max-width: 600px) {
  #grads .rvs { margin-right: -20px; }
  #grads .rvs > .rvp, #grads .rvs > .rvn { display: none; }
  #grads .reviews { gap: 10px; padding-right: 20px; }
  #grads .reviews img { width: 82%; }
  #grads .rvfoot { justify-content: flex-start; }
  #grads .rvfoot .rvlinks { flex-direction: column; gap: 10px; }
}

/* v11.09 네이버 플레이스 후기: 숫자 요약 + 실제 후기 3개 */
#grads .nrv { display: grid; grid-template-columns: 300px 1fr; gap: 24px; margin-top: 56px; padding-top: 40px; border-top: 1px solid #E3E6EB; }
#grads .nhd .badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #111; }
#grads .nhd .badge i { width: 22px; height: 22px; background: #03C75A; color: #fff; font-style: normal; font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
#grads .nhd h3 { margin: 14px 0 0; font-size: 30px; letter-spacing: -0.02em; } #grads .nhd h3 em { font-style: normal; color: #03A94D; }
#grads .nhd > p { margin: 6px 0 0; font-size: 13px; color: #7A8291; }
#grads .nkw { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
#grads .nkw li { display: grid; grid-template-columns: 1fr 70px 22px; align-items: center; gap: 8px; font-size: 13.5px; color: #333; }
#grads .nkw .bar { height: 6px; background: #E8EBEF; } #grads .nkw .bar i { display: block; height: 100%; background: #03C75A; }
#grads .nkw b { font-size: 13px; color: #111; text-align: right; }
#grads .nrcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#grads .nrc { background: #F5F6F8; padding: 22px 22px 18px; display: flex; flex-direction: column; }
#grads .nrc p { margin: 0; font-size: 14.5px; line-height: 1.75; color: #3A404A; word-break: keep-all; flex: 1; }
#grads .nrc p b { color: #111; }
#grads .nrc .nm { margin-top: 16px; padding-top: 12px; border-top: 1px solid #DDE1E7; font-size: 12.5px; color: #8F98A6; display: flex; gap: 8px; flex-wrap: wrap; }
#grads .nrc .nm b { color: #111; font-size: 13px; }
#grads .rvfoot { margin-top: 28px; }
#grads a.textlink { color: inherit; text-decoration: none; }
@media (max-width: 900px) { #grads .nrv { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  #grads .nrv { margin-top: 40px; padding-top: 28px; }
  #grads .nhd h3 { font-size: 26px; }
  #grads .nrcs { grid-template-columns: 1fr; gap: 10px; }
  #grads .nrc { padding: 18px 18px 16px; }
}
/* v11.10 후기 카드 작성자 줄 높이 통일 */
#grads .nrc .nm { display: block; } #grads .nrc .nm b { display: block; margin-bottom: 2px; }
/* v11.11 링크를 각 내용 바로 아래로 */
#grads .ivmore { margin-top: 18px; display: flex; justify-content: center; }
#grads .nhd .grlink { display: inline-block; margin-top: 18px !important; font-size: 14px; }
#grads .rvfoot { margin-top: 20px; display: flex; justify-content: flex-end; }
@media (max-width: 600px) { #grads .ivmore { justify-content: flex-start; margin-top: 14px; } #grads .rvfoot { justify-content: flex-start; } }
#grads .nrc p { line-height: 1.8; }
#grads .nrc p br { display: block; content: ""; margin-bottom: 8px; }

/* v11.12 네이버 후기 섹션 분리 (연회색 배경, 흰 카드) */
#naver .nrv, #grads .nrv { }
#naver .nrv { display: grid; grid-template-columns: 300px 1fr; gap: 24px; margin-top: 36px; padding-top: 0; border-top: 0; }
#naver .nhd .badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #111; }
#naver .nhd .badge i { width: 22px; height: 22px; background: #03C75A; color: #fff; font-style: normal; font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
#naver .nhd h3 { margin: 14px 0 0; font-size: 30px; letter-spacing: -0.02em; } #naver .nhd h3 em { font-style: normal; color: #03A94D; }
#naver .nhd > p { margin: 6px 0 0; font-size: 13px; color: #7A8291; }
#naver .nkw { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
#naver .nkw li { display: grid; grid-template-columns: 1fr 70px 22px; align-items: center; gap: 8px; font-size: 13.5px; color: #333; }
#naver .nkw .bar { height: 6px; background: #E1E5EA; } #naver .nkw .bar i { display: block; height: 100%; background: #03C75A; }
#naver .nkw b { font-size: 13px; color: #111; text-align: right; }
#naver .nrcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#naver .nrc { background: #fff; padding: 22px 22px 18px; display: flex; flex-direction: column; }
#naver .nrc p { margin: 0; font-size: 14.5px; line-height: 1.8; color: #3A404A; word-break: keep-all; flex: 1; }
#naver .nrc p b { color: #111; }
#naver .nrc .nm { margin-top: 16px; padding-top: 12px; border-top: 1px solid #E3E6EB; font-size: 12.5px; color: #8F98A6; display: block; }
#naver .nrc .nm b { display: block; color: #111; font-size: 13px; margin-bottom: 2px; }
#naver .rvfoot { margin-top: 20px; display: flex; justify-content: flex-end; }
#naver a.textlink { color: inherit; text-decoration: none; }
@media (max-width: 900px) { #naver .nrv { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  #naver .nrv { margin-top: 24px; }
  #naver .nhd h3 { font-size: 26px; }
  #naver .nrcs { grid-template-columns: 1fr; gap: 10px; }
  #naver .nrc { padding: 18px 18px 16px; }
  #naver .rvfoot { justify-content: flex-start; }
}
#naver .nrv { margin-top: 0; }
#naver .rvfoot { justify-content: center !important; }
/* v11.13 네이버 후기 → 졸업생 섹션 안으로 (구분선) */
#naver { margin-top: 56px; padding-top: 56px; border-top: 1px solid #E3E6EB; }
#naver .nrc { background: #F5F6F8 !important; }
#naver .nkw .bar { background: #E8EBEF; }
@media (max-width: 600px) { #naver { margin-top: 40px; padding-top: 36px; } }

/* v11.14 본업 섹션: 단색 남색, 각진 카드, 공동대표 사진 */
#mission { background: #0B1A30 !important; }
#mission .order > div { border-radius: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
#mission .order > div.on { background: #12305A; border-color: #1F4A85; }
#mission .by { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
#mission .ph2 { display: flex; }
#mission .ph2 img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid #0B1A30; }
#mission .ph2 img + img { margin-left: -10px; }
#mission .by b { color: #fff; font-weight: 700; }

/* v11.15 본업 섹션: 부업 vs 본업 구조 비교 */
#mission .vs { margin-top: 4px; border: 1px solid rgba(255,255,255,.1); }
#mission .vs small { display: block; padding: 10px 18px; font-size: 12px; color: #8F98A6; border-bottom: 1px solid rgba(255,255,255,.08); }
#mission .vs .r { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 12px 18px; font-size: 14px; color: #8F98A6; }
#mission .vs .r + .r { border-top: 1px solid rgba(255,255,255,.08); }
#mission .vs .r b { font-weight: 600; color: #AEB5C0; }
#mission .vs .r.me { background: rgba(31,74,133,.35); }
#mission .vs .r.me b, #mission .vs .r.me span { color: #fff; }
#mission .vs .r.me b { color: var(--blue-hi); font-weight: 700; }
@media (max-width: 600px) { #mission .vs .r { grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; font-size: 13.5px; } }
#mission .order > div.vs { display: block; padding: 0; background: transparent; border: 1px solid rgba(255,255,255,.1); }
#mission .vs .r b { font-size: 14px; display: inline; }
#mission .vs .r span { font-size: 14px; margin: 0; }
/* v11.16 교육 철학 본문 단락 */
#mission .mbody { margin-top: 18px; }
#mission .mbody p { margin: 0 0 12px; font-size: 16px; line-height: 1.75; color: #B7C0CC; word-break: keep-all; }
#mission .mbody p:last-child { margin-bottom: 0; }
#mission .mbody b { color: #fff; }
@media (max-width: 600px) { #mission .mbody p { font-size: 15px; } }
@media (max-width: 600px) { #mission .order > div { grid-template-columns: 34px 1fr; gap: 12px; padding: 18px 18px; } #mission .order .n { font-size: 24px; } #mission .order b { font-size: 16.5px; } }
#mission .mbody p.mend { margin-top: 16px; color: #fff; font-weight: 600; }
#mission .order .onote { margin: 6px 0 0; font-size: 13.5px; color: #8F98A6; }
#mission .order > div { padding-top: 20px; padding-bottom: 20px; }
#mission .order .onote { margin: 0; padding: 14px 18px; border: 1px dashed rgba(255,255,255,.18); font-size: 14px; color: #AEB5C0; text-align: center; line-height: 1.6; }
@media (max-width: 600px) { #mission .order .onote { font-size: 13.5px; padding: 12px 14px; } }
@media (min-width: 601px) { #mission .order .onote { font-size: 13.5px; letter-spacing: -0.02em; white-space: nowrap; padding: 14px 10px; } }
#mission .order .onote { border: 0 !important; padding: 6px 0 0 !important; text-align: center; }
/* v11.17 교육 철학: 제목·본문 크기를 다른 섹션과 통일 */
#mission blockquote { font-size: 46px; font-weight: 650; line-height: 1.3; letter-spacing: -0.03em; }
#mission .mquote { font-size: 18px; }
#mission .mbody p { font-size: 17px; }
@media (max-width: 600px) { #mission blockquote { font-size: 32px; } #mission .mquote { font-size: 16.5px; } #mission .mbody p { font-size: 15.5px; } }
/* v11.18 교육 철학 본문 줄바꿈: PC는 문장 단위, 모바일은 자연 줄바꿈 */
#mission .mbody br.pbr { display: inline; }
@media (max-width: 600px) { #mission .mbody br.pbr { display: none; } }
#mission .mbody p { margin-bottom: 14px; }
/* v11.19 교육 철학 본문: 자연 줄바꿈, 단락 간격 */
#mission .mbody p { margin: 0 0 18px; line-height: 1.75; }
#mission .mbody p.mend { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
@media (max-width: 600px) { #mission .mbody p { margin-bottom: 14px; } #mission .mbody p.mend { margin-top: 18px; padding-top: 14px; } }
#mission .mbody p { white-space: nowrap; }
@media (max-width: 360px) { #mission .mbody p { white-space: normal; } }
/* v11.20 교육 철학: PC는 단락당 한 줄 */
@media (min-width: 601px) { #mission .mbody br { display: none; } }
@media (min-width: 601px) and (max-width: 1180px) { #mission .mbody p { font-size: 15.5px; } }
#mission .mbody p.mend { border-top: 0 !important; padding-top: 0 !important; margin-top: 22px !important; }
@media (max-width: 600px) { #mission .mbody p.mend { margin-top: 18px !important; } }
/* v11.21 교육 철학: 모바일 자연 줄바꿈, 서명-카드 간격, PC 좌우 높이 맞춤 */
#mission .mbody br { display: none; }
@media (max-width: 600px) { #mission .mbody p { white-space: normal !important; } #mission .mission { gap: 28px; } }
@media (min-width: 601px) {
  #mission .mission { align-items: stretch; }
  #mission .order { display: flex; flex-direction: column; gap: 12px; }
  #mission .order > div:not(.vs) { flex: 1; }
}
/* v11.22 카드 원래 높이 + 경고 박스 */
@media (min-width: 601px) { #mission .mission { align-items: center; } #mission .order > div:not(.vs) { flex: none; } }
#mission .order > div.warn { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: rgba(255,170,0,.08); border: 1px solid rgba(255,184,77,.45); grid-template-columns: none; }
#mission .warn .wi { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #FFB84D; color: #1A1206; font-weight: 900; font-size: 15px; display: flex; align-items: center; justify-content: center; }
#mission .warn p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #FFD9A0; word-break: keep-all; }
@media (max-width: 600px) { #mission .order > div.warn { padding: 14px 16px; gap: 12px; } #mission .warn p { font-size: 13.5px; } }
#mission .warn br.mbr { display: inline !important; }
/* v11.23 교육 철학: 모바일 전용 짧은 문장, PC 카드 폭 축소 */
#mission .dmo { display: none; }
@media (max-width: 600px) { #mission .dpc { display: none; } #mission .dmo { display: inline; } #mission .mbody p { margin-bottom: 10px; } }
@media (min-width: 901px) {
  #mission .mission { grid-template-columns: 1fr 440px; gap: 72px; }
  #mission .order > div:not(.warn) { grid-template-columns: 36px 1fr; gap: 14px; padding: 20px 22px; }
}
@media (max-width: 600px) { #mission .mbody p { margin-bottom: 14px; } }
/* v11.24 교육 철학: 사용자 줄바꿈 그대로 (PC·모바일 공통) */
#mission .mbody br { display: inline !important; }
#mission .mbody p { white-space: nowrap; }
/* v11.25 PC: 강제 줄바꿈 없음 */
@media (min-width: 601px) { #mission .mbody br { display: none !important; } #mission .mbody p { white-space: normal !important; } }
@media (min-width: 1101px) { #mission .mission { grid-template-columns: 1fr 360px; gap: 56px; } #mission .mbody p { font-size: 16px; letter-spacing: -0.02em; } }
@media (min-width: 601px) and (max-width: 1100px) { #mission .mission { grid-template-columns: 1fr; gap: 36px; } #mission .mbody p { font-size: 16px; letter-spacing: -0.02em; } }
#mission .warn p { white-space: normal; }
@media (min-width: 1101px) { #mission .mission { grid-template-columns: 1fr 392px; } #mission .order > div:not(.warn) { padding: 20px 28px; grid-template-columns: 40px 1fr; } #mission .order > div.warn { padding: 16px 28px; } }
/* v11.26 교육 철학: 카드 윗선 = 제목 첫 줄 */
@media (min-width: 1101px) { #mission .mission { align-items: start !important; } #mission .order { margin-top: 40px; } }
@media (min-width: 601px) { #mission .order b { font-size: 17.5px; white-space: nowrap; letter-spacing: -0.02em; } }

/* v11.27 강사진: 이름 옆 장르, 카드 검정 구분선 */
.tutor4 { gap: 0 !important; border: 1px solid #111; }
.tutor4 > div { padding: 0 0 18px; border-right: 1px solid #111; }
.tutor4 > div:last-child { border-right: 0; }
.tutor4 > div > b, .tutor4 > div > span { padding: 0 16px; }
.tutor4 > div > b em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--blue); margin-left: 6px; }
.tutor4 img { filter: none; border-bottom: 1px solid #111; }
@media (max-width: 600px) {
  .tutor4 > div:nth-child(2n) { border-right: 0; }
  .tutor4 > div:nth-child(-n+2) { border-bottom: 1px solid #111; }
  .tutor4 > div > b, .tutor4 > div > span { padding: 0 12px; }
  .tutor4 > div > b em { display: block; margin: 2px 0 0; }
}
/* v11.28 강사 카드: 간격 띄우고, 사진은 선 없이, 아래 글 칸만 테두리 */
.tutor4 { gap: 16px !important; border: 0 !important; }
.tutor4 > div { padding: 0 !important; border: 0 !important; }
.tutor4 img { border: 0 !important; }
.tutor4 .tx { border: 1px solid #111; border-top: 0; padding: 14px 16px 16px; flex: 1; }
.tutor4 > div { display: flex; flex-direction: column; }
.tutor4 > div > .tx > b { margin-top: 0; padding: 0; }
.tutor4 > div > .tx > span { padding: 0; }
@media (max-width: 600px) { .tutor4 { gap: 10px !important; } .tutor4 .tx { padding: 12px 12px 14px; } }
/* v11.29 강사 카드: 장르 표기 복구, 이름 아래 회색선, 설명-카드 간격 */
.tutor4 .tx b em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--blue); margin-left: 6px; }
.tutor4 .tx > b { padding-bottom: 10px !important; margin-bottom: 10px; border-bottom: 1px solid #DDE1E7; }
.tutor4 .tx > span { margin-top: 0; }
.tutor4 { margin-top: 32px !important; }
@media (max-width: 600px) { .tutor4 { margin-top: 22px !important; } .tutor4 .tx b em { display: inline; margin-left: 4px; font-size: 12px; } .tutor4 .tx > b { font-size: 17px; } }
#whynow .wmo { display: none; }
@media (max-width: 600px) { #whynow .wpc { display: none; } #whynow .wmo { display: inline; white-space: nowrap; } }
.tlead .lmo { display: none; }
@media (max-width: 600px) { .tlead .lpc { display: none; } .tlead .lmo { display: inline; white-space: nowrap; } }
/* v11.30 강사 카드: 대표 작품 1장 */
.tutor4 .tw { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #111; border-top: 0; border-bottom: 0; }
.tutor4 .tw img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; filter: none; }
.tutor4 .tw::after { content: "대표 작품"; position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.66); padding: 3px 7px; }
.tutor4 .tx { border-top: 1px solid #111 !important; }
/* v11.31 강사 카드: 사진 + 이름·장르만 */
.tutor4 .tx > b { border-bottom: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
.tutor4 .tx { padding: 14px 16px !important; }

/* v11.32 강사 카드 클릭 → 아래 작품 8장(2줄 4열) 전환 */
.tutor4 .tc { cursor: pointer; }
.tutor4 .tc .tx { transition: background .2s, border-color .2s; }
.tutor4 .tc.on .tx { background: #111; border-color: #111; }
.tutor4 .tc.on .tx b { color: #fff; }
.tutor4 .tc.on .tx b em { color: #8DB8FF; }
.tutor4 .tc:not(.on) img { opacity: .82; }
@media (hover: hover) { .tutor4 .tc:hover img { opacity: 1; } }
.twk { margin-top: 20px; border: 1px solid #111; }
.twh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #111; font-size: 14px; }
.twh .q { font-size: 18px; color: #7A8291; line-height: 1; }
.twh .twn { font-size: 15px; color: #111; }
.twh .twg { color: #7A8291; }
.twg8 { display: none; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #111; }
.twg8.on { display: grid; }
.twg8 img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
@media (max-width: 600px) { .twh { padding: 10px 12px; font-size: 13px; } .twk { margin-top: 12px; } }
/* v11.33 모바일 강사 작품: 4장 (2×2) */
@media (max-width: 600px) { .twg8 { grid-template-columns: 1fr 1fr; } .twg8 img:nth-child(n+5) { display: none; } }
.twh .tht { color: #7A8291; font-size: 13.5px; }

/* v11.34 졸업생 인터뷰 카드: 마우스 올리면(모바일은 누르면) 작품으로 바뀜 */
#grads .ivimg { cursor: pointer; }
#grads .ivw { position: absolute; inset: 0; }
#grads .ivw img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
#grads .ivimg.w .ivw img.on { opacity: 1; }
#grads .ivbtn { position: absolute; right: 10px; bottom: 10px; z-index: 2; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,.66); padding: 5px 9px; }
#grads .ivbtn::before { content: "◐ "; }
#grads .ivtag { z-index: 2; }

/* v11.35 졸업생 카드: 작품 띠가 사진 아래에서 올라옴 */
#grads .ivw { inset: auto 0 0 0 !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px; background: rgba(0,0,0,.72); transform: translateY(100%); transition: transform .35s ease; z-index: 1; }
#grads .ivw img { position: static !important; opacity: 1 !important; aspect-ratio: 1; height: auto !important; }
#grads .ivimg.w .ivw { transform: translateY(0); }
#grads .ivbtn { transition: bottom .35s ease; }
#grads .ivimg.w .ivbtn { bottom: calc((100% - 4px) / 4 * 0 + 25%); }
@media (max-width: 600px) { #grads .ivimg.w .ivbtn { bottom: calc(25% + 4px); } }

/* v11.35 강사진: 모바일은 가로 슬라이드 한 줄 */
@media (max-width: 600px) {
  .tutor4 { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .tutor4::-webkit-scrollbar { display: none; }
  .tutor4 .tc { scroll-snap-align: start; }
  .tutor4 .tx b em { display: block !important; margin: 2px 0 0 !important; }
}
#grads .ivimg.w .ivbtn { bottom: auto !important; top: 10px; }
@media (max-width: 600px) { #grads .ivimg.w .ivbtn { bottom: auto !important; top: 10px; } }
/* v11.36 작품 띠: 사진 아래(이름 위)에 펼쳐짐 */
#grads .ivc > .ivw { position: static !important; inset: auto !important; transform: none !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 0 2px; background: #0B0C0E; max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; }
#grads .ivc.w > .ivw { max-height: 200px; padding: 2px; }
#grads .ivc > .ivw img { position: static !important; opacity: 1 !important; width: 100%; aspect-ratio: 1; height: auto !important; object-fit: cover; }
#grads .ivc.w .ivbtn { top: auto !important; bottom: 10px !important; }

/* v11.37 졸업생: 카드 누르면 아래 작품 칸이 바뀜 (강사진과 같은 방식) */
#grads .ivc { cursor: pointer; transition: outline-color .2s; outline: 2px solid transparent; outline-offset: -2px; }
#grads .ivc.on { outline-color: var(--blue); }
#grads .gwk { margin-top: 16px; border: 1px solid #111; }
#grads .gwk .twh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #111; }
#grads .gwk .twh .q { font-size: 18px; color: #7A8291; line-height: 1; }
#grads .gwk .twh .tht { color: #7A8291; font-size: 13.5px; }
#grads .gw4 { display: none; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #111; }
#grads .gw4.on { display: grid; }
#grads .gw4 img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
@media (max-width: 600px) { #grads .gw4 { grid-template-columns: 1fr 1fr; } #grads .gwk { margin-top: 12px; } #grads .gwk .twh { padding: 10px 12px; } }
/* v11.38 졸업생 카드 = 인터뷰 + 작품 4장 (카드 하단) */
#grads .ivc { cursor: default; outline: 0 !important; }
#grads .ivk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px; background: #0B0C0E; margin-top: auto; }
#grads .ivk img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
#grads .ivk { grid-template-columns: repeat(3, 1fr); }
#grads .ivk img:nth-child(n+4) { display: none; }

/* v11.39 강사진 카드 = 졸업생 카드 형식 (사진 · 이름 · 이력 · 작품 3장) */
.tcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.tcd { background: #14171C; display: flex; flex-direction: column; color: #fff; }
.tcd .tph { position: relative; aspect-ratio: 4 / 4.2; overflow: hidden; }
.tcd .tph img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.tcd .ivtag { position: absolute; top: 12px; left: 12px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; line-height: 1.3; }
.tcd .tb { padding: 18px 18px 16px; flex: 1; }
.tcd .who { display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.tcd .who b { font-size: 18px; color: #fff; }
.tcd .who span { font-size: 12px; letter-spacing: .08em; color: #8F98A6; font-weight: 600; }
.tcd ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.tcd li { position: relative; padding-left: 10px; font-size: 13px; line-height: 1.5; color: #C3CAD5; word-break: keep-all; }
.tcd li::before { content: ""; position: absolute; left: 0; top: .65em; width: 3px; height: 3px; background: #8DB8FF; }
.tcd li:first-child { color: #fff; font-weight: 600; }
.tcd .ivk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; background: #0B0C0E; }
.tcd .ivk img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
@media (max-width: 600px) {
  .tcards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -20px; padding-right: 20px; margin-top: 22px; }
  .tcards::-webkit-scrollbar { display: none; }
  .tcd { scroll-snap-align: start; }
  .tcd .tph { aspect-ratio: 4 / 3.4; }
}
#proof .flow .col .chd h3 { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 6px !important; }
/* v11.40 작품 카드 설명 한 줄 고정 */
#proof .flow .col .chd p { white-space: nowrap; letter-spacing: -0.02em; }
@media (min-width: 601px) and (max-width: 1180px) { #proof .flow .col .chd p { font-size: 13px !important; } #proof .flow .col .chd { padding-left: 14px; padding-right: 10px; } }

/* v11.41 강사 카드: 장르를 이름 옆으로 */
.tcd .who { flex-wrap: wrap; }
.tcd .who .tg { font-style: normal; margin-left: auto; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--blue); padding: 3px 8px; }

/* 작품 확대 보기 */
.lbx { position: fixed; inset: 0; z-index: 200; background: rgba(5,6,8,.92); display: none; align-items: center; justify-content: center; flex-direction: column; padding: 56px 64px 40px; }
.lbx.on { display: flex; }
.lbx img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; display: block; }
.lbx .lbt { margin: 14px 0 0; color: #C3CAD5; font-size: 14px; text-align: center; }
.lbx button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; }
.lbx .lbc { top: 14px; right: 18px; font-size: 26px; }
.lbx .lbp, .lbx .lbn { top: 50%; transform: translateY(-50%); font-size: 46px; width: 56px; height: 72px; }
.lbx .lbp { left: 6px; } .lbx .lbn { right: 6px; }
.lbx.one .lbp, .lbx.one .lbn { display: none; }
@media (max-width: 600px) { .lbx { padding: 52px 12px 28px; } .lbx .lbp, .lbx .lbn { display: none; } .lbx .lbt { font-size: 13px; } }
/* v11.42 강사 카드: 이름 옆 직함, 장르는 첫 줄 */
.tcd .who span { font-size: 13px; letter-spacing: 0; color: #AEB5C0; font-weight: 600; }
.tcd li.gn { color: #8DB8FF !important; font-weight: 700; }
.tcd li:first-child:not(.gn) { color: #C3CAD5; font-weight: 400; }
/* v11.43 강사 카드: 장르는 직함 아래 파란 글씨, 이력 3줄 */
.tcd .who .gn { flex-basis: 100%; font-style: normal; font-size: 12.5px; font-weight: 700; color: #8DB8FF; margin-top: 2px; }
.tcd li, .tcd li:first-child { color: #C3CAD5 !important; font-weight: 400 !important; }
/* v11.44 심사 블록: 증명 사진 3장 */
.judge2 { grid-template-columns: 1.25fr 1fr !important; }
.judge2 .jph { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: #111; min-height: 360px; }
.judge2 .jph > div { overflow: hidden; }
.judge2 .jph .j1 { grid-row: 1 / 3; }
.judge2 .jph img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; }
.judge2 .jph > span { position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; padding: 6px 10px; }
@media (max-width: 860px) { .judge2 { grid-template-columns: 1fr !important; } .judge2 .jph { min-height: 260px; } }
/* v11.45 강사 카드 바깥 선 제거 */
.tcd .ivk { padding: 0; padding-top: 2px; background: #14171C; }
/* v11.46 졸업생 카드 바깥 선 제거 */
#grads .ivk { padding: 0; padding-top: 2px; background: #14171C; }
#grads .ivc { border: 0 !important; }

/* v11.47 심사 블록: 슬라이드 (PC 좌 사진·우 글 / 모바일 위 사진·아래 글) */
.jsl { position: relative; margin-top: 40px; }
.jtrack { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.jtrack::-webkit-scrollbar { display: none; }
.js { scroll-snap-align: start; display: grid; grid-template-columns: 1.25fr 1fr; background: #F5F6F8; min-height: 380px; }
.js .jimg { overflow: hidden; }
.js .jimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.js .jc { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.js .jc small { font-size: 13px; font-weight: 700; color: var(--blue); }
.js .jc h3 { margin: 10px 0 0; font-size: 24px; line-height: 1.45; letter-spacing: -0.02em; word-break: keep-all; }
.js .jc p { margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: #5A6270; word-break: keep-all; }
.jsl > .jp, .jsl > .jn { position: absolute; top: 190px; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border: 0; background: rgba(17,17,17,.78); color: #fff; font-size: 26px; cursor: pointer; }
.jsl > .jp { left: -22px; } .jsl > .jn { right: -22px; }
.jsl > .jp:hover, .jsl > .jn:hover { background: var(--blue); }
.jfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.jdots { font-size: 14px; color: #8F98A6; } .jdots b { color: #111; font-weight: 800; }
@media (max-width: 860px) {
  .js { grid-template-columns: 1fr; min-height: 0; }
  .js .jimg { aspect-ratio: 4 / 3; }
  .js .jc { padding: 22px 20px 24px; }
  .js .jc h3 { font-size: 19px; }
  .js .jc p { font-size: 14.5px; }
  .jsl > .jp, .jsl > .jn { display: none; }
  .jsl { margin-top: 28px; }
}
@media (min-width: 861px) { .js { height: 420px; min-height: 0; } .js .jimg { height: 420px; } }
.js .jimg img { object-position: center 35%; }
/* v11.48 심사 슬라이드: 실적형 (큰 제목) */
.js .jc h3 { font-size: 34px; line-height: 1.3; }
@media (max-width: 860px) { .js .jc h3 { font-size: 24px; } }
.js:first-child .jimg { background: #111; }
.js:first-child .jimg img { object-fit: contain; }

/* v11.49 심사 슬라이드: 기존 홈페이지 방식 (사진 + 라벨) */
.jsl .jtrack { grid-auto-columns: calc((100% - 32px) / 3); column-gap: 16px; }
.jk { position: relative; scroll-snap-align: start; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.jk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jk .jl { position: absolute; left: 0; bottom: 0; right: 0; padding: 26px 16px 14px; background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #fff; display: flex; flex-direction: column; gap: 2px; }
.jk .jl small { font-size: 12.5px; color: #C9D0DA; }
.jk .jl b { font-size: 18px; }
.jsl > .jp, .jsl > .jn { top: 50%; transform: translateY(-80%); }
@media (max-width: 860px) { .jsl .jtrack { grid-auto-columns: 84%; column-gap: 12px; } .jsl { margin-right: -20px; } .jsl .jfoot { padding-right: 20px; } .jk .jl b { font-size: 16px; } }
.jk .jl b { color: #fff !important; } .jk .jl small { color: #D5DAE2 !important; }
.jk .jl { background: linear-gradient(transparent, rgba(0,0,0,.85)) !important; }
.jk .jl small { letter-spacing: .03em; font-size: 12px; }
/* v11.50 강사진: 심사 소제목, 모바일 카드 숫자 */
.jhd { margin-top: 48px; }
.jhd h3 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.jhd p { margin: 6px 0 0; font-size: 15px; color: #5A6270; word-break: keep-all; }
.jhd + .jsl { margin-top: 18px; }
.tdots { display: none; font-size: 14px; color: #8F98A6; margin-top: 12px; }
.tdots b { color: #111; font-weight: 800; }
@media (max-width: 600px) { .tdots { display: block; } .jhd { margin-top: 32px; } .jhd h3 { font-size: 18px; } .jhd p { font-size: 14px; } }

/* v11.51 수료 후: 핵심 카드 4개 (각진 카드) */
.aft4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.aft4 > div { background: #fff; padding: 26px 24px 24px; border-top: 3px solid var(--blue); }
.aft4 .n { display: block; font-size: 13px; font-weight: 800; color: var(--blue); }
.aft4 small { display: block; margin-top: 14px; font-size: 13px; font-weight: 700; color: #7A8291; }
.aft4 b { display: block; margin-top: 6px; font-size: 18px; line-height: 1.4; color: #111; word-break: keep-all; }
.aft4 p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.7; color: #5A6270; word-break: keep-all; }
@media (max-width: 900px) { .aft4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .aft4 { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; } .aft4 > div { padding: 20px 18px; } .aft4 b { font-size: 17px; } }
/* v11.52 교육 철학 강조 박스 (주황 복귀, 문구 굵게) */
#mission .warn p { font-weight: 600; }

/* v11.53 수료 후: 인용 타이틀 + 출처 */
#after .qsrc { margin: 14px 0 18px; font-size: 14px; color: #6B7684; }
#after .lead br.mbr { display: none; }
@media (max-width: 600px) { #after .qsrc { font-size: 12.5px; } #after .lead br.mbr { display: inline; } }
#after h2 br.mbr { display: none; }
@media (max-width: 600px) { #after h2 br.mbr { display: inline; } #after .qsrc { margin: 12px 0 16px; } }

/* v11.54 수료 후: 타이틀 B + 하단 루얀 인용 */
#after .aq { margin-top: 28px; padding: 18px 24px; border-left: 3px solid var(--blue, #0047A0); background: #fff; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
#after .aq p { margin: 0; font-size: 17px; font-weight: 700; color: #191F28; word-break: keep-all; }
#after .aq span { font-size: 13px; color: #6B7684; }
@media (max-width: 600px) { #after .aq { margin-top: 20px; padding: 16px 18px; display: block; } #after .aq p { font-size: 15px; } #after .aq span { display: block; margin-top: 8px; font-size: 12px; } }
#after .aq br.mbr { display: none; }
@media (max-width: 600px) { #after .aq br.mbr { display: inline; } }

/* v11.55 졸업생 lead 모바일 한 줄 */
@media (max-width: 600px) { #grads > .wrap > .lead, #grads .lead:first-of-type { font-size: min(15px, 3.75vw); white-space: nowrap; letter-spacing: -0.02em; } }

/* v11.56 수료 후 lead 모바일 한 줄 */
@media (max-width: 600px) { #after .lead { font-size: min(15px, 3.75vw); white-space: nowrap; letter-spacing: -0.02em; } }

/* v11.57 수료 후 카드: 숫자+라벨 한 줄, 제목 1줄 */
.aft4 .n { display: inline-block; }
.aft4 small { display: inline-block; margin: 0 0 0 8px; }
.aft4 b { margin-top: 10px; white-space: nowrap; }

/* v11.58 수료 후: 졸업생 케어 인용 4개 */
#after .aqs { margin-top: 44px; }
#after .aqh { font-size: 15px; font-weight: 800; color: #191F28; margin-bottom: 14px; }
#after .aqg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#after .aqg > div { background: #fff; border-left: 3px solid var(--blue, #0047A0); padding: 18px 22px; }
#after .aqg p { margin: 0; font-size: 15.5px; line-height: 1.6; font-weight: 700; color: #191F28; word-break: keep-all; }
#after .aqg span { display: block; margin-top: 10px; font-size: 13px; color: #6B7684; }
@media (max-width: 1000px) { #after .aqg p br { display: none; } }
@media (max-width: 600px) { #after .aqs { margin-top: 32px; } #after .aqg { grid-template-columns: 1fr; gap: 8px; } #after .aqg > div { padding: 14px 16px; } #after .aqg p { font-size: 14px; } #after .aqg span { margin-top: 6px; font-size: 12px; } }

/* v11.59 수료 후 카드 2x2 + AI 준비 중 */
.aft4.aft2 { grid-template-columns: 1fr 1fr; }
.aft4.aft2 p { white-space: nowrap; }
.aft4 .soon { border-top-color: #111; }
.aft4 .soon .n { color: #111; }
.aft4 .tg { display: inline-block; margin-left: 8px; padding: 2px 8px; font-style: normal; font-size: 11.5px; font-weight: 800; color: #fff; background: #111; vertical-align: 1px; }
@media (max-width: 1100px) { .aft4.aft2 p { white-space: normal; } }
@media (max-width: 600px) { .aft4.aft2 { grid-template-columns: 1fr; } .aft4.aft2 p br { display: none; } }

/* v11.60 카드 내용 2줄, PC 줄당 1줄 */
.aft4.aft2 p { white-space: nowrap; }
@media (max-width: 1100px) { .aft4.aft2 p { white-space: normal; } }
@media (max-width: 600px) { .aft4.aft2 p br { display: inline; } #after .aqg p br { display: none; } }

/* v11.61 수료 후 카드: 번호+제목 한 줄 */
.aft4 b.ht { margin-top: 0; display: flex; align-items: center; gap: 10px; }
.aft4 b.ht .n { display: inline; font-size: 18px; }
.aft4 b.ht .tg { margin-left: 2px; }
.aft4 b.ht + p { margin-top: 12px; }

/* v11.62 수료 후 카드 사진 */
.aft4 .aim { margin: -26px -24px 20px; height: 200px; overflow: hidden; background: #111; }
.aft4 .aim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aft4 .aim.ai { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#0B1A30,#1F4A85); }
.aft4 .aim.ai span { font-size: 56px; font-weight: 900; letter-spacing: -0.02em; color: rgba(255,255,255,.9); }
@media (max-width: 600px) { .aft4 .aim { margin: -20px -18px 16px; height: 160px; } .aft4 .aim.ai { height: 90px; } .aft4 .aim.ai span { font-size: 36px; } }

/* v11.63 고른 이유: 1줄 자동 슬라이드 */
#after .aqt { margin-top: 28px; display: flex; align-items: center; gap: 24px; background: #fff; border-left: 3px solid var(--blue, #0047A0); padding: 18px 24px; position: relative; }
#after .aqt .aqh { flex: none; margin: 0; font-size: 13px; color: var(--blue, #0047A0); }
#after .aqt .aqg { display: grid; grid-template-columns: 1fr; flex: 1; min-width: 0; }
#after .aqt .aqg > div { grid-area: 1/1; background: none; border: 0; padding: 0; display: flex; align-items: baseline; gap: 14px; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; pointer-events: none; }
#after .aqt .aqg > div.on { opacity: 1; transform: none; pointer-events: auto; }
#after .aqt .aqg p { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#after .aqt .aqg span { margin: 0; flex: none; }
#after .aqd { flex: none; display: flex; gap: 6px; }
#after .aqd i { width: 6px; height: 6px; border-radius: 50%; background: #D1D6DB; cursor: pointer; }
#after .aqd i.on { background: var(--blue, #0047A0); }
@media (max-width: 600px) { #after .aqt { display: block; padding: 14px 16px 12px; } #after .aqt .aqh { margin-bottom: 8px; font-size: 12px; } #after .aqt .aqg > div { display: block; } #after .aqt .aqg p { white-space: normal; font-size: 14px; } #after .aqt .aqg span { display: block; margin-top: 6px; } #after .aqd { position: absolute; right: 16px; top: 16px; } }

/* v11.64 수료 후 카드: PC 4열, 모바일 슬라이드 */
.aft4.asl { grid-template-columns: repeat(4, 1fr); }
.aft4.asl p { white-space: normal; }
.aft4.asl p br { display: none; }
.aft4.asl .aim { height: 150px; }
.aft4.asl b.ht { font-size: 17px; }
.aft4.asl b.ht .n { font-size: 17px; }
@media (min-width: 601px) and (max-width: 1000px) { .aft4.asl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .aft4.asl { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-right: -20px; padding-right: 20px; scrollbar-width: none; } .aft4.asl::-webkit-scrollbar { display: none; } .aft4.asl > div { scroll-snap-align: start; } .aft4.asl .aim { height: 150px; } .aft4.asl p br { display: inline; } }
#after .aqt .aqg:not(:has(.on)) > div:first-child { opacity: 1; transform: none; }
.aft4 .aim img[src$="ai.jpg"] { object-position: left center; }
@media (max-width: 600px) { .aft4.asl p br { display: none; } .aft4.asl p { font-size: 14px; } }
/* v11.65 수료 후 카드: 상단 파란 띠 제거, 전체 테두리 */
.aft4.asl > div, .aft4.asl > div.soon { border-top: 0; border: 1px solid #DDE1E6; overflow: hidden; }
.aft4.asl .aim { margin: -26px -24px 20px; }
@media (max-width: 600px) { .aft4.asl .aim { margin: -20px -18px 16px; } }
/* v11.66 카드 제목-내용 구분선 */
.aft4.asl b.ht { padding-bottom: 14px; border-bottom: 1px solid #E5E8EB; }
.aft4.asl b.ht + p { margin-top: 14px; }

/* v11.67 슬라이드 하단: 좌측 개수 · 우측 링크 (강사진 이력과 같은 구조) */
#grads .ivfoot { margin-top: 18px; }
#grads .ivfoot .ivdots { margin: 0; padding: 0; justify-content: flex-start; }
.tfoot { margin-top: 18px; }
.tfoot .tdots { margin: 0; }
.tfoot .textlink { margin-left: auto !important; }
@media (max-width: 600px) { #grads .ivfoot { padding-right: 20px; } .tfoot { margin-top: 14px; } }

/* v11.68 왜 타투인가: 카드 4개, 각진 모서리, 모바일 2열 */
.perks.perks4 { grid-template-columns: repeat(4, 1fr); border-radius: 0; margin-top: 44px; }
.perks.perks4 div { padding: 26px 24px; }
.perks.perks4 b { font-size: 17px; word-break: keep-all; }
.perks.perks4 p { font-size: 14px; word-break: keep-all; }
.tiers3, .legal { border-radius: 0; }
.legalhead { margin-top: 64px; padding-top: 56px; }
.legal { margin-top: 40px; }
@media (max-width: 1000px) { .perks.perks4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .perks.perks4 { grid-template-columns: 1fr 1fr; margin-top: 28px; } .perks.perks4 div { padding: 18px 14px; } .perks.perks4 b { font-size: 15px; margin: 6px 0 4px; } .perks.perks4 p { font-size: 12.5px; line-height: 1.55; } .tiers3 > div { padding: 18px 20px; } .tiers3 b { font-size: 24px; } .legalhead { margin-top: 48px; padding-top: 40px; } .legal { margin-top: 28px; } }
@media (max-width: 600px) { .legal .row .af { display: block; } }

/* v11.69 모바일 길이 줄이기 */
.tierh, .fith { margin-top: 48px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.p-night .tierh { color: #fff; }
.fit2 { margin-top: 16px; }
.facc > div { cursor: pointer; }
.facc > div p { display: none; }
.facc > div.on p { display: block; }
.facc > div.on i { transform: rotate(45deg); }
.facc i { transition: transform .2s; }
@media (max-width: 600px) {
  .tierh, .fith { margin-top: 32px; font-size: 16px; }
  .tiers3.tiers-c { grid-template-columns: repeat(3, 1fr); }
  .tiers3.tiers-c > div { padding: 14px 10px; border-top: 0; border-left: 1px solid rgba(255,255,255,.1); }
  .tiers3.tiers-c > div:first-child { border-left: 0; }
  .tiers3.tiers-c small { font-size: 10.5px; letter-spacing: 0; }
  .tiers3.tiers-c b { font-size: 17px; margin: 6px 0 2px; }
  .tiers3.tiers-c b span { display: block; font-size: 11px; }
  .tiers3.tiers-c p { font-size: 11.5px; line-height: 1.4; }
  .fit2 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fit2 > div { padding: 16px 12px; }
  .fit2 h3 { font-size: 14px; margin-bottom: 6px; }
  .fit2 li { font-size: 12.5px; padding: 8px 0; line-height: 1.45; word-break: keep-all; }
  .apply { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; margin-top: 20px !important; }
  .apply > div { padding: 14px 10px; border-radius: 0; }
  .apply > div::before { font-size: 18px; margin-bottom: 6px; }
  .apply b { font-size: 13.5px; }
  .apply p { font-size: 11.5px; line-height: 1.45; }
  .faq { margin-top: 32px; }
  .faq div { padding: 16px 2px; }
  .faq b { font-size: 15px; }
  .nrcs.nsl { display: grid !important; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-right: -20px; padding-right: 20px; scrollbar-width: none; }
  .nrcs.nsl::-webkit-scrollbar { display: none; }
  .nrcs.nsl > .nrc { scroll-snap-align: start; }
}
/* v11.70 왜 지금 흡수: AI 요약 띠 */
.aistrip { display: grid; grid-template-columns: 150px 1fr 1fr; border: 1px solid rgba(255,255,255,.16); margin-top: 32px; }
.aistrip > small { display: flex; align-items: center; padding: 0 24px; font-size: 12px; letter-spacing: .16em; font-weight: 700; color: #7FA8E6; border-right: 1px solid rgba(255,255,255,.16); }
.aistrip > div { padding: 22px 26px; }
.aistrip > div + div { border-left: 1px solid rgba(255,255,255,.16); }
.aistrip b { display: block; font-size: 17px; color: #fff; margin-bottom: 6px; letter-spacing: -0.02em; }
.aistrip p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.7); margin: 0; }
@media (max-width: 600px) {
  .aistrip { grid-template-columns: 1fr; margin-top: 20px; }
  .aistrip > small { padding: 12px 18px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .aistrip > div { padding: 14px 18px; }
  .aistrip > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .aistrip b { font-size: 16px; }
  .aistrip p { font-size: 13.5px; }
}
.aistrip p { text-wrap: pretty; }
.aft4.asl { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 601px) and (max-width: 1000px) { .aft4.asl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .aft4.asl { grid-template-columns: none; } }
/* v11.71 히어로 졸업생 사진 인물별 위치 (0 아라 · 1 호이창 · 2 자몽 · 3 루얀 · 4 청하 · 5 하이오) */
.hcard img.hp0 { object-position: center 3%; }
.hcard img.hp5 { object-position: center 3%; }
.hcard img.hp4 { object-position: center 10%; }
@media (max-width: 600px) {
  .hcard.on img.hp0 { object-position: center 45%; }
  .hcard.on img.hp1 { object-position: center 0%; }
  .hcard.on img.hp3 { object-position: center 0%; }
  .hcard.on img.hp4 { object-position: center 14%; }
  .hcard.on img.hp5 { object-position: center 48%; }
}
/* v11.72 인용 띠: 겹침 없이 사라진 뒤 나타나기 */
#after .aqt .aqg > div { transition: opacity .25s, transform .25s; }
#after .aqt .aqg > div.on { transition: opacity .4s .3s, transform .4s .3s; }
/* v11.73 작품 라벨: 배경은 전공자와 같게, 비전공자는 글자색만 */
.ph .lab.nm, #proof .flow .col .lab.nm { background: rgba(0,0,0,.7) !important; color: #8FB8FF; }
/* v11.74 라벨 글자: 비전공자 흰색, 전공자 연한 흰색 */
.ph .lab.nm, #proof .flow .col .lab.nm { color: #fff; }
.ph .lab:not(.nm) { color: rgba(255,255,255,.62); }

/* v11.75 최근 데뷔 강조 — 인터뷰 섹션 한 줄 · 히어로 데뷔 배지 */
#grads .dby { display: inline-block; margin: 14px 0 0; padding: 5px 12px; border: 1px solid var(--blue); border-radius: 999px; color: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
#grads .dby + .lead { margin-top: 12px; }
.hcard .meta2 em { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 3px; background: var(--blue); color: #fff !important; font-weight: 700; font-size: 12px; line-height: 1.5; }
@media (max-width: 600px) { #grads .dby { font-size: 13px; padding: 4px 10px; } }

/* v11.76 작업 단가 — 비기너 삭제 · 국내 vs 해외 카드 분리 */
.tvs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-top: 20px; }
.tvs .tc { padding: 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.tvs small { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #8F98A6; }
.tvs b { display: block; font-size: 30px; font-weight: 700; color: #fff; margin: 8px 0 4px; letter-spacing: -0.02em; }
.tvs b span { font-size: 15px; color: #9EABBC; font-weight: 500; }
.tvs p { font-size: 14px; margin: 0; }
.tvs .vs { width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; letter-spacing: .02em; }
@media (max-width: 600px) {
  .tvs { gap: 8px; }
  .tvs .tc { padding: 16px 12px; }
  .tvs small { font-size: 11px; letter-spacing: 0; }
  .tvs b { font-size: 20px; margin: 6px 0 2px; }
  .tvs b span { display: block; font-size: 11.5px; }
  .tvs p { font-size: 12px; line-height: 1.4; }
  .tvs .vs { width: 34px; height: 34px; font-size: 11px; }
}

/* v11.77 01~04 카드 — 제목 1줄 · 내용 2줄 */
@media (max-width: 600px) { .perks.perks4 b { white-space: nowrap; letter-spacing: -0.03em; } .perks.perks4 p { white-space: nowrap; letter-spacing: -0.02em; } }

/* v11.79 왜 타투 — 원래 홈페이지 문구 통합 (해당되면 · 지금 배워야 · 합법화 4카드) */
.tierh + .perks.pk1 { margin-top: 20px; }
.tiersub { margin: 6px 0 0; font-size: 15px; color: #9EABBC; }
.legalhead + .perks.pk2 { margin-top: 36px; }
.perks.pk2 > div { background: rgba(42,125,225,.08); }
@media (max-width: 600px) { .tiersub { font-size: 13.5px; } .tierh + .perks.pk1 { margin-top: 16px; } .legalhead + .perks.pk2 { margin-top: 24px; } .tvs .tc p { white-space: nowrap; letter-spacing: -0.03em; font-size: 11.5px; } }
.tvs { align-items: stretch; } .tvs .vs { align-self: center; }

/* v11.80 AI 섹션 분리 · 직업 장점+단가+합법 섹션 */
.sec-job h2 + .perks.pk1 { margin-top: 36px; }
@media (max-width: 600px) { .sec-job h2 + .perks.pk1 { margin-top: 24px; } }

/* v11.81 배경 교체 — AI 어둡게 · 장점 밝게 · 진단 어둡게 */
#whynow.p-night .why3note b { color: #fff; }
#whynow.p-night .why3note p { color: #A9B1BE; }
#whynow.p-night .why3note, #whynow.p-night .why3note > div { border-color: rgba(255,255,255,.14) !important; }
#whynow.p-night .why5 .r { box-shadow: none !important; }
#whynow.p-night .why5 .arw span { color: #7E8896; }
.sec-job.p-paper .perks { background: #D5DAE1; }
.sec-job.p-paper .perks > div { background: #fff; }
.sec-job.p-paper .perks.pk2 > div { background: #EEF3FA; }
.sec-job.p-paper .perks b { color: var(--ink); }
.sec-job.p-paper .perks p { color: var(--sub); }
.sec-job.p-paper .perks .n { color: var(--blue); }
.sec-job.p-paper .tierh { color: var(--ink); }
.sec-job.p-paper .tiersub { color: var(--sub); }
.sec-job.p-paper .tvs .tc { background: #fff; border-color: #D5DAE1; }
.sec-job.p-paper .tvs small { color: #6B7480; }
.sec-job.p-paper .tvs b { color: var(--ink); }
.sec-job.p-paper .tvs b span, .sec-job.p-paper .tvs p { color: var(--sub); }
.sec-job.p-paper .tnote { color: #8A6A1F; }
.sec-job.p-paper .legalhead { border-top-color: #D5DAE1; }
#diag.panel.sheet.p-black { background: #0B0C0F; }
#diag.p-black .diag label { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #fff; }
#diag.p-black .diag .bx { border-color: #5F6672; }
@media (hover: hover) { #diag.p-black .diag label:hover { background: rgba(42,125,225,.12); border-color: var(--blue-hi); } }
#diag.p-black .diag label:has(input:checked) { background: rgba(42,125,225,.14); border-color: var(--blue-hi); box-shadow: none; }
#diag.p-black .diag .res { background: #131C2B; border: 1px solid rgba(255,255,255,.12); }

/* v11.82 장점 — 원래 홈페이지 체크 카드 디자인 · 눌러서 체크 */
.sec-job .mhint { margin: 28px 0 0; font-size: 14px; font-weight: 700; color: var(--blue); }
.merit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.merit .mc { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 20px; background: #25262B; border: 2px solid transparent; border-radius: 10px; box-shadow: 0 10px 24px rgba(15,23,42,.18); cursor: pointer; transition: border-color .25s ease, background .25s ease, transform .25s ease; -webkit-tap-highlight-color: transparent; }
.merit .mc input { display: none; }
.merit .t { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: #C9CED6; }
.merit .t i { display: inline-flex; color: #5F6672; transition: color .25s ease; }
.merit b { margin-top: 8px; font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.merit .mc:has(input:checked) { border-color: #2A8CE6; background: #1B2638; }
.merit .mc:has(input:checked) .t i { color: #2A8CE6; }
@media (hover: hover) { .merit .mc:hover { transform: translateY(-2px); } .merit .mc:hover .t i { color: #2A8CE6; } }
.sec-job .mres { margin: 18px 0 0; text-align: center; font-size: 16px; color: var(--sub); opacity: .45; transition: opacity .3s ease; }
.sec-job .mres b { color: var(--blue); font-size: 20px; }
.sec-job .mres.on { opacity: 1; color: var(--ink); font-weight: 700; }
@media (max-width: 600px) {
  .merit { gap: 10px; }
  .merit .mc { padding: 18px 8px; }
  .merit .t { font-size: 12.5px; gap: 4px; white-space: nowrap; letter-spacing: -0.03em; }
  .merit .t i svg { width: 14px; height: 14px; }
  .merit b { font-size: 14.5px; white-space: nowrap; letter-spacing: -0.04em; margin-top: 5px; }
  .sec-job .mhint { margin-top: 20px; font-size: 13px; }
  .sec-job .mres { font-size: 14px; } .sec-job .mres b { font-size: 17px; }
}
.sec-job .mres { margin-top: 26px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); opacity: .5; }
.sec-job .mres b { font-size: 26px; }
.sec-job .mres em { font-style: normal; color: var(--blue); }
.sec-job .mres.on { opacity: 1; }
@media (max-width: 600px) { .sec-job .mres { font-size: 17px; margin-top: 18px; } .sec-job .mres b { font-size: 20px; } }
/* 개수 인용구 — 제목 아래 lead 자리 */
.sec-job .lead.mres { margin: 18px 0 0; text-align: left; font-size: 18px; font-weight: 500; color: var(--sub); opacity: 1; letter-spacing: -0.01em; }
.sec-job .lead.mres b { display: inline-block; min-width: 1.6em; font-size: 22px; font-weight: 800; color: #9AA3AF; transition: color .25s ease, transform .25s ease; }
.sec-job .lead.mres.on b { color: var(--blue); }
.sec-job .lead.mres + .merit { margin-top: 24px; }
@media (max-width: 600px) { .sec-job .lead.mres { font-size: 15px; margin-top: 14px; } .sec-job .lead.mres b { font-size: 18px; } .sec-job .lead.mres + .merit { margin-top: 18px; } }

/* v11.83 장점 카드 아래 — 클릭 수에 따라 멘트 변경 */
.sec-job .mres { margin: 24px 0 0; text-align: center; font-size: 18px; font-weight: 700; color: #9AA3AF; opacity: 1; letter-spacing: -0.02em; }
.sec-job .mres.on { color: var(--ink); }
.sec-job .mres b { font-size: 22px; color: var(--blue); }
.sec-job .mres em { font-style: normal; color: var(--blue); }
.sec-job .mres.all { font-size: 21px; font-weight: 800; }
.sec-job .mres.pop { animation: mpop .35s ease; }
@keyframes mpop { 0% { transform: scale(.96); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 600px) { .sec-job .mres { font-size: 15px; margin-top: 18px; } .sec-job .mres b { font-size: 18px; } .sec-job .mres.all { font-size: 16px; } }

/* v11.84 현재 타투 업계 시장 — 원래 홈페이지 VS 카드 디자인 */
.mkt { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.mkt .mk { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(15,23,42,.10); text-align: center; }
.mkt .mkh { background: var(--blue); color: #fff; font-size: 17px; font-weight: 800; padding: 18px 12px; letter-spacing: -0.01em; }
.mkt .mk:last-of-type .mkh { background: #00337A; }
.mkt .mkb { padding: 26px 24px 24px; }
.mkt .mkp { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0; padding-bottom: 22px; border-bottom: 1px solid #E3E7EC; color: var(--blue); }
.mkt .mkp small { font-size: 15px; font-weight: 600; }
.mkt .mkp b { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.mkt .mkp i { font-style: normal; font-size: 26px; font-weight: 800; }
.mkt .mkd { margin: 20px 0 0; font-size: 15.5px; color: var(--sub); }
.mkt .mkd b { color: var(--ink); }
.mkt .mks { margin: 10px 0 0; font-size: 12.5px; color: #9AA3AF; }
.mkt .mkv { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; box-shadow: 0 6px 18px rgba(0,71,160,.35); z-index: 2; }
.mkt + .tnote { margin-top: 16px; }
@media (max-width: 600px) {
  .mkt { gap: 10px; }
  .mkt .mk { border-radius: 12px; }
  .mkt .mkh { font-size: 13.5px; padding: 11px 6px; }
  .mkt .mkb { padding: 16px 8px 14px; }
  .mkt .mkp { gap: 3px; padding-bottom: 14px; }
  .mkt .mkp small { font-size: 11px; }
  .mkt .mkp b { font-size: 25px; }
  .mkt .mkp i { font-size: 16px; }
  .mkt .mkd { margin-top: 12px; font-size: 12px; line-height: 1.5; letter-spacing: -0.02em; }
  .mkt .mks { font-size: 10.5px; line-height: 1.45; }
  .mkt .mkv { width: 38px; height: 38px; font-size: 12px; }
}
.mkt .mkd b, .mkt .mkp b { display: inline; }
.mkt .mkp b { color: var(--blue); }
.mkt .mk:last-of-type .mkp, .mkt .mk:last-of-type .mkp b { color: #00337A; }
.mkt .mkh { margin: 0; border-radius: 0; }
.mkt .mk { padding: 0 !important; border: 0 !important; }
.mkt .mkh { margin: 0 !important; }
.mkt .mkd b { font-size: inherit !important; font-weight: 700; letter-spacing: inherit; }
@media (max-width: 600px) { .mkt .mks { white-space: nowrap; letter-spacing: -0.04em; font-size: 10px; } }

/* v11.85 교육 철학 맨 아래 인용구 */
#mission .mgrad { margin: 40px 0 0; font-size: 22px; font-weight: 700; line-height: 1.55; color: #fff; letter-spacing: -0.02em; }
@media (max-width: 600px) { #mission .mgrad { margin-top: 28px; font-size: 17px; } }

/* v11.86 AI 그림 아래 — 요즘은 · 그런데 · 그래서 · 앞으로는 */
.aiflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; margin-top: 40px; }
.aiflow > div { position: relative; padding-top: 18px; border-top: 2px solid rgba(255,255,255,.16); }
.aiflow > div:last-child { border-top-color: var(--blue-hi); }
.aiflow small { display: block; font-size: 13px; font-weight: 800; color: var(--blue-hi); letter-spacing: .02em; }
.aiflow b { display: block; margin-top: 8px; font-size: 17.5px; font-weight: 700; color: #fff; line-height: 1.45; word-break: keep-all; }
.aiflow p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: #A9B1BE; word-break: keep-all; }
.aiflow br.mbr { display: none; }
@media (max-width: 900px) { .aiflow { grid-template-columns: 1fr 1fr; gap: 28px 24px; } }
@media (max-width: 600px) {
  .aiflow { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .aiflow > div { display: grid; grid-template-columns: 58px 1fr; column-gap: 10px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); }
  .aiflow > div:last-child { border-bottom: 1px solid rgba(255,255,255,.14); border-top-color: rgba(255,255,255,.14); }
  .aiflow small { grid-row: 1 / 3; padding-top: 3px; font-size: 12.5px; }
  .aiflow b { margin-top: 0; font-size: 15.5px; }
  .aiflow p { margin-top: 4px; font-size: 13px; line-height: 1.6; }
  .aiflow br.mbr { display: inline; }
  .aiflow > div:last-child b { color: var(--blue-hi); }
}
#whynow .aiflow { border-top: 0 !important; padding-top: 0 !important; }

/* v11.87 숫자 띠 — 라벨 삭제 · 숫자 먼저 · 숫자 강조색 */
.statband .why4 .g { margin-top: 0 !important; }
.statband .why4 .w4h { margin: 22px 0 0 !important; font-size: 17px; font-weight: 700; color: var(--sub); }
.statband .why4 .g b, .statband .why4 .g b .cnt { color: var(--blue) !important; }
@media (max-width: 600px) { .statband .why4 .w4h { margin-top: 16px !important; font-size: 14.5px; } }
.statband .why4 .w4h { color: var(--ink) !important; }
/* v11.88 AI 흐름 — PC는 연결어를 문장 앞에 붙임 */
.aiflow .cj { color: var(--blue-hi); }
@media (min-width: 601px) { .aiflow small { display: none; } .aiflow b { margin-top: 0; } .aiflow > div { padding-top: 20px; } }
@media (max-width: 600px) { .aiflow .cj { display: none; } }
@media (min-width: 601px) { .aiflow { grid-template-columns: 1fr 1fr; gap: 32px 56px; } .aiflow > div:nth-child(3) { border-top-color: rgba(255,255,255,.16); } }
@media (max-width: 600px) { .aiflow > div:last-child b { color: #fff; } .aiflow > div:last-child { border-top: 2px solid var(--blue-hi) !important; } }
/* 흐름 선 전부 동일 */
.aiflow > div:last-child { border-top: 2px solid rgba(255,255,255,.16) !important; }
@media (max-width: 600px) { .aiflow > div, .aiflow > div:last-child { border-top: 1px solid rgba(255,255,255,.14) !important; } }

/* v11.89 장점 멘트를 제목 아래로 · 시장 표 아래 선점 인용구 */
.sec-job .lead.mres { margin: 18px 0 0; text-align: left; font-size: 18px; font-weight: 600; color: #9AA3AF; animation: none; }
.sec-job .lead.mres.on { color: var(--ink); }
.sec-job .lead.mres b { font-size: 22px; color: var(--blue); }
.sec-job .lead.mres em { font-style: normal; color: var(--blue); }
.sec-job .lead.mres.all { font-size: 19px; font-weight: 800; }
.sec-job .lead.mres.pop { animation: mpop .35s ease; }
.mkq { margin: 28px 0 0; text-align: center; font-size: 22px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; }
.mkq b { font-weight: 800; color: var(--blue); }
@media (max-width: 600px) { .sec-job .lead.mres { font-size: 15px; } .sec-job .lead.mres b { font-size: 18px; } .sec-job .lead.mres.all { font-size: 15.5px; } .mkq { margin-top: 20px; font-size: 17px; } }
/* v11.90 AI 흐름 — 모바일 설명 1줄 */
.aiflow .dmo { display: none; }
@media (max-width: 600px) { .aiflow .dpc { display: none; } .aiflow .dmo { display: inline; white-space: nowrap; } }

/* v11.91 시간당 단가 화살표 — 위로 움직이는 애니메이션 */
.mkt .mkp i { display: inline-block; animation: mkup 1.4s ease-in-out infinite; }
.mkt .mk:last-of-type .mkp i { animation-delay: .2s; }
@keyframes mkup { 0%, 100% { transform: translateY(2px); opacity: .55; } 50% { transform: translateY(-6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mkt .mkp i { animation: none; } }

/* v11.92 합법화 섹션 분리(어둡게) · 진단 다시 밝게 */
.sec-legal .legalhead { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.sec-legal .perks.pk2 { margin-top: 36px; }
@media (max-width: 600px) { .sec-legal .perks.pk2 { margin-top: 24px; } }

/* v11.93 배경 통일 — 검정(사진) · 남색(글 위주 어두움) · 흰색 · 연회색(구분용) */
.statband.p-mist { background: #F5F6F8 !important; }
#whynow.p-night, .sec-legal.p-night, #mission.p-night, #after.p-night { background: #0B1A30 !important; background-image: none !important; }
#diag.panel.sheet.p-paper { background: #fff !important; }
.sec-course.panel.sheet { background: #F5F6F8 !important; }
#after.p-night .tdots, #after.p-night .adots { color: #8F98A6 !important; }
#after.p-night .tdots b, #after.p-night .adots b { color: #fff !important; }
.sec-job .tierh em { font-style: normal; color: var(--blue); }

/* v11.94 단가 섹션 분리 — 연회색 */
.sec-price.panel { background: #F5F6F8 !important; }
.sec-price h2 + .mkt { margin-top: 36px; }
@media (max-width: 600px) { .sec-price h2 + .mkt { margin-top: 24px; } }
.sec-price .lead + .mkt { margin-top: 32px; } @media (max-width:600px){ .sec-price .lead + .mkt { margin-top: 22px; } }
@media (max-width:600px){ .sec-price .lead { white-space: nowrap; letter-spacing: -0.02em; } }

/* v11.95 장점 — 위 인용구 고정 · 바뀌는 멘트는 카드 아래 가운데 */
.sec-job .mres.mbot { display: block; margin: 26px 0 0; text-align: center; font-size: 19px; font-weight: 700; color: #9AA3AF; letter-spacing: -0.02em; }
.sec-job .mres.mbot.on { color: var(--ink); }
.sec-job .mres.mbot b { font-size: 23px; color: var(--blue); }
.sec-job .mres.mbot em { font-style: normal; color: var(--blue); }
.sec-job .mres.mbot.all { font-size: 21px; font-weight: 800; }
.sec-job .lead + .merit { margin-top: 28px; }
@media (max-width: 600px) { .sec-job .mres.mbot { font-size: 15.5px; margin-top: 18px; } .sec-job .mres.mbot b { font-size: 18px; } .sec-job .mres.mbot.all { font-size: 16px; } .sec-job .lead + .merit { margin-top: 20px; } }

/* v11.96 장점 카드 — 모바일 누를 수 있다는 신호 */
.merit .mc:active { transform: scale(.97); }
.merit.hint .mc { animation: mhint 2.4s ease 2; }
.merit.hint .mc:nth-child(2) { animation-delay: .15s; } .merit.hint .mc:nth-child(3) { animation-delay: .3s; }
.merit.hint .mc:nth-child(4) { animation-delay: .45s; } .merit.hint .mc:nth-child(5) { animation-delay: .6s; } .merit.hint .mc:nth-child(6) { animation-delay: .75s; }
@keyframes mhint { 0%, 60%, 100% { border-color: transparent; transform: none; } 20% { border-color: #2A8CE6; transform: translateY(-3px); } }
.merit.hint .mc .t i { animation: mhint2 2.4s ease 2; }
@keyframes mhint2 { 0%, 60%, 100% { color: #5F6672; } 20% { color: #2A8CE6; } }
.sec-job .mres.mbot:not(.on) { color: var(--blue); opacity: .85; }

/* v11.97 진동 효과 — 히어로 파란 점 · 하단 바 빨간 점 */
@keyframes buzz {
  0%, 30%, 100% { transform: translate(0,0) rotate(0); }
  3% { transform: translate(-1.5px, 0) rotate(-8deg); } 6% { transform: translate(1.5px, 0) rotate(8deg); }
  9% { transform: translate(-1.5px, 0) rotate(-8deg); } 12% { transform: translate(1.5px, 0) rotate(8deg); }
  15% { transform: translate(-1px, 0) rotate(-4deg); } 18% { transform: translate(1px, 0) rotate(4deg); } 21% { transform: translate(0,0); }
}
@keyframes ringB { 0% { box-shadow: 0 0 0 0 rgba(106,160,255,.7); } 35% { box-shadow: 0 0 0 7px rgba(106,160,255,0); } 100% { box-shadow: 0 0 0 0 rgba(106,160,255,0); } }
@keyframes ringR { 0% { box-shadow: 0 0 0 0 rgba(255,90,90,.75); } 35% { box-shadow: 0 0 0 7px rgba(255,90,90,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,90,0); } }
.hero .kick i { display: inline-block; animation: buzz 2.4s ease-in-out infinite, ringB 2.4s ease-out infinite; }
.mbar .mbu .dot { display: inline-block; animation: buzz 2.4s ease-in-out infinite .6s, ringR 2.4s ease-out infinite .6s !important; }
@media (prefers-reduced-motion: reduce) { .hero .kick i, .mbar .mbu .dot { animation: none !important; } }

/* v11.98 모서리 통일 — 페이지 전체 직각 */
.merit .mc, .mkt .mk { border-radius: 0 !important; }

/* v11.99 점 — 떨림 없이 빛이 퍼지는 효과 */
@keyframes glowB { 0% { box-shadow: 0 0 0 0 rgba(106,160,255,.65), 0 0 0 0 rgba(106,160,255,.35); } 70% { box-shadow: 0 0 6px 8px rgba(106,160,255,0), 0 0 12px 14px rgba(106,160,255,0); } 100% { box-shadow: 0 0 0 0 rgba(106,160,255,0), 0 0 0 0 rgba(106,160,255,0); } }
@keyframes glowR { 0% { box-shadow: 0 0 0 0 rgba(255,90,90,.7), 0 0 0 0 rgba(255,90,90,.35); } 70% { box-shadow: 0 0 6px 8px rgba(255,90,90,0), 0 0 12px 14px rgba(255,90,90,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,90,0), 0 0 0 0 rgba(255,90,90,0); } }
.hero .kick i { animation: glowB 2s ease-out infinite !important; transform: none !important; }
.mbar .mbu .dot { animation: glowR 2s ease-out infinite .5s !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .hero .kick i, .mbar .mbu .dot { animation: none !important; } }

/* v12.00 네이버 리뷰 그래프 — 섹션 도착 시 막대 올라가고 숫자 카운트 */
#naver .nkw .bar i { transition: width 1.1s cubic-bezier(.2,.8,.2,1); }

/* v12.01 장점 카드 안내 — 파란 테두리가 한 장씩 옮겨 감 (파도 효과 제거) */
.merit.hint .mc, .merit.hint .mc .t i { animation: none !important; }
.merit .mc.spot { border-color: #2A8CE6; }
.merit .mc.spot .t i { color: #2A8CE6; }

/* v12.02 단가 카드 — 1시간 강조 */
.mkt .mkp small b { font-weight: 800; }
.mkt .mkb .mks { margin-top: 18px; }
@media (max-width: 600px) { .mkt .mkb .mks { margin-top: 12px; } }
.mkt .mkp { flex-wrap: wrap; }
.mkt .mkp small { flex: 0 0 100%; text-align: center; margin-bottom: 6px; font-size: 15px; }
.mkt .mkp small b { font-size: inherit !important; color: inherit !important; font-weight: 800; letter-spacing: 0; line-height: inherit; }
@media (max-width: 600px) { .mkt .mkp small { font-size: 12px; margin-bottom: 4px; } }
@media (max-width:600px){ .mkq { white-space: nowrap; font-size: min(16px, 3.85vw); letter-spacing: -0.03em; } }
@media (max-width:600px){ .mkt .mks { font-size: min(10px, 2.65vw) !important; } }

/* v12.03 장점 카드 — 남색으로 통일 */
.merit .mc { background: #0B1A30; box-shadow: 0 10px 24px rgba(11,26,48,.22); }
.merit .mc:has(input:checked) { background: #16294A; }

/* v12.04 합법화 카드 — PC 2×2 · 설명 한 줄 */
@media (min-width: 601px) {
  .sec-legal .perks.pk2 { grid-template-columns: 1fr 1fr; }
  .sec-legal .perks.pk2 > div { padding: 26px 30px; }
  .sec-legal .perks.pk2 b { font-size: 18px; }
  .sec-legal .perks.pk2 p { font-size: 15px; white-space: nowrap; }
  .sec-legal .perks.pk2 br.mbr { display: none; }
}

/* v12.05 합법화 — 박스 없이 흰 줄선 목록 (AI 흐름과 같은 결) */
.lgf { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 36px; }
.lgf > div { display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.16); }
.lgf > div:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.16); }
.lgf small { grid-row: 1 / 3; padding-top: 3px; font-size: 13px; font-weight: 800; color: var(--blue-hi); }
.lgf b { font-size: 17.5px; font-weight: 700; color: #fff; }
.lgf p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: #A9B1BE; word-break: keep-all; }
@media (max-width: 600px) {
  .lgf { grid-template-columns: 1fr; margin-top: 24px; }
  .lgf > div { grid-template-columns: 34px 1fr; padding: 14px 0; }
  .lgf > div:nth-last-child(2) { border-bottom: 0; }
  .lgf b { font-size: 15.5px; }
  .lgf p { margin-top: 3px; font-size: 13px; white-space: nowrap; letter-spacing: -0.02em; }
}
/* 합법화 — 번호와 제목 한 줄 · 설명 2줄 */
.lgf > div { display: block; }
.lgf b .no { display: inline-block; margin-right: 10px; font-size: 14px; font-weight: 800; color: var(--blue-hi); }
.lgf p { margin-top: 8px; }
@media (max-width: 600px) { .lgf b .no { margin-right: 8px; font-size: 13px; } .lgf p { white-space: normal; margin-top: 5px; } }
@media (min-width:601px){ .lgf br.mbr { display: none; } .lgf p { white-space: nowrap; } }

/* v12.06 합법화 — 예전 장점 표 디자인 (3×2, 칸 사이 가는 선) */
.lgt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.1); margin-top: 36px; }
.lgt > div { background: #0F203A; padding: 26px 26px 28px; }
.lgt .n { display: block; font-size: 12px; font-weight: 700; color: var(--blue-hi); }
.lgt b { display: block; margin: 10px 0 6px; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.lgt p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #8F98A6; white-space: nowrap; letter-spacing: -0.01em; }
.lgt br.mbr { display: none; }
@media (max-width: 1100px) and (min-width: 601px) { .lgt p { white-space: normal; } }
@media (max-width: 600px) {
  .lgt { grid-template-columns: 1fr 1fr; margin-top: 24px; }
  .lgt > div { padding: 16px 14px 18px; }
  .lgt .n { font-size: 11px; }
  .lgt b { margin: 6px 0 4px; font-size: 15px; white-space: nowrap; letter-spacing: -0.03em; }
  .lgt p { font-size: 12px; line-height: 1.55; letter-spacing: -0.03em; }
  .lgt br.mbr { display: inline; }
}
/* 합법화 모바일 — 번호와 제목 한 줄 */
@media (max-width: 600px) {
  .lgt > div { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: baseline; }
  .lgt .n { grid-row: 1; font-size: 11.5px; }
  .lgt b { grid-row: 1; margin: 0; font-size: 14px; letter-spacing: -0.04em; }
  .lgt p { grid-column: 1 / 3; margin-top: 5px; }
}
/* 합법화 — 번호 없이 마지막 단어 강조 (원래 홈페이지 방식) */
.lgt b em { font-style: normal; color: var(--blue-hi); }
.lgt b { margin-top: 0 !important; }
@media (max-width: 600px) { .lgt > div { display: block; } .lgt b { font-size: 15px; letter-spacing: -0.03em; } .lgt p { margin-top: 5px; } }

/* v12.07 합법화 — 출처 링크 */
.srclink { display: inline-block; margin-left: 8px; font-size: .88em; font-weight: 600; color: var(--blue-hi); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 600px) { .srclink { display: block; margin: 6px 0 0; } }
.lgfoot { margin-top: 24px; } .lgfoot .textlink { color: #fff; } @media (max-width:600px){ .lgfoot { margin-top: 18px; } }
.lgfoot { margin-top: 20px !important; } .lgfoot .textlink { margin: 0 !important; } @media (max-width:600px){ .lgfoot { margin-top: 16px !important; } }
.lgfoot .textlink { white-space: nowrap; } @media (max-width:600px){ .lgfoot .textlink { font-size: min(14px, 3.6vw); letter-spacing: -0.02em; } }

/* v12.08 PC 떠 있는 상담 버튼 (모바일은 하단 바) */
.fabpc { display: none; }
@media (min-width: 601px) {
  .fabpc { display: flex; align-items: center; gap: 12px; position: fixed; right: 28px; bottom: 28px; z-index: 60; }
  .fabpc .fbub { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: #0B1A30; color: #C9D3E1; font-size: 14px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.25); white-space: nowrap; }
  .fabpc .fbub b { color: #fff; }
  .fabpc .fbub .dot { width: 7px; height: 7px; border-radius: 50%; background: #FF5A5A; animation: glowR 2s ease-out infinite; }
  .fabpc .fab { display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 22px 0 18px; background: #FEE500; color: #191919; font-size: 16px; font-weight: 800; border-radius: 999px; box-shadow: 0 10px 28px rgba(0,0,0,.28); cursor: pointer; transition: transform .2s ease; }
  .fabpc .fab em { font-style: normal; }
  .fabpc .fab:hover { transform: translateY(-2px); }
}
#diag .ctas .btn.kakao { width: 100%; }
@media (min-width: 601px) { .fabpc { opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; } .fabpc.show { opacity: 1; transform: none; pointer-events: auto; } }

/* v12.09 모바일 하단 바 — 메인은 히어로 인터뷰 카드가 지나간 뒤 등장 */
@media (max-width: 600px) {
  html.mb-wait .mbar { transform: translateY(110%); }
  html.mb-anim .mbar { transition: transform .35s ease; }
  html.mb-wait .mbar.show { transform: none; }
}

.lgfoot .textlink { text-decoration: none; }

/* v12.10 모바일 히어로 — 카드 아래에 상담 버튼 · 기수 모집 문구 (PC처럼) */
@media (max-width: 600px) {
  .hero .hg3 { display: block !important; order: 9 !important; width: 100%; margin-top: 18px; }
  .hero .hg3 .ctas { display: flex !important; gap: 8px; }
  .hero .hg3 .ctas .btn { flex: 1; display: flex !important; align-items: center; justify-content: center; gap: 6px; height: 50px; font-size: 15px; padding: 0 8px; }
  .hero .hg3 .ctas .btn.kakao { display: flex !important; }
  .hero .urg1 { display: flex !important; justify-content: center; margin-top: 12px; font-size: 12.5px; }
}
@media (max-width: 600px) {
  .hero .hg3 .ctas { flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; }
  .hero .hg3 .ctas .btn { height: 50px !important; min-height: 50px; flex: 1 1 0 !important; width: auto !important; margin: 0 !important; border-radius: 4px; font-weight: 700; }
  .hero .hg3 .ctas .btn.ghost { border: 1px solid rgba(255,255,255,.35) !important; color: #fff; background: transparent; }
}
@media (max-width: 600px) { .hero .hg3 .ctas .btn.ghost { display: none !important; } }

/* v12.11 교육 철학 — 순서 카드 1·2 색 단계 */
#mission .order > div.on:nth-child(1) { background: #17407A; border-color: #2A5CA3; }
#mission .order > div.on:nth-child(2) { background: #102C52; border-color: #1C3F6E; }
#mission .order .mgrad { margin: 28px 0 0; font-size: 19px; background: none; border: 0; padding: 0; }
@media (max-width: 600px) { #mission .order .mgrad { margin-top: 24px; font-size: 17px; } }
#mission .order .mgrad br.mbr { display: inline !important; }
#mission .mgrad .gmo { display: none; }
@media (max-width: 600px) { #mission .mgrad .gpc { display: none; } #mission .mgrad .gmo { display: inline; white-space: nowrap; } #mission .order .mgrad { font-size: min(16px, 4vw); letter-spacing: -0.03em; } }
#mission .order .mgrad { white-space: nowrap; font-size: 18px; letter-spacing: -0.03em; }
@media (max-width: 600px) { #mission .order .mgrad { font-size: min(16px, 4vw); } }
#mission .order .mgrad { white-space: normal; font-size: 19px; line-height: 1.5; } @media (max-width:600px){ #mission .order .mgrad { font-size: 17px; } }
#mission .order .mgrad { white-space: nowrap; font-size: 15.5px; letter-spacing: -0.03em; } @media (max-width:600px){ #mission .order .mgrad { font-size: min(13.5px, 3.45vw); } }
#mission .order .mgrad { text-align: center; }
/* v12.12 교육 철학 PC — 왼쪽 글과 오른쪽 카드 높이 맞춤 */
@media (min-width: 1101px) {
  #mission .order { margin-top: 47px !important; gap: 8px !important; row-gap: 8px !important; }
  #mission .order .mgrad { margin-top: 21px !important; }
}
@media (min-width: 1101px) { #mission .order .mgrad { margin-top: 13px !important; } }

/* v12.13 자립까지 — 모바일 카드 설명 2줄 · 이유 인용 이름 붙이기 */
#after .amo { display: none; }
@media (max-width: 600px) {
  #after .apc { display: none; }
  #after .amo { display: inline; white-space: nowrap; }
  #after .aft4 p { font-size: min(14px, 3.6vw) !important; letter-spacing: -0.03em; }
}
#after .aqg p { display: inline; }
#after .aqg span { display: inline; margin-left: 8px; white-space: nowrap; }
@media (max-width: 600px) { #after .amo { display: block !important; } #after .amo i { display: block; font-style: normal; white-space: nowrap; } }
#after .aqg p { display: inline !important; }
#after .aqg span { display: inline !important; margin: 0 0 0 8px !important; }

/* v12.14 자립까지 — 이유 박스 왼쪽 파란 선 제거 · 카드 흰 바탕 제거 */
#after .aqs, #after .aqt { border-left: 0 !important; box-shadow: none !important; }
#after .aft4 > div { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#after .aft4 > div .ht { color: #fff !important; border-color: rgba(255,255,255,.16) !important; }
#after .aft4 > div .ht .n { color: var(--blue-hi) !important; }
#after .aft4 > div p, #after .aft4 > div p i { color: #A9B1BE !important; }
/* v12.15 자립까지 카드 — 살짝 밝은 남색 판 (합법화 표와 같은 결) */
#after .aft4 > div { background: #0F203A !important; }

/* v12.16 이런 곳은 피하세요 — 문제점만 나열 */
.avoid { margin-top: 36px; border-top: 2px solid var(--ink); }
.avoid > div { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; padding: 20px 4px; border-bottom: 1px solid #E3E7EC; }
.avoid .x { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; background: #F1E4E4; color: #C23B3B; font-style: normal; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.avoid b { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.avoid p { margin: 5px 0 0; font-size: 15px; color: var(--sub); line-height: 1.55; }
@media (min-width: 901px) { .avoid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; } }
@media (max-width: 600px) { .avoid { margin-top: 24px; } .avoid > div { grid-template-columns: 30px 1fr; column-gap: 10px; padding: 16px 0; } .avoid .x { width: 24px; height: 24px; font-size: 11px; } .avoid b { font-size: 15.5px; } .avoid p { font-size: 13px; } }
.avoid.av2 small { grid-column: 2; font-size: 12.5px; font-weight: 800; color: #C23B3B; letter-spacing: .04em; }
.avoid.av2 b { grid-column: 2; margin-top: 3px; }
.avoid.av2 .x { margin-top: 6px; }
@media (max-width: 600px) { .avoid.av2 small { font-size: 11.5px; } .avoid.av2 b { font-size: 15.5px; } }
/* 피하세요 — ✕ 없이 분류 라벨을 왼쪽 칸에 */
.avoid.av2 > div { grid-template-columns: 84px 1fr; align-items: baseline; column-gap: 12px; }
.avoid.av2 small { grid-column: 1; grid-row: 1; font-size: 13px; }
.avoid.av2 b { grid-column: 2; grid-row: 1; margin-top: 0; }
@media (max-width: 600px) { .avoid.av2 > div { grid-template-columns: 62px 1fr; column-gap: 8px; } .avoid.av2 small { font-size: 12px; } }
.avoid.av2 small { display: flex; justify-content: space-between; align-items: baseline; }
.avoid.av2 small::after { content: "›"; font-size: 18px; font-weight: 400; color: #B6BEC9; line-height: 1; }
@media (max-width: 600px) { .avoid.av2 small::after { font-size: 16px; } }
/* v12.17 고르기 전에(흰색) → 과정 · 금액(회색) 경계 또렷하게 */
.sec-course.panel.sheet { background: #EEF1F5 !important; border-radius: 0 !important; margin-top: 0 !important; box-shadow: none !important; }

/* v12.18 고르기 전에 — 시스템 / 검증 / 결과 묶음 */
.avg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin-top: 36px; }
.avg .g { border-top: 2px solid var(--ink); }
.avg h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 16px 0 12px; }
.avg h3 b { font-size: 18px; font-weight: 800; color: #C23B3B; }
.avg h3 span { font-size: 13px; color: var(--sub); font-weight: 500; }
.avg ul { list-style: none; margin: 0; padding: 0; }
.avg li { padding: 14px 0; border-top: 1px solid #E3E7EC; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.45; }
@media (max-width: 900px) { .avg { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 600px) { .avg { margin-top: 24px; gap: 20px; } .avg h3 { padding: 12px 0 8px; } .avg h3 b { font-size: 16px; } .avg h3 span { font-size: 12px; } .avg li { padding: 11px 0; font-size: 15px; } }
.avg h3 b { color: var(--blue) !important; }

/* v12.19 확인하세요 — 누르면 저희 답 펼침 */
.avg li { padding: 0 !important; }
.avg .aq { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; -webkit-tap-highlight-color: transparent; }
.avg .aq i { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; background: #EEF3FA; }
.avg .aq i::before, .avg .aq i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: var(--blue); border-radius: 1px; transition: transform .25s ease; }
.avg .aq i::after { transform: rotate(90deg); }
.avg li.open .aq i::after { transform: rotate(0deg); }
.avg .aa { display: none; margin: -4px 0 0; padding: 0 0 14px; font-size: 14.5px; font-weight: 600; color: var(--blue); line-height: 1.55; }
.avg li.open .aa { display: block; }
@media (hover: hover) { .avg .aq:hover span { color: var(--blue); } }
@media (max-width: 600px) { .avg .aq { padding: 11px 0; font-size: 15px; } .avg .aa { font-size: 13.5px; padding-bottom: 12px; } .avg .aq i { width: 20px; height: 20px; } }
.avend { margin: 44px 0 0; text-align: center; font-size: 20px; font-weight: 700; line-height: 1.6; color: var(--ink); letter-spacing: -0.02em; }
.avend b { color: var(--blue); }
@media (max-width: 600px) { .avend { margin-top: 30px; font-size: 16px; } }
/* v12.20 모바일 — 상단 수강 신청 · 히어로 진단 버튼 다시 표시 */
@media (max-width: 600px) {
  .ndiag { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
  .hero .hg3 .ctas .btn.ghost { display: flex !important; }
}
/* v12.21 자립까지 — 이유 띠 남색으로 */
#after .aqs, #after .aqt { background: #16294A !important; }
#after .aqh { color: var(--blue-hi) !important; }
#after .aqg p, #after .aqg p * { color: #fff !important; }
#after .aqg span { color: #8F98A6 !important; }
#after .aqs [class*="dot"] i, #after .aqs .dots i, #after .aqs .aqd i { background: rgba(255,255,255,.25); }
#after .aqs .aqd i.on { background: var(--blue-hi) !important; }

/* v12.22 고르기 전에 — 모바일은 강사·수업·결과 탭 */
.avwrap > input { position: absolute; opacity: 0; pointer-events: none; }
.avtabs { display: none; }
@media (max-width: 600px) {
  .avtabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; border-bottom: 2px solid var(--ink); }
  .avtabs label { padding: 12px 0; text-align: center; font-size: 15.5px; font-weight: 800; color: #9AA3AF; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #avt1:checked ~ .avtabs label[for="avt1"], #avt2:checked ~ .avtabs label[for="avt2"], #avt3:checked ~ .avtabs label[for="avt3"] { color: #fff; background: var(--blue); }
  .avwrap .avg { margin-top: 0 !important; }
  .avwrap .avg .g { display: none; border-top: 0; }
  #avt1:checked ~ .avg .g:nth-child(1), #avt2:checked ~ .avg .g:nth-child(2), #avt3:checked ~ .avg .g:nth-child(3) { display: block; }
  .avwrap .avg h3 { padding: 14px 0 6px; }
  .avwrap .avg h3 b { display: none; }
  .avwrap .avg h3 span { font-size: 13px; }
}

/* v12.23 고르기 전에 — 표 바깥선 */
@media (min-width: 601px) {
  .avg { gap: 0 !important; border: 1px solid #C9D0DA; }
  .avg .g { border-top: 0 !important; padding: 0 26px 6px; }
  .avg .g + .g { border-left: 1px solid #E3E7EC; }
  .avg .g h3 { padding-top: 20px; }
}
@media (max-width: 600px) {
  .avtabs { border: 1px solid #C9D0DA; border-bottom: 2px solid var(--ink); }
  .avwrap .avg { border: 1px solid #C9D0DA; border-top: 0; padding: 0 16px 4px; }
}

/* v12.24 고르기 전에 — 답 항상 보이기 · 결과→수료 후 */
.avg li { padding: 14px 0 !important; }
.avg b.aq { display: block; width: auto; padding: 0; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; cursor: default; }
.avg .aa { display: block !important; margin: 6px 0 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--blue); line-height: 1.55; }
@media (max-width: 600px) { .avg li { padding: 12px 0 !important; } .avg b.aq { font-size: 15px; } .avg .aa { font-size: 13px; margin-top: 4px; } }
/* 고르기 전에 — 두 번째 줄은 저희 답이 아니라 「왜 확인해야 하는지」 설명 (회색) */
.avg .aa { color: var(--sub) !important; font-weight: 400 !important; }
@media (max-width:600px){ .avwrap .avg h3 { display: none !important; } .avwrap .avg ul li:first-child { border-top: 0; } }
/* 고르기 전에 — 설명·마무리 한 줄 */
.avg .aa, .avend { white-space: nowrap; }
@media (max-width: 600px) { .avg .aa { font-size: min(13px, 3.35vw) !important; letter-spacing: -0.02em; } .avend { font-size: min(17px, 4.3vw) !important; } }

/* v12.25 메인 과정 · 금액 — 커리큘럼 그래프 + 금액 */
.mbars { margin-top: 40px; background: #fff; border: 1px solid #D5DAE1; padding: 28px 28px 22px; }
.mbars .row, .mbars .phase, .mbars .scale { grid-template-columns: 150px 1fr 150px !important; }
.mbars .row { margin-top: 14px; }
.mbars i { border-radius: 2px !important; height: 34px; }
.mbars .pr { font-style: normal; text-align: right; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.mbars .row:nth-of-type(4) .pr { color: var(--blue); }
.mbars .pr small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--mute); }
.mbars .pr .gift { display: inline-block; margin-top: 5px; padding: 2px 7px; background: #F3EBDD; color: #7A5A24; font-size: 11px; font-weight: 700; }
.mbars .legend { display: flex; gap: 18px; margin-top: 14px; font-size: 12.5px; color: var(--sub); }
.mbars .legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.sec-course .apply > div { border-radius: 0 !important; }
@media (max-width: 600px) {
  .mbars { margin-top: 24px; padding: 18px 14px 14px; }
  .mbars .row { grid-template-columns: 1fr auto !important; grid-template-areas: "n p" "c c"; gap: 6px 10px !important; margin-top: 16px; }
  .mbars .row b { grid-area: n; } .mbars .row .cells { grid-area: c; } .mbars .row .pr { grid-area: p; font-size: 20px; }
  .mbars .phase, .mbars .scale { grid-template-columns: 1fr !important; }
  .mbars .phase > span, .mbars .scale > span { display: none; }
  .mbars i { height: 20px; }
  .mbars .phase div { font-size: 11.5px; }
  .mbars .legend { font-size: 11.5px; gap: 12px; }
  .sec-course .apply { grid-template-columns: 1fr !important; gap: 0 !important; border-top: 1px solid #D5DAE1; }
  .sec-course .apply > div { display: grid; grid-template-columns: 34px 1fr; padding: 14px 0 !important; background: none; border: 0; border-bottom: 1px solid #D5DAE1; }
  .sec-course .apply > div::before { grid-row: 1 / 3; font-size: 16px !important; margin: 1px 0 0 !important; }
  .sec-course .apply b { font-size: 15px; margin-bottom: 3px; }
  .sec-course .apply p { font-size: 13px; line-height: 1.5; }
}
/* 금액 — 12개월 할부 월 금액 */
.mbars .pr small { color: var(--blue) !important; font-weight: 700 !important; }
.mbars .mnote { margin: 10px 0 0; font-size: 12px; color: var(--mute); }
@media (max-width: 600px) { .mbars .mnote { font-size: 11px; } }
.mbars .pr .mo { display: block; white-space: nowrap; }
.mbars .pr .mo i { font-style: normal; font-size: .6em; font-weight: 700; margin-right: 2px; vertical-align: 2px; }
.mbars .pr small { color: var(--mute) !important; font-weight: 500 !important; white-space: nowrap; }
.mbars .row:nth-of-type(4) .pr .mo { color: var(--blue); }

/* v12.26 금액 — 16주 한 막대 · 150 + 150 + 150 */
.ptrack { margin-top: 36px; background: #fff; border: 1px solid #D5DAE1; padding: 26px 26px 20px; }
.ptrack .pseg { display: flex; gap: 10px; }
.ptrack .sg { min-width: 0; }
.ptrack .hd { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; white-space: nowrap; }
.ptrack .hd b { font-size: 16px; font-weight: 800; color: var(--ink); }
.ptrack .hd span { font-size: 12.5px; color: var(--mute); }
.ptrack .cl { display: flex; gap: 3px; }
.ptrack .cl i { flex: 1; height: 34px; border-radius: 2px; }
.ptrack .s1 i { background: #2A7DE1; } .ptrack .s2 i { background: #5E9BEB; } .ptrack .s3 i { background: #0B3D91; }
.ptrack .pr { margin-top: 10px; white-space: nowrap; }
.ptrack .pr b { display: block; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.ptrack .pr small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--blue); font-weight: 700; }
.ptrack .psum { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0; margin-top: 22px; border-top: 1px solid #E3E7EC; }
.ptrack .psum > div { padding: 14px 0 0; }
.ptrack .psum > div + div { padding-left: 18px; border-left: 1px solid #E3E7EC; }
.ptrack .psum span { display: block; font-size: 12.5px; color: var(--sub); }
.ptrack .psum b { display: block; margin-top: 2px; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.ptrack .psum .on b { color: var(--blue); }
.ptrack .psum em { display: inline-block; margin-top: 4px; padding: 2px 7px; background: #F3EBDD; color: #7A5A24; font-style: normal; font-size: 11px; font-weight: 700; }
.ptrack .mnote { margin: 16px 0 0; font-size: 12px; color: var(--mute); line-height: 1.6; }
@media (max-width: 600px) {
  .ptrack { margin-top: 22px; padding: 16px 12px 14px; }
  .ptrack .pseg { gap: 5px; }
  .ptrack .hd { flex-direction: column; gap: 0; }
  .ptrack .hd b { font-size: 14px; } .ptrack .hd span { font-size: 11px; }
  .ptrack .cl { gap: 2px; } .ptrack .cl i { height: 22px; }
  .ptrack .pr b { font-size: 15px; } .ptrack .pr small { font-size: 10.5px; }
  .ptrack .psum { grid-template-columns: 1fr 1fr 1.3fr; margin-top: 16px; }
  .ptrack .psum > div + div { padding-left: 10px; }
  .ptrack .psum span { font-size: 11px; } .ptrack .psum b { font-size: 17px; }
  .ptrack .psum em { font-size: 9.5px; padding: 1px 5px; }
  .ptrack .mnote { font-size: 11px; }
}
/* 금액 — 12개월 월 금액 먼저 */
.ptrack .pr small { color: var(--mute) !important; font-weight: 500 !important; }
.ptrack .psum small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--mute); }
@media (max-width: 600px) { .ptrack .pr b { font-size: 13.5px; letter-spacing: -0.04em; } .ptrack .psum b { font-size: 15px; letter-spacing: -0.03em; } .ptrack .psum small { font-size: 11px; } }

/* v12.27 고르기 전에 — 표 선 진하게 · 누가/어떻게/언제까지 머리칸 배경 */
.avg li { border-top-color: #CBD2DC !important; }
@media (min-width: 601px) {
  .avg { border: 1px solid #8C97A6 !important; }
  .avg .g + .g { border-left: 1px solid #8C97A6 !important; }
  .avg .g h3 { margin: 0 -26px 4px !important; padding: 16px 26px 14px !important; background: #E8EEF7; border-bottom: 1px solid #8C97A6; }
  .avg .g ul li:first-child { border-top: 0 !important; }
}
@media (max-width: 600px) {
  .avtabs { border: 1px solid #8C97A6 !important; border-bottom: 2px solid var(--ink) !important; background: #E8EEF7; }
  .avtabs label { color: #5B6675; }
  .avtabs label + label { border-left: 1px solid #C3CCD8; }
  .avwrap .avg { border-color: #8C97A6 !important; }
}
.sec-course .lead .psub { display: block; margin-top: 6px; font-size: 14px; color: var(--mute); font-weight: 500; }
@media (max-width: 600px) { .sec-course .lead .psub { font-size: min(13px, 3.3vw); white-space: nowrap; } }

/* v12.28 과정 — 수업 시간 표(금액 박스 안) */
.ptrack .psch { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; margin-top: 18px; border-top: 1px solid #E3E7EC; padding-top: 14px; column-gap: 0; }
.ptrack .psch .h { grid-row: span 2; padding-right: 22px; margin-right: 22px; border-right: 1px solid #E3E7EC; font-size: 14px; font-weight: 800; color: var(--ink); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.ptrack .psch .h span { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--sub); }
.ptrack .psch .r { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; grid-column: 2 / 4; font-size: 15px; }
.ptrack .psch .r b { font-weight: 800; color: var(--ink); width: 52px; }
.ptrack .psch .r span { color: var(--sub); width: 52px; }
.ptrack .psch .r em { font-style: normal; font-weight: 700; color: var(--blue); }
@media (max-width: 600px) {
  .ptrack .psch { margin-top: 14px; padding-top: 12px; }
  .ptrack .psch .h { padding-right: 12px; margin-right: 12px; font-size: 13px; }
  .ptrack .psch .h span { font-size: 11px; }
  .ptrack .psch .r { font-size: 13.5px; gap: 8px; }
  .ptrack .psch .r b, .ptrack .psch .r span { width: 44px; }
}

/* v12.29 고르기 전에 — 머리칸 입문 색(#2A7DE1) */
@media (min-width: 601px) {
  .avg .g h3 { background: #2A7DE1 !important; border-bottom-color: #2A7DE1 !important; }
  .avg .g h3 b { color: #fff !important; }
}
@media (max-width: 600px) {
  .avtabs { background: #2A7DE1 !important; }
  .avtabs label { color: rgba(255,255,255,.72) !important; }
  .avtabs label + label { border-left-color: rgba(255,255,255,.3) !important; }
  #avt1:checked ~ .avtabs label[for="avt1"], #avt2:checked ~ .avtabs label[for="avt2"], #avt3:checked ~ .avtabs label[for="avt3"] { color: #fff !important; background: #0B3D91 !important; }
}
@media (min-width: 601px) {
  .avg .g h3 { position: relative; justify-content: center; text-align: center; }
  .avg .g + .g h3::before { content: ""; position: absolute; left: -1px; top: 0; bottom: -1px; width: 1px; background: #fff; }
}
@media (max-width: 600px) { .avtabs { border-bottom: 1px solid #2A7DE1 !important; border-color: #2A7DE1 !important; } }

/* v12.30 고르기 전에 — 외곽선 없애고 배경으로 */
.avg { border: 0 !important; }
.avg .g { background: #F1F4F8; }
.avg li { border-top-color: #DCE2EA !important; }
@media (min-width: 601px) {
  .avg { gap: 0 2px !important; }
  .avg .g + .g { border-left: 0 !important; }
  .avg .g + .g h3::before { display: none; }
  .avg .g { padding-bottom: 10px !important; }
}
@media (max-width: 600px) {
  .avtabs { border: 0 !important; }
  .avwrap .avg { border: 0 !important; background: #F1F4F8; }
  .avtabs label + label { border-left: 0 !important; }
  .avtabs { gap: 2px; background: #fff !important; }
  .avtabs label { background: #2A7DE1; }
}

/* v12.31 고르기 전에 — 흰 카드 + 바깥 그림자, 머리칸 틈 없음 */
.avwrap { position: relative; background: #fff; box-shadow: 0 10px 34px rgba(15,32,58,.12), 0 2px 8px rgba(15,32,58,.06); }
.avg .g, .avwrap .avg { background: #fff !important; }
.avg li { border-top-color: #E3E7EC !important; }
@media (min-width: 601px) { .avg { gap: 0 !important; } .avwrap { margin-top: 36px; } .avwrap .avg { margin-top: 0 !important; } }
@media (max-width: 600px) { .avtabs { gap: 0 !important; margin-top: 0 !important; } .avwrap { margin-top: 24px; } }

/* v12.32 고르기 전에 — 모바일 탭 안내 모션 · 목록 전환 */
@keyframes avFlash { 0%,100% { background: #2A7DE1; color: rgba(255,255,255,.72); } 40% { background: #5E9BEB; color: #fff; box-shadow: inset 0 -3px 0 #fff; } }
@keyframes avIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .avwrap.avhint .avtabs label[for="avt2"] { animation: avFlash .9s ease .3s 2; }
  .avwrap.avhint .avtabs label[for="avt3"] { animation: avFlash .9s ease .75s 2; }
  .avwrap.avused .avg .g { animation: avIn .3s ease; }
}
/* v12.33 PC 머리칸 단계 색: 누가 연파랑 → 어떻게 파랑 → 언제까지 남색 */
@media (min-width: 601px) {
  .avg .g:nth-child(1) h3 { background: #5E9BEB !important; }
  .avg .g:nth-child(2) h3 { background: #2A7DE1 !important; }
  .avg .g:nth-child(3) h3 { background: #0B3D91 !important; }
}
@media (min-width: 601px) { .avg .g h3 { border-bottom: 0 !important; margin-bottom: 5px !important; } }

/* v12.34 고르기 전에 — 체크 아이콘(누르지 않음, 칸 색 따라감) */
.avg .g:nth-child(1) { --ck: #5E9BEB; } .avg .g:nth-child(2) { --ck: #2A7DE1; } .avg .g:nth-child(3) { --ck: #0B3D91; }
.avg li { position: relative; padding-left: 32px !important; }
.avg li::before { content: ""; position: absolute; left: 0; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: var(--ck, #2A7DE1); }
.avg li::after { content: ""; position: absolute; left: 7px; top: 19px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 600px) {
  .avg li { padding-left: 28px !important; }
  .avg li::before { top: 13px; width: 18px; height: 18px; }
  .avg li::after { left: 6px; top: 16.5px; width: 4.5px; height: 8.5px; }
  .avg .aa { font-size: min(13px, 3.15vw) !important; }
}

/* v12.35 로드맵 — 단계별 장르 · 합계 칸 포함 내용 */
.ptrack .gn { margin: 8px 0 0; padding-right: 10px; font-size: 13px; color: var(--sub); line-height: 1.45; }
.ptrack .psum small { color: var(--sub) !important; }
@media (max-width: 600px) {
  .ptrack .gn { font-size: 10.5px; padding-right: 4px; letter-spacing: -0.03em; line-height: 1.4; }
  .ptrack .psum small { font-size: 10.5px !important; letter-spacing: -0.03em; }
}

/* v12.36 로드맵 — 수업 시간 3칸(합계 줄과 같은 틀) · 입문/정규 색 교환 */
.ptrack .s1 i { background: #5E9BEB !important; } .ptrack .s2 i { background: #2A7DE1 !important; }
.ptrack .psc3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; margin-top: 16px; border-top: 1px solid #E3E7EC; }
.ptrack .psc3 > div { padding: 14px 0 2px; }
.ptrack .psc3 > div + div { padding-left: 18px; border-left: 1px solid #E3E7EC; }
.ptrack .psc3 span { display: block; font-size: 12.5px; color: var(--sub); }
.ptrack .psc3 b { display: block; margin-top: 2px; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.ptrack .psc3 small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--sub); }
@media (max-width: 600px) {
  .ptrack .psc3 { grid-template-columns: 1fr 1fr 1.3fr; }
  .ptrack .psc3 > div + div { padding-left: 10px; }
  .ptrack .psc3 span { font-size: 11px; } .ptrack .psc3 b { font-size: 15px; letter-spacing: -0.03em; } .ptrack .psc3 small { font-size: 10.5px; letter-spacing: -0.03em; }
}
.ptrack .psc3 + .mnote { margin-top: 18px; }
@media (max-width: 600px) { .ptrack .s3 .gn { padding-right: 0; letter-spacing: -0.06em; font-size: 10px; } .ptrack .gn { letter-spacing: -0.05em; } }
.ptrack .gn .nw { white-space: nowrap; }

/* v12.37 로드맵 카드 3장(기존 홈페이지 카드 참고) */
.rmc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.rmc .c { --cc: #2A7DE1; background: #fff; border-top: 4px solid var(--cc); padding: 22px 22px 20px; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(15,32,58,.06); }
.rmc .c1 { --cc: #5E9BEB; } .rmc .c2 { --cc: #2A7DE1; } .rmc .c3 { --cc: #0B3D91; }
.rmc .t { display: flex; align-items: center; gap: 8px; }
.rmc .t b { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.rmc .t span { padding: 2px 8px; font-size: 12px; font-weight: 700; color: #fff; background: var(--cc); }
.rmc .wk { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: var(--cc); }
.rmc .c1 .wk { color: #2A7DE1; }
.rmc .rb { display: flex; gap: 2px; margin-top: 10px; }
.rmc .rb i { flex: 1; height: 10px; background: #E3E7EC; }
.rmc .rb i.on { background: var(--cc); }
.rmc .cmp { margin: 8px 0 0; font-size: 13px; color: var(--sub); }
.rmc .gn { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #E3E7EC; font-size: 14px; color: var(--ink); line-height: 1.5; }
.rmc .gn .nw { white-space: nowrap; }
.rmc .pz { margin-top: auto; padding-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rmc .pz b { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.rmc .c3 .pz b { color: var(--blue); }
.rmc .pz em { padding: 2px 7px; background: #F3EBDD; color: #7A5A24; font-style: normal; font-size: 11px; font-weight: 700; }
.ptrack.pt2 { margin-top: 16px; padding-top: 6px; }
.ptrack.pt2 .psc3 { margin-top: 0; border-top: 0; }
@media (max-width: 900px) { .rmc { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 600px) {
  .rmc { margin-top: 22px; }
  .rmc .c { padding: 16px 16px 14px; }
  .rmc .t b { font-size: 17px; } .rmc .t span { font-size: 11px; }
  .rmc .wk { font-size: 14px; margin-top: 6px; }
  .rmc .rb i { height: 8px; }
  .rmc .gn { font-size: 13px; margin-top: 10px; padding-top: 10px; }
  .rmc .pz { padding-top: 10px; } .rmc .pz b { font-size: 20px; }
  .ptrack.pt2 { margin-top: 10px; padding-top: 2px; }
}
@media (min-width: 601px) { .ptrack.pt2 .psc3 { grid-template-columns: 1fr 1fr 1fr; } }

/* v12.38 로드맵 카드 — 단계별 색 막대(계단식) + 단계마다 150만원 */
.rmc .rb2 { display: flex; gap: 4px; margin-top: 12px; }
.rmc .rb2 .sg { min-width: 0; }
.rmc .rb2 .cl { display: flex; gap: 2px; }
.rmc .rb2 .cl i { flex: 1; height: 12px; background: #E3E7EC; }
.rmc .rb2 .a .cl i { background: #5E9BEB; } .rmc .rb2 .b .cl i { background: #2A7DE1; } .rmc .rb2 .c .cl i { background: #0B3D91; }
.rmc .rb2 small { display: block; margin-top: 6px; font-size: 12px; color: var(--sub); line-height: 1.35; white-space: nowrap; }
.rmc .rb2 small b { display: block; font-weight: 700; color: var(--ink); }
@media (max-width: 600px) { .rmc .rb2 .cl i { height: 10px; } .rmc .rb2 small { font-size: 11.5px; } }
.rmc .rb2 .sa .cl i { background: #5E9BEB; } .rmc .rb2 .sb .cl i { background: #2A7DE1; } .rmc .rb2 .sc .cl i { background: #0B3D91; }
/* 카드 사이 화살표 */
.rmc { gap: 30px; }
.rmc .c { position: relative; }
.rmc .c1::after, .rmc .c2::after { content: ""; position: absolute; top: 50%; right: -21px; width: 10px; height: 10px; margin-top: -5px; border: solid #8C97A6; border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); }
@media (max-width: 900px) {
  .rmc { gap: 26px; }
  .rmc .c1::after, .rmc .c2::after { top: auto; bottom: -19px; right: auto; left: 50%; margin: 0 0 0 -5px; transform: rotate(135deg); }
}
.rmc .wk span { color: var(--sub); font-weight: 600; }
.rmc .wk .nw2 { color: inherit; font-weight: inherit; white-space: nowrap; } @media (max-width:600px){ .rmc .wk { font-size: min(14px, 3.5vw); letter-spacing: -0.03em; } }

/* v12.39 로드맵 카드 — 클래스 제목 칸을 각 색 배경으로 */
.rmc .c { border-top: 0; padding-top: 0; }
.rmc .t { margin: 0 -22px 14px; padding: 14px 22px; background: var(--cc); }
.rmc .t b { color: #fff; }
.rmc .t span { background: rgba(255,255,255,.22); color: #fff; }
.rmc .wk { margin-top: 0; }
@media (max-width: 600px) { .rmc .t { margin: 0 -16px 12px; padding: 12px 16px; } }
/* 카드 사이 + */
.rmc .c1::after, .rmc .c2::after { content: "+" !important; border: 0 !important; transform: none !important; width: 24px !important; height: 24px !important; margin-top: -12px !important; right: -27px !important; font-size: 26px; font-weight: 700; line-height: 22px; text-align: center; color: #8C97A6; }
@media (max-width: 900px) { .rmc .c1::after, .rmc .c2::after { top: auto !important; bottom: -26px !important; right: auto !important; left: 50% !important; margin: 0 0 0 -12px !important; } }
.rmc .who { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
@media (max-width: 600px) { .rmc .who { font-size: 15px; margin-bottom: 6px; } }

/* v12.40 클래스 로드맵 — 기존 홈페이지 YES 카드 구조 (질문 → YES ▼ → 클래스 카드) */
.ysr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 36px; }
.ysr .col { --cc: #2A7DE1; display: flex; flex-direction: column; position: relative; }
.ysr .k1 { --cc: #5E9BEB; } .ysr .k2 { --cc: #2A7DE1; } .ysr .k3 { --cc: #0B3D91; }
.ysr .q { padding: 18px 16px; background: #2B313B; color: #fff; text-align: center; font-size: 16px; font-weight: 700; line-height: 1.45; letter-spacing: -0.02em; border-radius: 10px; }
.ysr .yes { position: relative; display: flex; justify-content: center; padding: 30px 0 34px; }
.ysr .yes::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 10px; border-left: 2px dotted #9AA3AF; }
.ysr .yes::after { content: ""; position: absolute; left: 50%; bottom: 2px; margin-left: -6px; border: 6px solid transparent; border-top: 8px solid #9AA3AF; border-bottom: 0; }
.ysr .yes span { position: relative; z-index: 1; padding: 6px 18px; border-radius: 99px; background: var(--cc); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }
.ysr .cd { flex: 1; display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 26px rgba(15,32,58,.08); }
.ysr .hd { padding: 16px; background: var(--cc); color: #fff; text-align: center; }
.ysr .hd b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.ysr .hd span { display: block; margin-top: 2px; font-size: 12.5px; opacity: .85; }
.ysr .wk { padding: 16px; background: #F1F3F6; text-align: center; min-height: 76px; box-sizing: border-box; }
.ysr .wk b { display: block; font-size: 18px; font-weight: 800; color: var(--ink); }
.ysr .wk small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--sub); }
.ysr .wr { list-style: none; margin: 0; padding: 4px 18px; }
.ysr .wr li { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0; font-size: 14px; }
.ysr .wr li + li { border-top: 1px solid #E3E7EC; }
.ysr .wr b { width: 78px; text-align: right; color: var(--cc); font-weight: 800; }
.ysr .k1 .wr b { color: #2A7DE1; }
.ysr .wr span { width: 90px; color: var(--sub); }
.ysr .gn { margin: 0; padding: 14px 16px; background: #2B313B; color: #E6E9EE; text-align: center; font-size: 13.5px; line-height: 1.5; }
.ysr .pz { margin-top: auto; padding: 14px 16px 16px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.ysr .pz b { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.ysr .k3 .pz b { color: var(--blue); }
.ysr .pz em { padding: 2px 7px; background: #F3EBDD; color: #7A5A24; font-style: normal; font-size: 11px; font-weight: 700; }
.ysr .k1 .cd::after, .ysr .k2 .cd::after { content: "+"; position: absolute; right: -27px; bottom: 30%; width: 20px; text-align: center; font-size: 26px; font-weight: 700; color: #8C97A6; }
@media (max-width: 900px) {
  .ysr { grid-template-columns: 1fr; gap: 36px; margin-top: 22px; }
  .ysr .q { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; text-align: left; font-size: 14.5px; border-radius: 10px 10px 0 0; }
  .ysr .q br { display: none; }
  .ysr .yes { display: none; }
  .ysr .cd { border-radius: 0 0 12px 12px; }
  .ysr .hd { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 11px 14px; }
  .ysr .hd b { display: inline; font-size: 17px; } .ysr .hd span { display: inline; }
  .ysr .wk { min-height: 0; padding: 12px; } .ysr .wk b { font-size: 16px; }
  .ysr .wr li { padding: 9px 0; font-size: 13.5px; }
  .ysr .gn { padding: 11px 14px; font-size: 13px; }
  .ysr .pz { padding: 10px 14px 12px; } .ysr .pz b { font-size: 21px; }
  .ysr .k1 .cd::after, .ysr .k2 .cd::after { right: auto; left: 50%; bottom: -33px; margin-left: -10px; }
}
.ysr .q .qy { display: none; }
@media (max-width: 900px) { .ysr .q .qy { display: inline-block; flex: none; padding: 4px 11px; border-radius: 99px; background: var(--cc); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 800; } }
.ysr .k1 .cd, .ysr .k2 .cd { position: relative; overflow: visible; }
.ysr .cd .hd { border-radius: 12px 12px 0 0; } .ysr .cd .pz { border-radius: 0 0 12px 12px; }
@media (max-width: 900px) { .ysr .cd .hd { border-radius: 0; } }
.ysr .hd b, .ysr .hd span { color: #fff !important; }

/* v12.41 로드맵 YES 카드 — 모바일도 기존 홈페이지처럼 3열 유지 */
@media (max-width: 900px) {
  .ysr { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
  .ysr .q { display: block !important; text-align: center !important; border-radius: 8px !important; padding: 10px 6px !important; font-size: 12px !important; line-height: 1.4; }
  .ysr .q br { display: inline !important; }
  .ysr .q .qy { display: none !important; }
  .ysr .yes { display: flex !important; padding: 16px 0 20px !important; }
  .ysr .yes span { padding: 4px 11px; font-size: 10.5px; }
  .ysr .cd { border-radius: 8px !important; }
  .ysr .cd .hd { border-radius: 8px 8px 0 0 !important; display: block !important; padding: 10px 4px !important; }
  .ysr .hd b { display: block !important; font-size: 13.5px !important; } .ysr .hd span { display: block !important; font-size: 10.5px; }
  .ysr .wk { padding: 10px 4px !important; min-height: 62px !important; } .ysr .wk b { font-size: 13.5px !important; } .ysr .wk small { font-size: 9.5px; letter-spacing: -0.04em; }
  .ysr .wr { padding: 2px 6px; }
  .ysr .wr li { flex-direction: column; gap: 2px; padding: 8px 0 !important; font-size: 11px !important; }
  .ysr .wr b, .ysr .wr span { width: auto; text-align: center; }
  .ysr .gn { padding: 9px 5px !important; font-size: 10.5px !important; line-height: 1.45; }
  .ysr .pz { padding: 9px 4px 11px !important; flex-direction: column; gap: 4px; } .ysr .pz b { font-size: 16px !important; }
  .ysr .pz em { font-size: 9px; padding: 2px 4px; text-align: center; }
  .ysr .k1 .cd::after, .ysr .k2 .cd::after { left: auto !important; right: -14px !important; bottom: 45% !important; margin: 0 !important; width: 14px; font-size: 18px; }
}
.ysr .q { display: flex !important; align-items: center; justify-content: center; min-height: 86px; box-sizing: border-box; }
@media (max-width: 900px) { .ysr .q { min-height: 66px; } .ysr .q .qt { display: block; } }
@media (max-width: 900px) { .ysr .q { min-height: 76px !important; } }
.ysr .pz small { font-size: 13px; color: var(--sub); font-weight: 600; }
.ysr .pz em { flex-basis: 100%; text-align: center; max-width: max-content; margin: 0 auto; }
@media (max-width: 900px) { .ysr .pz small { font-size: 10.5px; } }
.ysr .pz { display: block !important; text-align: center; }
.ysr .pz b { display: inline; }
.ysr .pz small { display: inline; margin-left: 6px; }
.ysr .pz em { display: table !important; margin: 6px auto 0 !important; max-width: none; flex-basis: auto; }
@media (max-width: 900px) { .ysr .pz b { display: block; } .ysr .pz small { display: block; margin: 2px 0 0; } .ysr .pz em { margin-top: 5px !important; font-size: 8.5px; line-height: 1.3; } }
.ysr .gn { flex: 1; display: flex; align-items: center; justify-content: center; } .ysr .pz { margin-top: 0 !important; min-height: 74px; box-sizing: border-box; } @media (max-width: 900px) { .ysr .pz { min-height: 78px; } }
/* v12.42 로드맵 카드 라운딩 제거(각진 모서리) */
.ysr .q, .ysr .cd, .ysr .cd .hd, .ysr .cd .pz { border-radius: 0 !important; }

/* v12.43 로드맵 — 질문 상자 밝게 · 모바일 글씨 최소 12px */
.ysr .q { background: #fff !important; color: var(--ink) !important; border: 1.5px solid #2B313B; }
@media (max-width: 900px) {
  .ysr { gap: 10px !important; }
  .ysr .q { font-size: 12.5px !important; padding: 10px 4px !important; min-height: 84px !important; letter-spacing: -0.04em; }
  .ysr .hd b { font-size: 14px !important; letter-spacing: -0.03em; } .ysr .hd span { font-size: 12px !important; }
  .ysr .wk { padding: 10px 2px !important; } .ysr .wk b { font-size: 14px !important; letter-spacing: -0.03em; }
  .ysr .wk small { font-size: 12px !important; letter-spacing: -0.06em; line-height: 1.3; }
  .ysr .wr { padding: 2px 4px !important; }
  .ysr .wr li { font-size: 12px !important; }
  .ysr .gn { font-size: 12px !important; padding: 10px 4px !important; letter-spacing: -0.03em; }
  .ysr .pz b { font-size: 17px !important; } .ysr .pz small { font-size: 12px !important; }
  .ysr .pz em { font-size: 12px !important; padding: 3px 4px !important; line-height: 1.3; }
  .ysr .k1 .cd::after, .ysr .k2 .cd::after { right: -11px !important; width: 12px; font-size: 16px; }
}
.ysr .wk .nw { white-space: nowrap; }
/* v12.44 YES카드: 클래스색 외곽선 · + 위치 총과정 줄 · 카드 폭 축소 · 배우는 장르 라벨 */
.ysr { max-width: 900px; margin-left: auto !important; margin-right: auto !important; gap: 48px !important; }
.ysr .cd { border: 2px solid var(--cc); box-shadow: none; }
.ysr .k1 .cd::after, .ysr .k2 .cd::after { content: none !important; }
.ysr .wk { position: relative; white-space: nowrap; }
.ysr .k1 .wk::after, .ysr .k2 .wk::after { content: "+"; position: absolute; top: 50%; right: -38px; transform: translateY(-50%); width: 26px; height: 26px; line-height: 24px; border-radius: 50%; background: #fff; border: 1.5px solid #9AA3AF; color: #5B6573; font-size: 18px; font-weight: 700; text-align: center; z-index: 2; }
.ysr .gn { flex-direction: column; gap: 4px; }
.ysr .gn .gl { display: block; font-size: 11.5px; font-weight: 700; color: #9FB4D3; letter-spacing: 0.02em; }
@media (max-width: 900px) {
  .ysr { gap: 22px !important; padding: 0 4px; }
  .ysr .wk { padding: 10px 2px !important; min-height: 64px !important; }
  .ysr .k1 .wk::after, .ysr .k2 .wk::after { right: -22px; width: 20px; height: 20px; line-height: 18px; font-size: 14px; }
  .ysr .gn .gl { font-size: 12px; }
}
/* v12.45 YES카드 모바일 줄바꿈 정리 */
.ysr .nw { white-space: nowrap; }
@media (max-width: 900px) {
  .ysr { gap: 14px !important; padding: 0; }
  .ysr .q { padding: 8px 2px !important; }
  .ysr .gn { padding: 9px 2px !important; }
  .ysr .k1 .wk::after, .ysr .k2 .wk::after { right: -18px; width: 20px; height: 20px; line-height: 18px; font-size: 14px; }
}
/* v12.46 YES카드: 질문상자 클래스색 테두리 · 카드 외곽선 제거 · + 단순화 · 증정 분리 */
.ysr .q { border: 2px solid var(--cc) !important; }
.ysr .cd { border: 0 !important; box-shadow: none !important; }
.ysr .k1 .wk::after, .ysr .k2 .wk::after { background: none !important; border: 0 !important; border-radius: 0 !important; width: 20px !important; height: auto !important; line-height: 1 !important; right: -34px !important; font-size: 26px !important; color: #8C97A6 !important; }
.ysr .pz { display: flex !important; flex-direction: column; align-items: center; justify-content: center; }
.ysr .pz small { margin: 2px 0 0 !important; display: block; }
.ygift { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--sub); }
.ygift b { display: inline-block; margin-left: 4px; padding: 3px 10px; background: #F3EBDD; color: #7A5A24; font-weight: 700; }
@media (max-width: 900px) {
  .ysr .k1 .wk::after, .ysr .k2 .wk::after { right: -14px !important; width: 14px !important; font-size: 18px !important; }
  .ysr .pz { min-height: 64px !important; }
  .ygift { margin-top: 16px; font-size: 12.5px; }
}
.ysr .gn .gt { display: block; }
/* v12.47 장르 전체 · 질문 3줄 · 수강 등록 시 혜택 */
.ysr .gn { padding: 16px 14px !important; line-height: 1.6 !important; }
.ysr .gn small { font-size: 12px; color: #9FB4D3; }
.ysr .q { min-height: 104px !important; }
.bnlead { margin: 10px 0 0; color: var(--sub); font-size: 15px; }
.bnf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.bnf > div { background: #fff; padding: 22px 20px; box-shadow: 0 8px 26px rgba(15,32,58,.07); }
.bnf i { display: block; font-style: normal; font-size: 13px; font-weight: 800; color: var(--blue); }
.bnf b { display: block; margin-top: 8px; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.bnf p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--sub); }
@media (max-width: 900px) {
  .ysr .gn { padding: 10px 3px !important; font-size: 12px !important; line-height: 1.5 !important; }
  .ysr .gn small { font-size: 12px; }
  .ysr .q { min-height: 76px !important; }
  .bnlead { font-size: 14px; }
  .bnf { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .bnf > div { padding: 16px 14px; }
  .bnf b { font-size: 15px; } .bnf p { font-size: 13px; }
  .bnf p br { display: none; }
}
/* v12.48 로드맵 가운데 정렬 · 핵심 문구 분리 */
.rmwrap { max-width: 900px; margin: 0 auto; text-align: center; }
.rmwrap .lead { margin-left: auto; margin-right: auto; }
.rmwrap .ysr { text-align: left; }
.rmwrap .ysr .q, .rmwrap .ysr .hd, .rmwrap .ysr .wk, .rmwrap .ysr .gn, .rmwrap .ysr .pz { text-align: center; }
.rmwrap .ptrack { text-align: left; }
.rmwrap .mkey { margin: 18px 0 0; font-size: 17px; font-weight: 800; color: var(--ink); text-align: center; letter-spacing: -0.02em; }
.rmwrap .mkey + .mnote { margin-top: 4px !important; text-align: center; font-size: 14px; color: var(--sub); }
@media (max-width: 900px) { .rmwrap .mkey { font-size: 15px; } .rmwrap .mkey + .mnote { font-size: 13px; } }
/* v12.49 섹션 폭 900 통일 · 과정 칸 색 구분 */
.rmwrap2 { max-width: 900px; margin: 0 auto; }
.rmwrap2 > .eyebrow, .rmwrap2 > h3, .rmwrap2 > .bnlead { text-align: center; }
.ysr .k1 .wk { background: #EAF2FD !important; }
.ysr .k2 .wk { background: #E1EDFC !important; }
.ysr .k3 .wk { background: #E0E7F3 !important; }
.rmwrap2 > .eyebrow { display: table !important; margin-left: auto !important; margin-right: auto !important; }
/* v12.50 장르 글씨 축소 · 총 금액 아래 표로 */
.ysr .gn { font-size: 13px !important; line-height: 1.65 !important; letter-spacing: -0.01em; }
.ysr .gn small { font-size: 12px; }
.ptot { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 16px; border-top: 1px solid #E3E7EC; }
.ptot > div { padding: 14px 0 2px; }
.ptot > div + div { padding-left: 18px; border-left: 1px solid #E3E7EC; }
.ptot span { display: block; font-size: 12.5px; color: var(--sub); }
.ptot b { display: block; margin-top: 2px; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.ptot small { display: block; margin-top: 1px; font-size: 13px; font-weight: 700; color: var(--blue); }
.ptnote { margin: 10px 0 0; font-size: 12.5px; color: var(--sub); }
@media (max-width: 900px) {
  .ysr .gn { font-size: 11px !important; line-height: 1.6 !important; padding: 10px 4px !important; }
  .ysr .gn small { font-size: 11px; }
  .ptot > div + div { padding-left: 10px; }
  .ptot span { font-size: 11px; } .ptot b { font-size: 15px; letter-spacing: -0.03em; } .ptot small { font-size: 12px; }
  .ptnote { font-size: 11.5px; line-height: 1.5; }
}
@media (max-width: 900px) { .ptrack.pt2 .psc3 { grid-template-columns: 1fr 1fr 1fr !important; } .ysr .pz { min-height: 56px !important; } }
.ysr .pz { min-height: 64px; }
/* v12.51 신청 방법 아래 방문 상담 선택 안내 */
.apvisit { margin: 18px 0 0; padding: 14px 16px; background: #fff; text-align: center; font-size: 14.5px; color: var(--sub); }
.apvisit b { color: var(--ink); }
.apvisit .textlink { margin-left: 6px; }
@media (max-width: 900px) { .apvisit { font-size: 13px; } .apvisit .textlink { display: inline-block; margin: 4px 0 0; } }
/* v12.52 주차 칸 높이 통일(마스터 3줄 기준) */
.ysr .wr { display: flex; flex-direction: column; min-height: 132px; box-sizing: border-box; }
.ysr .wr li { flex: 1; }
@media (max-width: 900px) { .ysr .wr { min-height: 150px; } }
/* v12.53 주차 줄 PC도 세로(주차 위 · 내용 아래) */
.ysr .wr li { flex-direction: column; gap: 2px; padding: 10px 0; }
.ysr .wr b, .ysr .wr span { width: auto; text-align: center; }
.ysr .wr { min-height: 186px; }
@media (max-width: 900px) { .ysr .wr { min-height: 150px; } }
/* v12.54 금액 먼저, 수업 시간 다음 */
.ptrack.pt2 .ptot { margin-top: 0; border-top: 0; }
.ptrack.pt2 .ptnote + .psc3 { margin-top: 16px !important; border-top: 1px solid #E3E7EC !important; }
/* v12.55 주수 크게 */
.ysr .wk b { font-size: 24px !important; letter-spacing: -0.02em; }
@media (max-width: 900px) { .ysr .wk b { font-size: 17px !important; } }
/* v12.56 카드 주수 단순화 + 합계 줄 */
.ysr .wk { min-height: 0 !important; padding: 16px 8px !important; }
.ysum { margin: 22px 0 0; padding: 16px; background: #0B3D91; color: #C9D8F0; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.ysum span { color: #fff; font-weight: 700; }
.ysum b { margin-left: 4px; color: #fff; font-size: 19px; font-weight: 800; }
@media (max-width: 900px) {
  .ysr .wk { padding: 10px 4px !important; }
  .ysum { margin-top: 14px; padding: 12px 8px; font-size: 13px; }
  .ysum b { font-size: 15px; }
}
.ysum small { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 500; color: #AFC4E6; }
@media (max-width: 900px) { .ysum small { font-size: 12px; } }
/* v12.57 누가·어떻게·언제까지 보조 용어 · 안내 · 다음 버튼 */
.avtabs label small, .avg .g h3 small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; opacity: .8; }
.avg .g h3 small { display: inline; margin: 0 0 0 6px; font-size: 12.5px; }
.avtip, .avnext { display: none; }
@media (max-width: 600px) {
  .avtabs label { line-height: 1.25 !important; padding-top: 9px !important; padding-bottom: 8px !important; height: auto !important; }
  .avtip { display: block; margin: 18px 0 -14px; text-align: center; font-size: 13px; font-weight: 700; color: #2A7DE1; }
  .avnext { display: block; margin: 6px 14px 14px; padding: 12px; background: #EEF4FD; color: #0B3D91; text-align: center; font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none; }
  .avused ~ .avtip, .avwrap.avused + .avtip { display: none; }
}
.avg .g h3 small { color: #fff !important; opacity: .85; }
/* v12.58 신청 방법 아이콘 */
.apply.apico > div::before { content: none !important; display: none !important; }
.apic { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: #EAF2FD; }
.apic svg { width: 26px; height: 26px; fill: none; stroke: #0047A0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .sec-course .apply.apico > div { grid-template-columns: 48px 1fr !important; align-items: center; }
  .sec-course .apic { grid-row: 1 / 3; width: 38px; height: 38px; margin: 0; }
  .sec-course .apic svg { width: 20px; height: 20px; }
}
/* v12.58 탭 번호 · 안 본 탭 알림 점 · 본 탭 체크 */
.avtabs label { position: relative; }
.avtabs .avn { display: none; }
.avtabs .avd { display: none; }
@media (max-width: 600px) {
  .avtabs .avn { display: inline-block; margin-right: 4px; font-style: normal; font-size: 11px; font-weight: 800; opacity: .75; }
  .avtabs .avd { display: block; position: absolute; top: 7px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #FF4D4F; box-shadow: 0 0 0 2px rgba(255,255,255,.9); animation: avDot 1.4s ease-in-out infinite; }
  .avtabs label.seen .avd { display: none; }
  .avtabs label.seen::after { content: "✓"; position: absolute; top: 4px; right: 8px; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.85); }
  @keyframes avDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
}
/* v12.59 신청 흐름: 아이콘 + 한 줄 설명 */
.apflow { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin-top: 28px; }
.apflow > div { flex: 1; max-width: 240px; text-align: center; }
.apflow .apic { margin: 0 auto 12px; width: 64px; height: 64px; }
.apflow .apic svg { width: 30px; height: 30px; }
.apflow b { display: block; font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.apflow p { margin: 4px 0 0; font-size: 14px; color: var(--sub); }
.apflow .apar { align-self: flex-start; margin-top: 18px; font-size: 26px; color: #9AA3AF; }
@media (max-width: 900px) {
  .apflow { gap: 2px; margin-top: 20px; }
  .apflow .apic { width: 50px; height: 50px; margin-bottom: 8px; }
  .apflow .apic svg { width: 24px; height: 24px; }
  .apflow b { font-size: 14.5px; }
  .apflow p { font-size: 12px; letter-spacing: -0.03em; }
  .apflow .apar { margin-top: 12px; font-size: 22px; }
}
/* v12.59 탭 색 구분 (휴대폰) */
@media (max-width: 600px) {
  .avtabs label[for="avt1"] { background: #5E9BEB !important; }
  .avtabs label[for="avt2"] { background: #2A7DE1 !important; }
  .avtabs label[for="avt3"] { background: #0B3D91 !important; }
  .avtabs label { color: #fff !important; opacity: .5; transition: opacity .2s; }
  #avt1:checked ~ .avtabs label[for="avt1"], #avt2:checked ~ .avtabs label[for="avt2"], #avt3:checked ~ .avtabs label[for="avt3"] { opacity: 1; }
  #avt1:checked ~ .avtabs label[for="avt1"] { background: #5E9BEB !important; } #avt2:checked ~ .avtabs label[for="avt2"] { background: #2A7DE1 !important; } #avt3:checked ~ .avtabs label[for="avt3"] { background: #0B3D91 !important; }
  #avt1:checked ~ .avtabs label[for="avt1"]::before, #avt2:checked ~ .avtabs label[for="avt2"]::before, #avt3:checked ~ .avtabs label[for="avt3"]::before { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: inherit; z-index: 2; }
  #avt1:checked ~ .avtabs label[for="avt1"]::before { border-top-color: #5E9BEB; } #avt2:checked ~ .avtabs label[for="avt2"]::before { border-top-color: #2A7DE1; } #avt3:checked ~ .avtabs label[for="avt3"]::before { border-top-color: #0B3D91; }
}
.apflow .apic { background: #fff; box-shadow: 0 6px 18px rgba(15,32,58,.08); } .apflow .apar { font-weight: 700; color: #7F8B9B; }
@media (max-width: 600px) { .avtabs label.seen::after { content: none !important; } }
.avtabs .avd { display: none !important; }
/* v12.60 탭 꼬리 항상 보이게 */
@media (max-width: 600px) {
  .avwrap, .avtabs, .avtabs label { overflow: visible !important; }
  .avtabs { position: relative; z-index: 3; }
  #avt1:checked ~ .avtabs label[for="avt1"], #avt2:checked ~ .avtabs label[for="avt2"], #avt3:checked ~ .avtabs label[for="avt3"] { z-index: 4; }
  #avt1:checked ~ .avtabs label[for="avt1"]::before, #avt2:checked ~ .avtabs label[for="avt2"]::before, #avt3:checked ~ .avtabs label[for="avt3"]::before { bottom: -8px !important; border-width: 8px 8px 0 !important; margin-left: -8px !important; display: block !important; }
}
@media (max-width: 600px) { #avt1:checked ~ .avtabs label[for="avt1"]::before, #avt2:checked ~ .avtabs label[for="avt2"]::before, #avt3:checked ~ .avtabs label[for="avt3"]::before { bottom: -10px !important; border-width: 10px 11px 0 !important; margin-left: -11px !important; } }
/* v12.61 컨벤션 슬라이드 → 링크, 네이버 후기 카드 제거 */
.tmore { margin-top: 18px; text-align: right; }
@media (max-width: 900px) { .tmore { text-align: left; margin-top: 14px; } }
.nrcs.nrc1 { display: block !important; overflow: visible !important; }
.nrcs.nrc1 .nrc { width: auto !important; max-width: none !important; flex: none !important; }
/* v12.62 합법화 표 4칸(2x2) */
.lgt { grid-template-columns: 1fr 1fr !important; }
/* v12.63 단가 마진 기준 박스 */
.mgn { max-width: 760px; margin: 22px auto 0; padding: 16px 20px; background: #fff; border-left: 4px solid #0047A0; box-shadow: 0 6px 20px rgba(15,32,58,.06); }
.mgn b { display: block; font-size: 13px; font-weight: 800; color: #0047A0; letter-spacing: 0.02em; }
.mgn p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--sub); }
.mgn em { font-style: normal; font-weight: 800; color: var(--ink); }
@media (max-width: 900px) { .mgn { margin-top: 16px; padding: 13px 14px; } .mgn p { font-size: 13px; } }
/* v12.64 단가 시간당 표기 · 마진 기준 숫자 */
.mkp small { display: block; font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 2px; }
.mgn ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mgn li { padding: 12px 14px; background: #F3F6FA; }
.mgn li span { display: block; font-size: 12.5px; color: var(--sub); }
.mgn li strong { display: block; margin-top: 2px; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.mgn li + li strong { color: #0047A0; }
.mgn li small { display: block; margin-top: 2px; font-size: 12px; color: var(--sub); }
.mgn .mgf { margin-top: 4px; font-size: 12px; color: #8A94A3; }
@media (max-width: 900px) {
  .mkp small { font-size: 12px; }
  .mgn ul { gap: 6px; } .mgn li { padding: 10px; } .mgn li strong { font-size: 18px; } .mgn li small { font-size: 11px; letter-spacing: -0.03em; }
}
.mgn .mgs { margin-top: 12px; padding-top: 12px; border-top: 1px solid #E3E7EC; font-size: 14px; color: var(--ink); }
.mgn .mgs b { color: #0047A0; }
.mgn .mgs span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #0047A0; }
@media (max-width: 900px) { .mgn .mgs { font-size: 13px; } }
.mgn .mgs b { display: inline; font-size: inherit; letter-spacing: 0; }
.mgn .nw { white-space: nowrap; } @media (max-width: 900px) { .mgn li small span.nw { display: block; } .mgn li small span.nw + span.nw { margin-top: 1px; } }
.mgn .mgs span.nw { display: inline !important; margin: 0 !important; font-size: inherit !important; font-weight: 400 !important; color: inherit !important; }
.mgn li { display: flex; flex-direction: column; justify-content: center; }
.mgn .mgf { font-size: 13px !important; color: var(--sub) !important; margin-top: 10px !important; } .mgn .mgf b { display: inline; font-size: inherit; color: #0047A0; letter-spacing: 0; } @media (max-width: 900px) { .mgn .mgf { font-size: 12.5px !important; } }
.mgn .mgf small { display: block; margin-top: 2px; font-size: 11.5px; color: #8A94A3; }
.mgn .mgf { white-space: nowrap; } @media (max-width: 900px) { .mgn .mgf { font-size: 10.5px !important; letter-spacing: -0.05em; } }
/* v12.65 마진 박스 3칸: 받는 금액 | 드는 비용 | 기준 */
.mgn ul { grid-template-columns: 1fr 1fr 1.4fr !important; }
.mgn li.mg3 strong { font-size: 17px; color: var(--ink) !important; }
.mgn li.mg3 small { color: #0047A0; font-weight: 700; }
@media (max-width: 900px) {
  .mgn ul { grid-template-columns: 1fr 1fr !important; }
  .mgn li.mg3 { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .mgn li.mg3 strong { font-size: 14px; margin: 0; }
  .mgn li.mg3 small { flex-basis: 100%; font-size: 12px; letter-spacing: -0.02em; }
}
@media (max-width: 900px) { .mgn li.mg3 { justify-content: flex-start !important; text-align: left; } }
/* v12.66 마진 박스: PC는 위 가로줄, 모바일은 왼쪽 세로줄 유지 · 기준 칸 한 줄씩 */
@media (min-width: 901px) { .mgn { border-left: 0 !important; border-top: 3px solid #0047A0; } }
.mgn li.mg3 strong, .mgn li.mg3 small { white-space: nowrap; }
@media (max-width: 900px) { .mgn li.mg3 { flex-direction: column !important; align-items: flex-start; } .mgn li.mg3 small { flex-basis: auto; } }
.mgn ul { grid-template-columns: 1fr 1fr !important; }

/* 마진 박스 금액 = 위 단가 카드 금액 크기 (2026-10-18) */
.mgn2 li strong { font-size: 44px !important; line-height: 1; letter-spacing: -0.03em; margin-top: 8px; }
@media (max-width: 600px) { .mgn2 li strong { font-size: 25px !important; margin-top: 4px; } }
/* 받는 금액 · 드는 비용 칸 세로 높이·위치 통일 */
.mgn2 ul { align-items: stretch !important; }
.mgn2 li { justify-content: flex-start !important; align-items: flex-start; text-align: left; height: 100%; }
.mgn2 li span { line-height: 1.4; }
.mgn2 li small { margin-top: 8px !important; font-size: 12.5px !important; color: var(--sub) !important; font-weight: 600; }
@media (max-width: 600px) { .mgn2 li small { margin-top: 5px !important; font-size: 11px !important; } }
/* 마진 박스 가로폭 = 위 시장 표 가로폭 (PC·모바일 공통) */
.mgn2 { max-width: none !important; width: 100%; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; }
/* PC: 라벨 옆에 기준 문구 / 모바일: 금액 아래 */
@media (min-width: 601px) {
  .mgn2 li { display: grid !important; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; align-content: start; }
  .mgn2 li span { grid-column: 1; grid-row: 1; }
  .mgn2 li small { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
  .mgn2 li strong { grid-column: 1 / -1; grid-row: 2; }
}
/* v12.67 배경 리듬: 직업 장점(어둡게) → 단가(흰색) → 합법화(회색) → AI(검정) */
.jobdark.panel { background: #0B1A30 !important; }
.jobdark h2 { color: #fff !important; } .jobdark h2 em { color: #7FB0F5 !important; }
.jobdark .lead { color: #AEB8C7 !important; } .jobdark .eyebrow { color: #7FB0F5 !important; }
.jobdark .merit .mc { background: #16294A !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: none !important; }
.jobdark .merit .mc:has(input:checked) { background: #24427A !important; border-color: #5E9BEB !important; }
.jobdark .mres.mbot, .jobdark .mres.mbot:not(.on) { color: #9FB4D3 !important; opacity: 1; }
.jobdark .mres.mbot.on { color: #fff !important; } .jobdark .mres.mbot b, .jobdark .mres.mbot em { color: #7FB0F5 !important; }
.sec-price.panel { background: #fff !important; }
.legallight.panel { background: #F2F4F7 !important; }
.legallight h2 { color: var(--ink) !important; } .legallight h2 em { color: var(--blue) !important; }
.legallight .lead { color: var(--sub) !important; } .legallight .eyebrow { color: var(--blue) !important; }
.legallight .lgt { background: #E1E5EB !important; }
.legallight .lgt > div { background: #fff !important; }
.legallight .lgt b { color: var(--ink) !important; } .legallight .lgt b em { color: var(--blue) !important; }
.legallight .lgt p { color: var(--sub) !important; }
.legallight .lgfoot .textlink { color: var(--ink) !important; border-color: var(--ink) !important; }
/* v12.68 진단: 선택 전엔 커서만 깜박 */
.diag.dempty .res .rec, .diag.dempty .res .ctas, .diag.dempty .res .grad { display: none !important; }
.diag.dempty .res .out { min-height: 1.6em; }
/* v12.69 휴대폰 탭 → 떨어진 버튼 3개 */
@media (max-width: 600px) {
  #check .lead + .avwrap { margin-top: 20px; }
  .avwrap { background: transparent !important; box-shadow: none !important; }
  .avtabs { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 8px !important; background: transparent !important; border: 0 !important; margin-bottom: 12px !important; }
  .avtabs label { opacity: 1 !important; background: #fff !important; border: 1.5px solid var(--tc) !important; color: var(--tc) !important; border-radius: 0; box-shadow: 0 4px 12px rgba(15,32,58,.08); }
  .avtabs label small { color: inherit !important; opacity: .75; }
  .avtabs label[for="avt1"] { --tc: #5E9BEB; } .avtabs label[for="avt2"] { --tc: #2A7DE1; } .avtabs label[for="avt3"] { --tc: #0B3D91; }
  #avt1:checked ~ .avtabs label[for="avt1"], #avt2:checked ~ .avtabs label[for="avt2"], #avt3:checked ~ .avtabs label[for="avt3"] { background: var(--tc) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(15,32,58,.18); }
  #avt1:checked ~ .avtabs label[for="avt1"]::before, #avt2:checked ~ .avtabs label[for="avt2"]::before, #avt3:checked ~ .avtabs label[for="avt3"]::before { content: none !important; }
  .avg { background: #fff; box-shadow: 0 10px 34px rgba(15,32,58,.10); }
}
@media (max-width: 600px) {
  .avwrap .avtabs label[for="avt1"], .avwrap .avtabs label[for="avt2"], .avwrap .avtabs label[for="avt3"] { background: #fff !important; color: var(--tc) !important; opacity: 1 !important; }
  #avt1:checked ~ .avtabs label[for="avt1"], #avt2:checked ~ .avtabs label[for="avt2"], #avt3:checked ~ .avtabs label[for="avt3"] { background: var(--tc) !important; color: #fff !important; }
}
/* v12.70 탭 버튼: 테두리 없음 + 안 누른 버튼 살짝 튀는 애니메이션(누르면 멈춤) */
@media (max-width: 600px) {
  .avwrap .avtabs label[for="avt1"], .avwrap .avtabs label[for="avt2"], .avwrap .avtabs label[for="avt3"] { border: 0 !important; }
  @keyframes avNudge { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(-5px); } 86% { transform: translateY(0); } 92% { transform: translateY(-2px); } }
  .avwrap:not(.avused) #avt1:checked ~ .avtabs label[for="avt2"] { animation: avNudge 2.6s ease-in-out .2s infinite; }
  .avwrap:not(.avused) #avt1:checked ~ .avtabs label[for="avt3"] { animation: avNudge 2.6s ease-in-out .45s infinite; }
  .avwrap.avused .avtabs label { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) { .avtabs label { animation: none !important; } }
/* v12.71 안 누른 버튼 글씨 흐리게 · 누른 버튼과 아래 카드 연결 */
@media (max-width: 600px) {
  .avwrap .avtabs { margin-bottom: 0 !important; align-items: end; }
  .avwrap .avtabs label[for="avt1"], .avwrap .avtabs label[for="avt2"], .avwrap .avtabs label[for="avt3"] { color: rgba(15,32,58,.32) !important; box-shadow: none !important; background: #E9EDF2 !important; margin-bottom: 8px; transition: margin .2s, padding .2s, background .2s; }
  .avwrap .avtabs label small { opacity: 1 !important; }
  #avt1:checked ~ .avtabs label[for="avt1"], #avt2:checked ~ .avtabs label[for="avt2"], #avt3:checked ~ .avtabs label[for="avt3"] { background: var(--tc) !important; color: #fff !important; margin-bottom: 0; padding-bottom: 16px !important; box-shadow: none !important; }
  .avwrap .avg { border-top: 4px solid #5E9BEB; }
  #avt2:checked ~ .avg { border-top-color: #2A7DE1; }
  #avt3:checked ~ .avg { border-top-color: #0B3D91; }
}
/* v12.72 누른 탭 색으로 카드 전체 테두리 (폴더 탭처럼) */
@media (max-width: 600px) {
  .avwrap .avg { border: 2px solid #5E9BEB !important; border-top-width: 3px !important; box-shadow: 0 10px 28px rgba(15,32,58,.08) !important; transition: border-color .2s; }
  #avt2:checked ~ .avg { border-color: #2A7DE1 !important; }
  #avt3:checked ~ .avg { border-color: #0B3D91 !important; }
}
/* v12.73 말풍선: 카드 위 꼬리가 누른 탭을 가리킴 */
@media (max-width: 600px) {
  .avwrap .avtabs { margin-bottom: 14px !important; align-items: stretch; }
  .avwrap .avtabs label[for="avt1"], .avwrap .avtabs label[for="avt2"], .avwrap .avtabs label[for="avt3"] { margin-bottom: 0 !important; }
  #avt1:checked ~ .avtabs label[for="avt1"], #avt2:checked ~ .avtabs label[for="avt2"], #avt3:checked ~ .avtabs label[for="avt3"] { padding-bottom: 8px !important; }
  .avwrap .avg { position: relative; border-top-width: 2px !important; --tl: 16.66%; --bc: #5E9BEB; }
  #avt2:checked ~ .avg { --tl: 50%; --bc: #2A7DE1; }
  #avt3:checked ~ .avg { --tl: 83.33%; --bc: #0B3D91; }
  .avwrap .avg::before, .avwrap .avg::after { content: ""; position: absolute; left: var(--tl); width: 0; height: 0; border-style: solid; transition: left .25s ease; }
  .avwrap .avg::before { top: -14px; margin-left: -12px; border-width: 0 12px 12px; border-color: transparent transparent var(--bc); }
  .avwrap .avg::after { top: -10px; margin-left: -10px; border-width: 0 10px 10px; border-color: transparent transparent #fff; }
}
.hcard img.hp3, .hcard.on img.hp3 { object-position: center 38% !important; } .hcard img.hp1, .hcard.on img.hp1 { object-position: center 30% !important; }
.hcard img.hp3, .hcard.on img.hp3 { object-position: center 62% !important; }
/* v12.74 금액 표 안 등록 시 혜택 */
.pben { margin-top: 14px; padding: 14px 16px; background: #F3F6FA; display: flex; align-items: center; gap: 16px; }
.pben b { flex: none; font-size: 13.5px; font-weight: 800; color: #0047A0; }
.pben ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pben li { position: relative; padding-left: 18px; font-size: 14px; font-weight: 600; color: var(--ink); }
.pben li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 8px; height: 5px; border-left: 2px solid #2A7DE1; border-bottom: 2px solid #2A7DE1; transform: rotate(-45deg); }
@media (max-width: 900px) {
  .pben { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
  .pben ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .pben li { font-size: 12.5px; letter-spacing: -0.03em; padding-left: 16px; }
}
/* v12.75 인터뷰 작업 사진: 손과 작업 부분이 보이게 */
#grads .ivc .ivimg img[src*="ivw_"] { object-position: center 48%; }
#grads .ivc .ivimg img[src*="ivw_gogyeol"] { object-position: center 55%; }
#grads .ivc .ivimg img[src*="ivw_jo"] { object-position: center 85%; }
#grads .ivc .ivimg img[src*="ivw_jo"] { object-position: center 62%; }
/* v12.76 마지막 섹션: START 삭제 · 버튼과 정보 사이 여백 축소 */
.final .locbar { grid-template-columns: repeat(3, 1fr) !important; margin-top: 36px !important; }
@media (max-width: 900px) {
  .final .locbar { grid-template-columns: 1fr 1fr !important; margin-top: 24px !important; row-gap: 14px !important; }
  .final .locbar div { padding-top: 14px; }
  .final .locbar div:nth-child(3) { grid-column: 1 / -1; padding-top: 0; }
}
#grads .ivc .ivimg img[src*="ivw_jo"] { object-position: center center !important; }
/* v12.77 로드맵 흰색 · 신청 방법 회색 띠 */
.sec-course.panel.sheet { background: #fff !important; padding-bottom: 0 !important; }
.sec-course .rmwrap2 { position: relative; margin-top: 72px; padding: 1px 0 110px; background: #F2F4F7; box-shadow: 0 0 0 100vmax #F2F4F7; clip-path: inset(0 -100vmax); }
.sec-course .rmwrap2 > .divider-gap:first-child { display: none; }
.sec-course .rmwrap2 > .eyebrow { margin-top: 72px !important; }
.sec-course .apflow .apic { background: #fff; }
@media (max-width: 900px) {
  .sec-course .rmwrap2 { margin-top: 48px; padding-bottom: 72px; }
  .sec-course .rmwrap2 > .eyebrow { margin-top: 48px !important; }
}
.sec-course .rmwrap2 { clip-path: inset(0 -100vmax -120px) !important; }
.panel.final { z-index: 2; } .sec-course.panel { z-index: 1; }
@media (max-width: 900px) { .ptnote { white-space: nowrap; letter-spacing: -0.03em; } }
@media (max-width: 900px) { .pben li:nth-child(4) { grid-column: 1 / -1; } }
.ysum b { margin-left: 0 !important; }
/* v12.78 신청 방법을 금액 표 안 마지막 줄로 */
.papply { margin-top: 16px; padding-top: 16px; border-top: 1px solid #E3E7EC; }
.papply .pal { display: block; font-size: 12.5px; color: var(--sub); margin-bottom: 10px; }
.apflow.apin { margin-top: 0 !important; justify-content: space-between; }
.apflow.apin > div { max-width: none; display: flex; align-items: center; gap: 10px; text-align: left; flex: 1; }
.apflow.apin .apic { width: 40px !important; height: 40px !important; margin: 0 !important; flex: none; background: #EAF2FD !important; box-shadow: none !important; }
.apflow.apin .apic svg { width: 20px !important; height: 20px !important; }
.apflow.apin b { font-size: 15px; }
.apflow.apin p { margin-top: 1px; font-size: 12.5px; }
.apflow.apin .apar { margin-top: 6px !important; font-size: 20px; flex: none; }
@media (max-width: 900px) {
  .apflow.apin > div { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .apflow.apin b { font-size: 13.5px; } .apflow.apin p { font-size: 11px; letter-spacing: -0.03em; }
  .apflow.apin .apar { margin-top: 10px !important; }
}
.sec-course.panel.sheet { padding-bottom: 110px !important; }
@media (max-width: 900px) { .sec-course.panel.sheet { padding-bottom: 72px !important; } }
/* v12.79 펜머신 증정 배지 */
.pben li.pgift { padding: 4px 10px !important; background: #F3EBDD; color: #7A5A24 !important; font-weight: 700; }
.pben li.pgift::before { content: none !important; }
.pben li.pgift b { color: #5E3F0F; font-weight: 800; font-size: inherit; }
@media (max-width: 900px) { .pben li.pgift { justify-self: start; padding: 4px 9px !important; } }
/* v12.80 합계 한 줄 · 금액 상자를 카드와 분리 */
.ysum { color: #fff !important; font-size: 17px !important; font-weight: 600; }
.ysum b { font-size: inherit !important; color: #fff; font-weight: 800; }
.pthead { margin: 64px 0 0; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.pthead + .ptrack.pt2 { margin-top: 18px !important; }
@media (max-width: 900px) { .ysum { font-size: 14px !important; white-space: nowrap; letter-spacing: -0.03em; } .pthead { margin-top: 44px; font-size: 18px; } .pthead + .ptrack.pt2 { margin-top: 14px !important; } }
/* v12.81 월 금액 크게 · 총액 작게 · 펜머신 배지 한 줄 */
.ptot.pmon b { color: #0047A0 !important; }
.ptot.pmon b i { font-style: normal; font-size: .6em; font-weight: 700; margin-right: 3px; color: var(--sub); }
.ptot.pmon small { color: var(--sub) !important; font-weight: 600 !important; }
.pben li.pgift { white-space: nowrap; }
@media (max-width: 900px) { .pben li.pgift { font-size: 12px; letter-spacing: -0.04em; } .ptnote { white-space: normal !important; } }
/* v12.82 마지막 섹션: 본업 슬로건 제목 · 신청 흐름 한 줄 · 상담 시간 삭제 */
.final .fflow { margin: 18px 0 0; text-align: center; font-size: 14px; color: #AEB8C7; }
.final .fflow span { color: #fff; font-weight: 600; }
.final .fflow i { font-style: normal; margin: 0 8px; color: #7F8896; }
.final .locbar { grid-template-columns: 1fr 1fr !important; }
.final .locbar div:nth-child(3) { display: none; }
@media (max-width: 900px) { .final .fflow { font-size: 12.5px; white-space: nowrap; letter-spacing: -0.03em; } .final .fflow i { margin: 0 4px; } }
/* v12.83 슬로건을 푸터 맨 아래로 · 주소 한 줄 */
footer .wrap { flex-wrap: wrap; }
footer .fsend { flex-basis: 100%; width: 100%; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.final .locbar b { white-space: nowrap; }
@media (max-width: 900px) { .final .locbar b { font-size: 13px !important; letter-spacing: -0.03em; } footer .fsend { font-size: 13.5px; margin-top: 22px; } }
/* v12.84 금액 상자: 수업 시간 → 금액 → 혜택, 합계 띠에 이어 붙임 */
.ysum + .ptrack.pt2 { margin-top: 0 !important; border-top: 0 !important; }
.ptrack.pt2 .psc3 { margin-top: 0 !important; border-top: 0 !important; }
.ptrack.pt2 .psc3 + .ptot { margin-top: 16px !important; border-top: 1px solid #E3E7EC !important; }
.ptrack.pt2 .ptnote + .psc3 { border-top: 0 !important; }
/* v12.85 신청 방법을 혜택 아래 한 줄로 */
.pben.pflow { margin-top: 8px; }
.pben.pflow p { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.pben.pflow i { font-style: normal; margin: 0 8px; color: #8A94A3; }
@media (max-width: 900px) { .pben.pflow p { font-size: 12.5px; white-space: nowrap; letter-spacing: -0.04em; } .pben.pflow i { margin: 0 4px; } }
/* v12.86 마지막 섹션 정보: PC 3열 한 줄 · 모바일 1열 */
.final .locbar { grid-template-columns: repeat(3, 1fr) !important; }
.final .locbar div:nth-child(3) { display: block !important; grid-column: auto !important; padding-top: 24px; }
@media (max-width: 900px) {
  .final .locbar { grid-template-columns: 1fr !important; row-gap: 0 !important; }
  .final .locbar div, .final .locbar div:nth-child(3) { display: flex !important; align-items: baseline; gap: 12px; padding: 12px 0 0 !important; }
  .final .locbar small { flex: none; width: 64px; }
  .final .locbar b { margin-top: 0; font-size: 14px !important; }
}
/* v12.87 질문 상자 검정 · 장르 띠 회색 */
.ysr .q { background: #1E232B !important; color: #fff !important; border: 0 !important; }
.ysr .q .qt, .ysr .q .qt span { color: #fff !important; }
.ysr .gn { background: #ECEFF3 !important; color: #3A4250 !important; }
.ysr .gn small { color: #6B7686 !important; }
/* v12.88 슬로건을 마지막 섹션 정보 아래로 · 하단 여백 축소 */
.final .fsend { margin: 32px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: 16px; font-weight: 700; color: #fff; text-align: center; letter-spacing: -0.01em; }
.panel.final { padding-bottom: 56px !important; }
@media (max-width: 900px) { .final .fsend { margin-top: 22px; padding-top: 18px; font-size: 14px; } .panel.final { padding-bottom: 40px !important; } }
@media (max-width: 900px) { footer { padding-top: 32px !important; padding-bottom: 96px !important; } .panel.final { padding-bottom: 32px !important; } }
/* v12.89 혜택: 항목·배지 높이 통일 · 모바일 3개 한 줄 + 배지 다음 줄 */
.pben ul { align-items: center; }
.pben li { display: inline-flex; align-items: center; min-height: 30px; box-sizing: border-box; }
.pben li::before { top: 50% !important; margin-top: -5px; }
.pben li.pgift { min-height: 30px; padding: 0 10px !important; }
.pben li.pgift span { margin-left: 6px; font-size: .85em; font-weight: 600; color: #9A7A44; }
@media (max-width: 900px) {
  .pben ul { display: flex !important; flex-wrap: wrap; gap: 6px 10px; }
  .pben li { min-height: 26px; font-size: 12.5px !important; white-space: nowrap; }
  .pben li.pgift { flex-basis: 100%; justify-content: flex-start; min-height: 30px; font-size: 12px !important; }
}
.pben li.pgift b { margin-left: 4px; }
.pbook { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pbook span { margin-left: 4px; font-weight: 500; color: var(--sub); }
@media (max-width: 900px) { .pbook { font-size: 12.5px; } }

/* v13.0 — 직접 개발 사이트: 새 페이지 공통 (신청 · 방문 · 스튜디오 · 수료 후 · 약관) */
:where(a.logo, .menu a, .mpanel a, .topbar a, footer a, a.btn, a.textlink, a.fab) { color: inherit; text-decoration: none; }
.sx-done[hidden] { display: none; }
a.btn { display: inline-flex; align-items: center; justify-content: center; }
.sx-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.sx-steps li { background: #fff; border: 1px solid var(--line, #E7E9EE); padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.sx-steps li.on { background: #0047A0; border-color: #0047A0; color: #fff; }
.sx-steps i { font-style: normal; font-weight: 800; font-size: 13px; color: #2A7DE1; letter-spacing: .04em; }
.sx-steps li.on i { color: #CFE0F7; }
.sx-steps b { font-size: 19px; }
.sx-steps span { font-size: 14px; color: #5B6472; }
.sx-steps li.on span { color: #E3ECF8; }
.p-mist .sx-steps li { background: #fff; }
.sx-formwrap { margin-top: 36px; max-width: 760px; }
.sx-form { background: #fff; border: 1px solid var(--line, #E7E9EE); padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.sx-form.done { display: none; }
.sx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sx-f { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.sx-f > span { font-weight: 650; color: var(--ink, #0F1115); }
.sx-f em { color: #D93A3A; font-style: normal; }
.sx-f input[type=text], .sx-f input[type=tel], .sx-f input[type=password], .sx-f input[type=date], .sx-f select, .sx-f textarea { font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid #CBD2DC; background: #fff; color: var(--ink, #0F1115); border-radius: 0; width: 100%; box-sizing: border-box; }
.sx-f input:focus, .sx-f select:focus, .sx-f textarea:focus { outline: 2px solid #2A7DE1; outline-offset: -1px; border-color: #2A7DE1; }
.sx-f.err input, .sx-f.err textarea, .sx-f.err .sx-chips span { border-color: #D93A3A; }
.sx-f.err > span::after { content: " — 입력해 주세요"; color: #D93A3A; font-weight: 500; font-size: 13px; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chips label { cursor: pointer; }
.sx-chips input { position: absolute; opacity: 0; pointer-events: none; }
.sx-chips span { display: inline-block; padding: 11px 16px; border: 1px solid #CBD2DC; font-size: 15px; background: #fff; transition: background .15s, color .15s, border-color .15s; }
.sx-chips input:checked + span { background: #0047A0; border-color: #0047A0; color: #fff; font-weight: 650; }
.sx-chips input:focus-visible + span { outline: 2px solid #2A7DE1; outline-offset: 2px; }
.sx-agree { flex-direction: row; align-items: flex-start; gap: 10px; background: #F3F5F8; padding: 14px 16px; }
.sx-agree input { width: 18px; height: 18px; margin-top: 2px; accent-color: #0047A0; flex: none; }
.sx-agree small { color: #5B6472; font-size: 13.5px; }
.sx-agree a, .sx-note a, .sx-cards3 a { color: #0047A0; text-decoration: underline; }
.sx-agree.err { outline: 1px solid #D93A3A; }
.sx-submit { align-self: flex-start; border: 0; cursor: pointer; font: inherit; }
.sx-done { background: #fff; border: 2px solid #0047A0; padding: 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sx-done b { font-size: 22px; color: #0047A0; }
.sx-done p { margin: 0; color: #3A4250; line-height: 1.7; }
.sx-note { margin-top: 20px; font-size: 14.5px; color: #5B6472; }
.sx-alt { margin-top: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line, #E7E9EE); padding: 22px 26px; }
.sx-alt div { display: flex; flex-direction: column; gap: 4px; max-width: 640px; }
.sx-alt b { font-size: 17px; }
.sx-alt span { font-size: 14.5px; color: #5B6472; line-height: 1.6; }
.p-mist .sx-alt { background: #fff; }
.sx-cards3 { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sx-cards3 > div { background: #fff; border: 1px solid var(--line, #E7E9EE); display: flex; flex-direction: column; }
.sx-cards3 img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.sx-cards3 b { font-size: 18px; padding: 20px 22px 6px; }
.sx-cards3 b i { font-style: normal; color: #2A7DE1; margin-right: 6px; }
.sx-cards3 p { font-size: 15px; color: #3A4250; padding: 0 22px 22px; margin: 0; line-height: 1.7; }
.sx-stat3 { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sx-stat3 > div { background: #F3F5F8; padding: 26px; display: flex; flex-direction: column; gap: 6px; }
.sx-stat3 span { font-size: 14px; color: #5B6472; }
.sx-stat3 b { font-size: 30px; color: #0047A0; letter-spacing: -.02em; }
.sx-stat3 small { font-size: 14.5px; color: #3A4250; }
.sx-photos { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sx-photos img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.sx-list { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sx-list > div { background: #fff; border-left: 3px solid #0047A0; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.sx-list b { font-size: 17px; }
.sx-list span { font-size: 14.5px; color: #5B6472; }
.p-paper .sx-list > div { background: #F3F5F8; }
.sx-loc { margin-top: 32px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.sx-loc dl { display: grid; grid-template-columns: 64px 1fr; gap: 12px 16px; margin: 0; font-size: 16px; }
.sx-loc dt { color: #5B6472; font-weight: 650; }
.sx-loc dd { margin: 0; font-weight: 600; }
.sx-locbtn { display: flex; gap: 10px; flex-wrap: wrap; }
.sx-doc { margin-top: 24px; background: #fff; border: 1px solid var(--line, #E7E9EE); padding: 28px 30px; font-size: 15.5px; line-height: 1.8; color: #3A4250; scroll-margin-top: 90px; }
.p-paper .sx-doc { background: #F8F9FB; }
.sx-doc ul, .sx-doc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.sx-doc b { color: var(--ink, #0F1115); margin-right: 6px; }
.sx-doc table { width: 100%; border-collapse: collapse; }
.sx-doc th, .sx-doc td { text-align: left; vertical-align: top; padding: 12px 8px; border-bottom: 1px solid var(--line, #E7E9EE); }
.sx-doc th { width: 130px; color: var(--ink, #0F1115); font-weight: 650; white-space: nowrap; }
@media (max-width: 760px) {
  .sx-row, .sx-cards3, .sx-stat3, .sx-list, .sx-loc { grid-template-columns: 1fr; }
  .sx-form, .sx-done { padding: 22px 18px; }
  .sx-steps { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sx-steps li { padding: 16px 14px; }
  .sx-steps b { font-size: 16px; }
  .sx-steps span { font-size: 13px; }
  .sx-photos { grid-template-columns: 1fr 1fr; }
  .sx-photos img:nth-child(3) { display: none; }
  .sx-stat3 b { font-size: 26px; }
  .sx-submit { align-self: stretch; }
  .sx-doc { padding: 20px 18px; font-size: 15px; }
  .sx-doc th { width: 84px; white-space: normal; }
  .sx-alt { padding: 18px; }
}
/* v13.1 — 수강 신청 페이지 4단계 아이콘 */
.sx-apflow { margin-top: 44px; justify-content: flex-start; }
.sx-apflow > div { max-width: 210px; }
@media (max-width: 760px) {
  .sx-apflow { margin-top: 28px; justify-content: space-between; gap: 0; }
  .sx-apflow > div { min-width: 0; }
  .sx-apflow .apic { width: 46px; height: 46px; }
  .sx-apflow .apic svg { width: 22px; height: 22px; }
  .sx-apflow b { font-size: 13.5px; white-space: nowrap; letter-spacing: -0.04em; }
  .sx-apflow p { font-size: 11px; }
  .sx-apflow .apar { font-size: 18px; margin-top: 12px; flex: none; }
}
/* v13.2 — 메인 「자립까지」 → 수료 후 지원 페이지 링크 */
.sx-more { text-align: center; margin-top: 36px; }
.p-night .sx-more .textlink { color: #7FB0FF; border-bottom: 1px solid rgba(127,176,255,.5); padding-bottom: 2px; }
/* v13.3 — 하위 페이지 얇은 마무리 띠 */
.panel.sx-end { padding: 64px 0 !important; text-align: center; }
.sx-end h2 { font-size: 30px; line-height: 1.35; color: #fff; margin: 0; }
.sx-end .ctas { justify-content: center; margin-top: 26px; }
@media (max-width: 760px) {
  .panel.sx-end { padding: 44px 0 !important; }
  .sx-end h2 { font-size: 23px; }
  .sx-end .ctas { margin-top: 20px; }
}

/* v13.4 — 라운딩 전부 제거 (사용자 결정). 동그라미(점 · 아이콘 · 아바타)만 유지 */
*, *::before, *::after { border-radius: 0 !important; }
.video .play, .hero .kick i, .quote .av, .faqgrid .q::before, .tline > div::before, .notes li::before, .tl i, .mbar .kk, .chk i, .urgent .dot, .urg1 .dot, .why5 .arw span, .mbar .mbu .dot, #grads .ivc .who .av, #grads .ivdots button, #mission .ph2 img, #mission .warn .wi, #after .aqd i, .tvs .vs, .mkt .mkv, .fabpc .fbub .dot, .avoid .x, .avg .aq i, .avg li::before, .apic, .avtabs .avd { border-radius: 50% !important; }

.fabpc .fab { border-radius: 999px !important; }
/* v13.5 — 니즈 기반 카드 (질문 → 저희가 하는 것) */
.sx-needs { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sx-needs > div { background: #fff; border: 1px solid var(--line, #E7E9EE); display: flex; flex-direction: column; }
.p-paper .sx-needs > div { background: #F3F5F8; border-color: #F3F5F8; }
.sx-needs .q { margin: 0; background: #14171C; color: #fff; font-weight: 700; font-size: 15.5px; padding: 18px 22px; line-height: 1.5; }
.sx-needs b { font-size: 19px; color: #0047A0; padding: 20px 22px 6px; }
.sx-needs span { font-size: 15px; color: #3A4250; padding: 0 22px 22px; line-height: 1.7; }
@media (max-width: 760px) { .sx-needs { grid-template-columns: 1fr; gap: 12px; } .sx-needs .q { font-size: 15px; padding: 14px 18px; } .sx-needs b { padding: 16px 18px 4px; font-size: 17.5px; } .sx-needs span { padding: 0 18px 18px; } }
/* v13.6 — 메인 「등록하면, 이만큼 더 합니다」 혜택 줄 키움 */
.pben.sx-ben { align-items: center; gap: 18px; padding: 16px 18px; flex-direction: row !important; }
.sx-ben > img { width: 96px; height: 96px; object-fit: cover; flex: none; display: block; }
.sx-bt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pben b.sx-bh { font-size: 19px; font-weight: 800; color: var(--ink, #0F1115); letter-spacing: -0.02em; }
.sx-bh em { font-style: normal; color: #0047A0; }
@media (max-width: 900px) {
  .pben.sx-ben { align-items: flex-start; gap: 12px; padding: 14px; }
  .sx-ben > img { width: 72px; height: 72px; }
  .pben b.sx-bh { font-size: 16px; }
}
@media (max-width: 900px) {
  .pben.sx-ben { display: grid !important; grid-template-columns: 56px 1fr; align-items: center; gap: 12px; }
  .sx-ben > img { width: 56px; height: 56px; }
  .sx-bt { display: contents; }
  .sx-ben ul { grid-column: 1 / -1; }
}
/* v13.7 — 졸업생 인터뷰 상세 페이지 */
.sx-ivgrid { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
.sx-ivside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.sx-ivside img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.sx-iv { max-width: 680px; font-size: 16.5px; line-height: 1.85; color: #2A303A; }
.sx-iv .sx-ivhook { font-size: 24px; line-height: 1.5; font-weight: 800; color: var(--ink, #0F1115); margin: 0 0 18px; letter-spacing: -0.02em; }
.sx-iv .sx-ivintro { color: #5B6472; margin: 0 0 6px; }
.sx-iv h3 { font-size: 19px; color: #0047A0; margin: 40px 0 10px; letter-spacing: -0.02em; }
.sx-iv p { margin: 0 0 8px; }
.sx-iv strong { color: var(--ink, #0F1115); }
.sx-iv blockquote { margin: 22px 0; padding: 16px 20px; border-left: 3px solid #0047A0; background: #F3F5F8; font-size: 18px; font-weight: 700; color: var(--ink, #0F1115); line-height: 1.6; }
.sx-ivgal { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sx-ivgal img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.sx-ivnav { margin-top: 36px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #D9DEE6; padding-top: 22px; font-size: 15px; font-weight: 650; }
.sx-ivnav a { color: var(--ink, #0F1115); text-decoration: none; }
.sx-ivnav a:nth-child(2) { color: #5B6472; }
.sx-ivlink { display: inline-block; margin-top: 16px; font-size: 14.5px; font-weight: 700; color: #0047A0; text-decoration: none; border-bottom: 1px solid rgba(0,71,160,.35); }
@media (max-width: 900px) {
  .sx-ivgrid { grid-template-columns: 1fr; gap: 28px; }
  .sx-ivside { position: static; }
  .sx-ivside img { aspect-ratio: 1/1; }
  .sx-iv { font-size: 15.5px; }
  .sx-iv .sx-ivhook { font-size: 20px; }
  .sx-iv h3 { font-size: 17px; margin-top: 32px; }
  .sx-iv blockquote { font-size: 16px; }
  .sx-ivgal { grid-template-columns: 1fr 1fr; }
  .sx-ivnav { font-size: 13.5px; }
}

/* v13.8 — 수료 후 지원: 1년 흐름 · 졸업생의 말 */
.p-night .sx-steps li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
.p-night .sx-steps li span { color: rgba(255,255,255,.72); }
.p-night .sx-steps li.on { background: #0047A0; border-color: #0047A0; }
.p-night .sx-steps li.on span { color: #fff; }
.sx-voices { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sx-voices > div { background: #F3F5F8; border-left: 3px solid #0047A0; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.sx-voices p { margin: 0; font-size: 17px; line-height: 1.6; font-weight: 700; color: #191F28; word-break: keep-all; }
.sx-voices a { font-size: 13.5px; color: #6B7684; text-decoration: none; }
.sx-voices a:hover { color: #0047A0; }
@media (max-width: 760px) { .sx-voices { grid-template-columns: 1fr; gap: 8px; } .sx-voices > div { padding: 16px 18px; } .sx-voices p { font-size: 15px; } }

/* v13.9 — 졸업생 인터뷰: 상황별로 골라 보기 */
.sx-ivf { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.sx-ivf button { font: inherit; font-size: 14.5px; font-weight: 700; padding: 10px 16px; background: #fff; color: #3A4250; border: 1px solid #D5DAE1; cursor: pointer; }
.sx-ivf button:hover { border-color: #0047A0; color: #0047A0; }
.sx-ivf button.on { background: #0047A0; border-color: #0047A0; color: #fff; }
.g3 .quote[hidden] { display: none !important; }
.sx-ivf + .g3.mt { margin-top: 24px; }
@media (max-width: 600px) { .sx-ivf { gap: 6px; margin-top: 24px; } .sx-ivf button { font-size: 13px; padding: 8px 12px; } }

/* v14.0 방문 예약 — 네이버 예약 버튼 + 양식 접기 */
.sx-nbook { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sx-nbook .btn { font-size: 17px; padding: 18px 30px; }
.sx-nbook p { margin: 0; font-size: 14px; color: var(--mute); }
.sx-fallback { margin-top: 28px; border-top: 1px solid var(--line, #E7E9EE); padding-top: 18px; }
.sx-fallback summary { cursor: pointer; font-size: 14px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.sx-fallback summary::-webkit-details-marker { display: none; }
.sx-fallback[open] summary { margin-bottom: 20px; }
@media (max-width: 600px) { .sx-nbook .btn { width: 100%; justify-content: center; } }

/* v14.1 졸업생 명단 — 인터뷰 12명 카드 링크 */
.dir > a { display: block; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform .2s; }
.dir > a:hover { transform: translateY(-3px); }

/* v14.2 검색 키워드 줄 — 큰 제목 안에 넣되 모양은 기존 크럼과 같게 */
h1 > .crumb, h1 > .h1kw { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.4; letter-spacing: .14em; color: #7E8896; margin-bottom: 26px; }
h1 > .crumb b { color: var(--blue-hi); font-weight: 600; }
h1 > .h1kw { margin: 18px 0 14px; color: #CFD6E0; letter-spacing: .08em; }
@media (max-width: 600px) { h1 > .h1kw { font-size: 11.5px; margin: 14px 0 10px; } }

/* v14.3 수강료 결제 (미리보기) */
.pay-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.pay-plans label { cursor: pointer; }
.pay-plans input { position: absolute; opacity: 0; pointer-events: none; }
.pay-plans span { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 18px; background: #fff; border: 1.5px solid var(--line, #E7E9EE); transition: border-color .15s, box-shadow .15s; }
.pay-plans b { font-size: 17px; color: var(--ink); }
.pay-plans small { font-size: 13px; color: var(--mute); }
.pay-plans strong { font-size: 30px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.pay-plans strong em { color: inherit; font-style: normal; font-size: 15px; font-weight: 600; margin-left: 2px; }
.pay-plans i { font-style: normal; font-size: 13px; color: var(--mute); }
.pay-plans u { text-decoration: none; align-self: flex-start; margin-top: 6px; font-size: 12px; font-weight: 600; color: #fff; background: var(--blue); padding: 4px 8px; }
.pay-plans input:checked + span { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue) inset; }
.pay-plans input:checked + span b { color: var(--blue); }
.pay-sum { margin: 26px 0 20px; padding: 20px 22px; background: #fff; border: 1px solid var(--line, #E7E9EE); }
.pay-sum div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.pay-sum span { font-size: 14px; color: var(--mute); }
.pay-sum b { font-size: 16px; }
.pay-sum b.big { font-size: 26px; color: var(--blue); }
.pay-sum p { margin: 10px 0 0; font-size: 13px; color: var(--mute); line-height: 1.6; }
@media (max-width: 760px) { .pay-plans { grid-template-columns: 1fr; } .pay-plans strong { font-size: 26px; } }

/* v14.4 온라인 자료실 배지 · 로그인 링크 */
.menu .new::after { content: "오픈 예정"; right: -46px; white-space: nowrap; }
.navr a.login { text-decoration: none; }

/* v14.5 로그인 · 수강생 자료실 */
.login-form .sx-note { margin: 14px 0 0; }
.mem-list { margin-top: 28px; display: grid; gap: 10px; max-width: 760px; }
.mem-list > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #fff; border: 1px solid #E1E5EB; padding: 18px 22px; }
.mem-list b { font-size: 16px; color: #111; } .mem-list span { font-size: 13px; color: #7E8896; white-space: nowrap; }
.mem-list.locked { opacity: .45; } .mem-list.locked > div span::before { content: "🔒 "; }
.mem-out { margin-top: 36px; }
@media (max-width: 600px) { .mem-list > div { padding: 15px 16px; } .mem-list b { font-size: 15px; } }
.signup-form.is-closed { opacity: .55; } .signup-form.is-closed input { background: #F1F3F6; cursor: not-allowed; } .signup-form.is-closed .btn[disabled] { cursor: not-allowed; }
.kch { margin-top: 28px; max-width: 760px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #FFF8D6; border: 1px solid #F3E39A; padding: 20px 24px; }
.kch b { display: block; font-size: 16px; color: #111; margin-bottom: 4px; } .kch span { font-size: 14px; color: #555; line-height: 1.6; }
.kch .btn { flex: none; }
.sx-done .ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 600px) { .kch { flex-direction: column; align-items: flex-start; padding: 18px; } }
/* v14.6 폼 옆 카톡 대안 · 완료 화면 카톡 연결 */
.kalt { margin-top: 28px; max-width: 760px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #FFF8D6; border: 1px solid #F3E39A; padding: 14px 18px; }
.kalt span { font-size: 15px; color: #333; } .kalt .btn { flex: none; padding: 10px 16px; }
.kalt + .sx-formwrap { margin-top: 14px; }
.sx-done p b.kw { font-size: inherit; color: #111; background: #FFF1A8; padding: 0 4px; }
@media (max-width: 600px) { .kalt { flex-direction: column; align-items: flex-start; } }
/* v14.7 가격 아래 카톡 상담 계기 3가지 */
.khook { margin-top: 36px; }
.khook .kh-t { display: block; font-size: 20px; color: #111; margin-bottom: 14px; } .khook .kh-t em { font-style: normal; color: #0047A0; }
.kh-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kh-g a { display: flex; flex-direction: column; gap: 6px; background: #FFFBE6; border: 1px solid #F3E39A; padding: 20px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.kh-g a:hover { border-color: #E5C400; transform: translateY(-2px); }
.kh-g small { font-size: 12px; font-weight: 800; color: #B59A00; letter-spacing: .08em; }
.kh-g b { font-size: 17px; color: #111; } .kh-g p { margin: 0; font-size: 14px; line-height: 1.65; color: #4A5260; flex: 1; }
.kh-g span { font-size: 13px; font-weight: 700; color: #3C1E1E; margin-top: 6px; }
.p-black .khook .kh-t, .p-night .khook .kh-t { color: #fff; }
@media (max-width: 800px) { .kh-g { grid-template-columns: 1fr; } .khook .kh-t { font-size: 17px; } }
.mknote { margin: 14px 0 0; font-size: 13px; color: #7E8896; text-align: center; }

/* 10-24 한국문신전 수상작 금색 배지 (메인 졸업생 칸 첫 사진) */
#grads .ivk .aw { position: relative; display: block; }
#grads .ivk .aw img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
#grads .ivk .aw::after { content: ""; position: absolute; inset: 0; border: 2px solid #D4AF37; pointer-events: none; }
#grads .ivk .aw b { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg,#B8902E,#E3C56A,#B8902E); color: #1A1406; font-size: 11px; font-weight: 800; line-height: 1.25; text-align: center; padding: 4px 2px; pointer-events: none; letter-spacing: -.2px; }
@media (max-width: 760px) { #grads .ivk .aw b { font-size: 9.5px; padding: 3px 1px; } }