/* =====================================================================
   AI BnB 업무판 · styles
   "디자인 가이드 (단일파일).html" 의 디자인 시스템을 1:1로 적용.
   클래스명/마크업은 그대로 두고 토큰·컴포넌트 스펙만 가이드에 맞춤.
   상태 매핑: tone-red=urgent / tone-blue=doing / tone-amber=check / tone-green=done
   ===================================================================== */

:root {
  /* 브랜드 (코랄레드) */
  --brand-50: #FCEFEC;
  --brand-100: #FADED7;
  --brand-200: #F4BCAF;
  --brand-300: #EC8E7B;
  --brand-400: #E5654E;
  --brand-500: #DC4A33;
  --brand-600: #C23E2A;
  --brand-700: #9E3322;

  /* 따뜻한 무채색 */
  --bg: #F6F5F3;
  --surface: #FFFFFF;
  --surface-2: #FAF9F7;
  --border: #ECE9E6;
  --border-2: #E0DCD7;
  --text: #21242A;
  --text-2: #5E636E;
  --text-3: #9AA0A8;

  /* 상태색 (soft chip: text / bg / dot) */
  --st-urgent-text: #C0392B; --st-urgent-bg: #FDECE9; --st-urgent-dot: #E14C3B;
  --st-doing-text: #2563C9;  --st-doing-bg: #E9F0FC;  --st-doing-dot: #2F74E6;
  --st-check-text: #B7791F;  --st-check-bg: #FBF1DC;  --st-check-dot: #E0992A;
  --st-done-text: #2F855A;   --st-done-bg: #E6F4EC;   --st-done-dot: #34A06B;
  /* 상태 틴트 보더 (가이드 stat-group) */
  --st-urgent-line: #F6D2CC; --st-doing-line: #D2E2FA;
  --st-check-line: #F2E2BD;  --st-done-line: #C9E8D6;

  /* 타이포 */
  --font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  --tracking: -0.01em;

  /* 간격 (4px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* 모서리 */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* 그림자 */
  --shadow-sm: 0 1px 2px rgba(40, 30, 25, .05), 0 1px 3px rgba(40, 30, 25, .04);
  --shadow-md: 0 4px 16px rgba(40, 30, 25, .07);
  --shadow-lg: 0 14px 36px rgba(40, 30, 25, .12);

  /* 포커스 링 */
  --ring: 0 0 0 3px rgba(220, 74, 51, .18);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
}

button, input, select, textarea { font: inherit; letter-spacing: var(--tracking); }
button { cursor: pointer; }

:focus-visible { outline: none; box-shadow: var(--ring); }

h1, h2, p { margin-top: 0; }

/* ============ 레이아웃 셸 ============ */
.app-shell {
  width: min(1180px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 16px;
  /* 하단 고정 탭바(60px) + 노치 안전영역 확보 */
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--brand-600);
  font-size: 13px;
  font-weight: 700;
}

h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 { font-size: 17px; font-weight: 800; }

.view { min-height: 60vh; }

/* ============ 버튼 (가이드 .btn) ============ */
.primary-btn {
  min-height: 44px;
  border: 0;
  border-radius: var(--r-md);
  padding: 11px 20px;
  background: var(--brand-500);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease;
}
.primary-btn:hover { background: var(--brand-600); }
.primary-btn:active { background: var(--brand-700); transform: translateY(1px); }

/* 터치 기기에서는 hover가 안 떠서 눌림 피드백을 :active로 보강 */
.icon-btn:active,
.task-actions button:active,
.section-head button:active,
.date-quick-actions button:active,
.nav-item:active,
.memo-tool:active,
.danger-btn:active,
.mini-done:active { transform: translateY(1px); }

/* 보조 버튼 (secondary) */
.icon-btn,
.task-actions button,
.section-head button,
.date-quick-actions button {
  min-height: 40px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.icon-btn:hover,
.task-actions button:hover,
.section-head button:hover,
.date-quick-actions button:hover {
  border-color: var(--brand-300);
  color: var(--brand-700);
}

.icon-btn {
  width: 44px;
  font-size: 20px;
  color: var(--text-2);
  display: grid;
  place-items: center;
}

.danger-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 1px solid var(--st-urgent-line);
  border-radius: var(--r-md);
  background: var(--st-urgent-bg);
  color: var(--st-urgent-text);
  font-weight: 700;
}

