/* 글꼴 파일이 저장소에 없으면 아래 body 의 "Pretendard" 는 조용히 시스템 기본(Segoe UI →
   맑은 고딕)으로 내려앉는다. `_headers` 의 CSP 가 `font-src 'self'` 라 구글 폰트로 때울
   수도 없다. 그래서 가변 폰트 한 벌을 저장소에 넣고 여기서 건다.
   `font-display: swap` — 2MB 를 받는 동안 글자가 안 보이는 것보다 시스템 글꼴로 먼저
   보이는 편이 낫다. */
@font-face {
  font-family: "Pretendard";
  src: url("/assets/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 고정된 상단 바의 높이. 상세 쪽 접기 줄이 자기 위치를 잡을 때 같은 값을 쓴다 -
     두 곳에 따로 적으면 스크롤할 때 한 줄이 바 밑으로 숨거나 사이가 뜬다.
     ⚠ 눈대중이 아니라 **렌더로 잰 값**이다(2026-08-21). 오래 58px 로 적혀 있었지만
     아무도 안 읽고 있어서 틀린 줄 몰랐다. 바 차림새를 고치면 여기도 다시 재라.
     560px 아래에서는 안쪽 여백과 글자가 한 단 작아져 51px 이다(맨 끝 블록에서 덮는다). */
  --topbar-h: 55px;
  /* 본문 기둥의 폭과 좌우 여백. 상단 바가 이 값을 읽어 제 안쪽 폭을 맞춘다 -
     따로 적으면 데탑에서 메뉴만 본문 밖으로 튀어나온다(대표 지적 2026-08-20).
     첫 화면 값이고, 상세 갈래는 .detail-body 에서 덮어쓴다. */
  --shell-w: 1480px;
  --shell-pad: 24px;
  /* 모서리 눈금 — 값이 5·6·7·8·10·12·13·14·16·18 로 열 갈래라 위계가 없었다.
     다섯 칸으로 모은다. 작은 것부터 큰 것 순서이고, 큰 칸일수록 큰 값을 쓴다. */
  --r-xs: 9px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  /* 강조색의 표준 이름이다. 블룸의 다른 화면(오피스·런처)은 `--accent`/`--accent-text`
     라 부르고 우리는 `--teal`/`--on-accent` 라 불러 왔는데, 표준에서 베껴 온 규칙이
     `--accent` 를 그대로 쓰는 바람에 **정의가 없는 변수를 다섯 자리가 읽고 있었다.**
     var() 가 비면 그 속성은 통째로 unset 이라 조용히 사라진다 - 실제로 테마 고르개의
     '고른 것' 표시와 상세 '자세히 보기' 상자의 테두리·갈매기표가 화면에서 없었다
     (2026-08-20 렌더 실측: box-shadow none, color 가 --ink 로 떨어짐).
     테마마다 --teal 이 다시 잡히는데 그 자리가 같은 :root 라 별칭도 따라 바뀐다. */
  --accent: var(--teal);
  --accent-text: var(--on-accent);
}

/* 라이트 — 따뜻하되 **누렇지 않은** 쪽이다.
   ⚠ 2026-08-21 에 한 번 통째로 다시 잡았다. 대표 지적 *"디자인 너무 구려. 색상도"* 를
   받고 재 보니 바탕이 #f2ebdf 였다 - R242 G235 B223 이라 **파랑이 19 나 모자라** 화면
   전체가 세피아로 깔렸고, 카드(#fffdf8)와의 차이도 작아 흐릿했다. 낡은 종이처럼 보인 것이다.
   지금은 노랑 편차를 4 로 줄여(#f7f5f3) 온기만 남기고, 카드를 **순백**으로 올려 대비를 세웠다.
   ⚠ 페이퍼와 헷갈리지 마라 - 페이퍼는 **차가운** 흰빛(#f9fafb)이다. 둘은 밝기가 아니라
   **온도**로 갈린다. 라이트를 더 차갑게 만들면 두 갈래가 같아져 고를 이유가 없어진다. */
:root {
  color-scheme: light;
  --bg: #f7f5f3;
  --bg-top: #fdfcfb;
  --body-glow: rgba(11, 131, 119, 0.05);
  --panel-bg: #ffffff;
  --panel-border: rgba(40, 34, 28, 0.11);
  --surface: #ffffff;
  --surface-strong: #f2efec;
  --result-top-bg: #f2efeb;
  --ink: #171310;
  --on-ink: #ffffff;
  --on-accent: #ffffff;
  --muted: #5f5952;
  --line: #e6e1db;
  --line-soft: rgba(40, 34, 28, 0.1);
  --hover-line: rgba(11, 131, 119, 0.55);
  --focus-ring: rgba(11, 131, 119, 0.16);
  /* ⚠ 이 값은 **재서 정했다.** 강조색을 채워 흰 글자를 얹는 자리가 여럿이라(켠 갈래 단추,
     자격 구분 배지, '다음' 단추) 대비가 4.5 를 넘어야 한다. 한 단 더 밝은 #0d8f83 은
     3.98 로 못 미쳤다. 지금 값은 4.64 다 - 더 밝히려면 흰 글자 자리를 먼저 세어 봐라. */
  --teal: #0b8377;
  --teal-soft: #d9f0ec;
  --teal-ink: #085f57;
  --coral: #e2593a;
  --coral-soft: #fbe5de;
  --coral-ink: #8a3320;
  --amber: #c2870d;
  --amber-soft: #f9eecc;
  --amber-ink: #6b4a06;
  --meter-track: #e6e1db;
  --tag-bg: #f0ece8;
  --tag-text: #574f47;
  --source-link-bg: #ffffff;
  --source-link-text: #8a3320;
  --image-shadow: none;
  --shadow: 0 10px 30px rgba(40, 30, 20, 0.07);
}

/* 페이퍼 — 라이트보다 한 단 더 밝은 갈래다. 어두운 쪽이 둘(다크·미드나잇)인데 밝은 쪽이
   하나뿐이라 짝이 안 맞는다는 대표 지적(2026-08-20)에서 나왔다. 색이 아니라 **깊이**가
   다르다: 기본 라이트는 따뜻한 종이빛(#f2ebdf)이고, 페이퍼는 차가운 흰빛(#f9fafb)에
   카드가 순백(#ffffff)이다.
   ⚠ 카드가 순백이라 teal/coral/amber 의 -soft 값이 기본 라이트 것 그대로면 흰 바탕에서
   뜬다(거의 안 보인다). 그래서 세 값만 한 단 진하게 다시 잡았다. */
:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #f9fafb;
  --bg-top: #ffffff;
  --body-glow: rgba(20, 124, 116, 0);
  --panel-bg: #ffffff;
  --panel-border: #e2e6ec;
  --surface: #ffffff;
  --surface-strong: #f1f3f6;
  --result-top-bg: #f4f6f9;
  --ink: #0d1117;
  --on-ink: #ffffff;
  --on-accent: #ffffff;
  --muted: #525c6b;
  --line: #d9dee6;
  --line-soft: rgba(13, 17, 23, 0.1);
  --hover-line: rgba(20, 124, 116, 0.55);
  --focus-ring: rgba(20, 124, 116, 0.16);
  --teal: #147c74;
  --teal-soft: #dcefeb;
  --teal-ink: #0e4c48;
  --coral: #d95a3c;
  --coral-soft: #fbe7e0;
  --coral-ink: #7c5044;
  --amber: #b5820f;
  --amber-soft: #f8eecd;
  --amber-ink: #6e4b0d;
  --meter-track: #e1e5ec;
  --tag-bg: #eef1f5;
  --tag-text: #39424f;
  --source-link-bg: #ffffff;
  --source-link-text: #8a4a36;
  --image-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  --shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

:root[data-theme="soft"] {
  color-scheme: light;
  --bg: #e9f0ee;
  --bg-top: #f1f5f4;
  --body-glow: rgba(27, 117, 108, 0.07);
  --panel-bg: rgba(250, 252, 251, 0.94);
  --panel-border: rgba(31, 53, 55, 0.1);
  --surface: #ffffff;
  --surface-strong: #f1f6f4;
  --result-top-bg: #f5f9f7;
  --ink: #1d2b2e;
  --on-ink: #ffffff;
  --on-accent: #ffffff;
  --muted: #617176;
  --line: #ccd8d5;
  --line-soft: rgba(31, 53, 55, 0.08);
  --hover-line: rgba(27, 117, 108, 0.62);
  --focus-ring: rgba(27, 117, 108, 0.16);
  --teal: #1b756c;
  --teal-soft: #dceee9;
  --teal-ink: #104d48;
  --coral: #d9664e;
  --coral-soft: #fcece7;
  --coral-ink: #75463c;
  --amber: #b98224;
  --amber-soft: #f8f0d7;
  --amber-ink: #65470e;
  --meter-track: #d4dfdc;
  --tag-bg: #e7efed;
  --tag-text: #405457;
  --source-link-bg: #ffffff;
  --source-link-text: #6f473e;
  --image-shadow: 0 10px 24px rgba(38, 64, 62, 0.1);
  --shadow: 0 14px 44px rgba(38, 64, 62, 0.09);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101418;
  --bg-top: #151b20;
  --body-glow: rgba(79, 195, 180, 0.12);
  --panel-bg: rgba(24, 30, 35, 0.94);
  --panel-border: rgba(221, 232, 232, 0.09);
  --surface: #1b2228;
  --surface-strong: #12191f;
  --result-top-bg: #18232a;
  --ink: #eef4f2;
  --on-ink: #101418;
  --on-accent: #071311;
  --muted: #a6b5ba;
  --line: #344249;
  --line-soft: rgba(221, 232, 232, 0.08);
  --hover-line: rgba(79, 195, 180, 0.72);
  --focus-ring: rgba(79, 195, 180, 0.2);
  --teal: #4fc3b4;
  --teal-soft: #123b38;
  --teal-ink: #d8fffa;
  --coral: #ff8a66;
  --coral-soft: #351f19;
  --coral-ink: #ffd0c1;
  --amber: #f2c14f;
  --amber-soft: #392d12;
  --amber-ink: #ffe7a3;
  --meter-track: #27343a;
  --tag-bg: #233039;
  --tag-text: #c7d6d9;
  --source-link-bg: #211916;
  --source-link-text: #ffd4c7;
  --image-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  --shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

:root[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #080b0d;
  --bg-top: #0d1214;
  --body-glow: rgba(94, 215, 189, 0.09);
  --panel-bg: rgba(15, 20, 22, 0.97);
  --panel-border: rgba(211, 229, 223, 0.1);
  --surface: #161d1f;
  --surface-strong: #0c1113;
  --result-top-bg: #11191a;
  --ink: #f1f6f3;
  --on-ink: #07100e;
  --on-accent: #07110e;
  --muted: #a9b7b2;
  --line: #34413f;
  --line-soft: rgba(211, 229, 223, 0.08);
  --hover-line: rgba(94, 215, 189, 0.78);
  --focus-ring: rgba(94, 215, 189, 0.24);
  --teal: #5ed7bd;
  --teal-soft: #123832;
  --teal-ink: #d9fff5;
  --coral: #ff8066;
  --coral-soft: #321a16;
  --coral-ink: #ffd0c6;
  --amber: #f0bd4f;
  --amber-soft: #372b10;
  --amber-ink: #ffe6a2;
  --meter-track: #26312f;
  --tag-bg: #202b2b;
  --tag-text: #d0dcda;
  --source-link-bg: #1d1513;
  --source-link-text: #ffd5ca;
  --image-shadow: 0 14px 38px rgba(0, 0, 0, 0.48);
  --shadow: 0 22px 64px rgba(0, 0, 0, 0.5);
}

/* 미드나잇에서만 탭을 옅게 칠하던 자리가 여기 있었다. 이제 다섯 테마가 같은 표시를
   쓰므로(아래 .result-view-tab.active) 지웠다 - 테마마다 표시가 다르면 같은 화면을
   두 사람이 다르게 기억한다(전체공지 2026-08-20). */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, var(--body-glow), transparent 35%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family:
    "Pretendard",
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  /* 한글은 낱자 단위로 끊어져 '자격'/'증' 처럼 낱말 가운데가 갈린다. 낱말 단위로 묶고,
     마지막 줄에 한 낱말만 떨어지는 것도 막는다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

button,
input,
select,
textarea {
  font: inherit;
  word-break: keep-all;
}

button {
  cursor: pointer;
}

/* 아이콘은 전부 얇은 선 SVG 다. 크기는 담는 자리에서 정한다. */
.icon-glyph svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* 키보드로 다닐 때 지금 어디에 있는지 보이게 한다. 마우스 클릭에는 안 뜬다.
   테두리 반경은 여기서 정하지 않는다 — 정하면 위로가기 단추(18px)나 알약 모양이
   포커스 순간에만 각져 보인다. 외곽선은 요소 제 반경을 따라 그려진다. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* 카드 안 링크로 탭이 들어오면 카드도 함께 표시해 지금 몇 번째 카드인지 알려 준다.
   결과 카드가 여섯 장씩 서고 상세 페이지는 블록이 여러 개라, 링크에만 표시가 뜨면
   어느 묶음 안인지 놓친다. 위 규칙과 달리 이 요소들(article·section)은 제가 포커스를
   받지 못하므로 :has() 로 안쪽을 본다. 여기도 반경은 정하지 않는다. */
:is(.cert-card, .detail-block, .saved-result-row):has(:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* 움직임을 줄여 달라고 설정한 사람에게는 애니메이션을 걷어낸다. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a {
  color: inherit;
}

.app-shell {
  width: min(1480px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
}

.panel,
.results-panel {
  position: relative;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
}

.intake-panel {
  /* 두 칸일 때는 스크롤을 따라온다. 결과 패널이 3000px 넘게 길어서, 붙여 두지 않으면
     왼쪽 칸이 첫 화면 아래로 통째로 빈다(1440px 에서 2800px 가 죽은 여백이었다).
     질문을 보면서 결과를 훑는 화면이라 붙어 있는 쪽이 쓰임에도 맞다. */
  position: sticky;
  top: 24px;
  align-self: start;
  /* 높이를 화면에 붙박아 두면 1단계처럼 내용이 짧은 칸에서 아래 절반이 통째로 빈다
     (1280x900 에서 약 330px). 내용만큼만 서게 두고, 칩이 많은 칸에서만 화면 높이에서
     멈추게 위 뚜껑만 씌운다 — 넘치는 것은 .wizard-steps 안에서 구른다. */
  height: auto;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: 30px;
  display: flex;
  flex-direction: column;
  scrollbar-color: #b5c1c0 transparent;
}

.results-panel {
  min-height: calc(100vh - 48px);
  border-radius: var(--r-xl);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.brand-row,
.toolbar,
.meter-card,
.range-field,
.card-head,
.card-meta,
.source-links {
  display: flex;
  align-items: center;
}

.brand-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}

.brand-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-mark {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 20px rgba(20, 124, 116, 0.16);
}

.brand-copy {
  min-width: 0;
}

/* 한 줄 소개. 제목보다 아래, 본문보다 조금 크다 - 흐린 회색으로 두면 주석처럼 읽혀
   아무도 안 본다. 처음 온 사람이 무엇을 하는 곳인지 모르고 바로 입력창을 만나던 자리다. */
.brand-lead {
  margin: 12px 0 0;
  max-width: 34em;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  word-break: keep-all;
  text-wrap: pretty;
}

.brand-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.auth-widget {
  position: relative;
}

.login-button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 0 14px;
  font-weight: 700;
}

.login-button:hover,
.provider-button:hover,
.auth-signout:hover {
  border-color: var(--hover-line);
}

.auth-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 12;
  width: min(310px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
}

.auth-menu-head {
  display: none;
  gap: 4px;
  margin-bottom: 12px;
}

.auth-menu.authenticated .auth-menu-head {
  display: grid;
}

.auth-menu-head strong {
  font-size: 0.98rem;
}

.auth-menu-head span,
.auth-message {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.auth-provider-stack {
  display: grid;
  gap: 10px;
}

.provider-button,
.auth-signout {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}

.provider-button.kakao {
  min-height: 48px;
  border-color: #fee500;
  border-radius: var(--r-md);
  background: #fee500;
  color: rgba(0, 0, 0, 0.85);
  font-size: 0.92rem;
  font-weight: 600;
}

.kakao-brand-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background-image: url("assets/kakao-login.jpg");
  background-repeat: no-repeat;
  background-position: -25px -14px;
  background-size: 226px 49px;
}

.provider-button.google {
  min-height: 48px;
  border-color: #d6d9dc;
  border-radius: var(--r-md);
  background: #ffffff;
  color: #1f1f1f;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
}

.provider-brand-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
}

.google-button-mount {
  min-height: 0;
  place-items: center;
}

.google-button-mount:empty {
  display: none;
}

.google-button-mount:not(:empty) {
  display: grid;
}

.auth-signout {
  margin-top: 9px;
}

.auth-message {
  display: none;
  margin: 10px 0 0;
}

.auth-menu.show-message .auth-message {
  display: block;
}

.privacy-link {
  display: block;
  margin: 12px auto 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-size: 0.74rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-link:hover {
  color: var(--ink);
}

.privacy-notice {
  margin-top: 10px;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}

.privacy-notice strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.78rem;
}

.privacy-notice p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

/* ── 테마·밝기 단추 (블룸 표준) ────────────────────────────────────────────
   오피스·관제탑·콕핏·떠들·런처와 같은 생김새다(대표 지시 2026-08-20, THEME.md).
   ⚠ 알약(border-radius: 999)으로 만들지 마라 - 오피스 원본이 알약인데 대표가 싫어하신다.
   둥근 네모(9~10px)가 블룸이 실제로 쓰는 모양이다.
   접었다 폄은 CSS 가 한다 - 평소엔 지금 테마 하나만(.on) 보이고, 펴면(.open) 넷과
   밝기 조절이 함께 나온다. 자바스크립트는 클래스만 붙인다. */
.theme-switch {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-strong);
}

.theme-btn {
  width: 28px;
  height: 28px;
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.13s ease, background 0.13s ease;
}

.theme-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.theme-btn.on {
  display: inline-flex;
}

.theme-switch.open .theme-btn {
  display: inline-flex;
}

/* 고른 것은 **강조색으로 채운다** - 아이콘만 늘어선 줄의 표준이다(전체공지 2026-08-20,
   THEME.md 7장). 예전에는 밑줄(inset 0 -2px)이었는데 밑줄은 링크가 쓰는 표시라 금지다.
   채움은 동그라미째 꽉 채우는 것이지 옅은 배경 + 얇은 링이 아니다 - 섞이면 한 화면에
   표시가 둘이 된다. */
.theme-switch.open .theme-btn.on {
  background: var(--accent);
  color: var(--accent-text);
}

.theme-btn:hover:not(:disabled):not(.on) {
  color: var(--ink);
}

.theme-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* 밝기는 테마와 따로 논다 - 라이트에서도 같은 조절이 된다(THEME.md 3장). */
.theme-bright {
  display: none;
  align-items: center;
  gap: 1px;
  margin-left: 3px;
  padding-left: 4px;
  border-left: 1px solid var(--line);
}

.theme-switch.open .theme-bright {
  display: inline-flex;
}

.theme-bright .theme-btn {
  display: inline-flex;
  width: 22px;
  height: 26px;
}

.theme-bright b {
  min-width: 3.1em;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 접기 단추 - 펼친 줄의 맨 끝, 밝기 조절 뒤다(전체공지 2026-08-20).
   **바깥을 눌러도 접히는 동작을 대신하는 것이 아니다.** 폰에서 바깥을 정확히 누르기가
   어려워서 있는 것이다. 그래서 펼쳤을 때만 보인다.
   색은 강조색 **글자**이고 바탕은 칠하지 않는다 - 이건 '고른 것'(위의 채움)이 아니라
   '끝내는 것' 이라 눈으로 갈려야 한다. */
.theme-done {
  display: none;
  margin-left: 3px;
  padding-left: 4px;
  border-left: 1px solid var(--line);
  color: var(--accent);
}

.theme-switch.open .theme-done {
  display: inline-flex;
}

.theme-switch.open .theme-done:hover:not(:disabled) {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* 상단 바가 없는 쪽을 위한 대비책이다. 실제로 쓰이면 그 쪽이 상단 바를 안 부른 것이니
   여기서 띄우지 말고 마크업을 고쳐라. */
.theme-dock-floating {
  position: fixed;
  top: 8px;
  right: 14px;
  z-index: 40;
}

.scroll-top-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.scroll-top-dock.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top-button,
.scroll-style-toggle {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.scroll-top-button:hover,
.scroll-style-toggle:hover,
.scroll-style-option:hover {
  border-color: var(--hover-line);
}

.scroll-top-button:focus-visible,
.scroll-style-toggle:focus-visible,
.scroll-style-option:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.scroll-top-button {
  width: 58px;
  height: 58px;
  border-radius: var(--r-lg);
  padding: 8px;
}

.scroll-top-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.16));
}

.scroll-style-toggle {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 700;
}

.scroll-style-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(232px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  padding: 10px;
}

.scroll-style-menu[hidden] {
  display: none;
}

.scroll-style-option {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  color: var(--muted);
  padding: 8px;
  font-size: 0.78rem;
  font-weight: 700;
}

.scroll-style-option.active {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--teal-soft);
  color: var(--teal-ink);
}

