/* landing-v4.css — ecbt.kr 총괄 홈(랜딩) 4판 「수치 넷 쌓기」 전용. 조립기 docs/design/rounds/landing-v4-20261013/build/build.py 가 만든다
   토큰(색·글꼴·크기)은 /styles/tokens.css — 이 파일에는 이 쪽의 새 변수와 부품 규칙만 있다(D-04) */
/* 11-06 성능: @import fonts.css 제거 — HTML 머리에서 논블로킹(preload→stylesheet)으로 부른다(직렬 사슬 끊기).
   웹폰트 도착 전 대체 글꼴 폭을 Pretendard에 맞춘다(CLS 0.32→0 목표) — size-adjust 92.4% = 10-15 디자인팀 실측(대체 81.2px vs Pretendard 75px). */
@font-face{font-family:"Pretendard-Fallback";src:local("Malgun Gothic"),local("Apple SD Gothic Neo"),local("Noto Sans CJK KR"),local("Noto Sans KR");size-adjust:92.4%;font-weight:45 920;font-style:normal;font-display:swap}
:root{--font-sans:"Pretendard Variable",Pretendard,"Pretendard-Fallback",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif}
/* ═══════════════════════════════════════════════════════════════════════════
   ① ecbt 확정 토큰 — 조립기가 채운다(미리보기: tokens.css 안에 · 사이트: /styles/tokens.css 링크, D-04)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   ② 이 쪽의 새 변수(값표 ④) — 색은 없다(색은 전부 위 토큰)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* 간격 — 4px 눈금 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* 틀 */
  --content-max: 1200px;                 /* 본문 폭 */
  --page-pad: var(--space-4);            /* 좌우 여백: 폰 16 · 태블릿 24 · PC 32 */
  --header-h: 56px;                      /* 머리띠 높이 */
  --search-h: 56px;                      /* 검색 바 높이 */
  --top-btn-h: 44px;                     /* 많이 찾는 종목 단추 높이 — 번호 빼고 한 줄(10-15 주인님 「카드 높이 더 작게」 · 누르는 높이 44 유지) */
  --top-name-size: var(--text-base);     /* 종목 단추 이름 글자 */

  /* 초대형 수치 */
  --display-size: clamp(48px, 13.4vw, 52px); /* 폰 360=48 · 390=52 */
  --display-leading: 0.95;
  --display-tracking: -0.04em;

  /* 그 밖의 글자 */
  --eyebrow-size: 13px;                  /* 눈썹 글 */
  --logo-size: clamp(56px, 10vw, 128px); /* 바닥 큰 로고: 폰 56 ~ PC 128 */
  --ai-note-size: 12px;                  /* D-010b — 2026-10-15 H-0278: 흐림 걷어냄(실효 대비 1.67:1 미달) */
  --ai-note-opacity: 1;                  /* D-010b */
  --weight-bold: 700;
  --weight-heavy: 800;
  --leading-body: 1.5;
  --leading-snug: 1.3;

  /* 초점·겹침 */
  --ring-w: 3px;
  --z-pop: 10;                           /* 검색 결과 상자 */

  /* 첫 화면 흰 바탕 판(⑤ · 2026-10-15) — 글자 크기·그림 틀. 색은 tokens.css §4 */
  --lp-kicker-size: var(--text-lg);      /* 머리말(h1) */
  --lp-display-size: clamp(38px, 11.4vw, 46px); /* 큰 제목: 폰 360=41 · 390=44 */
  --lp-display-weight: 860;
  --lp-display-leading: 1.16;
  --lp-display-tracking: -0.035em;
  --lp-lead-size: var(--text-base);      /* 회색 설명·체크 줄 */
  --lp-art-max: 400px;                   /* 그림 최대 폭: 폰 400 · 태블릿 520 · PC 칸 폭 */
}
:root[data-size="large"] {
  --search-h: 72px;                      /* 입력 높이도 누르는 높이 64 이상 */
  --top-btn-h: 72px;
  --eyebrow-size: 18px;
}
@media (min-width: 768px) {
  :root {
    --page-pad: var(--space-5);
    --display-size: 72px;
    --top-name-size: var(--text-sm);     /* 4열 이상은 좁아서 이름 14px */
    --lp-display-size: 60px;
    --lp-lead-size: calc(var(--text-base) * 1.125); /* 18 · 큰 글씨 27 */
    --lp-art-max: 520px;
  }
}
@media (min-width: 1024px) {
  :root {
    --page-pad: var(--space-6);
    --display-size: clamp(72px, 8.75vw, 112px); /* 1280 = 112 */
    --top-name-size: var(--text-sm);     /* 7열이 좁아서 이름 14px */
    --lp-display-size: clamp(52px, 5.1vw, 68px); /* 1024=52 · 1340=68 */
    --lp-art-max: 600px;
  }
}
/* 큰 글씨에서도 --display-size 는 키우지 않는다(이미 크다) */

