/* base.css — 세 뷰가 공유하는 부품. 말풍선 · 칩 · 버튼 · 팝오버 · 답변 본문.
 *
 * ⚠ **여기에 역할별 분기를 넣지 말 것.** 무엇을 감추는지는 서버가 정한다
 * (CLAUDE.md — "보여줄 것을 정하는 주체가 클라이언트면 그것은 접근제어가 아니다").
 * `db-marketing` · `lab` 은 같은 부품 위에 자기 것을 **더한다.**
 *
 * 화면 전체의 골격(헤더 배치 · 첫 화면 · 입력바)은 뷰마다 다르므로 여기 없다.
 * FA 것은 fa.css 에 있다. */

/* ── 초기화 ─────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-tx);
  font-family: var(--ff-body);
  word-break: keep-all;              /* N7 — 한글 낱말이 잘리면 안 된다 */
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; color: inherit; }
input  { font-family: inherit; }
a { color: var(--c-brand); }
a:hover { color: var(--c-brand-strong); }

/* 상태를 [hidden] 하나로 다룬다 — 부품마다 display 가 달라 JS 가 기억할 수 없다 */
[hidden] { display: none !important; }

/* 키보드 이동 자국은 남긴다. 히트 타깃(44px)만 지키고 초점을 지우면 안 된다 */
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* 아이콘은 fa.html 의 <symbol> 스프라이트를 <use> 로 참조한다 (§8⑤).
   색은 stroke="currentColor" 라 부모의 color 를 따른다 */
.ic { display: block; flex: 0 0 auto; }

/* ── 애니메이션 ─────────────────────────────────────────── */

@keyframes v2Rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes v2Dot  { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  .msg { animation: none; }
  .dots span { animation: none; opacity: .6; }
}

/* ── 아바타 ─────────────────────────────────────────────── */

.avatar {                       /* 헤더 — 블루 원 */
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-brand); color: var(--c-surface);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.avatar--sm {                   /* 서랍 머리 — 헤더와 같은 원, 한 치수 작게 */
  width: 32px; height: 32px;
}
.avatar--msg {                  /* 말풍선 옆 — 연블루 원 */
  width: 28px; height: 28px;
  background: var(--c-brand-soft); border: 1px solid var(--c-bd-chip);
  color: var(--c-brand); margin-top: 2px;
}

/* ── 대화 ───────────────────────────────────────────────── */

.msg { animation: v2Rise .22s ease both; }

/* 시스템 칩 — 날짜, 상담 범위 변경 안내. 대화 가운데에 남는다 */
.msg--sys { display: flex; justify-content: center; }
.sys-chip {
  background: var(--c-brand-soft); color: var(--c-brand);
  border-radius: 13px; padding: 5px 12px;
  font: 500 var(--fs-cap)/1.4 var(--ff-body);
}

/* 내 말 */
.msg--user { display: flex; justify-content: flex-end; align-items: flex-end; gap: 6px; }
.msg-time { font: 400 var(--fs-note)/1.4 var(--ff-body); color: var(--c-tx-faint); flex: 0 0 auto; padding-bottom: 3px; }
.bubble-out {
  max-width: var(--w-out);
  background: var(--c-brand); color: var(--c-surface);
  border-radius: var(--r-out); padding: 11px 14px;
  font: 400 var(--fs-body)/1.65 var(--ff-body);
}

/* 상대 말 */
.msg--agent { display: flex; gap: 8px; align-items: flex-start; }
.msg-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; max-width: var(--w-in); }
.bubble-in {
  background: var(--c-surface);
  border-radius: var(--r-in); padding: 13px 15px;
  box-shadow: var(--sh-bubble);
  display: flex; flex-direction: column; gap: 9px;
}

/* 대기 표시 — **회색 점 세 개만.** 처리 과정 문구는 FA 화면 금지 사항이다 */
.bubble-in--dots { padding: 14px 17px; flex-direction: row; align-items: center; }
.dots { display: flex; gap: 5px; }
.dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--c-tx-faint); animation: v2Dot 1.1s infinite; }
.dots span:nth-child(2) { animation-delay: .16s; }
.dots span:nth-child(3) { animation-delay: .32s; }

/* 오류 말풍선. **S5(States)가 최종 모양을 정한다** — 지금은 실패했을 때 대화가
   멈춘 것처럼 보이지 않게 하는 최소한이다 */