.scroll-style-option img {
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h2 {
  margin-bottom: 0;
  font-size: 1.06rem;
  line-height: 1.25;
}

h3 {
  margin-bottom: 6px;
  font-size: 1.2rem;
  line-height: 1.25;
}

.icon-button {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.2rem;
}

.icon-button:hover,
.copy-button:hover,
.chip:hover,
.tab:hover {
  border-color: var(--hover-line);
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.field-grid.compact {
  grid-template-columns: 1fr 1fr;
}

.text-field {
  display: grid;
  gap: 8px;
}

.step-hint {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* 06 단계의 예시 칩. 고르는 칩(.chip)보다 작고 낮아, 답이 아니라 거들기라는 것이 보이게 한다. */
/* 취향 예시 상자 (6단계). 예전에는 점선 알약이 줄줄이 흘러 붙어서, 마흔 개가 넘는데
   길이가 제각각이라 줄이 어긋나 보였다(대표 지적 2026-08-21). 셋을 바꿨다 -
   ① 알약을 **둥근 네모**로, ② 낱개 폭에 맞춰 흐르던 것을 **칸이 일정한 격자**로
   (위아래가 맞고 상자 크기가 같다), ③ 결마다 **색**을 준다(data-tone).
   ⚠ 칸 폭을 늘리면 한 줄에 드는 개수가 줄어 상자가 길쭉해진다. 104px 은 '현장에서 몸
   쓰기' 같은 긴 말이 두 줄로 앉는 폭이다 - 높이를 고정해 뒀으니 세 줄짜리 말은 넣지 마라. */
.example-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
}

.example-chip {
  /* 상자 크기를 같게 한다. 글자가 한 줄이든 두 줄이든 높이가 안 흔들린다. */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--tone, var(--line)) 30%, transparent);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--tone-ink, var(--muted));
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: center;
  word-break: keep-all;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