/* ═══════════════════════════════════════════════════════════════════════════
   ③ 부품 규칙 — 값은 전부 var(--…)
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: var(--color-scheme);
  background: var(--card);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--card);
  color: var(--card-foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  word-break: keep-all;
}
a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: var(--space-1);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.wrap {
  max-width: calc(var(--content-max) + var(--page-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* 0. 머리띠 — 따라다니지 않는다 */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--display-tracking);
  color: var(--foreground);
  text-decoration: none;
}
.header-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--link);
  text-underline-offset: var(--space-1);
}

/* 1단·2단 — 흰 띠 */
.band-card { background: var(--card); color: var(--card-foreground); }
.hero {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4) var(--space-5);
}
.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--eyebrow-size);
  line-height: var(--leading-body);
  color: var(--muted-foreground);
}
/* 첫 화면 머리(.display · .title · 그림)는 ⑤ 에 — 2026-10-15 흰 바탕 판에서 수치 머리글(.num · .unit · .today) 규칙을 걷었다 */
.lead {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--muted-foreground);
}
.search-wrap { position: relative; }
.search {
  display: flex;
  align-items: stretch;
  height: var(--search-h);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius);
  overflow: hidden;
}
.search:focus-within {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: 0;
}
.search input {
  flex: 1 1 0;
  width: 0;             /* 조립 결함 수정: input 의 내장 size(20글자)가 최소내용물이 되어 폰에서 부모를 421px 로 벌어뜨렸다 — 폭은 flex 배분으로만 받는다(실측 10-13) */
  min-width: 0;
  padding-inline: var(--space-4);
  border: 0;
  background: transparent;
  color: var(--card-foreground);
  font: inherit;
  text-overflow: ellipsis;
}
.search input:focus { outline: none; }
.search input::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
  font-size: var(--text-sm);
}
.search button {
  flex: none;
  min-width: var(--touch-min);
  padding-inline: var(--space-5);
  border: 0;
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.search button:focus-visible {
  outline-color: var(--primary-foreground);
  outline-offset: calc(var(--space-1) * -1);
}
.results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-pop);
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--input);
  border-radius: var(--radius);
  overflow: hidden;
}
.results[hidden] { display: none; }
.results ul { list-style: none; margin: 0; padding: 0; }
.results li + li { border-top: 1px solid var(--border); }
.results a {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-4);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.results a:hover, .results a:focus-visible { background: var(--accent); color: var(--accent-foreground); }
.results a:focus-visible { outline-offset: calc(var(--ring-w) * -1); }
.results .none {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--muted-foreground);
}
.resume {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-2);
  min-height: var(--touch-min);
  padding-inline: var(--space-4);
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.resume[hidden] { display: none; }
.resume:hover { background: var(--accent); color: var(--accent-foreground); }

/* 3단 — 강조색 띠 */
.band-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  padding-block: var(--space-5) var(--space-4);
}
.band-primary a:focus-visible { outline-color: var(--primary-foreground); }
.band-label {
  margin: 0 0 var(--space-3);
  font-size: var(--eyebrow-size);
  font-weight: normal;
  line-height: var(--leading-body);
  color: var(--primary-foreground);
}
/* 흰 띠(.band-card — /cert 등급 구역 등)의 제목은 짙은 글자 — 2026-11-08 캐리 재검2:
   primary-foreground(#FFFFFF) 그대로면 흰 배경 위 흰 글자가 되어 보이지 않았다 */
.band-card .band-label { color: var(--card-foreground); }
.top-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}
.top-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--top-btn-h);
  padding: var(--space-1) var(--space-3);  /* 위아래 4 — 초성 한 줄을 얹어도 높이 44 그대로(10-15) */
  background: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius);
  text-decoration: none;
}
.top-btn:hover { background: var(--accent); color: var(--accent-foreground); }
.top-btn .initial {                      /* 이름 위 초성 ㄱ·ㄴ·ㄷ(10-15 주인님 「ㄱ 표시해줘 · 박스 높이 유지」) */
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  margin-bottom: 2px;
  color: var(--muted-foreground);
}
.top-btn .name {
  font-size: var(--top-name-size);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  word-break: keep-all;                  /* 넘치면 「(전기분야)」 앞에서 줄을 바꾼다 */
  overflow-wrap: anywhere;
}
.all-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  margin-top: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--primary-foreground);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

/* 4단 — 연회색 띠(얇게) */
.band-muted {
  background: var(--muted);
  color: var(--foreground);
  padding-block: var(--space-2);
}
.promises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.promises li {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.promises li:nth-child(odd) { padding-inline-start: 0; }
.promises li:nth-child(even) { border-inline-start: 1px solid var(--border); }
.promises li:nth-child(n+3) { border-top: 1px solid var(--border); }

/* 바닥 — 흰 띠 */
.site-footer {
  background: var(--card);
  color: var(--card-foreground);
  padding-block: var(--space-6) var(--space-5);
}
.logo-big {
  margin: 0 0 var(--space-4);
  font-size: var(--logo-size);
  font-weight: var(--weight-heavy);
  line-height: 1;
  letter-spacing: var(--display-tracking);
  color: var(--foreground);
}
.foot-links {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-4);
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: var(--text-sm);
  text-underline-offset: var(--space-1);
}
.company {
  margin: 0 0 var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
}
.company dt {
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--muted-foreground);
}
.company dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.ai-note {
  margin: 0;
  text-align: center;
  font-size: var(--ai-note-size);
  line-height: var(--leading-body);
  color: var(--muted-foreground);
  opacity: var(--ai-note-opacity);
}

