/* ━━━ 공통 — 리셋 · 레이아웃 · 섹션 머리 · 컴포넌트 ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   섹션별 스타일은 sections.css. 여기 있는 것은 두 섹션 이상이 같이 쓰는 것만.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 리셋 ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }   /* scroll-behavior: smooth 를 쓰지 않는다 — 새로고침 스크롤 복원까지 애니메이션돼 맨 위부터 훑고 내려간다. 페이지 안 링크만 JS 로(common.js) */
body { margin: 0; font-family: var(--font); letter-spacing: var(--ls-body); color: var(--ink); background: var(--white);
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }   /* display 를 준 요소(.chip 등)도 hidden 이면 숨긴다(교재 영역 칩) */
html.is-restoring body { visibility: hidden; }   /* 새로고침 스크롤 복원 직전까지만(scroll-restore.js) */
::selection { background: var(--selection); }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
html.is-pointer :focus-visible { outline: none; }   /* 터치 · 마우스로 누른 뒤 스크립트가 옮긴 포커스에는 링을 그리지 않는다 — common.js 가 pointerdown 에 붙이고 keydown 에 뗀다 */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: var(--z-skip-link); padding: 10px 16px; background: var(--ink); color: var(--white); border-radius: var(--r-pill); font-size: var(--fs-14); }
.skip-link:focus { top: 12px; }
body.is-locked { overflow: hidden; }

/* ── 컨테이너 · 10컬럼 그리드 ──
   .container : max 1440 · 좌우 40 → 콘텐츠 1360
   .grid      : 10컬럼(태블릿 6 · 모바일 4) · 거터 20. 자식은 .span-N 으로 칸을 잡는다. */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-full { grid-column: 1 / -1; }

/* ── 섹션 · 세로 리듬 ──
   모든 섹션은 padding-block: --sec-py. 색 밴드는 .sec--surface · .sec--dark 로 바탕만 바꾼다. */
.sec { position: relative; padding-block: var(--sec-py); }
.sec--surface { background: var(--surface); }
.sec--dark { background: var(--dark); color: var(--white); }

/* 섹션 머리: 레드 아이브로 → 제목 → 리드 (가운데 정렬) */
.sec-head { text-align: center; margin-bottom: var(--head-gap); }
.sec-head__eyebrow { font-family: var(--display); font-weight: 800; font-size: var(--fs-32); line-height: 1.3; letter-spacing: var(--ls-title); color: var(--red); }
.sec-head__title { margin-top: var(--eyebrow-gap); font-family: var(--display); font-weight: 900; font-size: var(--fs-64); line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }
.sec-head__lead { margin-top: var(--lead-gap); font-size: var(--fs-18); line-height: 1.5; color: var(--text-2); }
br.br-mo { display: none; }   /* 1023 이하에서만 줄바꿈 — 아래 1023 블록에서 켠다 */
.sec-head__title, .sec-head__lead { text-wrap: balance; word-break: keep-all; }
.sec--dark .sec-head__title { color: var(--white); }
.sec--dark .sec-head__eyebrow { color: var(--red-on-dark); }   /* 브랜드 레드는 검정 위에서 묻힌다 */

/* ── 버튼 ──
   검정 알약(시안 CTA). 버튼 위계는 DS 를 따르지 않고 시안 그대로 둔다. */
.btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 160px; height: 54px; padding: 0 28px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--white); font-size: var(--fs-14); font-weight: 600; letter-spacing: -.01em;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
@media (hover: hover) { .btn-pill:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgb(var(--shadow-rgb) / .55); } }   /* 오버는 마우스 기기만 — 터치에서 탭한 뒤 떠 있는 채로 남지 않게 */
.btn-pill__arrow { flex: none; width: 16px; height: auto; }

/* 원형 화살표 (카드 우상단 · 서비스 행 끝) */
.ic-arrow { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--white); flex: none; }
.ic-arrow svg { width: 15px; height: 15px; }
.ic-arrow--soft { width: 36px; height: 36px; background: var(--surface); color: var(--ink); }

