/* ═══════════════════════════════════════════════
   DevRelay — clean professional UI
   Linear/Vercel 톤 · 라이트 · 여백 중심 · 외부 의존성 0
   ═══════════════════════════════════════════════ */

:root {
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Malgun Gothic", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Consolas", "D2Coding", ui-monospace, monospace;

  --bg: #ffffff;
  --bg-side: #f4f5f7;      /* 사이드바 — 흰 본문과 확실히 구분되는 회색 */
  --bg-sunken: #e9ebef;
  --bg-hover: #e5e7ec;

  --line: #d8dbe0;         /* 경계선 — 또렷하게 */
  --line-2: #c7cbd2;       /* 강한 경계선 */

  --tx-1: #18191b;      /* primary — 더 진하게 */
  --tx-2: #55585e;      /* secondary — 대비 상향 */
  --tx-3: #7c8087;      /* tertiary — 대비 상향 */

  --accent: #5b57d1;
  --accent-hover: #4a46c0;
  --accent-soft: #f0effb;

  --amber: #b26a00;
  --amber-soft: #fdf4e7;
  --green: #197a4b;
  --green-soft: #e9f5ee;
  --red: #c0392b;
  --red-soft: #fbecea;

  --r: 8px;
  --r-lg: 12px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .08);
}

html { color-scheme: light; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--tx-1);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ───── Header ───── */
.topbar {
  height: 56px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg);
  z-index: 2;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-logo {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--tx-1); color: #fff;
  display: grid; place-items: center; font-size: 15px;
}
.brand-name { font-weight: 650; font-size: 15px; letter-spacing: -0.01em; }
/* hide the sub label — cleaner */
.brand-sub { display: none; }

.topbar-right { display: flex; align-items: center; gap: 14px; }

/* role segmented — subtle */
.role-toggle {
  display: flex; background: var(--bg-sunken);
  border-radius: 7px; padding: 2px;
}
.role-btn {
  appearance: none; border: none; background: transparent;
  color: var(--tx-2); font-family: inherit; font-size: 12.5px; font-weight: 500;
  padding: 4px 11px; border-radius: 5px; cursor: pointer; transition: all .12s;
}
.role-btn.active { background: var(--bg); color: var(--tx-1); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* connection status hidden — dev clutter removed */
.conn-status { display: none; }

/* ───── Buttons ───── */
.btn {
  appearance: none; font-family: inherit; font-size: 13px; font-weight: 550;
  padding: 7px 15px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--tx-1);
  transition: all .12s; line-height: 1.3;
}
.btn:hover { background: var(--bg-hover); }
.btn-primary { background: var(--tx-1); border-color: var(--tx-1); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-danger { color: var(--red); border-color: transparent; background: transparent; }
.btn-danger:hover { background: var(--red-soft); }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.icon-btn {
  appearance: none; border: none; background: transparent; cursor: pointer;
  color: var(--tx-3); font-size: 14px; padding: 5px 7px; border-radius: 6px; line-height: 1;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--tx-1); }

/* ───── Layout ───── */
.layout { flex: 1; display: flex; min-height: 0; }

/* ───── Sidebar ───── */
.sidebar {
  width: 300px; flex: 0 0 auto;
  border-right: 1px solid var(--line-2);
  background: var(--bg-side);
  display: flex; flex-direction: column; min-height: 0;
}
/* filters removed for simplicity */
.filter-tabs { display: none; }

.sidebar-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
}
.sidebar-title { font-size: 13px; font-weight: 700; color: var(--tx-1); letter-spacing: -0.01em; }
.sidebar-count {
  font-size: 11.5px; font-weight: 600; color: var(--tx-3);
  background: var(--bg-sunken); padding: 1px 7px; border-radius: 999px;
}

.handoff-list { flex: 1; overflow-y: auto; padding: 10px; }
.empty-hint { padding: 48px 24px; text-align: center; color: var(--tx-3); font-size: 13px; line-height: 1.7; }

.handoff-card {
  padding: 12px 13px; border-radius: var(--r);
  cursor: pointer; margin-bottom: 3px;
  border: 1px solid transparent;
}
.handoff-card:hover { background: var(--bg-hover); }
.handoff-card.selected {
  background: var(--bg); border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.handoff-card-title {
  font-weight: 600; font-size: 13.5px; color: var(--tx-1); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em;
}
.handoff-card-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tx-2); }
.handoff-card-meta .sep { color: var(--line-2); }

/* ───── Detail ───── */
.detail { flex: 1; overflow-y: auto; min-width: 0; background: var(--bg); }
.detail-empty {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; color: var(--tx-3);
}
.detail-empty-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--bg-sunken); display: grid; place-items: center;
  font-size: 26px; color: var(--tx-3);
}
.detail-empty-title { font-size: 15px; font-weight: 550; color: var(--tx-2); }
.detail-empty-sub { font-size: 13px; text-align: center; line-height: 1.7; }

/* 상세 본문 — 상세 패널 너비를 그대로 채움 (너비 강제 없음) */
.detail-content { margin: 0; padding: 36px 48px 80px; }

.detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.detail-title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.detail-actions { display: flex; gap: 4px; flex: 0 0 auto; }

.detail-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; font-size: 13px; color: var(--tx-2); }
.detail-meta .sep { color: var(--line-2); }

/* section */
.section { margin-bottom: 34px; }
.section-title {
  font-size: 12px; font-weight: 700; color: var(--tx-2);
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 13px;
}

/* instructions */
.instructions {
  background: var(--bg-side); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 24px; position: relative;
}
.instructions.empty { color: var(--tx-3); font-style: italic; }
.copy-instr-btn { position: absolute; top: 14px; right: 14px; }

/* markdown */
.md { font-size: 14px; line-height: 1.72; color: var(--tx-1); word-break: break-word; }
.md h1, .md h2, .md h3 { font-weight: 700; line-height: 1.4; margin: 20px 0 8px; letter-spacing: -0.01em; }
.md h1 { font-size: 17px; } .md h2 { font-size: 15px; } .md h3 { font-size: 14px; }
.md h1:first-child, .md h2:first-child, .md h3:first-child { margin-top: 0; }
.md p { margin: 9px 0; }
.md ul, .md ol { margin: 9px 0; padding-left: 22px; }
.md li { margin: 5px 0; }
.md code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-hover); padding: 1.5px 5px; border-radius: 5px; }
.md pre { background: var(--bg-hover); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; overflow-x: auto; margin: 12px 0; }
.md pre code { background: none; padding: 0; font-size: 12.5px; line-height: 1.6; }
.md a { color: var(--accent); text-decoration: none; }
.md a:hover { text-decoration: underline; }
.md blockquote { border-left: 3px solid var(--line-2); padding-left: 13px; color: var(--tx-2); margin: 11px 0; }
.md strong { font-weight: 650; }
.md hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* files */
.file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 7px; background: var(--bg);
}
.file-info { display: flex; align-items: center; gap: 11px; min-width: 0; }
.file-icon { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto; background: var(--bg-sunken); display: grid; place-items: center; font-size: 14px; }
.file-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-size { font-size: 11.5px; color: var(--tx-3); font-family: var(--mono); }
.file-actions { display: flex; gap: 3px; flex: 0 0 auto; }

.dropzone {
  border: 1.5px dashed var(--line-2); border-radius: var(--r);
  padding: 20px; text-align: center; color: var(--tx-3); font-size: 12.5px;
  cursor: pointer; transition: all .12s; margin-top: 4px; display: block;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dropzone input { display: none; }

/* replies */
.reply { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.reply:first-child { border-top: none; }
.reply-avatar { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; font-size: 13px; background: var(--bg-sunken); }
.reply-body-wrap { flex: 1; min-width: 0; }
.reply-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.reply-author { font-size: 13px; font-weight: 600; }
.reply-time { font-size: 11.5px; color: var(--tx-3); }
.reply-kind { font-size: 11px; font-weight: 600; padding: 1.5px 8px; border-radius: 999px; }
.reply-kind.note   { background: var(--bg-sunken); color: var(--tx-2); }
.reply-kind.result { background: var(--green-soft); color: var(--green); }
.reply-kind.error  { background: var(--red-soft); color: var(--red); }

.reply-composer { margin-top: 16px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px; background: var(--bg); }
.reply-composer:focus-within { border-color: var(--accent); }
.reply-composer-tabs { display: flex; gap: 5px; margin-bottom: 10px; }
.reply-kind-btn {
  appearance: none; border: 1px solid var(--line); background: var(--bg);
  color: var(--tx-2); font-family: inherit; font-size: 12px; font-weight: 500;
  padding: 4px 11px; border-radius: 999px; cursor: pointer;
}
.reply-kind-btn.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.reply-textarea { width: 100%; resize: vertical; min-height: 56px; border: none; outline: none; background: transparent; color: var(--tx-1); font-family: inherit; font-size: 13.5px; line-height: 1.6; }
.reply-composer-foot { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ───── Fields ───── */
.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--tx-2); margin: 18px 0 6px; }
.field-label:first-child { margin-top: 0; }
.field-hint { font-weight: 400; color: var(--tx-3); font-size: 11.5px; margin-left: 6px; }
.field-input, .field-textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line-2);
  border-radius: var(--r); background: var(--bg); color: var(--tx-1);
  font-family: inherit; font-size: 14px; outline: none; transition: border-color .12s;
}
.field-input:focus, .field-textarea:focus { border-color: var(--accent); }
.field-textarea { min-height: 240px; resize: vertical; font-family: var(--mono); font-size: 13px; line-height: 1.65; }
select.field-input { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%239b9ea4' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }

/* ───── Modal ───── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .28); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal-overlay[hidden] { display: none; }
.modal { width: 100%; max-width: 620px; max-height: 88vh; background: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 650; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 15px 20px; border-top: 1px solid var(--line); }

/* ───── Toast ───── */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--tx-1); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow); z-index: 200; animation: toast-in .18s ease; }
.toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* responsive */
@media (max-width: 800px) {
  .sidebar { width: 240px; }
  .detail-content { padding: 26px 20px 60px; }
  .detail-title { font-size: 20px; }
}