/* ============================================================================
   GenAI AEO 앱 화면 (verify/report/subscribe/unsubscribe/message/login 공용). 랜딩은 landing.css.

   랜딩(landing.css)과 같은 색·모서리 규칙을 쓴다.
   - 강조색: 인디고(#7c83ff) → 바이올렛(#a78bfa) 하나로 고정.
   - 점수 구간 색(--band-*)은 tokens.css 한 곳에서 정한다. 낮은 구간이 위험(빨강),
     높은 구간이 성공(초록)으로 읽힌다. 구간 경계는 config/criteria.yaml 의 grades 한 곳.
   - 모서리: 버튼·칩 pill, 패널·카드 20px, 코드·입력·안쪽 상자 12px. 이 규칙만 쓴다.
   - 외부 폰트·CDN 없음. 'Noto Sans KR' 은 설치된 기기에서만 쓰고 없으면 시스템 폰트.
   - 모션은 prefers-reduced-motion 에서 멈춘다. 인쇄는 흰 배경·검정 글자.
   ============================================================================ */

/* 색·폰트 토큰, 리셋, 머리·꼬리(제품 셸)는 shell.css 에 있다. 이 파일은 그 뒤에 로드된다. */

/* 점수 구간 색(--band-*)은 tokens.css 한 곳에서 정한다. 여기서 다시 적지 않는다. */

body.app {
  line-height: 1.65;
  /* keep-all 은 어절 사이만 끊는다. 공백 없는 긴 호스트명(URL)·한글 사이트명은 끊을 자리가 없어
     390px 뷰포트에서 패널 밖으로 넘친다. anywhere 로 그런 단어만 강제 줄바꿈한다. */
  overflow-wrap: anywhere;
  background-image: radial-gradient(1100px 520px at 12% -8%, rgba(124, 131, 255, 0.10), transparent 60%);
  background-repeat: no-repeat;
}

/* shell.css 에도 있지만 이 화면들의 JS 없는 숨김 규칙이 여기에 기대므로 함께 둔다. */
[hidden] { display: none !important; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-main {
  flex: 1;
  width: 100%;
  margin: 0 auto;
  padding: 36px 20px 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.app-main.is-wide { max-width: 1040px; }
.app-main.is-narrow { max-width: 600px; padding-top: 56px; }


/* ── 패널·공통 글자 ──────────────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: var(--panel-pad);
}
/* 제목 크기·굵기는 tokens.css 의 --h1-*·--h2-* 한 곳에서 온다(관리자 화면과 같은 값).
   같은 본문이 화면마다 다른 제목 단계로 들어가므로(리포트 본문은 관리자 화면에서 h3 부터
   시작한다) 크기는 태그가 아니라 is-h1·is-h2·is-h3 클래스가 정한다. */
.panel h1, .panel .is-h1 {
  margin: 0 0 12px;
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--text-strong);
  text-wrap: balance;
}
.panel h2, .panel .is-h2 {
  margin: 0 0 18px;
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.panel p { margin: 0 0 12px; }
.panel p:last-child { margin-bottom: 0; }

.eyebrow {
  font-size: 0.82rem;
  color: var(--accent-2);
  font-weight: 700;
  margin: 0 0 10px;
}
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }
.center { text-align: center; }

/* ── 단추 ────────────────────────────────────────────────────────────────
   모양은 제품 하나뿐이다(tokens.css 의 --btn-*, 부품은 components.css 의 .u-btn).
   여기서는 예전 이름(.btn-primary·.btn-ghost)을 같은 값에 잇기만 한다. */
.btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-min-h);
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font: inherit;
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-primary:hover, .btn-ghost:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-ghost:hover { border-color: var(--accent-2); }
.btn-primary:active, .btn-ghost:active { transform: translateY(0) scale(0.98); }
.btn-block { width: 100%; }
.btn-sm { min-height: 0; padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm); font-size: var(--btn-fs-sm); }
.btn-link { color: var(--muted); font-weight: 600; font-size: 0.92rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
form { margin: 22px 0 0; }

/* ── 작은 카드 화면(인증·구독·수신거부·메시지) ─────────────────────── */
.card { padding: var(--card-pad); }
.site-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 18px 0 18px;
  padding: 16px 18px;
  border-radius: var(--radius-inner);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
}
.site-box-label { font-size: 0.8rem; color: var(--muted); }
.site-box-value { font-size: 1.12rem; color: var(--text-strong); font-weight: 700; }

.reason fieldset { border: 0; margin: 0; padding: 0; }
.reason legend { font-weight: 700; color: var(--text-strong); margin-bottom: 4px; }
.reason { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius-inner);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 0.94rem;
}
.choice:hover { border-color: var(--line-strong); }
.choice:has(input:checked) { border-color: var(--accent-2); background: var(--accent-soft); }
.choice input { accent-color: var(--accent-2); margin: 0; }
.reason .btn-ghost { margin-top: 16px; }

/* ── 진행·실패 화면 ─────────────────────────────────────────────────── */
.state-panel { padding: var(--card-pad); }
.steps { list-style: none; margin: 26px 0 18px; padding: 0; position: relative; }
.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 32px;
  bottom: -10px;
  width: 2px;
  background: var(--line-strong);
}
.step.is-done:not(:last-child)::after { background: var(--accent); }
.step-mark {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  border: 2px solid var(--line-strong);
  background: var(--panel);
  z-index: 1;
}
.step.is-done { color: var(--text); }
.step.is-done .step-mark { background: var(--accent); border-color: var(--accent); }
.step.is-done .step-mark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--accent-on);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.step.is-active { color: var(--text-strong); font-weight: 700; }
.step.is-active .step-mark { border-color: var(--accent-2); }
.step.is-active .step-mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--r-pill);
  background: var(--accent-2);
  animation: aeo-pulse 1.6s ease-in-out infinite;
}
@keyframes aeo-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.55; }
  50% { transform: scale(1); opacity: 1; }
}

.reason-box {
  margin: 20px 0 4px;
  padding: 16px 18px;
  border-radius: var(--radius-inner);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent-2);
}
.reason-label { font-size: 0.8rem; color: var(--muted); margin: 0 0 4px !important; }

