/* css/styles.css
   iPad Safari 우선: 큰 터치 타깃(최소 64px), 큰 오선/음표, hover에 기대지 않는 UI,
   세로/가로 모두 대응. 타이머/점수/오답 벌점 없음(ADR-0003). */

:root {
  --bg: #fff8ed;
  --card: #ffffff;
  --ink: #4a3b32;
  --ink-soft: #8a7a6d;
  --primary: #ff8b6a;
  --primary-dark: #f26a45;
  --soft: #ffe9d6;
  --soft-ink: #b5673c;
  --accent-pink: #ffc1cc;
  --line: #cbb9a6;
  --radius-lg: 28px;
  --radius-md: 18px;
  --touch-min: 72px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh; /* 최신 Safari: 주소창 높이 변화까지 반영. 구형은 위 100vh로 폴백 */
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  overscroll-behavior-y: contain;
}

body {
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
}

#app {
  max-width: 1180px; /* 넓은 화면에서 오선지가 더 크게 보이도록(가로 폭에 맞춰 확대). iPad 세로는 화면 폭이 더 작아 그대로 꽉 참 */
  margin: 0 auto;
  min-height: calc(100vh - 32px);
  min-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  flex: 1;
  padding: 12px 8px 32px;
  text-align: center;
}

/* ---- 공용 버튼 ---- */

.btn {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 14px 28px;
  border-radius: 999px;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 700;
  transition: transform 0.12s ease;
}

.btn:active {
  transform: scale(0.94);
}

.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 0 var(--primary-dark);
}

.btn--soft {
  background: var(--soft);
  color: var(--soft-ink);
  box-shadow: 0 4px 0 #e8caa6;
}

.btn--record {
  background: var(--accent-pink);
  color: #8a3b52;
  box-shadow: 0 4px 0 #e79cb0;
}

.btn--stop {
  background: #ff6b6b;
  color: #fff;
  box-shadow: 0 4px 0 #d94b4b;
}

.btn--icon {
  min-height: 56px;
  min-width: 56px;
  padding: 8px;
  font-size: 1.6rem;
  background: var(--card);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--line);
}

.btn--big {
  width: min(100%, 420px);
  padding: 20px 28px;
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
}

/* ---- 홈 ---- */

.screen--home {
  justify-content: center;
  gap: 26px;
}

.home-bunny {
  font-size: clamp(4rem, 14vw, 7rem);
  animation: bounce 2.4s ease-in-out infinite;
}

.home-greet {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
}

.home-copy {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 2.6vw, 1.2rem);
}

/* ---- 듣기/읽기 화면: 위에서부터 차곡차곡 쌓는다 ----
   악보가 여러 줄이라 세로로 길어질 수 있는데, 가운데 정렬하면 넘칠 때 위(헤더)가 잘리고
   아래(계이름 버튼)가 화면 밖으로 밀린다. 위 정렬로 바꿔 악보 아래 계이름 버튼이 항상 이어서 보이게 한다. */
.screen--listen,
.screen--read {
  justify-content: flex-start;
  flex: 1;
}

/* ---- 서브 헤더(듣기/읽기 공용) ---- */

.sub-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  position: relative;
}

.sub-header h2 {
  margin: 0;
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
}

.sub-header .btn--icon {
  position: absolute;
  left: 0;
}

.listen-copy {
  margin: 0;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  color: var(--ink-soft);
}

/* ---- 오선(SVG) ---- */

/* 곡 전체를 여러 줄(시스템)로 그려 한 화면에 담는다 — 가로 스크롤로 잘려 안 보이던 문제 해결.
   내용이 길면 줄 수가 늘어 세로로 길어지고, 필요하면 페이지가 세로로 스크롤된다. */
.staff-scroll {
  width: 100%;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  box-shadow: 0 4px 0 var(--line);
}

.staff-svg {
  display: block;
  /* viewBox의 가로세로 비율을 유지한 채 컨테이너 폭에 꽉 채운다 → 옆으로 넘쳐 잘리지 않는다.
     곡이 길수록 줄 수가 늘어 SVG 높이(height:auto)가 함께 커진다. */
  width: 100%;
  height: auto;
}

