:root {
  --bg: #f7f4ec;
  --card: #fffdf8;
  --ink: #24211d;
  --muted: #6a6258;
  --line: #e3dacb;
  --accent: #6b7d8e;
  --accent-dark: #43596b;
  --accent-soft: #e7eef3;
  --warning: #fff2dc;
  --danger: #9e3c30;
  --ok: #3f7157;
  --warn: #9b6b24;
  --shadow: 0 10px 30px rgba(74, 64, 50, 0.09);
  --radius: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; }
body { min-height: 100vh; }
button, textarea, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(960px, 100%); margin: 0 auto; padding: 14px 14px 34px; }
.app-header { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 44px 1fr 44px; gap: 10px; align-items: center; padding: 12px 4px 14px; background: rgba(247, 244, 236, 0.93); backdrop-filter: blur(10px); }
.app-header h1 { font-size: clamp(1.25rem, 4vw, 1.9rem); line-height: 1.1; margin: 0; }
.eyebrow, .hero-kicker { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.08em; margin: 0 0 4px; }
.hidden { visibility: hidden; }
.icon-button { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--accent-dark); box-shadow: var(--shadow); }

.app-main { display: grid; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.card h2, .card h3 { margin: 0 0 10px; line-height: 1.35; }
.card p { line-height: 1.75; margin: 0 0 10px; }
.card p:last-child { margin-bottom: 0; }
.hero { background: linear-gradient(135deg, #fffdf8 0%, #edf3f6 100%); }
.hero h2 { font-size: clamp(1.42rem, 5vw, 2.25rem); margin: 0 0 10px; line-height: 1.35; }
.soft-warning { background: var(--warning); }
.compact { padding: 16px; }
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }
.compact-list { margin-top: 4px; }

.mode-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode-card { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); padding: 16px; min-height: 148px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow); color: var(--ink); }
.mode-card:active { transform: translateY(1px); }
.mode-card .mode-duration { color: var(--accent-dark); font-weight: 700; margin: 0 0 8px; }
.mode-card h3 { margin: 0 0 8px; font-size: 1.08rem; }
.mode-card p { color: var(--muted); line-height: 1.55; margin: 0; font-size: 0.94rem; }

