/* THE PLAN 홈 — SBS아카데미 레이아웃 언어를 따른 리디자인 (2026-09-29)
 *
 * 기준 실측(sbsart.com, 1440px):
 *   본문 폭 1200 · 좌측 본문 794 + 여백 63 · 우측 사이드 343
 *   섹션 사이 64 · 첫 섹션 위 96 · 섹션 대제목 42px/800 · 그룹 제목 18px/800 · 카드 제목 18px/700
 *   헤더 81px, 메뉴 16px/400 · 카드 사진 모서리 6px
 * 간격은 4의 배수만 씁니다(4·8·12·16·20·24·32·40·48·64·96).
 */

@font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: url('../fonts/Pretendard-Regular.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: url('../fonts/Pretendard-Bold.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 800; font-display: swap; src: url('../fonts/Pretendard-ExtraBold.subset.woff2') format('woff2'); }

:root {
  --brand: #1f44c9;
  --brand-deep: #14226b;
  --brand-tint: #eef2ff;
  --accent: #ffd43b;
  --accent-ink: #231c00;

  --ink: #16181d;
  --ink-2: #454b57;
  --ink-3: #666d78;
  --ink-4: #a2a8b3;
  --line: #e6e8ec;
  --line-2: #f0f1f4;
  --bg: #ffffff;
  --bg-2: #f6f7f9;
  --dark: #111318;

  --st-open: #1f44c9;   --st-open-bg: #eef2ff;
  --st-always: #0f7a4b; --st-always-bg: #e7f6ee;
  --st-soon: #9a5800;   --st-soon-bg: #fff3dc;
  --st-closed: #5f6670; --st-closed-bg: #eef0f2;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --wrap: 1200px;
  --gutter: 20px;
  --header-h: 80px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* 2026-10-03 Impeccable 감지 gpt-thin-border-wide-shadow(얇은 테두리 + 넓고 흐린 그림자 = 흔한 AI 생성 모양) → 짧고 또렷한 그림자 */
  --shadow-float: 0 4px 12px rgba(17, 19, 24, .14), 0 1px 2px rgba(17, 19, 24, .08);

  --f: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}
