/* 이전(바닐라 JS 단일화면) 버전의 잔재 — body를 640px로 좁혀놓은 채였는데,
   React 분할뷰(document-split-view.css의 .dsv-root)는 화면 전체를 채우도록
   설계된 컴포넌트라 이 폭 제한 때문에 좁은 가운데 칼럼에 갇혀 보였다.
   로그인 화면만 좁게(centered form), 분할뷰는 뷰포트 전체를 쓰도록 분리한다. */
html, body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  color: #1a1a1a;
  line-height: 1.5;
  /* document-split-view.css의 --dsv-* 토큰(다크모드 포함)을 그대로 재사용 — 로그인/가이드
     화면은 그 안에서 개별 요소만 이 변수를 쓰고 있어서, 정작 바탕(body)이 항상 흰색으로
     고정돼 있으면 다크모드에서 카드만 어둡고 배경은 흰 채로 남는 문제가 있었다. */
  background: var(--dsv-surface-alt, #f5f5f7);
}

#app {
  height: 100%;
}

/* [hidden]보다 이 규칙이 이겨버리는 걸 막으려면 :not([hidden])로 범위를 좁혀야 한다
   (#list-loading/#app-view에서 실제로 겪은 버그와 같은 패턴 — 재발 방지). */
#login-view:not([hidden]) {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--dsv-card, #fff);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
  overflow: hidden;
}
.login-card-accent {
  height: 6px;
  background: linear-gradient(90deg, var(--dsv-brand, #3b82f6), rgba(255, 255, 255, 0.5));
}
.login-card-body {
  padding: 32px 28px 28px;
  text-align: center;
}
.login-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--dsv-brand, #3b82f6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.login-card-body h1 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  color: var(--dsv-foreground, #1e293b);
}
.login-subtitle {
  margin: 0 0 22px;
  font-size: 0.78rem;
  color: var(--dsv-muted-foreground, #64748b);
}

#login-form { margin: 0; text-align: left; }
#login-form label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--dsv-foreground, #334155);
  margin-bottom: 5px;
}
#login-form input {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--dsv-border, #e2e8f0);
  border-radius: 8px;
  background: var(--dsv-input-bg, #f8fafc);
  color: var(--dsv-foreground, #1e293b);
  font-size: 0.85rem;
  margin-bottom: 12px;
}
#login-form input:focus {
  outline: none;
  border-color: var(--dsv-brand, #3b82f6);
}
#login-form button[type="submit"] {
  width: 100%;
  height: 38px;
  border: none;
  border-radius: 8px;
  background: var(--dsv-brand, #3b82f6);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}
#login-form button[type="submit"]:hover { background: #2563eb; }
#login-form .error { margin: 8px 0 0; font-size: 0.78rem; }
.login-card-body .link-button { margin-top: 16px; }

/* [hidden]보다 이 규칙이 이겨버리는 걸 막으려면 :not([hidden])로 범위를 좁혀야 한다
   (오늘 #list-loading에서 실제로 겪은 버그와 같은 패턴 — 재발 방지). */
#app-view:not([hidden]) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#app-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e5e5;
}
#app-toolbar h1 { margin: 0; }
#logout-button { margin-left: auto; }

/* 캐시 신선도 안내 — 가이드(알려진 제한사항)에 같은 설명이 자세히 있지만, 여기 두는
   이유는 "방금 수정했는데 왜 안 바뀌지"가 실제로 헷갈리는 순간(목록 화면)에 바로 보여야
   의미가 있기 때문(가이드에만 있으면 클릭 몇 번을 더 해야 해서 사실상 못 봄). 좁은
   화면에서 로그아웃 버튼이 밀려나지 않도록 넘치면 줄임표로 자른다. */
.toolbar-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: #64748b;
  cursor: help;
  min-width: 0;
}
/* 이모지(⏱)는 폰트별로 흐릿하거나 시계인지 알아보기 어렵게 렌더링될 수 있어 SVG로 교체 —
   currentColor라 텍스트 색(다크모드 포함)을 그대로 따라간다. */
.toolbar-hint-icon { flex-shrink: 0; }
.toolbar-hint-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#list-error { padding: 0 16px; }

/* [hidden] 속성이 있으면 display:none이 기본인데, base 셀렉터에 display:flex를 두면
   ID 특정성이 [hidden] 속성 셀렉터를 이겨서 hidden=true여도 안 사라진다(재발 패턴) —
   :not([hidden])로 범위를 좁혀 hidden일 때는 브라우저 기본값(display:none)이 이기게 한다. */
#list-loading:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  color: #64748b;
  font-size: 0.85rem;
}
#list-loading .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #cbd5e1;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: dis-spin 0.7s linear infinite;
}
@keyframes dis-spin {
  to { transform: rotate(360deg); }
}

