/* ============================================================
   axi.kr LMS — 디자인 시스템 (Claude Design 원본 이식)
   원본: claude.ai/design p/2a9d7ec5 · 웜 베이지 + 다크 올리브 + 세이지 그린
   ============================================================ */
:root {
  --bg: #F3F1EC;            /* 페이지 배경 */
  --surface: #FFFFFF;       /* 카드 */
  --soft: #F8F6F1;          /* 모달 배경 */
  --soft-2: #FBFAF7;        /* 인풋 배경, 응답 카드 */
  --chip: #F1EFE9;          /* 밝은 버튼/칩 */
  --divider: #EFEDE6;
  --border: #E7E4DC;
  --dashed: #DEDBD2;
  --sidebar: #2B2C28;       /* 사이드바/프롬프트 박스 */
  --ink: #1C1D1A;           /* 주 텍스트/다크 버튼 */
  --body: #2A2B27;
  --body-2: #3A3B36;
  --muted: #5F6058;
  --faint: #8A8B81;
  --mid: #B9B7AC;
  --green: #8FC9A8;         /* 액센트 */
  --green-ok: #6CB592;
  --green-soft: #D6EBDE;
  --green-bg: #EAF5EE;
  --green-ink: #1F3B2C;
  --purple: #7C7AB2;
  --purple-soft: #DCDAEE;
  --purple-ink: #2C2B52;
  --danger-soft: #F6DCD5;
  --danger-ink: #6B2F24;
  --font: Poppins, "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); font-family: var(--font);
  -webkit-font-smoothing: antialiased; color: var(--ink); }
/* ⚠️ :where() 필수 — 일반 a:visited(0,1,1)는 .nav-item 같은 클래스(0,1,0)를 이겨서
   방문한 링크 색을 본문색으로 되돌린다(다크 사이드바 메뉴가 안 보이던 버그).
   :where()는 명시도 0이라 컴포넌트 색이 항상 이긴다. */
:where(a, a:visited, a:hover, a:active) { color: inherit; text-decoration: none; }
input, button, select, textarea { font-family: inherit; }

/* ---------- 레이아웃 L4: 사이드바 + 콘텐츠 ---------- */
.shell { display: flex; align-items: flex-start; min-height: 100vh; }
.sidebar {
  width: 232px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow: auto;
  background: var(--sidebar); border-radius: 0 24px 24px 0; padding: 26px 18px;
  display: flex; flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; }