.staff-line {
  stroke: var(--ink);
  stroke-width: 2.5;
}

/* 마디선(세로) — 진짜 악보처럼 마디를 구분한다 */
.staff-bar {
  stroke: var(--ink);
  stroke-width: 2.5;
  opacity: 0.45;
}

/* 곡의 맨 끝 마디선(끝맺음선)은 굵게 */
.staff-bar--final {
  stroke-width: 5;
  opacity: 0.7;
}

.staff-ledger {
  stroke: var(--ink);
  stroke-width: 2.5;
}

/* 높은음자리표: 위키미디어 GClef(퍼블릭 도메인) 단일 경로를 채워서 그린다 — 진짜 악보 글리프 모양.
   폰트에 의존하지 않는 경로라 어떤 기기/폰트에서도 항상 같은 모양으로 보인다. */
.staff-clef {
  fill: var(--ink);
  stroke: none;
}

.staff-notehead {
  fill: var(--note-color, var(--ink));
  stroke: var(--ink);
  stroke-width: 1.5;
  opacity: 0.55;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.staff-notehead.is-done {
  opacity: 0.3;
}

.staff-notehead.is-current {
  opacity: 1;
  transform: scale(1.12);
}

/* 2분음표(반박=2박) — 속이 빈 음표머리. 박자(리듬)를 눈으로도 구별할 수 있게 한다 */
.staff-notehead.is-half {
  fill: var(--card);
  stroke-width: 3;
}

/* 음표 줄기 — 모든 음표에 그린다(4분/2분/8분 공통) */
.staff-stem {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.staff-stem.is-done {
  opacity: 0.3;
}

.staff-stem.is-current {
  opacity: 1;
}

/* 8분음표(반박=0.5박) 꼬리표 */
.staff-flag {
  fill: var(--ink);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.staff-flag.is-done {
  opacity: 0.3;
}

.staff-flag.is-current {
  opacity: 1;
}

.staff-cursor-glow {
  fill: #fff2b0;
  opacity: 0.9;
}

.staff-note-label {
  font-size: 26px;
  font-weight: 800;
  fill: var(--ink);
  text-anchor: middle;
}

/* ---- 악보 페이지 넘김(이전/다음) ---- */

.staff-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.staff-pager__label {
  font-weight: 800;
  color: var(--ink-soft);
  min-width: 52px;
  text-align: center;
  font-size: 1.1rem;
}

.btn--pager {
  min-height: 52px;
  min-width: 52px;
  padding: 8px 20px;
  font-size: 1.05rem;
  background: var(--soft);
  color: var(--soft-ink);
  box-shadow: 0 3px 0 #e8caa6;
}

.btn--pager:disabled {
  opacity: 0.4;
  box-shadow: none;
  cursor: default;
}

/* ---- 듣기 화면 액션 ---- */

.listen-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---- 계이름 버튼(읽기 화면) ---- */

/* 계이름 버튼: 조금 작게 만들고 margin-top:auto 로 화면 아래쪽으로 내린다(악보는 위, 버튼은 아래). */
.note-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100%;
  margin-top: auto; /* 위 공간을 흡수해 버튼을 화면 하단으로 내림 */
  padding-top: 6px;
}

.note-btn {
  min-height: 78px;
  min-width: 92px;
  max-width: 160px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 800;
  transition: transform 0.12s ease;
}

.note-btn:active {
  transform: scale(0.92);
}

.note-btn--accent {
  /* color-mix() 대신 옅은 흰 배경 + 진한 색 그림자/테두리로 낡은 iOS Safari에서도 안전하게 표시 */
  background: #ffffff;
  border: 3px solid var(--note-color);
  box-shadow: 0 4px 0 var(--note-color);
  color: var(--ink);
}

.note-btn--plain {
  background: var(--card);
  box-shadow: 0 4px 0 var(--line);
  color: var(--ink);
}

/* 계이름 글자 — 힌트 사다리 어느 단계에서도 쓰이는 핵심 텍스트 */
.note-btn__name {
  font-size: 1.6rem;
}

/* 연상 단어(도레미송 가사) 텍스트 — 그림/이모지 없이 순수 텍스트 힌트로만 표현 */
.note-btn__mnemonic {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.75;
  line-height: 1.2;
  text-align: center;
}

.note-btn__mnemonic--solo {
  font-size: 1.15rem;
  opacity: 0.9;
}

.note-btn--wiggle {
  animation: wiggle 0.4s ease;
}

.note-btn--flash {
  animation: flash 1s ease infinite;
}

@keyframes wiggle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-5px); }
}

