오버캐스트: 인터페이스 디자인으로서의 오디오 엔지니어링

SMART SPEED: Dynamic Silence Shortening

Standard playback:
  "So... [400ms pause] ...the thing about... [600ms pause] ...podcasts is..."

Smart Speed:
  "So... [150ms] ...the thing about... [200ms] ...podcasts is..."

NOT the same as 1.5x speed:
  - Does not change pitch
  - Does not compress speech
  - Only shortens pauses dynamically
  - Adapts to each speaker's cadence
  - More aggressive on long pauses, gentle on short ones

RESULT: 10-20% time savings on most podcasts
         with zero perceptible quality loss

VOICE BOOST: Vocal Enhancement

Standard podcast audio:
  ┌─────────────────────────────────┐
  │  ▁▂▃▅▃▂▁  ← Quiet, muddy       │
  │  Wide dynamic range             │
  │  Background noise audible       │
  └─────────────────────────────────┘

Voice Boost enabled:
  ┌─────────────────────────────────┐
  │  ▃▅▇█▇▅▃  ← Loud, clear        │
  │  Compressed dynamic range       │
  │  Vocals boosted, noise reduced  │
  └─────────────────────────────────┘

Processing chain:
  1. Volume normalization (loudness targeting)
  2. Dynamic range compression
  3. Vocal frequency EQ boost (~1kHz-4kHz)
  4. Noise floor reduction

NOW PLAYING CONTROLS
┌─────────────────────────────────────────────┐
│                                             │
│  [Podcast Art]                              │
│                                             │
│  Episode Title                              │
│  Podcast Name                               │
│                                             │
│  ────────────●───────  32:15 / 1:04:22      │
│                                             │
│    -15s     ▶︎ / ⏸     +30s                  │
│                                             │
│  1.5×    [Smart Speed ✓]    [Voice Boost ✓] │
│          ↑                  ↑               │
│          토글만 있다.        토글만 있다.     │
│          슬라이더 없음.      EQ 커브 없음.    │
│          설정 없음.          설정 없음.       │
│                                             │
│  Smart Speed has saved you 142 hours        │
│  ↑                                          │
│  이 한 줄이 곧 가치 제안이다.                │
└─────────────────────────────────────────────┘

/* Overcast's color system */
:root {
  /* The orange: used sparingly, means "active" or "primary" */
  --overcast-orange: #FC7E0F;
  --overcast-orange-light: #FFA54C;

  /* Backgrounds: near-black in dark mode */
  --bg-primary: #1C1C1E;
  --bg-secondary: #2C2C2E;
  --bg-tertiary: #3A3A3C;

  /* Text hierarchy */
  --text-primary: #FFFFFF;
  --text-secondary: #8E8E93;
  --text-tertiary: #636366;
}

/* Orange appears ONLY in these contexts: */

/* 1. Now Playing progress bar */
.progress-bar-fill {
  background: var(--overcast-orange);
  height: 4px;
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* 2. Active/playing episode indicator */
.episode-playing-indicator {
  color: var(--overcast-orange);
}

/* 3. Primary action buttons */
.btn-primary {
  background: var(--overcast-orange);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-weight: 600;
}

/* 4. Toggle states */
.toggle-active {
  background: var(--overcast-orange);
}

/* Everything else: white, gray, or black.
   No secondary accent color. No gradients.
   The restraint IS the brand. */

MUSIC QUEUE vs PODCAST QUEUE

Music:
  - Songs are 3-5 minutes
  - Fully consumed in one sitting
  - Order matters for mood/flow
  - Shuffle is common
  - Rarely return to partially-played

Podcasts:
  - Episodes are 30-120 minutes
  - Often consumed across multiple sessions
  - Recency and priority matter more than flow
  - Shuffle is almost never desired
  - Partially-played episodes are the norm

OVERCAST'S QUEUE DESIGN:
┌─────────────────────────────────────────────┐
│  Up Next                          [Edit]    │
│                                             │
│  ┌─────────────────────────────────────┐    │
│  │ ▶ Currently Playing                 │    │
│  │   The Talk Show · 45:22 remaining   │    │
│  │   ████████████░░░░░░░░  68%          │    │
│  └─────────────────────────────────────┘    │
│                                             │
│  ┌─────────────────────────────────────┐    │
│  │ 1. ATP · 2:14:00                    │    │
│  │    Priority: ⚡ Next                 │    │
│  └─────────────────────────────────────┘    │
│                                             │
│  ┌─────────────────────────────────────┐    │
│  │ 2. Cortex · 1:32:00                 │    │
│  │    Priority: Normal                 │    │
│  └─────────────────────────────────────┘    │
│                                             │
│  Smart Playlists:                           │
│  [All Episodes] [Priority] [Short <30m]     │
│                                             │
│  Custom playlists with filter rules:        │
│  - By podcast                               │
│  - By duration                              │
│  - By age                                   │
│  - Played/unplayed state                    │
└─────────────────────────────────────────────┘

/* Episode card with progress state */
.episode-card {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-tertiary);
}

