/* Pure CSS (Tailwind @apply 미사용) */
:root{
  --radius:16px;
  --fg:#0f172a;          /* slate-900 */
  --bg:#f8fafc;          /* slate-50  */
  --card:#ffffff;
  --border:#e5e7eb;      /* gray-200  */
  --muted:#6b7280;       /* gray-500  */
  --accent:#111827;      /* gray-900  */
  --shadow:0 6px 20px rgba(2,6,23,0.06);
}
@media (prefers-color-scheme: dark){
  :root{
    /* 콘트라스트 강화 */
    --fg:#eaeef5;           /* 텍스트 */
    --bg:#0b0f14;           /* 페이지 배경 */
    --card:#0f1115;         /* 카드/폼 배경 */
    --border:#2a2f3a;       /* 경계선 */
    --muted:#a9b1bd;        /* 보조 텍스트 */
    --accent:#3b82f6;       /* 포인트 (버튼 배경) */
    --shadow:none;
  }
}

body{ background:var(--bg); color:var(--fg); }

/* form controls */
.input{
  width:100%;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--fg);
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 1px 0 rgba(2,6,23,0.02);
  outline:none;
}
.input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(17,24,39,0.15);
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--accent); color:#fff; box-shadow:var(--shadow);
  transition:opacity .15s ease, transform .05s ease;
  text-decoration:none;
}
.btn:hover{ opacity:.92; }
.btn:active{ opacity:.85; transform:translateY(1px); }
.btn-ghost{
  background:var(--card); color:var(--fg);
}

/* cards & badges */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow);
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-size:12px;
  border:1px solid var(--border); background:#f9fafb; color:#374151;
}
.badge-green{ background:#ecfdf5; color:#065f46; border-color:#d1fae5; }
.badge-amber{ background:#fffbeb; color:#92400e; border-color:#fde68a; }
.badge-gray{ background:#f3f4f6; color:#374151; border-color:#e5e7eb; }

/* text clamps */
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* --- 추가: 작은 버튼, 드롭다운, 체크박스칩 --- */
.btn-sm{ padding:6px 10px; border-radius:10px; font-size:12px; }

.dropdown{
  position:absolute; right:0; top:100%;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:6px; box-shadow:var(--shadow); min-width:110px;
}
.dropdown-item{
  display:block; padding:8px 10px; border-radius:8px;
  text-decoration:none; color:var(--fg);
}
.dropdown-item:hover{ background:#f3f4f6; }

.hidden{ display:none; }

.chk{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--border);
  border-radius:12px; margin:4px 6px 0 0; background:var(--card);
  font-size:14px;
}
.chk input{ accent-color:var(--accent); }
/* 텍스트 줄바꿈 방지 및 버튼 정렬 보정 */
.btn{ white-space:nowrap; line-height:1; }

/* 아이콘 전용 작은 버튼 (정사각) */
.btn-icon{
  width:36px; height:36px; padding:0; display:inline-flex;
  align-items:center; justify-content:center; font-size:16px;
}

/* 필터 토글 화살표 전환 효과 */
#toggleFilters .chev{ display:inline-block; transition:transform .2s ease; }
#toggleFilters.open .chev{ transform: rotate(180deg); }

/* 드롭다운/스몰버튼은 이전에 추가한 규칙 유지 (.btn-sm, .dropdown, .dropdown-item 등) */

/* 다크모드 콘트라스트 강화 */
@media (prefers-color-scheme: dark){
  body{ background:var(--bg); color:var(--fg); }
  .card{ background:var(--card); border:1px solid var(--border); }
  .input{
    background:var(--card);
    color:var(--fg);
    border:1px solid var(--border);
  }
  .btn-ghost{
    background:transparent;
    color:var(--fg);
    border:1px solid var(--border); /* 경계 추가로 구분 강화 */
  }
  .badge{
    background:#141821;
    border-color:#2a2f3a;
    color:#c8d1dc;
  }
}

/* 버튼/텍스트 줄바꿈 방지 및 아이콘 버튼 */
.btn{ white-space:nowrap; line-height:1; }
.btn-sm{ padding:6px 10px; border-radius:10px; font-size:12px; }
.btn-icon{
  width:36px; height:36px; padding:0; display:inline-flex;
  align-items:center; justify-content:center; font-size:16px;
}

/* 드롭다운 */
.dropdown{
  position:absolute; right:0; top:100%;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:6px; box-shadow:var(--shadow); min-width:110px;
}
.dropdown-item{
  display:block; padding:8px 10px; border-radius:8px;
  text-decoration:none; color:var(--fg);
}
.dropdown-item:hover{ background:#1a1f2a; }

/* 필터 토글 화살표 전환 */
#toggleFilters .chev{ display:inline-block; transition:transform .2s ease; }
#toggleFilters.open .chev{ transform: rotate(180deg); }

/* 체크칩 */
.chk{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--border);
  border-radius:12px; margin:4px 6px 0 0; background:var(--card);
  font-size:14px;
}
.chk input{ accent-color:var(--accent); }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.input.mono{ white-space: pre; }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.input.mono{ white-space: pre; }


/* === Dark mode readability patch === */

/* 카드/보더 기본색을 변수 기반으로 통일 */
.card{ background:var(--card); color:var(--fg); border:1px solid var(--border); }
.border{ border-color:var(--border); }

/* 본문 타이포 컬러 조정 */
.prose{ color:var(--fg); }
.prose h1,.prose h2,.prose h3{ color:var(--fg); }
.prose a{ text-decoration: underline; }
@media (prefers-color-scheme: dark){
  .prose a{ color:#93c5fd; }          /* blue-300 */
}

/* 배지 대비 강화 */
.badge{ background:var(--card); color:var(--fg); border:1px solid var(--border); }
.badge-gray{ background:#f3f4f6; color:#374151; }
@media (prefers-color-scheme: dark){
  .badge-gray{ background:#374151; color:#e5e7eb; }
}

/* 이미지 박스가 bg-gray-100이라 어두워질 때 보정 */
@media (prefers-color-scheme: dark){
  .bg-gray-100{ background-color:#111827 !important; } /* gray-900 근처 */
  .text-gray-400{ color:#9ca3af !important; }          /* gray-400 → 조금 밝게 */
}

/* 입력/버튼 테두리도 변수에 맞춰 일관성 */
.input, .btn{ border-color:var(--border); }