/* 디자인 기준: UI UX Pro Max(MIT)의 추천값.
   스타일 "Minimalism & Swiss Style", 패턴 "Trust & Authority + Conversion", 서체 "Korean Modern"(Noto Sans KR),
   움직임 "Stagger List"(back.out(1.4), 300-450ms, 60ms 간격). 색은 같은 툴 색 DB의 주황 계열.
   주황 면 위 글자는 먹색만(5.0:1 이상), 크림 위 작은 주황 글자는 #C2410C(4.9:1), 먹색 면 위 주황은 #FB923C(7.9:1). */
@font-face {
  font-family: "Noto Sans KR S";
  src: url("../fonts/sans-subset.0a6ca1b4.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --bg: #FFF7ED;
  --white: #FFFFFF;
  --peach: #FFEDD5;
  --ink: #0F172A;
  --ink-2: #1E293B;
  --muted: #475569;
  --line: #FED7AA;
  --line-dark: rgba(255,255,255,.14);
  --o: #EA580C;
  --o-2: #F97316;
  --o-text: #C2410C;
  --o-on-dark: #FB923C;
  --radius: 10px;
  --r-card: 16px;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 28px rgba(15,23,42,.07);
  --shadow-lg: 0 2px 4px rgba(15,23,42,.06), 0 24px 48px rgba(15,23,42,.12);
  --wrap: 1240px;
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);
  --sans: "Noto Sans KR S", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-color: var(--o); text-decoration-thickness: 2px; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 900; }
