/* ===== 칸반 보드 ===== */

/* 칸반은 정보가 많아서 사이트 본문보다 한 단계 작은 글자로 씁니다 (기본 14px) */
.kb { --card: #1C332B; padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 8vw, 5rem); font-size: 0.875rem; }
:root[data-theme="light"] .kb { --card: #FFFFFF; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 저장 위치 고르기 */
.kb-store {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.kb-seg { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--rule); border-radius: 10px; }
.kb-seg button {
  padding: 0.35rem 0.9rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.kb-seg button:hover { color: var(--ink); }
.kb-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.kb-store__text { flex: 1 1 22rem; max-width: 46rem; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.6; }

.kb__empty { display: grid; justify-items: start; gap: 0.75rem; padding: 2rem 0; color: var(--ink-soft); }

/* 머리: 제목, 상태, 단추 */
.kb__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}
.kb__title { font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 800; letter-spacing: -0.03em; }
.is-editing .kb__title { cursor: text; }
.is-editing .kb__title:hover { text-decoration: underline dotted var(--ink-soft); text-underline-offset: 0.3em; }
.kb__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-top: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}
.kb__mode {
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.is-editing .kb__mode { border-color: var(--seal); color: var(--seal); }
.kb__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.kb-btn {
  padding: 0.38rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.kb-btn[hidden] { display: none; }
.kb-btn:hover:not(:disabled) { border-color: var(--ink-soft); }
.kb-btn:disabled { opacity: 0.5; cursor: default; }
.kb-btn--primary { border-color: var(--seal); background: var(--seal); color: #fff; }
.kb-btn--primary:hover:not(:disabled) { border-color: var(--seal); filter: brightness(1.08); }
.kb-btn--danger { padding-inline: 0.5rem; border-color: transparent; color: var(--seal); }
.kb-btn--small { padding: 0.25rem 0.6rem; font-size: 0.75rem; }
.kb-link { padding: 0; border: 0; background: none; color: var(--seal); font: inherit; text-decoration: underline; cursor: pointer; }

.kb__notice {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--seal);
  border-radius: 10px;
  background: color-mix(in srgb, var(--seal) 8%, transparent);
}
.kb__notice[hidden] { display: none; }
.kb__notice-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }

/* 보드: 칸을 가로로 늘어놓습니다 */
.kb__board {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.kb__loading { padding: 2rem 0; color: var(--ink-soft); }

.kb-col {
  display: flex;
  flex: 1 1 12rem; /* 넓은 화면에서 네 칸(편집할 때는 '칸 추가'까지)이 좌우 스크롤 없이 한 줄에 들어가게 나눠 씁니다 */
  flex-direction: column;
  gap: 0.6rem;
  min-width: 12rem;
  max-width: 24rem;
  padding: 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--tile);
  scroll-snap-align: start;
}
.kb-col__head { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; }
.kb-col__title { overflow: hidden; font-size: 0.875rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.kb-col__count { color: var(--ink-soft); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.kb-col__menu { margin-left: auto; }
.kb-col__empty { color: var(--ink-soft); font-size: 0.75rem; }

/* 빈 칸에도 카드를 끌어다 놓을 수 있게 최소 높이를 둡니다 */
.kb-cards { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0.5rem; margin: 0; padding: 0; list-style: none; }
.is-editing .kb-cards { min-height: 2.5rem; }

.kb-card {
  --stripe: var(--rule);
  position: relative;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--stripe);
  border-radius: 10px;
  background: var(--card);
  font-size: 0.875rem; /* 끌 때 body로 옮겨지는 카드 복사본도 같은 크기로 */
}
/* 카드 색: 카드 왼쪽 띠, 카드 추가 입력칸 미리보기에 함께 씁니다 */
:is(.kb-card, .kb-add)[data-color="red"] { --stripe: #E2584C; }
:is(.kb-card, .kb-add)[data-color="yellow"] { --stripe: #E9B949; }
:is(.kb-card, .kb-add)[data-color="green"] { --stripe: #5DAE6B; }
:is(.kb-card, .kb-add)[data-color="blue"] { --stripe: #4D96D9; }
:is(.kb-card, .kb-add)[data-color="purple"] { --stripe: #9B7FE0; }
.kb-card:hover { border-color: var(--ink-soft); border-left-color: var(--stripe); }
.is-editing .kb-card { cursor: grab; }

.kb-card__open {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.is-editing .kb-card__open { padding-right: 2.2rem; cursor: inherit; }
.kb-card__title { font-weight: 650; line-height: 1.4; }
.kb-card__body {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-line;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.kb-card__date { color: var(--ink-soft); font-size: 0.6875rem; }
.kb-card__private,
.kb-add__private { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ink-soft); font-size: 0.6875rem; font-weight: 600; }
.kb-card__private svg,
.kb-add__private svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.kb-add__private { cursor: pointer; }
.kb-add__private input { width: 0.9rem; height: 0.9rem; margin: 0; accent-color: var(--seal); }
.kb-add__private:has(input:checked) { color: var(--ink); }

/* 라벨 */
.kb-labels { display: flex; flex-wrap: wrap; gap: 0.25rem; min-width: 0; } /* 긴 라벨이 카드 밖으로 나가지 않고 말줄임 되게 */
.kb-label {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink-soft);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 고정: 편집할 때는 누르는 단추, 볼 때는 고정한 카드에만 표시 */
.kb-card__pin {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
}
.kb-card__pin svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.is-pinned .kb-card__pin { color: var(--seal); }
.is-pinned .kb-card__pin svg { fill: currentColor; }
span.kb-card__pin { pointer-events: none; }
button.kb-card__pin { cursor: pointer; opacity: 0; }
button.kb-card__pin:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.kb-card:hover button.kb-card__pin,
button.kb-card__pin:focus-visible,
.is-pinned button.kb-card__pin { opacity: 1; }
@media (hover: none) {
  button.kb-card__pin { opacity: 0.55; }
}

/* 손가락으로 끌 때 쓰는 손잡이 */
.kb-card__grip {
  position: absolute;
  top: 0.45rem;
  right: 0.35rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 6px;
  color: var(--ink-soft);
  cursor: grab;
  touch-action: none;
}
.kb-card__grip svg { width: 16px; height: 16px; fill: currentColor; }

.kb-card.is-placeholder { opacity: 0.35; border-style: dashed; }
.kb-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  margin: 0;
  list-style: none;
  pointer-events: none;
  opacity: 0.95;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.is-dragging,
.is-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* 카드 추가 */
.kb-add { display: flex; flex-direction: column; gap: 0.4rem; }
.kb-add__input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px dashed var(--rule);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  resize: none;
}
.kb-add__input:focus { border-style: solid; border-color: var(--ink-soft); outline: none; }
.kb-add:not([data-color=""]) .kb-add__input { border-left: 4px solid var(--stripe); }

/* 입력칸에 포커스가 있거나 글이 있을 때만 색 고르기와 추가 단추를 보입니다 */
.kb-add__row { display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.5rem; }
.kb-add:focus-within .kb-add__row,
.kb-add:has(.kb-add__input:not(:placeholder-shown)) .kb-add__row { display: flex; }
.kb-add__colors { display: flex; gap: 0.3rem; }
.kb-dot {
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--sw, transparent);
  appearance: none;
  cursor: pointer;
}
/* '색 없음' 점: 빗금 */
.kb-dot[data-color=""] { background: linear-gradient(135deg, transparent 45%, var(--ink-soft) 45% 55%, transparent 55%); }
.kb-dot:checked { border-color: var(--tile); box-shadow: 0 0 0 2px var(--ink); }
.kb-dot:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }
.kb .label-suggest__item { font-size: 0.8125rem; }

.kb-addcol {
  flex: none;
  min-height: 2.75rem;
  padding-inline: 1rem;
  white-space: nowrap;
  border: 1.5px dashed var(--rule);
  border-radius: 14px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.kb-addcol:hover { border-color: var(--seal); color: var(--seal); }

.kb-rename {
  width: 100%;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--seal);
  border-radius: 6px;
  background: var(--paper);
  color: inherit;
  font: inherit;
  font-weight: 700;
}
.kb-rename--title { max-width: 30rem; font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 800; }

.kb-icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.kb-icon:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.kb-icon svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.kb-menu {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  padding: 0.35rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.kb-menu button {
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}
.kb-menu button:hover:not(:disabled),
.kb-menu button:focus-visible { background: color-mix(in srgb, var(--ink) 9%, transparent); outline: none; }
.kb-menu button:disabled { opacity: 0.4; cursor: default; }

/* 대화상자 */
.kb-dialog {
  width: min(34rem, calc(100% - 2rem));
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9375rem;
}
.kb-dialog::backdrop { background: rgba(5, 12, 10, 0.6); }
.kb-dialog h2 { font-size: 1.0625rem; font-weight: 700; }
.kb-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.kb-dialog__text { margin-top: 0.6rem; color: var(--ink-soft); line-height: 1.6; }
.kb-dialog__list { margin: 0.75rem 0 0; padding-left: 1.1em; color: var(--ink-soft); line-height: 1.6; }
.kb-dialog__list strong { color: var(--ink); }
.kb-dialog__error { margin-top: 0.75rem; color: var(--seal); font-weight: 600; }
.kb-dialog__error[hidden],
.kb-dialog__actions[hidden],
.kb-view[hidden],
.kb-edit[hidden],
.kb-view__body[hidden],
.kb-view__labels[hidden] { display: none; }
.kb-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.5rem; }
.kb-spacer { flex: 1; }

.kb-field { display: grid; gap: 0.35rem; margin-top: 1rem; font-size: 0.8125rem; font-weight: 600; }
.kb-field input,
.kb-field textarea,
.kb-field select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--tile);
  color: inherit;
  font: inherit;
  font-weight: 400;
}
.kb-field textarea { min-height: 8rem; line-height: 1.6; resize: vertical; }
.kb-field__hint { color: var(--ink-soft); font-size: 0.75rem; font-weight: 400; }

.kb-check { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.kb-check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--seal); }
.kb-check__hint { color: var(--ink-soft); font-size: 0.75rem; font-weight: 400; }

.kb-colors { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-inline: 0; padding: 0; border: 0; }
.kb-colors legend { margin-bottom: 0.35rem; padding: 0; }
.kb-colors label { position: relative; }
.kb-colors input { position: absolute; inset: 0; opacity: 0; }
.kb-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
.kb-swatch::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--sw, transparent);
}
:is(.kb-swatch, .kb-dot)[data-color="red"] { --sw: #E2584C; }
:is(.kb-swatch, .kb-dot)[data-color="yellow"] { --sw: #E9B949; }
:is(.kb-swatch, .kb-dot)[data-color="green"] { --sw: #5DAE6B; }
:is(.kb-swatch, .kb-dot)[data-color="blue"] { --sw: #4D96D9; }
:is(.kb-swatch, .kb-dot)[data-color="purple"] { --sw: #9B7FE0; }
.kb-colors input:checked + .kb-swatch { border-color: var(--seal); box-shadow: inset 0 0 0 1px var(--seal); }
.kb-colors input:focus-visible + .kb-swatch { outline: 2px solid var(--seal); outline-offset: 2px; }

.kb-view__title { font-size: 1.0625rem; font-weight: 700; }
.kb-view__labels { margin-top: 0.5rem; }
.kb-view__body { margin-top: 0.75rem; line-height: 1.7; white-space: pre-wrap; }
.kb-view__meta { margin-top: 1rem; color: var(--ink-soft); font-size: 0.75rem; }

.kb-history { display: grid; max-height: 55vh; margin: 1rem 0 0; padding: 0; overflow: auto; list-style: none; }
.kb-history li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
}
.kb-history li div { display: grid; }
.kb-history span { color: var(--ink-soft); font-size: 0.75rem; }
.kb-history .kb-history__now { color: var(--seal); font-weight: 600; }
.kb-history .kb-history__empty { justify-content: flex-start; color: var(--ink-soft); }

@media (max-width: 560px) {
  .kb-col { flex: none; width: min(84vw, 18rem); min-width: 0; }
  .kb__actions { width: 100%; }
}