@charset "utf-8";
/* ==========================================================================
   世界时间（/time、/time/<城市>）
   铅字黄历设计语言：宣纸暖白 + 墨黑 + 朱砂，青黛仅用于「夜间」语义。
   本页特有版式（大时钟、日月网格、时区卡）单独成表，不塞进全站 style.css。
   ========================================================================== */

/* ------------------------------------------------------------ 工具页头补充 */

.th-sep { color: var(--ink-4); margin: 0 6px; }

/* ------------------------------------------------------------ 大时钟 */

.clk {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(24px, 3.4vw, 36px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.clk-main {
  padding: clamp(22px, 3vw, 32px) clamp(20px, 2.6vw, 30px);
  background: var(--paper-2);
  border-left: 4px solid var(--cinnabar);
}

.clk-place {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.clk-place i { font-style: normal; font-size: 0.8rem; font-weight: 400; color: var(--ink-3); }

/* 国家简称做成一枚小印：不用 emoji 国旗 —— 一是无头/老系统缺 emoji 字体会渲染成
   方框或字母，二是方印更贴铅字黄历的语言。 */
.clk-mark,
.z-mark,
.rl-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 1.5em;
  padding: 1px 4px;
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cinnabar);
  background: var(--cinnabar-tint);
  border: 1px solid var(--cinnabar);
  border-radius: 2px;
  letter-spacing: 0;
}
.clk-mark { font-size: 0.8rem; min-width: 1.7em; padding: 2px 5px; }

/* 时钟本体：等宽数字，秒数比时分小一号且更淡，避免喧宾夺主 */
.clk-time {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--serif);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--ink);
}
.clk-hm {
  font-size: clamp(3.2rem, 11vw, 5.2rem);
  letter-spacing: 0.01em;
}
.clk-sec {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-weight: 400;
  color: var(--ink-3);
}

.clk-date {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.clk-state {
  padding: 2px 10px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  border: 1px solid currentColor;
  border-radius: 2px;
}
/* 白昼用朱砂（太阳语义），夜间用青黛 */
.clk-state.is-day { color: var(--cinnabar); background: var(--cinnabar-tint); }
.clk-state.is-night { color: var(--indigo); background: var(--indigo-tint); }

.clk-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin-top: clamp(18px, 2.4vw, 26px);
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.clk-meta > div { min-width: 0; }
.clk-meta dt { font-size: 0.72rem; color: var(--ink-4); letter-spacing: 0.08em; }
.clk-meta dd {
  margin: 2px 0 0;
  font-size: 0.88rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------ 大时钟右侧：日月 */

.clk-side {
  padding: clamp(20px, 2.6vw, 28px) clamp(18px, 2.4vw, 26px);
  background: var(--paper);
}

.clk-side-h {
  font-size: 0.76rem;
  color: var(--ink-4);
  letter-spacing: 0.16em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.clk-polar {
  margin-top: 12px;
  padding: 7px 12px;
  font-size: 0.84rem;
  border-radius: 2px;
  border-left: 3px solid currentColor;
}
.clk-polar.is-day { color: var(--cinnabar); background: var(--cinnabar-tint); }
.clk-polar.is-night { color: var(--indigo); background: var(--indigo-tint); }

.astro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.astro li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  background: var(--paper);
}
.as-icon { display: block; flex: none; line-height: 0; color: var(--ink-3); }
/* 月相小图标直接复用月相栏目的 SVG 类，尺寸缩小到 22 */
.as-moon .mph-i { width: 22px; height: 22px; }
.as-body { display: flex; flex-direction: column; min-width: 0; }
.as-body b { font-size: 0.74rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0.06em; }
.as-body i {
  font-style: normal;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.clk-length {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.clk-length li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px;
  background: var(--paper-2);
}
.cl-lb { font-size: 0.72rem; color: var(--ink-4); letter-spacing: 0.1em; }
.clk-length b {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.clk-length i { font-style: normal; font-size: 0.7rem; color: var(--ink-3); }

.clk-moon {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--ink-2);
}
.clk-moon .mph-i { width: 20px; height: 20px; vertical-align: -4px; }

/* 时区人文注解：左侧一道发丝线，像历注 */
.clk-note {
  margin-top: 14px;
  padding: 10px 14px;
  font-size: 0.84rem;
  color: var(--ink-2);
  background: var(--paper-2);
  border-left: 3px solid var(--line-2);
  border-radius: 2px;
}

/* ------------------------------------------------------------ 时区卡网格 */

.zones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.zone {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 15px;
  background: var(--paper);
  transition: background 0.16s var(--ease);
}
.zone:hover { background: var(--paper-2); }

.z-top { display: flex; align-items: center; gap: 6px; }
.z-name {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.z-delta {
  margin-left: auto;
  flex: none;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 2px;
  letter-spacing: 0.02em;
}
/* 比当前城市早用朱砂（钟点更靠前），晚用青黛 —— 与昼夜的语义色分工一致 */
.z-delta.is-ahead { color: var(--cinnabar); background: var(--cinnabar-tint); }
.z-delta.is-behind { color: var(--indigo); background: var(--indigo-tint); }

.z-time {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.z-sub { font-size: 0.7rem; color: var(--ink-4); letter-spacing: 0.02em; }

/* ------------------------------------------------------------ 科普正文 */

.prose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.prose-block { padding: 18px 20px; background: var(--paper); }
.prose-block h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.prose-block p {
  margin-top: 10px;
  font-size: 0.86rem;
  line-height: 1.95;
  color: var(--ink-2);
}

/* ------------------------------------------------------ 地区时间链接网格 */

.regionlist {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.regionlist a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: var(--paper);
  transition: background 0.16s var(--ease);
}
.regionlist a:hover { background: var(--paper-2); }
.rl-body { display: flex; flex-direction: column; min-width: 0; }
.rl-body b {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-body i {
  font-style: normal;
  font-size: 0.66rem;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------ 响应式 */

@media (max-width: 1000px) {
  .clk { grid-template-columns: 1fr; }
  .zones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .regionlist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regionlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prose { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .clk-hm { font-size: clamp(2.8rem, 16vw, 3.6rem); }
  .clk-meta { grid-template-columns: 1fr; gap: 8px; }
  .astro { grid-template-columns: 1fr; }
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regionlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-time { font-size: 1.3rem; }
}