/* 컷담: 따뜻한 흑연색 편집툴 + 라임 진행 표시 */
:root {
  --bg: #191816;
  --bg2: #201F1C;
  --panel: #242320;
  --panel2: #2C2B27;
  --line: #373530;
  --line2: #2F2D29;
  --ink: #EEE9DF;
  --ink2: #BDB7AC;
  --mute: #8C867B;
  --lime: #D4F36B;
  --lime2: #A9C94A;
  --lime-bg: rgba(212, 243, 107, .1);
  --amb: #F0B75A;
  --amb-bg: rgba(240, 183, 90, .12);
  --red: #FF7466;
  --red-bg: rgba(255, 116, 102, .12);
  --sky: #8CC3E3;
  --sky-bg: rgba(140, 195, 227, .12);
  --ok: #9ED98A;
  --sans: 'Wanted Sans', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.5 var(--sans); word-break: keep-all; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.muted { color: var(--mute); }
.sm { font-size: 12.5px; }
.red { color: var(--red); } .amb { color: var(--amb); } .ok { color: var(--ok); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.fine { font-size: 11.5px; color: var(--mute); line-height: 1.5; }
.link { background: none; border: 0; padding: 0; color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 12.5px; }

.demo { background: #111418; color: #C9CCD1; font-size: 13px; line-height: 18px; text-align: center; padding: 8px 16px; position: relative; z-index: 30; }
.demo b { color: #FF5A36; font-family: Menlo, monospace; }
.demo a, .demo button { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.demo button { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; }

/* 틀 */
.app { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: calc(100vh - 34px); background: linear-gradient(90deg, var(--bg2) 223px, var(--line2) 223px 224px, transparent 224px); }
.rail { position: sticky; top: 0; height: calc(100vh - 34px); display: flex; flex-direction: column; gap: 22px; padding: 18px 14px; background: var(--bg2); border-right: 1px solid var(--line2); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 0 6px; }
.logo-t { display: flex; flex-direction: column; line-height: 1.2; }
.logo-t b { font-size: 19px; font-weight: 800; letter-spacing: -.04em; }
.logo-t small { font-size: 11px; color: var(--mute); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .tabbar a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 8px; color: var(--ink2); text-decoration: none; font-weight: 600; }
.nav a:hover { background: var(--panel); color: var(--ink); }
.nav a.on { background: var(--panel2); color: var(--ink); box-shadow: inset 3px 0 0 var(--lime); }
.nav em, .tabbar em { font: 500 11px/18px var(--mono); font-style: normal; min-width: 20px; padding: 0 6px; border-radius: 9px; background: var(--line); color: var(--ink2); text-align: center; }
.nav em.hot, .tabbar em.hot { background: var(--amb); color: #1d1a14; }
.rail-b { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.who { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--mute); }
select { height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238C867B'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; font-size: 13px; cursor: pointer; }
.who select { width: 100%; font-weight: 600; color: var(--ink); }
.tabbar { display: none; }

main { min-width: 0; padding: 22px 28px 60px; outline: 0; }
.vh { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
h1 { font-size: 22px; font-weight: 800; letter-spacing: -.035em; line-height: 1.3; }
.sub { color: var(--mute); font-size: 13px; margin-top: 2px; }
.fine-chip { font-size: 11.5px; color: var(--mute); border: 1px dashed var(--line); border-radius: 20px; padding: 3px 10px; white-space: nowrap; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); font-weight: 600; font-size: 13.5px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: #4a4740; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn.pri { background: var(--lime); border-color: var(--lime); color: #1A1C10; }
.btn.pri:hover { background: #E0FA83; }
.btn.ghost { background: transparent; }
.btn.danger { background: var(--red); border-color: var(--red); color: #1b0d0b; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-run { background: var(--sky-bg); color: var(--sky); }
.p-edit { background: var(--panel2); color: var(--ink2); }
.p-review { background: var(--amb-bg); color: var(--amb); }
.p-ok { background: var(--lime-bg); color: var(--lime); }
.p-reject, .p-fail { background: var(--red-bg); color: var(--red); }

/* 작업실 */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 26px 20px 22px; border: 1.5px dashed #4A473F; border-radius: 14px; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.012) 14px 28px), var(--bg2); text-align: center; cursor: pointer; color: var(--ink2); transition: border-color .15s, background-color .15s; }
.drop:hover { border-color: var(--lime2); }
.drop.over { border-color: var(--lime); background-color: #23261A; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 2px solid var(--lime); outline-offset: 2px; }
.drop svg { color: var(--lime); margin-bottom: 4px; }
.drop b { color: var(--ink); font-size: 16px; font-weight: 700; }
.drop u { color: var(--lime); text-underline-offset: 3px; }
.drop small { margin-top: 6px; font-size: 12px; color: var(--mute); }
.rejects { margin-top: 10px; border: 1px solid rgba(255,116,102,.35); background: var(--red-bg); border-radius: 10px; padding: 10px 14px; }
.rj-h { display: flex; justify-content: space-between; align-items: center; color: var(--red); font-size: 13px; margin-bottom: 4px; }
.rejects li { display: flex; gap: 10px; justify-content: space-between; font-size: 12.5px; padding: 3px 0; border-top: 1px solid rgba(255,116,102,.15); }
.rejects li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rejects li em { font-style: normal; color: var(--red); flex: none; }

.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 24px 0 10px; }
.sec-h h2 { font-size: 15px; font-weight: 700; }
.sec-h .muted { font-size: 12px; }
.cnt { font: 500 12px var(--mono); color: var(--mute); margin-left: 2px; }

.queue { display: flex; flex-direction: column; gap: 8px; }
.qrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) 190px; gap: 16px; align-items: center; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; }
.qrow.q-fail { border-color: rgba(255,116,102,.35); }
.qrow.q-cancel { opacity: .62; }
.qrow.flash { animation: flash 1.2s ease; }
@keyframes flash { 0% { box-shadow: 0 0 0 2px var(--lime); } 100% { box-shadow: 0 0 0 2px transparent; } }
.qthumb { position: relative; display: block; width: 52px; height: 92px; border-radius: 7px; overflow: hidden; background: #2b2925; }
.qthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qthumb em { position: absolute; left: 3px; bottom: 3px; font: 500 10px/14px var(--mono); font-style: normal; padding: 0 4px; border-radius: 3px; background: rgba(0,0,0,.65); color: #fff; }
.qtop { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.qname { font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.qname:hover { text-decoration: underline; }
.qid { font-size: 11px; color: var(--mute); flex: none; }
.qmeta { font-size: 12px; color: var(--mute); margin: 1px 0 10px; }
.qside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.eta { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink2); }
.eta.red { font-weight: 600; }
.qact { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* 단계 막대 */
.pipe { display: flex; align-items: flex-start; gap: 6px; }
.pipe .dot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 30px; }
.pipe .dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--line); margin-top: 1px; }
.pipe .d-act::before { border-color: var(--sky); background: var(--sky); animation: pulse 1.2s infinite; }
.pipe .d-done::before { border-color: var(--lime); background: var(--lime); }
@keyframes pulse { 50% { opacity: .35; } }
.pipe span { font-size: 11px; color: var(--mute); white-space: nowrap; }
.seg { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.seg i { display: block; height: 7px; margin-top: 3px; border-radius: 4px; background: var(--line); overflow: hidden; }
.seg b { display: block; height: 100%; background: var(--lime); border-radius: 4px; transition: width .2s linear; }
.seg.s-act b { background: linear-gradient(90deg, var(--lime2), var(--lime)); }
.seg.s-act span { color: var(--ink); font-weight: 700; }
.seg.s-done span { color: var(--ink2); }
.seg.s-bad i { background: var(--red); }
.seg.s-bad span { color: var(--red); font-weight: 700; }
.seg.skip i { background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 7px); }
.seg.skip.s-done b { background: transparent; }
.seg small { font-size: 10px; color: var(--mute); }

.recent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.recent a { display: flex; align-items: center; gap: 11px; padding: 9px 12px 9px 9px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line2); text-decoration: none; }
.recent a:hover { border-color: var(--line); }
.recent img { width: 34px; height: 60px; object-fit: cover; border-radius: 5px; flex: none; }
.recent span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.recent b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent small { font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wr { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 14px 16px; }
.panel h3 { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--ink2); }
.slots { display: flex; flex-direction: column; gap: 6px; }
.slot { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; padding: 9px 10px; border-radius: 8px; border: 1px dashed var(--line); text-decoration: none; }
.slot span { grid-row: span 2; font-size: 12px; color: var(--mute); line-height: 20px; }
.slot b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); font-weight: 600; }
.slot small { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--mute); }
.slot.on { border: 1px solid #3c4a22; background: #262A1C; }
.slot.on span { color: var(--lime); }
.slot.on b { color: var(--ink); }
.slot.on small { color: var(--lime); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.stats div { background: var(--bg2); border-radius: 8px; padding: 7px 9px; }
.stats dt { font-size: 11px; color: var(--mute); }
.stats dd { font-size: 15px; font-weight: 500; }
.mini li a { display: flex; flex-direction: column; padding: 7px 0; border-top: 1px solid var(--line2); text-decoration: none; }
.mini li:first-child a { border-top: 0; padding-top: 0; }
.mini b { font-size: 13px; font-weight: 600; }
.mini small { font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini a:hover b { text-decoration: underline; }
.note { margin-top: 10px; font-size: 11.5px; color: var(--amb); }
.how ol { counter-reset: s; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.how li { counter-increment: s; font-size: 12.5px; color: var(--ink2); padding-left: 22px; position: relative; }
.how li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 4px; background: var(--panel2); font: 500 10px/16px var(--mono); text-align: center; color: var(--lime); }
.how b { color: var(--ink); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--mute); text-align: center; font-size: 13px; }
.empty b { color: var(--ink2); font-size: 14px; }
.empty .btn { margin-top: 6px; }
.empty.big { margin-top: 40px; }

/* 작업 목록 */
.tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.search { flex: 1; min-width: 220px; }
.search input, .fld input, .fld textarea, textarea, .raw { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); padding: 0 12px; }
.search input { height: 36px; padding-left: 34px; background: var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%238C867B' stroke-width='1.6'/%3E%3Cpath d='M9.5 9.5L13 13' stroke='%238C867B' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat 12px center; }
.tools select { height: 36px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { height: 30px; padding: 0 11px; border-radius: 15px; border: 1px solid var(--line); background: transparent; color: var(--ink2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.chip span { color: var(--mute); font-size: 11.5px; margin-left: 2px; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.on span { color: #5c574f; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--mute); padding: 0 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.tbl tr[data-go] { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--bg2); }
.c-th { width: 48px; padding-right: 0 !important; }
.c-th img { width: 32px; height: 56px; object-fit: cover; border-radius: 4px; display: block; background: var(--panel2); }
.c-name b { display: block; font-weight: 700; }
.c-name small { display: block; font-size: 11.5px; color: var(--mute); }
.c-name .tg { display: block; font-size: 11.5px; color: var(--lime2); margin-top: 1px; }
.c-eta { font-size: 12px; color: var(--ink2); max-width: 220px; }

/* 작업 화면 */
.jh { margin-bottom: 14px; }
.crumb { font-size: 12.5px; color: var(--mute); text-decoration: none; }
.crumb:hover { color: var(--ink); text-decoration: underline; }
.crumb-s { color: var(--line); margin: 0 6px; }
.crumb-id { font-size: 12px; color: var(--mute); }
.jh-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 4px; }
.jh-t { min-width: 0; }
.jh-t h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jh-a { display: flex; align-items: center; gap: 8px; flex: none; }
.banner { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; margin-bottom: 10px; font-size: 13px; border: 1px solid; }
.banner b { flex: none; }
.banner small { color: var(--mute); }
.b-reject { background: var(--red-bg); border-color: rgba(255,116,102,.35); } .b-reject b { color: var(--red); }
.b-review { background: var(--amb-bg); border-color: rgba(240,183,90,.3); } .b-review b { color: var(--amb); }
.b-ok { background: var(--lime-bg); border-color: rgba(212,243,107,.25); } .b-ok b { color: var(--lime); }
.b-block, .b-soft { background: var(--bg2); border-color: var(--line); } .b-block b { color: var(--amb); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 14px 0 18px; overflow-x: auto; scrollbar-width: none; }
.tabs a { display: flex; align-items: center; gap: 6px; padding: 9px 14px; text-decoration: none; color: var(--mute); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--lime); }
.tabs em { font: 500 10.5px/16px var(--mono); font-style: normal; min-width: 18px; padding: 0 5px; border-radius: 8px; background: var(--line); color: var(--ink2); text-align: center; }
.tabs em.x { background: var(--red); color: #1b0d0b; }
.tabs em.w { background: var(--amb); color: #1d1a14; }
.jb { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.jc { min-width: 0; }

/* 폰 미리보기 */
.pv { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; }
.phone { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; border: 5px solid #0E0D0C; box-shadow: 0 0 0 1px var(--line); }
.phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.safe { position: absolute; right: 0; top: 30%; bottom: 0; width: 18%; border-left: 1px dashed rgba(255,255,255,.28); background: rgba(0,0,0,.18); }
.safe span { position: absolute; right: 50%; top: 40%; transform: translateX(50%) rotate(90deg); white-space: nowrap; font-size: 9px; color: rgba(255,255,255,.6); }
.cap { position: absolute; left: 8%; right: 22%; bottom: 26%; text-align: center; white-space: pre-line; font-weight: 800; font-size: 15px; line-height: 1.35; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 8px rgba(0,0,0,.6); letter-spacing: -.02em; }
.pv-title { position: absolute; left: 10px; right: 22%; bottom: 10px; font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrub { display: flex; align-items: center; gap: 8px; }
.play { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--lime); color: #1A1C10; display: grid; place-items: center; cursor: pointer; }
.scrub input { flex: 1; accent-color: var(--lime); min-width: 0; }
.scrub span { font-size: 11px; color: var(--mute); white-space: nowrap; }

/* 자막 편집 */
.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bar.end { justify-content: flex-end; margin-top: 10px; }
.grow { flex: 1; }
.seg-c { display: inline-flex; padding: 3px; gap: 2px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line2); }
.seg-c button { height: 26px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: var(--mute); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.seg-c button.on { background: var(--panel2); color: var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.sum { font-size: 12.5px; color: var(--ink2); }
.shift { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.rule { font-size: 11.5px; margin-bottom: 10px; }
.subs { display: flex; flex-direction: column; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; }
.srow { display: grid; grid-template-columns: 28px 128px minmax(0, 1fr) 150px 26px; gap: 10px; align-items: start; padding: 9px 10px; border-top: 1px solid var(--line2); background: var(--panel); }
.srow:first-child { border-top: 0; }
.srow.now { background: #282B1F; box-shadow: inset 3px 0 0 var(--lime); }
.si { font-size: 11.5px; color: var(--mute); text-align: right; padding-top: 7px; }
.st { display: flex; flex-direction: column; gap: 4px; }
.st input { width: 100%; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg2); padding: 0 7px; font-size: 12px; }
.st input.bad, .fld input.bad { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.srow textarea { width: 100%; min-height: 56px; resize: vertical; padding: 6px 9px; font-size: 14px; font-weight: 600; line-height: 1.45; border: 1px solid var(--line); border-radius: 7px; background: var(--bg2); }
textarea:disabled, input:disabled { color: var(--ink2); background: transparent !important; border-color: var(--line2) !important; }
.sx { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
.lc { font-size: 11px; color: var(--mute); }
.iss { display: flex; flex-wrap: wrap; gap: 3px; }
.iss em { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.i-x { background: var(--red-bg); color: var(--red); }
.i-w { background: var(--amb-bg); color: var(--amb); }
.i-ok { color: var(--mute); font-weight: 500 !important; }
.x-btn { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--mute); font-size: 18px; line-height: 1; cursor: pointer; margin-top: 2px; }
.x-btn:hover { background: var(--red-bg); color: var(--red); }
.x-btn:disabled { opacity: .3; }
.raw { min-height: 460px; padding: 12px 14px; font-size: 13px; line-height: 1.6; resize: vertical; }
.errs { margin-top: 8px; padding: 10px 14px; border-radius: 8px; background: var(--red-bg); color: var(--red); font-size: 12.5px; }

/* 제목·요약 */
.tt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 14px 16px 16px; }
.card.plat { grid-column: 1 / -1; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-h h3 { font-size: 14px; font-weight: 700; }
.cands { display: flex; flex-direction: column; gap: 6px; }
.cand { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); cursor: pointer; background: var(--bg2); }
.cand:hover { border-color: #4a4740; }
.cand.on { border-color: var(--lime); background: #262A1C; }
.cand input { accent-color: var(--lime); margin: 0; flex: none; }
.cand span { flex: 1; font-weight: 600; font-size: 14px; }
.cand em { font-style: normal; font-size: 11px; color: var(--mute); flex: none; }
.cand em.amb { color: var(--amb); }
.card-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
.fld { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: 12.5px; color: var(--ink2); font-weight: 600; }
.fld small { font-weight: 400; }
.fld input { height: 38px; font-size: 14px; color: var(--ink); font-weight: 600; }
.fld textarea { padding: 8px 12px; font-size: 13.5px; color: var(--ink); resize: vertical; font-weight: 400; }
.cnt-l { font-size: 11px; color: var(--mute); align-self: flex-end; }
.cnt-l.red { color: var(--red); }
.sline { flex-direction: row; align-items: center; gap: 8px; margin-top: 6px; }
.sline span { width: 18px; color: var(--lime); font-size: 12px; }
.sline input { font-weight: 400; font-size: 13.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
.tag { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 4px 0 10px; border-radius: 13px; background: var(--panel2); color: var(--lime); font-size: 12.5px; font-weight: 600; }
.tag button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--mute); cursor: pointer; font-size: 14px; line-height: 1; }
.tag button:hover { color: var(--red); }
.tags input { flex: 1; min-width: 140px; height: 26px; border: 0; background: transparent; padding: 0 4px; font-weight: 400; font-size: 13px; }
.tags input:focus { outline: 0; }
.err { color: var(--red); font-weight: 500; min-height: 0; }
#plat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pc { border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; background: var(--bg2); }
.pc-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pc-h b { font-size: 13px; }
.pc li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 5px 0 5px 16px; border-top: 1px solid var(--line2); font-size: 12.5px; position: relative; }
.pc li:first-child { border-top: 0; }
.pc li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 2px; }
.pc li.c-ok::before { background: var(--lime); }
.pc li.c-w::before { background: var(--amb); }
.pc li.c-x::before { background: var(--red); }
.pc li b { font-weight: 500; font-size: 12px; color: var(--ink2); }
.pc li small { grid-column: 1 / -1; font-size: 11.5px; color: var(--amb); }
.pc li.c-x small { color: var(--red); }
.card.plat .fine { margin-top: 8px; }

/* 내보내기 */
.files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.file { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.file-h { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; }
.file-h div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-h b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-h small { font-size: 11px; color: var(--mute); }
.ext { flex: none; width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; font-size: 11.5px; font-weight: 500; background: var(--lime-bg); color: var(--lime); border: 1px solid rgba(212,243,107,.25); }
.file pre { margin: 0; padding: 10px 12px; font-size: 11px; line-height: 1.55; color: var(--ink2); background: #141311; border-top: 1px solid var(--line2); overflow: hidden; white-space: pre-wrap; word-break: break-all; height: 250px; }
.ex .fine { margin-top: 10px; }
.ex .banner { margin-bottom: 12px; }

.log { display: flex; flex-direction: column; }
.log li { display: grid; grid-template-columns: 90px 64px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line2); font-size: 13px; }
.log li .mono { font-size: 12px; }

/* 처리 중 화면 */
.proc { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: center; padding: 22px; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; max-width: 860px; }
.proc-th img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; display: block; background: var(--panel2); }
.proc-m { display: flex; flex-direction: column; gap: 14px; }
.proc-m h2 { font-size: 18px; font-weight: 700; }
.eta.big { font-size: 15px; }
.proc .qact { justify-content: flex-start; }

/* 대화상자·토스트 */
dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); padding: 20px 22px; width: min(420px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h3 { font-size: 16px; margin-bottom: 6px; }
dialog p { font-size: 13.5px; margin-bottom: 10px; }
dialog textarea { padding: 8px 10px; resize: vertical; }
.dlg-a { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: #F1ECE2; color: #1A1916; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.4); text-decoration: none; animation: tin .2s ease; transition: opacity .3s, transform .3s; }
.toast span { color: #4F6B10; text-decoration: underline; }
.toast.x { background: var(--red); color: #1b0d0b; }
.toast.ok::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #6E9A16; }
.toast.out { opacity: 0; transform: translateY(6px); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* 좁은 화면 */
@media (max-width: 1180px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .wr { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tt { grid-template-columns: minmax(0, 1fr); }
  .files { grid-template-columns: minmax(0, 1fr); }
  .file pre { height: auto; max-height: 220px; }
}
@media (max-width: 1020px) {
  .srow { grid-template-columns: 24px 118px minmax(0, 1fr) 26px; }
  .srow .sx { grid-column: 2 / 4; flex-direction: row; align-items: center; gap: 8px; padding: 0; }
  .srow .x-btn { grid-row: 1; grid-column: 4; }
  #plat { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .app { display: block; background: none; }
  .rail { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; align-items: center; gap: 10px; padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--line2); }
  .rail .nav, .rail .fine, .who > span { display: none; }
  .rail-b { margin: 0 0 0 auto; }
  .who select { width: auto; max-width: 150px; height: 32px; font-size: 12.5px; }
  .logo-t small { display: none; }
  .tabbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: rgba(32,31,28,.96); border-top: 1px solid var(--line); padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); gap: 6px; backdrop-filter: blur(8px); }
  .tabbar a { justify-content: center; padding: 9px; }
  .tabbar a.on { background: var(--panel2); color: var(--ink); }
  main { padding: 16px 16px 90px; }
  .vh { align-items: flex-start; flex-direction: column; gap: 8px; }
  h1 { font-size: 20px; }
  .wr { grid-template-columns: minmax(0, 1fr); }
  .wr .how { display: none; }
  .qrow { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .qthumb { width: 44px; height: 78px; }
  .qside { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .pipe .dot { width: 24px; }
  .pipe span { font-size: 10px; }
  .recent { grid-template-columns: minmax(0, 1fr); }
  .drop { padding: 20px 14px 18px; }
  .drop small { font-size: 11px; }
  .tools select { flex: 1; min-width: 0; }
  .search { flex-basis: 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .chip { flex: none; }
  .tbl thead { display: none; }
  .tbl, .tbl tbody { display: block; }
  .tbl tr { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line2); }
  .tbl td { padding: 0; border: 0; }
  .tbl .c-th { grid-row: span 3; width: auto; }
  .tbl td:nth-child(2) { grid-column: 2 / 4; }
  .tbl td:nth-child(3), .tbl td:nth-child(4), .tbl td:nth-child(7) { display: none; }
  .tbl td:nth-child(5) { grid-column: 3; grid-row: 2; }
  .tbl .c-eta { grid-column: 2; grid-row: 2; align-self: center; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tbl tbody tr:hover td { background: none; }
  .jh-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .jh-t h1 { white-space: normal; }
  .jh-a { flex-wrap: wrap; }
  .hide-m { display: none; }
  .jb { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pv { position: static; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 12px; align-items: end; }
  .phone { grid-row: span 2; border-width: 3px; border-radius: 12px; }
  .cap { font-size: 7px; }
  .pv-title, .safe { display: none; }
  .pv .fine { grid-column: 2; }
  .srow { grid-template-columns: 22px minmax(0, 1fr) 26px; gap: 6px 8px; padding: 10px 8px; }
  .srow .st { grid-column: 2; flex-direction: row; }
  .srow textarea { grid-column: 2 / 4; grid-row: 2; }
  .srow .sx { grid-column: 2 / 4; grid-row: 3; flex-wrap: wrap; }
  .srow .x-btn { grid-column: 3; grid-row: 1; }
  .shift .muted { display: none; }
  .proc { grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 14px; }
  .toasts { left: 16px; right: 16px; bottom: 76px; }
  .log li { grid-template-columns: 76px 52px minmax(0, 1fr); }
}