/* ─────────────────────────────────────────────────────────────────────────────
 * 진단 화면(#checkScreen, js/check/check.js) — 2026-10-02 사용자 「지금 가동 중인 사이트의 컨셉을 바탕으로 하되 디자인 시안을 반영」.
 * 색 · 글꼴은 홍보 사이트(site/index.html :root)의 토큰을 이 화면에만 옮겼다. 2026-10-02 디자인 가이드로 사이트와 함께 바꿨다 —
 * 행동 · 활성 = 보라, 제목 = 남색, 카드 = 같은 중립 바탕, 글꼴 Inter 하나(옛 이름 blue · teal · *-bg 는 값만 바꿈). 차례는 시안(제목 → 칩 → 시작 → 샘플 결과 → 세 걸음 → 알게 되는 것).
 * 층은 앱 메뉴 바(#appSidebar 700) 위 · 로그인 창(10100) · 대화 상자(25000) 아래. 리플레이 그림 · 재생기 모양은 gazepath.css(리포트와 같음).
 * ─────────────────────────────────────────────────────────────────────────── */
#checkScreen {
  --ck-navy: #07015a; --ck-blue: #6012f3; --ck-teal: #6012f3; --ck-violet: #6012f3;
  --ck-rd-bg: #f7f8fc; --ck-wr-bg: #f7f8fc; --ck-ls-bg: #f7f8fc; --ck-ls: #07015a;
  --ck-ink: #18213a; --ck-muted: #56627a; --ck-line: #e4e7ef;
  position: fixed; inset: 0; z-index: 800; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; color: var(--ck-ink); color-scheme: light;
  font: 16px/1.625 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
}
#checkScreen.hidden { display: none; }
#checkScreen h1, #checkScreen h2 { font-family: inherit; color: var(--ck-navy); letter-spacing: -.01em; }
.ck-wrap { max-width: 1088px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.ck-ic { width: 20px; height: 20px; flex: none; }

/* 머리 — 사이트와 같은 줄: 로고 · 시험 탭 · Sign in(로그인했으면 표지 글자) */
.ck-top { display: flex; align-items: center; gap: 24px; max-width: 1088px; margin: 0 auto; padding: 10px 16px; box-sizing: border-box; }
.ck-logo { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; }
.ck-logo img { height: 34px; width: auto; display: block; }
.ck-tabs { display: flex; gap: 4px; }
.ck-tab { border: 0; background: none; font: 600 15px/22px 'Inter', sans-serif; color: var(--ck-navy); letter-spacing: .02em; padding: 10px 12px; min-height: 44px;
  border-bottom: 2px solid transparent; cursor: pointer; }
.ck-tab.is-on { color: var(--ck-blue); border-bottom-color: var(--ck-blue); }
.ck-signin { margin-left: auto; border: 0; background: none; color: var(--ck-blue); font: 600 16px inherit; font-family: inherit; padding: 10px 4px; min-height: 44px; cursor: pointer; }
.ck-label { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--ck-navy); }
#checkScreen header.ck-top { border-bottom: 1px solid var(--ck-line); max-width: none; padding-left: max(16px, calc((100% - 1088px) / 2 + 16px)); padding-right: max(16px, calc((100% - 1088px) / 2 + 16px)); }

/* 히어로 — 하늘색 그러데이션 · eyebrow · 세리프 두 줄(남색 + 청록) · 파란 시작 단추 */
.ck-hero { background: linear-gradient(180deg, #e3f1fd 0%, #f4f9fe 60%, #fff 100%); padding: 36px 0 32px; }
.ck-hero-in { display: grid; gap: 28px; }
.ck-eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-blue); }
.ck-hero h1 { margin: 0 0 14px; font-size: clamp(34px, 5vw, 54px); line-height: 1.08; }
.ck-hero h1 span, .ck-hero h1 em { display: block; }
.ck-hero h1 em { font-style: normal; color: var(--ck-teal); }
.ck-lead { margin: 0 0 16px; font-size: 18px; color: var(--ck-muted); }
.ck-chips { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ck-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ck-line); border-radius: 999px; background: #fff;
  font-size: 14px; color: var(--ck-ink); }
