/* CheckUS Manual - Shared Styles */
/* Screen-only, no print optimization */

:root {
  /* CheckUS Brand Colors */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a5f;

  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;

  --red-50: #fef2f2;
  --red-500: #ef4444;
  --red-600: #dc2626;

  --yellow-50: #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fde68a;
  --yellow-400: #facc15;
  --yellow-500: #eab308;

  --purple-50: #faf5ff;
  --purple-600: #9333ea;

  --orange-50: #fff7ed;
  --orange-600: #ea580c;

  /* Layout */
  --manual-max-width: 840px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Typography — 1.5x scaled for manual readability */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
  --text-display: 30px;
  --text-h1: 27px;
  --text-h2: 24px;
  --text-h3: 21px;
  --text-body: 20px;
  --text-body-sm: 18px;
  --text-caption: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  font-size: var(--text-body);
  background: var(--gray-50);
  color: var(--gray-900);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* ===== Manual Layout ===== */
.manual {
  max-width: var(--manual-max-width);
  margin: 0 auto;
  padding: 32px 24px 64px;
  transition: margin-left 0.2s ease;
}

.manual-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.manual-subtitle {
  font-size: var(--text-body);
  color: var(--gray-500);
  margin-bottom: 40px;
}

.manual-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--gray-200);
  margin-top: 48px;
  font-size: 14px;
}
.manual-nav a {
  color: var(--blue-700);
  text-decoration: none;
  font-weight: 500;
}
.manual-nav a:hover { text-decoration: underline; }

/* ===== Section Headers ===== */
.section {
  margin-top: 40px;
}
.section-title {
  font-size: var(--text-display);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gray-200);
}
.subsection-title {
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--gray-800);
  margin: 32px 0 16px;
}

/* ===== Step Cards ===== */
.step {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--blue-600);
  color: white;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.step-label {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--gray-800);
}
.step-body {
  padding-left: 38px;
  font-size: var(--text-body);
  color: var(--gray-700);
  line-height: 1.8;
}
.step-body p { margin-bottom: 8px; }

/* ===== Info / Warning / Tip Boxes ===== */
.info-box {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 16px 0;
  font-size: var(--text-body-sm);
  line-height: 1.8;
}
.info-box.blue {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  color: var(--blue-800);
}
.info-box.yellow {
  background: var(--yellow-50);
  border: 1px solid var(--yellow-200);
  color: #92400e;
}
.info-box.green {
  background: var(--green-50);
  border: 1px solid #bbf7d0;
  color: var(--green-700);
}
.info-box.red {
  background: var(--red-50);
  border: 1px solid #fecaca;
  color: var(--red-600);
}

/* ===== Inline Text ===== */
.text-muted { color: var(--gray-500); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.bold { font-weight: 600; }
.code {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
}

/* ===== Annotation Arrow ===== */
.annotation {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--gray-600);
}
.annotation::before {
  content: '→';
  color: var(--blue-600);
  font-weight: 600;
  flex-shrink: 0;
}

/* ===== Mock UI Components ===== */

/* --- App Frame (Teacher Web) --- */
.mock-app {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 16px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  background: var(--gray-50);
}
.mock-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  background: white;
  border-bottom: 1px solid var(--gray-200);
}
.mock-app-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mock-app-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mock-app-body {
  display: flex;
  min-height: 400px;
}

/* --- Sidebar Mock --- */
.mock-sidebar {
  width: 200px;
  background: #fcfcfc;
  border-right: 1px solid var(--gray-200);
  padding: 8px;
  flex-shrink: 0;
}
.mock-sidebar-brand {
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-900);
  padding: 8px 10px;
  margin-bottom: 4px;
}
.mock-sidebar-group {
  margin-bottom: 8px;
}
.mock-sidebar-group-label {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--gray-400);
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.mock-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: var(--text-body);
  color: var(--gray-600);
  cursor: default;
  transition: background 0.1s;
}
.mock-sidebar-item:hover {
  background: var(--blue-50);
}
.mock-sidebar-item.active {
  background: var(--blue-50);
  color: var(--blue-700);
  font-weight: 500;
}
.mock-sidebar-item .icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.mock-sidebar-separator {
  height: 1px;
  background: var(--gray-200);
  margin: 6px 10px;
}

/* --- Content Area --- */
.mock-content {
  flex: 1;
  padding: 16px;
  overflow: hidden;
}

