/* inbox — 새벽에 들여다보는 개인 수신함. 다크는 짙은 잉크 바탕, 라이트는 따뜻한 종이 바탕에 호박색 액센트.
   색은 모두 아래 변수로만 쓴다. 반투명 색은 color-mix 로 같은 변수에서 뽑아 테마를 따라가게 한다.
   data-theme 은 레이아웃 머리의 스크립트가 정한다(고른 것 → 없으면 PC 설정). */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --ink:          #0d0f13;   /* 바탕 */
  --ink-raised:   #14171d;   /* 입력칸·카드 */
  --ink-line:     #222732;   /* 선 */
  --line-strong:  #313846;
  --paper:        #e7e4dc;   /* 글자 */
  --paper-strong: #ffffff;
  --paper-dim:    #8b8e97;
  --placeholder:  #4d525e;
  --amber:        #e0a24a;
  --on-amber:     #23180a;
  --coral:        #e2685f;
  --teal:         #5fb3a8;
  --violet:       #8d84c4;
  --faded:        #5a606e;

  --sans: "IBM Plex Sans KR", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "IBM Plex Mono", "D2Coding", ui-monospace, "SFMono-Regular", monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink:          #f4f1ea;
  --ink-raised:   #fffdf8;
  --ink-line:     #ddd7ca;
  --line-strong:  #c6bfae;
  --paper:        #1d2027;
  --paper-strong: #000000;
  --paper-dim:    #62666e;
  --placeholder:  #a6a49d;
  --amber:        #a8660f;
  --on-amber:     #fffaf0;
  --coral:        #c2412f;
  --teal:         #2a7d71;
  --violet:       #5d53a0;
  --faded:        #9a9ca3;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  /* 종이 결 대신 아주 옅은 빛 번짐 — 새벽 책상 스탠드 */
  background-image:
    radial-gradient(60rem 30rem at 15% -10%, color-mix(in srgb, var(--amber) 7%, transparent), transparent 70%),
    radial-gradient(40rem 24rem at 95% 0%, color-mix(in srgb, var(--teal) 5%, transparent), transparent 70%);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* 머리글 바탕을 화면 끝까지 늘려도 가로 스크롤이 생기지 않게 */
}

a { color: var(--amber); text-decoration-color: color-mix(in srgb, var(--amber) 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--amber); }

.muted { color: var(--paper-dim); font-weight: 400; }
.meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--paper-dim);
  margin: .35rem 0 0;
}

/* ── 잠긴 화면 ─────────────────────────────────────── */

.locked {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: .25rem;
  max-width: 26rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  animation: rise .5s cubic-bezier(.2, .7, .3, 1) both;
}
.locked h1 {
  font-family: var(--mono);
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -.055em;
  margin: 0;
}
.locked h1::after {
  content: "_";
  color: var(--amber);
  animation: blink 1.3s steps(1) infinite;
}
.locked > .muted { margin: 0 0 1.75rem; }

.locked-form { display: flex; gap: .5rem; width: 100%; }
.locked-form input[type="password"] {
  flex: 1;
  min-width: 0;
  padding: .7rem .85rem;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: 3px;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.locked-form input:focus {
  outline: 0;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 13%, transparent);
}
.locked-form input::placeholder { color: var(--placeholder); }