.ck-chip .ck-ic { width: 16px; height: 16px; color: var(--ck-blue); }
.ck-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 220px; min-height: 52px; padding: 14px 28px; border: 0; border-radius: 10px;
  background: var(--ck-blue); color: #fff; font: 700 17px system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; box-shadow: 0 10px 24px rgba(1, 91, 252, .25); }
.ck-cta:disabled { opacity: .5; cursor: default; }
.ck-note { margin: 10px 0 0; font-size: 14px; color: var(--ck-muted); }

/* 샘플 결과 — 사이트 읽기 카드와 같은 색 · 라벨 · 세리프 글 위 리플레이 */
.ck-sample { background: var(--ck-rd-bg); border-radius: 16px; padding: 18px 20px 16px; align-self: start; }
.ck-tag { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-blue); }
.ck-gp { background: #fff; border-radius: 12px; padding: 12px 14px; }
.ck-gp .rp-gp-box { font-family: inherit; }
.ck-gp .rp-gp-t text { fill: #28374d; }
.ck-gp .rp-gp-ctl { margin-top: 10px; }
/* 단추 모양은 gazepath.css 한 곳(2026-10-05) */
.ck-cap { margin: 10px 0 0; font-size: 13px; color: var(--ck-muted); }

/* 세 걸음 — 흰 카드 한 줄(좁으면 세로) */
.ck-steps { list-style: none; margin: 8px 0 0; padding: 16px; display: grid; gap: 14px; border: 1px solid var(--ck-line); border-radius: 16px; background: #fff; }
.ck-step { display: flex; align-items: flex-start; gap: 12px; }
.ck-step > .ck-ic { width: 40px; height: 40px; padding: 9px; box-sizing: border-box; border-radius: 50%; background: var(--ck-rd-bg); color: var(--ck-blue); }
.ck-step b { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ck-navy); }
.ck-step small { display: block; font-size: 14px; color: var(--ck-muted); }
.ck-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ck-blue); color: #fff; font-size: 12px; font-weight: 700; }

/* 알게 되는 것 — 사이트 섹션 제목(가운데 세리프) + 옅은 색 카드 셋 */
.ck-discover { padding-top: 36px; padding-bottom: 48px; }
.ck-discover h2 { margin: 0 0 18px; text-align: center; font-size: clamp(26px, 3.6vw, 38px); }
.ck-discover ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ck-disc { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 16px; }
.ck-disc > .ck-ic { width: 26px; height: 26px; }
.ck-disc b { display: block; font: 600 18px/26px 'Inter', sans-serif; color: var(--ck-navy); }
.ck-disc small { display: block; font-size: 15px; color: var(--ck-muted); }
.ck-disc-0 { background: var(--ck-rd-bg); } .ck-disc-0 > .ck-ic { color: var(--ck-blue); }
.ck-disc-1 { background: var(--ck-wr-bg); } .ck-disc-1 > .ck-ic { color: var(--ck-violet); }
.ck-disc-2 { background: var(--ck-ls-bg); } .ck-disc-2 > .ck-ic { color: var(--ck-ls); }

/* 넓은 화면 — 히어로 두 칸(글 · 샘플), 세 걸음 · 알게 되는 것은 세 칸 가로 */
@media (min-width: 900px) {
  .ck-hero { padding: 56px 0 44px; }
  .ck-hero-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; }
}
@media (min-width: 720px) {
  .ck-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 24px; }
  .ck-discover ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 좁은 화면 — 머리는 사이트처럼 두 줄(로고 · Sign in / 시험 탭), 시작 단추는 폭 가득 */
@media (max-width: 719px) {
  #checkScreen header.ck-top { flex-wrap: wrap; gap: 0 8px; padding-top: 8px; padding-bottom: 0; }
  .ck-tabs { order: 3; width: 100%; justify-content: space-around; }
  .ck-hero { padding-top: 24px; }
  .ck-cta { width: 100%; }
}