/* src/public/css/world-clock.css … 世界時計（国ごとの時差と現在時刻の一覧）の見た目
   💡 入力欄・詳細オプションは、共通の money.css・calc-common.css を使います。ダークモードは theme-dark.css の末尾 */

/* 基準のタイムゾーンと、その現在時刻 */
.wclk-base { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; align-items: end; }
.wclk-base-now { margin: 0 0 12px; text-align: right; line-height: 1.2; }
.wclk-base-time { display: block; font-size: 1.9rem; font-weight: bold; color: #1e3c72; font-variant-numeric: tabular-nums; }
.wclk-base-date { display: block; font-size: 0.8rem; color: #475569; white-space: pre; }
.wclk-filters { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.wclk-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; }
.wclk-when input[type="datetime-local"] { padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.95rem; max-width: 100%; }
.wclk-opts { gap: 8px 20px; }

/* 一覧 */
.wclk-count { margin-left: auto; font-size: 0.85rem; font-weight: normal; color: #64748b; }
.wclk-at-note { margin: 0 0 10px; font-size: 0.85rem; font-weight: bold; color: #b45309; }
.wclk-list { list-style: none; margin: 0; padding: 0; }
.wclk-row {
    display: grid; grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #e2e8f0;
}
.wclk-row[hidden] { display: none; }
.wclk-row.is-fav { background: #fffbeb; }
.wclk-fav { width: 32px; height: 32px; border: none; background: none; color: #f59e0b; font-size: 1.05rem; cursor: pointer; border-radius: 6px; }
.wclk-fav:hover { background: #f1f5f9; }
.wclk-fav:focus-visible { outline: 2px solid #2a5298; }
.wclk-place { display: flex; flex-direction: column; min-width: 0; }
.wclk-country { font-weight: bold; color: #1e293b; overflow-wrap: anywhere; }
.wclk-zone { font-size: 0.78rem; color: #64748b; overflow-wrap: anywhere; }
.wclk-time { display: flex; flex-direction: column; min-width: 0; }
.wclk-clock { font-size: 1.15rem; font-weight: bold; color: #1e3c72; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wclk-daynight { font-size: 0.85rem; }
.wclk-daynight.is-day { color: #f59e0b; }
.wclk-daynight.is-night { color: #6366f1; }
.wclk-date { font-size: 0.78rem; color: #475569; }
.wclk-offset { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; text-align: right; }
.wclk-diff { font-weight: bold; color: #334155; font-size: 0.9rem; }
.wclk-utc { font-size: 0.75rem; color: #64748b; font-variant-numeric: tabular-nums; }
.wclk-dst { margin-top: 2px; padding: 0 6px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 0.7rem; font-weight: bold; }
.wclk-empty { margin: 12px 0 0; color: #64748b; }

@media (max-width: 600px) {
    .wclk-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wclk-filters .wclk-search { grid-column: 1 / -1; }
    .wclk-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
    .wclk-offset { grid-column: 2 / -1; flex-direction: row; justify-content: flex-start; gap: 8px; align-items: baseline; }
    .wclk-base-time { font-size: 1.5rem; }
}