/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* 아인보이스 디자인 토큰 — 원본: aiin-voice-design 프로토타입/디자인 시스템 12카드 */
:root {
  --bg: #fbfaf7;
  --card: #ffffff;
  --bg2: #f3f2ec;
  --ink: #1b212d;
  --sub: #5c6577;
  --faint: #9aa2b2;
  --line: #e8e6df;
  --line2: #f0eee8;
  --accent: #e8492e;
  --accent-h: #d13c23;
  --asoft: #fceee9;
  --ok: #1e7a4f;
  --c0: #c05a2e;
  --c1: #2e86a8;
  --c2: #7a5bc7;
  --c3: #2e8b5f;
  --sh: 0 1px 2px rgba(25, 31, 43, 0.05), 0 4px 16px rgba(25, 31, 43, 0.06);
  --sh-lg: 0 18px 50px rgba(25, 31, 43, 0.14);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --kr: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR",
    "Malgun Gothic", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg); /* 기본 테마 = 낮(라이트) 고정 */
  color: var(--ink);
  font-family: var(--kr);
  font-size: 14.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: var(--kr);
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
}

/* ── 가입/온보딩 (U02·U03) — aiin-voice-auth.html 이식 ── */
.authwrap { display: flex; height: 100vh; overflow: hidden; }
.flow { flex: 1 1; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; }
.fhead { display: flex; align-items: center; gap: 10px; padding: 18px 26px; flex: none; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 16px; letter-spacing: -0.02em; }
.logo i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--asoft); }
.grow { flex: 1 1; }
.fbody { flex: 1 1; display: flex; align-items: center; justify-content: center; padding: 20px 26px 50px; }
.panel { width: min(420px, 100%); animation: fade 0.35s; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }
.panel h1 { font-size: 24px; font-weight: 900; letter-spacing: -0.03em; margin: 0 0 6px; }
.psub { font-size: 13.5px; color: var(--sub); margin: 0 0 22px; }

.soc { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 46px; border-radius: 11px; font-size: 14px; font-weight: 700; margin-bottom: 9px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--sh); }
.soc:hover { filter: brightness(0.98); }
.soc.kakao { background: #fee500; border-color: #fee500; color: #1b1b1b; }
.soc.naver { background: #03c75a; border-color: #03c75a; color: #fff; }
.divide { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 11px; margin: 16px 0; }
.divide::before, .divide::after { content: ""; flex: 1 1; height: 1px; background: var(--line); }
.fld { margin-bottom: 10px; }
.fld input { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink); font-family: var(--kr); font-size: 14px; padding: 0 14px; outline: none; }
.fld input:focus { border-color: var(--accent); }
.agree { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 14px 0; font-size: 12px; color: var(--sub); }
.agree label { display: flex; gap: 9px; align-items: flex-start; padding: 4px 0; cursor: pointer; }
.agree input { accent-color: var(--accent); width: 15px; height: 15px; margin-top: 2px; flex: none; }
.agree .hi { background: var(--asoft); border-radius: 8px; padding: 7px 9px; margin-top: 4px; }
.agree .hi b { color: var(--accent); }
.cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.cta:hover { background: var(--accent-h); }
.cta:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.foot { font-size: 12px; color: var(--faint); text-align: center; margin-top: 16px; }
.foot a { color: var(--accent); font-weight: 700; }

.obstep { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--accent); font-weight: 700; margin-bottom: 10px; }
.usecards { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; margin: 18px 0; }
.uc { border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); padding: 16px 14px; cursor: pointer; box-shadow: var(--sh); text-align: left; }
.uc:hover { border-color: var(--faint); }
.uc.on { border-color: var(--accent); background: var(--asoft); }
.uc .i { font-size: 22px; display: block; margin-bottom: 8px; }
.uc b { font-size: 13.5px; display: block; }
.uc small { font-size: 10.5px; color: var(--faint); }
.vrec { display: flex; flex-direction: column; gap: 9px; margin: 18px 0; }
.vr { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 13px; background: var(--card); padding: 11px 14px; cursor: pointer; box-shadow: var(--sh); text-align: left; width: 100%; }
.vr.playing { border-color: var(--accent); }
.vr .face { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.vr b { font-size: 13.5px; display: block; }
.vr small { font-size: 10.5px; color: var(--faint); }
.vr .pl { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--sub); flex: none; }
.vr.playing .pl { background: var(--accent); border-color: var(--accent); color: #fff; }
.celebr { text-align: center; padding: 10px 0 4px; }
.celebr .big { font-size: 44px; margin-bottom: 8px; }
.celebr .credit { display: inline-block; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent); background: var(--asoft); border-radius: 99px; padding: 6px 18px; margin: 10px 0 18px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.skip { display: block; text-align: center; font-size: 12px; color: var(--faint); margin-top: 14px; width: 100%; }
.skip:hover { color: var(--sub); }

.brand { width: 44%; min-width: 380px; background: var(--ink); color: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 50px; position: relative; overflow: hidden; }
@media (max-width: 900px) { .brand { display: none; } }
.brand::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 300px at 70% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.brand > * { position: relative; }
.brand h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.3; margin: 0 0 14px; }
.brand p { font-size: 13.5px; opacity: 0.65; margin: 0 0 30px; max-width: 340px; }
.bwave { display: flex; align-items: center; gap: 3px; height: 44px; max-width: 340px; margin-bottom: 26px; }
.bwave i { flex: 1 1; border-radius: 2px; background: color-mix(in srgb, var(--accent) 65%, transparent); }
.bquote { border-left: 2.5px solid var(--accent); padding-left: 14px; font-size: 12.5px; opacity: 0.8; max-width: 320px; }

