/* ============================================================
   글꼴 — 본문 SUIT · 제목 SUITE (v68)
   둘 다 산돌의 SIL OFL 글꼴이라 상업적 사용에 문제가 없다.

   왜 둘로 나눴나
     SUIT  : 글자 폭이 고르고 받침이 눌리지 않아, 11~14px 본문에서
             한 화면에 스무 줄이 깔려도 글자끼리 뭉치지 않는다.
     SUITE : 자소 대비가 또렷해 큰 글자에서 인상이 선다.
             제목은 한 화면에 한둘뿐이라 또렷한 쪽이 낫다.
   페이퍼로지는 제목용 성격이 강해서 본문 크기로 깔면 획이 서로 붙었다.

   둘 다 가변 글꼴(Variable)이라 파일 하나로 100~900 을 다 쓴다 —
   굵기마다 따로 받던 예전 방식보다 첫 화면이 가볍다.
   local() 을 먼저 둬서 기기에 깔려 있으면 내려받지 않는다.
   ============================================================ */
@font-face{
  font-family:'SUIT';font-style:normal;font-weight:100 900;font-display:swap;
  src:local('SUIT Variable'),local('SUIT'),
      url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2-variations');
}
@font-face{
  font-family:'SUITE';font-style:normal;font-weight:100 900;font-display:swap;
  src:local('SUITE Variable'),local('SUITE'),
      url('https://cdn.jsdelivr.net/gh/sun-typeface/SUITE/fonts/variable/woff2/SUITE-Variable.woff2') format('woff2-variations');
}

/* ============================================================
   heyoo (해요) — style.css
   토큰 → 레이아웃 → 컴포넌트 순서

   색에 대해 (v65)
   ---------------
   v61 의 중성 회색 + 인디고를 걷어내고 **v60 까지 쓰던 웜 아이보리 + 테라코타**로
   되돌렸다. 화면 구조·간격·두께는 한 줄도 건드리지 않았다 — 토큰 값만 갈아끼웠다.

   v61 이후에 생긴 토큰(--hover · --accent-hover · --on-accent · --sat · --scrim)은
   그 시절 팔레트에 없던 것이라, 같은 색 계열에서 값을 새로 뽑았다.
     --hover        손이 닿은 자리. 라이트는 한 단계 어두워지고 다크는 한 단계 밝아진다
     --accent-hover 강조색 위에 손이 올라갔을 때. 역시 라이트는 어둡게 다크는 밝게
     --on-accent    강조색 위의 글자색 — 예전처럼 양쪽 다 흰색
     --sat          토요일 숫자(예전엔 #6b7f9e 로 박혀 있던 값)
     --scrim        시트 뒤 어둠 — 웜 그레이로

   세 단계로 면을 나누는 규칙은 그대로다.
     bg         바닥(페이지)
     surface-2  바닥보다 한 단계 가라앉은 면 — 날짜 칸
     surface    그 위에 떠 있는 면 — 카드 · 모달 · 입력칸
   ============================================================ */

:root{
  /* ---- 면 ---- */
  --bg:#faf9f5;
  --bg-grad:linear-gradient(172deg, #faf9f5 0%, #f6f4ec 100%);
  --bg-sunken:#f0eee6;     /* 눌린 자리: 세그먼트 바탕 · 칩 · 코드 */
  --surface:#ffffff;
  --surface-2:#f1efe7;     /* 날짜 칸 — 흰 카드가 확실히 떠 보이도록 불투명하게 */
  --hover:#f3f1e9;

  /* ---- 선 ---- */
  --line:#e6e4da;
  --line-strong:#d6d3c7;
  --card-line:#ddd9cc;     /* 카드 테두리는 한 단계 진하게 */

  /* ---- 글자 ---- */
  --text:#1f1e1d;
  --text-2:#6b6862;
  --text-3:#9c9890;

  /* ---- 강조 ---- */
  --accent:#d97757;
  --accent-hover:#c4664a;
  --accent-soft:#f8e9e1;   /* 고른 메뉴 바탕 */
  --on-accent:#ffffff;

  /* ---- 상태 ---- */
  --danger:#bf4d43;
  --done:#5f8d6e;
  --warn:#c9902f;
  --sat:#6b7f9e;           /* 토요일 — 파랑 계열로만 쓰는 자리 */

  /* ---- 태그 10종 ---- */
  --tag-1:#c2785c; --tag-2:#5f8d6e; --tag-3:#c9902f;
  --tag-4:#bf4d43; --tag-5:#8d7ba0; --tag-6:#a8a29a;
  --tag-7:#5b7fa6; --tag-8:#4e8f8a; --tag-9:#b06a86; --tag-10:#7d8a4f;

  /* ---------- 글자 스케일 (v69) ----------
     구글 캘린더를 재서 그대로 따왔다. 핵심은 크기 값이 아니라 '종류가 적다'는 것 —
     예전 MIRI 는 8~27px 사이에 23종을 쓰고 있었고, 11 / 11.5 / 12 / 12.5 처럼
     눈에 안 보이는 0.5px 차이로 갈라진 게 많아 위계가 읽히지 않았다. 여섯 개로 끊는다.

     줄 간격은 크기의 1.5배(본문) · 1.3배(제목) 두 가지뿐이고,
     자간은 0 또는 양수다 — 구글은 한 번도 글자를 좁히지 않는다.
     예전에 음수 자간(-0.03em)을 쓴 건 제목용 글꼴(페이퍼로지)을 본문에 깔면서
     글자가 벌어 보였기 때문인데, v68 에서 SUIT 로 바꾸면서 그 이유가 사라졌다. */
  --t-display:28px;  --t-display-lh:1.25;  --t-display-ls:-.01em;
  --t-title:22px;    --t-title-lh:1.3;     --t-title-ls:0em;
  --t-head:18px;     --t-head-lh:1.35;     --t-head-ls:0em;
  --t-body:16px;     --t-body-lh:1.5;      --t-body-ls:0em;
  --t-sub:14px;      --t-sub-lh:1.45;      --t-sub-ls:0em;
  --t-label:12px;    --t-label-lh:1.35;    --t-label-ls:.01em;

  /* 달력 격자만 예외 — 한 화면에 42칸이 들어가야 해서 본문 크기가 물리적으로 안 맞는다.
     구글 캘린더 월간도 여기만 12/11px 을 쓴다. */
  --t-cell:12px;     --t-cell-s:11px;    --t-cell-xs:10px;   /* v89 — 360px 미만 달력 */

  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px;

  /* 칸(컬럼) 안의 세로 간격 — 세 가지만 쓴다.
       --col-pad    칸 안쪽 위아래 여백
       --col-stack  칸 안에서 '묶음'끼리 떨어지는 간격
       --card-gap   카드끼리 — 한 묶음이라 더 좁게 */
  --col-pad:12px;
  --col-stack:12px;
  --card-gap:0px;    /* 줄끼리 붙인다 — 구분은 테두리가 한다 (v62) */
  /* 하루 화면의 일정 카드 면 (v84) */
  /* v89 — 색을 못 섞는 브라우저(오래된 안드로이드 웹뷰)에서 color-mix 가
     통째로 버려지면 '배경 없음'이 되어, 카드 뒤의 밀기 아이콘이 비쳐 보인다.
     먼저 섞지 않은 색을 두고, 섞을 수 있을 때만 덮어쓴다. */
  --ev-bg:var(--surface-2);
  --ev-bg-hover:var(--hover);
  /* v91 — 태그 색을 **흰 바탕**에 섞는다. 칸 바탕(베이지)에 섞으면 같은 색도
     한 꺼풀 가라앉아 탁해졌다. 흰 바탕에 섞으면 칸보다 한 단계 밝아져서
     블록이 떠 보이고 색도 산뜻하다 */
  --ev-base:#ffffff;
  /* v103 — 라이트에서 하루 칸 바탕을 **흰 판**으로 바꾸면서 같이 낮췄다.
     예전에는 크림색 칸(#f1efe7) 위에 블록을 얹느라 17% 로 진하게 뽑아야 겨우
     보였는데, 그래도 칸과의 대비가 1.0~1.09:1 이라 블록이 칸에 녹아 있었다.
     흰 판 위에서는 13% 만으로도 색이 또렷하다. */
  --ev-mix:18%; --ev-mix-h:24%;
  /* 블록 제목에 태그 색을 얼마나 실을지 — 나머지는 본문 글자색(--text)으로 채운다.
     62% 에서 열 가지 태그가 모두 WCAG AA(4.5:1)를 넘는다 (가장 옅은 금색 4.75:1) */
  --ev-ink:58%;
  /* 블록 테두리 — 면보다 한 단계 진한 같은 색. 흰 판 위에서 '카드'로 읽히게 한다 */
  --ev-edge:30%;
  /* 블록의 보조 줄(길이) — 옅은 바탕 위에서도 AA 를 넘기는 진한 회색 */
  --tl-sub:#58554f;
  /* v103·v104 — 칸(패널)의 판. v103 에서 하루만 흰 판으로 바꿨는데, 할 일 화면의
     칸은 크림색 그대로라 두 화면이 서로 다른 앱처럼 보였다. 한 벌로 간다.
     라이트는 흰 판, 다크는 그대로 가라앉은 면 */
  --panel:var(--surface);

  /* 그림자는 거의 쓰지 않는다. 면은 가는 웜 그레이 선으로 나눈다 */
  --shadow-1:0 1px 2px rgba(60,50,38,.04);
  --shadow-2:0 4px 12px rgba(60,50,38,.07), 0 1px 3px rgba(60,50,38,.04);
  --shadow-3:0 20px 48px rgba(40,32,24,.18), 0 4px 12px rgba(40,32,24,.08);
  --shadow-accent:0 4px 12px rgba(217,119,87,.26);
  --scrim:rgba(40,32,24,.42);

  --bar-h:54px;
  --strip-h:70px;
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);

  /* 못 받아왔을 때를 대비해 기기마다 가장 가까운 글꼴을 뒤에 둔다.
     맥 = Apple SD Gothic Neo / 윈도우 = 맑은 고딕 */
  --font:'SUIT', 'Pretendard Variable', Pretendard,
         -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
         'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
  /* 제목용 — 큰 글자에만 쓴다 (앱 이름 · 화면 제목 · 상세 제목 · 시트 제목) */
  --font-title:'SUITE', var(--font);
}

/* 다크 값은 한 벌만 쓰고 선택자만 둘로 나눈다.
   · 설정이 "시스템"일 때는 data-theme 이 없으니 OS 설정을 따라간다
   · 설정에서 라이트를 고르면 data-theme="light" 가 붙어 OS 다크를 무시한다
   · 다크를 고르면 OS와 무관하게 data-theme="dark" 로 적용된다 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#262624;
    --bg-grad:linear-gradient(172deg, #262624 0%, #222220 100%);
    --bg-sunken:#1f1e1d;
    --surface:#33332f;
    --surface-2:#1c1c1a;
    /* v89·v91 — 어두운 바탕에서는 더 섞어야 색이 보인다. 바탕도 칸보다 한 단계 밝게 */
    --ev-base:#232320;
    --ev-mix:26%; --ev-mix-h:34%;
    /* v103 — 다크는 블록 바탕이 어두워서 제목은 그대로 밝은 본문색이 제일 잘 읽힌다.
       0% 면 color-mix 가 --text 를 그대로 돌려준다 */
    --ev-ink:0%;
    --ev-edge:0%;
    /* 블록 바탕이 태그 색만큼 밝아져서, --text-2 그대로면 호버에서 3.9:1 까지 떨어진다 */
    --tl-sub:#c0bdb4;
    --panel:var(--surface-2);
    --hover:#3c3b37;
    --line:#3e3d3a;
    --line-strong:#52504b;
    --card-line:#494741;
    --text:#f0eee6;
    --text-2:#b0ada5;
    --text-3:#827f79;
    --accent:#e08b6b;
    --accent-hover:#eda184;
    --accent-soft:#3a2d26;
    --on-accent:#ffffff;
    --danger:#d2685e;
    --done:#7aa88a;
    --warn:#d7a851;
    --sat:#8ba2c2;
    --tag-1:#d08a6c; --tag-2:#7aa88a; --tag-3:#d7a851;
    --tag-4:#d2685e; --tag-5:#a493b8; --tag-6:#7d7a73;
    --tag-7:#7ea2c8; --tag-8:#6fb0aa; --tag-9:#c98aa3; --tag-10:#9aa86a;
    --shadow-1:0 1px 2px rgba(0,0,0,.24);
    --shadow-2:0 4px 12px rgba(0,0,0,.34);
    --shadow-3:0 20px 48px rgba(0,0,0,.52);
    --shadow-accent:0 4px 12px rgba(224,139,107,.24);
    --scrim:rgba(10,8,6,.58);
  }
}
:root[data-theme="dark"]{
    --bg:#262624;
    --bg-grad:linear-gradient(172deg, #262624 0%, #222220 100%);
    --bg-sunken:#1f1e1d;
    --surface:#33332f;
    --surface-2:#1c1c1a;
    /* v89·v91 — 어두운 바탕에서는 더 섞어야 색이 보인다. 바탕도 칸보다 한 단계 밝게 */
    --ev-base:#232320;
    --ev-mix:26%; --ev-mix-h:34%;
    /* v103 — 다크는 블록 바탕이 어두워서 제목은 그대로 밝은 본문색이 제일 잘 읽힌다.
       0% 면 color-mix 가 --text 를 그대로 돌려준다 */
    --ev-ink:0%;
    --ev-edge:0%;
    /* 블록 바탕이 태그 색만큼 밝아져서, --text-2 그대로면 호버에서 3.9:1 까지 떨어진다 */
    --tl-sub:#c0bdb4;
    --panel:var(--surface-2);
    --hover:#3c3b37;
    --line:#3e3d3a;
    --line-strong:#52504b;
    --card-line:#494741;
    --text:#f0eee6;
    --text-2:#b0ada5;
    --text-3:#827f79;
    --accent:#e08b6b;
    --accent-hover:#eda184;
    --accent-soft:#3a2d26;
    --on-accent:#ffffff;
    --danger:#d2685e;
    --done:#7aa88a;
    --warn:#d7a851;
    --sat:#8ba2c2;
    --tag-1:#d08a6c; --tag-2:#7aa88a; --tag-3:#d7a851;
    --tag-4:#d2685e; --tag-5:#a493b8; --tag-6:#7d7a73;
    --tag-7:#7ea2c8; --tag-8:#6fb0aa; --tag-9:#c98aa3; --tag-10:#9aa86a;
    --shadow-1:0 1px 2px rgba(0,0,0,.24);
    --shadow-2:0 4px 12px rgba(0,0,0,.34);
    --shadow-3:0 20px 48px rgba(0,0,0,.52);
    --shadow-accent:0 4px 12px rgba(224,139,107,.24);
    --scrim:rgba(10,8,6,.58);
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}   /* display를 지정한 컴포넌트에도 hidden이 먹도록 */
/* v92 — body 를 height:100% 로 묶어 두면 '붙어 있는(sticky)' 날짜 띠가
   화면 한 뼘을 넘어가는 순간 같이 떠내려간다. 시간표가 화면을 가득 쓰게 된
   뒤로는 바로 보이는 문제라 min-height 로 바꾼다 (바탕 그림은 그대로). */
html{height:100%;}
body{min-height:100%;}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg) var(--bg-grad) fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit;}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;}
/* v91 — 속을 채우라고 적어 둔 아이콘은 채운다. 위의 전역 규칙이 표시 속성보다
   세서, 인라인 fill="currentColor" 를 적어 둔 점 세 개가 빈 동그라미로 그려졌다 */
svg[fill="currentColor"]{fill:currentColor;stroke:none;}

/* ---------- 앱 바 ---------- */
.app-bar{
  position:sticky;top:0;z-index:40;
  height:calc(var(--bar-h) + var(--safe-t));
  padding:var(--safe-t) 14px 0;
  display:flex;align-items:center;justify-content:space-between;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}
.app-bar__left,.app-bar__right{display:flex;align-items:center;gap:6px;}
button.brand{border:0;background:transparent;padding:0;cursor:pointer;font:inherit;}
@media (hover:hover){
button.brand:hover .brand__name{color:var(--accent);}
}

.brand{display:flex;align-items:center;gap:8px;margin-right:6px;}
/* 앱 안에서는 로고를 띄우지 않는다 (v50) —
   들어오기 전에 이미 MIRI 를 보고 들어왔고, 그 자리는 보기 전환과 날짜가 쓴다.
   마크업은 남겨 둔다: 숨겨도 '오늘로' 단축키 노릇은 계속 하기 때문. */
.brand{display:none;}
/* 브랜드 마크 — '미리 도착한 신호'
   가운데 점이 알림이고, 둘레의 링은 그 점이 퍼져 나가는 파장이다.
   MIRI 가 하는 일(미리 적어두고, 때가 되면 알린다)을 도형 하나로 줄인 모양. */
.brand__mark{
  position:relative;
  width:20px;height:20px;border-radius:99px;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}
.brand__mark::after{
  content:'';position:absolute;inset:5.5px;
  border-radius:99px;background:var(--accent);
}
.brand__name{
  font-weight:800;font-size:var(--t-head);letter-spacing:var(--t-head-ls);
}

.btn-icon{
  position:relative;
  width:36px;height:36px;display:grid;place-items:center;
  border:0;background:transparent;border-radius:10px;cursor:pointer;color:var(--text-2);
}
@media (hover:hover){
.btn-icon:hover{background:var(--hover);color:var(--text);}
}

.btn-icon .dot{
  position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--danger);box-shadow:0 0 0 2px var(--bg);
}

/* 버튼은 종류가 달라도 높이가 같아야 한다 — 한 줄에 섞여 놓이는 일이 많다 */
:root{ --btn-h:40px; --btn-h-sm:34px; }
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--btn-h);
  border:1px solid var(--line);background:var(--surface);color:var(--text-2);
  padding:0 15px;border-radius:var(--r-sm);font-size:var(--t-body);letter-spacing:var(--t-body-ls);font-weight:600;cursor:pointer;
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
@media (hover:hover){
.btn-ghost:hover{color:var(--text);border-color:var(--line-strong);background:var(--hover);}
}

.btn-ghost.sm{min-height:var(--btn-h-sm);padding:0 12px;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);}
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--btn-h);
  border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);
  padding:0 19px;border-radius:var(--r-sm);font-size:var(--t-body);letter-spacing:var(--t-body-ls);font-weight:700;cursor:pointer;
  transition:filter .12s ease;
}
/* 밝기 필터 대신 전용 토큰을 쓴다 — 라이트는 진해지고 다크는 밝아져야 하는데
   filter 는 두 테마에 같은 방향으로만 작동한다 (v61) */
@media (hover:hover){
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
}

.btn-primary:active{filter:brightness(.95);}
.btn-primary.sm{min-height:var(--btn-h-sm);padding:0 15px;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);}
/* v116 — .btn-danger 를 없앴다. 단추의 '종류'는 .btn-ghost / .btn-primary
   둘뿐이고, 위험하다는 말은 **색**(.danger)이 얹어서 한다.
   모양이 다른 세 번째 종류가 있으면 같은 줄에 선 둘이 다른 물건처럼 보인다 */

.btn-col{display:flex;flex-direction:column;gap:6px;}
/* v106 — 서로 맞서는 한 쌍은 좌우로 세운다 (내보내기 ↔ 가져오기).
   위아래로 쌓으면 둘이 '차례'처럼 읽혀서, 먼저 내보내고 그다음 가져오는
   순서인 줄 알게 된다. 좁은 칸에서는 둘이 반씩 나눠 가진다 */
.btn-pair{display:flex;gap:8px;flex:0 0 auto;}
.btn-pair > .btn-ghost{min-width:88px;}
@media (max-width:719px){
  .btn-pair{flex:1 1 100%;}
  .btn-pair > .btn-ghost{flex:1 1 0;min-width:0;}
}

/* ---------- 보기 전환 ---------- */
.viewtoggle{
  display:flex;gap:2px;margin-left:4px;
  background:var(--bg-sunken);padding:3px;border-radius:99px;
}
.viewtoggle button{
  border:0;background:transparent;color:var(--text-2);
  padding:5px 11px;border-radius:99px;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;cursor:pointer;white-space:nowrap;
}
.viewtoggle button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1);}
/* 보기 전환은 엄지로 치는 단추다 — 손가락 기기에서만 2px 키운다.
   v54 에서는 폭(max-width:719px) 으로 갈랐는데, 그러면 맥에서 창을 줄이기만
   해도 탭이 커졌다. 체크박스와 같은 규칙으로 맞춘다 (v111) —
   **손가락이라서 키우는 것이니 기기를 묻는다.** */
@media (pointer: coarse){
  .viewtoggle button{padding:5px 12px;font-size:var(--t-body);letter-spacing:var(--t-body-ls);}
}
/* 좁은 화면 — 이건 자리가 없어서다. 그래서 그대로 폭을 따른다 (좌우 여백만) */
@media (max-width:479px){
  .viewtoggle button{padding:5px 10px;}
  .brand__name{display:none;}
}

/* ---------- 월간 보기 ---------- */
body.month-view .daystrip{display:none;}
/* 개인화는 날짜가 화면 왼쪽에 쭉 있으니 상단 날짜 줄은 감춘다 */
body.custom-view .daystrip{display:none;}

.month{
  display:flex;flex-direction:column;gap:10px;
  padding:14px 13px calc(100px + var(--safe-b));
}
@media (min-width:900px){ .month{padding:16px 16px calc(100px + var(--safe-b));} }

.month__bar{display:flex;align-items:center;gap:6px;padding:0 2px;}
/* v93 — 폰에서는 '2026년 10월' 을 화면 한가운데에 둔다.
   왼쪽에 '오늘', 오른쪽에 ‹ › 를 밀어 두고 제목만 띄워서 가운데에 맞춘다 —
   흐름 안에 두면 양쪽 단추 폭이 달라서 눈대중으로만 가운데가 된다. */
