/* 공용 레이아웃 · 네비 · 폼 · 테이블 · 모달 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: -apple-system, "Malgun Gothic", "맑은 고딕", sans-serif; background: #f4f6fa; color: #222; font-size: 14px; }

/* Top nav */
.topnav { background: linear-gradient(135deg, #1a3a6b 0%, #2d5fa6 100%); color: #fff; padding: 10px 20px; display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; box-shadow: 0 2px 4px rgba(0,0,0,.1); flex-shrink: 0; }
.topnav .brand { font-weight: 700; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; }
.topnav .brand .brand-sub  { font-size: 11px; font-weight: 500; color: #b0c4de; letter-spacing: 0.3px; }
.topnav .brand .brand-main { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
.topnav a { color: #dde6f5; text-decoration: none; padding: 6px 10px; border-radius: 5px; font-size: 13px; line-height: 1.25; text-align: center; }
.topnav a .nav-seg { display: inline-block; white-space: nowrap; }
.topnav a:hover, .topnav a.active { background: rgba(255,255,255,.15); color: #fff; }
.topnav .spacer { flex: 1; }
.topnav .nav-right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.topnav .user { font-size: 12px; color: #cfd9ea; padding: 5px 10px; border-radius: 5px; }
.topnav .user .chip-seg { white-space: nowrap; }
.topnav .user .chip-seg + .chip-seg::before { content: ' · '; color: #b0c4de; }
.topnav a.user:hover { background: rgba(255,255,255,.15); color: #fff; }
.topnav button.logout { background: transparent; color: #dde6f5; border: 1px solid #7a94c4; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.topnav button.logout:hover { background: rgba(255,255,255,.1); }
.topnav button.mine-toggle { background: transparent; color: #dde6f5; border: 1px solid #7a94c4; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; }
.topnav button.mine-toggle:hover { background: rgba(255,255,255,.1); }
.topnav button.mine-toggle.active { background: #ffd54f; color: #1a3a6b; border-color: #ffc107; }

/* 반응형: 좁은 화면에서는 "법무솔루션" 부제를 숨김 */
@media (max-width: 600px) {
  .topnav .brand .brand-sub { display: none; }
  .topnav .brand .brand-main { font-size: 17px; }
  /* 사용자 칩: · 단위로 줄 전환 — 각 조각을 block 으로 만들어 자체 줄 차지 */
  .topnav .user { text-align: right; line-height: 1.25; padding: 4px 8px; }
  .topnav .user .chip-seg { display: block; }
  .topnav .user .chip-seg + .chip-seg::before { content: ''; display: none; }
  .topnav button.mine-toggle { padding: 4px 8px; font-size: 11px; }
  .topnav button.logout { padding: 4px 8px; font-size: 11px; }
  .topnav .nav-right { gap: 6px; }
}

/* Footer */
.site-footer { color: #8a96ac; font-size: 11px; text-align: center; padding: 18px 16px 28px; line-height: 1.6; flex-shrink: 0; }
.site-footer .sep { margin: 0 6px; color: #cfd9ea; }
.site-footer a { color: #6b7a95; text-decoration: none; }
.site-footer a:hover { color: #2d5fa6; text-decoration: underline; }
.site-footer .brand-mark { color: #1a3a6b; font-weight: 700; }

/* 인쇄용 브랜드 헤더 (견적서·수임계약서·보고서 등에 .print-header 붙이면 상단에 출력) */
.print-header { display: none; }
@media print {
  .topnav, .site-footer, .no-print { display: none !important; }
  .print-header { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid #1a3a6b; padding-bottom: 10px; margin-bottom: 18px; }
  .print-header .p-sub  { font-size: 11px; color: #6b7a95; font-weight: 500; }
  .print-header .p-main { font-size: 22px; color: #1a3a6b; font-weight: 800; letter-spacing: 0.5px; }
  .print-header .p-meta { margin-left: auto; font-size: 11px; color: #888; }
  body { background: #fff; }
}
.view-banner { background: #fff3c4; color: #7a5f00; padding: 8px 20px; font-size: 12px; border-bottom: 1px solid #f0e0a0; font-weight: 500; }
.view-banner a { color: #1a3a6b; text-decoration: none; font-weight: 600; }
.view-banner a:hover { text-decoration: underline; }

/* Container */
.container { max-width: 1280px; margin: 20px auto; padding: 0 20px; }
.page-head { display: flex; align-items: center; margin-bottom: 16px; gap: 12px; }
.page-head h2 { color: #1a3a6b; font-size: 20px; }
.page-head .spacer { flex: 1; }

/* Buttons */
button, .btn { background: #2d5fa6; color: #fff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
button:hover, .btn:hover { background: #1a3a6b; }
button:disabled { background: #aaa; cursor: not-allowed; }
button.secondary, .btn.secondary { background: #fff; color: #2d5fa6; border: 1px solid #b0c4de; }
button.secondary:hover { background: #f0f4fa; }
button.danger { background: #d32f2f; }
button.danger:hover { background: #a32020; }

/* Card */
.card { background: #fff; border: 1px solid #e5eaf2; border-radius: 8px; padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }

/* Forms */
label { display: block; font-size: 12px; color: #555; margin-bottom: 4px; font-weight: 600; }
input[type=text], input[type=password], input[type=email], input[type=tel], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #c5d0e0; border-radius: 5px; font-size: 13px;
  outline: none; transition: border-color .15s; background: #fff; font-family: inherit;
}
input:focus, select:focus, textarea:focus { border-color: #2d5fa6; }
textarea { resize: vertical; min-height: 80px; }
.field { margin-bottom: 12px; }
.row { display: flex; gap: 10px; }
.row .field { flex: 1; }
.hint { font-size: 11px; color: #888; margin-top: 3px; }
.err  { font-size: 11px; color: #d32f2f; margin-top: 3px; }

/* Table */
table.list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5eaf2; border-radius: 6px; overflow: hidden; }
table.list th, table.list td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef1f7; font-size: 13px; }
table.list thead th { background: #f4f6fa; color: #4a5a75; font-weight: 600; font-size: 12px; position: sticky; top: 0; }
table.list tbody tr:hover { background: #f8faff; cursor: pointer; }
.tag { display: inline-block; background: #e9f0fb; color: #2d5fa6; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-right: 4px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge.individual { background: #e8f5e9; color: #2e7d32; }
.badge.corporate { background: #fff3e0; color: #e65100; }

/* Pagination */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; }
.pager button { padding: 6px 10px; font-size: 12px; background: #fff; color: #2d5fa6; border: 1px solid #b0c4de; }
.pager button.active { background: #2d5fa6; color: #fff; }
.pager button:disabled { opacity: .4; }

/* Search bar */
.search-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.search-bar input, .search-bar select { width: auto; min-width: 140px; }
.search-bar input[type=text] { flex: 1; min-width: 220px; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal { background: #fff; border-radius: 8px; width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { padding: 16px 20px; border-bottom: 1px solid #e5eaf2; display: flex; align-items: center; }
.modal-head h3 { font-size: 16px; color: #1a3a6b; flex: 1; }
.modal-head .close { background: transparent; color: #888; font-size: 20px; cursor: pointer; padding: 0 8px; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot { padding: 12px 20px; border-top: 1px solid #e5eaf2; display: flex; justify-content: flex-end; gap: 8px; background: #f9fafc; }

/* Repeater (multi phones/emails) */
.repeater { border: 1px dashed #d5dce8; border-radius: 6px; padding: 10px; margin-bottom: 12px; }
.repeater-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.repeater-row input { flex: 1; }
.repeater-row .label-input { flex: 0 0 90px; }
.repeater-row .del { background: transparent; color: #d32f2f; padding: 4px 8px; font-size: 16px; }
.repeater .add { background: transparent; color: #2d5fa6; border: 1px dashed #b0c4de; padding: 6px; width: 100%; font-size: 12px; }

/* Toast */
.toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #333; color: #fff; padding: 10px 16px; border-radius: 5px; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,.2); animation: slideIn .2s ease; }
.toast.error { background: #d32f2f; }
.toast.success { background: #2e7d32; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.empty { text-align: center; color: #888; padding: 40px 20px; font-size: 13px; }
.loading { text-align: center; color: #888; padding: 20px; font-size: 12px; }
.muted { color: #888; }

/* 읽기 전용 역할(어소시에이트/별산) — 편집 관련 버튼 숨김 */
body.role-readonly #btn-new,
body.role-readonly #btn-edit,
body.role-readonly #btn-del,
body.role-readonly .btn-new,
body.role-readonly .btn-del,
body.role-readonly .edit-action { display: none !important; }
/* 읽기 전용: 배정 체크박스 비활성 */
body.role-readonly .lw-cb,
body.role-readonly .cr-lw-cb,
body.role-readonly .ms-lw-cb { pointer-events: none; opacity: 0.6; }
body.role-readonly #assign-panel [role="button"],
body.role-readonly #assign-panel span[onclick] { pointer-events: none; opacity: 0.5; }
/* 확인완료 버튼은 사용자별 알림 관리(읽기 작업)로 변경 → readonly 도 허용 */