/* ════════ 기능 아이디어(개발 백로그) 모달 — ideas.js 짝 ════════ */
.ideas-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16, 24, 40, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ideas-overlay[hidden] { display: none; }

.ideas-modal {
  background: #fff; border-radius: 16px;
  width: 100%; max-width: 920px; max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 44px rgba(16, 24, 40, .22);
  overflow: hidden;
}
.ideas-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line, #ECEEF1); flex: 0 0 auto;
}
.ideas-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #1A1D21; }
.ideas-x {
  border: none; background: none; font-size: 15px; cursor: pointer;
  color: var(--muted, #8A929C); padding: 4px 9px; border-radius: 8px;
}
.ideas-x:hover { background: var(--surface-2, #F4F6F8); color: #1A1D21; }

/* ── 추가 폼 ── 제목(좁게)·메모(넓게) textarea 가로 배치 + 우측 상태/추가 세로 스택.
   textarea는 resize:vertical로 위아래 길이 조절(기본 3줄). */
.ideas-form {
  display: flex; align-items: stretch; gap: 8px;
  padding: 13px 18px; border-bottom: 1px solid var(--line, #ECEEF1); flex: 0 0 auto;
}
.ideas-title, .ideas-memo {
  min-width: 0; box-sizing: border-box;
  resize: vertical; min-height: 40px;
  border: 1px solid var(--line-strong, #D6DAE0); border-radius: 9px;
  padding: 9px 12px; font-size: 13px; font-family: inherit; line-height: 1.45; color: #1A1D21; background: #fff;
}
.ideas-title { flex: 0 1 210px; }
.ideas-memo  { flex: 1 1 auto; }
.ideas-title:focus, .ideas-memo:focus, .ideas-status:focus {
  outline: 2px solid var(--sage, #9BAA9E); outline-offset: -1px; border-color: var(--brand, #3E4D41);
}
.ideas-form-side { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; min-width: 96px; }
.ideas-status {
  flex: 0 0 auto; border: 1px solid var(--line-strong, #D6DAE0);
  border-radius: 9px; padding: 8px 10px; font-size: 13px; background: #fff; cursor: pointer; color: #1A1D21; font-family: inherit;
}
.ideas-add {
  flex: 1 1 auto; border: none; background: var(--brand, #3E4D41); color: #fff;
  border-radius: 9px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.ideas-add:hover { background: #34423a; }

/* 목록 — 가로 3컬럼(트렐로 보드: Backlog | Doing | Done) */
.ideas-list {
  padding: 14px 16px 18px; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: row; align-items: stretch; gap: 12px;
}
.ideas-empty { color: var(--muted, #8A929C); font-size: 13px; text-align: center; padding: 26px 0; width: 100%; }

/* ── 상태 컬럼(칸반 섹션) ── */
.ideas-group {
  flex: 1 1 0; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-2, #F7F8FA); border: 1px solid var(--line, #ECEEF1);
  border-radius: 12px; padding: 10px 10px 12px;
}
.ideas-group-head {
  display: flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: #5A626B; padding: 2px 2px 4px;
}
.ideas-gdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--line-strong, #D6DAE0); }
.ideas-group-head.st-backlog .ideas-gdot { background: #9BAA9E; }
.ideas-group-head.st-doing   .ideas-gdot { background: #E0A93C; }
.ideas-group-head.st-done    .ideas-gdot { background: #5B8A6F; }
.ideas-gcnt { color: var(--muted, #8A929C); font-weight: 600; }
.ideas-empty-sm { color: #B6BCC4; font-size: 11.5px; padding: 8px 2px; text-align: center; }

/* 컬럼 내부 카드 목록 — 각 컬럼 독립 세로 스크롤 */
.ideas-col-body {
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-right: 2px;
}

/* ── 카드(접기/펼치기) ── */
.idea-item {
  background: #fff; flex: 0 0 auto;
  border: 1px solid var(--line, #ECEEF1);
  border-radius: 10px; border-left: 3px solid var(--line-strong, #D6DAE0);
  overflow: hidden;
}
.idea-item.st-backlog { border-left-color: #9BAA9E; }
.idea-item.st-doing   { border-left-color: #E0A93C; }
.idea-item.st-done    { border-left-color: #5B8A6F; }

/* ── 컬럼 간 드래그 앤 드롭(트렐로식) — grab 커서 + 드래그 피드백 + 드롭 컬럼 하이라이트 ── */
.idea-item[draggable="true"] { cursor: grab; }
.idea-item.is-dragging {
  opacity: .5; cursor: grabbing;
  box-shadow: var(--shadow-pop, 0 4px 8px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .12));
}
/* 드롭 가능 컬럼 강조 — 은은한 점선 테두리 + 옅은 배경(트렐로 톤) */
.ideas-group.is-drop-target {
  border-color: var(--brand, #3E4D41);
  border-style: dashed;
  background: rgba(62, 77, 65, .05);
}

/* 헤더(항상 보임): 셰브론+제목 토글 + 액션(✏️ 🗑만 — 상태 select는 본문으로 이동) */
.idea-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 9px;
}
.idea-toggle {
  display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto;
  border: none; background: none; cursor: pointer; padding: 0; text-align: left; font: inherit;
}
.idea-chev {
  flex: 0 0 auto; width: 13px; height: 13px; color: var(--muted, #8A929C);
  display: inline-flex; transition: transform .15s;
}
.idea-chev svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.idea-item:not(.collapsed) .idea-chev { transform: rotate(90deg); }
.idea-title { font-size: 12.5px; font-weight: 600; color: #1A1D21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idea-item.st-done .idea-title { text-decoration: line-through; color: #5A626B; }

.idea-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.idea-edit-btn, .idea-del {
  border: none; background: none; cursor: pointer; font-size: 12px;
  padding: 3px 4px; border-radius: 6px; opacity: .5; line-height: 1;
}
.idea-edit-btn:hover { opacity: 1; background: var(--surface-2, #F4F6F8); }
.idea-del:hover { opacity: 1; background: #FDECEC; }

/* 바디(펼침 시만): 상태 select + 메모 + 날짜 / 편집폼 */
.idea-body { padding: 0 10px 9px 26px; }
.idea-item.collapsed .idea-body { display: none; }

/* 본문 상태 줄: '상태' 라벨 + select (메모·날짜 위) */
.idea-status-row {
  display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
}
.idea-status-label {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--muted, #8A929C);
}
.idea-status-sel {
  border: 1px solid var(--line-strong, #D6DAE0); border-radius: 7px;
  padding: 4px 8px; font-size: 11.5px; background: #fff; cursor: pointer; color: #1A1D21; font-family: inherit;
}
.idea-status-sel:focus {
  outline: 2px solid var(--sage, #9BAA9E); outline-offset: -1px; border-color: var(--brand, #3E4D41);
}

.idea-memo { font-size: 12px; color: #5A626B; white-space: pre-wrap; word-break: break-word; }
.idea-meta { font-size: 10.5px; color: var(--muted, #8A929C); margin-top: 5px; }

/* 인라인 편집 폼 */
.idea-edit { display: flex; flex-direction: column; gap: 6px; }
.idea-edit-title, .idea-edit-memo {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line-strong, #D6DAE0); border-radius: 7px;
  padding: 6px 8px; font-size: 12.5px; font-family: inherit; color: #1A1D21;
}
.idea-edit-memo { resize: vertical; min-height: 34px; }
.idea-edit-title:focus, .idea-edit-memo:focus {
  outline: 2px solid var(--sage, #9BAA9E); outline-offset: -1px; border-color: var(--brand, #3E4D41);
}
.idea-edit-row { display: flex; gap: 6px; justify-content: flex-end; }
.idea-edit-save, .idea-edit-cancel {
  border: none; border-radius: 7px; padding: 5px 13px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.idea-edit-save { background: var(--brand, #3E4D41); color: #fff; }
.idea-edit-save:hover { background: #34423a; }
.idea-edit-cancel { background: var(--surface-2, #F4F6F8); color: #5A626B; }
.idea-edit-cancel:hover { background: #E8EBEE; }

/* 좁은 화면 — 가로 칸반이 부담되면 세로로 폴백 */
@media (max-width: 720px) {
  .ideas-list { flex-direction: column; overflow-y: auto; }
  .ideas-group { min-height: 0; }
  .ideas-col-body { overflow: visible; }
  .ideas-form { flex-wrap: wrap; }
}