/* ===== リセット・ベース ===== */
*, *::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; }
.mt-8 { margin-top: 2rem!important; }
.mt-12 { margin-top: 5rem!important; }
.mb-2 { margin-bottom: 0.5rem!important; }
.mb-1 { margin-bottom: 0.25rem!important; }
.mb-2 { margin-bottom: 0.5rem!important; }
.mb-3 { margin-bottom: 0.75rem!important; }
.mb-4 { margin-bottom: 1rem!important; }
.mb-6 { margin-bottom: 1.5rem!important; }

.p-4  { padding: 1rem!important; }
.p-5  { padding: 1.25rem!important; }
.p-6  { padding: 1.5rem!important; }
.px-4 { padding-inline: 1rem!important; }
.py-3 { padding-block: 0.75rem!important; }
.py-4 { padding-block: 1rem!important; }
.py-6 { padding-block: 1.5rem!important; }
.py-8 { padding-block: 2rem!important; }
.pl-5 { padding-left: 1.25rem!important; }
.pl-8 { padding-left: 2rem!important; }

.max-w-4xl    { max-width: 56rem!important; }
.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr))!important; }

/* ===== レスポンシブ (sm: 640px) ===== */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
  .sm\:text-3xl    { font-size: 1.875rem!important; line-height: 2.25rem!important; }
  .sm\:p-8         { padding: 2rem!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; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05)!important; }
.k3-input { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px!important; 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: #3b82f6!important; color: #fff!important; border-color: #3b82f6!important; }
.k3-btn-primary:hover { background: #2563eb!important; border-color: #2563eb!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; }

.space-y-1 > * + * { margin-top: 0.25rem!important; }
.space-y-3 > * + * { margin-top: 0.75rem!important; }
.space-y-5 > * + * { margin-top: 1.25rem!important; }

/* アコーディオン */
.k3-accordion-toggle::-webkit-details-marker { display: none!important; }
.k3-accordion-toggle::marker { display: none!important; content: ""!important; }
details[open] .k3-accordion-icon { transform: rotate(180deg)!important; }

.k3-section-header {
  padding: 12px 16px!important;
  border-radius: 16px 16px 0 0!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 20px!important; border-radius: 999px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.k3-toast.show { opacity: 1; }
