/* Japanese ↔ English Date Converter */
.jdc-container { max-width: 840px; margin: 24px auto; padding: 0 16px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Arial; }
.jdc-header { text-align:center; margin-bottom: 14px; }
.jdc-header h2 { margin:0; font-size:1.75rem; }
.jdc-header p { color:#6b7280; margin:6px 0 0; }

.jdc-card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.jdc-label { display:block; font-weight:600; margin-bottom:8px; }
.jdc-label-small { font-size:.9rem; color:#374151; display:block; margin-bottom:6px; }
.jdc-input { width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:12px; font-size:1rem; outline:none; }
.jdc-input:focus { border-color:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.12); }

.jdc-toolbar { display:flex; gap:12px; align-items:flex-end; margin-top:12px; flex-wrap:wrap; }
.jdc-select-wrap { flex:1 1 240px; min-width:240px; }
.jdc-select { width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; font-size:1rem; background:#fff; }

.jdc-actions { display:flex; gap:8px; margin-left:auto; }
.jdc-btn { border:1px solid #e5e7eb; background:#fff; padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:600; }
.jdc-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.06); }
.jdc-btn-primary { background: linear-gradient(135deg, #22c55e, #16a34a); color:#fff; border:none; }
.jdc-btn-ghost { background:#fff; }
.jdc-btn-copy { background:#f3f4f6; }

.jdc-status { display:flex; align-items:center; gap:10px; min-height:24px; margin-top:10px; color:#374151; font-size:.95rem; }
.jdc-spinner { width:16px; height:16px; border-radius:50%; border:2px solid #d1d5db; border-top-color:#22c55e; animation:jdc-spin 1s linear infinite; display:inline-block; }
@keyframes jdc-spin { to { transform: rotate(360deg); } }

.jdc-output-card { margin-top:12px; border:1px solid #e5e7eb; border-radius:12px; }
.jdc-output-header { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:#f9fafb; border-bottom:1px solid #e5e7eb; border-top-left-radius:12px; border-top-right-radius:12px; }
.jdc-output { padding:12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre-wrap; word-wrap: break-word; }

.jdc-hint { margin-top:10px; color:#6b7280; font-size:.9rem; }

@media (max-width: 640px) {
  .jdc-actions { width:100%; }
  .jdc-actions .jdc-btn { flex:1 1 auto; }
}