/* flex 컨테이너에서 자식이 부모 높이를 넘겨 스크롤이 깨지는 걸 막는 표준 트릭 —
   min-height:0이 없으면 .dsv-root의 height:100%가 콘텐츠만큼 계속 늘어난다. */
#split-view-root {
  flex: 1;
  min-height: 0;
}

h1 { font-size: 1.25rem; }

.error { color: #c0392b; }
.success { color: #1e7e34; }

button {
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}
button:hover { background: #f5f5f5; }

.link-button {
  display: block;
  margin: 16px auto 0;
  padding: 4px 0;
  border: none;
  background: none;
  color: #3b82f6;
  text-decoration: underline;
  font-size: 0.85rem;
}
.link-button:hover { background: none; color: #2563eb; }

.toolbar-link {
  font-size: 0.85rem;
  color: #3b82f6;
  text-decoration: none;
  white-space: nowrap;
}
.toolbar-link:hover { text-decoration: underline; }

dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
dt { font-weight: 600; }

form { margin: 16px 0; }
label { display: block; margin-bottom: 6px; font-weight: 600; }

/* ── 가이드 화면 (admin-todo-dashboard "가이드" 탭과 같은 패턴: 좌측 목차 + 우측 내용,
   구조도는 인라인 SVG. 백엔드 없음 — 전부 정적 콘텐츠.)
   색상은 document-split-view.css가 이미 :root에 정의해둔 --dsv-* 변수를 그대로
   재사용한다 — 목록/상세 화면은 다크모드(prefers-color-scheme)를 지원하는데 가이드만
   하드코딩 색상이라 화면 전환 시 눈부심이 생기던 걸 막기 위함(새 변수를 따로
   만들지 않고 이미 있는 테마 체계에 얹는다).
   --guide-muted만 예외: 목차/구조도 캡션처럼 작은 글자(0.82~0.85rem)에는
   --dsv-muted-foreground(#64748b)가 WCAG AA 대비(4.5:1) 경계선이라, 이
   두 곳에만 더 진한 톤을 쓴다(다른 곳은 앱 전체와 통일성을 위해 그대로 둠). */
:root {
  --guide-muted: #475569;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --guide-muted: #94a3b8; }
}
:root[data-theme='dark'] { --guide-muted: #94a3b8; }
:root[data-theme='light'] { --guide-muted: #475569; }

#guide-view:not([hidden]) {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#guide-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dsv-border, #e5e5e5);
}
#guide-toolbar h1 { margin: 0; }

/* 새로고침/로그아웃과 똑같이 생겨서 처음 오는 사람 눈에 안 띄던 것을 보완 —
   테두리를 강조색으로 살짝 구분한다. */
#guide-button {
  border-color: var(--dsv-brand, #3b82f6);
  color: var(--dsv-brand, #3b82f6);
}

#guide-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.guide-toc {
  width: 180px;
  flex-shrink: 0;
  border-right: 1px solid var(--dsv-border, #e5e5e5);
  padding: 16px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.guide-toc-item {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--guide-muted, #475569);
  text-decoration: none;
  font-size: 0.85rem;
}
.guide-toc-item:hover { background: var(--dsv-hover, #f1f5f9); }

.guide-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 24px 32px 64px;
  scroll-behavior: smooth;
}
/* 컨테이너는 넓은 화면을 실제로 채우도록 여유 있게(1100px), 대신 긴 글줄은
   가독성이 떨어지니 문단(<p>)만 따로 720px로 좁혀 읽기 편한 줄 길이를 유지한다. */
.guide-content section { max-width: 1100px; margin-bottom: 40px; }
.guide-content h2 {
  font-size: 1.05rem;
  border-bottom: 1px solid var(--dsv-border, #e5e5e5);
  padding-bottom: 8px;
  margin-bottom: 16px;
  color: var(--dsv-foreground, #1a1a1a);
}
.guide-content p { color: var(--dsv-foreground, #334155); max-width: 720px; }

.guide-diagram {
  width: 100%;
  max-width: 640px;
  color: var(--dsv-muted-foreground, #475569);
  background: var(--dsv-surface-alt, #f8fafc);
  border: 1px solid var(--dsv-border, #e5e5e5);
  border-radius: 8px;
}
.guide-diagram-caption {
  font-size: 0.82rem;
  color: var(--guide-muted, #64748b);
  margin-top: 8px;
}

/* 실제 화면 캡처 대신 넣는 목업 — 실제 훈련생 이름/개인이메일이 git 이력에
   영구히 남는 걸 피하려고 가상 데이터로 레이아웃만 재현한다(사용자 승인,
   2026-08-26). document-split-view.css의 배지 색 언어(파랑=진행/태그,
   초록=완료)를 그대로 따라 실제 화면과 이질감이 없게 한다. */
.guide-mockup {
  margin-top: 20px;
  border: 1px solid var(--dsv-border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
  max-width: 640px;
}
.guide-mockup-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--dsv-surface-alt, #f5f5f7);
  border-bottom: 1px solid var(--dsv-border, #e2e8f0);
}
.guide-mockup-title { font-weight: 600; font-size: 0.85rem; color: var(--dsv-foreground, #1a1a1a); }
.guide-mockup-chip {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--dsv-muted-foreground, #64748b);
}
.guide-mockup-body {
  display: flex;
  background: var(--dsv-card, #fff);
}
.guide-mockup-list {
  width: 45%;
  border-right: 1px solid var(--dsv-border, #e2e8f0);
  padding: 6px;
}
.guide-mockup-group {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--dsv-muted-foreground, #64748b);
  padding: 6px 6px 2px;
}
.guide-mockup-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 0.75rem;
}
.guide-mockup-item--selected { background: var(--dsv-selected-bg, #eff6ff); }
.guide-mockup-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--dsv-brand, #3b82f6);
  color: #fff;
  font-size: 0.65rem;
  flex-shrink: 0;
}
.guide-mockup-avatar--lg { width: 28px; height: 28px; font-size: 0.85rem; }
.guide-mockup-name { color: var(--dsv-foreground, #1e293b); white-space: nowrap; }
.guide-mockup-tag {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eff6ff;
  color: #3b82f6;
  border: 1px solid #bfdbfe;
  white-space: nowrap;
}
.guide-mockup-check { margin-left: auto; color: #16a34a; font-size: 0.75rem; }
.guide-mockup-detail { flex: 1; padding: 12px; font-size: 0.75rem; }
.guide-mockup-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.guide-mockup-detail-who { flex: 1; }
.guide-mockup-detail-name { font-weight: 600; color: var(--dsv-foreground, #1e293b); }
.guide-mockup-detail-course { font-size: 0.68rem; color: var(--dsv-muted-foreground, #64748b); }
.guide-mockup-status {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  white-space: nowrap;
}
.guide-mockup-detail-tags { display: flex; gap: 4px; margin-bottom: 8px; }
.guide-mockup-detail-row { padding: 3px 0; color: var(--dsv-foreground, #334155); }
.guide-mockup-role {
  display: inline-flex;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
}
.guide-mockup-role--lx { background: #eff6ff; color: #3b82f6; }
.guide-mockup-role--op { background: #fff7ed; color: #ea580c; }
.guide-mockup-memo {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--dsv-border, #e2e8f0);
  border-radius: 6px;
  color: var(--dsv-muted-foreground, #94a3b8);
  background: var(--dsv-input-bg, #f8fafc);
}
.guide-mockup-actions { display: flex; gap: 6px; margin-top: 8px; }
.guide-mockup-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--dsv-border, #e2e8f0);
  font-size: 0.72rem;
  color: var(--dsv-foreground, #1e293b);
}
.guide-mockup-btn--primary { background: #16a34a; border-color: #16a34a; color: #fff; }
.guide-mockup-caption {
  padding: 8px 14px;
  font-size: 0.72rem;
  color: var(--dsv-muted-foreground, #64748b);
  background: var(--dsv-surface-alt, #f5f5f7);
  border-top: 1px solid var(--dsv-border, #e2e8f0);
}

.guide-demo-callout {
  margin: 12px 0 0;
  padding: 12px 16px;
  border: 1px dashed var(--dsv-brand, #3b82f6);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--dsv-foreground, #334155);
  line-height: 1.6;
}
.guide-demo-callout a {
  color: var(--dsv-brand, #3b82f6);
  font-weight: 600;
}

.guide-privacy-note {
  margin: 10px 0 0;
  padding: 10px 16px;
  background: var(--dsv-surface-alt, #f5f5f7);
  border-radius: 8px;
  font-size: 0.76rem;
  color: var(--dsv-muted-foreground, #64748b);
  line-height: 1.6;
}

.guide-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.guide-card {
  border: 1px solid var(--dsv-border, #e5e5e5);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--dsv-card, transparent);
}
.guide-card h3 { margin: 0 0 6px; font-size: 0.88rem; color: var(--dsv-foreground, #1a1a1a); }
.guide-card p { margin: 0; font-size: 0.85rem; color: var(--dsv-muted-foreground, #475569); }

/* "알려진 제한사항"은 좁은 카드 그리드에 넣기엔 설명이 길어서(사용자 지적,
   2026-08-26) 짧은 요약용 .guide-card 대신 다른 본문 문단과 같은 폭·글자
   크기의 세로 목록으로 뺐다 — 강조 배경(주의 색)만 유지. */
.guide-notice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.guide-notice {
  border: 1px solid #fde68a;
  background: #fffbeb;
  border-radius: 8px;
  padding: 14px 16px;
}
.guide-notice h3 { margin: 0 0 6px; font-size: 0.95rem; color: var(--dsv-foreground, #1a1a1a); }
.guide-notice p { margin: 0 0 8px; color: var(--dsv-foreground, #334155); }
.guide-notice p:last-child { margin-bottom: 0; }
.guide-notice ul {
  margin: 0;
  padding-left: 20px;
  color: var(--dsv-foreground, #334155);
}
.guide-notice li { margin-bottom: 4px; }
.guide-notice li:last-child { margin-bottom: 0; }
.guide-notice-sources {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid #fde68a;
  font-size: 0.8rem;
  color: var(--dsv-muted-foreground, #64748b);
}
.guide-notice-sources a { color: inherit; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .guide-notice-sources { border-top-color: #92400e; }
}
:root[data-theme='dark'] .guide-notice-sources { border-top-color: #92400e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .guide-notice { background: #422006; border-color: #92400e; }
}
:root[data-theme='dark'] .guide-notice { background: #422006; border-color: #92400e; }

/* 제한사항/보류사항 소제목 — "알려진 제한·보류 사항" 안에서 성격이 다른 항목을
   구분한다(사용자 요청, 2026-08-27): 제한사항=구조적으로 안 바뀌는 것,
   보류사항=특정 결정(상사 승인 등)이 있으면 재검토 가능한 것. */
.guide-subheading {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dsv-foreground, #1a1a1a);
  margin: 28px 0 4px;
}
.guide-content section .guide-subheading:first-of-type { margin-top: 16px; }
.guide-subheading-desc {
  font-size: 0.85rem;
  color: var(--guide-muted, #64748b);
  margin: 0 0 12px;
}

/* 보류사항 카드 안에서 "상사가 뭘 해주면 되는지"를 한눈에 보이게 하는 콜아웃 —
   본문 설명과 시각적으로 분리되도록 강조색 왼쪽 테두리를 쓴다. */
.guide-action-needed {
  margin: 10px 0 0;
  padding: 8px 10px;
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid var(--dsv-brand, #3b82f6);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--dsv-foreground, #1e293b);
}

.guide-qa-list { display: block; max-width: 720px; }
.guide-qa-list dt {
  font-weight: 600;
  margin-top: 16px;
  color: var(--dsv-foreground, #1a1a1a);
}
.guide-qa-list dt:first-child { margin-top: 0; }
.guide-qa-list dd {
  margin: 4px 0 0;
  color: var(--dsv-muted-foreground, #475569);
  font-size: 0.9rem;
}
.guide-qa-list dd p { margin: 0 0 6px; }
.guide-qa-list dd p:last-child { margin-bottom: 0; }
.guide-qa-list dd ul { margin: 0; padding-left: 18px; }
.guide-qa-list dd li { margin-bottom: 4px; }
.guide-qa-list dd li:last-child { margin-bottom: 0; }

/* 좌측 목차(180px 고정) + 우측 콘텐츠가 좁은 화면(노트북 창 분할, 태블릿 세로모드
   등)에서 서로 밀어내며 깨지는 걸 막는다 — 목차를 상단 가로 탭 줄로 바꾼다. */
@media (max-width: 700px) {
  #guide-body { flex-direction: column; overflow-y: auto; }
  .guide-toc {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--dsv-border, #e5e5e5);
    padding: 8px 12px;
    overflow-y: visible;
  }
  .guide-content { overflow-y: visible; padding: 20px 16px 48px; }
}