.locked-form input[type="submit"] {
  padding: .7rem 1.2rem;
  background: var(--amber);
  color: var(--on-amber);
  border: 0;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.locked-form input[type="submit"]:hover { filter: brightness(1.1); }
.locked-form input[type="submit"]:active { transform: translateY(1px); }

.error {
  margin: .9rem 0 0;
  color: var(--coral);
  font-family: var(--mono);
  font-size: 12.5px;
}

/* ── 대시보드 ─────────────────────────────────────── */

/* 칸 색 — 폰 앱(BraIN)과 같은 값. 각 요소가 --lane 을 골라 쓴다 */
.lane-doing   { --lane: var(--teal); }
.lane-urgent  { --lane: var(--coral); }
.lane-backlog { --lane: var(--paper); }
.lane-later   { --lane: var(--paper-dim); }
.lane-done    { --lane: var(--faded); }

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

/* 리스트·칸반·수신함 모두 같은 폭. 칸반 다섯 칸이 들어가되 화면 끝까지 퍼지지는 않게 */
.board { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem 5rem; }

.board-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
  padding: 1.4rem 0 1rem;
}
/* 머리글 바탕은 화면 양끝까지 — 가운데 폭에만 칠하면 바탕 빛이 네모나게 잘려 보인다 */
.board-head::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: linear-gradient(var(--ink) 72%, transparent);
}
.board-head h1 {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -.05em;
  margin: 0;
}
.badge {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--paper-dim);
  border: 1px solid var(--ink-line);
  border-radius: 99px;
  padding: .15rem .6rem;
}
.badge b { color: var(--amber); font-weight: 600; }

/* 리스트 / 칸반 / 수신함 */
.tabs {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  overflow: hidden;
}
.tabs a {
  padding: .3rem .85rem;
  font-size: 12.5px;
  color: var(--paper-dim);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.tabs a + a { border-left: 1px solid var(--ink-line); }
.tabs a:hover { color: var(--paper); }
.tabs a[aria-current="true"] { background: var(--ink-raised); color: var(--amber); }

/* 지금 테마의 반대쪽 아이콘을 보여준다(누르면 그쪽으로) */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  color: var(--paper-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--amber); border-color: var(--paper-dim); }
.theme-toggle .to-dark { display: none; }
:root[data-theme="light"] .theme-toggle .to-light { display: none; }
:root[data-theme="light"] .theme-toggle .to-dark { display: inline; }

form.logout-form { margin: 0; }
.logout {
  background: none;
  border: 0;
  padding: .2rem .1rem;
  color: var(--paper-dim);
  font-family: var(--sans);
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.logout:hover { color: var(--paper); border-bottom-color: var(--ink-line); }

.flash {
  margin: .2rem 0 1rem;
  padding: .6rem .85rem;
  border-left: 2px solid var(--coral);
  background: color-mix(in srgb, var(--coral) 8%, transparent);
  color: var(--coral);
  font-size: 13.5px;
}

/* 할 일 추가 */
.add-form { margin-top: .4rem; }
.add-row { display: flex; gap: .5rem; }
.add-row input[type="text"], .add-row input[type="url"], .capture-add-form textarea, .capture-caption, .edit-form input[type="text"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: .75rem .9rem;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: 3px;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.add-row input:focus, .edit-form input[type="text"]:focus {
  outline: 0;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 13%, transparent);
}
.add-row input::placeholder { color: var(--placeholder); }

.add-row input[type="submit"], .primary {
  padding: .7rem 1.3rem;
  background: var(--amber);
  color: var(--on-amber);
  border: 0;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.add-row input[type="submit"]:hover, .primary:hover { filter: brightness(1.1); }
.add-row input[type="submit"]:active, .primary:active { transform: translateY(1px); }

.lane-choices {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.1rem;
  margin: .55rem 0 0;
  padding: 0;
  border: 0;
}
.lane-choices label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 13px;
  color: var(--lane, var(--amber));
  cursor: pointer;
}
.lane-choices input { accent-color: var(--amber); margin: 0; }
.lane-choices .muted { font-size: 12px; }

.capture-add-form textarea { resize: vertical; }
.capture-caption { margin-top: .5rem; }
.image-upload-field { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .75rem .9rem; border: 1px solid var(--ink-line); border-radius: 3px; font-size: 12px; }
.image-upload-field input { max-width: 100%; font: inherit; color: var(--paper-dim); }
.capture-type-filters { margin-top: .65rem; }

.board section { margin-top: 2rem; }
.board h2 {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 0 0 .6rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--ink-line);
}
.board h2 .muted { font-family: var(--mono); letter-spacing: 0; text-transform: none; }
.empty { margin: 1rem 0; }