/* 태블릿(768↑) */
@media (min-width: 768px) {
  .top-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } /* 56 = 4×14 */
  .top-btn { padding-inline: var(--space-2); }
  .company { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
/* PC(1024↑) — 첫 화면 두 칸(왼쪽 글 · 오른쪽 그림)은 ⑤ 에 */
@media (min-width: 1024px) {
  .eyebrow { margin-bottom: var(--space-4); }
  /* 많이 찾는 종목 7열 × 8줄 = 56(10-15 주인님) */
  .top-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .top-btn { padding-inline: var(--space-2); }
  .band-muted { padding-block: var(--space-4); }
  .promises { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .promises li:nth-child(n) { padding-inline: var(--space-4); font-size: var(--text-base); }
  .promises li:nth-child(n+3) { border-top: 0; }
  .promises li:nth-child(even) { border-inline-start: 0; }
  .promises li:nth-child(n+2) { border-inline-start: 1px solid var(--border); }
  .promises li:first-child { padding-inline-start: 0; }
  .site-footer { padding-block: var(--space-7) var(--space-6); }
  .logo-big { margin-bottom: var(--space-5); }
  .foot-links { margin-bottom: var(--space-5); }
  .foot-links a { font-size: var(--text-base); }
  .band-primary { padding-block: var(--space-5); }
}

/* 큰 글씨 — 이름이 낱말째 잘리지 않게 열 수를 줄인다(폰 1열 · 태블릿 3열 · 1280↑ 5열) */
:root[data-size="large"] .top-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  :root[data-size="large"] .top-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  :root[data-size="large"] .top-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⑤ 첫 화면 흰 바탕 판(2026-10-15 주인님 참고 그림) — html.lp 아래에서만
      「좌측은 글자 우측은 CBT를 나타내는 이미지 · 배경은 검정색바탕을 쓰지말고 모든 배경에 흰색 · 박스색상과 텍스트 색상도」
      색은 tokens.css §4 의 --lp-*(밝음 고정 — 기기 어둠 설정을 따르지 않는다). 전체 종목 쪽(site/cert/index.html)도
      이 파일을 쓰므로 위 ③ 공용 규칙은 그대로 두고 첫 화면만 여기서 덮는다.
   ═══════════════════════════════════════════════════════════════════════════ */
html.lp { color-scheme: light only; background: var(--lp-bg); }
.lp body { background: var(--lp-bg); color: var(--lp-text); }
.lp a:focus-visible, .lp button:focus-visible { outline-color: var(--lp-blue); }

/* 머리띠(조립 원본 판 — 라이브는 cert-menu.css 의 흰 머리띠) */
.lp .site-header { background: var(--lp-bg); border-bottom-color: var(--lp-line); }
.lp .brand { color: var(--lp-ink); }
.lp .header-link { color: var(--lp-blue); }

/* 1단 — 흰 띠: 왼쪽 글 · 오른쪽 그림 */
.lp .band-card { background: var(--lp-bg); color: var(--lp-text); }
.lp .hero {
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-7);
}
.lp .hero .title {                       /* h1 = 머리말 한 줄(참고 그림의 「2026」 자리) */
  margin: 0 0 var(--space-3);
  font-size: var(--lp-kicker-size);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--lp-ink);
}
.lp .display {                           /* 큰 검은 제목 두 줄 + 파란 줄 */
  margin: 0 0 var(--space-5);
  font-size: var(--lp-display-size);
  font-weight: var(--lp-display-weight);
  line-height: var(--lp-display-leading);
  letter-spacing: var(--lp-display-tracking);
  color: var(--lp-ink);
}
.lp .display .line { display: block; }
.lp .display .accent { color: var(--lp-blue); }
.lp .lead {                              /* 회색 설명 */
  max-width: 30em;
  margin: 0 0 var(--space-3);
  font-size: var(--lp-lead-size);
  line-height: 1.65;
  color: var(--lp-muted);
}
.lp .check {                             /* 파란 체크 + 진한 글자 */
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  font-size: var(--lp-lead-size);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--lp-text);
}
.lp .check-ico {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: var(--lp-blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 검색 — 흰 상자 · 또렷한 테두리 · 파란 단추 */
.lp .search-wrap { max-width: 36rem; }
.lp .search {
  background: var(--lp-bg);
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--lp-shadow-pop);
}
.lp .search:focus-within { outline: 2px solid var(--lp-blue); outline-offset: 2px; border-color: var(--lp-blue); }
.lp .search input { color: var(--lp-text); }
.lp .search input::placeholder { color: var(--lp-muted); }
.lp .search button { background: var(--lp-blue); color: var(--lp-on-blue); transition: background-color .15s; }
.lp .search button:hover { background: var(--lp-blue-strong); }
.lp .search button:focus-visible { outline-color: var(--lp-on-blue); }
.lp .results {
  background: var(--lp-bg);
  color: var(--lp-text);
  border-color: var(--lp-line);
  border-radius: var(--radius-md);
  box-shadow: var(--lp-shadow-pop);
}
.lp .results li + li { border-top-color: var(--lp-line); }
.lp .results a:hover, .lp .results a:focus-visible { background: var(--lp-blue-soft); color: var(--lp-blue-strong); }
.lp .results .none { color: var(--lp-muted); }
.lp .resume {
  margin-top: var(--space-3);
  border-color: var(--lp-line);
  background: var(--lp-bg);
  color: var(--lp-blue);
}
.lp .resume:hover { background: var(--lp-blue-soft); color: var(--lp-blue-strong); }

/* 오른쪽 그림 — CBT 시험 화면(뒤·왼쪽) + OMR 답안지(앞·오른쪽). 답안지가 고른 보기 번호를 가리지 않게 오른쪽에 둔다.
   틀 34em × 29em, 1em = 그림 폭 ÷ 34 라 폭에 따라 통째로 줄고 는다 */
.lp .hero-art {
  container-type: inline-size;
  width: 100%;
  max-width: var(--lp-art-max);
  margin-inline: auto;
}
.art {
  position: relative;
  width: 34em;
  height: 29em;
  max-width: 100%;
  font-size: min(16px, calc((100vw - 32px) / 34)); /* 컨테이너 단위를 모르는 옛 브라우저 */
  line-height: 1.2;
}
@supports (width: 1cqi) { .art { font-size: calc(100cqi / 34); } }
.art > * { position: absolute; }
.art ol { list-style: none; margin: 0; padding: 0; }
.art p { margin: 0; }
.art svg { display: block; }
.art .art-line { display: block; height: .7em; border-radius: var(--radius-full); background: var(--lp-bar); }

.art-glow {                              /* 은은한 파란 빛(그라데이션 없이 흐림 한 겹) */
  left: 3.5em; top: 3em; width: 28em; height: 23em;
  border-radius: 50%;
  background: var(--lp-blue-tint);
  filter: blur(2.8em);
  opacity: .8;
}
.art-spark { fill: var(--lp-blue-mid); }
.art-spark-a { left: 29.4em; top: 3.4em; width: 2.9em; height: 2.9em; }
.art-spark-b { left: 16.6em; top: 25.4em; width: 1.8em; height: 1.8em; fill: var(--lp-blue); }

/* CBT 시험 화면(뒤 카드) */
.art-win {
  left: .8em; top: 1.6em; width: 25em;
  padding-bottom: 1.5em;
  background: var(--lp-bg);
  border: 1px solid var(--lp-line);
  border-radius: 1.4em;
  box-shadow: var(--lp-shadow-card);
  overflow: hidden;
}
.art-win-bar {
  display: flex; align-items: center; gap: .45em;
  height: 2.7em; padding: 0 1.15em;
  border-bottom: 1px solid var(--lp-line);
}
.art-win-bar i { width: .66em; height: .66em; border-radius: 50%; background: var(--lp-bar); }
.art-win-title {
  margin-left: .8em; padding: .32em .9em;
  border-radius: var(--radius-full);
  background: var(--lp-surface);
  font-size: .7em; font-weight: var(--weight-bold); color: var(--lp-muted);
}
.art-win-body { padding: 1.35em 1.5em 0; }
.art-qno {
  display: inline-block; padding: .35em .75em;
  border-radius: .55em;
  background: var(--lp-blue-soft);
  font-size: .74em; font-weight: var(--weight-heavy); color: var(--lp-blue);
}
.art .art-line-1 { width: 94%; margin-top: 1em; }
.art .art-line-2 { width: 62%; margin-top: .55em; }
.art .art-opts { display: grid; gap: .55em; margin-top: 1.35em; counter-reset: lp-opt; }
.art-opts li {
  display: flex; align-items: center; gap: .75em;
  height: 2.35em; padding: 0 .8em;
  border: 1px solid var(--lp-line);
  border-radius: .75em;
  counter-increment: lp-opt;
}
.art-opts b {
  flex: none; display: grid; place-items: center;
  width: 1.45em; height: 1.45em;
  border: 1.5px solid var(--lp-omr-line);
  border-radius: 50%;
}
.art-opts b::before { content: counter(lp-opt); font-size: .58em; font-weight: var(--weight-heavy); line-height: 1; color: var(--lp-subtle); }
.art-opts .art-line { flex: 1 1 auto; height: .55em; }
.art-opts li:nth-child(1) .art-line { max-width: 64%; }
.art-opts li:nth-child(2) .art-line { max-width: 50%; }
.art-opts li:nth-child(3) .art-line { max-width: 72%; }
.art-opts li:nth-child(4) .art-line { max-width: 42%; }
.art-opts .is-picked { background: var(--lp-blue-soft); border-color: var(--lp-blue); }
.art-opts .is-picked b { background: var(--lp-blue); border-color: var(--lp-blue); }
.art-opts .is-picked b::before { color: var(--lp-on-blue); }
.art-opts .is-picked .art-line { background: var(--lp-blue-tint); }

/* OMR 답안지(앞 카드) — 줄마다 번호 + ①②③④ 동그라미, 칠한 칸은 파랑 */
.art-omr {
  left: 20.8em; top: 10.6em; width: 12.6em;
  padding: 0 .95em 1em;
  background: var(--lp-bg);
  border: 1px solid var(--lp-line);
  border-radius: 1.1em;
  box-shadow: var(--lp-shadow-card);
  transform: rotate(4deg);
  overflow: hidden;
}
.art .art-omr-head {
  display: flex; align-items: center; gap: .6em;
  margin: 0 -.95em .8em; padding: .65em .95em;
  background: var(--lp-blue-soft);
  border-bottom: 1px solid var(--lp-line);
}
.art-omr-head b { flex: none; font-size: .74em; font-weight: var(--weight-heavy); color: var(--lp-blue-strong); }
.art-omr-head .art-line { flex: 1 1 auto; height: .45em; background: var(--lp-blue-tint); }
.art-omr-rows { display: grid; gap: .38em; counter-reset: lp-row; }
.art-omr-rows li {
  display: grid; grid-template-columns: 1.5em repeat(4, minmax(0, 1fr));
  align-items: center; justify-items: center;
  height: 1.78em; padding: 0 .2em;
  border-radius: .5em;
  counter-increment: lp-row; counter-reset: lp-bub;
}
.art-omr-rows li::before { content: counter(lp-row); font-size: .66em; font-weight: var(--weight-heavy); color: var(--lp-muted); }
.art-omr-rows .is-now { background: var(--lp-current); }
.art-omr-rows i {
  display: grid; place-items: center;
  width: 1.42em; height: 1.42em;
  border: 1.5px solid var(--lp-omr-line);
  border-radius: 50%;
  background: var(--lp-bg);
  counter-increment: lp-bub;
}
.art-omr-rows i::before { content: counter(lp-bub); font-size: .52em; font-weight: var(--weight-bold); font-style: normal; line-height: 1; color: var(--lp-subtle); }
.art-omr-rows i.on { background: var(--lp-blue); border-color: var(--lp-blue); box-shadow: var(--lp-shadow-bubble); }
.art-omr-rows i.on::before { color: transparent; }  /* 칠한 칸은 번호를 덮는다 */

/* 해설 쪽지 · 체크 배지 · 손가락 표 */
.art-chip {
  left: 2.4em; top: 23.1em; width: 12.4em; height: 3.3em;
  display: flex; align-items: center; gap: .6em;
  padding: 0 1em 0 .6em;
  background: var(--lp-bg);
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-full);
  box-shadow: var(--lp-shadow-card);
}
.art-chip-dot {
  flex: none; display: grid; place-items: center;
  width: 2.1em; height: 2.1em;
  border-radius: 50%;
  background: var(--lp-blue-soft);
}
.art-chip-dot svg { width: 60%; height: 60%; fill: none; stroke: var(--lp-blue); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.art-chip b { flex: none; font-size: .8em; font-weight: var(--weight-heavy); color: var(--lp-ink); }
.art-chip .art-line { flex: 1 1 auto; height: .5em; }
.art-check {
  left: 22.3em; top: .2em; width: 4.4em; height: 4.4em;
  display: grid; place-items: center;
  border: .3em solid var(--lp-bg);
  border-radius: 50%;
  background: var(--lp-blue);
  box-shadow: var(--lp-shadow-tile);
}
.art-check svg { width: 54%; height: 54%; fill: none; stroke: var(--lp-on-blue); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.art-cursor {
  left: 14.2em; top: 15.1em; width: 2.5em; height: 2.5em;
  fill: var(--lp-ink); stroke: var(--lp-bg); stroke-width: 1.5; stroke-linejoin: round;
}

/* 움직임 — 첫 화면 주인공은 큰 글자 타이프라이터(hero-type 스크립트) 하나뿐(디자인센터 K-007 원칙 1 · 2026-10-31 검수).
   장식 그림의 안무(떠오르기·칸 채우기·체크 팝 8개)는 걷어 내고 그림 전체가 한 덩어리로 0.5초 올라온다(K-007 #7 큰 등장 0.3~0.5초).
   「움직임 줄이기」면 이 규칙도 없다. 기울어진 답안지 각도는 .art-omr 기본 transform(4deg)이 그대로 맡는다 */
@media (prefers-reduced-motion: no-preference) {
  .lp .hero-art { animation: lp-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes lp-rise { from { opacity: 0; transform: translateY(.6em); } }

/* 2단 — 많이 찾는 종목: 흰 띠 · 옅은 회청 상자(테두리는 안쪽 그림자라 상자 크기 그대로) */
.lp .band-primary {
  background: var(--lp-bg);
  color: var(--lp-text);
  border-top: 1px solid var(--lp-line);
  padding-block: var(--space-6);
}
.lp .band-primary a:focus-visible { outline-color: var(--lp-blue); }
.lp .band-label {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
  color: var(--lp-ink);
}
.lp .top-btn {
  background: var(--lp-surface);
  color: var(--lp-text);
  box-shadow: inset 0 0 0 1px var(--lp-line);
  transition: background-color .15s, box-shadow .15s, color .15s;
}
.lp .top-btn .initial { color: var(--lp-blue); }
.lp .top-btn:hover { background: var(--lp-blue-soft); color: var(--lp-blue-strong); box-shadow: inset 0 0 0 1px var(--lp-blue); }
.lp .all-link { color: var(--lp-blue); }
.lp .all-link:hover { color: var(--lp-blue-strong); }

/* 3단 — 약속 넷: 흰 띠 · 위아래 가는 선 · 앞에 파란 체크 */
.lp .band-muted {
  background: var(--lp-bg);
  color: var(--lp-text);
  border-block: 1px solid var(--lp-line);
}
.lp .promises li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
  border-color: var(--lp-line);
}
.lp .promises li::before {               /* 체크 표 — 테두리 두 변을 돌려 그린다(그림 파일 없음) */
  content: "";
  flex: none;
  width: .36em;
  height: .66em;
  margin-inline: .2em .25em;
  border: solid var(--lp-blue);
  border-width: 0 .16em .16em 0;
  transform: translateY(-.1em) rotate(45deg);
}

/* 바닥 — 흰 띠 */
.lp .site-footer { background: var(--lp-bg); color: var(--lp-text); }
.lp .logo-big { color: var(--lp-ink); }
.lp .company dt { color: var(--lp-muted); }
.lp .ai-note { color: var(--lp-muted); } /* 크기 12px · 흐림 없음 — D-010b(2026-10-15 H-0278) */

/* PC(1024↑) — 왼쪽 글 · 오른쪽 그림 두 칸 */
@media (min-width: 1024px) {
  .lp .hero {
    grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
    align-items: center;
    column-gap: var(--space-7);
    padding-block: var(--space-8);
  }
  .lp .hero .title { margin-bottom: var(--space-4); font-size: var(--text-xl); }
  .lp .display { margin-bottom: var(--space-5); }
  .lp .hero-art { margin-inline: 0 auto; }
  .art { font-size: min(16px, calc((100vw - 112px) * 11 / 21 / 34)); }
  @supports (width: 1cqi) { .art { font-size: calc(100cqi / 34); } }
  .lp .band-primary { padding-block: var(--space-7); }
}

/* 첫 화면 상단 메뉴를 본문 폭에 맞춘다(10-15 컨덕터 — PC 에서 로고가 본문 왼쪽 줄과 어긋나던 것 · 첫 화면만) */
html.lp .cm-head .cm-inner {
  max-width: calc(var(--content-max) + var(--page-pad) * 2);
  padding-inline: var(--page-pad);
}
/* 조각: 홈 주요 메뉴(사이트링크 후보 · H-0686) — landing-v4.css 끝에 붙인다.
   머리띠(.site-header)와 같은 재결(흰 바탕·아래 줄) — 토큰만 쓰고 수치 새로 만들지 않는다. */
.key-menu {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.key-menu .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-2);
}
.key-menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--link);
  text-decoration: none;
  text-underline-offset: var(--space-1);
}
.key-menu a:hover,
.key-menu a:focus-visible {
  text-decoration: underline;
}
/* 조각: 홈 보강(공부 순서·자주 묻는 질문·폰 위쪽 고정 CTA · 2026-10-22 SEO 본부) — landing-v4.css 끝에 붙인다.
   토큰만 쓰고 수치를 새로 만들지 않는다. 제목(.band-label)은 기존 「많이 찾는 종목」 규칙을 그대로 받는다. */

