/* stonedesk 기능 목업(자료실·검토함·AI·계획·가입) — mx- 접두
   공문서 라이트 톤 — .ms-body(messenger.css)의 변수·프레임을 공유한다 */

/* ── 플래시 · 실제 폼 입력 (구현 화면용) ──── */

.ms-flash {
  padding: 9px 16px;
  background: #171714;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}

.ms-flash.is-alert { background: #C2401F; }

.mx-form input[type="text"], .mx-form input[type="email"], .mx-form input[type="tel"],
.mx-form input[type="password"], .mx-form select, .mx-form textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  background: #fff;
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
}

.mx-form input:focus, .mx-form select:focus, .mx-form textarea:focus {
  outline: none;
  border-color: var(--text);
}

.mx-form input[type="file"] { font-size: 12.5px; color: var(--mid); }

.mx-auth {
  /* .ms-body가 flex 컨테이너라 margin:auto만 주면 shrink-to-fit으로 쪼그라든다 — width 명시 필수 */
  width: calc(100% - 32px);
  max-width: 400px;
  margin: 8dvh auto 0;
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.mx-auth.is-wide { max-width: 560px; }

.mx-auth .ms-wordmark { text-align: center; font-size: 22px; margin-bottom: 4px; }
.mx-auth-sub { text-align: center; font-size: 12.5px; color: var(--dim); margin: 0 0 20px; }

/* ── 앱 내비 사이드바 ───────────────────── */

.mx-nav { padding: 4px 0; }

.mx-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  color: var(--mid);
  text-decoration: none;
  font-size: 13.5px;
}

.mx-nav-item:hover { background: rgba(23, 23, 20, 0.04); color: var(--text); }
.mx-nav-item.is-active { background: rgba(194, 64, 31, 0.08); color: var(--text); box-shadow: inset 2.5px 0 0 var(--accent); }
.mx-nav-item > i:first-child { width: 18px; text-align: center; }
.mx-nav-item span { flex: 1; }
.mx-nav-item.is-sub { padding-left: 41px; font-size: 13px; }

/* ── 메인 콘텐츠 프레임 ─────────────────── */

.mx-main { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px 40px; background: var(--bg); }

.mx-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }

.mx-head h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mx-head .mx-head-sub { font-size: 12.5px; color: var(--dim); }
.mx-head-spacer { flex: 1; }

.mx-desc { margin: 4px 0 16px; font-size: 12.5px; color: var(--dim); }

.mx-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 3px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.mx-btn:hover { border-color: var(--text); }
.mx-btn.is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.mx-btn.is-primary:hover { background: #A83518; }
.mx-btn.is-danger { color: var(--accent); border-color: rgba(194, 64, 31, 0.4); }

/* 필터 칩 */

.mx-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }

.mx-fchip {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mid);
  cursor: pointer;
  text-decoration: none;
  background: #fff;
}

.mx-fchip:hover { border-color: var(--text); color: var(--text); }
.mx-fchip.is-on { background: #171714; border-color: #171714; color: #fff; }

/* ── 문서 탭 (과업 상세 등) ──────────────── */

.mx-tabs { display: flex; gap: 2px; border-bottom: 1.5px solid var(--text); margin: 16px 0; }

.mx-tabs a {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dim);
  text-decoration: none;
  border: 1.5px solid transparent;
  border-bottom: 0;
}

.mx-tabs a:hover { color: var(--text); }

.mx-tabs a.is-on {
  color: var(--text);
  background: #fff;
  border-color: var(--text);
  margin-bottom: -1.5px;
  padding-bottom: 8.5px;
}

.mx-tabs em {
  font-size: 10px;
  font-weight: 700;
  background: #171714;
  color: #fff;
  border-radius: 3px;
  padding: 0 5px;
  margin-left: 3px;
  vertical-align: 1px;
}

/* ── 실 소통 화면 (messages#index) ───────── */

.mx-main:has(> .ms-chatwrap) { padding: 0; overflow: hidden; display: flex; }

.ms-chatwrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* ── 카드 · 리스트 ──────────────────────── */

.mx-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 16px;
  margin-bottom: 14px;
}

.mx-card > h2 {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 800;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--text);
}

.mx-card > h2 small { font-weight: 600; color: var(--dim); font-size: 11.5px; margin-left: 6px; }

.mx-list { display: flex; flex-direction: column; }

.mx-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 4px;
  border-bottom: 1px dashed var(--line);
  text-decoration: none;
  color: var(--text);
}

.mx-row:last-child { border-bottom: 0; }
.mx-row:hover { background: rgba(23, 23, 20, 0.02); }

.mx-row-ico { width: 30px; text-align: center; font-size: 17px; flex-shrink: 0; }
.mx-row-body { flex: 1; min-width: 0; }
.mx-row-body b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-row-body small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--dim); }
.mx-row-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* 상태 칩 */

.mx-chip {
  border-radius: 3px;
  padding: 2.5px 8px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--line);
  color: var(--mid);
  background: #fff;
}

.mx-chip.is-private { color: var(--dim); }
.mx-chip.is-partial { border-color: var(--amber); color: var(--amber); }
.mx-chip.is-all { border-color: var(--green); color: var(--green); }
.mx-chip.is-wait { border-color: var(--accent); color: var(--accent); }
.mx-chip.is-ai { border-color: var(--blue); color: var(--blue); }
.mx-chip.is-ver { color: var(--mid); }