/* 결마다 색이 다르다. 팔레트에 있는 세 갈래를 그대로 쓰므로 테마 다섯에서 다 산다 -
   색값을 직접 박으면 한 테마에서만 맞는다. 뜻은 taxonomy.js 의 exampleTones 에 있다. */
.example-chip[data-tone="mind"] {
  --tone: var(--teal);
  --tone-soft: var(--teal-soft);
  --tone-ink: var(--teal-ink);
}

.example-chip[data-tone="people"] {
  --tone: var(--coral);
  --tone-soft: var(--coral-soft);
  --tone-ink: var(--coral-ink);
}

.example-chip[data-tone="hand"] {
  --tone: var(--amber);
  --tone-soft: var(--amber-soft);
  --tone-ink: var(--amber-ink);
}

/* 색 안내 줄. 상자 색이 무슨 뜻인지 한 줄로 알린다 - 없으면 색이 그냥 장식으로 읽힌다. */
.example-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 6px;
  font-size: 0.74rem;
  color: var(--muted);
}

.example-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.example-legend span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--tone);
}

.example-legend [data-tone="mind"] {
  --tone: var(--teal);
}

.example-legend [data-tone="people"] {
  --tone: var(--coral);
}

.example-legend [data-tone="hand"] {
  --tone: var(--amber);
}

.example-chip:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--tone, var(--line)) 60%, transparent);
  background: color-mix(in srgb, var(--tone, var(--line)) 8%, transparent);
}

.example-chip[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.example-note {
  flex-basis: 100%;
  margin: 2px 0 0;
  color: var(--amber-ink);
  font-size: 0.78rem;
}

/* 고른 것은 다른 고르개와 같은 표시다 - 옅은 칠 + 45% 테두리(전체공지 2026-08-20).
   다만 **색기운만 제 결을 따라간다**. 표시 방법은 하나고 색만 갈리는 것이라 규칙과
   어긋나지 않는다. */
.example-chip.selected {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 45%, transparent);
  background: var(--tone-soft, var(--teal-soft));
  color: var(--tone-ink, var(--teal-ink));
  font-weight: 600;
}

.text-field span,
.text-field > label,
.range-field span,
.meter-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  color: var(--ink);
  outline: none;
}

input,
select {
  min-height: 42px;
  padding: 0 12px;
}

textarea {
  min-height: 92px;
  resize: vertical;
  padding: 12px;
  line-height: 1.45;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.question-block {
  border-top: 1px solid var(--line-soft);
  margin-top: 22px;
  padding-top: 20px;
}

.wizard-status {
  display: grid;
  gap: 11px;
  margin-bottom: 18px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.wizard-status div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wizard-status span {
  color: var(--teal);
  font-size: 0.82rem;
  font-weight: 700;
}

.wizard-status strong {
  min-width: 0;
  font-size: 0.92rem;
}

.wizard-track {
  height: 7px;
  /* 막대는 알약이 맞다. 대표가 싫어하는 것은 **고르는 칸**이 알약인 것이다. */
  border-radius: 999px;
  overflow: hidden;
  background: var(--meter-track);
}

.wizard-track span {
  display: block;
  width: 14.285%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 62%, transparent), var(--teal));
  transition: width 180ms ease;
}

.wizard-steps {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  display: grid;
  /* 줄 높이를 칸 높이에 묶는다. 이것이 없으면 줄이 내용만큼 자라서 패널 밖으로 넘치고,
     패널이 overflow:hidden 이라 아래쪽이 그냥 잘린다 — .wizard-step 의 overflow:auto 는
     제 높이가 내용과 같아지므로 영영 안 걸린다.
     실측(1440x900, '끌리는 분야' 26개): 칩 바닥 892px vs 패널 바닥 880px, 여섯 개가 잘렸다. */
  grid-template-rows: minmax(0, 1fr);
}

.wizard-step {
  display: none;
  min-height: 0;
  overflow: auto;
  padding: 2px 2px 8px;
}

.wizard-step.active {
  display: block;
  animation: step-in 160ms ease;
}

.wizard-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/* 첫 화면에서 왼쪽 칸의 아래 절반(1440x900 에서 약 500px)이 흰 여백이었다.
   단계가 진행돼야 차는 구조라 첫인상이 '미완성' 으로 읽혔다. 아래 둘이 그 자리를 채운다. */
.wizard-intro {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--result-top-bg);
}

.wizard-intro-lead {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--ink);
}

.wizard-intro ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
  font-size: 0.92rem;
  color: var(--muted);
}

.wizard-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.wizard-index-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
}

/* 단계가 홀수라 마지막 한 칸이 반쪽으로 남아 빈 자리가 생겼다. 두 칸을 쓰게 한다. */
.wizard-index-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.wizard-index-item:hover {
  border-color: var(--line);
  color: var(--ink);
}

.wizard-index-no {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--line-strong, var(--muted));
}

.wizard-index-item.done {
  color: var(--ink);
}

.wizard-index-item.done .wizard-index-no {
  color: var(--teal);
}

/* 지금 서 있는 칸이다. 결과 탭·거르개 탭·칩과 **같은 표시**를 쓴다 - 옅은 강조색에
   강조색 45% 테두리(전체공지 2026-08-20). 예전에는 여기만 꽉 채워서, 한 화면 안에
   글자 붙은 고르개의 표시가 둘이었다. */
.wizard-index-item.here {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--teal-soft);
  color: var(--teal-ink);
}

.wizard-index-item.here .wizard-index-no {
  color: var(--teal-ink);
}

.wizard-index-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-weight: 600;
}

.step-button.primary {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--on-accent);
}

.step-button.secondary {
  background: var(--surface);
  color: var(--ink);
}

.step-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.question-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.question-head h2 {
  color: var(--ink);
  font-size: 1.12rem;
}

.step-badge {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--teal);
  color: var(--on-accent);
  font-size: 0.74rem;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(23, 33, 43, 0.16);
}

.chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.chip-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 고르는 칸. **알약이 아니라 둥근 네모다** - 대표 지시(2026-08-21) *"알약박스들
   네모박스(모서리 둥글게)로 전면 교체. 위아래 정렬되게 박스크기 일정하게"*.
   6단계 예시 상자에 먼저 넣었던 규칙을 나머지 단계에도 맞춘다. 높이를 44px 로 못 박아
   글자 수가 달라도 줄이 가지런하다 - 알약 시절에는 두 글자와 일곱 글자가 다른 높이였다. */
.chip {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-strong);
  color: var(--ink);
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
  line-height: 1.2;
  word-break: keep-all;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.chip:hover {
  transform: translateY(-1px);
}

.chip .dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--line);
}

/* 왼쪽에 굵은 막대(inset 4px)를 하나 더 그리던 것을 뺐다 - 옅은 칠 + 테두리로 이미
   표시가 됐는데 막대까지 있으면 한 칩에 표시가 둘이다(전체공지 2026-08-20). */
.chip.selected {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--teal-soft);
  color: var(--teal-ink);
  font-weight: 600;
}

.chip.selected .dot {
  background: var(--teal);
}

/* 장면 문답 (04·05·07). 대표 지시 2026-08-28 *"질문자체를 좀 흥미롭고 재밌게"*.
   칩은 '분석형·탐구형' 같은 딱지를 늘어놓고 자기가 뭔지 고르라는 화면이었다. 이제는
   장면 하나에 보기 넷을 준다 - 답하는 사람은 자기를 분류하지 않고, 분류는 우리가 뒤에서 한다.

   ⚠ 보기는 한 줄에 하나다. 칩처럼 두 칸으로 세우면 안 된다 - 보기 글이 한 문장이라
   두 칸에서는 줄이 접혀 높이가 제각각이 되고, 무엇과 무엇을 견주는지가 안 보인다. */
.quiz-stack {
  display: grid;
  gap: 12px;
}

.quiz-card {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 14px 14px 10px;
}

.quiz-card-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 11px;
}

.quiz-no {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.quiz-scene {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  word-break: keep-all;
}

.quiz-options {
  display: grid;
  gap: 7px;
}

/* .chip 과 같은 결이되 한 줄짜리라 높이를 못 박지 않는다 - 보기 글이 길면 두 줄이 된다. */
.quiz-option {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-strong);
  color: var(--ink);
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  text-align: left;
  line-height: 1.35;
  word-break: keep-all;
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.quiz-option .dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--line);
}

.quiz-option.selected {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--teal-soft);
  color: var(--teal-ink);
  font-weight: 600;
}

.quiz-option.selected .dot {
  background: var(--teal);
}

.quiz-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.quiz-pool-title {
  color: var(--muted);
  font-size: 0.74rem;
}

/* '이 질문은 안 와닿아요'. 매번 다른 문항이 나온다는 것을 이용자가 직접 겪는 자리라
   숨기지 않는다. 다만 답이 아니므로 글자 크기와 색으로 한 단 낮춘다. */
