/* Studio_B 화면 스타일 — 데스크톱(index.html)과 웹(web/app.html)이 한 벌을 함께 쓴다.
 *
 * 예전에는 두 파일이 각자 <style>을 들고 있었다. 한쪽만 고치면 다른 쪽은
 * 그대로 남는데 눈에 띄지 않아, 실제로 서른세 줄이 어긋난 채 굴러갔다
 * (웹에만 단추 글자 줄바꿈 방지가 빠져 «보내보 / 기»처럼 끊겼다).
 * 이제 이 파일 하나만 고치면 양쪽에 같이 간다 — scripts/sync-web.js가 옮긴다.
 *
 * 웹에서만 다른 몇 줄은 web/app.html 안에 남겨 두었다(창 끌기·신호등 자리).
 */
  :root {
    --bg: #f2f4f7;
    --surface: #fbfcfd;
    --surface-2: #e9edf2;
    --ink: #1d2530;
    --ink-soft: #55606e;
    /* 가장 흐린 글자 — 파일 크기, 개수, 안내 문구가 이 색이다.
       예전 #8b95a3는 밝은 바탕에서 2.75:1이라 큰 글자 기준(3.0)에도 못 미쳤다.
       재 보고 고른 값이다 — 바탕에서 4.57, 칸 위에서 4.90. */
    --ink-faint: #6a7078;
    --line: #d7dde5;
    --accent: #1e22cf;
    --accent-ink: #f5f7fb;
    --accent-soft: #e6e6fb;
    --danger: #a63d2f;
    --pin: #b98914;
    --shadow: 0 1px 2px rgba(29, 37, 48, 0.06), 0 8px 24px rgba(29, 37, 48, 0.07);
  }
  /* ── 브라우저가 직접 그리는 것들 ──
     시각 고르개의 시계, 체크상자, 스크롤 막대, 숫자칸의 화살표, 파일 고르기
     단추 — 이것들은 우리 색 변수를 모른다. 아는 것은 «지금이 밝은 화면인가
     어두운 화면인가» 하나뿐이고, 그것을 안 알려 주면 늘 밝은 쪽으로 그린다.
     그래서 어두운 바탕에 «검은» 시계 아이콘이 얹혀 안 보였다.

     세 경우를 다 덮는다:
       아무것도 안 골랐을 때 → 컴퓨터 설정을 따른다
       직접 어둡게 골랐을 때 → 어둡게
       직접 밝게 골랐을 때   → 밝게 (컴퓨터가 어두워도) */
  :root { color-scheme: light; }
  @media (prefers-color-scheme: dark) {
    :root { color-scheme: dark; }
  }
  :root[data-theme-mode="dark"] { color-scheme: dark; }
  :root[data-theme-mode="light"] { color-scheme: light; }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #151920;
      --surface: #1d232c;
      --surface-2: #242b36;
      --ink: #e6eaf0;
      --ink-soft: #a6b0bd;
      /* 어두운 쪽도 칸 위에서 3.53:1이라 모자랐다 — 바탕 5.07, 칸 4.55로 올린다 */
      --ink-faint: #868a90;
      --line: #313a47;
      --accent: #7b7ef2;
      --accent-ink: #131a28;
      --accent-soft: #2b2d63;
      --danger: #e08575;
      --pin: #d9ad3c;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    }
  }

  /* 사용자가 고른 배경색의 밝기에 따라 전체 팔레트를 강제 전환 */
  :root[data-theme-mode="light"] {
    --surface: #fbfcfd;
    --surface-2: #e9edf2;
    --ink: #1d2530;
    --ink-soft: #55606e;
    --ink-faint: #8b95a3;
    --line: #d7dde5;
    --accent: #1e22cf;
    --accent-ink: #f5f7fb;
    --accent-soft: #e6e6fb;
    --danger: #a63d2f;
    --pin: #b98914;
    --shadow: 0 1px 2px rgba(29, 37, 48, 0.06), 0 8px 24px rgba(29, 37, 48, 0.07);
  }
  :root[data-theme-mode="dark"] {
    --surface: #1d232c;
    --surface-2: #242b36;
    --ink: #e6eaf0;
    --ink-soft: #a6b0bd;
    --ink-faint: #6d7887;
    --line: #313a47;
    --accent: #7b7ef2;
    --accent-ink: #131a28;
    --accent-soft: #2b2d63;
    --danger: #e08575;
    --pin: #d9ad3c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    user-select: none;
  }
  input, textarea { user-select: text; }

  /* ── 바탕 그림 ──
     낙서 그림 한 장을 화면 전체에 아주 흐리게 깐다. 종이의 물결 무늬처럼
     «있는 줄 모르지만 허전하지는 않은» 세기다.

     왜 body에 직접 안 붙이고 ::before인가 —
     background-image를 body에 얹으면 흐리게 할 방법이 없다. opacity는 글자까지
     같이 흐려 버리고, 반투명 덮개를 gradient로 겹치면 이번엔 어두운 화면에서
     그림을 뒤집을 수가 없다(filter는 배경 층 하나만 골라 걸 수 없다).
     그래서 그림만 담은 판을 하나 따로 깔고, 그 판에만 opacity와 filter를 건다.

     z-index: -1이 안전한 까닭 —
     body에 배경이 있고 html에는 없으면, body의 배경색은 제 상자에 그려지지 않고
     화면 바탕(canvas)으로 넘어간다. 음수 z-index 층은 그 바탕 바로 위, 모든
     내용물 아래에 놓인다. 그래서 색은 그대로 깔리고, 그림은 그 위에, 글과 칸은
     또 그 위에 온다. html에 background를 주는 순간 이 순서가 깨진다 — 주지 말 것.

     보드의 분류 칸은 --surface로 불투명하니 그림이 비치지 않는다. 그림은
     칸과 칸 사이 여백에서만 보인다 — 일하는 자리는 건드리지 않는다. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("img/bg-doodle.jpg?h=fdc5be65");
    /* 지금 그림은 좌우로 이어지도록 그려진 «무늬»(1280×758)다. 한 장짜리
       그림이 아니라서, 화면 비율에 맞춰 늘이거나(cover) 맞춰 넣으면(contain)
       화면 크기마다 선 굵기가 달라진다 — 넓은 창에서는 흐릿하게 늘어지고
       폰에서는 잘게 뭉갠다. 그래서 «크기를 정해 두고 이어 붙인다».
       620px까지만 키우고, 그보다 좁은 화면에서는 화면 폭에 맞춘다
       — 폰에서 무늬가 지나치게 확대돼 보이지 않게 하려는 것이다.
       이 숫자가 곧 «선 굵기»다. 작게 깔수록 선이 가늘어진다 — 처음에 900으로
       뒀더니 선이 굵어 눈에 걸렸다. 진하기 기본값(5%)과 함께 낮춘 것이다. */
    background-size: min(100%, 620px) auto;
    background-position: center top;
    background-repeat: repeat;
    /* 세기는 설정에서 정한다. 못 읽어 온 경우를 위해 기본값을 여기 둔다. */
    opacity: var(--bg-art, 0.05);
    pointer-events: none;
  }
  /* 끈 경우 — 아예 안 그린다(그림도 안 받는다) */
  :root[data-bg-art="off"] body::before { display: none; background-image: none; }

  /* 어두운 화면에서는 뒤집는다. 그러지 않으면 «검은 선 + 미색 종이»가 그대로
     얹혀 바탕이 뿌옇게 뜨고, 정작 그림의 선은 어둠에 묻혀 안 보인다.
     밝은 쪽보다 조금 더 진하게 둔다 — 뒤집은 선은 눈에 덜 띈다. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme-mode="light"]) body::before {
      filter: invert(1);
      opacity: calc(var(--bg-art, 0.05) * 1.3);
    }
  }
  :root[data-theme-mode="dark"] body::before {
    filter: invert(1);
    opacity: calc(var(--bg-art, 0.05) * 1.3);
  }

  /* 배경색 팝업 안의 «그림 배경» 줄 */
  .bg-art-row { align-items: center; }
  .bg-art-on { display: flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
  .bg-art-row input[type="range"] { flex: 1 1 auto; min-width: 70px; accent-color: var(--accent); }
  #bg-art-pct { min-width: 30px; text-align: right; }

  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  input, textarea, select { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

  .app {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100dvh;
  }

  /* ── Header (창 드래그 영역) ─────────── */
  header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 32px 16px 10px; /* 위: macOS 신호등 버튼 줄 */
    border-bottom: 1px solid var(--line);
    -webkit-app-region: drag;
    /* 머리줄에는 바탕 그림을 들이지 않는다. 단추가 촘촘히 놓인 자리라
       뒤에 그림이 있으면 글자와 선이 서로 섞여 읽기 어려워진다.
       투명하게 두면 body::before가 그대로 비치므로 색을 깐다. */
    background: var(--bg);
  }
  header button, header input, header label { -webkit-app-region: no-drag; }
  .brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
  .brand h1 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--accent); cursor: pointer; }
  .brand h1:hover { opacity: 0.72; }
  .ver-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-faint);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1px 8px;
    cursor: pointer;
  }
  .ver-badge:hover { color: var(--accent); border-color: var(--accent); }
  .upd-badge {
    font-size: 11px; font-weight: 800;
    color: var(--accent-ink); background: var(--accent);
    border-radius: 999px; padding: 2px 9px; cursor: pointer;
    animation: updpulse 2.4s ease-in-out infinite;
  }
  .upd-badge:hover { filter: brightness(1.1); }
  @keyframes updpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
  @media (prefers-reduced-motion: reduce) { .upd-badge { animation: none; } }
  .brand .today {
    font-size: 12px;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
  }
  .search { flex: 1; max-width: 300px; margin-left: auto; position: relative; }
  .search input {
    width: 100%;
    padding: 6px 12px 6px 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
  }
  .search input::placeholder { color: var(--ink-faint); }
  .search svg {
    position: absolute; left: 10px; top: 50%; translate: 0 -50%;
    width: 14px; height: 14px; stroke: var(--ink-faint); fill: none; stroke-width: 2;
  }

  /* 창 제어: 투명도 + 항상 위 */
  .win-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    border-left: 1px solid var(--line);
  }
  /* 배경 색 선택 */
  /* 배경색 단추.
     네모난 색칠 하나로는 «무슨 색인지»만 보이고 «색을 고르는 곳»인 줄은
     모른다. 실제로 «뭔지 모르겠다»는 말이 나왔다. 무지개 테두리를 둘러
     색을 다루는 자리임을 드러내고, 가운데에 지금 색을 보여 준다. */
  .bg-swatch {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    position: relative;
    background: conic-gradient(#e5484d, #f76808, #ffc53d, #46a758, #00a2c7, #3e63dd, #8e4ec6, #e5484d);
  }
  /* 가운데 구멍에 지금 배경색이 보인다 — 색은 JS가 --sw 로 넣는다 */
  .bg-swatch::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--sw, var(--surface));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
  }
  .bg-swatch:hover { filter: brightness(1.12); }
  .bg-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .bg-panel { width: 300px; }
  .wn-panel { width: 380px; }
  .wn-panel .wn-line { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
  .wn-panel .btn-primary { margin-top: 6px; width: 100%; }
  .search-panel { width: 440px; max-height: 70vh; overflow-y: auto; }
  .search-panel input[type="search"] {
    width: 100%;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
  }
  .sr-results { display: grid; gap: 4px; margin-top: 10px; }
  .sr-head { font-size: 11.5px; font-weight: 800; color: var(--ink-faint); letter-spacing: 0.06em; padding: 8px 2px 2px; }
  .sr-item {
    display: flex;
    gap: 8px;
    align-items: baseline;
    text-align: left;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
  }
  .sr-item:hover { background: var(--surface-2); }
  .sr-item .w { color: var(--accent); font-weight: 700; font-size: 12px; flex: none; font-variant-numeric: tabular-nums; }
  .sr-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sr-item .c { font-size: 11px; color: var(--ink-faint); flex: none; }
  .sr-empty { font-size: 13px; color: var(--ink-faint); padding: 10px 2px; }
  .bg-panel .rgb-lbl { font-size: 11.5px; color: var(--ink-soft); flex: none; }
  .bg-panel .rgb-in {
    width: 52px;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .bg-panel #bg-reset { white-space: nowrap; font-size: 12px; padding: 4px 8px; }
  .bg-panel input[type="color"] {
    width: 34px; height: 28px; padding: 0; flex: none;
    border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer;
  }
  .bg-panel input[type="text"] {
    flex: 1; min-width: 0;
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
  }

  /* ── 머리줄 아이콘 ──
     이모지(🏠🔍🌞)를 쓰면 운영체제가 제 마음대로 그려서 굵기·색·크기가
     제각각이다. 나란히 놓으면 그게 그대로 드러난다. 그래서 같은 규격의
     선 그림으로 통일한다 — 굵기 1.7, 24칸, 둥근 끝.
     평소에는 회색, 켜져 있거나 손을 올리면 로고 색으로. */
  .ico-sv {
    width: 16px; height: 16px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
    display: block;
  }
  .btn-top .ico-sv { margin: 0 -2px; }
  .btn-top:hover { color: var(--accent); border-color: var(--accent); }
  .btn-top[aria-pressed="true"] .ico-sv { stroke-width: 2; }
  /* 아이콘만 있는 단추는 동그랗게 — 글자 단추와 폭이 다른 것이 자연스럽다 */
  /* 아이콘만 있는 단추는 글자가 없어 더 흐려 보인다. 한 단계 또렷하게. */
  .btn-top.ico-only { color: var(--ink); }
  .btn-top.ico-only:hover { color: var(--accent); }
  .btn-top.ico-only { padding: 6px; width: 30px; height: 30px; display: inline-flex;
    align-items: center; justify-content: center; }
  .btn-top {
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .btn-top[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
  }

  /* 동기화 버튼 + 계정 패널 */
  /* 동기화는 «누르는 것»이기 전에 «상태»다. 옆의 분류 단추와 똑같은 알약
     모양이라 설정 단추로 오해받았다. 테두리를 빼서 표시처럼 보이게 하되,
     눌러서 계정 화면을 열 수 있다는 것은 손을 올리면 드러나게 한다. */
  .btn-sync {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--ink-faint);
    white-space: nowrap;
    background: transparent;
  }
  /* 누르면 그 자리에서 동기화한다. 손을 올리면 누를 수 있다는 것이 드러난다. */
  .btn-sync { cursor: pointer; user-select: none; }
  /* 이름·날짜 곁에 선다. .brand는 글자의 밑선을 맞추는데 이건 글자가 아니라
     상자라, 밑선에 맞추면 점과 글자가 어긋나 보인다 — 가운데로 맞춘다.
     글자도 한 급 작게 두어 이름이 주인공인 채로 둔다. */
  .brand .btn-sync { align-self: center; font-size: 12px; padding: 4px 8px; }
  .btn-sync:hover { color: var(--accent); border-color: var(--line); }
  .btn-sync[data-state="error"]:hover { border-color: var(--danger); }
  .btn-sync[data-state="syncing"] { cursor: progress; }
  .btn-sync[data-state="error"] { color: var(--danger); }
  .sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
  .btn-sync[data-state="synced"] .sync-dot { background: #3f9b7a; }
  .btn-sync[data-state="syncing"] .sync-dot { background: var(--pin); }
  .btn-sync[data-state="error"] .sync-dot { background: var(--danger); }
  .account-panel {
    position: fixed;
    top: 52px;
    right: 14px;
    width: 300px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px;
    display: none;
    flex-direction: column;
    gap: 10px;
    z-index: 30;
    /* 내용이 길어지면 화면 밖으로 흘러넘쳐 아래쪽 단추가 아예 안 보였다.
       창 높이에 맞추고, 넘치면 패널 안에서 스크롤한다. */
    max-height: calc(100vh - 52px - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* 좁은 화면에서는 화면 폭에도 맞춘다 */
  @media (max-width: 380px) {
    .account-panel { width: auto; left: 8px; right: 8px; }
  }
  .account-panel.open { display: flex; }
  .account-panel > div { display: flex; flex-direction: column; gap: 10px; }
  .account-panel [hidden], .app [hidden], .toast [hidden] { display: none !important; }
  .account-panel h2 { margin: 0; font-size: 14px; font-weight: 800; }
  /* 말 고르개 — 머리줄의 다른 단추와 같은 모양이되 글자만 조금 또렷하게.
     설정 속에 두지 않는 까닭은 renderer.js의 그 자리에 적어 두었다. */
  .lang-btn { font-weight: 700; letter-spacing: .02em; }
  .account-panel p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
  .account-panel input {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
  }
  #acct-backup { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2px; }
  .account-panel .row { display: flex; gap: 8px; flex-wrap: wrap; }
  /* 단추 글자는 한 줄로 둔다. 좁으면 단추끼리 아래로 내려가지, 글자가 쪼개지지 않는다 —
     "지금 한 번 보내보 / 기"처럼 끊기면 읽기 어렵다. */
  .account-panel .row > button { white-space: nowrap; flex: 1 1 auto; }
  .account-panel .row button { flex: 1; }
  .btn-primary {
    padding: 8px 12px;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 8px;
    font-weight: 700;
  }
  .btn-ghost {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-soft);
  }
  .btn-ghost:hover { background: var(--surface-2); }
  /* 복사 직후 잠깐 — 방금 누른 자리에서 바뀌어야 눈에 들어온다 */
  .linklike.copied { color: var(--accent); font-weight: 700; }
  .btn-ghost.copied {
    color: #fff; background: var(--accent); border-color: transparent;
  }
  .setup-sub { margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--ink); }
  .setup-hint { margin: 4px 0 8px; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
  .setup-hint b { color: var(--ink); font-weight: 600; }
  .ai-sample {
    margin: 8px 0 0; padding: 10px 12px; border-radius: 8px;
    background: var(--panel-2, rgba(127,127,127,0.08));
    font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
    max-height: 220px; overflow: auto;
  }
  /* ── 접은 파일 칸 ──
     폴더처럼 작게 접힌 모습. 목록은 아예 그리지 않고 이름과 개수만 남는다.
     끌어다 놓기는 접힌 채로도 된다 — 접어 둔 칸에 파일을 던져 넣는 것이
     오히려 잦다. */
  /* 재는 것이 어긋나도 이름이 잘리지는 않게 — 줄 눈금이 고정폭이라
     조금만 넘쳐도 늘어나는 대신 잘린다. 여기서 바닥을 받쳐 둔다. */
  .board-cell.folded { justify-content: center; min-height: 44px; }
  .board-cell.folded .cat-head {
    padding: 10px 12px;
    gap: 8px;
    cursor: pointer;
    /* 이름이 길어도 두 줄로 접히지 않게 — 한 줄에서 말줄임으로 줄인다.
       접힌 칸에서 이름이 두 줄이 되면 높이가 튀고, 폴더처럼 안 보인다. */
    align-items: center;
  }
  .board-cell.folded .cat-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .board-cell.folded .cell-list,
  .board-cell.folded .cell-add { display: none; }
  .fold-ico { display: inline-flex; flex: none; }
  .fold-ico .ico-sv { width: 18px; height: 18px; }
  .board-cell.folded .cnt { margin-left: auto; }
  /* 접힌 칸에 파일을 끌어오면 다른 칸과 똑같이 테두리로 알린다 */
  .board-cell.folded.dragover { border-color: var(--accent); background: var(--accent-soft); }

  /* ── 사용법 도우미 ── */
  #help-panel { max-height: 70vh; }
  #help-panel #acct-ask { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
  #ask-chat { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; max-height: 300px; overflow-y: auto; }
  #ask-chat:empty { display: none; }
  .ask-hint { font-size: 12.5px; color: var(--ink-faint); line-height: 1.55; margin: 0 0 8px; }

  /* ── 기능 개선 요청 ── */
  #acct-feedback textarea {
    width: 100%; min-height: 64px; resize: vertical;
    padding: 8px 10px; margin-bottom: 6px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--ink);
    font: inherit; line-height: 1.5;
  }
  #fb-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
  .fb-item {
    border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 10px; background: var(--surface-2);
    font-size: 13px; line-height: 1.55; white-space: pre-wrap;
  }
  .fb-text { white-space: pre-wrap; }
  .fb-who { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-faint); white-space: normal; }
  .fb-item.new { border-color: var(--accent); }
  /* 주고받은 말 — 채팅창과 같은 규칙이다. 내가 한 말은 오른쪽,
     상대 말은 왼쪽. 읽지 않아도 누가 한 말인지 안다. */
  .fb-chat { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; }
  .fb-bubble {
    max-width: 82%; padding: 6px 10px; border-radius: 12px;
    white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.5;
  }
  .fb-bubble.them {
    align-self: flex-start; border-bottom-left-radius: 4px;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  }
  .fb-bubble.mine {
    align-self: flex-end; border-bottom-right-radius: 4px;
    background: var(--accent); color: var(--accent-ink);
  }
  .fb-at { display: block; margin-top: 3px; font-size: 10.5px; opacity: .65; }
  /* 그 자리에서 적어 보낸다 — 대화에 창이 뜨는 것은 어울리지 않는다 */
  .fb-send { display: flex; gap: 6px; align-items: center; }
  .fb-send input {
    flex: 1; min-width: 0; padding: 5px 9px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
  }
  .fb-send input:disabled { opacity: .5; }
  .fb-who.top { margin: 0 0 2px; }
  .fb-acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
  .fb-act {
    padding: 3px 9px; border-radius: 6px;
    border: 1px solid var(--line); background: none;
    color: var(--ink-soft); font-size: 12px; cursor: pointer;
  }
  .fb-act:hover { color: var(--ink); border-color: var(--ink-faint); }
  .fb-act.danger:hover { color: var(--danger); border-color: var(--danger); }
  /* 내가 보낸 요청에 온 답 */
  #fb-mine { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
  .fb-item.mine { border-color: var(--accent); }
  .account-msg { font-size: 12.5px; color: var(--danger); min-height: 1em; }
  .account-msg.ok { color: #3f9b7a; }
  /* 글 속에 끼워 넣는 링크처럼 보이는 단추 */
  .linklike {
    background: none; border: 0; padding: 0; margin-left: 4px;
    color: inherit; opacity: .75; font-size: inherit; text-decoration: underline;
    cursor: pointer;
  }
  .linklike:hover { opacity: 1; }
  /* 알림을 켜면 앱이 계속 떠 있어야 한다는 것을 미리 알려 준다 —
     창을 닫았는데 앱이 안 꺼지면 고장으로 오해한다. */
  .kakao-note { margin: 6px 0 0; font-size: 12px; line-height: 1.5; opacity: .7; }
  /* 카카오톡 말풍선. 노란 바탕은 밝은 화면·어두운 화면 양쪽에서 그대로 보인다. */
  .kakao-ico { width: 18px; height: 18px; vertical-align: -3px; fill: #FEE500; }
  /* 카카오 아침 알림 — 시각과 켜기를 한 줄에 나란히 */
  #acct-kakao .row { align-items: center; gap: 8px; }
  #acct-kakao label { font-size: 13px; color: var(--muted); white-space: nowrap; }
  #kakao-time { width: auto; flex: 0 0 auto; }
  .kakao-switch { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
  /* 요일 일곱 개는 좁은 창에서 줄바꿈되게 둔다 — 가로로 밀려 잘리면 못 고른다 */
  .kakao-days { flex-wrap: wrap; gap: 6px 10px; }
  .kakao-days .kakao-switch { font-size: 13px; }
  .account-email { font-weight: 700; color: var(--ink); word-break: break-all; }

  /* ── Body: list + editor ────────────── */
  .main {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .chip {
    padding: 3px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--ink-soft);
    background: var(--surface);
  }
  .chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
  }

  /* 분류별 네모칸 */
  .cat-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px 4px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-soft);
  }
  .cat-head .cnt {
    margin-left: auto;
    color: var(--ink-faint);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* 분류 편집 패널 (헤더 ⚙ 분류 버튼에서 열리는 플로팅 패널) */
  .tag-manager {
    position: fixed;
    top: 52px;
    right: 14px;
    /* 한 분류가 한 줄이다. 색·이름·칸종류·정렬·크기·밀도·삭제가 나란히
       들어갈 만큼은 넓어야 한다 — 좁으면 접혀서 분류마다 두 줄이 된다. */
    width: min(560px, calc(100vw - 28px));
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    display: grid;
    gap: 6px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    z-index: 30;
  }
  .tag-manager[hidden] { display: none !important; }
  /* 접지 않는다. 예전에는 flex-wrap: wrap이라 자리가 모자라면 단추가 아래로
     흘러내려 한 분류가 두 줄을 먹었다 — 열 개면 스무 줄이다. 이제는 이름
     칸이 대신 줄어든다(min-width: 0). 줄어들 수 있는 것이 하나는 있어야
     넘치지 않는다. */
  .tm-row { display: flex; gap: 5px; align-items: center; flex-wrap: nowrap; }
  .tm-row input[type="text"] { flex: 1 1 0; min-width: 0; }
  .tm-row input[type="color"] {
    width: 24px; height: 22px; padding: 0; flex: none;
    border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer;
  }
  .tm-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
  .tm-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
  .tm-row input[type="text"] {
    flex: 1; min-width: 60px;
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    font-size: 13px;
  }
  .tm-row .tm-mode { flex: none; }
  .tm-row .tm-del { flex: none; }
  .tm-row .tm-del { color: var(--ink-faint); padding: 2px 6px; border-radius: 6px; }
  .tm-row .tm-del:hover { color: var(--danger); background: var(--surface-2); }
  .ai-panel { width: 440px; }
  .ai-item { display: flex; gap: 9px; align-items: flex-start; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; }
  .ai-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex: none; margin-top: 2px; }
  .ai-item .meta { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .ai-item .txt { font-size: 13px; }
  .ai-hint { font-size: 12.5px; color: var(--ink-soft); }
  .ver-item {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
  }
  .ver-item .vt { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .ver-item .vp { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ver-item button { justify-self: start; font-size: 12px; padding: 4px 10px; }
  /* 단추가 없어진 «순서 바꾸기»가 어디로 갔는지 한 줄로 알려 준다 */
  .tm-hint {
    font-size: 11.5px;
    color: var(--ink-faint);
    padding: 2px 4px 0;
  }
  .tm-add {
    text-align: left;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent);
    padding: 3px 4px;
  }
  .note-item .t {
    font-weight: 700;
    font-size: 14px;
    display: flex; align-items: center; gap: 6px;
    overflow: hidden;
  }
  .note-item .t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .note-item .p {
    font-size: 12.5px;
    color: var(--ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .note-item .m {
    display: flex; gap: 8px; align-items: center;
    font-size: 11.5px;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
  }
  .tag-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

  /* ── 그리드·분류가 담기는 자리 ──
     보드 탭 «바로 왼쪽»이다. 그 자리에 있어야 하는 것들이라 여기 둔다.

     그런데 그리드는 보드에서만, 분류는 흐름을 뺀 곳에서만 보인다. 전환 단추는
     제 왼쪽에 있는 것들의 폭만큼 밀려나 서므로, 단추가 하나 사라질 때마다
     넷이 통째로 움직였다 — 보드에서 흐름으로 130px. 방금 누른 자리가
     손가락 밑에서 달아나니, 이어서 달력을 누르려면 눈으로 다시 찾아야 했다.

     고친 자리는 «남는 자리를 누가 먹느냐» 한 곳이다. 예전에는 전환 단추가
     margin-left:auto로 남는 자리를 먹었다. 그러면 전환 단추는 «제 오른쪽에
     무엇이 있느냐»로 자리가 정해지는데, 그 오른쪽에 사라졌다 나타나는
     그리드가 있었으니 화면을 바꿀 때마다 흔들렸다.

     이제 이 상자가 대신 먹는다. 남는 자리는 상자의 «왼쪽»에 생기고,
     상자·전환 단추·창 단추가 오른쪽으로 붙는다. 전환 단추 오른쪽에는
     늘 그대로인 창 단추들뿐이므로 어느 화면에서든 한 자리에 선다.
     안에서 그리드가 빠지면 상자가 그만큼 줄고, 줄어든 만큼 왼쪽 빈자리가
     늘 뿐이다 — 분류는 여전히 보드에 닿아 있다. */
  .view-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .view-tools .btn-top { flex: none; white-space: nowrap; }

  /* 보드/달력 전환 */
  .view-toggle {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
  }
  .view-toggle button { padding: 5px 13px; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
  .view-toggle button[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
  }

  /* ── 달력 + 날짜별 체크리스트 ── */
  .calview {
    display: grid;
    grid-template-columns: minmax(230px, var(--cal-split, 1fr)) 6px minmax(230px, 1fr) minmax(230px, 1fr);
    min-height: 0;
  }
  .month-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px 16px;
    gap: 10px;
    border-left: 1px solid var(--line);
    /* 「이번 달 전체」도 목록이다 — .check-pane과 같은 까닭으로 덮는다 */
    background: var(--bg);
  }
  .month-pane h2 { font-size: 15px; font-weight: 800; margin: 0; }
  .cal-divider {
    cursor: col-resize;
    position: relative;
  }
  .cal-divider::after {
    content: "";
    position: absolute;
    left: 2px; top: 0; bottom: 0;
    width: 2px;
    background: var(--line);
  }
  .cal-divider:hover::after, .cal-divider.dragging::after { background: var(--accent); }
  .calview[hidden] { display: none !important; }
  .cal-pane {
    padding: 18px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cal-head { display: flex; align-items: center; gap: 8px; }
  .cal-head h2 { margin: 0 4px; font-size: 16px; font-weight: 800; }
  .cal-head button { padding: 3px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); font-size: 13px; }
  .cal-head button:hover { background: var(--surface-2); }
  .cal-head .today-btn { margin-left: auto; font-size: 12px; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-faint); padding: 4px 0; }
  .cal-dow.sun { color: var(--danger); }
  .cal-cell {
    min-height: 56px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 7px 4px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }
  .cal-cell:hover { background: var(--surface-2); }
  .cal-cell.today { border-color: var(--accent); }
  .cal-cell.holiday .d { color: var(--danger); font-weight: 700; }
  .cal-cell[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
  .cal-cell .remain {
    font-size: 10.5px;
    line-height: 1.4;
    background: var(--danger);
    color: #fff;
    border-radius: 999px;
    min-width: 18px;
    padding: 1px 5px;
    text-align: center;
    font-weight: 700;
  }
  .cal-cell[aria-pressed="true"] .remain { background: rgba(255, 255, 255, 0.28); color: inherit; }
  .cal-cell .mm {
    font-size: 10.5px;
    line-height: 1.4;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 999px;
    min-width: 18px;
    padding: 1px 5px;
    text-align: center;
    font-weight: 700;
  }
  .cal-cell[aria-pressed="true"] .mm { background: rgba(255, 255, 255, 0.28); color: inherit; }
  .check-links { display: flex; flex-direction: column; gap: 3px; }
  .check-links-head { font-size: 12px; font-weight: 800; color: var(--ink-soft); padding: 6px 2px 2px; }
  .check-link {
    text-align: left;
    display: grid;
    gap: 1px;
    padding: 7px 11px;
    border-radius: 9px;
    border: 1px dashed var(--line);
  }
  .check-link:hover { background: var(--surface-2); }
  .check-link .ln { font-size: 13px; overflow-wrap: anywhere; }
  .check-link .src { font-size: 11.5px; color: var(--ink-faint); }
  .check-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 18px 20px 16px;
    gap: 10px;
    /* 할 일이 줄줄이 쌓이는 칸이라 뒤에 그림이 있으면 글자와 선이 섞인다.
       달력 눈금 쪽(.cal-pane)은 글이 드물어 그대로 두었다 — 거기서는
       그림이 보여도 읽는 데 걸리지 않는다. 목록 쪽만 색으로 덮는다.
       --bg는 지금 바탕과 같은 색이라, 그림만 사라지고 겉모습은 그대로다. */
    background: var(--bg);
  }
  .check-head { display: flex; align-items: center; gap: 10px; }
  .check-pane h2 { margin: 0; font-size: 15px; font-weight: 800; flex: 1; }
  .month-daylabel { font-size: 12px; font-weight: 800; color: var(--accent); padding: 12px 2px 2px; border-top: 1px solid var(--line); margin-top: 6px; }
  .month-daylabel:first-child { border-top: 0; margin-top: 0; }
  .month-daylabel .hol { color: var(--danger); }
  .check-remain { font-size: 12.5px; color: var(--ink-soft); }
  .check-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
  .check-item { display: flex; align-items: center; gap: 10px; padding: var(--cell-pad, 7px) 10px; border-radius: 9px; }
  .check-item:hover { background: var(--surface-2); }
  .check-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex: none; cursor: pointer; }
  .check-item .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .check-item.done .txt { color: var(--ink-faint); text-decoration: line-through; }
  /* 행 전체(텍스트 포함)에서 잡아끌 수 있음을 커서로 알린다 — 수정은 더블클릭 */
  .check-item .txt { cursor: inherit; }
  .check-item[draggable="true"]:active { cursor: grabbing; }
  /* 시간 지정 버튼 — 지정 전에는 시계, 지정 후에는 시각을 보여준다 */
  .check-item .tbtn {
    color: var(--ink-faint); padding: 2px 7px; border-radius: 6px;
    font-size: 12px; font-weight: 700; flex: none;
    font-variant-numeric: tabular-nums;
  }
  .check-item .tbtn:hover { color: var(--accent); background: var(--surface-2); }
  .check-item .tbtn.has { color: var(--accent); background: var(--accent-soft); }
  .time-pop {
    position: fixed; z-index: 60;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 11px; box-shadow: var(--shadow);
    padding: 10px; display: grid; gap: 8px; width: 190px;
  }
  .time-pop input[type="time"], .rep-pop input[type="time"] {
    width: 100%; padding: 6px 9px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg); color: var(--ink); font: inherit; font-size: 14px;
  }
  .time-field { display: flex; align-items: center; gap: 8px; }
  .time-field > span { font-size: 12px; font-weight: 700; color: var(--ink-soft); width: 26px; flex: none; }
  .time-field input[type="time"] { flex: 1; }
  .time-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .time-quick button {
    padding: 4px 0; border: 1px solid var(--line); border-radius: 7px;
    font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
  }
  .time-quick button:hover { border-color: var(--accent); color: var(--accent); }
  .time-row { display: flex; gap: 6px; }
  .time-row button { flex: 1; padding: 5px 0; border-radius: 7px; font-size: 12px; font-weight: 700; }
  .tp-clear { border: 1px solid var(--line); color: var(--ink-soft); }
  .tp-clear:hover { color: var(--danger); border-color: var(--danger); }
  .tp-ok { background: var(--accent); color: var(--accent-ink); }
  .tp-ok:hover { filter: brightness(1.08); }
  /* 할 일을 그 자리에서 고치는 칸. <input>이 아니라 서식 칸이라
     («{r:…}» 기호가 드러나지 않게 하려고) 줄바꿈·커서 모양을 손으로 정한다. */
  .check-item .txt-edit {
    flex: 1;
    min-width: 0;
    padding: 3px 8px;
    border: 1px solid var(--accent);
    border-radius: 7px;
    background: var(--surface);
    font-size: inherit;
    outline: none;
    cursor: text;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .rep-mark { font-size: 11px; flex: none; opacity: 0.75; }
  .rep-back {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(0, 0, 0, 0.32);
    display: grid; place-items: center; padding: 20px;
  }
  .rep-pop {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 15px; box-shadow: var(--shadow);
    padding: 20px; width: min(340px, 100%); display: grid; gap: 8px;
  }
  .rep-ttl { font-size: 15px; font-weight: 800; }
  .rep-sub {
    font-size: 13px; color: var(--ink-soft); margin-bottom: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rep-btn {
    padding: 11px 14px; border-radius: 10px;
    font-size: 14px; font-weight: 700; text-align: center;
    background: var(--surface-2); color: var(--ink);
  }
  .rep-btn:hover { background: var(--accent-soft); }
  .rep-btn.danger { color: var(--danger); }
  .rep-btn.ghost { background: none; color: var(--ink-faint); font-weight: 500; }
  .check-item .del { color: var(--ink-faint); padding: 2px 7px; border-radius: 6px; }
  .check-item .del:hover { color: var(--danger); background: var(--surface-2); }
  .check-item .defer { color: var(--ink-faint); padding: 2px 7px; border-radius: 6px; font-weight: 700; }
  .check-item .defer:hover { color: var(--accent); background: var(--surface-2); }
  .check-item[draggable="true"] { cursor: grab; }
  .cal-cell.dragover { border-color: var(--accent); background: var(--accent-soft); }
  .board-cell.dragover { border-color: var(--accent); background: var(--accent-soft); }
  .check-tags { display: flex; flex-wrap: wrap; gap: 5px; }
  .check-tags .tchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ink-soft);
  }
  .check-tags .tchip[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--ink);
    font-weight: 700;
  }
  .check-sec-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-soft);
    padding: 8px 2px 3px;
  }
  .check-sec-head .cnt { margin-left: auto; color: var(--ink-faint); font-weight: 600; }
  .cal-cell .cat-dots { display: flex; gap: 3px; }
  .cal-cell { position: relative; }
  .cal-grid { position: relative; }
  .pspan { position: absolute; height: 4px; opacity: 0.9; pointer-events: none; }
  .check-item .pdot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
  .cal-cell .cat-dots span { width: 5px; height: 5px; border-radius: 50%; }
  .check-add { display: flex; gap: 8px; }
  .check-add input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
  }

  /* ── 분류별 보드 (오른쪽 큰 작성칸 분할) ── */
  /* 세로 눈금 20px. 잘아서 모서리를 끌면 손을 따라오지만, 격자에 붙으므로
     창을 줄이거나 폰에서 열어도 배치가 무너지지 않는다.
     renderer.js의 ROW_PX·ROW_GAP과 같은 값이어야 한다. */
  /* 가로 격자는 늘 12칸(renderer.js의 FINE). 칸이 그중 몇 칸을 차지할지로
     폭이 정해진다 — «위 줄은 둘, 아래 줄은 셋»이 같은 격자에서 나온다.
     세로 눈금은 아무도 크기를 끌어 본 적 없을 때만 «남는 높이 나눠 갖기»고,
     한 번 끌면 .rows-fine 으로 20px 눈금이 된다. */
  .board {
    display: grid;
    grid-template-columns: repeat(var(--board-cols, 12), 1fr);
    grid-auto-rows: minmax(200px, 1fr);
    gap: 12px;
    padding: 16px 20px;
    min-height: 0;
    overflow-y: auto;
  }
  /* 한 칸이라도 끌어 크기를 정한 뒤부터는 잘은 눈금으로 바뀐다 */
  .board.rows-fine, .fgrid.rows-fine { grid-auto-rows: 20px; }
  .board[hidden] { display: none !important; }
  .board-cell {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    min-height: 0;
    overflow: hidden;
  }
  .board-cell:focus-within { border-color: var(--accent); }
  .board-cell { position: relative; }
  /* 크기 손잡이 셋 — 오른쪽 변(폭), 아래 변(높이), 모서리(둘 다).
     모서리 하나만 있으면 «폭만 조금»을 할 수가 없다. 손이 조금만 아래로
     흘러도 높이가 같이 바뀐다. 변을 따로 두면 그럴 일이 없다.
     평소에는 안 보이고, 칸에 손을 올려야 흐릿하게 드러난다. */
  .resize-grip { position: absolute; opacity: 0; transition: opacity 0.15s; z-index: 2; }
  .grip-e {
    top: 12px; bottom: 12px; right: 0; width: 8px;
    cursor: ew-resize;
    background: linear-gradient(to right, transparent 40%, var(--ink-faint) 40%, var(--ink-faint) 62%, transparent 62%);
  }
  .grip-s {
    left: 12px; right: 12px; bottom: 0; height: 8px;
    cursor: ns-resize;
    background: linear-gradient(to bottom, transparent 40%, var(--ink-faint) 40%, var(--ink-faint) 62%, transparent 62%);
  }
  .grip-se {
    right: 0; bottom: 0; width: 16px; height: 16px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 55%, var(--ink-faint) 55%);
    border-bottom-right-radius: 9px;
    z-index: 3;
  }
  .cat-head[draggable="true"] { cursor: grab; }
  .cat-head[draggable="true"]:active { cursor: grabbing; }
  .board-cell:hover .resize-grip { opacity: 0.4; }
  .resize-grip:hover { opacity: 0.95; }
  .board-cell .cat-head { padding: 9px 13px 4px; }
  .board-cell .cat-head .cnt {
    margin-left: auto;
    color: var(--ink-faint);
    font-weight: 600;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
  }

  /* ── 메모칸: 접기 편집 + 큰 창 좌우 두 칸 ──
     예전 읽기 모드(.cell-fold)를 대신한다. 접힌 목록이 곧 편집칸이다. */
  .sec-list { flex: 1; overflow-y: auto; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
  /* 조각은 줄어들지 않는다.
     세로로 세운 flex 칸에서 항목은 기본으로 줄어든다(flex-shrink: 1).
     그래서 칸에 안 들어가면 목록이 넘치는 대신 조각 하나하나가 눌렸고,
     펼친 글이 두 줄만 보이다 글자 가운데가 잘렸다 — 스크롤도 안 생겼다.
     넘치게 두면 목록이 스크롤되고 펼친 것은 끝까지 다 보인다. */
  .sec-list > * { flex: none; }
  /* ── 메모칸 도구줄 ──
     한 줄에 다 들어가야 한다. 예전에는 «＋ 새 메 / 모»처럼 글자가 잘려
     두 줄이 되고, 서식 단추도 아래로 넘어가 어수선했다.
     줄바꿈을 막고, 좁으면 도구줄만 옆으로 밀린다. */
  .sec-bar {
    display: flex; align-items: center; gap: 4px;
    padding: 2px 0 6px; flex: none;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .sec-bar::-webkit-scrollbar { display: none; }
  /* 도구줄은 스크롤해도 칸 꼭대기에 붙어 있는다.
     긴 메모를 고칠 때 아래로 내려가면 «굵게·형광펜»이 화면 밖으로 밀려
     올라가 버렸다 — 글자를 골라 두고도 위로 되돌아가야 누를 수 있었다.
     스크롤되는 칸은 .sec-list다. 그 안에서 붙여 둔다.
     칸 위쪽 안쪽 여백(4px)만큼 끌어올려야 꼭대기에 딱 붙고,
     좌우 여백(10px)까지 덮어야 글자가 도구줄 옆으로 스쳐 지나가지 않는다. */
  .sec-list > .sec-bar {
    position: sticky;
    /* 0이 아니라 -4px인 까닭: 브라우저는 붙박이 기준선을 칸의 «안쪽 여백
       안쪽»에 잡는다. 0으로 두면 위 여백 4px만큼 내려앉아 그 틈으로 글이
       비쳐 지나간다. 여백만큼 끌어올려야 칸 꼭대기에 딱 붙는다. */
    top: -4px;
    z-index: 6;
    /* 글이 바로 밑으로 지나간다 — 비치면 안 되니 칸과 같은 바탕색을 깐다 */
    background: var(--surface);
    margin: -4px -10px 0;
    padding: 6px 10px;
  }
  .sec-add {
    display: inline-flex; align-items: center; gap: 4px;
    font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
    color: var(--accent); background: var(--accent-soft);
    border: 0; border-radius: 7px; padding: 5px 9px; cursor: pointer;
    flex: none;
  }
  .sec-add:hover { filter: brightness(1.08); }
  .sec-add.ghost {
    color: var(--ink-soft); background: transparent;
    border: 1px solid var(--line); font-weight: 500;
  }
  .sec-add.ghost:hover { color: var(--accent); border-color: var(--accent); }
  .sec-add .ico-sv { width: 14px; height: 14px; }
  .sec-head {
    display: flex; align-items: center; gap: 6px;
    background: var(--panel-2, rgba(127,127,127,0.10));
    border-radius: 8px; padding: 4px 6px 4px 8px;
  }
  .sec-head.big { background: transparent; padding: 0 0 6px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
  .sec-arrow {
    font: inherit; color: var(--ink-faint); background: none; border: 0;
    cursor: pointer; padding: 2px 2px; line-height: 1; flex: none;
  }
  .sec-title {
    flex: 1; min-width: 0; font: inherit; font-weight: 700;
    font-size: var(--cell-mfs, 14px); color: var(--ink);
    background: transparent; border: 0; outline: none; padding: 3px 2px;
  }
  .sec-head.big .sec-title { font-size: calc(var(--cell-mfs, 14px) + 3px); }
  .sec-title::placeholder { color: var(--ink-faint); font-weight: 500; }
  /* 지우기는 되돌릴 수 없다. 눈에 띄되(빨강) 손이 먼저 가지는 않게
     (평소 흐림 → 그 줄에 손을 얹으면 또렷) 둔다. */
  .sec-del {
    font: inherit; font-size: 13px; line-height: 1;
    color: #c05a6e;
    background: none; border: 0; cursor: pointer; padding: 3px 5px; flex: none;
    opacity: 0; transition: opacity 0.12s, background 0.12s;
    border-radius: 6px;
  }
  .sec-head:hover .sec-del, .sec-head.big .sec-del { opacity: 0.75; }
  .sec-del:hover { opacity: 1; background: rgba(192, 90, 110, 0.14); }
  .sec-del:focus-visible { opacity: 1; outline: 2px solid #c05a6e; outline-offset: 1px; }
  .sec-body, .sec-pre {
    font: inherit; font-size: calc(var(--cell-mfs, 14px) - 1px);
    line-height: var(--cell-lh, 1.65); color: var(--ink-soft);
    background: transparent; border: 0; outline: none; resize: none;
    padding: 4px 10px 10px 24px; width: 100%; overflow: hidden;
  }
  .sec-body[hidden] { display: none; }
  .sec-body.rich[hidden] { display: none; }
  .sec-pre { flex: none; min-height: 60px; padding-left: 8px; }
  .sec-body.tall { flex: 1; min-height: 0; overflow-y: auto; padding-left: 2px; }


  /* 서식 편집칸 — 보이는 대로 굵게·형광펜이 들어간다 */
  .sec-body.rich, .sec-pre.rich, .sec-title.rich {
    white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
  }
  .sec-body.rich { min-height: 22px; }
  .sec-title.rich {
    flex: 1; min-width: 0; font-weight: 700; padding: 3px 2px;
    outline: none;
  }
  /* 비어 있을 때 안내 글 — 진짜 값이 아니라 그림만 그린다 */
  .sec-body.rich:empty::before, .sec-pre.rich:empty::before, .sec-title.rich:empty::before {
    content: attr(data-ph); color: var(--ink-faint); pointer-events: none;
  }
  .sec-body.rich strong, .sec-pre.rich strong, .sec-title.rich strong { font-weight: 800; color: var(--ink); }
  .sec-body.rich mark, .sec-pre.rich mark, .sec-title.rich mark,
  .sec-body.rich .mk-hl, .sec-pre.rich .mk-hl, .sec-title.rich .mk-hl {
    background: var(--hl, rgba(255, 214, 10, 0.38)); color: inherit; border-radius: 3px; padding: 0 1px;
  }

  /* 큰 창 — 왼쪽 제목 목록, 오른쪽 내용 */
  .sec-split { flex: 1; display: grid; grid-template-columns: minmax(180px, 260px) 1fr; min-height: 0; }
  .sec-left {
    border-right: 1px solid var(--line); overflow-y: auto;
    padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 2px; min-height: 0;
  }
  .sec-right { padding: 10px 14px 14px; display: flex; flex-direction: column; min-height: 0; }
  .sec-row {
    font: inherit; text-align: left; width: 100%;
    background: none; border: 0; border-radius: 7px; cursor: pointer;
    padding: 7px 9px; color: var(--ink-soft); font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sec-row:hover { background: var(--accent-soft); }
  .sec-row.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
  .sec-row-name { pointer-events: none; }
  @media (max-width: 700px) {
    .sec-split { grid-template-columns: 1fr; }
    .sec-left { border-right: 0; border-bottom: 1px solid var(--line); max-height: 40%; }
  }

  .cell-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--cell-gap, 2px);
    padding: 2px 8px;
    min-height: 0;
    font-size: var(--cell-fs, 15px);
  }
  .cell-memo {
    flex: 1;
    border: 0;
    background: transparent;
    resize: none;
    padding: 6px 14px 12px;
    line-height: var(--cell-lh, 1.7);
    min-height: 0;
    font-size: var(--cell-mfs, 14px);
    color: var(--ink);
  }
  .cell-memo::placeholder { color: var(--ink-faint); }
  .cell-memo:focus-visible { outline: none; }
  /* 인라인 강조 (읽기 모드) */
  /* 할 일 항목에도 동일 강조 적용 */
  .txt strong { font-weight: 800; color: var(--ink); }
  .txt .mk-hl {
    background: var(--accent-soft); color: var(--ink);
    border-radius: 3px; padding: 0 3px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
  }
  .done .txt strong { font-weight: 700; }
  /* 글자 색 — 밝은 바탕/어두운 바탕 모두에서 읽히도록 두 벌을 둔다 */
  :root {
    --ink-r: #c0392b; --ink-o: #b06a12; --ink-g: #1f7a4d;
    --ink-b: #1f5fbf; --ink-v: #7a3fb5; --ink-s: #6b7280;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ink-r: #f08a7a; --ink-o: #e0ab52; --ink-g: #5fc794;
      --ink-b: #7fa9f5; --ink-v: #b98ee6; --ink-s: #9aa4b2;
    }
  }
  :root[data-theme-mode="light"] {
    --ink-r: #c0392b; --ink-o: #b06a12; --ink-g: #1f7a4d;
    --ink-b: #1f5fbf; --ink-v: #7a3fb5; --ink-s: #6b7280;
  }
  :root[data-theme-mode="dark"] {
    --ink-r: #f08a7a; --ink-o: #e0ab52; --ink-g: #5fc794;
    --ink-b: #7fa9f5; --ink-v: #b98ee6; --ink-s: #9aa4b2;
  }
  /* 글자색 단추의 띠 — 이 획만 색을 따라간다. 나머지 획(A)은
     다른 단추와 같은 회색으로 남아야 툴바가 한 덩어리로 보인다. */
  .mk-cbar { stroke: currentColor; }
  .mk-c-r { color: var(--ink-r); }
  .mk-c-o { color: var(--ink-o); }
  .mk-c-g { color: var(--ink-g); }
  .mk-c-b { color: var(--ink-b); }
  .mk-c-v { color: var(--ink-v); }
  .mk-c-s { color: var(--ink-s); }
  /* 글자 크기 — 칸 글씨 크기를 기준으로 상대 조절 */
  .mk-zp1 { font-size: 1.16em; }
  .mk-zp2 { font-size: 1.4em; font-weight: 700; }
  .mk-zm1 { font-size: 0.88em; }
  .mk-zm2 { font-size: 0.78em; }
  /* 꾸미기 툴바 */
  .mk-bar {
    display: flex; align-items: center; gap: 1px; flex-wrap: nowrap;
    padding: 3px 5px; margin: 0;
    border: 1px solid var(--line); border-radius: 7px;
    background: var(--surface-2);
    flex: none;
  }
  .mk-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 4px;
    border-radius: 5px; font-size: 12.5px; line-height: 1;
    color: var(--ink-soft);
  }
  .mk-btn .ico-sv { width: 14px; height: 14px; }
  .mk-btn:hover { background: var(--surface); color: var(--ink); }
  /* 꾸미기 툴바는 글을 고치는 동안에만 나온다. 늘 떠 있으면 «새 메모»,
     «날짜순» 옆에 단추 일곱 개가 붙어 머리가 복잡하다. 세로로 자리를
     차지하지 않도록 같은 줄에서 가로로만 나타났다 사라진다. */
  .sec-list .mk-bar, .sec-split .mk-bar { display: none; }
  .sec-list:focus-within .mk-bar, .sec-split:focus-within .mk-bar { display: flex; }
  .mk-color { position: relative; display: inline-flex; }
  .mk-pal {
    position: absolute; top: 26px; left: 0; z-index: 20;
    display: flex; gap: 2px; padding: 4px;
    border: 1px solid var(--line); border-radius: 7px;
    background: var(--surface); box-shadow: var(--shadow);
  }
  .mk-pal[hidden] { display: none !important; }
  .mk-sw { font-size: 15px; line-height: 1; padding: 2px; border-radius: 4px; }
  .mk-sw:hover { background: var(--surface-2); }
  .mk-bar + .cell-memo { margin-top: 0; }
  .check-item { position: relative; }
  /* 메일 보드 — 할 일 줄 아래의 추가 내용 칸.
     줄을 접어(wrap) 칸을 아래로 보낸다. 체크 상자 폭만큼 들여서 제목 글자와
     왼쪽 끝을 맞춘다(상자 16px + 사이 10px). 비어 있을 때는 흐린 안내 한 줄만
     보인다 — 칸마다 테두리가 서면 목록이 네모 상자로 가득 찬다. */
  .check-item.has-note { flex-wrap: wrap; row-gap: 1px; }
  /* 펼친 내용은 제목 아래 옅은 상자에 담는다. 메일 요약은 200~400자짜리 한
     문단이라 서너 줄로 접힌다 — 바탕 없이 흐린 글자로 두면 제목과 다음 할 일
     사이에 묻혀 어디까지가 이 할 일의 것인지 안 보인다. 왼쪽 띠가 그 경계다. */
  .item-note {
    order: 8;
    flex: 1 1 100%;
    margin: 4px 0 2px 26px;
    min-width: 0;
    min-height: 0;
    resize: none;
    overflow: hidden;
    border: 0;
    border-left: 2px solid var(--accent);
    border-radius: 0 6px 6px 0;
    background: var(--surface-2);
    padding: 6px 10px;
    font: inherit;
    font-size: 0.9em;
    line-height: 1.55;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .item-note::placeholder { color: var(--ink-faint); opacity: 0.7; }
  /* 아이폰은 글자가 16px보다 작은 글 칸에 커서가 가면 화면을 저절로 확대한다.
     적으려고 칸을 누를 때마다 화면이 커졌다 돌아오지 않는다. 손가락 화면에서는
     16px로 둔다 — 확대를 막는 방법 중 손가락으로 벌려 키우는 것까지 막지 않는
     것은 이것뿐이다(maximum-scale로 막으면 그것까지 막힌다). */
  @media (hover: none), (max-width: 700px) {
    .item-note { font-size: 16px; }
  }
  .item-note:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--line);
  }
  .check-item.done .item-note { color: var(--ink-faint); }
  /* 내용 접기 단추 — 날짜 칩 앞. 접혔는데 적힌 것이 있으면 점을 찍는다 */
  .note-tog {
    flex: none;
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    color: var(--ink-faint);
  }
  .note-tog:hover { background: var(--surface-2); color: var(--ink-soft); }
  .note-tog.folded.has { color: var(--accent); }
  .note-tog.folded.has::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 1px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
  }
  /* 보드에서 넘어왔을 때 그 항목만 잠깐 반짝인다 — 일정이 많아도 눈에 띄도록 */
  .check-item.row-flash {
    animation: rowflash 1.1s ease-out 3;
    border-radius: 7px;
  }
  @keyframes rowflash {
    0%, 100% { background: transparent; box-shadow: none; }
    22% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
    70% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
  }
  @media (prefers-reduced-motion: reduce) {
    .check-item.row-flash { animation: none; background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
  }
  /* 칸이 overflow:hidden이라 줄 위에 띄우면 잘린다. 줄 안에서 한 칸 아래로 내린다. */
  .check-item:has(.mk-bar) { flex-wrap: wrap; }
  .mk-bar.mk-float {
    order: 9; width: 100%; margin: 5px 0 1px;
    background: var(--surface); flex-wrap: wrap;
  }
  .tm-mode {
    flex: none;
    font-size: 11px;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-soft);
    white-space: nowrap;
    /* 글자 길이와 상관없이 칸 폭을 맞춘다 — 📝 메모와 ☑ 체크가 같은 크기.
       여섯이 한 줄에 들어가야 하므로 딱 글자가 들어갈 만큼만 준다. */
    min-width: 62px;
    text-align: center;
  }
  .tm-mode.tm-sort { min-width: 70px; }
  .tm-mode.tm-size { min-width: 88px; }
  .tm-mode.tm-dense { min-width: 60px; }
  /* 메모 칸에는 정렬 버튼이 없다. 빈 자리를 남겨 뒤 버튼들이 어긋나지 않게 한다 */
  .tm-gap { flex: none; min-width: 70px; }
  .tm-mode:hover { background: var(--surface-2); }
  .cell-add { padding: 6px 12px 12px; }
  .cell-add input {
    width: 100%;
    padding: 7px 11px;
    border: 1px dashed var(--line);
    border-radius: 9px;
    background: transparent;
    font-size: 13.5px;
    color: var(--ink);
  }
  .cell-add input::placeholder { color: var(--ink-faint); }
  .cell-add input:focus-visible { outline: none; border-style: solid; border-color: var(--accent); }
  .dchip {
    font-size: 11px;
    color: var(--accent);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .dchip:hover { background: var(--accent-soft); }
  .cell-attach {
    margin-left: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 13px;
  }
  .cell-attach:hover { background: var(--surface-2); }
  /* 칸 하나만 크게 보기 */
  .cell-zoom { opacity: 0.45; }
  .board-cell:hover .cell-zoom, .cell-zoom.on { opacity: 1; }
  /* 손가락으로 쓰는 화면에는 «올려놓기»가 없다. 흐린 채로 두면 영영 흐리고,
     흐린 단추는 눌러도 되는 것으로 안 읽힌다. 거기서는 늘 또렷하게 둔다. */
  @media (hover: none) {
    .cell-zoom { opacity: 1; }
  }
  .cell-zoom.on { color: var(--accent); }
  .board.zoomed { grid-template-rows: 1fr; }
  .board.zoomed .board-cell {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    border-color: var(--accent);
  }

  /* ── 파일 보관함 ── */
  .filesview {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 14px 20px 16px;
    gap: 12px;
  }
  .filesview[hidden] { display: none !important; }

  /* ── 일의 흐름 (웹 전용) ──
     왼쪽에 할 일이 쭉, 고르면 오른쪽에 그 일에 수반되는 단계들.
     달력 화면(왼쪽 달력 + 오른쪽 체크리스트)과 같은 뼈대다 — 이 앱을
     쓰던 사람에게 낯설지 않아야 한다. */
  /* 하루가 흐르는 차례 그대로 — 골라서, 셋으로 세우고, 단계를 적고, 시간에 앉힌다.
     폭은 사람이 정한다. 오늘 크게 보고 싶은 칸이 사람마다 다르고, 같은 사람도
     날마다 다르다 — 단계를 길게 적는 날과 시간을 짜는 날이 같을 수 없다.
     그래서 여기서는 «몫»만 정하고(1fr = 한 몫) 실제 폭은 창에 맞춰 나눈다.
     최소값을 둔 까닭 — 끌다 보면 칸 하나를 0으로 만들 수 있는데, 그러면
     되돌릴 손잡이까지 사라진다. */
  /* 세울 분류가 없는 보드 — 메일 보드는 처음에 늘 이렇다 */
  .board-empty {
    grid-column: 1 / -1;
    align-self: center;
    justify-self: center;
    display: grid;
    gap: 12px;
    justify-items: center;
    padding: 48px 16px;
    color: var(--ink-faint);
  }
  .board-empty-t { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
  .board-empty-btn {
    padding: 8px 16px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    font-size: 13px;
  }
  .board-empty-btn:hover { filter: brightness(1.08); }

  .flowview {
    display: grid;
    grid-template-columns:
      minmax(150px, var(--fc1, 1fr))
      var(--flow-gutter)
      minmax(220px, var(--fc2, 1.5fr))
      var(--flow-gutter)
      minmax(180px, var(--fc3, 1.3fr))
      var(--flow-gutter)
      minmax(160px, var(--fc4, 1.1fr));
    gap: 0;
    padding: 14px 20px 16px;
    min-height: 0;
    min-width: 0;
    flex: 1;
    --flow-gutter: 16px;
  }
  /* 칸 사이의 틈이자 손잡이. 틈을 gap이 아니라 이 칸이 갖는 까닭 —
     잡을 것이 없으면 폭을 못 바꾼다. */
  .flow-split { position: relative; cursor: col-resize; }
  .flow-split::after {
    content: "";
    position: absolute;
    left: 7px; top: 8px; bottom: 8px;
    width: 2px; border-radius: 2px;
    background: var(--line);
    transition: background .12s;
  }
  .flow-split:hover::after, .flow-split.dragging::after { background: var(--accent); }
  .flowview[hidden] { display: none !important; }
  .flow-col {
    display: flex; flex-direction: column;
    min-height: 0; min-width: 0;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
  }
  .flow-head {
    display: flex; align-items: baseline; gap: 8px;
    padding: 10px 14px; font-size: 12.5px; font-weight: 600;
    color: var(--ink-soft); border-bottom: 1px solid var(--line);
  }
  /* 머리줄 오른쪽의 곁말 — «30분 단위», 날짜 같은 것 */
  .flow-note { margin-left: auto; font-weight: 500; color: var(--ink-faint); font-size: 11.5px; }
  /* 하루씩 앞뒤로. 오늘이 아닐 때만 가운데 글자가 진해진다 —
     늘 진하면 «지금 오늘이 아니다»라는 말이 표시가 아니라 배경이 된다. */
  /* 테두리를 두른 까닭 — 흐린 글자로만 두었더니 «오늘»이 단추가 아니라
     그냥 적어 둔 말로 읽혀 아무도 못 찾았다. 누를 수 있는 것은 누를 수
     있게 생겨야 한다. */
  .flow-nav {
    margin-left: auto;
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--line); border-radius: 999px;
    overflow: hidden;
  }
  .flow-navb {
    font: inherit; font-size: 14px; line-height: 1;
    color: var(--ink-soft); background: transparent; border: 0;
    padding: 3px 8px; cursor: pointer;
  }
  .flow-navb:hover { color: var(--accent-ink); background: var(--accent); }
  .flow-daybtn {
    margin-left: 0; font: inherit; font-size: 11.5px; font-weight: 600;
    color: var(--ink-soft); background: transparent; border: 0; cursor: pointer;
    padding: 3px 9px; white-space: nowrap;
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
  }
  .flow-daybtn:hover { color: var(--ink); background: var(--card); }
  /* 오늘이 아니면 색으로 밝힌다 — 그래야 «지금 다른 날을 보고 있다»가
     한눈에 들어오고, 돌아오는 길도 그 글자가 곧 손잡이다. */
  .flow-daybtn.away { color: var(--accent-ink); background: var(--accent); }

  /* 보드 칸을 한 번에 접고 편다. 분류가 일곱이면 하나씩 일곱 번 누르게 된다. */
  .flow-foldall {
    margin-left: auto; font: inherit; font-size: 11.5px;
    color: var(--ink-faint); background: transparent;
    border: 1px solid var(--line); border-radius: 999px;
    padding: 3px 9px; cursor: pointer; white-space: nowrap;
  }
  .flow-foldall:hover { color: var(--ink); border-color: var(--ink-faint); }
  .flow-body { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
  .flow-hint { font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; padding: 0 2px; }
  .flow-sect {
    font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
    padding: 6px 2px 0; margin-top: 2px; border-top: 1px solid var(--line);
  }
  .flow-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
  /* 분류 머리줄. 할 일 줄보다 작고 흐리게 — 이정표이기도 하고, 눌러서
     묶음을 접는 손잡이이기도 하다. 접히는 것이라 단추로 만든다.
     첫 줄이 아니면 위에 틈을 둬서 묶음이 눈에 갈라져 보이게 한다. */
  .flow-grp {
    display: flex; align-items: center; gap: 7px;
    width: 100%; text-align: left;
    padding: 6px 10px 4px;
    font: inherit;
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
    color: var(--ink-soft);
    background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  }
  .flow-grp:hover { color: var(--ink); }
  /* 끌어 온 분류가 이 앞자리에 놓인다는 표 */
  .flow-grp.dragover { box-shadow: inset 0 2px 0 var(--accent); }
  .flow-grp:not(:first-child) { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
  /* 접혔는지 폈는지 — 화살표 하나로 보인다. 글자 크기에 안 눌리게 좁게 잡는다. */
  .flow-car {
    flex: none; width: 9px; font-size: 9px; line-height: 1;
    color: var(--ink-faint);
  }
  /* 지난 것 서랍은 붉은 기로 세어 보인다 — 몇 건이 밀렸는지가 요점이다 */
  .flow-grp.late .flow-grpn { color: var(--danger); }
  .flow-grpn {
    margin-left: auto; font-weight: 500;
    font-variant-numeric: tabular-nums; color: var(--ink-faint);
  }
  /* width: 100%를 주면 안 된다. 세로로 세운 flex 칸에서는 이미 폭을 다 쓰는데,
     거기에 100%를 얹고 아래의 margin-left까지 붙으면 그만큼 넘친다.
     넘친 만큼 가로 스크롤바가 생겨 목록 아래에 회색 막대가 걸렸다. */
  .flow-row {
    display: flex; align-items: center; gap: 8px;
    text-align: left;
    font: inherit; font-size: 13.5px; color: var(--ink);
    background: transparent; border: 0; border-radius: 8px;
    padding: 8px 10px; cursor: pointer;
  }
  .flow-row:hover { background: var(--card); }
  /* 분류 아래로 한 칸 들여쓴다 — 어느 묶음에 속한 줄인지 눈으로 보이게.
     padding이 아니라 margin이다 — padding은 상자를 안 밀어서 눈에도,
     자로 재도 들여쓰인 것이 아니다. */
  .flow-grp ~ .flow-row { margin-left: 10px; }
  /* 고른 줄은 확실히 표가 나야 한다 — 오른쪽이 어느 일의 것인지 헷갈리면
     엉뚱한 일에 단계를 적게 된다. */
  .flow-row.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
  .flow-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .flow-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .flow-cnt {
    flex: none; font-size: 11.5px; font-variant-numeric: tabular-nums;
    color: var(--ink-soft); background: var(--card);
    border-radius: 999px; padding: 2px 7px;
  }
  .flow-cnt.all { color: #fff; background: var(--ok, #2e9e5b); }
  /* 날짜가 지났는데 안 끝난 것 — 붉은 기로 표를 낸다.
     글자는 «8/20»처럼 짧게. 언제 것인지 알아야 급한지 가늠이 된다. */
  /* 반투명 바탕을 깔았더니 대비가 1.62:1로 무너졌다 — 색만 다르고 안 읽히면
     그건 표시가 아니다. 바탕을 걷어내고 글자색과 굵기로만 표를 낸다. */
  .flow-late {
    flex: none; font-size: 11px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--danger); padding: 2px 2px;
  }
  .flow-empty { padding: 18px 14px; color: var(--ink-faint); font-size: 13px; }

  /* ── 오늘의 셋 ──
     빈 자리도 자리로 보여야 한다. 셋을 채우라는 말이 아니라 «여기까지가
     오늘»이라는 금이다 — 비어 있는 칸이 없으면 넷째를 밀어 넣게 된다. */
  .flow-top, .flow-later { display: flex; flex-direction: column; gap: 8px; }
  .flow-slot { display: flex; align-items: flex-start; gap: 10px; }
  .flow-no {
    flex: none; width: 16px; padding-top: 9px;
    font-size: 15px; font-weight: 800; line-height: 1;
    color: var(--ink-faint); font-variant-numeric: tabular-nums;
  }
  .flow-slot.filled .flow-no { color: var(--accent); }
  /* 이름 단추와 «빼기» 단추가 나란히 선다. 겹쳐 넣으면(단추 안의 단추)
     HTML이 허용하지 않아 브라우저가 안쪽을 밖으로 끄집어내고, 카드가
     두 줄로 벌어진다. */
  .flow-card {
    flex: 1; min-width: 0;
    display: flex; align-items: center;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card);
  }
  .flow-card .flow-chead { flex: 1; min-width: 0; }
  .flow-empty-slot {
    flex: 1; min-width: 0;
    border: 1px dashed var(--line); border-radius: 10px;
    padding: 13px 12px; font-size: 12.5px; color: var(--ink-faint);
    background: transparent;
  }
  /* 끌어 온 것이 여기 놓인다는 표 — 놓을 자리를 알려 주지 않으면
     끌다가 어디서 손을 놓아야 할지 몰라 도로 제자리에 떨어뜨린다. */
  .flow-slot.over .flow-card,
  .flow-slot.over .flow-empty-slot,
  .flow-later.over, .flow-top.over {
    border-color: var(--accent); background: var(--accent-soft);
  }
  .flow-later.over, .flow-top.over { border: 1px dashed var(--accent); border-radius: 10px; }
  .flow-chead {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left; font: inherit;
    background: transparent; border: 0; cursor: pointer;
    padding: 11px 12px; border-radius: 10px;
  }
  .flow-ctxt {
    flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .flow-card.on .flow-ctxt { font-weight: 700; }
  .flow-tag {
    flex: none; font-size: 11px; border-radius: 999px;
    padding: 2px 8px; color: var(--ink-soft); background: var(--surface);
  }
  .flow-when {
    flex: none; font-size: 11.5px; font-variant-numeric: tabular-nums;
    color: var(--accent); font-weight: 600;
  }
  .flow-drop {
    flex: none; font: inherit; font-size: 12px; line-height: 1;
    color: var(--ink-faint); background: transparent; border: 0;
    padding: 4px 6px; border-radius: 6px; cursor: pointer;
    opacity: 0; transition: opacity .12s;
  }
  .flow-card:hover .flow-drop, .flow-blk:hover .flow-drop { opacity: 1; }
  .flow-drop:hover { color: var(--danger); background: var(--surface); }
  /* 펼친 단계는 카드 안쪽이다 — 금 하나로 «이건 이 카드의 것»이라고 말한다 */
  .flow-open { padding: 0 12px 12px; border-top: 1px solid var(--line); }

  /* ── 오늘 일정 ──
     30분마다 금을 긋되 정시에만 진하게. 다 진하면 눈이 시각을 못 센다. */
  .flow-daywrap { padding: 8px 10px 14px; }
  /* 눈금 한 칸의 높이를 여기 한 곳에 적어 둔다. 놓인 덩이는 이 값으로
     자리를 잡는다 — 자바스크립트가 화면을 자로 재지 않아도 되고,
     칸이 숨어 있어 높이가 0으로 읽히는 일도 없다. */
  .flow-grid { position: relative; display: grid; --tick: 26px; }
  .flow-tick {
    display: grid; grid-template-columns: 46px 1fr;
    align-items: start; border-top: 1px solid var(--line);
    height: var(--tick);
  }
  .flow-tick.half { border-top-style: dashed; opacity: .55; }
  .flow-tick:last-child { border-bottom: 1px solid var(--line); }
  .flow-tlab {
    font-size: 11px; color: var(--ink-faint);
    font-variant-numeric: tabular-nums; padding: 2px 8px 0 0; text-align: right;
  }
  .flow-tick.half .flow-tlab { visibility: hidden; }
  .flow-tick.over .flow-tcell { background: var(--accent-soft); }
  .flow-tcell { height: 100%; border-radius: 4px; }
  /* 놓인 덩이는 눈금 위에 겹쳐 앉는다 — 시각과 길이를 자리로 말한다 */
  .flow-blk {
    position: absolute; left: 46px; right: 0;
    display: flex; align-items: center; gap: 6px;
    border-radius: 7px; padding: 3px 8px;
    background: var(--accent); color: var(--accent-ink);
    font-size: 12px; overflow: hidden; cursor: grab;
  }
  .flow-blk .flow-ctxt { color: inherit; font-size: 12px; }
  .flow-blk .flow-drop { color: var(--accent-ink); opacity: .7; }
  .flow-blk .flow-drop:hover { background: rgba(0, 0, 0, .18); color: #fff; }
  .flow-blk.dim { background: var(--ink-faint); }

  /* 펼친 단계 묶음 — 카드 안쪽이라 제 여백은 .flow-open이 갖는다 */
  .flow-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: -4px; }
  .flow-steps { display: flex; flex-direction: column; gap: 2px; }
  .flow-step {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 8px; border-radius: 8px;
  }
  .flow-step:hover { background: var(--card); }
  .flow-step input[type="checkbox"] { flex: none; }
  .flow-stxt { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); outline: none; }
  .flow-stxt:focus { background: var(--card); border-radius: 5px; }
  .flow-step.done .flow-stxt { color: var(--ink-faint); text-decoration: line-through; }
  /* «지금 할 것»은 한눈에 — 이 화면을 여는 까닭이 그것이다 */
  .flow-step.now { background: var(--accent-soft); }
  .flow-step.now .flow-stxt { font-weight: 600; }
  .flow-del {
    flex: none; font: inherit; font-size: 12px; line-height: 1;
    color: var(--ink-faint); background: transparent; border: 0;
    padding: 4px 6px; border-radius: 6px; cursor: pointer;
    opacity: 0; transition: opacity .12s;
  }
  .flow-step:hover .flow-del { opacity: 1; }
  .flow-del:hover { color: var(--ink); background: var(--surface); }

  .flow-add {
    font: inherit; font-size: 13.5px; color: var(--ink);
    background: var(--card); border: 1px solid var(--line);
    border-radius: 9px; padding: 9px 11px; resize: none; width: 100%;
  }
  .flow-add:focus { outline: none; border-color: var(--accent); }

  .flow-tpl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }
  .flow-tsel, .flow-tsave, .flow-tname input, .flow-tname button {
    font: inherit; font-size: 12.5px; color: var(--ink-soft);
    background: transparent; border: 1px solid var(--line);
    border-radius: 8px; padding: 6px 10px; cursor: pointer;
  }
  .flow-tsel:hover, .flow-tsave:hover { background: var(--card); color: var(--ink); }
  .flow-tname { display: inline-flex; gap: 6px; }
  .flow-tname input { cursor: text; color: var(--ink); min-width: 160px; }
  .flow-tname input:focus { outline: none; border-color: var(--accent); }

  /* 네 칸을 다 세우려면 1150px는 있어야 한다. 그보다 좁으면 둘씩 두 줄로
     접는다. 폭을 정하는 손잡이는 그때 숨긴다 — 줄이 바뀌면 왼쪽·오른쪽이
     아니라 위·아래라서 끌 방향이 없다. */
  @media (max-width: 1150px) {
    .flowview {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
      grid-template-rows: minmax(0, 1fr) minmax(200px, 44%);
      gap: 12px;
    }
    .flow-split { display: none; }
  }
  @media (max-width: 760px) {
    /* 폰에서는 네 칸을 «화면 높이 안에» 나눠 넣지 않는다.
       예전에는 22% / 1fr / 1fr / 30%로 잘라 넣었는데, 그러면 칸마다 화면의
       네 토막 중 하나만 받는다. 폰 화면에서 한 토막은 200px 남짓이라
       타임 박스는 셋 중 «3»만, 단계는 한 줄만, 일정은 07·08시만 보였다 —
       무엇 하나 온전히 안 보이는데 넷 다 있는 꼴이다.
       보드 화면과 달력 화면은 이미 «세로로 쌓고 페이지가 흐른다»로
       고쳐 두었다. 흐름만 옛 방식으로 남아 있었다. 같게 맞춘다.
       칸은 제 내용만큼 자란다(flex: none). 화면을 나눠 갖지 않으므로
       일정은 하루 열두 시간이 다 펼쳐지고, 손가락으로 밀어 내려 본다. */
    .flowview {
      display: flex;
      flex-direction: column;
      grid-template-columns: none;
      grid-template-rows: none;
      overflow-y: auto;
      padding: 12px;
      gap: 12px;
    }
    .flowview > .flow-col {
      flex: none;
      /* 텅 빈 칸도 «놓을 자리»로 보여야 한다 — 머리줄만 남으면 칸이 아니라 줄이다 */
      min-height: 150px;
    }
    /* 천장을 두는 칸은 보드 하나뿐이다.
       보드는 «있는 것 전부»라 분류가 열이면 끝이 없다 — 천장이 없으면
       그것만 스무 번 밀어야 타임 박스에 닿는다. 고르는 목록이니 그 안에서
       흐르는 것이 어색하지도 않다.
       나머지 셋은 «오늘 것»이라 길어야 얼마 안 된다. 천장을 두면 칸 안에서
       또 미는 겹스크롤이 되는데, 폰에서 그건 어느 쪽이 밀리는지 몰라
       손가락이 헛돈다. 그냥 다 펼쳐 두고 화면 하나로만 밀게 한다. */
    .flowview > .flow-col:first-child { max-height: 52vh; }
    /* 칸에 천장이 생겼으니 안쪽이 줄어들 수 있어야 한다. 세로로 놓인
       flex 자식은 기본이 «내용보다 작아지지 않음»이라 이것을 안 풀면
       칸이 천장을 뚫고 나가 도로 잘린다. */
    .flowview > .flow-col > .flow-body,
    .flowview > .flow-col > .flow-list { min-height: 0; }
  }
  /* 폴더를 한 번에 접고 펴는 줄. 오른쪽에 붙여 둔다 — 파일이 주인공이고
     이건 거들 뿐이라, 왼쪽 위에 두면 눈이 먼저 여기로 간다. */
  .fbar { display: flex; justify-content: flex-end; margin-bottom: -4px; }
  /* ── 접어 둔 폴더를 모아 두는 선반 ──
     격자에 섞어 두면 높이가 제각각인 칸 사이에 작은 폴더가 끼어들어 빈
     구멍이 숭숭 난다. 접어 둔 것은 «지금 보는 것»이 아니라 «치워 둔 것»이니
     아래에 따로 모으는 편이 뜻에도 맞는다.
     격자가 아니라 줄이다 — 폴더는 제 이름만큼만 넓으면 된다. */
  .fshelf {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    margin-top: 2px;
    border-top: 1px solid var(--line);
    flex: none;
  }
  .fshelf[hidden] { display: none; }
  .fshelf .board-cell {
    flex: 0 1 auto;
    width: auto;
    min-width: 150px;
    max-width: 280px;
    min-height: 0;
  }
  .fshelf .cat-head { padding: 8px 12px; }
  .fbar .foldall[hidden] { display: none; }
  .foldall {
    font: inherit; font-size: 12.5px; line-height: 1;
    color: var(--ink-soft); background: transparent;
    border: 1px solid var(--line); border-radius: 7px;
    padding: 5px 10px; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
  }
  .foldall:hover { background: var(--card); color: var(--ink); }
  .foldall:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .fgrid {
    display: grid;
    grid-template-columns: repeat(var(--board-cols, 12), 1fr);
    grid-auto-rows: minmax(200px, 1fr);
    gap: 12px;
    overflow-y: auto;
    flex: 1;
    align-content: stretch;
  }
  .frow {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
  }
  .frow:hover { background: var(--surface-2); }
  .frow .fn {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }
  .frow .fn:hover { color: var(--accent); }
  .frow .fsize { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
  .frow a.fn { color: inherit; text-decoration: none; }
  .frow .fdl { color: var(--ink-faint); padding: 2px 6px; border-radius: 6px; }
  .frow .fdl:hover { color: var(--accent); background: var(--surface-2); }
  .crumbs .cur { font-weight: 800; color: var(--ink); }
  .files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    overflow-y: auto;
    align-content: start;
    flex: 1;
  }
  .fcard .fsize { font-size: 11px; color: var(--ink-faint); }
  .fcard .fdel { color: var(--ink-faint); padding: 2px 7px; border-radius: 6px; flex: none; }
  .fcard .fdel:hover { color: var(--danger); background: var(--bg); }
  .fcard .fdel.armed { color: #fff; background: var(--danger); font-weight: 700; }
  .fcard.folder {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-height: 150px;
  }
  .fcard.folder .fhead { display: flex; gap: 8px; align-items: center; min-width: 0; }
  .fcard.folder .fhead .fname { flex: 1; }
  .fprev .pi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .files-hint { color: var(--ink-faint); font-size: 13.5px; padding: 20px 4px; grid-column: 1 / -1; }

  /* ── Editor ─────────────────────────── */
  #note-title {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 4px 0;
    min-width: 0;
  }
  #note-title::placeholder { color: var(--ink-faint); }
  .icon-btn.pinned { color: var(--pin); font-weight: 700; }
  .icon-btn.danger:hover { color: var(--danger); }
  #note-body {
    flex: 1;
    resize: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 16px 18px;
    line-height: 1.75;
    min-height: 0;
  }
  #note-body::placeholder { color: var(--ink-faint); }
  /* 첨부 파일 */
  .attach-chip .a-name .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


  /* ── Toast ──────────────────────────── */
  .toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    translate: -50% 0;
    background: var(--ink);
    color: var(--bg);
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 13.5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, translate 0.25s;
  }
  .toast.show { opacity: 1; pointer-events: auto; translate: -50% -6px; }
  .toast button { color: inherit; font-weight: 700; text-decoration: underline; }

  /* ── 작은 창 대응 ── */
  @media (max-width: 1060px) {
    .ver-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-faint);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1px 8px;
    cursor: pointer;
  }
  .ver-badge:hover { color: var(--accent); border-color: var(--accent); }
  .brand .today { display: none; }
    header { gap: 8px; }
  }
  @media (max-width: 920px) {
  }
  @media (max-width: 780px) {
    header { flex-wrap: wrap; row-gap: 6px; }
    .board { padding: 12px; gap: 12px; }
    .filesview { padding: 12px; }
  }
  @media (max-width: 820px) {
    .calview, .calview[data-layout] { display: flex; flex-direction: column; overflow-y: auto; grid-template-columns: none; }
    .cal-pane { flex: none; overflow: visible; border-bottom: 1px solid var(--line); }
    .cal-divider { display: none; }
    .check-pane, .month-pane { flex: none; overflow: visible; padding-top: 10px; border-left: 0; }
  }
  /* ── 첫 실행 안내 투어 (스포트라이트) ── */
  .tour-ring {
    position: fixed;
    border: 2px solid var(--pin);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(15, 18, 30, 0.6);
    pointer-events: none;
    z-index: 100;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .tour-tip {
    position: fixed;
    z-index: 101;
    width: 280px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 16px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .tour-tip::before {
    content: "";
    position: absolute;
    top: -8px;
    left: var(--arrow-x, 24px);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--surface);
  }
  .tour-tip.arrow-down::before {
    top: auto;
    bottom: -8px;
    border-bottom: 0;
    border-top: 8px solid var(--surface);
  }
  .tour-tip h3 { margin: 0 0 6px; font-size: 14.5px; }
  .tour-tip p { margin: 0 0 12px; font-size: 13px; line-height: 1.65; color: var(--ink-soft); }
  .tour-tip .row { display: flex; gap: 8px; align-items: center; }
  .tour-tip .step-n { font-size: 11.5px; color: var(--ink-faint); margin-right: auto; font-variant-numeric: tabular-nums; }
  .tour-tip button { font: inherit; cursor: pointer; }
  .tour-tip .t-skip { border: 0; background: none; color: var(--ink-faint); font-size: 12.5px; }
  .tour-tip .t-next {
    border: 0;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    font-size: 13px;
    border-radius: 8px;
    padding: 7px 14px;
  }

  @media (max-width: 700px) {
    .board { grid-template-columns: 1fr !important; grid-auto-rows: auto; padding: 12px; gap: 12px; }
    /* 한 번이라도 칸 크기를 끌어 두면 .rows-fine이 붙어 세로 눈금이 20px로 굳는다.
       그 규칙(.board.rows-fine)이 위의 .board보다 셈이 높아, 좁은 화면에서도
       눈금을 20px로 붙잡고 있었다. 그러면 칸은 min-height 때문에 280px인데
       자리는 32px씩만 벌어져 «칸끼리 겹친다» — 앞 칸이 뒤 칸에 덮여 머리줄만
       보이고 맨 마지막 칸 하나만 온전히 보였다. 폰에서 보드가 사라진 것처럼
       보인 까닭이 이것이다. 좁은 화면에서는 눈금을 풀어 준다.
       적어 둔 크기를 지우는 것은 아니다 — 창을 넓히면 그대로 되살아난다. */
    .board.rows-fine { grid-auto-rows: auto; }
    .board-cell { grid-column: auto !important; grid-row: auto !important; min-height: 280px; }
    /* 크게 볼 때 칸을 늘리는 규칙은 따로 두지 않는다 — 재어 보니 이미
       화면을 채운다(390×780 화면에서 339px → 689px). 보드가 남는 높이를
       칸에 나눠 주기 때문이다. 그래서 여기에는 아무것도 없다.
       (test/dom/zoom-mobile-dom.html이 그 높이를 지킨다.)

       좁은 화면은 거의 손가락으로 쓴다. «올려놓기»가 없어 흐린 채로 두면
       영영 흐리고, 흐린 단추는 눌러도 되는 것으로 안 읽힌다.
       (hover: none)으로도 걸어 두었지만, 태블릿처럼 둘 다 되는 화면도 있어
       여기서 한 번 더 못 박는다.) */
    .cell-zoom { opacity: 1; }
    .cell-memo { min-height: 230px; font-size: var(--cell-mfs, 15px); }
    .cell-list { font-size: var(--cell-fs, 14px); }
    .main, .filesview { overflow-x: hidden; max-width: 100vw; }
    .fgrid { display: flex !important; flex-direction: column; align-content: initial; padding: 10px; gap: 10px; width: 100%; max-width: 100%; }
    .fgrid .board-cell {
      flex: none;
      min-height: 170px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      grid-column: auto !important;
      grid-row: auto !important;
    }
    .frow { flex-wrap: wrap; }
    .frow .fn { flex: 1 1 60%; min-width: 0; }
    .cell-list { overflow-x: hidden; }
    .ver-badge { display: none; }
    .tag-manager { left: 10px; right: 10px; width: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
  }