.page { min-height: 100vh; background: #F1EFEB; }
.page.dark { background: #131312; }

.top { display: flex; align-items: center; gap: 1.6vw; padding: 1.333vw 3.2vw 2.133vw; }
.back { width: 7.467vw; font-size: 6.933vw; line-height: 1; color: #1A1915; }
.dark .back { color: #ECEAE4; }
.sbox { flex: 1; display: flex; align-items: center; height: 9.6vw; background: #fff; border-radius: 5.067vw; padding: 0 3.2vw; }
.dark .sbox { background: #201F1D; }
.s-ic { width: 3.733vw; height: 3.733vw; border: 0.533vw solid #9C9C97; border-radius: 50%; position: relative; margin-right: 1.867vw; }
.s-ic::after { content: ''; position: absolute; right: -1.333vw; bottom: -0.8vw; width: 1.867vw; height: 0.533vw; background: #9C9C97; transform: rotate(45deg); }
.s-input { flex: 1; font-size: 3.733vw; color: #1A1915; }
.dark .s-input { color: #ECEAE4; }
.s-clear { width: 5.867vw; text-align: center; color: #9C9C97; font-size: 3.467vw; }
.s-go { font-size: 3.733vw; color: #C2841A; font-weight: 600; padding: 0 0.8vw; }

.voice-row { padding: 1.067vw 3.2vw 2.667vw; }
.voice-btn { height: 11.733vw; line-height: 11.733vw; text-align: center; border-radius: 2.4vw; background: #fff; color: #6B6B68; font-size: 3.733vw; }
.dark .voice-btn { background: #201F1D; color: #9A988F; }
.voice-btn.rec { background: #D99A2B; color: #fff; }

.hint { text-align: center; color: #9C9C97; font-size: 3.6vw; padding: 13.333vw 5.333vw; }

.list { padding: 0 3.2vw 5.333vw; }
.row { background: #fff; border-radius: 2.4vw; padding: 3.467vw; margin-bottom: 2.133vw; }
.dark .row { background: #201F1D; }
.r-title { font-size: 4vw; font-weight: 600; color: #1A1915; line-height: 1.4; }
.dark .r-title { color: #ECEAE4; }
.r-meta { font-size: 2.933vw; color: #9C9C97; margin-top: 1.333vw; }
.r-preview { font-size: 3.333vw; color: #6B6B68; margin-top: 1.6vw; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dark .r-preview { color: #9A988F; }