/* TailgateLab 백오피스 — 디자인 시스템
 *
 * 방향: 요즘 팀즈처럼 깔끔하게. 금색은 로고에서 뽑은 포인트 색으로만 쓴다.
 * 금색은 로고에서 뽑은 유일한 채도 높은 색이다. 남발하면 싸구려가 되므로
 * 활성 상태 · 강조 버튼 · 미읽음 배지에만 쓴다.
 *
 * Tailwind 를 쓰지 않는다. 빌드 단계 없이 손으로 쓴 CSS 가 이런 결의 화면에는
 * 오히려 통제하기 쉽다.
 */

:root {
  --ink: #111827;
  --ink-soft: #4b5563;
  --ink-faint: #9ca3af;

  --gold: #c08f52;
  --gold-soft: #d8a860;
  --gold-wash: #fbf1e2;
  --gold-line: #ecd9b8;

  --parchment: #f4f5f7;
  --surface: #ffffff;
  --line: #e3e5e9;
  --line-strong: #cdd0d6;

  --rail: #14161c;
  --rail-hover: #1f232d;

  --radius: 6px;
  --rail-w: 68px;
  --sidebar-w: 248px;

  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }

/* hidden 속성은 브라우저 기본 규칙(display:none)으로만 걸린다. 우리가 어딘가에
   display:flex 를 적어 두면 그쪽이 이겨서 hidden 이 무시된다 — 코파일럿 패널이
   계속 떠 있던 원인이 이것이었다. 한 줄로 못박아 둔다. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ── 전체 골격: 레일 | 사이드바 | 본문 ────────────────────────────── */

.shell { display: flex; height: 100vh; overflow: hidden; }

.rail {
  width: var(--rail-w);
  flex-shrink: 0;
  background: var(--rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 4px;
}

/* 로고는 흰 바탕 위에 놓는다. 어두운 레일에 그냥 얹으면 흰 선으로 뒤집은
   변형본을 써야 하는데, 그건 우리 로고가 아니라 로고의 그림자다. */
.rail__brand {
  /* 흰 판은 그림을 받치는 자리일 뿐이라 작게 둔다 — 판이 크면 로고가
     아니라 «흰 사각형»이 먼저 보인다. 안쪽 그림은 그대로 두고 판과
     여백만 줄였다(56 → 40, 여백 5 → 2). */
  width: 40px; height: 40px;
  margin-bottom: 14px;
  display: grid; place-items: center;
  background: #fff; border-radius: 10px; padding: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.24);
  transition: transform .16s ease, box-shadow .16s ease;
}
.rail__brand:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.36); }

/* PNG 가 아니라 그려 넣는다 — 움직이려면 획을 잡을 수 있어야 한다. */
.brand-mark { width: 100%; height: 100%; overflow: visible; display: block; }
.brand-ridge { stroke: var(--rail); }
.brand-star { fill: var(--gold); }
.brand-tail { stroke: var(--gold); opacity: .6; }

/* 유성이 능선 위를 가끔 스쳐 지나간다. 코파일럿 단추와 같은 몸짓이되
   주기를 더 길게 잡았다 — 늘 보이는 자리라 자주 움직이면 시선을 뺏는다. */
.brand-comet { animation: brand-streak 7s ease-in-out infinite; }
@keyframes brand-streak {
  0%, 66%   { transform: translate(44px, 6px)    scale(.6); opacity: 0; }
  73%       { opacity: 1; }
  /* 이 지점이 로고 원본의 별 자리다 — 여기를 지나가야 우리 마크로 보인다. */
  88%       { transform: translate(28.1px, 17.5px) scale(1); opacity: 1; }
  97%, 100% { transform: translate(13px, 29px)   scale(.6); opacity: 0; }
}
/* 올려놓으면 자주 지나가고 능선이 금색으로 흐른다. */
.rail__brand:hover .brand-comet { animation-duration: 1.4s; }
.rail__brand:hover .brand-ridge {
  stroke: var(--gold); stroke-dasharray: 9 5;
  animation: cop-flow 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .brand-comet { animation: none; opacity: 1; transform: translate(28.1px, 17.5px); }
  .rail__brand:hover .brand-ridge { animation: none; stroke: var(--rail); }
}

.rail__item {
  width: 48px;
  padding: 9px 0 7px;
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #8b93a4;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  transition: background .12s, color .12s;
}
.rail__item:hover { background: var(--rail-hover); color: #e5e7eb; }
.rail__item.is-active { color: var(--gold-soft); }
/* 활성 표시는 배경이 아니라 왼쪽 금색 선 — 금색을 넓게 칠하지 않는다. */
.rail__item.is-active::before {
  content: "";
  position: absolute; left: 0;
  width: 3px; height: 26px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}
.rail__item { position: relative; }
.rail__item svg { width: 19px; height: 19px; }

.rail__spacer { flex: 1; }

.rail__me {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  border: none; cursor: pointer;
}

/* ── 사이드바 ───────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.sidebar__head {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.sidebar__title { font-size: 17px; }
.sidebar__sub { color: var(--ink-faint); font-size: 12px; margin-top: 2px; }

.sidebar__section {
  padding: 16px 20px 6px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; align-items: center; justify-content: space-between;
}

.sidebar__list { list-style: none; margin: 0; padding: 0 10px 16px; overflow-y: auto; }

.chan {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius);
  color: var(--ink-soft);
  transition: background .12s;
}
.chan:hover { background: var(--parchment); }
.chan.is-active { background: var(--gold-wash); color: var(--ink); font-weight: 600; }
.chan__hash { color: var(--ink-faint); }
.chan svg, .chan .lucide { width: 15px; height: 15px; flex-shrink: 0; }
.chan.is-active .chan__hash { color: var(--gold); }
.chan__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan__badge {
  background: var(--gold); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 9px;
}

/* ── 본문 ───────────────────────────────────────────────────────── */

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--parchment); }

.main__head {
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex; align-items: baseline; gap: 12px;
}
.main__title { font-size: 18px; }
.main__topic { color: var(--ink-faint); font-size: 12.5px; }

.stream { flex: 1; overflow-y: auto; padding: 22px 0; }

.msg { display: flex; gap: 12px; padding: 7px 28px; }
.msg:hover { background: rgba(0, 0, 0, .015); }
.msg__avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
}
.msg__body { min-width: 0; flex: 1; }
.msg__meta { display: flex; align-items: baseline; gap: 8px; }
.msg__who { font-weight: 600; }
.msg__when { color: var(--ink-faint); font-size: 11.5px; }
.msg__text { white-space: pre-wrap; overflow-wrap: anywhere; }

.composer { padding: 14px 28px 20px; background: var(--parchment); }
.composer__box {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 4px 6px 4px 14px;
  transition: border-color .12s;
}
.composer__box:focus-within { border-color: var(--gold); }
.composer input {
  flex: 1; border: 0; outline: 0; padding: 10px 0;
  font: inherit; color: inherit; background: transparent;
}

/* ── 버튼 ───────────────────────────────────────────────────────── */

/* 아이콘 기본 크기.
 *
 * Lucide 는 <i data-lucide> 를 24×24 SVG 로 바꿔 놓는다. 버튼마다 크기를 안
 * 정해 주면 그 24px 이 버튼 높이를 밀어 올려 전부 뚱뚱해진다 — 실제로 그랬다.
 * 여기서 한 번 못박고, 더 크거나 작아야 하는 곳만 따로 덮어쓴다. */
.lucide { width: 15px; height: 15px; flex-shrink: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 13px; line-height: 1.2; cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 7px 13px;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: #b0803f; }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink-soft); }
.btn--ghost:hover { border-color: var(--ink-faint); }
.btn:disabled { opacity: .45; cursor: default; }

/* 아이콘만 있는 단추는 정사각형으로. 글자 없는 단추에 좌우 여백이 크면
   누르는 자리가 어디인지 흐려진다. */
.btn--icon {
  width: 30px; height: 30px; padding: 0;
  background: transparent; color: var(--ink-faint);
}
.btn--icon:hover { color: var(--gold); background: var(--gold-wash); }
.btn--icon svg { width: 16px; height: 16px; }

/* ── 빈 상태 ────────────────────────────────────────────────────── */

.empty { padding: 80px 28px; text-align: center; color: var(--ink-faint); }
.empty h2 { font-size: 17px; color: var(--ink); margin-bottom: 6px; }

/* ── 로그인 ─────────────────────────────────────────────────────── */

.auth {
  min-height: 100vh;
  display: grid; place-items: center;
  background: var(--parchment);
  padding: 24px;
}
.auth__card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 42px 38px 34px;
}
.auth__logo { width: 168px; margin: 0 auto 26px; display: block; }
.auth__label {
  display: block; margin-bottom: 5px;
  font-size: 12px; letter-spacing: .04em; color: var(--ink-soft);
}
.auth__input {
  width: 100%; margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit; color: inherit;
  background: var(--surface);
}
.auth__input:focus { outline: 0; border-color: var(--gold); }
.auth__submit { width: 100%; margin-top: 6px; padding: 11px; }
.auth__note { margin-top: 20px; font-size: 11.5px; color: var(--ink-faint); text-align: center; }

.flash {
  background: #fdf2f2; border: 1px solid #f5c6c6; color: #a33a3a;
  border-radius: var(--radius);
  padding: 9px 12px; margin-bottom: 16px; font-size: 12.5px;
}

/* ── 목록·표 (거래처, 자료함) ────────────────────────────────────── */

.pane { padding: 24px 28px; overflow-y: auto; flex: 1; }
.pane__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.pane__bar .grow { flex: 1; }

/* 입력칸과 단추가 나란히 서는 줄(필터 바)이 많다. 글자 크기와 높이를
   맞춰 두지 않으면 그 줄이 들쭉날쭉해 보인다. */
.field {
  padding: 6px 10px; font: inherit; font-size: 13px; line-height: 1.2;
  color: inherit;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface);
}
.field:focus { outline: 0; border-color: var(--gold); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden;
}

