/* Flowlog PC 앱(/app/)의 PC 화면. 넓은 폭(900px 이상)에서만 보인다.
   휴대폰 화면과 달리 사이드바 + 위쪽 타이머 줄 + 내용 영역으로 된 데스크톱 앱 배치. */

@media (min-width: 900px) {
  :root {
    --d-bg: #f4f4f7;
    --d-side: #fbfbfc;
    --d-panel: #ffffff;
    --d-border: #e5e6eb;
    --d-border-soft: #eef0f3;
    --d-ink: #15171f;
    --d-body: #3d4250;
    --d-muted: #6b7080;
    --d-faint: #a0a4b0;
    --d-accent: #5140d8;
    --d-accent-hover: #4332c8;
    --d-accent-soft: #efedfd;
    --d-stop: #e5484d;
    --d-radius: 12px;
    --d-hour: 48px;
  }

  html, body { height: 100%; }
  body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--d-bg);
    color: var(--d-ink);
    font-size: 14px;
  }
  .app-note { flex: none; padding: 6px 16px; font-size: 12px; }
  .app-note .ms { font-size: 16px; }

  .d-shell { display: flex; flex: 1; min-height: 0; }
  .d-shell kbd {
    font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--d-faint);
    border: 1px solid var(--d-border);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 1px 5px;
    background: #fff;
  }

  /* ── 사이드바 ───────────────────────────────── */
  .d-side {
    width: 240px;
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--d-side);
    border-right: 1px solid var(--d-border);
    padding: 16px 12px 12px;
    overflow-y: auto;
  }
  .d-brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px 16px; }
  .d-brand b { font-size: 17px; letter-spacing: -0.01em; }
  .d-mark {
    width: 28px; height: 28px; border-radius: 8px;
    display: grid; place-items: center;
    background: var(--d-accent); color: #fff;
  }
  .d-mark .ms { font-size: 18px; }
  .d-badge {
    margin-left: auto;
    font-size: 11px; font-weight: 700;
    color: var(--d-accent); background: var(--d-accent-soft);
    border-radius: 6px; padding: 2px 7px;
  }
  .d-nav { display: flex; flex-direction: column; gap: 2px; }
  .d-nav-item {
    display: flex; align-items: center; gap: 10px;
    border: 0; background: transparent;
    padding: 8px 10px; border-radius: 8px;
    color: var(--d-body); font-size: 14px; font-weight: 600;
    text-align: left;
  }
  .d-nav-item .ms { font-size: 20px; color: var(--d-muted); font-variation-settings: "FILL" 0, "wght" 500; }
  .d-nav-item:hover { background: #f0f0f4; }
  .d-nav-item.active { background: var(--d-accent-soft); color: var(--d-accent); }
  .d-nav-item.active .ms { color: var(--d-accent); font-variation-settings: "FILL" 1, "wght" 500; }
  .d-count {
    margin-left: auto; min-width: 20px;
    font-size: 11px; font-weight: 700; text-align: center;
    background: #e8e8ee; color: var(--d-muted);
    border-radius: 999px; padding: 1px 6px;
  }
  .d-side-label {
    display: flex; align-items: center; justify-content: space-between;
    margin: 22px 10px 6px;
    color: var(--d-faint); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  }
  .d-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
  .d-cat {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    border: 0; background: transparent;
    padding: 6px 10px; border-radius: 8px;
    color: var(--d-body); font-size: 14px;
    text-align: left;
  }
  .d-cat:hover { background: #f0f0f4; }
  .d-cat .ic {
    width: 26px; height: 26px; border-radius: 7px; flex: none;
    display: grid; place-items: center;
  }
  .d-cat .ic .ms { font-size: 17px; }
  .d-cat .nm { flex: 1; min-width: 0; font-weight: 600; }
  .d-cat .tm { color: var(--d-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
  .d-cat kbd { margin-left: 2px; }
  .d-cat.running { background: #fff; box-shadow: inset 0 0 0 1px var(--d-border); }
  .d-cat.running .tm { color: var(--d-accent); font-weight: 700; }
  .d-cat.active-quick .tm { color: #d65a12; font-weight: 700; }
  .d-side-foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
  .d-sync {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px;
    background: #ecf7f0; color: #23784a; font-size: 12px; font-weight: 600;
  }
  .d-sync small { color: #5f9b78; font-weight: 500; }
  .d-sync .dot { width: 7px; height: 7px; border-radius: 50%; background: #2fb36a; box-shadow: 0 0 0 3px rgba(47, 179, 106, 0.18); }
  .d-foot-row { display: flex; align-items: center; gap: 4px; }
  .d-account {
    flex: 1; display: flex; align-items: center; gap: 8px;
    border: 0; background: transparent; padding: 6px 8px; border-radius: 8px;
    font-weight: 600; color: var(--d-body); text-align: left;
  }
  .d-account:hover { background: #f0f0f4; }
  .d-avatar { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a4a58, #111 70%); }
  .d-icon-btn {
    width: 32px; height: 32px; border: 0; border-radius: 8px;
    background: transparent; color: var(--d-muted);
    display: grid; place-items: center;
  }
  .d-icon-btn:hover { background: #f0f0f4; color: var(--d-accent); }
  .d-icon-btn .ms { font-size: 19px; }

  /* ── 위쪽 타이머 줄 ─────────────────────────── */
  .d-main { flex: 1; min-width: 0; overflow-y: auto; }
  .d-bar {
    position: sticky; top: 0; z-index: 20;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--d-border);
    transition: background 0.2s;
  }
  .d-bar.focus { background: rgba(255, 245, 238, 0.96); }
  .d-bar-row { display: flex; align-items: center; gap: 12px; padding: 12px 24px; }
  .d-catwrap { position: relative; flex: none; }
  .d-catpick {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--d-border); background: #fff;
    border-radius: 999px; padding: 6px 10px 6px 7px;
    font-weight: 700; color: var(--d-body);
  }
  .d-catpick:hover { border-color: #cfd1da; }
  .d-catpick .ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
  .d-catpick .ic .ms { font-size: 16px; }
  .d-catpick > .ms { font-size: 18px; color: var(--d-faint); }
  .d-entry { position: relative; flex: 1; min-width: 160px; display: flex; align-items: center; }
  .d-entry input {
    width: 100%;
    border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 18px; font-weight: 600; color: var(--d-ink);
    padding: 8px 4px;
  }
  .d-entry input::placeholder { color: var(--d-faint); font-weight: 500; }
  .d-entry-kbd { flex: none; }
  .d-entry input:focus + .d-entry-kbd { display: none; }
  .d-goal { flex: none; text-align: right; font-size: 12px; color: var(--d-muted); line-height: 1.35; font-variant-numeric: tabular-nums; }
  .d-goal b { display: block; color: var(--d-body); font-size: 12px; }
  .d-elapsed {
    flex: none; min-width: 108px; text-align: right;
    font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--d-ink);
  }
  .d-elapsed.idle { color: var(--d-faint); }
  .d-focus {
    flex: none;
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--d-border); background: #fff;
    border-radius: 999px; padding: 8px 12px;
    color: var(--d-muted); font-weight: 700; font-size: 13px;
    font-variant-numeric: tabular-nums;
  }
  .d-focus .ms { font-size: 18px; }
  .d-focus:hover { color: var(--d-accent); border-color: #cfd1da; }
  .d-focus.on { background: #ffe8d8; border-color: #ffc29d; color: #c4500e; }
  .d-focus:disabled { opacity: 0.4; }
  .d-go {
    flex: none;
    display: flex; align-items: center; gap: 6px;
    border: 0; border-radius: 999px;
    padding: 10px 18px 10px 14px;
    background: var(--d-accent); color: #fff;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(81, 64, 216, 0.28);
  }
  .d-go:hover { background: var(--d-accent-hover); }
  .d-go.stop { background: var(--d-stop); box-shadow: 0 4px 12px rgba(229, 72, 77, 0.28); }
  .d-go.stop:hover { background: #d63c41; }
  .d-go .ms { font-size: 20px; }
  .d-progress { height: 3px; background: transparent; }
  .d-progress i { display: block; height: 100%; width: 0; background: #f5c842; transition: width 0.5s; }
  .d-bar.focus .d-progress i { background: #ff7a2f; }

  .d-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    min-width: 220px; max-height: 360px; overflow-y: auto;
    background: #fff; border: 1px solid var(--d-border); border-radius: 10px;
    box-shadow: 0 16px 40px rgba(16, 24, 44, 0.14);
    padding: 6px;
  }
  .d-menu[hidden] { display: none; }
  .d-suggest { right: 0; }
  .d-menu-label { padding: 6px 8px 4px; color: var(--d-faint); font-size: 11px; font-weight: 700; }
  .d-menu-item {
    width: 100%; display: flex; align-items: center; gap: 10px;
    border: 0; background: transparent; border-radius: 7px;
    padding: 7px 8px; text-align: left; color: var(--d-body);
  }
  .d-menu-item:hover, .d-menu-item.hl { background: #f2f2f6; }
  .d-menu-item .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .d-menu-item .nm { flex: 1; font-weight: 600; }
  .d-menu-item .meta { color: var(--d-faint); font-size: 12px; }
  .d-menu-item.on .nm { color: var(--d-accent); }

  /* ── 공통 패널 ─────────────────────────────── */
  .d-view { display: none; padding: 20px 24px 40px; }
  .d-view.active { display: block; }
  .d-view-head { margin: 0 2px 14px; }
  .d-view-head h2 { margin: 0; font-size: 22px; }
  .d-panel {
    background: var(--d-panel);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius);
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 44, 0.04);
  }
  .d-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .d-panel-head h2 { margin: 0; font-size: 15px; font-weight: 800; }
  .d-sub { margin: 3px 0 0; color: var(--d-muted); font-size: 12px; font-weight: 500; }
  .d-head-actions { display: flex; gap: 6px; }
  .d-btn {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--d-border); background: #fff;
    border-radius: 8px; padding: 6px 11px;
    color: var(--d-body); font-weight: 600; font-size: 13px;
    white-space: nowrap;
  }
  .d-btn .ms { font-size: 17px; color: var(--d-muted); }
  .d-btn:hover:not(:disabled) { background: #f6f6f9; }
  .d-btn.primary { background: var(--d-accent); border-color: var(--d-accent); color: #fff; }
  .d-btn.primary .ms { color: #fff; }
  .d-btn.primary:hover { background: var(--d-accent-hover); }
  .d-link {
    display: inline-flex; align-items: center; gap: 2px;
    border: 0; background: transparent; color: var(--d-accent);
    font-weight: 700; font-size: 12px; padding: 2px 4px; border-radius: 6px;
  }
  .d-link .ms { font-size: 15px; }
  .d-link:hover { background: var(--d-accent-soft); }
  .d-mini-label { color: var(--d-faint); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; margin: 10px 0 4px; }
  .d-empty { color: var(--d-faint); font-size: 13px; padding: 10px 0; }

  /* ── 오늘: 하루 달력 ────────────────────────── */
  .d-today { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
  .d-right { display: flex; flex-direction: column; gap: 16px; }
  .d-day { padding-bottom: 6px; }
  .d-cal {
    height: calc(100vh - 230px);
    min-height: 420px;
    overflow-y: auto;
    margin: 0 -18px;
    padding: 8px 18px 12px 0;
    border-top: 1px solid var(--d-border-soft);
    scrollbar-width: thin;
  }
  .d-cal-inner { position: relative; height: calc(var(--d-hour) * 24); cursor: copy; }
  .d-hour {
    position: absolute; left: 0; right: 0; height: var(--d-hour);
    border-top: 1px solid var(--d-border-soft);
    pointer-events: none;
  }
  .d-hour::after { content: ""; position: absolute; left: 64px; right: 0; top: 50%; border-top: 1px dashed #f3f4f6; }
  .d-hour span {
    position: absolute; left: 12px; top: -8px;
    background: var(--d-panel); padding: 0 6px 0 0;
    color: var(--d-faint); font-size: 11px; font-variant-numeric: tabular-nums;
  }
  .d-hour:first-child span { top: 2px; }
  .d-block {
    position: absolute; left: 64px; right: 8px;
    border-radius: 7px;
    border-left: 3px solid;
    padding: 3px 10px;
    overflow: hidden;
    cursor: pointer;
    display: flex; align-items: baseline; gap: 8px;
    font-size: 13px; line-height: 1.35;
    transition: box-shadow 0.12s;
  }
  .d-block:hover { box-shadow: 0 2px 10px rgba(16, 24, 44, 0.14); z-index: 3; }
  .d-block b { font-weight: 700; color: var(--d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .d-block span { color: var(--d-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .d-block.tall { flex-direction: column; gap: 0; padding-top: 6px; }
  .d-block.tiny { padding-top: 0; padding-bottom: 0; }
  .d-block.tiny b, .d-block.tiny span { display: none; }
  .d-block.running {
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0 6px, transparent 6px 12px);
    border-bottom: 2px dashed;
  }
  .d-block .live {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--d-accent); font-weight: 700; font-size: 11px;
  }
  .d-block .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: d-pulse 1.4s ease-in-out infinite; }
  @keyframes d-pulse { 50% { opacity: 0.3; } }
  .d-plan {
    position: absolute; left: 64px; right: 8px;
    border: 1.5px dashed #b9bdc8; border-radius: 8px;
    background: repeating-linear-gradient(135deg, #f7f8fa 0 8px, #fff 8px 16px);
    z-index: 0;
  }
  .d-plan-tag {
    position: absolute; right: 8px; top: 6px; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--d-border); border-radius: 8px;
    padding: 4px 6px 4px 10px; font-size: 12px; color: var(--d-muted);
  }
  .d-plan-tag b { color: var(--d-body); }
  .d-plan-tag button {
    border: 0; border-radius: 6px; padding: 4px 8px;
    background: var(--d-accent-soft); color: var(--d-accent); font-weight: 700; font-size: 12px;
  }
  .d-now-line {
    position: absolute; left: 56px; right: 0; height: 0;
    border-top: 2px solid var(--d-stop); z-index: 4; pointer-events: none;
  }
  .d-now-line::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--d-stop); }
  .d-now-line span {
    position: absolute; left: -54px; top: -9px;
    background: var(--d-stop); color: #fff; border-radius: 4px;
    padding: 1px 5px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .d-ghost {
    position: absolute; left: 64px; right: 8px; height: calc(var(--d-hour) / 2);
    border-radius: 7px; border: 1.5px dashed var(--d-accent);
    background: rgba(81, 64, 216, 0.06);
    color: var(--d-accent); font-size: 12px; font-weight: 700;
    display: flex; align-items: center; padding: 0 10px;
    pointer-events: none; z-index: 2;
  }
  .d-ghost[hidden] { display: none; }

  /* ── 오늘: 요약·할 일 ───────────────────────── */
  .d-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .d-kpis.wide { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
  .d-kpi { background: #f7f7fa; border-radius: 10px; padding: 10px 12px; }
  .d-kpis.wide .d-kpi { background: var(--d-panel); border: 1px solid var(--d-border); padding: 14px 16px; }
  .d-kpi small { display: block; color: var(--d-muted); font-size: 12px; }
  .d-kpi b { display: block; margin-top: 2px; font-size: 18px; font-variant-numeric: tabular-nums; }
  .d-kpis.wide .d-kpi b { font-size: 22px; }
  .d-kpi em { font-style: normal; font-size: 12px; font-weight: 700; }
  .d-kpi em.up { color: #23784a; }
  .d-kpi em.down { color: #c2410c; }
  .d-stack { display: flex; height: 10px; border-radius: 99px; overflow: hidden; margin: 14px 0 10px; background: #eceef2; gap: 2px; }
  .d-stack i { display: block; height: 100%; }
  .d-breakdown { list-style: none; margin: 0; padding: 0; }
  .d-breakdown li { display: grid; grid-template-columns: 10px 1fr auto 44px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; }
  .d-breakdown .dot { width: 9px; height: 9px; border-radius: 50%; }
  .d-breakdown .tm { font-weight: 700; font-variant-numeric: tabular-nums; }
  .d-breakdown .pc { color: var(--d-faint); text-align: right; font-variant-numeric: tabular-nums; }

  .d-recommend {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid #ded9fb; border-radius: var(--d-radius);
    background: linear-gradient(90deg, #f3f1fe, #fbfaff);
    padding: 12px 14px; text-align: left;
  }
  .d-recommend > .ms { color: var(--d-accent); }
  .d-recommend > span:nth-child(2) { flex: 1; }
  .d-recommend small { display: block; color: var(--d-muted); font-size: 12px; }
  .d-recommend b { font-size: 15px; }
  .d-recommend-go { display: inline-flex; align-items: center; gap: 2px; color: var(--d-accent); font-weight: 700; font-size: 13px; }
  .d-recommend-go .ms { font-size: 18px; }
  .d-recommend:hover { border-color: #c7bff7; }

  .d-checks { list-style: none; margin: 0; padding: 0; }
  .d-check {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 6px; margin: 0 -6px; border-radius: 8px;
  }
  .d-check:hover { background: #f7f7fa; }
  .d-box {
    width: 18px; height: 18px; flex: none;
    border: 1.5px solid #c9ccd6; border-radius: 5px; background: #fff;
    display: grid; place-items: center; padding: 0; color: #fff;
  }
  .d-box .ms { font-size: 14px; font-variation-settings: "FILL" 1, "wght" 700; }
  .d-box.on { background: #33ad5e; border-color: #33ad5e; }
  .d-check .nm { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .d-check.done .nm { color: var(--d-faint); text-decoration: line-through; font-weight: 500; }
  .d-check .meta { color: var(--d-faint); font-size: 12px; white-space: nowrap; }
  .d-check .meta.soon { color: #c2410c; font-weight: 700; }
  .d-play {
    width: 26px; height: 26px; flex: none; border: 0; border-radius: 6px;
    background: var(--d-accent-soft); color: var(--d-accent);
    display: grid; place-items: center; opacity: 0;
  }
  .d-play .ms { font-size: 18px; }
  .d-check:hover .d-play, .d-card:hover .d-play, .d-play:focus-visible { opacity: 1; }
  .d-catdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }

  /* ── 기록 표 ───────────────────────────────── */
  .d-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .d-toolbar h2 { margin: 0 auto 0 0; font-size: 18px; }
  .d-search {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--d-border); border-radius: 8px; padding: 0 10px;
    background: #fff; width: 220px;
  }
  .d-search .ms { font-size: 18px; color: var(--d-faint); }
  .d-search input { border: 0; outline: 0; font: inherit; padding: 7px 0; width: 100%; }
  .d-select { font: inherit; font-size: 13px; border: 1px solid var(--d-border); border-radius: 8px; padding: 7px 10px; background: #fff; color: var(--d-body); }
  .d-table { width: 100%; border-collapse: collapse; font-size: 14px; }
  .d-table th {
    text-align: left; color: var(--d-muted); font-size: 12px; font-weight: 700;
    padding: 8px 10px; border-bottom: 1px solid var(--d-border);
    white-space: nowrap; user-select: none;
  }
  .d-table th[data-sort] { cursor: pointer; }
  .d-table th[data-sort]:hover { color: var(--d-ink); }
  .d-table th .ms { font-size: 15px; vertical-align: -3px; }
  .d-table td { padding: 9px 10px; border-bottom: 1px solid var(--d-border-soft); vertical-align: middle; }
  .d-table .num { text-align: right; font-variant-numeric: tabular-nums; }
  .d-table tbody tr:hover td { background: #fafafd; }
  .d-table .w-star { width: 34px; }
  .d-table .w-act { width: 84px; }
  .d-table .day-row td {
    background: #f7f7fa; color: var(--d-muted); font-size: 12px; font-weight: 700;
    padding: 7px 10px; border-bottom: 1px solid var(--d-border);
  }
  .d-table .day-row td span { float: right; font-variant-numeric: tabular-nums; }
  .d-table tbody tr.day-row:hover td { background: #f7f7fa; }
  .d-table .cat-cell { display: flex; align-items: center; gap: 8px; color: var(--d-body); white-space: nowrap; }
  .d-table .title-cell { font-weight: 600; cursor: pointer; }
  .d-table .title-cell:hover { color: var(--d-accent); }
  .d-table .time-cell { color: var(--d-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .d-table .live-row td { background: #faf9ff; }
  .d-table .live-tag { margin-left: 8px; color: var(--d-accent); font-size: 11px; font-weight: 700; }
  .d-row-act { display: flex; justify-content: flex-end; gap: 2px; opacity: 0; }
  .d-table tr:hover .d-row-act, .d-row-act:focus-within { opacity: 1; }
  .d-star { border: 0; background: transparent; color: #c9ccd6; padding: 2px; display: grid; place-items: center; border-radius: 6px; }
  .d-star .ms { font-size: 19px; font-variation-settings: "FILL" 0; }
  .d-star.on { color: #f5b301; }
  .d-star.on .ms { font-variation-settings: "FILL" 1; }
  .d-icon-btn.danger:hover { color: var(--d-stop); background: #fdecee; }
  .d-table.compact td, .d-table.compact th { padding: 8px 8px; }
  .d-table .diff.up { color: #23784a; font-weight: 700; }
  .d-table .diff.down { color: #c2410c; font-weight: 700; }

  /* ── 할 일 보드 ────────────────────────────── */
  .d-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; align-items: start; }
  .d-col { background: #ebebf0; border-radius: var(--d-radius); padding: 10px; }
  .d-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
  .d-col-head b { font-size: 14px; }
  .d-col-head .d-count { margin-left: 0; background: #dcdce4; }
  .d-col-head .d-icon-btn { margin-left: auto; width: 28px; height: 28px; }
  .d-col-list { display: flex; flex-direction: column; gap: 8px; }
  .d-card {
    background: #fff; border: 1px solid var(--d-border); border-radius: 10px;
    padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start;
  }
  .d-card:hover { border-color: #cfd1da; }
  .d-card .d-box { margin-top: 2px; }
  .d-card-body { flex: 1; min-width: 0; }
  .d-card-body b { display: block; font-size: 14px; overflow-wrap: anywhere; }
  .d-card.done .d-card-body b { color: var(--d-faint); text-decoration: line-through; font-weight: 600; }
  .d-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; color: var(--d-muted); font-size: 12px; }
  .d-card-meta .soon { color: #c2410c; font-weight: 700; }
  .d-chip-sm {
    border: 0; border-radius: 6px; padding: 2px 7px;
    background: var(--d-accent-soft); color: var(--d-accent); font-size: 11px; font-weight: 700;
  }
  .d-chip-sm.on { background: #e5f5ea; color: #23784a; }
  .d-card.running { border-color: var(--d-accent); box-shadow: 0 0 0 3px var(--d-accent-soft); }

  /* ── 통계 ─────────────────────────────────── */
  .d-stats { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .d-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; color: var(--d-muted); font-size: 12px; }
  .d-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .d-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; height: 280px; align-items: end; padding: 8px 4px 0; }
  .d-day-col { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 6px; height: 100%; }
  .d-day-col .bar-area { width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
  .d-day-col .total { font-size: 12px; color: var(--d-muted); font-variant-numeric: tabular-nums; }
  .d-day-col .bar-stack { width: 100%; max-width: 44px; display: flex; flex-direction: column-reverse; border-radius: 7px; overflow: hidden; gap: 1px; background: #fff; }
  .d-day-col .bar-stack i { display: block; width: 100%; }
  .d-day-col .lbl { font-size: 12px; color: var(--d-muted); font-variant-numeric: tabular-nums; }
  .d-day-col.today .lbl { color: var(--d-accent); font-weight: 800; }
  .d-day-col.today .bar-stack { outline: 2px solid var(--d-accent-soft); outline-offset: 2px; }

  /* ── 모달·토스트 위치 ───────────────────────── */
  .toast { bottom: 28px; left: calc(50% + 120px); }


  /* ── 실제 앱에서 더한 것 ── */
  a.d-brand { color: inherit; text-decoration: none; }
  a.d-btn, a.d-icon-btn { text-decoration: none; }
  .d-side-hint { font-size: 11px; font-weight: 500; color: var(--d-faint); text-transform: none; letter-spacing: 0; }
  .d-sync.bad { background: #fdecee; color: var(--d-stop); }
  .d-sync.bad .dot { background: var(--d-stop); box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.18); }
  .d-cancel {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--d-border); background: #fff; color: var(--d-muted);
    display: grid; place-items: center;
  }
  .d-cancel[hidden] { display: none; }
  .d-cancel:hover { color: var(--d-stop); border-color: #f3c2c4; }
  .d-cancel .ms { font-size: 18px; }
  .d-bar.paused .d-elapsed { color: var(--d-muted); }
  .d-goal .d-link { margin-left: 6px; }
  .d-box.readonly { cursor: default; }
  .d-card .d-card-del { opacity: 0; width: 28px; height: 28px; }
  .d-card:hover .d-card-del, .d-card-del:focus-visible { opacity: 1; }
  .d-toolbar h2 small { font-size: 12px; font-weight: 600; margin-left: 6px; }
  .d-view-head .d-sub.notice { color: #c2410c; font-weight: 700; }

  @media (max-width: 1279px) {
    .d-today { grid-template-columns: minmax(0, 1fr); }
    .d-right { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
    .d-recommend { grid-column: 1 / -1; order: -1; }
    .d-cal { height: 620px; }
    .d-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .d-stats { grid-template-columns: minmax(0, 1fr); }
    .d-kpis.wide { grid-template-columns: repeat(2, 1fr); }
    .d-goal { display: none; }
  }
  @media (max-width: 1060px) {
    .d-side { width: 200px; }
    .d-cat kbd { display: none; }
    .d-entry-kbd { display: none; }
    .d-focus span:last-child { display: none; }
    .toast { left: calc(50% + 100px); }
  }
}