:root {
  --green: #217346;
  --green-dark: #185c37;
  --grid-line: #e1e1e1;
  --header-bg: #f3f2f1;
  --header-text: #444;
  --ribbon-bg: #f8f8f8;
  --border: #d4d4d4;
  --select: #217346;
  --font: "Malgun Gothic", "맑은 고딕", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #fff;
  color: #000;
  font: 13px var(--font);
}

body { display: flex; flex-direction: column; overflow: hidden; }

/* ── 제목 표시줄 ── */
.titlebar {
  height: 40px;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  flex: none;
}
.titlebar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app-icon {
  width: 18px; height: 18px; border-radius: 3px; background: #fff;
  background-image:
    linear-gradient(var(--green), var(--green)),
    linear-gradient(var(--green), var(--green));
  background-size: 2px 100%, 100% 2px;
  background-position: center, center;
  background-repeat: no-repeat;
}
.doc-name { font-weight: 600; white-space: nowrap; }
.doc-state { opacity: .8; white-space: nowrap; }
.search {
  background: rgba(255,255,255,.18);
  border-radius: 4px;
  padding: 4px 12px;
  width: min(360px, 30vw);
  color: rgba(255,255,255,.85);
}
.avatar {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-dark); border: 1px solid rgba(255,255,255,.5);
  font-size: 12px;
}

/* ── 리본 ── */
.ribbon-tabs {
  display: flex; gap: 2px; padding: 0 8px;
  background: #fff; border-bottom: 1px solid var(--border);
  flex: none; overflow-x: auto;
}
.ribbon-tabs button {
  border: 0; background: none; font: inherit; padding: 8px 10px 6px;
  cursor: default; white-space: nowrap; color: #333;
  border-bottom: 3px solid transparent;
}
.ribbon-tabs button:hover { background: #f0f0f0; }
.ribbon-tabs .active { color: var(--green); font-weight: 600; border-bottom-color: var(--green); }
#file-tab { cursor: pointer; }

.ribbon {
  display: flex; gap: 0; padding: 6px 8px 2px;
  background: var(--ribbon-bg); border-bottom: 1px solid var(--border);
  flex: none; overflow: hidden; height: 84px;
}
.group {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0 10px; border-right: 1px solid #e3e3e3; gap: 4px;
}
.group .row { display: flex; gap: 3px; }
.tool {
  min-width: 24px; height: 24px; padding: 0 6px;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 2px; color: #333;
  white-space: nowrap;
}
.tool:hover { background: #e6e6e6; border-color: #ccc; }
.tool.wide { border-color: #ccc; background: #fff; justify-content: start; }
.tool.big { height: 52px; padding: 0 10px; }
.group .label { font-size: 11px; color: #666; text-align: center; white-space: nowrap; }

/* ── 수식 입력줄 (= 메시지 입력창) ── */
.formula-bar {
  display: flex; align-items: stretch; min-height: 28px;
  border-bottom: 1px solid var(--border); flex: none;
}
.name-box {
  width: 90px; height: 28px; padding: 0 6px; display: flex; align-items: center;
  border-right: 1px solid var(--border);
}
.fx {
  width: 36px; height: 28px; display: grid; place-items: center;
  font-style: italic; color: #666; border-right: 1px solid var(--border);
}
.formula-input {
  flex: 1; border: 0; outline: 0; padding: 5px 8px; font: inherit; min-width: 0;
  line-height: 18px; height: 28px; max-height: 92px; resize: none; overflow-y: auto;
}

/* ── 시트 ── */
.grid-wrap { flex: 1; overflow: auto; background: #fff; }
.grid {
  border-collapse: separate; border-spacing: 0;
  table-layout: fixed; width: max-content; min-width: 100%;
}
.grid th, .grid td {
  height: 22px; padding: 0 4px;
  border-right: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 80px; max-width: 80px;
}
.grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--header-bg); color: var(--header-text);
  font-weight: normal; text-align: center;
  border-color: #d0d0d0;
}
.grid th.corner { left: 0; z-index: 3; width: 44px; max-width: 44px; }
.grid tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--header-bg); color: var(--header-text);
  font-weight: normal; text-align: center;
  width: 44px; max-width: 44px; border-color: #d0d0d0;
}
.grid .col-a, .grid td:nth-child(2) { width: 90px; max-width: 90px; }
.grid .col-b, .grid td:nth-child(3) { width: 90px; max-width: 90px; }
.grid .col-c, .grid td:nth-child(4) {
  width: 560px; max-width: 560px;
  white-space: pre-wrap; overflow-wrap: anywhere; text-overflow: clip;
}
.grid tbody th, .grid tbody td { vertical-align: top; line-height: 21px; }
.grid tr.title td { font-weight: 600; background: #e2efda; }
.grid tr.date td:nth-child(2) { color: #666; font-weight: 600; }
.grid tr.mine td:nth-child(3) { color: var(--green); }
.grid td.selected { outline: 2px solid var(--select); outline-offset: -2px; }

/* ── 하단 ── */
footer { flex: none; }
.sheet-tabs {
  display: flex; align-items: center; height: 30px;
  background: var(--header-bg); border-top: 1px solid var(--border);
  padding-left: 8px; gap: 2px;
}
.sheet-tabs .nav { color: #999; padding: 0 10px; letter-spacing: 6px; }
.sheet { padding: 5px 14px; color: #333; }
.sheet.active {
  background: #fff; color: var(--green); font-weight: 600;
  border-bottom: 3px solid var(--green);
}
.sheet.add { color: #666; }
.statusbar {
  display: flex; justify-content: space-between; align-items: center;
  height: 24px; padding: 0 12px;
  background: var(--header-bg); border-top: 1px solid #e3e3e3;
  font-size: 12px; color: #444;
}
.presence { cursor: default; }
#status.unread { cursor: pointer; color: var(--green); font-weight: 600; }

/* ── 로그인 대화상자 ── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(255,255,255,.4);
  display: grid; place-items: center; z-index: 10; padding: 16px;
}
.modal-backdrop[hidden] { display: none; }
.dialog {
  width: min(320px, 100%); background: #fff;
  border: 1px solid #bbb; box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.dialog-title { padding: 10px 14px; font-weight: 600; border-bottom: 1px solid #eee; }
.dialog-body { padding: 14px; display: grid; gap: 10px; }
.dialog-body label { display: grid; gap: 4px; }
.dialog-body input {
  font: inherit; padding: 4px 6px; border: 1px solid #aaa; border-radius: 2px;
}
.dialog-body input:focus { outline: 1px solid var(--green); border-color: var(--green); }
.error { color: #c00; min-height: 1em; font-size: 12px; }
.dialog-buttons { padding: 0 14px 14px; display: flex; justify-content: flex-end; }
.dialog-buttons button {
  font: inherit; padding: 4px 20px; border: 1px solid #aaa; background: #f3f3f3; cursor: pointer;
}
.dialog-buttons .primary { border-color: var(--green); }

@media (max-width: 640px) {
  .search, .ribbon { display: none; }
  .grid .col-c, .grid td:nth-child(4) { width: 240px; max-width: 240px; }
}