/* 화면 다듬기 — 2026-09-18 사용자 요청.
 *
 * 모든 화면에서 맨 마지막에 실린다. 앞 파일들을 고치지 않고 여기서만 덮어쓴다 —
 * design.css 는 압축본이라 손대기 어렵고, ux-upgrades.css 는 6개 화면에만
 * 실려서 홈·복습 화면이 빠진다.
 *
 * 색은 토큰만 쓴다(--surface, --line, --muted …). 다크 모드가 같이 따라온다.
 */

/* ── 1. 예시 문의 칩: 글자 길이만큼 ─────────────────────────────────────────
 * 2열 격자에서는 "빌지가 출력되지 않아요" 같은 짧은 문장도 칸을 다 차지해
 * 오른쪽이 크게 빈다. 줄바꿈되는 흐름 배치로 둔다(사용자 지시).
 * 좁은 화면에서는 아래의 반응형 규칙이 한 줄에 하나씩 세운다. */
body[data-page="agent"] .example-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 2px 10px;
}

body[data-page="agent"] .example-chip {
  width: auto;
  max-width: 100%;
  min-height: 0;
  padding: 9px 13px;
  font-size: 14px;
}

/* ── 2. 내 평가 현황: 그라데이션 빼고 흰 바탕 ───────────────────────────── */
.learning-summary {
  background: var(--surface);
}

/* ── 3. 여백 ───────────────────────────────────────────────────────────── */

/* 답안 현황 — 번호 격자가 패널 가장자리에 붙고, 범례와 버튼이 서로 눌려 있었다. */
.exam-sheet-panel {
  padding: 20px;
  gap: 14px;
}

.exam-sheet-summary {
  padding-bottom: 2px;
}

.exam-sheet {
  gap: 8px;
  margin: 2px 0;
}

.exam-sheet-legend {
  gap: 8px 14px;
  margin-top: 2px;
  font-size: 12px;
}

.exam-sheet-panel .btn.small {
  margin-top: 6px;
}

/* 고객 채팅 상담 머리 — 말머리(01)와 제목이 붙어 있었다. */
.conversation-head {
  gap: 14px;
  padding: 22px 24px;
  align-items: flex-start;
}

.exam-pane-kicker {
  margin-bottom: 6px;
}

.conversation-head #chat-title {
  margin: 0 0 6px;
}

.conversation-head .badge {
  margin-top: 2px;
}

/* ── 4. 이전·다음은 크게 ───────────────────────────────────────────────── */
/* ux-upgrades.css 의 #run-screen .exam-actions .btn(아이디 1+클래스 2)이
 * 더 구체적이라 이 규칙을 덮어써 왔다. #run-screen 을 앞에 붙여 아이디 2개로
 * 만들어 이긴다. */
#run-screen #btn-prev,
#run-screen #btn-next {
  min-width: 108px;
  min-height: 52px;
  padding: 13px 26px;
  font-size: 16px;
  font-weight: 650;
}

/* '제출 전 확인' 은 오른쪽 안내 상자 아래로 옮긴다(quiz.html). 이 자리에서는
 * 폭을 가득 채워 눌러야 할 단추임을 분명히 한다. */
.exam-side .exam-submit-cta {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  font-size: 16px;
}

/* ── 5. 글자 크기를 한 단계씩 올린다 ───────────────────────────────────── */
body {
  font-size: 17px;
}

.meta {
  font-size: 13px;
}

.summary-note,
.side-note {
  font-size: 14px;
}

.exam-note {
  font-size: 13px;
}

.badge {
  font-size: 13px;
}

.btn {
  font-size: 15px;
}

.header-nav a {
  font-size: 15px;
}

.exam-sheet button {
  font-size: 14px;
}

/* ── 6. 로그인한 계정 — 오른쪽 위 ──────────────────────────────────────── */
.account-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.account-chip-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.account-chip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-chip-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.account-chip-copy strong {
  font-size: 13px;
  font-weight: 650;
}

.account-chip-copy span {
  font-size: 12px;
  color: var(--muted);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-chip .btn {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13px;
}

/* 응시 화면에는 응시자 표시(.quiz-user)가 따로 있다. 계정 표시가 붙으면
 * 같은 사람이 두 번 나오므로 그때만 감춘다. */
.header-tools:has(.account-chip) #quiz-user {
  display: none;
}