/* OD-27 (원장 2026-10-02 "왼쪽 여백을 좀 더 사용") — 넓은 화면(1520px~)에서는 본문·머리말 폭을 1400px까지. 1440 이하 화면은 그대로 */
@media (min-width: 1520px) { :root { --wrap: 1400px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body.hp {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.6 var(--f); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere;
}
img { display: block; max-width: 100%; height: auto; }
::selection { background: #dbe3ff; color: var(--ink); }
html { scrollbar-color: #c3c8d1 transparent; }
input, select { caret-color: var(--brand); }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(31, 68, 201, .12); }
h1, h2, h3, h4, .slide__title, .card__title, .promo__title { text-wrap: balance; }
.sec__lead, .card__desc, .director blockquote { text-wrap: pretty; }
.callcenter__num, .callcenter__campus a, .campus__row a, .consult__tel, .side-news time, .note time, .trust__num { font-variant-numeric: tabular-nums; }
a:not([class]) { text-underline-offset: 3px; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; min-height: 44px; border-radius: var(--r-sm); }
.skip-link:focus { left: 8px; }
.wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* 아이콘 버튼 (과정 찾기 패널 닫기 등) */
.icon-btn { width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.icon-btn:hover { background: var(--bg-2); }

/* 모바일 검색 */
.msearch { display: none; }

/* ── 2단 레이아웃 ─────────────────────────────────── */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 343px; padding-top: 40px; padding-bottom: 96px; }
.col-main { padding-right: 63px; min-width: 0; }
.col-side { border-left: 1px solid var(--line); padding-left: 32px; min-width: 0; }
.side-sticky { position: sticky; top: calc(var(--sb-sticky-h, 125px) + 24px); }   /* 공통 셸이 잰 머리말 높이 — 옆 칸이 머리말에 깔리지 않게 */
/* 1360px 미만은 콘텐츠 오른쪽 끝이 떠 있는 "맨 위로" 버튼 자리까지 온다. 옆 칸이 화면에 붙어 있으면
   그 아래 링크가 버튼에 계속 가려지므로(verify-home-screen G2), 이 폭에서는 옆 칸이 따라오지 않는다. */
@media (max-width: 1359px) { .side-sticky { position: static; } }

/* ── 히어로 ───────────────────────────────────────── */
.hero { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 794 / 400; background: var(--dark); }
.hero__track { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.slide.is-active { opacity: 1; visibility: visible; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s linear; }
.slide.is-active img { transform: scale(1); }
.slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,30,.86) 0%, rgba(10,14,30,.66) 45%, rgba(10,14,30,.12) 100%); }
.slide__txt { position: absolute; z-index: 1; left: 48px; right: 48px; bottom: 48px; color: #fff; }
.slide__kicker { font-size: 12px; font-weight: 700; letter-spacing: .24em; color: #dfe3ea; margin-bottom: 16px; }
.slide__title { font-size: 44px; font-weight: 800; line-height: 1.2; letter-spacing: -0.035em; white-space: pre-line; }
.slide__body { font-size: 16px; line-height: 1.65; color: #e9ecf1; margin-top: 16px; white-space: pre-line; }
.slide__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; }
.slide__cta svg { width: 16px; height: 16px; }
.slide__cta:hover { background: var(--accent); }
.hero__nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; display: grid; place-items: center; opacity: .85; }
.hero__nav:hover { opacity: 1; }
.hero__nav svg { width: 32px; height: 32px; stroke-width: 1.5; }
.hero__nav--prev { left: 8px; } .hero__nav--next { right: 8px; }
.hero__note { margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--ink-3); }
.hero__ctrl { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 8px; }
.hero__dots { display: flex; }
.hero__dots button, .hero__pause { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hero__dots button { width: 44px; }
.hero__dots button::after { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #d4d7dd; transition: width .3s var(--ease), background-color .3s; }
.hero__dots button[aria-selected="true"] { width: 52px; }
.hero__dots button[aria-selected="true"]::after { width: 32px; background: var(--ink); }
.hero__pause { color: var(--ink-2); border-radius: 50%; }
.hero__pause:hover { background: var(--bg-2); }
.hero__pause svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* ── 섹션 공통 ────────────────────────────────────── */
.sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; margin-top: 64px; }
.sec--first { margin-top: 0; padding-top: 88px; }
.sec--rule { border-top: 1px solid var(--line); padding-top: 64px; }
.sec:has(> .sec__head), .sec:has(> .director), .trust { display: block; }
.sec__aside { align-self: start; }
.kicker { font-size: 13px; font-weight: 700; color: var(--brand); margin-bottom: 12px; }
.kicker--light { color: var(--accent); }
.display { font-size: 42px; font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
.display--light { color: #fff; }
.sec__lead { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin-top: 20px; }
.sec__lead strong { color: var(--ink); font-weight: 700; }
.more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.more::after { content: ''; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 4px; }
.more:hover { color: var(--brand); }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.sec__head .sec__lead { margin-top: 0; max-width: 360px; text-align: right; }
.sec__head .more { margin-top: 0; }

.group + .group { margin-top: 56px; }
.group__head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.group__head h3 { font-size: 18px; font-weight: 800; }
.group__meta { font-size: 13px; color: var(--ink-3); }
.group__all { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--brand); display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }

/* ── 카드 ─────────────────────────────────────────── */
.cards { display: grid; gap: 40px 24px; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { position: relative; }
.card a { display: block; }
.card__img { position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-2); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card a:hover .card__img img { transform: scale(1.05); }
.card__badges { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }
.card__title { margin-top: 16px; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card a:hover .card__title { color: var(--brand); }
.card__desc { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 2026-10-03 Impeccable 감지 text-overflow — 캠퍼스·도구 이름이 "…"로 잘려 어느 캠퍼스인지 안 보였다. 항목 단위로 줄바꿈. */
.card__foot { margin-top: 12px; font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; row-gap: 2px; }
.card__foot span { min-width: 0; overflow-wrap: anywhere; }   /* 긴 도구 목록은 안에서도 줄바꿈(375px 가로 넘침 방지 — 화면 게이트 G1) */
.card__foot span + span::before { content: '·'; margin: 0 6px; color: var(--ink-4); }
.card.is-closed .card__img img { filter: grayscale(1); opacity: .55; }
.card.is-closed .card__title, .card.is-closed .card__desc { color: var(--ink-4); }

/* 배지 */
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge--open { color: var(--st-open); background: var(--st-open-bg); }
.badge--always { color: var(--st-always); background: var(--st-always-bg); }
.badge--soon { color: var(--st-soon); background: var(--st-soon-bg); }
.badge--closed { color: var(--st-closed); background: var(--st-closed-bg); }
.badge--consult { color: #334155; background: transparent; box-shadow: inset 0 0 0 1px #c9d2df; }   /* OD-24·OD-32 테두리만 */
.card__badges .badge { background: rgba(255,255,255,.94); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ── 프로모 띠 ────────────────────────────────────── */
.promo { position: relative; margin-top: 64px; border-radius: var(--r); background: var(--dark); color: #fff; padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; overflow: hidden; }
.promo__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11,13,17,.94) 0%, rgba(11,13,17,.86) 55%, rgba(11,13,17,.55) 100%); }
.promo__txt, .promo .btn { z-index: 2; }
.promo__txt { position: relative; }
.promo__kicker { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #b9bfca; }
.promo__title, .promo h2 { font-size: 24px; font-weight: 800; line-height: 1.35; margin-top: 8px; letter-spacing: -0.02em; }
.promo__body { font-size: 14px; color: #c4c9d2; margin-top: 8px; }
.promo .btn { position: relative; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0 24px; border-radius: 999px; border: 0; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: transform .09s, background .16s; }
.btn:active { transform: scale(.97); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: #ffcb0f; }
.btn--block { width: 100%; }

/* ── 자격증 탭 ────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tab { height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.tab:hover { border-color: var(--ink-3); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.certpanel { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; }
.certpanel__photo { position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 3 / 4; }
.certpanel__photo img { width: 100%; height: 100%; object-fit: cover; }
.certpanel__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.7)); }
.certpanel__photo div { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; border-radius: 8px; background: rgba(12, 14, 19, .82); color: #fff; }
.certpanel__photo strong { display: block; font-size: 20px; font-weight: 800; }
.certpanel__photo span { display: block; font-size: 13px; line-height: 1.5; color: #e4e7ec; margin-top: 6px; }
.certlist { border-top: 2px solid var(--ink); }
.certlist li { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.certlist__txt { flex: 1 1 auto; min-width: 0; }
.certlist .certlist__name { display: block; font-size: 16px; font-weight: 700; }
.certlist .certlist__desc { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.certlist li.is-closed .certlist__name { color: var(--ink-4); font-weight: 400; }
.certlist a { font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; min-height: 44px; }
.certlist a:hover { color: var(--brand); }
/* OD-24: 자격증 이름이 자격증 상세 페이지 링크 — 위 .certlist a(작은 회색 글자) 규칙을 받지 않는다 */
.certlist a.certlist__txt { display: block; font-size: inherit; color: inherit; min-height: 44px; }
.certlist a.certlist__txt:hover .certlist__name, .certlist a.certlist__txt:focus-visible .certlist__name { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.certpanel__tools { margin-top: 16px; font-size: 14px; color: var(--ink-3); }
.certpanel__tools strong { color: var(--ink-2); margin-right: 8px; }
.legend { display: flex; gap: 8px; margin-top: 24px; justify-content: flex-end; }

/* ── 결과물 ───────────────────────────────────────── */
.works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; }
.work__img { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-2); }
.work__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.work:hover .work__img img { transform: scale(1.05); }
.work strong { display: block; margin-top: 12px; font-size: 15px; font-weight: 700; }
.work > span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }

/* ── 캠퍼스 ───────────────────────────────────────── */
.campus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.campus__img { position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 10; }
.campus__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.campus li a:hover .campus__img img { transform: scale(1.05); }
.campus__badge { position: absolute; left: 8px; top: 8px; height: 24px; padding: 0 8px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; }
.campus__badge--sub { background: rgba(255,255,255,.94); color: var(--ink); }
.campus h3 { margin-top: 16px; font-size: 18px; font-weight: 700; }
.campus p { margin-top: 6px; font-size: 14px; color: var(--ink-3); }
.campus__row { display: flex; gap: 8px; margin-top: 12px; }
.campus__row a { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 700; }
.campus__row a:hover { border-color: var(--ink); }
.campus__row svg { width: 16px; height: 16px; }

/* ── 원장 ─────────────────────────────────────────── */
.director { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: center; }
.director__photo { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-2); }
.director__photo img { width: 100%; height: 100%; object-fit: cover; }
.director blockquote { margin: 16px 0 0; font-size: 22px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; }
.director__name { margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.director__name strong { color: var(--ink); margin-right: 6px; }
.director__cred { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.director__cred li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.director__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.director__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.director__links a:hover { border-color: var(--ink); color: var(--ink); }
.home-login { margin: 0; max-width: none; padding: 20px max(var(--gutter), calc((100% - var(--wrap)) / 2)) 0; background: #0b0d11; font-size: 12px; color: #7b8290; }
.director__cred li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

/* ── 학습가이드 ───────────────────────────────────── */
.notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; }
.note a { display: block; }
.note__img { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 3 / 4; background: var(--bg-2); }
.note__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.note a:hover .note__img img { transform: scale(1.05); }
.note__cat { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--brand); }
.note strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 15px; font-weight: 700; line-height: 1.45; }
.note time { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-3); }

/* ── 신뢰 지표 ────────────────────────────────────── */
.trust { padding-top: 72px; }
.trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.trust__list li + li { border-left: 1px solid var(--line); }
.trust__num { display: block; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.trust__label { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.trust__note { margin: 32px auto 0; max-width: 640px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

/* ── 사이드바 ─────────────────────────────────────── */
.side-block + .side-block { margin-top: 32px; }
.side-block__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.side-block__head h2 { font-size: 18px; font-weight: 700; }
.side-more { font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 2px; min-height: 44px; min-width: 44px; justify-content: flex-end; margin-block: -12px; }
.side-more::after { content: '›'; font-size: 16px; line-height: 1; }
.side-more:hover { color: var(--brand); }
.callcenter__num { display: flex; align-items: center; min-height: 44px; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.callcenter__hours { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.callcenter__campus { margin-top: 16px; border-top: 1px solid var(--line); }
.callcenter__campus li { display: flex; justify-content: space-between; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.callcenter__campus span { color: var(--ink-2); }
.callcenter__campus a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-variant-numeric: tabular-nums; }
.callcenter__campus a:hover { color: var(--brand); }

.quick { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.quick li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quick li:nth-child(3n) { border-right: 0; }
.quick li:nth-last-child(-n+3) { border-bottom: 0; }
.quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 104px; font-size: 13px; font-weight: 700; color: var(--ink-2); position: relative; }
.quick a:hover { background: var(--bg-2); color: var(--ink); }
.quick__ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.quick__ic svg { width: 24px; height: 24px; }
.quick__ic--blue { background: var(--brand-tint); color: var(--brand); }
.quick__ic--yellow { background: #fff6d6; color: #8a6400; }
.quick__ic--green { background: var(--st-always-bg); color: var(--st-always); }
.quick__ic--ink { background: var(--bg-2); color: var(--ink); }
.quick__flag { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; line-height: 16px; white-space: nowrap; }

.side-news li { border-bottom: 1px solid var(--line-2); }
.side-news a { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; }
.side-news strong { font-size: 14px; font-weight: 400; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.side-news a:hover strong { color: var(--brand); }
.side-news time { font-size: 12px; color: var(--ink-3); }
.side-kakao { margin-top: 32px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--r); background: #fee500; color: #191600; }
.side-kakao__ic { width: 40px; height: 40px; border-radius: 50%; background: #191600; color: #fee500; display: grid; place-items: center; }
.side-kakao__ic svg { fill: currentColor; stroke: none; width: 22px; height: 22px; }
.side-kakao strong { display: block; font-size: 15px; }
.side-kakao small { font-size: 12px; opacity: .75; }

/* ── 상담 ─────────────────────────────────────────── */
.consult { background: var(--dark); color: #fff; }
.consult__in { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 64px; padding-top: 96px; padding-bottom: 96px; }
.consult__txt p:not(.kicker) { margin-top: 20px; color: #c4c9d2; font-size: 16px; line-height: 1.7; }
.consult__tel { display: inline-block; margin-top: 32px; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; }
.consult__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
/* 칸 최소 폭 0 + 입력칸은 칸 너비: 선택 상자는 가장 긴 선택지만큼 넓어지려 하는데(브라우저·OS마다 폭이 다름),
   그러면 520px 폼 칸이 밀려 화면 밖으로 넘쳤다 — Linux Chrome CI에서 verify-home-screen G1이 잡음. */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: 13px; color: #c4c9d2; }
.field input, .field select { width: 100%; min-width: 0; box-sizing: border-box; height: 52px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid #2c313b; background: #1a1d24; color: #fff; }
.field input::placeholder { color: #6d7480; }
.field input:focus-visible, .field select:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: #ff8a80; }
.consent { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: #c4c9d2; }
.consent input { width: 22px; height: 22px; accent-color: var(--accent); }
.consent a { text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.consult__form .btn { grid-column: 1 / -1; height: 56px; font-size: 16px; }
/* STAGING·PRODUCTION: 빌드가 폼 대신 넣는 실제 연락처 안내 (release-profile.js buildNonWriteConsultationContactHtml) */
#consultation-contact-root:empty { display: none; }
.nonwrite-consultation { display: grid; gap: 24px; }
.nonwrite-consultation-note { font-size: 15px; line-height: 1.7; color: #c4c9d2; }
.nonwrite-consultation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.nonwrite-consultation-actions a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 700; }
.nonwrite-consultation-actions .btn-primary { background: #fee500; color: #191600; }
.nonwrite-consultation-actions .pill-btn { border: 1px solid #3a404b; color: #fff; }
.nonwrite-consultation-campuses h3 { font-size: 15px; color: #fff; margin-bottom: 12px; }
.contact-campus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact-campus-item { display: flex; flex-direction: column; gap: 2px; padding: 16px; border: 1px solid #2c313b; border-radius: var(--r-sm); font-size: 13px; color: #aeb4be; }
.contact-campus-name { color: #fff; font-weight: 700; font-size: 15px; }
.contact-campus-tel { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 719px) { .contact-campus-grid { grid-template-columns: minmax(0, 1fr); } }
.field--wide { grid-column: 1 / -1; }
.consult__error { grid-column: 1 / -1; font-size: 14px; font-weight: 700; color: #ff9b8f; min-height: 0; }
.consult__error:empty { display: none; }
.preview-simulation-notice { margin-bottom: 16px; padding: 12px 16px; border-radius: var(--r-sm); background: #1f2430; font-size: 13px; color: #d5dae2; }
.consult__success { grid-column: 1 / -1; padding: 14px 16px; border-radius: var(--r-sm); background: #1d2a1f; color: #bff0c8; font-size: 14px; line-height: 1.6; }

.mquick { display: none; }

/* 예시(스톡)·출처 미확인 사진 표시 — 사진마다 출처 기록으로 정해진다 (js/home-sbs.js provenance) */
.sample-note { margin-top: 20px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.sample-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; background: rgba(17,19,24,.72); color: #fff; font-size: 11px; font-weight: 700; }
.slide .sample-tag { position: absolute; right: 16px; bottom: 16px; z-index: 2; }
.campus__img .sample-tag, .work__img .sample-tag, .card__img .sample-tag, .note__img .sample-tag, .certpanel__photo .sample-tag { position: absolute; right: 8px; bottom: 8px; z-index: 2; }
.certpanel__photo .sample-tag { top: 8px; bottom: auto; }
.work__img, .note__img { position: relative; }
.sample-tag--unknown { background: #8a3b00; }

/* 사진 없는 자리 (공개 빌드에서 실제 사진이 아직 없을 때) */
.is-nophoto { background: #eef1f6; display: grid; place-items: center; }
.nophoto-label { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.certpanel__photo.is-nophoto { background: var(--brand-deep); }
.certpanel__photo.is-nophoto::after { display: none; }
.promo:not(:has(.promo__bg))::before { background: none; }
.promo > .sample-tag { position: absolute; right: 12px; bottom: 12px; z-index: 3; }

/* ── 과정 찾기 패널 ─────────────────────────────── */
.finder { position: fixed; inset: 0; z-index: 70; background: rgba(10,12,16,.5); display: flex; justify-content: center; align-items: flex-start; padding: 80px 16px 16px; }
.finder__panel { width: min(720px, 100%); max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-float); }
.finder__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.finder__head h2 { font-size: 20px; font-weight: 800; }
.finder__form { display: flex; gap: 8px; }
.finder__form input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 16px; }
.finder__form input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.finder__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.finder__chip { height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); font-size: 14px; color: var(--ink-2); cursor: pointer; }
.finder__chip:hover { border-color: var(--ink-3); color: var(--ink); }
.finder-results h3, .search-results h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 800; }
.finder__list li { border-bottom: 1px solid var(--line-2); }
.finder__list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; min-height: 56px; padding: 10px 4px; }
.finder__list a:hover .finder__name { color: var(--brand); }
.finder__list a.is-closed .finder__name { color: var(--ink-4); }
.finder__name { font-size: 16px; font-weight: 700; }
.finder__meta { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); }
.finder__empty { margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.finder__foot { margin-top: 20px; font-size: 14px; color: var(--ink-3); }
.finder__foot a { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 719px) { .finder { padding: 0; } .finder__panel { max-height: 100vh; height: 100%; border-radius: 0; } }

/* ── 반응형 ───────────────────────────────────────── */
@media (max-width: 1139px) {
  :root { --header-h: 64px; }
  .layout { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
  .col-main { padding-right: 0; }
  .col-side { display: none; }
  .mquick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 24px; }
  .mquick a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; font-weight: 700; color: var(--ink-2); position: relative; min-height: 44px; }
  .mquick .quick__ic { width: 56px; height: 56px; }
  .mquick .quick__ic svg { width: 28px; height: 28px; }
  .consult__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sec { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sec__lead br { display: none; }
  .display br { display: none; }
  .sec__aside .more { display: none; }
}
@media (max-width: 1139px) and (min-width: 720px) {
  .mquick { max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 719px) {
  :root { --gutter: 16px; }
  body.hp { font-size: 15px; }
  .msearch { display: block; padding: 12px var(--gutter) 0; }
  .msearch__btn { width: 100%; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-3); font-size: 14px; text-align: left; cursor: pointer; }
  .msearch__btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .msearch__btn svg { width: 20px; height: 20px; color: var(--ink-2); }
  .layout { padding-top: 16px; padding-bottom: 64px; }
  .hero { aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
  .slide::after { background: linear-gradient(180deg, rgba(10,14,30,.2) 0%, rgba(10,14,30,.72) 38%, rgba(10,14,30,.92) 100%); }
  .slide__txt { left: 24px; right: 24px; bottom: 28px; }
  .slide__kicker { font-size: 11px; margin-bottom: 12px; }
  .slide__title { font-size: 30px; }
  .slide__body { font-size: 14px; margin-top: 12px; }
  .slide__cta { margin-top: 20px; }
  .hero__nav { display: none; }
  .sec { margin-top: 48px; }
  .sec--first { padding-top: 56px; }
  .sec--rule { padding-top: 48px; }
  .display { font-size: 32px; }
  .sec__lead { margin-top: 12px; font-size: 15px; }
  .sec__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .sec__head .sec__lead { text-align: left; }
  .cards { gap: 28px 12px; }
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card__title { font-size: 16px; margin-top: 12px; }
  .card__desc { font-size: 13px; }
  .group + .group { margin-top: 48px; }
  .promo { flex-direction: column; align-items: flex-start; padding: 28px 24px; margin-top: 48px; gap: 20px; }
  .promo__title, .promo h2 { font-size: 20px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 20px; padding: 0 var(--gutter); scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; height: 44px; }
  .certpanel { grid-template-columns: minmax(0, 1fr); }
  .certpanel__photo { aspect-ratio: 16 / 9; }
  .legend { justify-content: flex-start; flex-wrap: wrap; }
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .campus { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .campus::-webkit-scrollbar { display: none; }
  .campus > li { flex: 0 0 80%; scroll-snap-align: start; }
  .campus h3 { font-size: 17px; }
  .campus__row a { height: 44px; }
  .director { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .director__photo { max-width: 200px; }
  .director blockquote { font-size: 19px; }
  .director__cred { grid-template-columns: minmax(0, 1fr); }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .trust__list li:nth-child(3) { border-left: 0; }
  .trust__num { font-size: 30px; }
  .consult__in { padding-top: 64px; padding-bottom: 64px; }
  .consult__form { grid-template-columns: minmax(0, 1fr); }
  .consult__tel { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  html { scroll-behavior: auto; }
}

/* OD-27 홈 안내 팝업(js/site-popup.js) — 화면 왼쪽 아래 카드, 페이지를 막지 않는다 */
.site-popup { position: fixed; left: 24px; bottom: 24px; z-index: 60; width: min(360px, calc(100vw - 32px)); background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: 22px 22px 0; }
.site-popup h2 { margin: 0 0 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.site-popup p { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.site-popup__go { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink, #16181d); font-weight: 800; text-decoration: none; }
.site-popup__foot { display: flex; justify-content: space-between; margin-top: 8px; border-top: 1px solid var(--line); }
.site-popup__foot button { min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-3); cursor: pointer; }
@media (max-width: 719px) { .site-popup { left: 16px; right: 16px; bottom: calc(var(--sticky-h, 68px) + 12px); width: auto; } }