/* ── 결과: 요약 ──────────────────────────────────────────────────────── */
.summary {
  padding: var(--card-pad);
  background:
    radial-gradient(640px 300px at 0% 0%, rgba(124, 131, 255, 0.10), transparent 70%),
    var(--panel);
}
.summary-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.score { position: relative; width: 176px; height: 176px; margin: 0; }
.gauge { display: block; width: 100%; height: 100%; }
.gauge-track { stroke: rgba(148, 163, 184, 0.16); }
.gauge-value { stroke: var(--band-color, var(--accent)); }
.score-text {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.score-label { font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; }
.score-text strong {
  font-size: 2.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.score-max { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }

/* .grade-* 는 components.css 가 --band-color 로 잇는다(관리자 화면도 같은 규칙을 쓴다). */

.summary-main .is-h1 { margin-bottom: 10px; }
/* 메타 한 줄: 줄바꿈되면 각 줄 첫 항목 앞 구분선이 보이지 않게, 모든 항목 앞에 구분선을 두고
   .meta 왼쪽 여백(--meta-gap)만큼을 음수 여백 + clip-path 로 잘라낸다. 줄 첫 항목의 구분선은 잘린 영역에 들어간다. */
.meta {
  --meta-gap: 25px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
  margin: 0 0 16px calc(-1 * var(--meta-gap)) !important;
  clip-path: inset(0 0 0 var(--meta-gap));
  font-size: 0.88rem;
  color: var(--muted);
}
.meta span { position: relative; padding-left: var(--meta-gap); }
.meta span::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 1px;
  height: 0.8em;
  margin-top: -0.4em;
  background: var(--line-strong);
}
.grade-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text);
}
.grade-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--band-color, var(--accent-2));
  background: color-mix(in srgb, var(--band-color, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--band-color, var(--accent)) 40%, transparent);
}
.print-btn { margin-top: 6px; }

/* 우선 개선 항목 3가지 */
.top { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.top-title { font-size: 1.05rem !important; margin-bottom: 14px !important; }
.top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.top-link {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "rank tags" "rank name" "rank count";
  column-gap: 14px;
  row-gap: 6px;
  align-content: start;
  padding: 18px 18px 16px;
  border-radius: var(--radius-panel);
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.top-link:hover { text-decoration: none; border-color: var(--line-strong); transform: translateY(-2px); }
.top-rank {
  grid-area: rank;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.top-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 6px; }
.top-name { grid-area: name; font-weight: 700; color: var(--text-strong); line-height: 1.45; }
.top-count { grid-area: count; font-size: 0.85rem; color: var(--muted); }

/* 뱃지 */
.tag, .impact {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.tag { background: var(--accent-soft); color: var(--accent-on-dark); }
.impact { border: 1px solid transparent; }
.impact-high { color: var(--danger-on-dark); background: rgba(243, 124, 184, 0.14); border-color: rgba(243, 124, 184, 0.32); }
.impact-medium { color: var(--brand-lilac); background: rgba(185, 140, 249, 0.13); border-color: rgba(185, 140, 249, 0.3); }
.impact-low { color: var(--surface-ink-2); background: rgba(154, 167, 189, 0.12); border-color: rgba(154, 167, 189, 0.26); }

/* ── 결과: 영역별 막대 ──────────────────────────────────────────────── */
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3.5rem;
  grid-template-areas: "label bar pct" ". note note";
  align-items: center;
  column-gap: 18px;
  row-gap: 6px;
}
.bar-label { grid-area: label; font-weight: 700; color: var(--text-strong); }
.bar-pct {
  grid-area: pct;
  text-align: right;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.bar-note { grid-area: note; font-size: 0.88rem; color: var(--muted); }
.bar {
  grid-area: bar;
  display: block;
  height: 14px;
  border-radius: var(--r-pill);
  background: rgba(148, 163, 184, 0.12);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--band-color, var(--accent));
  transform-origin: left center;
}
.bar-excellent { --band-color: var(--band-excellent); }
.bar-good { --band-color: var(--band-good); }
.bar-fair { --band-color: var(--band-fair); }
.bar-poor { --band-color: var(--band-poor); }

/* ── 결과: 개선이 필요한 항목 ───────────────────────────────────────── */
.issues-lead { margin: -8px 0 18px !important; }
.issue {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel-2);
  margin-bottom: 10px;
  scroll-margin-top: 24px;
  transition: border-color 0.2s var(--ease);
}
.issue:last-of-type { margin-bottom: 0; }
.issue[open] { border-color: var(--line-strong); }
.issue summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 8px 14px;
  padding: 16px 20px;
  border-radius: var(--radius-panel);
}
.issue summary::-webkit-details-marker { display: none; }
.issue summary::after {
  content: "";
  width: 8px;
  height: 8px;
  justify-self: center;
  border: solid var(--muted);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.issue[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.issue summary:hover .issue-title { color: var(--n-0); }
.issue-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.issue-title { font-weight: 700; color: var(--text-strong); line-height: 1.45; }
.issue-count {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.issue-body { margin: 0 20px; padding: 4px 0 22px; border-top: 1px solid var(--line); }
.issue-body h3, .issue-body .is-h3 {
  margin: 18px 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-2);
}
.issue-body p { margin: 0; }
.samples { margin: 0; padding: 0; list-style: none; font-size: 0.88rem; color: var(--muted); }
.samples li { padding: 2px 0; }
.fix-note {
  white-space: pre-line;
  padding: 14px 16px;
  border-radius: var(--radius-inner);
  background: var(--code-bg);
  border: 1px solid var(--line);
  font-size: 0.92rem;
}

/* ── 결과: LLM 내용 진단(B5a, 점수와 따로) ─────────────────────────── */
.ce-note { padding: 12px 16px; border-radius: var(--radius-inner); background: var(--panel-2); border: 1px solid var(--line);
           font-size: 0.92rem; margin: 0 0 14px; }
.ce-meta { margin: -6px 0 14px; }
.ce-pending { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius-inner); border: 1px dashed var(--line-strong); }
.ce-pending p { margin: 0; }
.ce-spinner { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%;
              border: 2px solid var(--line-strong); border-top-color: var(--accent-2); animation: ce-spin 1s linear infinite;
              vertical-align: -1px; }
@keyframes ce-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ce-spinner { animation: none; } }
.ce-site { display: grid; gap: 14px; margin: 0 0 16px; }
.ce-block h3, .ce-block .is-h3 { margin: 0 0 6px; font-size: 0.86rem; color: var(--accent-2); }
.ce-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.ce-list { margin: 0; padding-left: 18px; }
.ce-list li { padding: 2px 0; }
.ce-quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ce-quotes blockquote { margin: 0; padding: 6px 12px; border-left: 3px solid var(--accent); color: var(--text-strong); }
.ce-quotes p { margin: 2px 0 0 15px !important; }
.ce-page .issue-title { font-weight: 600; font-size: 0.95rem; }
.ce-yes { background: rgba(74, 222, 128, 0.14); color: var(--band-excellent); }
.ce-wait { color: var(--warning-on-dark); margin-top: 4px !important; }
.ce-banner { margin-top: 10px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--text-strong); }
.ce-more { margin-top: 6px; }
.ce-final { color: var(--warning-on-dark); }
.ce-more summary { cursor: pointer; color: var(--accent-2); font-size: 0.9rem; }