@media (max-width:719px){
  .month__bar{position:relative;}
  .month__bar #mToday{margin-right:auto;}
  .month__bar .spacer{display:none;}
  .month__title{
    /* v121 — left:0;right:0 이던 것을 가운데 한 점으로 바꿨다.
       양끝까지 늘려 두면 제목이 단추가 된 지금은 **줄 전체가 눌린다** —
       ‹ 를 누르려다 달 줄이 접히는 일이 생긴다. 가운데 맞춤은 그대로다 */
    position:absolute;left:50%;transform:translateX(-50%);
    min-width:0;white-space:nowrap;
  }
}
.month__title{
  /* v121 — <strong> 이던 것이 <button> 이 되었다. 생김새는 그대로 두려고
     단추 기본값(테두리·바탕·안여백)을 전부 지운다 */
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  padding:0;margin:0;color:inherit;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  font-size:var(--t-title);font-weight:700;letter-spacing:var(--t-title-ls);
  /* ‹ 2026년 10월 › — 달 이름 길이가 달라져도 › 가 흔들리지 않게 폭을 잡아 둔다 */
  min-width:112px;text-align:center;
}
/* 꺾쇠는 폰에서만 — 데스크탑에는 접을 줄 자체가 없다 */
.month__caret{display:none;width:16px;height:16px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  opacity:.5;transition:transform .18s ease;}
.month__title[aria-expanded="false"] .month__caret{transform:rotate(180deg);}

/* ── v121 · 달 고르는 줄 (폰 전용) ────────────────────────────
   데스크탑에서는 아예 없는 것으로 친다 — display:none 이 기본이고
   아래 모바일 조건에서만 살아난다. */
.month__strip{display:none;}
.month__strip[hidden]{display:none;}
@media (max-width:719px) and (pointer:coarse), (max-width:560px){
  .month__strip{
    position:relative;                 /* 칩의 offsetLeft 기준점 */
    display:flex;align-items:center;gap:8px;
    overflow-x:auto;overflow-y:hidden;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding:2px 2px 4px;margin:0 -2px;
    scrollbar-width:none;
  }
  .month__strip[hidden]{display:none;}
  .month__strip::-webkit-scrollbar{display:none;}
  .month__caret{display:block;}          /* 꺾쇠도 폰에서만 */
}
.mstrip__m{
  flex:0 0 auto;
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--line);border-radius:99px;
  background:transparent;color:var(--text-2);
  font-family:inherit;font-size:var(--t-body);letter-spacing:var(--t-body-ls);
  font-weight:600;
  padding:9px 18px;line-height:1;cursor:pointer;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.mstrip__m.on{
  background:var(--accent-soft);color:var(--accent);
  border-color:transparent;font-weight:800;
}
/* 해가 바뀌는 자리의 연도 — 칩이 아니라 글자다. 누를 것이 아니라 표지판이다 */
.mstrip__y{
  flex:0 0 auto;color:var(--text-3);
  font-size:var(--t-body);letter-spacing:var(--t-body-ls);font-weight:700;
  padding:0 2px;
}
.month__wd{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  padding:0 1px;
}
.month__wd span{
  text-align:center;font-size:var(--t-cell);font-weight:700;color:var(--text-3);
  letter-spacing:.04em;
}
.month__wd .sun{color:var(--danger);}
.month__wd .sat{color:var(--sat);}

/* 날짜 칸을 카드로 띄우지 않고 1px 선으로만 나눈다.
   칸마다 테두리와 그림자가 있으면 '카드 42장'으로 읽히는데,
   달력은 표로 읽혀야 날짜를 더 빨리 짚는다.
   선은 칸의 테두리가 아니라 '격자의 배경색'이다 — gap 1px 사이로 비친다. */
.month__grid{
  /* 세로는 브라우저(스크롤), 가로는 우리(달 넘기기) — v78.
     이 한 줄이 v55 에서 손가락 밀기를 걷어내게 만든 충돌의 해법이다. */
  touch-action:pan-y;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  grid-auto-rows:var(--mrow, 129px);   /* 다섯 줄 고정이라 모든 칸이 같은 높이 (v56) */
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  /* 네 귀퉁이를 직선으로 (v64) — 달력은 '표'다.
     모서리를 둥글리면 격자 전체가 카드 한 장으로 떠 보이고,
     첫 칸·마지막 칸만 모양이 달라져 42칸의 리듬이 깨진다. */
  border-radius:0;
  overflow:hidden;
}
/* v79 — 웹에서만 네 귀퉁이를 둥글린다. 폰은 v64·v57 그대로 직선.
   폰에서는 달력이 화면 좌우를 꽉 채우고 바깥 테두리도 없어서 둥글릴 자리가
   아예 없다. 웹에서는 달력이 여백 안에 놓인 '한 판'이라, 귀퉁이가 각지면
   판이 잘린 것처럼 보인다 — 같은 모양을 두 환경에 억지로 맞출 일이 아니다.
   overflow:hidden 은 위에 이미 있어서 첫 칸·마지막 칸이 알아서 깎인다. */
@media (min-width:720px){
  .month__grid{ border-radius:var(--r-lg); }
  /* v113 — **모서리 칸에도 같은 곡률**을 준다.
     칸이 각진 채로 둥근 판에 담겨 있으면, 모서리의 부채꼴만큼은 칸이 아니라
     판의 바탕(--line)이 비친다. 평소엔 선 색이라 티가 안 나다가, 그 칸을
     고르면(.sel 은 inset box-shadow 라 칸의 곡률을 따른다) 주황 테두리가
     모서리에서 뚝 끊겨 보였다 — 준해가 본 '좌하단 색이 안 든 자리'다.
     네 모서리를 모두 맞춘다. 마지막 줄은 늘 일곱 칸이라 nth-last-child(7)
     이 왼쪽 아래 칸이다. */
  .month__grid > .mcell:first-child     { border-top-left-radius:    calc(var(--r-lg) - 1px); }
  .month__grid > .mcell:nth-child(7)    { border-top-right-radius:   calc(var(--r-lg) - 1px); }
  .month__grid > .mcell:nth-last-child(7){ border-bottom-left-radius: calc(var(--r-lg) - 1px); }
  .month__grid > .mcell:last-child      { border-bottom-right-radius:calc(var(--r-lg) - 1px); }
}


.mcell{
  position:relative;
  /* 띠·공휴일·일정이 모두 같은 높이의 '한 줄'이라야 다섯 줄이 딱 떨어진다 (v55) */
  --mline:19px;
  --mgap:1px;
  --mpad-x:5px;
  display:flex;flex-direction:column;gap:var(--mgap);
  /* 위 5 / 아래 6 — 글자를 1px 올려 칸 가운데보다 살짝 위에 앉힌다 */
  padding:5px var(--mpad-x) 6px;
  background:var(--surface);
  border:0;border-radius:0;
  cursor:pointer;overflow:hidden;
  transition:background .12s ease, box-shadow .12s ease;
}
/* 칸에는 손을 올려도 색이 바뀌지 않는다 (v59).
   42개 칸 중 하나만 색이 들뜨면 '어디를 보고 있었는지'가 흐트러진다.
   누를 수 있다는 건 커서(pointer)로 충분하고, 고른 칸은 .sel 테두리가 알린다. */

/* 다크에서는 칸을 바탕보다 한 단계 더 가라앉힌다 (v58 · 피그마 D-03/M-03 블랙).
   칸이 떠 보이면 42장의 카드로 읽히는데, 달력에서 먼저 보여야 하는 건
   칸이 아니라 격자선과 그 위를 지나는 기간 띠다. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mcell{background:var(--bg-sunken);}
}
:root[data-theme="dark"] .mcell{background:var(--bg-sunken);}
/* v64 — 격자가 직선이 되면서 네 모서리 칸의 곡률 보정(v51)도 필요 없어졌다 */
/* 지난달·다음달 칸도 바탕은 같다 (v58) — 칸마다 색이 달라지면
   기간 띠가 달을 넘어갈 때 중간에 색이 끊긴 것처럼 보인다.
   흐린 날짜 숫자(.mcell.out .mnum)만으로 이번 달이 아님을 알린다. */
/* 고른 칸은 테두리가 없으니 안쪽 선으로 표시한다 — 칸 크기가 흔들리지 않는다 */
/* 고른 칸은 1px 선으로만 — 2px 는 1px 격자선 사이에서 혼자 굵어 튄다 (v52) */
.mcell.sel{box-shadow:inset 0 0 0 1px var(--accent);}
.mcell.drop-hover{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);}

.mnum{
  /* 숫자는 '자리표'지 읽을거리가 아니다 — 작고 얇게 두면
     그 칸의 일정 글자가 먼저 눈에 들어온다.
     폰은 보는 거리가 가깝고 칸도 좁아 10px 면 흐려져서 한 단계 키운다. (v52) */
  font-size:var(--t-cell-s);font-weight:500;line-height:1;
  /* 높이를 못 박는 이유 (v53) — 오늘 동그라미나 '10/1' 처럼 숫자 줄의 높이가
     칸마다 1~2px 달라지면, 그 아래 기간 띠가 그만큼 어긋나 줄이 끊겨 보인다. */
  height:18px;box-sizing:border-box;flex:0 0 auto;
  padding:0 3px;color:var(--text);
  display:inline-flex;align-items:center;gap:1px;
}
.mnum b{font-size:var(--t-cell-s);font-weight:500;opacity:.55;margin:0 1px;}
.mcell.sun .mnum{color:var(--danger);}
.mcell.sat .mnum{color:var(--sat);}
.mcell.out .mnum{color:var(--text-3);}   /* 다른 달은 주말이어도 흐리게 */
.mcell.today .mnum{
  color:var(--on-accent);background:var(--accent);font-weight:700;
  border-radius:99px;padding:0 7px;align-self:flex-start;
}
.mcount{
  position:absolute;top:6px;right:6px;
  font-size:var(--t-cell);font-weight:700;color:var(--text-3);
}
.mcell.today .mcount{color:var(--accent);}

/* 공휴일 · 기념일 — 구글 캘린더의 종일 일정처럼 한 줄 배지로 */
.mhol{
  display:block;flex:0 0 auto;margin:0;padding:0 6px;
  height:var(--mline);line-height:var(--mline);
  /* 두께 500 으로 통일 (v64) — 기념일·기간 띠·일정 줄이 한 칸 안에 나란히
     서는데 배지만 700 이면 그 칸에서 제일 먼저 읽혀 버린다. */
  border-radius:5px;font-size:var(--t-cell);font-weight:500;
  /* '…' 없이 칸 끝까지 (v64) — 점 세 개가 세 글자를 먹는다.
     11px 칸에서 '추석 …' 보다 '추석 연휴' 가 쓸모 있다. */
  overflow:hidden;text-overflow:clip;white-space:nowrap;
  background:color-mix(in srgb, var(--danger) 17%, transparent);
  color:var(--danger);
}
.mhol.event{
  background:color-mix(in srgb, var(--text-3) 15%, transparent);
  color:var(--text-2);
}
.mcell.hol .mnum{color:var(--danger);}
.mcell.hol.out .mnum{color:var(--text-3);}
.mcell.hol.today .mnum{color:var(--on-accent);}

/* ---------- 장기 업무 띠 (v40) ----------
   여러 날에 걸친 일을 달력 위에 가로 띠로 깐다.
   층(높이)은 '주' 단위로 맞춰 놓았기 때문에, 조각이 없는 칸에도 같은 높이의
   빈 자리(.hole)를 둬야 띠가 한 줄로 이어져 보인다. */
/* 띠는 칸의 좌우 안쪽 여백을 넘어 끝까지 닿는다 (v56).
   여백을 남겨두면 칸마다 양쪽이 비어 띠가 토막토막 끊겨 보인다.
   칸이 overflow:hidden 이라 테두리 밖으로는 안 나간다. */
.mbars{
  display:flex;flex-direction:column;gap:var(--mgap);
  min-width:0;flex:0 0 auto;
  margin:0 calc(-1 * var(--mpad-x));
}
/* 띠는 '면'으로만 그린다 (v53) — 테두리를 두르면 칸을 넘어갈 때마다
   선이 겹쳐 끊긴 것처럼 보인다. 대신 바탕을 한 단계 진하게 해서 띠가 또렷하게. */
.mbar{
  display:block;height:var(--mline);line-height:var(--mline);
  background:color-mix(in srgb, var(--c, var(--accent)) 34%, transparent);
  border:0;
  cursor:pointer;overflow:hidden;
}
/* 진짜 시작·끝나는 칸만 둥글게 — 가운데 칸은 네모로 두어 이어 붙는다 */
.mbar.s{border-radius:5px 0 0 5px;}
.mbar.e{border-radius:0 5px 5px 0;}
.mbar.s.e{border-radius:5px;}
.mbar em{
  /* 500 으로 통일 (v64) — 기념일 배지와 같은 두께다.
     띠와 배지가 한 칸에 겹쳐 쌓이는데 두께가 다르면 층이 어긋나 보인다. */
  display:block;font-style:normal;font-weight:500;
  font-size:var(--t-cell);color:color-mix(in srgb, var(--c, var(--accent)) 80%, var(--text));
  padding:0 4px;
  overflow:hidden;text-overflow:clip;white-space:nowrap;
}
.mbar.done{opacity:.5;}
.mbar.done em{text-decoration:none;}
.mbar.hole{background:none;cursor:default;}
.mbarmore{font-size:var(--t-cell);font-weight:600;color:var(--text-3);padding:0 4px;}

.mitems{display:flex;flex-direction:column;gap:var(--mgap);min-width:0;max-width:100%;min-height:0;}
.mitem{
  display:flex;align-items:center;gap:4px;min-width:0;max-width:100%;
  height:var(--mline);padding:0 3px;border-radius:5px;
  font-size:var(--t-cell);color:var(--text);   /* 흐린 회색을 쓰지 않는다 — 달력의 본문이다 (v56) */
}
/* 일정 줄도 손을 올렸다고 바탕을 칠하지 않는다 (v59) —
   칸이 가만히 있는데 그 안의 한 줄만 들뜨면 더 어수선하다. */
.mitem i{
  flex:0 0 auto;width:6px;height:6px;border-radius:99px;
  background:var(--ic, var(--accent));
}
/* v80 — 웹에서는 8×8. 칸이 넓어 6px 점은 글자 옆에서 티끌처럼 보인다.
   폰(720px 미만)은 5px 그대로 — 아래 좁은 화면 규칙이 덮어쓴다. */
@media (min-width:720px){
  .mitem i{width:8px;height:8px;}
}
/* 한 단계씩 얇게 (v59) — 달력은 42칸이 한눈에 들어오는 화면이라,
   같은 굵기라도 여기서는 글자가 훨씬 빽빽하게 뭉쳐 보인다.
   제목 500 → 400, 시각 600 → 500. */
.mitem em{
  font-style:normal;font-weight:400;
  /* '…' 없이 들어가는 데까지 (v64) — 칸 끝에서 글자가 그냥 잘린다.
     '사이트 리뉴…' 가 '사이트 리뉴얼 2' 보다 짧은데 정보는 더 적었다. */
  overflow:hidden;text-overflow:clip;white-space:nowrap;min-width:0;
}
.mitem em b{font-weight:500;}
/* 끝낸 일은 줄을 긋지 않는다 — 글자가 뭉개져 되레 읽기 어렵다. 흐리게만 (v56) */
.mitem.done{opacity:.5;}
.mitem.done em{text-decoration:none;}
.mmore{
  display:block;width:100%;text-align:left;flex:0 0 auto;
  border:0;background:transparent;cursor:pointer;font:inherit;
  height:var(--mline);line-height:var(--mline);
  font-size:var(--t-cell);font-weight:600;color:var(--text-3);
  padding:0 4px;border-radius:5px;
}
/* 더보기만은 글자색이 진해진다 — 바탕은 칠하지 않는다 (v59) */
@media (hover:hover){
.mmore:hover{color:var(--text-2);}
}

.mmore__n{display:none;}   /* 좁은 화면에서만 쓴다 */

/* 좁은 화면에서는 제목 대신 점만 */
@media (max-width:719px){
  /* 달력은 좌우를 꽉 채운다 (v57) — 좁은 화면에서 양옆 13px 은 칸 하나만큼 아깝다.
     바깥 테두리와 둥근 모서리도 없앤다. 화면 끝이 곧 달력의 끝이다.
     머리말·아래 목록은 원래 여백을 지켜, 달력만 넓어진 것으로 읽히게 한다. */
  .month{padding-left:0;padding-right:0;}
  .month__wd{padding:0;}
  .month__grid{border-left:0;border-right:0;}
  .month__bar,.month__day{margin-left:13px;margin-right:13px;}

  /* 칸 사이는 PC·모바일 모두 1px 선 하나뿐 — 여백을 두지 않는다 */
  .month__grid{--mrow:106px;}
  .mcell{--mline:16px;--mpad-x:2px;padding:4px var(--mpad-x) 5px;}
  .mhol{font-size:var(--t-cell);padding:0 4px;margin:0;}
  .mhol.event{display:none;}
  /* 좁은 화면에서도 글자를 보여준다. 자리를 벌려고 시각은 감춘다 (v55).
     v64 — 네 글자에서 끊던 상한(max-width:4.1em)을 없앴다.
     칸이 좁으면 어차피 칸 끝에서 잘리는데, 상한이 있으면 칸에 아직
     자리가 남았는데도 네 글자에서 먼저 끊겼다. */
  /* v89 — 좁은 폰에서도 제목 네 글자는 보이게. 칸 안쪽 여백·점·사이값을
     1~2px 씩 깎고 글자를 11px 로 내리면 55px 칸에서 네 글자가 들어간다. */
  .mitems{flex-direction:column;padding:0;}
  .mitem{padding:0;gap:2px;font-size:var(--t-cell-s);}
  .mitem i{display:block;width:3px;height:3px;}
  .mitem em{display:block;}
  .mitem em b{display:none;}
  .mmore{font-size:var(--t-cell);padding:1px 3px;}
  .mmore__n{display:inline;}
  .mmore__t{display:none;}
  .mcount{display:none;}
  /* 좁은 폰에서는 1일 칸이 '10/1' 네 글자라 칸 오른쪽 끝에 딱 붙는다.
     글자와 사이값을 조금씩 줄여 숨 쉴 자리를 만든다. */
  .mnum{font-size:var(--t-cell-s);font-weight:500;height:15px;padding:0 2px;gap:0;}   /* 11 → 9 (v54) */
  .mnum b{font-size:var(--t-cell-s);margin:0;}
  /* 좁은 화면에서는 띠만 남기고 제목은 접는다 — 띠의 흐름이 더 중요하다 */
  .mbar{height:7px;line-height:7px;}
  .mbar em{display:none;}
  .mbars{gap:2px;}
  .mbarmore{display:none;}
}

/* v96 — '할 일' 화면의 날짜 칸과 **같은 상자**로 맞춘다.
   여기만 모서리 18 / 위 패딩 13 이라 같은 목록이 화면마다 다른 상자에 담겨 있었다 */
/* v107 — 달력 아래 '그날 목록' 판도 할 일 칸과 같은 흰 판으로.
   v104 에서 .col 을 --panel 로 옮길 때 이 판만 --surface-2 로 남아 있었다.
   그 바람에 라이트에서 여기만 크림색이라, 같은 '칸'인데 화면마다 색이 달랐다.
   흰 판은 몸통(#faf9f5)과 밝기가 가까워서 테두리가 있어야 갈라진다 — .col 과 같다 */
.month__day{
  margin-top:4px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-xl);                 /* 18 → 22 (할 일 칸과 같게) */
  padding:var(--col-pad) 11px;               /* 13/11/12 → 12/11/12 */
}
.mday__head{display:flex;align-items:baseline;gap:7px;padding:1px 3px 9px;}
.mday__date{font-size:var(--t-body);font-weight:700;letter-spacing:var(--t-body-ls);}
/* v96 — 오늘이면 머리말이 강조색. 할 일·하루 칸(.col.is-today .col__date)과 같은 규칙이다 */
.month__day.is-today .mday__date{color:var(--accent);}
.month__day.is-hol  .mday__date{color:var(--danger);}
.mday__sub{font-size:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--text-3);font-weight:600;}
/* v68 — 카드는 v62 부터 '목록 한 줄'이라 테두리로 이어 붙는다.
   여기만 gap:8px 이 남아 있어서, 달력 아래 목록에서만 줄 사이가 벌어져 있었다. */
/* v93 — 빈 날의 안내 상자를 걷어내면서 바닥이 0px 이 됐다.
   끌어다 놓을 자리는 남겨 둔다 (보이지는 않는다) */
.mday__list{display:flex;flex-direction:column;gap:var(--card-gap);min-height:44px;}

/* ---------- 검색 ---------- */
.search-bar{
  position:sticky;top:calc(var(--bar-h) + var(--safe-t));z-index:39;
  padding:10px 14px 0;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}
.search-bar__top{display:flex;gap:8px;align-items:center;position:relative;}
.search-bar__ico{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--text-3);pointer-events:none;display:grid;place-items:center;
}
.search-bar__ico svg{width:17px;height:17px;}
.search-bar input{
  flex:1;min-width:0;
  border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);padding:11px 14px 11px 38px;font-size:var(--t-body);letter-spacing:var(--t-body-ls);outline:none;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.search-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.search-bar input::-webkit-search-cancel-button{-webkit-appearance:none;}

.search-filters{
  display:flex;gap:6px;overflow-x:auto;
  padding:9px 0 10px;scrollbar-width:none;
}
.search-filters::-webkit-scrollbar{display:none;}
.search-filters button{
  flex:0 0 auto;border:1px solid var(--line);background:var(--surface);
  padding:6px 13px;border-radius:99px;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:700;
  color:var(--text-2);cursor:pointer;white-space:nowrap;
  transition:border-color .14s ease, color .14s ease;
}
.search-filters button[style*="--tc"]{color:var(--tc);}
@media (hover:hover){
.search-filters button:hover{border-color:var(--line-strong);}
}

