/* 첫 화면(랜딩). 2026-07-29 회의 피드백 -- 지금 첫 화면은 정보량이 많아 어디로
 * 들어가야 할지 알 수 없다 -- 에 대한 답이므로, 이 파일의 규칙은 전부 "덜 넣는" 쪽으로
 * 맞춰져 있다. 한 화면에 하나의 결정만 두고, 부가 설명은 색과 크기를 낮춰 뒤로 보낸다.
 *
 * 2026-07-31 시안 확정: hybrid 단독. 비교용 시안(duo/focus/steps)과 전환 바 규칙은
 * git 히스토리에만 남는다.
 *
 * 2026-08-09: 로그인 전 랜딩과 사이드바 유무만 다르게 두기로 하면서 레일 셸을 이
 * 화면에서도 켠다(shell=rail, 예전엔 별도의 shell=landing으로 레일 자체를 꺼서
 * 사이드바가 아예 없었다). 상단 제목 줄(.title)만 좁게 숨긴다 -- 그 줄은
 * render(view) 안에서만 채워지는데 이 화면(renderLandingView)은 그 경로를 타지
 * 않아 채울 게 없고, 브랜드 화면 자체의 h1이 이미 제목 역할을 한다. */

body[data-workspace-shell="rail"][data-workspace-view="start"] #workspace > .title {
  display: none;
}

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px 24px 96px;
  background: var(--bg);
}

.landing-stage {
  width: 100%;
  max-width: 640px;
  text-align: center;
}

.landing h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 4.2vw, 36px);
  line-height: 1.28;
  /* 한국어 제목은 어절 중간에서 끊기면 읽는 속도가 눈에 띄게 떨어진다. */
  word-break: keep-all;
  text-wrap: balance;
}

/* ---------- 브랜드명 칩 입력 ---------- */
/* 콤마가 아니라 엔터로 하나씩 확정한다. 브랜드명 자체에 쉼표가 들어갈 수 있어서다. */

.landing-chip-field { text-align: left; margin-bottom: 14px; }

.landing-chip-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--muted-strong);
}

.landing-chip-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  min-height: 58px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--panel-shadow);
  cursor: text;
}

.landing-chip-box:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(10, 189, 163, .16);
}

.landing-chip-list { display: contents; }

.landing-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px 5px 11px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: var(--fs-3);
}

.landing-chip b { font-weight: 600; }

.landing-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: var(--fs-4);
  line-height: 1;
  cursor: pointer;
}

.landing-chip button:hover { background: rgba(6, 112, 95, .14); }

.landing-chip-input {
  flex: 1 1 8rem;
  min-width: 8rem;
  padding: 4px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-4);
  color: var(--text);
}

/* URL 등 "엔터만"이 아니라 명시적으로 추가하는 편이 자연스러운 필드용 버튼. */
.landing-chip-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--muted-strong);
  font-size: var(--fs-4);
  line-height: 1;
  cursor: pointer;
}

.landing-chip-add:hover { background: var(--brand-soft); color: var(--brand-dark); }

/* 2글자 경고. 비어 있을 때 자리를 차지하지 않아야 힌트 줄이 위아래로 흔들리지 않는다. */
.landing-chip-error {
  margin: 8px 2px 0;
  color: var(--neg);
  font-size: var(--fs-2);
  line-height: 1.55;
  word-break: keep-all;
}

.landing-chip-error:empty { display: none; }

/* 잠긴 칸. 같은 자리에 같은 칩이 서지만 고칠 수는 없다 -- 커서와 포커스 테두리를
   그대로 두면 "쳐 보라"는 신호가 남아, 눌러 보고 나서야 잠긴 걸 알게 된다. */
[data-chip-locked="true"] .landing-chip-box {
  border-style: dashed;
  background: var(--surface-muted);
  box-shadow: none;
  cursor: default;
}

[data-chip-locked="true"] .landing-chip-box:focus-within {
  border-color: var(--line-strong);
  box-shadow: none;
}

/* 잠금 사유는 경고가 아니다 -- 빨간 글씨로 두면 무언가 잘못된 것으로 읽힌다. */
[data-chip-locked-note="true"] .landing-chip-error {
  color: var(--muted);
}

.auth-back-to-landing {
  margin: 8px 2px 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-dark);
  font: inherit;
  font-size: var(--fs-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.landing-chip-hint {
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: var(--fs-2);
  line-height: 1.55;
  word-break: keep-all;
}

/* ---------- 공통 폼 ---------- */

.landing-field-hint {
  margin: 2px 0 4px;
  font-size: var(--fs-1);
  line-height: 1.5;
  color: var(--muted);
}

/* 참고 텍스트/방향성 -- 홈페이지 대신/함께 직접 입력하는 문장(2026-08 회의). */
.landing-reftext-field { margin: 0 0 14px; text-align: left; }

.landing-reftext-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--muted-strong);
}

.landing-reftext-input {
  width: 100%;
  min-height: 96px;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-3);
  color: var(--text);
  resize: vertical;
}

.landing-reftext-input:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(10, 189, 163, .16);
}

.landing-reftext-count {
  margin: 6px 2px 0;
  text-align: right;
  font-size: var(--fs-1);
  color: var(--muted);
}

.landing-quiet {
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted-strong);
  font: inherit;
  font-size: var(--fs-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landing-quiet:hover { color: var(--text); }

.landing-advanced {
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landing-advanced:hover { color: var(--muted-strong); }

/* ---------- ① 두 갈래 ---------- */

.landing-domains {
  display: grid;
  gap: 2px;
  margin: 26px 0 8px;
  padding: 6px 4px;
  list-style: none;
  text-align: left;
  border-top: 1px solid var(--line);
}

.landing-domains li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 6px;
}

.landing-domains b {
  flex: 0 0 22px;
  color: var(--brand-dark);
  font-size: var(--fs-2);
  font-weight: 800;
  letter-spacing: .04em;
}

.landing-domains span {
  color: var(--muted);
  font-size: var(--fs-3);
  word-break: keep-all;
}

.landing-domains em {
  margin-right: 8px;
  color: var(--text);
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 760px) {
  .landing { padding: 32px 18px 48px; }
}

/* 로그인 전 랜딩(A-1). 폼·칩·버튼은 위의 .landing-* 를 그대로 쓰고, 여기서는
   질문 목록과 확인 배너처럼 이 화면에만 있는 것만 정의한다. */
.anon-landing {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 64px;
  text-align: center;
}

.anon-landing h1 {
  margin: 18px 0 8px;
  font-size: 1.7rem;
  line-height: 1.35;
}

.anon-lede {
  margin: 0 0 24px;
  color: var(--muted);
}

.anon-landing .landing-form { text-align: left; }

.anon-notice {
  margin: 24px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2, transparent);
  text-align: left;
}