.quiz-reroll,
.quiz-switch {
  min-height: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.74rem;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quiz-reroll:hover,
.quiz-switch:hover {
  color: var(--teal-ink);
}

/* 탈출구. 재취업·복귀로 오시는 분들에게 장면 말투가 거슬릴 수 있어 종전 화면을 남겼다. */
.quiz-switch {
  margin-top: 10px;
  font-size: 0.78rem;
}

.slider-stack {
  display: grid;
  gap: 12px;
}

.range-field {
  gap: 12px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
}

.range-field span {
  width: 72px;
  flex: 0 0 auto;
}

.range-field input {
  min-height: 0;
  padding: 0;
  accent-color: var(--teal);
}

.range-field strong {
  width: 52px;
  flex: 0 0 auto;
  text-align: right;
  font-size: 0.88rem;
}

.result-top {
  /* 글 블록과 삽화의 정렬 기준이 달라 삽화 아래에 큰 여백이 남았다(1440 에서 130px).
     stretch 로 묶어 삽화가 글 높이를 그대로 따라가게 한다. */
  display: flex;
  align-items: stretch;
  min-height: 164px;
  justify-content: space-between;
  gap: 24px;
  padding: 26px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--result-top-bg);
  overflow: hidden;
}

.summary-copy {
  min-width: 0;
}

.summary-copy h2 {
  margin-bottom: 10px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.02em;
}

#summaryText {
  max-width: 54ch;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

.result-type-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.result-type-line span {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-xs);
  background: var(--teal);
  color: var(--on-accent);
  padding: 4px 7px;
  font-size: 0.7rem;
  font-weight: 700;
}

.result-type-line strong {
  color: var(--teal);
  font-size: 0.92rem;
}

/* 크림 카드 안에 흰 상자를 또 두면 글머리가 세 자리에서 시작한다(41 / 69 / 95px).
   상세 쪽에서 걷어낸 것과 같은 병이라 여기도 상자를 걷고 가로선 하나로 나눈다. */
.top-insight {
  max-width: 58ch;
  margin-top: 14px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
}

.top-insight strong {
  display: block;
  margin-bottom: 8px;
  color: var(--teal);
  font-size: 0.88rem;
}

.top-insight ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}

.top-insight li::marker {
  color: var(--teal);
}

/* 맞는 이유만 보이면 어떤 결과든 좋아 보인다. 짚어둘 점은 색으로도 구분한다. */
.top-insight-gap strong,
.top-insight-gap li::marker {
  color: var(--amber);
}

/* 아무것도 안 고른 사람에게 보이는 줄. 답이 하나라도 들어오면 통째로 사라진다.
   ⚠ 이 줄만 넣고 끝내면 안 된다 - 밑의 .is-pending 규칙이 "개인화된 척하는 자리"
   (1순위 이유·선명도·성향표·저장 단추·순위 표·추천 강도)를 같이 접는다.
   한쪽만 두면 "결과 아님" 이라고 적어 놓고 바로 밑에서 1순위를 말하게 된다. */
.result-pending-note {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--amber) 10%, var(--surface));
  color: var(--ink);
  line-height: 1.5;
}

.result-pending-note[hidden] {
  display: none;
}

.result-pending-note strong {
  font-size: 1.02rem;
}

.result-pending-note span {
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.92rem;
}

.result-pending-cta {
  min-height: 40px;
  margin-top: 2px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
}

.results-panel.is-pending .result-type-line,
.results-panel.is-pending .top-insight,
.results-panel.is-pending .meter-card,
.results-panel.is-pending .personality-strip,
.results-panel.is-pending .result-command-bar,
.results-panel.is-pending .rank-pill,
.results-panel.is-pending .fit-score {
  display: none;
}

/* 추천 강도를 접으면 남는 것이 링크뿐이라 space-between 이 그것을 왼쪽 끝으로 민다. */
.results-panel.is-pending .card-actions {
  justify-content: flex-end;
}

.summary-art {
  width: clamp(170px, 23vw, 300px);
  /* 높이를 따로 주지 않는다 - 가로 배치에서 stretch 로 글 높이를 따라가고,
     세로로 바뀌는 좁은 화면에서는 아래 max-height 가 그대로 먹는다.
     (min-height 를 100% 로 주면 max-height 를 이겨 폰에서 삽화가 759px 로 늘어난다.) */
  align-self: stretch;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  object-fit: cover;
  object-position: center;
  border: 0;
  box-shadow: none;
  filter: saturate(0.66) sepia(0.14);
}

/* 삽화 바탕이 거의 흰색이라 어두운 두 테마에서 그 칸만 등처럼 밝다. 한 겹 눌러 둔다. */
:root[data-theme="dark"] .summary-art,
:root[data-theme="midnight"] .summary-art {
  filter: saturate(0.6) sepia(0.14) brightness(0.84);
}

.meter-card {
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-strong);
}

.meter-card strong {
  display: block;
  margin-top: 4px;
  font-size: 1.4rem;
}

.meter-track {
  width: min(420px, 48%);
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--meter-track);
}

.meter-track span {
  display: block;
  width: 36%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 62%, transparent), var(--teal));
}

/* 나의 산 (결과 카드). 사진 한 장과 축 넷을 나란히 둔다.
   ⚠ 사진 밑 출처 줄을 지우지 마라 - CC BY·CC BY-SA 의 조건이라 표기를 빼면 무단 사용이 된다.
   폰에서는 세로로 접힌다. 가로 배치를 고치면 **반드시 좁은 폭에서 다시 재라** - 지난번
   삽화를 min-height: 100% 로 늘였다가 폰에서 759px 짜리 그림이 된 적이 있다. */
.persona-card {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.persona-photo {
  flex: 0 0 34%;
  max-width: 240px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.persona-photo img {
  width: 100%;
  height: 100%;
  min-height: 132px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--surface-strong);
}

.persona-photo figcaption {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.35;
  word-break: keep-all;
}

.persona-photo figcaption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.persona-body {
  flex: 1 1 auto;
  min-width: 0;
}

.persona-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 6px;
}

.persona-title strong {
  color: var(--ink);
  font-size: 1.32rem;
  letter-spacing: -0.01em;
}

.persona-title span {
  color: var(--teal-ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.persona-blurb {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  word-break: keep-all;
}

.persona-axes {
  display: grid;
  gap: 5px;
  margin: 0 0 9px;
  padding: 0;
  list-style: none;
}

.persona-axes li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.78rem;
}

.persona-axis-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
}

.persona-axis-pair {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--line);
}

.persona-axis-pair b {
  color: var(--muted);
  font-weight: 500;
  opacity: 0.55;
}

/* 고른 쪽만 또렷하게. 둘 다 진하면 어느 쪽으로 읽혔는지가 안 보인다. */
.persona-axis-pair b.on {
  color: var(--teal-ink);
  font-weight: 700;
  opacity: 1;
}

.persona-axis-pair i {
  font-style: normal;
  opacity: 0.6;
}

.persona-axes li[data-even="true"] .persona-axis-pair b.on {
  color: var(--muted);
  font-weight: 600;
}

.persona-axis-even {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.68rem;
  opacity: 0.85;
}

.persona-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
  word-break: keep-all;
}

@media (max-width: 720px) {
  .persona-card {
    flex-direction: column;
  }

  .persona-photo {
    flex: 0 0 auto;
    max-width: none;
  }

  /* 세로로 접히면 사진이 제 비율(4:3)대로 크게 서 버린다. 높이를 못 박아 눌러 둔다. */
  .persona-photo img {
    height: 168px;
    min-height: 0;
  }
}

.personality-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 34px;
}

.personality-strip span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  padding: 7px 10px;
  background: var(--teal-soft);
  color: var(--teal-ink);
  font-weight: 600;
  font-size: 0.82rem;
  border: 1px solid color-mix(in srgb, var(--teal) 24%, transparent);
}

/* 넷이 같은 크기·같은 자리로 붙어 있어서 무엇부터 누르라는 것인지 화면이 말을 안 했다.
   저장이 주된 행동이므로 그것만 키우고, 나머지 셋은 옆으로 물린다. */
.result-command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.result-command-rest {
  display: flex;
  gap: 6px;
}

.result-command {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
  font-weight: 600;
}

.result-command:hover {
  border-color: var(--hover-line);
}

.result-command.primary {
  min-height: 46px;
  padding: 0 22px;
  font-size: 1rem;
  border-color: var(--teal);
  background: var(--teal);
  color: var(--on-accent);
  box-shadow: 0 6px 16px rgba(20, 124, 116, 0.24);
}

.result-command-rest .result-command {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-weight: 600;
}

.result-command-rest .result-command:hover {
  border-color: var(--line);
  color: var(--ink);
}

.result-view-tabs {
  display: grid;
  /* 칸 수를 박아 두면 탭을 하나 더할 때마다 줄이 접힌다(문장 초안을 더하다 실제로 접혔다).
     개수를 세지 말고 있는 만큼 나눠 갖게 둔다. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-strong);
  padding: 5px;
  gap: 4px;
  box-shadow: inset 0 1px 3px rgba(23, 33, 43, 0.05);
}

.result-view-tab {
  min-height: 44px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--muted);
  padding: 0 10px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.result-view-tab:hover {
  border-color: var(--line);
  color: var(--ink);
}

/* 글자 탭·칩의 '고른 것' 은 한 벌이다 - 글자는 강조색, 테두리는 강조색 45%, 바탕은
   옅은 강조색(전체공지 2026-08-20 표). 아이콘만 늘어선 줄(테마 고르개)은 꽉 채우고
   글자가 있는 것은 옅게 칠한다 - 종류가 갈리므로 한 화면에 같이 있어도 된다.
   ⚠ 예전에는 여기만 강조색으로 꽉 채우고 미드나잇에서만 옅었다. 테마마다 다른 표시는
   표시가 없는 것과 같다. */
.result-view-tab.active {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--teal-soft);
  color: var(--teal-ink);
}

@supports not (border-color: color-mix(in srgb, red 45%, transparent)) {
  .result-view-tab.active,
  .tab.active,
  .scroll-style-option.active,
  .chip.selected,
  .example-chip.selected {
    border-color: var(--accent);
  }
}

.result-view-tab span {
  display: inline-grid;
  min-width: 20px;
  min-height: 20px;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--tag-bg);
  color: var(--tag-text);
  margin-left: 4px;
  font-size: 0.74rem;
}

.result-view-tab.active span {
  background: var(--accent);
  color: var(--accent-text);
}

.result-view {
  min-width: 0;
  padding-top: 4px;
}

.result-view[hidden] {
  display: none;
}

.result-view.active {
  animation: result-view-in 180ms ease;
}

.result-reveal .result-top {
  animation: result-reveal 520ms ease both;
}

@keyframes result-view-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes result-reveal {
  0% {
    opacity: 0.45;
    transform: scale(0.985);
  }

  60% {
    transform: scale(1.008);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin: 8px 0 14px;
  padding-left: 11px;
}

.section-heading .eyebrow {
  margin-bottom: 5px;
}

.section-heading h2 {
  font-size: 1.2rem;
}

.comparison-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.comparison-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}