/* 이렇게 공부하세요 — 번호 셋 */
.steps-band,
.faq-band {
  background: var(--lp-bg);
  color: var(--lp-text);
  border-top: 1px solid var(--lp-line);
  padding-block: var(--space-6);
}
.steps-band .steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  counter-reset: step;
}
.steps-band .step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--lp-surface);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--lp-line);
}
.steps-band .step::before {
  counter-increment: step;
  content: counter(step);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--lp-blue);
  color: var(--lp-on-blue);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
}
.steps-band .step-t {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-snug);
  color: var(--lp-ink);
}
.steps-band .step-d {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* 자주 묻는 질문 — 질문·답을 모두 펼쳐 둔다(눈에 보이는 글 = FAQPage 검색 자료와 같은 글자) */
.faq-band .faq-list {
  display: grid;
  gap: var(--space-3);
  max-width: 880px;
}
.faq-band .faq-item {
  padding: var(--space-3) var(--space-4);
  background: var(--lp-surface);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--lp-line);
}
.faq-band .faq-q {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-snug);
  color: var(--lp-ink);
}
.faq-band .faq-a {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
.faq-band .faq-a a {
  color: var(--lp-blue);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}
.faq-band .faq-a a:hover { color: var(--lp-blue-strong); }

@media (min-width: 768px) {
  .steps-band .steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-band .step { flex-direction: column; }
}
@media (min-width: 1024px) {
  .steps-band,
  .faq-band { padding-block: var(--space-7); }
}

/* 폰(768 이하) 위쪽 고정 CTA — 머리띠 안의 「문제 풀기」. 화면 아래쪽은 애드센스 앵커 광고 자리라 쓰지 않는다.
   PC 는 그대로(숨김). 옛 머리띠(.site-header)는 따라다니지 않았으므로 폰에서만 위에 붙인다(새 머리띠 .cm-head 는 이미 붙어 있다). */
.m-cta { display: none; }
@media (max-width: 768px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
  }
  /* 머리띠가 붙은 폰 폭에서 「#자리」로 뛰면 그 칸이 머리띠 밑에 깔렸다(캐리 B40 — /#all-certs 「전체 종목 … 펼쳐 보기」 줄이 가림).
     뛸 자리 위에 머리띠 높이만큼 띄운다 — 칸마다가 아니라 이 화면의 모든 자리에. */
  html { scroll-padding-top: calc(var(--header-h) + var(--space-2)); }
  .m-cta {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 40px;
    margin-inline-start: var(--space-2);
    padding-inline: var(--space-3);
    border-radius: 999px;
    background: var(--lp-blue);
    color: var(--lp-on-blue);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
  }
  .m-cta:hover,
  .m-cta:focus-visible { background: var(--lp-blue-strong); color: var(--lp-on-blue); }
}
/* 조각: 많이 찾는 종목 상위 강조(G-7 · 2026-10-30 → S1·S2·S4·S7·S3 개정 2026-10-31) — install_landing 이
   landing-v4.css 끝에 붙인다(내용 갈아끼움 멱등). 조각 뒤에 다른 규칙을 두지 않는다 — 갈아끼울 때 마커부터
   파일 끝까지 통째로 바뀐다(타이프 캐럿 규칙도 그래서 이 안에 있다).
   폭: grid auto-fill + minmax(min(240px,100%),1fr) — 390·768·1280 어디서도 틀이 뷰포트를 넘지 않는다(고정 폭 없음).
   검색창은 첫 화면 히어로의 form.search 가 정본 — 이 밴드에는 폼을 하나 더 두지 않는다(중복 방지).
   밴드는 흰 띠(.lp .band-primary — lp-bg #FFFFFF · lp-text #1A1F28 16.5:1 실측)다. */