/* 원형 전환 버튼 (캐러셀 좌우) */
.nav-btn { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: var(--white);
  box-shadow: 0 8px 20px -10px rgba(28, 23, 23, .55); transition: transform .2s var(--ease-out), opacity .2s; }
@media (hover: hover) { .nav-btn:hover { transform: scale(1.06); } }
.nav-btn:disabled { opacity: .28; cursor: default; transform: none; }
.nav-btn svg { width: 22px; height: 22px; }

/* ── 칩 (필터 · 레벨 탭) ── */
.chip { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 68px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--text-2);
  font-size: var(--fs-14); font-weight: 700; transition: background .2s, color .2s, border-color .2s; }
@media (hover: hover) { .chip:hover { border-color: var(--ink); color: var(--ink); } }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chip--sm { height: 32px; min-width: 48px; padding: 0 14px; }   /* 좌우 14(시안). 숫자만 있는 칩(1 · 2 · 3)은 최소 폭 48 → 좌우 약 20 */
.chip--red[aria-selected="true"] { background: var(--red); border-color: var(--red); }

/* ── 태그 (카드 하단) ── */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; height: 21px; padding: 0 6px; border-radius: var(--r-4); background: var(--gray-bg); font-size: var(--fs-12); color: var(--ink); white-space: nowrap; }

/* ── 서비스 카드 (Teaching Flow · Learning Flow 공용) ──
   썸네일 + 흰 본문(제목 · 설명 · 태그). 폭은 부모 그리드가 정한다.
   펼침 = 본문이 --rise 만큼 올라와 설명 · 태그(.svc-card__base) 자리에 불릿 · 바로가기(.svc-card__more)가 나타나고, 썸네일 이미지는 그 절반만큼 밀린다.
   본문은 펼칠 내용까지 품고 margin-bottom: -fold 로 기본 높이만 차지한다(카드 크기 그대로 · 옆 카드를 밀지 않음).
   --fold · --rise 는 N.fitCards 가 카드 실제 높이로 따로 잰다 — 하나로 합치면 같은 줄에서 늘어난 카드의 바로가기 아래가 빈다 */
.svc-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-20); overflow: hidden; background: var(--white);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); --card-ease: cubic-bezier(.22, 1, .36, 1); }
/* 오버 · 펼침은 1024 이상만 — 1023 이하는 카드 안 변화 없이 누르면 모달(common.js). 떠오름은 1024 이상 터치(태블릿 첫 탭)에도 걸린다 */
@media (min-width: 1024px) { .svc-card:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -24px rgb(var(--shadow-rgb) / .45); } }
.svc-card.is-soon { cursor: default; }   /* 오픈 예정 — 링크가 아니라 기본 커서. 떠오름 · 펼침은 다른 카드와 같다 */
/* 상태 뱃지(banners.js flag) — 썸네일이 아니라 카드에 붙인다(오버 때 썸네일 이미지가 밀려도 뱃지는 제자리).
   규격 M = 신규 오픈 카드 .news-card__status 와 같다 · 줄 높이 26 = 안쪽 높이(28 - 테두리 2) */
.svc-card__flag { position: absolute; top: 14px; left: 14px; z-index: 2; height: 28px; padding: 0 11px; border: 1px solid var(--ink); border-radius: var(--r-pill); background: var(--ink); color: var(--white); font-size: var(--fs-12); font-weight: 600; line-height: 26px; letter-spacing: var(--ls-badge); white-space: nowrap; pointer-events: none; }
.svc-card__flag.is-new { border-color: var(--red); background: var(--red); }   /* 색은 문구로 고른다(N.badgeTone): NEW = 레드 · 11월 중 오픈 = 블루 · 오픈 예정 = 블랙(기본) */
.svc-card__flag.is-month { border-color: var(--blue); background: var(--blue); }
/* 퀵메뉴로 연 카드 표시(teaching-flow.js .is-pinged) — 붉은 빛이 카드 둘레에서 번졌다 잦아드는 숨쉬기 2번(1.8s).
   빛 = 흐림 반경이 큰 box-shadow 하나라 카드 밖 ~34px 까지 번진다 — 1023 이하 카드 줄(.tf-strip)의 위아래 padding 32 가 이 여유다.
   둘째 겹 --card-sh = 1023 이하 카드의 평소 그림자(sections.css) — 빼면 빛나는 1.8s 동안 그림자가 꺼졌다 켜진다. 데스크톱은 투명 */
