/* ══════════ 시계 위젯 전용 규칙 (2026-08-17) ══════════════════════════════
   ⚠ board.css·calendar.css·weather.css 는 **기계가 떠 오는 파일**이다(규격본이 주인).
     이 파일은 subway.css 처럼 **손으로 쓰는** 위젯 전용 규칙이다 — 판의 공통 규칙
     (.v1 · .mini · .w-b 등)을 여기서 덮어쓰지 않는다. 시계 것만 둔다.

   ★ 숫자 크기는 **타일 폭에 맞춰 줄어든다**(clamp + 컨테이너 질의).
     판의 `.v1 .num` 은 40px 고정이라 "20:53:07"(8글자)이 작은 타일·폰에서 잘린다 →
     그 클래스를 쓰지 않고 자기 규칙으로 간다. 폭의 주인은 뷰포트가 아니라 **타일**이므로
     vw 가 아니라 cqw 다(같은 폭에서 1열·2열·s·m 이 다 다르다).
   ⚠ `font-variant-numeric:tabular-nums` 를 빼지 말 것 — 초가 바뀔 때마다 숫자 폭이
     달라져 시각 전체가 좌우로 흔들린다(1이 좁다). 이 위젯에서 가장 눈에 띄는 결함이다.
   ⚠ 날짜 줄은 **줄바꿈을 허용**한다(자르지 않는다). 폰 2열에서 한 줄에 안 들어가는데
     ellipsis 를 걸면 "2026년 8월 17일 월…" 이 된다 → 어절 단위(keep-all)로 접는다.
   ══════════════════════════════════════════════════════════════════════════ */

.clk{container-type:inline-size;display:flex;flex-direction:column;gap:6px;min-width:0}
.clk-t{font-variant-numeric:tabular-nums;font-weight:700;line-height:1;
  letter-spacing:-.035em;color:var(--wg-ink-1);white-space:nowrap}
.clk-d{font-weight:400;color:var(--wg-ink-2);line-height:1.35;
  white-space:normal;word-break:keep-all;overflow-wrap:break-word}

/* 8글자 × 대략 0.55em → 폭의 4.4배가 필요하다. 22cqw 가 이론 상한이라 19cqw 로 둔다
   (콜론이 좁아 실측은 더 여유 있다 — 1366×768 · 390px 에서 잘림 0건으로 확인). */
.clk-s .clk-t{font-size:clamp(19px,19cqw,42px)}
.clk-s .clk-d{font-size:clamp(10px,6cqw,12.5px)}
.clk-m .clk-t{font-size:clamp(22px,11cqw,52px)}
.clk-m .clk-d{font-size:clamp(11px,3.4cqw,13px)}
/* 펼침 판 = 같은 숫자를 크게. 판 폭(560px)이 고정이라 상한이 곧 실제 크기다. */
.clk-p{gap:8px}
.clk-p .clk-t{font-size:clamp(34px,13cqw,64px)}
.clk-p .clk-d{font-size:clamp(12px,3.4cqw,15px)}

@media (max-width:900px){
  /* 폰은 2열 정사각이라 한 칸이 좁다 → 상한만 낮춘다(하한·비율은 그대로). */
  .clk-s .clk-t{font-size:clamp(19px,19cqw,34px)}
  .clk-m .clk-t{font-size:clamp(22px,11cqw,40px)}
  .clk-p .clk-t{font-size:clamp(30px,13cqw,48px)}
}