.top-hero {                          /* 응시자 순 위 12 — 등급·응시 규모와 함께 */
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--space-2);
}
.top-hero-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  background: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius);
  text-decoration: none;
}
.top-hero-link:hover { background: var(--accent); color: var(--accent-foreground); }
.top-hero-link:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 2px; }
.top-hero-link .grade {              /* 등급 쪽지 — #1A1F28/#EDF4FC = 14.91:1(WCAG 계산) */
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--foreground);
}
.top-hero-link .hname {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.top-hero-link .apx {                /* 응시 규모 — 만·천 반올림. 연도·출처는 아래 기준줄에 한 번만(S1) */
  font-size: var(--text-sm);
  color: var(--muted-foreground);    /* 흰 면(#FFFFFF 카드) 대비 6.08:1(WCAG 계산) */
}

.band-basis {                        /* S1 — 2단 머리의 기준줄(2025년 필기 응시자 수 · 공단 공공데이터) */
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);   /* 제목 아래에 바짝, 칩과는 띄운다 */
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--lp-muted);            /* 흰 면 대비 6.08:1(WCAG 계산 · G-9 실측과 같은 색) */
}

.grade-chips {                       /* 등급 칩 — 흰 띠 위. 문구·순서는 /cert/ 등급 그룹과 통일, 개수는 서비스 전체 기준(S7) */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.grade-chip {                        /* 안 누른 칩: 흰 면 · 진한 글자 16.5:1 · 잿빛 테두리 */
  min-height: var(--top-btn-h);      /* 종목 단추와 같은 누르는 높이(44 · 큰 글씨 모드에서는 같이 커진다) */
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--lp-text);
  background: transparent;
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.grade-chip:hover { background: var(--lp-blue-soft); color: var(--lp-text); }   /* 옅은 파랑 위 진한 글자 14.7:1 */
.grade-chip[aria-pressed="true"] {   /* 누른 칩: 파란 면 · 흰 글자 6.44:1(토큰 실측 주석) */
  background: var(--lp-blue);
  color: var(--pal-on-primary);
  border-color: var(--lp-blue);
}
.grade-chip:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 2px; }