p { margin: 0; }
em { font-style: normal; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 60; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.questions :focus-visible, .rule-band :focus-visible, .t-dark :focus-visible, .role-us :focus-visible, .foot :focus-visible, .marquee :focus-visible, .home-dark :focus-visible, .cta-band :focus-visible, .contact-card :focus-visible, .ab-partners :focus-visible, .stat-hero :focus-visible, .b-dark:focus-visible, .lec:first-child :focus-visible, .stepper li:last-child :focus-visible { outline-color: var(--o-on-dark); }
.home-promise :focus-visible, .b-solid:focus-visible, .lec-cta :focus-visible, .promise :focus-visible { outline-color: var(--ink); }

/* 제목: 굵은 고딕 + 앞에 주황 짧은 선(Swiss 격자의 기준선) */
.title { font-size: 44px; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.2; letter-spacing: -0.045em; text-wrap: balance; }
.title::before { content: ""; display: block; width: 48px; height: 4px; background: var(--o); margin-bottom: 24px; }
.title-sm { font-size: 26px; letter-spacing: -0.03em; }
.section-lead { margin-top: 20px; max-width: 660px; font-size: 19px; color: var(--muted); }

/* 버튼: 올리면 색이 왼쪽에서 차오른다 */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 26px; border-radius: var(--radius); background: var(--ink); color: #fff; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; border: 2px solid var(--ink); cursor: pointer; white-space: nowrap; transition: color .25s ease, border-color .25s ease, transform .25s var(--ease-back); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--o); transform: scaleX(0); transform-origin: right center; transition: transform .3s cubic-bezier(.7,0,.2,1); }
.btn:hover { transform: translateY(-2px); color: var(--ink); border-color: var(--o); }
.btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-light { background: var(--o); border-color: var(--o); color: var(--ink); }
.btn-light::before { background: var(--ink); }
.btn-light:hover { color: #fff; border-color: var(--ink); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line::before { background: var(--ink); }
.btn-line:hover { color: #fff; border-color: var(--ink); }
.btn-line span { transition: transform .25s ease; }
.btn-line:hover span { transform: translateX(4px); }
.btn-line-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-line-light::before { background: #fff; }
.btn-line-light:hover { color: var(--ink); border-color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-lg { min-height: 60px; padding: 0 32px; font-size: 17px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* 과정 칩: 환급은 먹색, 자체·맞춤은 주황. 세 곳(진행 5단계, 역할, 이력)에 같은 모양으로 쓴다 */
.tag { display: inline-block; font-style: normal; font-size: 13px; font-weight: 800; line-height: 1.5; padding: 2px 8px; margin-right: 6px; vertical-align: 1px; }
.tag-ref { background: var(--ink); color: var(--bg); }
.tag-own { background: var(--o-2); color: var(--ink); }

/* 머리글: 상단 메뉴(GNB). 지금 페이지는 aria-current로 표시 */
.top { position: fixed; inset: 0 0 auto 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); transition: box-shadow .2s ease; }
.top.solid { box-shadow: 0 6px 20px -12px rgba(15,23,42,.25); }
.top-in { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 22px; color: var(--ink); text-decoration: none; letter-spacing: -0.045em; }
.brand-mark { width: 14px; height: 14px; border-radius: 4px; background: var(--o); box-shadow: 5px 5px 0 var(--ink); margin-right: 4px; }
.nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-link { position: relative; padding: 10px 14px; border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-size: 16px; font-weight: 700; transition: background-color .2s ease, color .2s ease; }
.nav-link:hover { background: var(--peach); color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--o-text); }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--o); }
.nav-cta { margin-left: 10px; }
.menu-btn { font: inherit; display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn .i { width: 22px; height: 22px; }

/* 아이콘(Lucide 스프라이트) */
.i { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.18em; }
.i-lg { width: 30px; height: 30px; }
.i-xl { width: 40px; height: 40px; }
.btn .i { margin-right: 2px; }

/* 공통: 섹션 머리, 작은 라벨, 더 보기 */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: var(--o-text); letter-spacing: 0.02em; margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--o); }
.sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 32px; margin-bottom: 48px; }
.sec-head .eyebrow { grid-column: 1 / -1; }
.sec-head .title::before { display: none; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ink); font-size: 15px; font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.more:hover { background: var(--o); border-color: var(--o); }
.more-dark { color: #fff; border-color: rgba(255,255,255,.4); }
.more-dark:hover { color: var(--ink); }
.more span { transition: transform .2s ease; }
.more:hover span { transform: translateX(4px); }

/* 첫 화면: 왼쪽 문장, 오른쪽 화면 모형(실제 약속을 담은 카드) */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; right: 24px; top: 96px; bottom: 24px; width: 44vw; background: #FFEBD3; border-radius: 32px; z-index: -1; }
.hero-in { position: relative; padding-top: 128px; padding-bottom: 80px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.hero-copy { grid-column: 1 / 7; }
.hero-brand { display: flex; align-items: center; gap: 14px; font-size: 22px; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.3; font-weight: 800; letter-spacing: -0.035em; color: var(--ink); margin-bottom: 24px; text-wrap: balance; }
.hero-brand::before { content: ""; flex: 0 0 auto; width: 40px; height: 4px; border-radius: 2px; background: var(--o); }
.hero h1 { font-size: 64px; font-size: clamp(52px, 6.2vw, 96px); line-height: 1.04; letter-spacing: -0.055em; }
.h1-pre { display: block; font-size: .4em; line-height: 1.3; letter-spacing: -0.035em; font-weight: 700; color: var(--muted); margin-bottom: .2em; }
.hero h1 em { color: var(--o); }
.h1-line { display: inline-block; white-space: nowrap; }
.hero-lead { margin-top: 28px; max-width: 560px; }
.hero-lead p { font-size: 18px; line-height: 1.7; color: var(--ink-2); font-weight: 500; }
.hero-lead p + p { margin-top: 8px; }
.hero-lead .lead-1 { font-size: 24px; line-height: 1.4; font-weight: 900; color: var(--ink); letter-spacing: -0.035em; }
.hero-lead strong { font-weight: 900; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero-lead .num { text-decoration: underline; text-decoration-color: var(--o); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hero .cta { margin-top: 32px; align-items: center; gap: 28px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 800; color: var(--ink); text-decoration: underline; text-decoration-color: var(--o); text-decoration-thickness: 2px; text-underline-offset: 8px; cursor: pointer; }
.link-arrow span { transition: transform .2s ease; }
.link-arrow:hover span { transform: translateX(4px); }
.link-light { color: #fff; text-decoration-color: var(--o-on-dark); }
.hero-mail { margin-top: 14px; }
.mail-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--muted); cursor: pointer; }
.mail-copy .i { width: 16px; height: 16px; color: var(--o); }
.mail-copy span { color: var(--o-text); text-decoration: underline; text-underline-offset: 3px; }
.mail-copy:hover span { color: var(--ink); }

.hero-visual { grid-column: 7 / -1; position: relative; min-height: 540px; }
.mock { position: absolute; background: var(--white); border-radius: var(--r-card); box-shadow: 0 24px 48px -12px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06); border: 1px solid rgba(15,23,42,.06); }
.mock-main { left: 8%; right: 4%; top: 104px; padding: 0 0 20px; overflow: hidden; }
.hero-visual { min-height: 600px; }
.mock-bar { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.mock-bar .i { width: 20px; height: 20px; color: var(--o); }
.mock-bar b { font-size: 15px; font-weight: 800; color: var(--ink); }
.mock-pill { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--peach); color: var(--o-text); font-size: 12.5px; font-weight: 800; }
.mock-rows { list-style: none; margin: 0; padding: 14px 22px 0; display: grid; gap: 6px; }
.mock-rows li { display: grid; grid-template-columns: 24px 150px 1fr 54px; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.mr-n { width: 24px; height: 24px; border-radius: 7px; background: #E2E8F0; color: var(--ink-2); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.mr-t { font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-bar { height: 8px; border-radius: 4px; background: #E2E8F0; transform-origin: left; }
.mr-bar[data-m="30"] { width: 25%; } .mr-bar[data-m="70"] { width: 58%; } .mr-bar[data-m="60"] { width: 50%; } .mr-bar[data-m="120"] { width: 100%; } .mr-bar[data-m="40"] { width: 33%; }
.mock-rows li.mr-main { background: var(--peach); border-radius: 10px; margin: 0 -10px; padding: 8px 10px; }
.mr-main .mr-n { background: var(--o); color: var(--ink); }
.mr-main .mr-t { color: var(--ink); font-weight: 900; }
.mr-main .mr-bar { background: var(--o); }
.mr-m { font-size: 13px; font-weight: 700; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.mock-foot { margin: 14px 22px 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mock-badge, .mock-note { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.mock-badge div, .mock-note div { display: grid; }
.mock-badge b, .mock-note b { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.2; }
.mock-badge span, .mock-note span { font-size: 13.5px; font-weight: 600; }
.mock-badge { right: 0; top: 16px; background: var(--ink); border-color: var(--ink); }
.mock-badge .i, .mock-badge b { color: var(--o-on-dark); }
.mock-badge span { color: #E2E8F0; }
.mock-note { left: 0; bottom: 0; }
.mock-note .i { color: var(--o); }
.mock-note span { color: var(--muted); }
.mock-chip { left: 0; top: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.mock-chip img { height: 26px; width: auto; }
.mock-chip span { font-size: 13.5px; font-weight: 800; color: var(--ink); padding-left: 10px; border-left: 1px solid var(--line); }

/* 포트폴리오 띠: 끝없이 왼쪽으로 흐른다. 올리거나 포커스하면 멈춘다 */
.marquee { position: relative; background: var(--ink); color: #E2E8F0; overflow: hidden; }
/* 5초 넘게 움직이는 내용은 멈출 수 있어야 한다(WCAG 2.2.2). 키보드·터치로도 누를 수 있는 버튼 */
.marquee-toggle { position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; min-height: 44px; min-width: 76px; padding: 0 18px; border-left: 1px solid rgba(255,255,255,.2) !important; background: var(--ink); color: var(--bg); border: 0; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.marquee-toggle:hover { background: var(--ink-2); color: var(--o-on-dark); }
.marquee.paused .marquee-track { animation-play-state: paused; }
/* 속도: 한 세트 폭(데스크톱 약 5,870px) ÷ 초당 70px ≈ 84초. 눈으로 따라 읽을 수 있는 속도 */
.marquee-track { display: flex; width: max-content; animation: marquee 84s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-set { list-style: none; margin: 0; display: flex; align-items: center; padding: 20px 0; white-space: nowrap; font-size: 21px; line-height: 1.3; letter-spacing: -0.03em; font-weight: 500; }
.marquee-set strong { color: var(--o-on-dark); }
.marquee-set strong { font-weight: 900; }
.marquee-set .marquee-label { background: var(--o-2); color: var(--ink); border-radius: 999px; font-size: 16px; font-weight: 700; padding: 8px 14px; margin: 0 40px 0 24px; letter-spacing: 0; }
.marquee-set li:not(.marquee-label) { margin-right: 32px; }
.marquee-set li:not(.marquee-label)::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: #475569; margin-left: 32px; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 메인 섹션 */
.home-sec { padding: 128px 0; }
.home-dark { background: var(--ink); color: #fff; }
.home-dark .eyebrow { color: var(--o-on-dark); }
.home-dark .q-grid { margin-top: 0; }
.home-dark .q { background: #1B2537; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); padding: 32px 30px 30px; }
.home-dark .q::before { display: none; }
.q-n { align-self: flex-start; font-size: 13.5px; font-weight: 800; color: var(--ink); background: var(--o-2); padding: 4px 12px; border-radius: 999px; margin-bottom: 20px; }
.home-dark .q h3 { font-size: 24px; min-height: 2.6em; }
.home-dark .q-ask { margin-top: 12px; font-size: 18px; font-weight: 600; }
.home-dark .q-ans { font-size: 15.5px; color: #E2E8F0; margin-bottom: 24px; }
.home-dark .q-kick { font-size: 20px; padding-top: 20px; }

/* Bento 카드(UI UX Pro Max 보조 스타일: 크기가 다른 카드, 모서리 16px, 옅은 그림자) */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(240px, auto); gap: 16px; }
.bento-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 32px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .25s var(--ease-back), box-shadow .25s ease; }
a.bento-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.bento-card .i-xl { margin-bottom: auto; }
.b-key { align-self: flex-start; margin-top: 24px; font-size: 13.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.bento-card h3 { margin-top: 12px; font-size: 22px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; letter-spacing: -0.04em; text-wrap: balance; }
.bento-card h3 + p { margin-top: 10px; font-size: 16px; line-height: 1.7; max-width: 460px; }
.b-go { position: absolute; right: 22px; top: 22px; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; border: 2px solid currentColor; opacity: 0; transform: translateX(-6px); transition: transform .25s var(--ease-back), opacity .2s; }
a.bento-card:hover .b-go, a.bento-card:focus-visible .b-go { opacity: 1; transform: rotate(-45deg); }
.b-wide { grid-column: span 2; }
.bento > .b-solid { grid-row: span 2; background: var(--o); color: var(--ink); }
.b-mark { position: absolute; right: -24px; bottom: -24px; width: 220px; height: 220px; color: var(--ink); opacity: .08; }
.b-solid .b-key { margin-top: 0; font-size: 15px; }
.b-solid h3 { font-size: 36px; font-size: clamp(30px, 3vw, 42px); margin-top: 18px; }
.b-solid h3 + p { font-size: 18px; color: var(--ink); }
.b-stats { margin: auto 0 0; padding-top: 24px; border-top: 1px solid rgba(15,23,42,.25); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.b-stats dt { font-size: 48px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.b-stats dd { margin: 8px 0 0; font-size: 14px; font-weight: 700; }
.b-dark { background: var(--ink); color: #fff; }
.b-dark .i-xl { color: var(--o-on-dark); }
.b-dark .b-key { background: var(--o-2); color: var(--ink); }
.b-dark p { color: #CBD5E1; }
.b-white .i-xl, .b-peach .i-xl { color: var(--o); }
.b-peach { background: var(--peach); box-shadow: none; }
.b-peach .b-key { background: var(--o-2); color: var(--ink); }

/* 약속(메인): 주황 면 위 흰 카드, 첫 카드는 먹색으로 대표 숫자 */
.home-promise { background: var(--o); padding: 112px 0 96px; }
.home-promise .eyebrow { color: var(--ink); }
.home-promise .eyebrow::before { background: var(--ink); }
.stat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { background: var(--white); border-radius: var(--r-card); padding: 28px; box-shadow: var(--shadow); }
.stat .i-lg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--peach); color: var(--o-text); }
.stat-num { margin-top: 20px; font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.stat-num small { font-size: 24px; font-weight: 800; color: var(--muted); letter-spacing: -0.03em; }
.stat-label { margin-top: 12px; font-size: 16.5px; font-weight: 800; }
.stat p:last-child { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.stat-hero { background: var(--ink); color: #fff; }
.stat-hero .i-lg { background: rgba(251,146,60,.16); color: var(--o-on-dark); }
.stat-hero .stat-num { color: var(--o-on-dark); }
.stat-hero .stat-num small { color: #CBD5E1; }
.stat-hero p:last-child { color: #CBD5E1; }

/* 다섯 단계(메인): 시작은 주황, 끝은 먹색, 카드 사이를 잇는 선 */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.stepper li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow); }
.stepper li:not(:last-child)::after { content: "→"; position: absolute; top: 28px; right: -15px; width: 14px; text-align: center; color: var(--o); font-weight: 900; }
.st-n { width: 36px; height: 36px; border-radius: 10px; background: var(--peach); color: var(--o-text); font-weight: 900; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.stepper b { font-size: 17px; font-weight: 800; }
.stepper .st-chips { font-size: 15px; }
.stepper .actor-both, .stepper .st-due { color: var(--bg); }
.stepper li:first-child { background: var(--o); }
.stepper li:first-child .st-n { background: var(--ink); color: var(--o-on-dark); }

.stepper li:last-child { background: var(--ink); color: #fff; }
.stepper li:last-child .st-n { background: var(--o-2); color: var(--ink); }
.stepper li:last-child .actor-us { color: var(--ink); }

/* 협력 대학교(메인) */
.home-partners { background: var(--white); border-top: 1px solid var(--line); }
.partners-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.partners-in .title-sm { line-height: 1.4; margin-bottom: 18px; }
.partner-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.partner-cards li { position: relative; display: flex; align-items: center; justify-content: center; min-height: 132px; padding: 24px; border-radius: var(--r-card); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.partner-cards .tag { position: absolute; top: 12px; right: 12px; margin: 0; border-radius: 999px; }
.partner-cards img { height: 56px; width: auto; }
.past-label { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 800; color: var(--muted); }
.past-logos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.past-logos li { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.past-logos img { max-height: 28px; width: auto; max-width: 100%; }
.past-logos b { font-size: 14.5px; line-height: 1.3; font-weight: 800; color: var(--ink-2); }

/* CTA 배너(모든 페이지 끝) */
.cta-band { background: var(--ink); color: var(--bg); padding: 88px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.cta-band-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.cta-band h2 { font-size: 44px; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.12; letter-spacing: -0.055em; }
.cta-band h2 span { color: var(--o-on-dark); }
.cta-line { display: inline-block; margin-top: 24px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); background: var(--peach); padding: 8px 16px; border-radius: 999px; }
.cta-get { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cta-get li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-card); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.cta-get .i { width: 24px; height: 24px; color: var(--o-on-dark); margin-top: 2px; }
.cta-get span { color: #E2E8F0; font-size: 15px; }
.cta-get b { display: block; color: #fff; font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.cta-band .cta { align-items: center; gap: 24px; }
.cta-band .btn-light { background: var(--o-2); border-color: var(--o-2); color: var(--ink); min-height: 60px; font-size: 18px; font-weight: 800; }
.cta-band .btn-light::before { background: #fff; }
.cta-band .btn-light:hover { color: var(--ink); border-color: #fff; }
.cta-mail { margin-top: 12px; font-size: 15px; color: #CBD5E1; }

/* 하위 페이지 머리: 왼쪽 글, 오른쪽에 그 페이지의 핵심(숫자·칩·단계·메일) */
.page-hero { position: relative; overflow: hidden; padding: 144px 0 72px; background: var(--peach); border-bottom: 1px solid var(--line); }
.page-hero-sm { padding: 132px 0 48px; }
.ph-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; }
.crumb { display: flex; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.crumb a { color: var(--muted); text-decoration: none; padding: 0 4px; margin: 0 -4px; }
.crumb a:hover { color: var(--ink); }
.page-hero h1 { font-size: 52px; font-size: clamp(38px, 5vw, 68px); line-height: 1.12; letter-spacing: -0.055em; }
.page-lead { margin-top: 20px; max-width: 600px; font-size: 18.5px; color: var(--ink-2); }
.ph-cta { margin-top: 28px; align-items: center; gap: 24px; }
.ph-aside:empty { display: none; }
.ph-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ph-stats li { display: flex; align-items: baseline; gap: 16px; padding: 18px 22px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.ph-stats b { min-width: 120px; font-size: 40px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: var(--o-text); font-variant-numeric: tabular-nums; }
.ph-stats li > span { font-size: 15.5px; font-weight: 700; color: var(--ink-2); }
.ph-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ph-chips li { display: grid; gap: 6px; padding: 20px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.ph-chips .i { width: 26px; height: 26px; color: var(--o); }
.ph-chips b { font-size: 26px; font-weight: 900; letter-spacing: -0.04em; }
.ph-chips span { font-size: 14px; font-weight: 700; color: var(--muted); }
.ph-steps { list-style: none; margin: 0; padding: 22px; display: grid; gap: 8px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.ph-steps li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; }
.ph-steps i { width: 30px; height: 30px; border-radius: 50%; background: var(--peach); color: var(--o-text); font-style: normal; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.ph-steps li:first-child i { background: var(--o); color: var(--ink); }
.ph-steps li:last-child i { background: var(--ink); color: var(--o-on-dark); }
.ph-mail { display: grid; gap: 6px; padding: 28px; border-radius: var(--r-card); background: var(--ink); color: #fff; }
.ph-mail .i { color: var(--o-on-dark); }
.ph-mail b { font-size: 24px; font-weight: 900; letter-spacing: -0.03em; word-break: break-all; }
.ph-mail span { font-size: 14px; color: #CBD5E1; }

/* 페이지 안 탭 메뉴: 스크롤 위치에 따라 지금 구간에 밑줄 */
.subnav { position: sticky; top: 72px; z-index: 20; background: rgba(255,247,237,.97); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.subnav-links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav-links a { position: relative; flex: 0 0 auto; padding: 16px 14px; color: var(--muted); text-decoration: none; font-size: 15.5px; font-weight: 800; transition: color .2s; }
.subnav-links a:hover { color: var(--ink); }
.subnav-links a.on { color: var(--ink); }
.subnav-links a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 2px; background: var(--o); }
.subnav-cta { flex: 0 0 auto; font-size: 14.5px; font-weight: 800; color: var(--o-text); text-decoration: none; }

/* 회사소개 */
.ab-ceo { padding: 112px 0; background: var(--white); }
.ceo-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.title-md { font-size: 34px; font-size: clamp(26px, 3vw, 42px); line-height: 1.25; letter-spacing: -0.045em; text-wrap: balance; }
.ceo-text .title-md + p { margin-top: 20px; font-size: 17.5px; color: var(--muted); max-width: 520px; }
.ceo-card { padding: 32px; border-radius: var(--r-card); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.ceo-facts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 4px; }
.ceo-facts li { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ceo-facts .i-lg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--white); color: var(--o); box-shadow: var(--shadow); }
.ceo-facts b { display: block; font-size: 17px; font-weight: 800; }
.ceo-facts span span, .ceo-facts li > span { font-size: 14.5px; color: var(--muted); }
.ceo-note { font-size: 14.5px; color: var(--ink-2); margin-bottom: 16px; }
.ab-lec { padding: 112px 0; }
.lec-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lec { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.lec b { font-size: 21px; font-weight: 900; letter-spacing: -0.03em; }
.lec-year { position: absolute; top: 18px; right: 18px; font-size: 12.5px; font-weight: 800; color: var(--ink); background: var(--o-2); padding: 2px 10px; border-radius: 999px; }
.lec-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lec-tags em { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--ink-2); background: var(--peach); padding: 4px 10px; border-radius: 8px; }
.lec:first-child { background: var(--ink); color: #fff; }
.lec:first-child .lec-tags em { background: rgba(255,255,255,.12); color: #E2E8F0; }
.ab-history { padding: 112px 0; background: var(--white); border-top: 1px solid var(--line); }
.ab-history .section-lead { margin: -24px 0 40px; }
.timeline-v { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; }
.timeline-v::before { content: ""; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { display: grid; grid-template-columns: 110px 1fr; gap: 36px; align-items: start; }
.tl-year { position: relative; padding-top: 18px; font-size: 16px; font-weight: 900; color: var(--o-text); font-variant-numeric: tabular-nums; }
.tl-year::after { content: ""; position: absolute; right: -27px; top: 23px; width: 14px; height: 14px; border-radius: 50%; background: var(--o); box-shadow: 0 0 0 4px var(--white); }
.tl-card { display: grid; gap: 4px; padding: 18px 22px; border-radius: var(--r-card); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.tl-card b { font-size: 18px; font-weight: 900; }
.tl-prog { font-size: 15px; color: var(--muted); }
.tl-kind { justify-self: start; font-size: 12.5px; font-weight: 800; color: var(--ink); background: var(--peach); padding: 2px 8px; border-radius: 6px; }
.tl-kind.k-org { background: var(--ink); color: var(--bg); }
.ab-partners { padding: 112px 0; background: var(--ink); color: #fff; }
.ab-partners .eyebrow { color: var(--o-on-dark); }
.pt-logos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pt-logos li { display: flex; align-items: center; justify-content: center; min-height: 140px; border-radius: var(--r-card); background: var(--white); }
.pt-logos img { height: 60px; width: auto; }
.pt-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pt-cards li { position: relative; display: grid; gap: 10px; padding: 26px; border-radius: var(--r-card); background: #1B2537; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pt-cards .i-lg { color: var(--o-on-dark); }
.pt-cards .tag { position: absolute; top: 22px; right: 22px; border-radius: 999px; margin: 0; }
.pt-cards b { font-size: 20px; font-weight: 900; }
.pt-cards p { font-size: 15px; color: #CBD5E1; }
.pt-band { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 18px 22px; border-radius: var(--r-card); background: rgba(255,255,255,.06); color: #E2E8F0; font-size: 15.5px; }
.pt-band .i { width: 22px; height: 22px; color: var(--o-on-dark); margin-top: 2px; }
.pt-check { margin-top: 20px; }
.pt-check a { color: #fff; font-weight: 800; }
.pt-check span { display: block; margin-top: 4px; font-size: 13.5px; color: #94A3B8; }

/* 교육과정 */
.page-program .approach { padding-top: 112px; }
.page-program .approach .tiles { margin-top: 0; }
.f-ic { margin-bottom: 20px; }
.t-solid .f-ic { color: var(--ink); } .t-dark .f-ic { color: var(--o-on-dark); } .t-white .f-ic, .t-peach .f-ic { color: var(--o); }
.page-program .course { padding-top: 112px; }
.page-program .flow-time { font-size: 30px; }
.page-program .flow-desc { font-size: 16px; }
.course-cards { border-top: 0; grid-template-columns: 1fr 1fr; gap: 16px; }
.course-cards div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: start; gap: 4px 16px; padding: 24px; border: 0; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.course-cards .i-lg { grid-row: 1 / 3; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--peach); color: var(--o-text); }
.course-cards dt { font-size: 17px; }
.page-program .promise-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 0; }
.page-program .promise-list li { display: flex; flex-direction: column; gap: 14px; padding: 32px; border: 0; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.page-program .pm-num b { font-size: 72px; color: var(--o-text); }
.page-program .pm-num small { color: var(--muted); }
.page-program .pm-num > span { color: var(--ink); }
.promise .eyebrow { color: var(--ink); }
.promise .eyebrow::before { background: var(--ink); }
.page-program .promise-list p { font-size: 16.5px; color: var(--ink-2); }

/* 진행방식: 다섯 단계 흐름 */
.steps-flow { position: relative; gap: 16px; border-top: 0 !important; background: none !important; }
.steps-flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 44px; height: 2px; background-image: linear-gradient(90deg, var(--o) 50%, transparent 0); background-size: 10px 2px; }
.steps-flow li { position: relative; padding: 24px 20px !important; border-radius: var(--r-card); background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); border-left: 0 !important; gap: 10px !important; }
.step-top { display: flex; align-items: center; justify-content: space-between; }
.steps-flow .step-n { width: 40px; height: 40px; border-radius: 50%; margin: 0; background: var(--o-2); position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--bg); }
.actor { font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.actor-org { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.actor-us { background: var(--o-2); color: var(--ink); }
.actor-both { background: var(--ink); color: var(--bg); }
.step-due { align-self: flex-start; margin-top: auto; font-size: 13.5px; font-weight: 800; color: var(--bg); background: var(--ink); padding: 4px 10px; border-radius: 8px; }
.step-two { display: grid; gap: 10px; }
.step-two > span { display: grid; gap: 4px; }
.step-two .tag { justify-self: start; }
.page-process .process { padding-top: 112px; }
.page-process .rule-band { margin: 0 0 32px; border-radius: var(--r-card); border-top: 0; overflow: hidden; }
.page-process .rule-grid { padding: 0 28px; }

/* 탭(진행방식): 밑줄 탭과 패널을 한 카드로 */
.roles-sec { padding: 112px 0; background: var(--white); border-top: 1px solid var(--line); }
.tabs { border-radius: var(--r-card); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.tab-list { display: flex; gap: 0; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--white); }
.tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 18px 18px; border: 0; background: transparent; font: inherit; font-size: 16.5px; font-weight: 800; color: var(--muted); cursor: pointer; transition: color .2s; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 2px; background: var(--o); }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-ref { background: var(--ink); } .dot-own { background: var(--o-2); }
.tab-panel { padding: 24px; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.tab-sum { margin-bottom: 18px; font-size: 16.5px; font-weight: 700; color: var(--ink-2); }
.role-cards { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 16px; }
.role-card { padding: 26px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.role-card .i-lg { color: var(--o); }
.role-card h3 { margin-top: 16px; font-size: 20px; letter-spacing: -0.03em; }
.role-card h3 span { margin-left: 6px; font-size: 13px; font-weight: 800; color: var(--ink); background: var(--o-2); padding: 2px 8px; border-radius: 6px; vertical-align: 2px; }
.rc-sub { margin-top: 4px; font-size: 14px; font-weight: 800; color: var(--o-text); }
.chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 14px; font-weight: 700; color: var(--ink-2); background: var(--peach); padding: 5px 10px; border-radius: 8px; }
.role-card > p:last-child:not(.rc-sub) { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.role-card.role-us { background: var(--ink); color: #fff; }
.role-card.role-us .i-lg { color: var(--o-on-dark); }
.role-card.role-us .rc-sub { color: var(--o-on-dark); }
.role-card.role-us .chips li { background: rgba(255,255,255,.12); color: #E2E8F0; }
.role-card.role-us > p:last-child:not(.rc-sub) { color: #CBD5E1; }

/* 자주 묻는 질문(아코디언) */
.faq { padding: 120px 0; }
.faq-in { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px; font-size: 17.5px; font-weight: 800; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ic { width: 22px; height: 22px; color: var(--o); transition: transform .25s var(--ease-back); }
.faq-item[open] .faq-ic { transform: rotate(180deg); }
.faq-item p { padding: 0 26px 24px; color: var(--muted); font-size: 16px; }
.faq-item[open] { box-shadow: inset 0 0 0 2px var(--o), var(--shadow); }

/* 문의 */
.page-contact .cta-band { display: none; }
.contact { padding: 96px 0; }
.contact-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: start; }
.contact-card { display: flex; flex-direction: column; padding: 40px; border-radius: var(--r-card); background: var(--ink); color: #fff; }
.contact-card .title-sm { color: var(--o-on-dark); font-size: 18px; }
.contact-mail { margin-top: 12px; font-size: 34px; font-size: clamp(24px, 3vw, 40px); font-weight: 900; letter-spacing: -0.04em; word-break: break-all; }
.contact-card .cta { margin-top: 24px; align-items: center; gap: 24px; }
.contact-phone { margin-top: 16px; display: flex; align-items: center; gap: 8px; color: #E2E8F0; }
.contact-phone a { color: #fff; font-weight: 800; }
.contact-get { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-get li { display: flex; gap: 12px; padding: 16px 18px; border-radius: 12px; background: rgba(255,255,255,.08); }
.contact-get .i { width: 22px; height: 22px; color: var(--o-on-dark); margin-top: 2px; }
.contact-get span { font-size: 14.5px; color: #E2E8F0; }
.contact-get b { display: block; color: #fff; font-size: 16px; }
.contact-note { margin-top: 0; padding-top: 20px; font-size: 14px; color: #94A3B8; }
.contact-list { padding: 40px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.list-head { font-size: 15px; font-weight: 800; color: var(--o-text); }
.check-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.check-list .i { width: 24px; height: 24px; color: var(--o); margin-top: 2px; }
.check-list b { display: block; font-size: 17px; font-weight: 800; }
.check-list span { color: var(--muted); font-size: 15px; }
.contact-also { margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.co-card-wrap .wrap { max-width: 860px; padding: 40px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.co-card-wrap { padding: 0 0 112px; }
.co-card-wrap .info { grid-template-columns: 1fr; border-top: 2px solid var(--ink); }
.co-card-wrap .info dd { font-size: 16px; font-weight: 600; }
.co-card-wrap .info dt { font-size: 14px; }
.co-card-wrap .note-check { background: none; border: 0; padding: 0; font-weight: 500; font-size: 14px; }

/* 개인정보처리방침 */
.doc-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.doc-toc a { font-size: 14px; font-weight: 700; color: var(--ink-2); text-decoration: none; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); padding: 6px 12px; border-radius: 999px; }
.doc-toc a:hover { box-shadow: inset 0 0 0 1px var(--o); }
.doc h2 { display: flex; align-items: center; gap: 10px; padding-top: 28px; border-top: 1px solid var(--line); }
.doc-n { width: 28px; height: 28px; border-radius: 50%; background: var(--o-2); color: var(--ink); font-size: 14px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.doc p { line-height: 1.8; }

/* 과정 구분 띠 */
.rule-band { background: var(--ink); color: #fff; border-top: 4px solid var(--o-2); }
.rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.rule-grid > div { padding: 30px 24px 30px 0; }
.rule-grid > div + div { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.rule-key { font-size: 15px; font-weight: 800; color: var(--o-on-dark); margin-bottom: 4px; }
.rule-grid p:last-child { font-size: 17px; font-weight: 500; color: #fff; }

/* 교육 방식: 네 칸 색 면 */
.approach { padding: 136px 0 128px; }
.tiles { margin-top: 64px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
/* 칸은 누르는 곳이 아니라 hover로 뜨지 않는다. 맨 위 6px 선이 격자 기준선이다 */
.feature { position: relative; border-radius: var(--r-card); padding: 48px 44px 52px; display: flex; flex-direction: column; min-height: 420px; border-top: 6px solid var(--ink); }
.feature-key { display: inline-block; align-self: flex-start; font-size: 17px; font-weight: 800; padding: 7px 14px; margin-bottom: 28px; letter-spacing: -0.02em; }
.feature h3 { font-size: 36px; font-size: clamp(28px, 3vw, 40px); line-height: 1.24; letter-spacing: -0.045em; text-wrap: balance; }
.feature p:last-child { margin-top: auto; padding-top: 32px; font-size: 16.5px; line-height: 1.8; }
.t-solid { background: var(--o); color: var(--ink); }
.t-solid .feature-key { background: var(--ink); color: var(--bg); }
.t-dark { background: var(--ink); color: #fff; border-top-color: var(--o-2); }
.t-dark .feature-key { background: var(--o-2); color: var(--ink); }
.t-dark p:last-child { color: #CBD5E1; }
.t-white { background: var(--white); box-shadow: inset 0 0 0 2px var(--ink); }
.t-white .feature-key { background: var(--o-2); color: var(--ink); }
.t-white p:last-child { color: var(--muted); }
.t-peach { background: var(--peach); box-shadow: inset 0 0 0 2px #FDBA74; border-top-color: var(--o); }
.t-peach .feature-key { background: var(--o-2); color: var(--ink); }
.t-peach p:last-child { color: var(--ink-2); }

/* 세 가지 질문: 먹색 면 */
.questions { background: var(--ink); color: #fff; padding: 140px 0; }
.questions .title::before { background: var(--o-2); }
.questions .section-lead { color: #CBD5E1; max-width: 820px; text-wrap: pretty; }
.q-grid { margin-top: 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.q { padding: 36px 32px 32px; display: flex; flex-direction: column; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.q::before { content: ""; width: 48px; height: 4px; background: var(--o-2); margin-bottom: 24px; }
.q h3 { font-size: 28px; line-height: 1.3; letter-spacing: -0.045em; text-wrap: balance; }
.q-ask { margin-top: 20px; font-size: 17px; line-height: 1.7; font-weight: 700; color: #fff; }
.q-ans { margin-top: 14px; font-size: 16px; line-height: 1.8; color: #CBD5E1; }
.q-kick { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 24px; font-weight: 900; letter-spacing: -0.035em; color: var(--o-on-dark); }

/* 하루 과정 */
.course { padding: 140px 0 120px; }
.timeline-box { margin-top: 64px; }
.ticks { list-style: none; margin: 0 0 10px; padding: 0; position: relative; height: 18px; font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ticks li { position: absolute; top: 0; transform: translateX(-50%); }
.ticks li:nth-child(1) { left: 0; transform: none; }
.ticks li:nth-child(2) { left: 9.52%; }
.ticks li:nth-child(3) { left: 35.71%; }
.ticks li:nth-child(4) { left: 52.38%; }
.ticks li:nth-child(5) { left: 85.71%; }
.ticks li:nth-child(6) { left: auto; right: 0; transform: none; }
.timeline { display: flex; gap: 3px; height: 44px; }
.seg { background: var(--ink); position: relative; transform-origin: left center; }
.seg-muted { background: #94A3B8; box-shadow: inset 0 0 0 1px #64748B; }
.seg-strong { background: var(--o-2); }
.seg-break { background: transparent; border: 1px dashed #64748B; }
.seg i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; font-weight: 800; color: var(--bg); }
.seg-strong i { color: var(--ink); }
.flow-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; background: var(--ink); color: var(--bg); font-style: normal; font-size: 13px; font-weight: 800; vertical-align: 4px; letter-spacing: 0; }
.seg[data-m="10"] { flex: 10; } .seg[data-m="20"] { flex: 20; } .seg[data-m="30"] { flex: 30; }
.seg[data-m="40"] { flex: 40; } .seg[data-m="60"] { flex: 60; } .seg[data-m="70"] { flex: 70; }
.legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; }
.chip { width: 12px; height: 12px; background: var(--ink); display: inline-block; }
.chip-muted { background: #94A3B8; box-shadow: inset 0 0 0 1px #64748B; } .chip-strong { background: var(--o-2); } .chip-break { background: transparent; border: 1px dashed #64748B; }
.flow { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr) 1.5fr 1fr; border-top: 3px solid var(--ink); }
.flow li { padding: 22px 18px 0 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.flow li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.flow-time { font-size: 24px; font-weight: 900; letter-spacing: -0.035em; color: var(--o-text); }
.flow li.flow-main { background: var(--o-2); padding: 22px 24px 24px; border-left: 0; }
.flow-main .flow-desc { font-size: 16px; }
.flow-main .flow-n { background: var(--ink); color: var(--o-2); }
.flow-main .flow-time, .flow-main .flow-desc { color: var(--ink); }
.flow-main .flow-out { border-top-color: rgba(15,23,42,.3); color: var(--ink); }
.flow b { font-size: 17px; font-weight: 800; }
.flow-desc { font-size: 14.5px; color: var(--muted); margin-bottom: 8px; }
.flow-out { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.course-foot { margin: 56px 0 0; display: grid; border-top: 1px solid var(--line); }
.course-foot div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.course-foot dt { font-weight: 800; }
.course-foot dd { margin: 0; color: var(--muted); }

/* 약속: 주황 면 + 먹색 큰 숫자 */
.promise { background: var(--o); color: var(--ink); padding: 120px 0; }
.promise .title::before { background: var(--ink); }
.promise-list { list-style: none; padding: 0; margin: 48px 0 0; border-top: 3px solid var(--ink); }
.promise-list li { display: grid; grid-template-columns: 400px 1fr; gap: 40px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid rgba(15,23,42,.28); }
.pm-num b { display: block; font-size: 64px; line-height: 1.05; font-weight: 900; color: var(--ink); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.pm-num small { font-size: 30px; font-weight: 700; }
.pm-num > span { display: block; margin-top: 10px; font-size: 17px; font-weight: 800; }
.promise-list p { font-size: 18px; max-width: 680px; font-weight: 500; }
.promise-list strong { font-weight: 800; }

/* 진행과 역할 */
.process { padding: 120px 0 144px; }
.steps { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 3px solid var(--ink); background: var(--white); }
.steps li { padding: 24px 20px; display: flex; flex-direction: column; gap: 6px; }
.steps li + li { border-left: 1px solid var(--line); }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--o-2); color: var(--ink); font-size: 16px; font-weight: 900; margin-bottom: 8px; }
.steps b { font-size: 17px; font-weight: 800; }
.step-desc { font-size: 15px; color: var(--muted); }
.step-desc em:not(.tag) { font-weight: 800; color: var(--ink); margin-right: 6px; }
.step-tag { align-self: flex-start; font-size: 13.5px; font-weight: 800; color: var(--bg); background: var(--ink); padding: 3px 8px; }
.roles-title { margin-top: 88px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.roles-title .tag { margin-left: 8px; vertical-align: 3px; }
.roles { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 12px; margin-top: 20px; }
.role-col { padding: 28px; border: 2px solid var(--ink); background: var(--white); }
.role-col h3 { font-size: 19px; margin-bottom: 14px; letter-spacing: -0.03em; }
.role-col h3 span { margin-left: 8px; font-size: 13px; font-weight: 800; color: var(--ink); background: var(--o-2); padding: 2px 8px; vertical-align: 2px; }
.role-row { font-size: 15px; color: var(--muted); padding: 12px 0; border-top: 1px solid var(--line); }
.role-row em { display: table; margin-bottom: 6px; }
.role-row em:not(.tag) { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.role-us { background: var(--ink); color: #fff; }
.role-us .role-row { color: #CBD5E1; border-top-color: var(--line-dark); }
.role-us .role-row em.tag-ref { background: var(--bg); color: var(--ink); }

/* 회사 정보 */
.company { padding: 96px 0 80px; }
.info { margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 3px solid var(--ink); }
.info div { display: grid; grid-template-columns: 130px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); }
.info dt { color: var(--muted); font-size: 15px; font-weight: 500; }
.info dd { margin: 0; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.note { margin-top: 8px; color: var(--muted); font-size: 14.5px; max-width: 820px; }
.note-check { margin-top: 24px; color: var(--ink-2); background: var(--peach); border: 1px solid var(--line); padding: 16px 20px; font-weight: 600; }

/* 바닥글: 회사 소개 + 사이트맵 + 사업자 정보 */
.foot { background: #0B1120; color: #CBD5E1; padding: 72px 0 40px; font-size: 14.5px; }
.foot a { display: inline-block; min-height: 24px; color: #CBD5E1; }
.foot-top { display: grid; grid-template-columns: 1.1fr 2fr; gap: 64px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 900; letter-spacing: -0.045em; color: #fff; }
.foot-brand .brand-mark { box-shadow: 5px 5px 0 var(--o-on-dark); background: #fff; }
.foot-about p + p { margin-top: 14px; max-width: 360px; }
.foot-mail a { color: #fff; font-weight: 700; }
.foot-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.foot-nav p { color: var(--o-on-dark); font-size: 13.5px; font-weight: 800; letter-spacing: .02em; margin-bottom: 12px; }
.foot-nav a { display: block; padding: 4px 0; text-decoration: none; }
.foot-nav a:hover { color: #fff; }
.foot-bottom { display: grid; gap: 16px; padding-top: 28px; }
.foot-info { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13.5px; }
.foot-info div { display: flex; gap: 8px; }
.foot-info dt { color: #94A3B8; }
.foot-info dd { margin: 0; color: #CBD5E1; }
.foot-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13.5px; color: #94A3B8; }
.foot-meta a:last-child { margin-left: auto; }

/* 개인정보처리방침 */
.doc { padding: 64px 0 96px; }
.doc .wrap { max-width: 780px; }
.doc h1 { font-size: 36px; letter-spacing: -0.04em; }
.doc h2 { font-size: 19px; margin: 36px 0 10px; }
.doc p { color: var(--ink-2); margin-bottom: 8px; }
.doc .back { margin-top: 40px; }

.print-head, .print-only { display: none; }

/* 휴대전화 하단 연락 줄, 알림 */
.dock { display: none; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; }
.toast.on { opacity: 1; }
.toast.stay { pointer-events: auto; user-select: all; -webkit-user-select: all; }

/* ---------- 움직임 ----------
   등장: Animate.css 키프레임(vendor/animate.subset.css)을 site.js가 화면에 들어온 요소에 붙인다.
   글자 단위: Splitting.js가 글자마다 --char-index를 매겨 차례로 올린다(back.out 곡선, 60ms 간격).
   숫자: CountUp.js. 흐르는 띠·막대 자라기·버튼 채움·스크롤 진행 막대는 이 파일의 CSS로만 한다.
   끝 상태를 기본 스타일로 두고 애니메이션은 시작점만 정한다. 자바스크립트가 없거나 움직임 줄이기를 켜면 처음부터 다 보인다. */
.js .reveal { opacity: 0; }
.js .reveal.in { opacity: 1; }
.reveal.animate__animated { --animate-duration: .6s; animation-timing-function: var(--ease-back); }
/* 빽빽한 표·목록에는 되튐 없이(UI UX Pro Max: back.out을 정보 표에 쓰지 않는다) */
.promise-list li.animate__animated, .steps li.animate__animated, .table-wrap.animate__animated, .flow li.animate__animated, .roles.animate__animated { --animate-duration: .32s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.tiles .feature:nth-child(2).animate__animated, .q-grid .q:nth-child(2).animate__animated, .promise-list li:nth-child(2).animate__animated, .steps li:nth-child(2).animate__animated { animation-delay: .06s; }
.tiles .feature:nth-child(3).animate__animated, .q-grid .q:nth-child(3).animate__animated, .promise-list li:nth-child(3).animate__animated, .steps li:nth-child(3).animate__animated { animation-delay: .12s; }
.tiles .feature:nth-child(4).animate__animated, .promise-list li:nth-child(4).animate__animated, .steps li:nth-child(4).animate__animated { animation-delay: .18s; }
.steps li:nth-child(5).animate__animated { animation-delay: .24s; }

.splitting .word, .splitting .char { display: inline-block; }
.js .hero.go .h1-line .char { animation: charRise .45s var(--ease-back) backwards; animation-delay: calc(.1s + var(--char-index) * 60ms); }
.js .hero.go .h1-line-2 .char { animation-delay: calc(.32s + var(--char-index) * 60ms); }
@keyframes charRise { from { opacity: 0; transform: translateY(.5em) scale(.92); } }
.js .hero:not(.go) .h1-line .char { opacity: 0; }
.js .hero.go .hero-brand { animation: rise .42s var(--ease-back) backwards; }
.js .hero.go .h1-pre { animation: rise .42s var(--ease-back) .06s backwards; }
.js .hero.go .hero-lead, .js .hero.go .hero-copy .cta, .js .hero.go .hero-mail { animation: rise .5s var(--ease-back) .5s backwards; }
.js .hero.go .mock-main { animation: rise .6s var(--ease-back) .3s backwards; }
.js .hero.go .mock-badge { animation: pop .5s var(--ease-back) .8s backwards, float 6s ease-in-out 1.4s infinite; }
.js .hero.go .mock-note { animation: pop .5s var(--ease-back) 1s backwards, float 7s ease-in-out 1.6s infinite reverse; }
.js .hero.go .mock-chip { animation: pop .5s var(--ease-back) 1.2s backwards; }
.js .hero.go .mr-bar { animation: swipe .6s var(--ease-back) backwards; }
.js .hero.go .mock-rows li:nth-child(1) .mr-bar { animation-delay: .6s; } .js .hero.go .mock-rows li:nth-child(2) .mr-bar { animation-delay: .66s; }
.js .hero.go .mock-rows li:nth-child(3) .mr-bar { animation-delay: .72s; } .js .hero.go .mock-rows li:nth-child(4) .mr-bar { animation-delay: .78s; }
.js .hero.go .mock-rows li:nth-child(5) .mr-bar { animation-delay: .84s; }
@keyframes pop { from { opacity: 0; transform: scale(.85) translateY(10px); } }
@keyframes float { 50% { transform: translateY(-8px); } }
.js .hero.go .hero-brand::before { animation: swipe .5s cubic-bezier(.7,0,.2,1) .2s backwards; transform-origin: left; }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes swipe { from { transform: scaleX(0); } }

.js .timeline-box:not(.in) .seg { transform: scaleX(0); }
.js .timeline-box.in .seg { animation: swipe .5s var(--ease-back) backwards; }
.timeline-box.in .seg:nth-child(2) { animation-delay: .06s; } .timeline-box.in .seg:nth-child(3) { animation-delay: .12s; }
.timeline-box.in .seg:nth-child(4) { animation-delay: .18s; } .timeline-box.in .seg:nth-child(5) { animation-delay: .24s; }
.timeline-box.in .seg:nth-child(6) { animation-delay: .3s; } .timeline-box.in .seg:nth-child(7) { animation-delay: .36s; }
.timeline-box.in .seg:nth-child(8) { animation-delay: .42s; } .timeline-box.in .seg:nth-child(9) { animation-delay: .48s; }
.timeline-box.in .seg:nth-child(10) { animation-delay: .54s; } .timeline-box.in .seg:nth-child(11) { animation-delay: .6s; }
.timeline-box.in .seg:nth-child(12) { animation-delay: .66s; }


@supports (animation-timeline: scroll()) {
  body::before { content: ""; position: fixed; left: 0; top: 0; z-index: 50; width: 100%; height: 3px; background: var(--o); transform-origin: left; animation: swipe linear both; animation-timeline: scroll(root); }
}


/* ---------- 5차 보강: 다음 길, 칩·여백 통일 ---------- */
.lead-link { color: inherit; text-decoration: none; }
.lead-link strong { text-decoration: underline; text-decoration-color: var(--o); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sec-sub { grid-column: 2; justify-self: end; font-size: 14.5px; min-height: 36px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.st-due { font-size: 13.5px; font-weight: 800; color: var(--bg); background: var(--ink); padding: 3px 10px; border-radius: 999px; }
.stepper li:first-child .st-due, .stepper li:last-child .st-due { background: var(--bg); color: var(--ink); }
.stepper li:first-child .actor-org { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.stepper li:last-child .actor-us { background: var(--o-2); }
.next-band { padding: 0 0 72px; }
.next-link { display: flex; align-items: center; gap: 16px; padding: 28px 32px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .25s var(--ease-back), box-shadow .25s; }
.next-link span { font-size: 14px; font-weight: 800; color: var(--o-text); }
.next-link b { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; }
.next-link .i-lg { margin-left: auto; color: var(--o); transition: transform .25s var(--ease-back); }
.next-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.next-link:hover .i-lg { transform: translateX(6px); }
.foot-nav .foot-h { color: var(--o-on-dark); font-size: 13.5px; font-weight: 800; letter-spacing: .02em; margin-bottom: 8px; }
.ceo-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.ceo-mark { width: 52px; height: 52px; border-radius: 50%; background: var(--o); color: var(--ink); font-size: 22px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; box-shadow: 4px 4px 0 var(--ink); }
.ceo-head b { display: block; font-size: 19px; font-weight: 900; }
.ceo-head span span { font-size: 14px; color: var(--muted); }
.lec:first-child { grid-column: span 2; }
.lec-cta { padding: 0; background: var(--o); box-shadow: none; }
.lec-cta a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 26px; color: var(--ink); text-decoration: none; }
.lec-cta .i-lg { margin-top: auto; transition: transform .25s var(--ease-back); }
.lec-cta a:hover .i-lg { transform: translateX(6px); }
.lec-cta span { font-size: 14.5px; font-weight: 700; }
.timeline-v { grid-template-columns: 1fr 1fr; gap: 16px; }
.timeline-v::before { display: none; }
.tl-item { grid-template-columns: 1fr; gap: 0; }
.tl-year { padding: 0 0 8px; font-size: 15px; }
.tl-year::after { display: none; }
.tl-card { height: 100%; }
.pt-check { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pt-check .btn { color: var(--ink); }
.pt-check span { margin: 0; }
.chips-inline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chips-inline em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--ink-2); background: var(--peach); padding: 5px 10px; border-radius: 999px; }
.dd-note { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.ph-four { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ph-four li { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.ph-four .i-lg { color: var(--o); }
.ph-four b { font-size: 18px; font-weight: 900; }
.doc .wrap { max-width: 1080px; display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.doc-toc { position: sticky; top: 96px; flex-direction: column; flex-wrap: nowrap; margin: 0; }
.doc-toc a { border-radius: 10px; }
.doc .wrap > :not(.doc-toc) { grid-column: 2; }
/* 칩 규격: 모서리 999px, 글자 13.5px 이상 */
.tag, .b-key, .actor, .q-n, .lec-year, .mock-pill, .chips li, .lec-tags em, .step-due, .tl-kind, .role-card h3 span { border-radius: 999px; }
.lec-year, .actor, .tl-kind, .mock-pill { font-size: 13.5px; }
.tag { font-size: 13.5px; padding: 3px 10px; }
/* 섹션 여백: 기본 112px, 모바일 72px */
.ab-ceo, .ab-lec, .ab-history, .ab-partners, .roles-sec, .faq, .page-program .approach, .page-program .course, .page-program .promise, .page-process .process { padding-top: 112px; padding-bottom: 112px; }
@media (max-width: 900px) {
  .sec-sub { grid-column: 1; justify-self: start; }
  .doc .wrap { grid-template-columns: 1fr; }
  .doc-toc { position: static; flex-direction: row; flex-wrap: wrap; }
  .doc .wrap > :not(.doc-toc) { grid-column: 1; }
  .timeline-v { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ab-ceo, .ab-lec, .ab-history, .ab-partners, .roles-sec, .faq, .page-program .approach, .page-program .course, .page-program .promise, .page-process .process { padding-top: 72px; padding-bottom: 72px; }
  .lec:first-child { grid-column: auto; }
  .next-link { padding: 22px; }
  .next-link b { font-size: 18px; }
  .ph-four li { padding: 14px; }
}


/* ---------- 움직임 보강(F13) ---------- */
@keyframes revealUp { from { opacity: 0; transform: translateY(24px); } }
@keyframes revealPop { from { opacity: 0; transform: scale(.92); } }
@keyframes revealLeft { from { opacity: 0; transform: translateX(-16px); } }
.reveal.animate__animated { animation-name: revealUp; animation-duration: .52s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); animation-delay: calc(var(--i, 0) * 60ms); }
.stat.animate__animated, .lec.animate__animated { animation-name: revealPop; animation-duration: .42s; animation-timing-function: var(--ease-back); }
.tl-item.animate__animated { animation-name: revealLeft; }
.js .hero.go .mock-main { animation: rise .6s var(--ease-back) .3s backwards, float 9s ease-in-out 1.6s infinite; }
@keyframes floatSm { 50% { transform: translateY(-6px); } }
.js .hero.go .mock-note { animation: pop .5s var(--ease-back) 1s backwards, floatSm 7s ease-in-out 1.6s infinite reverse; }
.tab::after { transition: transform .24s cubic-bezier(.22, 1, .36, 1); transform: scaleX(0); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab-panel { animation: panelIn .22s cubic-bezier(.22, 1, .36, 1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } }
.faq-item { interpolate-size: allow-keywords; }
.faq-item::details-content { height: 0; overflow: clip; transition: height .28s ease, content-visibility .28s allow-discrete; }
.faq-item[open]::details-content { height: auto; }
a.bento-card .i-xl, a.bento-card .b-mark { transition: transform .3s var(--ease-back); }
a.bento-card:hover .i-xl { transform: translateY(-3px) rotate(-4deg); }
a.bento-card:hover .b-mark { transform: scale(1.06); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .09s; }
.toast { transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; }
.toast.on { transform: translate(-50%, 0); }
.marquee-track { animation-duration: 68s; }
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
/* 반응형 보강(F15) */
.bento-card p, .b-key, .stat-label, dd, .tl-prog, .flow-out, .lec-tags em { text-wrap: pretty; word-break: keep-all; }
.flow-out { text-wrap: balance; }
.mr-n { font-size: 13px; }
.ph-chips span { font-size: 13.5px; }
@media (max-width: 900px) and (min-width: 601px) { .steps-flow li:last-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .mock-note b { white-space: nowrap; font-size: 17px; } .marquee-track { animation-duration: 56s; } }
@media (min-width: 1600px) { .page-hero .ph-aside { align-self: center; } .hero::before { right: calc((100vw - var(--wrap)) / 2 - 20px); } }
@media (max-width: 900px) { .nav { animation: menuIn .2s cubic-bezier(.22, 1, .36, 1); } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } }


/* 교육과정: 운영한 과정 카탈로그(F17) */
.catalog { padding: 96px 0 24px; }
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cat-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 148px; padding: 22px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.cat-card b { font-size: 18px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.35; padding-right: 56px; }
.cat-card > span:last-child { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--muted); }
.cat-card .lec-year { top: 16px; right: 16px; }
.cat-main { background: var(--o); }
.cat-main .lec-year { background: var(--ink); color: var(--bg); }
.cat-main > span:last-child { color: var(--ink); }
/* 문의 작성기 */
.composer { margin-top: 14px; display: grid; gap: 4px; }
.composer label { display: grid; grid-template-columns: 24px 1fr; gap: 6px 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.composer label .i { width: 24px; height: 24px; color: var(--o); margin-top: 2px; }
.composer label b { display: block; font-size: 17px; font-weight: 800; }
.composer label span { color: var(--muted); font-size: 14.5px; }
.composer input { grid-column: 2; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font: inherit; font-size: 16px; color: var(--ink); }
.composer input:focus-visible { outline: 3px solid var(--o); outline-offset: 1px; border-color: var(--o); }
.composer-actions { margin-top: 16px; }
.composer-note { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.ceo-docs { margin: 0 0 18px; }
.subnav { background: var(--bg); }
.info dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cat-grid { grid-template-columns: 1fr; } .catalog { padding: 64px 0 8px; } }

@media (max-width: 1100px) {
  .ph-in, .ceo-in { grid-template-columns: 1fr; }
  .ph-aside { max-width: 560px; }
  .lec-grid { grid-template-columns: 1fr 1fr; }
  .steps-flow { grid-template-columns: repeat(3, 1fr) !important; }
  .steps-flow::before { display: none; }
  .nav { gap: 18px; }
  .people-list li, .course-foot div { grid-template-columns: 150px 1fr; }
  .hero-copy { grid-column: 1 / -1; }
  .hero-visual { grid-column: 1 / -1; margin-top: 56px; width: 100%; max-width: 620px; justify-self: center; }
  .hero::before { left: 24px; right: 24px; width: auto; top: auto; bottom: 24px; height: 600px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > .b-solid { grid-row: auto; grid-column: 1 / -1; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stepper { grid-template-columns: repeat(3, 1fr); }
  .stepper li:nth-child(3)::after { display: none; }
  .cta-band-in, .faq-in, .contact-in, .partners-in { grid-template-columns: 1fr; gap: 40px; }
  .foot-top { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .pt-cards, .role-cards { grid-template-columns: 1fr; }
  .steps-flow { grid-template-columns: 1fr 1fr !important; }
  .page-program .promise-list { grid-template-columns: 1fr; }
  .subnav { top: 72px; }
  .wrap { padding: 0 24px; }
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: fixed; top: 72px; bottom: 0; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav-link { padding: 20px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 800; }
  .nav-link:hover { background: none; }
  .nav-link[aria-current="page"] { color: var(--o-text); }
  .nav-link[aria-current="page"]::after { left: auto; right: 4px; top: 50%; bottom: auto; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); }
  .nav-cta { margin-top: auto; min-height: 56px; font-size: 17px; }
  body.menu-open { overflow: hidden; }
  .menu-btn[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
  .top-in { justify-content: space-between; }
  .stepper { grid-template-columns: 1fr; }
  .stepper li::after { display: none; }
  .role-cards { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; gap: 16px; }
  .sec-head .more { justify-self: start; }
  .home-sec { padding: 96px 0; }
  .people-in, .partner { grid-template-columns: 1fr; gap: 48px; }
  .rule-grid { grid-template-columns: 1fr; }
  .rule-grid > div, .rule-grid > div + div { padding: 18px 0; border-left: 0; }
  .rule-grid > div + div { border-top: 1px solid var(--line-dark); }
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: 1fr; }
  .feature { min-height: 0; }
  .people-text { position: static; }
  .q-grid { grid-template-columns: 1fr; }
  .q-kick { margin-top: 24px; }
  .ticks, .timeline, .legend { display: none; }
  .flow { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(odd) { border-left: 0; }
  .steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .flow li, .flow li + li { padding: 18px 16px 18px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .flow li.flow-main { padding: 18px 16px; }
  .roles { grid-template-columns: 1fr; }
  .promise-list li { grid-template-columns: 1fr; gap: 10px; }
  .info { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 600px) {
  .page-hero { padding: 108px 0 48px; }
  .ph-in { gap: 28px; }
  .ph-stats b { font-size: 32px; min-width: 96px; }
  .ph-chips { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .ph-chips li { padding: 14px 12px; }
  .ph-chips b { font-size: 19px; }
  .ph-chips span { font-size: 12.5px; }
  .lec-grid { grid-template-columns: 1fr; }
  .ab-ceo, .ab-lec, .ab-history, .ab-partners, .roles-sec { padding: 72px 0; }
  .timeline-v::before { left: 7px; }
  .tl-item { grid-template-columns: 1fr; gap: 6px; padding-left: 28px; }
  .tl-year { padding-top: 0; }
  .tl-year::after { left: -28px; right: auto; top: 4px; }
  .pt-logos li { min-height: 100px; }
  .pt-logos img { height: 40px; }
  .steps-flow { grid-template-columns: 1fr !important; }
  .tab { padding: 16px 10px; font-size: 15px; }
  .tab-panel { padding: 16px; }
  .contact-get { grid-template-columns: 1fr; }
  .course-cards { grid-template-columns: 1fr; }
  .page-program .pm-num b { font-size: 52px; }
  .co-card-wrap .wrap { padding: 24px 20px; border-radius: 0; }
  .subnav-cta { display: none; }
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .top-in { height: 64px; }
  .nav { top: 64px; }
  .subnav { top: 64px; }
  .hero-in { padding-top: 96px; padding-bottom: 20px; }
  .hero-brand { font-size: 22px; gap: 10px; margin-bottom: 22px; }
  .hero-brand::before { width: 40px; }
  .hero h1 { font-size: 56px; font-size: clamp(48px, 14.5vw, 64px); }
  .hero-in { padding-top: 104px; padding-bottom: 56px; }
  .hero-visual { min-height: 0; margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero::before { left: 0; right: 0; bottom: 0; height: 560px; border-radius: 28px 28px 0 0; }
  .mock { position: static; }
  .mock-main { grid-column: 1 / -1; order: 1; }
  .mock-badge { order: 2; padding: 14px; }
  .mock-note { order: 3; padding: 14px; }
  .mock-chip { grid-column: 1 / -1; order: 4; justify-content: center; }
  .mock-badge b, .mock-note b { font-size: 19px; }
  .mock-rows { padding: 12px 16px 0; }
  .mock-rows li { grid-template-columns: 24px 1fr 56px 48px; font-size: 14px; gap: 8px; }
  .mock-rows li.mr-main { margin: 0 -8px; padding: 8px; }
  .mock-bar { padding: 14px 16px; }
  .mock-foot { margin: 12px 16px 0; }
  .hero .cta { gap: 16px; }
  .link-arrow { flex: 1 1 100%; justify-content: center; }
  .home-sec { padding: 64px 0; }
  .home-promise { padding: 72px 0; }
  .sec-head { margin-bottom: 28px; }
  .bento { grid-template-columns: 1fr 1fr; gap: 12px; grid-auto-rows: auto; }
  .b-wide { grid-column: 1 / -1; }
  .b-white, .b-peach { padding: 20px; min-height: 180px; }
  .b-white h3, .b-peach h3 { font-size: 18px; }
  .b-solid h3 { font-size: 28px; }
  .b-stats dt { font-size: 36px; }
  .b-mark { width: 160px; height: 160px; }
  .past-logos { grid-template-columns: repeat(2, 1fr); }
  .cta-get { grid-template-columns: 1fr; }
  .foot-meta a:last-child { margin-left: 0; }
  .bento-card { padding: 26px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 20px; }
  .stat-num { font-size: 40px; }
  .page-hero { padding: 116px 0 56px; }
  .page-hero::after { width: 120px; height: 120px; right: -20px; bottom: -30px; border-radius: 26px; }
  .page-hero::before { display: none; }
  .cta-band { padding: 80px 0; }
  .foot-nav { grid-template-columns: 1fr 1fr; }
  .contact-card, .contact-list { padding: 28px 22px; }
  .faq-item summary { padding: 18px 20px; font-size: 16.5px; }
  .faq-item p { padding: 0 20px 20px; }
  .tab { padding: 10px 14px; font-size: 15px; }
  .partner-cards li { min-height: 100px; }
  .partner-cards img { height: 40px; }
  .hero-lead p { font-size: 17px; }
  .hero-lead .lead-1 { font-size: 22px; }
  .hero-sub { font-size: 15.5px; }
  .hero .cta .btn { flex: 1 1 100%; }
  .marquee-set { font-size: 20px; padding: 14px 0; }
  .marquee-track { animation-duration: 66s; }
  .rule-key, .logo-wall span, .flow-out, .legend, .partner-list dt span { font-size: 14px !important; }
  .pm-num > span { font-size: 16px; }
  .history-bridge { grid-template-columns: 1fr; gap: 8px; }
  .history-bridge .hb-num { font-size: 44px; }
  .history-bridge p { font-size: 16px; }
  td:nth-child(2) { width: auto; }
  .closing-mail { font-size: 19px; }
  .steps li { padding: 0 0 24px 52px; position: relative; }
  .steps li + li { border-left: 0; }
  .steps .step-n { position: absolute; left: 0; top: 0; }
  .steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 44px; bottom: 4px; width: 2px; background: var(--line); }
  .steps { background: none; border-top: 0; }
  .logos { padding: 56px 0; }
  .partner-logos img { height: 40px; }
  .logo-wall li { min-height: 88px; padding: 14px; }
  .logo-wall img { height: 28px; }
  .approach, .course { padding: 88px 0 72px; }
  .people, .questions, .promise, .process, .history { padding: 88px 0; }
  .tiles { margin-top: 40px; gap: 16px; }
  .partner-logos { grid-template-columns: 1fr; gap: 0; }
  .partner-logos li { padding: 20px 0; }
  .rule-grid > div, .rule-grid > div + div { padding: 14px 0; }
  .questions { padding: 72px 0 !important; }
  .q-ans { font-size: 15.5px; }
  .q-kick { font-size: 22px; }
  .feature { padding: 32px 24px 36px; }
  .feature h3 { font-size: 27px; }
  .people-lead { font-size: 23px; }
  .people-list li, .course-foot div, .partner-list div, .closing-get div { grid-template-columns: 1fr; gap: 2px; }
  .partner { padding: 28px 20px; }
  thead { display: none; }
  table, tbody, tr, td { display: block; }
  tr.group th { display: block; }
  tbody tr:not(.group) { padding: 14px 0; border-bottom: 1px solid var(--line); }
  td { padding: 0; border: 0; }
  td:first-child { width: auto; font-size: 14px; color: #334155; }
  td:nth-child(2) { font-size: 15.5px; margin-top: 2px; }
  td:nth-child(3) { font-size: 14.5px; }
  .q { padding: 28px 22px; }
  .q h3 { font-size: 25px; }
  .pm-num b { font-size: 46px; }
  .pm-num small { font-size: 24px; }
  .flow, .steps { grid-template-columns: 1fr; }
  .promise-list p { font-size: 16px; }
  .closing { padding: 104px 0 96px; }
  .closing .cta .btn { flex: 1 1 100%; }
  .info div { grid-template-columns: 110px 1fr; }
  .foot { padding-bottom: 104px; }
  .foot p { margin: 8px 0; }
  .hero-lead .lead-1 { font-size: 21px; }
  .hero-lead p { font-size: 16.5px; }
  .hero-lead p + p { margin-top: 6px; }
  .hero-sub { margin-top: 10px; font-size: 15px; }
  .hero .cta { padding-top: 20px; }
  .marquee-toggle { min-width: 60px; padding: 0 12px; }
  html { scroll-padding-bottom: 88px; }
  .dock { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(15,23,42,.08); transform: translateY(110%); transition: transform .25s; }
  .dock .btn:first-child { flex: 2; }
  .dock:not(.on) { visibility: hidden; transition: transform .25s, visibility 0s .25s; }
  .dock.on { transform: none; visibility: visible; }
  .dock .btn { flex: 1; min-height: 46px; font-size: 15px; }
}

@media (max-width: 600px) and (max-height: 480px) {
  .dock { display: none; }
}

@media (min-width: 1600px) {
  :root { --wrap: 1400px; }
  body { font-size: 18px; }
  .nav a { font-size: 15px; }
}

/* 움직임 줄이기: 모든 등장·반복 움직임을 끄고 처음부터 보인다. 띠는 멈춘 목록으로 바뀐다 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .js .reveal, .js .hero:not(.go) .h1-line .char,   .js .timeline-box:not(.in) .seg { transform: none; }
  .marquee-track { width: auto; }
  .marquee-set[aria-hidden] { display: none; }
  .marquee-toggle { display: none; }
  .marquee-set { white-space: normal; flex-wrap: wrap; row-gap: 8px; padding: 18px 20px; font-size: 18px; }
}

@media print {
  @page { size: A4; margin: 16mm 14mm; }
  *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; }
  .top, .dock, .toast, .skip, .cta, .closing-note, .timeline, .marquee, body::before, .subnav, .next-band, .menu-btn, .ph-aside, .hero-visual, .composer, .b-go, .b-mark { display: none !important; }
  .print-head { display: block; font-size: 9pt; color: #333; border-bottom: 1px solid #999; padding-bottom: 6px; margin-bottom: 8px; }
  body { font-size: 10pt; background: #fff; }
  .js .reveal, .js .hero .h1-line .char, .js .timeline-box:not(.in) .seg { opacity: 1 !important; transform: none !important; }
  section { padding: 8px 0 !important; min-height: 0 !important; }
  .hero, .hero::before, .page-hero, .home-dark, .home-promise, .questions, .rule-band, .promise, .role-us, .role-card.role-us, .foot, .t-solid, .t-dark, .t-peach, .q, .flow-main, .list-title, .b-solid, .b-dark, .b-peach, .stat-hero, .stat, .cta-band, .contact-card, .ab-partners, .pt-cards li, .pt-band, .lec:first-child, .lec-cta, .cat-main, .stepper li, .tl-card, .ceo-card { background: none !important; color: var(--ink) !important; }
  .hero::before { display: none !important; }
  .home-dark *, .questions *, .promise *, .home-promise *, .rule-band *, .role-us *, .t-dark *, .b-dark *, .b-solid *, .q *, .cta-band *, .contact-card *, .ab-partners *, .stat-hero *, .lec:first-child *, .foot *, .stepper li * { color: var(--ink) !important; }
  .bento-card, .stat, .lec, .tl-card, .pt-cards li, .role-card, .faq-item, .cat-card, .stepper li, .steps-flow li { border: 1px solid #999 !important; }
  .hero-in, .ph-in { display: block; padding: 0; }
  .hero h1 { font-size: 28pt; }
  .title, .title-md { font-size: 18pt; }
  .page-hero h1 { font-size: 22pt; }
  .tiles, .bento, .lec-grid, .cat-grid, .stat-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .feature, .bento-card { min-height: 0; padding: 10px; }
  .q, .feature, .bento-card, .stat, .lec, .tl-item, .flow li, .steps li, .stepper li, .roles, .role-card, tr, .faq-item, .cat-card { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .faq-item p { display: block; }
}