/* 하루 루틴 기록 — 「케이스별 하루 루틴」 HTML과 같은 색·서체 체계 */
:root{
  --ink:#20262b; --sub:#5f666c; --line:#d6d9d2; --soft:#f1f2ee; --accent:#a3431d;
  --paper:#ffffff; --bg:#e6e4df; --bar:#20262b; --bar-ink:#ffffff;
  --ss:#8e24aa; --ss-soft:#f4e8f7;
  --hh:#f4511e; --hh-soft:#fdece5;
  --ff:#f6bf26; --ff-soft:#fdf4d6; --ff-ink:#6b5200;
  --nn:#0b8043; --nn-soft:#e4f1e8;
  --dd:#039be5; --dd-soft:#e1f3fc;
  --pp:#616161; --pp-soft:#eceeeb;
  --night:#e7ebf1; --night-ink:#3a4a5c;
  --hour:#b9bdb5; --half:#d9dcd5; --quarter:#eceee9; --spine:#9aa09a;
  --danger:#b3261e; --ok:#0b8043; --warn:#c9a227;
  --slot:24px;
  --radius:6px;
  --shadow:0 2px 14px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e6e8ea; --sub:#9aa3ab; --line:#363c42; --soft:#262b30; --accent:#e08a63;
    --paper:#1d2125; --bg:#131619; --bar:#0f1215; --bar-ink:#f2f3f4;
    --ss-soft:#3a2244; --hh-soft:#432419; --ff-soft:#3f3516; --ff-ink:#f6d98a;
    --nn-soft:#17301f; --dd-soft:#142f3d; --pp:#aab1b7; --pp-soft:#2b3035;
    --night:#232b36; --night-ink:#b7c3d3;
    --hour:#4c545b; --half:#3a4147; --quarter:#2a3035; --spine:#5c656d;
    --shadow:0 2px 14px rgba(0,0,0,.5);
  }
}
:root[data-rows="s"]{ --slot:18px; }
:root[data-rows="l"]{ --slot:32px; }
:root[data-theme="dark"]{
  --ink:#e6e8ea; --sub:#9aa3ab; --line:#363c42; --soft:#262b30; --accent:#e08a63;
  --paper:#1d2125; --bg:#131619; --bar:#0f1215; --bar-ink:#f2f3f4;
  --ss-soft:#3a2244; --hh-soft:#432419; --ff-soft:#3f3516; --ff-ink:#f6d98a;
  --nn-soft:#17301f; --dd-soft:#142f3d; --pp:#aab1b7; --pp-soft:#2b3035;
  --night:#232b36; --night-ink:#b7c3d3;
  --hour:#4c545b; --half:#3a4147; --quarter:#2a3035; --spine:#5c656d;
  --shadow:0 2px 14px rgba(0,0,0,.5);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","Nanum Gothic",system-ui,sans-serif;
  font-size:14px; line-height:1.45;
  padding-bottom:env(safe-area-inset-bottom);
}
.serif{ font-family:"Noto Serif KR","AppleMyungjo","Batang",serif; }
a{ color:inherit; }
button{ font:inherit; }
input,textarea,select{
  font:inherit; font-size:16px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:4px; padding:7px 9px; max-width:100%;
}
input:focus,textarea:focus,select:focus{ outline:2px solid var(--ink); outline-offset:0; }
textarea{ width:100%; resize:vertical; min-height:64px; line-height:1.45; }
label{ font-size:12.5px; color:var(--sub); }
small{ color:var(--sub); font-weight:400; }
hr{ border:0; border-top:1px solid var(--line); margin:10px 0; }
.hidden{ display:none !important; }