.search-filters button.on{
  border-color:currentColor;
  background:color-mix(in srgb, currentColor 12%, var(--surface));
}
.search-filters button.on:not([style*="--tc"]){background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.search-filters button .n{opacity:.55;margin-left:4px;font-size:var(--t-label);letter-spacing:var(--t-label-ls);}

/* ---------- 날짜 스트립 ---------- */
.daystrip{
  position:sticky;top:calc(var(--bar-h) + var(--safe-t));z-index:38;
  display:flex;gap:6px;align-items:stretch;
  height:var(--strip-h);padding:10px 14px;
  overflow-x:auto;overflow-y:hidden;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  scrollbar-width:none;scroll-behavior:smooth;
  cursor:grab;
}
/* 끄는 동안에는 부드러운 스크롤을 끈다 — 손을 못 따라와 미끄러져 보인다 */
.daystrip.grabbing{cursor:grabbing;scroll-behavior:auto;user-select:none;}
.daystrip.grabbing .day{pointer-events:none;}
.daystrip::-webkit-scrollbar{display:none;}
body.searching .daystrip{top:calc(var(--bar-h) + var(--safe-t) + var(--search-h, 100px));}
body.search-active .daystrip{display:none;}   /* 검색어를 입력하면 날짜 스트립은 비운다 */

/* v111 — 점을 흐름에서 빼 **오른쪽 위 모서리**로 보냈다.
   점이 요일·날짜와 한 줄에 서 있을 때는, 점이 차지한 높이만큼 글자 두 줄이
   위로 밀려 칸 가운데가 아니었다. 이제 요일·날짜는 늘 칸 한가운데에 고정되고,
   점이 있든 없든 글자는 1px 도 움직이지 않는다. */
.day{
  position:relative;
  flex:0 0 auto;width:48px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);cursor:pointer;
  transition:transform .14s ease, background .14s ease, border-color .14s ease;
}
@media (hover:hover){
.day:hover{border-color:var(--line-strong);}
}

/* v113 — 요일과 일자를 같은 크기로 두었더니 '무엇을 먼저 보는 칸인지'가
   없었다. 날짜를 고를 때 눈이 먼저 찾는 건 **숫자**다 — 일자를 한 단계
   키우고(12 → 15px) 요일은 그대로 두어 위아래에 급을 만든다 */
.day__w{font-size:var(--t-cell);font-weight:700;color:var(--text-3);letter-spacing:.04em;}
.day__d{font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.1;}
.day__n{
  position:absolute;top:5px;right:5px;
  width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:0;
}
.day__n.on{opacity:1;}
.day.sat .day__w{color:var(--sat);}   /* 웜톤과 부딪히지 않는 차분한 블루그레이 */
.day.sun .day__w{color:var(--danger);}
/* 보고 있는 날짜 범위 — 연한 강조 */
.day.active{
  background:var(--accent-soft);
  border-color:color-mix(in srgb, var(--accent) 38%, transparent);
}
.day.active .day__d{color:var(--accent);}

/* 오늘 — 유일하게 꽉 채워서, 보고 있는 범위 안에서도 바로 찾히게 */
.day.today{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 32%, transparent);
}
.day.today .day__w,
.day.today .day__d{color:var(--on-accent);}
.day.today .day__n{background:var(--on-accent);}

.day.drop-hover{
  transform:translateY(-3px);
  background:var(--accent-soft);
  border-color:var(--accent);
}
.day.today.drop-hover{background:var(--accent);}

/* ---------- 보드 ---------- */
.board{
  padding:14px 13px calc(100px + var(--safe-b));
  display:grid;gap:12px;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .board{
    grid-template-columns:repeat(var(--cols,3), minmax(0,1fr));
    align-items:start;
    padding:16px 16px calc(100px + var(--safe-b));
  }
  /* TODO 칸은 참고용이라 날짜 칸을 좁히지 않도록 고정 폭으로 둔다 */
  .board.has-todo{
    grid-template-columns:304px repeat(var(--cols,3), minmax(0,1fr));
  }
}

/* ---------- v121 · 주간(월~일) ----------
   일곱 칸마다 시각 글자 칸(62+10px)을 하나씩 두면 504px 을 눈금에만 쓴다.
   1280px 에서 한 칸에 남는 자리가 96px — 제목이 두 글자씩 끊긴다.

   그래서 **눈금을 맨 왼쪽 한 줄만** 남긴다. 구글 캘린더와 같은 모양이다.
   방법은 격자를 다시 짜는 게 아니라, 첫 칸의 시각 글자를 줄 밖(보드의
   왼쪽 여백)으로 밀어내는 것이다 — 그래야 일곱 칸의 **폭이 똑같이** 남는다.
   (칸 하나만 눈금을 가지면 그 칸만 72px 좁아져서 한 주가 삐뚤어 보인다) */
.board.week-view{ padding-left:78px; }
.board.week-view .tl__row{
  grid-template-columns:0 minmax(0,1fr);gap:0;
  position:relative;                       /* 아래 .tl__h 의 자리 기준 */
}
.board.week-view .tl__h{ display:none; }
.board.week-view .col:first-child .tl__h{
  display:flex;position:absolute;top:0;right:calc(100% + 10px);
  width:62px;pointer-events:none;
}
.board.week-view .tl__events{ left:0; }
/* 머리말이 일곱 번 반복된다. 칸이 160px 까지 좁아지면 '오늘' 이 '오/늘' 로
   끊기므로, 글자를 쪼개지 말고 **줄을 바꾸게** 한다 */
.board.week-view .col__head{ flex-wrap:wrap; gap:4px 6px; }
.board.week-view .col__date{ white-space:nowrap; max-width:100%; }
.board.week-view .col__spacer{ display:none; }

/* 세로 목록 — 날짜를 위에서 아래로 이어서 보고, 화면 폭을 전부 쓴다 */
.board.layout-list,
.board.layout-list.has-todo{
  grid-template-columns:minmax(0,1fr);
  max-width:none;width:100%;
}
.board.layout-list .col{min-height:0;}

/* v92 — 목록↔시간 전환 줄(.boardmode)을 통째로 걷어냈다.
   하루는 언제나 시간표다. */

/* ---------- 시간표 (v60) ----------
   시각이 '시작점'만 있고 끝나는 시각이 없는 앱이라, 구글 캘린더처럼
   길이로 블록을 그릴 수가 없다. 그래서 시간을 '줄'로 깔고 그 줄에 카드를 앉힌다.
   겹침 계산이 아예 없어서 한 시간에 몇 개가 몰려도 무너지지 않는다. */
.tl{display:flex;flex-direction:column;gap:10px;}

/* v92 — 하루(시간표)는 흰 바탕 위에 둔다. 칸을 감싸던 베이지 상자를 걷어내면
   블록의 파스텔색이 그대로 살아난다 (참고 이미지와 같은 결)

   '전체화면'이라 바깥 여백도 없앤다. 보드가 가지고 있던 좌우 여백을 0 으로 두고,
   그만큼을 칸 안쪽 패딩으로 옮겨 준다 — 글자 자리는 그대로인데 흰 바탕만
   화면 끝까지 닿는다. 아래 여백(큰 ＋ 자리)은 그대로 둔다. */
/* 스크롤 고정(scroll anchoring)을 끈다 — 달력 띠가 늦게 붙으면 브라우저가
   '보던 것을 지켜 준다'며 스크롤을 혼자 당긴다. 여기서는 우리가 맞춘 시각 자리가 기준이다 */
.board.mode-time{overflow-anchor:none;}
/* v103 — 하루 칸은 흰 판이다 (라이트). 크림색 칸 위에 파스텔 블록을 얹으니
   둘 다 따뜻한 색이라 블록이 칸에 녹아 있었다 — 재 보면 대비가 1.0~1.09:1.
   v104 — 흰 판은 .col 전체(할 일·보관함 포함)로 넓혔다. 아래 .col 규칙이 맡는다 */

/* v94 — 전체화면(흰 판 한 장)은 **폰에서만** 쓴다.
   웹은 v91 까지와 같은 '카드 세 장' 으로 되돌린다 — 베이지 상자에 둥근 모서리.
   폰은 한 칸이 화면을 다 쓰므로 상자로 감싸면 좌우에 쓸데없는 띠만 남고,
   웹은 세 칸을 나란히 두는 자리라 상자가 있어야 날짜끼리 갈라진다. */
@media (max-width:899px){
  .board.mode-time{padding:0;gap:0;}
  .board.mode-time > .col{
    /* v95 — 색은 웹과 같은 칸 색(--surface-2)을 쓴다. 폰만 흰 판이면 같은 화면이
       기기마다 다른 앱처럼 보인다. 달라지는 건 '모양'(상자냐 전체화면이냐)뿐이고
       '색'은 한 벌로 간다. 블록의 파스텔색도 웹과 똑같이 얹힌다 */
    background:var(--panel);
    border:0;box-shadow:none;border-radius:0;
    /* 아래 여백은 칸 **안쪽**에 둔다 — 밖에 두면 큰 ＋ 자리에 다른 색 띠가 남는다 */
    padding:12px 13px calc(100px + var(--safe-b));
  }
}
/* 시간표는 하루가 길어서 머리말이 금방 위로 사라진다. 세 칸을 나란히 보는
   웹에서는 '지금 보는 줄이 어느 날인지' 가 그때마다 헷갈려서 머리말을 붙여 둔다.
   바탕은 칸에서 물려받는다 — 웹은 베이지 상자, 폰은 흰 판이다 */
.board.mode-time > .col > .col__head{
  position:sticky;z-index:5;
  top:calc(var(--bar-h) + var(--safe-t) + var(--strip-h));
  background:inherit;
  padding-top:8px;padding-bottom:7px;
}

/* v89 — 섞을 수 있는 브라우저에서만 옅은 강조색 바탕을 쓴다 */
@supports (background: color-mix(in srgb, red 50%, blue)){
  :root{
    --ev-bg:color-mix(in srgb, var(--accent) 10%, var(--surface));
    --ev-bg-hover:color-mix(in srgb, var(--accent) 17%, var(--surface));
  }
}

/* 시각 없는 일 — 이 앱에서는 이쪽이 오히려 다수다 */
/* v89 — 테두리와 바탕을 걷어냈다. 글자와 갯수만 둔다.
   점선 상자가 시간 줄 위에 얹혀 있으면 '아직 안 채운 칸' 처럼 읽혔고,
   기간이 긴 일을 여기로 합치면서 상자 안에 상자가 또 생겼다. */
.tl__free{
  display:flex;flex-direction:column;gap:var(--card-gap);
  padding:0 0 2px;border:0;background:transparent;border-radius:12px;
}
/* v89 — 글자를 한 단계 키웠다. 상자가 없어진 만큼 머리말이 묶음을 대신한다 */
.tl__free-h{
  display:flex;align-items:center;gap:4px;
  width:100%;border:0;background:transparent;text-align:left;
  font-size:var(--t-sub);font-weight:700;color:var(--text-2);letter-spacing:var(--t-sub-ls);
  padding:2px 2px 3px;cursor:pointer;border-radius:8px;
}
@media (hover:hover){
.tl__free-h:hover{background:var(--hover);}
}

.tl__free-h b{color:var(--text-2);}
.tl__caret{
  width:14px;height:14px;stroke-width:2.4;
  transition:transform .14s ease;
}
.tl__free.is-fold{gap:0;padding-bottom:2px;}
.tl__free.is-fold .tl__caret{transform:rotate(-90deg);}
.tl__free.is-empty{opacity:.72;}
.tl__none{margin:0;padding:2px;font-size:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--text-3);}

.tl__grid{display:flex;flex-direction:column;}
/* v68 — 가로줄을 칸 전체가 아니라 '시각 글자 뒤부터' 긋는다.
   줄이 시각까지 덮으면 시각이 줄 위에 얹힌 글자처럼 읽혀서,
   구글 캘린더처럼 시각은 왼쪽에 떨어뜨리고 줄은 일정이 놓이는 자리에만 둔다. */
/* v78 — 시각 칸을 44 → 62px. '오후 12시' 가 안 잘리는 최소 폭이다 */
/* v90 — 줄 높이를 시각에 묶는다. 1시간 = 60px(1분 1px) 이라
   '30분짜리는 30px' 이 눈으로 바로 읽힌다. 일정은 이 격자 위에 얹는다. */
/* v112 — PC 줄 간격을 20% 줄였다 (60 → 48px · 1분 0.8px).
   폰이 쓰던 값과 같아져서, 폭으로 가르던 규칙(아래)이 할 일이 없어졌다.
   한 시간 48px 이면 PC 에서도 열세 시간이 한눈에 들어온다. */
.tl{--tl-h:48px;}
/* v93 의 폰 전용 48px 규칙은 v112 에서 지웠다 — 위에서 모두 48px 이 되었다.
   (같은 값을 두 군데서 말하면, 다음에 한쪽만 고쳐 놓고 왜 안 바뀌나 하게 된다) */
.tl__row{
  display:grid;grid-template-columns:62px minmax(0,1fr);
  gap:10px;align-items:stretch;
  height:var(--tl-h);min-height:0;
}
.tl__row > .tl__slot{border-top:1px solid var(--line);}
.tl__row:last-child > .tl__slot{border-bottom:1px solid var(--line);}
/* v84 — 시각 글자의 한가운데가 오른쪽 격자선과 한 줄로 선다.
   예전에는 줄 맨 위에서 5px 내려 붙였더니, 글자는 선 아래에 있고 선은
   그 위를 지나서 '이 선이 몇 시인가'를 눈이 한 번 더 맞춰야 했다.
   구글 캘린더처럼 선 위에 글자를 얹는다. */
.tl__h{
  display:flex;justify-content:flex-end;align-items:flex-start;
  padding-top:0;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:600;color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.tl__h > span{display:block;transform:translateY(-50%);}
/* 첫 줄의 글자가 위로 올라가면서 잘리지 않게 자리를 조금 비워 둔다 */
/* v90 — 일정 층이 이 격자를 기준으로 자리를 잡는다 */
.tl__grid{padding-top:9px;position:relative;}
/* 시각 글자 칸(62px) + 사이값(10px) 만큼 비켜서 격자 위에 겹친다.
   층 자체는 손을 안 받는다 — 빈 자리에 떨구면 그 줄(.tl__slot)이 받아야 한다 */
.tl__events{
  position:absolute;left:72px;right:0;top:9px;bottom:0;
  pointer-events:none;
}
/* v91 — 블록 위아래로 1~2px 를 비워 둔다. 예전에는 블록의 끝이 시각 격자선과
   딱 겹쳐서, 면을 채운 자리마다 위아래에 선이 그어진 것처럼 보였다.
   바탕은 카드가 아니라 **뚜껑(.card__slide)** 이 칠한다 — 그래야 이 여백이
   비어 보이고 선이 블록에 닿지 않는다 */
/* v101 — 카드 자체는 '자리'일 뿐 투명하다. 칠해지는 면은 안쪽 뚜껑(.card__slide) 이라,
   v100 에서 카드에만 라운드를 줬더니 **왼쪽 두 모서리만** 둥글어 보였다 —
   왼쪽은 패딩이 0 이라 뚜껑이 카드 끝까지 닿아 클립에 깎였고,
   오른쪽은 2px 안쪽이라 클립이 닿지 않아 각진 채로 남았던 것이다.
   v101 — 라운드를 **뚜껑에 직접** 줬다 (아래 .card__slide). 네 모서리가 같아졌다.
   v104 에서 걷어냈다가 v108 에서 되돌렸다 (8px) — 위 .tl__events .card 주석 참고.
   패딩은 위아래 2 → 4px. 붙어 선 블록 둘이 한 덩어리로 읽히던 걸 떼어 놓는다
   (위아래가 각각 4px 이라 사이는 8px 이 벌어진다). */
/* v113 — 위 패딩을 0 으로. 면의 **윗변이 곧 시작 시각**이어야 한다.
   4px 를 비워 두면 1시 일정의 면이 1시 선보다 4px 아래에서 시작해서,
   눈으로 재면 '1시 조금 넘어 시작하는 일' 로 읽힌다. 블록이 서로 달라붙는
   걸 막는 일은 아래 패딩 하나로 충분하다 (사이가 4px 벌어진다). */
.tl__events > .card{
  position:absolute;margin:0;
  padding:0 4px 4px 2px;
  background:transparent !important;
  overflow:hidden;         /* 밀었을 때 드러나는 아랫면(.card__acts)을 깎아 준다 */
  pointer-events:auto;
}
/* v102 — 끝 시각을 안 적은 일(.is-open)은 '30분짜리' 로 가정해 그리던 터라
   24~30px 짜리 슬라이스가 되어 제목이 겨우 들어갔다. 실제로 30분이라서가 아니라
   **얼마나 걸릴지 아직 모르는** 것이므로, 면을 위아래로 10px 씩 늘려 읽을 자리를 준다.
   늘리는 건 JS 쪽 calc (tlEventsHTML) 이고, 여기서는 늘어난 만큼 보통 여백을 쓴다 */
.tl__events > .card.is-open{padding-top:0;padding-bottom:4px;}
/* 30분짜리는 통째로 30px 이라 8px 을 여백으로 내주면 글자가 눌린다.
   v103 — 앞뒤가 막혀 못 늘어난 .is-open 에도 같이 붙으므로 **뒤에** 둔다 */
.tl__events > .card.is-short{padding-top:0;padding-bottom:2px;}
.tl__events > .card > .card__slide{
  height:100%;align-items:flex-start;
  padding:3px 7px 3px 12px;gap:8px;   /* 칸이 좁아 13.5 는 글자 자리를 다 먹는다 */
  border-radius:8px;                  /* v108 — 칠하는 쪽은 뚜껑이라 여기에도 적는다 */
  /* v103 — 넘치는 글자는 **면 안에서** 자른다. 카드 쪽에서만 자르면 카드가
     면보다 패딩만큼 크기 때문에, 길이 줄이 면 밖(격자 위)에 걸터앉아 보였다 */
  overflow:hidden;
}
/* 블록은 '언제·얼마나' 를 보는 자리다. 중요 표시는 목록에서 한다 —
   좁은 칸에서 별표까지 세우면 제목이 0px 로 눌린다 (v90) */
.tl__events > .card .star{display:none;}
.tl__events > .card .card__body{flex:1 1 auto;min-width:0;}
/* 끄는 손잡이는 글자 줄에서 빼내 구석에 세운다 — 세로로는 자리가 남는다 */
.tl__events > .card [data-act="grip"]{
  position:absolute;right:2px;bottom:1px;z-index:2;
  opacity:.45;
}
@media (hover:hover){
.tl__events > .card:hover [data-act="grip"]{opacity:.9;}
}

/* 30~45분짜리는 글자 한 줄이 겨우 들어간다 — 체크와 제목을 가운데로 눕힌다 */
.tl__events > .card.is-short > .card__slide{
  align-items:center;padding-top:0;padding-bottom:0;gap:9px;
}
.tl__events > .card.is-short .card__title{font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);}
.tl__events > .card.is-short .check{width:17px;height:17px;}
.tl__events > .card.is-short .star,
.tl__events > .card.is-short [data-act="grip"]{display:none;}
.tl__slot{
  position:relative;
  display:flex;flex-direction:column;gap:3px;   /* v84 — 카드가 면을 가져서 서로 떼어 놓는다 */
  padding:0;min-height:0;
}

/* v84 — 하루 화면의 일정은 '면' 을 가진 카드다.
   시간표에서는 카드가 '몇 시의 무엇' 이라는 덩어리라, 목록에서처럼 줄로만
   두면 격자선과 섞여 어느 줄에 속한 건지 흐려진다. 면을 주고 왼쪽에 띠를
   둬서 한 덩어리로 보이게 한다.
   테두리는 긋지 않는다 — 1px 선이 격자선과 겹쳐 두 줄로 보인다.
   --card-bg 도 같이 바꿔야 한다 (밀기 아이콘을 덮는 뚜껑이 쓰는 값) */
/* v93 — 모서리를 둥글리지 않는다. 카드와 뚜껑이 각각 둥근 모서리와 3px 띠를
   하나씩 들고 있었는데, 카드에 위아래 2px 여백이 있어 두 모서리가 살짝 어긋난
   채로 겹쳤다. 왼쪽 앞이 '라운드가 여러 겹 포개진' 것처럼 보인 까닭이다.
   띠는 뚜껑 쪽 하나만 남기고(아래 .card__slide 규칙), 각은 직각으로 둔다 —
   시각 격자도 직선이라 면이 격자에 딱 맞아떨어진다. */
.tl__events .card{
  --card-bg:var(--ev-bg);
  background:var(--ev-bg);
  border:0;
  /* v108 — 일정 하나하나의 면은 다시 둥글다 (8px).
     v104 에서 각을 세운 건 '격자에 딱 맞게' 라는 이유였는데, 그 뒤 v105 에서
     '시간 미정' 이 면을 잃고 줄 목록이 되면서 **면을 가진 건 시간 블록뿐**이 됐다.
     면이 하나뿐이면 그 면은 '한 건의 일' 그 자체라, 격자에 붙은 칸이 아니라
     집어 들 수 있는 조각으로 보이는 쪽이 맞다. 칸(22px)·줄(10px)과 함께
     하루 화면에도 라운드가 한 벌 돌아온다. */
  border-radius:8px;
  box-shadow:none;
  overflow:hidden;
}
/* 라운드 내력 — v100·v101 8px → v104 각(0) → **v108 다시 8px**.
   v104 의 근거('테두리가 경계를 말하니 라운드는 할 일이 없다')는
   '시간 미정' 도 면을 갖고 있던 때의 이야기였다. v105 에서 그쪽이 면을 잃어
   면을 가진 건 시간 블록 하나뿐이 됐고, 그러면 라운드가 '격자의 한 칸' 과
   '한 건의 일' 을 갈라 주는 몫을 한다. */
@media (hover:hover){
.tl__events .card:hover{ --card-bg:var(--ev-bg-hover); background:var(--ev-bg-hover); }
}

/* v89 — 바탕을 태그 색에서 옅게 뽑는다. 한 가지 색으로 깔아 두면
   하루가 통째로 칙칙해지고, 무엇이 무슨 일인지 색으로는 못 읽는다.
   색을 못 섞는 브라우저(오래된 안드로이드 웹뷰)에서는 위의 --ev-bg 가 그대로 남는다.
   뚜껑(.card__slide)이 쓰는 --card-bg 도 같이 바꿔야 밀기 아이콘이 안 비친다. */
