/* ==============================================
   カラー変数 ← ここを変更するだけでデザイン変更可能
   ============================================== */
:root {
  --color-primary:       #ea635c;
  --color-primary-hover: #d94f48;
  --color-primary-text:  #ffffff;
  --color-hangup:        #BA4538;
  --color-live:          #2167AE;
  --color-wait:          #8a6000;
  --color-error:         #c0392b;
  --color-idle:          #555555;
  --color-bg:            #ffffff;
  --color-surface:       #ffffff;
  --color-border:        #dddddd;
  --color-text:          #222222;
  --color-text-muted:    #666666;
  --radius:              5px;
}

/* ==============================================
   ベーススタイル
   ============================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  background: transparent;
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

/* ==============================================
   発信ボタン
   ============================================== */
.zc-btn-wrap {
  display: flex;
  justify-content: center;
  padding: 12px 16px;
}

.zc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 1.0625rem;
  font-weight: bold;
  width: 100%;
  min-height: 60px;
  border-radius: 5px;
  background-color: #ea635c;
  color: #ffffff;
  box-shadow: 0px 4px 10px #cccccc;
  transition: color 300ms, background-color 300ms;
  cursor: pointer;
  text-decoration: none;
}

.zc-btn::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  mask-image: url(../../images/ico_phone.svg);
  -webkit-mask-image: url(../../images/ico_phone.svg);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background-color: #ffffff;
  transition: background-color 300ms;
}

.zc-btn:hover {
  background-color: #d94f48;
  color: #ffffff;
}

.zc-btn:hover::before {
  background-color: #ffffff;
}

/* ==============================================
   通話UI
   ============================================== */
.zc-call {
  padding: 20px 16px;
}

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 14px;
}

.status__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-idle);
}

.status__text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-idle);
}

.status[data-state="preparing"] .status__dot,
.status[data-state="connecting"] .status__dot {
  background: var(--color-wait);
  animation: pulse 1.4s ease-in-out infinite;
}
.status[data-state="preparing"] .status__text,
.status[data-state="connecting"] .status__text { color: var(--color-wait); }
.status[data-state="in-call"] .status__dot     { background: var(--color-live); }
.status[data-state="in-call"] .status__text    { color: var(--color-live); }
.status[data-state="error"] .status__dot       { background: var(--color-error); }
.status[data-state="error"] .status__text      { color: var(--color-error); }

@keyframes pulse { 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .status__dot { animation: none !important; }
}

.detail {
  min-height: 1.6em;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 8px;
}

.timer {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--color-live);
  margin-bottom: 8px;
}

.btn-call {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-top: 16px;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-primary-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-call:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-call:disabled { opacity: 0.5; cursor: default; }
.btn-call[data-variant="hangup"] { background: var(--color-hangup); }
.btn-call[data-variant="hangup"]:hover:not(:disabled) { filter: brightness(1.1); }

.meter { margin-top: 14px; }

.meter__label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 5px;
}

.meter__track {
  height: 5px;
  border-radius: 3px;
  background: var(--color-border);
  overflow: hidden;
}

.meter__bar {
  height: 100%;
  width: 0%;
  background: var(--color-live);
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .meter__bar { transition: none; }
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.keypad__caption {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.keypad button {
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}

.keypad button:hover { background: var(--color-bg); }




/* 戻るボタン */
.btn-back {
  display: block;
  margin-top: 16px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 4px 0;
}

.btn-back:hover { color: var(--color-text); }

[hidden] { display: none !important; }

/* ==============================================
   見出し・説明文
   ============================================== */
.zc-head {
  padding: 0 0 14px;
  margin-bottom: 4px;
}

.zc-head__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.zc-head__desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}