@import "https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;600&display=swap";@import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css";:root{--bg-color:#f8f7f4;--text-primary:#2c2b29;--text-secondary:#7a7873;--accent:#d4a373;--border-color:#e2e0da;--white:#fff}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;flex-direction:column;min-height:100vh;font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6;display:flex}#root{background-color:var(--white);flex-direction:column;flex:1;width:100%;max-width:500px;min-height:100vh;margin:0 auto;display:flex;position:relative;box-shadow:0 0 40px #00000008}h1,h2,h3,h4,h5,h6{font-family:Noto Serif KR,serif;font-weight:400}button{cursor:pointer;background:0 0;border:none;font-family:inherit}.fade-in{animation:.8s ease-out forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.page-container{flex-direction:column;min-height:100vh;padding:40px 24px;display:flex}.page-header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.back-button{color:var(--text-secondary);align-items:center;gap:8px;font-size:14px;transition:color .3s;display:flex}.back-button:hover{color:var(--text-primary)}.page-title{text-align:center;flex:1;font-size:20px}.empty-space{width:60px}.home-container{flex-direction:column;min-height:100vh;padding:60px 30px;display:flex}.home-header{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;margin-bottom:40px;display:flex}.exhibition-title{letter-spacing:2px;color:var(--text-secondary);text-transform:uppercase;margin-bottom:24px;font-size:14px}.main-question{color:var(--text-primary);font-size:32px;line-height:1.4}.highlight{z-index:1;display:inline-block;position:relative}.highlight:after{content:"";background-color:var(--accent);opacity:.3;z-index:-1;height:12px;position:absolute;bottom:4px;left:-2px;right:-2px}.home-main{flex-direction:column;flex:1;display:flex}.subtitle{text-align:center;margin-bottom:8px;font-family:Pretendard,sans-serif;font-size:18px;font-weight:600}.description{color:var(--text-secondary);text-align:center;margin-bottom:32px;font-size:14px}.button-group{flex-direction:column;gap:16px;display:flex}.nav-button{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:16px;align-items:center;width:100%;padding:20px 24px;transition:all .3s;display:flex}.nav-button:hover{background-color:var(--text-primary);color:var(--white);border-color:var(--text-primary);transform:translateY(-2px);box-shadow:0 8px 24px #00000014}.nav-button:hover .icon-wrapper{color:var(--white);background-color:#ffffff1a}.icon-wrapper{background-color:var(--white);width:48px;height:48px;color:var(--text-primary);border-radius:50%;justify-content:center;align-items:center;margin-right:20px;transition:all .3s;display:flex}.nav-button span{font-size:16px;font-weight:500}.canvas-container{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:12px;flex:1;margin-bottom:24px;overflow:hidden}.drawing-canvas{touch-action:none;width:100%;height:100%}.writing-container{flex:1;margin-bottom:24px;display:flex}.writing-area{border:1px solid var(--border-color);resize:none;background-color:var(--bg-color);width:100%;color:var(--text-primary);border-radius:12px;flex:1;padding:24px;font-family:inherit;font-size:16px;line-height:1.8}.writing-area:focus{border-color:var(--text-secondary);outline:none}.voice-container{flex:1;justify-content:center;align-items:center;margin-bottom:24px;display:flex}.record-area{flex-direction:column;align-items:center;width:100%;display:flex}.recording-ui{flex-direction:column;align-items:center;display:flex;position:relative}.record-btn{background-color:var(--accent);width:80px;height:80px;color:var(--white);z-index:2;border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex}.record-btn.recording{background-color:#e63946;border-radius:20px}.mic-pulse{background-color:var(--accent);z-index:1;opacity:0;border-radius:50%;width:80px;height:80px;margin:auto;position:absolute;inset:0}.mic-pulse.active{background-color:#e63946;animation:1.5s infinite pulse}@keyframes pulse{0%{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}.status-text{color:var(--text-secondary);margin-top:32px;font-size:14px}.playback-ui{flex-direction:column;align-items:center;gap:24px;width:100%;display:flex}.audio-player{width:100%}.reset-btn{background-color:var(--bg-color);color:var(--text-primary);border:1px solid var(--border-color);border-radius:20px;align-items:center;gap:8px;padding:12px 20px;display:flex}.page-footer{justify-content:center;display:flex}.submit-btn{background-color:var(--text-primary);width:100%;color:var(--white);border-radius:12px;padding:18px;font-size:16px;font-weight:600;transition:opacity .3s}.submit-btn:disabled{opacity:.3;cursor:not-allowed}.icon-button{color:var(--text-secondary)}.icon-button:hover{color:var(--text-primary)}.color-palette{background-color:var(--white);border-radius:30px;justify-content:center;gap:12px;margin-bottom:20px;padding:10px;display:flex;box-shadow:0 4px 12px #0000000d}.color-btn{border:2px solid #0000;border-radius:50%;width:32px;height:32px;transition:transform .2s,border-color .2s;box-shadow:0 2px 4px #0000001a}.color-btn.selected{border-color:#a0a0a0;transform:scale(1.15)}.color-btn[style*="background-color: #FFFFFF"],.color-btn[style*="background-color: rgb(255, 255, 255)"]{border:1px solid #e2e0da}