@supports (background: color-mix(in srgb, red 50%, blue)){
  .tl__events .card{
    --ev-tint:color-mix(in srgb, var(--tagc, var(--accent)) var(--ev-mix, 17%), var(--ev-base, #fff));
    --card-bg:var(--ev-tint);
    background:var(--ev-tint);
  }
@media (hover:hover){
.tl__events .card:hover{
    --ev-tint:color-mix(in srgb, var(--tagc, var(--accent)) var(--ev-mix-h, 26%), var(--ev-base, #fff));
  }
}

}
/* 태그가 '없음' 인 일은 그대로 옅은 회색 — 색이 없는 게 정보다 */
.tl__events .card.no-tag{ --ev-tint:var(--ev-bg); --card-bg:var(--ev-bg); background:var(--ev-bg); }
/* v102 — 면 앞의 색깔 띠를 걷어냈다.
   v89 에서 띠를 그을 때는 블록 바탕이 한 가지 회색이라 태그를 알릴 길이 그것뿐이었는데,
   같은 v89 에서 **바탕 자체를 태그 색으로 옅게 뽑기** 시작하면서 같은 말을 두 번 하게 됐다.
   띠가 사라지니 왼쪽 여백도 띠를 피해 밀어 두었던 14 → 12px 로 줄인다. */
.tl__events .card .card__slide{
  padding-left:12px;
  box-shadow:none;
}
/* v108 — 카드와 뚜껑 둘 다 8px (칠하는 쪽은 뚜껑이라 뚜껑에도 적어야 한다) */
/* v102 — 끝낸 일·태그 없는 일의 띠도 같이 걷어냈다 (바탕이 이미 말하고 있다) */

/* v103 — 흰 판 위에서 블록이 '카드' 로 읽히도록 같은 색 한 단계 진한 테두리를 두른다.
   참고한 캘린더들도 면만으로 띄우지 않고 가는 테두리나 그림자를 하나씩 쓴다.
   다크는 --ev-edge 가 0% 라 테두리가 바탕과 같아져 사실상 안 보인다 */
@supports (border-color: color-mix(in srgb, red 50%, blue)){
  .tl__events > .card > .card__slide{
    border:1px solid color-mix(in srgb, var(--tagc, var(--accent)) var(--ev-edge, 0%),
                               var(--ev-tint, var(--ev-bg)));
  }
}

/* v103 — 블록 제목이 **태그 색**을 입는다.
   옅은 바탕 위에 검정 글씨를 얹으면 블록 열 장이 모두 같은 무게로 읽혀서,
   색은 '배경 무늬' 가 되고 눈이 제목을 하나씩 짚어 가야 했다.
   글자에 색이 실리면 같은 색끼리 먼저 묶여 보이고, 그다음에 글자를 읽게 된다.
   섞는 비율(--ev-ink)은 열 가지 태그가 모두 AA 를 넘는 선에서 잡았다. */
.tl__events > .card .card__title{font-weight:700;}
/* v103 — 블록 안에서는 줄 간격을 좁힌다. 폰의 30분짜리 칸은 통째로 44px 라,
   본문 줄 간격(1.5) 그대로면 제목과 길이 줄이 면 밖으로 밀린다 */
.tl__events > .card .card__title{line-height:1.25;}
.tl__events > .card .card__dur{line-height:1.15;}
@supports (color: color-mix(in srgb, red 50%, blue)){
  .tl__events > .card:not(.no-tag):not(.done) .card__title{
    color:color-mix(in srgb, var(--tagc, var(--accent)) var(--ev-ink, 0%), var(--text));
  }
}

/* 길이 — '40분 · 1시간 15분'. 참고한 캘린더들이 모두 제목 아래 한 줄을 둔다.
   블록이 짧으면(is-short) 제목 한 줄이 겨우 들어가므로 그때는 안 그린다 */
.card__dur{
  margin-top:1px;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);line-height:1.25;
  font-weight:600;color:var(--tl-sub, var(--text-2));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tl__events > .card.is-short .card__dur{display:none;}
.card.done .card__dur{color:var(--text-3);}
/* ---------- '지금' 선 (v64) ----------
   오늘 칸의, 지금 시각이 들어 있는 줄에만 그린다.
   줄 안에서의 높이는 분(0~59)을 백분율로 환산한 값 — 9:45 면 줄의 75% 지점.
   선 하나와 왼쪽 점 하나로 끝낸다. 글자를 붙이면 그 줄의 할 일과 겹쳐 읽힌다. */
.tl__now{
  position:absolute;left:-5px;right:0;height:0;
  border-top:1.5px solid var(--danger);
  pointer-events:none;z-index:2;
}
.tl__now i{
  position:absolute;left:-2px;top:-4px;
  width:7px;height:7px;border-radius:99px;background:var(--danger);
}
.tl__row.is-now .tl__h{color:var(--danger);font-weight:700;}
/* v90 — 모든 줄이 같은 높이다(시각 눈금). 'has' 로 높이를 바꾸지 않는다 */
.tl__slot.drop-hover,
.tl__free.drop-hover{
  background:var(--accent-soft);
  border-radius:12px;
  box-shadow:inset 0 0 0 1.5px var(--accent);
}

.col{
  background:var(--panel);
  /* 보관함 칸은 점선 테두리가 있다. 날짜 칸에도 같은 두께를 둬야
     안쪽 상자 크기가 같아져 두 칸의 여백이 1px 어긋나지 않는다.
     v104 — 흰 판이 몸통(#faf9f5)과 거의 같은 밝기라 선이 보여야 갈라진다 */
  border:1px solid var(--line);
  border-radius:22px;
  padding:var(--col-pad) 11px;
  min-height:110px;
  transition:background .14s ease, box-shadow .14s ease;
}
.col.drop-hover{
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 1.5px var(--accent);
}
.col__head{
  display:flex;align-items:baseline;gap:7px;
  /* 위 패딩이 6인 이유 — 광학 보정.
     칸 위쪽은 '맨 글자'가 바로 오고, 칸 아래쪽은 '패딩을 가진 카드'가 온다.
     숫자를 똑같이 12/12 로 맞추면 머리말 글자가 위로 붙어 보인다.
     글자 잉크 기준 실측으로 위 26 / 아래 26 이 되는 값 (measure9.js). */
  padding:6px 3px var(--col-stack);
}
.col__date{font-size:var(--t-body);font-weight:700;letter-spacing:var(--t-body-ls);}
.col__sub{font-size:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--text-3);font-weight:600;}
.col__count{
  margin-left:auto;font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-2);
  background:var(--surface);padding:3px 8px;border-radius:99px;
  border:1px solid var(--line);
}
.col.is-today .col__date{color:var(--accent);}
/* 제목을 누르면 그 날 이름을 붙인다 */
button.col__date{
  border:0;background:transparent;padding:1px 5px;margin-left:-5px;
  border-radius:7px;font:inherit;
  font-size:var(--t-body);font-weight:700;letter-spacing:var(--t-body-ls);color:inherit;
  cursor:text;transition:background .12s ease;
}
@media (hover:hover){
button.col__date:hover{background:var(--surface);}
}

/* 머리말 오른쪽 추가 버튼 */
.col__spacer{margin-left:auto;}
.col__add{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin-left:2px;padding:0;
  border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--text-2);cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.col__add svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}
@media (hover:hover){
.col__add:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent);}
}


/* ---------- 칸 머리말의 ⋮ 메뉴 (v82) ----------
   ＋ 가 있던 자리다. 할 일을 더하는 건 목록 맨 위의 '할 일 추가' 줄이 맡고,
   여기는 '이 칸을 어떻게 볼까 · 어떻게 치울까' 만 남는다. */
.cmenu{position:relative;flex:0 0 auto;margin-left:2px;}
.col__menu{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;
  border:0;border-radius:8px;
  background:transparent;color:var(--text-3);cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.col__menu svg{width:17px;height:17px;fill:currentColor;stroke:none;}
@media (hover:hover){
.col__menu:hover{background:var(--hover);color:var(--text);}
}

.col__menu:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

.cmenu__pop{
  position:absolute;top:28px;right:0;z-index:60;
  min-width:206px;padding:6px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-2);
}
.cmenu__pop[hidden]{display:none !important;}
.cmenu__h{
  padding:6px 10px 5px;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-3);
}
.cmenu__i{
  display:flex;align-items:center;gap:8px;width:100%;
  border:0;background:transparent;text-align:left;cursor:pointer;
  padding:8px 10px;border-radius:9px;
  font:inherit;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:500;color:var(--text-2);
  transition:background .12s ease, color .12s ease;
}
@media (hover:hover){
.cmenu__i:hover{background:var(--hover);color:var(--text);}
}

/* 고른 줄에만 체크. 안 고른 줄도 같은 자리를 비워 둬야 글자가 안 흔들린다 */
.cmenu__tick{
  flex:0 0 auto;width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;
}
.cmenu__i.on{color:var(--text);font-weight:600;}
.cmenu__i.on .cmenu__tick{opacity:1;}
.cmenu__sep{height:1px;margin:5px 4px;background:var(--line);}

/* ---------- 목록 맨 위의 '할 일 추가' 줄 (v82) ----------
   카드 한 줄과 같은 높이·같은 들여쓰기로 선다. 목록의 일부처럼 보여야
   "여기에 적으면 여기에 들어간다"가 설명 없이 읽힌다. */
/* v84 — 아래 첫 카드와 너무 붙어 있었다.
   카드끼리는 --card-gap 이 0 이지만 저마다 위아래 6px 안쪽 여백이 있어
   줄 간격이 12px 쯤 된다. 추가 줄은 그 절반만 있어서 첫 카드가 달라붙어
   보였다. 모자란 만큼만 더 준다. */
.qadd{display:flex;flex-direction:column;margin-bottom:8px;}
.qadd__open{
  /* 카드의 체크↔글자 간격과 같아야 글자 왼쪽 끝이 한 줄로 선다 (v85) */
  display:flex;align-items:center;gap:13.5px;width:100%;
  border:0;background:transparent;cursor:pointer;
  padding:6px 10px 6px 12px;border-radius:var(--r-sm);
  font:inherit;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:600;
  color:var(--accent);
  transition:background .12s ease;
}
.qadd__open svg{
  flex:0 0 auto;width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
@media (hover:hover){
.qadd__open:hover{background:var(--hover);}
}

.qadd__open[hidden]{display:none !important;}

/* 두 줄이다 — 위는 '○ 제목', 아래는 '세부정보'.
   구글 할 일과 같은 꼴이고, 제목 칸이 폭을 다 쓸 수 있다. */
.qadd__form{
  display:flex;flex-direction:column;gap:2px;
  padding:6px 10px 8px 12px;
}
.qadd__form[hidden]{display:none !important;}
.qadd__line{display:flex;align-items:center;gap:13.5px;min-width:0;}
.qadd__ring{
  flex:0 0 auto;width:18px;height:18px;border-radius:99px;
  border:1.7px solid var(--line-strong);
}
.qadd__title{
  flex:1 1 auto;min-width:0;
  border:0;background:transparent;color:var(--text);
  padding:2px 0;outline:none;
  font:inherit;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:500;
}
.qadd__title::placeholder{color:var(--text-3);}
.qadd__detail{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  border:0;background:transparent;color:var(--text-3);cursor:pointer;
  padding:4px 7px;border-radius:9px;margin-left:25px;
  font:inherit;font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:600;
  transition:background .12s ease, color .12s ease;
}
.qadd__detail svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
@media (hover:hover){
.qadd__detail:hover{background:var(--hover);color:var(--text-2);}
}


.col__list{display:flex;flex-direction:column;gap:var(--card-gap);min-height:40px;}

/* ---------- 맞춤보기의 '완료' 묶음 (v64) ----------
   끝낸 일은 칸 맨 아래로 모으고 접어 둔다. 숨기는 게 아니라 접는 것이라
   "몇 개 끝냈다"는 늘 보이고, 머리말을 누르면 그 자리에서 펼쳐진다.
   줄(카드)이 테두리로 이어 붙는 생김새라, 묶음은 위에 선 하나만 두고
   목록과 같은 흐름으로 이어 붙인다 — 다른 상자처럼 떠 보이면 안 된다. */
.donefold{display:flex;flex-direction:column;gap:0;margin-top:8px;}
/* v82 — 글자를 한 단계 키우고(12 → 14) 숫자를 따로 칠하지 않는다.
   '완료 1' 은 상태를 적어 둔 줄이지 눈길을 끌 자리가 아니다.
   숫자만 초록이면 '뭔가 좋은 일' 처럼 읽혀서, 안 끝낸 카드보다 먼저 보였다. */
.donefold__h{
  display:flex;align-items:center;gap:5px;
  width:100%;border:0;background:transparent;text-align:left;
  font:inherit;font-size:var(--t-sub);font-weight:600;color:var(--text-3);
  letter-spacing:var(--t-sub-ls);padding:3px 2px 6px;cursor:pointer;
}
@media (hover:hover){
.donefold__h:hover{color:var(--text-2);}
}

.donefold__caret{
  width:14px;height:14px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(-90deg);transition:transform .14s ease;
}
.donefold.is-open .donefold__caret{transform:none;}
.donefold__list{display:flex;flex-direction:column;gap:var(--card-gap);}
/* 완료 '더 보기' (v68) — 열 개씩 늘린다 */
.donefold__more{
  display:flex;align-items:center;justify-content:center;gap:4px;
  width:100%;margin-top:6px;padding:7px 8px;
  border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  background:transparent;color:var(--text-3);
  font:inherit;font-size:var(--t-label);font-weight:500;letter-spacing:var(--t-label-ls);cursor:pointer;
  transition:color .12s ease, border-color .12s ease;
}
@media (hover:hover){
.donefold__more:hover{color:var(--text-2);border-color:var(--text-3);}
}

.donefold__more svg{
  width:13px;height:13px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}

/* 끝낸 날 칩 (v68) — 끝낸 일의 아랫줄은 이것 하나뿐이다 */
.chip.doneat{
  background:transparent;padding-left:2px;padding-right:2px;
  color:var(--done);font-weight:500;
}

/* ---------- 날짜 별명 카드 ---------- */
/* 날짜 이름(오늘·내일·모레)은 그대로 두고, 그 아래 한 줄을 사용자가 고친다.
   카드와 같은 생김새라 "여기도 내용"이라는 게 바로 보인다. */
.daylabel{
  display:flex;align-items:center;gap:6px;width:100%;
  min-height:var(--btn-h-sm,34px);
  margin:0 0 var(--col-stack);padding:7px 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:var(--t-sub);font-weight:700;color:var(--text);
  letter-spacing:var(--t-sub-ls);text-align:left;cursor:text;
  transition:border-color .12s ease, background .12s ease;
}
@media (hover:hover){
.daylabel:hover{border-color:var(--line-strong);}
}

.daylabel__ico{
  width:14px;height:14px;flex:0 0 auto;
  fill:none;stroke:var(--accent);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.daylabel__t{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.daylabel.is-empty{
  background:transparent;border-style:dashed;
  font-weight:600;color:var(--text-3);
}
.daylabel.is-empty .daylabel__ico{stroke:var(--text-3);}
@media (hover:hover){
.daylabel.is-empty:hover{background:var(--surface);color:var(--text-2);}
}

.daylabel.is-editing{padding:0;border-color:var(--accent);cursor:auto;}
.daylabel__in{
  width:100%;min-width:0;padding:7px 10px;
  background:transparent;border:0;border-radius:12px;outline:none;
  font:inherit;font-size:var(--t-sub);font-weight:700;color:var(--text);
  letter-spacing:var(--t-sub-ls);
}
.daylabel__in::placeholder{font-weight:600;color:var(--text-3);}

/* ---------- 개인화 보기 ---------- */
/* 제목 줄에서 '오늘' 뒤에 바로 내가 붙인 이름이 이어진다 */
.colname{
  display:inline-flex;align-items:baseline;gap:5px;
  max-width:min(46vw, 320px);
  margin:0;padding:1px 6px;border:0;border-radius:8px;
  background:transparent;font:inherit;
  font-size:var(--t-body);font-weight:700;letter-spacing:var(--t-body-ls);color:var(--text);
  cursor:text;transition:background .12s ease;
}
@media (hover:hover){
.colname:hover{background:var(--surface);}
}

.colname__sep{color:var(--text-3);font-weight:600;}
.colname__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.colname.is-empty{
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-3);
  border:1px dashed var(--line-strong);padding:2px 7px;
}
@media (hover:hover){
.colname.is-empty:hover{color:var(--accent);border-color:var(--accent);}
}

.colname.is-editing{padding:0;background:transparent;}
.colname__in{
  width:min(42vw, 260px);padding:2px 7px;
  background:var(--surface);border:1px solid var(--accent);border-radius:8px;
  outline:none;font:inherit;
  font-size:var(--t-body);font-weight:700;letter-spacing:var(--t-body-ls);color:var(--text);
}
.colname__in::placeholder{font-weight:600;color:var(--text-3);}

/* v89 — 아주 좁은 폰(360px 미만, 갤럭시 S9 같은)에서는 칸이 45px 뿐이라
   점(3px)과 사이값까지 두면 제목이 세 글자에서 끊긴다. 색 점을 내려놓고
   네 글자를 지킨다 — 달력에서 먼저 읽는 건 '무슨 일인지'다.
   (시각은 이미 v55 부터 좁은 화면에서 감추고 있다) */
@media (max-width:359px){
  .mcell{--mpad-x:1px;}
  .mitem{padding:0;gap:0;font-size:var(--t-cell-xs);}
  .mitem i{display:none;}
}

/* ---------- 개인화 — 왼쪽 날짜 / 오른쪽 보관함 ---------- */
.board.view-custom{
  display:grid;gap:12px;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:1000px){
  /* 날짜 영역 : 손잡이 : 보관함 영역 — 가운데 선을 끌어서 비율을 바꾼다 */
  /* v89 — 손잡이 14px + 좌우 2px = 18px 이라 보관함끼리(12px)와 달랐다.
     손잡이를 12px 로 줄이고 좌우 여백을 없애 **모든 칸 사이를 12px** 로 맞춘다.
     칸 폭은 그대로 두면서(손잡이만 줄어서) 간격만 하나가 된다. */
  .board.view-custom{
    grid-template-columns:minmax(0, var(--dw, 1.35fr)) 12px minmax(0, 1fr);
    gap:0;
  }
}
.cv__days{display:flex;flex-direction:column;gap:12px;min-width:0;}
.cv__boards{
  display:grid;gap:0;min-width:0;
  grid-template-columns:repeat(var(--bcols,1), minmax(0,1fr));
  align-items:start;
}
/* 보관함이 네 개를 넘으면 한 줄을 고집하지 않고 흘려 넣는다 */
.cv__boards.is-wrap{
  grid-template-columns:repeat(auto-fit, minmax(236px, 1fr));
  gap:12px;
}
/* v89 — 보관함끼리도 같은 12px.
   한 줄로 설 때는 칸 사이에 손잡이가 끼므로 그 손잡이 폭이 곧 간격이다
   (applyCvWidths 의 join(' 12px ')). 여기에 gap 을 더하면 간격이 두 번 들어가
   칸 폭만 깎인다. 흘려 넣을 때(is-wrap)는 손잡이가 없어 gap 이 간격이 된다. */

/* ---------- 개인화 폭 손잡이 ---------- */
.cv__grip, .cv__bgrip{display:none;}
@media (min-width:1000px){
  .cv__grip, .cv__bgrip{
    display:block;position:relative;align-self:stretch;
    cursor:col-resize;touch-action:none;
  }
  .cv__grip::before, .cv__bgrip::before{
    content:"";position:absolute;left:50%;top:14px;bottom:14px;width:3px;
    transform:translateX(-50%);border-radius:3px;
    background:transparent;transition:background .12s ease;
  }
.cv__grip.on::before,
.cv__bgrip.on::before{background:var(--accent);}
@media (min-width:1000px) and (hover:hover){
.cv__grip:hover::before,
.cv__bgrip:hover::before{background:var(--accent);}
}

  body.presizing .cv__grip::before, body.presizing .cv__bgrip::before{background:var(--accent);}
}
/* v81 — 보관함이 아래로 내려갈 때는 **한 줄에 하나씩** 세로로 쌓는다.
   예전에는 둘씩 나란히 놓았는데(auto-fit minmax 220px), 폭이 좁아진 참에
   칸까지 반으로 가르니 '언젠가 할 일' 과 '아이디어' 의 제목만 보이고
   안의 카드는 글자가 두 줄씩 접혔다. 좁을수록 세로로 길게 쓰는 쪽이 맞다. */
@media (max-width:999px){
  .board.view-custom .cv__boards{
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px;
  }
}

/* 오늘 줄에 얹힌 밀린 일 개수 */
.col__late{
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--danger);
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  padding:2px 7px;border-radius:99px;
}

/* 보관함 칸 — 날짜 칸과 구분되게 한 톤 눌러둔다 */
/* v104 — 보관함 칸도 같은 흰 판. '날짜 칸보다 한 단계 옅게' 로 갈라 두었는데,
   날짜 칸이 흰 판이 되면서 더 옅게 갈 자리가 없다. 점선 테두리가 이미
   '날짜가 없는 칸' 이라는 걸 말하고 있다 */
.col.is-board{
  background:var(--panel);
  border:1px dashed var(--line-strong);
}
/* 보관함도 날짜 칸과 같은 간격을 쓴다 (예전엔 8px 로 혼자 달랐다) */
.col.is-board .empty{min-height:0;padding:16px 10px;}
.colname.bname{font-size:var(--t-body);letter-spacing:var(--t-body-ls);cursor:text;}
@media (hover:hover){
.colname.bname:hover{background:var(--surface);}
}


.boards__none{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:18px 16px;border-radius:18px;
  border:1px dashed var(--line-strong);background:transparent;
}
.boards__none strong{font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);}
.boards__none span{font-size:var(--t-label);letter-spacing:var(--t-label-ls);line-height:var(--t-label-lh);color:var(--text-3);}

/* 보관함에서 시작한 새 카드 안내 */
/* ---------- 제목에만 SUITE (v68) ----------
   한 화면에 한둘뿐인 '큰 글자'만 제목 글꼴을 쓴다.
   카드 제목(13.5px)은 본문 쪽에 가까워서 SUIT 그대로 둔다 —
   스무 줄이 깔리는 자리라 폭이 고른 쪽이 읽기 편하다. */
.brand__name,
.month__title,
/* v70 — 화면을 고르는 자리와 설정의 뼈대도 제목 쪽이다.
   한 번 고르면 계속 보이는 '이정표' 라서, 본문과 같은 글꼴이면 묻힌다 */