.svc-card.is-pinged { animation: cardGlow 1.8s cubic-bezier(.4, 0, .2, 1); }
@keyframes cardGlow {
  0% { box-shadow: 0 0 0 0 rgb(var(--red-rgb) / 0), var(--card-sh, 0 0 0 0 transparent); }
  22% { box-shadow: 0 0 30px 4px rgb(var(--red-rgb) / .5), var(--card-sh, 0 0 0 0 transparent); }
  46% { box-shadow: 0 0 44px 12px rgb(var(--red-rgb) / .12), var(--card-sh, 0 0 0 0 transparent); }
  68% { box-shadow: 0 0 30px 4px rgb(var(--red-rgb) / .5), var(--card-sh, 0 0 0 0 transparent); }
  100% { box-shadow: 0 0 52px 16px rgb(var(--red-rgb) / 0), var(--card-sh, 0 0 0 0 transparent); }
}
.svc-card__thumb { position: relative; aspect-ratio: var(--thumb-ratio, 394 / 218); background: var(--thumb-bg, var(--gray-bg)); }   /* --thumb-bg = 배너 배경색(banners.js bg) */
.svc-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--card-ease); }   /* 칸에 고정 — 배너 비율이 칸과 달라도 칸 높이를 밀지 않는다 */
.svc-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 24px; background: var(--white);
  margin-bottom: calc(-1 * var(--fold, 0px)); transition: transform .55s var(--card-ease); }