/* 칸 필터 — 앱의 칩 줄 */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-bottom: .4rem;
}
.filters a {
  padding: .3rem .7rem;
  border-radius: 99px;
  font-size: 12.5px;
  color: var(--paper-dim);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.filters a:hover { color: var(--paper); }
.filters a[aria-current="true"] { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }

.group-head {
  margin: 1.2rem 0 .1rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--lane);
}
.group-head .muted { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }

.captures, .tasks, .cards { list-style: none; margin: 0; padding: 0; }

/* 할 일 한 줄 */
.task {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-line) 55%, transparent);
  animation: rise .45s cubic-bezier(.2, .7, .3, 1) both;
}
.check-form { margin: 0; flex: none; }
.check {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.check-mark {
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--paper-dim);
  border-radius: 99px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.check:hover .check-mark { border-color: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 15%, transparent); }
.is-done .check-mark { background: var(--faded); border-color: var(--faded); }
.is-done .check:hover .check-mark { background: none; border-color: var(--amber); }

.lane {
  flex: none;
  width: 4rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--lane);
}

.task-title {
  flex: 1;
  min-width: 0;
  padding: .35rem 0;
  color: var(--paper);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.task-title:hover { color: var(--paper-strong); text-decoration: underline; text-decoration-color: var(--ink-line); }
.is-done .task-title { color: var(--faded); text-decoration: line-through; }

/* ── 칸반 ─────────────────────────────────────────── */

.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(11rem, 1fr));
  gap: .8rem;
  align-items: start;
  overflow-x: auto;
  padding-bottom: .4rem;
}
.kanban-move { display: none; }

.column {
  min-height: 12rem;
  padding: .7rem .6rem .8rem;
  background: color-mix(in srgb, var(--ink-raised) 60%, transparent);
  border: 1px solid var(--ink-line);
  border-top: 2px solid var(--lane);
  border-radius: 4px;
  transition: background .15s, border-color .15s;
}
.column.is-over { background: color-mix(in srgb, var(--amber) 7%, transparent); border-color: color-mix(in srgb, var(--amber) 50%, transparent); }
.board .column-head {
  margin: 0 0 .5rem;
  padding: 0 .25rem .5rem;
  color: var(--lane);
  letter-spacing: .12em;
}

.cards { display: grid; gap: .45rem; }
.card {
  gap: .35rem;
  padding: .25rem .5rem .25rem .15rem;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: 3px;
  cursor: grab;
}
.card:hover { border-color: var(--line-strong); }
.card.is-dragging { opacity: .4; }
.card .task-title { font-size: 14px; line-height: 1.45; }

/* ── 수신함 ───────────────────────────────────────── */

/* 들어온 순서대로 아래로 흐르는 느낌 — 왼쪽에 얇은 기준선 */
.captures li {
  position: relative;
  display: flex;
  gap: .85rem;
  padding: .9rem .4rem .9rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-line) 55%, transparent);
  animation: rise .45s cubic-bezier(.2, .7, .3, 1) both;
  transition: background .15s;
}
.captures li:hover { background: color-mix(in srgb, var(--ink-raised) 70%, transparent); }
.captures li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 12%, transparent);
}
.captures li.done::before { background: var(--ink-line); box-shadow: none; }
.captures li.done { color: var(--paper-dim); }
.captures li.done a { color: var(--paper-dim); }

/* 줄 전체를 상세로 가는 링크로 덮고, 링크 주소와 삭제 버튼만 그 위로 올린다 */
.row-link { position: absolute; inset: 0; z-index: 1; }
.capture-url { position: relative; z-index: 2; }

.row-delete-form { position: relative; z-index: 2; flex: none; align-self: center; margin: 0; }
.row-delete {
  padding: .3rem .6rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--paper-dim);
  font-family: var(--sans);
  font-size: 12.5px;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.captures li:hover .row-delete, .row-delete:focus-visible { opacity: 1; }
.row-delete:hover {
  color: var(--coral);
  border-color: color-mix(in srgb, var(--coral) 40%, transparent);
  background: color-mix(in srgb, var(--coral) 8%, transparent);
}