.comparison-table th,
.comparison-table td {
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.comparison-table tr:last-child th,
.comparison-table tr:last-child td {
  border-bottom: 0;
}

.comparison-table th:last-child,
.comparison-table td:last-child {
  border-right: 0;
}

.comparison-table thead th {
  background: var(--surface-strong);
}

.comparison-table thead th:first-child,
.comparison-table tbody th {
  width: 132px;
  color: var(--muted);
  font-size: 0.8rem;
}

.comparison-table thead strong,
.comparison-table thead small {
  display: block;
}

.comparison-table thead strong {
  margin: 7px 0 3px;
  color: var(--ink);
  font-size: 0.96rem;
}

.comparison-table thead small {
  color: var(--muted);
  font-weight: 500;
}

.comparison-table td {
  color: var(--ink);
  font-size: 0.88rem;
}

.compare-rank {
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 700;
}

.table-link {
  color: var(--teal);
  font-weight: 700;
  text-underline-offset: 3px;
}

.skill-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-bottom: 24px;
}

.skill-path::before {
  content: "";
  position: absolute;
  top: 52px;
  right: 10%;
  left: 10%;
  height: 2px;
  background: var(--line);
}

.skill-node {
  position: relative;
  z-index: 1;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--line);
  /* 지금 칸(.active)만 티일이다. 나머지를 앰버로 두면 지금 칸보다 되레 크게 외친다 —
     색상이 아니라 세기로 가른다. */
  border-top: 4px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 14px;
}

.skill-node.active {
  border-top-color: var(--teal);
  box-shadow: 0 10px 26px rgba(20, 124, 116, 0.12);
}

.skill-node-index {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: var(--on-accent);
  font-size: 0.74rem;
  font-weight: 700;
}

.skill-node.active .skill-node-index {
  background: var(--teal);
  color: var(--on-accent);
}

.skill-node small {
  margin-top: 10px;
  color: var(--teal);
  font-weight: 700;
}

.skill-node strong {
  margin-top: 4px;
  line-height: 1.3;
}

.skill-node p {
  margin: 7px 0 12px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.skill-node-meta {
  margin-top: auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.roadmap-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.roadmap-heading > div {
  display: grid;
  gap: 4px;
}

.roadmap-heading span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.roadmap-heading strong {
  font-size: 1rem;
}

.roadmap-heading select {
  width: min(280px, 48%);
}

.roadmap-progress {
  height: 8px;
  margin: 14px 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--meter-track);
}

.roadmap-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
  transition: width 180ms ease;
}

.roadmap-list {
  border-top: 1px solid var(--line-soft);
}

.roadmap-item {
  min-height: 90px;
  display: grid;
  grid-template-columns: 24px 74px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 2px;
  cursor: pointer;
}

.roadmap-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.roadmap-check {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
}

.roadmap-item input:checked + .roadmap-check {
  border-color: var(--teal);
  background: var(--teal);
}

.roadmap-item input:checked + .roadmap-check::after {
  content: "✓";
  color: var(--on-accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.roadmap-item input:focus-visible + .roadmap-check {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.roadmap-phase {
  padding-top: 3px;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 700;
}

.roadmap-copy {
  display: grid;
  gap: 5px;
}

.roadmap-copy strong {
  font-size: 0.92rem;
}

.roadmap-copy small {
  color: var(--muted);
  line-height: 1.45;
}

.roadmap-item.complete .roadmap-copy {
  opacity: 0.58;
}

/* 문장 초안 -------------------------------------------------------------- */
/* 이 화면은 '그대로 복사해 내지 말라' 는 말을 색으로 한다. 채울 자리를 눈에 띄게 두는 것이
   기능의 절반이다 — 지우고 자기 말로 채워야 글이 된다. */
.statement-caveat {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-md);
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.statement-caveat strong {
  color: var(--ink);
}

.statement-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.statement-heading label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.statement-heading select {
  width: min(280px, 52%);
}

.statement-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.statement-card {
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.statement-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.statement-card-head > div:first-child {
  display: grid;
  gap: 3px;
}

.statement-card-head strong {
  font-size: 1rem;
}

.statement-card-head small {
  color: var(--muted);
  font-size: 0.78rem;
}

.statement-card-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.statement-blank-count {
  color: var(--amber-ink);
  background: var(--amber-soft);
  padding: 3px 9px;
  border-radius: var(--r-xs);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.statement-copy {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.statement-copy:hover {
  border-color: var(--hover-line);
  color: var(--teal);
}

.statement-body {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.statement-body p {
  margin: 0;
  line-height: 1.75;
}

/* 면접 칸은 Q·A 가 번갈아 나온다. 질문마다 한 칸 띄우고 굵게 해서 묶음을 보이게 한다. */
.statement-q {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
  font-weight: 600;
}

.statement-body > .statement-q:first-child {
  margin-top: 0 !important;
  padding-top: 0;
  border-top: 0;
}

/* 대괄호가 본문에 묻히면 그대로 복사해서 내게 된다. */
.statement-blank {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-weight: 600;
}

@media (max-width: 640px) {
  .statement-heading {
    display: grid;
    gap: 8px;
  }

  .statement-heading select {
    width: 100%;
  }

  .statement-card-head {
    display: grid;
    gap: 10px;
  }
}

.saved-result-list {
  display: grid;
  border-top: 1px solid var(--line-soft);
}

.saved-result-row {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-soft);
  padding: 13px 2px;
}

.saved-result-main {
  min-width: 0;
}

.saved-result-main span,
.saved-result-main strong,
.saved-result-main p {
  display: block;
}

.saved-result-main span {
  color: var(--muted);
  font-size: 0.74rem;
}

.saved-result-main strong {
  margin: 4px 0;
}

.saved-result-main p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.saved-result-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.saved-result-actions button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--ink);
  padding: 0 9px;
  font-weight: 600;
  font-size: 0.8rem;
}

.saved-result-actions button:hover {
  border-color: var(--hover-line);
}

.empty-state {
  min-height: 150px;
  display: grid;
  place-content: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}

.empty-state strong {
  color: var(--ink);
}

.toolbar {
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.tabs {
  display: inline-flex;
  gap: 4px;
  min-height: 44px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-strong);
}

.tab,
.copy-button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
  font-weight: 600;
}

.tab.active {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--teal-soft);
  color: var(--teal-ink);
}

.copy-button {
  min-height: 44px;
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.recommendation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cert-card {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 16px;
  box-shadow: 0 6px 18px rgba(23, 33, 43, 0.06);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.cert-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(23, 33, 43, 0.11);
}

/* `data-tone` 은 순위와 무관하게 index 로 도는 값이라(taxonomy.js 의 `tones`) 카드마다
   왼쪽 선 색이 뜻 없이 갈렸다. 여섯 장이 서면 화면에 주인공 색이 사라진다. 순위는
   `.rank-pill` 이 이미 말하므로 선은 티일 하나로 둔다. 속성은 마크업에 남겨 뒀다 —
   나중에 뜻이 생기면 여기서 다시 쓴다. 그때만 쓰이던 `--blue`·`--green` 은 네 테마에서
   다 지웠다(다른 데서 안 쓴다). */

.card-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.rank-pill {
  min-width: 52px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--teal);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 5px 12px rgba(23, 33, 43, 0.16);
}

.cert-card p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.52;
}

.card-meta {
  gap: 7px;
  flex-wrap: wrap;
  /* 위 자격 정보와 붙어 있으면 한 덩어리로 읽힌다. 한 줄 띄운다. */
  margin-top: 12px;
}

.mini-tag {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-xs);
  padding: 5px 8px;
  background: var(--tag-bg);
  color: var(--tag-text);
  font-size: 0.78rem;
  font-weight: 600;
}

.reason-box {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.reason-box strong {
  font-size: 0.88rem;
}

.gap-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 17px;
  color: var(--muted);
  line-height: 1.45;
}

.gap-list li::marker {
  color: var(--amber);
}