.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); background: #fafbfc;
  border-bottom: 1px solid var(--line);
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: #fbfcfd; }
.tbl .num { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11.5px; background: var(--gold-wash); color: #8a6430;
}
.tag--muted { background: #eef0f3; color: var(--ink-faint); }

.drop {
  border: 1.5px dashed var(--line-strong); border-radius: 8px;
  padding: 26px; text-align: center; color: var(--ink-faint);
  background: var(--surface); margin-bottom: 18px;
}
.drop:hover { border-color: var(--gold); }

.err { background: #fdf2f2; border: 1px solid #f5c6c6; color: #a33a3a;
       border-radius: var(--radius); padding: 9px 12px; margin-bottom: 14px; font-size: 12.5px; }

.dlg { border: 1px solid var(--line); border-radius: 8px; padding: 0; max-width: 560px; width: 92vw; }
.dlg::backdrop { background: rgba(17,24,39,.35); }
.dlg__head { padding: 18px 22px 0; font-size: 16px; font-weight: 650; }
.dlg__body { padding: 16px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dlg__body .full { grid-column: 1 / -1; }
.dlg__foot { padding: 8px 22px 18px; display: flex; justify-content: flex-end; gap: 8px; }
.dlg label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.dlg .field { width: 100%; }

/* ── 프로젝트(팀) > 채널 사이드바 ─────────────────────────────────── */

.team { margin-bottom: 12px; }
.team__name {
  padding: 6px 10px 4px; font-size: 12.5px; font-weight: 650; color: var(--ink);
}
.team__add {
  display: flex; align-items: center; gap: 2px;
  padding: 2px 6px 0 10px; border-radius: var(--radius);
}
.team__add:focus-within { background: var(--parchment); }
.team__add input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--ink-faint); padding: 5px 0 5px 2px;
}
.team__add input:focus { color: var(--ink); }
/* 단추는 평소엔 옅게, 칸을 누르면 또렷하게 */
.team__add button { width: 22px; height: 22px; opacity: .45; }
.team__add:focus-within button, .team__add:hover button { opacity: 1; }

/* ── 채널 탭 ─────────────────────────────────────────────────────── */

.main__head--tabs { display: block; padding: 14px 28px 0; }
.chead { display: flex; align-items: baseline; gap: 12px; }
.tabs { display: flex; gap: 2px; margin-top: 12px; }
.tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 13px; color: var(--ink-faint);
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ink-soft); }
.tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold); }
.tab svg { width: 15px; height: 15px; }

/* ── 파일 ────────────────────────────────────────────────────────── */

.crumbs { margin-bottom: 14px; font-size: 13px; color: var(--ink-soft); }
.crumbs a:hover { color: var(--gold); }
.crumbs__sep { color: var(--ink-faint); margin: 0 6px; }
.ico { width: 15px; height: 15px; vertical-align: -3px; color: var(--ink-faint); }

/* ── 노트 ────────────────────────────────────────────────────────── */

.notes { flex: 1; display: flex; min-height: 0; }

.notes__list {
  width: 232px; flex-shrink: 0;
  border-right: 1px solid var(--line); background: var(--surface);
  overflow-y: auto;
}
.note-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.note-item:hover { background: var(--parchment); }
.note-item.is-active { background: var(--gold-wash); }
.note-item__title { display: block; font-weight: 600; font-size: 13.5px; }
.note-item__meta { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-faint); }
.note-item__meta .tag { margin-left: 4px; }

.notes__editor { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.note-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.note-title { flex: 0 1 320px; border: 0; outline: 0; font: inherit; font-size: 16px; font-weight: 650; }
.note-saved { font-size: 11.5px; color: var(--ink-faint); min-width: 46px; text-align: right; }

.pen { display: flex; align-items: center; gap: 4px; }
.pen input[type=color] { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line-strong);
                         border-radius: 4px; background: none; cursor: pointer; }
.pen input[type=range] { width: 76px; accent-color: var(--gold); }
.btn--icon.is-on { color: var(--gold); background: var(--gold-wash); }

/* 캔버스가 글 위에 겹친다. 펜이 꺼져 있으면 클릭이 글로 통과해야 한다. */
.note-stage { position: relative; flex: 1; overflow: auto; background: var(--surface); }
.note-body {
  position: relative; z-index: 1;
  min-height: 100%; padding: 26px 32px; outline: 0;
  font-size: 14.5px; line-height: 1.75;
}
.note-body:empty::before { content: attr(data-placeholder); color: var(--ink-faint); }
.note-canvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.note-canvas.is-on { pointer-events: auto; cursor: crosshair; }

/* ── DM ──────────────────────────────────────────────────────────── */

.ava {
  display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: #fff;
  font-weight: 600; flex-shrink: 0;
}
.ava--sm { width: 22px; height: 22px; font-size: 11px; }

.chan--btn { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }

.picklist { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; }
.pick {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.pick:last-child { border-bottom: 0; }
.pick:hover { background: var(--parchment); }
.pick input[type=checkbox] { accent-color: var(--gold); }
.pick--row { justify-content: space-between; }

/* ── 우클릭 메뉴 ─────────────────────────────────────────────────── */

.ctxmenu {
  position: fixed; z-index: 6000;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 4px; min-width: 176px;
  box-shadow: 0 8px 24px rgba(17,24,39,.14);
}
.ctxmenu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 5px;
  background: none; font: inherit; font-size: 13px; color: var(--ink-soft);
  cursor: pointer; text-align: left;
}
.ctxmenu button:hover { background: var(--gold-wash); color: var(--ink); }
.ctxmenu svg { width: 15px; height: 15px; }

/* ── 검색 결과 ───────────────────────────────────────────────────── */

.hit { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.hit:last-child { border-bottom: 0; }
.hit:hover { background: #fbfcfd; }
.hit__kind {
  flex-shrink: 0; align-self: flex-start;
  padding: 2px 8px; border-radius: 10px;
  background: var(--gold-wash); color: #8a6430; font-size: 11.5px;
}
.hit__body { min-width: 0; }
.hit__title { display: block; font-weight: 600; font-size: 13.5px; }
.hit__snip { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 13px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit__meta { display: block; margin-top: 4px; color: var(--ink-faint); font-size: 11.5px; }
.hit__ref { margin-left: 6px; font-size: 11px; color: var(--ink-faint); }


/* ── 코파일럿 ────────────────────────────────────────────────────── */

/* 버튼: 로고의 능선 위를 유성이 지나간다.
   반짝이 아이콘 대신 우리 마크를 쓴다 — 어디에나 있는 모양은 우리 것이 아니다. */
/* 패널이 열리면 단추도 같이 비켜난다 — 안 그러면 패널 뒤에 깔린다. */
.cop-open .cop-fab { right: 422px; }
@media (max-width: 900px) { .cop-open .cop-fab { right: 22px; } }

.cop-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 5000;
  transition: right .16s ease;
  width: 54px; height: 54px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: var(--rail);
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(17,24,39,.28);
  transition: transform .14s, box-shadow .14s;
}
.cop-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17,24,39,.34); }

/* 숨쉬는 테두리 — 대기 중에도 살아 있다는 신호. */
.cop-fab::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 50%; border: 1.5px solid var(--gold);
  opacity: .28; animation: cop-breathe 3.6s ease-in-out infinite;
}
@keyframes cop-breathe {
  0%, 100% { transform: scale(1);    opacity: .22; }
  50%      { transform: scale(1.08); opacity: .48; }
}