.brand-mark { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center; }
.brand-mark span { width: 13px; height: 13px; border-radius: 4px; background: var(--green); transform: rotate(45deg); }
.brand-name { font-size: 14.5px; color: #F3F1EC; letter-spacing: -0.01em; }
.brand-name small { font-size: 10px; color: rgba(243,241,236,.6); }

.nav-label { font-size: 11px; color: rgba(243,241,236,.6); letter-spacing: .1em; padding: 12px 10px 8px; }
.nav-group { display: flex; flex-direction: column; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 999px;
  font-size: 13.5px; color: rgba(243,241,236,.78); cursor: pointer; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #F3F1EC; }
.nav-item.active { background: rgba(143,201,168,.16); color: #F3F1EC; }
.nav-item .ico { width: 14px; color: rgba(243,241,236,.6); text-align: center; }
.nav-item.active .ico { color: var(--green); }

.user-card { margin-top: auto; padding-top: 18px; }
.user-card-inner { display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border-radius: 18px; background: rgba(255,255,255,.06); }
.user-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(165deg, #8FC9A8 0%, #A9A7CE 100%); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; }
.user-name { font-size: 13px; color: #F3F1EC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: rgba(243,241,236,.6); margin-top: 2px; }
.user-logout { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 12px; color: rgba(243,241,236,.6); }
.user-logout:hover { background: rgba(255,255,255,.08); color: #F3F1EC; }

.content { flex: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 22px; }

/* ---------- 페이지 헤더 ---------- */
.page-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.back-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--surface);
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.page-title { font-size: 34px; font-weight: 400; letter-spacing: -0.02em; }
.spacer { flex: 1; }

/* ---------- 버튼 (필 형태) ---------- */
.btn { height: 40px; padding: 0 18px; border-radius: 999px; border: none; font-size: 13.5px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn:hover { filter: brightness(1.04); }
.btn-dark { background: var(--ink); color: #fff; padding: 0 22px; }
.btn-white { background: var(--surface); border: 1px solid var(--border); color: var(--ink); }
.btn-light { background: var(--chip); color: var(--ink); }
.btn-sm { height: 38px; padding: 0 20px; font-size: 12.5px; }
.btn-xs { height: 34px; padding: 0 16px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- 카드 ---------- */
.card { background: var(--surface); border-radius: 22px; padding: 22px 24px; }
.card-sm { padding: 20px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-label { font-size: 13px; color: var(--muted); }
.stat-value { font-size: 40px; font-weight: 200; line-height: 1.05; margin-top: 8px; }
.stat-sub { font-size: 12.5px; color: var(--body-2); margin-top: 10px; }

/* ---------- 뱃지/칩 ---------- */
.badge { font-size: 11px; border-radius: 7px; padding: 3px 8px; white-space: nowrap; }
.badge-pill { border-radius: 999px; padding: 3px 9px; background: var(--divider); color: var(--muted); }
.kind-survey { background: var(--purple-soft); color: var(--purple-ink); }
.kind-diagnosis { background: var(--green-soft); color: var(--green-ink); }
.kind-satisfaction { background: var(--chip); color: var(--muted); }
.state-open { color: var(--green-ok); }
.state-closed { color: var(--faint); }
.state-planned { color: var(--purple); }
.state-draft { color: var(--mid); }

/* ---------- 인풋 ---------- */
.field-label { font-size: 12px; color: var(--muted); }
.input, .select, .textarea { width: 100%; margin-top: 6px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); padding: 0 14px;
  font-size: 13.5px; color: var(--ink); outline: none; }
.input { height: 42px; }
.select { height: 42px; padding: 0 12px; font-size: 13px; }
.textarea { padding: 10px 13px; font-size: 12.5px; line-height: 1.7; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--green); }

/* ---------- 진행 바 ---------- */
.bar-track { height: 6px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; }

/* ---------- 모달 ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(28,29,26,.44);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 24px; overflow: auto; }
.modal { width: 100%; max-width: 1140px; background: var(--soft); border-radius: 26px;
  box-shadow: 0 30px 80px rgba(28,29,26,.3); overflow: hidden; }
.modal-head { display: flex; align-items: flex-start; gap: 14px; padding: 26px 28px 22px; background: var(--surface); }
.modal-title { font-size: 22px; letter-spacing: -0.01em; }
.modal-meta { font-size: 12px; color: var(--faint); margin-top: 5px; }
.modal-close { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--chip);
  color: var(--ink); font-size: 14px; cursor: pointer; }
.modal-close:hover { background: var(--border); }
.modal-foot { display: flex; align-items: center; gap: 10px; padding: 18px 28px;
  background: var(--surface); border-top: 1px solid var(--divider); }

/* ---------- 토스트 ---------- */
.toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 99;
  background: var(--ink); color: #fff; font-size: 13px; padding: 11px 22px; border-radius: 999px;
  box-shadow: 0 10px 32px rgba(28,29,26,.3); }

/* ---------- 유틸 ---------- */
.muted { color: var(--muted); } .faint { color: var(--faint); }
.mono-num { font-variant-numeric: tabular-nums; }
.empty-dashed { border: 1px dashed var(--dashed); border-radius: 16px; padding: 22px;
  text-align: center; font-size: 12px; color: var(--faint); line-height: 1.7; }

/* ---------- 모바일 (모든 화면 필수 대응 — CLAUDE.md 디자인 지침) ---------- */
.menu-btn { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .shell { display: block; }
  .sidebar {
    position: fixed; z-index: 60; left: 0; top: 0; height: 100vh; height: 100dvh;
    border-radius: 0 24px 24px 0; transform: translateX(-100%); transition: transform .15s ease;
    width: min(280px, 84vw);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(28,29,26,.4); }
  .menu-btn { display: flex; width: 44px; height: 44px; border-radius: 50%; background: var(--surface);
    border: none; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; flex-shrink: 0; }
  .content { padding: 14px; gap: 14px; }
  .page-title { font-size: 24px; }
  .back-btn { display: none; }
  .page-head .btn { height: 38px; padding: 0 14px; font-size: 12.5px; }
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal { max-width: none; border-radius: 0; min-height: 100dvh; }
  .modal-foot { position: sticky; bottom: 0; }
}

@media (max-width: 640px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-value { font-size: 28px; }
  .card { padding: 16px; border-radius: 18px; }
}