/* Base */
html { -webkit-font-smoothing: antialiased; }
body { font-feature-settings: "ss01", "tnum"; }

/* Prose for post body */
.prose-journal { color: #1F2937; font-size: 17px; line-height: 1.85; }
.prose-journal p { margin: 0 0 1.4em; }
.prose-journal h2 { font-family: 'Noto Serif KR', serif; font-size: 1.45rem; line-height: 1.4; margin: 2.4em 0 0.8em; font-weight: 600; letter-spacing: -0.01em; }
.prose-journal h3 { font-size: 1.1rem; line-height: 1.5; margin: 2em 0 0.6em; font-weight: 600; }
.prose-journal ul { margin: 0 0 1.4em; padding-left: 1.2em; }
.prose-journal li { margin: 0.4em 0; }
.prose-journal blockquote { border-left: 3px solid #3B7A8C; padding: 0.2em 0 0.2em 1.1em; margin: 1.6em 0; color: #4B5563; font-style: italic; }
.prose-journal strong { color: #111827; font-weight: 600; }
.prose-journal a { color: #3B7A8C; text-decoration: underline; text-underline-offset: 3px; }

/* Card hover lift */
.card {
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms cubic-bezier(.2,.7,.2,1), border-color 220ms;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -16px rgba(31, 41, 55, 0.18), 0 4px 10px -6px rgba(31, 41, 55, 0.08);
  border-color: #D6D3D1;
}

/* Tag chip */
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px; font-size: 12.5px; line-height: 1;
  border: 1px solid #E7E5E4; border-radius: 999px;
  background: #fff; color: #4B5563;
  transition: all 160ms ease;
  cursor: pointer; user-select: none;
}
.chip:hover { border-color: #8FB7BF; color: #274F5D; }
.chip[aria-pressed="true"] {
  background: #3B7A8C; border-color: #3B7A8C; color: #fff;
}
.chip[aria-pressed="true"]:hover { background: #2F6273; border-color: #2F6273; }

/* Inline pill (read-only tag) */
.pill {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11.5px;
  border-radius: 999px;
  background: #F0F5F6;
  color: #274F5D;
  letter-spacing: -0.005em;
}

/* Fade transition for grid */
.fade-out { opacity: 0; }
.fade-in { opacity: 1; }

/* Sidebar category active */
.cat-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  color: #4B5563;
  transition: color 140ms;
}
.cat-link:hover { color: #1F2937; }
.cat-link.active { color: #3B7A8C; font-weight: 600; }
.cat-link .count { font-size: 11px; color: #9CA3AF; }

/* Popular list numbering */
.pop-item { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.pop-item .num { font-family: 'Noto Serif KR', serif; color: #B9D3D8; font-size: 18px; line-height: 1.2; min-width: 18px; }
.pop-item:hover .title { color: #3B7A8C; }
.pop-item .title { color: #1F2937; font-size: 13.5px; line-height: 1.5; transition: color 140ms; }
.pop-item .meta { font-size: 11px; color: #9CA3AF; margin-top: 2px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card, .fade-out, .fade-in, .chip { transition: none !important; }
  .card:hover { transform: none; }
}

/* Focus ring */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid #3B7A8C;
  outline-offset: 2px;
  border-radius: 4px;
}
</style>