@media (max-width: 900px) {
  .account-chip-copy { display: none; }
}

/* ── 7. 헤더·테마 스위치 ────────────────────────────────────────────────
 * 계정 정보가 비동기로 붙기 전에도 같은 폭을 예약해 내비게이션이 움직이지
 * 않게 한다. 테마 선택 상태는 배경을 바꾸는 대신 선택판이 옆으로 이동한다. */
.theme-picker {
  flex: 0 0 138px;
  width: 138px;
  opacity: 0;
  pointer-events: none;
}

.theme-switch {
  --theme-index: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex: 0 0 138px;
  width: 138px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.theme-switch[data-active="light"] { --theme-index: 1; }
.theme-switch[data-active="dark"] { --theme-index: 2; }

.theme-switch::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 4px #0b12201a;
  transform: translateX(calc(var(--theme-index) * 100%));
  transition: transform .28s cubic-bezier(.22, .8, .24, 1), background-color .2s ease;
}

.theme-switch button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease, transform .18s ease;
}

.theme-switch button:hover {
  color: var(--text);
}

.theme-switch button[aria-pressed="true"] {
  color: var(--text);
}

.theme-switch button:active { transform: scale(.92); }

.header-tools {
  gap: 10px;
}

.account-chip { width: 260px; }