.kind {
  flex: none;
  align-self: start;
  margin-top: .15rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .15rem .45rem;
  border-radius: 2px;
  border: 1px solid currentColor;
  opacity: .8;
}
.kind-link { color: var(--amber); }
.kind-memo { color: var(--teal); }
.kind-image { color: var(--violet); }
.kind-file { color: var(--violet); }
.capture-files { margin: .6rem 0; }
.capture-files a { position: relative; z-index: 2; }
.capture-files p { margin: .35rem 0; }
.capture-category { color: var(--violet); font-size: 12px; font-weight: 600; }

.capture-images { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0; }
.capture-images a { position: relative; z-index: 2; }
.capture-images img { display: block; max-width: 100%; max-height: 24rem; border: 1px solid var(--ink-line); border-radius: 3px; }
.captures .capture-images img { max-width: 12rem; max-height: 8rem; object-fit: contain; }

.capture-body { min-width: 0; flex: 1; }
.capture-body a {
  font-family: var(--mono);
  font-size: 12.5px;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.capture-body p { margin: .2rem 0 0; overflow-wrap: anywhere; }
.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.summary {
  margin-top: .5rem !important;
  padding-left: .8rem;
  border-left: 2px solid color-mix(in srgb, var(--violet) 50%, transparent);
  color: var(--violet);
  font-size: 14px;
}

/* ── 고치기 · 상세 ────────────────────────────────── */

.sheet {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
  animation: rise .4s cubic-bezier(.2, .7, .3, 1) both;
}
.sheet h1 { font-size: 1.25rem; font-weight: 600; margin: 1.2rem 0 1rem; }
.back { font-size: 13px; color: var(--paper-dim); text-decoration: none; }
.back:hover { color: var(--paper); }

.field-label {
  display: block;
  margin: 1.1rem 0 .45rem;
  padding: 0;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--paper-dim);
}
.edit-form .lane-choices { margin-top: 1.2rem; }
.edit-form .lane-choices legend { margin-top: 0; }

.sheet-actions { display: flex; align-items: center; gap: .6rem; margin-top: 1.6rem; }
.quiet {
  padding: .7rem 1rem;
  background: none;
  border: 1px solid var(--ink-line);
  border-radius: 3px;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s;
}
.quiet:hover { border-color: var(--paper-dim); }

.delete-form { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--ink-line); }
.danger {
  padding: .5rem .9rem;
  background: none;
  border: 1px solid color-mix(in srgb, var(--coral) 40%, transparent);
  border-radius: 3px;
  color: var(--coral);
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
}
.danger:hover { background: color-mix(in srgb, var(--coral) 10%, transparent); }

.capture-head { display: flex; align-items: center; gap: .7rem; margin: 1.4rem 0 .9rem; }
.capture-head .kind { margin-top: 0; }
.capture-head .meta { margin: 0; }
.capture-full { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.75; }
.capture-url-full {
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--amber);
  overflow-wrap: anywhere;
}

/* 로드될 때 위에서부터 차례로 — 줄 수가 많아도 8줄까지만 계단식 */
.captures li:nth-child(1), .tasks li:nth-child(1) { animation-delay: .02s; }
.captures li:nth-child(2), .tasks li:nth-child(2) { animation-delay: .05s; }
.captures li:nth-child(3), .tasks li:nth-child(3) { animation-delay: .08s; }
.captures li:nth-child(4), .tasks li:nth-child(4) { animation-delay: .11s; }
.captures li:nth-child(5), .tasks li:nth-child(5) { animation-delay: .14s; }
.captures li:nth-child(6), .tasks li:nth-child(6) { animation-delay: .17s; }
.captures li:nth-child(7), .tasks li:nth-child(7) { animation-delay: .20s; }
.captures li:nth-child(n+8), .tasks li:nth-child(n+8) { animation-delay: .23s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 34rem) {
  .board, .sheet { padding-left: 1.1rem; padding-right: 1.1rem; }
  .tabs { margin-left: 0; }
  .lane { width: 3.2rem; }
  .kanban { grid-template-columns: repeat(5, minmax(15rem, 80vw)); }
}