.episode-artwork {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  flex-shrink: 0;
}

.episode-info {
  flex: 1;
  min-width: 0;
}

.episode-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.episode-podcast-name {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Inline progress bar showing partial consumption */
.episode-progress {
  height: 3px;
  background: var(--bg-tertiary);
  border-radius: 1.5px;
  margin-top: 8px;
  overflow: hidden;
}

.episode-progress-fill {
  height: 100%;
  background: var(--overcast-orange);
  border-radius: 1.5px;
}

/* Duration badge — crucial for podcast queue planning */
.episode-duration {
  font-size: 12px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.episode-duration.short::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #50C878;
  margin-right: 4px;
  vertical-align: middle;
}

FIRST WEEK:
  "Smart Speed has saved you 23 minutes"
  → 사용자 반응: "괜찮네"

FIRST MONTH:
  "Smart Speed has saved you 4.2 hours"
  → 사용자 반응: "와, 꽤 쌓이는구나"

FIRST YEAR:
  "Smart Speed has saved you 52 hours"
  → 사용자 반응: "절대 다른 앱으로 못 바꾸겠다"

THE PSYCHOLOGY:
  - 누적 지표는 전환 비용을 만든다
  - 성장하는 숫자는 손실 회피를 유발한다
  - 구체적인 시간 > 추상적인 "더 나은 품질"
  - 공유하고 싶어진다 ("나 100시간 절약했어!")

CHAPTER NAVIGATION
┌─────────────────────────────────────────────┐
│  Chapters                                   │
│                                             │
│  ✓  0:00  Introduction                      │
│  ✓  4:22  News roundup                      │
│  ▶  18:45  Interview: Guest Name    ← active│
│     35:10  Deep dive: Topic                 │
│     52:30  Listener questions               │
│     1:02:15  Wrap-up                        │
│                                             │
│  Tap any chapter to jump.                   │
│  ✓ = already listened                       │
└─────────────────────────────────────────────┘

/* Chapter list */
.chapter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chapter-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bg-tertiary);
  cursor: pointer;
  transition: background 0.1s ease;
}

.chapter-item:hover {
  background: var(--bg-secondary);
}

.chapter-item.active {
  background: var(--bg-secondary);
}

.chapter-item.active .chapter-title {
  color: var(--overcast-orange);
  font-weight: 600;
}

.chapter-item.played .chapter-title {
  color: var(--text-tertiary);
}

.chapter-timestamp {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
  min-width: 52px;
}

.chapter-title {
  font-size: 15px;
  color: var(--text-primary);
}

/* Played checkmark */
.chapter-item.played::before {
  content: "✓";
  color: var(--text-tertiary);
  font-size: 12px;
  min-width: 16px;
}

.chapter-item:not(.played)::before {
  content: "";
  min-width: 16px;
}

.chapter-item.active::before {
  content: "▶";
  color: var(--overcast-orange);
  font-size: 10px;
  min-width: 16px;
}

SKIP INTERVAL SETTINGS
┌─────────────────────────────────────────────┐
│  Playback                                   │
│                                             │
│  Skip Back:    [-]  15 seconds  [+]         │
│  Skip Forward: [-]  30 seconds  [+]         │
│                                             │
│  Available: 5, 10, 15, 30, 45, 60, 90s     │
│                                             │
│  비대칭 기본값의 이유:                        │
│  - 뒤로 건너뛰기: 놓친 내용 복구 (15초)      │
│  - 앞으로 건너뛰기: 광고/인트로 건너뛰기 (30초)│
│  - 다른 사용 목적 → 다른 시간 간격            │
└─────────────────────────────────────────────┘