* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: #1b1b1b;
  color: #eee;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.clock {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

.side {
  flex: 1;
  border: 4px solid transparent;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vmin;
  font: inherit;
  cursor: pointer;
  transition: opacity .15s, border-color .15s;
  opacity: .55;
}

.side.white { background: #f4f1ea; color: #1b1b1b; }
.side.black { background: #000; color: #f4f1ea; border-color: #333; }

.side.active { opacity: 1; border-color: #e8a33d; }
.side.low .time { color: #e0483c; }
.side.out { opacity: 1; border-color: #e0483c; background: #5a1410; color: #fff; }

.label { font-size: clamp(18px, 4vmin, 36px); font-weight: 700; }

.time {
  font-size: clamp(56px, 18vmin, 220px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}

.hint { font-size: clamp(13px, 2.6vmin, 22px); opacity: .75; min-height: 1.3em; }

.controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.controls button {
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 16px;
  min-width: 96px;
  border-radius: 12px;
  border: 1px solid #555;
  background: #2b2b2b;
  color: #eee;
  cursor: pointer;
}
.controls button:disabled { opacity: .35; cursor: default; }
.controls button:not(:disabled):active { background: #3a3a3a; }

.help {
  text-align: center;
  font-size: 13px;
  color: #999;
  padding: 0 12px 12px;
}

/* 세로 화면: 위·아래로 나누고 백 쪽을 뒤집어 마주 앉아 쓰기 */
@media (orientation: portrait) {
  .clock { flex-direction: column; }
  .side.white { transform: rotate(180deg); }
  .controls { flex-direction: row; }
  .controls button { min-width: 0; flex: 1; }
  .help { display: none; }
}