.bubble-in--warn { background: var(--c-warn-bg); border: 1px solid var(--c-warn-bd); }
.bubble-in--warn p { color: var(--c-warn-tx); }

/* ── 답변 본문 ──────────────────────────────────────────── */
/* S3 의 render.js 가 내는 결과물이 여기에 담긴다. 클래스를 먼저 잡아 두면
   렌더러가 서식을 인라인 style 로 들고 다니지 않는다 */

.answer > * { margin: 0; }
.answer p { font: 400 var(--fs-body)/1.75 var(--ff-body); color: var(--c-tx); }
/* 규정 문장. ⚠ **FA 화면은 이것을 끈다**(fa.css · 2026-08-31) — 굵게는 화면마다
   갈리는 규칙이라 여기가 공용 기본값이고 뷰가 덮는다. 검수·디버깅 뷰는 이대로 쓴다 */
.answer strong { font-weight: 700; }

.answer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; }
/* 글머리표를 flex 자식으로 두지 않는다 — li 가 flex 가 되면 <strong> 이 저 혼자
   flex 항목이 되어 굵은 낱말에서 줄이 끊긴다. 실제로 그렇게 깨졌다 */
.answer li { position: relative; padding-left: 12px; font: 400 var(--fs-body)/1.7 var(--ff-body); }
.answer li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--c-brand);
}

/* 표는 말풍선을 밀지 않고 **표만** 가로로 흐른다.
   **D5 는 가로 스크롤로 정해졌다 (2026-08-21).** 근거 청크에 13~14열이 있는 것과
   답변에 그것이 실리는 것은 다른 문제였다 — 그 표를 물어 오는 질의 7건을 실제로
   생성시켜 보니 13~14열 표가 나온 적이 한 번도 없다(모델이 목록으로 푼다).
   답변에서 관측된 최대 폭은 3열(폰에서 열당 130px)이라 접거나 캡처로 바꾸는
   장치는 **일어나지 않은 경우를 위한 것**이 된다. 측정은 README §15 참조 */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-bd); border-radius: 9px; }
table.md { border-collapse: collapse; width: 100%; font: 400 var(--fs-table)/1.6 var(--ff-body); }
table.md th, table.md td {
  border-right: 1px solid var(--c-bd-faint); border-bottom: 1px solid var(--c-bd-faint);
  padding: 8px 10px; text-align: left; vertical-align: top; white-space: nowrap;
}
table.md th:last-child, table.md td:last-child { border-right: 0; }
table.md tbody tr:last-child td { border-bottom: 0; }
table.md thead th { background: var(--c-surface-soft); color: var(--c-tx-2); font-weight: 600; }

/* 화면 캡처 — 답변 아래. 조작 절차 질문에서는 이것이 답의 핵심이다 */
.shots { display: flex; flex-direction: column; gap: 8px; }
.shots-label { font: 500 var(--fs-cap)/1.4 var(--ff-body); color: var(--c-tx-4); }
.shots-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* 78×104 고정 틀. 원본은 453×219 ~ 960×2079 로 종횡비가 제각각이라 contain 이다 —
   cover 로 채우면 세로로 긴 폰 캡처가 맨 윗줄만 보이는 조각이 된다 */
.shot {
  width: 78px; height: 104px; padding: 4px;
  border: 1px solid var(--c-bd); border-radius: 8px; background: var(--c-surface-soft);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.shot:hover { border-color: var(--c-brand); }
.shot img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* 크게 보기. **확대해도 화면 높이를 넘지 않는다**(F7) — 넘으면 폰에서 스크롤로
   찾아야 하고, 캡처는 한눈에 보이는 것이 쓸모의 전부다 */
.lightbox {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(27, 29, 34, .82);
  display: flex; align-items: center; justify-content: center; padding: 24px 16px;
}
.lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 8px; background: var(--c-surface);
}
.lightbox-close {
  position: absolute; top: 10px; right: 10px;
  width: var(--tap); height: var(--tap); border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: var(--c-surface);
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .28); }

/* ── 칩 · 버튼 ──────────────────────────────────────────── */