.primary, .secondary, .ghost { border: 0; border-radius: 14px; min-height: 46px; padding: 10px 14px; font-weight: 700; }
.primary { background: var(--accent-dark); color: white; }
.secondary { background: var(--accent-soft); color: var(--accent-dark); }
.ghost { background: transparent; color: var(--accent-dark); border: 1px solid var(--line); }
.primary:disabled, .secondary:disabled, .ghost:disabled { opacity: .5; cursor: not-allowed; }
.danger { color: var(--danger); }
.full { width: 100%; }
.button-row, .control-panel { display: grid; gap: 10px; }
.button-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.button-row.triple { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.control-panel { grid-template-columns: 1fr 1fr; }
.control-panel .primary, .control-panel .ghost { grid-column: span 2; }

.progress-wrap { display: grid; gap: 8px; }
.progress-bar { height: 12px; border-radius: 999px; background: #e9e1d4; overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 0.2s ease; }
.progress-text { color: var(--muted); margin: 0; font-size: 0.9rem; text-align: center; }
.current-step { text-align: center; padding: 22px 18px; }
.step-label { color: var(--accent-dark); font-weight: 700; margin: 0 0 8px; }
.current-step h2 { font-size: clamp(1.4rem, 6vw, 2.2rem); }
.step-guide { font-size: 1.02rem; }
.timer { font-variant-numeric: tabular-nums; font-size: clamp(3.2rem, 18vw, 6rem); font-weight: 800; letter-spacing: -0.06em; margin: 10px 0; color: var(--accent-dark); }
.observe-text { color: var(--muted); background: #f4efe6; border-radius: 14px; padding: 12px; }
.field-label { display: block; font-weight: 700; color: var(--accent-dark); margin: 12px 0 6px; }
textarea { width: 100%; min-height: 84px; border: 1px solid var(--line); border-radius: 14px; background: #fffefa; padding: 12px; resize: vertical; line-height: 1.5; }

.note-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.note-button { border: 1px solid var(--line); background: #fffefa; color: var(--ink); border-radius: 14px; min-height: 66px; font-weight: 800; }
.note-button.active { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }
.note-button span { display: block; color: var(--muted); font-size: 0.76rem; margin-top: 3px; font-weight: 500; }
.note-button.active span { color: rgba(255,255,255,.78); }
.note-button.out-of-preset { opacity: .72; border-style: dashed; }
.note-button.out-of-preset span::after { content: " / 全域"; font-size: .68rem; opacity: .8; }
.note-button.active.out-of-preset { opacity: 1; border-style: solid; }

.preset-guide { background: #f4efe6; border-radius: 14px; padding: 12px; }

.pitch-monitor-card { display: grid; gap: 14px; }
.meter-wrap { height: 12px; background: #e9e1d4; border-radius: 999px; overflow: hidden; }
.meter-wrap span { display: block; height: 100%; width: 0%; background: var(--accent); transition: width .08s linear; }
.pitch-dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pitch-box { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: #fffefa; text-align: center; }
.pitch-box p { margin: 0 0 6px; color: var(--muted); font-size: .9rem; }
.pitch-box strong { display: block; color: var(--accent-dark); font-size: clamp(2rem, 10vw, 3.4rem); line-height: 1; }
.pitch-box span { color: var(--muted); font-size: .9rem; }
.tuner-card { border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: #fffefa; }
.tuner-scale { display: flex; justify-content: space-between; font-size: .82rem; color: var(--muted); padding: 0 4px 4px; }
.tuner-line { position: relative; height: 24px; border-radius: 999px; background: linear-gradient(90deg, #edd8ce 0%, #f5e6c8 35%, #dfece5 49%, #dfece5 51%, #f5e6c8 65%, #edd8ce 100%); overflow: hidden; }
.tuner-line::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(36,33,29,.35); }
#tunerNeedle { position: absolute; left: 50%; top: 2px; bottom: 2px; width: 5px; border-radius: 999px; background: var(--accent-dark); transform: translateX(-50%); transition: left .08s linear; }
.cents-text { text-align: center; font-weight: 700; color: var(--accent-dark); margin-top: 12px !important; }
.status-pill { display: block; width: fit-content; margin: 8px auto 0 !important; border-radius: 999px; padding: 7px 14px; font-weight: 800; line-height: 1.2 !important; }
.status-pill.neutral { background: var(--accent-soft); color: var(--accent-dark); }
.status-pill.ok { background: #dfece5; color: var(--ok); }
.status-pill.warn { background: #fff0d3; color: var(--warn); }
.status-pill.danger { background: #f5ded9; color: var(--danger); }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.check-grid label { background: #fffefa; border: 1px solid var(--line); border-radius: 14px; padding: 11px; line-height: 1.4; }
.check-list { margin: 0; padding-left: 1.25em; line-height: 1.85; }
.records-list { display: grid; gap: 12px; }
.record-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.record-item h3 { margin: 0 0 8px; font-size: 1.05rem; }
.record-meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 10px; }
.record-item dl { display: grid; gap: 8px; margin: 0; }
.record-item dt { font-weight: 700; color: var(--accent-dark); }
.record-item dd { margin: 0; white-space: pre-wrap; line-height: 1.55; }

@media (max-width: 720px) {
  .mode-grid { grid-template-columns: 1fr; }
  .note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-grid { grid-template-columns: 1fr; }
  .button-row.triple { grid-template-columns: 1fr; }
  .pitch-dashboard { grid-template-columns: 1fr; }
}


/* v3 音域マップ */
.range-map { margin: 16px 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: #fffefa; }
.range-map-head { display: grid; gap: 4px; margin-bottom: 10px; }
.range-map-head h4 { margin: 0; color: var(--accent-dark); font-size: 1rem; }
.range-map-head p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.range-track { position: relative; height: 58px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #f4efe6; }
.zone { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 4px; text-align: center; font-size: .74rem; font-weight: 800; color: rgba(36,33,29,.72); border-right: 1px solid rgba(255,255,255,.82); }
.zone.low { background: #efe4d4; }
.zone.main { background: #e5eadf; }
.zone.midhigh { background: #e2ecf1; }
.zone.goal { background: #dfe6f2; }
.zone.challenge { background: #f1e4c8; }
.zone.advanced { background: #efd9d6; }
.range-marker { position: absolute; top: 2px; bottom: 2px; width: 4px; border-radius: 999px; transform: translateX(-50%); z-index: 2; box-shadow: 0 0 0 3px rgba(255,255,255,.72); transition: left .08s linear; }
.range-marker.target { background: var(--accent-dark); }
.range-marker.detected { background: var(--danger); display: none; }
.range-marker.target::before, .range-marker.detected::before { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .68rem; font-weight: 800; padding: 2px 5px; border-radius: 999px; color: white; }
.range-marker.target::before { content: "目標"; top: 4px; background: var(--accent-dark); }
.range-marker.detected::before { content: "声"; bottom: 4px; background: var(--danger); }
.range-ticks { position: relative; height: 28px; margin-top: 6px; }
.range-ticks span { position: absolute; transform: translateX(-50%); color: var(--muted); font-size: .72rem; white-space: nowrap; }
.range-ticks span::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: -7px; width: 1px; height: 6px; background: var(--line); }
.range-legend { display: flex; gap: 14px; align-items: center; justify-content: flex-end; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.range-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 5px; vertical-align: -1px; }
.target-dot { background: var(--accent-dark); }
.detected-dot { background: var(--danger); }
.range-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.range-info { border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: #fffefa; }
.range-info-label { margin: 0 0 4px !important; font-size: .78rem; color: var(--muted); }
.range-info h4 { margin: 0 0 8px; color: var(--accent-dark); font-size: 1.05rem; }
.range-info p { margin: 0 0 7px; line-height: 1.55; }
.range-action { background: #f4efe6; border-radius: 12px; padding: 9px; color: var(--accent-dark); font-weight: 700; }

@media (max-width: 720px) {
  .range-info-grid { grid-template-columns: 1fr; }
  .range-track { height: 66px; }
  .zone { font-size: .66rem; writing-mode: vertical-rl; letter-spacing: .05em; }
  .range-ticks span { font-size: .66rem; }
}