.svc-card__title { font-size: var(--fs-20); font-weight: 800; line-height: 1.4; letter-spacing: -.02em; }
.svc-card__desc { font-size: var(--fs-16); line-height: 1.5; color: var(--muted); }
.svc-card__swap { display: grid; grid-template-columns: minmax(0, 1fr); }   /* 칸 폭 = 카드 폭 — minmax(0, …) 로 묶지 않으면 좁은 카드에서 오버용 배지 최소 폭만큼 칸이 넓어져 설명 · 태그가 오른쪽에서 잘린다 */
.svc-card__swap > * { grid-area: 1 / 1; align-self: start; }
.svc-card__base { display: flex; flex-direction: column; gap: 12px; transition: opacity .2s; }
/* 펼칠 내용 = 불릿(15px · 행간 1.69, 시안 수정안) + 글 영역 폭을 채우는 바로가기 알약(문구 길이와 상관없이 같은 크기) */
.svc-card__more { display: flex; flex-direction: column; gap: 18px; padding-top: 2px; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.svc-card__pts { display: grid; gap: 6px; }
/* 오버 불릿 = [키워드 배지(.tag)] 설명 — 설명이 두 줄이면 배지 오른쪽에서 줄이 맞는다 */
.svc-card__pt { display: flex; align-items: baseline; gap: 8px; font-size: 15px; line-height: 1.69; letter-spacing: -.03em; color: var(--muted); }
.svc-card__pt .tag { flex: none; font-weight: 700; letter-spacing: -.02em; }
.svc-card__pt > span { min-width: 0; }   /* 설명은 배지 옆에서 줄바꿈 */
.svc-card__cta, .news-card__cta { display: flex; align-items: center; justify-content: center; gap: 4px; height: 42px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--white); font-size: var(--fs-14); font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
.svc-card__cta .ic-arrow, .news-card__cta .ic-arrow, .svc-modal__cta .ic-arrow { width: 24px; height: 24px; background: transparent; }
.svc-card__cta-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* 가장 긴 문구(NE Books 학습자료 바로가기)가 256 카드에 딱 맞는다 — 글꼴 차이로 넘치면 말줄임 */
.svc-card__cta.is-soon, .news-card__cta.is-soon { background: var(--gray-bg); color: var(--muted); }
/* 좁은 카드의 바로가기 — 카드 폭이 252 미만이면 서비스명을 숨겨 '바로가기 →' 만(가장 긴 'NE Books 학습자료 바로가기' 가 252 에서 딱 맞는다).
   서비스명은 카드 제목 · 이동 안내 베일에 있다. 컨테이너 쿼리라 카드에 container-type 이 있어야 한다 */
.svc-card, .news-card { container-type: inline-size; }
@container (max-width: 251px) { .svc-card__cta-name { display: none; } }
.svc-card.cq-narrow .svc-card__cta-name, .news-card.cq-narrow .svc-card__cta-name { display: none; }   /* 컨테이너 쿼리를 모르는 브라우저(iOS 15 · 크롬 105 미만)용 — common.js 가 카드 폭을 재서 붙인다. 지원 브라우저에서는 붙지 않는다 */
.svc-card--sm { --thumb-ratio: 256 / 218; }
.svc-card--sm .svc-card__body { padding: 18px 20px 20px; }
.svc-card--sm .svc-card__title { font-size: var(--fs-18); }
.svc-card--sm .svc-card__desc { font-size: var(--fs-14); }
.svc-card--sm .svc-card__pt { gap: 6px; font-size: var(--fs-14); line-height: 1.6; }
.svc-card--sm .svc-card__cta { padding: 0 12px; }
/* 펼침 = 마우스 오버(마우스 기기만) · 키보드 포커스 · 터치 첫 탭(.is-open, common.js — 다시 탭하면 이동).
   포커스 · .is-open 을 마우스 조건 안으로 옮기면 터치 노트북 · 태블릿+키보드에서 펼쳐지지 않는다 */
@media (min-width: 1024px) {   /* :focus-visible 은 :hover · .is-open 과 한 셀렉터 목록에 두지 않는다 — 모르는 브라우저(iOS 15.0~15.3 · Safari 15.3 이하)는 목록 전체를 버린다 */
  .svc-card.is-open .svc-card__body { transform: translateY(calc(-1 * var(--rise, 0px))); }
  .svc-card.is-open .svc-card__thumb img { transform: translateY(calc(var(--rise, 0px) * -.5)); }
  .svc-card.is-open .svc-card__base { opacity: 0; }
  .svc-card.is-open .svc-card__more { opacity: 1; visibility: visible; transition: opacity .35s .12s, visibility 0s; }
  .svc-card:focus-visible .svc-card__body { transform: translateY(calc(-1 * var(--rise, 0px))); }
  .svc-card:focus-visible .svc-card__thumb img { transform: translateY(calc(var(--rise, 0px) * -.5)); }
  .svc-card:focus-visible .svc-card__base { opacity: 0; }
  .svc-card:focus-visible .svc-card__more { opacity: 1; visibility: visible; transition: opacity .35s .12s, visibility 0s; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .svc-card:hover .svc-card__body { transform: translateY(calc(-1 * var(--rise, 0px))); }
  .svc-card:hover .svc-card__thumb img { transform: translateY(calc(var(--rise, 0px) * -.5)); }
  .svc-card:hover .svc-card__base { opacity: 0; }
  .svc-card:hover .svc-card__more { opacity: 1; visibility: visible; transition: opacity .35s .12s, visibility 0s; }
}

/* 외부 이동 안내 베일(veil.js) — ne-ai-portal 퀵메뉴 베일과 같은 막(흰 66% + 블러 11 · 0.28s), 1.2s 뒤 이동(포털 0.9s 보다 조금 느리게) */
#goVeil { position: fixed; inset: 0; z-index: var(--z-veil); display: flex; align-items: center; justify-content: center; padding: 0 24px; background: rgb(var(--white-rgb) / 0);
  backdrop-filter: blur(0) saturate(1); -webkit-backdrop-filter: blur(0) saturate(1); pointer-events: none;
  transition: background .28s cubic-bezier(.4, 0, .15, 1), -webkit-backdrop-filter .28s cubic-bezier(.4, 0, .15, 1), backdrop-filter .28s cubic-bezier(.4, 0, .15, 1); }   /* -webkit- = Safari 17 이하도 블러가 0.28s 에 걸쳐 바뀐다 */
#goVeil.no-anim, #goVeil.no-anim .go-wrap { transition: none; }   /* 떠나는 순간 · 돌아온 직후(veil.js pagehide) — 전환 없이 걷는다 */
#goVeil.on { background: rgb(var(--white-rgb) / .66); backdrop-filter: blur(11px) saturate(1.25); -webkit-backdrop-filter: blur(11px) saturate(1.25); pointer-events: auto; }
.go-wrap { display: flex; flex-direction: column; align-items: center; max-width: 560px; text-align: center; opacity: 0; transform: translateY(8px);
  transition: opacity .3s .05s, transform .3s .05s cubic-bezier(.2, .7, .3, 1); }
#goVeil.on .go-wrap { opacity: 1; transform: none; }
.go-logo { width: auto; max-width: 60vw; height: 24px; }
.go-title { margin-top: 18px; font-size: var(--fs-28); font-weight: 800; line-height: 1.35; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; word-break: keep-all; }
.go-desc { margin-top: 8px; font-size: var(--fs-16); line-height: 1.5; color: var(--ink); text-wrap: balance; word-break: keep-all; }   /* 767 이하에서도 16 — 줄이면 큰 로고 · 제목 아래에서 유독 작아 보인다 */
#goVeil.is-brand .go-logo { height: 52px; max-width: 74vw; }   /* 브랜드 사이트 = 로고가 제목 — 제목 글자(.go-title)는 veil.js 가 숨기고 로고를 ne-ai-portal 베일과 같은 52 로 */
#goVeil.is-brand .go-desc { margin-top: 18px; }   /* 로고 ~ 설명 = 로고 ~ 제목 간격 그대로 */
.go-spin { width: 24px; height: 24px; margin-top: 28px; border: 3px solid var(--line); border-top-color: var(--red); border-radius: 50%; animation: goSpin .9s linear infinite; }
@keyframes goSpin { to { transform: rotate(360deg); } }

/* 서비스 카드 모달(common.js) — 1023 이하에서 카드를 누르면 전체 화면. z-index 1500 = 베일(1900) 아래 · 헤더 · 메뉴 위 */
.svc-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; padding-top: var(--hd-h); background: var(--white);   /* 위 헤더 높이 = 로고 · 닫기 줄(페이지 헤더와 같은 자리) */
  opacity: 0; transition: opacity .2s var(--ease-out); }