.viewtoggle button,
.set2__brand,
.set2__nav button,
.set2__h,
button.col__date,
.col__date,
.mday__date,
.sheet__title,
input.f-title,
.f-title,
.colname__t{
  /* button.col__date / input.f-title 를 같이 적는 이유 —
     그 둘은 font:inherit 축약을 쓰는 규칙이 뒤에 있어서, 요소 이름을 붙여
     특정도를 맞춰 주지 않으면 글꼴이 도로 본문으로 돌아간다 */
  font-family:var(--font-title);
}

.btn-icon.danger{color:var(--danger);}
@media (hover:hover){
.btn-icon.danger:hover{background:color-mix(in srgb, var(--danger) 12%, transparent);}
}


.f-hint{
  margin:-3px 0 2px;padding:0 2px;min-height:15px;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);line-height:var(--t-label-lh);color:var(--text-3);
}
.f-hint.bad{color:var(--danger);font-weight:600;}


/* ---------- 앱 안에서 묻는 작은 창 ---------- */
.ask{
  position:fixed;inset:0;z-index:160;   /* 시트(100)·토스트(150) 보다 위 */
  display:grid;place-items:center;padding:20px;
  background:var(--scrim);
  backdrop-filter:blur(2px);
}
.ask__box{
  width:min(340px, 100%);
  background:var(--surface);border-radius:18px;
  padding:20px 20px 16px;box-shadow:var(--shadow-2);
}
.ask__title{display:block;font-size:var(--t-body);font-weight:800;letter-spacing:var(--t-body-ls);}
.ask__body{
  margin:7px 0 0;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);line-height:var(--t-sub-lh);color:var(--text-2);
}
.ask__row{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
.f-input:disabled{opacity:.45;cursor:not-allowed;}

/* 빈 자리를 눌러 바로 적을 수 있다는 표시 */
.col__list{cursor:default;}
.empty{cursor:pointer;}
@media (hover:hover){
.empty:hover{border-color:var(--accent);color:var(--text-2);}
}


/* ---------- 설정 → 개인화 : 보관함 줄 ---------- */
.blist{display:flex;flex-direction:column;gap:7px;margin:2px 0 11px;}
.brow{
  display:flex;align-items:center;gap:8px;
  padding:7px 9px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
}
.brow__move{display:flex;flex-direction:column;gap:1px;}
.btn-icon.xs{
  width:20px;height:20px;min-height:0;padding:0;border-radius:6px;
}
.btn-icon.xs svg{width:13px;height:13px;}
.btn-icon.xs[disabled]{opacity:.28;cursor:default;}
.brow__name{flex:1 1 auto;min-width:0;}
.brow__n{
  flex:0 0 auto;font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-3);
  min-width:34px;text-align:right;
}

/* v40 — 기한 지난 일을 모아두던 TODO 칸은 없앴다.
   지난 일은 열 때 오늘 칸으로 옮겨지고, 카드에 '이월됨' 배지만 붙는다. */

.empty{
  display:grid;place-items:center;gap:3px;
  padding:16px 10px;border-radius:var(--r-md);
  border:1px dashed var(--line-strong);
  color:var(--text-3);font-size:var(--t-label);letter-spacing:var(--t-label-ls);text-align:center;
}
/* 눌러서 바로 추가되는 빈 칸 (v40) */
.empty.tap{cursor:pointer;transition:border-color .12s ease, color .12s ease;}
@media (hover:hover){
.empty.tap:hover{border-color:var(--accent);color:var(--accent);}
}


/* ---------- 날짜 칸 위 '진행 중' 줄 (여러 날에 걸친 일) · v40 ----------
   시작일이 지난 장기 업무는 그 날짜 칸에 카드가 없어 사라져 보인다.
   날마다 한 줄로 얹어 "아직 돌아가고 있는 일"을 잊지 않게 한다. */
.runbar{
  display:flex;flex-direction:column;gap:3px;
  margin:0 0 var(--col-stack);padding:6px 7px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:8px;
}
.runbar__item{
  display:flex;align-items:center;gap:6px;min-width:0;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--text-2);cursor:pointer;
}
@media (hover:hover){
.runbar__item:hover em{color:var(--accent);}
}

.runbar__item i{flex:0 0 auto;width:6px;height:6px;border-radius:99px;}
.runbar__item em{
  font-style:normal;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.runbar__item b{
  flex:0 0 auto;margin-left:auto;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-3);
}
.runbar__more{font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-3);}

/* ---------- 카드 ---------- */
/* 할 일은 '카드 한 장'이 아니라 '목록의 한 줄'이다 (v62).
   카드마다 테두리·그림자·라운드·사이 간격을 주면 열 줄만 쌓여도 화면이 가득 찬다.
   그래서 낱장을 없애고 **이어진 한 덩어리**로 바꿨다 —
   위아래 테두리를 겹쳐 쓰고(.card 는 top 만 0), 첫 줄과 마지막 줄만 모서리를 둥글린다.
   한 줄 높이 약 90px → 44px. */
/* v72 — 바탕도 테두리도 없다. 구글 Tasks 처럼 '글자 줄'만 남긴다.
   카드가 흰 면 + 테두리를 들고 있으면 스무 줄이 '상자 스무 개'로 읽혔다.
   줄을 가르는 건 글자 사이의 여백이고, 손이 닿은 줄만 바탕이 생긴다.
   (바탕을 뺐으므로 아래 모서리 규칙들도 할 일이 없어졌다 — 그래도 남겨 둔다.
    밀어서 드러나는 층(.card__acts)이 모서리를 물려받기 때문이다) */
.card{
  position:relative;
  background:transparent;
  border:0;
  border-radius:var(--r-sm);
  cursor:grab;
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
  overflow:hidden;
  transition:background .12s ease, opacity .14s ease, transform .16s ease;
}
/* v66 — :first-of-type / :last-of-type 도 같이 본다.
   카드 목록에는 카드 말고도 형제가 끼어든다 —
     · 칸 맨 아래의 '완료 N' 묶음(.donefold, v64)
     · 시간표 '시간 미정' 묶음의 머리말(.tl__free-h, v60)
   그래서 첫 카드가 :first-child 가 아니고 마지막 카드가 :last-child 가 아닌 자리가 생겨,
   줄 묶음의 위아래 모서리가 각진 채로 남아 있었다.
   카드만 <article> 이라, 형제 중 첫/마지막 <article> 을 가리키면 그 자리를 정확히 짚는다. */
/* v72 — 테두리를 걷어내면서 첫/마지막 줄의 모서리 보정도 필요 없어졌다.
   모든 줄이 같은 모서리(--r-sm)를 쓰고, 그건 손이 닿았을 때의 바탕 모양이다. */
/* 좌측 강조 바 — 카드와 같이 밀리도록 슬라이드 층에 붙인다 */
/* 중요도 세 단계(와 왼쪽 색 띠)는 v63 에서 걷어냈다.
   중요한 건 '별표 하나'로만 표시한다 — 세 단계를 두니 고를 때마다 생각이 필요했는데
   정작 목록에서는 '급한 거 / 나머지' 두 갈래로만 읽혔다. */
/* 손이 닿은 줄에만 바탕이 생긴다 — 이게 유일한 구분이다 */
@media (hover:hover){
.card:hover{background:var(--hover);}
}

@media (hover:hover){
.card:hover .card__slide{background:var(--hover);}
}

/* 끌어 옮길 수 없는 복사본(여러 날에 걸친 일)은 손 모양도 바꾸지 않는다 (v72) */
.card.is-echo{cursor:default;}
.card.dragging-src{opacity:.3;}
.card.done{opacity:.55;}

/* v68 — 끝낸 일에 줄을 긋지 않는다. 한 줄짜리 목록에서 줄긋기는
   글자 가운데를 지나가 제목이 뭉개지고, 흐려진 것만으로 이미 '끝났다'가 읽힌다. */
.card.done .card__title{color:var(--text-3);}


/* v72 — 원형. 구글 Tasks 와 같은 모양이다.
   네모는 '여러 개 고르기', 원은 '하나를 끝낸다' 로 읽힌다 — 할 일은 뒤쪽이다.
   손을 올리면 체크가 미리 흐리게 보인다. 누르면 무엇이 되는지를 누르기 전에
   보여주는 것이라, 처음 쓰는 사람도 이게 완료 단추라는 걸 바로 안다. */
.check{
  flex:0 0 auto;margin-top:0;
  width:18px;height:18px;border-radius:99px;
  border:1.7px solid var(--line-strong);background:transparent;
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.check svg{
  width:11px;height:11px;stroke-width:3;
  color:var(--text-3);opacity:0;
  transition:opacity .12s ease;
}
/* 손을 올리면 '끝낸 모습' 그대로 미리 보인다 (v73).
   누르면 무엇이 되는지를 누르기 전에 그대로 보여주는 것이라 망설일 일이 없다.
   끝난 줄과 헷갈리지 않는 이유 — 끝난 줄은 글자가 흐려지고(opacity .55)
   아랫줄이 '완료 · 10.14' 로 바뀌어서, 동그라미만 같아도 줄 전체가 다르다. */
@media (hover:hover){
.check:hover{background:var(--done);border-color:var(--done);}
}

@media (hover:hover){
.check:hover svg{opacity:1;color:var(--on-accent);}
}

.check:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.card.done .check{background:var(--done);border-color:var(--done);}
.card.done .check svg{opacity:1;color:var(--on-accent);}
/* 끝낸 줄에 손을 올리면 '되돌린다'는 뜻이라 거꾸로 비운다 */
@media (hover:hover){
.card.done .check:hover{background:transparent;border-color:var(--line-strong);}
}

@media (hover:hover){
.card.done .check:hover svg{opacity:.35;color:var(--text-3);}
}


/* 누르는 동안 살짝 들어간다 — 손가락이 닿았다는 즉각적인 대답 */
.check:active{transform:scale(.88);}
/* v108 — 손가락 기기에서는 체크를 30% 키운다 (18 → 24px).
   마우스 포인터는 1px 을 겨누지만 손가락은 못 그런다. 18px 짜리 동그라미는
   줄을 넘기다 스치기 쉬워서, 끝내려다 카드가 열리는 일이 잦았다.
   v110 — 조건을 폭에서 **포인터**로 옮겼다. 데스크탑에서 창을 줄인 것은
   손이 굵어진 게 아니므로 18px 그대로, 아이패드는 폭이 넓어도 24px 이다. */
@media (pointer: coarse){
  .check{width:24px;height:24px;border-width:2px;}
  .check svg{width:14px;height:14px;}
  .tl__events > .card.is-short .check{width:22px;height:22px;}
}


/* 끝낸 순간 (v73)
   동그라미가 톡 눌렸다 펴지고, 체크가 왼쪽에서 오른쪽으로 그려진다.
   0.46초. 더 길면 다음 줄을 끝내려는 손을 기다리게 한다. */
/* 움직이는 동안에는 '되돌리기 미리보기'(위의 .card.done .check:hover) 가
   끼어들지 않게 채운 모습으로 고정한다 — 누른 직후엔 손이 그 위에 있다 */
.check.is-just,
.card.done .check.is-just{background:var(--done);border-color:var(--done);}
@media (hover:hover){
.card.done .check.is-just:hover{background:var(--done);border-color:var(--done);}
}

.check.is-just svg{opacity:1;color:var(--on-accent);}
@media (hover:hover){
.card.done .check.is-just:hover svg{opacity:1;color:var(--on-accent);}
}

.check.is-just{animation:check-pop .46s cubic-bezier(.2,.9,.25,1.2);}
.check.is-just svg path{
  stroke-dasharray:24;
  animation:check-draw .34s cubic-bezier(.4,0,.2,1) .04s both;
}
@keyframes check-pop{
  0%{transform:scale(1);}
  28%{transform:scale(.82);}
  60%{transform:scale(1.12);}
  100%{transform:scale(1);}
}
@keyframes check-draw{
  from{stroke-dashoffset:24;}
  to{stroke-dashoffset:0;}
}
/* 움직임을 줄여 달라고 설정한 기기에서는 색만 바뀌고 끝난다 */
@media (prefers-reduced-motion:reduce){
  .check:active{transform:none;}
  .check.is-just,.check.is-just svg path{animation:none;}
}

.card__body{flex:1;min-width:0;}
.card__title{
  /* v70 — 14px (--t-sub). 구글 TODO(Tasks)를 재서 맞췄다.
     구글은 같은 회사 안에서도 자리에 따라 크기를 달리 쓴다 —
       캘린더의 '일정 만들기' 창은 16px (한 번에 한 건을 적는 자리)
       Tasks 의 할 일 목록은 14px (한 화면에 수십 줄이 깔리는 자리)
     MIRI 의 카드 목록은 뒤쪽에 해당해서, 입력 시트(16px)보다 한 단계 내린다.
     굵기 500 은 v65 그대로 — 20줄이 전부 굵으면 강약이 사라진다. */
  font-size:var(--t-sub);font-weight:500;line-height:var(--t-sub-lh);letter-spacing:var(--t-sub-ls);
  /* 제목도 한 줄로 — 두 줄짜리 제목 하나가 목록 전체의 리듬을 깬다 (v62) */
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-all;
}
/* 카드에서는 메모를 한 줄만 맛보기로 — 전문은 카드를 눌러 상세에서 본다 */
.card__note{
  /* v70 — 12px. 구글 Tasks 의 '완료일: 10월 14일' 줄과 같은 단계다 */
  margin-top:1px;font-size:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--text-2);line-height:var(--t-label-lh);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-all;
}
/* 메모 + 칩을 한 줄에 — 메모가 먼저 줄고, 칩은 줄지 않는다 (v62) */
/* v69 — 제목의 줄 간격(1.5)이 이미 아래 여백을 만들어서, 여기에 margin 을 더
   얹으면 한 줄이 2px 씩 길어진다. 200줄이 깔리면 그게 400px 이다. */
.card__sub{display:flex;align-items:center;gap:6px;margin-top:1px;min-width:0;}
.card__sub .card__note{margin-top:0;flex:1 1 auto;min-width:0;}
.card__meta{display:flex;flex-wrap:nowrap;gap:4px;flex:0 0 auto;}
/* 좁은 화면에서는 메모와 칩이 한 줄에 같이 못 들어간다.
   줄바꿈을 허용하면 줄 높이가 제각각이 되고, 그냥 두면 메모가 한두 글자로 뭉개진다.
   그래서 칩이 있는 줄에서는 메모를 포기한다 — 칩은 '무엇인지'고 메모는 '맛보기'다 (v62).
   메모 전문은 카드를 눌러 상세에서 본다. */
@media (max-width:719px){
  .card__sub:has(.card__meta) .card__note{display:none;}
}
/* 제목과 '지남 · 9.3' 을 한 줄에 — 배지는 제목 바로 오른쪽에 붙는다 (v66).
   제목은 내용만큼만 차지하고(0 1 auto), 길면 줄어들면서 말줄임된다.
   그래야 배지가 제목에 딱 붙어 "이 줄이 늦었다"로 한 번에 읽힌다. */
.card__head{display:flex;align-items:center;gap:7px;min-width:0;}
.card__head .card__title{flex:0 1 auto;min-width:0;}
/* 별표 — 평소엔 자리만 잡고 숨어 있다가 손을 올리면 나타난다.
   눌러 둔 것은 손을 떼도 남는다. 폰은 호버가 없으니 늘 보인다. */
.star{
  /* v66 — 카드 몸통 밖, 손잡이 왼쪽. align-self:center 로 카드 높이의 한가운데에 선다.
     (예전엔 제목 줄 안에 있어서 메모·칩이 붙은 두 줄짜리 카드에서 위로 쏠렸다) */
  flex:0 0 auto;align-self:center;
  width:30px;height:26px;margin:0;   /* v68 — 별이 커진 만큼 손 닿는 자리도 */
  border:0;background:transparent;padding:0;cursor:pointer;
  display:grid;place-items:center;
  color:var(--text-3);opacity:0;
  transition:opacity .12s ease, color .12s ease;
}
.star svg{width:19px;height:19px;stroke-width:1.7;fill:none;}   /* v68 — 16 → 19 (약 20%) */
.star:focus-visible{opacity:1;}
@media (hover:hover){
.card:hover .star{opacity:1;}
}

@media (hover:hover){
.star:hover{color:var(--warn);}
}

.card.starred .star{opacity:1;color:var(--warn);}
.card.starred .star svg{fill:var(--warn);stroke:var(--warn);}
@media (hover:none){ .star{opacity:1;} }

.card__late{
  /* v66 — 제목 바로 뒤. 오른쪽 끝으로 밀던 justify-content·max-width 를 걷어냈다 */
  flex:0 0 auto;display:flex;flex-wrap:nowrap;gap:4px;
}
.chip{
  display:inline-flex;align-items:center;gap:3px;
  /* v65 — 500. 칩은 10.5px 라 700 일 때 글자가 통째로 뭉쳐 덩어리로만 보였다.
     색과 바탕이 이미 구분을 하고 있어서 두께까지 쓸 필요가 없다. */
  font-size:var(--t-label);font-weight:500;letter-spacing:var(--t-label-ls);
  padding:2px 6px;border-radius:99px;
  background:var(--bg-sunken);color:var(--text-2);
}
.chip svg{width:10px;height:10px;stroke-width:2.4;}
/* 태그는 #이름 으로, 색은 글자에만 올린다 (v37) */
.chip.tag{
  background:transparent;padding-left:2px;padding-right:2px;
  font-weight:500;letter-spacing:var(--t-label-ls);   /* v65 — 700 → 500 */
}
.chip.overdue{background:color-mix(in srgb, var(--danger) 13%, transparent);color:var(--danger);}
/* 여러 날에 걸친 일 · 반복 일정 표시 (v40) */
.chip.span{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);}
.chip.rep{background:color-mix(in srgb, var(--text-3) 15%, transparent);color:var(--text-2);}

.grip{
  position:relative;
  flex:0 0 auto;align-self:center;
  width:18px;height:24px;display:grid;place-items:center;
  color:var(--text-3);cursor:grab;opacity:.75;
  touch-action:none;                 /* 그립을 잡으면 스크롤이 아니라 드래그 */
}
/* 보이는 크기는 작게, 실제로 잡히는 영역은 넉넉하게 */
.grip::after{content:"";position:absolute;inset:-12px -11px -12px -10px;}
/* v105 — 캘린더의 날짜 목록에는 손잡이를 두지 않는다. 거기서는 순서를 바꾸지 않는다 */
.card.no-grip .grip{display:none;}
@media (hover:hover){
.grip:hover{opacity:1;color:var(--accent);}
}

.grip svg{width:13px;height:13px;stroke-width:2;}

/* 드래그 고스트 */
.ghost{
  position:fixed;z-index:200;pointer-events:none;
  box-shadow:var(--shadow-3);
  transform:rotate(1.4deg) scale(1.02);
  opacity:.97;
  border-radius:var(--r-md);
}
/* 드롭 위치 표시선 */
.placeholder{
  height:3px;border-radius:99px;background:var(--accent);
  margin:1px 0;opacity:.9;
}
/* v89 — 끄는 동안에는 '고치기·삭제' 층을 통째로 감춘다.
   미는 동작과 끄는 동작이 겹칠 일이 없는데, 뚜껑이 한 번이라도 비치면
   회색·빨강 두 칸이 화면에 남는다. */
body.dragging .card__acts{display:none !important;}
body.dragging{cursor:grabbing;}
body.dragging *{cursor:grabbing !important;}
/* v76 — 끄는 동안에는 어디를 만져도 화면이 움직이지 않는다.
   실제 방어는 js 의 touchmove 가로채기가 하고(끌기 시작한 손가락),
   이건 그 와중에 **새로 닿는** 손가락까지 막아 주는 보조 장치다.
   touch-action 은 손가락이 닿는 순간에만 읽히기 때문에 이 둘이 다 필요하다. */
body.dragging{touch-action:none;overscroll-behavior:none;}
body.dragging .card{touch-action:none;}
/* 드래그 중에는 빈 컬럼도 넉넉히 잡아 드롭하기 쉽게 */
body.dragging .col{min-height:140px;}
body.dragging .col__list{min-height:64px;}
body.dragging .empty{transition:opacity .12s ease;}

/* 드래그를 시작하면 날짜 스트립이 "여기에 놓으라"고 알려준다 */
body.dragging .daystrip{
  background:color-mix(in srgb, var(--accent) 10%, var(--bg));
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
body.dragging .day{box-shadow:var(--shadow-2);}

/* ---------- FAB ---------- */
.fab{
  position:fixed;right:20px;bottom:calc(24px + var(--safe-b));z-index:45;
  width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;
  box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 34%, transparent);
  transition:transform .14s ease, filter .14s ease;
}
@media (hover:hover){
.fab:hover{filter:brightness(1.06);}
}

.fab:active{transform:scale(.93);}
.fab svg{width:25px;height:25px;stroke-width:2.4;}

/* ---------- 시트 ---------- */
.sheet-backdrop{
  position:fixed;inset:0;z-index:90;
  background:var(--scrim);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  animation:fadeIn .16s ease;
}
.sheet{
  /* v86 — 안에 띄우는 달력이 시트를 기준으로 자리를 잡는다 */
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-3);
  padding-bottom:var(--safe-b);
  max-height:88vh;overflow-y:auto;
  animation:slideUp .22s cubic-bezier(.2,.8,.25,1);
}
/* ============================================================
   v110 — '폰이냐' 를 **폭이 아니라 기기**로 가른다
   ============================================================
   예전에는 창 폭 719px 하나로 갈랐다. 그래서 데스크탑에서 브라우저를
   반만 줄여도 체크가 커지고 설정 갈래가 위로 올라갔다 — 손가락으로 쓰는
   것도 아닌데 손가락용 화면이 나온 것이다.

   포인터 종류로 가른다.
     (pointer: coarse) = 손가락   (pointer: fine) = 마우스·트랙패드
   데스크탑은 창을 390px 까지 줄여도 fine 이라 데스크탑으로 남는다.

   두 가지를 더 챙긴다.
   · **바닥** — 마우스라도 561px 아래로 줄이면 모바일로 간다.
     설정 시트가 min(760, 100vw-48) 이라 390px 창에서는 342px 이 되는데,
     왼쪽 갈래가 184px 이라 절반 넘게 먹는다. 그때는 접는 쪽이 낫다.
   · **아이패드** — 손가락이지만 폭이 넓다(1024). 데스크탑 배치를 유지한다
     (체크박스만 손가락 크기로 — 아래 .check 참고).

   데스크탑 = (min-width:720px), (min-width:561px) and (pointer:fine)
   모바일   = (max-width:719px) and (pointer:coarse), (max-width:560px)
   두 조건은 겹치지 않는다.

   **폭이 이유인 분기는 그대로 둔다** — 시간표 줄 높이(60→48) · 캘린더 칸
   글자 · 하루 칸 수는 손가락이 아니라 '자리가 없어서' 바꾼 것들이다.
   ============================================================ */