.cop-mark { width: 30px; height: 30px; overflow: visible; }
.cop-ridge { stroke: #f3f4f6; }

.cop-comet { transform: translate(28.1px, 17.5px); }
.cop-star { fill: var(--gold-soft); }
.cop-tail { stroke: var(--gold-soft); opacity: .55; }

/* 대기: 가끔 한 번 스쳐 지나간다. */
.cop-comet { animation: cop-streak 6s ease-in-out infinite; }
@keyframes cop-streak {
  0%, 62%   { transform: translate(44px, 6px)    scale(.6); opacity: 0; }
  70%       { opacity: 1; }
  /* 로고 원본의 별 자리 */
  86%       { transform: translate(28.1px, 17.5px) scale(1); opacity: 1; }
  96%, 100% { transform: translate(13px, 29px)   scale(.6); opacity: 0; }
}

/* 생각 중: 쉬지 않고 돈다. 능선도 흐른다. */
.cop-fab.is-thinking .cop-comet { animation: cop-streak 1.15s linear infinite; }
.cop-fab.is-thinking .cop-ridge {
  stroke: var(--gold-soft);
  stroke-dasharray: 8 5;
  animation: cop-flow .9s linear infinite;
}
.cop-fab.is-thinking::after { animation-duration: 1.2s; }
@keyframes cop-flow { to { stroke-dashoffset: -13; } }

@media (prefers-reduced-motion: reduce) {
  .cop-fab::after, .cop-comet, .cop-fab.is-thinking .cop-ridge { animation: none; }
  .cop-comet { opacity: 1; }
}

/* ── 패널 ────────────────────────────────────────────────────────── */

/* 패널이 열리면 화면을 덮지 않고 밀어낸다. 문서 편집기에서는 덮어 버리면
   보고 있던 A4 의 오른쪽이 잘린다. */
.cop-open .shell { padding-right: 400px; }
@media (max-width: 900px) { .cop-open .shell { padding-right: 0; } }

.cop {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 5100;
  width: 400px; max-width: 94vw;
  background: var(--surface); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 28px rgba(17,24,39,.10);
}
.cop__head {
  display: flex; align-items: center; gap: 4px;
  padding: 11px 12px 11px 18px; border-bottom: 1px solid var(--line);
}
.cop__head form { display: flex; }
.cop__title { font-weight: 650; }

.cop__body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.cop__hint { color: var(--ink-faint); font-size: 12.5px; line-height: 1.75; }

/* ── 대화 ────────────────────────────────────────────────────────── */

.cop-turn { margin-bottom: 16px; }
.cop-q {
  background: var(--gold-wash); color: #7d5a2c;
  padding: 8px 12px; border-radius: 10px 10px 10px 3px;
  font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.cop-text { font-size: 13.5px; line-height: 1.72; white-space: pre-wrap; overflow-wrap: anywhere; }

.cop-att { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.cop-att a {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 7px; font-size: 11.5px; color: var(--ink-soft);
}
.cop-att svg { width: 12px; height: 12px; }
.cop-att span { color: var(--ink-faint); }

/* 진행 상황 — 무엇을 하고 있는지 보여준다. */
.cop-steps { margin-bottom: 7px; }
.cop-step {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-faint); padding: 1px 0;
}
.cop-step svg { width: 12px; height: 12px; color: var(--gold); flex-shrink: 0; }
.cop-step em {
  font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cop-live { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cop-dots { display: inline-flex; gap: 3px; }
.cop-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  animation: cop-bounce 1.1s ease-in-out infinite;
}
.cop-dots i:nth-child(2) { animation-delay: .16s; }
.cop-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes cop-bounce { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

.cop-stop {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font: inherit; font-size: 12px; color: var(--ink-soft); cursor: pointer;
}
.cop-stop:hover { border-color: #c05252; color: #c05252; }
.cop-stop svg { width: 11px; height: 11px; }

.cop-turn__foot {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 7px;
}
.cop-turn__foot code {
  font-size: 11px; color: var(--ink-faint);
  background: var(--parchment); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px;
}
.cop-badge {
  font-size: 11px; padding: 1px 7px; border-radius: 9px;
  background: #eef0f3; color: var(--ink-faint);
}
.cop-badge--err { background: #fdf2f2; color: #a33a3a; }

/* ── 기록 ────────────────────────────────────────────────────────── */

.cop-hist {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; margin-bottom: 3px;
  border: 1px solid transparent; border-radius: 7px;
  background: none; font: inherit;
}
.cop-hist:hover { background: var(--parchment); border-color: var(--line); }
.cop-hist__title { display: block; font-size: 13.5px; font-weight: 600; }
.cop-hist__when { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-faint); }

/* ── 입력 ────────────────────────────────────────────────────────── */

.cop__sel, .cop__files {
  margin: 0 14px 8px; padding: 6px 10px;
  background: var(--parchment); border: 1px solid var(--line);
  border-left: 2px solid var(--gold); border-radius: 6px;
  font-size: 12px; color: var(--ink-soft);
}
.cop__sel { display: flex; align-items: center; gap: 6px; }
.cop__sel span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cop__form {
  display: flex; align-items: center; gap: 4px;
  margin: 0 14px 14px; padding: 3px 4px 3px 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 10px;
}
.cop__form:focus-within { border-color: var(--gold); }
.cop__form label { cursor: pointer; }
.cop__form input[name=q] {
  flex: 1; border: 0; outline: 0; padding: 9px 2px;
  font: inherit; background: transparent; color: inherit;
}

.cop-selpop {
  position: fixed; z-index: 6100;
  display: flex; align-items: center; gap: 5px;
  padding: 6px 11px 6px 8px; border-radius: 7px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer;
  box-shadow: 0 6px 18px rgba(17,24,39,.16);
}
.cop-selpop:hover { border-color: var(--gold); color: var(--gold); }
.cop-mark--mini { width: 17px; height: 17px; }
.cop-mark--mini .cop-ridge { stroke: var(--gold); }

/* ── 문서 스튜디오 ───────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chip {
  padding: 5px 12px; border-radius: 14px; font-size: 12.5px;
  border: 1px solid var(--line-strong); color: var(--ink-soft); background: var(--surface);
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }

/* 카드 폭을 고정한다 — A4(210mm = 793.7px)를 줄이는 배율이 상수가 되어야
   축소본이 어느 화면에서도 같은 비율로 나온다. 176 / 793.7 = 0.2217 */
.tpl-grid {
  display: grid; gap: 20px 18px;
  grid-template-columns: repeat(auto-fill, 176px);
  justify-content: start;
}
.tpl { display: block; width: 176px; }

/* 양식 본문을 실제 A4 로 그린 뒤 통째로 줄인다. 미리 그려 둔 그림이 아니라
   진짜 문서라서, 양식을 고치면 이 그림도 같이 바뀐다. */
.tpl__paper {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 210 / 297; background: #fff;
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 1px 4px rgba(17,24,39,.10);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.tpl:hover .tpl__paper {
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(138,106,31,.20);
}
.tpl__scale {
  display: block; position: absolute; top: 0; left: 0;
  width: 210mm; min-height: 297mm; padding: 20mm 25mm;
  transform-origin: top left;
  transform: scale(0.2217);
  font-family: "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 11pt; line-height: 1.65; color: #111;
  pointer-events: none;
}
.tpl__scale p { margin: 0 0 .35em; }
.tpl__scale hr { border: 0; border-top: 1px solid #333; margin: .7em 0; }
.tpl__scale table { border-collapse: collapse; width: 100%; margin: .5em 0; }
.tpl__scale td, .tpl__scale th { border: 1px solid #555; padding: 6px 8px; }
.tpl__scale ul, .tpl__scale ol { margin: .3em 0 .6em; padding-left: 26px; }

.tpl__meta { display: block; padding: 9px 2px 0; }
.tpl__title {
  display: block; font-weight: 650; font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpl:hover .tpl__title { color: var(--gold); }
.tpl__desc {
  display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.note-src {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; margin-bottom: 16px;
  background: var(--gold-wash); border-left: 2px solid var(--gold);
  border-radius: 6px; font-size: 12.5px; color: #7d5a2c;
}
.note-src svg { width: 14px; height: 14px; flex-shrink: 0; }

.fillgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.fill { display: block; margin-bottom: 10px; }
.fill span { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.fill .field { width: 100%; }
.fill-note { color: var(--ink-faint); font-size: 12.5px; margin: 14px 0; line-height: 1.7; }

/* 왼쪽에서 채우면 오른쪽 종이가 바로 바뀐다 */
.fill-split { flex: 1; display: flex; min-height: 0; }
.fill-side { width: 46%; min-width: 340px; overflow: auto; padding: 22px 26px; }
.fill-preview {
  flex: 1; overflow: auto; padding: 22px 0 40px;
  background: var(--desk, #E6E7EA); border-left: 1px solid var(--line);
}
/* 미리보기는 좁은 칸에 들어가야 한다. transform 대신 zoom 을 쓴다 —
   transform 은 원래 크기의 자리를 그대로 차지해 가로 스크롤을 만든다. */
.doc-page--peek { zoom: .62; cursor: default; }
@media (max-width: 1480px) { .doc-page--peek { zoom: .5; } }
@media (max-width: 1180px) {
  .fill-split { flex-direction: column; }
  .fill-side { width: auto; min-width: 0; }
  .fill-preview { display: none; }
}

.doc-title {
  border: 0; outline: 0; background: none; font: inherit;
  font-size: 18px; font-weight: 650; width: 420px; max-width: 46vw;
}
.doc-left { font-size: 12px; color: var(--ink-faint); }
.doc-left.is-warn { color: var(--gold); }

/* ── 편집기: 리본 + A4 용지 ─────────────────────────────────────── */

/* A4 실치수. 화면과 인쇄가 같은 값을 쓰게 한 군데서만 정한다. */
:root {
  --page-w: 210mm;
  --page-h: 297mm;
  --page-pad-y: 20mm;
  --page-pad-x: 25mm;
}

.ribbon {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 6px 10px; background: var(--surface);
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.ribbon .sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.ribbon .grow { flex: 1; }

.rb {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 6px;
  border: 1px solid transparent; border-radius: 5px;
  background: none; color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1;
}
.rb:hover { background: var(--gold-wash); color: var(--gold); border-color: var(--gold-line); }
.rb.is-on { background: var(--gold-wash); color: var(--gold); border-color: var(--gold); }
.rb svg { width: 15px; height: 15px; }
.rb--b { font-weight: 800; }
.rb--i { font-style: italic; font-family: Georgia, serif; }
.rb--u { text-decoration: underline; }
.rb--s { text-decoration: line-through; }

.rb-sel {
  height: 28px; padding: 0 6px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.rb-sel:hover { border-color: var(--gold); }
.rb-sel--font { width: 120px; }
.rb-sel--size { width: 62px; }

/* 색 단추 — 아래 띠가 현재 색을 보여준다 (워드와 같은 동선) */
.rb-color { position: relative; padding: 0 7px; }
.rb-color i { pointer-events: none; }
.rb-color input[type=color] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; border: 0; padding: 0;
}
.rb-color .bar {
  position: absolute; left: 5px; right: 5px; bottom: 3px; height: 3px;
  border-radius: 2px; pointer-events: none;
}

/* 종이가 놓인 책상 */
.doc-desk {
  flex: 1; overflow: auto; padding: 26px 0 60px;
  background: var(--desk, #E6E7EA);
}
.doc-page {
  width: var(--page-w); min-height: var(--page-h);
  margin: 0 auto; padding: var(--page-pad-y) var(--page-pad-x);
  background: #fff; color: #111; outline: 0;
  box-shadow: 0 2px 10px rgba(17,24,39,.13), 0 0 0 1px rgba(17,24,39,.06);
  /* 한 장이 끝나는 지점을 옅게 그어 준다. 진짜 쪽 나눔은 인쇄가 한다. */
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent calc(var(--page-h) - 1px),
    #D8DADE calc(var(--page-h) - 1px), #D8DADE var(--page-h));
  font-family: "맑은 고딕", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 11pt; line-height: 1.65;
}
.doc-page:focus { box-shadow: 0 2px 10px rgba(17,24,39,.13), 0 0 0 2px var(--gold); }

/* 문서 안쪽 서식. 껍데기 CSS 가 본문을 건드리지 않도록 여기서 다시 세운다. */
.doc-page p { margin: 0 0 .35em; min-height: 1.65em; }
.doc-page h1 { font-size: 20pt; margin: .4em 0 .3em; }
.doc-page h2 { font-size: 16pt; margin: .4em 0 .3em; }
.doc-page h3 { font-size: 13pt; margin: .4em 0 .3em; }
.doc-page hr { border: 0; border-top: 1px solid #333; margin: .7em 0; }
.doc-page ul, .doc-page ol { margin: .3em 0 .6em; padding-left: 26px; }
.doc-page li { margin-bottom: .15em; }
.doc-page table { border-collapse: collapse; width: 100%; margin: .5em 0; }
.doc-page td, .doc-page th { border: 1px solid #555; padding: 6px 8px; vertical-align: top; }
.doc-page blockquote {
  margin: .5em 0; padding-left: 12px; border-left: 3px solid #CCC; color: #444;
}

/* 아직 안 채운 자리를 눈에 띄게 — 빈 칸인 채로 내보내는 사고를 막는다 */
.doc-page .ph {
  background: #FFF3C4; border-bottom: 1px dashed #C79A15;
  border-radius: 2px; padding: 0 1px;
}

.doc-zoom { font-size: 12px; color: var(--ink-faint); }

/* 인쇄하면 화면 껍데기는 사라지고 종이만 남는다 → Ctrl+P 로 PDF 가 나온다 */
@media print {
  @page { size: A4; margin: 0; }
  .rail, .side, .main__head, .ribbon, .cop-fab, .cop-panel { display: none !important; }
  .shell, .main, .doc-desk { display: block; overflow: visible; padding: 0; background: #fff; }
  .doc-page {
    width: auto; min-height: 0; margin: 0; box-shadow: none;
    background-image: none; padding: var(--page-pad-y) var(--page-pad-x);
  }
  .doc-page .ph { background: none; border: 0; }
}

/* ── 세무 ────────────────────────────────────────────────────────── */

.kpis {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kpi {
  padding: 15px 17px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); display: flex; flex-direction: column; gap: 3px;
}
.kpi__label { font-size: 12px; color: var(--ink-soft); }
.kpi__value {
  font-size: 24px; font-weight: 660; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.4px;
}
.kpi__value em { font-size: 13px; font-weight: 500; font-style: normal; color: var(--ink-faint); margin-left: 3px; }
.kpi__sub { font-size: 11.5px; color: var(--ink-faint); }
.kpi.is-minus .kpi__value { color: #C0392B; }
.kpi.is-plus .kpi__value { color: #1E7A55; }

.sec { font-size: 13.5px; font-weight: 650; margin: 26px 0 10px; color: var(--ink); }

.table-wrap {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); overflow-x: auto;
}
.table-wrap .tbl { margin: 0; border: 0; }
/* 금액은 자릿수가 흔들리면 못 읽는다. 고정폭 숫자로 세로줄을 맞춘다. */
.tbl .r, .field.r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .dim { color: var(--ink-faint); }
.tbl .ok { color: #1E7A55; width: 15px; height: 15px; }
.tbl .pos { color: #1E7A55; }
.tbl .neg { color: #C0392B; }
.tbl--rows td { padding: 9px 12px; font-size: 12.5px; }
.tbl--rows th { font-size: 11.5px; }
.tag--gold { background: var(--gold); color: #fff; }

/* 신고서 모양 표 */
.tbl--form td { padding: 9px 16px; }
.tbl--form .grp td {
  background: #F7F8FA; font-size: 11.5px; font-weight: 650;
  color: var(--ink-soft); padding: 7px 16px;
}
.tbl--form .sum td { font-weight: 650; background: #FCFCFD; }
.tbl--form .total td { font-size: 16px; font-weight: 700; padding: 14px 16px; }
.tbl--form .total.pos td { color: #1E7A55; background: #F2FBF6; }
.tbl--form .total.neg td { color: #C0392B; background: #FDF6F5; }
.tbl tfoot .sum td { font-weight: 650; border-top: 1px solid var(--line-strong); }

.filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filters .field { max-width: 200px; }

.strip {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  font-size: 12.5px; color: var(--ink-soft);
}
.strip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.strip .grow { flex: 1; }
.strip .pos b { color: #1E7A55; }
.strip .neg b { color: #C0392B; }

.bars { display: flex; flex-direction: column; gap: 7px; }
.bar { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.bar__name { width: 92px; flex-shrink: 0; color: var(--ink-soft); }
.bar__track { flex: 1; height: 8px; background: #EEF0F3; border-radius: 4px; overflow: hidden; display: block; }
.bar__fill { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
.bar__val { width: 100px; text-align: right; font-variant-numeric: tabular-nums; }

.hint-line {
  display: flex; align-items: flex-start; gap: 7px; margin: 14px 0;
  font-size: 12.5px; color: var(--ink-faint); line-height: 1.7;
}
.hint-line svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; }

.check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.check input { margin: 0; }
.btn--sm { padding: 4px 9px; font-size: 12px; gap: 4px; }
.btn--sm svg, .btn--sm .lucide { width: 13px; height: 13px; }

@media print {
  .rail, .side, .main__head, .chips, .cop-fab, .cop-panel, .filters { display: none !important; }
  .shell, .main { display: block; overflow: visible; }
  .pane { padding: 0; }
}

/* ── 영수증 증빙 ─────────────────────────────────────────────────── */

.rcp { display: inline-flex; align-items: center; gap: 3px; }
.rcp__thumb {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
}
.rcp__thumb:hover { border-color: var(--gold); }
.rcp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcp__thumb svg { width: 14px; height: 14px; color: var(--ink-faint); }
.rcp__more { font-size: 11px; color: var(--ink-faint); }
.rcp__none { color: var(--ink-faint); }
.rcp__none:hover { color: var(--gold); }

.rcp-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.rcp-list:empty { display: none; }
.rcp__item { position: relative; display: inline-block; }
.rcp__item .rcp__thumb { width: 56px; height: 56px; }
.rcp__x {
  position: absolute; top: -5px; right: -5px;
  width: 17px; height: 17px; padding: 0; line-height: 1;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--ink-soft);
  font-size: 12px; cursor: pointer;
}
.rcp__x:hover { background: #C0392B; border-color: #C0392B; color: #fff; }

/* 휴대폰으로 찍은 영수증을 그대로 던져 넣는 자리 */
.rcp-drop {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: 7px;
  background: var(--surface); color: var(--ink-faint); font-size: 12.5px;
  transition: border-color .12s, background .12s, color .12s;
}
.rcp-drop:hover, .rcp-drop.is-over { border-color: var(--gold); color: var(--gold); background: var(--gold-wash); }
.rcp-drop.has-file { border-style: solid; border-color: var(--gold); color: #8a6430; }
.rcp-drop svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── 권한 설정 ───────────────────────────────────────────────────── */

.permcard {
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  padding: 16px 18px 12px; margin-bottom: 4px;
}
.permcard__who { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.permcard__avatar {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
}
.permcard__grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.permbox {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; font-size: 12.5px;
}
.permbox:hover { border-color: var(--gold); }
.permbox input { margin: 2px 0 0; }
.permbox b { display: block; font-weight: 600; }
.permbox em { display: block; font-style: normal; color: var(--ink-faint); font-size: 11.5px; line-height: 1.5; }
.permbox.is-locked { opacity: .55; cursor: default; background: var(--parchment); }
.permcard__foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.permcard__role { margin: 0 0 18px; padding: 0 18px; }

.tbl tr.is-off td { opacity: .5; }
.tag--warn { background: #FDF1EF; color: #8C2E22; }

/* ── 대화 말풍선 ─────────────────────────────────────────────────── */

.stream--chat { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }

.bub { display: flex; gap: 9px; align-items: flex-start; max-width: 100%; }
/* 내 글은 오른쪽. 메신저의 기본 문법이라 이것만으로 대화 흐름이 읽힌다. */
.bub--mine { flex-direction: row-reverse; }

.bub__avatar {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.bub__col { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 74%; }
.bub--mine .bub__col { align-items: flex-end; }
.bub__who { font-size: 11.5px; color: var(--ink-faint); padding-left: 2px; }

.bub__row { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.bub--mine .bub__row { flex-direction: row-reverse; }
.bub__when { font-size: 10.5px; color: var(--ink-faint); flex-shrink: 0; padding-bottom: 2px; }

/* 말풍선 색.
 *
 * 금색은 로고와 작은 강조에만 남긴다. 크림·황토로 넓은 면을 칠하면 화면이
 * 대번에 낡아 보인다 — 색 자체가 촌스러운 게 아니라, 큰 면적을 채도 높은
 * 따뜻한 색으로 덮으면 그렇게 된다.
 *
 * 내 글과 남의 글은 **밝기 한 단계 차이**로만 가른다. 어느 쪽이 내 말인지는
 * 이미 좌우 정렬이 말해 주고 있어서, 색까지 세게 갈라 놓을 이유가 없다.
 */
/* 말풍선.
 *
 * **테두리를 없앤다.** 요즘 메신저·챗봇(슬랙 스레드, 팀즈, iMessage,
 * ChatGPT·Claude 류)은 하나같이 선을 안 쓴다. 채운 면만으로 덩어리가
 * 충분히 읽히는데 선까지 두르면 칸이 갇혀 보이고, 그 갇힌 느낌이 화면을
 * 낡아 보이게 한다.
 *
 * 대신 **면의 밝기 한 단계**로 가른다. 어느 쪽이 내 말인지는 이미 좌우
 * 정렬이 말해 주고 있어서, 색까지 세게 갈라 놓을 이유가 없다.
 *
 * 모서리는 18px 로 넉넉히. 꼬리 쪽만 6px 로 좁혀 말풍선이 사람 쪽을
 * 향하게 한다 — 꼬리 삼각형을 그리지 않고도 방향이 읽힌다.
 */
.bub__body {
  min-width: 0;
  padding: 9px 14px; border-radius: 18px;
  background: #f1f3f6; border: 0;
  border-top-left-radius: 6px;
}
.bub--mine .bub__body {
  /* 내 말은 한 단계 진하게. 브랜드 금색은 이 자리에 쓰지 않는다 —
     넓은 면을 따뜻한 색으로 덮으면 대번에 낡아 보인다. */
  background: #e3e8f0;
  border-top-left-radius: 18px; border-top-right-radius: 6px;
}
.bub__text { font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.bub__text > :first-child { margin-top: 0; }
.bub__text > :last-child { margin-bottom: 0; }
.bub__text p { margin: 0 0 .3em; }
.bub__text ul, .bub__text ol { margin: .3em 0; padding-left: 20px; }
.bub__text code {
  background: rgba(17,24,39,.07); border-radius: 4px; padding: 1px 5px;
  font-family: ui-monospace, "D2Coding", Menlo, monospace; font-size: 12.5px;
}
.bub__text pre { margin: .4em 0; padding: 9px 11px; background: rgba(17,24,39,.05);
                 border-radius: 6px; overflow-x: auto; }
/* 표는 말풍선을 넘칠 수 있다. 안에서 가로로 밀리게 둔다. */
.bub__text table { border-collapse: collapse; margin: .4em 0; width: 100%; }
.bub__text td, .bub__text th {
  border: 1px solid rgba(17, 24, 39, .14); padding: 5px 9px; font-size: 12.5px;
}
.bub__text th { background: rgba(255,255,255,.6); font-weight: 600; }
.bub__text blockquote {
  margin: .3em 0; padding-left: 9px; border-left: 2px solid var(--line-strong); color: var(--ink-soft);
}

.bub__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bub__files:first-child { margin-top: 0; }
.bub__shot {
  display: block; max-width: 260px; border-radius: 12px; overflow: hidden;
  border: 0;
}
.bub__shot img { display: block; width: 100%; height: auto; }
.bub__shot:hover { opacity: .92; }
.bub__file {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 7px 11px; border-radius: 10px; border: 0;
  /* 말풍선이 이미 회색이라 흰 칩이 오히려 또렷하다. */
  background: rgba(255, 255, 255, .72);
  font-size: 12.5px; color: var(--ink-soft);
}
.bub__file:hover { background: #fff; color: var(--ink); }
.bub__file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bub__file-size { color: var(--ink-faint); font-size: 11px; flex-shrink: 0; }

/* ── 대화 입력창 ─────────────────────────────────────────────────── */

.chatbox {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px; transition: border-color .12s, background .12s;
}
.chatbox:focus-within { border-color: var(--gold); }
.chatbox.is-over { border-color: var(--gold); background: var(--gold-wash); }

.chatbox__tools {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 5px 8px; border-bottom: 1px solid var(--line);
}
.chatbox__tools .grow { flex: 1; }
.chatbox__hint { font-size: 11px; color: var(--ink-faint); padding-right: 4px; }

.cb {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 5px;
  border: 1px solid transparent; border-radius: 5px;
  background: none; color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1;
}
.cb:hover { background: var(--gold-wash); color: var(--gold); }
.cb svg, .cb .lucide { width: 14px; height: 14px; }
.cb-sep { width: 1px; height: 16px; background: var(--line); margin: 0 5px; }

.chatbox__row { display: flex; align-items: flex-end; gap: 6px; padding: 6px 8px 6px 12px; }
.chatbox__input {
  flex: 1; min-height: 22px; max-height: 190px; overflow-y: auto;
  outline: 0; font-size: 13.5px; line-height: 1.6; padding: 4px 0;
}
/* placeholder — contenteditable 에는 없으므로 직접 그린다 */
.chatbox__input:empty::before {
  content: attr(data-ph); color: var(--ink-faint); pointer-events: none;
}
.chatbox__input table { border-collapse: collapse; width: 100%; margin: .3em 0; }
.chatbox__input td, .chatbox__input th {
  border: 1px solid var(--line-strong); padding: 4px 8px; min-width: 40px;
}
.chatbox__input th { background: rgba(17,24,39,.05); }
.chatbox__input code {
  background: rgba(17,24,39,.07); border-radius: 4px; padding: 1px 5px;
  font-family: ui-monospace, monospace; font-size: 12.5px;
}
.chatbox__send { flex-shrink: 0; }

.chatbox__files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 9px; }
.chatchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 8px; border-radius: 7px;
  background: var(--parchment); border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-soft); max-width: 220px;
}
.chatchip img { width: 26px; height: 26px; object-fit: cover; border-radius: 4px; }
.chatchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatchip button {
  border: 0; background: none; cursor: pointer; color: var(--ink-faint);
  font-size: 15px; line-height: 1; padding: 0 2px;
}
.chatchip button:hover { color: #C0392B; }

/* ── 화면 아래 설명 ──────────────────────────────────────────────── */

.legend {
  margin-top: 26px; padding: 18px 20px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.legend__item { display: flex; gap: 10px; align-items: flex-start; }
.legend__item .tag { flex-shrink: 0; margin-top: 1px; }
.legend__item b { display: block; font-size: 13px; margin-bottom: 3px; }
.legend__item p { margin: 0 0 3px; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.legend__eg { color: var(--ink-faint) !important; font-size: 11.5px !important; }
.legend__note {
  grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start;
  margin: 4px 0 0; padding-top: 13px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.8; color: var(--ink-faint);
}
.legend__note svg, .legend__note .lucide { margin-top: 4px; }
.legend__note a { color: var(--gold); border-bottom: 1px solid var(--gold-line); }

/* ── 단계 안내 ───────────────────────────────────────────────────── */

.steps {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.step {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 15px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px;
}
.step__n {
  width: 21px; height: 21px; flex-shrink: 0; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
}
.step b { display: block; font-size: 13px; margin-bottom: 3px; }
.step p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.step a { color: var(--gold); border-bottom: 1px solid var(--gold-line); }

.tbl tr.is-todo td { background: #FFFCF4; }

/* ── 임시 비밀번호 · 비밀번호 규칙 ───────────────────────────────── */

.issued {
  border: 1px solid var(--gold); border-left-width: 3px; border-radius: 8px;
  background: var(--gold-wash); padding: 15px 18px; margin-bottom: 18px;
}
.issued__head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #7d5a2c; }
.issued__pw { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; }
.issued__pw code {
  font-family: ui-monospace, "D2Coding", Menlo, monospace;
  font-size: 20px; letter-spacing: 2px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--gold-line); border-radius: 6px;
  padding: 8px 14px; user-select: all;
}
.issued__note { margin: 0; font-size: 12.5px; line-height: 1.75; color: #7d5a2c; }

.pwrules { list-style: none; margin: 4px 0 18px; padding: 0; }
.pwrules li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-faint); padding: 2px 0;
}
.pwrules li span {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--line-strong);
}
.pwrules li.is-ok { color: #1E7A55; }
.pwrules li.is-ok span { background: #1E7A55; border-color: #1E7A55; }

/* 연결 방식 고르기 — 무엇을 고르는지가 한눈에 읽혀야 한다 */
.modebox {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
}
.modebox:hover { border-color: var(--gold); }
.modebox.is-on { border-color: var(--gold); background: var(--gold-wash); }
.modebox input { margin: 3px 0 0; }
.modebox b { display: block; font-size: 13px; margin-bottom: 3px; }
.modebox em {
  display: block; font-style: normal; font-size: 11.5px;
  color: var(--ink-soft); line-height: 1.7;
}

/* 메일 — 폴더 이동 · 서명 */
.movebar { display: flex; gap: 6px; align-items: center; }
.movebar .field { width: 150px; }
.replyfoot { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.sigopts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sigopts .check em { font-size: 11.5px; }
/* 보낸 메일에 붙는 서명. 본문과 눈으로 갈리게 옅은 선을 하나 둔다. */
.mailbody .sig, .bub__text .sig {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: 12.5px;
}

/* ── 메일: 3단 (폴더 │ 목록 │ 읽기창) ───────────────────────────── */

.mail3 { flex: 1; display: flex; min-height: 0; background: var(--parchment); }

/* 가운데 — 목록 */
.mlist {
  width: 380px; flex-shrink: 0;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-right: 1px solid var(--line);
}
.mlist__head {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line);
}
.mlist__title { font-size: 15px; font-weight: 650; }
.mlist__head .grow { flex: 1; }

.mlist__search {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 12px; padding: 6px 10px;
  background: var(--parchment); border: 1px solid transparent; border-radius: 7px;
}
.mlist__search:focus-within { border-color: var(--gold); background: var(--surface); }
.mlist__search svg { width: 14px; height: 14px; color: var(--ink-faint); flex-shrink: 0; }
.mlist__search input {
  flex: 1; border: 0; outline: 0; background: none;
  font: inherit; font-size: 12.5px; color: inherit; min-width: 0;
}
.mlist__rows { flex: 1; overflow-y: auto; padding-bottom: 12px; }

/* 목록 한 줄 — 아웃룩처럼 보낸사람/시각 · 제목 · 미리보기 */
.mrow {
  position: relative; display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 12px 9px 14px; margin: 0 8px 2px; border-radius: 6px;
  cursor: pointer; min-width: 0;
}
.mrow:hover { background: var(--parchment); }
.mrow.is-on { background: var(--gold-wash); }
/* 안 읽음 표시는 왼쪽 금색 선. 굵은 글씨와 함께 두 겹으로 알린다. */
.mrow__bar {
  position: absolute; left: 4px; top: 12px; bottom: 12px; width: 3px;
  border-radius: 2px; background: transparent;
}
.mrow.is-unread .mrow__bar { background: var(--gold); }

.mrow__avatar {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: #e7e9ee; color: var(--ink-soft);
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.mrow.is-unread .mrow__avatar { background: var(--gold); color: #fff; }

.mrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mrow__top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mrow__who {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mrow.is-unread .mrow__who { color: var(--ink); font-weight: 650; }
.mrow__when { font-size: 11px; color: var(--ink-faint); flex-shrink: 0; }

.mrow__subj {
  font-size: 13px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mrow.is-unread .mrow__subj { color: var(--ink); font-weight: 650; }

.mrow__prev {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--ink-faint); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mrow__prev svg { width: 12px; height: 12px; flex-shrink: 0; }

.mempty { padding: 40px 16px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.mpager { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 14px 0; }
.mpager .dim { font-size: 12px; }

/* 오른쪽 — 읽기창 */
.mread { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
.mread__none {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--ink-faint);
}
.mread__none svg { width: 34px; height: 34px; }
.mread__none p { margin: 0; font-size: 13px; }

.mread__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.mread__subject {
  flex: 1; min-width: 0; font-size: 16px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mread__tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mread__tools .field { width: 118px; font-size: 12px; }
.mread__body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }

.mattach { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.mattach__item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--parchment); font-size: 12.5px;
}
.mattach__item .grow { flex: 1; }
.mattach__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mattach__item svg { width: 14px; height: 14px; color: var(--ink-faint); }

.mreply { margin-top: 20px; }
.mreply .chatbox__input { min-height: 68px; }

@media (max-width: 1100px) {
  .mail3 { flex-direction: column; }
  .mlist { width: auto; border-right: 0; border-bottom: 1px solid var(--line); max-height: 44vh; }
}

/* 작성창 — 읽기창 자리에 그대로 뜬다 */
.mcompose__head { gap: 10px; }
.cfields { display: flex; flex-direction: column; }
.cfield {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line); padding: 9px 2px;
}
.cfield > span {
  width: 74px; flex-shrink: 0; font-size: 12.5px; color: var(--ink-soft);
}
.cfield input {
  flex: 1; border: 0; outline: 0; background: none;
  font: inherit; font-size: 13.5px; color: inherit; min-width: 0;
}
.cfield--subject { padding: 12px 2px; }
.cfield--subject input { font-size: 15px; font-weight: 600; }

.chatbox--mail { border: 0; margin-top: 6px; }
.chatbox--mail .chatbox__tools { border-bottom: 1px solid var(--line); padding: 7px 2px; }
.chatbox--mail .chatbox__row { padding: 0; }
.cbody { min-height: 320px; max-height: none; padding: 14px 2px; }
.cbody table { border-collapse: collapse; margin: .4em 0; }
.cbody td, .cbody th { border: 1px solid var(--line-strong); padding: 5px 8px; }

/* 서명 로고 */
.siglogo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  font-size: 12.5px;
}
.siglogo .grow { flex: 1; }
.siglogo__now { max-height: 44px; max-width: 170px; object-fit: contain; }
/* 편집기·미리보기 안의 로고가 화면을 밀지 않게 */
.chatbox__input img, .mailbody .sig img, .bub__text .sig img { max-width: 220px; height: auto; }
.chatbox__input table, .mailbody .sig table { border-collapse: collapse; }

/* ── 메일 코파일럿 ───────────────────────────────────────────────── */

/* 드래그하면 글 위로 떠오르는 창. 은은한 금빛으로 "AI 자리"라고 알린다. */
.aipop {
  position: fixed; z-index: 6500; width: 460px; max-width: 92vw;
  background: var(--surface);
  border: 1px solid var(--gold-line); border-radius: 12px;
  padding: 12px 12px 11px;
  box-shadow:
    0 0 0 1px rgba(192,143,82,.10),
    0 0 22px rgba(192,143,82,.18),
    0 14px 40px rgba(17,24,39,.20);
  animation: aipop-in .16s ease-out, aipop-glow 3.4s ease-in-out .2s infinite;
}
@keyframes aipop-in {
  from { opacity: 0; transform: translateY(5px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* 숨쉬듯 아주 옅게. 눈에 띄되 거슬리지 않는 폭으로 잡았다. */
@keyframes aipop-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(192,143,82,.10),
                         0 0 18px rgba(192,143,82,.14),
                         0 14px 40px rgba(17,24,39,.20); }
  50%      { box-shadow: 0 0 0 1px rgba(192,143,82,.18),
                         0 0 30px rgba(192,143,82,.30),
                         0 14px 40px rgba(17,24,39,.20); }
}

.aipop__tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.aipop__tabs .grow { flex: 1; }
.aitab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 9px; border-radius: 14px;
  border: 1px solid var(--gold); background: var(--gold-wash);
  font: inherit; font-size: 12.5px; font-weight: 600; color: #8a6430;
  cursor: default;
}
.aipop__spark { width: 14px; height: 14px; fill: var(--gold); }
.aipop__x { width: 24px; height: 24px; font-size: 13px; }

.aipop__presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.aichip {
  padding: 4px 11px; border-radius: 13px; font: inherit; font-size: 12px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-soft); cursor: pointer; transition: all .12s;
}
.aichip:hover {
  border-color: var(--gold); color: var(--gold); background: var(--gold-wash);
  box-shadow: 0 0 10px rgba(192,143,82,.22);
}

.aipop__row { display: flex; align-items: center; gap: 6px; }
.aipop__ask {
  flex: 1; padding: 7px 11px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--line-strong); border-radius: 7px; outline: 0;
  transition: border-color .12s, box-shadow .12s;
}
.aipop__ask:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192,143,82,.14); }

.aipop__out { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.aipop__result {
  max-height: 240px; overflow-y: auto; font-size: 13px; line-height: 1.65;
  background: var(--parchment); border-radius: 8px; padding: 11px 13px;
  animation: ai-fade .3s ease-out;
}
@keyframes ai-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }
.aipop__result p { margin: 0 0 .35em; }
.aipop__result p:last-child { margin: 0; }
.aipop__result ul, .aipop__result ol { margin: .3em 0; padding-left: 20px; }
.aipop__acts { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.aipop__acts .grow { flex: 1; }
.aipop__err {
  margin-top: 9px; padding: 8px 11px; border-radius: 7px;
  background: #fdf2f2; color: #a33a3a; font-size: 12px;
}

/* 고르는 순간 글에 옅은 금빛이 앉는다 — 어디를 고치는지가 먼저 보여야 한다. */
.ai-target {
  border-radius: 3px;
  background: rgba(192,143,82,.13);
  box-shadow: 0 0 0 1px rgba(192,143,82,.22);
}

/* 고치는 중 — 스캔 선이 지나간다. */
.ai-target.is-scanning {
  background: linear-gradient(
    100deg,
    rgba(192,143,82,.10) 0%,
    rgba(192,143,82,.10) 38%,
    rgba(216,168,96,.55) 50%,
    rgba(192,143,82,.10) 62%,
    rgba(192,143,82,.10) 100%);
  background-size: 260% 100%;
  animation: ai-scan 1.15s linear infinite;
}
@keyframes ai-scan {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

/* 바뀐 뒤 — 한 번 빛나고 사라진다. 어디가 달라졌는지 눈으로 확인하게. */
.ai-changed { border-radius: 3px; animation: ai-landed 1.4s ease-out forwards; }
@keyframes ai-landed {
  0%   { background: rgba(216,168,96,.42); box-shadow: 0 0 14px rgba(192,143,82,.42); }
  70%  { background: rgba(192,143,82,.14); box-shadow: 0 0 6px rgba(192,143,82,.14); }
  100% { background: transparent; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aipop, .aipop__result, .ai-target.is-scanning, .ai-changed { animation: none; }
  .ai-target.is-scanning { background: rgba(192,143,82,.22); }
}

.aiout {
  margin-top: 8px; padding: 12px 14px; border-radius: 8px;
  background: var(--parchment); font-size: 13px; line-height: 1.7;
  max-height: 300px; overflow-y: auto;
}
.cb--ai { color: var(--gold); font-size: 12px; gap: 4px; padding: 0 8px; }
.cb--ai:hover { background: var(--gold-wash); }

/* 읽기 화면의 코파일럿 패널 */
.mailcop {
  margin: 18px 0; border: 1px solid var(--gold-line); border-radius: 10px;
  background: var(--surface); overflow: hidden;
  box-shadow: 0 0 16px rgba(192,143,82,.12);
}
.mailcop__head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 10px 14px; background: var(--gold-wash);
  border-bottom: 1px solid var(--gold-line); font-size: 13px;
}
.mailcop__head .grow { flex: 1; }
.mailcop__head .dim { font-size: 11.5px; }
.mailcop__tabs { display: flex; gap: 2px; padding: 8px 12px 0; }
.mtab {
  padding: 6px 12px; border: 0; border-bottom: 2px solid transparent;
  background: none; font: inherit; font-size: 12.5px;
  color: var(--ink-faint); cursor: pointer;
}
.mtab:hover { color: var(--ink); }
.mtab.is-on { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }
.mailcop__ask { display: flex; gap: 6px; padding: 10px 14px 0; }
.mailcop__ask .field { flex: 1; }
.mailcop__body {
  padding: 14px; font-size: 13px; line-height: 1.7;
  max-height: 420px; overflow-y: auto;
}
.mailcop__body p { margin: 0 0 .4em; }
.mailcop__body ul, .mailcop__body ol { margin: .3em 0 .6em; padding-left: 22px; }
.mailcop__body ::selection { background: var(--gold-wash); }
.mailcop__acts {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--line); background: #FCFCFD;
}

/* ── 주소 추천 ───────────────────────────────────────────────────── */

.cfield { position: relative; }
.acbox {
  position: absolute; left: 74px; right: 0; top: 100%; z-index: 40;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(17,24,39,.16);
  overflow: hidden; max-height: 260px; overflow-y: auto;
}
.acitem {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 12px; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left;
}
.acitem:hover, .acitem.is-on { background: var(--gold-wash); }
.acitem__avatar {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: #e7e9ee; color: var(--ink-soft);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.acitem__col { display: flex; flex-direction: column; min-width: 0; }
.acitem__col > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acitem__name { font-size: 12.5px; font-weight: 600; }
.acitem__addr { font-size: 11.5px; color: var(--ink-faint); }

/* 표 도구 줄 — 커서가 표 안에 있을 때만 나타난다 */
.tbltools {
  background: var(--gold-wash);
  border-top: 1px solid var(--gold-line);
  animation: ai-fade .14s ease-out;
}
.tbltools__tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: #8a6430; padding: 0 4px;
}
.tbltools .cb { font-size: 11.5px; gap: 3px; padding: 0 7px; }
.tbltools .cb svg, .tbltools .cb .lucide { width: 12px; height: 12px; }
.tbltools .rb-sel { height: 24px; font-size: 11.5px; }

/* 편집기 안의 표 — 선이 꺼져 있어도 어디가 칸인지 보이게 옅은 안내선을 준다.
   이 선은 화면에만 있고 저장·발송본에는 들어가지 않는다. */
.chatbox__input table { border-collapse: collapse; }
.chatbox__input td, .chatbox__input th { min-width: 40px; }
.chatbox__input table:not([data-lines="1"]) td,
.chatbox__input table:not([data-lines="1"]) th {
  outline: 1px dashed rgba(192,143,82,.30); outline-offset: -1px;
}

/* 서명 편집기 — 그림을 끌어다 놓는 동안 */
.chatbox__input.is-over {
  outline: 2px dashed var(--gold); outline-offset: 3px;
  background: var(--gold-wash);
}
/* 넣은 그림은 누르면 크기를 바꿀 수 있다는 걸 알리는 정도로만 */
.chatbox__input img { cursor: pointer; border-radius: 2px; }
.chatbox__input img:hover { outline: 2px solid var(--gold); outline-offset: 1px; }

.ctxmenu button.is-danger { color: #C0392B; }
.ctxmenu button.is-danger:hover { background: #FDF1EF; color: #8C2E22; }
.team__name { cursor: context-menu; }
.team__name:hover { color: var(--gold); }

/* ── 제품 카드 ───────────────────────────────────────────────────── */

.prodgrid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.prod {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
  transition: border-color .14s, transform .14s, box-shadow .14s;
}
.prod:hover {
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(192,143,82,.18);
}
.prod__mark {
  width: 62px; height: 62px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 12px; background: var(--parchment); border: 1px solid var(--line);
}
.prod__mark img { max-width: 82%; max-height: 82%; object-fit: contain; }
/* 로고 파일이 없을 때. 이름 첫 글자들을 세워 둔다. */
.prod__word {
  font-size: 15px; font-weight: 700; color: var(--gold);
  letter-spacing: -.02em; text-align: center; line-height: 1.2; padding: 0 4px;
}
.prod__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.prod__top { display: flex; align-items: center; gap: 7px; }
.prod__top b { font-size: 15px; }
.prod__desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; }
.prod__go {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 12px; color: var(--ink-faint);
}
.prod:hover .prod__go { color: var(--gold); }

/* ── 확인창 ──────────────────────────────────────────────────────── */

.askdlg { max-width: 420px; width: 92vw; border-radius: 12px; }
.askdlg__body { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px 16px; }
.askdlg__icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-wash); color: var(--gold);
}
.askdlg.is-danger .askdlg__icon { background: #FDF1EF; color: #C0392B; }
.askdlg__icon svg, .askdlg__icon .lucide { width: 19px; height: 19px; }
.askdlg__text { min-width: 0; }
.askdlg__title { display: block; font-size: 15px; font-weight: 650; line-height: 1.5; }
.askdlg__msg {
  margin: 7px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--ink-soft);
  /* 본문에 \n 을 그대로 살린다 — 두세 줄짜리 안내가 대부분이다. */
  white-space: pre-line;
}
.askdlg .dlg__foot { padding: 4px 24px 20px; }
.askdlg::backdrop { background: rgba(17,24,39,.42); backdrop-filter: blur(1.5px); }
.btn--danger { background: #C0392B; color: #fff; }
.btn--danger:hover { background: #a33124; }

/* ── 대화: 사람 찾기 · 거두기 ────────────────────────────────────── */

.peoplefind { padding: 0 12px 4px; }
.pplhits {
  margin-top: 6px; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: var(--surface);
}
.pplhit {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 11px; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left;
}
.pplhit:hover { background: var(--gold-wash); }
.pplhit__col { display: flex; flex-direction: column; min-width: 0; }
.pplhit__col > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pplhit__name { font-size: 12.5px; font-weight: 600; }
.pplhit__mail { font-size: 11px; color: var(--ink-faint); }

/* 거두기 단추 — 말풍선 옆에 옅게 있다가 올리면 또렷해진다 */
.bub__unsend {
  width: 22px; height: 22px; flex-shrink: 0; padding: 0;
  border: 0; border-radius: 50%; background: none;
  color: var(--ink-faint); cursor: pointer; opacity: 0;
  transition: opacity .12s, color .12s;
}
.bub:hover .bub__unsend { opacity: .6; }
.bub__unsend:hover { opacity: 1 !important; color: #C0392B; }
.bub__unsend svg, .bub__unsend .lucide { width: 13px; height: 13px; }

.bub__body--gone {
  background: rgba(17, 24, 39, .04); border: 0;
  color: var(--ink-faint); font-size: 12.5px; font-style: italic;
}

/* 계정 정보 창 */
.whodlg { max-width: 380px; width: 92vw; }
.who { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px 14px; }
.who__avatar {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 18px; font-weight: 600;
}
.who__main { min-width: 0; }
.who__name { display: block; font-size: 15px; }
.who__tags { display: flex; gap: 5px; margin-top: 7px; }
.who__rows { padding: 0 24px 4px; display: flex; flex-direction: column; gap: 7px; }
.who__rows > div { display: flex; justify-content: space-between; font-size: 12.5px; }
.who__rows span { color: var(--ink-faint); }
.whodlg .dlg__foot { padding: 14px 24px 20px; }

/* ── 알림 (flash) ────────────────────────────────────────────────── */

.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px; max-width: 380px;
}
.toast {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px; border-radius: 10px;
  background: var(--ink); color: #fff;
  font-size: 12.5px; line-height: 1.55;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  opacity: 1; transition: opacity .25s;
  animation: toast-in .18s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.toast svg, .toast .lucide { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.toast span { flex: 1; white-space: pre-line; }
.toast button {
  border: 0; background: none; color: inherit; opacity: .55;
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.toast button:hover { opacity: 1; }
.toast--warn { background: #8A2B22; }
.toast--error { background: #8A2B22; }

/* ── AI 연결 상태 · 비밀값 경고 ──────────────────────────────────── */

.aicard {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); margin-bottom: 18px; overflow: hidden;
}
.aicard__head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.aicard__head svg, .aicard__head .lucide { width: 15px; height: 15px; color: var(--gold-deep); }
.aicard__head form { margin: 0; }
.aicard__rows { padding: 4px 16px; }
.airow {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.airow:last-child { border-bottom: 0; }
.airow__main { flex: 1; min-width: 0; }
.airow__main b { font-size: 13px; }
.airow__main code {
  margin-left: 7px; font-size: 11.5px; padding: 1px 6px;
  border-radius: 5px; background: var(--wash); color: var(--ink-soft);
}
.airow__main p { margin: 3px 0 0; font-size: 12px; }
.airow__state { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

/* 연결 표시등 */
.dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  margin-top: 5px; background: var(--line-strong);
}
.dot.is-on { background: #1E7A55; box-shadow: 0 0 0 3px rgba(30, 122, 85, .14); }

.aicard__note {
  display: flex; gap: 8px; margin: 0;
  padding: 12px 16px; background: var(--wash);
  border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.75; color: var(--ink-soft);
}
.aicard__note svg, .aicard__note .lucide {
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px;
}

/* 비밀값이 DB 에 남아 있을 때의 경고 */
.warnline {
  display: flex; gap: 7px; margin: 7px 0 0;
  padding: 9px 11px; border-radius: 8px;
  background: #FDF3F2; border: 1px solid #F0D3CF;
  font-size: 12px; line-height: 1.7; color: #8A2B22;
}
.warnline svg, .warnline .lucide {
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px;
}
.tag--warn { background: #FDF3F2; color: #8A2B22; }

/* ── 편집기: 표 격자 · 우클릭 메뉴 ───────────────────────────────── */

.gridpop {
  position: fixed; z-index: 220;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}
.gridpop__label {
  font-size: 12px; color: var(--ink-soft);
  text-align: center; margin-bottom: 8px; min-height: 16px;
}
.gridpop__grid {
  display: grid; grid-template-columns: repeat(10, 18px);
  grid-auto-rows: 18px; gap: 2px;
}
.gridpop__grid i {
  border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--surface); cursor: pointer;
}
.gridpop__grid i.is-on {
  background: var(--gold); border-color: var(--gold-deep);
}
.gridpop__more {
  display: block; width: 100%; margin-top: 9px; padding: 6px;
  border: 0; border-top: 1px solid var(--line); background: none;
  font: inherit; font-size: 12px; color: var(--ink-soft); cursor: pointer;
}
.gridpop__more:hover { color: var(--gold-deep); }

.edmenu {
  position: fixed; z-index: 230; min-width: 216px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .17);
}
.edmenu__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  position: relative; color: var(--ink);
}
.edmenu__item:hover:not(:disabled) { background: var(--gold-wash); }
.edmenu__item:disabled { opacity: .45; cursor: default; }
.edmenu__item.is-danger { color: #C0392B; }
.edmenu__item.is-danger:hover:not(:disabled) { background: #FDF3F2; }
.edmenu__item svg, .edmenu__item .lucide { width: 14px; height: 14px; flex-shrink: 0; }
.edmenu__gap { width: 14px; flex-shrink: 0; }
.edmenu__label { flex: 1; white-space: nowrap; }
.edmenu__hint { font-size: 11px; color: var(--ink-faint); }
.edmenu__more { font-size: 10px; color: var(--ink-faint); }
.edmenu__sep { height: 1px; margin: 4px 6px; background: var(--line); }

/* 하위 메뉴 — 부모에 올리면 옆으로 펼쳐진다 */
.edmenu--sub { position: absolute; left: 100%; top: -5px; display: none; }
.edmenu__item:hover > .edmenu--sub { display: block; }

/* 편집기 안의 표 */
.dtbl { border-collapse: collapse; width: 100%; margin: 10px 0; }
.dtbl td, .dtbl th {
  border: 1px solid #B9BEC7; padding: 6px 9px;
  vertical-align: top; min-width: 28px;
}
.dtbl th { background: #F2F4F7; font-weight: 600; text-align: left; }
.dtbl--none td, .dtbl--none th { border-color: transparent; }
.dtbl--outer td, .dtbl--outer th { border-color: transparent; }
.dtbl--outer { outline: 1px solid #B9BEC7; }

/* ── 문서: 머리글 · 바닥글 ───────────────────────────────────────── */

.doc-sheet { display: flex; flex-direction: column; align-items: center; }

.doc-hf {
  position: relative; width: 210mm; box-sizing: border-box;
  padding: 10px 25mm; background: #fff;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.doc-hf--top {
  border-top: 1px solid var(--line); border-radius: 4px 4px 0 0;
  padding-top: 14px; box-shadow: 0 -1px 0 rgba(0,0,0,.02);
}
.doc-hf--bottom {
  border-bottom: 1px solid var(--line); border-radius: 0 0 4px 4px;
  padding-bottom: 14px;
}
.doc-hf__tag {
  position: absolute; top: 3px; left: 10px;
  font-size: 10px; letter-spacing: .04em; color: var(--ink-faint);
  text-transform: none; user-select: none;
}
.doc-hf__in {
  min-height: 20px; font-size: 10pt; color: var(--ink-soft); outline: none;
}
.doc-hf__in:empty::before {
  content: attr(data-ph); color: var(--ink-faint); pointer-events: none;
}
/* 머리글·바닥글을 켜면 본문 종이의 위아래 모서리를 이어 붙인다. */
.doc-hf--top:not([hidden]) + .doc-page { border-top: 1px dashed var(--line); border-radius: 0; }

/* 페이지 번호 자리표. 화면에서는 1 이지만 워드에서는 진짜 쪽 번호가 된다 —
   그래서 「진짜 글자가 아니다」라는 표시를 옅게 남긴다. */
[data-field] {
  background: var(--gold-wash); border-bottom: 1px dotted var(--gold-deep);
  padding: 0 2px; border-radius: 2px;
}
[data-field]::after {
  content: '쪽'; font-size: 8px; color: var(--gold-deep);
  vertical-align: super; margin-left: 1px;
}
[data-field="pages"]::after { content: '총'; }

@media print {
  /* 인쇄할 때는 자리표 표시를 지운다 — 종이에 나갈 것은 숫자뿐이다. */
  [data-field] { background: none; border: 0; }
  [data-field]::after { content: none; }
  .doc-hf__tag { display: none; }
  .doc-hf { border: 0; padding-left: 0; padding-right: 0; }
}

/* ── 우클릭 메뉴 (온 시스템 공용) ────────────────────────────────── */

.ctxm {
  position: fixed; z-index: 230; min-width: 200px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 14px 34px rgba(16, 24, 40, .16);
  animation: ctxm-in .1s ease-out;
}
@keyframes ctxm-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}
.ctxm__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 7px; background: none;
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  color: var(--ink); position: relative;
}
.ctxm__item:hover:not(:disabled) { background: rgba(17, 24, 39, .055); }
.ctxm__item:disabled { opacity: .45; cursor: default; }
.ctxm__item.is-danger { color: #C0392B; }
.ctxm__item.is-danger:hover:not(:disabled) { background: #FDF3F2; }
.ctxm__item svg, .ctxm__item .lucide { width: 14px; height: 14px; flex-shrink: 0; }
.ctxm__gap { width: 14px; flex-shrink: 0; }
.ctxm__label { flex: 1; white-space: nowrap; }
.ctxm__hint, .ctxm__key { font-size: 11px; color: var(--ink-faint); }
.ctxm__more { font-size: 10px; color: var(--ink-faint); }
.ctxm__sep { height: 1px; margin: 4px 6px; background: var(--line); }
.ctxm--sub { position: absolute; left: 100%; top: -5px; display: none; }
.ctxm__item:hover > .ctxm--sub { display: block; }

/* 우클릭할 수 있는 줄. 눌러 보기 전에는 알 수 없으므로 살짝 알린다. */
[data-ctx] { cursor: default; }
tr[data-ctx]:hover { background: rgba(17, 24, 39, .022); }

/* ── 어시스턴트: 다시 짠 화면 ─────────────────────────────────────
 *
 * 참고한 화면들은 파랑·빨강을 썼지만 우리 색은 금색이다. 다만 금색으로
 * 넓은 면을 칠하지는 않는다 — 대화 말풍선에서 이미 배운 것이다.
 * 금색은 「지금 여기」를 가리키는 데만 쓰고, 면은 중립으로 둔다.
 */

.cop__dot {
  position: absolute; top: 5px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.cop__head .btn--icon { position: relative; }

.cop__note {
  display: flex; gap: 8px; margin: 0 0 12px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--gold-wash); color: #7d5a2c;
  font-size: 12px; line-height: 1.7;
}
.cop__note svg, .cop__note .lucide { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; }

/* 빈 화면 */
.cop-welcome { padding: 44px 20px 20px; text-align: center; }
.cop-welcome .cop-mark--big { width: 40px; height: 40px; margin-bottom: 14px; }
.cop-welcome .cop-ridge { stroke: var(--gold); stroke-width: 3; }
.cop-welcome b { display: block; font-size: 16px; margin-bottom: 6px; }
.cop-welcome > p { margin: 0 0 20px; font-size: 12.5px; color: var(--ink-soft); }
.cop-welcome__tip {
  margin: 18px 0 0 !important; font-size: 11.5px; color: var(--ink-faint); line-height: 1.7;
}
.cop-sugg { display: flex; flex-direction: column; gap: 7px; }
.cop-sugg__chip {
  padding: 10px 13px; border: 0; border-radius: 11px;
  background: rgba(17, 24, 39, .045); color: var(--ink);
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  transition: background .12s, transform .12s;
}
.cop-sugg__chip:hover {
  background: var(--gold-wash); color: #7d5a2c; transform: translateY(-1px);
}

/* 생각하는 중 — 고리가 돌고 글자가 흐른다 */
.cop-live {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(17, 24, 39, .035);
}
.cop-loop {
  width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--gold-line); border-top-color: var(--gold);
  animation: cop-spin .7s linear infinite;
}
@keyframes cop-spin { to { transform: rotate(360deg); } }
.cop-live__text {
  font-size: 12.5px; font-weight: 500;
  background: linear-gradient(90deg, var(--ink-faint) 25%, var(--gold) 50%, var(--ink-faint) 75%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: cop-shimmer 1.6s linear infinite;
}
@keyframes cop-shimmer { to { background-position: -220% 0; } }

/* 꽂아 둔 메모 */
.pin {
  padding: 11px 13px; margin-bottom: 9px; border-radius: 12px;
  background: rgba(17, 24, 39, .035); border-left: 2px solid var(--gold);
}
.pin.is-off { opacity: .5; border-left-color: var(--line-strong); }
.pin__top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.pin__top b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin__top svg, .pin__top .lucide { width: 13px; height: 13px; color: var(--gold); flex-shrink: 0; }
.pin__text { font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); white-space: pre-wrap; }
.pin__from { margin-top: 7px; font-size: 11px; color: var(--ink-faint); }

/* 대화 기록 — 날짜로 묶는다 */
.cop-hist__group {
  padding: 14px 2px 6px; font-size: 11px; font-weight: 600;
  color: var(--ink-faint); letter-spacing: .03em;
}
.cop-hist {
  display: flex; align-items: center; border-radius: 10px;
  transition: background .12s;
}
.cop-hist:hover { background: rgba(17, 24, 39, .045); }
.cop-hist__open {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  padding: 9px 11px; border: 0; background: none; font: inherit;
  font-size: 12.5px; text-align: left; cursor: pointer; color: var(--ink);
}
.cop-hist__open svg, .cop-hist__open .lucide {
  width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-faint);
}
.cop-hist__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 지우기 단추는 올렸을 때만. 늘 보이면 목록이 단추밭이 된다. */
.cop-hist__del { opacity: 0; margin-right: 6px; }
.cop-hist:hover .cop-hist__del { opacity: .6; }
.cop-hist__del:hover { opacity: 1 !important; color: #C0392B; }

.cop-empty {
  padding: 50px 20px; text-align: center; color: var(--ink-faint);
}
.cop-empty svg, .cop-empty .lucide { width: 22px; height: 22px; margin-bottom: 10px; }
.cop-empty b { display: block; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px; }
.cop-empty p { margin: 0; font-size: 12px; line-height: 1.8; }

/* 파일 카드 — 이름·크기·내려받기가 한눈에 */
.filecard {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: 12px; text-decoration: none;
  background: rgba(255, 255, 255, .8); color: var(--ink);
  transition: background .12s;
}
.filecard:hover { background: #fff; }
.filecard__icon {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px;
  background: var(--gold-wash); color: var(--gold);
  display: grid; place-items: center;
}
.filecard__icon svg, .filecard__icon .lucide { width: 15px; height: 15px; }
.filecard__main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.filecard__name {
  font-size: 12.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filecard__size { font-size: 11px; color: var(--ink-faint); }
.filecard__go {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 6px 10px; border-radius: 8px;
  background: var(--gold); color: #fff; font-size: 11.5px; font-weight: 500;
}
.filecard__go svg, .filecard__go .lucide { width: 12px; height: 12px; }

/* 보내기 단추 — 금색 원 */
.cop__send {
  width: 30px; height: 30px; flex-shrink: 0; padding: 0;
  border: 0; border-radius: 50%; background: var(--gold); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background .12s;
}
.cop__send:hover { background: var(--gold-soft); }
.cop__send svg, .cop__send .lucide { width: 14px; height: 14px; }

/* 내 질문 / 답변 — 말풍선과 같은 문법으로 */
.cop-turn--me .cop-q {
  background: #e3e8f0; border: 0; border-radius: 14px;
  border-top-right-radius: 5px; padding: 9px 13px;
}

/* ── 어시스턴트 단추: 끌어 옮기기 · 원본 마크 ────────────────────── */

.cop-fab { touch-action: none; cursor: grab; }
.cop-fab.is-dragging {
  cursor: grabbing; transition: none;
  transform: scale(1.06); box-shadow: 0 14px 34px rgba(16, 24, 40, .26);
}
/* 끌 때는 안쪽 그림이 마우스를 가로채지 않게 */
.cop-fab.is-dragging * { pointer-events: none; }

/* 움직이지 않는 자리에 쓰는 원본 마크 */
.cop-mark--img { width: 15px; height: 15px; object-fit: contain; flex-shrink: 0; }

/* ── 조슈아: 대화 목록의 어시스턴트 · 넓은 화면 ──────────────────── */

.chan--joshua { margin: 0 8px 4px; }
.ava--joshua {
  background: #fff; padding: 3px;
  display: grid; place-items: center; overflow: hidden;
}
.ava--joshua img { width: 100%; height: 100%; object-fit: contain; }
.chan__tag {
  margin-left: auto; font-size: 10.5px; color: var(--ink-faint);
  flex-shrink: 0;
}
.main__head .ava--joshua { width: 26px; height: 26px; margin-right: 8px; }

/* 넓은 화면 — 옆 패널과 같은 조각을 본문 자리에 편다. */
.cop--full {
  position: static; width: auto; height: auto; flex: 1; min-height: 0;
  border-left: 0; box-shadow: none; background: var(--surface);
  display: flex; flex-direction: column;
}
/* 넓은 자리에서는 머리글의 닫기 단추가 뜻이 없다. */
.cop--full #copClose { display: none; }
.cop--full .cop__body { padding: 20px 26px; }
.cop--full .cop-welcome { padding-top: 70px; }
.cop--full .cop-sugg {
  flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.cop--full .cop-sugg__chip { flex: 0 1 auto; max-width: 260px; }
.cop--full .cop-text, .cop--full .cop-q { max-width: 760px; }
.cop--full .cop__form { padding: 14px 26px 18px; }
.cop--full .cop__form #copQ { font-size: 14px; padding: 12px 14px; }

/* ── AI 가 고친 자리 (문서·비용·메일 공용) ───────────────────────── */

/* 훑는 중 — 빛줄기가 위에서 아래로 지나간다 */
.aifx-scan { position: relative; }
.aifx-scan::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; z-index: 3;
  background: linear-gradient(180deg,
    transparent 0%, rgba(192,143,82,.02) 40%,
    rgba(192,143,82,.26) 50%, rgba(192,143,82,.02) 60%, transparent 100%);
  background-size: 100% 260%;
  animation: aifx-sweep .9s ease-in-out;
}
@keyframes aifx-sweep {
  from { background-position: 0 -160%; }
  to   { background-position: 0 160%; }
}

/* 바뀐 자리 — 금색으로 잠깐 빛나고 가라앉는다 */
.aifx-glow {
  animation: aifx-pulse 2.4s ease-out;
  border-radius: 6px;
}
@keyframes aifx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(192,143,82,.55), inset 0 0 0 9999px rgba(192,143,82,.16); }
  35%  { box-shadow: 0 0 0 4px rgba(192,143,82,.18), inset 0 0 0 9999px rgba(192,143,82,.10); }
  100% { box-shadow: 0 0 0 0 rgba(192,143,82,0),   inset 0 0 0 9999px rgba(192,143,82,0); }
}
/* 입력칸은 테두리로 — 안쪽을 칠하면 글자가 안 읽힌다 */
input.aifx-glow, textarea.aifx-glow, select.aifx-glow {
  animation: aifx-field 2.4s ease-out;
}
@keyframes aifx-field {
  0%   { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192,143,82,.28); }
  100% { border-color: var(--line); box-shadow: 0 0 0 0 rgba(192,143,82,0); }
}

/* 「조슈아가 바꿨습니다」 알림 */
.aifx-note {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 240; display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 12.5px;
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  opacity: 1; transition: opacity .26s;
  animation: aifx-rise .2s ease-out;
}
@keyframes aifx-rise {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.aifx-note svg, .aifx-note .lucide { width: 14px; height: 14px; color: var(--gold-soft); }
.aifx-note__undo {
  border: 0; background: rgba(255,255,255,.16); color: #fff;
  padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 11.5px;
  cursor: pointer;
}
.aifx-note__undo:hover { background: rgba(255,255,255,.28); }

@media (prefers-reduced-motion: reduce) {
  .aifx-scan::after, .aifx-glow, .aifx-note { animation: none; }
  .aifx-glow { outline: 2px solid var(--gold); }
}

/* ── 조슈아의 답: 표 · 코드 · 그림 ───────────────────────────────── */

.cop-text table {
  border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 12.5px;
}
.cop-text th, .cop-text td {
  border-bottom: 1px solid var(--line); padding: 7px 9px; text-align: left;
}
.cop-text th { background: rgba(17,24,39,.04); font-weight: 600; }
.cop-text tr:last-child td { border-bottom: 0; }
/* 금액 칸은 오른쪽으로 — 자릿수가 눈으로 맞아야 읽힌다 */
.cop-text td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

.cop-text pre {
  margin: 10px 0; padding: 11px 13px; border-radius: 10px;
  background: #1b1f27; color: #e6e8ec; overflow-x: auto;
  font-family: ui-monospace, "D2Coding", Menlo, monospace; font-size: 12px;
  line-height: 1.6;
}
.cop-text pre code { background: none; padding: 0; color: inherit; }
.cop-text code {
  background: rgba(17,24,39,.07); border-radius: 4px; padding: 1px 5px;
  font-family: ui-monospace, "D2Coding", Menlo, monospace; font-size: 12px;
}
.cop-text h1, .cop-text h2, .cop-text h3 { font-size: 14px; margin: 14px 0 6px; }
.cop-text ul, .cop-text ol { margin: 6px 0; padding-left: 20px; }
.cop-text li { margin: 3px 0; }
.cop-text blockquote {
  margin: 8px 0; padding: 2px 0 2px 10px;
  border-left: 2px solid var(--gold-line); color: var(--ink-soft);
}

/* 그림(SVG) — 흰 종이 위에 얹는다 */
.ai-figure {
  margin: 12px 0; padding: 14px; border-radius: 12px;
  background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.08);
  overflow-x: auto; text-align: center;
}
.ai-figure svg { max-width: 100%; height: auto; }

/* ── 레일 아래 내 카드 ───────────────────────────────────────────── */

.mecard {
  position: fixed; left: 76px; bottom: 14px; z-index: 210; width: 250px;
  background: var(--surface); border-radius: 14px; padding: 14px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .22);
  animation: mecard-in .12s ease-out;
}
@keyframes mecard-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.mecard__top { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 13px; }
.mecard__ava {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 600;
}
.mecard__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mecard__who b { font-size: 13.5px; }
.mecard__who span { font-size: 11.5px; color: var(--ink-faint); }
.mecard__who .tag { align-self: flex-start; margin-top: 2px; }

.mecard__form { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.mecard__form label { font-size: 11px; color: var(--ink-faint); }
.mecard__form .field { font-size: 12.5px; padding: 7px 9px; }
.mecard__form .btn { align-self: flex-start; margin-top: 3px; }

.mecard__links {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 11px; border-top: 1px solid var(--line);
}
.mecard__links a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px; border-radius: 8px;
  font-size: 12.5px; color: var(--ink); text-decoration: none;
}
.mecard__links a:hover { background: rgba(17, 24, 39, .05); }
.mecard__links svg, .mecard__links .lucide { width: 14px; height: 14px; color: var(--ink-faint); }

.mecard__out { padding-top: 9px; margin-top: 9px; border-top: 1px solid var(--line); }
.mecard__out .btn { width: 100%; justify-content: center; color: #C0392B; }
.mecard__out .btn:hover { background: #FDF3F2; }