/* --- Buttons (App-accurate) --- */
.mock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: var(--text-body-sm);
  font-weight: 500;
  border: none;
  cursor: default;
  white-space: nowrap;
  font-family: var(--font);
}
.mock-btn.primary {
  background: var(--blue-100);
  color: var(--blue-700);
}
.mock-btn.outline {
  background: white;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
}
.mock-btn.ghost {
  background: transparent;
  color: var(--gray-500);
}
.mock-btn.destructive {
  background: var(--red-50);
  color: var(--red-600);
}
.mock-btn.sm {
  height: 28px;
  padding: 0 8px;
  font-size: var(--text-caption);
}
.mock-btn.full { width: 100%; }

/* --- Input Fields (App-accurate) --- */
.mock-input {
  display: flex;
  align-items: center;
  height: 32px;
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 0 12px;
  font-size: var(--text-body-sm);
  font-family: var(--font);
  background: white;
  color: var(--gray-900);
}
.mock-input.with-icon {
  padding-left: 36px;
  position: relative;
}
.mock-input .placeholder {
  color: var(--gray-400);
}
.mock-input-wrapper {
  position: relative;
}
.mock-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 14px;
  z-index: 1;
}
.mock-input-icon-right {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 14px;
  z-index: 1;
}

/* --- Labels --- */
.mock-label {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 6px;
}

/* --- Cards (App-accurate) --- */
.mock-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.mock-card-header {
  padding: 16px;
}
.mock-card-title {
  font-size: var(--text-h2);
  font-weight: 600;
}
.mock-card-content {
  padding: 0 16px 16px;
}
.mock-card-footer {
  padding: 12px 16px;
  display: flex;
  gap: 8px;
}

/* --- Badges --- */
.mock-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: var(--text-caption);
  font-weight: 500;
  white-space: nowrap;
}
.mock-badge.blue { background: var(--blue-100); color: var(--blue-700); }
.mock-badge.green { background: var(--green-100); color: var(--green-700); }
.mock-badge.red { background: var(--red-50); color: var(--red-600); }
.mock-badge.gray { background: var(--gray-100); color: var(--gray-600); }
.mock-badge.purple { background: var(--purple-50); color: var(--purple-600); }
.mock-badge.yellow { background: var(--yellow-100); color: #a16207; }

/* --- Tabs --- */
.mock-tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 12px;
}
.mock-tab {
  padding: 8px 16px;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  cursor: default;
}
.mock-tab.active {
  color: var(--gray-900);
  border-bottom-color: var(--gray-900);
}

/* --- Table --- */
.mock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
}
.mock-table th {
  text-align: left;
  padding: 8px 12px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-weight: 500;
  color: var(--gray-500);
  font-size: var(--text-body-sm);
}
.mock-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}

/* --- Checkbox --- */
.mock-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gray-300);
  border-radius: 4px;
  flex-shrink: 0;
}
.mock-checkbox.checked {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: white;
  font-size: 10px;
}

/* --- Dropdown Mock --- */
.mock-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: var(--text-body-sm);
  background: white;
  color: var(--gray-700);
}

/* --- Phone Frame (Mobile App) --- */
.mock-phone {
  background: var(--gray-900);
  border-radius: 32px;
  padding: 12px;
  max-width: 320px;
  margin: 16px auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.mock-phone-screen {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  min-height: 540px;
}
.mock-phone-status {
  display: flex;
  justify-content: space-between;
  padding: 6px 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-900);
}
.mock-phone-notch {
  width: 80px;
  height: 24px;
  background: var(--gray-900);
  border-radius: 0 0 16px 16px;
  margin: 0 auto;
}

/* --- Bottom Tab Bar (Mobile) --- */
.mock-tabbar {
  display: flex;
  border-top: 1px solid var(--gray-200);
  background: white;
}
.mock-tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  font-size: 10px;
  color: var(--gray-400);
}
.mock-tabbar-item.active {
  color: var(--blue-600);
}
.mock-tabbar-item .tab-icon {
  font-size: 18px;
}

/* --- Resizable Split Panel (Dashboard) --- */
.mock-split {
  display: flex;
  gap: 1px;
  background: var(--gray-200);
}
.mock-split > * {
  background: var(--gray-50);
}
.mock-panel {
  padding: 12px;
  overflow: hidden;
}
.mock-panel-title {
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- Task Item --- */
.mock-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: var(--text-body);
}
.mock-task:hover {
  background: var(--gray-100);
}
.mock-task-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mock-task.completed .mock-task-title {
  text-decoration: line-through;
  opacity: 0.6;
}
.mock-task-due {
  font-size: var(--text-caption);
  color: var(--gray-400);
  white-space: nowrap;
}
.mock-task-due.overdue {
  color: var(--red-500);
}

