/* daily-todo — Apple 기준 미니멀 (ClaudeWork\design-system\DESIGN.md 토큰)
   흰 배경 + 잉크 텍스트 + 단일 Action Blue. UI 그림자 없음.
   파스텔은 항목 구분용 하이라이트로만 쓴다. 외부 폰트·CDN 사용 안 함(중국 접속 대응). */

:root {
  --primary: #0066cc;
  --primary-focus: #0071e3;
  --ink: #1d1d1f;
  --ink-muted-80: #333333;
  --ink-muted-48: #7a7a7a;
  --canvas: #ffffff;
  --parchment: #f5f5f7;
  --hairline: #e0e0e0;
  --divider-soft: #f0f0f0;

  --sp-xxs: 4px;  --sp-xs: 8px;  --sp-sm: 12px;
  --sp-md: 17px;  --sp-lg: 24px; --sp-xl: 32px;

  --r-sm: 8px; --r-md: 11px; --r-lg: 18px; --r-pill: 9999px;

  --font: system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
}

.hidden { display: none !important; }

/* ── 상단바 ── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  padding-top: calc(var(--sp-sm) + env(safe-area-inset-top));
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--divider-soft);
}
.topbar h1 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: 0.231px; }
.topbar-right { display: flex; align-items: center; gap: var(--sp-sm); }
.who { font-size: 14px; color: var(--ink-muted-48); letter-spacing: -0.224px; }
.topbar-right form { margin: 0; }

.linkbtn {
  background: none; border: 0; padding: var(--sp-xs) 0;
  color: var(--primary); font: inherit; font-size: 14px; cursor: pointer;
}
.linkbtn:active { transform: scale(0.95); }

.wrap { max-width: 720px; margin: 0 auto; padding: var(--sp-lg) var(--sp-md) 0; }

/* ── 입력 박스 ── */
.composer {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-sm) var(--sp-md) var(--sp-sm);
  margin-bottom: var(--sp-xl);
}
.composer textarea {
  width: 100%; border: 0; outline: none; resize: none;
  font-family: var(--font); font-size: 17px; line-height: 1.47;
  letter-spacing: -0.374px; color: var(--ink);
  background: transparent; padding: var(--sp-xs) 0;
  max-height: 40vh;
}
.composer textarea::placeholder { color: var(--ink-muted-48); }
.composer-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-sm); padding-top: var(--sp-xs);
}
.hint { font-size: 14px; color: var(--ink-muted-48); letter-spacing: -0.224px; }

.btn-primary {
  background: var(--primary); color: #fff; border: 0;
  border-radius: var(--r-pill); padding: 11px 22px;
  font-family: var(--font); font-size: 17px; letter-spacing: -0.374px;
  cursor: pointer; min-height: 44px;
}
.btn-primary:active { transform: scale(0.95); }
.btn-primary:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
.btn-primary[disabled] { background: var(--parchment); color: var(--ink-muted-48); cursor: default; }
.btn-block { width: 100%; }

/* ── 섹션 ── */
.section-title {
  margin: 0 0 var(--sp-sm);
  font-size: 14px; font-weight: 600; letter-spacing: -0.224px;
  color: var(--ink-muted-48);
}
.pinned { margin-bottom: var(--sp-xl); }

.date-group { margin-bottom: var(--sp-xl); }
.date-head {
  display: flex; align-items: baseline; gap: var(--sp-xs);
  margin: 0 0 var(--sp-sm);
}
.date-head .d-label { font-size: 21px; font-weight: 600; letter-spacing: 0.231px; }
.date-head .d-sub { font-size: 14px; color: var(--ink-muted-48); letter-spacing: -0.224px; }

/* ── 목록 ── */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-xs); }

.item {
  display: flex; align-items: flex-start; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-md);
  border-left: 4px solid transparent;
  background: var(--parchment);
}

.check { flex: none; display: flex; align-items: center; padding-top: 2px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  display: block; width: 22px; height: 22px; border-radius: var(--r-pill);
  border: 1.5px solid var(--ink-muted-48); background: transparent;
}
.check input:checked + .box {
  background: var(--primary); border-color: var(--primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 16px 16px; background-position: center; background-repeat: no-repeat;
}
.check input:focus-visible + .box { outline: 2px solid var(--primary-focus); outline-offset: 2px; }

.body { flex: 1 1 auto; min-width: 0; }
.body .text { display: block; white-space: pre-wrap; word-break: break-word; }

.actions { flex: none; display: flex; align-items: center; gap: var(--sp-xxs); }
.iconbtn {
  background: none; border: 0; padding: 6px 8px; min-height: 32px;
  font-family: var(--font); font-size: 14px; letter-spacing: -0.224px;
  color: var(--ink-muted-48); cursor: pointer; border-radius: var(--r-sm);
}
.iconbtn:active { transform: scale(0.95); }
.act-pin { font-size: 15px; filter: grayscale(1); opacity: 0.5; }
.item.is-pinned .act-pin { filter: none; opacity: 1; }

/* 완료 = 비활성 */
.item.is-done { background: #fbfbfd; border-left-color: var(--divider-soft) !important; }
.item.is-done .body .text { color: var(--ink-muted-48); text-decoration: line-through; }

/* 파스텔 하이라이트 (PALETTE_SIZE = 8, app.py 와 일치) */
.c0 { background: #fff3e3; border-left-color: #f2c68a; }
.c1 { background: #e7f2fd; border-left-color: #8fbeea; }
.c2 { background: #e6f5ea; border-left-color: #92cca6; }
.c3 { background: #fdecef; border-left-color: #eda3b2; }
.c4 { background: #f0edfb; border-left-color: #b3a6e0; }
.c5 { background: #fcf6dc; border-left-color: #dfc96a; }
.c6 { background: #e3f4f4; border-left-color: #86c4c4; }
.c7 { background: #f2efe7; border-left-color: #c7b79a; }

.empty { color: var(--ink-muted-48); font-size: 14px; text-align: center; padding: var(--sp-xl) 0; }

/* ── 토스트 ── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--ink); color: #fff;
  font-size: 14px; letter-spacing: -0.224px;
  padding: 10px 18px; border-radius: var(--r-pill);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 50; max-width: 88vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 로그인 ── */
.login-body { background: var(--canvas); }
.login-wrap {
  max-width: 340px; margin: 0 auto;
  padding: 18vh var(--sp-lg) var(--sp-lg);
}
.login-title {
  margin: 0 0 var(--sp-xl); text-align: center;
  font-size: 34px; font-weight: 600; letter-spacing: -0.374px;
}
.login-form { display: grid; gap: var(--sp-sm); }
.login-form input {
  width: 100%; min-height: 44px;
  padding: 12px 20px; border: 1px solid var(--hairline);
  border-radius: var(--r-pill); background: var(--canvas); color: var(--ink);
  font-family: var(--font); font-size: 17px; letter-spacing: -0.374px;
}
.login-form input:focus { outline: 2px solid var(--primary-focus); outline-offset: 1px; }
.login-error {
  margin: 0 0 var(--sp-sm); text-align: center;
  font-size: 14px; color: #b3261e; letter-spacing: -0.224px;
}

/* ── 데스크톱 ── */
@media (min-width: 736px) {
  .wrap { padding-top: var(--sp-xl); }
}