/* 집중 소리 전용 스타일 — common.css 토큰(var(--kt-…))만 쓴다 */

/* hidden 속성이 컴포넌트의 display에 덮이지 않게 */
.kt-stage [hidden] { display: none !important; }

/* 제목 입력이 없는 도구: 아이콘 버튼을 오른쪽으로 */
.kt-topbar__tools { margin-left: auto; }

/* ---- 지금 재생 중 ---- */
.fc-now {
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-fs-xl);
  line-height: 1.3;
  color: var(--kt-ink);
}
@media (min-width: 768px) {
  .fc-now { font-size: var(--kt-fs-2xl); }
}

.fc-board { width: 100%; }

/* ---- 소리 버튼 두 묶음 ---- */
.fc-groups {
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: var(--kt-space-3);
}
.fc-group__title {
  margin: 0 0 var(--kt-space-2);
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-fs-m);
  color: var(--kt-ink-soft);
}
.fc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kt-space-2);
}
@media (min-width: 640px) {
  .fc-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

.fc-sound {
  position: relative;
  min-height: 60px;
  width: 100%;
  padding: 0 var(--kt-space-3);
  font-size: var(--kt-fs-m);
}
.fc-sound__name { white-space: nowrap; }
.fc-sound.is-loading { cursor: progress; }

/* 재생 중인 버튼: 느린 숨쉬기(크기·밝기 미세 변화) */
@keyframes fc-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.03); filter: brightness(1.04); }
}
.fc-sound.is-playing { animation: fc-breathe 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .fc-sound.is-playing { animation: none; }
}

/* ---- 볼륨 ---- */
.fc-volume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--kt-space-2) var(--kt-space-3);
  width: 100%;
  max-width: 560px;
}
.fc-volume__label {
  font-weight: 600;
  font-size: var(--kt-fs-m);
}
.fc-volume__value {
  min-width: 3ch;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-fs-l);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 슬라이더: 웜 그레이 홈 + 분홍 손잡이(검정 테두리). 분홍은 면으로만 */
.fc-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 200px;
  min-width: 0;
  height: 48px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.fc-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--kt-radius-s);
  background: var(--kt-ui-line);
}
.fc-range::-moz-range-track {
  height: 6px;
  border-radius: var(--kt-radius-s);
  background: var(--kt-ui-line);
}
.fc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border: 2px solid var(--kt-ink);
  border-radius: 50%;
  background: var(--kt-primary);
}
.fc-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 2px solid var(--kt-ink);
  border-radius: 50%;
  background: var(--kt-primary);
}
.fc-range:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- 꺼짐 예약 ---- */
.fc-sleep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kt-space-2);
}
.fc-sleep__label {
  margin: 0;
  font-weight: 600;
  font-size: var(--kt-fs-m);
}
.fc-sleep__btns { gap: var(--kt-space-1); }
.fc-sleep__btns .kt-btn--sm { padding: 0 12px; }
.fc-sleep .kt-hint { margin: 0; }

.fc-note { margin: 0; max-width: 34em; text-wrap: balance; }

/* ---- 전체화면: 지금 소리 이름 · 남은 시간 · 소리 버튼(누르면 재생/정지)만 크게 ---- */
.kt-is-fullscreen .fc-now { font-size: clamp(28px, 5vw, 56px); }
.kt-is-fullscreen .fc-groups { max-width: 1040px; }
.kt-is-fullscreen .fc-sound { min-height: 64px; font-size: var(--kt-fs-l); }
/* 재생 중 전체화면: 고른 버튼 하나만 남겨 정지 버튼으로 쓴다(멈춤이면 9개 모두 보임) */
.kt-is-fullscreen .fc-playing .fc-group__title,
.kt-is-fullscreen .fc-playing .fc-sound[aria-pressed="false"],
.kt-is-fullscreen .fc-playing .fc-group:not(:has([aria-pressed="true"])) { display: none; }
.kt-is-fullscreen .fc-playing .fc-grid { display: flex; justify-content: center; }
.kt-is-fullscreen .fc-playing .fc-sound { width: auto; min-width: min(280px, 100%); }
.kt-is-fullscreen .fc-playing .fc-sound[aria-pressed="true"] .fc-sound__name::after { content: " 멈추기"; }
/* 점수판 아래 정지 버튼 줄과 위 소리 이름 줄 자리를 남긴다(공통 규칙은 460px) */
.kt-is-fullscreen .fc-board .kt-num--short { --kt-num-size: max(48px, min(33.5cqi, 50vh, 100vh - 500px)); }