@media (min-width:720px), (min-width:561px) and (pointer:fine){
  .sheet{
    left:50%;right:auto;bottom:auto;top:50%;
    transform:translate(-50%,-50%);
    width:min(520px, calc(100vw - 48px));
    border-radius:var(--r-xl);
    animation:popIn .18s cubic-bezier(.2,.8,.25,1);
  }
}
.sheet__handle{
  width:38px;height:4px;border-radius:99px;background:var(--line-strong);
  margin:10px auto 2px;
}
@media (min-width:720px), (min-width:561px) and (pointer:fine){.sheet__handle{display:none;}}
.sheet__body{padding:12px 20px 20px;}
.sheet__title{margin:4px 0 16px;font-size:var(--t-title);font-weight:700;letter-spacing:var(--t-title-ls);}
/* v84 — 취소와 저장을 같은 크기로.
   .btn-ghost 는 좌우 15, .btn-primary 는 19 라서 글자 수가 같아도 폭이 달랐다.
   나란히 서는 두 단추는 폭이 같아야 '둘 중 하나'로 읽힌다. */
.sheet__actions{display:flex;align-items:center;gap:8px;margin-top:22px;}
.sheet__actions .btn-ghost,
.sheet__actions .btn-primary{
  min-width:92px;padding-left:18px;padding-right:18px;
}
/* v98 · v99 — 삭제를 '닫기' 와 **완전히 같은 무게**로.
   v97 에서는 빨간 면을 꽉 채웠고, v98 에서는 아이콘만 빨갛게 남겼는데,
   이 시트는 이제 읽으려고 여는 자리이기도 해서 그 한 점도 먼저 눈에 들어왔다.
   v99 — 색은 '닫기' 글자색(--text-2)을 그대로 쓰고, 호버도 닫기와 똑같이 움직인다.
   뜻은 휴지통 모양이 들고 있다. 되돌릴 수 없는 일은 어차피 '정말 지울까요'가 한 번 더 묻는다.
   아이콘은 currentColor 라서 글자색만 따라가면 저절로 맞는다 */
.sheet__actions .btn-del{
  min-width:0;width:var(--btn-h);height:var(--btn-h);padding:0;
  display:grid;place-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text-2);
  border-radius:99px;
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
@media (hover:hover){
.sheet__actions .btn-del:hover{
  color:var(--text);
  border-color:var(--line-strong);
  background:var(--hover);
}
}

.sheet__actions .btn-del:active{background:var(--bg-sunken);}
.sheet__actions .btn-del svg{
  width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;
}
.spacer{flex:1;}

.f-title{
  width:100%;border:0;border-bottom:1.5px solid var(--line);outline:none;background:transparent;
  font-size:var(--t-title);font-weight:700;letter-spacing:var(--t-title-ls);
  padding:6px 2px 11px;margin-bottom:14px;border-radius:0;
}
.f-title:focus{border-bottom-color:var(--accent);}
.f-title::placeholder{color:var(--text-3);}
.f-notewrap{margin-bottom:14px;}
.f-note{
  width:100%;display:block;
  border:0;background:var(--bg-sunken);
  border-radius:var(--r-sm);padding:14px;font-size:var(--t-body);letter-spacing:var(--t-body-ls);outline:none;resize:vertical;
  /* 2/3 로 줄였다 (v63) — 메모는 '쓰는 칸'이 아니라 '붙이는 칸'에 가깝고,
     길게 쓰는 사람은 어차피 상세 창에서 쓴다 */
  line-height:var(--t-body-lh);min-height:92px;max-height:30vh;
  transition:box-shadow .14s ease;
}
.f-note{border:1px solid var(--line);background:var(--surface);}
.f-note:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.f-notebar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 2px 0;font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-3);
}
/* 구글 캘린더의 줄 리듬 40px 에 맞춘다 (v69).
   글자가 16px·줄간 1.5 → 24px 이라, 위아래 8px 씩이면 딱 40 이 된다. */
/* v77 — 위아래로 10px 씩 더 띄웠다(4 → 14). 줄이 넷이라 빽빽하면
   어느 글자가 어느 줄에 속하는지 한눈에 안 들어온다. */
/* v80 — 줄 사이 선을 걷어냈다. 여백(v77, 위아래 14px)이 이미 줄을 가르고
   있어서, 선까지 그으면 '칸을 채워야 하는 표'처럼 보인다. */
.f-row{display:flex;align-items:center;gap:10px;padding:14px 0;min-height:40px;}
.f-label{flex:0 0 78px;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:700;color:var(--text-2);}
/* 줄 이름을 글자 대신 아이콘으로 (v63) — '날짜·기간·반복·태그'는 칸 모양만 봐도 알고,
   글자 라벨 네 개가 세로로 서면 그게 먼저 읽힌다 */
/* v87 — 아이콘은 그 줄 **첫 칸의 한가운데**에 선다.
   margin-top 을 10px 로 박아 두었더니 칸 높이가 바뀔 때마다 2~7px 씩 어긋났다.
   첫 칸 높이(34px)를 그대로 받아 place-items:center 로 맡긴다. */
.f-ico{
  flex:0 0 22px;display:grid;place-items:center;
  color:var(--text-3);align-self:flex-start;height:34px;
}
.f-ico svg{width:19px;height:19px;stroke-width:1.7;}
.f-row--when{align-items:flex-start;}
/* 언제 줄 (v77) — 날짜 / 반복이 **세로로** 쌓이고, '시간 추가'는 줄 오른쪽 끝.
   v67~v76 에서는 날짜와 '+ 시간 추가'가 가로로 나란히 서고 반복이 따로
   줄 하나를 더 썼다. 반복은 거의 '안함'으로 남는 값이라 줄 하나는 과했다. */
.f-when{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  min-width:0;flex:1 1 auto;}
/* v98 — 날짜와 배지가 한 줄에 선다. 줄바꿈은 **배지가 아니라 날짜 안쪽**에서 난다 —
   아래로 접히면 '3일 지남'이 날짜에서 떨어져 나가 머리에 띄웠을 때와 같아진다.
   사이 여백은 날짜 단추의 오른쪽 패딩(11px)이 이미 벌려 준다 */
.f-whenline{
  display:flex;align-items:center;flex-wrap:nowrap;
  min-width:0;max-width:100%;
}
.f-whenline[hidden]{display:none !important;}
.f-whenline > #fWhenBtn{flex:0 1 auto;min-width:0;}
.f-flag{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;min-width:0;}
.f-flag[hidden]{display:none !important;}
/* 언제 줄을 펴면 날짜 단추가 숨는다 — 배지도 같이 들어간다 */
#fWhenBtn[hidden] + .f-flag{display:none !important;}
.f-when > .f-when__edit,
.f-when > .f-rep__edit{align-self:stretch;}
.f-input--date{flex:0 1 auto;width:210px;}
/* 날짜는 평소엔 '글자'다 (v65) — 구글 캘린더처럼, 오늘이 이미 들어가 있으니
   대부분은 손댈 일이 없다. 테두리 친 입력칸을 늘 띄워두면 "여기를 채워야 하나"
   싶어 시선이 먼저 간다. 그래서 글자로만 두고, 누를 수 있다는 건 바탕으로 알린다. */
/* 접었을 때 쓰는 '글자 단추' (v67) — 언제·반복·태그·메모 네 줄이 같이 쓴다.
   테두리를 두르지 않는다. 테두리가 있으면 비어 있는 입력칸처럼 보여서
   "채워야 하는 칸"으로 읽히는데, 사실은 '지금 값'을 보여주는 자리다.
   누를 수 있다는 건 옅은 바탕과 커서로 알린다. */
/* v84 — 평소엔 바탕이 없다. 손을 올리거나 눌렀을 때만 칠한다.
   칩이 늘 깔려 있으면 '채워야 하는 칸' 넷이 세로로 서 있는 것처럼 보였다.
   지금 값을 보여주는 자리라 글자만 있으면 충분하다. */
.f-flat{
  flex:0 1 auto;max-width:100%;
  /* v87 — 날짜·시각 칸(34px)과 높이를 맞춘다. 왼쪽 아이콘이 둘 다에 대고 가운데를 잡는다 */
  display:inline-flex;align-items:center;min-height:34px;
  border:0;background:transparent;color:var(--text-2);
  border-radius:var(--r-sm);padding:6px 11px;
  font:inherit;font-size:var(--t-body);font-weight:500;letter-spacing:var(--t-body-ls);
  text-align:left;cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.f-flat.is-set{color:var(--text);}
.f-flat:focus-visible{background:var(--bg-sunken);color:var(--text);}
@media (hover:hover){
.f-flat:hover{background:var(--bg-sunken);color:var(--text);}
}

.f-flat:active{background:var(--hover);}
.f-flat:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.f-flat:disabled{opacity:.45;cursor:not-allowed;}
.f-flat[hidden]{display:none !important;}
/* 언제 줄만 값이 늘 있으므로 진한 글자로.
   keep-all — 폰에서 줄이 넘칠 때 '(수요 / 일)' 처럼 낱말 안에서 꺾이는 걸 막는다.
   넘치면 가운데 '–' 자리에서 깨끗하게 갈라진다 (v77) */
#fWhenBtn{color:var(--text);word-break:keep-all;}

/* 펼쳤을 때 — 시작 · 끝 두 칸이 한 줄에 선다 */
.f-when__edit{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0;}
.f-when__edit[hidden]{display:none !important;}
.f-when__edit .f-input{flex:1 1 150px;min-width:0;}
/* v87 — 시각까지 서면 칸이 넷이라, 늘려 잡으면 한 줄에 못 든다.
   그때는 저마다 글자만큼만 차지한다 (구글 캘린더와 같은 꼴) */
.f-when__edit.has-time .f-input{flex:0 0 auto;}
.f-when__edit.has-time{row-gap:6px;}
.f-when__dash{flex:0 0 auto;color:var(--text-3);font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);}

/* 접힌 글자 단추는 내용만큼만 — 세로로 쌓이는 줄이라 그냥 두면 폭을 다 먹어서
   '빈 입력칸' 처럼 보인다 (v68) */
/* v77 — .f-rep 는 사라졌다. 반복은 언제 줄 안으로 들어갔다 */
.f-tag,.f-noteslot{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;flex:1 1 auto;
}
.f-noteslot > .f-notewrap{align-self:stretch;}
/* v101 — 접어 둔 메모. 한 줄짜리 글자 단추(.f-flat)와 달리 두 줄까지 보여 준다 —
   메모는 '값'이 아니라 '글'이라, 한 줄로 자르면 무슨 메모인지 알아볼 수가 없다.
   세 줄째부터는 … 으로 접고, 고치려면 눌러서 쓰는 칸을 편다. */
.f-flat--note{
  align-self:stretch;max-width:100%;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;white-space:pre-wrap;word-break:break-word;
  align-items:flex-start;
}
/* v88 — 안의 칸은 글자만큼만. 줄 전체를 가로지르면 혼자 두꺼워 보인다 */
.f-rep__edit{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;}
.f-rep__edit > .f-custom{align-self:stretch;}
/* v99 — 반복 고르는 칸과 도움말 ⓘ 가 한 줄에 선다 */
.f-repline{display:flex;align-items:center;gap:2px;min-width:0;}
.f-rep__edit[hidden]{display:none !important;}
.f-noteslot .f-notewrap{margin-bottom:0;}
.tagpick[hidden]{display:none !important;}

/* 날짜 아래에 붙는 작은 줄 — 지금은 '반복 안함' 하나뿐이다 (v77).
   .f-flat 과 달리 평소엔 바탕이 없다. 값이 거의 늘 '안함'이라
   칩이 깔려 있으면 비어 있는 칸처럼 시선을 끈다. 누를 수 있다는 건
   손을 올렸을 때 알려주고, 값이 생기면 글자를 진하게 해서 티를 낸다. */
.f-sub{
  flex:0 1 auto;max-width:100%;
  border:0;background:transparent;color:var(--text-3);
  /* 왼쪽 4 + 안쪽 7 = 11 — 위에 있는 .f-flat 의 안쪽 여백과 같다.
     그래야 날짜 글자와 '반복 안함' 글자의 왼쪽 끝이 한 줄로 선다 (v77) */
  border-radius:var(--r-sm);padding:3px 7px;margin-left:4px;
  font:inherit;font-size:var(--t-sub);font-weight:500;letter-spacing:var(--t-sub-ls);
  text-align:left;cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
@media (hover:hover){
.f-sub:hover{background:var(--hover);color:var(--text-2);}
}

.f-sub.is-set{color:var(--text-2);font-weight:600;}
.f-sub:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.f-sub[hidden]{display:none !important;}

.f-timewrap{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}

/* ---------- 날짜 단추 + 작은 달력 (v86) ----------
   글자로 적던 칸을 눌러서 고르는 칸으로 바꿨다. 생김새는 입력칸 그대로
   두어야 '여기를 눌러 고친다' 가 그대로 읽힌다. */
.f-date{
  display:inline-flex;align-items:center;justify-content:flex-start;
  text-align:left;cursor:pointer;min-width:0;
  font:inherit;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:500;
}
.f-date.is-empty{color:var(--text-3);}
@media (hover:hover){
.f-date:hover{border-color:var(--line-strong);}
}

.f-date.is-open{border-color:var(--accent);}
.f-date:disabled{opacity:.45;cursor:not-allowed;}

/* 눌러서 고르는 칸 — 시각(v87)과 반복(v88)이 같이 쓴다.
   날짜 칸과 같은 생김새로 둔다. <select> 의 화살표는 떼어 냈다.
   옆에 선 날짜 칸에는 화살표가 없어서, 한 줄에 나란히 두면
   둘이 다른 종류의 칸처럼 보였다. */
.f-pick{
  display:inline-flex;align-items:center;justify-content:flex-start;
  text-align:left;cursor:pointer;min-width:0;white-space:nowrap;
  font:inherit;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:500;
}
.f-pick.is-empty{color:var(--text-3);}
@media (hover:hover){
.f-pick:hover{border-color:var(--line-strong);}
}

.f-pick.is-open{border-color:var(--accent);}

/* 고르는 목록 — 다섯 줄쯤 보이고 넘치면 구른다. 달력과 같이 시트 밖에 둔다 */
.pickpop{
  position:fixed;z-index:120;
  /* 여섯 줄(36px) + 안쪽 여백 = 226px. 반복(여섯 가지)은 딱 맞게 다 보이고,
     시각(48가지)은 여섯 줄만 보이고 나머지는 구른다 (v88) */
  min-width:116px;max-height:226px;overflow-y:auto;overscroll-behavior:contain;
  padding:5px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-2);
}
.pickpop[hidden]{display:none !important;}
.pickcell{
  display:block;width:100%;height:36px;
  border:0;background:transparent;border-radius:7px;cursor:pointer;
  padding:0 11px;text-align:left;
  font:inherit;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:500;
  color:var(--text);font-variant-numeric:tabular-nums;
  transition:background .1s ease;
}
.pickcell{white-space:nowrap;}
@media (hover:hover){
.pickcell:hover{background:var(--hover);}
}

.pickcell.on{background:var(--bg-sunken);font-weight:700;}

/* 작은 달력 — 시트 밖(body 바로 아래)에 두고 화면 기준으로 띄운다.
   시트 안에 두면 overflow-y:auto 가 아래쪽 줄을 잘라 먹었다 (v86) */
.datepop{
  position:fixed;z-index:120;
  width:268px;padding:10px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-2);
}
.datepop[hidden]{display:none !important;}
.datepop__bar{display:flex;align-items:center;gap:6px;padding:2px 2px 8px;}
.datepop__title{
  flex:1 1 auto;text-align:center;
  font-family:var(--font-title);
  font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:700;color:var(--text);
}
.datepop__nav{
  flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;
  border:0;background:transparent;color:var(--text-2);border-radius:8px;cursor:pointer;
  transition:background .12s ease;
}
.datepop__nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
@media (hover:hover){
.datepop__nav:hover{background:var(--hover);}
}

.datepop__wd{
  display:grid;grid-template-columns:repeat(7,1fr);
  padding-bottom:4px;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-3);
  text-align:center;
}
.datepop__wd .sun{color:var(--danger);}
.datepop__wd .sat{color:var(--sat);}
.datepop__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;}
.dpcell{
  height:32px;border:0;background:transparent;border-radius:8px;cursor:pointer;
  font:inherit;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:500;color:var(--text);
  font-variant-numeric:tabular-nums;
  transition:background .1s ease, color .1s ease;
}
@media (hover:hover){
.dpcell:hover{background:var(--hover);}
}

.dpcell.out{color:var(--text-3);}
.dpcell.sun{color:var(--danger);}
.dpcell.sat{color:var(--sat);}
.dpcell.out.sun,.dpcell.out.sat{opacity:.5;}
/* 오늘은 테두리로, 고른 날은 채워서 — 둘이 겹쳐도 구분된다 */
.dpcell.today{box-shadow:inset 0 0 0 1.5px var(--line-strong);}
.dpcell.on{background:var(--accent);color:var(--on-accent);font-weight:700;box-shadow:none;}
.dpcell.off{opacity:.28;cursor:not-allowed;}
@media (hover:hover){
.dpcell.off:hover{background:transparent;}
}

.datepop__foot{display:flex;align-items:center;gap:6px;padding-top:8px;}
.datepop__foot .spacer{flex:1;}
/* v77 — 줄 오른쪽 끝에 선다. 두 줄짜리 묶음의 가운데 눈높이에 맞춘다 */
.f-addtime{
  flex:0 0 auto;align-self:center;margin-left:auto;
  border:1px solid var(--line-strong);background:transparent;color:var(--text-2);
  border-radius:99px;padding:7px 14px;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:700;cursor:pointer;
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
@media (hover:hover){
.f-addtime:hover{border-color:var(--text-3);color:var(--text);background:var(--hover);}
}

.f-addtime[hidden]{display:none !important;}

/* 폰에서는 '시간 추가'를 아래 줄로 내린다 (v77).
   날짜가 '10월 14일 (수요일) – 10월 14일 (수요일)' 로 길어져서, 단추와
   한 줄에 두면 날짜가 '10월 / 14일' 처럼 어색한 자리에서 꺾인다.
   줄을 하나 더 쓰더라도 날짜가 한 줄로 읽히는 쪽이 낫다. */
@media (max-width:520px){
  .f-row--when{flex-wrap:wrap;}
  .f-when{flex:1 1 240px;}
  .f-addtime{margin-left:32px;align-self:flex-start;margin-top:4px;}
}
/* v67 — '종일' 체크박스를 없애면서 .f-allday 규칙도 걷어냈다 */
/* v88 — .f-select(통짜 드롭다운)도 걷어냈다. 반복은 .f-pick 으로 간다 */
/* v88 — '맞춤…' 안쪽. 예전 드롭다운 왼쪽에 맞추느라 32px 들여썼는데,
   이제 반복 칸이 날짜 칸과 같은 자리에서 시작해서 들여쓸 까닭이 없다 */
.f-custom{display:flex;flex-direction:column;gap:9px;padding:0 0 9px;}
/* 상세 창의 별표 */
/* v67 — 중요 표시는 목록의 별표 하나로만. 상세의 .vstar 는 걷어냈다 */
.f-input{
  border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);padding:6px 11px;font-size:var(--t-body);letter-spacing:var(--t-body-ls);outline:none;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.f-input.sm{padding:7px 10px;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);}
.f-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
/* 날짜·기간 칸은 남는 폭을 다 쓰되, 좁은 화면에서도 글자가 잘리지 않게
   최소 폭을 잡아둔다. 시각 칸(.sm)은 고정 폭. */
.f-row > .f-input:not(.sm){flex:1 1 140px;min-width:0;}
.f-row > .f-input.sm{flex:0 0 108px;min-width:0;}

.tagpick{display:flex;flex-wrap:wrap;gap:6px;}
.tagpick button{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);background:var(--surface);
  padding:6px 13px;border-radius:99px;font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;cursor:pointer;
  color:var(--text-2);
}
.tagpick button .h{opacity:.75;font-weight:800;}
.tagpick button[style*="--tc"]{color:var(--tc);}
@media (hover:hover){
.tagpick button:hover{border-color:var(--line-strong);}
}

/* 고른 것은 색을 채우지 않고 테두리와 옅은 바탕으로 표시한다 */
.tagpick button.on{
  border-color:currentColor;
  background:color-mix(in srgb, currentColor 10%, var(--surface));
}
.tagpick button.on:not([style*="--tc"]){color:var(--text);}
/* 카드를 쓰다가 바로 태그를 만들 수 있게 */
.tagpick button.manage{
  border-style:dashed;color:var(--text-3);font-weight:600;
}
@media (hover:hover){
.tagpick button.manage:hover{color:var(--accent);border-color:var(--accent);}
}


/* ---------- 태그 관리 ---------- */
.sheet__desc{
  margin:-4px 0 14px;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);line-height:var(--t-sub-lh);color:var(--text-2);
}
.taglist{display:flex;flex-direction:column;gap:6px;}
.tagrow{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:9px;
  padding:7px 9px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
}
.tagrow.fixed{background:var(--bg-sunken);border-style:dashed;}
.tagrow__dot{
  width:20px;height:20px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:var(--tag-6);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent);
}
.tagrow.fixed .tagrow__dot{cursor:default;}
.tagrow__name{
  border:0;background:transparent;padding:4px 2px;min-width:0;width:100%;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:600;color:var(--text);
  border-bottom:1px solid transparent;
}
.tagrow__name:focus{outline:none;border-bottom-color:var(--accent);}
.tagrow__name:disabled{color:var(--text-3);}
.tagrow__n{
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-3);
  background:var(--bg-sunken);padding:3px 8px;border-radius:99px;white-space:nowrap;
}
.tagrow__del{
  width:28px;height:28px;display:grid;place-items:center;
  border:0;background:transparent;border-radius:8px;color:var(--text-3);cursor:pointer;
}
@media (hover:hover){
.tagrow__del:hover{background:color-mix(in srgb, var(--danger) 11%, transparent);color:var(--danger);}
}