.code {
  border-radius: var(--radius-inner);
  border: 1px solid var(--line);
  background: var(--code-bg);
  overflow: hidden;
}
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 7px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.code-lang { font-size: 0.76rem; font-weight: 700; color: var(--muted); font-family: var(--mono); }
.code .copy {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  border-radius: var(--r-pill);
  padding: 4px 14px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.code .copy:hover { border-color: var(--accent-2); }
.code .copy.is-copied { border-color: var(--band-excellent); color: var(--band-excellent); }
.code pre {
  margin: 0;
  padding: 14px 16px 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.84rem;
  line-height: 1.65;
  word-break: normal;
  overflow-wrap: normal;
}
.code code { color: var(--code-ink); font-family: inherit; }
/* 문법 강조(app.js 가 span 으로 감싼다) */
.tk-punct { color: var(--tk-punct); }
.tk-tag { color: var(--tk-tag); }
.tk-attr { color: var(--tk-attr); }
.tk-str { color: var(--tk-str); }
.tk-key { color: var(--tk-key); }
.tk-comment { color: var(--tk-comment); font-style: italic; }
.tk-dir { color: var(--tk-tag); font-weight: 700; }

.info-box {
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: var(--radius-inner);
  border: 1px dashed var(--line-strong);
  font-size: 0.86rem;
  color: var(--muted);
}
.info-box p { margin: 0 0 4px; }

/* ── 결과: 진단 범위 상자(스펙 12-4) ─────────────────────────────────── */
.scope-box {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-inner);
  border: 1px solid var(--line-strong);
  background: rgba(124, 131, 255, 0.06);
  font-size: 0.88rem;
}
.scope-box p { margin: 0; }
.scope-box .scope-label { font-size: 0.78rem; font-weight: 700; color: var(--accent-2); letter-spacing: 0.02em; }
.scope-box .scope-text { color: var(--text); margin-top: 2px; }
.scope-box .scope-note { color: var(--muted); font-size: 0.82rem; margin-top: 4px; }
.scope-box .scope-mode { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: var(--r-pill); font-size: 0.72rem;
  border: 1px solid currentColor; }
.scope-box .scope-upgrade { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(148, 163, 184, 0.25); }
.scope-box .scope-list { margin: 4px 0 0; padding-left: 18px; color: var(--text); font-size: 0.85rem; }
.scope-box .scope-list li { margin: 2px 0; word-break: keep-all; overflow-wrap: anywhere; }
.scope-box .scope-upgrade a { color: var(--accent-2); font-weight: 600; }

/* 백분위 줄(K1). 진단 범위 상자와 같은 모양을 쓰고 문장 한 줄만 굵게 둔다. */
.standing-box .scope-text { font-weight: 700; }

/* ── 결과: 다음 단계 ────────────────────────────────────────────────── */
.next-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 14px;
}
.next-grid > :only-child { grid-column: 1 / -1; }
.next-main, .next-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius-panel);
  border: 1px solid var(--line);
}
/* 두 제안의 무게가 같으므로 카드 바탕과 단추도 같다(예전에는 왼쪽만 광원과 보라 테두리를 가졌다). */
.next-main, .next-sub { background: var(--panel-2); }
.next-main h3, .next-sub h3 { margin: 0; font-size: 1.05rem; color: var(--text-strong); }
.next-main p, .next-sub p { margin: 0 0 8px; color: var(--muted); font-size: 0.92rem; }
.next-main .btn-primary, .next-sub .btn-primary { margin-top: auto; }

