:root{
  --ink:#0E1417;
  --panel:#151E22;
  --panel-2:#1A252A;
  --line:#243238;
  --text:#E7EEEF;
  --muted:#7E9095;
  --faint:#516065;
  --coral:#FF7A52;
  --coral-dim:#3a2018;
  --teal:#57C9BD;
  --teal-dim:#16312f;
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, #16242a 0%, transparent 60%),
    var(--ink);
  color:var(--text);
  font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding:22px;
}
.wrap{max-width:1160px;margin:0 auto;}

/* header */
header{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:18px;
}
.brand{display:flex;align-items:center;gap:13px;}
.brand .glyph{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(150deg,#1d2c31,#0f181b);
  border:1px solid var(--line);
  display:grid;place-items:center;position:relative;flex:none;
}
.brand .glyph::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--faint);transition:.3s;
}
body.live .brand .glyph::before{
  background:var(--coral);
  box-shadow:0 0 0 0 rgba(255,122,82,.6);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,122,82,.55);}
  70%{box-shadow:0 0 0 12px rgba(255,122,82,0);}
  100%{box-shadow:0 0 0 0 rgba(255,122,82,0);}
}
.brand h1{
  font-family:"Space Grotesk",sans-serif;
  font-size:19px;font-weight:600;margin:0;letter-spacing:-.01em;
}
.brand .sub{font-size:11.5px;color:var(--muted);letter-spacing:.04em;margin-top:1px;}

.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.field{display:flex;flex-direction:column;gap:3px;}
.field label{font-size:10px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;padding-left:2px;}
select{
  background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;font-family:inherit;font-size:13px;cursor:pointer;outline:none;
}
select:focus-visible{border-color:var(--teal);}
select:disabled{opacity:.5;cursor:default;}

.btn{
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;
  border:none;border-radius:10px;padding:11px 20px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;transition:.18s;align-self:flex-end;
}
.btn-primary{background:var(--coral);color:#1a0d08;}
.btn-primary:hover{filter:brightness(1.07);}
.btn:disabled{opacity:.5;cursor:default;}
body.live .btn-primary{background:var(--panel-2);color:var(--text);border:1px solid var(--line);}
.btn .rec{width:9px;height:9px;border-radius:50%;background:#1a0d08;}
body.live .btn .rec{background:var(--coral);border-radius:2px;}

/* status strip */
.strip{
  display:flex;align-items:center;gap:20px;
  font-size:12.5px;color:var(--muted);
  padding:0 4px 14px;border-bottom:1px solid var(--line);margin-bottom:18px;
  flex-wrap:wrap;
}
.strip b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:500;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--faint);display:inline-block;margin-right:7px;vertical-align:middle;}
body.live .dot{background:var(--coral);}
.strip .spacer{flex:1;}

/* share + role */
.role-badge{
  font-family:"Space Grotesk",sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:7px;border:1px solid var(--line);color:var(--muted);
}
.role-badge.recorder{color:var(--coral);border-color:var(--coral-dim);}
.role-badge.viewer{color:var(--teal);border-color:var(--teal-dim);}

/* layout — 3 columns: 전사 | 요약 | 질문 */
.grid3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;align-items:start;}
@media(max-width:1040px){.grid3{grid-template-columns:1fr 1fr;}}
@media(max-width:720px){.grid3{grid-template-columns:1fr;}}

.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;border-bottom:1px solid var(--line);
}
.card-head .t{
  font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:9px;
}
.tick{width:6px;height:6px;border-radius:50%;background:var(--faint);}
.card.feed .tick{background:var(--coral);}
.card.gist .tick{background:var(--teal);}
.card.replies .tick{background:var(--teal);}

