/* JACA 공개 페이지(홈 · JPP/JAIS 소개 · 이용안내 · 다국어) 전용 스타일.
   원칙: 그림자를 남발하지 않고 선과 여백으로 정돈한다. 한글은 keep-all 로 끊는다.

   색·글자·여백은 디자인 파일(JACA.fig)에서 뽑은 `tokens.css` 가 정한다.
   **이 화면이 그 시안의 원본이다** — 10_JACA Landing 프레임이 홈 첫 판이다.
   아래 :root 는 이 파일이 쓰던 이름을 시안 팔레트에 연결만 한다.

   글꼴은 site.css 와 같은 Pretendard 를 받는다(2026-09-13). 예전에는 이 페이지만
   웹폰트를 받지 않아 맑은 고딕으로 떨어졌고, 시안과 나란히 놓으면 글자 폭이 달라
   줄바꿈 자리가 전부 어긋났다. 못 받으면 tokens.css 의 다음 글꼴로 내려간다. */
@import url('/assets/tokens.css');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  --ink: var(--t-text);            /* Gray/900 */
  --ink-2: var(--t-text-2);        /* Gray/700 */
  --muted: var(--t-text-3);        /* Gray/500 — 흰 지면에서 4.8:1 (WCAG AA) */
  --paper: var(--c-gray-0);
  --paper-2: var(--c-gray-50);
  --paper-3: var(--c-gray-100);
  --line: var(--t-line);
  --line-2: var(--t-line-strong);

  /* 밝은 톤: 어두운 면(히어로·유틸바·푸터)을 없애고 종이 위에 선과 여백으로 정돈한다.
     남색은 배경이 아니라 '글자·강조'에만 남긴다. */
  --navy: var(--c-navy-800);
  --navy-2: var(--c-navy-700);
  --gold: var(--c-orange-700);     /* 밝은 바탕 위 작은 글자 — 700 이라야 AA 를 넘는다 */
  --gold-soft: var(--c-orange-50);

  /* 브랜드 면(600) 위에 얹는 글자색. 두 테마에서 같다 — 면이 어느 쪽에서든 짙다.
     리터럴 `#fff` 를 규칙에 흩어 두면, 다크 블록 뒤에 적힌 한 줄이 그 블록의 같은
     선택자를 조용히 덮는다(2026-09-16 회귀시험이 잡은 자리). 값은 여기 한 번만 적는다. */
  --on-brand: #fff;

  --career: var(--c-brand-600);    /* JPP 진로탐색서비스 — 시안 Brand/600 */
  --career-soft: var(--c-brand-50);
  --admis: var(--c-teal-700);      /* 대학입시서비스 */
  --admis-soft: var(--c-teal-50);

  --sky: var(--c-brand-50);        /* 히어로 바탕 — 시안 히어로 그러데이션의 시작색 */
  --cream: var(--c-navy-50);       /* 히어로 보조 — 같은 그러데이션의 끝색 */

  --wrap: 1280px;
  --r: var(--r-16);                /* 시안 카드·단추 모서리 */
  --r-sm: var(--r-8);
  --shadow: var(--sh-sm);

  /* 본문 글자 — **기준은 Why JACA 칸(`.why p`)이다**(2026-09-19 사용자 지시).
     절마다 따로 자라서 리드 문단이 15 · 16 · 16.32 · 16.96 · 18px 다섯 가지로
     갈려 있었다(1440 폭 실측). 메뉴를 옮길 때마다 본문 크기가 달라 보이던
     자리다. 크기를 바꿀 일이 생기면 **여기 한 줄만** 고친다 — 절마다 적어 두면
     한 곳은 반드시 옛 값으로 남는다. */
  --fs-body: clamp(15px, .95vw, 18px);
  --lh-body: 1.6;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

body.home-panel {
  --home-header-h: 77px;
  min-height: 100vh;
  overflow: hidden;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -.022em; line-height: 1.28; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.12rem; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.home-panel main {
  height: calc(100vh - var(--home-header-h));
  height: calc(100dvh - var(--home-header-h));
  overflow: hidden;
  background: var(--paper);
}
.home-panel main > section {
  display: none;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.home-panel main > section:first-child,
.home-panel main > section.is-active {
  display: block;
}
.home-panel main > section.is-active {
  animation: panelIn .24s ease both;
}
.home-panel.panel-ready main > section:first-child:not(.is-active) {
  display: none;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .home-panel main > section.is-active { animation: none; } }
/* 원래 푸터는 감추고, home.js 가 패널마다 끝에 한 벌씩 붙인다 — 패널이 저마다
   스크롤하므로 body 끝의 푸터에는 아무도 닿지 못한다. */
.home-panel > .site-footer { display: none; }
.home-panel main > section.has-foot { padding-bottom: 0; }
.home-panel main > section > .site-footer { margin-top: 84px; }
.home-panel main > section.landing > .site-footer { margin-top: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* 화면 밖으로 밀 때 left 를 크게 주면 가로 스크롤이 생긴다. 위로 올린다. */
.skip {
  position: absolute; left: 0; top: 0; z-index: 999; transform: translateY(-200%);
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { transform: none; }

.kicker {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.muted { color: var(--muted); }
.small { font-size: .87rem; }

/* ══════════════════════════════════════════════════════════════════
   머리 — 시안 02_Components · PageHeader (2026-09-13 전면 적용)
   한 줄이다: JACA 워드마크 | 메뉴 넷 | 로그인 · 상담 신청.
   시안 실측: 높이 77 · 좌우 40 · 워드마크 36 · 메뉴 18/26 SemiBold 간격 120 ·
   오른쪽 18/26 Regular 간격 48 · 아랫선 Gray/200.
   메뉴 간격은 1920 폭 기준 120 이라 좁은 화면에서는 줄여 쓴다.
   ══════════════════════════════════════════════════════════════════ */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); }

/* 언어 전환 — 드롭다운. 현재 언어만 보이고 누르면 나머지가 펼쳐진다.
   시안 머리에는 없는 칸이지만 다국어 홈의 유일한 입구라 오른쪽 끝에 작게 둔다. */
.langs { position: relative; display: inline-flex; align-items: center; }
.langs-current {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-8); background: transparent;
  white-space: nowrap;
}
.langs-current:hover, .langs-current:focus-visible { background: var(--paper-3); color: var(--ink); }
.langs-current .cv { width: 6px; height: 6px; border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor; transform: rotate(45deg); opacity: .5; }
.langs-menu {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 6px;
  min-width: 130px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-12); box-shadow: var(--sh-md); z-index: 200;
  padding: 6px; list-style: none;
}
.langs-menu a {
  display: block; padding: 8px 12px; border-radius: var(--r-8); font-size: 14px;
  color: var(--ink-2); white-space: nowrap;
}
.langs-menu a:hover, .langs-menu a:focus-visible { background: var(--paper-3); color: var(--ink); }
.langs-menu a[aria-current="page"] { color: var(--t-text-brand); font-weight: 700; }
.langs.open .langs-menu { display: block; }
.site-footer .langs-current { color: var(--muted); border-color: var(--line); }

.gnb-bar { position: relative; border-bottom: 1px solid var(--line); background: var(--paper); }
.gnb-bar .wrap {
  max-width: none; height: 77px; padding: 0 40px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}

.brand { justify-self: start; display: inline-flex; align-items: center; }
/* 시안 워드마크는 Gilroy Black 36px 이다. 그 글꼴을 싣지 않으므로 같은 굵기의
   Pretendard Black 으로 그린다(자간을 조금 좁혀 덩어리를 맞춘다). */
.brand .wordmark {
  font-size: 36px; line-height: 52px; font-weight: 900; letter-spacing: -.035em;
  color: var(--ink); font-family: "Gilroy", var(--font-sans);
}

.gnb {
  display: flex; align-items: stretch; height: 77px;
  gap: clamp(28px, 6.25vw - 16px, 120px);
}
.gnb > li { position: relative; display: flex; align-items: center; }
.gnb > li > a {
  height: 100%; display: flex; align-items: center;
  font-size: 18px; line-height: 26px; font-weight: 600; color: var(--ink);
  white-space: nowrap; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.gnb > li:hover > a, .gnb-bar.kb-open .gnb > li:focus-within > a,
.gnb > li > a[aria-current="page"], .gnb > li > a.is-current {
  color: var(--t-text-brand); border-bottom-color: var(--t-text-brand);
}

.gnb-side {
  justify-self: end; display: flex; align-items: center;
  gap: clamp(16px, 2.5vw, 48px);
}
.gnb-side > a {
  font-size: 18px; line-height: 26px; font-weight: 400; color: var(--ink); white-space: nowrap;
}
.gnb-side > a:hover, .gnb-side > a:focus-visible { color: var(--t-text-brand); }
/* [로그인] 단추(2026-09-30) — 메뉴 글자와 섞이지 않게 테두리 단추로 둔다. 로그인 상태는 보지 않는다. */
.gnb-side > a.gnb-login {
  font-size: 15px; line-height: 20px; font-weight: 600; color: var(--t-text-brand);
  border: 1.5px solid currentColor; border-radius: 999px; padding: 7px 18px;
}
.gnb-side > a.gnb-login:hover, .gnb-side > a.gnb-login:focus-visible {
  background: var(--t-text-brand); color: #fff;
}
/* 여기에 '로그인 · 내 서비스 · 로그아웃' 이 있었다(2026-09-15 에 없앴다).
   글자 크기·색·굵기가 서로 달라 한 줄에 세 모양이 섞였고, 애초에 공개 머리는
   로그인 여부를 다루지 않는다. 오른쪽 칸은 이제 언어 전환 하나다. */

/* ── 전체 메뉴 펼침 — 머리에 마우스를 올리면 여섯 칸이 한 장으로 열린다 (2026-09-19)
   사용자 지시: "상단 메뉴 헤더에 마우스 올리면 전체 메뉴 펼쳐지게, 호버영역은
   펼쳐진 영역까지 유지."

   예전에는 **올린 항목 하나만** 열렸다. 다른 묶음을 보려면 그 항목까지 정확히
   가야 했고, 가는 길에 포인터가 빈 곳을 지나면 메뉴가 닫혔다.

   여는 조건을 `li:hover` 에서 **`.gnb-bar:hover`** 로 옮긴다. CSS 의 `:hover` 는
   그 요소뿐 아니라 **자손 위에 있을 때도 참**이라, 절대배치된 하위 목록으로
   내려가도 머리는 계속 hover 다 — 내려가는 동안 닫히지 않는다.

   칸과 칸 **사이의 빈 곳**으로 지나가면 그래도 끊기므로, 펼쳐진 높이만큼 바탕
   한 장(`.gnb-bar::after`)을 깔아 띠 전체를 하나의 면으로 만든다. 높이는 가장
   긴 칸에 맞춰 home.js 가 `--mega-h` 로 넣는다 — 항목이 늘면 따라 늘어난다. */
.gnb-bar { position: relative; }
.gnb-bar::after {
  content: ""; position: absolute; top: 100%; left: 0; width: 100%;
  height: var(--mega-h, 0px);
  background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden; z-index: 0;
  transition: opacity .16s ease, visibility .16s;
}
/* 2026-09-28 사용자 신고 "마우스가 벗어나도 접히지 않음" — 여는 조건이 `:hover` 와
   **`:focus-within`** 이었다. 홈의 메뉴는 `#절` 로 제자리 전환이라 누른 링크가 포커스를 쥔
   채 남고, 언어 단추도 이 띠 안에 있어 누르면 전체 메뉴가 열렸다 — 포인터를 치워도 안 닫혔다.
   이제 포커스로 여는 것은 **키보드로 옮겨 왔을 때만**(`.kb-open`, home.js 가 붙인다).
   메뉴 항목을 누르면 포인터가 띠를 벗어날 때까지 접어 둔다(`.mega-hold`). */
.gnb-bar:hover::after, .gnb-bar.kb-open::after { opacity: 1; visibility: visible; }

/* 하위 목록 — 윗메뉴 가운데 아래로 편다. 바탕 한 장 위에 얹히므로 칸마다 테두리·
   그림자를 두지 않는다(두면 한 장 위에 카드 여섯 개가 겹쳐 보인다). */
/* `--sx` — 칸끼리 겹치면 home.js 가 옆으로 미는 거리(2026-09-25, 영어 메뉴가 겹쳐 안 읽혔다). */
.submenu {
  position: absolute; top: 100%; left: 50%; min-width: 200px; z-index: 1;
  padding: 8px; opacity: 0; visibility: hidden;
  transform: translate(calc(-50% + var(--sx, 0px)), -6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.gnb-bar:hover .submenu,
.gnb-bar.kb-open .submenu { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--sx, 0px)), 0); }
/* 누른 뒤 접어 두기 — 위 두 줄과 무게가 같아 뒤에 적은 이것이 이긴다. */
.gnb-bar.mega-hold::after,
.gnb-bar.mega-hold .submenu { opacity: 0; visibility: hidden; }
/* 영어·베트남어는 하위 메뉴 문구가 한국어의 두세 배라 한 줄로 두면 옆 칸을 덮는다 — 칸 폭을
   묶고 줄을 바꾼다. 그래도 겹치는 만큼은 home.js 가 민다. */
html:is(:lang(en), :lang(vi)) .submenu { min-width: 0; width: max-content; max-width: 230px; }
html:is(:lang(en), :lang(vi)) .submenu a { white-space: normal; }
/* 여섯 칸을 합한 폭이 화면보다 넓으면(좁은 노트북) home.js 가 칸 폭을 나눠 준다 — 언어 무관. */
.gnb-bar.mega-tight .submenu { min-width: 0; width: max-content; max-width: var(--sub-max, 230px); }
.gnb-bar.mega-tight .submenu a { white-space: normal; padding-left: 10px; padding-right: 10px; }
.submenu a {
  display: block; padding: 10px 14px; border-radius: var(--r-8);
  font-size: 16px; line-height: 24px; color: var(--ink-2); white-space: nowrap;
}
.submenu a:hover, .submenu a:focus-visible, .submenu a.is-current {
  background: var(--t-fill-brand-sub); color: var(--t-text-brand);
}

.burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  border-radius: var(--r-12); background: var(--paper); font-size: 1.3rem; cursor: pointer; color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════════
   공통 부품 — 배지 (02_Components Badge · Variant=Weak)
   크기 L 14/21 · M 13/20 · S 12/18. 색 값은 tokens.css 의 --bd-*.
   ══════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-weight: 700; font-size: 13px; line-height: 20px; padding: 3px 7px; border-radius: 12px;
  color: var(--bd-grey); background: var(--bd-grey-bg);
}
.badge.lg { font-size: 14px; line-height: 21px; padding: 4px 10px; border-radius: 13px; }
.badge.sm { font-size: 12px; line-height: 18px; padding: 3px 7px; border-radius: 11px; }
.badge.blue   { color: var(--bd-blue);   background: var(--bd-blue-bg); }
.badge.green  { color: var(--bd-green);  background: var(--bd-green-bg); }
.badge.red    { color: var(--bd-red);    background: var(--bd-red-bg); }
.badge.yellow { color: var(--bd-yellow); background: var(--bd-yellow-bg); }
.badge.teal   { color: var(--bd-teal);   background: var(--bd-teal-bg); }
.badge.brand  { color: var(--bd-brand);  background: var(--bd-brand-bg); }

/* ══════════════════════════════════════════════════════════════════
   랜딩 — 시안 10_JACA Landing (1920 폭 실측값)
   가로 여백 120 · 본문 폭 1680. 글자 크기는 시안 값을 상한으로 두고 좁은 화면에서
   줄인다(56 → 34 …). 줄바꿈(<br>)은 넓은 화면에서만 지킨다.
   ══════════════════════════════════════════════════════════════════ */
/* 랜딩은 시안 색을 그대로 박는다(밝은 한 벌). 어두운 화면 설정에서 지면만 어두워지고
   시안의 밝은 판·글자색이 그대로 남으면 글이 사라지므로 바탕도 흰색으로 고정한다. */
.landing { background: #fff; color: var(--c-gray-900); color-scheme: light; }
.landing h1, .landing h2, .landing h3 { letter-spacing: -.02em; }
.ld-wrap {
  max-width: calc(1680px + 2 * clamp(20px, 6.25vw, 120px)); margin: 0 auto;
  padding: 0 clamp(20px, 6.25vw, 120px);
}

/* ── 단추 (시안 Button · 랜딩은 큰 치수 56/16) ── */
.ld-btns { display: flex; flex-wrap: wrap; gap: 16px; }
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--ctl-h-lg); padding: 0 24px; border-radius: var(--ctl-r-lg);
  font-size: 18px; line-height: 26px; font-weight: 600; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ld-btn:hover, .ld-btn:focus-visible { transform: translateY(-1px); box-shadow: var(--sh-md); }