/* ── 모션: 선호하는 경우에만 ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .gauge-value { animation: aeo-gauge 1.1s var(--ease) 0.15s both; }
  .bar i { animation: aeo-bar 0.9s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
  .bars[data-bars="wait"] i { animation-play-state: paused; }
}
@keyframes aeo-gauge { from { stroke-dasharray: 0 100; } }
@keyframes aeo-bar { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── 좁은 화면 ──────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .panel, .summary, .card, .state-panel { padding: var(--sp-5) var(--sp-4); }
  .app-main { padding: 24px 16px 56px; }
  .app-main.is-narrow { padding-top: 32px; }
  .summary-grid { grid-template-columns: 1fr; gap: 20px; justify-items: start; }
  .score { width: 136px; height: 136px; }
  .score-text strong { font-size: 2.05rem; }
  .score-label { font-size: 0.72rem; }
  .next-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label pct" "bar bar" "note note"; }
  .issue summary { grid-template-columns: minmax(0, 1fr) auto 18px; padding: 14px 16px; }
  .issue-tags { grid-column: 1 / -1; }
  .issue-body { margin: 0 16px; }
}
@media (max-width: 420px) {
  .grade-line { flex-direction: column; gap: 8px; }
}

/* ── 인쇄·PDF ───────────────────────────────────────────────────────── */
@media print {
  @page { margin: 14mm; }
  html, body, body.app { background: var(--n-0) !important; color: var(--print-ink) !important; }
  body.app { display: block; background-image: none; }
  .site-header { position: static; background: var(--n-0) !important; border-bottom: 1px solid var(--print-line-3); backdrop-filter: none; }
  .site-header-inner { max-width: none; height: auto; padding: 0 0 10px; }
  .panel, .panel p, .grade-line, .step, .choice legend,
  .site-brand-name, .panel h1, .panel h2, .panel .is-h1, .panel .is-h2,
  .bar-label, .bar-pct, .issue-title, .top-name, .score-text strong,
  .site-box-value, .next-main h3, .next-sub h3 { color: var(--print-ink) !important; }
  .site-brand-sub, .eyebrow, .issue-body h3, .issue-body .is-h3, .top-rank { color: var(--print-accent) !important; }
  .muted, .meta, .bar-note, .top-count, .issue-count, .samples, .score-label, .score-max,
  .info-box, .next-main p, .next-sub p, .scope-box .scope-note { color: var(--print-ink-2) !important; }
  .scope-box { background: var(--n-0) !important; border: 1px solid var(--print-line) !important; }
  .scope-box .scope-text { color: var(--print-ink) !important; }
  .site-menu, .site-menu-toggle, .site-footer, .skip-link, .print-btn, .copy, .next .btn-primary, .next .btn-ghost,
  .actions, [data-poll] .steps { display: none !important; }
  .app-main, .app-main.is-wide { max-width: none; padding: 12px 0 0; gap: 14px; }
  .panel, .summary, .top-link, .issue, .next-main, .next-sub, .site-box, .reason-box {
    background: var(--n-0) !important; border: 1px solid var(--print-line) !important; box-shadow: none !important;
  }
  .panel { padding: 18px 20px; break-inside: auto; }
  .summary-grid { grid-template-columns: auto 1fr; }
  .top-link { transform: none !important; }
  .top-item, .bar-row, .issue summary { break-inside: avoid; }
  .issue summary::after { display: none; }
  .issue-body { border-top-color: var(--print-line-2); }
  .tag { background: var(--print-accent-soft) !important; color: var(--print-accent) !important; }
  .impact-high { background: var(--print-high-soft) !important; color: var(--print-high-ink) !important; border-color: var(--print-high-line) !important; }
  .impact-medium { background: var(--print-mid-soft) !important; color: var(--print-mid-ink) !important; border-color: var(--print-mid-line) !important; }
  .impact-low { background: var(--print-low-soft) !important; color: var(--print-low-ink) !important; border-color: var(--print-low-line) !important; }
  .grade-pill { color: var(--print-ink) !important; background: var(--print-surface-2) !important; border-color: var(--print-muted-line) !important; }
  .bar { background: var(--print-line-2) !important; }
  .bar, .bar i, .gauge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* 종이는 흰 바탕이라 밝은 바탕용 진한 값을 쓴다. 뜻(위험 → 성공)은 화면과 같다. */
  .grade-excellent, .bar-excellent { --band-color: var(--print-band-excellent); }
  .grade-good, .bar-good { --band-color: var(--print-band-good); }
  .grade-fair, .bar-fair { --band-color: var(--print-band-fair); }
  .grade-poor, .bar-poor { --band-color: var(--print-band-poor); }
  .code, .fix-note { background: var(--print-surface) !important; border: 1px solid var(--print-line) !important; }
  .code-head { background: var(--print-surface-2) !important; border-bottom-color: var(--print-line-2) !important; }
  .code pre { white-space: pre-wrap; word-break: break-all; overflow: visible; font-size: 9pt; }
  .code code, .fix-note, [class^="tk-"] { color: var(--print-ink) !important; }
  .tk-comment { color: var(--print-ink-3) !important; }
  a { color: var(--print-ink) !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── 회원 화면(/app: 동의·도메인 인증·대시보드) ──────────────────────── */
.app-main.is-member { max-width: 820px; padding-top: 48px; }
/* 명예의 전당(/hall)은 회원 화면과 같은 가운데 칸을 쓴다(폭 규칙 하나를 같이 읽는다). */
.app-main.is-hall { max-width: 820px; padding-top: 48px; }
/* 업종으로 거르기(2026-09-20). 관리자에만 태그가 있어 공개 화면에서 인사이트를 얻기 어렵다는
   지적에 따라 넣었다. 링크라서 스크립트가 없어도 되고 주소를 그대로 공유할 수 있다. */
.hall-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-3) 0; }
.hall-chip {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--surface-line); background: var(--surface-sunken);
  color: var(--surface-ink); font-size: var(--fs-12); line-height: 1.6; text-decoration: none;
  white-space: nowrap;
}
.hall-chip:hover { border-color: var(--surface-line-strong); background: var(--surface-raised); }
.hall-chip.is-on {
  border-color: transparent; background: var(--surface-accent); color: var(--surface-accent-fg);
  font-weight: var(--fw-medium);
}
/* 표 칸 안에 들어가는 것은 더 작고 조용하게 둔다 - 줄마다 있어서 거르기 단추만큼 튀면 안 된다. */
.hall-chip.is-cell { padding: 1px 7px; font-size: var(--fs-11); background: transparent; }

/* 나라 칸: 국기 그림(관측소와 같은 flag-icons, G.flag) + 나라 이름. 관측소 무대 밖이라 테두리만 표 선 색으로 둔다. */
.hall-country { white-space: nowrap; }
.hall-country .globe-flag { width: 20px; height: 15px; margin-right: 6px; vertical-align: -2px;
  border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--surface-line); object-fit: cover; }
/* 폼은 화면 폭이 아니라 읽기 좋은 폭까지만 늘어난다(감사 62). */
.member-form { display: flex; flex-direction: column; gap: 10px; max-width: var(--form-max); }
.member-form label:not(.check) { font-size: 0.9rem; font-weight: 600; color: var(--text-strong); }
.member-form .muted { margin: 0; }
.member-form .btn-block { margin-top: 6px; }
/* 단추는 공용 크기 그대로(폼 열이 flex column 이라 늘어나지 않게). 전체 폭 단추가 필요하면 btn-block 을 쓴다. */
.member-form > .u-btn, .member-form > button, .member-form > .actions { align-self: flex-start; }
.mb-page-head { margin: 0; }
.input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-inner);
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--text-strong);
  font: inherit;
  font-size: 0.97rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.input::placeholder { color: var(--surface-dim); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 131, 255, 0.28); }
.code-input { font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0.35em; text-align: center; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; line-height: 1.6; cursor: pointer; }
.check input { margin-top: 4px; flex: none; width: 16px; height: 16px; accent-color: var(--accent-2); }
.check span { word-break: keep-all; }
.form-msg {
  margin: 16px 0 0 !important;
  padding: 12px 16px;
  border-radius: var(--radius-inner);
  font-size: 0.92rem;
  border: 1px solid transparent;
}
.form-msg.is-error { color: var(--danger-on-dark); background: rgba(243, 124, 184, 0.10); border-color: rgba(243, 124, 184, 0.32); }
.form-msg.is-ok { color: var(--info-on-dark); background: rgba(60, 207, 227, 0.08); border-color: rgba(60, 207, 227, 0.30); }
.resend-form { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.resend-form .actions { margin-top: 4px; }

.member-head h1 { margin-bottom: 6px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head h2, .panel-head .is-h2 { margin: 0; }
.domain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.domain-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-inner);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
}
.domain-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.domain-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.domain-name { font-size: 1.08rem; color: var(--text-strong); }
.domain-meta { font-size: 0.84rem; color: var(--muted); }
.domain-remove { margin: 0; flex: none; }
.domain-note { margin-top: 14px !important; }
.empty-box {
  padding: 22px 22px 24px;
  border-radius: var(--radius-inner);
  border: 1px dashed var(--line-strong);
}
.empty-box p { margin: 0 0 6px; }
.empty-box .actions { margin-top: 16px; }
.member-diagnosis:empty { display: none; }