/* S4·S7 — 접힌 「전체 종목」 칸: 서비스 전체 종목을 details 로 담는다(접어도 링크는 DOM 에 남는다 — 크롤·SEO 그대로).
   펼치기 전 모습은 종목 단추와 같은 결의 가로 한 줄. */
details.all-certs > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  background: var(--lp-surface);
  color: var(--lp-text);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--lp-line);
  font-weight: var(--weight-bold);
  cursor: pointer;
  list-style: none;                  /* 기본 삼각형 대신 오른쪽 셰브론 */
}
details.all-certs > summary::-webkit-details-marker { display: none; }
details.all-certs > summary:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 2px; }
details.all-certs > summary .sum-hint {
  flex: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--lp-muted);            /* 흰 면 대비 6.08:1 */
}
details.all-certs > summary .sum-hint::after { content: " ▾"; color: var(--lp-blue); }
details.all-certs[open] > summary { margin-bottom: var(--space-3); }
details.all-certs[open] > summary .sum-hint::after { content: " ▴"; }
@media (prefers-reduced-motion: no-preference) {
  details.all-certs[open] .top-grid { animation: lp-fold-in .25s ease-out both; }   /* K-007 #7 — 패널 등장, 이즈아웃 */
}
@keyframes lp-fold-in { from { opacity: 0; transform: translateY(6px); } }

