* { box-sizing: border-box; } body { margin: 0; font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; background: #f4f4f4; } .container { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; padding: 24px; height: 100vh; } .panel { background: #ffffff; border: 1px solid #d2d2d2; padding: 20px; display: flex; flex-direction: column; gap: 16px; } .panel-header { font-weight: 700; font-size: 18px; color: #444; } textarea { width: 100%; resize: none; padding: 12px; border: 1px solid #c9c9c9; border-radius: 4px; font-size: 16px; line-height: 1.5; flex: 1; } .save-row { display: flex; gap: 12px; align-items: center; } .voice-select { border: 1px solid #c9c9c9; border-radius: 4px; padding: 10px 12px; font-size: 14px; background: #ffffff; color: #333; } button { border: none; padding: 12px 18px; font-size: 16px; cursor: pointer; border-radius: 4px; } button.primary { background: #1f5f7a; color: #ffffff; } button.secondary { background: #4f9acb; color: #ffffff; } button.danger { background: #c84040; color: #ffffff; } .progress-wrap { width: 100%; height: 10px; background: #f1d9a6; border-radius: 6px; overflow: hidden; } .progress-bar { height: 100%; width: 0%; background: #f5a623; transition: width 0.2s ease; } .tts-list { list-style: none; padding: 0; margin: 0; flex: 1; overflow-y: auto; } .tts-item { display: flex; align-items: center; gap: 12px; padding: 10px 6px; cursor: pointer; border-bottom: 1px solid #eee; } .tts-item:hover { background: #f1f6f9; } .tts-item.selected { background: #f7f7f7; border-left: 4px solid #e2e2e2; padding-left: 2px; } .bullet { font-size: 18px; color: #555; } .item-label { font-size: 15px; color: #333; } .right-actions { display: flex; gap: 12px; justify-content: flex-end; } .hidden { display: none; } #download-link { text-align: right; color: #1f5f7a; text-decoration: none; font-size: 14px; }