.svc-modal.open { opacity: 1; }
.svc-modal__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.svc-modal__thumb { position: relative; overflow: hidden; height: min(calc(var(--inner-w) * 218 / 256), 44vh); margin: 12px var(--pad-x) 0;
  border-radius: var(--r-20); background: var(--thumb-bg, var(--gray-bg)); }   /* 높이 = 배너 비율, 화면이 낮으면 44vh 까지 — 그때 배너는 가운데(contain), 남는 좌우는 --thumb-bg(banners.js bg) */
.svc-modal__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.svc-modal__body { padding: 24px var(--pad-x) calc(52px + 40px + env(safe-area-inset-bottom)); }   /* 아래 = 떠 있는 바로가기(52) + 여유 — 마지막 줄이 버튼에 가리지 않게 */
.svc-modal__title { display: block; font-size: var(--fs-24); font-weight: 800; line-height: 1.35; letter-spacing: -.02em; word-break: keep-all; }
.svc-modal__desc { margin-top: 8px; font-size: var(--fs-16); line-height: 1.55; color: var(--muted); }
.svc-modal__tags { margin-top: 16px; }
.svc-modal__pts { display: grid; gap: 14px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.svc-modal__pts .svc-card__pt { font-size: var(--fs-16); line-height: 1.55; }
.svc-modal__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 var(--pad-x) calc(16px + env(safe-area-inset-bottom)); pointer-events: none; }   /* 떠 있는 바로가기 — 바는 클릭을 통과시키고 버튼(.svc-modal__cta)만 받는다 */
.svc-modal__cta { display: flex; align-items: center; justify-content: center; gap: 6px; height: 52px; border-radius: var(--r-pill); background: var(--ink); color: var(--white); font-size: var(--fs-16); font-weight: 700;
  pointer-events: auto; box-shadow: 0 12px 28px -12px rgb(var(--shadow-rgb) / .5); }
