@charset "UTF-8";

/* このツールだけ、BOX内を縦積みにして余白を確保 */
.box30 .appArea{
  display: block;         /* style.css の .box30 p{display:flex;} を打ち消し */
  padding: 18px 20px;     /* ぎちぎち回避 */
}

/* 全体レイアウト */
.timerWrap{
  display: grid;
  gap: 16px;
}

/* リング（進捗） */
.ring{
  --p: 0; /* 0→1 */
  width: min(280px, 88vw);   /* ← スマホで確実に収まる */
  aspect-ratio: 1 / 1;
  margin: 8px auto 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;

  /* conic-gradientで進捗を表示 */
  background:
    conic-gradient(#6cc8f7 calc(var(--p) * 360deg), #e9f6ff 0);
  position: relative;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* 内側の白丸 */
.ring::before{
  content:"";
  position:absolute;
  inset: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

/* 表示要素を前面へ */
.time, .sub{
  position: relative;
  z-index: 1;
}

.time{
  font-size: clamp(48px, 10vw, 72px);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sub{
  margin-top: 8px;
  font-size: 0.95em;
  opacity: .8;
}

/* コロン点滅 */
.colon{
  display:inline-block;
  width: .6em;
  text-align: center;
}
.colon.off{ opacity: .35; }
.colon.blink{ animation: blink .9s steps(2, end) infinite; }
@keyframes blink{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: .25; }
}

/* 実行中：少しだけ呼吸する動き */
.ring.running{
  animation: breathe 1.8s ease-in-out infinite;
}
@keyframes breathe{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.02); }
}

/* 残り少ない：軽く揺らす */
.ring.danger{
  animation: wobble .22s ease-in-out infinite;
}
@keyframes wobble{
  0%,100%{ transform: translateX(0); }
  50%{ transform: translateX(2px); }
}

/* 終了：ポンっと */
.ring.done{
  animation: pop .25s ease-out;
}
@keyframes pop{
  0%{ transform: scale(0.98); }
  100%{ transform: scale(1); }
}

/* ボタン類 */
.controls{
  display: grid;
  gap: 10px;
  justify-items: center;
}

.btn{
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  border-radius: 14px;
  padding: .55em 1.1em;
  cursor: pointer;
  font-size: 1em;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
.btn:disabled{
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}
.btn.primary{
  border-color: rgba(108,200,247,.9);
  background: #e9f6ff;
}

.setRow{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
.setLabel{ opacity: .75; }
.setInput{
  width: 90px;
  padding: .45em .6em;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
}
.setUnit{ opacity: .75; }

/* 3ボタンを横並びに */
.btnRow{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap; /* スマホで折り返しOK */
}

/* controls は縦積みでOK */
.controls{
  display: grid;
  gap: 12px;
  justify-items: center;
}

/* button-1 の非活性スタイル */
.button-1:disabled{
  color: #d09125;
  border-color: #d09125;
  background-color: #fff;

  opacity: 0.45;          /* ← 薄くする正体 */
  cursor: not-allowed;
  box-shadow: none;
}

/* 矢印も薄く */
.button-1:disabled::after{
  border-top-color: #d09125;
  border-right-color: #d09125;
  opacity: 0.45;
}

@media (max-width: 600px){
  .box30 .appArea{
    padding: 12px 10px;   /* ← 横を少し削る */
  }
}