.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(14px); background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 600; border-radius: 99px; padding: 10px 22px; opacity: 0; transition: 0.3s; z-index: 60; pointer-events: none; box-shadow: var(--sh-lg); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 스튜디오 홈(미니) ── */
.studio { min-height: 100vh; background: var(--bg); }
.shead { display: flex; align-items: center; gap: 10px; padding: 18px 26px; border-bottom: 1px solid var(--line2); background: var(--card); }
.sbody { max-width: 760px; margin: 0 auto; padding: 40px 24px; }
.scard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; box-shadow: var(--sh); margin-bottom: 16px; }
.scard h3 { margin: 0 0 4px; font-size: 15px; }
.scard .muted { color: var(--sub); font-size: 12.5px; }
.creditnum { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.creditnum small { font-size: 13px; color: var(--faint); font-weight: 600; margin-left: 6px; }
.gauge { height: 8px; border-radius: 99px; background: var(--bg2); overflow: hidden; margin: 14px 0 6px; }
.gauge i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.planchip { display: inline-block; font-size: 11px; font-weight: 800; color: var(--accent); background: var(--asoft); border-radius: 99px; padding: 3px 12px; margin-bottom: 10px; }
.ghost { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 13px; font-weight: 700; color: var(--sub); }
.ghost:hover { border-color: var(--faint); }

/* ── 에디터 (확정 공식: [캐릭터 칩]→[영역바]→[글]) ── */
.edwrap { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); }
.edhead { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line2); background: var(--card); position: -webkit-sticky; position: sticky; top: 0; z-index: 10; }
.edback { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--sub); }
.edback:hover { background: var(--bg2); }
.edtitle { font-weight: 800; font-size: 15px; border: none; outline: none; background: none; color: var(--ink); font-family: var(--kr); min-width: 120px; }
.edcredit { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--accent); background: var(--asoft); border-radius: 99px; padding: 5px 14px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.edrow { display: flex; gap: 0; margin-bottom: 14px; align-items: stretch; }
.edchip { width: 84px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 8px; gap: 3px; cursor: pointer; border-radius: 10px; position: relative; }
.edchip:hover { background: var(--bg2); }
.edchip .face { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.edchip b { font-size: 11px; font-weight: 700; color: var(--sub); }
.edbar { width: 3.5px; border-radius: 3px; margin: 4px 14px 4px 6px; flex: none; }
.edtext { flex: 1 1; }
.edtext textarea { width: 100%; border: none; outline: none; resize: none; background: none; color: var(--ink); font-family: var(--kr); font-size: 15.5px; line-height: 1.9; padding: 8px 0; min-height: 46px; }
.edrowbtns { display: flex; flex-direction: column; gap: 6px; justify-content: flex-start; padding-top: 8px; margin-left: 10px; opacity: 0; transition: 0.15s; }
.edrow:hover .edrowbtns, .edrow:focus-within .edrowbtns { opacity: 1; }
.edsm { height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); font-size: 11.5px; font-weight: 700; color: var(--sub); white-space: nowrap; }
.edsm:hover { border-color: var(--accent); color: var(--accent); }
.edsm.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.edsm.primary:hover { background: var(--accent-h); }
.edsm:disabled { opacity: 0.4; cursor: wait; }
.edadd { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 13px; padding: 10px 0 10px 84px; width: 100%; text-align: left; }
.edadd:hover { color: var(--accent); }
.vpicker { position: absolute; top: 62px; left: 0; z-index: 30; background: var(--card); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--sh-lg); padding: 8px; width: 250px; max-height: 320px; overflow-y: auto; }
.vpicker button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border-radius: 9px; text-align: left; }
.vpicker button:hover { background: var(--bg2); }
.vpicker .face { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
.vpicker b { font-size: 12.5px; display: block; }
.vpicker small { font-size: 10.5px; color: var(--faint); }
.playbar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--card); border-top: 1px solid var(--line); padding: 12px 24px; display: flex; align-items: center; gap: 14px; z-index: 20; }
.playbar .info { font-size: 12.5px; color: var(--sub); min-width: 160px; }
.playbar audio { flex: 1 1; height: 40px; }