.card-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.card-action-links {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.official-link,
.affiliate-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  padding: 0 11px;
  background: var(--teal);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.affiliate-link {
  background: var(--coral);
}

.affiliate-disclosure {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.fit-score {
  color: var(--teal);
  font-size: 0.92rem;
  font-weight: 700;
}

.source-box {
  margin-top: auto;
  border: 1px solid var(--line-soft);
  border-left: 5px solid var(--coral);
  border-radius: var(--r-sm);
  background: var(--coral-soft);
  padding: 14px 16px;
}

.source-box strong {
  display: block;
  margin-bottom: 4px;
}

.source-box p {
  margin-bottom: 10px;
  color: var(--coral-ink);
  line-height: 1.45;
}

.source-links {
  gap: 8px;
  flex-wrap: wrap;
}

.source-links a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-xs);
  background: var(--source-link-bg);
  padding: 5px 9px;
  text-decoration: none;
  font-weight: 600;
  color: var(--source-link-text);
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .intake-panel,
  .results-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .intake-panel {
    position: static;
    height: auto;
    /* 넓은 폭에서 씌운 화면 높이 뚜껑을 여기서 벗긴다. 한 칸으로 접히면 칸이 페이지를
       따라 흘러야 하는데, 뚜껑이 남으면 안내 카드 아래가 그대로 잘린다(390 에서 실제로 잘렸다). */
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .results-panel {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 10px;
    gap: 10px;
  }

  /* 세로로 세우면 로그인 위젯이 꺼져 있을 때(지금이 그렇다) 되돌리기 단추 하나가
     336px 짜리 빈 줄을 통째로 차지한다. 줄바꿈만 허용하고 한 줄로 세운다. */
  .brand-row {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .brand-identity {
    flex: 1 1 190px;
  }

  .brand-actions {
    justify-content: flex-end;
  }

  /* 좁은 폭에서도 상단 바는 **한 줄**이다. 예전에는 여기서 메뉴를 아랫줄로 내려
     (order + flex: 1 0 100%) 두 줄이었는데, 폰에서 97px, 테마를 펼치면 139px 까지
     늘어 화면의 6분의 1을 메뉴가 먹었다(2026-08-20 390px 실측). 지금은 51px 이다.
     메뉴는 오른쪽으로 붙고, 테마를 펼치는 동안만 메뉴가 접혀 자리를 내준다.
     ⚠ 560px 아래는 한 단 더 줄인다(파일 맨 끝 블록) - 거기서 '적성 검사' 한 칸을
     접는다. 왼쪽 이름표가 이미 같은 데로 가기 때문이다. */
  .site-nav {
    padding: 8px 12px;
    gap: 4px 10px;
  }

  .site-nav-home {
    font-size: 0.86rem;
  }

  .site-nav a {
    min-height: 32px;
    padding: 0 9px;
    font-size: 0.82rem;
  }

  .theme-switch {
    flex: 0 0 auto;
  }

  .scroll-top-dock {
    right: 12px;
    bottom: 12px;
  }

  .scroll-top-button {
    width: 54px;
    height: 54px;
  }

  .intake-panel,
  .results-panel {
    padding: 16px;
  }

  .wizard-steps {
    overflow: visible;
  }

  .wizard-step {
    overflow: visible;
  }

  .field-grid.compact,
  .recommendation-list {
    grid-template-columns: 1fr;
  }

  /* ⚠ 고르는 칸은 폰에서도 **두 칸**이다. 예전에는 여기서 한 칸으로 폈는데,
     '끌리는 분야' 26개가 26줄(약 1,700px)이 되어 한 단계를 넘기는 데만 화면 두 장을
     굴려야 했다(390px 실측). 두 칸이면 13줄이다. 이름이 가장 긴 '유통/비즈니스' 도
     166px 칸에 한 줄로 든다 - 재고 정한 값이니 칸을 좁히려면 다시 재라. */
  .chip-grid,
  .chip-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .chip {
    padding: 8px 10px;
    font-size: 0.93rem;
  }

  .result-command-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .result-command {
    min-width: 0;
    padding: 0 7px;
    font-size: 0.8rem;
  }

  .result-view-tabs {
    /* 좁아지면 한 줄에 다 넣을 수 없다("TOP 3 비교" 가 잘린다). 칸 수를 박지 말고
       들어가는 만큼만 넣게 둔다 — 폭이 줄면 줄이 늘고, 탭이 늘어도 안 깨진다. */
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    /* ⚠ 줄이 늘면 알약(999px)이 통째로 부푼다 — 폰에서 탭 다섯이 세 줄로 접히자 껍데기가
       거대한 마름모꼴이 됐다(2026-08-20 390px 실측: 높이 152px). 알약은 한 줄일 때만
       알약이다. 접히는 폭에서는 둥근 네모로 내려앉는다. */
    border-radius: var(--r-md);
  }

  .result-view-tab {
    border-radius: var(--r-xs);
  }

  /* 홀수면 마지막 하나가 반 칸만 차지해 줄이 어긋나 보인다. 통째로 늘려 줄을 맞춘다.
     짝수일 때는 안 걸린다 - 개수를 박지 않았으므로 탭이 늘어도 따라간다. */
  .result-view-tab:nth-child(odd):nth-last-child(1) {
    grid-column: 1 / -1;
  }

  .skill-path {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .skill-path::before {
    top: 24px;
    bottom: 24px;
    left: 31px;
    width: 2px;
    height: auto;
  }

  .skill-node {
    min-height: 0;
    padding-left: 54px;
  }

  .skill-node-index {
    position: absolute;
    top: 13px;
    left: 13px;
  }

  .skill-node small {
    margin-top: 0;
  }

  .roadmap-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .roadmap-heading select {
    width: 100%;
  }

  .roadmap-item {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .roadmap-phase {
    grid-column: 2;
    grid-row: 1;
  }

  .roadmap-copy {
    grid-column: 2;
  }

  .saved-result-row {
    align-items: stretch;
    flex-direction: column;
  }

  .saved-result-actions button {
    flex: 1 1 0;
  }

  .result-top {
    align-items: stretch;
    flex-direction: column;
  }

  .summary-art {
    width: 100%;
    max-height: 210px;
  }

  .meter-card {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .meter-track {
    width: 100%;
  }

  /* 결과 탭과 같은 자리다 - 두 줄로 접히는데 껍데기가 알약이라 마름모꼴이 된다.
     알약은 한 줄일 때만 알약이다. */
  .tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: var(--r-md);
  }

  .tab {
    border-radius: var(--r-xs);
  }

  .tab:nth-child(odd):nth-last-child(1) {
    grid-column: 1 / -1;
  }

  .copy-button {
    width: 100%;
  }

  .card-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .card-action-links {
    width: 100%;
    justify-content: flex-start;
  }

  /* ── 폰에서 일곱 칸을 도는 손맛 ────────────────────────────────────────
     데탑은 왼쪽에 폼, 오른쪽에 결과가 나란히 서서 '다음' 이 늘 눈에 있다. 폰은 한 줄로
     쌓이는 바람에 그 단추가 카드 맨 밑으로 내려갔고, **한 칸 넘길 때마다 스크롤을
     해야 했다.** 일곱 번이면 일곱 번이다. 아래 둘이 그 왕복을 없앤다. */

  /* ① 넘기는 줄을 패널 바닥에 붙인다. fixed 가 아니라 sticky 인 것이 요점이다 -
     마법사 패널 안에서만 붙으므로 결과 쪽으로 내려가면 **저절로 사라진다.**
     떠 있는 동안 뒤가 비치면 안 되니 바탕을 깔고, 패널 안쪽 여백만큼 좌우로 되받는다. */
  .wizard-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0 -16px -16px; /* 폰에서 패널 안쪽 여백이 16px 이다(위 1120px 블록). */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--panel-bg);
    border-top: 1px solid var(--line);
  }

  /* ② 단계 목록 일곱 칸이 두 칸씩 네 줄로 깔려 세로를 크게 먹었다. 한 줄로 눕혀
     옆으로 밀게 한다 - 지금 어디인지는 바로 위 진행 줄이 이미 말하고 있다.
     ⚠ 없애지는 마라. 모든 칸이 선택 사항이라 건너뛰는 길이 여기뿐이다. */
  .wizard-index {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 5px;
    padding-top: 12px;
    margin-top: 12px;
  }

  .wizard-index::-webkit-scrollbar {
    display: none;
  }

  .wizard-index-item {
    flex: none;
    white-space: nowrap;
  }

  /* 한 줄로 눕히면 '마지막 칸이 반쪽으로 남는' 격자 시절 예외는 쓸모가 없다. */
  .wizard-index-item:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  h1 {
    font-size: 1.75rem;
  }

  .summary-copy h2 {
    font-size: 1.45rem;
  }

  .range-field {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .range-field span,
  .range-field strong {
    width: auto;
    text-align: left;
  }

  .result-command-bar {
    grid-template-columns: 1fr;
  }

  .result-command {
    min-height: 40px;
  }

  .scroll-style-menu {
    width: min(216px, calc(100vw - 24px));
  }
}

/* 자격 구분·공신력 배지와 기본 정보 */
.cert-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 10px;
}

.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--tag-text);
}

/* 자격 구분은 이 쪽에서 가장 먼저 읽혀야 하는 한 마디다(국가기술이냐 민간이냐가
   값어치를 가른다). 옅은 칠로는 옆의 공신력 배지와 무게가 같아 보여서 채운 색으로 올렸다. */
.cert-badge.kind {
  border-color: transparent;
  color: var(--on-accent);
  background: var(--teal);
}

.cert-badge.credibility[data-tone="good"] {
  background: var(--tag-bg);
  color: var(--tag-text);
}

.cert-badge.credibility[data-tone="mid"] {
  background: var(--amber-soft);
  color: var(--amber-ink);
  border-color: rgba(217, 154, 28, 0.4);
}

.cert-badge.credibility[data-tone="warn"] {
  background: var(--coral-soft);
  color: var(--coral-ink);
  border-color: rgba(233, 100, 69, 0.45);
}

.cert-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px 14px;
  margin: 10px 0 0;
  /* 안쪽 여백은 .detail-block 과 같은 값이다 - 다르면 글의 왼쪽 끝이 어긋난다. */
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface-strong);
}

.cert-facts div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cert-facts dt {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.cert-facts dd {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink);
}

/* 상세 쪽 요약 셋. 예전에는 다섯이 회색 상자 하나에 뭉쳐 **흐릿하게 떠 있었다** -
   무엇이 중요한지 눈에 안 잡혔다. 카드 셋으로 갈라 세우고 위에 색 띠를 얹는다.
   셋인 이유는 빌드 쪽 주석에 있다(자격 구분·시행처는 화면 위에 이미 있어서 뺐다).
   ⚠ 셋이라 데탑도 폰도 3칸이다. 칸을 더하면 폰에서 깨진다 - 더하기 전에 렌더로 재라. */
.detail-facts .cert-facts {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.detail-facts .cert-facts > div {
  gap: 6px;
  padding: 13px 15px 15px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: var(--r-sm);
  background: var(--panel-bg);
}

.detail-facts .cert-facts > div:nth-child(2) {
  border-top-color: var(--coral);
}

.detail-facts .cert-facts > div:nth-child(3) {
  border-top-color: var(--amber);
}

.detail-facts .cert-facts dt {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

/* 값이 이름표보다 커야 한 눈에 읽힌다. 예전엔 0.82rem 으로 이름표(0.74)와 거의 같아
   둘이 한 덩어리 회색 글로 보였다. */
.detail-facts .cert-facts dd {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  word-break: keep-all;
}

/* 상세 쪽에서는 .detail-block 과 나란히 서는 상자라 위 모양이 맞다.
   결과 카드 안에서는 카드 안의 카드가 되어 글머리가 48 / 65px 로 갈리므로 평평하게 편다. */
.cert-card .cert-facts {
  margin: 12px 0 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
}

/* 칸이 홀수로 끝나면 마지막 항목만 반쪽 폭에 갇혀 값이 두 줄로 접힌다. 한 줄을 다 준다. */
.cert-card .cert-facts div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.private-notice {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--coral);
  background: var(--coral-soft);
  color: var(--coral-ink);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.82rem;
}

.cert-title-link {
  color: inherit;
  text-decoration: none;
}

.cert-title-link:hover,
.cert-title-link:focus-visible {
  text-decoration: underline;
}

/* 바닥글 */
.site-footer {
  max-width: 1180px;
  margin: 28px auto 40px;
  padding: 18px 22px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
}

.footer-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--teal);
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  text-decoration: underline;
}

/* 자격증 상세·개인정보처리방침 페이지 */
.detail-body {
  background: var(--bg);
  color: var(--ink);
  /* .detail-shell 과 상단 바가 같이 읽는 값이다. */
  --shell-w: 760px;
  --shell-pad: 22px;
}

/* 목록 쪽만 폭을 연다. 상세는 **글을 읽는** 쪽이라 760px 이 맞다(한 줄이 길면 눈이
   다음 줄 첫 글자를 못 찾는다). 목록은 **카드를 늘어놓는** 쪽이라 같은 폭을 쓰면
   데탑 1440px 에서 오른쪽 절반이 내내 빈다. 폭만 다르고 나머지는 다 같다. */
.list-body {
  --shell-w: 1200px;
}