.anon-notice-line { margin: 0 0 6px; }
.anon-notice-line:last-child { margin-bottom: 0; }
.anon-notice-help,
.anon-notice-muted {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.anon-result { margin-top: 28px; text-align: left; }
.anon-result h2 { margin: 0 0 6px; font-size: 1.15rem; }
.anon-result-help { margin: 0 0 16px; color: var(--muted); font-size: 0.92rem; }

.anon-questions {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.anon-questions label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.anon-questions input { margin-top: 3px; flex: none; }

.anon-empty { color: var(--muted); }

.anon-cta { margin-top: 24px; }
.anon-cta-help {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}

.anon-foot { margin-top: 28px; }

@media (max-width: 760px) {
  .anon-landing { padding: 32px 18px 48px; }
}

/* ===== 로그인 전 랜딩 (다단계, .al-*) ===== */
/* --al-hair/--al-cta(-ink)는 원래 .al 카드 안에서만 정의됐다. 2026-08-09 로그인
   이후 화면(landing.js renderStage)이 .al 래퍼 없이 같은 .al-* 클래스를 쓰기
   시작하면서, 정의되지 않은 커스텀 프로퍼티를 쓴 선언(업종 입력 테두리, 질문
   생성하기 버튼 배경 등)이 전부 무효화돼 조용히 사라졌다. 값은 화면마다 다르지
   않으므로 전역으로 올려 .al 래퍼가 없는 쪽에서도 해석되게 한다. */
:root {
  --al-hair: #e4e8e8; --al-cta: #17211d; --al-cta-ink: #fff;
}
.al {
  --al-hair: #e4e8e8; --al-cta: #17211d; --al-cta-ink: #fff;
  /* 분광 광선 다섯 줄의 색. 값은 tokens.css의 PRISM 키 색이고 여기서는 광선 번호에
     이름만 붙인다 -- 광선 하나가 영역 하나이므로 s1..s5의 순서는 P·R·I·S·M 순서다.
     값을 여기 두면 랜딩 카드 안에서만 살아서, 같은 영역이 리포트 차트에서는 다른
     색으로 그려진다(실제로 그랬다). */
  --al-s1: var(--prism-prominence);
  --al-s2: var(--prism-relevance);
  --al-s3: var(--prism-integrity);
  --al-s4: var(--prism-signature);
  --al-s5: var(--prism-merit);
  max-width: 940px; margin: clamp(14px, 3vw, 40px) auto; text-align: left;
  background: var(--surface); border: 1px solid var(--al-hair); border-radius: 24px;
  box-shadow: 0 30px 70px -40px rgba(20, 30, 26, .35); padding: clamp(22px, 4vw, 52px);
  word-break: keep-all;
}
/* 헤더는 가운데가 워드마크, 오른쪽 끝이 로그인이다. space-between으로 늘어놓던
   때는 워드마크가 왼쪽 구석에 붙어 브랜드가 화면의 중심이 아니었다.
   1fr을 minmax(0, 1fr)로 쓰는 게 핵심이다. 그냥 1fr이면 오른쪽 칸이 로그인 폭보다
   좁아지는 순간 자기 min-content만큼 자라고 왼쪽 빈 칸이 그만큼 줄어, 워드마크가
   폭에 따라 몇 px씩 왼쪽으로 흘렀다.
   걸음 표시(.al-steps)는 헤더가 아니라 화면마다 자기 푸터에 선다(.al-stepfoot) --
   로그인 전 랜딩과 로그인 후 질문 생성(.al.qf)이 같은 자리를 쓴다. */
.al-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  column-gap: 12px; row-gap: clamp(12px, 2.2vw, 18px);
  padding-bottom: clamp(16px, 3vw, 26px); border-bottom: 1px solid var(--al-hair); margin-bottom: clamp(24px, 5vw, 44px); }
.al-head > .al-wm { grid-column: 2; justify-self: center; }
.al-head > .al-auth, .al-head > .al-login { grid-column: 3; justify-self: end; }

/* 카드 헤더(.al-headtop)는 두 줄이다. 윗줄 오른쪽 끝이 나가는 갈래(로그인 전은
   [로그인], 로그인 후 질문 생성은 [워크스페이스로]), 아랫줄 가운데가 워드마크.
   브랜드가 이 화면의 첫인상이라 크기를 본문 h1 쪽으로 끌어올렸고,
   나가는 갈래는 기존 사용자가 습관적으로 먼저 보는 우측 상단 코너에 남겼다.
   줄을 나눈 게 핵심이다. 한 줄에 나란히 두면 워드마크가 커진 만큼 폭을 먹어
   768~900px 구간에서 둘이 겹쳤고, absolute로 띄워 피하면 자리를 예약하지 않으니
   좁은 폭에서 그대로 워드마크를 파고들었다. 줄을 나누면 워드마크가 헤더 폭을
   혼자 써서 어느 폭에서든 정확히 가운데에 선다. */
.al-headtop { grid-template-columns: 1fr; row-gap: clamp(10px, 1.8vw, 18px); }
.al-headtop > .al-auth { grid-row: 1; grid-column: 1; justify-self: end; }
.al-headtop > .al-wm { grid-row: 2; grid-column: 1; justify-self: center;
  --wm-size: clamp(22px, 3.2vw, 30px); --wm-mark: clamp(44px, 6vw, 60px); }
/* 크기를 토큰으로 뺀다. 워드마크를 쓰는 화면마다 .al-wm/.al-mark를 다시 선언하면
   브랜드 표기가 또 세 갈래로 갈리므로(이 파일 머리말), 정의는 하나로 두고 놓이는
   자리에서 --wm-size/--wm-mark만 덮어쓴다. gap이 .5em인 건 18px에서 원래 값 9px
   그대로이면서 키울 때 같이 따라오게 하려는 것. */
.al-wm { --wm-size: 18px; --wm-mark: 27px;
  display: flex; align-items: center; gap: .5em; font-weight: 800; letter-spacing: .01em;
  font-size: var(--wm-size); color: var(--brand-dark); }
.al-mark { width: var(--wm-mark); height: var(--wm-mark); }
.al-name .al-dim { color: var(--text); }
.al-steps { display: flex; gap: 7px; align-items: center; font-size: var(--fs-1); }
.al-steps span { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--al-hair); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); }
/* 제일 강한 표시는 반드시 '지금' 걸음이 가져간다. 예전에는 반대였다 -- done이
   브랜드색으로 꽉 찬 동그라미고 on은 테두리만이라, 화면을 넘길 때 눈에 먼저 들어오는
   칠해진 동그라미는 늘 이미 지나온 걸음이었다. 번호는 제대로 옮겨 다니는데도 강조가
   한 칸 뒤에 머무는 것처럼 보여서, 이 줄은 "어디까지 왔나"를 잘못 말하고 있었다.
   지나온 걸음은 옅은 브랜드 톤으로 남겨 둔다 -- 지웠다고 말하는 게 아니라 지나왔다고
   말하는 자리이고, 현재와 같은 무게로 칠하면 둘을 가를 수 없다. */
.al-steps span.on { background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 0 0 3px rgba(10, 189, 163, .2); }
.al-steps span.done { background: var(--brand-soft); border-color: rgba(10, 189, 163, .45); color: var(--brand-dark); }
/* 로그인은 이 페이지에서 기존 사용자가 들어올 유일한 입구인데, 회색 hairline
   고스트 버튼이라 헤더 여백에 묻혀 안 보였다. 채운 브랜드 톤으로 올려 버튼으로
   읽히게 하되, 색은 주 CTA(.al-cta, 잉크빛)와 갈라 둔다 -- 둘 다 진하면 처음 온
   사람이 "다음"과 "로그인" 중 뭘 눌러야 할지 헷갈린다. 문구 한 줄을 앞에 붙인 건
   버튼 자체보다 이쪽이 발견율을 더 올리기 때문. */