/* 신청 단추는 `<button>` 이다(누르면 서식이 열리고, 가는 곳이 없다). 브라우저가
   단추에 제 글꼴·테두리를 입히므로 링크 모양과 어긋나지 않게 되돌린다. */
button.ld-btn, button.btn {
  font-family: inherit; border: 1px solid transparent; background: none;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.ld-btn.line { background: #fff; color: var(--c-brand-700); border: 1px solid var(--c-brand-400); box-shadow: var(--sh-sm); }
.ld-btn.fill { background: var(--c-brand-500); color: #fff; box-shadow: var(--sh-sm); }
.ld-btn.fill.strong { background: var(--c-brand-600); box-shadow: none; }
.ld-btn.white { background: #fff; color: var(--c-brand-700); }

/* ── 히어로: 화면 왼끝에 붙은 큰 판 + 오른쪽 서비스 카드 둘 ──
   시안 비율(1191:577)은 왼쪽 판 오른쪽이 절반 가까이 비어 6:5 로 좁혔다(2026-09-22 사용자 지시). */
.ld-hero {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px;
  max-width: 1920px; margin: 0 auto; padding: 53px clamp(20px, 6.25vw, 120px) 0 0;
}
.ld-lead {
  min-height: 642px; padding: 75px 48px 60px clamp(20px, 6.3vw, 121px);
  border-radius: 0 44px 44px 0;
  background: linear-gradient(246deg, #F1F5FF 0%, #C9D5FF 18%, #C9D5FF 28%, #F2F5FA 69%, #F1F5FF 100%);
  display: flex; flex-direction: column;
}
.ld-lead h1 { font-size: clamp(34px, 2.95vw, 56px); line-height: 1.45; font-weight: 700; color: var(--c-gray-900); }
.ld-sub { margin-top: 34px; font-size: clamp(16px, 1.05vw, 20px); line-height: 1.7; color: var(--c-gray-900); }
.ld-lead .ld-btns { margin-top: 58px; }
.ld-tags { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.ld-tags li { font-size: 16px; line-height: 24px; color: var(--c-gray-700); }
.ld-tags li + li::before {
  content: ""; display: inline-block; width: 2px; height: 20px; margin: 0 16px;
  vertical-align: -4px; background: var(--c-gray-300);
}

/* 두 카드를 합친 높이가 왼쪽 판(min-height 642)을 넘지 않게 속을 줄였다(2026-09-18 사용자 지시).
   넘치면 격자가 왼쪽 판까지 늘려서 왼쪽 아래가 비어 보인다. */
.ld-svc { display: grid; grid-template-rows: 1fr 1fr; gap: 28px; }
.ld-svc-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: 16px; min-height: 0; padding: 28px 36px; border-radius: 44px; color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ld-svc-card:hover, .ld-svc-card:focus-visible { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.ld-svc-card.jpp  { background: linear-gradient(296deg, #168C88 29%, #708CFA 82%); }
.ld-svc-card.jais { background: linear-gradient(123deg, #708CFA 13%, #3B5279 66%); }
.ld-svc-top { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.ld-svc-card .wm { height: 33px; width: auto; color: #fff; flex: none; }
.ld-svc-card .wm { aspect-ratio: 79 / 33; }
.ld-svc-card.jais .wm { aspect-ratio: 92 / 33; }
.ld-badges { display: inline-flex; flex-wrap: wrap; gap: 16px; }
/* 랜딩의 배지는 시안에서 L 배지를 1.48배로 키워 놓은 것이다(높이 44). */
.landing .badge.lg { font-size: 20px; line-height: 32px; padding: 6px 12px; border-radius: 19px; }
.ld-svc-copy { display: flex; flex-direction: column; gap: 10px; }
.ld-svc-copy strong {
  font-size: clamp(18px, 1.25vw, 24px); line-height: 1.42; font-weight: 700;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .9);
}
.ld-flow { font-size: clamp(18px, 1.25vw, 24px); line-height: 1.42; font-weight: 700; }

/* ── 서비스 6칸 ── */
.ld-feats {
  margin-top: 91px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}
.ld-feat {
  display: flex; flex-direction: column; justify-content: center; gap: 10px; height: 100%;
  min-height: 202px; padding: 40px clamp(24px, 3.3vw, 63px); border-radius: 26px;
  background: var(--c-gray-50); transition: background .15s ease, box-shadow .15s ease;
}
.ld-feat:hover, .ld-feat:focus-visible { background: var(--c-brand-50); box-shadow: var(--sh-sm); }
.ld-feat .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ld-feat .t { font-size: clamp(20px, 1.46vw, 28px); line-height: 1.43; font-weight: 700; color: var(--c-gray-900); }
.ld-feat .ico { width: 56px; height: 56px; flex: none; color: #B0B8C1; }
.ld-feat .d { font-size: clamp(15px, 1.05vw, 20px); line-height: 1.4; color: var(--c-gray-900); }

/* ── 설명 3장 ── */
.ld-explain { margin-top: 123px; padding-bottom: 123px; }   /* WHY JACA 가 빠져 상담 띠 앞 여백을 여기서 준다 */
.ld-slides { position: relative; min-height: 625px; }
.ld-slide {
  display: none; grid-template-columns: minmax(0, 788fr) minmax(0, 846fr); gap: 40px 107px;
  align-items: start; animation: fade .45s ease both;
}
.ld-slide.on { display: grid; }
.ld-slide.stacked { grid-template-columns: 1fr; gap: 64px; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ld-slide { animation: none; } }
.ld-slide-copy h2 { font-size: clamp(28px, 2.35vw, 45px); line-height: 1.45; font-weight: 700; color: var(--c-gray-900); }
.ld-slide-copy p { margin-top: 32px; font-size: clamp(17px, 1.25vw, 24px); line-height: 1.42; color: var(--c-gray-900); }
.ld-slide-copy p + p { margin-top: 40px; }
.ld-slide-copy p.em { font-weight: 700; color: var(--c-gray-700); }

.ld-cond { display: flex; flex-direction: column; gap: 20px; }
/* 테두리가 그러데이션(#BCCBFF → #4DB3A7)이다. border-image 는 모서리를 둥글게 못 해서
   바탕 두 겹(안쪽 흰색 · 바깥 그러데이션)으로 그린다. */
.ld-cond-card {
  padding: 32px; border-radius: 20px; border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg, #BCCBFF 49%, #4DB3A7 100%) border-box;
  box-shadow: var(--sh-sm);
}
.ld-cond-card h3 { font-size: clamp(22px, 1.46vw, 28px); line-height: 1.43; font-weight: 700; color: var(--c-gray-900); }
.ld-cond-card h3 span { margin-left: 16px; font-size: clamp(16px, 1.05vw, 20px); line-height: 1.4; font-weight: 400; color: var(--c-gray-500); }
.ld-cond-card p { margin-top: 8px; font-size: clamp(16px, 1.05vw, 20px); line-height: 1.4; color: var(--c-gray-700); }

/* 둘째 장은 시안에서 카드 칸이 왼쪽으로 더 들어와 있다(750 에서 시작, 칸 폭 930).
   카드 셋은 계단처럼 어긋나 있다(0 · 167 · 74). */
.ld-slide:has(.ld-ready) { grid-template-columns: minmax(0, 700fr) minmax(0, 930fr); gap: 40px 50px; }
.ld-ready { display: flex; flex-direction: column; align-items: flex-start; gap: 21px; }
.ld-ready-card {
  --shift: 0px; margin-left: var(--shift); width: min(calc(100% - var(--shift)), 763px);
  padding: 32px; border-radius: 20px; background: var(--c-navy-50);
}
.ld-ready-card:nth-child(2) { --shift: min(18%, 167px); }
.ld-ready-card:nth-child(3) { --shift: min(8%, 74px); }
.ld-ready-card .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ld-ready-card h3 { font-size: clamp(22px, 1.46vw, 28px); line-height: 1.43; font-weight: 700; color: var(--c-gray-900); }
.ld-ready-card p { margin-top: 12px; font-size: clamp(17px, 1.25vw, 24px); line-height: 1.42; color: var(--c-gray-500); }
.ld-cells { margin-top: 12px; display: flex; gap: 8px; }
.ld-cells i { width: 35px; height: 35px; border-radius: 6px; background: var(--c-brand-200); }
.ld-cells[data-on="3"] i:nth-child(-n+3),
.ld-cells[data-on="4"] i:nth-child(-n+4),
.ld-cells[data-on="6"] i:nth-child(-n+6) { background: var(--c-brand-500); }

.ld-steps { display: grid; grid-template-columns: 1fr 35px 1fr 35px 1fr; align-items: center; gap: 40px; }
.ld-step {
  align-self: stretch; padding: 32px; border-radius: 20px; background: #fff;
  border: 2px solid var(--c-brand-400); box-shadow: var(--sh-md);
}
.ld-step h3 {
  display: flex; gap: 12px; padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--c-gray-400);
  font-size: clamp(22px, 1.46vw, 28px); line-height: 1.43; font-weight: 700; color: var(--c-gray-900);
}
.ld-step h3 b { font-weight: 700; }
.ld-step .k { font-size: clamp(18px, 1.25vw, 24px); line-height: 1.42; font-weight: 700; color: var(--c-gray-500); }
.ld-step .ld-badges { margin-top: 16px; gap: 18px; }
.ld-step-arrow { width: 35px; height: 35px; color: #B0B8C1; }
.ld-dots { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.ld-dots li {
  display: flex; align-items: center; gap: 16px; min-height: 44px;
  font-size: clamp(17px, 1.25vw, 24px); line-height: 1.42; color: var(--c-gray-900);
}
.ld-dots li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-gray-300); }
.ld-dots.rows li::before { background: var(--c-brand-200); }
.ld-dots.rows li .badge { margin-left: auto; }
.ld-checks { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.ld-checks li {
  display: flex; align-items: center; gap: 16px; min-height: 49px;
  font-size: clamp(17px, 1.25vw, 24px); line-height: 1.42; color: var(--c-gray-900);
}
.ld-checks svg { width: 24px; height: 24px; flex: none; color: #B0B8C1; }
.ld-checks li.done svg { color: var(--c-brand-500); }

.ld-pager { margin-top: 12px; display: flex; gap: clamp(16px, 2.2vw, 42px); }
.ld-pager button {
  width: clamp(72px, 9.4vw, 181px); height: 18px; padding: 0; border: 0; cursor: pointer;
  border-radius: 999px; background: var(--c-gray-200); transition: background .2s ease;
}
.ld-pager button[aria-current="true"] { background: var(--c-brand-400); }

/* ── WHY JACA ── */
.ld-why { margin-top: 107px; padding-bottom: 89px; }
/* 2026-09-14 랜딩에서 JACA 소개(#about) 맨 위로 옮겼다 — 절 여백이 이미 있어 위를 비우고 간격을 줄인다. */
#about .ld-why { margin-top: 0; padding-bottom: 64px; }
#about .ld-why-cards { margin-top: 56px; }
.ld-why-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.ld-eyebrow { display: block; font-size: clamp(34px, 2.95vw, 56px); line-height: 1.45; font-weight: 700; color: var(--c-brand-600); }
.ld-why-head h2 { margin-top: 32px; font-size: clamp(28px, 2.35vw, 45px); line-height: 1.45; font-weight: 700; color: var(--c-gray-900); }
.ld-why-head p { margin-top: 32px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-gray-900); }
.ld-why-head .ld-btn { flex: none; box-shadow: var(--sh-sm); }
.ld-why-cards { margin: 120px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ld-why-cards li { padding: 48px; border-radius: 20px; background: var(--c-gray-50); }
.ld-no { display: block; font-size: 40px; line-height: 52px; font-weight: 700; color: var(--c-brand-500); }
.ld-why-cards h3 { margin-top: 20px; font-size: clamp(21px, 1.46vw, 28px); line-height: 1.43; font-weight: 700; color: var(--c-gray-900); }
.ld-why-cards p { margin-top: 20px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-gray-900); }

/* ── 상담 띠 ── */
.ld-cta {
  min-height: 360px; padding: 72px 24px; text-align: center; color: #fff;
  background: var(--c-brand-500);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ld-cta h2 { max-width: 1000px; font-size: clamp(30px, 2.55vw, 48px); line-height: 1.35; font-weight: 700; }
.ld-cta p { max-width: 760px; margin-top: 16px; font-size: clamp(16px, 1.05vw, 19px); line-height: 1.6; }
.ld-cta .ld-btns { margin-top: 32px; justify-content: center; }
.ld-btn.cta-line { color: #fff; border: 1px solid rgba(255, 255, 255, .72); background: transparent; }
.ld-btn.cta-line:hover, .ld-btn.cta-line:focus-visible { background: rgba(255, 255, 255, .1); }

/* ── 좁은 화면 ── */
@media (max-width: 1280px) {
  .ld-hero { grid-template-columns: 1fr; padding-right: 0; }
  .ld-lead { min-height: 0; border-radius: 0 0 44px 0; }
  .ld-svc { grid-template-rows: none; grid-template-columns: 1fr 1fr; padding: 0 clamp(20px, 6.25vw, 120px); }
  .ld-slide, .ld-slide.stacked, .ld-slide:has(.ld-ready) { grid-template-columns: 1fr; }
  .ld-slides { min-height: 0; }
  .ld-steps { grid-template-columns: 1fr; }
  .ld-step-arrow { justify-self: center; transform: rotate(90deg); }
  .ld-why-head { flex-direction: column; align-items: flex-start; }
  .ld-why-cards { margin-top: 56px; }
}
@media (max-width: 900px) {
  .ld-hero { padding-top: 0; }
  .ld-svc { padding-top: 24px; }
  .ld-lead { padding: 44px 24px 40px; border-radius: 0; }
  .ld-lead br, .ld-slide-copy br, .ld-feat br, .ld-why br { display: none; }
  .ld-tags { gap: 6px 16px; }
  .ld-tags li + li::before { display: none; }   /* 줄이 꺾이면 구분선이 줄 머리에 남는다 */
  .ld-svc { grid-template-columns: 1fr; }
  .ld-svc-card { min-height: 0; padding: 32px 28px; border-radius: 32px; }
  .landing .badge.lg { font-size: 15px; line-height: 22px; padding: 4px 10px; border-radius: 13px; }
  .ld-feats { margin-top: 56px; grid-template-columns: 1fr; gap: 16px; }
  .ld-feat { min-height: 0; padding: 28px 24px; }
  .ld-feat .ico { width: 44px; height: 44px; }
  .ld-explain { margin-top: 72px; padding-bottom: 72px; }
  .ld-ready-card:nth-child(n) { --shift: 0px; }
  .ld-cells i { width: auto; flex: 1; height: 28px; }
  .ld-why { margin-top: 72px; padding-bottom: 56px; }
  .ld-why-cards { grid-template-columns: 1fr; }
  .ld-why-cards li { padding: 32px 28px; }
  .ld-cta { min-height: 0; padding: 64px 20px; }
  .ld-btn { height: 52px; padding: 0 20px; font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   두 서비스 선택 — 이 페이지의 핵심
   ══════════════════════════════════════════════════════════════════ */
.pick { padding: 84px 0 88px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.sechead { max-width: 720px; margin-bottom: 40px; }
.sechead h2 { margin-top: 10px; }
.sechead p { margin-top: 12px; color: var(--ink-2); }
.sechead.center { margin-left: auto; margin-right: auto; text-align: center; }

.pick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.service {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 34px 32px 30px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c);
}
.service:hover, .service:focus-visible {
  transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2);
}
.service.career { --c: var(--career); }
.service.admission { --c: var(--admis); }

.service .badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 24%, transparent);
  border-radius: 999px; padding: 5px 12px;
}
.service h3 { margin-top: 18px; font-size: 1.6rem; letter-spacing: -.03em; }
.service .role { margin-top: 8px; color: var(--muted); font-size: .92rem; }
.service .desc { margin-top: 16px; color: var(--ink-2); }
.service .steps { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px; }
.service .steps li {
  font-size: .84rem; color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px;
}
.service .go {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 700; color: var(--c);
}
.service .go .ar { transition: transform .2s ease; }
.service:hover .go .ar { transform: translateX(4px); }
.service .note { margin-top: 6px; font-size: .82rem; color: var(--muted); }

.bridge {
  margin-top: 22px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px 30px;
}
.bridge h4 { font-size: 1rem; }
.bridge p { margin-top: 8px; color: var(--ink-2); font-size: .95rem; }
.flow { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.flow span {
  font-size: .85rem; border: 1px dashed var(--line-2); border-radius: 8px; padding: 7px 12px;
  color: var(--ink-2); background: var(--paper-2);
}
.flow i { font-style: normal; color: var(--muted); }

/* 소개를 건너뛰는 사람을 위한 직행 링크 줄 */
.direct { margin-top: 16px; text-align: center; color: var(--muted); }
.direct a { color: var(--career); font-weight: 600; border-bottom: 1px solid transparent; }
.direct a:hover, .direct a:focus-visible { border-bottom-color: currentColor; }

/* ══════════════════════════════════════════════════════════════════
   본문 섹션
   ══════════════════════════════════════════════════════════════════ */
section.band { padding: 84px 0; }
section.band.alt { background: var(--paper-2); border-block: 1px solid var(--line); }
.home-panel section.band,
.home-panel .pick {
  padding: 44px 0;
}
.home-panel section.band > .wrap,
.home-panel .pick > .wrap {
  min-height: calc(100vh - var(--home-header-h) - 88px);
  min-height: calc(100dvh - var(--home-header-h) - 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-panel .sechead { margin-bottom: 26px; }

.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.grid > * { min-width: 0; }

/* 카드 — 시안 랜딩의 칸(Gray/50 면 · 모서리 20 · 선 없음)과 같은 모양. */
.card {
  background: var(--c-gray-50); border: 0; border-radius: var(--card-r);
  padding: 28px 28px;
  /* 한 줄에 두 장이 설 때 **밑단을 맞춘다**(2026-09-15 사용자 지적).
     상자 높이는 그리드가 이미 맞추고 있었다 — 어긋나 보인 것은 카드 안에서
     단추 줄이 마지막 문단 바로 뒤에 붙어 있었기 때문이다(실측 24px 차이).
     그래서 카드를 세로 flex 로 두고, 단추 줄 앞 요소가 남는 공간을 먹게 한다. */
  display: flex; flex-direction: column;
}
/* 단추 줄(과 그 뒤의 안내 한 줄)을 카드 바닥으로 내린다.
   **`.btnrow` 에 `margin-top: auto` 를 주지 않는다** — 그러면 카드마다 다른
   제 간격(40px · 16px)을 잃고, 늘어날 공간이 없는 카드에서는 간격이 0 이 된다.
   앞 요소에 `margin-bottom: auto` 를 주면 원래 간격은 그대로 살아 있고
   **남는 공간만** 위로 밀려난다. */
.card > :has(+ .btnrow) { margin-bottom: auto; }
section.band.alt .card { background: var(--paper); box-shadow: var(--sh-xs); }
.card h3 { display: flex; align-items: baseline; gap: 9px; }
.card h3 .code {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--gold);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 6px;
}
.card p { margin-top: 10px; color: var(--ink-2); font-size: .95rem; }
.card ul.ticks { margin-top: 14px; display: grid; gap: 7px; }
.card ul.ticks li {
  position: relative; padding-left: 17px; font-size: .9rem; color: var(--ink-2);
}
.card ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold);
}

table.plain { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.plain th, table.plain td {
  text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top;
}
table.plain thead th {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line-2);
}
table.plain tbody tr:last-child td { border-bottom: 0; }
.scroll-x { overflow-x: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips a, .chips span {
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 7px 15px; font-size: .89rem; color: var(--ink-2);
}
.chips a:hover { border-color: var(--navy); color: var(--navy); }

/* 단추 — 시안 Button Size=L(48 · 모서리 14 · 17 SemiBold).
   primary = Brand Fill · line = 흰 면 + Brand/400 선 · ghost = Brand Weak. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ctl-h-md); padding: 0 18px; border-radius: var(--ctl-r-md);
  font-weight: 600; font-size: 16px; line-height: 24px; border: 1px solid transparent;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn.primary { background: var(--c-brand-600); color: var(--on-brand); }
.btn.primary:hover { background: var(--c-brand-700); }
.btn.line { border-color: var(--c-brand-400); color: var(--c-brand-700); background: #fff; }
.btn.line:hover { background: var(--c-brand-50); }
.btn.ghost { background: var(--c-brand-100); color: var(--c-brand-700); }
.btn.ghost:hover { background: var(--c-brand-200); }
.btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.notice-line {
  margin-top: 22px; padding: 16px 20px; border-left: 3px solid var(--gold);
  background: var(--paper-2); font-size: .9rem; color: var(--ink-2);
}
section.band.alt .notice-line { background: var(--paper); }

/* ══════════════════════════════════════════════════════════════════
   푸터
   ══════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--paper-2); color: var(--ink-2);
  border-top: 1px solid var(--line); padding: 62px 0 32px;
}
.site-footer h4 {
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--career); text-decoration: underline; }
.site-footer li { padding: 4px 0; font-size: .91rem; }
.site-footer .wordmark { color: var(--navy); font-size: 1.6rem; font-weight: 900; letter-spacing: -.045em; }
.site-footer .about { margin-top: 12px; font-size: .9rem; line-height: 1.7; max-width: 34ch; }
.foot-contact li { display: flex; align-items: baseline; gap: 10px; }
.foot-contact small { color: var(--muted); font-size: .78rem; }
.foot-contact strong { font-weight: 700; letter-spacing: .02em; user-select: all; }   /* 아이디는 한 번에 복사 */
.foot-link { display: inline-flex; align-items: center; gap: 6px; }
.foot-link span { transition: transform .15s ease; }
.foot-link:hover span, .foot-link:focus-visible span { transform: translateX(3px); }

/* 홈의 패널 푸터는 안내 띠와 분리한 짙은 정보 영역으로 사용한다. */
.home-panel main > section > .site-footer {
  background: var(--c-navy-800); color: rgba(255, 255, 255, .8); border-top: 0;
}
.home-panel main > section > .site-footer h4 { color: var(--c-brand-200); }
.home-panel main > section > .site-footer .wordmark,
.home-panel main > section > .site-footer a,
.home-panel main > section > .site-footer .legal-links a,
.home-panel main > section > .site-footer .legal-links a.strong { color: #fff; }
.home-panel main > section > .site-footer .about { color: rgba(255, 255, 255, .76); }
.home-panel main > section > .site-footer .foot-contact small,
.home-panel main > section > .site-footer .legal { color: rgba(255, 255, 255, .58); }
.home-panel main > section > .site-footer .legal-links { border-top-color: rgba(255, 255, 255, .18); }
.home-panel main > section > .site-footer .legal-links a + a::before { background: rgba(255, 255, 255, .3); }
.legal {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .84rem; color: var(--muted);
}
.legal .sp { margin-left: auto; }
.legal-links {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-size: .9rem;
}
.legal-links a { color: var(--ink-2); }
.legal-links a + a::before {
  content: ""; display: inline-block; width: 1px; height: 11px; margin: 0 14px;
  background: var(--line-2); vertical-align: -1px;
}
.legal-links a.strong { color: var(--ink); font-weight: 700; }
.legal-links + .legal { margin-top: 14px; padding-top: 0; border-top: 0; }
/* 사업자 정보 줄(2026-09-30) — 저작권 줄 바로 위. 값은 서버 legal.BUSINESS 한 곳. */
.biz-info { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .8rem;
  line-height: 1.6; color: var(--muted); }
.biz-info > span + span::before { content: ""; display: inline-block; width: 1px; height: 10px;
  margin: 0 10px; background: var(--line-2, #d0d5dd); vertical-align: -1px; }
.biz-info .k { font-weight: 600; margin-right: 4px; }
.biz-info + .legal { margin-top: 10px; padding-top: 0; border-top: 0; }
.home-panel main > section > .site-footer .biz-info { color: rgba(255, 255, 255, .62); }
.home-panel main > section > .site-footer .biz-info > span + span::before { background: rgba(255, 255, 255, .28); }
/* 좁은 화면에서는 줄이 꺾여 구분선이 줄 머리에 걸린다 — 선 대신 간격으로 나눈다 */
@media (max-width: 720px) {
  .legal-links { gap: 8px 18px; }
  .legal-links a + a::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   반응형
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
}

/* 메뉴 넷 + 오른쪽 칸이 한 줄에 서지 못하는 폭부터 서랍으로 접는다.
   시안은 1920 폭 한 장뿐이라 좁은 화면 모양은 여기서 정했다:
   워드마크 · (로그인 · 상담 신청) · 햄버거 한 줄, 메뉴는 아래로 펴지는 서랍. */
@media (max-width: 1080px) {
  body.home-panel { --home-header-h: 64px; }
  .gnb-bar .wrap { display: flex; height: 64px; padding: 0 20px; gap: 12px; position: relative; }
  .brand .wordmark { font-size: 28px; line-height: 40px; }
  .burger { display: block; flex: none; }
  .gnb-side { margin-left: auto; gap: 16px; }
  .gnb-side > a { font-size: 15px; }
  .gnb {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 20px 18px;
    /* 바 높이(77px)에 갇히지 않게 높이를 푼다 — 안 풀면 목록이 상자 밖으로 흘러
       나가고 스크롤도 안 된다(실측). */
    height: auto; max-height: calc(100dvh - 64px); overflow-y: auto; box-shadow: var(--sh-md);
  }
  .gnb.open { display: flex; }
  .gnb > li { display: block; }
  .gnb > li > a { height: auto; padding: 14px 2px; border-bottom: 1px solid var(--line); }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-radius: 0; padding: 6px 0 10px 8px; min-width: 0;
  }
  .gnb-bar:hover .submenu, .gnb-bar.kb-open .submenu { transform: none; }
  .gnb-bar.mega-hold .submenu { opacity: 1; visibility: visible; }   /* 서랍은 접어 두지 않는다 */
  .gnb-bar::after { display: none; }        /* 서랍에서는 펼침 바탕이 없다 */
  .submenu a { padding: 8px 10px; font-size: 15px; }
  /* 아코디언 — 누른 묶음만 펼친다(home.js). '>' · 'v' 로 접힘 상태를 보인다. */
  .gnb > li > .submenu { display: none; }
  .gnb > li.expanded > .submenu { display: block; }
  .gnb > li > a[aria-haspopup] { display: flex; justify-content: space-between; align-items: center; }
  .gnb > li > a[aria-haspopup]::after { content: "›"; font-size: 1.2em; color: var(--muted); transition: transform .16s; }
  .gnb > li.expanded > a[aria-haspopup]::after { transform: rotate(90deg); }
}

/* 영어·베트남어는 메뉴 라벨이 한국어보다 훨씬 길다(메뉴 다섯, 18px 실측: ko 396px ·
   en 662px · vi 801px). JACA 소개를 대메뉴로 올린 뒤(2026-09-14) 1440 폭에서도 오른쪽
   칸(언어 · 로그인 · 상담 신청)이 화면 밖으로 밀렸다. 한국어 시안 치수는 건드리지 않고
   두 언어만 간격을 좁히고, 그래도 한 줄에 서지 못하는 폭부터 서랍으로 접는다.
   아래 블록은 위 1080 블록과 같은 규칙이다 — 한쪽을 고치면 같이 고칠 것. */
html:is(:lang(en), :lang(vi)) .gnb { gap: clamp(18px, 1.8vw, 40px); }
html:is(:lang(en), :lang(vi)) .gnb > li > a { font-size: 16px; }
/* 2026-09-25 사용자 지적 — 1920 화면(윈도 배율 125%면 1536 폭)에서 영어·베트남어만 메뉴가
   서랍으로 접혀 메뉴가 안 보였다(접는 폭이 1520 이었다). 글자 16px · 간격 축소 · 베트남어
   윗메뉴 라벨 단축(i18n nav_top_*)으로 1180 까지는 한 줄로 선다. 이 폭은 실측(vi 6칸 약
   1085px 필요)에서 나왔다 — 라벨을 늘리면 다시 재 볼 것. */
@media (max-width: 1180px) {
  html:is(:lang(en), :lang(vi)) body.home-panel { --home-header-h: 64px; }
  html:is(:lang(en), :lang(vi)) .gnb-bar .wrap { display: flex; height: 64px; padding: 0 20px; gap: 12px; position: relative; }
  html:is(:lang(en), :lang(vi)) .brand .wordmark { font-size: 28px; line-height: 40px; }
  html:is(:lang(en), :lang(vi)) .burger { display: block; flex: none; }
  html:is(:lang(en), :lang(vi)) .gnb-side { margin-left: auto; gap: 16px; }
  html:is(:lang(en), :lang(vi)) .gnb-side > a { font-size: 15px; }
  html:is(:lang(en), :lang(vi)) .gnb {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 20px 18px;
    height: auto; max-height: calc(100dvh - 64px); overflow-y: auto; box-shadow: var(--sh-md);
  }
  html:is(:lang(en), :lang(vi)) .gnb.open { display: flex; }
  html:is(:lang(en), :lang(vi)) .gnb > li { display: block; }
  html:is(:lang(en), :lang(vi)) .gnb > li > a { height: auto; padding: 14px 2px; border-bottom: 1px solid var(--line); }
  html:is(:lang(en), :lang(vi)) .submenu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-radius: 0; padding: 6px 0 10px 8px; min-width: 0;
  }
  html:is(:lang(en), :lang(vi)) .gnb-bar:hover .submenu,
  html:is(:lang(en), :lang(vi)) .gnb-bar.kb-open .submenu { transform: none; }
  html:is(:lang(en), :lang(vi)) .gnb-bar.mega-hold .submenu { opacity: 1; visibility: visible; }
  html:is(:lang(en), :lang(vi)) .gnb-bar::after { display: none; }
  html:is(:lang(en), :lang(vi)) .submenu a { padding: 8px 10px; font-size: 15px; }
  /* 서랍 아코디언 — 위 1080px 블록과 같은 규칙(두 언어는 더 넓은 폭부터 서랍이다). */
  html:is(:lang(en), :lang(vi)) .gnb.open > li > .submenu { display: none; }
  html:is(:lang(en), :lang(vi)) .gnb.open > li.expanded > .submenu { display: block; }
}

@media (max-width: 560px) {
  .gnb-side .langs { display: none; }        /* 서랍 아래 푸터에도 언어 전환이 있다 */
  .gnb-side > a.gnb-login { font-size: 14px; padding: 6px 14px; }   /* 로그인은 폰에서도 남긴다 */
}

@media (max-width: 900px) {
  .pick-grid, .g2, .g3 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .g4 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  section.band, .pick { padding: 56px 0; }
  .service { padding: 28px 22px 24px; }
}

/* ══════════════════════════════════════════════════════════════════
   차별점 (홈 #why)
   ══════════════════════════════════════════════════════════════════ */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why {
  position: relative; padding: 30px 26px 26px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper);
}
.why .no {
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; color: var(--gold);
}
.why h3 { margin: 10px 0 8px; color: var(--navy); }
.why p { color: var(--ink-2); font-size: .95rem; }
.why .proof {
  margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line-2);
  font-size: .85rem; color: var(--muted);
}
.compare { margin-top: 26px; }
.compare td.no-x { color: var(--muted); }
.compare td.yes { color: var(--admis); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   JACA 가 지켜온 질문 (홈 #why-jaca 마지막 절)
   페이지에서 가장 오래 남아야 하는 문장이라 카드가 아니라 지면 한 칸을 통째로 쓴다.
   ══════════════════════════════════════════════════════════════════ */
.creed {
  margin-top: 32px; padding: 46px 44px 40px; border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, var(--cream) 0%, #fff 58%, var(--sky) 100%);
}
.creed blockquote {
  margin: 14px 0 0; font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.4; color: var(--navy);
}
.creed .since { margin-top: 14px; color: var(--muted); font-size: .92rem; }
.creed-list { margin-top: 24px; display: grid; gap: 12px; max-width: 74ch; }
.creed-list li {
  position: relative; padding-left: 20px; color: var(--ink-2); font-size: 1rem;
}
.creed-list li::before {
  content: ""; position: absolute; left: 0; top: .66em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--gold);
}
.creed .closing {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2);
  font-size: 1.06rem; font-weight: 700; color: var(--navy);
}
@media (max-width: 560px) { .creed { padding: 32px 24px 28px; } }

/* ══════════════════════════════════════════════════════════════════
   이용안내 (/guide)
   ══════════════════════════════════════════════════════════════════ */
.page-head {
  padding: 66px 0 58px; border-bottom: 1px solid var(--line);
  background: linear-gradient(168deg, var(--sky) 0%, #fff 62%, var(--cream) 100%);
}
.page-head h1 { margin-top: 14px; color: var(--navy); max-width: 20ch; }
.page-head .lead { margin-top: 16px; max-width: 62ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }

/* ── 소개 페이지 첫 화면: 왼쪽 소개 · 오른쪽 사용화면 슬라이드 (2026-09-16) ──
   슬라이드 틀은 캡처 화면처럼 늘 밝은 면이다(어두운 화면 설정에서도). 그래서 글자색을
   토큰이 아니라 고정값으로 둔다 — 토큰을 쓰면 어두운 설정에서 흰 바탕에 흰 글자가 된다. */
.page-head.has-showcase { padding: 56px 0; }
.page-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px; align-items: center;
}
.page-head.has-showcase h1 { font-size: clamp(2rem, 3.1vw, 2.9rem); max-width: none; }
/* 본문 크기는 `--fs-body` 한 곳이다 — 소개 페이지도 같은 크기로 읽힌다(2026-09-19). */

.showcase { --sc-accent: #3157D5; position: relative; color-scheme: light; outline: none; }
.showcase.sc-jpp { --sc-accent: #0F766E; }
.showcase:focus-visible { outline: 2px solid #3157D5; outline-offset: 6px; border-radius: 20px; }
.sc-frame {
  background: #fff; border: 1px solid #E3E8F0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(23, 35, 77, .14), 0 4px 12px rgba(23, 35, 77, .06);
}
.sc-bar {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px;
  background: #F4F6FA; border-bottom: 1px solid #E3E8F0;
}
.sc-bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF6B63; }
.sc-bar i:nth-child(2) { background: #FFC23D; }
.sc-bar i:nth-child(3) { background: #2FC96A; }
/* 슬라이드를 한 칸에 겹친다 — 가장 긴 설명에 높이가 맞춰져 넘길 때 화면이 흔들리지 않는다 */
.sc-stage { position: relative; display: grid; }
.sc-slide {
  grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.sc-slide.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.sc-shot { aspect-ratio: 16 / 10; background: #EEF2F7; overflow: hidden; }
.sc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sc-slide figcaption {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline;
  padding: 16px 20px 18px; border-top: 1px solid #E3E8F0; background: #fff;
}
.sc-step { grid-row: span 2; font-size: 13px; font-weight: 800; color: var(--sc-accent); letter-spacing: .02em; }
.sc-slide strong { font-size: 17px; font-weight: 700; color: #1F2633; }
.sc-body { grid-column: 2; margin-top: 4px; font-size: 14px; line-height: 1.55; color: #4A5465; }

.sc-navs {
  position: absolute; inset: 0 0 auto 0; aspect-ratio: 16 / 10; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
}
.sc-nav {
  pointer-events: auto; display: grid; place-items: center; width: 42px; height: 42px;
  padding: 0 0 3px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95);
  color: #1F2633; font-family: inherit; font-size: 26px; font-weight: 700; line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(23, 35, 77, .2);
  opacity: 0; transform: scale(.9); transition: opacity .2s ease, transform .2s ease;
}
/* 마우스를 올리거나 키보드로 들어오면 화살표가 나온다 */
/* 키보드는 `:focus-visible` 로만 본다(2026-09-28) — `:focus-within` 이면 화살표를 마우스로
   누른 뒤 포인터를 치워도 화살표가 남았다. `:has` 를 모르는 브라우저는 이 줄만 버리도록 따로 적는다. */
.showcase:hover .sc-nav { opacity: 1; transform: none; }
.showcase:has(:focus-visible) .sc-nav { opacity: 1; transform: none; }
.sc-nav:hover { background: #fff; color: var(--sc-accent); }
.sc-nav:focus-visible, .sc-dot:focus-visible, .sc-play:focus-visible {
  outline: 2px solid #3157D5; outline-offset: 2px;
}
@media (hover: none) { .sc-nav { opacity: 1; transform: none; width: 36px; height: 36px; font-size: 22px; } }

.sc-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.sc-dots { display: flex; align-items: center; gap: 6px; }
.sc-dot {
  position: relative; width: 26px; height: 20px; padding: 0; border: 0; background: none;
  cursor: pointer; transition: width .25s ease;
}
.sc-dot::before, .sc-dot span {
  content: ""; position: absolute; left: 0; top: 7px; height: 6px; border-radius: 99px;
}
.sc-dot::before { right: 0; background: rgba(23, 35, 77, .15); }
.sc-dot span { width: 0; background: var(--sc-accent); }
.sc-dot.is-on { width: 44px; }
.sc-dot.is-on span { width: 100%; }
/* 자동으로 넘어가는 동안은 막대가 차오르며 남은 시간을 보여 준다 */
.showcase.is-playing .sc-dot.is-on span { width: 0; animation: scFill var(--sc-ms, 5s) linear forwards; }
.showcase.is-held .sc-dot.is-on span { animation-play-state: paused; }
@keyframes scFill { to { width: 100%; } }
.sc-play {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid rgba(23, 35, 77, .16); border-radius: 50%; background: #fff;
}
.sc-play span { width: 9px; height: 10px; border-left: 3px solid #4A5465; border-right: 3px solid #4A5465; }
.showcase:not(.is-playing) .sc-play span {
  width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #4A5465;
}
@media (prefers-reduced-motion: reduce) {
  .sc-slide, .sc-slide.is-on, .sc-nav, .sc-dot { transition: none; }
}
/* 어두운 화면 설정의 슬라이드 조작부는 아래 다크모드 블록에 있다 */
@media (max-width: 1080px) {
  .page-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .showcase { max-width: 720px; }
}
@media (max-width: 720px) {
  .page-head.has-showcase { padding: 40px 0 44px; }
  .sc-frame { border-radius: 14px; }
  .sc-bar { height: 24px; }
  .sc-slide figcaption { padding: 12px 14px 14px; }
  .sc-slide strong { font-size: 15px; }
  .sc-body { font-size: 13px; }
}

/* 다섯 단계 레일 */
.steps-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: s;
  list-style: none; margin-left: 0; padding-left: 0; }   /* 브라우저 기본 번호(1. 2.)가 카드 밖에 찍혔다 */
.steps-rail li {
  position: relative; padding: 24px 20px 22px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper);
}
.steps-rail li::after {
  content: "→"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
  color: var(--line-2); font-size: 1rem; z-index: 1;
}
.steps-rail li:last-child::after { content: none; }
.steps-rail .n {
  display: block; font-size: .74rem; font-weight: 800; letter-spacing: .12em; color: var(--career);
}
.steps-rail h3 { margin: 8px 0 6px; font-size: 1.02rem; color: var(--navy); }
.steps-rail p { font-size: .88rem; color: var(--ink-2); }
.pill {
  display: inline-block; margin-top: 12px; padding: 4px 11px; border-radius: 999px;
  font-size: .77rem; font-weight: 700;
}
.pill.free { background: var(--admis-soft); color: var(--admis); }
.pill.paid { background: var(--career-soft); color: var(--career); }

/* 단계별 상세 카드 */
.step-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.step-card {
  padding: 28px 26px 24px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper);
}
.step-card header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.step-card h3 { color: var(--navy); }
.badge {
  padding: 5px 12px; border-radius: 999px; font-size: .77rem; font-weight: 700;
}
.badge.free { background: var(--admis-soft); color: var(--admis); }
.badge.paid { background: var(--career-soft); color: var(--career); }
.step-card dl { margin: 18px 0 0; display: grid; grid-template-columns: 6rem 1fr; gap: 10px 14px; }
.step-card dt {
  font-size: .87rem; font-weight: 700; color: var(--muted); letter-spacing: .02em;
  padding-top: 2px;
}
.step-card dd { margin: 0; font-size: 1.02rem; color: var(--ink-2); }
.step-card .fine {
  margin-top: 18px; padding: 13px 16px; border-left: 3px solid var(--gold);
  background: var(--gold-soft); font-size: .94rem; color: var(--ink-2);
}

/* 요금 카드 — 요금제 3개(베이직·플러스·프리미엄) */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.plan {
  position: relative; padding: 32px 28px 28px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper);
}
.plan.recommended { border-color: var(--career); box-shadow: var(--shadow); }
.plan .ribbon {
  position: absolute; top: -11px; left: 28px; padding: 4px 13px; border-radius: 999px;
  background: var(--career); color: #fff; font-size: .76rem; font-weight: 700;
}
.plan h3 { font-size: 1.3rem; color: var(--navy); }
.plan .tagline { margin-top: 6px; font-size: .92rem; color: var(--muted); }
.plan .price { margin: 18px 0 0; }
.plan .price strong {
  font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--navy);
}
.plan .who {
  margin-top: 14px; padding: 9px 13px; border-radius: var(--r-sm);
  background: var(--paper-2); font-size: .86rem; color: var(--ink-2);
}
.plan .sum { margin-top: 14px; font-size: .95rem; color: var(--ink-2); }
.plan ul.incl { margin: 18px 0 0; display: grid; gap: 9px; }
.plan ul.incl li {
  position: relative; padding-left: 24px; font-size: .93rem; color: var(--ink-2);
}
.plan ul.incl li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--admis); font-weight: 800;
}
.plan .excl-title {
  margin-top: 20px; font-size: .8rem; font-weight: 700; color: var(--muted);
  letter-spacing: .02em;
}
.plan ul.excl { margin-top: 8px; display: grid; gap: 7px; }
.plan ul.excl li {
  position: relative; padding-left: 24px; font-size: .9rem; color: var(--muted);
}
.plan ul.excl li::before { content: "—"; position: absolute; left: 0; }
.plan .btn { margin-top: 24px; width: 100%; justify-content: center; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq-category { display: grid; gap: 10px; }
.faq-category + .faq-category { margin-top: 20px; }
.faq-category h3 { font-size: 18px; color: var(--ink); }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  padding: 0 20px;
}
.faq summary {
  cursor: pointer; padding: 17px 0; font-weight: 700; color: var(--navy);
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "＋"; color: var(--career); font-weight: 800; }
.faq details[open] summary::before { content: "－"; }
.faq details p { padding: 0 0 18px 26px; font-size: .94rem; color: var(--ink-2); }
/* 많을 때의 목록 도구(home.js) — 분류 칩 · 검색 · 더 보기 */
.faq-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.faq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-chip {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
  border-radius: 999px; padding: 8px 16px; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.faq-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.faq-search {
  margin-left: auto; min-width: 200px; flex: 0 1 260px; border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px; font: inherit; font-size: .92rem; background: var(--paper); color: var(--ink);
}
.faq [hidden], .faq-category[hidden] { display: none !important; }
.faq-empty { color: var(--ink-2); padding: 18px 4px; }
.faq-more { justify-self: center; margin-top: 8px; }
@media (max-width: 640px) { .faq-search { margin-left: 0; flex: 1 1 100%; } }

.cta-band {
  padding: 68px 0; text-align: center;
  background: linear-gradient(168deg, var(--cream) 0%, #fff 60%, var(--sky) 100%);
  border-top: 1px solid var(--line);
}
.cta-band h2 { color: var(--navy); }
.cta-band p { margin-top: 12px; color: var(--ink-2); }
.btnrow.center { justify-content: center; }

@media (max-width: 1080px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .steps-rail { grid-template-columns: 1fr 1fr; }
  .steps-rail li::after { content: none; }
  /* 요금제 3개가 한 줄에 들어가면 글자가 눌린다. 두 줄로 접는다. */
  .plans { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .why-grid, .step-cards, .plans, .steps-rail { grid-template-columns: 1fr; }
  .step-card dl { grid-template-columns: 5rem 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   공지 — 첫 화면 띠 · 게시판 목록 · 팝업 (2026-09-03)
   색은 전부 토큰을 쓴다. 여기서 직접 색을 박으면 어두운 화면에서 혼자 밝게 남는다.
   ══════════════════════════════════════════════════════════════════ */
.notice-strip {
  background: var(--career-soft);
  border-bottom: 1px solid var(--line);
}
.notice-strip-in {
  display: flex; align-items: center; gap: 12px;
  /* `.wrap` 과 같은 요소에 걸리므로 `padding` 을 통째로 쓰면 좌우 24px 이
     지워져 글이 화면 끝에 붙는다(2026-09-03 실측). 세로만 손댄다. */
  padding-top: 11px; padding-bottom: 11px;
  font-size: .93rem;
}
.notice-tag {
  flex: none; font-weight: 800; font-size: .78rem; letter-spacing: .04em;
  color: #fff; background: var(--career);
  padding: 3px 9px; border-radius: 999px;
}
/* 제목이 길어도 띠가 두 줄이 되지 않게 한 줄로 자른다 — 띠가 커지면
   첫 화면에서 히어로를 밀어낸다. */
.notice-strip-title {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.notice-strip-title:hover { text-decoration: underline; }
.notice-strip-date { flex: none; color: var(--muted); font-size: .85rem; }
.notice-strip-more { flex: none; color: var(--career); font-weight: 700; text-decoration: none; }

/* ── 공지 게시판 (2026-09-18 사용자 지시 — 일반 게시판 모양, 눌러서 상세) ──
   목록은 번호 · 제목 · 게시일 한 줄씩, 상세는 같은 자리에서 목록을 대신한다. */
.nb-count { margin: 18px 0 8px; font-size: .88rem; color: var(--ink-2); }
.nb-count b { color: var(--ink); }
.nb-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--navy); table-layout: fixed; }
.nb-table th, .nb-table td { padding: 13px 10px; border-bottom: 1px solid var(--line); font-size: .93rem; }
.nb-table th { background: var(--paper-2); color: var(--ink-2); font-weight: 700; text-align: center; }
.nb-table .nb-no { width: 72px; text-align: center; color: var(--muted); }
.nb-table .nb-date { width: 118px; text-align: center; color: var(--muted); white-space: nowrap; }
.nb-title { min-width: 0; }
.nb-open {
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0;
  padding: 0; border: 0; background: none; font: inherit; color: var(--ink);
  text-align: left; cursor: pointer;
}
.nb-open > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-open:hover > span, .nb-open:focus-visible > span { text-decoration: underline; }
.nb-table tbody tr:hover { background: var(--paper-2); }
.nb-pager { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.nb-pager button {
  min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); font: inherit; cursor: pointer; color: var(--ink-2);
}
.nb-pager button.on { background: var(--navy); border-color: var(--navy); color: var(--on-brand); }

.nb-view { margin-top: 18px; border-top: 2px solid var(--navy); }
.nb-view-head { padding: 18px 4px 14px; border-bottom: 1px solid var(--line); }
.nb-view-head h3 { font-size: 1.25rem; line-height: 1.45; }
.nb-view-meta { margin-top: 6px; font-size: .85rem; color: var(--muted); }
.nb-view-body {
  padding: 24px 4px; min-height: 160px; font-size: .98rem; line-height: 1.8;
  color: var(--ink); border-bottom: 1px solid var(--line); word-break: keep-all; overflow-wrap: anywhere;
}
.nb-view-src { padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.nb-view-src a { color: var(--career); font-weight: 700; }
.nb-view-nav { margin: 0; padding: 0; list-style: none; }
.nb-view-nav li {
  display: flex; gap: 14px; align-items: center; min-width: 0;
  padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.nb-view-nav li > span { flex: none; width: 56px; color: var(--muted); }
.nb-view-nav em { font-style: normal; color: var(--muted); }
.nb-view-actions { margin-top: 18px; text-align: center; }

@media (max-width: 720px) {
  .nb-table .nb-no { display: none; }
  .nb-table .nb-date { width: 92px; font-size: .82rem; }
}

.notice-list { margin-top: 18px; display: grid; gap: 12px; }
.notice-row {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper);
}
.notice-date { display: block; font-size: .8rem; color: var(--muted); }
.notice-title { font-weight: 700; color: var(--ink); }
.notice-title a { color: inherit; }
.notice-body { margin: 6px 0 0; font-size: .9rem; color: var(--ink-2); }

/* 팝업 — 스크립트가 `hidden` 을 벗겨야 열린다. */
/* 머리말(.site-header)이 sticky z-index 100 이라 그보다 위에 둔다 — 90 이면 팝업 머리가 머리말 밑에 깔린다. */
.notice-pop { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; }
.notice-pop[hidden] { display: none; }
.notice-pop-dim { position: absolute; inset: 0; background: rgba(9, 13, 20, .55); }
.notice-pop-card {
  position: relative; width: min(560px, calc(100vw - 32px));
  max-height: min(76vh, 640px); display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.notice-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.notice-pop-head h2 { margin: 0; font-size: 1.05rem; }
.notice-pop-close {
  border: 0; background: none; font-size: 1.5rem; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px;
}
.notice-pop-body { overflow-y: auto; padding: 6px 18px 2px; }
.notice-pop-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.notice-pop-item:last-child { border-bottom: 0; }
.notice-pop-item h3 { margin: 0 0 4px; font-size: 1rem; }
.notice-pop-date { margin: 0 0 8px; font-size: .82rem; color: var(--muted); }
.notice-pop-text { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--ink-2); }
/* 공지 그림(2026-09-30) — 본문 '[이미지]' 자리. 팝업·게시판 폭에 맞춰 줄어든다. */
.notice-img { display: block; width: 100%; max-width: 560px; height: auto; margin: 12px auto;
  border-radius: 10px; border: 1px solid var(--line); }
.notice-pop-foot {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  padding: 14px 18px; border-top: 1px solid var(--line);
}
/* '오늘 하루 보지 않기' — 누르면 바로 닫히는 단추(2026-09-30, 예전엔 체크칸). */
.notice-pop-today {
  margin-right: auto; padding: 10px 12px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: .9rem; color: var(--ink-2); cursor: pointer;
}
.notice-pop-today:hover, .notice-pop-today:focus-visible { background: var(--paper-2); color: var(--ink); }
.notice-badge {
  display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 5px;
  font-size: .72rem; font-weight: 700; line-height: 1.5; vertical-align: 1px;
}
.notice-badge.new { background: #e5484d; color: #fff; }
.notice-badge.pin { background: var(--paper-2, #eef1f6); color: var(--muted); }
.notice-strip-title { transition: opacity .25s; }
.notice-strip-title.fading { opacity: 0; }
/* ── 전화상담 신청서 (2026-09-14) — 공지 팝업 틀에 입력 칸만 더한다 ── */
.gc-form { max-height: min(90vh, 820px); }
.gc-form .notice-pop-body { padding: 16px 18px 8px; }
.gc-lead { font-size: .93rem; color: var(--ink-2); margin-bottom: 14px; }
.gc-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 0; border: 0;
  font-size: .88rem; font-weight: 600; color: var(--ink); }
.gc-field legend { padding: 0; margin-bottom: 6px; }
.gc-field input:not([type]), .gc-field input[type="tel"], .gc-field input[type="email"], .gc-field textarea {
  font: inherit; font-weight: 400; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2, var(--line)); border-radius: 10px; padding: 10px 12px; width: 100%;
}
.gc-opt { font-weight: 400; color: var(--muted); font-size: .8rem; }
/* 회원 신청으로 옮겨 가는 줄(2026-09-28) — 서식 맨 위. */
.gc-member { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px;
  padding: 10px 12px; border-radius: 10px; background: var(--paper-2); font-size: .88rem; color: var(--ink-2); }
.gc-member a { font-weight: 700; color: var(--c-brand-600, #2a4fd0); text-decoration: none; }
.gc-member a:hover { text-decoration: underline; }
.gc-member-sub { flex-basis: 100%; font-size: .8rem; color: var(--muted); }
/* 신청 절의 두 갈래(비회원 · 회원). */
.ap-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.ap-way { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--ink); text-decoration: none; }
.ap-way b { display: block; font-size: .98rem; margin-bottom: 2px; }
.ap-way span { font-size: .84rem; color: var(--muted); }
.ap-way.is-on { border-color: var(--c-brand-500, #3563e9); box-shadow: inset 0 0 0 1px var(--c-brand-500, #3563e9); }
a.ap-way:hover { border-color: var(--c-brand-400, #4f7cff); }
@media (max-width: 640px) { .ap-ways { grid-template-columns: 1fr; } }
.gc-field textarea { resize: vertical; min-height: 96px; }
.gc-field input:focus, .gc-field textarea:focus { outline: 2px solid var(--c-brand-400, #4f7cff); outline-offset: 0; border-color: transparent; }
.gc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gc-radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-weight: 400; font-size: .93rem; cursor: pointer; }
.gc-help { font-size: .8rem; font-weight: 400; color: var(--muted); margin-top: 4px; }
.gc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-chips label { cursor: pointer; }
.gc-chips input { position: absolute; opacity: 0; pointer-events: none; }
.gc-chips span { display: inline-block; padding: 6px 14px; border: 1px solid var(--line-2, var(--line)); border-radius: 999px;
  font-weight: 500; font-size: .88rem; color: var(--ink-2); }
.gc-chips input:checked + span { border-color: var(--c-brand-500, #3563e9); background: var(--c-brand-500, #3563e9); color: #fff; }
.gc-chips input:focus-visible + span { outline: 2px solid var(--c-brand-400, #4f7cff); outline-offset: 2px; }
/* 신청 유형(2026-09-15) — 네 갈래를 한눈에 고르는 칸. 세부 항목(.gc-chips)보다
   윗단계라 알약이 아니라 네모 칸으로 그린다. 좁은 화면에서는 두 줄이 된다. */
.gc-kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gc-kinds label { cursor: pointer; }
.gc-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.gc-kinds span {
  display: block; padding: 10px 8px; text-align: center;
  border: 1px solid var(--line-2, var(--line)); border-radius: 10px;
  font-weight: 600; font-size: .9rem; color: var(--ink-2); white-space: nowrap;
}
.gc-kinds input:checked + span {
  border-color: var(--c-brand-500, #3563e9); background: var(--c-brand-500, #3563e9); color: #fff;
}
.gc-kinds input:focus-visible + span { outline: 2px solid var(--c-brand-400, #4f7cff); outline-offset: 2px; }
@media (max-width: 520px) { .gc-kinds { grid-template-columns: repeat(2, 1fr); } }

.gc-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gc-consent { margin-top: 4px; padding: 12px 14px; border-radius: 10px; background: var(--paper-2); font-size: .85rem; color: var(--ink-2); }
.gc-consent ul { margin: 6px 0; padding-left: 1.1em; list-style: disc; }
.gc-consent .gc-radio { margin-top: 8px; font-weight: 600; color: var(--ink); }
.gc-error { margin: 12px 0 4px; color: #d92d3a; font-size: .88rem; font-weight: 600; }
.gc-done { padding: 28px 18px; text-align: center; }
.gc-done h3 { margin-bottom: 8px; }
.gc-done p { color: var(--ink-2); }
@media (max-width: 640px) { .gc-row { grid-template-columns: 1fr; } }

/* 팝업이 떠 있는 동안 뒤 페이지가 같이 굴러가면 어디를 보는지 잃는다. */
body.no-scroll { overflow: hidden; }

@media (max-width: 640px) {
  .notice-strip-date, .notice-strip-more { display: none; }
  /* 좁은 화면 — 두 단추를 한 줄에 반씩('오늘 하루 보지 않기' | '닫기'). */
  .notice-pop-foot > * { flex: 1 1 0; text-align: center; }
  .notice-pop-foot .notice-pop-today { margin-right: 0; border: 1px solid var(--line); }
}

/* 어두운 화면 설정에서도 읽히게 — 브랜드 색은 유지하고 지면만 바꾼다 */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9edf3; --ink-2: #bcc6d3; --muted: #8b97a6;
    --paper: #12161c; --paper-2: #171d25; --paper-3: #1e2632;
    --line: #28313d; --line-2: #3a4553;
    --career: var(--c-brand-300); --admis: var(--c-teal-300); --gold: #d3ab5f;
    --sky: #161d28; --cream: #1d1a16;
    --career-soft: #1b2438; --admis-soft: #12251f; --gold-soft: #241f16;
  }
  .gnb-bar { background: rgba(18, 22, 28, .92); }
  .brand .wordmark { color: #fff; }
  /* 어두운 지면에서는 카드가 배경과 같은 색이면 경계가 사라진다. 한 단계 띄운다. */
  .card { background: var(--paper-2); }
  /* 서비스 카드와 연결 안내는 paper-2 위에 놓이므로 한 단계 더 띄운다 */
  .service, .bridge { background: var(--paper-3); }
  section.band.alt .card { background: var(--paper-3); }
  section.band.alt .notice-line { background: var(--paper-3); }
  .why, .step-card, .plan, .steps-rail li, .faq details { background: var(--paper-2); }
  .slide h1, .page-head h1, .plan h3, .why h3, .step-card h3,
  .steps-rail h3, .cta-band h2, .faq summary,
  .creed blockquote, .creed .closing { color: #fff; }
  .plan .price strong, .site-footer .wordmark { color: #fff; }
  /* 소개 페이지 슬라이드 조작부 — 틀 자체는 늘 밝은 면이라 여기 둘만 바꾼다 */
  .sc-dot::before { background: rgba(255, 255, 255, .22); }
  .sc-play { background: #1e2632; border-color: rgba(255, 255, 255, .2); }
  .sc-play span { border-left-color: #bcc6d3; border-right-color: #bcc6d3; }
  .showcase:not(.is-playing) .sc-play span { border-color: transparent transparent transparent #bcc6d3; }
  .notice-row, .notice-pop-card { background: var(--paper-2); }
  .notice-pop-head h2, .notice-pop-item h3 { color: #fff; }
}

/* ══════════════════════════════════════════════════════════════════
   서브 화면 1단계 — 메뉴로 여는 절에 시안 첫 판의 부품 규칙을 넓혀 쓴다 (2026-09-15)
   시안(JACA.fig)에는 서브 화면 판이 없다. 첫 판의 규칙 — 회색 면 카드 · 모서리 20 ·
   선 없음 · Brand 강조 · 본문 폭 1680 — 을 가져와 위의 옛 규칙을 덮기만 한다.
   HTML 은 건드리지 않았다. 옛 규칙은 정리 단계에서 걷어낼 것.

   색은 --ink · --paper-2 · --career 같은 이 파일의 이름만 쓴다. 다크모드 블록이 그
   이름을 바꾸므로, 팔레트 값(--c-gray-50)을 직접 박으면 어두운 화면에서 글이 사라진다.
   흰 글자 규칙은 이 블록에 쓰지 않는다(test_dark_mode_rules_stay_inside_the_media_query).
   ══════════════════════════════════════════════════════════════════ */
:root {
  --sub-pad: clamp(20px, 6.25vw, 120px);   /* 랜딩 .ld-wrap 과 같은 가로 여백 */
  --sub-gap-y: clamp(48px, 5vw, 96px);
  --brand-ink: var(--career);              /* Brand/600 · 어두운 화면 Brand/300 */
  --brand-soft: var(--career-soft);        /* Brand/50 */
}

/* ── 절 틀: 패널마다 한 화면이라 줄무늬(alt)는 뜻이 없다. 흰 지면 하나로 둔다. ── */
.home-panel section.band,
.home-panel .pick { padding: var(--sub-gap-y) 0; }
.home-panel section.band.alt,
.home-panel .pick { background: var(--paper); border: 0; }
.home-panel section.band > .wrap,
.home-panel .pick > .wrap {
  max-width: calc(1680px + 2 * var(--sub-pad)); padding: 0 var(--sub-pad);
  min-height: calc(100vh - var(--home-header-h) - 2 * var(--sub-gap-y));
  min-height: calc(100dvh - var(--home-header-h) - 2 * var(--sub-gap-y));
}

/* ── 절 머리 ── */
.kicker {
  font-size: clamp(14px, .9vw, 17px); letter-spacing: .02em; text-transform: none;
  color: var(--brand-ink);
}
.sechead, .home-panel .sechead { max-width: 960px; margin-bottom: clamp(32px, 3vw, 56px); }
.sechead h2 {
  margin-top: 12px; font-size: clamp(26px, 2.35vw, 45px); line-height: 1.45; color: var(--ink);
}
.sechead h2 em, .ld-why-head h2 em { font-style: normal; color: var(--brand-ink); }
.sechead p { margin-top: 16px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }

/* ── 차별점 카드(.why) — 랜딩 WHY JACA 칸과 같은 모양 ── */
.why-grid { gap: 24px; }
.why {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(28px, 2.5vw, 48px); border: 0; border-radius: var(--card-r);
  background: var(--paper-2);
}
.why .no {
  font-size: clamp(22px, 1.6vw, 30px); line-height: 1.3; font-weight: 700; letter-spacing: 0;
  color: var(--brand-ink);
}
.why h3 { margin: 4px 0 0; font-size: clamp(19px, 1.3vw, 25px); line-height: 1.43; color: var(--ink); }
.why p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
/* 근거 줄 — 점선 아래 회색 글씨 대신 Brand 옅은 면. 카드 높이가 달라도 바닥에 붙는다. */
.why .proof {
  margin-top: auto; padding: 10px 14px; border: 0; border-radius: var(--r-12);
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: 14px; line-height: 1.5; font-weight: 600;
}

/* ── 일반 카드 ── */
.card { padding: clamp(28px, 2.3vw, 44px); border-radius: var(--card-r); }
.home-panel section.band.alt .card { background: var(--paper-2); box-shadow: none; }
.card h3 { font-size: clamp(18px, 1.25vw, 24px); line-height: 1.43; color: var(--ink); }
.card h3 .code {
  border: 0; padding: 3px 8px; border-radius: var(--r-8); letter-spacing: .02em; font-size: 12px;
  background: var(--brand-soft); color: var(--brand-ink);
}
.card p { margin-top: 12px; font-size: clamp(15px, .95vw, 18px); line-height: 1.6; }
.card ul.ticks li { font-size: clamp(14px, .9vw, 17px); line-height: 1.55; }
.card ul.ticks li::before, .creed-list li::before { background: var(--c-brand-400); }

/* ── 안내 줄 · 표 · 칩 ── */
.notice-line,
.home-panel section.band.alt .notice-line {
  margin-top: 28px; padding: 16px 20px; border-left: 0; border-radius: var(--r-12);
  background: var(--paper-2); font-size: 15px; line-height: 1.6;
}
table.plain { font-size: clamp(14px, .9vw, 17px); }
table.plain th, table.plain td { padding: 16px 18px; }
table.plain thead th {
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink-2); background: var(--paper-2); border-bottom: 0;
}
table.plain thead th:first-child { border-radius: var(--r-12) 0 0 var(--r-12); }
table.plain thead th:last-child { border-radius: 0 var(--r-12) var(--r-12) 0; }
.compare { margin-top: 40px; }
.compare thead th:last-child, .compare td.yes { color: var(--brand-ink); }
.chips a, .chips span { border: 0; background: var(--paper-2); }
.chips a:hover { color: var(--brand-ink); background: var(--brand-soft); }
.btnrow { margin-top: 40px; }

/* ── 서비스 선택 — 선·윗띠 대신 면. 제품색은 시안대로 JPP = Teal · JAIS = Navy.
      (예전엔 진로 = Brand · 대입 = Teal 로 뒤바뀌어 있었다) ── */
.service {
  border: 0; border-radius: 26px; background: var(--paper-2); padding: clamp(32px, 2.6vw, 48px);
}
.service::before { display: none; }
.service:hover, .service:focus-visible { box-shadow: var(--sh-md); }
.service.career { --c: var(--admis); }
.service.admission { --c: var(--p-jais-text); }
.service .steps li { border: 0; border-radius: 999px; background: var(--paper); padding: 6px 12px; }
.bridge { border: 0; border-radius: var(--card-r); background: var(--paper-2); padding: clamp(24px, 2.2vw, 40px); }
.flow span { border: 0; border-radius: 999px; background: var(--paper); padding: 7px 14px; }

/* ── 믿음 문장 · FAQ · 게시판 ── */
.creed { border: 0; border-radius: 26px; background: var(--brand-soft); padding: clamp(32px, 3.5vw, 64px); }
.creed blockquote, .creed .closing { color: var(--ink); }
.creed .closing { border-top-color: var(--line); }
.faq-category h3 { font-size: clamp(18px, 1.2vw, 22px); }
.faq details { border: 0; border-radius: var(--r-12); background: var(--paper-2); padding: 0 24px; }
.faq summary { padding: 20px 0; font-size: clamp(16px, 1vw, 19px); color: var(--ink); }
.faq summary::before { color: var(--brand-ink); }
.faq details p { font-size: clamp(15px, .95vw, 17px); line-height: 1.65; }
.notice-row { border: 0; border-radius: var(--r-12); background: var(--paper-2); padding: 16px 20px; }

@media (max-width: 900px) {
  .why, .card { padding: 28px 24px; }
}
@media (prefers-color-scheme: dark) {
  .service.admission { --c: var(--c-navy-300); }   /* Navy/600 은 어두운 면에서 3:1 에 못 미친다 */
}

/* ══════════════════════════════════════════════════════════════════
   문의·요청사항 (/inquiry) — 2026-09-15 공개 페이지 틀로 옮김
   글쓰기 칸이 화면 폭을 다 쓰면 한 줄이 너무 길다. 본문은 960 으로 묶고 왼쪽 선은
   다른 페이지의 절 머리와 맞춘다. 색은 위 절과 같이 이 파일의 이름만 쓴다.
   ══════════════════════════════════════════════════════════════════ */
.iq-main { max-width: 960px; }
.iq-page .sechead { margin-bottom: 20px; }
.iq-private { margin: 0 0 24px; }
/* 로그인 상태 — 맨 위(2026-09-28). 안 됐으면 로그인 카드, 됐으면 '○○님으로 로그인됨' 한 줄. */
.iq-login { margin: 0 0 16px; border: 1px solid var(--c-brand-200, #c9d6ff); }
.iq-login h3 { margin-top: 0; }
.iq-login-ok { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px;
  background: #ecfdf3; border-color: #b7ebc9; color: #14532d; }
.iq-login-ok[hidden] { display: none; }
/* 카드의 display 가 hidden 속성을 이겨서, 로그인 안 한 사람에게도 글쓰기 칸이 보였다(2026-09-28 실측). */
.iq-page .card[hidden], .iq-page .notice-line[hidden], .iq-page [hidden] { display: none !important; }
/* 전화상담 칸 — 상담관리로 가는 신청서(연락처 필수). */
.iq-pc { display: grid; gap: 10px; margin: 0 0 12px; }
.iq-pc-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--c-brand-50, #eef3ff);
  font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.iq-ok-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: #16a34a; color: white; font-size: 12px; font-weight: 800; }
.iq-login-ok .linklike { margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer;
  color: #166534; text-decoration: underline; font: inherit; font-size: 14px; }
.iq-page .notice-line.warn { background: var(--gold-soft); }
.iq-page .card { margin-bottom: 16px; }
.iq-page .card h3 { margin-bottom: 4px; }
.iq-page .card .btnrow { margin-top: 20px; }
/* 체크박스는 빼야 한다 — 칸 규칙(width 100%)을 받아 줄 절반을 차지하고 설명이 오른쪽으로
   밀려 났다(2026-09-22 사용자 지적). 체크박스는 아래 `.iq-consent` 가 따로 그린다. */
.iq-form select, .iq-form input:not([type="checkbox"]):not([type="radio"]), .iq-form textarea {
  display: block; width: 100%; margin-top: 12px; padding: 12px 14px;
  font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r-12);
}
.iq-form textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.iq-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 6px;
  font-size: 14px; line-height: 1.6; color: var(--ink-2, #4a5568); cursor: pointer; }
/* 올리기 단추는 가운데(2026-09-22 사용자 지시). */
.iq-form .btnrow { justify-content: center; }
.iq-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0; cursor: pointer; }
.iq-form select:focus, .iq-form input:focus, .iq-form textarea:focus {
  outline: 2px solid var(--c-brand-400); outline-offset: 0; border-color: transparent;
}
.iq-sub { margin: 40px 0 14px; font-size: clamp(18px, 1.25vw, 22px); color: var(--ink); }
/* 내가 남긴 글 — 목록형. 한 줄 = 상태 · 분류 · 제목 · 작성일, 누르면 본문·답변이 펴진다. */
.iq-list { border-top: 2px solid var(--ink); }
.iq-head, .iq-row > summary {
  display: grid; grid-template-columns: 96px 88px minmax(0, 1fr) 96px; align-items: center; gap: 12px;
  padding: 14px 8px; border-bottom: 1px solid var(--line);
}
.iq-head { padding-block: 10px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--paper-2); }
.iq-head span:last-child, .iq-date { text-align: right; }
.iq-row > summary { cursor: pointer; list-style: none; font-size: 15px; }
.iq-row > summary::-webkit-details-marker { display: none; }
.iq-row > summary:hover { background: var(--paper-2); }
.iq-row[open] > summary { background: var(--paper-2); border-bottom-color: transparent; }
.iq-row > summary .badge { justify-self: start; }
.iq-cat { font-size: 14px; color: var(--ink-2); }
.iq-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.iq-has-answer { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--brand-ink); }
.iq-date { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.iq-detail { padding: 4px 16px 20px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.iq-detail .iq-answer { background: var(--paper); }
@media (max-width: 640px) {
  .iq-head { display: none; }
  .iq-row > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .iq-cat { display: none; }
}
.iq-body { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.iq-answer {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--r-12); background: var(--paper);
  font-size: 15px; line-height: 1.7; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere;
}
.iq-answer b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--brand-ink); }

/* ══════════════════════════════════════════════════════════════════
   서브 화면 3단계 — 절의 성격에 맞춘 틀 넷 (2026-09-15)
   1단계가 모든 절을 같은 부품으로 맞췄다면, 이 절은 '모든 절이 머리글 + 3열 카드'라
   어디를 열어도 똑같아 보이던 것을 푼다. 글은 그대로 두고 틀만 바꾼다.
     ① 원칙형 .sp-principle — 차별점 · WHY JACA : 왼쪽 제목 고정 + 오른쪽 번호 목록
     ② 흐름형 .flow         — 소개 · JPP · 수업 진행 : 칩 줄 → 번호 붙은 단계 줄
     ③ 상품형 .sp-row · .sp-product · .sp-duo — 과정 · 교재 · 지역 : 좌우 교차 · 태그 머리
     ④ 비교형 .sp-compare · .sp-plans — 차별점 비교 · 요금 : 세 칸, 우리 칸만 강조
   ══════════════════════════════════════════════════════════════════ */

/* ① 원칙형 */
.sp-principle {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 96px); align-items: start;
}
.sp-principle > .sechead { position: sticky; top: 24px; margin-bottom: 0; }
.sp-principle .why-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.sp-principle .why {
  display: grid; grid-template-columns: clamp(48px, 4vw, 72px) minmax(0, 1fr);
  column-gap: 20px; row-gap: 8px; padding: 28px 0; border-radius: 0;
  background: transparent; border-top: 1px solid var(--line);
}
.sp-principle .why:last-child { border-bottom: 1px solid var(--line); }
.sp-principle .why > * { grid-column: 2; }
.sp-principle .why > .no { grid-column: 1; grid-row: 1 / span 3; font-size: clamp(28px, 2.2vw, 40px); line-height: 1.1; }
.sp-principle .why h3 { margin: 0; }
.sp-principle .why .proof { margin-top: 6px; justify-self: start; }

/* ① 원칙형 왼쪽 — 숫자 셋 + 교육 네트워크 그림(제목 아래 빈칸, 제목과 함께 따라온다) */
.why-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 36px 0 0; padding: 0; }
.why-stats > div { padding-top: 12px; border-top: 2px solid var(--navy); }
.why-stats dt { font-size: clamp(28px, 2.4vw, 40px); font-weight: 800; line-height: 1.1; color: var(--brand-ink); letter-spacing: -.02em; }
.why-stats dd { margin: 6px 0 0; font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.why-net { display: block; width: 100%; max-width: 420px; height: auto; margin-top: 32px; }
.why-net .wn-lines line { stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.why-net .wn-core { fill: var(--brand-soft); stroke: var(--brand-ink); stroke-width: 2; }
.why-net .wn-core-t { font-size: 17px; font-weight: 800; fill: var(--brand-ink); dominant-baseline: auto; transform: translateY(-4px); }
.why-net .wn-sub { font-size: 8.5px; fill: var(--ink-2); }
.why-net .wn-node { fill: var(--paper-2); stroke: var(--line-2); stroke-width: 1.5; }
.why-net .wn-dots circle { fill: var(--brand-ink); }
.why-net .wn-t { font-size: 13px; font-weight: 700; fill: var(--ink); dominant-baseline: middle; }
.why-net .wn-tag { font-size: 11px; font-weight: 700; fill: var(--muted); letter-spacing: .04em; }

/* ② 흐름형 — `<i>→</i>` 는 숨기고 칸 윗줄과 번호로 순서를 보인다. */
.flow {
  counter-reset: fl; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 6px; align-items: stretch; margin-top: 20px;
}
.flow i { display: none; }
.flow span {
  counter-increment: fl; display: flex; flex-direction: column; gap: 6px;
  padding: 14px 14px 16px; border-radius: 0 0 var(--r-12) var(--r-12);
  border-top: 3px solid var(--c-brand-400); background: var(--paper);
  font-size: clamp(14px, .9vw, 16px); line-height: 1.4; font-weight: 600; color: var(--ink);
}
.flow span::before {
  content: counter(fl, decimal-leading-zero);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--brand-ink);
}
.flow span:last-of-type { border-top-color: var(--c-brand-600); }

/* ③ 상품형 */
.sp-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 80px); align-items: start;
  margin-top: clamp(64px, 6vw, 112px); padding-top: clamp(48px, 4vw, 72px);
  border-top: 1px solid var(--line);
}
.sp-row.first { margin-top: 0; padding-top: 0; border-top: 0; }
.sp-row.flip > :first-child { order: 2; }
.sp-row .sechead { margin-bottom: 0; }
.sp-row .sechead .btnrow { margin-top: 24px; }
.sp-row .notice-line { margin-top: 24px; }
.sp-row .grid.g2 { gap: 16px; }
.sp-stack { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sp-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sp-product { display: flex; flex-direction: column; }
.sp-product .sp-tag, .card .sp-tag {
  order: -1; margin: 0 0 10px; font-size: 13px; line-height: 1.4; font-weight: 700;
  letter-spacing: .06em; color: var(--brand-ink);
}
.sp-product h3 { font-size: clamp(20px, 1.45vw, 27px); }
.sp-product .btnrow { margin-top: auto; padding-top: 24px; }
.sp-duo .card h3 { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sp-duo .card h3 .code { font-size: 14px; padding: 4px 10px; }
.card.sp-buy { background: var(--brand-soft); }
.card.sp-buy h3 { color: var(--brand-ink); }

/* 온라인 화상수업: 첫 화면은 소개와 4개 선택지만 보이고, 선택한 상세 하나만 아래에 연다. */
.online-wrap { max-width: 1520px; }
.online-hero { grid-template-columns: minmax(420px, .9fr) minmax(560px, 1.1fr); gap: clamp(28px, 3vw, 56px); }
.online-picker {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}
.online-picker .card { min-height: 220px; }
.online-picker .btn.line[aria-current="true"] {
  background: var(--c-brand-600);
  border-color: var(--c-brand-600);
  color: var(--on-brand);
}
.online-detail { display: none; }
.online-detail.is-active { display: block; }
.online-detail > .sp-row { margin-top: clamp(36px, 4vw, 64px); }

/* ④ 비교형 */
.sp-compare {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin-top: clamp(48px, 4vw, 80px);
}
.sp-col { padding: clamp(24px, 2vw, 36px); border-radius: var(--card-r); background: var(--paper-2); }
.sp-col h3 {
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
  font-size: clamp(18px, 1.25vw, 22px); color: var(--muted);
}
.sp-col dl { margin: 0; }
.sp-col dt { margin-top: 18px; font-size: 13px; color: var(--muted); }
.sp-col dd { margin: 4px 0 0; font-size: clamp(15px, .95vw, 17px); line-height: 1.5; color: var(--ink-2); }
.sp-col.is-us, .sp-plan.is-us { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--c-brand-400); }
.sp-col.is-us h3, .sp-col.is-us dd { color: var(--brand-ink); font-weight: 700; }
/* 요금 절은 band.alt 라 `.home-panel section.band.alt .card` 가 그림자를 지운다 — 같은 무게로 다시 준다. */
.home-panel section.band.alt .sp-plan.is-us { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--c-brand-400); }
.sp-plan h3 { flex-direction: column; align-items: flex-start; gap: 6px; }
.sp-plan-name { font-size: 15px; font-weight: 600; color: var(--muted); }
.sp-price { font-size: clamp(24px, 1.7vw, 32px); line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }
/* '월 30,000원 꼴'은 가격 밑 한 줄로 — 옆에 붙이면 좁은 칸에서 '꼴'만 다음 줄로 떨어졌다(실측). */
.sp-price small { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }

@media (max-width: 1280px) {
  .sp-principle, .sp-row { grid-template-columns: minmax(0, 1fr); }
  .online-hero { grid-template-columns: minmax(0, 1fr); }
  .sp-principle > .sechead { position: static; }
  .sp-row.flip > :first-child { order: 0; }
  .why-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1281px) {
  .why-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sp-compare { grid-template-columns: minmax(0, 1fr); }
  .online-picker { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid.four { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   약관 · 개인정보 문서 (2026-09-16)
   읽히는 것이 전부인 화면이다. 장식을 줄이고 줄길이와 행간만 잡는다.
   ══════════════════════════════════════════════════════════════════════ */
section.band.legal { padding: 64px 0 80px; }
.legal .wrap.narrow { max-width: 820px; }
.legal h1 { margin-top: 10px; }
.lg-meta { margin-top: 10px; color: var(--ink-2); font-size: .92rem; }

.lg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.lg-tabs a {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .9rem; color: var(--ink-2); text-decoration: none;
}
.lg-tabs a:hover { border-color: var(--line-2); color: var(--ink); }
.lg-tabs a[aria-current] {
  background: var(--c-brand-600); border-color: var(--c-brand-600); color: var(--on-brand);
}

.lg-body { font-size: .96rem; line-height: 1.85; }
.lg-body p { margin: 0 0 12px; color: var(--ink-2); }
.lg-body h3,
.legal > .wrap > h3 {
  margin: 34px 0 12px; font-size: 1.05rem; color: var(--ink);
  padding-top: 18px; border-top: 1px solid var(--line);
}
.lg-body h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.lg-scroll { overflow-x: auto; margin: 0 0 18px; }
.lg-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.lg-table th, .lg-table td {
  border: 1px solid var(--line); padding: 9px 12px; text-align: left;
  vertical-align: top; color: var(--ink-2);
}
.lg-table thead th { background: var(--paper-3); color: var(--ink); font-weight: 600; }
.lg-table.biz th { width: 34%; background: var(--paper-3); color: var(--ink); }
.lg-note { margin-top: 10px; font-size: .88rem; color: var(--ink-2); }


/* ══════════════════════════════════════════════════════════════════════
   JACA AI 서비스 — 소개 / 차별점 (2026-09-16 확정 명세)
   ══════════════════════════════════════════════════════════════════════ */
section.band.svc { padding: 72px 0 80px; }

/* A. 헤드라인 — PC 중앙, 모바일 좌측(명세 §4.2) */
.svc-hero { text-align: center; max-width: 900px; margin: 0 auto 32px; }
.svc-hero h2 { margin-top: 10px; font-size: clamp(28px, 3vw, 40px); line-height: 1.25; }
.svc-hero .svc-lead { margin-top: 12px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.svc-flow {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; color: var(--ink-2); background: var(--paper);
}
.svc-flow i { font-style: normal; color: var(--c-brand-600); font-weight: 700; }

/* B. 주 탭 */
.svc-tabs {
  display: flex; gap: 6px; justify-content: center; margin: 0 auto 28px;
  padding: 6px; background: #F3F6FA; border-radius: 12px; width: max-content;
  max-width: 100%;
}
.svc-tab {
  min-width: 180px; height: 52px; padding: 0 20px; border: 0; border-radius: 9px;
  background: transparent; color: #5C667A; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.svc-tab[aria-selected="true"] {
  background: var(--c-brand-600); color: var(--on-brand); font-weight: 700;
  box-shadow: 0 1px 2px rgba(20, 30, 60, .16);
}
.svc-tab:focus-visible { outline: 2px solid var(--c-brand-600); outline-offset: 2px; }

/* 패널 — 탭을 바꿔도 화면이 크게 흔들리지 않게 최소 높이를 준다(명세 §5.2). */
.svc-panel { min-height: 420px; animation: svcFade .18s ease-out; }
@keyframes svcFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .svc-panel { animation: none; } }
.svc-panel:focus-visible { outline: 2px solid var(--c-brand-600); outline-offset: 4px; }

/* C-1. 서비스 카드 */
.svc-pick {
  display: flex; gap: 8px; justify-content: center; margin: 0 auto 18px; flex-wrap: wrap;
}
.svc-pick-btn {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink-2); font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.svc-pick-btn[aria-selected="true"] {
  background: var(--c-brand-600); border-color: var(--c-brand-600);
  color: var(--on-brand); font-weight: 700;
}
.svc-pick-btn:focus-visible { outline: 2px solid var(--c-brand-600); outline-offset: 2px; }
.svc-cards {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  max-width: 780px; margin: 0 auto;
}
.svc-card {
  display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: 26px; padding: 36px; background: var(--paper);
  border-top: 4px solid var(--line-2);
}
.svc-card { display: none; }
.svc-card.is-picked { display: flex; }
.svc-card.jpp { border-top-color: var(--c-teal-700, #0f766e); }
.svc-card.jais { border-top-color: var(--c-brand-600); }
.svc-card .badge {
  align-self: flex-start; padding: 4px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; background: var(--paper-3); color: var(--ink-2);
}
.svc-card.jpp .badge { background: var(--c-teal-50, #eefbf8); color: var(--c-teal-700, #0f766e); }
.svc-card.jais .badge { background: var(--c-brand-50); color: var(--c-brand-600); }
.svc-card h3 { margin-top: 14px; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.35; }
.svc-card .desc { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.svc-steps {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0;
  list-style: none; counter-reset: svcstep;
}
.svc-steps li {
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; color: var(--ink-2); background: var(--paper-2);
}
.svc-steps li::before { counter-increment: svcstep; content: counter(svcstep) ". "; color: var(--muted); }
.svc-note { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.svc-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 22px; }
.svc-actions .btn { flex: 1; min-height: 46px; display: grid; place-items: center; }

.svc-bridge { margin-top: 22px; text-align: center; font-size: 15px; color: var(--ink-2); }
.svc-bridge .short { display: none; }

/* C-2. 차별점 */
.svc-scope {
  display: flex; gap: 8px; justify-content: center; margin: 4px 0 24px; flex-wrap: wrap;
}
.svc-scope-btn {
  padding: 9px 20px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink-2); font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.svc-scope-btn[aria-selected="true"] {
  background: var(--c-brand-600); border-color: var(--c-brand-600);
  color: var(--on-brand); font-weight: 700;
}
.svc-scope-btn:focus-visible { outline: 2px solid var(--c-brand-600); outline-offset: 2px; }

.diff-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  /* 범위마다 색 — 공통은 브랜드, JPP 는 위 JPP 카드와 같은 청록, JAIS 는 브랜드 */
  --dc: var(--career); --dc-soft: var(--career-soft);
}
.diff-grid[data-scope="jpp"] { --dc: var(--admis); --dc-soft: var(--admis-soft); }
.diff-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px 24px;
  background: var(--paper); min-height: 196px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* 위쪽 가는 색띠 — 올려야 드러난다 */
.diff-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--dc); opacity: 0; transition: opacity .18s ease;
}
.diff-card:hover {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--dc) 35%, var(--line));
  box-shadow: 0 12px 28px rgba(20, 30, 60, .08);
}
.diff-card:hover::before { opacity: 1; }
.diff-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.diff-card .ic {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
  background: var(--dc-soft); color: var(--dc);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc) 14%, transparent);
}
.diff-card .ic svg { width: 26px; height: 26px; }
.diff-card .no {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--dc);
  opacity: .45; font-variant-numeric: tabular-nums;
}
.diff-card h4 { font-size: 18px; font-weight: 700; line-height: 1.4; }
.diff-card p { margin-top: 10px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .diff-card, .diff-card::before { transition: none; }
  .diff-card:hover { transform: none; }
}
@media (prefers-color-scheme: dark) {
  .diff-card { background: var(--paper-2); }
  .diff-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
}

@media (max-width: 900px) {
  .diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  section.band.svc { padding: 44px 0 56px; }
  .svc-hero { text-align: left; }
  .svc-hero h2 { font-size: clamp(26px, 7vw, 32px); }
  /* 본문 크기는 `--fs-body` 한 곳이다 — 여기서 다시 적으면 그 규칙이 깨진다(2026-09-19). */
  .svc-tabs { width: 100%; }
  .svc-tab { flex: 1; min-width: 0; height: 48px; padding: 0 8px; font-size: 14px; }
  .svc-panel { min-height: 0; }

  /* 큰 카드 둘을 세로로 쌓지 않는다 — 고른 쪽 하나만 보인다(명세 §8). */
  .svc-pick { margin-bottom: 16px; }
  .svc-pick-btn { flex: 1; min-width: 0; padding: 0 8px; }
  .svc-cards { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .svc-card { display: none; border-radius: 20px; padding: 24px; }
  .svc-card.is-picked { display: flex; }
  .svc-actions { flex-direction: column; }
  .svc-bridge .long { display: none; }
  .svc-bridge .short { display: inline; }
  .diff-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .diff-card { min-height: 0; padding: 20px; border-radius: 16px; }
  .diff-top { margin-bottom: 14px; }
  .diff-card .ic { width: 44px; height: 44px; border-radius: 12px; }
  .diff-card .ic svg { width: 22px; height: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════
   교육 프로그램(#classes) 첫 화면 — 2026-09-17 사용자 시안.
   왼쪽은 말, 오른쪽은 '수업이 실제로 어떻게 생겼는지'를 보여 준다.
   화상수업 화면은 **사진이 아니라 CSS 로 그린 모형**이다 — 사진이 준비되면
   `.edu-tile` 안에 <img> 를 넣으면 칸·모서리는 그대로 쓰인다.
   ══════════════════════════════════════════════════════════════════════ */
.edu-hero {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  gap: 44px;
  align-items: center;
  padding: clamp(20px, 3.2vw, 54px) 0 28px;
}

#classes {
  background:
    radial-gradient(circle at 0 12%, rgba(49, 87, 213, .12), transparent 33%),
    radial-gradient(circle at 96% 16%, rgba(0, 176, 185, .14), transparent 30%),
    linear-gradient(135deg, #fff 0%, #eef8ff 48%, #f5f1ff 100%);
}

.edu-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: .82rem; font-weight: 700; letter-spacing: .16em;
  color: var(--career); text-transform: uppercase;
}
.edu-eyebrow::after {
  content: ""; flex: 1; height: 1px; max-width: 150px;
  background: linear-gradient(90deg, var(--c-brand-300), transparent);
}

.edu-title {
  margin: 18px 0 0;
  font-size: clamp(2.15rem, 4.05vw, 4.1rem);
  line-height: 1.18; color: var(--navy);
}
.edu-title em {
  font-style: normal;
  background: linear-gradient(90deg, #006f9f, var(--career) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.edu-lead { margin-top: 20px; color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-body); }

.edu-claim {
  margin-top: 16px; font-weight: 700; color: var(--career); font-size: 1.05rem;
}

.edu-hero .btnrow { margin-top: 26px; }

/* ── 화상수업 모형 ── */
.edu-hero-visual { display: grid; gap: 14px; }

.edu-screen {
  border: 1px solid rgba(49, 87, 213, .3);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 20px 50px rgba(49, 87, 213, .2), inset 0 0 0 1px rgba(255, 255, 255, .58);
  overflow: hidden;
}

.edu-screen-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 12px 18px;
  background: linear-gradient(115deg, #0f82ff 0%, var(--c-brand-600) 55%, #284bc3 100%);
  color: var(--on-brand);
}
.edu-screen-bar b { font-size: clamp(.92rem, 1.35vw, 1.28rem); }
.edu-screen-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 34px; border-radius: 14px;
  background: rgba(0, 212, 255, .2);
}
.edu-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: .78rem; font-weight: 700;
}
.edu-live i { width: 7px; height: 7px; border-radius: 50%; background: #7CF3A0; }
.edu-tool {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(8, 30, 120, .16);
}
.edu-tool.mic::before {
  content: "";
  width: 8px; height: 14px; border-radius: 999px;
  background: currentColor;
}
.edu-tool.mic::after {
  content: "";
  position: absolute; width: 14px; height: 10px; bottom: 8px;
  border: 2px solid currentColor; border-top: 0; border-radius: 0 0 999px 999px;
}
.edu-tool.cam::before {
  content: "";
  width: 14px; height: 10px; border-radius: 3px;
  background: currentColor;
}
.edu-tool.cam::after {
  content: "";
  position: absolute; right: 7px;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.edu-screen-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px; padding: 12px;
  background: linear-gradient(180deg, #f8fbff, #edf4ff);
}

.edu-stage {
  display: grid; gap: 8px;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-areas: "main s1 s2" "main s3 s4";
}
.edu-tile {
  position: relative;
  min-height: 74px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .2)),
    linear-gradient(150deg, var(--c-brand-100), var(--c-navy-100));
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.edu-tile img { width: 100%; height: 100%; object-fit: cover; }
.edu-tile-main { grid-area: main; min-height: 156px; justify-content: flex-start; }
.edu-tile:nth-of-type(2) { grid-area: s1; }
.edu-tile:nth-of-type(3) { grid-area: s2; }
.edu-tile:nth-of-type(4) { grid-area: s3; }
.edu-tile:nth-of-type(5) { grid-area: s4; }
.edu-tile.teacher {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .92), transparent 28%),
    linear-gradient(145deg, #f8fbff 0%, #d9ecff 55%, #e9e3ff 100%);
}
.edu-tile.student.a { background: linear-gradient(145deg, #f6f9ff, #e3efff); }
.edu-tile.student.b { background: linear-gradient(145deg, #fff7fb, #e7f4ff); }
.edu-tile.student.c { background: linear-gradient(145deg, #effbf6, #e2edff); }
.edu-tile.student.d { background: linear-gradient(145deg, #fff9ef, #ecf2ff); }
.edu-board {
  position: absolute; inset: 14px 14px auto auto;
  width: 42%;
  padding: 12px 10px; border-radius: 8px;
  background: var(--paper); color: var(--career);
  font-weight: 700; font-size: .84rem; line-height: 1.35; text-align: center;
  border: 1px solid var(--line);
}
.edu-avatar {
  position: absolute; left: 50%; bottom: 28px; translate: -50% 0;
  width: 44px; height: 54px;
}
.student .edu-avatar {
  bottom: 8px;
  width: 38px;
  height: 48px;
}
.edu-tile-main .edu-avatar {
  left: 30%; bottom: 16px; width: 100px; height: 128px;
}
.edu-avatar::before {
  content: "";
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  width: 42%; aspect-ratio: 1; border-radius: 50%;
  background: #ffd9c7;
  box-shadow: 0 -6px 0 4px #30314c;
}
.edu-avatar::after {
  content: "";
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: 78%; height: 58%; border-radius: 999px 999px 12px 12px;
  background: linear-gradient(160deg, #fff, #cfdcff);
  border: 1px solid rgba(49, 87, 213, .16);
}
.student .edu-avatar::after { background: linear-gradient(160deg, #34545e, #d9e7ff); }
.student.b .edu-avatar::before { box-shadow: 0 -7px 0 4px #2b293b; }
.student.c .edu-avatar::before { box-shadow: 0 -6px 0 4px #263f34; }
.student.d .edu-avatar::before { box-shadow: 0 -7px 0 4px #393045; }
.edu-who {
  position: relative; z-index: 1;
  margin-bottom: 6px; padding: 2px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .86); color: var(--ink-2);
  font-size: .72rem; font-weight: 600;
}

.edu-side {
  padding: 12px; border-radius: 10px;
  background: var(--paper); border: 1px solid var(--line);
}
.edu-side-tabs {
  display: flex; gap: 12px; padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: .78rem; color: var(--muted);
}
.edu-side-tabs b { color: var(--career); }
.edu-side-head { font-size: .84rem; font-weight: 700; color: var(--ink); }
.edu-checks { margin: 8px 0 14px; display: grid; gap: 7px; }
.edu-checks li {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--muted);
}
.edu-checks li::before {
  content: ""; width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px solid var(--line-2); flex: none;
}
.edu-checks li.on { color: var(--ink-2); }
.edu-checks li.on::before {
  border-color: var(--career); background: var(--career);
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--career);
}
.edu-bar {
  position: relative; height: 8px; border-radius: 999px;
  background: var(--paper-3); margin-top: 8px;
}
.edu-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-600));
}
.edu-bar b {
  position: absolute; right: 0; top: -20px;
  font-size: .76rem; color: var(--muted);
}

/* ── 수업 네 가지 ── */
.edu-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.edu-kind {
  display: grid; gap: 6px; justify-items: center; text-align: center;
  padding: 14px 10px;
  border: 1px solid rgba(49, 87, 213, .24); border-radius: 12px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 24px rgba(49, 87, 213, .08);
  transition: border-color .15s, transform .15s;
}
.edu-kind:hover, .edu-kind:focus-visible {
  border-color: var(--career); transform: translateY(-2px);
}
.edu-kind b { font-size: .92rem; color: var(--navy); }
.edu-kind-sub { font-size: .74rem; color: var(--muted); line-height: 1.4; }
.edu-kind-ico, .edu-step-ico {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--career);
}
.edu-kind-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--career-soft); }

/* ── 소수정예 · 오프라인 ── */
.edu-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 10px; }
.edu-small {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 10px;
  padding: 16px 18px;
  border: 1px solid rgba(49, 87, 213, .18); border-radius: 12px; background: rgba(255, 255, 255, .86);
  font-size: .86rem; color: var(--ink-2);
}
.edu-small b { color: var(--navy); }

.edu-offline {
  display: block; padding: 0 0 12px;
  border: 1px solid rgba(247, 148, 30, .55); border-radius: 14px;
  background: #fffaf4; overflow: hidden;
  box-shadow: 0 12px 28px rgba(247, 148, 30, .1);
}
.edu-offline-tag {
  padding: 10px 14px; background: linear-gradient(90deg, var(--c-orange-500), #ff8d3c); color: var(--on-brand);
  font-size: .86rem; font-weight: 700; letter-spacing: .04em;
}
.edu-offline-body { display: flex; gap: 12px; padding: 12px 14px 8px; }
.edu-offline-photo {
  flex: none; width: 92px; border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 18px),
    linear-gradient(160deg, var(--c-navy-300), var(--c-navy-500));
  color: var(--on-brand); font-weight: 800; letter-spacing: .1em; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
  min-height: 62px;
}
.edu-offline-copy { display: grid; gap: 4px; font-size: .8rem; color: var(--ink-2); }
.edu-offline-copy b { font-size: .95rem; color: var(--gold); }
.edu-offline-note {
  margin: 0 14px; padding-top: 8px; border-top: 1px dashed var(--c-orange-100);
  font-size: .78rem; color: var(--ink-2);
}

/* ── 수업 진행 흐름 ── */
.edu-flow {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 28px; align-items: center;
  margin-top: 14px; padding: 20px 24px;
  border: 1px solid rgba(49, 87, 213, .14); border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 16px 38px rgba(49, 87, 213, .08);
}
.edu-steps { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 0; list-style: none; }
.edu-steps li {
  position: relative;
  display: grid; gap: 8px; justify-items: center; text-align: center;
  font-size: .8rem; font-weight: 600; color: var(--ink-2); flex: 1;
}
.edu-steps li + li::before {
  content: "\2192"; position: absolute; left: -12px; top: 12px;
  color: var(--c-brand-300);
}
.edu-step-ico {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--c-brand-200);
}
.edu-flow-say { font-weight: 700; color: var(--navy); font-size: 1.02rem; line-height: 1.5; }
.edu-flow-note { margin-top: 10px; }

@media (max-width: 1080px) {
  .edu-hero { grid-template-columns: 1fr; gap: 28px; }
  .edu-screen-body { grid-template-columns: 1fr; }
  .edu-flow { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .edu-hero { padding-top: 14px; }
  .edu-title { font-size: clamp(2rem, 11vw, 3rem); }
  .edu-screen-bar { flex-wrap: wrap; }
  .edu-live { margin-left: 0; }
  .edu-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu-bottom { grid-template-columns: 1fr; }
  .edu-small { grid-template-columns: 1fr; }
  .edu-stage { grid-template-columns: 1fr 1fr; grid-template-areas: "main main" "s1 s2" "s3 s4"; }
  .edu-board { width: 46%; }
  .edu-steps { flex-wrap: wrap; gap: 12px; }
  .edu-steps li { flex: 0 0 28%; }
  .edu-steps li + li::before { content: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   입시 컨설팅(#consulting) 첫 화면 — 2026-09-18 사용자 시안.
   남색은 글자·중심 원에만, 금색은 선·강조에만 쓴다(파일 머리의 원칙).
   색은 전부 토큰이다 — 다크 화면에서 혼자 밝게 남지 않게.
   ══════════════════════════════════════════════════════════════════════ */
.cs-band { background: linear-gradient(135deg, var(--paper) 0%, var(--gold-soft) 100%); }
.cs-hero {
  display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  gap: 44px; align-items: center; padding: 8px 0 26px;
}
.cs-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: .8rem; font-weight: 700; letter-spacing: .2em; color: var(--gold);
}
.cs-eyebrow::after {
  content: ""; flex: 1; max-width: 120px; height: 1px; background: var(--gold);
}
.cs-title {
  margin: 18px 0 0; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.22; color: var(--navy);
}
.cs-lead { margin-top: 20px; color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-body); }
.cs-since {
  margin-top: 20px; padding-top: 16px; position: relative;
  font-weight: 800; font-size: 1.15rem; color: var(--gold);
}
.cs-since::before {
  content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 2px; background: var(--gold);
}
.cs-hero .btnrow { margin-top: 24px; }
/* 선택자를 `.cs-hero .btn.…` 으로 올린다 — 공용 `button.btn` 규칙이 배경을 투명으로
   덮어 흰 글자가 사라졌다(2026-09-18 실측). */
:is(.cs-hero, .ch-hero) .btn.cs-btn-main { background: var(--navy); color: var(--on-brand); border: 1px solid var(--navy); }
:is(.cs-hero, .ch-hero) .btn.cs-btn-main:hover { background: var(--navy-2); }
:is(.cs-hero, .ch-hero) .btn.cs-btn-line { background: var(--paper); color: var(--navy); border: 1px solid var(--gold); }

/* ── 가운데 원과 네 기둥 ── */
.cs-visual { display: grid; gap: 16px; }
.cs-hub {
  position: relative;
  display: grid; gap: 14px 18px; align-items: center;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "n1 core n2" "n3 core n4";
}
/* 원과 기둥을 잇는 금색 고리 — 장식이라 읽히지 않는다 */
.cs-hub::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 300px; height: 300px; transform: translate(-50%, -50%);
  border: 1px solid var(--c-orange-100); border-radius: 50%; pointer-events: none;
}
.cs-node {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  background: var(--paper); border: 1px solid var(--c-orange-100);
  border-radius: 999px; box-shadow: var(--shadow);
}
.cs-node.n1 { grid-area: n1; } .cs-node.n2 { grid-area: n2; }
.cs-node.n3 { grid-area: n3; } .cs-node.n4 { grid-area: n4; }
.cs-node b { display: block; color: var(--navy); font-size: .98rem; }
.cs-node small { display: block; margin-top: 2px; color: var(--ink-2); font-size: .8rem; line-height: 1.4; }
.cs-node-ico, .cs-svc-ico, .cs-step-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
}
.cs-node-ico { width: 54px; height: 54px; border-radius: 50%; }
.cs-node-ico.gold  { background: var(--gold-soft); color: var(--gold); }
.cs-node-ico.blue  { background: var(--career-soft); color: var(--career); }
.cs-node-ico.green { background: var(--admis-soft); color: var(--admis); }

.cs-core {
  grid-area: core; position: relative; z-index: 1;
  width: 190px; height: 190px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  background: radial-gradient(circle at 50% 35%, var(--c-navy-700), var(--navy));
  border: 4px solid var(--c-orange-100);
  box-shadow: 0 0 0 6px var(--paper), var(--shadow);
  color: var(--on-brand);
}
.cs-core-star { color: var(--c-orange-500); }
.cs-core-star svg { width: 40px; height: 40px; }
.cs-core b { font-size: 1.02rem; line-height: 1.35; }
.cs-core small { font-size: .62rem; letter-spacing: .14em; opacity: .8; }

/* ── JPP → JAIS → JGF ── */
.cs-chain {
  padding: 14px 18px; text-align: center;
  background: var(--paper); border: 1px solid var(--c-orange-100); border-radius: 999px;
}
.cs-chain-row {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.cs-chain-row i { font-style: normal; color: var(--gold); }
.cs-svc { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--navy); }
.cs-svc:hover { text-decoration: underline; }
.cs-svc-ico { width: 36px; height: 36px; border-radius: 50%; }
.cs-svc-ico svg { width: 20px; height: 20px; }
.cs-svc-ico.green { background: var(--admis-soft); color: var(--admis); }
.cs-svc-ico.blue  { background: var(--career-soft); color: var(--career); }
.cs-svc-ico.red   { background: var(--c-orange-50); color: var(--c-orange-700); }
.cs-chain p { margin-top: 8px; font-size: .84rem; color: var(--ink-2); }

/* ── 진단 → 분석 → 처방 → 전략 → 관리 ── */
.cs-flow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 28px; align-items: center;
  margin-top: 8px; padding: 18px 24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
}
.cs-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cs-steps li {
  position: relative; flex: 1;
  display: grid; justify-items: center; gap: 6px;
  font-size: .82rem; font-weight: 700; color: var(--navy);
}
.cs-steps li + li::before {
  content: "\2192"; position: absolute; left: -10px; top: 14px; color: var(--gold);
}
.cs-step-ico {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--gold); color: var(--gold); background: var(--paper);
}
.cs-step-ico svg { width: 22px; height: 22px; }
.cs-flow-say {
  display: grid; gap: 6px; padding-left: 24px; border-left: 1px solid var(--line);
}
.cs-flow-say b { color: var(--navy); font-size: 1.05rem; }
.cs-flow-say span { color: var(--ink-2); font-size: .92rem; }

@media (max-width: 1080px) {
  .cs-hero { grid-template-columns: 1fr; gap: 28px; }
  .cs-flow { grid-template-columns: 1fr; gap: 14px; }
  .cs-flow-say { padding-left: 0; border-left: 0; }
}
@media (max-width: 720px) {
  .cs-hub {
    grid-template-columns: 1fr;
    grid-template-areas: "core" "n1" "n2" "n3" "n4";
    justify-items: stretch;
  }
  .cs-hub::before { content: none; }
  .cs-core { justify-self: center; width: 170px; height: 170px; }
  .cs-chain { border-radius: 16px; }
  .cs-steps li + li::before { left: -8px; }
}

/* ══════════════════════════════════════════════════════════════════════
   진로·진학(#career-home) 첫 화면 — 2026-09-18 사용자 시안.
   왼쪽 글·단추는 입시 컨설팅 첫 화면과 같은 틀(cs-*)을 쓴다.
   ══════════════════════════════════════════════════════════════════════ */
.ch-band { background: linear-gradient(135deg, var(--paper) 0%, var(--gold-soft) 100%); }
.ch-hero {
  display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: 40px; align-items: center; padding: 8px 0 22px;
}
.ch-hero .btnrow { margin-top: 24px; }
.ch-visual { display: grid; gap: 16px; }
.ch-script {
  justify-self: center; text-align: center;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 1.9rem; color: var(--gold); transform: rotate(-6deg);
}
.ch-script small {
  display: block; margin-top: 2px; font-family: var(--font-sans);
  font-size: .8rem; letter-spacing: .08em; color: var(--ink-2); transform: rotate(6deg);
}
.ch-cards { display: flex; align-items: center; gap: 10px; }
.ch-card {
  flex: 1 1 0; min-width: 0;
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 22px 14px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--paper); box-shadow: var(--shadow);
  transition: transform .15s;
}
.ch-card:hover, .ch-card:focus-visible { transform: translateY(-3px); }
.ch-card.jais { transform: scale(1.04); }
.ch-card.jais:hover, .ch-card.jais:focus-visible { transform: scale(1.04) translateY(-3px); }
.ch-logo {
  width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--on-brand);
}
.ch-name { font-family: Georgia, "Times New Roman", serif; font-size: 2rem; line-height: 1.1; }
.ch-sub { font-weight: 800; font-size: .95rem; }
.ch-desc {
  margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: .8rem; line-height: 1.5; color: var(--ink-2);
}
.ch-card.jpp  { border-color: var(--c-teal-100); background: linear-gradient(180deg, var(--c-teal-50), var(--paper)); }
.ch-card.jais { border-color: var(--c-brand-100); background: linear-gradient(180deg, var(--c-brand-50), var(--paper)); }
.ch-card.jgf  { border-color: var(--c-red-100); background: linear-gradient(180deg, var(--c-red-50), var(--paper)); }
.ch-card.jpp  .ch-logo { background: var(--c-teal-600); }
.ch-card.jais .ch-logo { background: var(--c-brand-600); }
.ch-card.jgf  .ch-logo { background: var(--c-red-500); }
.ch-card.jpp  .ch-name, .ch-card.jpp  .ch-sub { color: var(--c-teal-700); }
.ch-card.jais .ch-name, .ch-card.jais .ch-sub { color: var(--c-brand-700); }
.ch-card.jgf  .ch-name, .ch-card.jgf  .ch-sub { color: var(--c-red-600); }
.ch-arrow { flex: none; font-style: normal; font-size: 1.6rem; color: var(--gold); }
.ch-plus {
  justify-self: center; display: flex; align-items: center; gap: 18px;
  padding: 12px 26px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--c-orange-100);
  font-weight: 800; color: var(--navy);
}
.ch-plus > span { display: inline-flex; align-items: center; gap: 8px; }
.ch-plus-ico { color: var(--gold); display: inline-flex; }
.ch-plus b {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--c-orange-500); color: var(--on-brand);
}
.ch-feats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin: 8px 0 0; padding: 16px 0; list-style: none;
  border-top: 1px solid var(--line);
}
.ch-feats li {
  display: flex; gap: 12px; align-items: flex-start; padding: 0 18px;
  font-size: .8rem; line-height: 1.5; color: var(--ink-2);
}
.ch-feats li + li { border-left: 1px solid var(--line); }
.ch-feats b { display: block; font-size: .95rem; color: var(--navy); margin-bottom: 2px; }
.ch-feat-ico {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--gold); color: var(--gold);
}

/* ══════════════════════════════════════════════════════════════════════
   서비스 소개(#services) — JPP 에서 JAIS · JGF 로 갈라지는 그림 (2026-09-18 사용자 시안).
   셋 다 늘 보인다. 예전(하나씩 골라 보기)의 고르기 단추는 쓰지 않는다.
   ══════════════════════════════════════════════════════════════════════ */
.svc-hero h2 em { font-style: normal; color: var(--c-brand-600); }
.svc-meta { margin-top: 14px; font-weight: 700; color: var(--ink-2); }
.svc-meta i { font-style: normal; color: var(--muted); margin: 0 4px; }
#services .svc-pick { display: none; }
#services .svc-cards { max-width: none; }
.svc-map {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr);
  align-items: stretch;
}
.svc-map-side { display: grid; gap: 18px; }
.svc-map-main { display: flex; align-items: center; }
.svc-map-mid { position: relative; display: flex; align-items: center; justify-content: center; }
.svc-map-mid svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.svc-map-mid path { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.svc-map-mid .to-main { stroke: var(--c-teal-600); }
.svc-map-mid .to-a { stroke: var(--c-brand-500); }
.svc-map-mid .to-b { stroke: var(--c-red-500); }
.svc-map-bubble {
  position: relative; z-index: 1; max-width: 170px; text-align: center;
  padding: 12px 16px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-weight: 700; font-size: .88rem; line-height: 1.4; color: var(--ink);
}
.svc-map .svc-card {
  display: flex; flex-direction: column; width: 100%;
  padding: 22px 24px; border-radius: 22px; border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.svc-map .svc-card.big { padding: 34px 32px; }
.svc-map .svc-card.jpp  { border-color: var(--c-teal-100); background: linear-gradient(160deg, var(--paper), var(--c-teal-50)); }
.svc-map .svc-card.jais { border-color: var(--c-brand-100); background: linear-gradient(160deg, var(--paper), var(--c-brand-50)); }
.svc-map .svc-card.jgf  { border-color: var(--c-red-100); background: linear-gradient(160deg, var(--paper), var(--c-red-50)); }
.svc-head { display: flex; align-items: center; gap: 14px; }
.svc-logo {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--on-brand);
}
.svc-logo svg { width: 28px; height: 28px; }
.svc-card.big .svc-logo { width: 84px; height: 84px; }
.svc-card.big .svc-logo svg { width: 42px; height: 42px; }
.svc-name { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.8rem; line-height: 1.1; }
.svc-card.big .svc-name { font-size: 2.6rem; }
.svc-sub { display: block; margin-top: 2px; font-weight: 700; font-size: .92rem; }
.svc-card.jpp  .svc-logo { background: var(--c-teal-600); }
.svc-card.jais .svc-logo { background: var(--c-brand-600); }
.svc-card.jgf  .svc-logo { background: var(--c-red-500); }
.svc-card.jpp  :is(.svc-name, .svc-sub) { color: var(--c-teal-700); }
.svc-card.jais :is(.svc-name, .svc-sub) { color: var(--c-brand-700); }
.svc-card.jgf  :is(.svc-name, .svc-sub) { color: var(--c-red-600); }
.svc-map .svc-card h3 { margin-top: 14px; font-size: 1.15rem; line-height: 1.4; }
.svc-map .svc-card.big h3 { font-size: 1.45rem; }
.svc-path {
  margin-top: 12px; padding: 8px 14px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-2);
}
.svc-path i { font-style: normal; color: var(--muted); margin: 0 4px; }
.svc-map .svc-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 0; }
.svc-map .svc-actions .btn.svc-start {
  flex: none; display: inline-flex; min-height: 44px; padding: 0 24px;
  border-radius: 999px; color: var(--on-brand); font-weight: 700;
}
.svc-card.jpp  .btn.svc-start { background: var(--c-teal-700); border-color: var(--c-teal-700); }
.svc-card.jais .btn.svc-start { background: var(--c-brand-600); border-color: var(--c-brand-600); }
.svc-card.jgf  .btn.svc-start { background: var(--c-red-600); border-color: var(--c-red-600); }
.svc-learn { font-size: .85rem; color: var(--ink-2); text-decoration: underline; }
.svc-map .svc-note { margin-top: 10px; font-size: .75rem; }
.svc-foot {
  margin-top: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper);
}
.svc-foot-say {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 20px; text-align: center;
}
.svc-foot-say b { font-size: 1.05rem; color: var(--navy); }
.svc-foot-say span { padding-left: 18px; border-left: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; }
.svc-foot-feats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0; padding: 12px 0; list-style: none;
  background: var(--paper-2); border-top: 1px solid var(--line); border-radius: 0 0 18px 18px;
}
.svc-foot-feats li { text-align: center; font-weight: 600; font-size: .9rem; color: var(--ink); }
.svc-foot-feats li + li { border-left: 1px solid var(--line); }

@media (max-width: 1080px) {
  .ch-hero { grid-template-columns: 1fr; gap: 26px; }
  .ch-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .ch-feats li:nth-child(3) { border-left: 0; }
  .svc-map { grid-template-columns: 1fr; gap: 14px; }
  .svc-map-mid { min-height: 0; padding: 4px 0; }
  .svc-map-mid svg { display: none; }
}
@media (max-width: 720px) {
  .ch-cards { flex-direction: column; align-items: stretch; }
  .ch-arrow { transform: rotate(90deg); align-self: center; }
  .ch-card.jais, .ch-card.jais:hover { transform: none; }
  .ch-plus { flex-wrap: wrap; justify-content: center; border-radius: 16px; }
  .ch-feats { grid-template-columns: 1fr; }
  .ch-feats li + li { border-left: 0; }
  .svc-foot-say span { padding-left: 0; border-left: 0; }
  .svc-foot-feats { grid-template-columns: 1fr; gap: 8px; }
  .svc-foot-feats li + li { border-left: 0; }
  .svc-map .svc-actions { flex-wrap: wrap; }
}

/* ── 홈 첫 화면 JPP · JAIS 카드의 '서비스 시작하기' (2026-09-18 사용자 지시) ──
   카드를 눌러도 소개만 나와 "이걸 쓰면 되는구나"를 몰랐다. 카드 안에 시작 단추를
   두고, 소개는 옆의 작은 글자 링크로 둔다. 카드 자체는 더 이상 링크가 아니다
   (링크 안에 링크를 넣을 수 없다). */
.ld-svc-go { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ld-svc-start {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px;
  background: var(--on-brand); color: var(--navy); font-weight: 800; font-size: 1.02rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12); transition: transform .15s;
}
.ld-svc-start:hover, .ld-svc-start:focus-visible { transform: translateY(-2px); }
.ld-svc-card.jpp .ld-svc-start { color: var(--c-teal-700); }
.ld-svc-card.jais .ld-svc-start { color: var(--c-navy-800); }
.ld-svc-hint { font-size: .82rem; line-height: 1.5; opacity: .85; }