/* ── 전역 탐색 메뉴 ────────────────────────────────────────────────────────
   모든 쪽 맨 위에 선다. 첫 화면에서 상세로 가는 길이 검색창뿐이면 크롤러도 사람도
   79쪽에 닿지 못한다. 오른쪽 끝 칸은 테마 단추 자리다(#themeSlot).
   상단 바는 화면에 붙여 둔다(대표 지시 2026-08-20). 상세 글이 길어 아래로 내려가면
   메뉴도 테마 버튼도 화면 밖으로 나가 버려서, 돌아오려면 끝까지 되올려야 했다. */
.site-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  /* 반투명 + 흐림. 오피스·관제탑·콕핏·떠들 상단바와 같은 값이다(바탕 32% + blur).
     한 번 뺐던 적이 있다 - 그때는 흐림 없이 반투명만 줘서 뒤 글자가 그대로 비쳤다.
     흐림이 있어야 뒤가 뭉개져 글이 읽힌다. 흐림을 모르는 판에는 아래 불투명 대비책. */
  background: color-mix(in srgb, var(--surface) 32%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .site-bar {
    background: var(--bg);
  }
}

/* 안쪽 항목은 **그 쪽의 본문과 같은 폭**으로 묶는다. 데탑에서 제목·메뉴·테마 단추가
   본문보다 바깥으로 나가 어긋나 보인다는 대표 지적(2026-08-20)이 여기서 풀린다.
   쪽마다 본문 폭이 다르다(첫 화면 1480 · 상세와 소개·문의·개인정보 760). 그래서 폭을
   숫자로 적지 않고 --shell-w 를 읽는다 - 본문 폭을 고치면 상단 바가 따라온다. */
.site-nav {
  max-width: var(--shell-w, 1180px);
  margin: 0 auto;
  padding: 10px var(--shell-pad, 22px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.site-nav-theme {
  display: flex;
  align-items: center;
}

.site-nav-home {
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 0.86rem;
  text-decoration: none;
}

.site-nav ul a:hover,
.site-nav ul a:focus-visible {
  background: var(--surface-strong);
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  background: var(--teal-soft);
  color: var(--teal-ink);
  font-weight: 600;
}

/* ── 자격증 목록 ───────────────────────────────────────────────────────────
   2026-08-21 에 통째로 다시 짰다. 그 전에는 79개가 **세로 한 줄로 12,000px** 이었다
   (데탑 실측). 갈래 단추는 그 자리로 뛰기만 할 뿐 아래로 나머지가 그대로 깔려 있어서,
   찾는 자격 하나에 닿으려면 12미터를 훑어야 했다. 데탑 1440px 에서도 본문이 760px 라
   오른쪽 절반은 내내 비어 있었다.
   셋을 고쳤다 - ① 찾는 길(검색·갈래 거르개) ② 카드 격자 ③ 폭을 연다. */

/* 눈에는 안 보이고 화면 읽개에는 읽히는 글. 검색창 이름표가 이 꼴로 붙는다 -
   자리를 아끼려고 이름표를 아예 빼면 읽개를 쓰는 사람에게는 정체불명의 칸이 된다. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 거르개 줄은 화면에 붙는다. 아래로 내려가다 생각이 바뀌어도 되올릴 필요가 없다.
   붙는 자리는 상단 바 높이 하나에서만 온다(--topbar-h). 숫자를 다시 적지 마라. */
.list-filter {
  position: sticky;
  top: var(--topbar-h);
  z-index: 4;
  /* 좌우로 껍데기 여백만큼 넓혀 되받는다. 안 그러면 붙어 있는 동안 좌우 22px 틈으로
     아래를 지나가는 카드가 비친다 - 바탕색이 같아도 테두리가 스쳐 지나가 어지럽다. */
  margin: 4px calc(var(--shell-pad, 22px) * -1) 26px;
  padding: 14px var(--shell-pad, 22px) 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.list-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-bg);
}

.list-search:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.list-search > svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.list-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.97rem;
}

.list-search input:focus {
  outline: none;
}

/* 브라우저가 붙이는 기본 x 는 판마다 생김새가 달라 우리 것 하나로 통일한다. */
.list-search input::-webkit-search-cancel-button {
  display: none;
}

/* 30x30 정사각형에 999px 는 알약이 아니라 **원**이다. 아이콘 단추라 원이 맞다. */
.list-search-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  cursor: pointer;
}

.list-search-clear svg {
  width: 15px;
  height: 15px;
}

.list-toc ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
}

/* 갈래 단추. 켜진 것은 채운 색이다 - 옅은 칠로 두면 안 켜진 것과 무게가 같아 보인다. */
.kind-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--panel-bg);
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kind-chip span {
  color: var(--teal);
  font-weight: 700;
}

.kind-chip:hover {
  border-color: var(--hover-line);
  color: var(--ink);
}

.kind-chip.is-on {
  border-color: transparent;
  background: var(--teal);
  color: var(--on-accent);
}

.kind-chip.is-on span {
  color: var(--on-accent);
  opacity: 0.75;
}

/* 몇 개가 걸렸는지 말해 주지 않으면 화면이 줄어든 이유를 사람이 짐작해야 한다. */
.list-tally {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.kind-group {
  margin: 0 0 34px;
}

.kind-head h2 {
  margin: 0;
  font-size: 1.24rem;
  letter-spacing: -0.015em;
}

.kind-head p {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
  word-break: keep-all;
  text-wrap: pretty;
}

.list-count {
  margin-left: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal);
}

/* 카드 격자. 칸 폭을 숫자로 못 박지 않고 auto-fill 로 두면 폭이 바뀌는 대로 열 수가
   따라온다 - 데탑 3열 · 태블릿 2열 · 폰 1열이 규칙 한 줄에서 나온다. */
.cert-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
}

.cert-tile[hidden] {
  display: none;
}

/* 카드 통째로가 링크다. 예전에는 이름 네 글자만 눌렸는데 폰에서 그 폭은 손가락에 안 맞는다.
   높이를 맞춰 두는 것(height:100%)은 요약 길이가 제각각이라 카드 밑동이 들쭉날쭉해서다. */
.cert-tile > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 17px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cert-tile > a:hover,
.cert-tile > a:focus-visible {
  border-color: var(--teal);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.cert-tile-title {
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.cert-tile-provider {
  margin-top: 3px;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--teal);
}

.cert-tile-summary {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  word-break: keep-all;
  text-wrap: pretty;
}

/* 준비 기간과 응시자격은 카드 밑동에 붙는다 - 높이가 달라도 이 줄만은 같은 높이에 선다. */
.cert-tile-meta {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.77rem;
  color: var(--muted);
}

/* 가운뎃점 대신 얇은 막대다. 텍스트 기호를 쓰지 않는다(대표 취향). */
.cert-tile-meta i {
  display: inline-block;
  width: 1px;
  height: 9px;
  margin: 0 8px;
  vertical-align: -1px;
  background: var(--line);
}

.list-empty {
  margin: 30px 0;
  padding: 26px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--muted);
  word-break: keep-all;
}

/* 폰에서는 거르개 줄이 화면을 얼마나 먹는지가 그대로 손해다. 갈래 단추가 두 줄로
   늘면 검색창까지 합쳐 155px - 844px 화면의 18% 다. 한 줄로 눕히고 옆으로 밀게 한다.
   ⚠ 끝을 흐리게 덮지 마라. 마지막 단추가 잘려 보여야 '옆에 더 있다' 를 알아챈다. */
@media (max-width: 640px) {
  .list-filter {
    margin-bottom: 20px;
    padding: 11px var(--shell-pad, 22px) 9px;
  }

  .list-toc {
    /* 넓힌 만큼 되밀어 단추 줄이 화면 끝까지 흐르게 한다. */
    margin: 0 calc(var(--shell-pad, 22px) * -1);
  }

  .list-toc ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 var(--shell-pad, 22px);
    margin-top: 10px;
  }

  .list-toc ul::-webkit-scrollbar {
    display: none;
  }

  .kind-chip {
    white-space: nowrap;
  }

  .list-search input {
    height: 42px;
    font-size: 1rem; /* 16px 아래로 내리면 아이폰이 화면을 확대한다. */
  }

  .list-tally {
    margin-top: 8px;
    font-size: 0.76rem;
  }

  .kind-head p {
    font-size: 0.88rem;
  }
}

/* 폭은 --shell-w 하나에서 온다. 숫자로 박아 두면 목록 쪽(list-body)에서 못 넓힌다 -
   상단 바도 같은 값을 읽으므로 여기만 고치고 저기를 안 고치면 어긋난다. */
.detail-shell {
  max-width: var(--shell-w, 760px);
  margin: 0 auto;
  padding: 32px 22px 12px;
}

.detail-breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 18px;
}

.detail-breadcrumb a {
  color: var(--teal);
  text-decoration: none;
}

/* ── 상세 쪽 첫 화면(제목 자리) ─────────────────────────────────────────────
   2026-08-21 에 다시 짰다. 그 전에는 h1 하나만 크고 나머지가 전부 회색 14-16px 이라
   **눈이 처음 닿을 자리가 없었다** - 어떤 색을 부어도 태그 하나에만 묻고 끝났다
   (팔레트 세 벌을 렌더해 비교한 결과다. 색이 아니라 자리가 없던 것이다).
   그래서 셋을 세웠다 - 시행처를 알약으로 올리고, 이름을 크게 하고, 한 줄 요약을 키웠다. */
.detail-head .eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  padding: 5px 12px;
  border-radius: var(--r-xs);
  background: var(--teal-soft);
  color: var(--teal-ink);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.detail-head h1 {
  margin: 0 0 12px;
  font-size: 2.7rem;
  line-height: 1.14;
  letter-spacing: -0.022em;
}

/* 한 줄 요약은 '이 자격이 무엇인가' 의 답이라 본문보다 커야 한다. 흐린 회색으로 두면
   제목 밑의 주석처럼 읽혀 아무도 안 본다 - 글자색은 본문색을 옅게 쓴다. */
.detail-summary {
  margin: 16px 0 0;
  max-width: 34em;
  color: var(--ink);
  opacity: 0.8;
  font-size: 1.14rem;
  line-height: 1.68;
  word-break: keep-all;
  text-wrap: pretty;
}

.detail-facts {
  margin: 30px 0 22px;
}

.detail-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* 대목 상자. 예전엔 넷이 넘게 **똑같은 얼굴로** 줄줄이 서서 어디가 어딘지 안 보였다.
   왼쪽에 굵은 색 막대를 대고 셋(teal·coral·amber)을 돌려 쓴다 - 색이 뜻을 나르는 것은
   아니고 **자리를 세는 눈금**이다. 스크롤하다 보면 "아까 그 초록 대목" 으로 기억된다.
   테두리는 걷었다. 막대 하나로 이미 갈리는데 테두리까지 두르면 상자가 다시 무거워진다. */
.detail-block {
  margin: 22px 0;
  padding: 24px 28px 26px;
  border: 0;
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--panel-bg);
  box-shadow: var(--shadow);
}