.al-auth { display: flex; align-items: center; gap: 10px; }
.al-authq { font-size: var(--fs-2); color: var(--muted); white-space: nowrap; }
.al-login { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: var(--fs-3); font-weight: 700;
  color: var(--brand-dark); background: var(--brand-soft); padding: 10px 20px;
  border: 1.5px solid var(--brand); border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.al-login svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* hover는 --brand(#0abda3)가 아니라 --brand-dark로 채운다. 흰 글씨를 밝은 브랜드색
   위에 얹으면 대비가 2:1대로 떨어져 오히려 hover에서 덜 읽힌다. */
.al-login:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; transform: translateY(-1px); }
.al-login:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
/* 로그인이 자기 줄을 갖게 되면서 문구는 워드마크와 다투지 않는다. 이제 문구를
   접는 기준은 자기 줄(문구 + 버튼 = 약 266px)이 카드 안쪽 폭을 넘느냐뿐이다. */
/* U-10 (docs/plans/ROADMAP.md §2.1): the 400px step below this used to hide
 * .al-authq at the same width .al-login's own line-wrap threshold falls at
 * (~266px content); both this and the 400px step collapsed onto the
 * console's ≤760px tier, so the hide now triggers well before it is strictly
 * needed -- harmless (there is nothing else at that width for .al-authq to
 * conflict with) but unverified visually. */
@media (max-width: 760px) {
  .al-authq { display: none; }
  .al { padding-left: 16px; padding-right: 16px; }
  .al-head { column-gap: 8px; }
  .al-login { padding: 8px 14px; font-size: var(--fs-2); }
  .al-wm { --wm-size: 16px; --wm-mark: 24px; }
}
@media (prefers-reduced-motion: reduce) { .al-login { transition: none; } .al-login:hover { transform: none; } }

.al[data-al-root] {
  --fs-1: 14px;
  --fs-2: 15px;
  --fs-3: 16px;
  width: 100%; max-width: none; min-height: 100vh; min-height: 100dvh;
  margin: 0; padding: 0; overflow: hidden;
  border: 0; border-radius: 0; background: var(--surface); box-shadow: none;
}
/* 공개 진단은 페이지 자체가 45:55로 나뉘는 화면이다. 공용 main의 폭 상한과
   거터를 풀어 소개와 행동 영역이 각각 독립된 면으로 보이게 한다. */
body:has(#anonymous-landing:not([hidden])) { background: var(--surface); }
body:has(#anonymous-landing:not([hidden])) > main { width: 100%; max-width: none; margin: 0; padding: 0; }
#anonymous-landing:not([hidden]) { width: 100%; }

.al-hero { position: relative; display: grid; grid-template-columns: minmax(0, 45fr) minmax(520px, 55fr); min-height: 100vh; min-height: 100dvh; }
.al-hero-main {
  display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh;
  padding: clamp(36px, 4vw, 58px) clamp(34px, 4.5vw, 68px) clamp(32px, 4vw, 52px);
  background: var(--surface-soft); color: var(--text);
}
.al-brandbar { display: flex; align-items: center; min-height: 36px; }
.al-brandbar .al-wm { --wm-size: 21px; --wm-mark: 32px; color: var(--brand-dark); }
.al-brandbar .al-name .al-dim { color: var(--text); }
.al-hero-copy { width: 100%; max-width: 590px; margin: clamp(66px, 10vh, 110px) 0 0; text-align: left; }
.al-kicker { margin: 0 0 16px; color: var(--brand-dark); font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.al .al-hero-copy h1 { margin: 0; color: var(--text); text-align: left; font-size: clamp(42px, 4.1vw, 62px); line-height: 1.08; letter-spacing: -.05em; }
.al .al-hero-copy h1 .al-hero-wrap { display: block; margin-top: .1em; white-space: nowrap; }
.al-hero-promise { max-width: 36em; margin: 22px 0 0; color: var(--muted-strong); font-size: clamp(17px, 1.45vw, 20px); font-weight: 520; line-height: 1.65; letter-spacing: -.012em; }

.al-engine-rotator { position: relative; display: block; width: 180px; height: 46px; overflow: hidden; color: var(--text); }
.al-engine-item { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; gap: 10px; height: 46px; opacity: 0; white-space: nowrap; animation: al-engine-cycle 16.8s ease-in-out var(--al-engine-delay, 0s) infinite; }
.al-engine-item svg,
.al-engine-item img { width: 34px; height: 34px; flex: none; object-fit: contain; fill: currentColor; }
.al-engine-item b { font-size: 18px; font-weight: 780; letter-spacing: -.02em; }
.al-engine-chatgpt { color: #20272f; }
.al-engine-gemini { color: #5c6bc0; }
.al-engine-naver { color: #5368dc; }
.al-engine-claude { color: #d97757; }
.al-engine-perplexity { color: #20808d; }
.al-engine-grok { color: #111; }
.al-engine-grok svg { border-radius: 7px; }
@keyframes al-engine-cycle {
  0%, 13% { opacity: 1; transform: translateY(0); }
  16.667%, 100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .al-engine-item { animation: none; }
  .al-engine-item:first-child { opacity: 1; transform: none; }
}

.al-action-panel {
  display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 100vh; min-height: 100dvh;
  padding: clamp(28px, 3.5vw, 48px) clamp(36px, 6vw, 88px) clamp(40px, 5vw, 72px);
  border-left: 1px solid var(--al-hair); background: var(--surface);
}
.al-action-auth { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 46px; color: var(--muted); font-size: 15px; }
.al-action-body { display: grid; align-items: start; width: 100%; max-width: 590px; min-height: 0; margin: 0 auto; padding: clamp(44px, 7vh, 64px) 0 22px; }
.al-start-card { width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(24px, 4vw, 36px); border: 1px solid var(--al-hair); border-radius: 22px; background: var(--surface); box-shadow: none; box-sizing: border-box; }
.al-action-body > .al-start-card { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; }
.al-start-card .al-col { max-width: none; }
.al-process-screen { min-height: 100vh; min-height: 100dvh; padding: clamp(34px, 6vw, 80px) 24px; }
.al-process-card { width: 100%; max-width: 820px; margin: 0 auto; }
.al-start-progress { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--fs-1); }
.al-start-progress > b { color: var(--text); }
.al-start-track { display: block; height: 5px; margin: 10px 0 34px; overflow: hidden; border-radius: 999px; background: var(--surface-muted); }
.al-start-track > b { display: block; width: var(--al-progress, 50%); height: 100%; border-radius: inherit; background: var(--brand); }
.al-start-card > h2 { margin: 0 0 12px; font-size: clamp(30px, 3vw, 40px); line-height: 1.2; letter-spacing: -.04em; }
.al-start-card > .al-sub { max-width: 31em; margin-bottom: 32px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.al-start-actions { margin-top: 24px; }
.al-start-actions > .al-cta { justify-content: center; width: 100%; min-height: 56px; white-space: nowrap; }
.al-start-actions > .al-cta:disabled { background: #dfe9e7; color: #fff; opacity: 1; }
.al-free-note { margin: 18px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; text-align: left; }
.al-free-note strong { color: var(--text); font-weight: 750; }
.al-action-body .landing-chip-label { margin-bottom: 10px; color: var(--text); font-size: 15px; }
.al-action-body .landing-chip-box { min-height: 62px; padding: 14px 16px; border-width: 1.5px; border-radius: 12px; background: #fff; }
.al-action-body .landing-chip-input { font-size: 17px; }
.al-col { max-width: 620px; margin: 0 auto; }
.al h1 { font-size: clamp(26px, 4.2vw, 38px); line-height: 1.14; letter-spacing: -.02em; font-weight: 800; text-align: center; margin: 0 auto 12px; }
.al-lede { text-align: center; color: var(--muted); font-size: clamp(15px, 1.8vw, 18px); max-width: 40ch; margin: 0 auto 28px; }
.al-help { font-size: 14px; color: var(--muted); margin: 8px 2px 0; line-height: 1.5; }
.al-err { color: #b23; font-size: var(--fs-2); margin: 8px 2px 0; min-height: 1em; }

/* 데스크톱 우측 패널은 뷰포트 안에서 독립적으로 스크롤된다. 입력 결과가
   늘어나도 양쪽 컬럼이 함께 길어지지 않고, 로그인 입구와 현재 단계가 같은
   화면에 남는다. 900px 이하의 한 컬럼 레이아웃은 페이지 스크롤을 계속 쓴다. */
@media (min-width: 901px) {
  .al-action-panel { height: 100vh; height: 100dvh; overflow: hidden; }
  .al-action-body {
    overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  }
  /* 조회 카드나 자동 채움 설명이 길어져도 다음 행동은 스크롤 영역의 아래쪽에
     남는다. 768px 노트북에서 2단계 CTA가 50~80px 아래로 밀리던 경로를 막고,
     그 아래 무료 범위 설명은 스크롤하면 그대로 읽을 수 있게 한다. */
  [data-al-brand-panel="brand"] .al-start-actions,
  .al-extra-step > .al-cardfoot {
    position: sticky; z-index: 3; bottom: -17px;
    padding: 12px 0; background: var(--surface);
    box-shadow: 0 -14px 18px rgba(255, 255, 255, .94);
  }
}

/* 브랜드 프리뷰 카드 — 첫 칩이 정해지면 네이버 공식 로고·설명을 best-effort로 확인시킨다. */
.al-preview-slot { margin: 10px 2px 0; }
.al-preview {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--brand-soft);
  background: var(--surface); border-radius: 14px;
  animation: al-pvin .28s ease;
}
@keyframes al-pvin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.al-pvlogo {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--brand-soft); color: var(--brand-dark);
  font-weight: 700; font-size: var(--fs-5);
}
.al-pvlogo.has { background: #fff; border: 1px solid var(--brand-soft); }
.al-pvimg { width: 100%; height: 100%; object-fit: contain; }
.al-pvbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-pvname { font-size: var(--fs-4); color: var(--text); }
/* 업체 등록 업종. 표기를 바꿔도 같은 값이 나오는 유일한 줄이라 이름 바로 아래 둔다. */
.al-pvcat {
  font-size: var(--fs-1); color: var(--brand-dark); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 표기 제안(.al-pvsuggest/.al-pvchip)은 없앴다 -- 카드 아래에서 "이 표기도 함께
   측정할까요"라고 따로 묻던 자리가 아래의 대표 표기 고르기(.al-pick)로 합쳐졌다.
   조회가 찾아 온 표기는 이제 고르기 목록에 후보로 서므로, 표기를 더하는 일과
   대표를 정하는 일을 두 번 묻지 않는다. */

/* 아무것도 못 찾았을 때. 빈 자리만 두면 입력이 틀렸는지 서비스가 죽었는지 알 수 없다. */
.al-pvmiss {
  margin: 8px 2px 0; font-size: var(--fs-2); line-height: 1.55;
  color: var(--muted); word-break: keep-all;
}
.al-pvdesc {
  font-size: var(--fs-2); color: var(--muted); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

@media (max-width: 900px) {
  .al-hero { grid-template-columns: 1fr; min-height: 0; }
  .al-hero-main { width: 100%; min-height: 0; padding: 24px clamp(20px, 6vw, 48px) 28px; }
  .al-brandbar .al-wm { --wm-size: 18px; --wm-mark: 28px; }
  .al-hero-copy { max-width: 660px; margin: 30px auto 0; text-align: center; }
  .al-kicker { margin-bottom: 10px; font-size: 14px; }
  .al .al-hero-copy h1 { text-align: center; font-size: clamp(34px, 8vw, 44px); line-height: 1.1; }
  .al .al-hero-copy h1 .al-hero-wrap { white-space: normal; }
  .al-hero-promise { max-width: 37em; margin: 14px auto 0; font-size: 16px; line-height: 1.55; text-align: center; }
  .al-method-panel { max-width: 660px; margin: 26px auto 0; }
  .al-action-panel { min-height: 0; padding: 46px clamp(20px, 8vw, 64px) 64px; border-top: 1px solid var(--al-hair); border-left: 0; }
  .al-action-auth { position: absolute; z-index: 2; top: 18px; right: clamp(20px, 6vw, 48px); min-height: 0; }
  .al-action-auth > span { display: none; }
  .al-action-body { max-width: 620px; padding: 0; }
}

@media (max-width: 560px) {
  .al-hero-main { padding: 20px 16px 22px; }
  .al-brandbar .al-wm { --wm-size: 17px; --wm-mark: 27px; }
  .al-action-auth { top: 16px; right: 16px; }
  .al-login { padding: 8px 13px; }
  .al-hero-copy { margin-top: 24px; }
  .al-kicker { display: block; margin-bottom: 9px; }
  .al-method-head, .al-hero-promise { display: none; }
  .al .al-hero-copy h1 { font-size: clamp(31px, 8.7vw, 37px); }
  .al-method-panel { margin-top: 18px; }
  .al-action-panel { padding: 38px 18px 52px; }
  .al-start-card > h2 { font-size: 30px; }
  .al-start-card > .al-sub { margin-bottom: 26px; font-size: 16px; }
  .al-start-track { margin-bottom: 28px; }
}

/* 대표 표기 고르기. 여러 표기를 넣어도 서버로 가는 분석 대상(analysis_keyword)은
   하나라, 그 하나를 화면에서 정하고 넘어간다 -- 고르지 않으면 첫 칩이 조용히
   대표가 되고, 사용자는 자기가 무엇을 재기로 했는지 모른 채 질문을 받는다.
   고르지 않은 표기는 버려지지 않고 별칭으로 함께 측정된다. */
/* 카드(.al-preview)와 같은 응답에서 함께 그려지는데도, 카드에만 진입 애니메이션이 있고
   이 목록엔 없어서 카드가 서서히 떠오르는 동안 이 목록만 미리 다 그려진 채로 있다가
   뒤늦게 눈에 들어와 "한 박자 늦게 뜬다"로 보였다 -- 카드와 같은 애니메이션을 그대로
   물려써 둘이 같은 순간에 나타나는 것으로 읽히게 한다. */
.al-pick { margin: 14px 2px 0; animation: al-pvin .28s ease; }
.al-pick[hidden] { display: none; }
.al-pick-msg { font-size: var(--fs-2); color: var(--muted); margin: 0 0 9px; word-break: keep-all; }
.al-pick-opts { display: flex; flex-wrap: wrap; gap: 8px; }
/* 고른 것이 보이는 상태로 남는다. 눌러서 사라지는 버튼이면 되돌릴 방법이 없고,
   무엇을 골랐는지도 확인 카드의 이름과 대조해야만 알 수 있다. */
.al-pickopt {
  display: inline-flex; align-items: baseline; gap: 7px; max-width: 100%;
  padding: 8px 13px; border: 1.5px solid var(--al-hair); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-3); cursor: pointer; text-align: left;
}
.al-pickopt:hover { border-color: var(--brand); }
.al-pickopt.on { border-color: var(--brand); background: var(--brand-soft); }
/* 맨 앞의 묶은 이름. 테두리만 브랜드색으로 세운다 -- 바탕까지 채우면 .on과 같은
   모양이 되어, 우리가 이미 골라 둔 것으로 읽힌다(대표 표기는 사람이 고른다). */
.al-pickopt.rec { border-color: var(--brand); }
.al-pickopt.rec .al-pickopt-tag { color: var(--brand-dark); }
.al-pickopt-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 이 표기가 어디서 왔는지 -- 사용자가 친 것인지, 조회가 찾아 온 것인지, 넣은
   표기들을 묶은 것인지. 셋을 같은 모양으로 세우면 추천을 자기가 입력한 것으로
   착각한다. */
.al-pickopt-tag { font-size: var(--fs-1); color: var(--muted); font-weight: 600; flex: none; }
.al-pickopt.on .al-pickopt-tag { color: var(--brand-dark); }

/* 추가 정보. 대표 표기를 고르기 전에는 서 있지 않다 -- 무엇을 잴지 정하기 전의
   업종·홈페이지는 어느 브랜드의 것인지 모르는 값이다. */
.al-extra { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--al-hair); }
.al-extra[hidden] { display: none; }
.al-extra-page { margin-top: 22px; padding-top: 0; border-top: 0; }

/* 홈페이지 설명문에서 뽑은 특장점 제안. 눌러야 담기는 버튼이라(§al-pickopt와
   같은 이유로 자동 채움이 아니다) 필 모양을 그대로 재사용한다. */
.al-kw-suggest { margin: -10px 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.al-kw-suggest[hidden] { display: none; }
.al-kw-suggest-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border: 1.5px dashed var(--al-hair); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: var(--fs-2); cursor: pointer;
}
.al-kw-suggest-pill:hover { border-color: var(--brand); border-style: solid; color: var(--text); }

/* 자주 쓰는 홈페이지·업종·키워드 뒤의 세부 타기팅 항목. 네 입력을 항상 펼치면
   선택 폼이 필수 설문처럼 길어 보이므로 한 묶음으로 접되, 무엇이 안에 있는지는
   펼치기 전에도 요약에서 바로 읽히게 한다. */
.al-more { margin-top: 4px; border: 1px solid var(--al-hair); border-radius: 14px; background: var(--surface-muted); }
.al-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; list-style: none; cursor: pointer; }
.al-more > summary::-webkit-details-marker { display: none; }
.al-more > summary > span { display: grid; gap: 3px; min-width: 0; }
.al-more > summary b { color: var(--text); font-size: var(--fs-3); }
.al-more > summary small { color: var(--muted); font-size: var(--fs-1); line-height: 1.45; }
.al-more > summary::after { content: ''; flex: none; width: 8px; height: 8px; margin: -4px 3px 0 2px; border-right: 2px solid var(--brand-dark); border-bottom: 2px solid var(--brand-dark); transform: rotate(45deg); transition: transform .16s ease, margin .16s ease; }
.al-more[open] > summary::after { margin-top: 4px; transform: rotate(225deg); }
.al-more[open] > summary { border-bottom: 1px solid var(--al-hair); }
.al-more-body { padding: 16px 16px 2px; background: var(--surface); border-radius: 0 0 14px 14px; }

.al-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
/* 랜딩의 입력 카드는 헤더에서 단계와 진행률을 이미 보여 준다. 푸터에 단계 점을
   반복하면 좌우 버튼 폭만 줄어 CTA가 두 줄로 깨지므로, 여기서는 이전/다음만 둔다. */
.al-cardfoot { flex-wrap: nowrap; gap: 12px; }
.al-cardfoot > .al-cta { min-height: 48px; padding: 12px 18px; font-size: var(--fs-3); white-space: nowrap; }
.al-cardfoot > .al-ghost { white-space: nowrap; }
/* 스텝을 품은 푸터. 헤더와 같은 minmax(0, 1fr) auto minmax(0, 1fr)이라, 좌우
   버튼 폭이 서로 달라도("← 브랜드명으로" vs "질문 생성하기 →") 스텝이 푸터
   한가운데에 선다. flex + space-between으로는 가운데 아이템이 두 버튼 사이의
   중점에 놓여, 화면을 넘길 때마다 스텝이 좌우로 흔들린다.
   걸음이 있는 푸터만 이 클래스를 단다 -- 로그인 전 랜딩의 네 화면과 로그인 후
   질문 생성(.qf)의 두 화면이 전부 여기에 해당한다. */
.al-stepfoot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; column-gap: 16px; row-gap: 14px; flex-wrap: initial; }
.al-stepfoot > :first-child { justify-self: start; }
.al-stepfoot > .al-steps { justify-self: center; }
.al-stepfoot > :last-child { justify-self: end; }
/* 좁은 폭에서는 이전·다음·스텝이 한 줄에 못 선다(360px에서 셋을 더하면 폭의
   1.3배다). 스텝을 버튼 줄 위로 올리고 이전/다음은 양 끝에 남긴다 -- 버튼을
   세로로 쌓으면 "다음"이 화면 밖으로 밀려 흐름이 끊긴다.
   칸을 1fr로 반씩 나누면 안 된다. 390px에서 한 칸이 146px이라 "질문 생성하기 →"가
   두 줄로 접히고 버튼만 두 배 높이가 됐다. auto + space-between이라야 버튼이
   제 폭을 갖고 양 끝으로 간다. */
/* U-10: was 560px with a further 400px step below it for the button-size
 * reduction (docs/plans/ROADMAP.md §2.1) -- both collapsed onto ≤760px.
 * js/views/question-flow.css keeps its own copy of the .al-cta/.al-ghost
 * sizing in sync at the same 760px value (see that file's comment). */
@media (max-width: 760px) {
  .al-stepfoot { grid-template-columns: auto auto; justify-content: space-between; }
  .al-stepfoot > .al-steps { grid-row: 1; grid-column: 1 / -1; }
  .al-stepfoot > :first-child, .al-stepfoot > :last-child { grid-row: 2; }
  .al-stepfoot > .al-cta { white-space: nowrap; padding: 12px 16px; font-size: var(--fs-3); }
  .al-stepfoot > .al-ghost { font-size: var(--fs-2); }
  /* 왼쪽 칸이 [이전]+[개수] 둘일 때는 버튼이 한 겹 안에 들어가 위 규칙의 직계
     자식 조건에 걸리지 않는다. 같은 값을 한 번 더 준다. */
  .al-footlead .al-ghost { font-size: var(--fs-2); }
}
/* 푸터 왼쪽 칸이 둘일 때(고르기 화면의 [← 브랜드명 다시 입력] + [N개 선택됨]).
   묶어 두는 이유는 자리다 -- 되돌아가는 버튼은 걸음마다 왼쪽 첫 자리에 있어야
   하고, 선택 개수는 그 옆에 붙는 부수적인 값이다. 좁은 폭에서 둘을 한 줄에
   세우지 못하면 아래로 접히되 푸터의 다른 칸은 건드리지 않는다. */
.al-footlead { display: inline-flex; align-items: center; column-gap: 12px; row-gap: 4px; flex-wrap: wrap; min-width: 0; }
.al-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--al-cta); color: var(--al-cta-ink); border: 0; border-radius: 12px; padding: 14px 28px; font: inherit; font-size: var(--fs-4); font-weight: 700; cursor: pointer; }
.al-cta:hover { filter: brightness(1.14); }
.al-cta:disabled { opacity: .4; cursor: default; filter: none; }
.al-arw { font-weight: 500; }
.al-ghost { background: transparent; border: 0; cursor: pointer; font: inherit; font-size: var(--fs-3); font-weight: 600; color: var(--muted); padding: 6px 2px; }
.al-ghost:hover { color: var(--brand-dark); }

.al-diff { text-align: center; color: var(--muted); font-size: var(--fs-3); margin: clamp(28px, 5vw, 44px) 0 18px; }
.al-prism { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid var(--al-hair); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 44px -38px rgba(20,30,26,.58); }
.al-pcard { min-width: 0; padding: 18px 15px 16px; border: 0; border-top: 5px solid var(--al-prism-color); border-radius: 0; background: color-mix(in srgb, var(--al-prism-color) 6%, #fff); text-align: left; }
.al-pcard + .al-pcard { border-left: 1px solid var(--al-hair); }
.al-pcard-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.al [data-prism-area] { --al-prism-ink: var(--brand-dark); }
.al [data-prism-area="prominence"] { --al-prism-ink: var(--prism-prominence-ink); }
.al [data-prism-area="relevance"] { --al-prism-ink: var(--prism-relevance-ink); }
.al [data-prism-area="integrity"] { --al-prism-ink: var(--prism-integrity-ink); }
.al [data-prism-area="signature"] { --al-prism-ink: var(--prism-signature-ink); }
.al [data-prism-area="merit"] { --al-prism-ink: var(--prism-merit-ink); }
.al-pl { flex: none; color: var(--al-prism-ink); font-size: 34px; font-weight: 900; line-height: .9; letter-spacing: -.07em; }
.al-pcard-label { display: grid; min-width: 0; gap: 2px; }
.al-pen { overflow: hidden; color: var(--al-prism-ink); font-size: 9px; font-weight: 800; line-height: 1.1; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.al-plb { color: var(--text); font-size: 15px; font-weight: 820; line-height: 1.3; word-break: keep-all; }
.al-pds { min-height: 34px; margin: 0; padding-top: 11px; border-top: 1px solid color-mix(in srgb, var(--al-prism-color) 22%, var(--al-hair)); color: var(--muted); font-size: 11px; line-height: 1.5; word-break: keep-all; }

.al-method-panel {
  width: 100%; max-width: 620px; margin-top: clamp(44px, 6vh, 62px); overflow: visible;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; box-sizing: border-box;
}
.al-method-head { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 0 14px; text-align: center; }
.al-method-copy { min-width: 0; }
.al-method-copy h2 { margin: 0; color: var(--muted-strong); font-size: 16px; line-height: 1.35; letter-spacing: -.015em; }
.al-method-copy h2 .al-method-name { color: var(--brand-dark); font-weight: 900; letter-spacing: .03em; }
.al-method-count { white-space: nowrap; }
.al-method-panel .al-prism {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-top: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.al-method-panel .al-pcard { min-width: 0; padding: 12px 4px 10px; border: 0; border-top: 4px solid var(--al-prism-color); background: transparent; text-align: center; }
.al-method-panel .al-pcard + .al-pcard { border-left: 1px solid var(--line); }
.al-method-panel .al-pcard-head { display: grid; justify-items: center; gap: 3px; margin: 0; }
.al-method-panel .al-pl { color: var(--al-prism-ink); font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: -.07em; }
.al-method-panel .al-pcard-label { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.al-method-panel .al-plb { order: 1; color: var(--text); font-size: 14px; font-weight: 780; line-height: 1.2; word-break: keep-all; }
.al-method-panel .al-pen,
.al-method-panel .al-pds { display: none; }
.al-engine-summary {
  display: flex; align-items: center; justify-content: center; gap: 14px 20px; min-width: 0; margin-top: 16px; padding: 18px 0 0;
  border-top: 1px solid var(--line); background: transparent;
}
.al-engine-summary .al-engine-rotator { flex: 0 0 270px; width: 270px; height: 56px; }
.al-engine-summary .al-engine-item { inset: 0; justify-content: center; width: 100%; gap: 12px; height: 56px; }
.al-engine-summary .al-engine-item svg,
.al-engine-summary .al-engine-item img { width: 48px; height: 48px; }
.al-engine-summary .al-engine-item b { color: var(--text); font-size: 20px; }
.al-engine-summary .al-engine-chatgpt { color: #20272f; }

.al-title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.al-title :is(h1, h2) { margin: 0; font-size: clamp(20px, 3vw, 26px); font-weight: 800; text-align: left; }
.al-sub { color: var(--muted); font-size: var(--fs-3); margin: 0 0 8px; }
.al-target { font-size: var(--fs-2); color: var(--muted); margin: 0 0 22px; }
.al-target b { color: var(--text); font-weight: 650; }
.al-field { display: block; margin-bottom: 14px; }
.al-field span { display: block; font-size: var(--fs-2); color: var(--muted); font-weight: 600; margin-bottom: 7px; }
.al-field input { width: 100%; background: var(--surface-muted); border: 1.5px solid var(--al-hair); border-radius: 11px; padding: 12px 13px; font: inherit; font-size: var(--fs-3); color: var(--text); }
.al-field input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* 우리가 채운 값이라고 알리는 한 줄. 바로 위 입력 칸에 붙어야 무엇에 대한 말인지
   읽히므로 .al-field의 아래 여백만큼 끌어올린다. */
.al-fieldnote { margin: -8px 0 14px; font-size: var(--fs-2); color: var(--muted); }

/* gen (질문 생성 분광 — 질문이 하나씩 광선 따라 튀어나옴) */
/* 분광 화면만 다른 걸음보다 넓다. 광선의 길이가 곧 질문 칩이 서로 떨어질 수 있는
   거리이고(prism-stage.js), 620px 안에서는 칩이 뭘 해도 포개졌다. 폼이 서는 다른
   걸음은 620px 그대로다 -- 입력 칸이 넓어져서 좋을 것이 없다. */
.al-gencol { max-width: 820px; }
.al-industry-confirm {
  max-width: 620px; margin: 28px auto 18px; padding: clamp(22px, 4vw, 32px);
  border: 1px solid var(--al-hair); border-radius: 18px; background: var(--surface-soft);
}
.al-industry-confirm > span { color: var(--brand-dark, var(--brand)); font-size: var(--fs-1); font-weight: 750; }
.al-industry-confirm h2 { margin: 8px 0 10px; color: var(--text); font-size: clamp(21px, 3vw, 27px); line-height: 1.3; }
.al-industry-confirm p { margin: 0; color: var(--muted); font-size: var(--fs-3); line-height: 1.7; }
.al-industry-confirm p b { color: var(--text); }
.al-industry-confirm .al-foot { margin-top: 22px; }
.al-anhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.al-anbrand b { font-weight: 800; font-size: var(--fs-5); } .al-anbrand span { margin-left: 6px; color: var(--muted); font-size: var(--fs-2); }
.al-anbrand-josa { margin-left: 0 !important; font-size: var(--fs-5); color: var(--text); }
.al-pct { font-weight: 800; font-size: var(--fs-6); color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.al-przwrap { position: relative; width: 100%; max-width: 820px; margin: 6px auto; overflow: hidden; }
.al-przstage { position: absolute; top: 0; left: 0; width: 820px; height: 392px; transform-origin: top left; }
.al-przstage svg { display: block; }
.al-przchips { position: absolute; inset: 0; }
.al-przchip { position: absolute; white-space: nowrap; font-size: var(--fs-1); line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--al-hair); box-shadow: 0 1px 3px rgba(16,24,40,.06); transform: translateY(-50%); }
.al-przbrand { color: var(--text); font-weight: 600; border-color: var(--brand); }
/* 질문 칩은 자기 광선을 타고 가다 라벨 열 앞에서 사라진다. 이동 벡터는 JS가 광선
   벡터에 비율을 곱해 넘겨준다(prism-stage.js) -- 손으로 적어 두던 동안 칩이 광선을
   벗어나 떠갔다.

   폭이 필요한 이유는 두 가지다. 질문 문장은 길이가 제각각이라 그대로 두면 고정
   좌표계(820px) 밖으로 흘러 무대 가장자리에 반쯤 잘린 채 걸리고 -- 한동안 이 한 줄이
   워크스페이스 쪽(.qf)에만 있어서 같은 질문이 로그인 전에는 잘린 채로 로그인 후에는
   말줄임으로 끝났다 -- 폭이 넓으면 칩의 오른쪽 끝이 라벨 열(x=652)을 침범한다.
   116px은 칩이 끝까지 갔을 때(x≈517)도 오른쪽 끝이 633에 그쳐 라벨에 닿지 않는
   값이다. prism-stage.js의 CHIP_TRAVEL과 한 쌍이다. */
.al-przemit { opacity: 0; animation: al-emit 1.4s cubic-bezier(.2,.8,.2,1) forwards;
  max-width: 116px; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 12px currentColor, 0 0 4px currentColor;
  background: var(--surface); font-weight: 700; }
/* 끝에서 opacity를 0으로 되돌린다. 남겨 두던 때는 같은 광선의 칩 다섯 개가 한 점에
   포개져 마지막 하나만 읽혔고, 스물다섯 개가 다 나오면 무대가 겹친 칩 무더기였다.
   그 축이 몇 개를 실어 냈는지는 라벨 옆 숫자(.al-pzcount)가 대신 들고 있다.

   앞의 절반이 투명한 이유는 프리즘 바로 뒤에서 다섯 광선이 아직 붙어 있기
   때문이다(그게 분광이다). 30% 지점에서 이웃 축의 칩과 세로로 14px밖에 안 떨어져
   -- 칩 높이가 21px이다 -- 서로 가리므로, 완전히 드러나는 자리를 광선이 21px
   벌어지는 50%에 둔다. 양 끝이 투명한 구간이라 같은 광선의 앞뒤 칩이 스쳐도
   겹쳐 보이지 않는다. */
@keyframes al-emit {
  0% { transform: translate(0, 0) translateY(-50%) scale(.8); opacity: 0; filter: blur(4px) brightness(1.5); }
  25% { opacity: 0; }
  45% { opacity: 1; filter: blur(0px) brightness(1.1); }
  85% { opacity: 1; filter: blur(0px) brightness(1); }
  100% { transform: translate(var(--dx), var(--dy)) translateY(-50%) scale(.9); opacity: 0; filter: blur(2px); }
}
.al-pzbeam { transition: opacity .4s ease-out, stroke-width .4s ease-out; }
/* 유리 안을 지나는 빛과 입사면 모서리. 색을 값으로 박지 않는 이유는 카드 배경이
   토큰이기 때문이다 -- 예전의 #e1f5ee는 배경색이 바뀌면 그대로 남는 얼룩이 된다. */
.al-pzcore { stroke: var(--surface); stroke-width: 3; stroke-linecap: round; opacity: .92; }
.al-pzedge { stroke: var(--surface); stroke-width: 3; stroke-linecap: round; opacity: .9; }
/* 광선 끝의 축 이름. 오른쪽 끝 160px은 이 열의 몫이고 광선도 칩도 넘어오지 않는다 --
   광선이 x=648까지 가고 라벨이 x=560에 서던 동안에는 글자 위로 광선이 지나갔고,
   칩까지 같은 자리에 도착해 가운데 축은 이름이 통째로 덮였다. */
.al-pztip { opacity: .9; }
.al-pzlabel { font-size: var(--fs-1); font-weight: 600; }
.al-pzcount { fill: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.al-pzflow { stroke-dasharray: 4 12; animation: al-flow 0.8s linear infinite; }
@keyframes al-flow { to { stroke-dashoffset: -32; } }
.al-ticker { display: flex; align-items: center; gap: 9px; font-size: var(--fs-2); color: var(--muted); background: var(--surface-muted); border: 1px solid var(--al-hair); border-radius: 9px; padding: 9px 13px; margin: 6px 0 20px; }
.al-ticker b { color: var(--text); font-weight: 600; }
.al-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: al-blink 1.1s ease-in-out infinite; flex: none; }
@keyframes al-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* select (질문 고르기) */
.al-notice { background: #fbf3e2; border: 1px solid #ecd9a8; border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; }
.al-notice-line { margin: 0 0 4px; font-size: var(--fs-3); } .al-notice-muted { color: var(--muted); }
.al-notice-help { margin: 0; font-size: var(--fs-2); color: var(--muted); }
.al-qlist { display: flex; flex-direction: column; gap: 8px; }
.al-qitem { display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left; font: inherit; cursor: pointer; border: 1px solid var(--al-hair); border-radius: 11px; padding: 11px 13px; background: var(--surface); }
.al-qitem:hover { border-color: var(--brand); }
.al-qitem.on { border-color: var(--brand); background: var(--brand-soft); }
.al-qx { width: 20px; height: 20px; border: 1.5px solid var(--al-hair); border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--fs-1); font-weight: 800; margin-top: 2px; }
.al-qitem.on .al-qx { background: var(--brand); border-color: var(--brand); }
.al-qitem:not(.on) .al-qx { color: transparent; }
/* 질문 본문과 그 아래 다섯 영역 분포. 질문이 선 축(갈래)은 묶는 축이라 그룹 머리에
   한 번만 쓰고, 질문마다 붙는 것은 채점 결과다.

   1위만 적던 알약 칩(.al-qprism)은 없앴다 -- 분포가 큰 값부터 이름을 달고 서게 된
   뒤로 그 칩은 첫 항목을 되풀이하는 줄이었다. */
.al-qbody { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.al-qt { font-size: var(--fs-3); line-height: 1.4; color: var(--text); }
.al-qmeta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: var(--fs-1); color: var(--muted); }
.al-qbadge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: var(--fs-1); font-weight: 700; line-height: 1.6; }
/* .al-qbadge-dominant는 없앴다 -- 그 배지("기준 영역")가 영역 라벨과 구별되지 않아
   question-flow.js가 더 이상 그리지 않는다. .al-qbadge-source("원래 생성 영역")도 같은
   이유로 없앴다 -- 갈래를 생성 슬롯으로 묶은 뒤로는 갈래 머리가 이미 그 이름이라, 그
   안의 질문마다 같은 이름을 한 번 더 다는 칩이었다. */
.al-qbadge-fill_by_weight,
.al-qbadge-threshold_lowered { background: var(--surface-2); color: var(--text); }

/* 다섯 영역 분포. 위 라벨이 "이 질문은 무엇을 재는가"라면 여기는 "나머지 넷은
   얼마나 재는가"다 -- 대표성 78%짜리 질문도 차별성을 12% 재고 있고, 그 12%가 있는
   질문과 없는 질문은 다른 질문이다.

   큰 값부터 서고 이름을 그대로 적는다(AidePrism). 자리를 PRISM 순서로 고정하고
   코드 글자만 적던 때는 "S 23"이 무슨 영역인지 알려면 다섯 글자 표를 외워야 했고,
   그 표는 첫 화면에만 있다. 색은 자리가 아니라 영역에 붙어서, 대표성은 어디에
   서든 늘 같은 색이다. */
.prism-spectrum { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; width: 100%; }
.prism-spectrum-bar { display: flex; gap: 1px; height: 4px; border-radius: 999px; overflow: hidden; }
.prism-spectrum-bar i { display: block; min-width: 1px; }
.prism-spectrum-legend { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: var(--fs-1); line-height: 1.5; color: var(--muted); }
.prism-spectrum-legend span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
/* .prism-spectrum-priority("기준" 꼬리표)는 없앴다 -- 걷어낸 "기준 영역" 배지(위 메모)가
   범례 안으로 자리만 옮긴 것이라, 그리는 쪽(prism.js spectrumBar)에서 함께 걷어냈다. */
/* 이름 앞의 점이 위 막대의 어느 칸인지 잇는다. 색만으로 잇게 두면 색각 이상에서
   끊기므로 이름이 늘 함께 선다 -- 점은 두 번째 끈이지 유일한 끈이 아니다. */
.prism-spectrum-legend i { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.prism-spectrum-legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* 눈에 먼저 들어와야 하는 것은 큰 칸이다. 다섯 개를 같은 굵기로 두면 어디가
   1위인지 숫자를 다 읽어야 알 수 있다. */
.prism-spectrum-legend [data-prism-lead] { color: var(--text); }
.al-qitem.on .prism-spectrum-legend [data-prism-lead] { color: var(--brand-dark, var(--brand)); }
/* 꼬리 영역은 0에 가까워질수록 뒤로 물린다. 다섯 이름이 같은 무게로 서면 줄이
   길어진 만큼 읽는 부담만 늘고, 정작 큰 값이 눈에 걸리지 않는다. */
.prism-spectrum-legend span:not([data-prism-lead]) { opacity: .72; }

/* 갈래별 접기 — 스물다섯 개를 한 화면에 담는다. 접힌 채로도 몇 개를 골랐는지와
   그 갈래의 첫 질문이 보이므로, 열지 않고도 무엇이 들어 있는지 알 수 있다. */
.al-qgroups { display: flex; flex-direction: column; gap: 8px; }
.al-qgroup { border: 1px solid var(--al-hair); border-radius: 12px; background: var(--surface); }
.al-qgroup[open] { border-color: var(--brand); }
.al-qghead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}
.al-qghead::-webkit-details-marker { display: none; }
.al-qghead:hover { background: var(--brand-soft); }
.al-qgtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.al-qgname { display: flex; align-items: center; gap: 8px; font-size: var(--fs-3); font-weight: 600; color: var(--text); }
.al-qgdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.al-qgcount { font-size: var(--fs-2); color: var(--muted); white-space: nowrap; }
.al-qgcount b { color: var(--brand-dark, var(--brand)); }
.al-qgpeek { font-size: var(--fs-2); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-qgroup[open] .al-qgpeek { display: none; }
.al-qgroup .al-qlist { padding: 0 13px 12px; }
.al-cnt { font-size: var(--fs-3); color: var(--muted); } .al-cnt b { color: var(--text); }
.al-empty { color: var(--muted); font-size: var(--fs-3); }

/* 직접 추가 — 생성된 갈래 다섯 개 아래에 선다. 갈래 색을 쓰지 않는 점(비어 있는
   테두리)인 이유는 이 묶음이 생성 슬롯이 아니기 때문이다: 다섯 갈래와 같은 색을
   주면 여섯 번째 갈래가 있는 것처럼 읽힌다. */
.al-qgdot-custom { border: 1.5px dashed var(--muted); background: transparent; }
.al-qadd { display: flex; gap: 8px; margin-top: 10px; }
.al-qadd-input {
  flex: 1;
  min-width: 0;
  background: var(--surface-muted);
  border: 1.5px solid var(--al-hair);
  border-radius: 11px;
  padding: 11px 13px;
  font: inherit;
  font-size: var(--fs-3);
  color: var(--text);
}
.al-qadd-input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.al-qadd-btn {
  flex: none;
  font: inherit;
  font-size: var(--fs-3);
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--brand);
  border-radius: 11px;
  padding: 0 18px;
  background: var(--surface);
  color: var(--brand-dark, var(--brand));
}
.al-qadd-btn:hover { background: var(--brand-soft); }
.al-qadd-btn:disabled { cursor: progress; opacity: .55; }
/* 한 줄짜리 안내라 빈 문자열일 때 자리를 차지하지 않아야 한다 -- 늘 비어 있는
   여백이 붙어 있으면 추가 칸과 푸터 사이가 이유 없이 벌어진다. */
.al-qadd-msg { margin: 8px 0 0; font-size: var(--fs-2); color: var(--muted); }
.al-qadd-msg:empty { display: none; }
/* 톤 표시가 두 벌인 이유는 훅 접두사가 화면마다 다르기 때문이다(로그인 전 .al-*,
   워크스페이스 .qf-*). 생김새는 한 벌이어야 하므로 여기서 둘을 같이 받는다 --
   접두사를 합치면 로그인 전 랜딩의 e2e 선택자가 워크스페이스 화면까지 잡는다. */
.al-qadd-msg[data-al-tone="ok"], .al-qadd-msg[data-qf-tone="ok"] { color: var(--brand-dark, var(--brand)); }
.al-qadd-msg[data-al-tone="err"], .al-qadd-msg[data-qf-tone="err"] { color: #b23; }

/* 익명 무료진단 결과. 워크스페이스와 같은 surface/brand 토큰만 써서 가입 전후가
   다른 제품처럼 보이지 않게 한다. 시작·진행 화면과 달리 공용 .al-col만
   바로 화면 끝에 놓지 않고, 배경 거터와 하나의 리포트 표면을 둔다. */
.al-screen[data-al-screen="result"] {
  min-height: 100vh; min-height: 100dvh;
  padding: clamp(44px, 6vw, 84px) clamp(28px, 6vw, 88px) clamp(60px, 8vw, 108px);
  background: linear-gradient(180deg, var(--surface-soft) 0, var(--surface) 34%);
}
.al-resultcol {
  max-width: 960px; padding: clamp(30px, 4vw, 48px);
  border: 1px solid var(--al-hair); border-radius: 24px; background: var(--surface);
  box-shadow: 0 30px 70px -46px rgba(20, 30, 26, .5);
}
.al-result-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 0 0 clamp(28px, 4vw, 42px); padding: 0 0 22px;
  border-bottom: 1px solid var(--al-hair);
}
.al-result-head .al-wm { --wm-size: 20px; --wm-mark: 31px; }
.al-resultcol > .al-title :is(h1, h2) { font-size: clamp(29px, 3vw, 38px); letter-spacing: -.035em; }
.al-resultcol > .al-sub { max-width: 48em; margin-top: 10px; line-height: 1.65; }
.al-resultcol > .al-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--al-hair); }
.al-analysis-state { display: grid; gap: 12px; padding: 20px; margin-top: 22px; border: 1px solid var(--al-hair); border-radius: 18px; background: var(--surface-muted); }
.al-analysis-state[hidden] { display: none; }
.al-analysis-state > p { margin: 0; color: var(--muted); font-size: var(--fs-3); }
.al-analysis-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.al-analysis-progress-head strong { color: var(--brand-dark, var(--brand)); font-size: clamp(25px, 5vw, 38px); font-variant-numeric: tabular-nums; }
.al-analysis-progress-head span { color: var(--muted); font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.al-analysis-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--brand-soft); }
.al-analysis-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand); transition: width 1.35s linear; }
.al-waiting-question { display: grid; gap: 5px; min-height: 82px; padding: 13px 15px; border: 1px solid var(--al-hair); border-radius: 13px; background: var(--surface); }
.al-waiting-question > span { color: var(--muted); font-size: var(--fs-1); }
.al-waiting-question > b { overflow: hidden; color: var(--text); font-size: var(--fs-3); line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.al-waiting-question > b.is-changing { animation: al-question-in .28s ease-out; }
.al-waiting-question > small { color: var(--brand-dark, var(--brand)); font-size: var(--fs-1); }
@keyframes al-question-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.al-engine-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.al-engine-row span { padding: 5px 9px; border: 1px solid var(--al-hair); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: var(--fs-1); }
.al-engine-row span b { color: var(--text); font-variant-numeric: tabular-nums; }
.al-teaser { display: grid; gap: 14px; margin-top: 22px; }
.al-teaser[hidden] { display: none; }
.al-result-summary { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 12px; }
.al-score-card { display: flex; min-width: 0; align-items: center; gap: clamp(18px, 3vw, 28px); padding: 22px; border: 1px solid #bfe9e1; border-radius: 18px; background: linear-gradient(145deg, var(--surface) 0%, var(--brand-soft) 100%); box-shadow: var(--panel-shadow); }
.al-score-ring { position: relative; display: grid; place-items: center; align-content: center; width: 126px; height: 126px; flex: none; border-radius: 50%; background: conic-gradient(from -90deg, var(--brand) 0 var(--al-score), var(--brand-soft) var(--al-score) 100%); }
.al-score-ring::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.al-score-ring span, .al-score-ring b { position: relative; z-index: 1; }
.al-score-ring span { color: var(--muted); font-size: var(--fs-1); letter-spacing: .08em; }
.al-score-ring b { color: var(--brand-dark, var(--brand)); font-size: var(--fs-6); }
.al-score-copy { min-width: 0; }
.al-score-copy-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.al-score-copy-head > span { color: var(--muted); font-size: var(--fs-2); }
.al-score-copy-head > small { padding: 3px 7px; border-radius: 999px; background: var(--surface); color: var(--brand-dark, var(--brand)); font-size: 10px; font-weight: 800; }
.al-score-copy > strong { display: block; margin-top: 4px; font-size: clamp(18px, 3vw, 24px); }
.al-score-copy > p { margin: 7px 0 0; color: var(--muted); font-size: var(--fs-2); line-height: 1.5; }
.al-score-copy > .al-response-coverage { color: #9a5a08; }
.al-metric-card { display: flex; min-width: 0; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--al-hair); border-radius: 18px; background: var(--surface-muted); box-shadow: var(--panel-shadow); }
.al-metric-card-head { display: grid; gap: 2px; }
.al-metric-card-head > span { font-size: var(--fs-5); font-weight: 850; letter-spacing: -.02em; }
.al-metric-card-head > small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.al-metric-card > .al-metric-lock { display: grid; place-items: center; width: 30px; height: 30px; margin-top: auto; border-radius: 50%; background: var(--surface); font-size: 13px; }
.al-metric-card > strong { font-size: var(--fs-3); }
.al-metric-card > p { margin: 0; color: var(--muted); font-size: var(--fs-1); line-height: 1.45; }
.al-state-card { display: grid; align-content: center; gap: 8px; padding: 22px; border: 1px solid var(--al-hair); border-radius: 18px; background: var(--surface-muted); }
.al-state-card > span { color: var(--muted); font-size: var(--fs-2); }
.al-state-card > strong { font-size: clamp(24px, 4vw, 36px); }
.al-state-card > strong.good, .al-area-row > small.good { color: #15704b; }
.al-state-card > strong.mid, .al-area-row > small.mid { color: #a85e00; }
.al-state-card > strong.bad, .al-area-row > small.bad { color: #b42318; }
.al-state-card > strong.neutral, .al-area-row > small.neutral { color: var(--muted); }
.al-state-card > p { margin: 0; color: var(--muted); font-size: var(--fs-2); line-height: 1.55; }
.al-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; }
.al-section-title > b { font-size: var(--fs-4); }
.al-section-title > span { color: var(--muted); font-size: var(--fs-1); text-align: right; }
.al-diagnosis-config { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.al-diagnosis-config > div { padding: 17px; border: 1px solid var(--al-hair); border-radius: 15px; background: var(--surface); }
.al-diagnosis-config > div > b { font-size: var(--fs-3); }
.al-diagnosis-config p { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-1); line-height: 1.55; }
.al-domain-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 12px; }
.al-domain-chips > span { display: grid; gap: 2px; padding: 8px 4px; border: 1px solid color-mix(in srgb, var(--al-prism-color) 35%, #fff); border-radius: 9px; background: color-mix(in srgb, var(--al-prism-color) 12%, #fff); text-align: center; }
.al-domain-chips b { color: var(--al-prism-ink); font-size: var(--fs-1); }
.al-domain-chips small { color: var(--muted); font-size: 9px; line-height: 1.25; overflow-wrap: anywhere; }
.al-config-engines { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.al-config-engines span { padding: 6px 8px; border: 1px solid var(--al-hair); border-radius: 999px; color: var(--muted); font-size: 10px; }
.al-area-list { display: grid; gap: 9px; padding: 18px 20px; border: 1px solid var(--al-hair); border-radius: 16px; background: var(--surface); }
.al-area-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(120px, 2fr) 48px 68px; align-items: center; gap: 12px; font-size: var(--fs-2); }
.al-area-row > span { display: flex; gap: 7px; align-items: center; }
.al-area-row > span b { color: var(--al-prism-ink); }
.al-area-row > i { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-muted); }
.al-area-row > i em { display: block; height: 100%; border-radius: inherit; background: var(--al-prism-color); }
.al-area-row > strong { text-align: right; font-variant-numeric: tabular-nums; }
.al-area-row > small { justify-self: end; padding: 5px 7px; border-radius: 999px; background: var(--surface-muted); font-size: 10px; font-weight: 800; white-space: nowrap; }
.al-strength-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.al-strength-row > div { display: grid; gap: 4px; padding: 15px 17px; border: 1px solid var(--al-hair); border-radius: 14px; background: var(--surface-muted); }
.al-strength-row span { color: var(--muted); font-size: var(--fs-1); }
.al-strength-row b { font-size: var(--fs-3); }
.al-strength-row strong { color: var(--brand-dark, var(--brand)); font-size: var(--fs-5); }
.al-opportunity { padding: 16px 18px; border: 1px solid #ffd4d4; border-radius: 15px; background: #fff8f8; }
.al-opportunity > b { color: #b42318; font-size: var(--fs-2); }
.al-opportunity > p { margin: 7px 0 0; color: #6b4a4a; font-size: var(--fs-2); line-height: 1.6; }
.al-locked-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow: hidden; padding: 14px; border: 1px solid var(--al-hair); border-radius: 16px; background: var(--surface-muted); }
.al-locked-grid > div { display: grid; gap: 5px; min-height: 82px; padding: 12px; border-radius: 10px; background: var(--surface); filter: blur(2.5px); opacity: .48; }
.al-locked-grid > div b { font-size: var(--fs-2); }
.al-locked-grid > div span { color: var(--muted); font-size: var(--fs-1); }
.al-lock { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text); font-size: var(--fs-3); font-weight: 700; background: color-mix(in srgb, var(--surface) 42%, transparent); }
.al-upgrade { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; border-radius: 18px; color: #fff; background: var(--brand-dark, var(--brand)); }
.al-upgrade b { font-size: var(--fs-4); }
.al-upgrade p { max-width: 590px; margin: 7px 0 0; color: rgba(255,255,255,.8); font-size: var(--fs-2); line-height: 1.55; }
.al-upgrade button { min-width: 210px; padding: 12px 15px; border: 0; border-radius: 10px; background: #fff; color: var(--brand-dark, var(--brand)); font-weight: 800; cursor: pointer; }
.al-upgrade button span { margin-left: 5px; }

/* 768px 높이의 일반적인 노트북에서 1·2단계 CTA가 첫 화면 밖으로 밀리지
   않도록 목록 간격만 한 단계 줄인다. 높은 데스크톱은 위의 넓은 여백을 그대로
   쓰고, 세부 정보를 펼친 경우는 독립 스크롤이 안전망이 된다. 기본 규칙보다
   뒤에 놓아 높이 티어의 간격·크기가 실제로 우선하게 한다. */
@media (min-width: 901px) and (max-height: 820px) {
  .al-action-panel { padding: 24px clamp(32px, 5vw, 72px); }
  .al-action-auth { min-height: 40px; }
  .al-action-body { padding: 22px 4px 16px 0; }
  .al-start-track { margin: 8px 0 22px; }
  .al-start-card > h2 { margin-bottom: 8px; font-size: clamp(28px, 2.5vw, 34px); }
  .al-start-card > .al-sub { margin-bottom: 20px; font-size: 16px; line-height: 1.5; }
  .al-action-body .landing-chip-field { margin-bottom: 10px; }
  .al-action-body .landing-chip-label { margin-bottom: 7px; }
  .al-action-body .landing-chip-box { min-height: 54px; padding: 10px 14px; }
  .al-action-body .al-help { margin-top: 5px; }
  .al-preview-slot { margin-top: 8px; }
  .al-preview { padding: 8px 12px; }
  .al-pvlogo { width: 36px; height: 36px; }
  .al-pick { margin-top: 10px; }
  .al-pick-msg { margin-bottom: 7px; }
  .al-extra-page { margin-top: 14px; }
  .al-field { margin-bottom: 10px; }
  .al-more > summary { padding: 11px 14px; }
  .al-foot { margin-top: 14px; }
  .al-cardfoot > .al-cta { min-height: 46px; padding-top: 10px; padding-bottom: 10px; }
  .al-start-actions > .al-cta { min-height: 52px; }
  .al-free-note { margin-top: 12px; font-size: 14px; line-height: 1.5; }
}

@media (max-width: 980px) {
  /* 정식 대시보드의 좁은 폭 배치와 같은 순서: 공개 AVS를 한 행에 두고, 잠긴
     세 지표를 그 아래 같은 폭으로 둔다. 첫 카드 안의 고리와 횟수를 억지로 줄이지 않는다. */
  .al-result-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .al-result-summary > .al-score-card { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .al-prism { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .al-pcard { padding: 15px 13px 14px; border: 1px solid color-mix(in srgb, var(--al-prism-color) 58%, #fff); border-top: 4px solid var(--al-prism-color); border-radius: 14px; }
  .al-pcard + .al-pcard { border-left: 1px solid color-mix(in srgb, var(--al-prism-color) 58%, #fff); }
  .al-pcard:last-child { grid-column: 1 / -1; }
  .al-result-summary, .al-diagnosis-config { grid-template-columns: 1fr; }
  .al-score-card { align-items: flex-start; }
  .al-score-ring { width: 104px; height: 104px; }
  .al-area-row { grid-template-columns: 110px 1fr 44px 64px; gap: 8px; }
  .al-locked-grid { grid-template-columns: 1fr; }
  .al-locked-grid > div { min-height: 48px; }
  .al-upgrade { align-items: stretch; flex-direction: column; }
  .al-upgrade button { width: 100%; }
}
@media (max-width: 480px) {
  .al-score-card { flex-direction: column; }
  .al-strength-row { grid-template-columns: 1fr; }
  .al-section-title { align-items: flex-start; flex-direction: column; }
  .al-section-title > span { text-align: left; }
  .al-area-row { grid-template-columns: 1fr 48px 64px; }
  .al-area-row > i { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 340px) {
  .al-prism { grid-template-columns: 1fr; }
  .al-pcard:last-child { grid-column: auto; }
  .al-cardfoot { flex-direction: column-reverse; align-items: stretch; }
  .al-cardfoot > .al-cta { justify-content: center; width: 100%; }
  .al-cardfoot > .al-ghost { align-self: center; }
  .al-stepfoot { grid-template-columns: 1fr; }
  .al-stepfoot > .al-steps { grid-row: 1; grid-column: 1; }
  .al-stepfoot > :last-child { grid-row: 2; grid-column: 1; justify-self: stretch; justify-content: center; width: 100%; }
  .al-stepfoot > :first-child { grid-row: 3; grid-column: 1; justify-self: center; }
}

@media (max-width: 1024px) {
  .al-method-panel .al-pcard { padding-right: 3px; padding-left: 3px; }
  .al-method-panel .al-pl { font-size: 28px; }
  .al-method-panel .al-plb { font-size: 14px; }
}

@media (max-width: 520px) {
  .al-method-head { align-items: flex-start; padding: 0 0 10px; }
  .al-method-copy h2 { font-size: 14px; }
  .al-method-panel .al-prism { min-height: 0; padding-top: 0; }
  .al-method-panel .al-pcard,
  .al-method-panel .al-pcard:last-child { display: block; grid-column: auto; padding: 8px 1px 7px; border: 0; border-top: 3px solid var(--al-prism-color); border-radius: 0; text-align: center; }
  .al-method-panel .al-pcard-head { gap: 4px; min-height: 0; margin: 0; }
  .al-method-panel .al-pl { font-size: 23px; }
  .al-method-panel .al-pen,
  .al-method-panel .al-pds { display: none; }
  .al-method-panel .al-plb { max-width: none; min-height: 0; font-size: 12px; line-height: 1.2; }
  .al-engine-summary { flex-wrap: nowrap; gap: 11px; margin-top: 11px; padding: 13px 0 0; }
  .al-engine-summary .al-engine-rotator { flex: 0 1 230px; width: 230px; height: 48px; }
  .al-engine-summary .al-engine-item { height: 48px; }
  .al-engine-summary .al-engine-item svg,
  .al-engine-summary .al-engine-item img { width: 42px; height: 42px; }
  .al-engine-summary .al-engine-item b { font-size: 18px; }
}

/* 움직임을 끈 설정에서는 칩이 광선 중간에 그냥 나타났다 사라진다. 도착점에 세우면
   칩끼리 포개지고, 칩 수명 자체는 JS 타이머가 재므로(prism-stage.js) 여기서 사라질
   일이 없어지지도 않는다 -- 애니메이션이 없으면 animationend도 오지 않기 때문에
   수명을 이벤트가 아니라 타이머로 재는 것이다. */
@media (prefers-reduced-motion: reduce) {
  .al-przemit, .al-pzflow, .al-dot, .al-analysis-orbit { animation: none !important; }
  .al-przemit { opacity: 1; transform: translate(calc(var(--dx) * .72), calc(var(--dy) * .72)) translateY(-50%); }
}