:root{
  --bg:#0f1722; --card:#172230; --line:#26354a; --txt:#e8eef7;
  --mut:#93a4bd; --pri:#2f6fd1; --pri2:#3f86ee; --ok:#2faf6a;
  --warn:#d9a13a; --err:#e0594f; --rad:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  background:var(--bg); color:var(--txt); font-size:16px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}
.screen{min-height:100dvh;display:flex;flex-direction:column}

/* 인증 — 화면 정중앙 정렬 (.card margin 상속 충돌 방지) */
#auth.screen{justify-content:center;align-items:center;padding:16px}
.auth-card{margin:auto;max-width:420px;width:100%;}
.brand{font-size:1.8rem;text-align:center;margin-bottom:.2em}
.brand-sm{font-weight:700}
.sub{color:var(--mut);text-align:center;margin-bottom:1.2em}
.seg{display:flex;background:#0e1722;border:1px solid var(--line);border-radius:var(--rad);padding:4px;margin-bottom:1em}
.seg-btn{flex:1;background:none;border:0;color:var(--mut);padding:.7em;border-radius:10px;font-size:1rem}
.seg-btn.active{background:var(--pri);color:#fff;font-weight:600}

/* 카드/폼 공통 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:18px;margin:14px;}
h1,h2{font-size:1.25rem;margin-bottom:.6em}
h3{font-size:1rem;margin:1.2em 0 .5em;color:var(--mut)}
label{display:block;font-size:.85rem;color:var(--mut);margin:.9em 0 .3em}
input,textarea,select,.form input{
  width:100%;background:#0e1722;border:1px solid var(--line);color:var(--txt);
  padding:.8em;border-radius:10px;font-size:1rem;font-family:inherit;
}
textarea{resize:vertical;min-height:120px}
.form input{margin-bottom:.6em}
button{cursor:pointer;font-family:inherit}
.primary{background:var(--pri);color:#fff;border:0;padding:.85em 1.1em;border-radius:10px;font-size:1rem;font-weight:600}
.primary:active{background:var(--pri2)}
.primary:disabled{opacity:.5}
.big{width:100%;margin-top:1em;padding:1em}
.ghost{background:none;border:1px solid var(--line);color:var(--mut);padding:.5em .8em;border-radius:8px}
.ghost.small{font-size:.85rem;float:right}
.hint{color:var(--mut);font-size:.82rem;margin-top:.8em;line-height:1.5}
.msg{margin-top:.8em;font-size:.9rem;min-height:1.2em}
.msg.ok{color:var(--ok)} .msg.err{color:var(--err)} .msg.warn{color:var(--warn)}
.adv{margin-top:1em;border-top:1px solid var(--line);padding-top:.6em}
.adv summary{color:var(--mut);font-size:.9rem;cursor:pointer}
.row2{display:flex;gap:10px}.row2>div{flex:1}
.or{text-align:center;color:var(--mut);font-size:.85rem;margin:1.1em 0 .5em}

/* 상단바/하단탭 */
.topbar{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.spacer{flex:1}
.who{color:var(--mut);font-size:.85rem}
.bottomnav{position:fixed;bottom:0;left:0;right:0;display:flex;
  background:#101a27;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);z-index:10}
.nav-btn{flex:1;background:none;border:0;color:var(--mut);padding:.9em .3em;font-size:.85rem}
.nav-btn.active{color:var(--pri2);font-weight:700}
.view{padding-bottom:90px}

/* 리스트 */
.list{list-style:none;margin-top:.5em}
.list li{background:#0e1722;border:1px solid var(--line);border-radius:10px;
  padding:12px;margin-bottom:10px}
.li-top{display:flex;align-items:center;gap:8px}
.li-title{font-weight:600;flex:1;word-break:break-all}
.badge{font-size:.72rem;padding:.2em .6em;border-radius:999px;white-space:nowrap}
.b-queued{background:#33415a;color:#bcd} .b-running{background:#234a73;color:#bfe0ff}
.b-done{background:#1e5a3c;color:#bfe9cf} .b-error{background:#5a2420;color:#ffd2cd}
.bar{height:7px;background:#22324a;border-radius:99px;margin:.6em 0;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--pri2);width:0;transition:width .4s}
.li-msg{font-size:.82rem;color:var(--mut)}
.li-actions{display:flex;gap:8px;margin-top:.7em;flex-wrap:wrap}
.li-actions button,.li-actions a{font-size:.85rem;padding:.5em .8em;border-radius:8px;
  text-decoration:none;text-align:center}
.del{background:none;border:1px solid var(--err);color:var(--err)}
audio{width:100%;margin-top:.7em}
.rec-box{display:flex;flex-direction:column;align-items:center;gap:10px}
.rec-timer{font-variant-numeric:tabular-nums;font-size:1.4rem;color:var(--err)}
.recording{background:var(--err)!important}
/* 반응형: 화면이 커질수록 카드/콘텐츠 폭 확대 (PC 가독성) */
@media(min-width:680px){
  body{font-size:15px}
  #app .view{max-width:820px;margin:0 auto;padding-left:10px;padding-right:10px}
  .card{padding:24px}
}
@media(min-width:1024px){
  #app .view{max-width:980px}
  .card{padding:28px 32px}
  h1,h2{font-size:1.4rem}
}
@media(min-width:1440px){
  #app .view{max-width:1140px}
}