/**
 * Relay 디자인 시스템 — 전역 스타일
 * - 디자인 토큰(CSS 변수)과 화면 전반에서 공유하는 공통 컴포넌트 클래스를 정의한다.
 * - 시안(px) → rem 변환(기준 16px = 1rem). 단, 1px 경계선/그림자는 px 유지(헤어라인 관례).
 * - 화면 고유 스타일은 각 SFC 의 <style scoped> 에 둔다.
 */

/* ============================================================
 * 1. 디자인 토큰
 * ============================================================ */
:root {
  /* 표면 / 경계 */
  --bg: #f4f5f7;
  --panel: #ffffff;
  --border: #e6e8ec;
  --border-strong: #d7dae0;

  /* 텍스트 */
  --text: #16181d;
  --text-2: #5b626e;
  --text-3: #9298a3;

  /* 강조(보라) */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-weak: #eef0fe;
  --accent-border: #c7ccfb;

  /* 상태 색상 */
  --green: #1f9d57;
  --green-weak: #e8f6ee;
  --green-border: #cde8d8;
  --blue: #1d4ed8;
  --blue-weak: #e8efff;
  --blue-border: #c9dbff;
  --red: #d6455d;
  --red-weak: #fdeef0;
  --red-border: #f1c0c8;
  --amber: #b7791f;
  --amber-weak: #fdf4e3;
  --amber-border: #f3e2bd;

  /* 소셜 */
  --kakao: #fee500;
  --kakao-text: #191600;

  /* 형태 */
  --radius: 6px;
  --radius-sm: 4px;

  /* 그림자 */
  --shadow-sm: 0 1px 2px rgba(20, 24, 33, 0.05);
  --shadow-md: 0 4px 16px rgba(20, 24, 33, 0.1), 0 1px 3px rgba(20, 24, 33, 0.06);
  --shadow-pop: 0 8px 28px rgba(20, 24, 33, 0.16), 0 2px 6px rgba(20, 24, 33, 0.08);
}

/* ============================================================
 * 2. 리셋 / 베이스
 * ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard', -apple-system, system-ui, sans-serif;
  font-size: 14px; /* 기준 본문 크기(시안 기준) */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
}

#app {
  min-height: 100vh;
}

/* ============================================================
 * 3. 페이지 컨테이너 / 브레드크럼
 * ============================================================ */
.page {
  max-width: 67.5rem; /* 1080px */
  margin: 0 auto;
  padding: 0 1.5rem 4.375rem;
}

.crumb {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--text-3);
  font-size: 0.781rem;
  padding: 1.125rem 0 0;
  white-space: nowrap;
}
.crumb .lnk {
  color: var(--text-2);
  font-weight: 600;
  text-decoration: none;
}
.crumb .lnk:hover {
  color: var(--accent);
}
.crumb .sep {
  opacity: 0.5;
}
.crumb b {
  color: var(--text-2);
  font-weight: 600;
}

/* ============================================================
 * 4. 버튼
 * ============================================================ */
.btn {
  height: 2.25rem;
  padding: 0 0.9375rem;
  border-radius: var(--radius);
  font-size: 0.844rem;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
.btn:hover {
  background: #f7f8fa;
  color: var(--text);
}
.btn svg {
  width: 0.9375rem;
  height: 0.9375rem;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.4);
}
.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}
.btn.ghost {
  border-color: transparent;
  background: transparent;
}
.btn.ghost:hover {
  background: #eceef1;
}
.btn.sm {
  height: 1.875rem;
  padding: 0 0.75rem;
  font-size: 0.781rem;
}
.btn.icon {
  width: 2.125rem;
  padding: 0;
  justify-content: center;
}

/* ============================================================
 * 5. 아바타
 * ============================================================ */
.avatar {
  width: 1.3125rem;
  height: 1.3125rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.av-more {
  background: #eceef1;
  color: var(--text-2);
  box-shadow: 0 0 0 2px #fff;
}

/* 겹쳐 쌓는 아바타 스택 */
.avstack {
  display: flex;
  align-items: center;
}
.avstack .avatar {
  margin-left: -0.4375rem;
  box-shadow: 0 0 0 2px #fff;
}
.avstack .avatar:first-child {
  margin-left: 0;
}

/* ============================================================
 * 6. 상태 배지 / 상태 점 / 공개여부 배지 / 카운트 필
 * ============================================================ */
.st-badge {
  font-size: 0.719rem;
  font-weight: 600;
  padding: 0.1875rem 0.625rem;
  border-radius: 20px;
  white-space: nowrap;
  text-align: center;
}
.st-badge.prog {
  color: var(--blue);
  background: var(--blue-weak);
}
.st-badge.review {
  color: var(--amber);
  background: var(--amber-weak);
}
.st-badge.changes {
  color: var(--red);
  background: var(--red-weak);
}
.st-badge.done {
  color: var(--green);
  background: var(--green-weak);
}
.st-badge.todo {
  color: var(--text-2);
  background: #f1f2f4;
}

/* 상태 점(목록/그룹 헤더 공용) */
.st-dot {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.st-dot.done {
  background: var(--green);
}
.st-dot.prog {
  background: var(--blue);
}
.st-dot.review {
  background: var(--amber);
}
.st-dot.todo {
  background: #c4c8cf;
}
.st-dot.changes {
  background: var(--red);
}

/* 공개여부 배지 */
.vis {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  line-height: 1.5;
}
.vis svg {
  width: 0.6875rem;
  height: 0.6875rem;
}
.vis.private {
  color: var(--text-2);
  background: #f1f2f4;
  border: 1px solid var(--border);
}
.vis.public {
  color: #1b7a3d;
  background: var(--green-weak);
  border: 1px solid var(--green-border);
}

/* 카운트 필 */
.count-pill {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  background: #f1f2f4;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.125rem 0.6875rem;
}

/* ============================================================
 * 7. 진행률 바
 * ============================================================ */
.pbar {
  height: 0.375rem;
  border-radius: 4px;
  background: #eceef1;
  overflow: hidden;
}
.pbar > i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--green);
}
.pbar > i.mid {
  background: var(--accent);
}
.pbar > i.low {
  background: var(--amber);
}