@media (min-width: 761px) {
  .brand { flex: 0 0 286px; }
  .brand-service { white-space: nowrap; }
  .header-tools {
    flex: 0 0 408px;
    justify-content: flex-start;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .brand { flex-basis: 178px; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .header-tools { flex-basis: 292px; }
  .account-chip { width: auto; }
}

/* ── 8. 화면 비율과 여백 ────────────────────────────────────────────────
 * 바깥 여백은 유지하되 콘텐츠 사이 간격을 과하지 않게 줄여 실제 정보 영역을
 * 넓힌다. CS 에이전트는 사이드바보다 결과 영역에 폭을 더 배분한다. */
.shell {
  padding: 34px clamp(28px, 3vw, 44px) 72px;
}

.panel {
  padding: 24px;
}

.learning-layout,
.agent-layout {
  gap: 28px;
}

.agent-columns { gap: 20px; }
body[data-page="agent"] .agent-layout { grid-template-columns: 176px minmax(0, 1fr); }
body[data-page="agent"] .agent-body { max-width: none; }

.section-head {
  margin-bottom: 20px;
}

.curriculum-snapshot {
  gap: 12px;
}

.exam-week-card,
.curriculum-week-card {
  padding: 20px 22px;
}

.exam-option {
  padding: 16px 18px;
}

.exam-options {
  gap: 12px;
}

#run-screen .exam-question-card {
  padding: 28px;
  gap: 18px;
}

.exam-actions {
  padding-top: 18px;
  gap: 14px;
}

.conversation-body {
  padding: 20px 22px;
  gap: 16px;
}

/* 검색 입력과 결과 제목이 동시에 화면에 붙어 본문을 덮던 문제를 없앤다. */
body[data-page="agent"] .prompt-form {
  position: relative;
  z-index: 1;
  top: auto;
  padding: 6px;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page="agent"] .results-topline {
  position: static;
  z-index: auto;
  top: auto;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

body[data-page="agent"] #agent-results,
body[data-page="agent"] .result-jump-section { scroll-margin-top: 104px; }

body[data-page="agent"] .agent-workflow-grid,
body[data-page="agent"] .agent-support-grid { gap: 18px; }

body[data-page="agent"] .agent-support-grid > .result-col:empty { display: none; }
body[data-page="agent"] .agent-support-grid:has(> .result-col:empty) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
  .shell { padding: 28px 20px 64px; }
  .panel { padding: 20px; }
  .learning-layout,
  .agent-layout,
  .agent-columns { gap: 22px; }
}

@media (max-width: 760px) {
  .header-tools { flex: 0 1 auto; justify-content: flex-end; }
  .theme-picker,
  .theme-switch { flex-basis: 108px; width: 108px; }
  .account-chip { display: none; }
  body[data-page="agent"] .example-chip { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch::before,
  .theme-switch button { transition: none; }
}

/* ── 9. 계정 칩: 이름이 길어도 줄을 내리지 않는다 ───────────────────────
 * "김일호(에릭)_운영기획팀" 처럼 긴 이름이 260px 고정 칸에서 두 줄로 접혔다.
 * 칸을 글자에 맞춰 늘리고, 그래도 넘치면 말줄임으로 자른다. */
.header-tools {
  flex: 0 0 auto;
}

.account-chip {
  width: auto;
  max-width: 340px;
}

.account-chip-copy strong,
.account-chip-copy span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 10. 로그인 화면 ────────────────────────────────────────────────────
 * 자물쇠·제목·설명·구글 단추가 같은 간격으로 놓여 있어 어디를 눌러야 하는지가
 * 한눈에 안 들어왔다. 눌러야 할 것을 가운데로 모으고, 그 앞뒤로 여백을 준다. */
/* app.css 가 관리자 잠금 카드만 따로 '면 없이' 두고 있다
   (body[data-page="admin"] .admin-lock-card). 그 선택자와 같은 무게로 덮어야
   하므로 두 줄을 함께 적는다 — 한쪽만 적으면 관리자 화면에서 안 먹는다. */
.login-card,
body[data-page="admin"] .admin-lock-card {
  width: min(100%, 420px);
  padding: 44px 38px 34px;
  border: 1px solid var(--line);
  border-radius: 24px;
  /* 카드에 바닥이 없어 글자만 떠 있었다. 면을 주고 그림자로 띄운다. */
  background: var(--surface);
  box-shadow: 0 18px 48px #0b12200f;
}

.login-card .login-symbol {
  width: 54px;
  height: 54px;
  margin: 0 auto 4px;
  border-radius: 18px;
}

.login-card h1 {
  margin-top: 18px;
  font-size: 25px;
}

.login-card > p {
  margin: 12px auto 28px;
  max-width: 300px;
  font-size: 14px;
  line-height: 1.75;
}

/* 구글 단추는 카드 안에서 가운데로, 폭은 글자에 맞춰 — 가로로 꽉 채우면
   '계정을 고르는 일' 이 아니라 '제출' 처럼 보인다. */
.login-card .google-signin-slot {
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.login-card .google-signin-slot > div {
  max-width: 100%;
}

/* 비밀번호 경로는 보조 수단이다. 선 하나로 나눠 아래에 둔다. */
.admin-pw-fallback {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.admin-pw-fallback > summary {
  padding: 6px 0;
  border-radius: 8px;
  font-size: 13px;
  transition: color .15s ease;
}

.admin-pw-fallback > summary:hover {
  color: var(--text);
}

.admin-pw-fallback[open] > summary {
  margin-bottom: 12px;
  color: var(--text);
  font-weight: 650;
}

.admin-pw-input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.admin-pw-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
  outline: 0;
}

.login-card .login-policy {
  margin-top: 16px;
  font-size: 13px;
}

/* ── 11. Beat 입력창: 바깥 회색 상자를 없앤다 ────────────────────────────
 * 흰 입력 상자가 회색 둥근 상자 안에 또 들어 있어 테두리가 두 겹으로 보였다.
 * 입력 상자 하나만 남긴다. */
body[data-page="agent"] .prompt-form {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="agent"] .prompt-form .prompt-foot {
  padding-inline: 6px;
}

/* ── 12. CS 에이전트 이름표 'Beat' ──────────────────────────────────────
 * 이름을 바꾸지 않고 옆에 붙인다 — 상담사가 부르던 이름은 그대로 두고,
 * 새 이름을 함께 익히게. */
.beat-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: 2px;
  white-space: nowrap;
}

.header-nav .beat-tag {
  font-size: 10px;
  padding: 1px 6px;
}

h2 .beat-tag,
h1 .beat-tag {
  font-size: 12px;
  vertical-align: 5px;
}

/* ── 13. 상단 메뉴: 밑줄과 글자 사이를 띄운다 ────────────────────────────
 * 빨간 줄이 글자에 붙어 있었다. 아래로 여백을 주되 같은 크기의 음수 바깥
 * 여백으로 상쇄해, 메뉴가 있던 자리는 그대로 두고 줄만 내린다. */
.header-nav a {
  padding-bottom: 7px;
  margin-bottom: -7px;
}