/* ── 스튜디오 셸 (사이드바 — 프로토타입 IA) ── */
.shell { display: flex; height: 100vh; overflow: hidden; background: var(--bg); }
.snav { width: 198px; flex: none; background: var(--bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 16px 0 14px; height: 100vh; }
.snav .logo { padding: 0 18px 14px; font-size: 15.5px; }
.ncat { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; color: var(--faint); padding: 12px 18px 5px; }
.snav ul { list-style: none; margin: 0; padding: 0 10px; font-size: 13px; }
.snav li { padding: 0; margin-bottom: 1px; }
.snav li > a, .snav li > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; color: var(--sub); border-radius: 8px; cursor: pointer; font-size: 13px; text-align: left; }
.snav li > a:hover, .snav li > button:hover { background: var(--bg2); }
.snav li.on > a, .snav li.on > button { background: var(--asoft); color: var(--accent); font-weight: 700; }
.snav i { font-style: normal; font-size: 13px; width: 16px; text-align: center; opacity: 0.85; }
.scredit { margin: auto 12px 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.scredit h6 { margin: 0 0 7px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; color: var(--faint); font-weight: 600; }
.scredit .bar { height: 5px; background: var(--line2); border-radius: 3px; margin-bottom: 6px; overflow: hidden; }
.scredit .bar b { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.scredit span { font-family: var(--mono); font-size: 10.5px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--sub); }
.smain { flex: 1 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.stopbar { display: flex; align-items: center; gap: 10px; padding: 0 22px; height: 48px; border-bottom: 1px solid var(--line); flex: none; }
.vtitle { font-weight: 800; font-size: 14.5px; }
.sscroll { flex: 1 1; overflow-y: auto; padding: 26px 30px 60px; }
.sinner { max-width: 880px; margin: 0 auto; }
@media (max-width: 820px) { .snav { display: none; } }

/* ── 보이스 라이브러리 ── */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-gap: 12px; gap: 12px; }
.vcard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 14px 14px; text-align: center; box-shadow: var(--sh); }
.vcard .face { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 9px; }
.vcard b { font-size: 14px; display: block; }
.vcard .role { font-size: 11px; color: var(--faint); display: block; margin: 2px 0 10px; min-height: 16px; }
.vcard .tierchip { display: inline-block; font-size: 9px; font-weight: 800; border-radius: 99px; padding: 1px 8px; margin-bottom: 8px; }
.vacts { display: flex; gap: 6px; justify-content: center; }
.vplay { width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); font-size: 11px; color: var(--sub); }
.vplay:hover { border-color: var(--accent); color: var(--accent); }
.vplay.playing { background: var(--accent); border-color: var(--accent); color: #fff; }
.vuse { height: 30px; padding: 0 14px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; }
.vuse:hover { background: var(--accent-h); }
/* 파라메트릭/실사 아바타 */
.vava { display: block; border-radius: 26%; overflow: hidden; flex: none; }
.vava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard .vava { margin: 0 auto 9px; }
.vcard.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
.vcard.clickable:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--sh-lg); transform: translateY(-2px); }
/* 캐릭터 상세(페르소나) 모달 */
.vmodbd { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 42%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vmod { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--sh-lg); width: 460px; max-width: 100%; max-height: 88vh; overflow-y: auto; animation: vmodin .18s ease; }
@keyframes vmodin { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.vmod .hero { display: flex; gap: 16px; align-items: center; padding: 24px 24px 16px; }
.vmod .hero b { font-size: 21px; display: block; }
.vmod .hero .sub { font-size: 12px; color: var(--sub); margin-top: 3px; display: flex; align-items: center; gap: 7px; }
.vmod .x { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--bg2); color: var(--sub); font-size: 15px; cursor: pointer; }
.vmod .x:hover { background: var(--line); }
.vmod .body { padding: 0 24px 22px; }
.vmod .tagline { font-size: 14.5px; font-weight: 800; color: var(--accent); line-height: 1.5; margin: 2px 0 16px; }
.vmod .quote { background: var(--asoft); border-radius: 13px; padding: 13px 16px; font-size: 13.5px; color: var(--ink); font-weight: 600; margin-bottom: 18px; position: relative; }
.vmod .quote::before { content: "\201C"; color: color-mix(in srgb, var(--accent) 55%, transparent); font-size: 30px; font-weight: 800; position: absolute; top: 2px; left: 8px; line-height: 1; }
.vmod .quote span { display: block; padding-left: 18px; }
.vmod .plabel { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--faint); margin: 0 0 7px; }
.vmod .sec { margin-bottom: 16px; }
.vmod .sec p { font-size: 13px; color: var(--sub); line-height: 1.65; margin: 0; }
.vmod .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vmod .chip { font-size: 11.5px; font-weight: 700; border-radius: 99px; padding: 4px 11px; background: var(--bg2); color: var(--sub); }
.vmod .chip.p { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.vmod .foot { display: flex; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--line2); position: -webkit-sticky; position: sticky; bottom: 0; background: var(--card); }
.vmod .foot .vplay { flex: none; width: 44px; height: 40px; font-size: 13px; }
.vmod .foot .vuse { flex: 1 1; height: 40px; justify-content: center; font-size: 13.5px; }
.filterrow { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.fchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 99px; padding: 5px 13px; font-size: 12px; font-weight: 600; color: var(--sub); background: var(--bg); cursor: pointer; white-space: nowrap; }
.fchip:hover { border-color: var(--faint); color: var(--ink); }
.fchip.on { border-color: var(--accent); background: var(--asoft); color: var(--accent); font-weight: 700; }