/* S4 — FAQ 접기: faq_html 이 <details class="faq-item"> 로 조립한다(첫 항목만 펼침).
   벌어질 모습(카드·글자)은 앞 보강 조각(tools/landing_extras.css) 그대로 — 여기는 접는 요약 줄 델타만. */
.faq-band details.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
  cursor: pointer;
  list-style: none;
}
.faq-band details.faq-item > summary::-webkit-details-marker { display: none; }
.faq-band details.faq-item[open] > summary { margin-bottom: var(--space-2); }
.faq-band .faq-chev {
  flex: none;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--lp-blue);
  transition: transform .2s ease;    /* K-007 #7 — 작은 반응 0.2초 */
}
@media (prefers-reduced-motion: no-preference) {
  .faq-band details.faq-item[open] .faq-chev { transform: rotate(180deg); }
}

/* G-9(2026-10-30) → S3(2026-10-31 추가 축소) — 첫 화면에 소개 문구·검색창·대표 종목이 다 들어오게 세로 여백을 줄인다.
   글자 크기는 한 글자도 줄이지 않고, 구역 사이 간격은 유지한다(방 원칙 1). 줄이는 것은 장식 그림 캡과 여백뿐.
   기준값(base css): .lp .hero 32/48(기본)·64/64(≥1024) · .lp .lead 줄 26.4px(폰)·29.7px(PC) · 밴드 32(기본)·48(≥1024).
   S3 결과(390px): 문구 한 줄 화(HTML) −약 53px · 그림 62%→54% −약 24px · 히어로 아래 여백 24→16 −8px · 밴드 32/32→24/24 −16px.
   S3 결과(1280px): 문구 2줄→1줄 −약 30px · 그림 520→460px −약 51px · 히어로 48/48→32/32 −32px · 밴드 32/24→24/24 −8px. */