.tagrow__del svg{width:16px;height:16px;}
.tagrow__spacer{width:28px;}

/* 색 고르기 — 점을 누르면 아래로 펼쳐진다 */
.swatches{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:7px;
  padding:9px 1px 3px;margin-top:4px;border-top:1px solid var(--line);
}
.swatches button{
  width:23px;height:23px;border-radius:99px;border:2px solid transparent;
  padding:0;cursor:pointer;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent);
}
.swatches button.on{border-color:var(--text);}

.tagadd{display:flex;gap:7px;margin-top:12px;}
/* v109 — 새 칸 이름 입력은 2px 작게 (16 → 14). 안내문('예: 언젠가 할 일')이
   들어가는 칸이라 본문과 같은 크기면 '이미 적어 둔 값' 처럼 읽혔다 */
.tagadd .f-input{flex:1 1 auto;min-width:0;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);}
/* v109 — 선을 지우는 줄 (바로 위가 입력칸일 때) */
.set-row.no-line{border-top:0;}

/* v120 — 방침·약관·삭제 안내 세 장의 머리띠.
   홈 화면에 설치한 앱에서는 주소줄도 뒤로가기도 없어서, 문서가 열리면
   돌아갈 길이 사라진다. 그 길을 문서 쪽에 직접 둔다.
   스크롤해도 늘 보여야 해서 sticky — 긴 약관에서 바닥까지 내려갔다가
   다시 올라와야 닫을 수 있으면 갇힌 것과 다를 게 없다 */
.docbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;padding-top:calc(12px + var(--safe-t));
  border-bottom:1px solid var(--line);
  background:var(--bg);                 /* color-mix 를 모르는 묵은 기기용 */
}
@supports (background:color-mix(in srgb, red 50%, transparent)){
  .docbar{
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
  }
}
.docbar__name{
  font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);
  font-weight:800;color:var(--text-2);
}
.docbar .btn-ghost{flex:0 0 auto;}
/* v116 — 바로 위가 줄(.set-row)이 아니라 목록·입력칸일 때 쓰는 윗여백.
   줄끼리는 아래 19 + 위 19 = 38px 로 벌어지는데, 입력칸 다음에는 19px 밖에
   안 생겨서 그 줄만 바짝 붙어 보였다 */
.set-row.no-line.gap-top{padding-top:38px;}
/* v115 — 방침·약관·삭제 안내를 잇는 글자 줄. 줄(.set-row)로 올리지 않는다 —
   설정을 훑는 동안 눈에 걸릴 글이 아니라, 찾을 때만 있으면 되는 글이다 */
.legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding:16px 0 4px;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--text-3);
}
.legal a{color:var(--text-3);text-decoration:none;border-bottom:1px solid var(--line);}
@media (hover:hover){ .legal a:hover{color:var(--accent);border-bottom-color:var(--accent);} }
/* v113 — 설정의 칩을 눌러 들어왔을 때 '이 줄' 이라고 잠깐 짚어 준다 */
.tagrow.is-focus{box-shadow:inset 0 0 0 2px var(--accent);border-radius:10px;}
/* v109 — 설정 안에서 '만들어 둔 태그' 를 바로 보여주는 칩 목록 */
.tagmini{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 4px;}
.tagmini:empty{display:none;}

/* v111 — '태그' 글자 · 칩들 · ＋ 를 한 줄에 세운다.
   ＋ 는 늘 **마지막 칩 바로 뒤**에 서고, 칩이 하나도 없으면 '태그' 글자 뒤에
   선다. 줄 자체가 '여기에 하나 더' 를 말하게 하는 게 목적이다. */
.tagline{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  min-width:0;width:100%;
}
/* 칩 상자를 '없는 셈' 치면, 칩 하나하나가 이 줄의 식구가 되어
   ＋ 가 마지막 칩 **바로** 뒤에 붙는다. 상자째로 두면 칩이 여러 줄로
   접힐 때 ＋ 가 상자 옆(세로 가운데)으로 떨어져 버린다.
   display:contents 를 모르는 묵은 브라우저에서는 위의 .tagmini 규칙이
   그대로 살아서, ＋ 가 '칩 상자 뒤' 에 서는 그만한 모양이 된다. */
@supports (display:contents){
  .tagline > .tagmini{display:contents;}
}
/* v116 — 제목이 이 줄에서 빠졌다 (제목은 위의 .set-row 가 맡는다).
   남은 식구는 칩들과 ＋ 뿐이다 */
.tagline{padding-bottom:2px;}
/* ＋ 를 칩과 같은 알약 모양·같은 키로 — 줄에서 혼자 튀지 않게 */
.tagline > .sub__add{
  width:27px;height:27px;border-radius:99px;margin:0;align-self:center;
}
.tagline > .sub__add svg{width:14px;height:14px;stroke-width:2.2;}

/* v112 — 아이콘 단추가 '하는 중' 을 말하는 방법. 글자 단추처럼 글을 갈아끼울
   수 없으니 돌린다. 움직임을 꺼 둔 분에게는 돌리지 않고 흐려지기만 한다 */
@keyframes miri-spin{ to{ transform:rotate(360deg); } }
.sub__add.spin svg{ animation:miri-spin .9s linear infinite; transform-origin:50% 50%; }
.sub__add[disabled]{ opacity:.55; cursor:default; }
@media (prefers-reduced-motion: reduce){
  .sub__add.spin svg{ animation:none; }
}
.tagmini__i{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px 5px 8px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:600;color:var(--text-2);
  /* v113 — 칩이 '누르면 고칠 수 있는' 단추가 됐다 */
  cursor:pointer;font-family:inherit;
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
@media (hover:hover){
  .tagmini__i:hover{border-color:var(--accent);color:var(--text);}
}
.tagmini__i:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.tagmini__d{width:11px;height:11px;border-radius:99px;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent);}
.tagmini__n{font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-3);}
.tagfull{
  margin-top:10px;font-size:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--text-3);
}

.segmented{display:flex;gap:4px;background:var(--bg-sunken);padding:4px;border-radius:99px;}
.segmented button{
  border:0;background:transparent;padding:6px 14px;border-radius:99px;
  font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:700;color:var(--text-2);cursor:pointer;
}
.segmented button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1);}

.set-row{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  /* v108 — 줄 사이를 10px 벌린다 (위아래 14 → 19). 설정은 '훑다가 하나를 고르는'
     자리라, 줄이 붙어 있으면 어디까지가 한 설정인지 눈이 매번 다시 잘라야 했다 */
  /* v112 — 줄 사이 가로선을 모두 뺐다. 선과 19px 여백이 같은 말('여기서
     한 설정이 끝난다')을 두 번 하고 있었고, 설정 한 판에 선이 예닐곱 줄씩
     깔리니 정작 읽어야 할 글보다 선이 먼저 눈에 들어왔다. 이제 여백만 가른다 */
  padding:19px 0;border-top:0;
}
/* 좁은 칸에서 글자 쪽이 먼저 줄어들게 한다 (v55).
   min-width 를 안 풀어주면 입력칸이 자리를 다 차지하고 설명이 한 글자씩 세로로 쪼개진다. */
.set-row > *:first-child{min-width:0;}
.set-row .f-input.sm{flex:0 0 auto;width:84px;}
.set-row.wrap{flex-wrap:wrap;}
.set-row.wrap .segmented{margin-left:auto;}
.segmented.sm button{padding:6px 10px;font-size:var(--t-label);letter-spacing:var(--t-label-ls);}

/* ---------- 요일 고르기 (반복) · v40 ---------- */
/* 라벨(78px) + 간격(10px) 만큼 들여 반복 선택 줄과 세로를 맞춘다 */
/* v99 — 요일 동그라미를 '안 함 · 요일별 · 월별' 줄의 **왼쪽 끝**에 맞춘다.
   88px 를 밀어 두었던 건 고른 칸(요일별) 아래에 세우려던 것인데,
   칸을 바꿀 때마다 줄이 옆으로 미끄러져서 어디가 기준인지 읽히지 않았다 */
.wdpick{display:flex;gap:5px;flex-wrap:wrap;padding:2px 0 4px;}
.wdpick button{
  width:34px;height:34px;border-radius:99px;
  border:1px solid var(--line-strong);background:var(--surface);
  font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:700;color:var(--text-2);cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
@media (hover:hover){
.wdpick button:hover{border-color:var(--accent);}
}

.wdpick button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.wdpick button.sun{color:var(--danger);}
.wdpick button.sat{color:var(--sat);}
.wdpick button.sun.on,.wdpick button.sat.on{color:var(--on-accent);}
@media (max-width:479px){
  .wdpick button{width:30px;height:30px;font-size:var(--t-label);letter-spacing:var(--t-label-ls);}
}

/* v40 — '했어요!'는 모바일에서만. PC 는 카드 체크를 바로 누르는 쪽이 빠르다 */
@media (min-width:720px){ .only-mobile{display:none !important;} }
.set-row:first-of-type{border-top:0;}
/* v108 — 줄 제목을 1px 내린다 (16 → 15). 왼쪽 갈래(16)와 같은 크기였더니
   오른쪽 내용이 갈래만큼 무겁게 읽혀, 지금 보는 곳이 어디인지 흐려졌다 */
.set-row__t{font-size:15px;letter-spacing:var(--t-body-ls);font-weight:700;}
.set-row__d{font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);color:var(--text-2);margin-top:3px;line-height:var(--t-sub-lh);}

.switch{position:relative;display:inline-block;width:44px;height:26px;flex:0 0 auto;}
.switch input{opacity:0;width:0;height:0;}
.switch span{
  position:absolute;inset:0;background:var(--line-strong);border-radius:99px;
  cursor:pointer;transition:background .16s ease;
}
.switch span::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  background:var(--surface);border-radius:50%;transition:transform .16s ease;
  box-shadow:var(--shadow-1);
}
.switch input:checked + span{background:var(--accent);}
.switch input:checked + span::after{transform:translateX(18px);}

/* ---------- 도움말 (v99) ----------
   설명 문단을 ⓘ 안으로 넣었다. 설정 판마다 회색 안내 상자와 한 줄 설명이
   깔려 있었는데, 한 번 읽고 나면 다시 볼 일이 없는 글이 늘 자리를 차지하면서
   정작 **고치러 들어온 설정**을 아래로 밀어냈다.
   현재 상태를 알려주는 줄(동기화 상태 · 버전 · 캘린더 켜짐)은 그대로 둔다 —
   그건 설명이 아니라 지금 값이다. */
.help{position:relative;display:inline-flex;vertical-align:middle;}
.help__btn{
  width:24px;height:24px;flex:0 0 auto;padding:0;
  display:grid;place-items:center;
  border:0;background:transparent;border-radius:99px;
  color:var(--text-3);cursor:pointer;
  transition:color .12s ease, background .12s ease;
}
.help__btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;}
@media (hover:hover){
.help__btn:hover{color:var(--text-2);background:var(--hover);}
}

.help__btn[aria-expanded="true"]{color:var(--accent);background:var(--accent-soft);}
.help__btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

/* v105 — 자리는 JS(placeHelp)가 화면 기준(position:fixed)으로 잡아 준다.
   스스로 스크롤하는 칸(설정 본문) 안에서 잘리지 않게 하려는 것이다.
   여기 적힌 absolute 값은 JS 가 아직 안 돈 찰나의 기본값일 뿐이다.
   z-index 는 설정 시트(.sheet)보다 위여야 한다 */
.help__pop{
  position:absolute;top:calc(100% + 7px);left:-8px;z-index:155;
  display:block;width:max-content;
  max-width:min(330px, calc(100vw - 48px));
  padding:11px 13px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);line-height:var(--t-label-lh);
  font-weight:500;color:var(--text-2);text-align:left;white-space:normal;
}
.help__pop[hidden]{display:none !important;}
.help__pop.is-right{left:auto;right:-8px;}
.help__pop p{margin:0;}
.help__pop p + p{margin-top:7px;}
.help__pop b,.help__pop strong{color:var(--text);font-weight:700;}
.help__pop em{font-style:normal;color:var(--danger);font-weight:600;}

/* ---------- 검색 결과 ---------- */
.results{
  display:flex;flex-direction:column;gap:20px;
  width:100%;max-width:880px;margin:0 auto;   /* 넓은 화면에서 한 줄이 너무 길어지지 않게 */
}
.sgroup__head{
  display:flex;align-items:baseline;gap:8px;
  padding:0 4px 9px;
}
.sgroup__date{font-size:var(--t-body);font-weight:700;letter-spacing:var(--t-body-ls);}
.sgroup__sub{font-size:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--text-3);font-weight:600;}
.sgroup__n{margin-left:auto;font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-3);}
.sgroup__list{display:flex;flex-direction:column;gap:10px;}
.results .card{cursor:pointer;}
.snippet{
  margin-top:6px;padding:8px 10px;
  background:var(--bg-sunken);border-radius:10px;
  font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);line-height:var(--t-sub-lh);color:var(--text-2);
  white-space:pre-wrap;word-break:break-word;
}
mark{
  background:color-mix(in srgb, var(--warn) 42%, transparent);
  color:inherit;border-radius:3px;padding:0 2px;font-weight:700;
}
.result-empty{
  display:grid;place-items:center;gap:6px;padding:52px 16px;
  color:var(--text-3);font-size:var(--t-body);letter-spacing:var(--t-body-ls);text-align:center;line-height:var(--t-body-lh);
}

/* ---------- 일정 작은 창 (월간) ---------- */
/* ---------- 그날 일정 전부 (달력 '더보기') · v54 ----------
   구글 캘린더처럼 그 칸 위에 작은 창을 띄운다.
   아래 #mDay 패널로 내려보내도 되지만, 달력에서 눈을 떼지 않는 쪽이 빠르다. */
.dpop{
  position:fixed;z-index:121;
  width:min(260px, calc(100vw - 20px));
  max-height:min(420px, calc(100vh - 40px));
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-3);
  overflow:hidden;
  animation:popIn2 .14s ease;
}
.dpop__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:10px 8px 6px 16px;flex:0 0 auto;
}
.dpop__w{display:block;font-size:var(--t-label);font-weight:700;color:var(--text-3);letter-spacing:var(--t-label-ls);}
.dpop__d{display:block;font-size:var(--t-title);font-weight:700;line-height:var(--t-title-lh);letter-spacing:var(--t-title-ls);}
.dpop__head .btn-icon{width:30px;height:30px;border-radius:8px;}
.dpop__head .btn-icon svg{width:16px;height:16px;}
.dpop__list{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:2px 10px 12px;
  display:flex;flex-direction:column;gap:3px;
}
/* 창 안에서는 좁은 화면 규칙(4자 자르기)을 쓰지 않는다 — 여기가 '다 보려고' 연 자리다 */
.dpop__list .mitem{font-size:var(--t-cell);padding:4px 6px;border-left:0;max-width:none;}
.dpop__list .mitem i{display:inline-block;width:6px;height:6px;}
.dpop__list .mitem em{max-width:none;}
.dpop__list .mhol{margin:1px 0 2px;}
.dpop__empty{padding:8px 6px 10px;font-size:var(--t-cell);color:var(--text-3);}

.epop{
  position:fixed;z-index:120;
  width:min(320px, calc(100vw - 20px));
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-3);
  overflow:hidden;
  animation:popIn2 .14s ease;
}
@keyframes popIn2{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.epop__bar{
  display:flex;align-items:center;gap:2px;
  padding:6px 8px;border-bottom:1px solid var(--line);
  background:var(--bg-sunken);
}
.epop__bar .btn-icon{width:32px;height:32px;border-radius:8px;}
.epop__bar .btn-icon svg{width:17px;height:17px;}
@media (hover:hover){
.epop__bar .btn-icon:hover{background:var(--surface);color:var(--text);}
}

@media (hover:hover){
.epop__bar .btn-icon[data-act="del"]:hover{color:var(--danger);}
}

.epop__bar .btn-icon[data-act="done"].on{color:var(--done);}
.epop__body{display:flex;gap:10px;padding:14px 16px 16px;}
.epop__dot{
  flex:0 0 auto;width:11px;height:11px;border-radius:4px;margin-top:4px;
  background:var(--tag-6);
}
.epop__main{min-width:0;flex:1;}
.epop__title{
  margin:0 0 5px;font-size:var(--t-head);font-weight:700;line-height:var(--t-head-lh);
  letter-spacing:var(--t-head-ls);word-break:break-word;
}
.epop__title.done{color:var(--text-3);text-decoration:line-through;}
.epop__when{font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);color:var(--text-2);line-height:var(--t-sub-lh);}
.epop__note{
  margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);line-height:var(--t-sub-lh);color:var(--text-2);
  white-space:pre-wrap;word-break:break-word;
  max-height:96px;overflow:hidden;
}

/* 일자별 보기에도 공휴일 표시 */
.col__hol{
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;padding:2px 7px;border-radius:99px;
  background:color-mix(in srgb, var(--danger) 13%, transparent);
  color:var(--danger);
}
.col__hol.event{
  background:var(--bg-sunken);color:var(--text-3);
}
.col.is-hol .col__date{color:var(--danger);}
.day.hol .day__d{color:var(--danger);}
.day.hol.today .day__d,
.day.active.hol .day__d{color:inherit;}
.day.today.hol .day__d{color:var(--on-accent);}

/* ---------- 토스트 ---------- */
/* v92 — ＋ 단추 자리(오른쪽 아래)로 옮겼다. 가운데 아래에 뜨면 목록 한가운데를
   가려서, 무엇을 가린 건지 보려고 토스트가 사라지기를 기다려야 했다.
   ＋ 단추 바로 위에 붙으면 가리는 건 빈 자리뿐이다. */
/* v96 — ＋ 단추의 **왼쪽**, 화면 가로 가운데, 그리고 ＋ 와 **같은 눈높이**에 둔다.
   v92 에서 ＋ 위로 올렸더니 단추를 가리고 위로 솟아 보였다. 높이를 ＋(54px)에
   맞추고 bottom 을 똑같이 주면 두 덩어리의 가운데가 저절로 한 줄에 선다.
   가로는 가운데지만, 오른쪽 ＋ 자리(20+54+12)만큼은 비켜서 절대 겹치지 않는다. */
.toast{
  position:fixed;left:50%;right:auto;transform:translateX(-50%);
  bottom:calc(24px + var(--safe-b));z-index:150;
  min-height:54px;display:inline-flex;align-items:center;
  max-width:calc(100vw - 2 * (20px + 54px + 12px));
  overflow:hidden;text-overflow:ellipsis;
  background:var(--text);color:var(--bg);
  padding:0 20px;border-radius:99px;
  font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:600;white-space:nowrap;
  box-shadow:var(--shadow-2);
  animation:toastIn .2s ease;
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(18px);opacity:.6}to{transform:translateY(0);opacity:1}}
@keyframes popIn{from{transform:translate(-50%,-50%) scale(.96);opacity:0}
                 to{transform:translate(-50%,-50%) scale(1);opacity:1}}
/* v96 — 가운데 정렬로 되돌렸다. translateX 를 쓰고 있으므로 키프레임에도 같이 적어야
   애니메이션이 도는 동안 가운데가 풀리지 않는다 */
@keyframes toastIn{from{transform:translate(-50%, 10px);opacity:0}
                   to{transform:translate(-50%, 0);opacity:1}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ---------- 로그인 ---------- */
.login .sheet__body{max-width:380px;}
.lg-step{display:flex;flex-direction:column;}

.lg-oauth{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px 16px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);
  font-size:var(--t-body);letter-spacing:var(--t-body-ls);font-weight:700;cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
@media (hover:hover){
.lg-oauth:hover{background:var(--hover);border-color:var(--text-3);}
}

.lg-oauth__ico{display:grid;place-items:center;width:18px;height:18px;}
.lg-oauth__ico svg{width:18px;height:18px;}
/* 전역 svg 규칙(선 아이콘용)이 구글 로고의 면을 망가뜨리지 않게 */
.lg-oauth__ico svg path{stroke:none;stroke-width:0;}

.lg-or{
  display:flex;align-items:center;gap:10px;
  margin:16px 0 12px;color:var(--text-3);font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:600;
}
.lg-or::before,.lg-or::after{
  content:"";flex:1 1 auto;height:1px;background:var(--line);
}

.lg-input{width:100%;padding:12px 14px;font-size:var(--t-body);letter-spacing:var(--t-body-ls);}

/* ---------- 메일 + 비밀번호 (v41) ---------- */
.lg-label{
  display:block;margin:12px 2px 5px;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-2);
}
.lg-label:first-of-type{margin-top:4px;}

/* 비밀번호 칸 + 눈 아이콘 */
.lg-pwrap{position:relative;}
.lg-pwrap .lg-input{padding-right:44px;}
.lg-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:32px;height:32px;
  border:0;background:none;border-radius:8px;cursor:pointer;color:var(--text-3);
}
@media (hover:hover){
.lg-eye:hover{background:var(--hover);color:var(--text-2);}
}

.lg-eye svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;}
.lg-eye.on{color:var(--accent);}

/* 비밀번호 길이 안내 — 저장을 누르기 전에 알려준다 */
.lg-hint{margin:6px 2px 0;font-size:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--text-3);}
.lg-hint.bad{color:var(--danger);font-weight:600;}

.lg-full{margin-top:14px;}

/* 설정의 '계정 지우기'는 눈에 띄되 손이 먼저 가지는 않게 */
.btn-ghost.danger{color:var(--danger);}
@media (hover:hover){
.btn-ghost.danger:hover{background:color-mix(in srgb, var(--danger) 10%, transparent);}
}

.lg-full{width:100%;}

