:root { --bg:#fff8ef; --card:#ffffff; --ink:#2b2a33; --muted:#7a7686; --pri:#ff7a59; --pri2:#ffb36b; --ai:#eef6ff; --me:#fff0e6; --line:#f0e4d6; --ok:#2fa36b; }
@media (prefers-color-scheme: dark) { :root { --bg:#1b1a20; --card:#25242c; --ink:#f1eff6; --muted:#a19dae; --ai:#22314a; --me:#4a2f22; --line:#36343f; } }
* { box-sizing: border-box; }
body { margin:0; font-family: "Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif; background:var(--bg); color:var(--ink); }
button { font:inherit; cursor:pointer; border:0; border-radius:12px; padding:10px 16px; }
.primary { background:linear-gradient(135deg,var(--pri),var(--pri2)); color:#fff; font-weight:700; }
.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.top { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; border-bottom:1px solid var(--line); }
.brand { font-size:20px; } .sub { color:var(--muted); font-size:14px; margin-left:6px; }
.layout { display:grid; grid-template-columns: 240px 1fr 280px; gap:16px; padding:16px; height:calc(100vh - 62px); }
.side { background:var(--card); border-radius:16px; padding:14px; overflow:auto; border:1px solid var(--line); }
.side h3 { margin:14px 0 8px; font-size:14px; color:var(--muted); } .side h3:first-child { margin-top:0; }
.scenarios { display:grid; gap:6px; }
.scenarios button { text-align:left; background:transparent; border:1px solid var(--line); color:var(--ink); }
.scenarios button.on { background:var(--me); border-color:var(--pri); font-weight:700; }
.starter label, .opt { display:block; margin:6px 0; font-size:14px; }
.opt input[type=range] { width:100%; }
.chat { display:flex; flex-direction:column; background:var(--card); border-radius:16px; border:1px solid var(--line); min-height:0; }
.scene { padding:12px 16px; border-bottom:1px solid var(--line); font-weight:700; }
.scene small { color:var(--muted); font-weight:400; }
.messages { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.msg { max-width:78%; padding:10px 14px; border-radius:16px; line-height:1.45; }
.msg.ai { background:var(--ai); align-self:flex-start; border-bottom-left-radius:4px; }
.msg.me { background:var(--me); align-self:flex-end; border-bottom-right-radius:4px; }
.msg .ko { color:var(--muted); font-size:13px; margin-top:4px; }
.msg .tip { margin-top:6px; font-size:13px; padding:6px 8px; border-radius:8px; background:rgba(47,163,107,.12); color:var(--ok); }
.msg .replay { background:none; padding:0 0 0 6px; font-size:14px; }
.hide-ko .ko, .hide-tip .tip { display:none; }
.controls { border-top:1px solid var(--line); padding:12px 16px; }
.status { text-align:center; color:var(--muted); font-size:14px; margin-bottom:8px; min-height:20px; }
.row { display:flex; gap:10px; justify-content:center; align-items:center; } .row.end { justify-content:flex-end; }
.mic { width:64px; height:64px; border-radius:50%; font-size:26px; background:var(--pri); color:#fff; }
.mic:disabled { opacity:.35; cursor:default; }
.mic.listening { animation:pulse 1.2s infinite; background:#e5484d; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(229,72,77,.5)} 100%{box-shadow:0 0 0 18px rgba(229,72,77,0)} }
.type { display:flex; gap:8px; margin-top:10px; }
.type input { flex:1; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; }
.phrase { padding:8px 10px; border:1px solid var(--line); border-radius:10px; margin-bottom:6px; cursor:pointer; font-size:14px; }
.phrase:hover { border-color:var(--pri); } .phrase small { display:block; color:var(--muted); }
.goal { font-size:14px; background:var(--me); padding:10px; border-radius:10px; }
dialog { border:0; border-radius:16px; background:var(--card); color:var(--ink); width:min(460px,92vw); }
.settings label { display:block; margin:10px 0; font-size:14px; }
.settings input, .settings select { width:100%; padding:8px; margin-top:4px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; }
.hint { font-size:13px; color:var(--muted); }
.usage { font-size:13px; color:var(--muted); }
.alert { margin:8px 16px 0; padding:8px 12px; border-radius:10px; font-size:14px; background:var(--ai); }
.alert.warn { background:rgba(255,169,77,.18); } .alert.error { background:rgba(229,72,77,.15); }
.btnlink { text-decoration:none; display:inline-block; border-radius:12px; padding:10px 16px; }
.scenarios button.done::after { content:' ✓'; color:var(--ok); }
@media (max-width: 900px) {
  .layout { grid-template-columns:1fr; height:auto; padding:10px 16px; gap:10px; }
  .top { padding:10px 16px; } .sub { display:none; }
  .side { padding:10px; }
  .side h3 { display:none; }
  .scenarios { display:flex; overflow-x:auto; gap:6px; padding-bottom:4px; }
  .scenarios button { white-space:nowrap; padding:8px 12px; flex:none; }
  .starter { display:flex; gap:14px; margin-top:8px; }
  .opt { display:inline-block; margin:6px 10px 0 0; font-size:13px; }
  .chat { height:72vh; }
  .msg { max-width:88%; }
  .phrases h3 { display:block; }
}