/* 회원 진단 폼(도메인 카드 안)과 내 진단 기록(A4) */
.scan-form { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.scan-label { font-size: 0.86rem; font-weight: 600; color: var(--text-strong); }
.scan-row { display: flex; gap: 10px; }
.scan-row .input { flex: 1 1 auto; min-width: 0; padding: 11px 14px; }
.scan-row .btn-primary { flex: none; }
.scan-form .scan-hint { margin: 0; }
.scan-form .check { font-size: 0.86rem; color: var(--muted); }
.scan-form .form-msg { margin: 2px 0 0 !important; }
.scan-top-error { margin: 0 0 14px !important; }
.history-wrap { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.history-table th {
  text-align: left; font-size: 0.8rem; font-weight: 600; color: var(--muted);
  padding: 0 10px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.history-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.history-table th:first-child, .history-table td:first-child { padding-left: 0; }
.history-table th:last-child, .history-table td:last-child { padding-right: 0; text-align: right; }
.history-score { color: var(--text-strong); margin-right: 4px; }
.history-table .grade-pill { padding: 1px 9px; font-size: 0.78rem; font-weight: 700; }
.status-pill {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--r-pill);
  font-size: 0.8rem; font-weight: 700; border: 1px solid var(--line-strong); color: var(--muted);
}
.status-pill.is-running { color: var(--accent-on-dark); border-color: rgba(124, 131, 255, 0.45); background: var(--accent-soft); }
.status-pill.is-done { color: var(--info-on-dark); border-color: rgba(60, 207, 227, 0.35); background: rgba(60, 207, 227, 0.08); }
.status-pill.is-failed { color: var(--danger-on-dark); border-color: rgba(243, 124, 184, 0.35); background: rgba(243, 124, 184, 0.08); }
.history-note { margin-top: 12px !important; }
/* K5: 명예의 전당 배지 조각(내 진단 화면). 등재마다 미리보기와 복사할 조각을 한 덩어리로 둔다. */
.hall-badge { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.hall-badge .is-h3 { margin: 0 0 var(--sp-2); font-size: var(--h3-size); font-weight: var(--h3-weight); color: var(--text-strong); }
.hall-badge .u-badge-previews { margin: var(--sp-3) 0; }
/* 0.8.7: 명예의 전당의 국내 주요 사이트 관측 결과(#observed). 방법 한 줄과 타일 사이만 띄운다.
   좁은 화면에서 구간 이름·업종 이름이 접히는 규칙은 공용 부품(components.css .u-band-name·.u-rank-name) 한 곳에 있다. */
[data-observed] [data-observed-method] { margin: 0 0 var(--sp-3); }
[data-observed] .u-kv { margin-top: var(--sp-2); }
/* 정기 감시 패널(도메인 카드 안)과 감시 설정 화면(B3) */
.monitor-panel { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.monitor-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.monitor-title { font-size: 0.92rem; font-weight: 700; color: var(--text-strong); }
.monitor-plan { flex: 1 1 auto; }
.monitor-settings-link { flex: none; }
.status-pill.is-off { color: var(--muted); background: transparent; }
.monitor-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.monitor-facts div { min-width: 0; }
.monitor-facts dt { font-size: 0.78rem; color: var(--muted); margin: 0 0 2px; }
.monitor-facts dd { margin: 0; font-size: 0.9rem; color: var(--text); overflow-wrap: anywhere; }
.monitor-facts .grade-pill { padding: 1px 9px; font-size: 0.78rem; font-weight: 700; }
.trend-label { margin: 0 0 6px !important; font-size: 0.78rem; color: var(--muted); }
.trend-empty { margin: 0 !important; }
.trend-criteria { display: flex; align-items: center; gap: 6px; margin: 8px 0 0 !important; }
.trend-criteria-notice { margin: 6px 0 0 !important; color: var(--warning-on-dark); }
.monitor-settings .monitor-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0 8px; }
.monitor-form { margin-top: 18px; gap: 12px; }
.monitor-recipient { border: 0; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.monitor-recipient legend { font-size: 0.9rem; font-weight: 600; color: var(--text-strong); margin-bottom: 8px; padding: 0; }
.monitor-recipient .choice { align-items: flex-start; }
.monitor-recipient .choice input { margin-top: 5px; }
.monitor-recipient .choice > span { overflow-wrap: anywhere; }
/* 정기 리포트 설정(G1): 감시와 따로 켜고 끄는 묶음이라 얇은 선으로 감싸 한 덩어리로 보이게 한다. */
.monitor-report { margin: 4px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-sunken); display: flex; flex-direction: column; gap: 12px; }
.monitor-report legend { padding: 0 8px; font-size: 0.9rem; font-weight: 600; color: var(--text-strong); }
.monitor-report .u-field { margin: 0; }
/* /app 요금제 패널(B3b): 요금제 이름 배지, 핵심 한도 4칸, 계약 조정 표시. */
.plan-badge { padding: 2px 12px; border-radius: var(--r-pill); border: 1px solid rgba(167, 139, 250, 0.45); color: var(--surface-accent-text);
  font-family: "Poppins", var(--font); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; }
.plan-panel .plan-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan-adjusted { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: var(--r-pill); background: var(--accent-soft);
  color: var(--accent-on-dark); font-size: 0.72rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.plan-panel .plan-actions { margin-top: 16px; }
@media (max-width: 760px) {
  .app-main.is-member { padding-top: 28px; }
  .app-main.is-hall { padding-top: 28px; }
  .monitor-facts, .plan-panel .plan-facts { grid-template-columns: minmax(0, 1fr); }
  .domain-row { flex-direction: column; align-items: flex-start; }
  .scan-row { flex-direction: column; }
  .scan-row .btn-primary { width: 100%; }
  /* 좁은 화면: 표 대신 기록마다 카드 한 장(칸 이름은 data-label). */
  .history-table thead { display: none; }
  .history-table, .history-table tbody, .history-table tr, .history-table td { display: block; width: 100%; }
  .history-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .history-table td { padding: 3px 0 !important; border: 0; text-align: left !important; white-space: normal; }
  .history-table td[data-label] { display: flex; gap: 12px; align-items: center; }
  .history-table td[data-label]::before { content: attr(data-label); flex: none; width: 72px; font-size: 0.8rem; color: var(--muted); }
}

/* 일일 사고 점검(B4): /app 감시 패널 줄과 /app/domains/<id>/incidents */
.incident-line { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-inner); }
.incident-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.incident-body .btn-ghost, .incident-body .btn-link { margin-left: auto; }

/* ── AI 답변 노출 추적(/app/visibility/<id>, B5) ─────────────────────────── */
.app-main.is-member.is-vis { max-width: 1040px; }
.vis-model { display: inline-block; margin-left: 6px; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
.vis-form textarea.input { resize: vertical; min-height: 84px; }
.vis-competitors { border: 0; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vis-competitors legend { font-size: 0.9rem; font-weight: 600; color: var(--text-strong); margin-bottom: 6px; }
/* 추적 질문 한 줄. 입력칸이 판 폭을 다 쓰고 [줄 지우기] 는 글자 폭만 차지한다. */
.vis-qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.vis-qrow + .vis-qrow { margin-top: 8px; }
[data-qrows-add] { margin-top: 8px; }

.vis-competitor-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.vis-competitor-row .input, .vis-form .input { padding: 10px 14px; }
.vis-upsell { margin: 14px 0 0; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-inner);
  font-size: 0.92rem; color: var(--muted); }
.vis-upsell a { color: inherit; }
.vis-run { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.vis-results .vis-run:first-of-type { border-top: 0; padding-top: 0; }
.vis-run-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.vis-run-meta { font-size: 0.84rem; color: var(--muted); }
.vis-status { display: inline-block; padding: 1px 10px; border-radius: var(--r-pill); font-size: 0.78rem; border: 1px solid var(--line-strong); }
.vis-status.is-done { color: var(--info-on-dark); border-color: rgba(60, 207, 227, 0.35); }
.vis-status.is-running { color: var(--accent-on-dark); border-color: rgba(124, 131, 255, 0.45); }
.vis-status.is-failed { color: var(--danger-on-dark); border-color: rgba(243, 124, 184, 0.35); }
.vis-progress { margin: 0; font-size: 0.9rem; color: var(--muted); }
.vis-progress.is-failed { color: var(--danger-on-dark); }
.vis-table-wrap { overflow-x: auto; }
.vis-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.vis-table th, .vis-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.vis-table thead th { font-size: 0.78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.vis-table tbody th { font-weight: 600; color: var(--text-strong); }
.vis-engine-table tbody th .vis-model { display: block; margin: 2px 0 0; }
.vis-num { font-weight: 700; color: var(--text-strong); }
.vis-sub { display: block; font-size: 0.76rem; color: var(--muted); }
.vis-meter { display: block; width: 100%; max-width: 120px; height: 5px; margin: 4px 0 2px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.vis-meter-fill { display: block; width: var(--w); height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.vis-q { min-width: 200px; max-width: 320px; overflow-wrap: anywhere; }
.vis-cell { white-space: nowrap; }
.vis-cell.is-hit { color: var(--text-strong); font-weight: 600; }
.vis-badge { display: inline-block; margin: 3px 4px 0 0; padding: 0 8px; border-radius: var(--r-pill); font-size: 0.74rem; border: 1px solid rgba(60, 207, 227, 0.35);
  color: var(--info-on-dark); white-space: nowrap; }
.vis-badge.is-rank { border-color: rgba(124, 131, 255, 0.45); color: var(--accent-on-dark); }
.vis-badge.is-failed { border-color: rgba(243, 124, 184, 0.35); color: var(--danger-on-dark); }
.vis-foot { margin: 0; font-size: 0.86rem; color: var(--muted); }
.vis-foot strong { color: var(--text-strong); }
.vis-answers { border: 1px solid var(--line); border-radius: var(--radius-inner); padding: 10px 14px; }
.vis-answers summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.vis-answer-engine { margin-top: 12px; }
.vis-answer-engine-name { margin: 0 0 6px; font-size: 0.84rem; font-weight: 700; color: var(--text-strong); }
.vis-answer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vis-answer { padding: 10px 12px; border-radius: var(--radius-inner); background: var(--panel-2); border: 1px solid var(--line); min-width: 0; }
.vis-answer.is-failed { border-color: rgba(243, 124, 184, 0.3); }
.vis-answer-meta { margin: 0 0 4px; font-size: 0.78rem; color: var(--muted); }
.vis-answer-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.88rem; max-height: 320px; overflow-y: auto; }
.vis-cites { margin: 6px 0 0; font-size: 0.78rem; color: var(--muted); }
.vis-cite { display: inline-block; margin: 2px 4px 0 0; padding: 0 6px; border-radius: var(--r-sm); border: 1px solid var(--line); font-family: var(--mono); }
.vis-domains-title { margin: 0 0 6px; font-size: 0.84rem; font-weight: 700; color: var(--text-strong); }
.vis-domain-list { margin: 0; padding-left: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; font-size: 0.86rem; }
.vis-domain-list li { min-width: 0; overflow-wrap: anywhere; }
.vis-domain { font-family: var(--mono); color: var(--text-strong); }
.vis-domain-list li.is-ours .vis-domain { color: var(--info-on-dark); font-weight: 700; }
.vis-domain-list li.is-competitor .vis-domain { color: var(--rose-on-dark); }
.vis-sub-inline { font-size: 0.76rem; color: var(--muted); }
.vis-badge.is-brand { border-color: rgba(251, 191, 36, 0.45); color: var(--warning-on-dark); }
.vis-badge.is-searched { border-color: rgba(167, 139, 250, 0.45); color: var(--brand-lilac-2); }
.vis-line { margin: 0; font-size: 0.86rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.vis-line .btn-ghost { margin-left: auto; }
@media (max-width: 760px) {
  .vis-competitor-row { grid-template-columns: 1fr; }
  .vis-engine-table thead { display: none; }
  .vis-engine-table, .vis-engine-table tbody, .vis-engine-table tr, .vis-engine-table th, .vis-engine-table td { display: block; width: 100%; }
  .vis-engine-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .vis-engine-table th, .vis-engine-table td { border: 0; padding: 3px 0; }
  .vis-engine-table td[data-label] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .vis-engine-table td[data-label]::before { content: attr(data-label); flex: none; width: 72px; font-size: 0.78rem; color: var(--muted); }
  .vis-engine-table .vis-meter { max-width: 90px; }
  .vis-q { min-width: 160px; }
}
.tr-line .btn-ghost { margin-left: auto; }
.tr-foot { text-align: center; margin: 0; }

/* ── 정기 리포트(Task D1): /app/reports, /report/<token>, 관리자 회원 상세 ─────────── */
.report-period-head .is-h1 { overflow-wrap: anywhere; }
.report-period-score { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.report-period-score strong { font-size: 2.4rem; line-height: 1.1; color: var(--text-strong); }
.report-period-sub { margin: 18px 0 8px; font-size: 0.95rem; color: var(--text-strong); }
.report-period-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.report-period-list li { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-inner);
  background: var(--panel-2); overflow-wrap: anywhere; }
/* 값 하나짜리 줄은 전폭 상자를 쓰지 않는다(감사 69). 길면 여러 칸으로 흘린다. */
.report-period-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.report-period-actions { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.report-period-actions li { overflow-wrap: anywhere; }

/* ============================================================================
   넓은 화면 쓰기 (Task D2). 화면 폭 이름은 tokens.css·관리자 화면 꼬리 표시와 같다.
     S  ~767 · M 768~1279 · L 1280~1679 · XL 1680~
   회원 화면은 좁은 화면에서 읽기 좋은 한 줄 폭을 유지하고, L 부터 폭을 늘려
   표·그래프·도메인 카드가 남는 자리를 쓰게 한다.
   ============================================================================ */

/* 두 칸 배치. 기본은 한 칸이고 L 부터 나뉜다. 페이지가 골라서 쓴다. */
.app-cols { display: grid; gap: 20px; align-items: start; min-width: 0; }
.app-cols > * { min-width: 0; }

@media (min-width: 1280px) {
  .app-main.is-member { max-width: 1240px; padding-left: 32px; padding-right: 32px; }
  /* 명예의 전당은 카드 격자라 글줄 길이 제한을 받지 않는다. 한 줄에 더 담는 편이 읽기 좋다. */
  .app-main.is-hall { max-width: 1400px; padding-left: 32px; padding-right: 32px; }
  /* 진단 결과는 점수·영역·지적이 나란히 놓이는 화면이라 1040px 에 갇히면 넓은 화면을 절반도 못 쓴다. */
  .app-main.is-wide { max-width: 1240px; padding-left: 32px; padding-right: 32px; }
  .app-main.is-member.is-vis { max-width: 1400px; }
  .app-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .app-cols.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 한도·상태 칸은 칸 수를 고정하지 않고 남는 폭을 채운다. */
  .monitor-facts,
  .plan-panel .plan-facts,
  .monitor-settings .monitor-facts { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

@media (min-width: 1680px) {
  .app-main.is-member { max-width: 1480px; padding-left: 48px; padding-right: 48px; }
  .app-main.is-hall { max-width: 1680px; padding-left: 48px; padding-right: 48px; }
  .app-main.is-wide { max-width: 1480px; padding-left: 48px; padding-right: 48px; }
  .app-main.is-member.is-vis { max-width: 1600px; }
  /* 도메인 카드는 각자 완결된 묶음이라 두 장씩 나란히 둔다. */
  .domain-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 16px; }
  .domain-item { height: 100%; }
}

/* ============================================================================
   회원 화면 틀(templates/app/_layout.html). 회원 영역의 모든 화면이 폭 규칙 하나를 쓴다.
   메뉴를 옮겨도 본문 왼쪽·오른쪽 가장자리가 움직이지 않게, 화면마다 폭 클래스를 두지 않는다
   (예전 is-member·is-vis·is-wide 로 갈라 쓰던 폭은 회원 영역에서 쓰지 않는다. tests/test_member_layout.py).
     S  ~767      메뉴 줄(본문 위, 줄바꿈) + 본문 전체 폭
     M  768~1279  메뉴 줄 + 본문 전체 폭(좌우 여백만 커진다)
     L  1280~1679 왼쪽 고정 메뉴 + 본문, 바깥 최대 폭 1240px(머리 막대와 같은 폭)
     XL 1680~     왼쪽 고정 메뉴 + 본문, 바깥 최대 폭 1480px
   글줄 폭은 ch 가 아니라 em 으로 묶는다(한글 한 글자는 ch 두 개 폭이다).
   ============================================================================ */
html { scrollbar-gutter: stable; }
.app-main.is-shell {
  --mb-max: 100%;
  --mb-side-w: 200px;
  --mb-gutter: var(--sp-4);
  max-width: var(--mb-max);
  padding: var(--sp-5) var(--mb-gutter) var(--sp-9);
  gap: 0;
}
.mb-layout { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.mb-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; flex: 1 1 auto; }
.mb-col > .u-tabs { margin-bottom: 0; }
.mb-col > .u-page-head { margin-bottom: 0; }

/* 메뉴: 좁은 화면은 줄바꿈하는 알약 줄(가로 스크롤 상자를 만들지 않는다), 넓은 화면은 왼쪽 세로 목록 */
.mb-side { min-width: 0; }
.mb-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.mb-group-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--muted); white-space: nowrap;
}
.mb-group-link:hover { color: var(--text-strong); border-color: var(--line-strong); text-decoration: none; }
.mb-group-link[aria-current] { color: var(--surface-accent-text); border-color: var(--surface-accent); background: var(--surface-accent-soft); }

/* 도메인 줄: 도메인 이름(또는 고르기) + 분석 에이전트 신호등 */
.mb-domain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); min-width: 0; }
.mb-domain-name { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--text-strong); overflow-wrap: anywhere; }
.mb-domain-lamp { margin-left: auto; min-width: 0; color: inherit; }
.mb-domain-lamp:hover { text-decoration: none; }
.mb-domain-lamp:hover .u-lamp { border-color: var(--line-strong); }
.mb-switch { position: relative; min-width: 0; }
.mb-switch summary {
  display: inline-flex; align-items: baseline; gap: var(--sp-2); cursor: pointer; list-style: none;
  padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
}
.mb-switch summary::-webkit-details-marker { display: none; }
.mb-switch-name { font-size: var(--fs-16); color: var(--text-strong); overflow-wrap: anywhere; }
.mb-switch-hint { font-size: var(--fs-12); color: var(--muted); }
.mb-switch-list {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 100%; max-width: 90vw;
  margin: 0; padding: var(--sp-1); list-style: none;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--sh-dark-2);
}
.mb-switch-list a { display: block; padding: 8px 12px; border-radius: var(--r-sm); color: var(--text); white-space: nowrap; }
.mb-switch-list a:hover { background: var(--surface-accent-soft); text-decoration: none; }
.mb-switch-list a[aria-current] { color: var(--surface-accent-text); font-weight: var(--fw-bold); }

@media (min-width: 768px) {
  .app-main.is-shell { --mb-gutter: var(--sp-6); }
}
@media (min-width: 1280px) {
  .app-main.is-shell { --mb-max: 1240px; padding-top: var(--sp-7); }
  .mb-layout { flex-direction: row; align-items: flex-start; gap: var(--sp-6); }
  .mb-side { flex: none; width: var(--mb-side-w); position: sticky; top: calc(var(--header-h, 64px) + var(--sp-4)); }
  .mb-groups { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .mb-group-link { display: flex; width: 100%; min-height: 40px; border-color: transparent; border-radius: var(--r-md); padding: 8px 14px; }
  .mb-group-link[aria-current] { border-color: transparent; box-shadow: inset 3px 0 0 var(--surface-accent); }
}
@media (min-width: 1680px) {
  .app-main.is-shell { --mb-max: 1480px; --mb-side-w: 220px; }
}

/* ── 한눈에 보기(/app) 도메인 카드 ────────────────────────────────────────
   바깥 폭은 회원 틀이 정하고, 카드 안만 내용에 맞춰 칸을 나눈다. XL 에서 카드 두 장씩. */
.mb-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.mb-cards > .u-panel { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; }
.mb-cards > .u-panel > .u-panel-head { margin-bottom: 0; }
.mb-week { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.mb-week .u-tiles { margin-bottom: 0; }
.mb-week-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.mb-week-block { min-width: 0; }
.mb-week-title { margin: 0 0 var(--sp-2); font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--text-strong); }
.mb-week-block .mb-share + .mb-week-title { margin-top: var(--sp-4); }
.mb-share { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.mb-share li { display: grid; gap: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-inner); min-width: 0; }
.mb-share li > span:first-child { font-size: var(--fs-12); color: var(--muted); }
.mb-share strong { font-size: var(--fs-18); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.mb-top-pages { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: var(--fs-13); }
.mb-top-pages li { min-width: 0; }
.mb-top-pages li::marker { color: var(--muted); }
.mb-top-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.mb-top-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); color: var(--text); }
.mb-top-pages .u-hint { flex: none; font-variant-numeric: tabular-nums; }
.mb-pair { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.mb-pair .mb-week-title { margin: 0; }
.mb-pair-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.mb-pair-item { display: grid; gap: 2px; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-inner); color: inherit; min-width: 0; }
.mb-pair-item:hover { border-color: var(--line-strong); text-decoration: none; }
.mb-pair-label { font-size: var(--fs-12); color: var(--muted); }
.mb-pair-value strong { font-size: var(--fs-22); color: var(--text-strong); margin-right: 2px; }
.mb-pair .u-hint, .mb-week .u-hint { margin: 0; }
.mb-cards .u-kv { margin: 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.mb-card-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* 기능별 상태 한 줄씩: 이름 | 핵심 수치(없으면 무엇을 하고 어떻게 시작하는지) | 들어가기 */
.mb-features { padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.mb-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); align-items: baseline;
  padding: var(--sp-2) 0; border-top: 1px solid var(--line); min-width: 0;
}
.mb-feature:first-of-type { border-top: 0; }
.mb-feature-name { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--text-strong); }
.mb-feature-value { grid-column: 1 / -1; grid-row: 2; font-size: var(--fs-14); color: var(--text); min-width: 0; word-break: keep-all; }
.mb-feature-value .u-hint { display: inline; }
.mb-feature-link { grid-column: 2; grid-row: 1; font-size: var(--fs-13); font-weight: var(--fw-semibold); white-space: nowrap; }
@media (min-width: 768px) {
  .mb-feature { grid-template-columns: 8.5em minmax(0, 1fr) auto; }
  .mb-feature-value { grid-column: 2; grid-row: 1; }
  .mb-feature-link { grid-column: 3; }
}
/* 두 칸 묶음(설정: 요금제 | 계정). 좁으면 한 칸. */
.mb-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.mb-grid-2 > .u-panel { margin: 0; }
.mb-col .scan-form { border-top: 0; padding-top: 0; }
/* 좁은 화면: 요약 숫자 세 칸과 비중 세 칸은 한 줄에 둔다(세로로 쌓으면 카드 한 장이 화면 네 개 길이가 된다). */
.mb-week .u-tiles[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
@media (max-width: 767px) {
  .mb-week .u-tile { padding: var(--sp-2) var(--sp-3); }
  .mb-week .u-tile-value { font-size: var(--fs-22); }
  .mb-week .u-tile-period { display: none; }
  .mb-share strong { font-size: var(--fs-16); }
  .mb-pair-value strong { font-size: var(--fs-18); }
}
@media (min-width: 1024px) {
  .mb-week-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mb-grid-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (min-width: 1680px) {
  .mb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-cards > .u-panel:only-child { grid-column: 1 / -1; }
}

/* 회원 화면 목록 표 검색 양식(ui.list_search). 관리자 화면 규칙은 admin.css 에 따로 있다. */
.mb-col .filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.mb-col .filters input[type=text] {
  flex: 0 1 20em; min-width: 0; max-width: 100%; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-field); background: var(--panel-2); color: var(--text-strong); font: inherit; font-size: var(--fs-14);
}
.mb-col .filters input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--surface-accent-soft); }
.mb-col .filters button {
  min-height: 36px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--btn-radius);
  background: transparent; color: var(--text); font: inherit; font-size: var(--fs-13); font-weight: var(--fw-bold); cursor: pointer;
}
.mb-col .filters button:hover { border-color: var(--accent-2); }
.mb-col .filters a { font-size: var(--fs-13); }

/* 감시 주소(감시 화면 표·한눈에 보기 카드 목록) */
.mb-inline-edit { display: inline-block; position: relative; vertical-align: middle; }
.mb-col td.is-actions > form { display: inline-block; vertical-align: middle; margin: 0 0 0 var(--sp-1); }
.mb-col td.is-actions { white-space: nowrap; }
.mb-inline-edit summary { list-style: none; cursor: pointer; }
.mb-inline-edit summary::-webkit-details-marker { display: none; }
.mb-inline-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.mb-inline-form .u-input { width: 12em; max-width: 100%; }
.mb-target-add { margin-top: var(--sp-4); max-width: none; }
.mb-grid-2.is-form { gap: var(--sp-3) var(--sp-5); }
.mb-targets { padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.mb-target-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.mb-target-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-inner); min-width: 0;
}
.mb-target-name { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
.mb-target-name .u-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mb-target-score { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) {
  .mb-target-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .mb-target-alert { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .mb-grid-2.is-form { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* 업종별 점수 화면의 "궁금한 점"(templates/benchmark.html). 묻는 말은 굵게, 답은 한 칸 들여 읽는다.
   글 폭은 칸 폭을 다 쓴다(docs/4.design-system.md 4-3-1, 2026-09-20). */
.bm-faq { margin: 0; display: grid; gap: var(--sp-4); }
.bm-faq dt { font-weight: var(--fw-bold); color: var(--surface-ink-strong); }
.bm-faq dd { margin: var(--sp-1) 0 0; color: var(--surface-ink-2); line-height: 1.7; word-break: keep-all; }

/* 진단 결과의 "같은 업종과 비교" 칸(templates/_report_body.html). 위의 전체 비교 칸과 같은 모양을 쓰고
   업종 고르기만 한 줄 더 둔다. */
.bench-box [data-bench-pick] {
  max-width: 100%; margin-top: var(--sp-1); padding: 2px var(--sp-2);
  border: 1px solid var(--surface-line); border-radius: var(--r-sm);
  background: var(--surface-panel); color: var(--surface-ink); font-size: var(--fs-13);
}