/* 차례는 빌드가 매긴다(paintBlocks). CSS 의 :nth-of-type 으로 세면 요약·시험일정도
   같은 <section> 이라 같이 세어져 **첫 대목이 빨강으로 시작한다** - 실제로 그랬다. */
.detail-block[data-tone="coral"] {
  border-left-color: var(--coral);
}

.detail-block[data-tone="amber"] {
  border-left-color: var(--amber);
}

/* 대목 제목은 본문과 크기가 거의 같아서 제목으로 안 읽혔다. 키우고 밑줄을 그어
   '여기서 새 이야기가 시작된다' 를 눈에 보이게 한다. */
.detail-block h2 {
  margin: 0 0 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 1.34rem;
  letter-spacing: -0.015em;
  word-break: keep-all;
}

/* 한 줄이 너무 길면 눈이 다음 줄 첫 글자를 못 찾는다. 40em 에서 끊는다. */
.detail-block p {
  margin: 0;
  max-width: 40em;
  font-size: 1.01rem;
  line-height: 1.82;
  word-break: keep-all;
  text-wrap: pretty;
}

.detail-block p + p {
  margin-top: 10px;
}

/* 자세히 보기. 상세 쪽 글을 다 펼쳐 두면 처음 온 사람이 눌린다는 지적(2026-08-20)에
   따라 첫 대목만 남기고 접었다. <details> 를 쓰는 것은 자바스크립트 없이 열리고,
   접힌 글도 HTML 에 그대로 남아 검색·심사가 읽을 수 있기 때문이다. */
.detail-more {
  margin: 26px 0;
}

/* 다른 상자와 똑같이 생겨서 못 찾겠다는 지적을 받았다(2026-08-20). 그래서 셋을 다르게 했다 -
   왼쪽에 굵은 강조선, 바탕에 옅은 강조색, 오른쪽에 열림 방향을 알리는 갈매기표.
   그리고 펼친 뒤 아래로 내려가도 이 줄이 상단 바 밑에 붙어 있어 접기가 한 번에 된다. */
/* 붙이는 것은 2026-08-20 에 한 번 되돌렸었다 - 그때는 상단 바가 폰 폭에서 두 줄로 늘어
   이 줄이 그 아래로 못 내려가 겹쳤다. 그 뒤 바를 어느 폭에서나 한 줄로 다시 짰고
   (파일 맨 끝 블록), --topbar-h 를 실제로 잰 값으로 맞춰서 이제 붙일 수 있다.
   ⚠ 붙는 자리는 --topbar-h 하나로만 정한다. 여기에 숫자를 직접 적지 마라. */
.detail-more > summary {
  position: sticky;
  top: var(--topbar-h);
  /* 상단 바(30)보다는 낮고 본문보다는 높다. 아래로 지나가는 글이 이 줄을 덮으면 안 된다. */
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  padding: 15px 16px;
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-bg));
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* color-mix 를 모르는 판에서는 그냥 패널 바탕이다 - 강조선만으로도 구분은 된다. */
@supports not (background: color-mix(in srgb, red 8%, blue)) {
  .detail-more > summary {
    background: var(--panel-bg);
  }
}

.detail-more-label {
  grid-column: 1;
}

.detail-more-hint {
  grid-column: 1;
}

/* 갈매기표는 두 줄을 세로로 다 차지하고 열리면 뒤집힌다. */
.detail-more > summary::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}

.detail-more[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* 사파리·크롬이 붙이는 기본 삼각형을 걷어 낸다. 대표 취향이 텍스트 기호 없는 쪽이다. */
.detail-more > summary::-webkit-details-marker {
  display: none;
}

.detail-more > summary:hover,
.detail-more > summary:focus-visible {
  border-color: var(--accent);
}

.detail-more-label {
  font-weight: 700;
  font-size: 1.02rem;
}

/* 열렸을 때는 "자세히 보기" 가 "접기" 로 읽혀야 한다. 두 글자를 다 넣어 두고
   상태에 따라 하나만 보인다 - CSS 의 content 로는 글자를 갈아 끼울 수 없다. */
.detail-more[open] > summary .detail-more-closed,
.detail-more:not([open]) > summary .detail-more-open {
  display: none;
}

.detail-more-hint {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
  word-break: keep-all;
  text-wrap: pretty;
}

/* 접힌 안쪽의 첫 상자는 여백이 두 번 겹치지 않게 붙인다. */
.detail-more-body > .detail-block:first-child {
  margin-top: 18px;
}

/* 시험 일정. 회차 하나가 카드 하나고, 그 안이 항목/날짜 두 줄짜리 격자다.
   표(table)로 짜지 않은 것은 폰에서 가로로 새기 때문이다 - 회차마다 항목 수가
   달라(필기만 남은 회차가 흔하다) 빈 칸이 생기는 것도 표에 안 맞았다. */
.exam-rounds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/* 회차를 카드로 두면 '카드 안의 카드' 가 되어 글의 왼쪽 끝이 셋으로 갈린다.
   테두리 대신 가는 가로선 하나로 가른다. */
.exam-round {
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: transparent;
}

.exam-round:first-child {
  padding-top: 0;
  border-top: 0;
}

.exam-round-name {
  margin: 0 0 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--teal);
}

.exam-round-dates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px 14px;
  margin: 0;
}

.exam-round-dates div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.exam-round-dates dt {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.exam-round-dates dd {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.detail-schedule .detail-note {
  margin-top: 16px;
}

.detail-schedule .detail-note a {
  color: var(--teal);
}

.detail-related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.detail-related li {
  line-height: 1.6;
}

.detail-related a {
  color: var(--teal);
  font-weight: 500;
  text-decoration: none;
}

.detail-related a:hover,
.detail-related a:focus-visible {
  text-decoration: underline;
}

.detail-related small {
  color: var(--muted);
  margin-left: 6px;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 8px;
}

.detail-cta,
.detail-official {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
}

.detail-cta {
  background: var(--teal);
  color: var(--on-accent);
}

.detail-official {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
}

@media (max-width: 640px) {
  /* 폰에서도 이름은 이 쪽의 주인공이다. 예전 1.45rem 은 본문(1rem)과 차이가 작아
     제목으로 안 읽혔다 - 데탑 2.7 에서 한 단만 내린다. */
  .detail-head h1 {
    font-size: 1.92rem;
  }

  .detail-head .eyebrow {
    font-size: 0.75rem;
  }

  .detail-summary {
    font-size: 1.04rem;
  }

  /* 대목 상자의 좌우 여백이 데탑 값(28px)이면 390px 화면에서 글 폭이 그만큼 깎인다. */
  .detail-block {
    padding: 20px 17px 22px;
  }

  .detail-block h2 {
    font-size: 1.18rem;
  }

  .detail-facts .cert-facts {
    gap: 7px;
  }

  .detail-facts .cert-facts > div {
    padding: 11px 11px 13px;
  }

  .detail-facts .cert-facts dd {
    font-size: 0.94rem;
  }

  /* 글자 수가 달라 단추 폭이 제각각이었다. 폰에서는 둘 다 한 줄로 채운다. */
  .detail-actions {
    flex-direction: column;
  }

  .detail-cta,
  .detail-official {
    width: 100%;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── 좁은 폭에서도 상단 바는 한 줄이다 ──────────────────────────────────────
   ⚠ 이 블록은 **파일 맨 끝**에 있어야 한다. 위쪽 @media (max-width: 760px) 안에 적으면
   그 뒤에 오는 기본 `.site-nav { flex-wrap: wrap }` 에 덮여 조용히 안 먹는다 - 실제로
   한 번 그렇게 넣었다가 320px 에서만 두 줄로 돌아갔다.

   예전에는 폰에서 메뉴를 아랫줄로 내려(order + flex: 1 0 100%) 두 줄이었다. 390px 에서
   97px 이고 테마를 펼치면 139px 까지 늘어 화면의 6분의 1을 메뉴가 먹었다(2026-08-20 실측).
   지금은 어느 폭에서나 51px 이다. 갈래는 셋 -
   ① 메뉴는 오른쪽으로 붙고 줄을 안 바꾼다.
   ② 테마를 펼치는 동안만 메뉴가 접혀 자리를 내준다. 접으면 그대로 돌아온다.
      `:has()` 를 모르는 판에서는 예전처럼 줄이 늘 뿐이라 무너지지는 않는다.
   ③ 560px 아래에서는 '적성 검사' 한 칸을 접는다. 그 링크는 `/` 로 가는데 **왼쪽
      이름표가 이미 같은 데로 간다** - 없애는 것이 아니라 겹친 것을 하나로 줄이는 것이다.
      마크업에는 그대로 실려 크롤러는 넷을 다 본다(빌드가 li 에 data-nav-key 를 붙인다).
      더 좁아지면(320px) 이름표까지 접어 메뉴와 테마에 자리를 준다. */
@media (max-width: 760px) {
  .site-nav {
    flex-wrap: nowrap;
  }

  .site-nav ul {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .site-nav:has(.theme-switch.open) ul {
    display: none;
  }

  .site-nav-home {
    flex: none;
  }
}

@media (max-width: 560px) {
  /* 아래에서 여백과 글자를 한 단 줄이므로 바가 낮아진다. 접기 줄이 붙는 자리도 같이 내린다 -
     안 고치면 바와 그 줄 사이가 4px 뜨고 그 틈으로 본문이 지나간다(렌더로 잰 값이다). */
  :root {
    --topbar-h: 51px;
  }

  .site-nav {
    gap: 6px 8px;
    padding: 8px 14px;
  }

  .site-nav ul {
    gap: 2px;
  }

  .site-nav li[data-nav-key="home"] {
    display: none;
  }

  .site-nav a {
    min-height: 32px;
    padding: 0 7px;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .site-nav-home {
    font-size: 0.85rem;
  }

  /* 펼친 고르개가 줄을 다 쓴다. 이름표까지 접어야 체크 단추가 화면 안에 든다. */
  .site-nav:has(.theme-switch.open) .site-nav-home {
    display: none;
  }
}

/* 320px 에서는 이름표와 메뉴 셋이 같이 못 선다. 이름표를 접는다 - 메뉴의 '자격증 목록'
   과 테마가 먼저다(대표 취향: 보이는 것부터). 이름은 바닥글과 쪽 제목에 그대로 있다. */
@media (max-width: 380px) {
  /* `.site-nav a` 가 display 를 잡고 있어 `.site-nav-home` 한 마디로는 못 이긴다.
     선택자를 한 마디 더 붙여 무게를 맞춘다(실측: 320px 에서 이름표가 안 접혔다). */
  .site-nav a.site-nav-home {
    display: none;
  }

  /* 이름표가 빠지면 메뉴만 오른쪽에 몰려 왼쪽이 텅 빈다. 줄 앞으로 붙인다. */
  .site-nav ul {
    justify-content: flex-start;
  }
}