/* transcript feed */
.feed-body{
  height:clamp(340px,56vh,640px);overflow-y:auto;
  padding:18px 18px 30px;
  font-family:"JetBrains Mono",monospace;font-size:14.5px;line-height:1.85;
  position:relative;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px);
          mask-image:linear-gradient(to bottom,transparent 0,#000 26px);
}
.feed-body .final{color:var(--text);}
.feed-body .pending{color:var(--text);background:rgba(87,201,189,.07);border-radius:3px;}
.feed-body .interim{color:var(--coral);opacity:.85;}
.feed-body .seg{margin:0;white-space:pre-wrap;}
/* 전사 안의 단락 머리표 — 이 라벨 아래 텍스트가 같은 번호의 요약/질문 대상 */
.feed-body .seg-mark{
  display:block;margin:16px 0 6px;padding-bottom:5px;
  border-bottom:1px dashed var(--teal-dim);
  color:var(--teal);
  font-family:"Space Grotesk",sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.feed-body .seg-mark:first-child{margin-top:0;}
.feed-body .pending-mark{color:var(--coral);border-bottom-color:var(--coral-dim);}
.caret{display:inline-block;width:8px;height:17px;background:var(--coral);
  vertical-align:-3px;margin-left:2px;animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:0;}}
.empty{
  color:var(--faint);font-family:"Inter",sans-serif;font-size:13.5px;
  line-height:1.7;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:6px;
}
.empty .big{font-family:"Space Grotesk",sans-serif;font-size:15px;color:var(--muted);}

/* 요약·질문 컬럼 — 단락(세그먼트)별 블록 목록 */
.seg-body{
  height:clamp(340px,56vh,640px);overflow-y:auto;
  padding:14px 14px 18px;display:flex;flex-direction:column;gap:0;
}
.seg-body.idle{
  color:var(--faint);font-size:13px;line-height:1.7;text-align:center;
  align-items:center;justify-content:center;
}
.seg-block{padding:14px 2px;border-top:1px dashed var(--line);}
.seg-block:first-child{border-top:none;padding-top:2px;}
.seg-tag{
  font-family:"Space Grotesk",sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teal);
  margin-bottom:8px;display:flex;align-items:center;gap:8px;
}
.seg-tag .when{color:var(--faint);font-weight:500;letter-spacing:.04em;}
.seg-text{font-size:14px;line-height:1.7;color:var(--text);}
.seg-block .reply{margin-top:8px;}
.seg-block .reply:first-of-type{margin-top:0;}

.reply{
  background:var(--panel-2);border:1px solid var(--line);border-left:2px solid var(--teal);
  border-radius:10px;padding:12px 13px;font-size:13.5px;line-height:1.6;color:var(--text);
  position:relative;cursor:pointer;transition:.15s;
}
.reply:hover{border-color:var(--teal);background:#1d2b30;}
.reply .copy{
  position:absolute;top:9px;right:10px;font-size:10px;letter-spacing:.06em;
  color:var(--faint);text-transform:uppercase;opacity:0;transition:.15s;
}
.reply:hover .copy{opacity:1;}
.reply.copied{border-color:var(--teal);}
.reply.copied .copy{opacity:1;color:var(--teal);}

.mini{
  font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.06em;background:transparent;color:var(--teal);
  border:1px solid var(--teal-dim);border-radius:8px;padding:6px 11px;cursor:pointer;transition:.15s;
}
.mini:hover{background:var(--teal-dim);}
.mini:disabled{opacity:.4;cursor:default;}
.mini.copied{color:var(--teal);background:var(--teal-dim);}
.thinking{display:flex;gap:4px;align-items:center;}
.thinking span{width:5px;height:5px;border-radius:50%;background:var(--teal);animation:bob 1s infinite;}
.thinking span:nth-child(2){animation-delay:.15s;}
.thinking span:nth-child(3){animation-delay:.3s;}
@keyframes bob{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:1;transform:translateY(-3px);}}

footer{margin-top:18px;font-size:11.5px;color:var(--faint);line-height:1.6;padding:0 4px;}
footer .warn{color:var(--coral);}
.err{color:var(--coral);font-size:12.5px;padding:0 4px;margin-top:10px;}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;}