/* ===== リセット・ベース ===== */
*, *::before, *::after { box-sizing: border-box!important; margin: 0; padding: 0!important; }
body { line-height: 1.5!important; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"!important; }
button, input, select, textarea { font: inherit!important; color: inherit!important; }
img, svg, video { display: block!important; max-width: 100%!important; }

/* ===== ユーティリティ（Tailwind 置き換え） ===== */
.bg-white      { background-color: #fff!important; }
.bg-gray-50    { background-color: #f9fafb!important; }
.text-gray-900 { color: #111827!important; }
.text-gray-700 { color: #374151!important; }
.text-gray-600 { color: #4b5563!important; }
.text-gray-500 { color: #6b7280!important; }

.text-xs  { font-size: 0.75rem;  line-height: 1.333!important; }
.text-sm  { font-size: 0.875rem; line-height: 1.429!important; }
.text-base{ font-size: 1rem;     line-height: 1.5!important; }
.text-lg  { font-size: 1.125rem; line-height: 1.556!important; }
.text-xl  { font-size: 1.25rem;  line-height: 1.4!important; }
.text-2xl { font-size: 1.5rem;   line-height: 1.333!important; }

.font-bold { font-weight: 700!important; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace!important; }
.leading-relaxed { line-height: 1.625!important; }

.block  { display: block!important; }
.flex   { display: flex!important; }
.grid   { display: grid!important; }
.hidden { display: none!important; }
.inline { display: inline!important; }

.flex-col  { flex-direction: column!important; }
.flex-wrap { flex-wrap: wrap!important; }

.gap-2 { gap: 0.5rem!important; }
.gap-3 { gap: 0.75rem!important; }
.gap-4 { gap: 1rem!important; }

.w-full { width: 100%!important; }
.w-1\/2 { width: 50%!important; }

.mx-auto { margin-inline: auto!important; }
.mt-1 { margin-top: 0.25rem!important; }
.mt-2 { margin-top: 0.5rem!important; }
.mt-5 { margin-top: 1.25rem!important; }
.mt-6 { margin-top: 1.5rem!important; }
.mb-2 { margin-bottom: 0.5rem!important; }
.mb-4 { margin-bottom: 1rem!important; }
.mb-6 { margin-bottom: 1.5rem!important; }

.p-5  { padding: 1.25rem!important; }
.px-4 { padding-inline: 1rem!important; }
.py-8 { padding-block: 2rem!important; }

.max-w-4xl    { max-width: 56rem!important; }
.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr))!important; }

/* ===== レスポンシブ (md: 768px) ===== */
@media (min-width: 768px) {
  .md\:p-6          { padding: 1.5rem!important; }
  .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
  .md\:flex-row     { flex-direction: row!important; }
  .md\:w-auto       { width: auto!important; }
}

/* ===== コンポーネント ===== */
.k3-card  { border: 1px solid #e5e7eb; border-radius: 16px; background: #fff!important; }
.k3-input { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; width: 100%!important; }
.k3-btn   { border-radius: 12px!important; padding: 10px 14px!important; border: 1px solid #e5e7eb!important; background: #fff; cursor: pointer!important; }
.k3-btn-primary { background: #111827!important; color: #fff!important; border-color: #111827!important; }
.k3-badge { display: inline-flex!important; align-items: center!important; gap: 6px!important; padding: 6px 10px!important; border-radius: 999px!important; background: #f3f4f6!important; }

.k3-toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 9999;
  background: rgba(17,24,39,.95); color: #fff; padding: 10px 14px; border-radius: 999px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.k3-toast.show { opacity: 1; }