/* --- Schedule Event --- */
.mock-event {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: var(--text-caption);
  margin-bottom: 4px;
  border-left: 3px solid;
}
.mock-event.visit { background: #f0fdf4; border-color: var(--green-500); color: var(--green-700); }
.mock-event.consultation { background: var(--blue-50); border-color: var(--blue-500); color: var(--blue-700); }
.mock-event.study { background: var(--yellow-50); border-color: var(--yellow-500); color: #92400e; }
.mock-event.other { background: var(--gray-100); border-color: var(--gray-400); color: var(--gray-600); }

/* --- Annotation Callout (overlaid on mockup) --- */
.mock-callout {
  position: relative;
}
.mock-callout-label {
  position: absolute;
  background: var(--red-500);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
}
.mock-callout-circle {
  position: absolute;
  border: 2px solid var(--red-500);
  border-radius: 50%;
  z-index: 10;
}
.mock-callout-box {
  position: absolute;
  border: 2px solid var(--red-500);
  border-radius: 4px;
  z-index: 10;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .manual { padding: 16px 12px 48px; }
  .manual-title { font-size: 22px; }
  .mock-sidebar { width: 0; display: none; }
  .mock-app-body { min-height: 300px; }
}

/* ===== Highlight span for manual text ===== */
.highlight {
  background: var(--red-50);
  border: 1px solid #fecaca;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
  color: var(--red-600);
}
.menu-path {
  background: var(--gray-100);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
}

/* ===== Table of Contents ===== */
.toc {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 32px;
}
.toc-title {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.toc-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.toc-list a {
  display: inline-block;
  padding: 6px 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  color: var(--blue-700);
  text-decoration: none;
  font-size: var(--text-body-sm);
  font-weight: 500;
  transition: background 0.15s;
}
.toc-list a:hover {
  background: var(--blue-50);
  border-color: var(--blue-200);
}

/* ===== Screenshot Display ===== */
.screenshot-wrap {
  margin: 24px -120px;
  text-align: center;
}
.screenshot-wrap img {
  max-width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.screenshot-caption {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 8px;
}
@media (max-width: 1080px) {
  .screenshot-wrap { margin-left: 0; margin-right: 0; }
}

/* ===== Global Sidebar Navigation ===== */
.manual-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  background: white;
  border-right: 1px solid var(--gray-200);
  overflow-y: auto;
  padding: 16px 0;
  z-index: 100;
  font-size: 13px;
  box-shadow: 2px 0 8px rgba(0,0,0,0.04);
  transform: translateX(0);
  transition: transform 0.2s ease;
}
.manual-sidebar.collapsed {
  transform: translateX(-240px);
}
.manual-sidebar-logo {
  display: block;
  padding: 8px 16px 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-900);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 8px;
}
.manual-sidebar-logo:hover { color: var(--blue-700); }
.manual-sidebar-group {
  padding: 8px 0 4px;
}
.manual-sidebar-group-label {
  padding: 4px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.manual-sidebar-item {
  display: block;
  padding: 5px 16px 5px 20px;
  color: var(--gray-600);
  text-decoration: none;
  line-height: 1.5;
  border-left: 3px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.manual-sidebar-item:hover {
  background: var(--blue-50);
  color: var(--blue-700);
}
.manual-sidebar-item.active {
  background: var(--blue-50);
  color: var(--blue-700);
  border-left-color: var(--blue-600);
  font-weight: 600;
}
.manual-sidebar-item .num {
  display: inline-block;
  width: 22px;
  color: var(--gray-400);
  font-size: 11px;
}

/* Sidebar toggle button */
.manual-sidebar-toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 101;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  font-size: 18px;
  color: var(--gray-600);
  transition: left 0.2s ease;
}
.manual-sidebar-toggle.open {
  left: 252px;
}

/* Center content in remaining space when sidebar is open (desktop) */
body.sidebar-open {
  padding-left: 240px;
  transition: padding-left 0.2s ease;
}
body.sidebar-open .manual {
  margin: 0 auto;
}

/* Mobile: overlay mode */
@media (max-width: 900px) {
  body.sidebar-open .manual {
    margin-left: 0;
  }
  .manual-sidebar {
    box-shadow: 4px 0 16px rgba(0,0,0,0.15);
  }
  .manual-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 99;
    display: none;
  }
  body.sidebar-open .manual-sidebar-overlay {
    display: block;
  }
}

/* Desktop: hide toggle when sidebar open, show as floating when closed */
@media (min-width: 901px) {
  body.sidebar-open .manual-sidebar-toggle {
    left: 248px;
  }
  /* Add top padding so toggle doesn't overlap content */
  body.sidebar-open .manual {
    padding-top: 32px;
  }
}