/* =============================================
   BASE — 리셋 + 공통 기본 스타일
   ============================================= */

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

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--lh-base);
}

h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); line-height: var(--lh-tight); }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

/* ─── 스크롤바 (Webkit) ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-sub); }

/* ─── 유틸리티 ─── */
.sr-only { position: absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.text-sub   { color: var(--color-sub); }
.text-sm    { font-size: var(--text-sm); }
.text-xs    { font-size: var(--text-xs); }
.fw-medium  { font-weight: var(--fw-medium); }
.fw-bold    { font-weight: var(--fw-bold); }
.truncate   { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─── 배지 ─── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 18px; padding: 0 5px;
  font-size: var(--text-xs); font-weight: var(--fw-bold);
  border-radius: var(--radius-full);
  line-height: 1;
}
.badge-danger  { background: var(--color-danger);  color: #fff; }
.badge-accent  { background: var(--color-accent);  color: #fff; }
.badge-surface { background: var(--color-surface-2); color: var(--color-sub); }

/* ─── 상태 칩 ─── */
.status-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--fw-medium);
}
.status-done    { background: var(--color-success-light); color: var(--color-success); }
.status-pending { background: var(--color-warning-light); color: var(--color-warning); }
.status-draft   { background: var(--color-surface-2);     color: var(--color-sub); }
.status-review  { background: var(--color-accent-light);  color: var(--color-accent); }

/* ─── 공통 버튼 ─── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 14px; border-radius: var(--radius-base);
  font-size: var(--text-sm); font-weight: var(--fw-medium);
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-text); color: var(--color-bg);
}
.btn-primary:hover { background: #333; }

.btn-ghost {
  background: transparent; color: var(--color-sub); border: 1px solid var(--color-border);
}
.btn-ghost:hover { background: var(--color-hover); color: var(--color-text); }

.btn-surface {
  background: var(--color-surface); color: var(--color-text);
}
.btn-surface:hover { background: var(--color-surface-2); }

.btn-danger {
  background: var(--color-danger); color: #fff;
}
.btn-danger:hover { background: #c93535; }

.btn-sm { padding: 4px 10px; font-size: var(--text-xs); }
.btn-lg { padding: 10px 20px; font-size: var(--text-base); }

/* ─── 공통 입력 ─── */
.input, .textarea {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
  outline: none;
}
.input:focus, .textarea:focus {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px rgba(25,25,25,0.08);
}
.input::placeholder, .textarea::placeholder { color: var(--color-border); }
.textarea { resize: vertical; min-height: 80px; line-height: var(--lh-base); }

/* ─── 구분선 ─── */
.divider {
  border: none; border-top: 1px solid var(--color-border);
  margin: var(--sp-4) 0;
}

/* ─── 아바타 ─── */
.avatar {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  background: var(--color-surface-2);
  color: var(--color-sub);
  font-size: var(--text-sm);
  overflow: hidden;
}
.avatar-sm  { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar-md  { width: 36px; height: 36px; font-size: var(--text-sm); }
.avatar-lg  { width: 48px; height: 48px; font-size: var(--text-md); }
.avatar-xl  { width: 72px; height: 72px; font-size: var(--text-xl); }

/* ─── 아이콘 (Phosphor duotone 인라인 SVG) ─── */
.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
}
.icon svg { width: 100%; height: 100%; }
.icon .ph-secondary { opacity: 0.25; }

/* ─── 애니메이션 ─── */
@keyframes fadeIn   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slideIn  { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes pulse    { 0%,100% { opacity:1; } 50% { opacity:.4; } }

.animate-fade   { animation: fadeIn  var(--ease-base) both; }
.animate-slide  { animation: slideIn var(--ease-base) both; }