.lg-code{
  width:100%;padding:14px;text-align:center;
  font-size:var(--t-display);font-weight:700;letter-spacing:var(--t-display-ls);text-indent:.34em;
  font-variant-numeric:tabular-nums;
}

.lg-msg{
  margin-top:10px;padding:9px 11px;border-radius:10px;
  font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);line-height:var(--t-sub-lh);
  background:color-mix(in srgb, var(--danger) 10%, transparent);
  color:var(--danger);
}
.lg-msg.ok{
  background:color-mix(in srgb, var(--done) 13%, transparent);color:var(--done);
}

.lg-foot{display:flex;gap:7px;justify-content:center;margin-top:14px;}

.lg-skip{
  margin-top:18px;padding:9px;border:0;background:transparent;
  color:var(--text-3);font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
@media (hover:hover){
.lg-skip:hover{color:var(--text-2);}
}


/* 설정 — 계정 */
.acc{
  display:flex;align-items:center;gap:11px;min-width:0;
}
.acc__av{
  width:34px;height:34px;border-radius:99px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);font-size:var(--t-body);letter-spacing:var(--t-body-ls);font-weight:700;
}
.acc__av.off{background:var(--bg-sunken);color:var(--text-3);}
.acc__t{font-size:var(--t-body);letter-spacing:var(--t-body-ls);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acc__d{font-size:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--text-3);margin-top:1px;}

.cfg{display:none;flex-direction:column;gap:7px;padding:2px 0 4px;}
.cfg.open{display:flex;}
.cfg label{font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;color:var(--text-2);}
.cfg .f-input{width:100%;font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);}
.cfg__row{display:flex;gap:7px;}
.cfg__hint{font-size:var(--t-label);letter-spacing:var(--t-label-ls);line-height:var(--t-label-lh);color:var(--text-3);}

/* ---------- 캘린더 띠 ----------
   구글·기기 캘린더에서 읽어온 '약속'. 할 일 카드와 섞이지 않게
   날짜 칸 머리 아래에 얇은 줄로만 둔다. 읽기 전용이라 눌러도 열리지 않는다. */
.calbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  margin:0 0 var(--col-stack);padding:7px 10px;
  border-radius:10px;
  background:color-mix(in srgb, var(--tag-7) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--tag-7) 22%, transparent);
}
.calbar__ico{
  font-size:var(--t-cell);line-height:1;color:var(--tag-7);
  flex:0 0 auto;opacity:.9;
}
.calbar__item{
  display:inline-flex;align-items:baseline;gap:5px;min-width:0;
  font-size:var(--t-cell);color:var(--text-2);
}
.calbar__item b{
  font-weight:700;color:var(--tag-7);font-variant-numeric:tabular-nums;
}
.calbar__item span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px;
}
.calbar__item.allday b{font-size:var(--t-cell);}
.calbar__more{font-size:var(--t-cell);color:var(--text-3);font-weight:700;}
.calbar.demo{
  border-style:dashed;
}
.calbar.demo .calbar__ico::after{
  content:" 예시";font-size:var(--t-cell);font-weight:700;
}

/* 설정 — 캘린더 하위 항목 */
.calsub{
  display:none;flex-direction:column;gap:2px;
  margin:-4px 0 0;padding:2px 0 12px 14px;
  border-left:2px solid var(--line);
}
.calsub.open{display:flex;}
.calsub__row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 0;
}
.calsub__t{font-size:var(--t-cell);font-weight:700;color:var(--text);}
.calsub__d{font-size:var(--t-cell);color:var(--text-3);margin-top:2px;}
.calsub__note{
  font-size:var(--t-cell);line-height:var(--t-label-lh);color:var(--text-3);
  padding:9px 11px;margin-top:4px;
  background:var(--bg-sunken);border-radius:9px;
}
.calsub__note b{color:var(--text-2);}


/* ---------- 밀어서 고치기 · 잊기 ----------
   카드 뒤에 아이콘 두 개를 깔아두고 손가락으로 밀면 드러난다.
   글자는 쓰지 않는다 — 좁은 화면에서는 두 글자도 답답하다.
   마우스에서는 쓰지 않는다. 데스크톱의 가로 드래그는 '다른 날로 옮기기'라서. */
:root{ --sw-w:120px; }

/* 카드가 앉아 있는 칸의 바탕색 (v75).
   .card__slide 가 이 색으로 아이콘을 덮는다. 칸이 바뀌면 여기만 고치면 된다. */
:root{ --card-bg:var(--panel); }           /* 날짜 칸 · 보관함 칸 · 달력 아래 목록 (v104 — 칸과 같은 값) */
/* v78 — v75 에서 시간표 줄의 바탕을 var(--bg) 로 잡았는데 틀렸다. 시간표는
   .col 안에 있고 .col 의 바탕은 --surface-2 다. 한 단계 밝은 색을 칠하는
   바람에 웹에서만 카드가 '테두리 친 상자'처럼 떠 보였다. */
/* v89 — color-mix 를 걷어냈다. 못 읽는 브라우저(오래된 안드로이드 웹뷰)에서는
   이 값이 통째로 버려져 뚜껑이 투명해지고, 뒤에 깔린 '고치기·삭제' 가 비친다.
   시간 미정 묶음은 테두리를 뺀 뒤로 .col 위에 바로 앉으니 같은 색이면 된다. */
/* v105 — '시간 미정' 은 **면 없이** 목록 줄로 둔다.
   시각이 있는 일은 시간표 위 어디에 놓이느냐가 곧 정보라서 면(블록)이 필요하지만,
   시간 미정은 격자 위가 아니라 그냥 줄 목록이다. 거기에 태그 색 면까지 깔리니
   같은 날의 네댓 줄이 서로 다른 색 덩어리로 보여, 블록보다 눈에 먼저 들어왔다.
   태그는 줄 안의 #칩이 이미 말하고 있다 — 할 일 화면의 줄과 같은 방식이다.
   면이 없으니 글자색도 본문색으로 돌려놓는다 (태그색 제목은 면 위에서만 쓴다).
   각(0px)은 그대로 — 하루 화면 안에서 생김새는 하나다 (v104). */
/* v112 에서 하루의 체크를 걷어냈다가 **v114 에서 되살렸다.**
   '하루는 보는 자리' 라는 판단은 맞았지만, 실제로 쓰다 보면 시간표를 보는
   동안 끝난 일이 생긴다 — 그때마다 할 일 화면으로 건너갔다 오게 만드는 건
   화면을 가른 값만큼의 불편이었다. v112 가 걱정한 두 가지는 그대로 남아
   있으므로(아래), 체크를 되살리되 그 둘을 따로 막는다:
     · 좁은 블록에서 제목 자리를 먹는 문제 → .is-short 는 체크를 17px(폰 22)로
     · 체크와 블록 열기가 겹치는 문제     → 체크 둘레에 여백을 둬 손가락이
       닿는 자리를 넓히되, 면 밖으로는 안 나가게 한다 */

.tl__free{ --card-bg:var(--panel); }
.tl__free .card{ background:transparent; border:0; border-radius:0; box-shadow:none; }
.tl__free .card > .card__slide{ border:0; background:transparent; }

.card__slide{
  position:relative;z-index:1;
  /* v70 — 가운데 맞춤. flex-start 이던 때는 글자가 한 줄뿐인 카드에서
     제목이 줄 위쪽에 붙고 아래만 비어 보였다. 체크·손잡이와도 눈높이가 안 맞았다.
     제목은 한 줄로 자르고(line-clamp:1) 보조는 많아야 한 줄이라, 가운데로 맞춰도
     여러 줄 때문에 어긋날 일이 없다. */
  /* v85 — 체크와 글자 사이를 1.5배로 (9 → 13.5). 동그라미와 제목이
     너무 붙어 있어서 체크가 글자의 일부처럼 읽혔다 */
  display:flex;align-items:center;gap:13.5px;
  /* 위 9 / 아래 7 — 광학 보정은 그대로 두고 값만 줄였다 (v62).
     제목의 line-height(1.4)가 만든 반여백이 한글 글꼴 특성상 글자 '아래쪽'에만
     남아서, 위아래를 같은 숫자로 주면 글자가 위로 붙어 보인다. */
  /* v70 — 제목 20(14×1.45) + 보조 16(12×1.35) = 36. 위아래 6 씩이면 48px —
     구글 Tasks 의 할 일 한 건 리듬(48px)과 같아진다.
     v69 의 위7/아래5 광학 보정은 걷어냈다. 가운데 맞춤에서는 그 보정이
     오히려 글자를 아래로 밀어 어긋난다. */
  padding:6px 10px 6px 12px;
  /* v75 — 예전에는 background:inherit 이었다. v72 에서 .card 의 바탕을
     지우자 이 층까지 투명해져서, 뒤에 깔아 둔 '고치기·잊기' 아이콘이
     밀지 않았는데도 늘 비쳐 보였다(휴대폰에서만 — 마우스에서는 아이콘을
     아예 감추니까). 이 층은 아이콘을 덮는 뚜껑이라 불투명해야 한다.
     칸마다 바탕색이 달라서 색은 칸이 --card-bg 로 알려준다. */
  background:var(--card-bg);
  border-radius:inherit;
  transform:translateX(0);
  transition:transform .24s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.card.swiping .card__slide{transition:none;}
.card.swiped  .card__slide{transform:translateX(calc(-1 * var(--sw-w)));}

/* v92 — 미는 중에만 보인다.
   예전에는 늘 깔아 두고 뚜껑(.card__slide)이 덮어 가리는 방식이었다.
   그 뚜껑이 한 번이라도 투명해지거나(색 못 섞는 웹뷰), 복제본이 생기거나,
   자리가 어긋나면 회색·빨강 두 칸이 화면에 그대로 드러났다.
   '미는 중일 때만 존재한다' 로 바꾸면 그런 길이 아예 없다. */
/* v93 — 밀어서 나오는 '고치기·삭제' 는 **동그란 단추 두 개**다.
   예전에는 카드 오른쪽을 꽉 채운 두 개의 네모 면이라, 미는 동안 카드가
   반쯤 다른 색 덩어리로 바뀌는 것처럼 보였다. 동그라미로 띄워 두면
   '카드 위에 얹힌 단추' 로 읽혀서 무엇을 누르는지가 분명하다. */
.card__acts{
  position:absolute;top:0;right:0;bottom:0;z-index:0;
  width:var(--sw-w);
  display:flex;align-items:center;justify-content:flex-end;
  gap:10px;padding-right:12px;
  --act-d:42px;
  border-radius:0;
  overflow:visible;
  visibility:hidden;
}
/* 시간 블록은 높이가 '길이' 라서 30분짜리는 24px 밖에 안 된다 — 거기 맞춘다 */
.tl__events > .card .card__acts{--act-d:30px;gap:7px;padding-right:8px;}
.tl__events > .card.is-short .card__acts{--act-d:19px;gap:5px;padding-right:6px;}
.card.swiping > .card__acts,
.card.swiped  > .card__acts{visibility:visible;}
.card__act{
  flex:0 0 auto;
  width:var(--act-d,42px);height:var(--act-d,42px);
  border-radius:50%;
  display:grid;place-items:center;
  border:0;cursor:pointer;padding:0;color:var(--on-accent);
}
.card__act svg{width:19px;height:19px;stroke-width:1.9;}
.tl__events > .card .card__act svg{width:15px;height:15px;}
.tl__events > .card.is-short .card__act svg{width:11px;height:11px;stroke-width:2.1;}
.card__act.edit{background:var(--text-2);}
.card__act.del{background:var(--danger);}
.card__act:active{filter:brightness(.92);}

/* 열려 있는 동안에는 본문을 눌러도 상세가 열리지 않고 닫히기만 한다 */
.card.swiped .card__body{cursor:default;}

/* 마우스만 쓰는 환경에서는 아예 감춘다 */
@media (hover:hover) and (pointer:fine){
  .card__acts{display:none;}
}

/* ---------- 설정창 — 왼쪽 갈래 · 오른쪽 내용 ----------
   항목이 열 개를 넘어가면 한 줄로 쭉 늘어놓는 건 찾기가 어렵다.
   갈래를 왼쪽에 세우고 한 번에 한 묶음만 보여준다. */
@media (min-width:720px), (min-width:561px) and (pointer:fine){
  .settings2{
    width:min(760px, calc(100vw - 48px));
    padding-bottom:0;
    overflow:hidden;
    display:flex;flex-direction:column;
    max-height:min(620px, calc(100vh - 80px));
  }
}
.set2{display:flex;min-height:0;flex:1 1 auto;}

.set2__nav{
  flex:0 0 auto;
  display:flex;flex-direction:column;gap:2px;
  padding:20px 12px 20px 18px;
  border-right:1px solid var(--line);
  width:184px;
}
.set2__brand{
  font-size:var(--t-head);font-weight:700;letter-spacing:var(--t-head-ls);
  padding:0 10px 14px;color:var(--text);
}
.set2__nav button{
  text-align:left;border:0;background:transparent;cursor:pointer;
  padding:9px 11px;border-radius:9px;white-space:nowrap;
  font-size:var(--t-body);letter-spacing:var(--t-body-ls);font-weight:600;color:var(--text-2);
  transition:background .12s ease, color .12s ease;
}
@media (hover:hover){
.set2__nav button:hover{background:var(--hover);color:var(--text);}
}

.set2__nav button.on{
  background:var(--accent-soft);color:var(--accent);font-weight:700;
}

/* v111 — 묶음 머리(.set2__group)와 하위 갈래(.set2__kids)를 걷어냈다.
   갈래가 보기·할 일 화면·알림·연결 네 줄로 평평해져서, 다섯 줄 모두
   위의 .set2__nav button 한 규칙만 쓴다 (글자 크기·들여쓰기가 모두 같다). */

/* 갈래를 옮길 때마다 창 높이가 출렁이지 않게,
   모든 묶음을 같은 칸에 겹쳐 둔다. 칸 높이는 자동으로 '가장 긴 묶음' 이 된다.
   숨긴 묶음은 자리를 지키되 보이지도, 눌리지도, 읽히지도 않게 한다. */
.set2__body{
  flex:1 1 auto;min-width:0;
  padding:22px 22px 8px;
  overflow-y:auto;
  display:grid;
  align-items:start;
}
.set2__pane{grid-area:1 / 1;min-width:0;}
.set2__body .set2__pane[hidden]{
  display:block !important;
  visibility:hidden;
  pointer-events:none;
}
.set2__h{font-size:var(--t-head);font-weight:700;letter-spacing:var(--t-head-ls);margin:0 0 5px;}
/* v99 — 제목과 도움말 단추가 한 줄에 선다 */
.set2__hrow{display:flex;align-items:center;gap:4px;margin-bottom:6px;}
/* v108 — 제목 줄 오른쪽에 붙는 권한 표시 */
.set2__spacer{flex:1 1 auto;}
.permchip{
  flex:0 0 auto;padding:4px 10px;border-radius:99px;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);font-weight:700;
  background:var(--bg-sunken);color:var(--text-3);
}
.permchip.ok{background:var(--accent-soft);color:var(--accent);}
.permchip.no{background:var(--danger-soft);color:var(--danger);}
.set2__hrow .btn-primary.sm{flex:0 0 auto;}
.set2__hrow .set2__h{margin:0;}
.set2__d{
  font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);line-height:var(--t-sub-lh);color:var(--text-2);
  margin:0 0 6px;
}
.set2__pane > .set-row:first-of-type{border-top:0;}
/* 갈래 안의 작은 구분 제목 */
.set2__sub{
  margin:20px 0 2px;padding:0 0 1px;
  font-size:var(--t-label);font-weight:800;letter-spacing:var(--t-label-ls);
  color:var(--text-3);text-transform:none;
}
/* v112 — '계정' 처럼 아래 줄 제목(.set-row__t)과 같은 급으로 읽혀야 하는 머리.
   작고 흐린 글씨였을 때는 딸린 꼬리표처럼 보여서, 정작 그 아래가
   '계정에 대한 설정' 이라는 게 읽히지 않았다 */
.set2__sub.big{
  font-size:15px;letter-spacing:var(--t-body-ls);font-weight:700;color:var(--text);
}
.set2__sub + .set2__d{margin-top:0;}
.set2__pane > .set-row + .set2__sub{margin-top:22px;}

/* 묶음 제목 옆에 바로 붙는 동작 버튼 (태그 추가 등) —
   '관리' 줄을 따로 두는 것보다 어디를 눌러야 하는지가 분명하다 */
/* v112 — 바깥 여백을 제목(h3)이 아니라 **줄** 이 갖는다.
   제목이 20px 윗마진을 들고 있으면 그 마진까지가 제목의 상자라, 옆에 선
   아이콘이 글자보다 9px쯤 아래에 떠 보인다 (align-items:center 가 마진까지
   센다). 여백을 줄로 올리면 글자와 아이콘의 한가운데가 맞는다 */
.set2__subrow{display:flex;align-items:center;gap:8px;margin:20px 0 2px;}
.set2__subrow .set2__sub{margin:0;}
/* 묶음 제목 옆 아이콘 단추는 태그 ＋ 와 같은 치수·같은 알약 모양 */
.set2__subrow > .sub__add{width:27px;height:27px;border-radius:99px;}
.set2__subrow > .sub__add svg{width:15px;height:15px;stroke-width:2.1;}
.set2__pane > .set-row + .set2__subrow{margin-top:22px;}
.set2__subrow + .set2__d{margin-top:0;}
.sub__add{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;padding:0;
  border:1px solid var(--line);border-radius:6px;
  background:var(--surface);color:var(--text-2);cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.sub__add svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;}
/* v106 — 태그가 '오른쪽 보관함' 과 같은 급의 줄(.set-row)로 올라오면서,
   ＋ 도 그 줄의 다른 단추(내보내기·연결 설정…)와 같은 높이·같은 자리에 선다.
   20px 짜리 작은 사각형이 큰 줄 안에서 위로 떠 보이던 걸 고친다 */
.set-row > .sub__add{
  width:var(--btn-h-sm);height:var(--btn-h-sm);
  border-radius:9px;margin-left:auto;align-self:center;
}
.set-row > .sub__add svg{width:15px;height:15px;stroke-width:2.1;}
@media (hover:hover){
.sub__add:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent);}
}


.set2__note{
  margin-top:14px;padding:11px 13px;border-radius:10px;
  background:var(--bg-sunken);
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);line-height:var(--t-label-lh);color:var(--text-3);
}
.set2__note b{color:var(--text-2);}

.set2__foot{
  flex:0 0 auto;
  display:flex;align-items:center;gap:8px;
  padding:14px 22px;
  border-top:1px solid var(--line);
  padding-bottom:calc(14px + var(--safe-b));
}
.set2__foot .spacer{flex:1 1 auto;}
/* v106 — 버전·만든 곳을 바닥 줄 왼쪽으로. 본문에서는 자리를 안 먹고,
   어느 갈래를 보고 있든 눈에 들어온다. 읽는 글이지 누르는 것이 아니라 흐리게 둔다 */
.set2__ver{
  min-width:0;display:flex;align-items:baseline;gap:5px;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);line-height:1.35;
  color:var(--text-3);user-select:text;
}
.set2__ver b{font-weight:700;color:var(--text-2);}
/* v108 — '만든 곳' 줄을 없앴다. 이름과 버전이 한 줄이라 세로로 쌓을 일도 없다 */
/* v96 — 설정의 '닫기'도 입력 시트·상세의 단추와 같은 치수로 (64 → 92) */
.set2__foot .btn-ghost,
.set2__foot .btn-primary{min-width:92px;padding-left:18px;padding-right:18px;}

/* v108 — 휴대폰에서는 갈래를 **위**로 눕힌다 (PC 는 왼쪽 그대로).
   왼쪽에 세워 두면 좁은 화면에서 가로를 104px 나 떼어 가는데, 그만큼 오른쪽
   내용이 눌려 설명이 세 줄씩 쪼개졌다. 위로 올리면 가로가 통째로 내용 몫이 된다.
   예전에 가로줄을 접었던 까닭은 '알약이 7개라 옆으로 숨는다' 였는데,
   v106 에서 '하루 화면' 갈래가 빠지고 v108 에서 묶음 머리('보기')를 폰에서만
   감추면서 **다섯 개**로 줄었다 — 390px 에 다섯 개면 숨지 않는다.
   그래도 넘칠 때를 대비해 가로로 굴러가게 두고, 스크롤 막대는 감춘다. */
@media (max-width:719px) and (pointer:coarse), (max-width:560px){
  .settings2{display:flex;flex-direction:column;max-height:88vh;}
  .set2{flex-direction:column;overflow:hidden;}
  .set2__nav{
    flex:0 0 auto;width:auto;
    flex-direction:row;align-items:center;gap:6px;
    padding:10px 12px;
    border-right:0;border-bottom:1px solid var(--line);
    overflow-x:auto;overflow-y:hidden;max-height:none;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .set2__nav::-webkit-scrollbar{display:none;}
  .set2__brand{display:none;}
  .set2__nav button{
    flex:0 0 auto;
    padding:8px 13px;border-radius:99px;
    font-size:var(--t-sub);letter-spacing:var(--t-sub-ls);white-space:nowrap;
    background:var(--bg-sunken);color:var(--text-2);
  }
  .set2__nav button.on{background:var(--accent-soft);color:var(--accent);}
  .set2__body{padding:16px 14px 6px;max-height:56vh;}
  .set2__foot{padding:12px 16px;padding-bottom:calc(12px + var(--safe-b));}
  /* 좁아진 오른쪽 칸에서 설명이 버튼을 밀어내지 않게 */
  .set-row{gap:10px;flex-wrap:wrap;}
  .set-row > *:not(:first-child){margin-left:auto;}
  .set-row__d{font-size:var(--t-label);letter-spacing:var(--t-label-ls);}
}
/* 작은 폰(360px대) — 가로 갈래의 알약을 한 치수 줄인다 (v108) */
@media (max-width:400px){
  .set2__nav{padding:9px 10px;gap:5px;}
  .set2__nav button{padding:7px 11px;font-size:var(--t-label);letter-spacing:var(--t-label-ls);}
  .set2__body{padding:16px 12px 6px;}
}


/* 날짜·시간 입력도 버튼과 키를 맞춘다 */
.f-input.sm{min-height:var(--btn-h-sm);}