/* ============================================================
 * 8. 툴바 구성요소 (검색 / 세그먼트 / 정렬)
 * ============================================================ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}

.search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0 0.6875rem;
  background: #fff;
  width: 17.5rem;
}
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.search svg {
  width: 1rem;
  height: 1rem;
  color: var(--text-3);
}
.search input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 0.844rem;
  background: transparent;
}
.search input::placeholder {
  color: var(--text-3);
}

.segmented {
  display: flex;
  background: #eceef1;
  border-radius: var(--radius);
  padding: 0.1875rem;
  gap: 0.125rem;
}
.segmented button {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  padding: 0.3125rem 0.8125rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.segmented button.active {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.segmented button .n {
  font-size: 0.6875rem;
  color: var(--text-3);
  font-weight: 600;
}
.segmented button.active .n {
  color: var(--accent);
}

/* 정렬/필터 드롭다운은 공통 컴포넌트 DropdownSelect 로 대체(자체 스타일 보유). */

/* ============================================================
 * 9. 카드 / 목록 컨테이너
 * ============================================================ */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  box-shadow: var(--shadow-sm);
}

.list {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ============================================================
 * 10. 모달 공통 백드롭 (세부 모달은 각 화면에서 정의)
 * ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 33, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1.5rem;
}
.modal-backdrop.open {
  display: flex;
}
.modal {
  width: 100%;
  max-width: 27.5rem;
  background: #fff;
  border-radius: 0.875rem;
  box-shadow: 0 24px 64px rgba(20, 24, 33, 0.32);
  overflow: hidden;
}
.modal-body {
  padding: 1.625rem 1.5rem 0.5rem;
  text-align: center;
}
.modal-body.left {
  text-align: left;
  padding: 1.375rem 1.5rem 0.5rem;
}
.modal-ico {
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  background: var(--red-weak);
  color: var(--red);
  display: grid;
  place-items: center;
  margin: 0 auto 0.875rem;
}
.modal-ico.approve {
  background: var(--green-weak);
  color: var(--green);
}
.modal-ico.info {
  background: var(--accent-weak);
  color: var(--accent);
}
.modal-ico.warning {
  background: var(--amber-weak);
  color: var(--amber);
}
.modal-ico svg {
  width: 1.375rem;
  height: 1.375rem;
}
.modal-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01875rem;
}
.modal-desc {
  font-size: 0.8125rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 0.5rem;
}
.modal-desc.spaced {
  margin: 0.5rem 0 0.875rem;
}
.modal-desc b {
  color: var(--text);
  font-weight: 600;
}
.modal-foot {
  display: flex;
  gap: 0.5625rem;
  padding: 1.125rem 1.5rem 1.25rem;
}
.mbtn {
  flex: 1;
  height: 2.5rem;
  border-radius: var(--radius);
  font-size: 0.844rem;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
}
.mbtn:hover {
  background: #f1f2f4;
  color: var(--text);
}
.mbtn.danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 1px 2px rgba(214, 69, 93, 0.4);
}
.mbtn.danger:hover {
  background: #c23a51;
}
.mbtn.approve {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 1px 2px rgba(31, 157, 87, 0.4);
}
.mbtn.approve:hover {
  background: #188a4b;
}
.mbtn.request-send,
.mbtn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.4);
}
.mbtn.request-send:hover,
.mbtn.primary:hover {
  background: var(--accent-hover);
}
.modal-textarea {
  width: 100%;
  min-height: 5.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 0.844rem;
  line-height: 1.6;
  color: var(--text);
  resize: vertical;
}
.modal-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.modal-textarea::placeholder {
  color: var(--text-3);
}

/* ============================================================
 * 더보기 버튼 (목록 페이지네이션 공통)
 * ============================================================ */
.load-more {
  display: block;
  margin: 1.25rem auto 0;
  padding: 0.5rem 1.375rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #fff;
  font-family: inherit;
  font-size: 0.844rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.load-more:hover {
  background: #f7f8fa;
  color: var(--text);
}
.load-more:disabled {
  opacity: 0.6;
  cursor: default;
}