/* 후속 선택지 · 다시 시도. 흰 알약에 블루 글씨 */
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
/* 말풍선에 딸리지 않고 대화 가운데에 서는 칩 — 끝난 상담의 `새로 물어보기` */
.chip-row--center { justify-content: center; }
.chip {
  display: flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 0 15px;
  border-radius: var(--r-pill); border: 1px solid var(--c-bd-chip);
  background: var(--c-surface); color: var(--c-brand);
  font: 600 var(--fs-btn)/1 var(--ff-body);
}
.chip:hover { border-color: var(--c-brand); background: var(--c-brand-soft); }
/* 고른 선택지. 사라지게 하지 않고 **골랐다는 표시를 남긴다** — 위로 올려 보면
   어느 쪽 기준으로 답을 받았는지 대화만 보고 알 수 있어야 한다 */
.chip.is-on { border-color: var(--c-brand); background: var(--c-brand-soft); }
.chip .ic-check { display: none; }
.chip.is-on .ic-check { display: block; }

/* 헤더의 상태 칩 — 값이 정해지면 blue on 상태가 된다 */
.chip--head { gap: 5px; padding: 0 12px; color: var(--c-tx-3); }
.chip--head.is-on { color: var(--c-brand); background: var(--c-brand-soft); border-color: var(--c-brand); }

/* 원형 실행 버튼 (보내기) */
.btn-round {
  width: var(--tap); height: var(--tap); border-radius: 50%;
  background: var(--c-brand); color: var(--c-surface);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.btn-round:hover { background: var(--c-brand-strong); }
.btn-round:disabled { background: var(--c-tx-off); cursor: default; }

/* ── 상담 범위 팝오버 ────────────────────────────────────────── */
/* 목록을 고르는 자리. 지금 쓰는 곳은 상담 범위 하나다.
 *
 * **한때 하단 시트였다** (2026-08-21 에 걷어냄). 시트는 스크림으로 대화를 덮는데,
 * 여는 손잡이는 헤더 오른쪽 칩이라 **누른 자리와 열리는 자리가 화면 양끝으로
 * 갈렸다.** 토스가 셀렉터를 바텀시트에서 메뉴로 옮기며 "물리적 거리" 라고 부른
 * 것이고, 10일 A/B 에서 안드로이드 항목 클릭율이 10% 올랐다. 머티리얼 3 도
 * "메뉴 항목을 바텀시트에 넣는 것은 권장하지 않는다" 고 적는다 — 바텀시트는
 * 긴 목록이나 항목마다 설명·아이콘이 필요할 때다. 우리 건은 선택지 셋짜리
 * 값 고르기이고 현재 값을 표시하는 칩에 붙어 있다.
 *
 * 값은 데스크톱 시안(`design/FaDesktop.dc.html`)에서 그대로 가져왔다 —
 * **폰과 노트북이 같은 부품을 쓴다.** */

/* 덮개에 **배경색이 없다.** 클릭을 받으려고 깔아 둔 것뿐이라 대화가 그대로 밝다.
   `.app` 기준으로 앉는다(fixed 가 아니다) — 노트북 폭에서 `.app` 은 가운데
   430px 짜리 기둥이라, 화면 기준으로 잡으면 팝오버가 칩에서 떨어져 나간다 */
.pop { position: absolute; inset: 0; z-index: 9; }

/* 칩 바로 아래. 헤더가 60px 이라 56px 이면 4px 겹쳐 물려 있는 것으로 읽힌다 */
.pop-panel {
  position: absolute; top: 56px; right: 14px;
  width: 300px; max-width: calc(100% - 28px);
  background: var(--c-surface);
  border: 1px solid var(--c-bd); border-radius: var(--r-pop);
  box-shadow: var(--sh-pop);
  padding: 16px 15px 15px;
  display: flex; flex-direction: column; gap: 4px;
  animation: v2Rise .16s ease both;
}
/* 헤더 제품명은 14.5px 인데 여기는 14px 다 — 데스크톱 팝오버 값이라 그대로 뒀다.
   `--fs-title` 을 쓰면 그 0.5px 이 헤더까지 따라 움직인다 */
.pop-title { margin: 0; font: 700 14px/1.4 var(--ff-title); }
.pop-desc  { margin: 0 0 11px; font: 400 var(--fs-table)/1.65 var(--ff-body); color: var(--c-gray); }
.pop-list  { display: flex; flex-direction: column; gap: 7px; }
.pop-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 0 15px; border-radius: 11px;
  border: 1px solid var(--c-bd); background: var(--c-surface); color: var(--c-tx-2);
  font: 600 var(--fs-body)/1.4 var(--ff-body); text-align: left;
}
.pop-opt[aria-checked="true"] { border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand); }
.pop-opt .ic { display: none; }
.pop-opt[aria-checked="true"] .ic { display: block; }