/* ── 에디터 우측 설정 패널 (Typecast식 — 확정 공식) ── */
.edlayout { display: flex; gap: 0; flex: 1 1; min-height: 0; }
.edmain { flex: 1 1; overflow-y: auto; padding: 34px 24px 140px; }
.edmain-inner { max-width: 760px; margin: 0 auto; }
.edpanel { width: 264px; flex: none; border-left: 1px solid var(--line2); background: var(--card); padding: 18px 16px 120px; overflow-y: auto; }
.edpanel h5 { margin: 0 0 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--faint); font-weight: 700; }
.epvoice { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 18px; }
.epvoice .face { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.epvoice b { font-size: 13px; display: block; }
.epvoice small { font-size: 10.5px; color: var(--faint); }
.emogrid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 7px; gap: 7px; margin-bottom: 6px; }
.emobtn { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--card); padding: 9px 4px 7px; font-size: 12px; font-weight: 700; color: var(--sub); }
.emobtn span { font-size: 17px; }
.emobtn:hover { border-color: var(--faint); }
.emobtn.on { border-color: var(--accent); background: var(--asoft); color: var(--accent); }
.emobtn:disabled { opacity: 0.35; cursor: not-allowed; }
.ephint { font-size: 10.5px; color: var(--faint); line-height: 1.5; margin: 4px 0 16px; }
.speedrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.speedrow input[type="range"] { flex: 1 1; accent-color: var(--accent); }
.speedrow .val { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--ink); width: 38px; text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.genlist { display: flex; flex-direction: column; gap: 6px; }
.genitem { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line2); border-radius: 9px; padding: 7px 9px; font-size: 11px; color: var(--sub); cursor: pointer; text-align: left; }
.genitem:hover { border-color: var(--accent); }
.genitem .k { font-weight: 800; color: var(--accent); }
.edrow.active .edbar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }

/* ── EL식 플레이바 + 화자색 웨이브폼 (확정 공식 이식) ── */
.playwrap { position: fixed; bottom: 0; left: 0; right: 0; background: var(--card); border-top: 1px solid var(--line); z-index: 20; }
.playwrap .playbar { position: relative; display: flex; align-items: center; padding: 8px 16px; background: none; border: none; }
.pcenter { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }
.pskip { font-size: 13px; color: var(--sub); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.pskip:hover { background: var(--bg2); color: var(--ink); }
.pspd { font-family: var(--mono); font-size: 11.5px; color: var(--sub); padding: 4px 8px; border-radius: 7px; }
.pspd:hover { background: var(--bg2); color: var(--ink); }
.pbtn { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); position: relative; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); transition: transform 0.12s; flex: none; }
.pbtn:hover { transform: scale(1.06); }
.pbtn::after { content: ""; position: absolute; left: 16px; top: 12px; border-left: 12px solid var(--bg); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.pbtn.pause::after { border: none; left: 14px; top: 12px; width: 4px; height: 16px; background: var(--bg); box-shadow: 8px 0 0 var(--bg); }
.ptime { font-family: var(--mono); font-size: 11px; color: var(--sub); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; margin-left: 6px; }
.pinfo { font-size: 12px; color: var(--sub); max-width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoomctl { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 14px; }
.zoomctl input { width: 84px; accent-color: var(--sub); height: 3px; }
.wtimeline { display: flex; align-items: center; gap: 1.5px; cursor: pointer; transition: height 0.15s; padding: 0 16px 8px; }
.wtimeline i { flex: 1 1; min-width: 1px; border-radius: 2px; background: color-mix(in srgb, var(--sc) 22%, var(--bg)); transition: background 0.1s; }
.wtimeline i.done { background: color-mix(in srgb, var(--sc) 82%, var(--bg)); }
.wtimeline:hover i { background: color-mix(in srgb, var(--sc) 32%, var(--bg)); }
.wtimeline:hover i.done { background: var(--sc); }

/* 감정·속도 상태 뱃지 (줄 칩) + 패널 캐릭터 변경 */
.edchip { position: relative; }
.emobadge { position: absolute; top: 2px; right: 8px; font-size: 13px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); }
.spdbadge { font-family: var(--mono); font-size: 9px; color: var(--faint); font-weight: 700; }
.epvoice { cursor: pointer; position: relative; }
.epvoice:hover { border-color: var(--accent); }
.epvoice .chg { margin-left: auto; font-size: 10px; color: var(--faint); }
.epvoice .vpicker { top: 52px; right: 0; left: auto; }

/* ══ 에디터 v2 — 프로토타입 완전 이식 (컴팩트 필칩·줄 상태·호버 액션) ══ */
.canvas { flex: 1 1; overflow-y: auto; padding: 28px 28px 120px; background: var(--bg); }
.doc { max-width: 720px; margin: 0 auto; }
.line { position: relative; display: flex; align-items: flex-start; padding: 5px 96px 5px 6px; border-radius: 8px; }
.line:hover { background: var(--bg2); }
.line.sel { background: var(--bg2); }
.line.sel .vbar { background: var(--sc); }
.schip { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-top: 7px; margin-right: 12px; padding: 2px 8px 2px 3px; border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent); border-radius: 99px; font-size: 11px; font-weight: 800; color: var(--sc); cursor: pointer; background: var(--bg); width: 84px; white-space: nowrap; overflow: hidden; position: relative; }
.schip:hover { border-color: var(--sc); }
.schip .cface { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex: none; background: color-mix(in srgb, var(--sc) 18%, var(--bg)); }
.schip b { overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.schip .semo { position: absolute; right: 4px; top: -1px; font-size: 10px; }
.vbar { flex: none; width: 2.5px; align-self: stretch; border-radius: 2px; background: color-mix(in srgb, var(--sc) 32%, transparent); margin: 3px 13px 3px 0; }
.ltxt { flex: 1 1; }
.ltxt textarea { width: 100%; border: none; outline: none; resize: none; background: none; color: var(--ink); font-family: var(--kr); font-size: 15.5px; line-height: 1.95; padding: 4px 0; min-height: 34px; display: block; }
.lact { position: absolute; right: 6px; top: 6px; display: none; gap: 2px; }
.line:hover .lact, .line.sel .lact { display: flex; }
.lact button { width: 25px; height: 25px; border-radius: 7px; color: var(--faint); font-size: 11px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--line); }
.lact button:hover { color: var(--accent); border-color: var(--accent); }
.lact button.gen { color: #fff; background: var(--accent); border-color: var(--accent); font-size: 9px; font-weight: 800; width: auto; padding: 0 8px; }
.lact button.gen:hover { background: var(--accent-h); }
.hintrow { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 2px; font-size: 11.5px; color: var(--faint); flex-wrap: wrap; }
.kbd { font-family: var(--mono); font-size: 9.5px; background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 1.5px 6px; color: var(--sub); }
.addbtns { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.addb { display: inline-flex; align-items: center; gap: 7px; border: 1.5px dashed var(--line); border-radius: 99px; padding: 6px 16px; font-size: 12px; font-weight: 600; color: var(--faint); }
.addb:hover { color: var(--accent); border-color: var(--accent); }
.addb .cdot { width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }

/* 패널 v2 — Typecast 문법 */
.edpanel { background: var(--bg); width: 256px; padding: 18px 18px 140px; }
.psec { margin-bottom: 20px; }
.psec > label { display: block; font-size: 10px; color: var(--faint); letter-spacing: 0.03em; margin-bottom: 8px; font-weight: 600; }
.charsel { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; padding: 8px 11px; cursor: pointer; box-shadow: var(--sh); background: var(--card); position: relative; }
.charsel:hover { border-color: var(--faint); }
.charsel .cface { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.charsel b { font-size: 13px; display: block; }
.charsel small { font-size: 10px; color: var(--faint); }
.charsel .cv { margin-left: auto; color: var(--faint); font-size: 10px; }
.charsel .vpicker { top: 46px; right: 0; left: auto; }
.emogrid4 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 6px; gap: 6px; }
.emo4 { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: 10px; border: 1.5px solid var(--line); font-size: 15px; background: var(--card); }
.emo4 span { font-size: 9.5px; font-weight: 700; color: var(--sub); }
.emo4:hover { border-color: var(--faint); }
.emo4.on { border-color: var(--accent); background: var(--asoft); }
.emo4.on span { color: var(--accent); }
.emo4:disabled { opacity: 0.35; cursor: not-allowed; }
.sldrow { display: flex; align-items: center; gap: 10px; }
.sldrow input[type="range"] { flex: 1 1; accent-color: var(--accent); height: 4px; }
.sldval { font-family: var(--mono); font-size: 11px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--sub); width: 38px; text-align: right; }
.genh { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.genh .g { display: flex; align-items: center; gap: 8px; padding: 8px 11px; font-size: 11px; color: var(--sub); border-bottom: 1px solid var(--line2); cursor: pointer; width: 100%; text-align: left; }
.genh .g:last-child { border-bottom: 0; }
.genh .g:hover { background: var(--bg2); }
.genh .g .k { font-weight: 800; color: var(--accent); flex: none; }
.regen { width: 100%; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line); border-radius: 10px; padding: 9px; color: var(--sub); background: var(--bg2); }
.regen:hover { color: var(--accent); border-color: var(--accent); }

/* ── 에디터 툴바 (쉼 추가 · 발음 사전) ── */
.edtools { display: flex; align-items: center; gap: 6px; padding: 7px 20px; border-bottom: 1px solid var(--line); background: var(--card); }
.edtools .tl { font-size: 11px; color: var(--faint); font-weight: 600; margin-right: 2px; }
.pchip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); font-size: 11.5px; font-weight: 700; color: var(--sub); cursor: pointer; }
.pchip:hover { color: var(--accent); border-color: var(--accent); }
.regen.sub { margin-top: 6px; background: var(--card); font-weight: 600; }