/* ---- top bar ---- */
.top{
  position:sticky; top:0; z-index:30; background:var(--bar); color:var(--bar-ink);
  display:flex; align-items:center; gap:6px; padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top));
}
/* 첫 줄 제목: Inkburrow (글꼴 파일 fonts/ 에 넣으면 적용, 없으면 아래 대체 글꼴) */
.top .brand{ font-family:"Inkburrow","Noto Serif KR",serif; font-weight:700; font-size:15px; letter-spacing:-.3px; margin-right:6px; white-space:nowrap; }
.top nav{ display:flex; gap:2px; flex:1; overflow-x:auto; }
.top nav a{ color:#cfd3d6; text-decoration:none; padding:6px 9px; border-radius:4px; font-size:13px; white-space:nowrap; }
.top nav a.on{ background:rgba(255,255,255,.16); color:#fff; }
.sync{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:#cfd3d6; text-decoration:none; padding:4px 6px; border-radius:4px; white-space:nowrap; }
.sync .dot{ width:9px; height:9px; border-radius:50%; background:#777; display:inline-block; }
.sync.off .dot{ background:#777; }
.sync.idle .dot{ background:#4caf50; }
.sync.pending .dot{ background:#ffb300; }
.sync.syncing .dot{ background:#42a5f5; animation:pulse 1s infinite; }
.sync.error .dot{ background:#ef5350; }
.sync.offline .dot{ background:#9e9e9e; box-shadow:0 0 0 2px #555 inset; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.wrap{ max-width:1120px; margin:0 auto; padding:12px 16px 90px; }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin-bottom:12px; }
.card h2{ margin:0 0 6px; font-size:14.5px; display:flex; align-items:baseline; gap:6px; }
.card h2 .num{ font-family:"Noto Serif KR",serif; color:var(--accent); }
.card h2 .aside{ margin-left:auto; font-weight:400; font-size:11.5px; color:var(--sub); }
.row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 0; }
.row .sp{ flex:1; }
.muted{ color:var(--sub); font-size:12px; }
.note{ font-size:12px; color:var(--sub); margin:4px 0 0; line-height:1.5; }
.note b{ color:var(--ink); }

/* ---- buttons / chips ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:36px; padding:6px 12px;
  border:1px solid var(--line); border-radius:5px; background:var(--paper); color:var(--ink); cursor:pointer; font-size:13.5px;
}
.btn:hover{ border-color:var(--ink); }
.btn.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn.accent{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.danger{ color:var(--danger); }
.btn.sm{ min-height:30px; padding:3px 9px; font-size:12.5px; }
.btn.icon{ min-width:36px; padding:6px 8px; }
.btn:disabled{ opacity:.45; cursor:default; }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.seg button{ border:0; background:var(--paper); color:var(--sub); padding:7px 12px; cursor:pointer; min-height:36px; }
.seg button.on{ background:var(--ink); color:var(--paper); }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:4px; min-height:34px; padding:4px 11px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink); font-size:13px; cursor:pointer;
}
.chip.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chip.t-ss.on{ background:var(--ss); border-color:var(--ss); color:#fff; }
.chip.t-hh.on{ background:var(--hh); border-color:var(--hh); color:#fff; }
.chip.t-ff.on{ background:var(--ff); border-color:var(--ff); color:var(--ff-ink); }
.chip.t-nn.on{ background:var(--nn); border-color:var(--nn); color:#fff; }
.chip.t-dd.on{ background:var(--dd); border-color:var(--dd); color:#fff; }
.chip small{ color:inherit; opacity:.75; }

.tag{ display:inline-block; font-size:9.5px; font-weight:700; padding:0 4px; border-radius:2px; margin-right:4px; vertical-align:1px; line-height:1.55; letter-spacing:.2px; }
.tag.ss{ background:var(--ss); color:#fff; }
.tag.hh{ background:var(--hh); color:#fff; }
.tag.ff{ background:var(--ff); color:var(--ff-ink); }
.tag.nn{ background:var(--nn); color:#fff; }
.tag.dd{ background:var(--dd); color:#fff; }
.tag.pp{ background:var(--pp); color:#fff; }

/* ---- day header ---- */
.dayhead .date{ display:flex; align-items:center; gap:6px; }
.dayhead .date input[type=date]{ padding:5px 8px; min-height:36px; }
.dayhead .dname{ font-family:"Noto Serif KR",serif; font-weight:700; font-size:16px; }
/* 평일/주말 | 케이스 칩: 한 줄 (넘치면 옆으로 밀어 보기) */
.typecase{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.typecase::-webkit-scrollbar{ display:none; }
.typecase .seg,.typecase .chip{ flex:0 0 auto; }
.typecase .chips{ flex-wrap:nowrap; }
.typecase .vsep{ flex:0 0 1px; align-self:stretch; background:var(--spine); margin:6px 2px; }
.dayhead .casedesc{ font-size:12px; color:var(--sub); }
.dayhead .ssline{ font-size:12.5px; }
.dayhead .ssline b{ color:var(--ss); }
.quickrow{ display:flex; gap:6px; align-items:flex-start; margin:6px 0 2px; }
.quickrow textarea{ flex:1; min-width:0; min-height:40px; height:40px; resize:none; padding:8px 10px; line-height:1.4; font-variant-numeric:tabular-nums; }
.quickrow .btn{ min-height:40px; }
.quickhelp{ font-size:11.5px; color:var(--sub); }
.quickhelp b{ color:var(--ink); }
.quickmsg{ font-size:12.5px; margin-top:4px; padding:5px 8px; border-radius:4px; background:var(--nn-soft); color:var(--ink); }
.quickmsg.warn{ background:var(--hh-soft); }

/* ---- timeline ---- */
.tlwrap{ padding:8px 6px 10px; }
.tl-head,.tl{
  display:grid;
  grid-template-columns:[plan-start] minmax(0,var(--wp,1fr)) [plan-end time-start] 50px [time-end sj-start] 34px [sj-end rb-start] minmax(0,var(--wr,1.15fr)) [rb-end db-start] minmax(0,var(--wd,1.45fr)) [db-end];
}
.tl-head{ position:sticky; top:var(--top-h,45px); z-index:5; background:var(--soft); border-top:1.4px solid var(--ink); border-bottom:1px solid var(--ink); font-size:12px; font-weight:700; }
.tl-head > div{ padding:4px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-head small{ margin-left:4px; font-size:10.5px; }
.tl-head .h-plan{ color:var(--pp); border-right:1px solid var(--spine); }
/* 머리글 칸을 이름 있는 열에 고정 (폰에서 時辰 칸을 숨겨도 어긋나지 않게) */
/* 가운데 머리글 'Routine'은 시각 · 時辰 · 루틴 열을 함께 덮음 */
.tl-head .h-plan{ grid-column:plan; } .tl-head .h-rb{ grid-column:time-start / rb-end; } .tl-head .h-do{ grid-column:db; }
.tl-head .h-do{ border-left:1px solid var(--spine); }
.tl-head [data-col]{ cursor:pointer; position:relative; user-select:none; -webkit-user-select:none; }
.tl-head .h-plan,.tl-head .h-rb{ padding-right:24px; }
.tl-head .rz{ position:absolute; top:0; bottom:0; right:0; width:24px; cursor:col-resize; touch-action:none; display:flex; align-items:center; justify-content:center; color:var(--sub); font-weight:400; }
.tl-head .rz::after{ content:"⋮"; font-size:15px; line-height:1; }
.tl-head .rz:hover,.tl-head .rz.on{ color:var(--accent); background:rgba(163,67,29,.08); }
.tlwrap.f-plan .h-plan,.tlwrap.f-rb .h-rb,.tlwrap.f-db .h-do{ color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); }
.tl-head .hs{ display:none; }
.tl{ position:relative; grid-template-rows:repeat(var(--rows,68), var(--slot)) 24px; }
.tl .ln{ pointer-events:none; z-index:0; }
.tl .ln.lp{ grid-column:plan; }
.tl .ln.lt{ grid-column:time; }
.tl .ln.lm{ grid-column:rb-start / db-end; }
.tl .vl{ pointer-events:none; z-index:0; }
.tl .vl.vp{ grid-column:plan; border-right:1px solid var(--spine); }
.tl .vl.vd{ grid-column:db; border-left:1px solid var(--spine); }
.tl .ln.hr{ border-top:1px solid var(--hour); }
.tl .ln.half{ border-top:1px dashed var(--half); }
.tl .ln.q{ border-top:1px dotted var(--quarter); }
.tl .ln.end{ border-top:1.2px solid var(--ink); }
.tl .tm{ grid-column:time; font-size:10px; color:var(--sub); text-align:center; padding-top:1px; font-variant-numeric:tabular-nums; z-index:1; line-height:1; }
.tl .tm .th{ display:none; }
.tl .sj{
  grid-column:sj; display:flex; align-items:center; justify-content:center; z-index:1;
  font-family:"Noto Serif KR",serif; font-weight:600; font-size:14px; color:var(--ink);
  border-top:1px solid var(--hour);
}
.tl .rb{
  grid-column:rb; z-index:1; margin:1px 2px; padding:1px 5px; border-radius:3px; overflow:hidden; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); font-size:11.5px; line-height:1.25;
}
.tl .rb:hover{ filter:brightness(.97); }
.tl .rb .title{ font-weight:700; }
.tl .rb .detail{ color:var(--sub); font-size:10.5px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl .rb .plan-text{ display:none; color:var(--pp); font-size:10.5px; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl .rb.short{ padding-top:0; padding-bottom:0; white-space:nowrap; text-overflow:ellipsis; }
.tl .rb.short .detail{ display:none; }
.tl .rb.t-ss{ background:var(--ss-soft); border-color:transparent; border-left:3px solid var(--ss); }
.tl .rb.t-hh{ background:var(--hh-soft); border-color:transparent; border-left:3px solid var(--hh); }
.tl .rb.t-ff{ background:var(--ff-soft); border-color:transparent; border-left:3px solid var(--ff); }
.tl .rb.t-nn{ background:var(--nn-soft); border-color:transparent; border-left:3px solid var(--nn); }
.tl .rb.night{ background:var(--night); border-color:transparent; color:var(--night-ink); }
.tl .rb.night .title{ color:var(--night-ink); }
.tl .rb.point{ grid-row:calc(var(--rows,68) + 1); display:flex; align-items:center; }
.tl .catch{ grid-row:1 / calc(var(--rows,68) + 1); z-index:1; cursor:cell; }
.tl .catch.cp{ grid-column:plan; }
.tl .catch.cd{ grid-column:db; }
.tl .hov,.tl .selbox{ margin:1px 2px; border-radius:3px; pointer-events:none; position:relative; }
.tl .hov{ z-index:1; border:1.5px dashed var(--accent); background:var(--soft); }
.tl .selbox{ z-index:5; border:2px solid var(--accent); box-shadow:0 0 0 3px rgba(163,67,29,.2); }
.tl .hov::after,.tl .selbox::after{ content:attr(data-t); position:absolute; left:4px; top:1px; font-size:10px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.tl .pi{
  grid-column:plan; z-index:2; margin:1px 2px; padding:1px 5px; border-radius:3px; overflow:hidden; cursor:pointer;
  font-size:11.5px; line-height:1.25; color:var(--ink); background:var(--pp-soft); border-left:3px solid var(--pp);
  display:flex; flex-direction:column; justify-content:flex-start;
}
.tl .pi.pt-ff{ border-left-color:var(--ff); }
.tl .db{
  grid-column:db; z-index:2; margin:1px 2px; padding:1px 5px; border-radius:3px; overflow:hidden; cursor:pointer;
  font-size:11.5px; line-height:1.25; color:var(--ink); background:var(--paper); border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:flex-start;
}
.tl .db,.tl .pi{ touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
@media (hover:hover){ .tl .db,.tl .pi{ cursor:grab; } }
.tl .db.dragging,.tl .pi.dragging{ z-index:6; cursor:grabbing; box-shadow:0 4px 14px rgba(0,0,0,.28); opacity:.92; }
.tl .db.bad,.tl .pi.bad{ outline:2px dashed var(--danger); outline-offset:-2px; opacity:.6; }
/* 계획·기록 항목: 루틴 열과 같은 형식 — 태그 사각형(진한 색) + 이름, 아래 줄 시각 · 캘린더 */
.tl .db .hd,.tl .pi .hd{ display:block; overflow:hidden; text-overflow:ellipsis; }
.tl .db .txt,.tl .pi .txt{ font-weight:700; }
.tl .db .t,.tl .pi .t{ display:block; font-size:10.5px; color:var(--sub); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl .db .memo,.tl .pi .memo{ font-weight:400; color:var(--sub); }
.tl .db.short,.tl .pi.short{ padding-top:0; padding-bottom:0; white-space:nowrap; text-overflow:ellipsis; display:block; }
.tl .db.short .t,.tl .pi.short .t{ display:none; }
.tl .db.t-ss{ background:var(--ss-soft); border-color:transparent; border-left:3px solid var(--ss); }
.tl .db.t-hh{ background:var(--hh-soft); border-color:transparent; border-left:3px solid var(--hh); }
.tl .db.t-ff{ background:var(--ff-soft); border-color:transparent; border-left:3px solid var(--ff); }
.tl .db.t-nn{ background:var(--nn-soft); border-color:transparent; border-left:3px solid var(--nn); }
.tl .db.t-dd{ background:var(--dd-soft); border-color:transparent; border-left:3px solid var(--dd); }
.tl .now{ position:absolute; left:0; right:0; border-top:2px solid var(--accent); z-index:4; pointer-events:none; }
.tl .now::before{ content:attr(data-t); position:absolute; left:2px; top:-8px; font-size:9.5px; color:var(--accent); background:var(--paper); padding:0 3px; border-radius:2px; }
.legend{ display:flex; gap:10px; flex-wrap:wrap; font-size:11.5px; color:var(--sub); margin:8px 6px 0; align-items:center; }
.legend .sw{ display:inline-block; width:10px; height:10px; border:1px solid var(--line); vertical-align:-1px; margin-right:3px; }

/* ---- footer cards ---- */
.foot{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.foot .card{ margin:0; }
.lists{ display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; margin:8px 0 6px; padding-top:6px; border-top:1px solid var(--line); }
.lst .lh{ font-weight:700; font-size:13px; margin-bottom:2px; }
.lst .lh small{ margin-left:4px; font-size:11px; }
.lst .ln .x{ border:0; background:none; color:var(--sub); cursor:pointer; padding:2px 6px; font-size:13px; min-height:28px; }
.lst .ln .x:hover{ color:var(--danger); }
.lst .ln.add span{ color:var(--sub); }
.lst .ln{ display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid var(--line); }
.lst .ln:last-child{ border-bottom:0; }
.lst .ln span{ font-weight:700; width:16px; color:var(--sub); }
.lst .ln input[type=text]{ flex:1; border:0; border-radius:0; padding:6px 2px; background:transparent; }
.lst .ln input[type=checkbox]{ width:20px; height:20px; }
.lst .ln.done input[type=text]{ text-decoration:line-through; color:var(--sub); }
.rv label{ display:block; margin-top:6px; }
.rv textarea{ min-height:48px; }
.metrics .m{ display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:center; font-size:13px; }
.metrics .m label{ font-size:13px; color:var(--ink); }
.metrics input.hm,.metrics input[type=number]{ width:120px; padding:5px 8px; min-height:34px; }
input.hm{ font-variant-numeric:tabular-nums; letter-spacing:.5px; text-align:center; }
.metrics .ok{ color:var(--ok); font-weight:700; }
.metrics .bad{ color:var(--danger); font-weight:700; }
.metrics .checks{ display:flex; gap:8px; flex-wrap:wrap; font-size:12.5px; }
.metrics .checks span{ padding:2px 7px; border-radius:3px; background:var(--soft); }
.metrics .checks span.ok{ background:var(--nn-soft); color:var(--nn); }
.metrics ul{ margin:4px 0 0; padding-left:18px; font-size:12.5px; color:var(--sub); }
.chk{ display:inline-flex; align-items:center; gap:8px; min-height:36px; cursor:pointer; }
.chk input{ width:20px; height:20px; }

/* ---- tables ---- */
table.grid{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.grid th{ text-align:left; background:var(--soft); border-top:1.4px solid var(--ink); border-bottom:1px solid var(--ink); padding:5px 6px; font-weight:700; }
table.grid td{ border-bottom:1px solid var(--line); padding:5px 6px; vertical-align:top; }
table.grid tr:last-child td{ border-bottom:1.2px solid var(--ink); }
table.grid .c{ text-align:center; }
table.grid .goal{ display:block; font-size:10.5px; color:var(--sub); font-weight:400; }
table.grid td.today{ background:var(--ff-soft); }
table.grid a{ text-decoration:none; border-bottom:1px solid var(--line); }
.fallback td:first-child{ width:42%; }
details summary{ cursor:pointer; font-weight:700; font-size:14px; }
details .card{ margin-top:8px; }

/* ---- sheet / modal ---- */
.ov{ position:fixed; inset:0; background:rgba(0,0,0,.18); z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.sh{
  background:var(--paper); width:100%; max-width:600px; border-radius:14px 14px 0 0; padding:14px 16px calc(20px + env(safe-area-inset-bottom));
  max-height:88vh; overflow:auto; box-shadow:var(--shadow);
}
.sh h3{ margin:0 0 8px; font-size:16px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sh h3 small{ font-weight:400; }
.sh .rule{ font-size:12px; color:var(--sub); margin:2px 0; }
.sh .rule b{ color:var(--accent); }
.sh .wait{ border:1px dashed var(--warn); padding:4px 8px; font-size:12px; margin:6px 0; border-radius:3px; }
.sh .timerow{ display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; }
.sh .timerow .tg{ display:inline-flex; align-items:center; gap:6px; }
.sh .durrow{ margin-top:6px; }
.sh .durrow .lbl{ font-size:12px; color:var(--sub); width:28px; }
.sh .durrow .chip{ min-height:32px; padding:3px 12px; }
.sh .timerow input.hm{ width:84px; padding:5px 6px; min-height:36px; font-size:17px; }
.sh .timerow .lbl{ font-size:12px; color:var(--sub); width:28px; }
.sh .msg{ color:var(--danger); font-size:12.5px; min-height:1.2em; margin:4px 0; }
.sh input[type=text]{ width:100%; }
.sh .actions{ display:flex; gap:6px; margin-top:10px; align-items:center; flex-wrap:wrap; }
.sh .actions .sp{ flex:1; }
@media (min-width:821px){
  .sh{ max-height:62vh; }
}

/* ---- toast ---- */
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  background:var(--ink); color:var(--paper); padding:9px 14px; border-radius:6px; font-size:13px; z-index:100;
  box-shadow:var(--shadow); max-width:90vw; opacity:0; transition:opacity .2s;
}
.toast.show{ opacity:1; }

/* ---- week ---- */
.wk .wnav{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.wk .wtitle{ font-family:"Noto Serif KR",serif; font-weight:700; font-size:16px; }
.wk table.grid td,.wk table.grid th{ text-align:center; }
.wk table.grid td:first-child,.wk table.grid th:first-child{ text-align:left; }
.wk .ok{ color:var(--ok); }
.wk .bad{ color:var(--danger); }

/* ---- routine / settings ---- */
.rt-case{ margin-bottom:10px; }
.rt-case h3{ margin:8px 0 4px; font-size:14px; }
.rt-case table.grid{ font-size:12px; }
.jsoned{ width:100%; min-height:320px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; line-height:1.4; }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:13px; align-items:center; }
.kv code{ font-size:12px; background:var(--soft); padding:2px 5px; border-radius:3px; word-break:break-all; }
.mdprev{ white-space:pre-wrap; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; background:var(--soft); padding:8px; border-radius:4px; max-height:360px; overflow:auto; }
.rt-form .blk{ display:grid; grid-template-columns:104px 104px 70px 1fr 1fr 1fr 28px; gap:4px; align-items:center; margin:3px 0; }
.rt-form .blk input,.rt-form .blk select{ padding:4px 6px; min-height:32px; font-size:13px; width:100%; }
.rt-form .blk .x{ min-height:32px; min-width:28px; padding:0; }
.rt-form .bh{ font-size:11px; color:var(--sub); }

/* ---- responsive ---- */
@media (max-width:820px){
  :root{ --slot:30px; }
  :root[data-rows="s"]{ --slot:24px; }
  :root[data-rows="l"]{ --slot:38px; }
  /* 폰 글자 크기: 본문 17px (Claude 앱 본문 크기), 보조 14–15px */
  body{ font-size:17px; line-height:1.5; }
  input,textarea,select{ font-size:17px; }
  label{ font-size:15px; }
  .wrap{ padding:10px 8px 90px; }
  .top{ gap:4px; }
  .top .brand{ font-size:17px; }
  .top nav a{ font-size:16px; padding:8px 9px; }
  .sync{ font-size:14px; padding:10px 6px; }
  .sync .lbl{ display:none; }
  .sync .dot{ width:12px; height:12px; }
  .card h2{ font-size:18px; }
  .card h2 .aside{ font-size:14px; }
  .muted,.note{ font-size:15px; }
  .btn{ font-size:16px; min-height:42px; }
  .btn.sm{ font-size:15px; min-height:38px; }
  .seg button{ font-size:16px; min-height:42px; padding:7px 14px; }
  .chip{ font-size:16px; min-height:40px; padding:6px 14px; }
  .tag{ font-size:12px; padding:0 5px; }
  .dayhead .dname{ font-size:19px; }
  .dayhead .casedesc,.dayhead .ssline{ font-size:15px; }
  .typecase{ gap:6px; }
  .typecase .chips{ gap:4px; }
  .typecase .seg button{ font-size:15px; padding:6px 8px; min-height:38px; }
  .typecase .chip{ font-size:15px; padding:5px 8px; min-height:38px; }
  .lst .lh{ font-size:17px; }
  .lst .lh small{ font-size:14px; }
  .lst .ln span{ font-size:16px; width:18px; }
  .lst .ln input[type=checkbox],.chk input{ width:24px; height:24px; }
  .quickhelp{ font-size:14px; }
  .quickmsg{ font-size:15px; }
  .legend{ font-size:14px; }
  .metrics .m,.metrics .m label{ font-size:16px; }
  .metrics .checks,.metrics ul{ font-size:15px; }
  table.grid{ font-size:15px; }
  table.grid .goal{ font-size:13px; }
  details summary{ font-size:17px; }
  .sh h3{ font-size:19px; }
  .sh .rule,.sh .wait,.sh .msg{ font-size:15px; }
  .sh .timerow .lbl,.sh .durrow .lbl{ font-size:15px; width:34px; }
  .sh .timerow input.hm{ width:88px; font-size:18px; }
  .sh{ max-height:66vh; padding-top:12px; }
  .sh #d-tags,.sh #d-dom{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; scrollbar-width:none; }
  .sh #d-tags .chip,.sh #d-dom .chip{ flex:0 0 auto; }
  .toast{ font-size:16px; }
  .wk .wtitle{ font-size:19px; }
  .kv{ font-size:16px; }
  .kv code{ font-size:14px; }
  .mdprev{ font-size:13px; }
  .rt-form .blk input,.rt-form .blk select{ font-size:16px; }
  .rt-form .bh{ font-size:13px; }
  /* 시간표 */
  .tl-head,.tl{
    grid-template-columns:[plan-start] minmax(0,var(--wp,.9fr)) [plan-end time-start] 24px [time-end sj-start] 0px [sj-end rb-start] minmax(0,var(--wr,1fr)) [rb-end db-start] minmax(0,var(--wd,1.1fr)) [db-end];
  }
  .tl-head{ font-size:15px; }
  .tl-head > div{ padding:9px 5px; }
  .tl-head small{ display:none; }
  /* 폰: 時辰 열 없음 · 시각은 정시 두 자리 */
  .tl .sj{ display:none; }
  .tl .tm{ font-size:13px; padding-top:2px; }
  .tl .tm .tf{ display:none; }
  .tl .tm .th{ display:inline; }
  .tl .tm.half{ visibility:hidden; }
  .tl .sj{ font-size:17px; }
  .tl .rb,.tl .db,.tl .pi{ font-size:15px; line-height:1.3; margin:1px 1px; padding-left:4px; padding-right:3px; }
  .tl .rb .detail,.tl .db .t,.tl .pi .t{ font-size:13px; }
  .tl .hov::after,.tl .selbox::after{ font-size:12px; }
  .tl .rb .detail{ display:none; }
  /* 폰: ⋮ 끌기 없음 · 머리글 누르면 그 열 접기 (30px 색 띠) */
  .tl-head .rz{ display:none; }
  .tl-head .h-plan,.tl-head .h-rb{ padding-right:5px; }
  .tlwrap.m-plan .h-plan .hl,.tlwrap.m-rb .h-rb .hl,.tlwrap.m-db .h-do .hl{ display:none; }
  .tlwrap.m-plan .h-plan .hs,.tlwrap.m-rb .h-rb .hs,.tlwrap.m-db .h-do .hs{ display:inline; }
  .tlwrap.m-plan .h-plan,.tlwrap.m-rb .h-rb,.tlwrap.m-db .h-do{ padding-left:0; padding-right:0; text-align:center; color:var(--accent); }
  .tlwrap.m-plan .tl .pi > *,.tlwrap.m-rb .tl .rb > *,.tlwrap.m-db .tl .db > *{ visibility:hidden; }
  .tlwrap.m-plan .tl .pi,.tlwrap.m-rb .tl .rb,.tlwrap.m-db .tl .db{ padding:0; }
  .tlwrap.m-plan .tl .rb:not(.short) .detail,.tlwrap.m-db .tl .rb:not(.short) .detail{ display:block; }
  .foot{ grid-template-columns:1fr; }
  .lists{ grid-template-columns:1fr; }
  .rt-form .blk{ grid-template-columns:92px 92px 60px 1fr 28px; }
  .rt-form .blk .wide{ display:none; }
}

/* 좁은 폰(400px 이하): 평일/주말 · 칩 줄을 한 줄에 맞춤 */
@media (max-width:400px){
  .typecase{ gap:4px; }
  .typecase .chips{ gap:3px; }
  .typecase .seg button{ font-size:14px; padding:6px 6px; }
  .typecase .chip{ font-size:14px; padding:5px 6px; }
  .typecase .vsep{ margin:6px 1px; }
}

/* ---- print ---- */
@media print{
  body{ background:#fff; font-size:9pt; }
  .top,.noprint,.legend,.export,.btn,.catch{ display:none !important; }
  .wrap{ max-width:none; padding:0; }
  .card{ border-color:#999; break-inside:avoid; }
  :root,:root[data-rows]{ --slot:4.6mm; --paper:#fff; --ink:#20262b; }
  .tl-head{ position:static; }
  .foot{ grid-template-columns:1fr 1fr; }
  textarea,input{ border:0; border-bottom:1px solid #999; border-radius:0; }
}