/* ============ 입력 (가이드 .field) ============ */
input, select, textarea {
  width: 100%;
  min-width: 0;
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  padding: 11px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: var(--ring);
}

/* 셀렉트 커스텀 화살표 */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%239AA0A8' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

/* iOS Safari는 input[type=date]를 콘텐츠 폭으로 키우며 width:100%를 무시함.
   appearance 리셋 + 폭 제약으로 컨테이너를 넘치지 않게 고정한다. */
input[type="date"] {
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  max-width: 100%;
  min-width: 0;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }

textarea {
  min-height: 86px;
  resize: vertical;
  line-height: 1.5;
}

/* ============ 카드 표면 (가이드 r-lg + shadow-sm) ============ */
.workboard,
.assignment-panel,
.editor,
.settings-card,
.dated-list,
.task-table,
.metric,
.chart-panel,
.calendar-add {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* ============ 보드 ============ */
.board-grid {
  display: grid;
  grid-template-columns: minmax(320px, 480px) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
}

.workboard { overflow: hidden; }

.quick-add {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.quick-add input,
.quick-add select { min-width: 0; }
/* 행 1: 업무유형 | 상태 */
.quick-add select[name="workType"]      { grid-column: 1; grid-row: 1; }
.quick-add select[aria-label="상태"]    { grid-column: 2; grid-row: 1; }
/* 행 2: 시작일 | 마감일 — 각각 절반씩 충분한 너비 */
.quick-add label:first-of-type          { grid-column: 1; grid-row: 2; }
.quick-add label:last-of-type           { grid-column: 2; grid-row: 2; }
/* 행 3: 표시방식 | 분장 */
.quick-add select[aria-label="표시방식"] { grid-column: 1; grid-row: 3; }
.quick-add select[aria-label="업무분장"] { grid-column: 2; grid-row: 3; }
/* 행 4: 추가 버튼 (전폭) */
.quick-add .primary-btn                 { grid-column: 1 / -1; grid-row: 4; min-height: 40px; padding: 0 18px; }

/* 날짜 입력 (캡션 + date) — 폼/인라인 편집 공용 */
.field-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.field-date > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  padding-left: 2px;
}
.field-date input[type="date"] {
  width: 100%;
  min-width: 0;
}

.status-list { padding: 12px; display: grid; gap: 10px; }

/* 상태 그룹 = 가이드 .stat-group (솔리드 틴트, 그라데이션 없음) */
.status-group {
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.status-group.tone-red   { background: var(--st-urgent-bg); border-color: var(--st-urgent-line); }
.status-group.tone-blue  { background: var(--st-doing-bg);  border-color: var(--st-doing-line); }
.status-group.tone-amber { background: var(--st-check-bg);  border-color: var(--st-check-line); }
.status-group.tone-green { background: var(--st-done-bg);   border-color: var(--st-done-line); }

.status-group summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.status-group summary::-webkit-details-marker { display: none; }

/* 토글 chevron */
.chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 15px;
  font-style: normal;
  color: var(--text-3);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
details[open] > summary .chevron { transform: rotate(90deg); }

.status-label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}
/* 상태 아이콘 = 가이드 .ar (원형 배지) */
.status-label b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.tone-red   .status-label b { background: var(--st-urgent-dot); }
.tone-blue  .status-label b { background: var(--st-doing-dot); }
.tone-amber .status-label b { background: var(--st-check-dot); }
.tone-green .status-label b { background: var(--st-done-dot); }

/* count = 가이드 .gcount (플레인 컬러 숫자) */
.count {
  font-size: 13px;
  font-weight: 800;
}
.tone-red   .count { color: var(--st-urgent-text); }
.tone-blue  .count { color: var(--st-doing-text); }
.tone-amber .count { color: var(--st-check-text); }
.tone-green .count { color: var(--st-done-text); }

/* g-body = 투명, 틴트 위에 흰 카드 */
.task-list {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

/* 업무 카드 = 가이드 .mini-task + .task-demo 좌측 액센트 */
.task-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  padding-left: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.task-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.task-card.tone-red::before   { background: var(--st-urgent-dot); }
.task-card.tone-blue::before  { background: var(--st-doing-dot); }
.task-card.tone-amber::before { background: var(--st-check-dot); }
.task-card.tone-green::before { background: var(--st-done-dot); }

.task-card.selected {
  border-color: var(--brand-300);
  box-shadow: var(--ring);
}

/* 제목 행 (제목 + 연필 아이콘) — 인라인 흐름으로 같은 줄에 표기 */
.task-title-row {
  line-height: 1.5;
}
/* 명시도(0-2-1)로 .task-card strong(0-1-1)의 display:block을 덮어씀 */
.task-card .task-title-row strong {
  display: inline;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
}
.task-title-row .icon-btn {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 2px;
  position: relative;
  top: -1px;
}

/* 메모 — 편집 모드 밖에서도 항상 표시 */
.task-memo {
  margin-top: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  line-height: 1.5;
  word-break: break-all;
}

/* 아이콘 버튼 공통 */
.icon-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-2); }
.icon-btn--active { color: var(--brand-500); }
.icon-btn--delete:hover {
  background: var(--st-urgent-bg);
  color: var(--st-urgent-text);
}