@keyframes flash {
  0%, 100% { box-shadow: 0 4px 0 var(--note-color, var(--line)); }
  50% { box-shadow: 0 4px 0 var(--note-color, var(--line)), 0 0 0 6px rgba(255, 214, 102, 0.6); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ---- 힌트 배너 ---- */

.temp-hint {
  width: 100%;
  background: #fff2cf;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* display:flex 가 hidden 속성을 덮어써서 빈 힌트 막대가 항상 보이던 문제 — 숨김일 땐 확실히 감춘다 */
.temp-hint[hidden] {
  display: none;
}

/* ---- 완성 화면 ---- */

.complete-bunny {
  font-size: clamp(3.4rem, 12vw, 5.5rem);
  animation: bounce 1.2s ease-in-out infinite;
}

.complete-copy {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  margin: 0;
}

.complete-unlock {
  background: var(--soft);
  color: var(--soft-ink);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
}

.complete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ---- 녹음 패널 ---- */

.rec-panel {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 0 var(--line);
  max-width: 420px;
  margin: 0 auto;
}

.rec-panel--unavailable p {
  margin: 0;
}

.rec-panel__hint {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.rec-panel__saved {
  color: #3a8f5a;
  font-weight: 700;
}

/* ---- 나의 무대 ---- */

.screen--stage {
  align-items: stretch;
}

.stage-header {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  position: relative;
}

.stage-header h2 {
  margin: 0;
}

.stage-header .btn--icon {
  position: absolute;
  left: 0;
}

.stage-intro {
  color: var(--ink-soft);
  margin: 0;
  text-align: center;
}

.stage-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .stage-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.stage-card {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: 0 4px 0 var(--line);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stage-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stage-card__badge {
  font-size: 2rem;
}

.stage-card__title {
  margin: 0;
  font-size: 1.2rem;
}

.stage-card__meta {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.stage-card__recs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stage-card__rec {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stage-card__rec audio {
  flex: 1;
  min-width: 0;
}

.stage-card__rec-date {
  color: var(--ink-soft);
  font-size: 0.8rem;
  white-space: nowrap;
}

.stage-card__empty {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0;
}

.stage-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stage-card__actions .btn {
  min-height: 64px;
  padding: 10px 18px;
  font-size: 1rem;
  flex: 1;
}

.stage-teaser {
  text-align: center;
  color: var(--ink-soft);
}

/* ---- 곡 목록 (복습/재생 전용 — 새 곡 진행은 "오늘의 곡"이 맡는다) ---- */

.screen--songlist {
  align-items: stretch;
}

.songlist-intro {
  text-align: center;
  color: var(--ink-soft);
  margin: 0;
}

.song-list__stage {
  width: 100%;
}

.song-list__stage-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: var(--ink-soft);
  text-align: left;
}

.song-list__items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.song-item {
  min-height: 72px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  background: var(--card);
  box-shadow: 0 4px 0 var(--line);
  transition: transform 0.12s ease;
}

.song-item.is-unlocked:active {
  transform: scale(0.96);
}

.song-item.is-locked {
  background: #ece5db;
  color: var(--ink-soft);
  box-shadow: none;
  opacity: 0.75;
}

.song-item__icon {
  font-size: 1.3rem;
}

/* ---- 가로 모드 대응 ---- */

@media (orientation: landscape) and (max-height: 620px) {
  .screen {
    gap: 12px;
    padding: 8px 8px 20px;
  }

  .home-bunny {
    font-size: 3.4rem;
  }

  .note-btn {
    min-height: 76px;
    min-width: 76px;
  }
}