/* ── 2단 레이아웃 ───────────────────────── */

.mx-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }

@media (max-width: 980px) { .mx-cols { grid-template-columns: 1fr; } }

/* ── 폼 ─────────────────────────────────── */

.mx-field { margin-bottom: 13px; }

.mx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .mx-field-row { grid-template-columns: 1fr; } }

.mx-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-bottom: 5px;
}

.mx-input-box {
  border: 1.5px solid var(--line);
  border-radius: 3px;
  background: #fff;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--text);
}

.mx-input-box.is-placeholder { color: var(--dim); }

.mx-seg { display: flex; gap: 6px; flex-wrap: wrap; }

.mx-seg span {
  border: 1.5px solid var(--line);
  border-radius: 3px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mid);
  cursor: pointer;
  background: #fff;
}

.mx-seg span.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 라디오/체크 (목업 표시용) */

.mx-opt { display: flex; align-items: flex-start; gap: 9px; padding: 8px 2px; font-size: 13px; color: var(--mid); cursor: pointer; }
.mx-opt.is-on { color: var(--text); }

.mx-opt i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #C6C4BA;
  flex-shrink: 0;
  margin-top: 1px;
  background: #fff;
}

.mx-opt.is-box i { border-radius: 3px; }
.mx-opt.is-on i { border-color: var(--accent); background: radial-gradient(circle at center, var(--accent) 45%, #fff 50%); }
.mx-opt.is-on.is-box i { background: var(--accent); }
.mx-opt small { display: block; font-size: 11px; color: var(--dim); }

/* ── 타임라인(활동·변경 이력) ────────────── */

.mx-tl { list-style: none; margin: 0; padding: 0; }

.mx-tl li {
  position: relative;
  padding: 0 0 14px 20px;
  font-size: 12.5px;
  color: var(--mid);
  line-height: 1.5;
}

.mx-tl li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C6C4BA;
}

.mx-tl li.is-accent::before { background: var(--accent); }
.mx-tl li.is-ai::before { background: var(--blue); }
.mx-tl li::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 16px;
  bottom: 2px;
  width: 1px;
  background: var(--line);
}

.mx-tl li:last-child::after { display: none; }
.mx-tl b { color: var(--text); }
.mx-tl small { display: block; font-size: 10.5px; color: var(--dim); }

/* ── 통계 라인 ──────────────────────────── */

.mx-stats { display: flex; gap: 24px; flex-wrap: wrap; margin: 12px 0 16px; }
.mx-stats div b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mx-stats div b.is-accent { color: var(--accent); }
.mx-stats div small { font-size: 11px; color: var(--dim); letter-spacing: 0.04em; }

/* ── 터미널(MCP 목업) — 터미널만 다크 유지 ── */

.mx-term {
  background: #171714;
  border-radius: 6px;
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.75;
  overflow-x: auto;
}

.mx-term .t-user { color: #E8C57C; }
.mx-term .t-claude { color: #E8E6DC; }
.mx-term .t-tool { color: #8FB4DC; }
.mx-term .t-dim { color: #7A786D; }
.mx-term .t-ok { color: #8FC99A; }

.mx-code {
  background: #171714;
  border-radius: 4px;
  padding: 10px 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #C9C7BC;
  overflow-x: auto;
  white-space: pre;
}

/* ── 가입 신청(폰 프레임 내부) ───────────── */

.mx-signup-head { text-align: center; padding: 26px 20px 6px; }
.mx-signup-head h1 { margin: 0; font-size: 18px; font-weight: 800; }
.mx-signup-head p { margin: 6px 0 0; font-size: 12px; color: var(--dim); line-height: 1.6; }

.mx-signup-form { padding: 14px 20px 20px; }

.mx-done { text-align: center; padding: 60px 24px 0; }
.mx-done .mx-done-ico { font-size: 44px; }
.mx-done h2 { margin: 14px 0 0; font-size: 17px; }
.mx-done p { margin: 10px 0 0; font-size: 12.5px; color: var(--mid); line-height: 1.7; }

/* 게이지(계획 화면) — 대시보드 문법: 실적 먹, 계획 눈금 무채색 */

.mx-gauge { position: relative; height: 5px; border-radius: 0; background: #ECECE6; margin-top: 7px; }
.mx-gauge i { position: absolute; inset: 0 auto 0 0; background: #171714; }
.mx-gauge b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #A9A9A0; }

/* ── 소통 기능 확장: 리액션·멘션·메시지 액션 ── */
.ms-msg-acts { display: none; margin-left: auto; gap: 2px; align-items: center; }
.ms-msg:hover .ms-msg-acts { display: inline-flex; }
.ms-react-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 6px;
  padding: 1px 6px; font-size: 11.5px; cursor: pointer; color: var(--dim); }
.ms-react-btn:hover { border-color: var(--text); color: var(--text); }
.ms-reacts { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.ms-react-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 10px;
  padding: 1px 8px; font-size: 11.5px; cursor: pointer; }
.ms-react-chip.is-mine { border-color: var(--accent); color: var(--accent); background: rgba(194, 64, 31, 0.06); }
.ms-mention { color: var(--accent); font-weight: 700; }
.ms-mention.is-me { background: rgba(194, 64, 31, 0.14); border-radius: 4px; padding: 0 3px; }