.task-card strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
}

.task-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
}
/* 일반 메타 = 가이드 .tag-plain */
.task-meta-row span {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: #EFEDEA;
  color: var(--text-2);
  font-weight: 500;
}
/* 기간(시작→마감) 칩 — 브랜드 톤으로 강조 */
.task-meta-row .meta-range {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}
/* 표시방식 칩 — 점선 테두리로 구분 */
.task-meta-row .meta-mode {
  background: transparent;
  color: var(--text-3);
  border: 1px dashed var(--border);
  font-weight: 600;
}
/* 상태 칩 = 가이드 .chip-tag (도트 포함) */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.tone-red   .status-pill { background: var(--st-urgent-bg); color: var(--st-urgent-text); }
.tone-blue  .status-pill { background: var(--st-doing-bg);  color: var(--st-doing-text); }
.tone-amber .status-pill { background: var(--st-check-bg);  color: var(--st-check-text); }
.tone-green .status-pill { background: var(--st-done-bg);   color: var(--st-done-text); }

.inline-edit {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(104px, 1fr) minmax(120px, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.inline-edit input,
.inline-edit select,
.memo-input {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: var(--r-sm);
}
.memo-input { grid-column: 1 / -1; }
select.inline-edit, .inline-edit select { background-position: right 10px center; padding-right: 28px; }

.task-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.task-actions button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: var(--r-sm);
}
.task-actions button[title] {
  min-width: 32px;
  padding: 5px;
}

/* ============ 분장 패널 ============ */
.assignment-panel {
  position: sticky;
  top: 16px;
  padding: 18px;
}
.panel-head {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.panel-head span,
.panel-head small { color: var(--text-3); font-size: 12px; }
.panel-head strong { font-size: 18px; font-weight: 800; }
.assignment-panel p { color: var(--text-2); line-height: 1.6; font-size: 13.5px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chips span {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: #EFEDEA;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
}

.special-notes {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}
.special-notes textarea { min-height: 104px; font-weight: 400; line-height: 1.5; }

/* ============ 하단 탭바 (가이드 .app-tabbar) ============ */
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 5;
  width: min(1180px, 100%);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  /* 노치/홈 인디케이터 안전영역만큼 하단 패딩 확보 */
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  min-height: 60px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.nav-item .ic { width: 22px; height: 22px; }
.nav-item .nav-label { line-height: 1; }
.nav-item:hover { color: var(--brand-500); }
.nav-item.active { color: var(--brand-600); }

/* ============ 뷰 공통 ============ */
.calendar-view,
.grid-view,
.charts-view,
.assignments-view,
.settings-view {
  display: grid;
  gap: 16px;
}

/* ============ 목록 (그리드) ============ */
.task-table {
  display: grid;
  gap: 6px;
  overflow: hidden;
}
.table-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(110px, 1fr) 110px minmax(130px, auto) minmax(130px, auto) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.table-row:last-child { border-bottom: 0; }
.table-head {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}
.table-row select,
.table-row input {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: var(--r-sm);
}
.table-row select { background-position: right 10px center; padding-right: 28px; }
/* 목록 뷰 — 제목 + 연필 인라인 */
.table-title { line-height: 1.4; }
.table-title strong { display: inline; font-size: 14px; font-weight: 700; }
.table-title .icon-btn {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 2px;
  position: relative;
  top: -1px;
}

/* 제목 토글 (클릭 → 상세 펼치기) */
.title-toggle {
  display: inline;
  cursor: pointer;
}
.title-toggle:hover strong { color: var(--brand-600); }
.row-chevron {
  display: inline-block;
  font-size: 13px;
  color: var(--text-3);
  margin-right: 3px;
  transition: transform 0.15s ease;
  vertical-align: middle;
}
.title-toggle.expanded .row-chevron { transform: rotate(90deg); }
.row-expanded { background: var(--brand-50); }

/* 목록 뷰 — 상세 현황 행 */
.grid-detail-row {
  padding: 10px 16px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.detail-date, .detail-assign {
  font-size: 12px;
  color: var(--text-2);
  background: #EFEDEA;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.detail-mode {
  font-size: 12px;
  color: var(--text-3);
  background: transparent;
  border: 1px dashed var(--border);
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.detail-memo {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  white-space: pre-wrap;
  word-break: break-all;
}
.detail-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

/* 목록 뷰 — 액션 열 */
.table-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 목록 뷰 — 인라인 편집 행 */
.grid-edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 12px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.grid-edit-row input,
.grid-edit-row select {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: var(--r-sm);
}
.grid-edit-row select { padding-right: 28px; background-position: right 10px center; }
.row-editing { background: var(--brand-50); }

/* 인라인 편집 — 제목 입력 (전폭) */
.title-input { grid-column: 1 / -1; }

/* ============ 메모 블록 편집기 ============ */
.memo-editor { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.memo-editor-label { font-size: 12px; font-weight: 700; color: var(--text-3); }
.memo-blocks { display: flex; flex-direction: column; gap: 3px; }
.memo-row { display: flex; align-items: center; gap: 7px; }
.memo-row .memo-marker { flex: 0 0 auto; min-width: 16px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text-3); line-height: 1; }
.memo-row .memo-marker--num { color: var(--brand-600); }
.memo-editor .memo-check {
  -webkit-appearance: auto; appearance: auto;
  flex: 0 0 auto; width: 17px; height: 17px; min-width: 17px; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  accent-color: var(--brand-600); cursor: pointer; box-shadow: none;
}
.memo-editor .memo-block-input {
  flex: 1 1 auto; width: auto; min-width: 0; min-height: 32px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
  padding: 6px 9px; font-size: 13px; box-shadow: none;
}
.memo-editor .memo-block-input::placeholder { color: var(--text-3); }
.memo-editor .memo-block-input:focus { border-color: var(--brand-300); background: var(--surface); box-shadow: none; }
.memo-editor .memo-block-input.is-heading { font-weight: 700; font-size: 14px; }
.memo-editor .memo-block-input.is-done { text-decoration: line-through; color: var(--text-3); }
.memo-row-del {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; background: transparent;
  color: var(--text-3); border-radius: var(--r-sm); cursor: pointer; opacity: .45;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.memo-row-del:hover { opacity: 1; color: var(--brand-600); background: var(--brand-50); }

.memo-toolbar { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px; border-top: 1px dashed var(--border); }
.memo-tool {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; min-height: 0;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2);
  border-radius: var(--r-pill); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.memo-tool svg { display: block; flex: 0 0 auto; }
.memo-tool:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }
.memo-tool.is-active { border-color: var(--brand-600); color: var(--brand-700); background: var(--brand-50); }
.memo-tool--add { margin-left: auto; border-style: dashed; color: var(--brand-700); }
.memo-tool-label { font-size: 12px; line-height: 1; }

/* 메모 읽기 전용 표시 (카드 / 목록 상세 공용) */
.memo-view { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.memo-view-row { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.memo-view-row .memo-marker { flex: 0 0 auto; min-width: 16px; text-align: center; font-weight: 700; color: var(--text-3); }
.memo-view-row .memo-marker--num { color: var(--brand-600); }
.memo-view-text { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.memo-view-row.type-heading .memo-view-text { font-weight: 700; color: var(--text); }
.memo-view-row.is-done .memo-view-text { text-decoration: line-through; color: var(--text-3); }
.memo-view .memo-check {
  -webkit-appearance: auto; appearance: auto;
  flex: 0 0 auto; width: 16px; height: 16px; min-width: 16px; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  accent-color: var(--brand-600); cursor: pointer; box-shadow: none;
}

.mini-done {
  min-height: 36px;
  border: 1px solid var(--st-done-line);
  border-radius: var(--r-sm);
  background: var(--st-done-bg);
  color: var(--st-done-text);
  font-weight: 700;
  font-size: 13px;
}

/* ============ 요약 (차트) ============ */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric { padding: 16px; }
.metric span { color: var(--text-2); font-size: 13px; font-weight: 700; }
.metric strong { display: block; margin-top: 6px; font-size: 28px; font-weight: 800; }

.chart-panel { padding: 18px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 170px) 1fr 34px;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}
.bar-row span { color: var(--text-2); font-size: 13px; font-weight: 700; }
.bar-track {
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.bar-track i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--brand-300);
}
.bar-track .tone-red   { background: var(--st-urgent-dot); }
.bar-track .tone-blue  { background: var(--st-doing-dot); }
.bar-track .tone-amber { background: var(--st-check-dot); }
.bar-track .tone-green { background: var(--st-done-dot); }
.bar-row b { font-size: 13px; font-weight: 800; color: var(--text); text-align: right; }

/* ============ 일정 (캘린더) ============ */
.section-head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.section-head strong { font-size: 16px; font-weight: 800; }
.section-head button {
  min-height: 36px;
  width: 36px;
  justify-self: center;
  border-radius: 50%;
  color: var(--text-2);
}

.weekdays,
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.weekdays {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.day {
  position: relative;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.day.active {
  border-color: var(--brand-400);
  color: var(--brand-600);
  box-shadow: var(--ring);
  font-weight: 800;
}
.day em {
  position: absolute;
  right: 5px;
  top: 4px;
  min-width: 18px;
  text-align: center;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
}
.day-marks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
}
.dot-row {
  display: flex;
  gap: 3px;
  justify-content: center;
}
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.dot.tone-red   { background: var(--st-urgent-dot); }
.dot.tone-blue  { background: var(--st-doing-dot); }
.dot.tone-amber { background: var(--st-check-dot); }
.dot.tone-green { background: var(--st-done-dot); }
/* 기간(span) 업무 — 날짜 셀을 가로지르는 연결 막대 */
.span-bar { height: 4px; background: var(--text-3); }
.span-bar.bar-mid    { margin: 0 -4px; border-radius: 0; }
.span-bar.bar-start  { margin-left: 5px; margin-right: -4px; border-radius: 3px 0 0 3px; }
.span-bar.bar-end    { margin-left: -4px; margin-right: 5px; border-radius: 0 3px 3px 0; }
.span-bar.bar-single { margin: 0 5px; border-radius: 3px; }
.span-bar.tone-red   { background: var(--st-urgent-dot); }
.span-bar.tone-blue  { background: var(--st-doing-dot); }
.span-bar.tone-amber { background: var(--st-check-dot); }
.span-bar.tone-green { background: var(--st-done-dot); }
.day.muted { border-color: transparent; background: transparent; }

.dated-list { padding: 16px; }
.dated-list h2 { margin-bottom: 12px; }

.date-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.date-quick-actions button {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: var(--r-pill);
}
.date-quick-actions .tone-red   { border-color: var(--st-urgent-line); color: var(--st-urgent-text); background: var(--st-urgent-bg); }
.date-quick-actions .tone-blue  { border-color: var(--st-doing-line);  color: var(--st-doing-text);  background: var(--st-doing-bg); }
.date-quick-actions .tone-amber { border-color: var(--st-check-line);  color: var(--st-check-text);  background: var(--st-check-bg); }
.date-quick-actions .tone-green { border-color: var(--st-done-line);   color: var(--st-done-text);   background: var(--st-done-bg); }
.date-quick-actions .tone-red:hover,
.date-quick-actions .tone-blue:hover,
.date-quick-actions .tone-amber:hover,
.date-quick-actions .tone-green:hover { color: inherit; }

/* ============ 분장 뷰 ============ */
.assignment-list { display: grid; gap: 12px; }
.assignment-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.assignment-card strong { font-size: 16px; font-weight: 800; }
.assignment-card small { display: block; margin-top: 4px; color: var(--text-3); font-size: 12px; }
.assignment-card p { color: var(--text-2); line-height: 1.55; font-size: 13px; margin: 10px 0 0; }

/* ============ 에디터/설정 폼 ============ */
.editor { display: grid; gap: 12px; padding: 18px; }
.editor label {
  display: grid;
  gap: 7px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}
.editor .primary-btn { justify-self: start; }

.settings-card { padding: 18px; }
.settings-card h2 { margin-bottom: 10px; }
.settings-card small { color: var(--text-3); }

/* ============ 빈 상태 ============ */
.empty {
  padding: 14px;
  color: var(--text-3);
  text-align: center;
  font-size: 13px;
}
.task-list .empty {
  background: rgba(255, 255, 255, .6);
  border-radius: var(--r-md);
}

/* ============ 공유 박스 / 토스트 ============ */
.share-box {
  display: none !important;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 10;
  width: auto;
  min-height: 100px;
  box-shadow: var(--shadow-lg);
}
.share-box.visible { display: block !important; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 11;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--text);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ 반응형 ============ */
@media (max-width: 820px) {
  .board-grid { grid-template-columns: 1fr; }
  .assignment-panel { position: static; }
}

@media (max-width: 520px) {
  .app-shell {
    padding: 14px 12px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    overflow-x: clip; /* 어떤 자식이 넘쳐도 가로 스크롤 차단 (모바일에서 sticky 미사용) */
  }
  h1 { font-size: 22px; }

  /* iOS 입력 포커스 시 자동 줌(폰트<16px) 방지 — 작은 폰트 입력까지 16px로 승격 */
  input, select, textarea,
  .inline-edit input, .inline-edit select,
  .table-row input, .table-row select,
  .grid-edit-row input, .grid-edit-row select,
  .memo-input, .memo-editor .memo-block-input,
  .memo-view .memo-check, .memo-editor .memo-check {
    font-size: 16px;
  }

  /* 추가 폼 — 2열 콤팩트 배치 (할일/분장/버튼 전폭, 날짜·상태는 반반) */
  .quick-add { grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick-add select[name="workType"]       { grid-column: 1 / -1; grid-row: 1; }
  .quick-add label:first-of-type            { grid-column: 1;      grid-row: 2; }
  .quick-add label:last-of-type             { grid-column: 2;      grid-row: 2; }
  .quick-add select[aria-label="상태"]      { grid-column: 1;      grid-row: 3; }
  .quick-add select[aria-label="표시방식"]  { grid-column: 2;      grid-row: 3; }
  .quick-add select[aria-label="업무분장"]  { grid-column: 1 / -1; grid-row: 4; }
  .quick-add .primary-btn                   { grid-column: 1 / -1; grid-row: 5; min-height: 46px; }

  .inline-edit { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .table-row { grid-template-columns: 1fr; gap: 6px; }
  .table-head { display: none; }
  .task-card { grid-template-columns: 1fr; }
  .task-actions { justify-content: flex-start; }

  /* 목록 뷰 인라인 날짜/셀렉트가 화면을 넘치지 않도록 */
  .grid-edit-row { grid-template-columns: 1fr 1fr; }
  .grid-edit-row .title-input { grid-column: 1 / -1; }

  .nav-item { min-height: 56px; font-size: 12px; }
  /* 탭바 버튼 누름 피드백 */
  .nav-item:active { background: var(--surface-2); }
}