/* ── 발음 사전 모달 ── */
.dictov { position: fixed; inset: 0; background: rgba(25, 31, 43, 0.4); z-index: 90; display: flex; align-items: center; justify-content: center; }
.dictbox { background: var(--card); border-radius: 16px; padding: 22px; width: 440px; max-width: calc(100vw - 40px); max-height: 72vh; overflow: auto; box-shadow: 0 12px 40px rgba(25, 31, 43, 0.18); }
.dictbox h3 { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.dictbox .ephint { margin-bottom: 14px; }
.drow { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.drow input { flex: 1 1; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; background: var(--bg2); color: var(--ink); font-family: var(--kr); outline: none; min-width: 0; }
.drow input:focus { border-color: var(--accent); }
.drow .arr { color: var(--faint); font-size: 12px; }
.drow .del { width: 28px; height: 28px; border: none; background: none; color: var(--faint); font-size: 13px; cursor: pointer; border-radius: 7px; }
.drow .del:hover { color: #d33; background: var(--bg2); }
.dictfoot { display: flex; gap: 8px; margin-top: 14px; }
.dictfoot .primary { flex: 1 1; height: 38px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; }

/* ── 캐릭터 선택 모달 ── */
.pchip.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.vmbox { width: 540px; display: flex; flex-direction: column; max-height: 76vh; }
.vsearch { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); font-size: 13.5px; color: var(--ink); font-family: var(--kr); outline: none; margin-top: 4px; }
.vsearch:focus { border-color: var(--accent); background: var(--card); }
.vtabs { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.vlist { overflow: auto; flex: 1 1; margin: 0 -8px; padding: 0 8px; }
.vrow { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.vrow:hover { background: var(--bg2); }
.vrow.cur { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.vrow .face { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.vrow .vinfo { display: flex; flex-direction: column; min-width: 0; flex: 1 1; }
.vrow .vinfo b { font-size: 13px; }
.vrow .vinfo small { font-size: 11px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow .curtag { font-size: 10px; font-weight: 700; color: var(--accent); flex: none; }
.vrow .pv { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--accent); cursor: pointer; flex: none; font-size: 11px; }
.vrow .pv:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── 상시 플레이바 — 선택만 된 상태(생성 전) ── */
.wtimeline.idle { cursor: default; }
.wtimeline.idle i { background: color-mix(in srgb, var(--sc) 10%, var(--bg)); }
.wtimeline.idle:hover i { background: color-mix(in srgb, var(--sc) 10%, var(--bg)); }
.playbar button:disabled { opacity: 0.35; cursor: default; }
.pbtn.busy { animation: pbtn-pulse 1s ease-in-out infinite; }
@keyframes pbtn-pulse { 50% { opacity: 0.45; } }

/* ── 보이스 카드 성별·연령 표기 ── */
.vcard b .agemeta { font-size: 10.5px; font-weight: 600; color: var(--faint); margin-left: 6px; }

/* ── 대본 가져오기 ── */
.scriptbox { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); color: var(--ink); font-family: var(--kr); font-size: 13px; line-height: 1.7; padding: 10px 12px; outline: none; resize: vertical; }
.scriptbox:focus { border-color: var(--accent); background: var(--card); }

/* ── 랜딩 페이지 ── */
.landing { min-height: 100vh; background: var(--bg); color: var(--ink); }
.lnav { display: flex; align-items: center; gap: 22px; padding: 14px 6vw; position: -webkit-sticky; position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.lnav a { font-size: 13px; font-weight: 600; color: var(--sub); text-decoration: none; }
.lnav a:hover { color: var(--ink); }
.lcta { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 26px; border-radius: 12px; background: var(--accent); color: #fff !important; font-weight: 800; font-size: 14.5px; text-decoration: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.lcta:hover { filter: brightness(1.05); }
.lcta.sm { height: 36px; padding: 0 16px; font-size: 13px; box-shadow: none; }
.lghost { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--sub) !important; font-weight: 700; font-size: 14px; text-decoration: none; }
.lghost:hover { border-color: var(--faint); color: var(--ink) !important; }
.lhero { text-align: center; padding: 84px 6vw 70px; }
.lbadge { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--asoft); border-radius: 99px; padding: 6px 14px; margin-bottom: 22px; }
.lhero h1 { font-size: clamp(34px, 5.4vw, 58px); font-weight: 900; line-height: 1.18; letter-spacing: -0.02em; }
.lhero h1 em { font-style: normal; color: var(--accent); }
.lhero p { margin: 20px 0 30px; font-size: 16.5px; line-height: 1.7; color: var(--sub); }
.lctarow { display: flex; gap: 10px; justify-content: center; }
.lsub { margin-top: 16px; font-size: 12.5px; color: var(--faint); }
.lsec { padding: 72px 6vw; max-width: 1160px; margin: 0 auto; }
.lsec h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 900; text-align: center; letter-spacing: -0.01em; }
.lsecsub { text-align: center; color: var(--sub); font-size: 13.5px; margin-top: 8px; }
.lsec.alt { max-width: none; background: var(--bg2); }
.lsec.cta { text-align: center; }
.lsec.cta .lcta { margin-top: 22px; }
.lfeat { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 14px; gap: 14px; margin-top: 34px; }
.lfcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px; box-shadow: var(--sh); }
.lfcard i { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--asoft); color: var(--accent); font-style: normal; font-weight: 800; font-size: 16px; margin-bottom: 14px; }
.lfcard b { display: block; font-size: 15.5px; margin-bottom: 8px; }
.lfcard p { font-size: 13px; line-height: 1.7; color: var(--sub); }
.lplans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-gap: 14px; gap: 14px; margin: 34px auto 0; max-width: 1160px; }
.lplan { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px; display: flex; flex-direction: column; gap: 6px; }
.lplan.hot { border-color: var(--accent); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 14%, transparent); }
.lplan .hotchip { position: absolute; top: -11px; left: 20px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; border-radius: 99px; padding: 3px 11px; }
.lplan > b { font-size: 14px; color: var(--sub); }
.lprice { font-size: 28px; font-weight: 900; font-family: var(--mono, monospace); }
.lprice small { font-size: 12px; color: var(--faint); font-weight: 600; margin-left: 2px; }
.lchars { font-size: 13px; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.lplan ul { list-style: none; padding: 0; margin: 0 0 16px; flex: 1 1; }
.lplan li { font-size: 12.5px; color: var(--sub); padding: 4px 0 4px 18px; position: relative; }
.lplan li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.lfaq { max-width: 720px; margin: 30px auto 0; }
.lfaq details { border-bottom: 1px solid var(--line); padding: 4px 2px; }
.lfaq summary { cursor: pointer; font-weight: 700; font-size: 14.5px; padding: 14px 0; list-style: none; }
.lfaq summary::-webkit-details-marker { display: none; }
.lfaq summary::after { content: "+"; float: right; color: var(--faint); font-weight: 400; }
.lfaq details[open] summary::after { content: "−"; }
.lfaq details > div { font-size: 13.5px; line-height: 1.75; color: var(--sub); padding: 0 0 16px; }
.lfoot { border-top: 1px solid var(--line); padding: 40px 6vw 48px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; max-width: 1160px; margin: 0 auto; }
.lfoot p { font-size: 12px; color: var(--faint); margin-top: 8px; }
.lfootlinks { display: flex; gap: 16px; margin-left: auto; }
.lfootlinks a { font-size: 12.5px; color: var(--sub); text-decoration: none; }
.lfootnote { flex-basis: 100%; font-size: 11.5px; line-height: 1.8; color: var(--faint); border-top: 1px solid var(--line2); padding-top: 18px; }
.lfootnote b { color: var(--sub); }
.lsec.cta { background: linear-gradient(135deg, var(--accent), #f06a44); border-radius: 22px; max-width: 1100px; margin: 0 auto 40px; padding: 52px 40px; }
.lsec.cta h2 { color: #fff; }
.lsec.cta .lcta { background: #fff; color: var(--accent) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }

/* ── 관리자 ── */
.admtag { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); background: var(--asoft); border-radius: 5px; padding: 2px 6px; vertical-align: 2px; }
.admgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 12px; gap: 12px; margin-bottom: 16px; }
.admcard label { display: block; font-size: 10.5px; font-weight: 700; color: var(--faint); letter-spacing: 0.04em; margin-bottom: 8px; }
.admcard b { display: block; font-size: 24px; font-weight: 900; font-family: var(--mono, monospace); }
.admcard small { display: block; font-size: 11.5px; color: var(--sub); margin-top: 5px; }
.admtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admtable th { text-align: left; font-size: 10.5px; font-weight: 700; color: var(--faint); letter-spacing: 0.04em; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.admtable td { padding: 8px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.admtable tr:hover td { background: var(--bg2); }
.st { font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 8px; }
.st.succeeded { color: #1a7f4e; background: color-mix(in srgb, #1a7f4e 12%, var(--card)); }
.st.failed { color: #c0392b; background: color-mix(in srgb, #c0392b 12%, var(--card)); }
.st.processing { color: var(--sub); background: var(--bg2); }

/* ── 스튜디오 홈 시작 카드 ── */
.startrow { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; margin-bottom: 16px; }
.startcard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; background: var(--card); border: 1px dashed var(--line); border-radius: 16px; cursor: pointer; font-family: var(--kr); }
.startcard:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 3%, var(--card)); }
.startcard i { font-style: normal; font-size: 22px; margin-bottom: 4px; }
.startcard b { font-size: 14px; color: var(--ink); }
.startcard small { font-size: 11.5px; color: var(--faint); }
.startcard:disabled { opacity: 0.5; cursor: default; }