:root{
  --bg: #fff;
  --face: #444444;            /* 時計盤：黒 */
  --ink: #fff;             /* 針・数字：白 */
  --second: #FF0066;
  --digital: #000;
  --muted: rgba(0,0,0,.80);
  --muted2: rgba(0,0,0,.80);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:#fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.wrap{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 18px;
  padding: 18px 14px 22px;
}

/* Portrait: 縦積みが基本 */
.clockBlock{ width:100%; display:flex; justify-content:center; }
.analog{
  width: min(70vw, 420px); /* 指定：画面の80%（横比率） + 上限 */
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
.face{
  width:100%;
  height:100%;
  border-radius:50%;
  background: var(--face);
  position:relative;
  box-shadow: 0 0 0 2px rgba(255,255,255,.05); /* “真っ黒背景での輪郭” */
}

/* ticks */
.ticks, .nums{
  position:absolute;
  inset:0;
}
.tick{
  position:absolute;
  left:50%;
  top:50%;
  width: 2px;
  height: 10px;
  background: var(--ink);
  transform-origin: 50% calc(100% - 2px);
}
.tick.minor{
  width: 1px;
  height: 6px;
  opacity: .85;
}
.tick.major{
  width: 2px;
  height: 10px;
  opacity: 1;
}

.num{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  font-size: clamp(16px, 4.5vw, 30px);
  color: var(--ink);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* hands */
.hand{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin: 50% 100%;
  border-radius: 999px;
}
.hand.hour{
  width: 2.4%;
  height: 28%;
  background: var(--ink);
  transform: translate(-50%, -100%) rotate(0deg);
}
.hand.minute{
  width: 1.6%;
  height: 40%;
  background: var(--ink);
  transform: translate(-50%, -100%) rotate(0deg);
}
.hand.second{
  width: 0.5%;
  height: 44%;
  background: var(--second);
  transform: translate(-50%, -100%) rotate(0deg);
  transition: transform 0.06s linear;
}

/* center pins */
.pin{
  position:absolute;
  left:50%;
  top:50%;
  width: 10%;
  height: 10%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: var(--ink);
}
.pin-red{
  width: 4.2%;
  height: 4.2%;
  background: #fff;  /* ← 赤→白 */
}

/* digital + texts */
.infoBlock{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 0;                 /* gapは使わない（px指定にする） */
}

.digital{
  margin-top: 50px;      /* ← 100px下に */
  width: min(70vw, 420px);
  text-align:center;
  color: var(--digital);
  font-size: clamp(44px, 10vw, 80px); /* 200%相当（後述） */
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, system-ui;
}

.meta{
  margin-top: 75px;      /* ← デジタルからさらに200px下に */
  text-align:center;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.title{
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.shop{
  font-size: 14px;
  color: var(--muted2);
  letter-spacing: 0.14em;
}

/* Landscape: 左右レイアウトに変形 */
@media (orientation: landscape){
  .wrap{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 22px;
    padding: 16px 18px;
  }
  .clockBlock{ width: auto; }
  .analog{
    width: min(48vh, 420px); /* 横だと高さが短いのでvh基準で破綻回避 */
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
  }
  .infoBlock{
    width: auto;
    align-items: flex-start;
    text-align: left;
  }
  .digital{
    width: auto;
    text-align: left;
    font-size: clamp(22px, 5.2vh, 40px);
  }
  .meta{ text-align: left; }
}