.lp .check { margin-bottom: var(--space-4); }        /* 32 → 16(체크 줄과 검색창 사이 · 전 폭 공통) */
@media (max-width: 767px) {
  .lp .hero { padding-block: var(--space-5) var(--space-4); }   /* G-9 24/24 → 24/16(S3) */
  .lp .display { margin-bottom: var(--space-4); }    /* 24 → 16 */
  .lp .hero-art { max-width: 54%; }                  /* 62 → 54%(S3) — 34em×29em 틀이라 높이도 같이 줄음. 글자 아님 */
  .lp .band-primary { padding-block: var(--space-5); }   /* 32/32 → 24/24(S3) */
}
@media (min-width: 1024px) {
  .lp .hero { padding-block: var(--space-6); }       /* G-9 48/48 → 32/32(S3) */
  .lp .hero-art { max-width: 460px; }                /* G-9 520 → 460(S3) — 첫 카드 두 줄이 800px 화면 안에 */
  .lp .band-primary { padding-block: var(--space-5); }   /* G-9 32/24 → 24/24(S3) */
}

/* ── 히어로 타이프라이터 커서(디자인센터 K-007 #9 · 2026-10-31) — hero-type 스크립트가 없으면 이 규칙도 쓰이지 않는다.
   마커 뒤에 따로 두면 조각 갈아끼움에 잘리므로 조각 안에 둔다(2026-10-31 미션 2 교훈) ── */
.lp .display .type-caret {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 2px;
  vertical-align: -0.06em;
  border-radius: 1px;
  background: currentColor;
  animation: lp-caret-blink 0.5s steps(1) infinite;
}
@keyframes lp-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lp .display .type-caret { animation: none; } }
/* 검색 결과 없음 바로가기(10-31 주인님 지시 5) — 접힌 전체 종목 칸으로 */
.results .none a { color: var(--lp-blue-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.results .none a:hover, .results .none a:focus-visible { background: none; color: var(--lp-blue-strong); text-decoration-thickness: 2px; }