.svc-modal__cta.is-soon { background: var(--gray-bg); color: var(--muted); box-shadow: 0 12px 28px -14px rgb(var(--shadow-rgb) / .25); }
.svc-modal__logo { position: absolute; top: calc(var(--hd-h) / 2); left: var(--pad-x); z-index: 2; width: 112px; height: auto; transform: translateY(-50%); }   /* 헤더 로고와 같은 크기 · 자리(1023 이하 112) */
.svc-modal__close { position: absolute; top: calc((var(--hd-h) - 42px) / 2); right: calc(var(--pad-x) - 7px); z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; color: var(--ink); }   /* 모바일 메뉴 X(.mclose)와 같은 42 상자 · 28 아이콘 — 가운데 = 햄버거 가운데 */
.svc-modal__close svg { width: 28px; height: 28px; }

/* 맨 위로 버튼 — grammar.neflow.ai `.to-top` 과 같은 규격(색만 잉크). 한 화면 넘게 내려가면 .show(common.js) */
.to-top { position: fixed; right: 26px; bottom: 26px; z-index: var(--z-to-top); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: 0 4px 18px rgb(var(--shadow-rgb) / .12);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.92);
  transition: opacity .28s, transform .28s cubic-bezier(.2, .85, .3, 1), visibility .28s, box-shadow .15s; }
.to-top.show { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.to-top.show:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(var(--shadow-rgb) / .18); }
.to-top:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.to-top svg { width: 20px; height: 20px; }
@media (min-width: 768px) and (max-height: 500px) { .to-top { display: none; } }

/* 1023 이하 제목 · 설명 = 폭에 비례 — 360 에서 모바일 크기, 1023 에서 태블릿(=데스크톱) 크기.
   767 블록에 고정 크기를 다시 넣으면 비례가 덮여 767/768 에서 한 번에 바뀐다 */
@media (max-width: 1023px) {
  .sec-head__eyebrow { font-size: clamp(22px, 16.57px + 1.508vw, 32px); }   /* 360 = 22 → 1023 = 32 */
  .sec-head__title { font-size: clamp(40px, 26.97px + 3.620vw, 64px); }   /* 360 = 40 → 1023 = 64 */
  .sec-head__lead { font-size: clamp(16px, 13.83px + 0.603vw, 18px); }   /* 360 = 16(본문 읽기 크기) → 약 692 부터 18 */
  br.br-mo { display: inline; }   /* 모바일 줄바꿈 — 교재 리드 · Learning Flow 패널 제목 */
}
@media (max-width: 767px) {
  .to-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  .to-top svg { width: 18px; height: 18px; }
  .go-logo { height: 22px; }
  .go-title { font-size: var(--fs-24); }
  #goVeil.is-brand .go-logo { height: 44px; }   /* 제목 28 → 24 와 같은 비율 */
  .btn-pill { height: 48px; min-width: 140px; padding: 0 22px; }
  .nav-btn { width: 48px; height: 48px; }
  .svc-card__title { font-size: var(--fs-18); }
  .svc-card__desc { font-size: var(--fs-14); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.ne_footer_common { letter-spacing: normal; }   /* 본사 공통 푸터는 원본 그대로 — body 자간을 물려받지 않게 */